/* Hero in movimento: la runner Orange si gira mentre scorri (61 fotogrammi da un video Kling). */
.hm{position:relative;height:270vh;background:#141414}
.hm-stage{position:sticky;top:var(--rb,56px);height:calc(100vh - var(--rb,56px));height:calc(100svh - var(--rb,56px));overflow:hidden}
.hm-seq{position:absolute;inset:0;width:100%;height:100%;display:block;background:#141414;z-index:1;transform-origin:60% 40%;will-change:transform}
.hm-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(20,20,20,.86) 0%,rgba(20,20,20,.62) 32%,rgba(20,20,20,0) 58%)}
.hm-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:2;pointer-events:none;background:linear-gradient(to top,#141414,rgba(20,20,20,0))}
.hm-copy{position:absolute;z-index:3;left:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));top:calc(50% + 39px);transform:translateY(-50%);width:min(620px,46vw);color:#f6f3ee}
.hm-h1{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;font-size:clamp(3rem,min(7vw,10.5vh),7rem);color:#fcfbfa}
.hm-h1 .l1{display:block}
.hm-h1 .l2{display:block;color:var(--o);clip-path:inset(0 100% 0 0)}
.hm-after{margin-top:1.6rem;opacity:0;transform:translateY(18px);pointer-events:none}
.hm-welcome{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1.05;color:#fcfbfa}
.hm-lead{margin-top:.7rem;font-size:1.08rem;color:#e6e0d7;max-width:46ch}
.hm-after .cta-row{margin-top:1.5rem}
.hm-after .btn-line{border-color:#f6f3ee;color:#f6f3ee}
.hm-after .btn-line:hover{background:#f6f3ee;color:#141414}
.hm-cue{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#cfc9c0;transition:opacity .4s}
.hm-cue span{width:2px;height:40px;background:linear-gradient(var(--o),transparent);animation:hmcue 2.2s cubic-bezier(.16,1,.3,1) infinite}
@keyframes hmcue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.hm{height:auto}.hm-stage{position:relative;top:0}.hm-h1 .l2{clip-path:none}.hm-after{opacity:1;transform:none;pointer-events:auto}.hm-cue{display:none}}

@media (max-width:900px){
  .hm{height:200vh}
  .hm-stage::before{display:none}
  .hm-seq{height:58%;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
  .hm-stage::after{height:55%;background:linear-gradient(to top,#141414 62%,rgba(20,20,20,0))}
  /* il titolo sta subito sotto la runner (sulla sfumatura della foto), il resto scende sotto di lui */
  .hm-copy{top:min(calc(58% - 3.2rem),calc(100% - 23rem));bottom:auto;left:var(--pad);right:var(--pad);width:auto;transform:none}
  .hm-h1{font-size:clamp(2.4rem,11vw,3.5rem)}
  .hm-welcome{font-size:1.2rem}
  .hm-lead{font-size:.92rem;line-height:1.5;margin-top:.4rem}
  .hm-after{margin-top:.8rem}
  .hm-after .cta-row{margin-top:.9rem;flex-wrap:nowrap;gap:.5rem}
  .hm-after .btn,.hm-after .btn-line{padding:.75em .9em;font-size:.88rem;white-space:nowrap}
  .hm-after .btn svg{display:none}
  .hm-cue{display:none}
}

/* Menu trasparente sopra il video: niente fascia bianca, la foto parte da sotto la barra della Half */
/* sulla Home il menu è fisso e trasparente sopra il video; diventa nero (classe .solid) tornando su o dopo il video */
.hm-page .site-head{position:fixed;left:0;right:0;top:var(--rb,56px);background:transparent;border-bottom-color:transparent;z-index:45}
.hm-page .site-head.solid{background:#141414;border-bottom-color:#141414}
.hm-page .site-head .nav a{color:#fcfbfa}
.hm-page .site-head .nav a:hover{background:rgba(252,251,250,.14)}
.hm-page .site-head .nav .btn{color:#141414}
.hm-page .site-head .nav .btn:hover{background:#fcfbfa;color:#141414}
.hm-page .burger{color:#fcfbfa;border-color:#fcfbfa}
.hm-stage::before{background:linear-gradient(180deg,rgba(20,20,20,.62) 0,rgba(20,20,20,0) 190px),linear-gradient(90deg,rgba(20,20,20,.86) 0%,rgba(20,20,20,.62) 32%,rgba(20,20,20,0) 58%)}
@media (max-width:900px){
  .hm-stage::before{display:block;background:linear-gradient(180deg,rgba(20,20,20,.7) 0,rgba(20,20,20,0) 130px)}
}
@media (max-width:820px){
  .hm-page .site-head .nav{background:#141414;border-bottom:2px solid var(--o)}
  .hm-page .site-head .nav a:hover{background:#262422}
}