/* Full-window showreel, approved 16 September 2026. Loaded only on the homepage. */
.home-main { display:grid; width:100%; max-width:none; padding:0; }
.site-header { position:absolute; z-index:5; top:0; left:4%; right:4%; width:auto; max-width:none; color:#fff; border-color:#ffffff45; }
.site-header .brand img { filter:drop-shadow(0 1px 5px #0003); }
.site-header .site-navigation a { color:#fff; text-shadow:0 1px 12px #0006; }
.site-header .site-navigation a:hover,
.site-header .site-navigation a[aria-current=page] { border-bottom-color:#fff; }
.site-header>.menu-toggle { color:#fff; }
.home-main>.editorial-heading { grid-area:1/1; align-self:end; z-index:3; width:92%; max-width:none; margin:0 auto 152px; padding:0; color:#fff; pointer-events:none; text-shadow:0 2px 24px #0004; }
.home-main>.editorial-heading h1 { font-size:clamp(43.2px,5.84vw,96px); font-weight:350; line-height:1.02; letter-spacing:-.045em; }
.home-main .editorial-eyebrow { margin-bottom:17px; }
.home-main .editorial-description { color:#fff; font-size:16px; line-height:1.6; padding-bottom:6px; }
.home-reel { grid-area:1/1; min-width:0; height:100svh; min-height:520px; }
.home-reel:not(:fullscreen) .home-reel-stage { height:100%; min-height:0; max-height:none; aspect-ratio:auto; }
.home-reel:not(:fullscreen) .home-reel-stage video { object-fit:cover; object-position:center; }
.home-reel-stage::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#06101394 0%,#06101322 23%,transparent 45%,#0610134d 66%,#061013df 100%); pointer-events:none; }
.home-reel-label { display:none; }
.home-reel:not(:fullscreen) .home-reel-controls { position:absolute; z-index:4; top:auto; bottom:52px; left:4%; right:4%; padding:0; border:0; background:none; color:#fff; backdrop-filter:none; gap:20px; }
.home-reel-buttons { gap:30px; }
.home-reel-controls button { color:#fff; }
.home-reel-progress { position:absolute; z-index:4; bottom:47px; left:4%; right:4%; height:1px; background:#ffffff4d; }
.home-reel-progress span { background:#fff; }
.home-music-credit { position:absolute; z-index:4; bottom:15px; left:4%; margin:0; color:#fff; font-size:10px; }
.home-music-credit[open] { padding:14px 18px; background:#111e24f2; border:1px solid #ffffff40; max-width:min(560px,92vw); }
.home-main>.home-intro { grid-row:2; width:92%; max-width:1660px; margin:0 auto; padding-top:70px; }
.site-header a:focus-visible,.site-header button:focus-visible,.home-reel button:focus-visible,.home-reel summary:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.home-reel:fullscreen .home-reel-stage::after { display:none; }
.home-reel:fullscreen .home-reel-progress { position:static; }
@media(max-width:850px) {
  .home-main>.editorial-heading { display:block; margin-bottom:157px; }
  .home-main>.editorial-heading h1 { font-size:clamp(41.6px,7.2vw,60.8px); }
  .home-main .editorial-description { display:block; max-width:none; margin:20px 0 0; padding:0; text-align:left; font-size:14px; }
  .home-reel-buttons { gap:22px; }
}
@media(max-width:520px) {
  .site-header { left:6%; right:6%; }
  .home-main>.editorial-heading { width:88%; margin-bottom:155px; }
  .home-main>.editorial-heading h1 { max-width:330px; font-size:clamp(38.4px,9.6vw,49.6px); }
  .home-main .editorial-eyebrow { font-size:9px; letter-spacing:.12em; margin-bottom:12px; }
  .home-reel:not(:fullscreen) .home-reel-controls { left:6%; right:6%; bottom:55px; gap:12px; }
  .home-reel-buttons { gap:17px; }
  .home-reel-buttons button { font-size:12px; }
  .home-reel-time { font-size:10px; }
  .home-reel-progress { left:6%; right:6%; }
  .home-music-credit { left:6%; }
}
@media(max-width:380px) {
  .home-reel:not(:fullscreen) .home-reel-controls { flex-wrap:nowrap; }
  .home-reel-buttons { gap:12px; }
  .home-reel-time { font-size:9px; }
}
@media(max-height:560px) and (min-width:700px) {
  .home-reel { min-height:400px; }
  .site-header { min-height:82px; padding-top:14px; padding-bottom:14px; }
  .site-header .brand { width:160px; }
  .home-main>.editorial-heading { margin-bottom:120px; }
  .home-main>.editorial-heading h1 { font-size:44.8px; }
  .home-main .editorial-eyebrow { margin-bottom:9px; }
}

/* Keep the reversed brand readable above the film and the page below. */
.site-header{position:fixed;z-index:50;background:transparent;transition:background-color .15s}
.site-header.is-scrolled{background:#172126f5}
.site-header::before{inset:0 -4.3478261%}
@media(max-width:520px){.site-header::before{inset:0 -6.8181819%}}