/* Only new media elements: preserve all existing Canvas and text geometry. */
.hero-media{position:absolute;inset:0;z-index:1;pointer-events:none}.hero-media[hidden]{display:none}#hero-video{display:block;width:100%;height:100%;object-fit:cover}.hero-media-shade{position:absolute;inset:0;background:linear-gradient(0deg,#060b0caa,transparent 65%)}
#hero-play{position:absolute;right:24px;top:155px;z-index:3;background:#0b1521;color:#e8f0f8;border:1px solid #b9dffa;padding:12px}
#ai-film{position:absolute;left:32px;top:27%;width:38%;opacity:var(--ai-reveal-progress,0);visibility:hidden;pointer-events:none;color:#e8f0f8;transform:translateY(calc(12px * (1 - var(--ai-reveal-progress,0))));transition:none}#ai-film.is-visible{visibility:visible}#ai-film.is-interactive{pointer-events:auto}#ai-film-label{font:11px/1.8 monospace;margin:0 0 12px}#ai-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#080c12}.media-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.media-actions button{font:12px/1.5 Arial;padding:12px;border:1px solid #b9dffa;background:#0b1521;color:#e8f0f8}.media-actions button:disabled{opacity:.5}#media-status{font-size:12px;line-height:1.6;min-height:20px}
@media(max-width:1000px),(max-height:600px){#ai-film{position:relative;left:auto;top:auto;width:auto;padding:32px 20px;background:#0b1521}}

@media(prefers-reduced-motion:reduce){#ai-film{transform:none;transition:none}}
body.reduced-motion #ai-film{transform:none;transition:none}

/* Keep sound.js and its accessible status text; remove the duplicate visual label. */
#sound-status{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

#sound-status[hidden]{display:none!important}
#sound-toggle:focus{outline:none}
#sound-toggle:focus-visible{outline:3px solid #b9dffa;outline-offset:5px}
#sound-toggle.pointer-focus:focus{outline:none}

/* Keep the poster beneath the original mosaic throughout loading. */
.hero-media{background:#070B10;visibility:visible}
#hero-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#hero-poster{opacity:1;transition:opacity .4s ease;z-index:1}
.hero-media.is-video-presented #hero-poster{opacity:0}
.hero-media-shade{z-index:2}
/* Keep the loader's original background, tile opacity and text styles. */
.opening-media{display:none}
#loader:not([hidden]) ~ main #hero-play{visibility:hidden}
@media(prefers-reduced-motion:reduce){#hero-poster{transition:none}}
body.reduced-motion #hero-poster{transition:none}

/* Mobile continuation only: retain the 380vh timeline and ABOUT geometry. */
@media(max-width:700px){.intro{top:clamp(100px,14svh,140px)}#ai-film{margin-top:var(--compact-ai-offset,-320px)}}

/* Lighter header paint only; preserve height, position and button hit targets. */
#site-header{background:linear-gradient(180deg,rgba(11,21,33,.5) 0%,rgba(11,21,33,.13) 55%,rgba(11,21,33,0) 100%)}
#site-header .header-actions button,#header-word{text-shadow:0 1px 4px rgba(0,0,0,.7)}

@media(max-width:700px){.journey{height:calc(380vh - min(300px,30svh))}}

/* Keep PC header controls over the unobscured showreel. */
@media(min-width:701px){#site-header{background:none;}}

/* SOUND keeps its hit area and keyboard focus; only its own paint is transparent. */
#site-header #sound-toggle{background:transparent;color:#fff}