/* ---------- banner ---------- */
.hero{ position:relative; overflow:hidden; height:100vh; height:100svh; min-height:620px; max-height:980px; background:var(--navy); color:#fff; }
.kv{ position:absolute; inset:0; overflow:hidden; will-change:transform; }
.kv img{ width:100%; height:100%; object-fit:cover; object-position:36% 40%; }
/* the photograph breathes and shifts inside its own layer; light trails and the visor glint are painted above the shade */
.kv__art{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; }
.kv__fx{ position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; pointer-events:none; mix-blend-mode:screen; }
.kv::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,33,52,.45) 0%, rgba(0,33,52,0) 26%, rgba(0,33,52,0) 50%, rgba(0,33,52,.94) 100%),
    linear-gradient(270deg, rgba(0,33,52,.7) 0%, rgba(0,33,52,.3) 34%, rgba(0,33,52,0) 58%);
}
/* the helmet owns the left of the photograph in both languages, so the copy lives on the right */
.copy--intro{ position:absolute; z-index:2; right:var(--gutter); left:auto; bottom:clamp(56px,11vh,120px); width:min(48%, 640px); text-align:start; will-change:transform,opacity; }


.display{ margin-top:12px; font-family:var(--display); font-weight:400; font-size:clamp(40px,5.4vw,82px); line-height:1.1; text-wrap:balance; }
.display em{ font-style:normal; color:var(--cop); }
.sub{ margin-top:16px; max-width:36em; font-size:clamp(15px,1.3vw,18px); line-height:1.8; font-weight:500; color:rgba(255,255,255,.86); }
.actions{ display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; margin-top:26px; }




.chip{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; opacity:.92; }
.chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cop); box-shadow:0 0 10px var(--cop); }
.cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:12px; color:rgba(255,255,255,.7); transition:opacity .5s; }
.cue-line{ width:1px; height:40px; background:rgba(255,255,255,.2); position:relative; overflow:hidden; }
.cue-line::after{ content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--cop); animation:cue 1.8s var(--ease-out) infinite; }
@keyframes cue{ 0%{top:-100%} 60%{top:100%} 100%{top:100%} }
.js .rise{ opacity:0; transform:translateY(24px); filter:blur(8px); transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); }
.js .rise.in{ opacity:1; transform:none; filter:none; }
.rise:nth-child(2){ transition-delay:.12s; } .rise:nth-child(3){ transition-delay:.24s; } .rise:nth-child(4){ transition-delay:.36s; }
/* phones: the photograph above, the words below — never text over the helmet */
@media (max-width:760px){
  .hero{ height:auto; min-height:0; max-height:none; display:flex; flex-direction:column; }
  .kv{ position:relative; inset:auto; flex:none; height:clamp(260px, 76vw, 420px); }
  .kv img{ object-position:24% 30%; }
  .kv::after{ background:linear-gradient(180deg, rgba(0,33,52,.3) 0%, rgba(0,33,52,0) 34%, rgba(0,33,52,.25) 70%, var(--navy) 100%); }
  .copy--intro{ position:relative; right:auto; bottom:auto; width:auto; margin-top:-18px; padding:0 20px 44px; }
  .display{ font-size:clamp(34px, 10vw, 48px); }
  .cue{ display:none; }
}