.hero{background:#f1f2f1}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .65s ease}
.hero[data-scene=ready] .hero-canvas{opacity:1}
.hero-poster{position:absolute;inset:0;pointer-events:none;transition:opacity .65s ease}
.hero-poster img{display:block;width:100%;height:100%;object-fit:fill}
.hero[data-scene=ready] .hero-poster{opacity:0}
.hero-inner{z-index:1;pointer-events:none}
.hero-inner a{pointer-events:auto}
.hero-heading{max-width:570px}
.hero-caption{background:none;padding:0}
.site-header.is-scrolled{box-shadow:0 7px 28px #20212108}
.button svg,.text-link svg,.round-arrow svg{transition:transform .25s ease}
.button:hover svg,.text-link:hover svg{transform:translate(2px,-2px)}
.hero-caption .round-arrow:hover svg{transform:translateY(3px)}
.case-art{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.case-cover{overflow:hidden}
.case-cover:hover .case-art{transform:scale(1.025)}
.motion-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.motion-reveal.is-visible,.motion-reveal:focus-within{opacity:1;transform:none}
.motion-enabled .hero-inner>.eyebrow,.motion-enabled .hero h1,.motion-enabled .hero-heading,.motion-enabled .hero-copy,.motion-enabled .hero-actions{animation:hero-enter .8s cubic-bezier(.2,.7,.2,1) both}
.motion-enabled .hero h1{animation-delay:.08s}
.motion-enabled .hero-heading{animation-delay:.16s}
.motion-enabled .hero-copy{animation-delay:.24s}
.motion-enabled .hero-actions{animation-delay:.32s}
.demo-col{position:relative}
.demo-col:after{content:"";position:absolute;top:-8px;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;opacity:0}
.demo-flow-on .demo-col:after{animation:flow-stage 1.15s ease both}
.demo-flow-on .demo-col:nth-child(2):after{animation-delay:1.15s}
.demo-flow-on .demo-col:nth-child(3):after{animation-delay:2.3s}
@keyframes hero-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes flow-stage{0%{opacity:0;transform:scaleX(0)}30%,65%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@media(max-width:900px) and (min-width:700px){.hero h1{font-size:56px}.hero-heading{font-size:25px;max-width:430px}.hero-copy{max-width:290px}}
@media(max-width:699px){
  .hero{height:calc(100svh - 108px);min-height:720px;max-height:800px}
  .hero-inner{padding-top:33px}
  .hero h1{font-size:47px;margin-top:26px;white-space:normal;line-height:1.13}
  .hero-heading{font-size:25px;margin-top:18px;line-height:1.4;max-width:360px}
  .hero-copy{font-size:12px;line-height:1.85;max-width:300px;margin-top:18px}
  .hero-actions{margin-top:25px;gap:18px;flex-wrap:wrap}
  .hero-caption{bottom:22px;left:22px;font-size:7px;gap:13px}
  .hero-caption>span{display:none}
}
@media(max-width:370px){.hero h1{font-size:41px}.hero-heading{font-size:23px}.hero-actions{gap:14px}}
@media(prefers-reduced-motion:reduce){
  .hero-canvas,.hero-poster,.case-art,.button svg,.text-link svg,.round-arrow svg,.motion-reveal{transition:none}
  .motion-reveal{opacity:1;transform:none}
  .motion-enabled .hero-inner>*{animation:none}
  .demo-flow-on .demo-col:after{animation:none}
}
@media print{.hero-scene{display:none}.motion-reveal{opacity:1;transform:none}}