/* Editable hero: the central 92% stays fully opaque, including both players. */
:root { --hero-graphite:#000000; --hero-max-width:1920px; --hero-edge:4%; }
.hero { display:block; min-height:100svh; padding:80px 0 100px; background:var(--hero-graphite); }
.hero .hero-scene { position:relative; inset:auto; width:min(100%,var(--hero-max-width),124.444svh); aspect-ratio:16/9; margin:0 auto; overflow:visible; clip-path:none!important; }
.hero .hero-scene::after { display:none; }
.hero-media { position:absolute; inset:0; -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) calc(var(--hero-edge)*.2),rgba(0,0,0,.78) calc(var(--hero-edge)*.4),rgba(0,0,0,.94) calc(var(--hero-edge)*.65),#000 var(--hero-edge),#000 calc(100% - var(--hero-edge)),rgba(0,0,0,.94) calc(100% - var(--hero-edge)*.65),rgba(0,0,0,.78) calc(100% - var(--hero-edge)*.4),rgba(0,0,0,.45) calc(100% - var(--hero-edge)*.2),transparent 100%); mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) calc(var(--hero-edge)*.2),rgba(0,0,0,.78) calc(var(--hero-edge)*.4),rgba(0,0,0,.94) calc(var(--hero-edge)*.65),#000 var(--hero-edge),#000 calc(100% - var(--hero-edge)),rgba(0,0,0,.94) calc(100% - var(--hero-edge)*.65),rgba(0,0,0,.78) calc(100% - var(--hero-edge)*.4),rgba(0,0,0,.45) calc(100% - var(--hero-edge)*.2),transparent 100%); }
.hero .film-poster,.hero #heroVideo { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.hero #heroVideo { opacity:0; transition:opacity 800ms ease; }
.hero.video-ready #heroVideo { opacity:1; }
.hero .hero-text { width:min(90%,1440px); margin:32px auto 0; transform:none!important; opacity:1!important; }
.hero h1 { font-size:clamp(3rem,6vw,6.5rem); margin:18px 0; }
.hero h1 .line-mask { display:inline; }
.hero h1 .line-mask + .line-mask::before { content:' '; }
.hero h1 .line-mask>span { display:inline; }
.hero .hero-bottom { align-items:center; }
.hero .hero-bottom p { margin:0; }
.hero-player-controls { display:flex; justify-content:center; padding:14px 5vw 0; }
.hero-player-controls button { background:transparent; color:#d3d0d8; border:1px solid #686973; border-radius:30px; padding:10px 18px; font-size:12px; }
.hero-player-controls button:hover { background:#27272e; }
@media(max-width:700px) {
  :root { --hero-edge:1.5%; }
  .hero { padding-top:85px; min-height:auto; padding-bottom:105px; }
  .hero .hero-text { margin-top:28px; }
  .hero h1 { font-size:clamp(2.9rem,12vw,5rem); }
  .hero .eyebrow { font-size:9px; letter-spacing:.12em; }
}
@media(prefers-reduced-motion:reduce) { .hero #heroVideo { transition:none; } }

/* Original supplied logo. Black blends into the header via its difference mode. */
.site-header .brand { display:block; position:relative; width:132px; height:54px; overflow:hidden; flex-shrink:0; }
.site-header .brand img { position:absolute; width:166px; max-width:none; height:auto; left:-17px; top:-20px; }
@media(max-width:700px) {
  .site-header .brand { width:108px; height:44px; }
  .site-header .brand img { width:136px; left:-14px; top:-16px; }
}




/* Hero copy scale; preserve the existing typeface, media ratio and reveal effects. */
.hero h1{font-size:clamp(2rem,4vw,4rem);line-height:1.02;margin:12px 0}
.hero .hero-bottom p{font-size:clamp(12px,1vw,14px);line-height:1.5}
@media(max-width:700px){.hero h1{font-size:clamp(30px,9vw,40px)}.hero .hero-bottom p{font-size:13px}}
/* Center the introduction on the video axis. */
.hero .hero-text{text-align:center;width:94%}
.hero .eyebrow{justify-content:center}
.hero .hero-bottom{justify-content:center;position:relative}
.hero .hero-bottom p{max-width:none;white-space:nowrap;font-size:clamp(24px,2vw,28px);line-height:1.5}
.hero .hero-bottom .scroll-hint{position:absolute;right:0;top:100%;margin-top:20px}
@media(max-width:1100px){.hero .hero-bottom p{white-space:normal;text-wrap:balance;font-size:26px}}