/* V3: scroll-driven motion layer (look stays V1) */
.hero-art .scene{width:100%;height:auto;aspect-ratio:3/1;display:block;border-radius:24px;box-shadow:0 22px 44px -26px rgba(6,71,77,.5);overflow:hidden;background:#dff5ea}
.leaf-svg{display:block;width:100%;max-width:400px;height:auto;aspect-ratio:1;border-radius:32px;margin:0 auto}
@media (max-width:860px){.hero-art .scene{border-radius:18px;box-shadow:0 14px 28px -18px rgba(6,71,77,.45)}}
@media (max-width:768px){.grid2>.leaf-svg{order:2;width:150px;height:150px;max-width:150px;margin:0 auto;border-radius:20px}}
/* When the motion layer runs, it owns reveals (fallback: site.js reveal stays in charge) */
.v3 .reveal{transition:none}
.v3 .hl-story{background-repeat:no-repeat}
.v3 .hero-title .hl{background-repeat:no-repeat}
.w3{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.w3>span{display:inline-block;will-change:transform}
/* How it works reel (desktop, set by JS) */
.reel-line{position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.12);margin:0 0 28px;overflow:hidden}
.reel-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--hot,#8bd346));transform-origin:0 50%}
.v3-reel .grid3{display:flex;flex-wrap:nowrap;gap:28px;will-change:transform}
.v3-reel .grid3 .step{flex:0 0 min(46vw,560px);background:rgba(255,255,255,.05);border-radius:24px;padding:34px 34px 38px;border-top:0;min-height:300px}
.v3-reel .grid3 .step .num{font-size:5rem}
.v3-reel{overflow:hidden;overflow-x:clip;overflow-y:visible}
/* mobile rail for steps */
.v3-rail .grid3{position:relative;padding-left:26px}
.v3-rail .grid3::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:3px;border-radius:3px;background:rgba(255,255,255,.14)}
.rail-fill{position:absolute;left:6px;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--hot,#8bd346));transform-origin:50% 0}
.science-w .w{opacity:1}
@media (prefers-reduced-motion:reduce){.w3>span{transform:none!important}.hero-art .scene *{animation:none!important}}
/* reel fills the screen while pinned so nothing empty shows below it */
@media (min-width:861px){
.section.dark.v3-reel{min-height:calc(100vh - var(--anchor-offset,85px) + 16px);display:flex;flex-direction:column;justify-content:center;padding-top:40px;padding-bottom:40px}
.v3-reel .head{margin-bottom:26px}
.v3-reel .grid3 .step{min-height:min(56vh,500px);display:flex;flex-direction:column;padding:40px 40px 44px}
.v3-reel .grid3 .step .num{font-size:clamp(5rem,9vw,7.5rem);margin-bottom:auto;padding-bottom:24px}
.v3-reel .grid3 .step h3{font-size:1.75rem}
.v3-reel .grid3 .step p{font-size:1.12rem;max-width:34ch}
}
/* Badges sit below the sunrise picture; at the top of their float they overlap its bottom edge slightly */
@media (max-width:860px){.hero .hero-art{padding-bottom:48px}.hero .hero-art .badge{top:auto;bottom:0}}
@media (min-width:861px){.hero .hero-art{padding-bottom:86px}.hero .hero-art .badge{top:auto;bottom:0}}