.hero-scroll{position:relative;height:310svh;min-height:1800px}
.hero-scroll .hero{position:sticky;top:98px;height:calc(100svh - 98px);min-height:570px;max-height:950px}
.hero-media{transform:perspective(1200px) rotateX(var(--hero-x,0deg)) rotateY(var(--hero-y,0deg)) scale(1.025);transform-origin:center;transition:transform .18s ease-out}
.hero-scroll-hint{position:absolute;bottom:30px;left:12%;right:100px;color:white;z-index:3;font-size:12px;display:flex;justify-content:space-between;gap:14px;text-shadow:0 1px 8px #000}
.hero-scroll-hint i{position:absolute;top:25px;left:0;right:0;height:2px;background:#ffffff6b}
.hero-scroll-hint b{display:block;width:0;height:100%;background:white}
.media-failed{height:auto;min-height:0}.media-failed .hero-scroll-hint{display:none}
.refill-story{height:300svh}
.product-stage{isolation:isolate;perspective:1000px}
.view-modes{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;z-index:6;padding:3px;border:1px solid #f4f1e838;border-radius:30px;background:#12392eaa;white-space:nowrap}
.view-modes button{padding:7px 15px;font-size:12px;border-radius:24px;min-height:34px;color:#e5e9e2}
.view-modes button[aria-pressed=true]{background:var(--cream);color:var(--pine)}
.view-modes button:disabled{opacity:.4}
.turntable-surface{position:absolute;inset:45px -10% 52px;z-index:2;touch-action:pan-y;cursor:grab;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .12s ease-out;outline-offset:-12px}
.turntable-surface.dragging{cursor:grabbing}
#turntable-video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;opacity:0;transition:opacity .35s;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.film-ready #turntable-video{opacity:1}
.turntable-loading{position:absolute;left:0;right:0;top:47%;font-size:13px;text-align:center;color:#d9dfd5}
.film-ready .turntable-loading{display:none}
.film-mode #product-canvas,.film-mode .scene-fallback{display:none!important}
.model-mode .turntable-surface{display:none}
.film-mode:not(.ready):not(.fallback)::before{display:none}
.rotation-controls{bottom:2px;gap:10px}
.rotation-controls span{max-width:210px;text-align:center}
.rotation-controls button{flex:none}
@media(max-width:760px){
  .hero-scroll{height:235svh;min-height:1400px}
  .hero-scroll .hero{top:76px;height:calc(100svh - 76px);min-height:560px;max-height:none}
  .hero h1{font-size:clamp(32px,10vw,47px);padding:14px 22px 10px;line-height:1.01}
  .hero-media{height:auto;min-height:200px;flex:1;transform:none}
  .hero-copy p{padding:12px 20px 10px;font-size:14px}
  .hero-copy>.button{min-height:44px;padding:10px 18px}
  .film-link{font-size:13px;margin:8px auto 12px}
  .hero-scroll-hint{left:20px;right:74px;bottom:24px;font-size:11px}
  .hero-scroll-hint i{top:20px}
  .hero-motion{bottom:13px}
  .refill-story{height:245svh}
  .turntable-surface{inset:40px -12px 45px}
  .view-modes{top:2px}
  .view-modes button{font-size:11px;min-height:30px;padding:5px 12px}
  .rotation-controls span{font-size:10px;max-width:180px}
}
@media(prefers-reduced-motion:reduce){
  .hero-scroll,.refill-story{height:auto;min-height:0}
  .hero-scroll .hero{position:relative;top:0;height:auto;min-height:650px}
  .hero-scroll-hint{display:none}
  .hero-media,.turntable-surface{transform:none!important}
}
/* Keep the complete film frame visible behind the text blend. */
@media(min-width:761px){
 .hero-media{inset:0;transform:none}
 .hero-media>img{position:absolute;left:45%;width:55%}
 .hero-media:after{z-index:2;background:linear-gradient(90deg,var(--cream) 0%,var(--cream) 32%,rgba(244,241,232,.88) 43%,rgba(244,241,232,.2) 60%,transparent 73%)}
 .hero-scroll-hint{left:62%}
 #hero-video{object-position:center;transform:perspective(1200px) rotateX(var(--hero-x,0deg)) rotateY(var(--hero-y,0deg)) scale(1.025);transition:opacity .6s,transform .18s ease-out}
}
.hero-scroll .hero{min-height:0}
.hero-scroll:not(.has-scrolled) #hero-video{opacity:0}
@media(max-height:700px) and (min-width:761px){.hero-copy{padding:22px 0}.hero h1{font-size:clamp(48px,6.2vw,85px)}.hero-copy p{margin:20px 0 23px}.film-link{margin-top:15px}}
.refill-sticky{min-height:0;padding-top:24px;padding-bottom:55px}
.product-stage{min-height:0}
.turntable-surface{top:45px;bottom:52px;left:50%;right:auto;height:calc(100% - 97px);width:auto;aspect-ratio:3/4;transform:translateX(-50%) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
#turntable-video{mask-image:linear-gradient(90deg,transparent,#000 13%,#000 88%,transparent),linear-gradient(0deg,transparent,#000 13%,#000 88%,transparent);mask-composite:intersect}
@media(max-width:760px){.refill-sticky{padding-top:16px;padding-bottom:14px;min-height:0}.turntable-surface{top:40px;bottom:45px;left:50%;right:auto;height:calc(100% - 85px)}}
@media(prefers-reduced-motion:reduce){.turntable-surface{transform:translateX(-50%)!important}}
#turntable-video{transform:scale(1.2)}
.scroll-cue{bottom:12px;gap:3px;font-size:10px}.scroll-cue .icon{display:none}.scroll-cue .progress-track{margin-bottom:0}
.product-stage[aria-busy=true]::before{display:none}
.scene-status{position:absolute;inset:43% 12px auto;z-index:4;margin:0;text-align:center;font-size:14px;line-height:1.5;color:var(--cream);pointer-events:none}
.scene-status[hidden]{display:none}
.product-stage.fallback .scene-status{top:auto;bottom:48px;padding:12px;background:#12392ee8;border-radius:12px}
.refill-copy,.product-stage,.story-steps{min-width:0}
.refill-copy h2{overflow-wrap:break-word}