/* Opening art direction: Vincent, two cameras, one continuous film.
   Navy / white / VVB blue; existing Poppins and component tokens retained. */
.hero-content{top:34%;width:min(560px,43vw)}
.hero h1{font-size:clamp(46px,4.6vw,68px);line-height:1.12;letter-spacing:-.045em}
.hero .lead{font-size:17px;line-height:1.7;max-width:360px;margin-bottom:28px}
.hero .eyebrow{font-size:11px;letter-spacing:1px;text-transform:none;color:#b5bdca}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero-actions .alternative{margin:0;font-size:13px;padding:12px 0;color:white;border-color:#8B93A1}
.hero-actions .alternative:hover{transform:translateY(-2px);opacity:1}.hero-actions .alternative:active{transform:translateY(1px)}
.portrait-hit span,.focus-corner{display:none}
.portrait-hit:focus-visible{outline:2px solid var(--blue);outline-offset:0}
.hero-bottom .signature{font-size:12px}.hero-bottom .location{font-size:10px}
.hero-bottom .scroll-hint{font-size:10px;color:#c0c7d2}
.hero-content{animation:studio-welcome .75s var(--spring) backwards}
/* Reserve three spoken lines so captions do not move the intro controls. */
#subtitle{min-height:4.2em}
@keyframes studio-welcome{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
/* Space is reserved before WebGL loads; success does not change document height. */
.journey{height:380svh}
.stage{height:100svh;min-height:0;background:#0B0E13}
#scene{z-index:0;pointer-events:none}
.stage::after{display:none}
.stage-copy{z-index:2;top:31%;left:var(--edge);width:37%;max-width:530px;pointer-events:none;will-change:opacity,transform}
.stage-copy::before{display:none}
.stage-copy h2{font-size:clamp(40px,4.1vw,62px);font-weight:500;line-height:1.12;letter-spacing:-.045em;min-height:0;margin:0 0 28px}
.stage-copy p{font-size:17px;line-height:1.75;min-height:0;max-width:360px;color:#b5bdca;margin:0;opacity:1}
.stage-copy .eyebrow{display:none}
.stage-bottom{z-index:6;bottom:28px;pointer-events:none}
.chapters{gap:32px;font-size:11px;pointer-events:auto}
.chapters button{display:flex;gap:10px;align-items:center;min-height:44px;border:0;padding:10px 0;background:transparent;color:#8B93A1;font-size:11px;font-weight:400;text-align:left;transition:transform .2s var(--spring),opacity .2s var(--spring)}
.chapters button span{border:0;padding:0;color:inherit}.chapters button.current{color:#FFFFFF}
.chapters button:hover{color:#FFFFFF;opacity:1;transform:translateY(-2px)}.chapters button:focus-visible{outline:2px solid #3B82F6;outline-offset:6px;border-radius:4px}.chapters button:active{transform:translateY(1px)}
.camera-stills{display:none}
.counter{display:none}.progress-track{z-index:8;background:#1E2530;height:1px}
.website-arrival.work-entry{position:absolute;inset:0;z-index:5;background:#0B0E13;color:white;padding:0;display:block;min-height:0;height:100%;overflow:hidden;transform:none;opacity:0;pointer-events:none}
.stage.arrived .website-arrival{pointer-events:auto}
.work-entry .feature-wrap{position:absolute;inset:0;height:100%;min-height:0;max-height:none}
.work-entry .feature-film{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;border:0;border-radius:0;aspect-ratio:auto}
.work-entry .feature-film img,.work-entry .case-preview{object-fit:cover;object-position:center}
.work-entry .feature-film:hover img{transform:none}.work-entry .feature-film:hover{opacity:1}.work-entry .feature-film:active{transform:none}
.work-entry .feature-film:focus-visible{outline-offset:-8px;outline-width:3px}
.work-entry .feature-film::before{display:none}
.work-entry .feature-film::after{background:linear-gradient(0deg,rgba(11,14,19,.89),rgba(11,14,19,.34) 36%,rgba(11,14,19,.04) 67%,rgba(11,14,19,.30));opacity:var(--arrival-copy,1)}
.work-entry .work-heading{position:absolute;left:var(--edge);bottom:190px;right:var(--edge);z-index:3;display:block;pointer-events:none;opacity:var(--arrival-copy,1)}
.work-entry .work-heading .eyebrow{color:white;font-size:12px;letter-spacing:.3px;text-transform:none;margin:0 0 20px}
.work-entry h2{font-size:clamp(52px,6.2vw,90px);line-height:1.03;letter-spacing:-.05em;max-width:900px;color:white}
.work-entry .film-label{left:calc(var(--edge) + 72px);bottom:104px;right:200px;gap:0;opacity:var(--arrival-copy,1)}
.work-entry .film-label em{font-size:14px;margin:0;min-height:52px;display:flex;align-items:center;gap:32px}.work-entry .film-label em small{font-size:11px;opacity:.7}
.work-entry .film-play{left:var(--edge);bottom:104px;top:auto;right:auto;width:52px;height:52px;background:#FFFFFF10;opacity:var(--arrival-copy,1)}
.work-entry .work-caption{position:absolute;bottom:40px;left:var(--edge);right:var(--edge);z-index:3;color:#c8cdd4;pointer-events:none;font-size:11px;opacity:var(--arrival-copy,1)}
.work-entry .preview-toggle{bottom:104px;right:var(--edge);padding:14px 16px;background:#0B0E1366;border-color:#FFFFFF55;font-size:10px;opacity:var(--arrival-copy,1)}
.work-entry .preview-toggle:hover{opacity:1}
.case-context{padding-top:80px;padding-bottom:80px}
@media(max-width:1000px) and (min-width:701px){.stage-copy{width:38%;top:30%}.stage-copy h2{font-size:42px}.stage-copy p{font-size:16px;max-width:280px}.hero-content{width:45%}.hero .lead{font-size:15px;max-width:320px}}
@media(max-width:700px){
 .hero{height:100svh;min-height:760px}.hero-content{top:auto;bottom:116px;left:24px;width:calc(100% - 48px)}
 .hero h1{font-size:44px;margin:14px 0 20px;line-height:1.12}.hero .lead{font-size:14px;max-width:305px;margin-bottom:24px;line-height:1.7}.hero .eyebrow{font-size:10px}
 .hero-actions{gap:24px}.hero-actions .start{padding:16px 20px}.hero-actions .alternative{font-size:12px}
 .hero-bottom{bottom:36px}.hero-bottom .signature{font-size:10px;max-width:180px;line-height:1.6}.hero-bottom .scroll-hint{font-size:9px;gap:12px}
 .journey{height:350svh}.stage{min-height:0}
 .stage-copy{top:104px;left:24px;width:calc(100% - 48px);max-width:none}
 .stage-copy h2{font-size:36px;line-height:1.13;max-width:342px;margin-bottom:16px}.stage-copy p{font-size:14px;line-height:1.7;max-width:310px}
 .stage-bottom{left:24px;right:24px;bottom:20px}.chapters{font-size:10px;gap:22px}.chapters button{font-size:10px;gap:7px}
 .work-entry .work-heading{left:24px;right:24px;bottom:188px}.work-entry h2{font-size:48px;line-height:1.06;max-width:342px}
 .work-entry .work-heading .eyebrow{font-size:11px;margin-bottom:18px}
 .work-entry .film-label{left:88px;right:24px;bottom:111px}.work-entry .film-label em{font-size:12px;gap:20px}.work-entry .film-label em small{font-size:10px}
 .work-entry .film-play{left:24px;bottom:111px;width:48px;height:48px}
 .work-entry .work-caption{left:24px;right:24px;bottom:28px;font-size:10px}.work-entry .work-caption span:last-child{display:none}
 .work-entry .preview-toggle{top:auto;bottom:36px;right:24px;font-size:9px;padding:10px 12px}
}
@media(max-height:700px) and (min-width:701px){.stage-copy{top:28%}.stage-copy h2{font-size:43px}.stage-copy p{font-size:15px}.work-entry h2{font-size:60px}.work-entry .work-heading{bottom:155px}.work-entry .film-play,.work-entry .film-label,.work-entry .preview-toggle{bottom:75px}.work-entry .work-caption{bottom:25px}}
@media(max-width:360px){.hero-actions{gap:18px}.hero h1{font-size:39px}.stage-copy h2{font-size:32px}.stage-copy p{font-size:13px}.work-entry h2{font-size:42px}}
/* Failure and no-JS fallbacks are ordinary document flow, with no hidden work. */
html:not(.js) .journey,body.scene-fallback .journey{height:auto}
html:not(.js) .stage,body.scene-fallback .stage{position:relative;height:auto;min-height:0;overflow:visible}
html:not(.js) #scene,body.scene-fallback #scene,html:not(.js) .fallback-frame,body.scene-fallback .fallback-frame{display:none}
html:not(.js) .stage-copy,body.scene-fallback .stage-copy{position:relative;inset:auto;width:auto;max-width:none;min-height:370px;padding:96px var(--edge);opacity:1!important;transform:none!important;visibility:visible!important}
html:not(.js) .stage-bottom,body.scene-fallback .stage-bottom{display:none}
html:not(.js) .camera-stills,body.scene-fallback .camera-stills{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 var(--edge) 80px}
.camera-stills figure{margin:0;background:#10151D;border:1px solid #1E2530;border-radius:4px;overflow:hidden}.camera-stills img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}.camera-stills figcaption{padding:24px;font-size:14px;color:#b5bdca;line-height:1.7}
html:not(.js) .website-arrival.work-entry,body.scene-fallback .website-arrival.work-entry{position:relative;inset:auto;height:100svh;min-height:640px;opacity:1!important;transform:none!important;pointer-events:auto;--arrival-copy:1!important}
@media(prefers-reduced-motion:reduce){
 .hero-content{animation:none}.hero-actions a:hover{transform:none}.journey{height:auto}
 .stage{position:relative;height:auto;min-height:0;overflow:visible}
 #scene,.fallback-frame,.stage-bottom{display:none}
 .camera-stills{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 var(--edge) 80px}
 .stage-copy{position:relative;inset:auto;width:auto;max-width:none;min-height:370px;padding:96px var(--edge);opacity:1!important;transform:none!important;visibility:visible!important}
 .website-arrival.work-entry{position:relative;inset:auto;height:100svh;min-height:640px;opacity:1!important;transform:none!important;pointer-events:auto;--arrival-copy:1!important}
}
@media(max-width:900px) and (min-width:701px){
 .stage-copy{top:100px;width:calc(100% - 96px);left:48px;max-width:none}.stage-copy h2{font-size:40px;max-width:460px;margin-bottom:16px}.stage-copy p{max-width:420px;font-size:16px}
}
@media(max-width:700px) and (max-height:760px){
 .stage-copy{top:86px}.stage-copy h2{font-size:30px;line-height:1.14;margin-bottom:12px}.stage-copy p{font-size:13px;line-height:1.65;max-width:305px}
}
@media(max-width:700px){html:not(.js) .camera-stills,body.scene-fallback .camera-stills,.camera-stills{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.chapters button:hover,.chapters button:active{transform:none}}