.project-page main{position:relative;z-index:1}
.project-page figure{margin:0;min-width:0}
.case-hero{background:var(--ink);color:white}
.case-title{padding-top:156px;padding-bottom:64px;display:grid;grid-template-columns:2fr 1fr;gap:64px;align-items:end}
.case-back{font-size:15px;display:inline-block;margin-bottom:30px}
.case-back:hover{color:var(--pink)}
.case-title h1{font-size:clamp(80px,12vw,180px);line-height:.88;letter-spacing:-.055em}
.case-hero-note{padding-bottom:6px}
.case-hero-note>.eyebrow{font-weight:400;line-height:1.6;margin-bottom:24px}
.case-hero-note>p:not(.eyebrow){font-size:clamp(26px,3vw,42px);line-height:1.15;max-width:340px;margin-bottom:30px}
.case-cover{width:100%;height:auto;max-height:85svh;object-fit:cover;object-position:center}
.case-overview{display:grid;grid-template-columns:1fr 1fr;gap:8%}
.case-section h2{font-size:clamp(40px,5.3vw,76px);font-weight:700;line-height:1.04}
.case-section .eyebrow{margin-bottom:24px}
.case-body p,.case-copy>p:not(.eyebrow){font-size:var(--body-size);line-height:var(--body-leading);letter-spacing:0}
.case-body p+p{margin-top:22px}
.case-facts{display:grid;grid-template-columns:1fr 2fr;gap:30px;margin:36px 0 0;border-top:1px solid #24365c30;padding-top:24px}
.case-facts dt{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.case-facts dd{margin:0;font-size:16px;line-height:1.5}
.project-page main>.case-media{padding-top:0;padding-bottom:0}
.case-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.case-pair img,.case-process>figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.case-process{background:#f9edf1;margin-top:var(--section-space)}
.case-copy{display:grid;grid-template-columns:1.25fr 1fr;column-gap:10%;align-items:end;margin-bottom:48px}
.case-copy>.eyebrow{grid-column:1/-1}
.case-copy h2{max-width:620px}
.case-process>figure{margin-top:40px}
.case-process figcaption{font-size:14px;margin-top:12px}
.project-page .case-process+.case-media{padding-top:var(--section-space)}
.case-video{position:relative;aspect-ratio:16/9;background:var(--ink);color:white;overflow:hidden}
.case-video>img,.case-player{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-player iframe{width:100%;height:100%;border:0;display:block}
.case-video figcaption{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:16px;font-size:12px;pointer-events:none;text-shadow:0 1px 5px #000;background:#24365c70;padding:8px 12px;border-radius:4px}
.case-video figcaption span{opacity:.8}
.case-video-pair figcaption span{display:none}
.case-next{background:#f3f3f6}
.case-next>.eyebrow{margin-bottom:24px}
.case-next>a{font-size:clamp(36px,6vw,84px);font-weight:700;line-height:1.1;letter-spacing:-.04em;display:flex;justify-content:space-between;align-items:center;gap:24px}
.case-next>a:hover{color:var(--pink)}
.case-reveal{opacity:0;transition:opacity 1.1s ease}
.case-reveal.is-visible{opacity:1}
@media(max-width:800px){.case-title{grid-template-columns:1fr;gap:32px;padding-top:130px;padding-bottom:44px}.case-title h1{font-size:clamp(78px,15vw,130px)}.case-hero-note>p:not(.eyebrow){max-width:none;font-size:28px}.case-hero-note>.eyebrow{margin-bottom:12px}.case-overview,.case-copy{grid-template-columns:1fr;gap:28px}.case-copy>.eyebrow{margin-bottom:0}.case-overview{gap:36px}.case-pair{gap:16px}.case-video figcaption span{display:none}.case-cover{min-height:280px;object-position:65% center}}
@media(max-width:550px){.case-pair{grid-template-columns:1fr}.case-video figcaption{font-size:11px;top:6px;left:6px;right:6px;padding:5px 8px}.case-facts{grid-template-columns:1fr;gap:20px}.case-copy{margin-bottom:30px}.case-next>a{font-size:38px}.case-title h1{font-size:clamp(70px,17vw,94px)}}
@media(prefers-reduced-motion:reduce){.case-reveal{opacity:1;transition:none}}

/* Match the homepage hero typography and keep project films unobstructed. */
.case-title h1{font-size:clamp(80px,10.6vw,165px);font-weight:700;line-height:.94;letter-spacing:-.025em}
.case-hero .case-video{width:100%}
.case-video iframe{pointer-events:none}
.case-next .news-image{aspect-ratio:1.5;margin-bottom:20px}
.case-next .news-controls #news-status{min-width:0}
@media(max-width:900px){.case-title h1{font-size:12vw}}
@media(max-width:650px){.case-title h1{font-size:clamp(54px,12vw,78px)}}

/* Full-width stills and alternating final film moments. */
.case-full-still,.case-full-video{margin-top:24px}
.case-full-still img{width:100%;height:auto;display:block}
@media(max-width:550px){.case-full-still,.case-full-video{margin-top:16px}}

/* Preserve portrait app screens within the shared paired-image layout. */
.case-pair .case-portrait{background:white;padding:24px}
.case-pair .case-portrait img{aspect-ratio:auto;object-fit:contain;width:100%;height:620px}
@media(max-width:650px){.case-pair .case-portrait img{height:440px}}

.case-hero #in-motion>figure:not(.case-video) img{display:block;width:100%;height:auto}
.case-craft .case-pair:has(>figure:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.case-craft .case-pair:has(>figure:nth-child(3):last-child) img{height:auto}
@media(max-width:550px){.case-craft .case-pair:has(>figure:nth-child(3):last-child){grid-template-columns:1fr}}

.case-pair>figure:only-child{grid-column:1/-1}

/* Give long project names the space they need without shrinking the hero type. */
.case-title:has(h1[data-long-title]){grid-template-columns:1fr}
.case-title:has(h1[data-long-title]) .case-hero-note{max-width:600px}

/* Preserve the complete original artwork on this case study. */
.preserve-image-ratios .case-pair{align-items:start}
.preserve-image-ratios main>section:not(.case-next):not(.contact) figure img{aspect-ratio:auto;width:100%;height:auto;max-height:none;object-fit:contain}

.case-pair>.case-span-full{grid-column:1/-1}

.case-character-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center;margin-bottom:24px}
.case-character-intro>div{padding:0 8%}
.case-character-intro h2{margin-bottom:24px}
.case-character-intro>div>p:not(.eyebrow){font-size:var(--body-size);line-height:var(--body-leading);letter-spacing:0}
@media(max-width:550px){.case-character-intro{grid-template-columns:1fr}.case-character-intro>div{padding:16px 0}}

.compact-project main>.case-media{padding-bottom:var(--section-space)}

.case-facts .treatment-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.case-facts .treatment-link:hover{color:var(--pink)}