/* Four full-bleed scenes, fixed introduction and independent glass captions. */
.hero { height: 100svh; min-height: 650px; background:#edf3f6; display:block; overflow:hidden; }
.hero-stage { position:absolute; inset:0; width:auto; height:auto; background:#080f20; }
.hero-copy { position:absolute; inset:0 auto 0 var(--shell); width:37%; max-width:560px; padding:calc(var(--header-height) + 30px) 0 70px; background:none; color:#1b2a49; pointer-events:none; transition:color .6s ease; }
.hero-copy a { pointer-events:auto; }
.hero-copy h1,.hero-copy .eyebrow,.hero-copy .hero-lede { color:inherit; transition:color .6s ease; }
.hero-copy h1 { font-size:clamp(32px,3.6vw,56px); }
.hero-copy .hero-lede { font-size:16px; line-height:1.75; }
.hero.is-dark .hero-copy { color:#d6c29a; }
.hero.is-dark .hero-copy .button-primary { background:#d6c29a; color:#101c32; border-color:#d6c29a; }
.hero-copy .button-primary { transition:background .6s,color .6s; }
.hero-slide.light,.hero-slide.dark { background:transparent; }
.hero-media { background:#edf3f6; }
.dark .hero-media { background:#080f20; }
.hero-scene-image,.product .hero-scene-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:0; mask-image:none; }
.hero-media::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#f0f5f9ed 0%,#f0f5f9d9 27%,#f0f5f959 43%,transparent 51%); }
.dark .hero-media::after { background:linear-gradient(90deg,#080f20ed 0%,#080f20d9 27%,#080f2059 43%,transparent 51%); }
.hero-caption { inset:54% 2.5% auto auto; width:21%; padding:clamp(17px,1.6vw,27px); border:1px solid #ffffff70; border-radius:22px; background:#ffffff4d; color:#1b2a49; box-shadow:inset 0 1px 0 #ffffff5e,0 15px 45px #10213b18; backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); }
.dark .hero-caption { color:#f5f1e8; background:#13213b4d; border-color:#d6c29a60; box-shadow:inset 0 1px 0 #ffffff20,0 15px 45px #0003; }
.hero-caption h2 { color:inherit; font-size:clamp(21px,2vw,32px); line-height:1.1; margin:0 0 15px; }
.hero-caption .hero-detail { color:inherit; font-size:13px; line-height:1.6; margin:0 0 18px; }
.hero-caption .hero-product-link { color:inherit; font-size:10px; gap:12px; }
.hero-product-link span { border-color:currentColor; flex:none; }
.hero-controls { background:#f1f5f4a6; border:1px solid #ffffff55; backdrop-filter:blur(12px); }
.is-dark .hero-controls { background:#0b162ca6; border-color:#d6c29a40; }
.is-dark .hero-controls .slide-dots button::after { border-color:#d6c29a; background:#d6c29a40; }
.is-dark .hero-controls .slide-dots button[aria-pressed="true"]::after { background:#d6c29a; }
@media(min-width:901px) and (max-aspect-ratio:3/2) {
 .hero-scene-image,.product .hero-scene-image { object-fit:contain; }
 .hero-caption { width:24%; right:2%; }
}
@media(max-width:900px) {
 .hero { height:auto; min-height:1050px; }
 .hero-stage { position:absolute; inset:0; height:100%; }
 .hero-copy { inset:0 7% auto; width:auto; max-width:620px; padding:calc(var(--header-height) + 30px) 0 0; }
 .hero-copy h1 { font-size:clamp(30px,6vw,46px); }
 .hero-copy .hero-lede { max-width:540px; }
 .hero-scene-image,.product .hero-scene-image { top:390px; height:500px; object-fit:cover; object-position:63% center; }
 .hero-media::after { background:linear-gradient(#edf3f6 0%,#edf3f6 32%,#edf3f600 50%); }
 .dark .hero-media::after { background:linear-gradient(#080f20 0%,#080f20 32%,#080f2000 50%); }
 .hero-caption { inset:auto 7% 75px; width:auto; max-width:540px; margin-left:auto; }
 .hero-caption h2 { font-size:26px; }
 .hero-caption .hero-detail { font-size:14px; }
 .hero-controls { bottom:22px; }
}
@media(max-width:480px) {
 .hero { min-height:1030px; }
 .hero-copy { inset-inline:6%; }
 .hero-copy .hero-lede { font-size:15px; }
 .hero-scene-image,.product .hero-scene-image { top:430px; height:390px; }
 .hero-caption { inset-inline:6%; bottom:70px; padding:20px; }
 .hero-caption h2 { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) { .hero-copy,.hero-copy h1,.hero-copy .eyebrow,.hero-copy .hero-lede,.hero-copy .button-primary { transition:none; } }