@font-face { font-family:"Cronic Sans"; src:local("Helvetica Neue"),local("Arial"); font-display:swap; }
:root { --cronic-blue:#72dcff; --cronic-white:#f4f3ef; --case-pad:clamp(1.2rem,3vw,3.2rem); --case-accent-strong:var(--case-accent); --case-on-accent:var(--case-ink); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--case-ink); }
body { margin:0; overflow-x:clip; background:var(--case-ink); color:var(--cronic-white); font-family:"Cronic Sans","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.case-header__logo { width:clamp(6.5rem,8vw,8.5rem); }
.case-header__logo img { width:100%; }
.case-header>p { margin:0; font-size:.55rem; letter-spacing:.18em; }
.case-header>p span { color:var(--case-accent); }
.case-progress { position:fixed; z-index:130; top:0; left:0; width:100%; height:2px; background:rgba(255,255,255,.1); }
.case-progress span { display:block; width:100%; height:100%; background:var(--case-accent); box-shadow:0 0 1.2rem color-mix(in srgb,var(--case-accent) 65%,transparent); transform:scaleX(0); transform-origin:left; }
.case-hero { position:relative; height:100svh; min-height:42rem; overflow:hidden; isolation:isolate; }
.case-hero__image,.case-hero__veil { position:absolute; inset:0; width:100%; height:100%; }
.case-hero__image { z-index:-3; object-fit:cover; object-position:center; transform:scale(1.035); }
.case-hero__image--contain { object-fit:contain; padding:clamp(2rem,6vw,6rem); background:var(--case-ink); transform:none; }
.case-hero__veil { z-index:-2; background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.03) 38%,rgba(0,0,0,.76) 100%),linear-gradient(90deg,rgba(0,0,0,.52),transparent 58%); }
.case-hero__topline { position:absolute; top:7.2rem; left:var(--case-pad); right:var(--case-pad); display:flex; justify-content:space-between; gap:2rem; font-size:.5rem; letter-spacing:.18em; }
.case-hero__title { position:absolute; right:var(--case-pad); bottom:clamp(3.2rem,5vw,5rem); left:var(--case-pad); }
.case-hero__title p,.case-hero__scroll,.case-kicker,.case-index p { margin:0; font-size:.54rem; letter-spacing:.18em; }
.case-hero__title p { color:var(--case-accent); }
.case-hero h1 { margin:.6rem 0 0; font-size:clamp(6rem,16vw,17rem); font-weight:400; letter-spacing:-.085em; line-height:.7; }
.case-hero__title--long h1 { font-size:clamp(4.8rem,11vw,12rem); }
.case-hero__title--compact h1 { font-size:clamp(4rem,8.4vw,9rem); }
.case-hero h1 span,.case-hero h1 em { display:inline-block; }
.case-hero h1 em { margin-left:.06em; color:var(--case-accent); font-style:normal; }
.case-hero__scroll { position:absolute; right:var(--case-pad); bottom:2.2rem; }
.case-hero__scroll i { margin-left:.7rem; color:var(--case-accent); font-style:normal; }
.case-intro { display:grid; min-height:100svh; grid-template-columns:minmax(8rem,.8fr) minmax(0,3.2fr); gap:4vw; align-content:center; padding:10vw var(--case-pad); background:var(--case-paper); color:var(--case-ink); }
.case-index span { display:block; margin-bottom:1rem; color:var(--case-accent-strong); font-size:.68rem; }
.case-intro__copy { grid-column:2; }
.case-kicker { color:var(--case-accent-strong); }
.case-intro h2 { max-width:75rem; margin:1.3rem 0 3rem; font-size:clamp(4rem,9vw,9.5rem); font-weight:400; letter-spacing:-.075em; line-height:.83; }
.case-intro h2 em { color:var(--case-accent-strong); font-style:normal; }
.case-intro__body { width:min(44rem,100%); margin:0 0 0 auto; font-size:clamp(1.12rem,1.55vw,1.48rem); line-height:1.65; }
.case-intro__meta { grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin:7vw 0 0; border-top:1px solid rgba(0,0,0,.28); padding-top:1.2rem; }
.case-intro__meta div { display:grid; gap:.65rem; }
.case-intro__meta dt { color:var(--case-accent-strong); font-size:.48rem; letter-spacing:.17em; }
.case-intro__meta dd { margin:0; font-size:.68rem; letter-spacing:.08em; }
.case-chapters { position:fixed; z-index:24; top:50%; right:1rem; display:grid; gap:.3rem; transform:translateY(-50%); }
.case-chapters a { display:flex; height:1.4rem; justify-content:flex-end; gap:.6rem; align-items:center; color:rgba(255,255,255,.5); font-size:.45rem; letter-spacing:.14em; mix-blend-mode:difference; }
.case-chapters a i { width:0; overflow:hidden; font-style:normal; opacity:0; transition:width .4s,opacity .3s; }
.case-chapters a span { width:1.6rem; text-align:center; transition:color .3s,transform .3s; }
.case-chapters a.is-active span,.case-chapters a:hover span,.case-chapters a:focus-visible span { color:var(--case-accent); transform:translateX(-.2rem); }
.case-chapters a:hover i,.case-chapters a:focus-visible i { width:5.4rem; opacity:1; }
.case-identity,.case-applications { padding:10vw var(--case-pad); }
.case-section-heading { display:grid; grid-template-columns:minmax(8rem,.8fr) minmax(0,3.2fr); gap:4vw; }
.case-section-heading>div:last-child { grid-column:2; }
.case-section-heading h2 { max-width:78rem; margin:1.2rem 0 0; font-size:clamp(4rem,8.7vw,9.2rem); font-weight:400; letter-spacing:-.075em; line-height:.84; }
.case-section-heading h2 em { color:var(--case-accent); font-style:normal; }
.case-section-copy { width:min(40rem,100%); margin:3rem 0 0 auto; color:rgba(244,243,239,.62); font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.65; }
.case-index--dark { color:rgba(244,243,239,.62); }
.case-index--dark span { color:var(--case-accent); }
.case-identity { background:#090908; }
.case-identity__showcase { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(1rem,2vw,2rem); align-items:end; margin-top:8vw; }
.case-identity__showcase--single { grid-template-columns:minmax(0,1fr); }
.case-identity__showcase--single figure { width:min(72rem,100%); }
.case-identity figure,.case-content figure,.case-application { margin:0; }
.case-identity__logo { background:#000; }
.case-identity__sign { margin-bottom:7vw!important; }
.case-identity figure img { width:100%; }
.case-identity figcaption,.case-content figcaption,.case-application figcaption { display:flex; gap:1rem; justify-content:space-between; padding-top:.8rem; color:rgba(244,243,239,.48); font-size:.47rem; letter-spacing:.15em; }
.case-identity figcaption span,.case-content figcaption span { color:var(--case-accent); }
.case-brand-strip { display:flex; justify-content:space-between; gap:1.2rem; align-items:center; margin-top:9vw; border-block:1px solid color-mix(in srgb,var(--case-accent) 38%,transparent); padding:2rem 0; color:rgba(244,243,239,.72); font-size:clamp(.65rem,1vw,.9rem); letter-spacing:.18em; white-space:nowrap; }
.case-brand-strip i { color:var(--case-accent); font-size:1.4rem; font-style:normal; }
.case-production { position:relative; height:min(100svh,64rem); overflow:hidden; background:#000; isolation:isolate; }
.case-production>img { width:100%; height:115%; object-fit:cover; transform:translateY(var(--parallax-y,0)); will-change:transform; }
.case-production::after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.68),transparent 62%); content:""; }
.case-production__caption { position:absolute; z-index:2; top:50%; left:var(--case-pad); display:grid; gap:1rem; transform:translateY(-50%); }
.case-production__caption span { color:var(--case-accent); font-size:.54rem; letter-spacing:.18em; }
.case-production__caption strong { font-size:clamp(5rem,12vw,12rem); font-weight:400; letter-spacing:-.075em; line-height:.73; }
.case-content { padding:10vw var(--case-pad); background:var(--case-paper); color:var(--case-ink); }
.case-section-heading--paper .case-section-copy { color:rgba(9,9,8,.66); }
.case-section-heading--paper h2 em { color:var(--case-accent-strong); }
.case-content__feature { position:relative; margin-top:8vw; }
.case-content__feature img { width:100%; }
.case-content__feature>span { position:absolute; right:1rem; bottom:1rem; padding:.65rem .8rem; background:var(--case-ink); color:var(--case-accent); font-size:.45rem; letter-spacing:.16em; }
.case-content__duo { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr); gap:6vw; align-items:center; margin-top:10vw; }
.case-content__duo figure img { width:100%; }
.case-content__duo figcaption { color:rgba(9,9,8,.55); }
.case-content__quote small { color:var(--case-accent-strong); font-size:.48rem; letter-spacing:.16em; }
.case-content__quote blockquote { margin:2rem 0 0; font-size:clamp(1.7rem,3.2vw,3.4rem); font-weight:420; letter-spacing:-.04em; line-height:1.12; }
.case-content__quote--single { width:min(52rem,100%); margin:8vw 0 0 auto; }
.case-social-gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2rem); align-items:start; margin-top:11vw; }
.case-social-gallery figure:first-child { grid-column:1/9; }
.case-social-gallery figure:nth-child(2) { grid-column:9/13; margin-top:9vw; }
.case-social-gallery figure:nth-child(3) { grid-column:3/11; margin-top:4vw; }
.case-social-gallery img { width:100%; }
.case-social-gallery figcaption { color:rgba(9,9,8,.48); }
.case-videos { padding:10vw var(--case-pad); background:var(--case-ink); color:var(--cronic-white); }
.case-videos .case-kicker,.case-videos .case-index span { color:var(--case-accent); }
.case-videos .case-section-copy { color:rgba(244,243,239,.68); }
.case-video-gallery { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); align-items:start; margin-top:8vw; }
.case-video-card { grid-column:span 6; min-width:0; margin:0; }
.case-video-card--portrait { grid-column:span 4; }
.case-video-card--featured { grid-column:1/-1; }
.case-video-card__frame { position:relative; overflow:hidden; background:#050505; border:1px solid color-mix(in srgb,var(--case-accent) 28%,transparent); box-shadow:0 1.5rem 4rem rgba(0,0,0,.2); }
.case-video-card--landscape .case-video-card__frame { aspect-ratio:16/9; }
.case-video-card--portrait .case-video-card__frame { aspect-ratio:9/16; }
.case-video-card video { display:block; width:100%; height:100%; object-fit:contain; background:#050505; }
.case-video-card figcaption { display:flex; gap:1rem; justify-content:space-between; padding-top:.8rem; color:rgba(244,243,239,.54); font-size:.47rem; letter-spacing:.15em; line-height:1.45; }
.case-video-card figcaption span { color:var(--case-accent); }
.case-applications { background:var(--case-accent); color:var(--case-on-accent); }
.case-applications .case-kicker,.case-applications .case-index span { color:color-mix(in srgb,var(--case-on-accent) 76%,transparent); }
.case-applications .case-section-heading h2 em { color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--case-on-accent) 78%,transparent); }
.case-applications .case-section-copy { color:color-mix(in srgb,var(--case-on-accent) 70%,transparent); }
.case-applications__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); margin-top:8vw; }
.case-application { background:#0b0b0a; }
.case-application--wide { grid-column:1/-1; }
.case-application img { width:100%; }
.case-application figcaption { padding:.9rem 1rem 1.1rem; color:rgba(255,255,255,.55); }
.case-result { position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(8rem,.8fr) minmax(0,3.2fr); gap:4vw; align-content:center; overflow:hidden; padding:10vw var(--case-pad); isolation:isolate; }
.case-result__background,.case-result__veil { position:absolute; z-index:-2; inset:-8%; width:116%; height:116%; }
.case-result__background { object-fit:cover; transform:translateY(var(--parallax-y,0)); will-change:transform; }
.case-result__veil { z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.25) 64%,rgba(0,0,0,.7)),linear-gradient(180deg,#090908 0,transparent 25%,transparent 75%,#090908 100%); }
.case-result__copy { grid-column:2; }
.case-result__copy>p:first-child { margin:0; color:var(--case-accent); font-size:.54rem; letter-spacing:.18em; }
.case-result h2 { margin:1.4rem 0 3rem; font-size:clamp(4.4rem,9.5vw,10rem); font-weight:400; letter-spacing:-.075em; line-height:.82; }
.case-result h2 em { color:var(--case-accent); font-style:normal; }
.case-result__copy>p:last-child { width:min(34rem,100%); margin-left:auto; color:rgba(244,243,239,.68); font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.65; }
.case-next { position:relative; min-height:82svh; display:flex; overflow:hidden; flex-direction:column; justify-content:center; padding:9vw var(--case-pad); background:#050505; color:var(--cronic-white); isolation:isolate; }
.case-next__media,.case-next__veil { position:absolute; inset:0; z-index:-2; }
.case-next__media { background:url("/assets/posters/cronic-mission.jpg") center/cover no-repeat; }
.case-next__media video { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:grayscale(.35) saturate(.72) contrast(1.18) brightness(.68); transform:scale(1.035); }
.case-next__veil { z-index:-1; background:linear-gradient(90deg,rgba(5,5,5,.82),rgba(5,5,5,.2) 58%,rgba(5,5,5,.64)),linear-gradient(180deg,rgba(5,5,5,.34),transparent 38%,rgba(5,5,5,.78)); }
.case-next>p { margin:0 0 4vw; color:var(--case-accent); font-size:.54rem; letter-spacing:.18em; }
.case-next a { --case-glow-x:32%; --case-glow-y:54%; position:relative; display:grid; border-top:1px solid rgba(244,243,239,.42); padding-top:1.5rem; isolation:isolate; transition:border-color .45s ease; }
.case-next a::before { position:absolute; z-index:-1; inset:-34% -4% -42%; background:radial-gradient(ellipse 38% 58% at var(--case-glow-x) var(--case-glow-y),color-mix(in srgb,var(--case-accent) 38%,transparent),color-mix(in srgb,var(--case-accent) 13%,transparent) 38%,transparent 74%); content:""; opacity:0; transform:scale(.88); transform-origin:var(--case-glow-x) var(--case-glow-y); mix-blend-mode:screen; pointer-events:none; transition:opacity .55s ease,transform .85s cubic-bezier(.16,1,.3,1); }
.case-next a span,.case-next a strong { position:relative; z-index:1; display:block; font-size:clamp(4.5rem,10.5vw,11rem); font-weight:400; letter-spacing:-.075em; line-height:.77; transition:filter .55s ease; }
.case-next a strong { margin-left:17vw; color:transparent; -webkit-text-stroke:1px rgba(244,243,239,.78); }
.case-next a i { position:absolute; right:0; bottom:.5rem; color:var(--case-accent); font-size:clamp(2rem,4vw,4rem); font-style:normal; transition:transform .35s; }
.case-next a:hover,.case-next a:focus-visible { border-top-color:color-mix(in srgb,var(--case-accent) 76%,white); outline:none; }
.case-next a:hover::before,.case-next a:focus-visible::before { opacity:.78; transform:scale(1); }
.case-next a:hover span,.case-next a:hover strong,.case-next a:focus-visible span,.case-next a:focus-visible strong { filter:drop-shadow(0 0 1.15rem color-mix(in srgb,var(--case-accent) 20%,transparent)); }
.case-next a:hover i,.case-next a:focus-visible i { transform:translate(.5rem,-.5rem); }
.case-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; padding:4rem var(--case-pad) 2rem; border-top:1px solid rgba(255,255,255,.14); }
.case-footer img { width:8rem; }
.case-footer p,.case-footer a { margin:0; font-size:.5rem; letter-spacing:.16em; }
.case-footer a { justify-self:end; }
.reveal { opacity:0; transform:translateY(2.5rem); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity:1; transform:none; }
.case-hero h1,.case-intro h2,.case-section-heading h2,.case-result h2,.case-next a span,.case-next a strong { font-weight:420; }
.case-hero h1 em,.case-intro h2 em,.case-section-heading h2 em,.case-applications .case-section-heading h2 em,.case-result h2 em,.case-next a strong { font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:400; letter-spacing:-.055em; }
.case-hero h1 em,.case-intro h2 em,.case-section-heading h2 em,.case-applications .case-section-heading h2 em,.case-result h2 em { font-size:.88em; }
.case-next a strong { font-size:clamp(4rem,9.2vw,9.7rem); }
@media(max-width:760px){.case-header{grid-template-columns:1fr auto;height:5rem}.case-header>p,.internal-section-link{display:none}.case-chapters{display:none}.case-hero{min-height:38rem}.case-hero__image{object-position:75% center}.case-hero__image--contain{object-position:center;padding:4.5rem 1rem 12rem}.case-hero__topline{top:6rem;flex-direction:column;gap:.55rem}.case-hero h1{font-size:clamp(5.2rem,25vw,9rem);line-height:.72}.case-hero__title--long h1{font-size:clamp(3.8rem,18vw,6.8rem)}.case-hero__title--compact h1{font-size:clamp(3rem,14vw,5.6rem)}.case-hero h1 span,.case-hero h1 em{display:block}.case-hero h1 em{margin-left:12vw}.case-hero__scroll{display:none}.case-intro,.case-section-heading,.case-result{grid-template-columns:1fr}.case-intro{padding-block:7rem}.case-intro__copy,.case-intro__meta,.case-section-heading>div:last-child,.case-result__copy{grid-column:1}.case-intro__copy,.case-section-heading>div:last-child,.case-result__copy{margin-top:3.5rem}.case-intro__meta{grid-template-columns:1fr;gap:1.2rem;margin-top:5rem}.case-intro__meta div{grid-template-columns:5rem 1fr}.case-identity,.case-content,.case-videos,.case-applications,.case-result{padding-block:7rem}.case-identity__showcase{grid-template-columns:1fr;margin-top:5rem}.case-identity__sign{margin-bottom:0!important}.case-brand-strip{overflow:hidden;justify-content:flex-start}.case-production{height:72svh}.case-production__caption strong{font-size:clamp(4.5rem,23vw,8rem)}.case-content__duo{grid-template-columns:1fr;margin-top:6rem}.case-content__quote{padding:2rem 0}.case-social-gallery{display:flex;width:100%;overflow-x:auto;gap:1rem;margin-top:6rem;padding-right:0;scroll-snap-type:x mandatory}.case-social-gallery figure,.case-social-gallery figure:first-child,.case-social-gallery figure:nth-child(2),.case-social-gallery figure:nth-child(3){flex:0 0 86vw;margin-top:0;scroll-snap-align:start}.case-video-gallery{grid-template-columns:1fr;gap:2.4rem;margin-top:6rem}.case-video-card,.case-video-card--portrait,.case-video-card--featured{grid-column:1}.case-video-card--portrait{width:min(100%,28rem);margin-inline:auto}.case-applications__grid{grid-template-columns:1fr}.case-application--wide{grid-column:auto}.case-result{min-height:90svh}.case-next{min-height:70svh}.case-next a strong{margin-left:8vw}.case-footer{grid-template-columns:1fr auto}.case-footer p{display:none}}
@media(max-width:760px){.case-hero__title{bottom:7.4rem}.case--project .case-hero__title h1{font-size:clamp(2rem,var(--case-title-mobile),9rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.case-next__media video{display:none}.case-next a::before,.case-next a span,.case-next a strong,.case-next a i{transition:none}}