/* 3D hero (preview). Everything here only applies when html.h3d is set by the head gate. */
.h3-stage,.h3-lbl,.h3-cta,.h3-prog{display:none}
.h3d .hero{height:100vh;height:100svh;min-height:0;place-items:start center;padding-top:clamp(96px,14vh,150px)}
.h3d .hero-cards{display:none}
.h3d .hero-in{will-change:opacity,transform}
.h3d .hero-h{font-size:clamp(38px,min(7.4vw,11vh),112px);margin-bottom:18px}
.h3d .hero-sub{margin-bottom:24px}
.h3d .eyebrow{margin-bottom:14px}
.h3d .h3-stage{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.h3d .h3-poster{position:absolute;top:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);transition:opacity .6s}
.h3d #h3c{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}
.h3-live #h3c{opacity:1}
.h3-live .h3-poster{opacity:0}
.h3d .h3-lbl{display:flex;position:absolute;z-index:3;left:0;top:0;opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap;align-items:center;gap:12px;font-family:Syne,sans-serif;font-weight:700;font-size:clamp(16px,1.7vw,26px);color:#fff}
.h3-lbl i{display:block;width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--mint))}
.h3-lbl small{display:block;font:500 12px Montserrat,sans-serif;color:var(--mut);letter-spacing:.04em;margin-top:3px}
.h3-lbl.l{flex-direction:row-reverse;text-align:right}.h3-lbl.l i{background:linear-gradient(270deg,transparent,var(--mint))}
.h3d .h3-cta{display:block;position:absolute;left:50%;bottom:9vh;transform:translate(-50%,30px);opacity:0;visibility:hidden;z-index:4;text-align:center;width:min(92%,860px)}
.h3-cta h2{font-family:Syne,sans-serif;font-size:clamp(26px,2.8vw,42px);margin:0 0 18px;color:#fff}
.h3-cta .micro{margin-top:14px}
.h3d .h3-prog{display:flex;position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:4;flex-direction:column;gap:10px}
.h3-prog b{width:3px;height:26px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s}.h3-prog b.on{background:var(--mint)}
@media (max-width:700px){
 .h3d .hero{padding-top:92px}
 .h3d .hero-h{font-size:clamp(34px,10.5vw,52px)}
 .h3d .h3-lbl{font-size:15px;gap:6px}.h3-lbl i{width:14px}.h3-lbl small{display:block;font-size:10px;letter-spacing:.02em}
 .h3d .hero{touch-action:pan-y}
 .h3d .h3-poster{display:none} /* phones: canvas fades in; the peak position adapts to the copy height */
 .h3d .h3-prog{right:10px}
 .h3d .h3-cta{bottom:max(9vh,calc(24px + env(safe-area-inset-bottom,0px)))}
 .h3-cta h2{font-size:clamp(21px,6.3vw,28px);margin-bottom:14px}
 .h3-cta .btn{white-space:nowrap}
}