/* The hardware is a single WebGL scene. The image remains as a resilient fallback. */
.hero h1{font-size:clamp(66px,9.3vw,126px)}
/* Let the device fill larger displays, while keeping the full scene inside the
   viewport when it is pinned. The width still respects the page gutters. */
.hero-stage{perspective:none;max-width:128svh}
.hero-object{aspect-ratio:1.35;transform:none!important;transform-style:flat;isolation:isolate}
.hero-device{position:absolute;inset:4% 3%;height:max-content;transform:none!important;transform-style:flat;opacity:1}
.hero-poster{position:absolute;inset:0;opacity:1}
.hero-object canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-object.model-ready .hero-device{opacity:0;pointer-events:none}
/* Size the background word from the viewport, independently of the device. */
.hero-depth-word{top:21%;font-size:44.5vw;opacity:.55}
/* Match the smaller opening pose while the WebGL scene loads or is unavailable. */
.motion-ready .hero-device{transform:translateY(var(--hero-poster-y,-19.2%)) scale(var(--hero-poster-scale,.6))!important;transform-origin:50% 50%}
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  .motion-ready .hero-story{height:260svh;min-height:1600px}
  .motion-ready .hero-stage{top:clamp(12px,2.5svh,35px)}
}
@media(max-width:760px){
  .hero h1{font-size:clamp(51px,12.3vw,79px)}
  .hero-stage{width:calc(100% - 24px)}
  .hero-story{margin-top:28px;padding-bottom:28px}
  .hero-depth-word{display:none}
  .motion-ready .hero-device{transform:translateY(var(--hero-poster-y,-9.2%)) scale(var(--hero-poster-scale,.76))!important}
}
@media(prefers-reduced-motion:reduce){.hero-story{padding-bottom:38px}}

/* Reserve the full scroll scene before media loads so the next section cannot
   jump out of view when the recording becomes ready. No-JS/reduced-motion
   visitors keep the compact poster layout. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .motion-ready .hero-story{height:160svh;min-height:1000px;scroll-margin-top:calc(50svh - 35vw)}
  .motion-ready .hero-story .hero-stage{position:sticky;top:calc(50svh - 35vw)}
}