/* A native-scroll sequence. Without motion, the complete home remains visible. */
.skip-opening,.opening-cue{display:none}
.motion-opening .opening{height:330svh;position:relative}
.motion-opening .site-header{position:fixed;inset:0 0 auto;height:90px;z-index:20;border-color:transparent;background:transparent}
.motion-opening .site-header .logo{transform-origin:0 0;line-height:1.1}
.motion-opening .site-header nav{opacity:0;pointer-events:none;margin-left:auto}
.motion-opening .skip-opening{display:block;position:absolute;right:5%;font-size:14px;opacity:1}
.motion-opening .hero{position:sticky;top:0;height:100svh;min-height:0;max-height:none;overflow:hidden;padding:120px 5% 70px;isolation:isolate;perspective:none}
.motion-opening .intro{opacity:0;transform:translateY(35px);z-index:2;will-change:transform,opacity}
.motion-opening .scene{isolation:auto;perspective:none;z-index:4;min-height:0}
.motion-opening .scene img{width:100%;height:min(650px,75svh);max-height:100%;opacity:0;transition:none;will-change:transform,opacity;transform-origin:center center}
.motion-opening .giant{opacity:0;z-index:-1}
.motion-opening .caption{opacity:0;bottom:-10px}
.motion-opening .scroll{opacity:0;pointer-events:none;z-index:5}
.motion-opening .opening-cue{display:block;position:absolute;bottom:40px;left:0;width:100%;text-align:center;font-size:12px;letter-spacing:.17em;opacity:1}
.motion-opening .hero h1{font-size:clamp(62px,7.2vw,112px)}
@media(max-width:600px){
.motion-opening .opening{height:300svh}
.motion-opening .site-header{height:80px;padding:20px 6%;align-items:center}
.motion-opening .site-header .logo{font-size:36px}
.motion-opening .skip-opening{right:6%;font-size:12px}
.motion-opening .hero{padding:100px 6% 35px;display:flex;flex-direction:column;align-items:stretch}
.motion-opening .intro{align-self:stretch;flex:0 0 auto}
.motion-opening .hero h1{font-size:clamp(43px,12vw,62px);margin-bottom:14px;line-height:1.04}
.motion-opening .intro .eyebrow{font-size:10px;margin-bottom:15px}
.motion-opening .intro>p:not(.eyebrow):not(.small){font-size:16px;line-height:1.4;margin-bottom:8px}
.motion-opening .intro .button{font-size:14px;padding:7px 0;gap:15px;margin-top:0}
.motion-opening .intro .small{font-size:12px;margin-top:9px;margin-bottom:5px}
.motion-opening .scene{flex:1;min-height:120px;height:auto;margin-top:0}
.motion-opening .scene img{height:100%;max-height:36svh;width:100%;position:absolute;inset:0; margin:auto}
.motion-opening .giant{font-size:220px;line-height:1}
.motion-opening .scroll{bottom:12px;font-size:10px}
.motion-opening .opening-cue{bottom:35px;font-size:11px}
}
@media(max-height:650px) and (min-width:601px){.motion-opening .hero{padding-top:100px;padding-bottom:40px}.motion-opening .hero h1{font-size:60px;margin-bottom:16px}.motion-opening .intro .eyebrow{margin-bottom:14px}.motion-opening .intro>p:not(.eyebrow):not(.small){font-size:16px}.motion-opening .intro .button{margin-top:0}.motion-opening .scene img{height:72svh}}
@media(prefers-reduced-motion:reduce){.opening{height:auto}.site-header{position:relative}.hero{position:relative}.skip-opening,.opening-cue{display:none!important}}