/* home hero: the 3D logo animation plays full width, then the headline fades in beside the settled logo */
.hero.hfull{padding:0 0 clamp(16px,2.4vw,28px)}
.hero.hfull .wrap{display:block}
.hstage{position:relative;display:flex;align-items:center;min-height:clamp(540px,min(56.25vw,calc(100svh - 96px)),880px);padding:clamp(34px,4vw,56px) 0;overflow:hidden;isolation:isolate;background:#0c0c0d}
.hplate{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 70% at 50% 50%,#19191b 0%,#111112 58%,#0a0a0b 100%)}
.hshade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,10,12,.94) 0%,rgba(9,10,12,.84) 38%,rgba(9,10,12,.3) 64%,rgba(9,10,12,.05) 100%);transition:opacity 2s ease .15s}
.hlogo{position:absolute;inset:0;z-index:2;mix-blend-mode:screen;transform:translate(24%,0) scale(.56);transition:transform 2.4s cubic-bezier(.45,.05,.2,1);will-change:transform;backface-visibility:hidden;-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 82%,transparent 100%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 82%,transparent 100%)}
.hlogo video{display:block;width:100%;height:100%;object-fit:cover}
.hlogo .lloop{position:absolute;inset:0;opacity:0;pointer-events:none}
.hlogo .lloop.on{opacity:1}
.hcontent{position:relative;z-index:3;width:100%;transition:opacity 1s .65s}
.hfull .htext{max-width:min(600px,50%)}
.hfull h1{font-size:clamp(34px,4.4vw,64px)}
.hfull .lede{max-width:50ch}
@keyframes hrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hfull .htext>*{animation:hrise 1.1s cubic-bezier(.22,.8,.25,1) .7s both}
.hfull .htext>:nth-child(2){animation-delay:.8s}
.hfull .htext>:nth-child(3){animation-delay:.92s}
.hfull .htext>:nth-child(4){animation-delay:1.04s}
.hfull .stats{margin-top:clamp(14px,2vw,24px)}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .hfull.intro .hlogo{transform:none}
  .hfull.intro .hshade{opacity:0}
  .hfull.intro .hcontent{opacity:0;transition:none}
  .hfull.intro .hcontent *{animation:none}
  .hfull.intro:not(.hjs) .hcontent,.hfull.intro:not(.hjs) .hshade{animation:hsafe .8s 9s forwards}
  .hfull.intro:not(.hjs) .hlogo{animation:hsafelogo 1.4s 9s forwards}
  .hfull.snap .hlogo,.hfull.snap .hshade,.hfull.snap .hcontent{transition:none}
}
@keyframes hsafe{to{opacity:1}}
@keyframes hsafelogo{to{transform:translate(24%,0) scale(.56)}}
@media(max-width:900px){
  .hstage{display:block;min-height:0;padding:0;background:none}
  .hplate,.hshade{display:none}
  .hlogo{position:relative;inset:auto;transform:none;aspect-ratio:16/9;background:#0c0c0d;mix-blend-mode:normal;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
  .hcontent{padding-top:4px}
  .hlogo video{mix-blend-mode:screen}
  .hfull .htext{max-width:none}
}
@media(prefers-reduced-motion:reduce){.hlogo,.hshade,.hcontent{transition:none}}

/* compact hero: full height only while the logo animation first plays, then the stage tightens around the headline */
@media(min-width:901px){
  .hfull{--h0:clamp(540px,min(56.25vw,calc(100svh - 96px)),880px)}
  .hfull .hstage{min-height:clamp(420px,36vw,600px);padding:clamp(28px,3vw,44px) 0;transition:min-height 1.6s cubic-bezier(.7,0,.2,1)}
  .hfull.tall .hstage{min-height:var(--h0)}
  .hfull .hlogo{inset:auto;left:0;right:0;top:50%;height:var(--h0);margin-top:calc(var(--h0) * -.5)}
}
@media(prefers-reduced-motion:reduce){.hfull .hstage{transition:none}}