*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#050506;color:#fff;font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* overflow-x:hidden on body would make it a scroll container and break
position:sticky (hero + FILM V pinning); clip clips without doing that */
html{overflow-x:hidden}
body{overflow-x:clip}
::selection{background:#E11D22;color:#fff}
a{color:inherit}
a:hover{color:#fff}
.mono{font-family:'IBM Plex Mono',monospace}
.disp{font-family:'Saira Condensed',sans-serif;font-weight:700;letter-spacing:.005em;line-height:.92;text-transform:uppercase}
@keyframes rv-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(26px);will-change:opacity,transform}
.rv.in{animation:rv-in .9s cubic-bezier(.16,.84,.44,1) both}
.boot-rv{animation:rv-in .9s cubic-bezier(.16,.84,.44,1) 2s both}
@keyframes lbox{to{height:0}}
@keyframes cuepulse{0%,100%{opacity:.25}50%{opacity:1}}
.btn-r:hover{background:#c2161a !important}
.btn-o:hover{border-color:#fff !important;color:#fff !important}
.navlink:hover{color:#fff !important}
.idxrow:hover{background:rgba(225,29,34,.05) !important;padding-left:34px !important}
.idxrow:hover .idxnum{color:#E11D22 !important}
.idxrow:hover .idxarrow{opacity:1 !important;transform:none !important}
.maillink:hover{color:#E11D22 !important}
/* ============ FILM V — scattered frames → full-screen preview ============ */
/* full-screen focus layers: the clip is object-fit:contain (whole frame always
visible); a blurred copy of its poster fills whatever the clip letterboxes */
/* focus layers are always viewport-fixed; only the active one lights up, becoming a
full-screen lightbox above everything (nav included) */
.dep-layer{position:fixed;inset:0;z-index:1;opacity:0;transition:opacity .55s ease;pointer-events:none}
.dep-layer.on{opacity:1;z-index:9200;pointer-events:auto;cursor:zoom-out}
.dep-blur{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(42px) brightness(.32) saturate(1.06);transform:scale(1.1);will-change:transform}
.dep-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;will-change:transform}
/* scattered frames: outer handles entrance/hide, inner (.dep-par) handles parallax */
.dep-frame{position:absolute;z-index:5;aspect-ratio:16/9;cursor:pointer;opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.44,1)}
#film5.frames-in .dep-frame{opacity:1;transform:none}
#film5.focused .dep-frame{opacity:0;transition-delay:0s !important}
.dep-frame:hover{z-index:9}
.dep-par{position:absolute;inset:0;background:#0a0b0e;border:1px solid rgba(255,255,255,.14);overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease;will-change:transform}
.dep-frame:hover .dep-par{border-color:#E11D22;box-shadow:0 20px 70px rgba(0,0,0,.62)}
.dep-par video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.6) saturate(1.02);transition:filter .3s ease}
.dep-frame:hover .dep-par video{filter:brightness(1.04)}
/* hover cue (desktop) so you can see which frame you're about to open */
.dep-par::before{content:'\25B6 PREVIEW';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;font:600 10px/1 'IBM Plex Mono',monospace;letter-spacing:.22em;color:#fff;background:rgba(225,29,34,.92);padding:9px 13px;white-space:nowrap;opacity:0;transition:opacity .25s ease;pointer-events:none}
.dep-frame:hover .dep-par::before{opacity:1}
/* tap cue (touch) — a persistent expand badge, since there is no hover */
@media (hover:none){
.dep-par::before{content:'\2922 TAP';left:10px;right:auto;top:10px;transform:none;opacity:1;background:rgba(4,4,5,.6);border:1px solid rgba(255,255,255,.28);padding:6px 9px;font-size:9px;letter-spacing:.18em}
}
.dep-par::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 1px,transparent 3px)}
.dep-cap{position:absolute;left:10px;bottom:8px;font-size:9px;letter-spacing:.18em;color:#c6c6cc;z-index:2}
.dep-cap-n{color:#E11D22}
.dep-cap-r{position:absolute;right:10px;top:8px;font-size:8.5px;letter-spacing:.14em;color:#8e8e95;z-index:2}
/* corner switcher — appears while a platform is full-screen */
#dep-switch{position:absolute;right:36px;bottom:44px;z-index:8;display:flex;align-items:center;gap:16px;opacity:0;pointer-events:none;transition:opacity .45s ease}
#film5.focused #dep-switch{opacity:1;pointer-events:auto}
#dep-swname{font-size:22px;color:#fff;margin-right:6px}
.dep-sw{font-size:10px;letter-spacing:.2em;color:#8e8e95;cursor:pointer;padding:6px 2px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.dep-sw:hover{color:#fff}
.dep-sw.on{color:#E11D22;border-bottom-color:#E11D22}
#dep-sw-all{font-size:10px;letter-spacing:.2em;color:#dadadf;cursor:pointer;border:1px solid rgba(255,255,255,.24);padding:8px 12px;transition:border-color .3s,color .3s}
#dep-sw-all:hover{border-color:#fff;color:#fff}
/* the switcher rides above the fixed lightbox */
#film5.focused #dep-switch{position:fixed;right:28px;bottom:28px;z-index:9300}
/* narrow screens: frames stack in flow and simply loop (no full-screen mode) */
@media (max-width:900px){
#film5{height:auto !important;min-height:0 !important;padding:120px 20px 60px}
.dep-frame{position:relative !important;left:auto !important;top:auto !important;width:100% !important;margin:0 0 16px}
#film5-title{position:static !important;margin-top:30px;max-width:none !important}
#dep-chrome-l,#dep-chrome-r{display:none}
}
/* hero subtitle can wrap now — keep it centered under the headline */
.hero-sub{text-align:center;margin-left:auto;margin-right:auto}
/* hero ambient: a blurred moving copy of the clip fills the screen while the
sharp clip sits contained (whole frame, zero crop) on top; when the screen
shape letterboxes the sharp layer, feather its edges into the blur so it
reads as one continuous full-bleed shot. 16:9 screens get no mask. */
@media (max-aspect-ratio: 158/90){
#hero-vid{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
}
@media (min-aspect-ratio: 171/90){
#hero-vid{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
}
/* ============ RESPONSIVE — phones & small tablets ============ */
@media (max-width:900px){
/* FILM V stacked frames have no hover to brighten them — show them lit + still */
.dep-par video{filter:brightness(1) saturate(1.02) !important}
.dep-frame{cursor:pointer}
}
@media (max-width:760px){
/* top bar: drop the text menu (unreachable width), keep the logo */
.topbar{padding:15px 18px !important}
.topnav{display:none !important}
/* the vertical side rail overlaps content on narrow screens */
#rail{display:none !important}
/* hero — smaller type, less clutter, stronger legibility */
#film0 h1{font-size:clamp(30px,8.6vw,46px) !important;max-width:15ch}
.hero-kicker{font-size:9px !important;letter-spacing:.3em !important;margin-bottom:16px !important}
.hero-sub{font-size:10px !important;letter-spacing:.12em !important;line-height:1.75;margin-top:20px !important;max-width:30ch !important}
#hero-rec{display:none !important}
.hero-scroll{display:none !important}
#hero-status{display:none !important}
.hero-credit{left:18px !important;bottom:20px !important}
/* shared bottom-left film titles */
.film-title{left:18px !important;right:18px !important;bottom:24px !important;max-width:none !important}
.film-title p{font-size:13.5px !important;line-height:1.55}
/* FILM I HUD */
#film1 .hud-tl{left:18px !important;font-size:9px !important}
#film1 .hud-tr{right:18px !important;font-size:9px !important}
/* FILM II — stop centering (content is taller than the viewport) and stack cards */
#film2{padding:96px 18px 84px !important;justify-content:flex-start !important;overflow:visible !important;min-height:0 !important}
#film2 .price-cards{flex-direction:column !important;width:100%}
#film2 .price-cards>div{width:100% !important;border-right:none !important;border-bottom:1px solid rgba(255,255,255,.12);padding:20px 22px !important}
#film2 .price-cards>div:last-child{border-bottom:none}
/* FILM III — the sparse kill-chain diagram doesn't read on a phone; hide the
canvas and lay the section out as a clean vertical kill-chain timeline that
fills the screen: title + copy up top, the five phases as a stepped list */
#cv-chain{display:none !important}
#film3{height:auto !important;min-height:0 !important;padding:104px 18px 64px !important}
#film3 .film-title{position:static !important;left:auto !important;right:auto !important;bottom:auto !important;max-width:none !important;margin-bottom:30px}
#chain-phases{position:static !important;display:block !important;text-align:left !important;gap:0 !important;font-size:13px !important}
#chain-phases [data-phase]{color:#d2d2d7 !important;letter-spacing:.2em !important;padding:16px 0 16px 18px !important;border-top:1px solid rgba(255,255,255,.12);border-left:2px solid rgba(225,29,34,.55)}
#chain-phases [data-phase]:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
/* FILM IV — specs sit at the very top over a scrim (the 3D model is pulled
back on phones in JS so it sits lower and clears the text) */
#film4 .spec-list{top:58px !important;left:18px !important;right:18px !important;text-align:left !important;font-size:8.5px !important;line-height:1.9 !important}
#film4::before{content:'';position:absolute;top:0;left:0;right:0;height:170px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,4,5,.82) 0%,rgba(4,4,5,0) 100%)}
#film4 .hud-drag{display:none !important}
#film4 .film-title{bottom:92px !important}
#film4 .fire-controls{right:auto !important;left:18px !important;bottom:26px !important}
/* VI — CONTACT/INDEX: stack the email columns and de-clutter the index rows */
#sec-index{padding:92px 0 48px !important}
#sec-index > div{padding:0 18px !important}
.contact-grid{grid-template-columns:1fr !important}
.idxrow{gap:16px !important;padding:18px 4px !important}
.idxdesc{display:none !important}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0c0c0e}
::-webkit-scrollbar-thumb{background:#26262b}