/* Native sticky scrolling: one sequence, then the page continues normally. */
.home-hero { --hero-header:84px; --hero-height:calc(100svh - var(--hero-header)); --hero-travel:0px; }
.home-hero.hero-scroll-ready { height:calc(var(--hero-height) + var(--hero-travel) + 55px); }
.hero-stage { position:relative; height:var(--hero-height); min-height:320px; isolation:isolate; }
.hero-scroll-ready .hero-stage { position:sticky; top:var(--hero-header); }
.hero-stage .hero-grid { height:100%; min-height:0; padding-bottom:150px; }
.hero-stage .hero-visual { z-index:-1; overflow:hidden; }
.hero-film,.hero-frame { position:absolute; inset:0; }
.hero-frame { opacity:0; overflow:hidden; }
.hero-frame:first-child { opacity:1; }
.hero-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--focal,center); transform-origin:center; }
.hero-stage .hero-visual-shade { z-index:3; pointer-events:none; background:linear-gradient(180deg,#14171408 15%,#14171412 40%,#141714a8 100%); }
.hero-stage .hero-image-label,.hero-stage .hero-project-caption { z-index:4; }
.hero-scroll-ready .hero-bottom { position:absolute; bottom:0; width:100%; }
.hero-story-controls { position:absolute; bottom:30px; left:40px; z-index:3; display:flex; gap:16px; align-items:center; color:white; }
.hero-counter { font-size:14px; font-variant-numeric:tabular-nums; }
.hero-scroll-hint { font-size:14px; color:#f5efdf; }
.hero-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:#ffffff30; z-index:4; }
.hero-progress-fill { height:100%; background:#dcc28e; transform:scaleX(0); transform-origin:left; }
.hero-stage .hero-scroll { left:auto; right:40px; bottom:28px; width:auto; height:auto; font-size:14px; line-height:1.4; border-bottom:1px solid #dcc28e; padding:5px 0; z-index:5; }
.hero-stage .hero-project-caption { bottom:85px; right:40px; }
.hero-stage .hero-image-label { font-size:12px; }
@media(max-width:700px) {
.home-hero { --hero-header:72px; }
.hero-stage .hero-grid { padding:100px 22px 190px; }
.hero-story-controls { left:20px; bottom:28px; gap:10px; }
.hero-scroll-hint { font-size:12px; }
.hero-stage .hero-scroll { right:20px; bottom:28px; font-size:12px; }
.hero-stage .hero-project-caption { left:20px; right:20px; bottom:83px; }
.hero-stage .hero-project-caption h2 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
.hero-scroll-ready .hero-stage { position:relative; top:auto; }
.hero-scroll-hint,.hero-progress { display:none; }
.hero-frame img { transform:none!important; }
}
/* Fixed pinning avoids iOS sticky/ancestor overflow inconsistencies. */
.home-hero.hero-scroll-ready{position:relative;overflow:visible!important;transform:none!important}
.hero-scroll-ready .hero-stage{position:relative;top:auto;min-height:0}
.hero-scroll-ready.hero-pinned .hero-stage{position:fixed;top:var(--hero-header);left:0;right:0;width:100%;z-index:2}
.hero-scroll-ready.hero-complete .hero-stage{position:absolute;top:auto;bottom:55px;left:0;right:0;width:100%}
.hero-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal,center);opacity:0;pointer-events:none}
.hero-play{position:absolute;right:40px;top:24px;z-index:6;border:1px solid #ffffff80;background:#202722b8;color:white;border-radius:0;padding:10px 16px;font:inherit;cursor:pointer}
.hero-play[hidden]{display:none!important}
@media(max-width:700px){.hero-play{right:20px}.hero-stage .hero-grid{padding-top:60px}}
@media(prefers-reduced-motion:reduce){.hero-scroll-hint,.hero-progress{display:block}.hero-frame img,.hero-frame video{transform:none!important}}