/* Only the homepage hero. Keep the existing navigation and page styles. */
.hero-film{background:#050606;color:#f3f0e9}
.hero-film .hero-scene,.hero-film.motion-enabled .hero-scene{inset:0;height:100%;animation:none;transform:none;will-change:auto}
.hero-film .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;opacity:0;pointer-events:none}
.hero-film.video-playing .hero-video{opacity:1}
.hero-film .hero-image{object-position:70% center}
/* Darken the background gently, with extra contrast behind the copy. */
.hero-film .hero-wash{background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.34) 60%,rgba(0,0,0,.22));pointer-events:none}
.hero-film .hero-copy{width:86.4%;max-width:none;transform:translateY(-25px)}
.hero-film h1{font-size:clamp(27px,3.25vw,58px);letter-spacing:.047em;line-height:1.3}
.hero-slogan{display:flex;gap:.27em;white-space:nowrap}
.hero-word{display:inline-block;opacity:1;transform:none}
.hero-dot{font-size:.7em;vertical-align:.08em;margin-right:.38em}
.hero-film .hero-copy>p{font-size:14px;line-height:1.6;color:rgba(243,240,233,.9);text-shadow:none}
.hero-film .hero-copy .short-line{width:36px}
.hero-film .hero-copy .button{padding:10px 18px;min-height:44px;min-width:232px;gap:30px}
.hero-film .outlined{border-color:#d7d1c5;background:transparent;color:#f3f0e9}
.hero-film .outlined:hover{background:var(--paper);color:var(--ink)}
.hero-film .process-link{bottom:calc(17% + 20px);right:calc(3.5% + 20px)}
.hero-film .process-link small{font-size:10.5px}
@media(min-width:1800px){.hero-film .hero-copy>p{font-size:15px}}
@media(min-width:761px) and (max-width:1200px){.hero-film .hero-copy>p{font-size:13.5px}}
@media(min-width:761px) and (max-width:1100px){.hero-film{height:660px}.hero-film .hero-copy{top:28%;left:5%;width:90%}.hero-film h1{font-size:3.55vw}}
@media(max-width:760px){
  .hero-film{height:clamp(740px,100svh,840px);max-height:none;background:#000}
  .hero-film .hero-copy{left:7%;right:7%;top:140px;width:auto}
  .hero-film h1{font-size:clamp(29px,7.5vw,48px);line-height:1.28;letter-spacing:.073em}
  .hero-slogan{display:flex;flex-direction:column;gap:0;white-space:normal}
  .hero-dot{display:none}
  .hero-film .hero-video{object-fit:cover;object-position:75% center}
  .hero-film .hero-image{object-fit:cover;object-position:75% center;background:#000}
  .hero-film .hero-wash{background:rgba(0,0,0,.4)}
  .hero-film .hero-copy .short-line{margin:15px 0}
  .hero-film .hero-copy>p{font-size:13.5px;line-height:1.5;max-width:365px}
  .hero-film .hero-copy .button{padding:9px 17px;min-width:215px;margin-top:18px;background:transparent}
  .hero-film .hero-copy .button:hover{background:var(--paper)}
  .hero-film .process-link{bottom:74px;right:calc(7% + 12px);max-width:calc(86% - 12px)}
  .hero-film .process-link .circle-arrow{flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){.hero-film .hero-video{display:none}.hero-word{opacity:1!important;transform:none!important}}

/* Transparent header with white lettering and the original compass in black. */
body:has(.hero-film) > .header{background:transparent;color:#f3f0e9}
body:has(.hero-film) > .header .brand{position:relative}
body:has(.hero-film) > .header .brand img{filter:brightness(0) invert(1)}
body:has(.hero-film) > .header .brand::after{content:"";position:absolute;inset:0;background:#000;-webkit-mask:url('/assets/responsive/logo-1024.webp') center/100% 100% no-repeat;mask:url('/assets/responsive/logo-1024.webp') center/100% 100% no-repeat;clip-path:inset(0 14% 20% 68%);pointer-events:none}
body:has(.hero-film) > .header .desktop-nav{text-shadow:none}

/* Balance the homepage header without affecting headers on other pages. */
body:has(.hero-film) > .header{--hero-nav-gap:clamp(20px,calc(3vw - 20px),36px);gap:var(--hero-nav-gap)}
body:has(.hero-film) > .header .brand{width:216px}
body:has(.hero-film) > .header .desktop-nav{gap:var(--hero-nav-gap);margin-left:auto;margin-right:0;flex-shrink:0;white-space:nowrap}
body:has(.hero-film) > .header .menu-toggle{padding:15px 19px;min-width:112px;flex-shrink:0}
@media(max-width:1200px){
  body:has(.hero-film) > .header{--hero-nav-gap:clamp(16px,2.1vw,25px)}
  body:has(.hero-film) > .header .brand{width:186px}
  body:has(.hero-film) > .header .menu-toggle{padding:13px 15px;min-width:100px}
}
@media(min-width:761px) and (max-width:950px){
  body:has(.hero-film) > .header{--hero-nav-gap:clamp(12px,1.8vw,17px)}
  body:has(.hero-film) > .header .brand{width:170px}
  body:has(.hero-film) > .header .desktop-nav a{font-size:11px;letter-spacing:.06em}
}
@media(max-width:760px){
  body:has(.hero-film) > .header{gap:16px}
  body:has(.hero-film) > .header .brand{width:164px}
  body:has(.hero-film) > .header .menu-toggle{padding:12px;min-width:94px;gap:14px;min-height:44px}
}

/* Align the desktop logo with the hero copy and the navigation text baseline.
   Header inset is 3.5vw; copy inset is 6.8vw / 6vw / 5vw.
   Reserve the translated and scaled width in the flex layout so the menu
   keeps a real gap from the logo, including on landscape tablets. */
@media(min-width:1024px){
  body:has(.hero-film) > .header .brand{--hero-logo-offset-x:3.3vw;--hero-logo-extra-width:12.96px;margin-right:calc(var(--hero-logo-offset-x) + var(--hero-logo-extra-width));transform-origin:bottom left;transform:translate(var(--hero-logo-offset-x),calc(-50% + 9px)) scale(1.06)}
}
@media(min-width:1024px) and (max-width:1200px){
  body:has(.hero-film) > .header .brand{--hero-logo-offset-x:2.5vw;--hero-logo-extra-width:11.16px}
}
@media(min-width:1024px) and (max-width:1100px){
  body:has(.hero-film) > .header .brand{--hero-logo-offset-x:1.5vw}
}

/* Reveal the original still after the single playback, without restarting. */
.hero-film.video-finished .hero-video{opacity:0;transition:opacity 1.2s ease}

/* Spacious still-image hero; content stays in flow on short/mobile screens. */
.hero.hero-film{
  display:flex;align-items:center;box-sizing:border-box;
  height:auto;min-height:90vh;min-height:90svh;max-height:none;
  padding:170px 6.8% 150px;
}
.hero-film .hero-copy{
  position:relative;inset:auto;width:100%;max-width:none;transform:none;
}
.hero-film .hero-image{object-position:65% center}
.hero-film .process-link{bottom:64px}
@media(min-width:761px) and (max-width:1200px){
  .hero.hero-film{padding-right:6%;padding-left:6%}
}
@media(min-width:761px) and (max-width:1100px){
  .hero.hero-film{padding-right:5%;padding-left:5%}
}
@media(max-width:760px){
  .hero.hero-film{min-height:90vh;min-height:90svh;padding:132px 7% 150px}
  .hero-film .hero-copy{position:relative;inset:auto;width:100%;transform:none}
  .hero-film .hero-image{object-position:75% center}
  .hero-film .hero-wash{background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.28)),linear-gradient(0deg,rgba(0,0,0,.28),transparent 35%)}
  .hero-film .process-link{bottom:58px;right:7%;max-width:86%}
}