@view-transition { navigation: auto; }

.case-page {
  --case-accent: #16d7d2;
  overflow-x: clip;
  background: #f7f7f4;
}

.case-page::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 3px;
  background: var(--case-accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: case-progress 900ms cubic-bezier(.22,1,.36,1) 100ms forwards;
  pointer-events: none;
}

.case-intro {
  position: relative;
  min-height: min(820px, calc(100svh - 82px));
  display: grid;
  align-items: stretch;
  padding: clamp(52px, 6vw, 92px) 0 clamp(56px, 7vw, 104px);
  overflow: hidden;
}

.case-intro::after {
  content: "";
  position: absolute;
  right: -12vw;
  bottom: -34vw;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  background: var(--case-accent);
  opacity: .09;
  filter: blur(2px);
  pointer-events: none;
  transform: scale(.72);
  transition: transform 1.8s cubic-bezier(.22,1,.36,1), opacity 1.2s ease;
}

.case-ready .case-intro::after { transform: scale(1); opacity: .13; }

.case-intro .section-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(calc(100% - 72px), 1440px);
}

.case-intro .text-link {
  width: fit-content;
  font-size: 14px;
  text-decoration: none;
  transition: transform 260ms ease;
}

.case-intro .text-link:hover { transform: translateX(-4px); }

.case-intro h1 {
  max-width: 1320px;
  margin: auto 0 clamp(52px, 7vw, 100px);
  font: 400 clamp(72px, 11.2vw, 170px)/.86 "TWK Lausanne", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .008em;
  text-wrap: balance;
}

.case-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(520px, .9fr);
  align-items: end;
  gap: clamp(56px, 9vw, 160px);
  padding-top: 28px;
  border-top: 1px solid rgba(6,7,10,.22);
}

.case-kicker {
  max-width: 840px;
  margin: 0;
  font: 400 clamp(28px, 3.2vw, 49px)/1.08 "TWK Lausanne", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .012em;
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px 36px;
  margin: 0;
}

.case-fact { min-width: 0; }
.case-fact dt {
  margin-bottom: 7px;
  color: #747985;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.case-fact dd { margin: 0; font-size: 14px; line-height: 1.35; }

.case-scroll-cue {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #666c7a;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.case-scroll-cue::after { content: "↓"; color: #06070a; font-size: 16px; }

.case-visual {
  position: relative;
  width: min(calc(100% - 48px), 1560px);
  height: min(86svh, 980px);
  min-height: 660px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #0b0c10;
  clip-path: inset(4% 5% round 24px);
  transform: translateY(28px);
  transition: clip-path 1.35s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
}

.case-ready .case-visual { clip-path: inset(0 round 18px); transform: none; }

.case-visual img,
.case-visual video {
  width: 100%;
  height: 112%;
  min-height: 100%;
  display: block;
  object-fit: cover;
  transform: translateY(var(--media-shift, -5%)) scale(1.045);
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter 800ms ease;
  will-change: transform;
}

.case-visual:hover img,
.case-visual:hover video { filter: saturate(1.06) contrast(1.015); }
.case-visual--portrait img,
.case-visual--portrait video { object-position: center 48%; }

.case-visual-caption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  margin: 0;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(11,12,16,.66);
  color: #fff;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.case-chapter { padding: clamp(120px, 15vw, 230px) 0; border-bottom: 1px solid #d6d9df; }
.case-chapter-grid { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: clamp(56px, 11vw, 190px); }
.case-chapter h2 { max-width: 1050px; margin: 0 0 42px; font: 400 clamp(48px, 6vw, 90px)/1 "TWK Lausanne","Helvetica Neue",Arial,sans-serif; letter-spacing:.01em; text-wrap:balance; }
.case-chapter-copy { max-width: 900px; }
.case-chapter-copy p { max-width: 780px; font-size: clamp(20px,2vw,28px); line-height:1.48; }
.case-chapter-copy p + p { margin-top: 24px; }
.case-lead { color:#737985; font-size:clamp(14px,1.2vw,17px)!important; line-height:1.55!important; }
.case-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 42px; margin:56px 0 0; padding:0; list-style:none; }
.case-list li { padding:20px 0; border-top:1px solid #d6d9df; font-size:clamp(17px,1.5vw,22px); }

.case-decisions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:64px; background:#cfd2d7; border:1px solid #cfd2d7; }
.case-decision { min-height:260px; padding:clamp(28px,3vw,44px); background:#f7f7f4; }
.case-decision span { display:block; margin-bottom:72px; color:#777d88; font-size:11px; letter-spacing:.08em; }
.case-decision h3 { max-width:390px; margin:0 0 16px; font:400 clamp(25px,2.2vw,34px)/1.08 "TWK Lausanne","Helvetica Neue",Arial,sans-serif; letter-spacing:.012em; }
.case-decision p { margin:0; font-size:16px; line-height:1.48; }

.case-outcome { padding:clamp(110px,13vw,190px) 0; background:var(--case-accent); color:#0b0c10; }
.case-outcome-grid { display:grid; grid-template-columns:170px minmax(0,1fr); gap:clamp(56px,11vw,190px); }
.case-outcome .eyebrow { color:currentColor; opacity:.58; }
.case-outcome h2 { max-width:1100px; margin:0 0 38px; font:400 clamp(48px,6vw,90px)/1 "TWK Lausanne","Helvetica Neue",Arial,sans-serif; letter-spacing:.01em; text-wrap:balance; }
.case-outcome p { max-width:780px; margin:0; font-size:clamp(20px,2vw,28px); line-height:1.48; }
.case-source { margin-top:30px!important; font-size:13px!important; line-height:1.5!important; opacity:.68; }
.case-source a { text-underline-offset:4px; }

.case-quote { padding:clamp(120px,15vw,230px) 0; background:#0b0c10; color:#fff; }
.case-quote blockquote { max-width:1240px; margin:0; font:400 clamp(48px,7.5vw,112px)/1 "TWK Lausanne","Helvetica Neue",Arial,sans-serif; letter-spacing:.012em; text-wrap:balance; }

.next-case { display:block; padding:clamp(100px,13vw,190px) 0; background:var(--case-accent); color:#0b0c10; text-decoration:none; }
.next-case--light { color:#fff; }
.next-case .eyebrow { color:currentColor; opacity:.62; }
.next-case h2 { margin:18px 0 0; font:400 clamp(52px,8vw,120px)/.98 "TWK Lausanne","Helvetica Neue",Arial,sans-serif; letter-spacing:.012em; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.next-case:hover h2 { transform:translateX(14px); }

.case-page.case-motion-ready .case-intro .text-link,
.case-page.case-motion-ready .case-intro h1,
.case-page.case-motion-ready .case-intro-grid,
.case-page.case-motion-ready .case-scroll-cue {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.case-page.case-motion-ready .case-intro .text-link { transform:translateY(16px); }
.case-page.case-motion-ready.case-ready .case-intro .text-link,
.case-page.case-motion-ready.case-ready .case-intro h1,
.case-page.case-motion-ready.case-ready .case-intro-grid,
.case-page.case-motion-ready.case-ready .case-scroll-cue { opacity:1; transform:none; }
.case-page.case-motion-ready.case-ready .case-intro h1 { transition-delay:100ms; }
.case-page.case-motion-ready.case-ready .case-intro-grid { transition-delay:220ms; }
.case-page.case-motion-ready.case-ready .case-scroll-cue { transition-delay:360ms; }

.case-page .reveal-case { opacity:0; transform:translateY(44px); transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,1,.36,1); }
.case-page .reveal-case.is-visible { opacity:1; transform:none; }

@keyframes case-progress { to { transform:scaleX(1); } }

@media (max-width: 1050px) {
  .case-intro-grid { grid-template-columns: 1fr; gap: 44px; }
  .case-intro h1 { font-size: clamp(70px, 13.5vw, 138px); }
  .case-facts { max-width: 720px; }
}

@media (max-width: 900px) {
  .case-intro { min-height: calc(100svh - 68px); padding: 34px 0 48px; }
  .case-intro .section-shell { width: min(calc(100% - 32px), 1440px); }
  .case-intro h1 { margin: auto 0 42px; font-size: clamp(60px, 16vw, 108px); line-height:.9; }
  .case-kicker { font-size:clamp(27px,7vw,40px); }
  .case-scroll-cue { display:none; }
  .case-visual { width:calc(100% - 24px); height:72svh; min-height:560px; border-radius:12px; clip-path:inset(3% 3% round 16px); }
  .case-ready .case-visual { clip-path:inset(0 round 12px); }
  .case-chapter-grid { grid-template-columns:1fr; gap:32px; }
  .case-outcome-grid { grid-template-columns:1fr; gap:32px; }
  .case-list { grid-template-columns:1fr; }
  .case-decisions { grid-template-columns:1fr; }
  .case-page .footer-top { grid-template-columns:1fr; }
  .case-page .footer-brand { grid-column:auto; }
}

@media (max-width: 560px) {
  .case-intro { min-height:calc(100svh - 68px); }
  .case-intro h1 { font-size:clamp(58px,18vw,82px); }
  .case-intro-grid { gap:34px; padding-top:22px; }
  .case-facts { gap:22px 20px; }
  .case-fact dd { font-size:13px; }
  .case-visual { height:68svh; min-height:520px; }
  .case-chapter { padding:100px 0; }
  .case-chapter h2 { font-size:42px; }
  .case-quote { padding:110px 0; }
  .case-quote blockquote { font-size:44px; }
  .next-case { padding:90px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .case-page::before { animation:none; transform:none; }
  .case-intro::after,
  .case-visual,
  .case-visual img,
  .case-visual video,
  .case-page .reveal-case { transition:none; transform:none; }
  .case-visual { clip-path:none; }
  .case-page.case-motion-ready .case-intro .text-link,
  .case-page.case-motion-ready .case-intro h1,
  .case-page.case-motion-ready .case-intro-grid { opacity:1; transform:none; }
}