.case-detail-static {
  background: #08170e;
}

.case-detail-static:not(.case-index-static) {
  background: #17382a;
}

.case-detail-static #main-content {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: clip;
}

.case-detail-static #main-content > :not(.case-static-backdrop):not(.case-solid-backdrop) {
  position: relative;
}

.case-detail-static #main-content > .case-solid-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #17382a;
}

.case-detail-static #main-content > .case-static-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: #07130b;
}

.case-static-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.94) saturate(.86);
}

.case-static-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(2 10 5 / 22%);
}

.case-detail-backdrop img {
  object-position: center 48%;
  filter: brightness(.78) saturate(.84);
}

.case-detail-backdrop::after {
  background:
    linear-gradient(180deg, rgb(2 10 5 / 42%) 0%, rgb(2 10 5 / 16%) 30%, rgb(2 10 5 / 34%) 100%),
    rgb(2 10 5 / 10%);
}

.case-detail-static .liquid-glass {
  background: rgb(8 24 15 / 58%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.case-detail-static .liquid-glass-strong {
  background: rgb(8 24 15 / 66%);
  -webkit-backdrop-filter: blur(34px);
  backdrop-filter: blur(34px);
}

.case-detail-static .breadcrumbs {
  position: relative;
  padding-top: 24px;
  color: #d7e9db;
}

.case-detail-static .breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 36px;
}

.case-detail-static .breadcrumbs li {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  line-height: 1.4;
}

.case-detail-static .breadcrumbs li + li::before {
  display: inline-grid;
  place-items: center;
  align-self: stretch;
  width: 36px;
  margin: 0;
  padding: 0;
}

.case-detail-static .breadcrumbs a {
  min-height: 36px;
}

.case-detail-page {
  position: relative;
  color: white;
  font-family: "Barlow", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.case-detail-shell {
  padding-block: clamp(56px, 7vw, 104px) clamp(88px, 9vw, 132px);
}

.case-detail-layout {
  display: grid;
  grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
  align-items: stretch;
  column-gap: clamp(48px, 7vw, 112px);
  row-gap: 0;
  padding: clamp(38px, 4.8vw, 72px);
}

.case-detail-lead,
.case-detail-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.case-return {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin-bottom: 32px;
  color: var(--green);
  font-size: 14px;
  text-decoration: none;
}

.case-return .link-arrow {
  transform: rotate(180deg);
}

.case-detail-lead h1 {
  max-width: 13ch;
  margin: 0;
  color: white;
  font: 400 clamp(44px, 4.4vw, 64px) / 1.18 var(--liquid-heading);
  letter-spacing: -.03em;
  text-wrap: balance;
}

.case-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 34px;
}

.case-detail-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgb(223 241 226 / 28%);
  border-radius: 999px;
  background: rgb(8 24 15 / 48%);
  color: #eff8f1;
  font-size: 14px;
  backdrop-filter: blur(10px);
}

.case-detail-summary {
  grid-column: 2;
  padding-top: 68px;
}

.case-detail-summary h2,
.case-other-cases h2 {
  margin: 0;
  color: white;
  font: 400 clamp(32px, 3.7vw, 52px) / 1.2 var(--liquid-heading);
  letter-spacing: -.025em;
}

.case-detail-summary p {
  width: 100%;
  max-width: 62ch;
  margin: 24px 0 32px;
  color: var(--liquid-copy);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.case-detail-summary .button-primary {
  margin-top: auto;
  color: #07180d;
  background: var(--green);
  border-color: var(--green);
}

.case-detail-summary .button-primary:hover {
  color: #07180d;
  background: #8bffb2;
  border-color: #8bffb2;
}

.case-detail-content {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 4vw, 52px);
  padding-top: clamp(40px, 4vw, 52px);
  border-top: 1px solid rgb(223 241 226 / 22%);
}

.case-story-section + .case-story-section {
  margin-top: clamp(42px, 5vw, 68px);
  padding-top: clamp(42px, 5vw, 68px);
  border-top: 1px solid rgb(223 241 226 / 18%);
}

.case-story-section > .section {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.case-story-section > .scene-section {
  padding: 0;
}

.case-story-section > .scene-section > .shell {
  display: block;
  width: 100%;
  padding: 0;
}

.case-detail-static .case-story-section .section-heading {
  display: grid;
  grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 60px);
  margin: 0;
  padding: 0 0 26px;
}

.case-detail-static .case-story-section .section-heading h2,
.case-detail-static .case-story-section .prose-section > h2,
.case-detail-static .case-story-section .image-text h2 {
  max-width: 16ch;
  margin: 0;
  color: white;
  font: 400 clamp(30px, 3vw, 44px) / 1.25 var(--liquid-heading);
  letter-spacing: -.025em;
}

.case-detail-static .case-story-section .section-heading p {
  max-width: 62ch;
  margin: 0;
  color: var(--liquid-copy);
  font-size: 16px;
  line-height: 1.85;
}

.case-detail-static .case-story-section .advantage-list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  border: 0;
}

.case-detail-static .case-story-section .advantage-list li,
.case-detail-static .case-story-section .advantage-list li + li {
  display: grid;
  grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(28px, 4vw, 60px);
  padding: 26px 0;
  border: 0;
  border-top: 1px solid rgb(223 241 226 / 18%);
}

.case-detail-static .case-story-section .advantage-list h3 {
  margin: 0;
  color: white;
  font: 400 clamp(23px, 2vw, 30px) / 1.35 var(--liquid-heading);
  letter-spacing: -.015em;
}

.case-detail-static .case-story-section .advantage-list p,
.case-detail-static .case-story-section .richtext {
  max-width: 68ch;
  margin: 0;
  color: var(--liquid-copy);
  font-size: 16px;
  line-height: 1.9;
}

.case-detail-static .case-story-section .prose-section {
  display: block;
}

.case-detail-static .case-story-section .prose-section .richtext,
.case-detail-static .case-story-section .image-text .richtext {
  margin-top: 22px;
}

.case-other-cases {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 100px);
  margin-top: clamp(88px, 10vw, 148px);
  margin-bottom: clamp(84px, 9vw, 132px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid rgb(223 241 226 / 24%);
}

.case-other-cases p {
  max-width: 40ch;
  margin: 20px 0 0;
  color: var(--liquid-copy);
  line-height: 1.8;
}

.case-other-cases ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(223 241 226 / 20%);
}

.case-other-cases li {
  border-bottom: 1px solid rgb(223 241 226 / 20%);
}

.case-other-cases a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding-block: 16px;
  color: white;
  text-decoration: none;
  transition: color 180ms ease;
}

.case-other-cases a:hover {
  color: var(--green);
}

.case-other-cases .link-arrow {
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.case-other-cases a:hover .link-arrow,
.case-other-cases a:focus-visible .link-arrow {
  transform: translate(5px, -5px);
}

.case-index-static .page-header {
  min-height: 48svh;
  align-content: end;
}

.case-index-list {
  margin-bottom: 112px;
  padding: clamp(24px, 3.5vw, 48px);
}

.case-index-list .index-row,
.case-index-list .index-row:last-of-type {
  border-color: rgb(223 241 226 / 20%);
}

.case-index-list .index-row p {
  color: var(--liquid-copy);
}

.case-index-list .row-action {
  color: var(--green);
}

@media (max-width: 900px) {
  .case-detail-layout,
  .case-other-cases {
    grid-template-columns: 1fr;
  }

  .case-detail-layout {
    column-gap: 0;
    row-gap: 0;
  }

  .case-detail-summary,
  .case-detail-content {
    grid-column: 1;
  }

  .case-detail-summary {
    margin-top: 42px;
    padding-top: 0;
  }

  .case-detail-lead h1 {
    max-width: 14ch;
  }

}

@media (max-width: 640px) {
  .case-static-backdrop img {
    object-position: 64% center;
  }

  .case-detail-static .breadcrumbs {
    padding-top: 18px;
  }

  .case-detail-static .breadcrumbs li + li::before {
    width: 28px;
  }

  .case-detail-layout {
    padding: 28px 22px;
  }

  .case-detail-summary {
    margin-top: 32px;
  }

  .case-return {
    margin-bottom: 22px;
  }

  .case-detail-lead h1 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .case-detail-pills {
    margin-top: 24px;
  }

  .case-detail-shell {
    padding-block: 40px 72px;
  }

  .case-detail-summary h2,
  .case-other-cases h2 {
    font-size: 34px;
  }

  .case-detail-static .case-story-section .section-heading h2,
  .case-detail-static .case-story-section .prose-section > h2,
  .case-detail-static .case-story-section .image-text h2 {
    font-size: 30px;
  }

  .case-detail-static .case-story-section .advantage-list li,
  .case-detail-static .case-story-section .advantage-list li + li {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0;
  }

  .case-detail-static .case-story-section .section-heading {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 24px;
  }

  .case-other-cases {
    gap: 28px;
    margin-top: 72px;
    margin-bottom: 72px;
    padding: 32px 0 0;
  }

  .case-index-list {
    margin-bottom: 72px;
    padding: 16px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-other-cases a,
  .customer-case-card {
    transition: none;
  }
}