.hero-scroll{display:block;height:190vh;min-height:0;overflow:visible;background:var(--cream);--deck-progress:.18}
.hero-sticky{position:sticky;top:100px;height:calc(100vh - 100px);min-height:620px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;align-items:start;padding:clamp(28px,4vh,50px) 5% 22px;isolation:isolate}
.hero-scroll .hero-copy{text-align:center;padding:0;max-width:920px;margin:0 auto;z-index:4}
.hero-scroll .hero-copy>.eyebrow{margin-bottom:8px}.hero-scroll h1{font-size:clamp(3.2rem,5.4vw,5.8rem);line-height:.88}.hero-scroll h1 br:first-of-type{display:none}.hero-scroll .hero-description{max-width:510px;margin:12px auto 10px;font-size:.8rem;line-height:1.5}.hero-scroll .button{padding:10px 18px;gap:26px;font-size:.72rem}
.hero-deck{position:relative;align-self:center;height:min(43vh,390px);width:min(940px,88vw);margin:0 auto;z-index:2;perspective:1200px}.hero-card{--sx:0px;--sy:0px;--sr:0deg;--ix:0px;--iy:130px;--ir:0deg;position:absolute;left:50%;top:50%;width:clamp(128px,16vw,218px);aspect-ratio:.79;margin:0;border:5px solid var(--cream);background:var(--sand);box-shadow:0 16px 34px rgba(46,38,32,.16);overflow:hidden;will-change:transform,opacity;transform:translate(-50%,-50%) translate3d(calc(var(--ix) * (1 - var(--deck-progress)) + var(--sx) * var(--deck-progress)),calc(var(--iy) * (1 - var(--deck-progress)) + var(--sy) * var(--deck-progress)),0) rotate(calc(var(--ir) * (1 - var(--deck-progress)) + var(--sr) * var(--deck-progress))) scale(calc(.8 + var(--deck-progress) * .2));opacity:calc(.34 + var(--deck-progress) * .66)}
.hero-card img{width:100%;height:100%;object-fit:cover}.hero-card-1 img{object-position:50% 50%}.hero-card-2 img{object-position:38% 50%}.hero-card-3 img{object-position:50% 47%}.hero-card-4 img{object-position:51% 46%}.hero-card-5 img{object-position:72% 50%}.hero-card-1{--ix:-520px;--ir:-22deg;--sx:-330px;--sy:26px;--sr:-13deg;z-index:1}.hero-card-2{--ix:-290px;--ir:-13deg;--sx:-174px;--sy:5px;--sr:-7deg;z-index:2}.hero-card-3{--sx:0px;--sy:-8px;--sr:1deg;z-index:5}.hero-card-4{--ix:290px;--ir:13deg;--sx:174px;--sy:5px;--sr:7deg;z-index:4}.hero-card-5{--ix:520px;--ir:22deg;--sx:330px;--sy:26px;--sr:13deg;z-index:3}
.deck-tag{position:absolute;z-index:8;padding:5px 12px;border-radius:var(--radius-pill);color:var(--cream);font:500 .62rem var(--font-body);letter-spacing:.12em;box-shadow:0 5px 12px var(--shadow);opacity:var(--deck-progress);will-change:transform,opacity}.deck-tag-left{left:12%;top:10%;background:var(--clay-deep);transform:translateY(calc((1 - var(--deck-progress)) * 24px)) rotate(-6deg)}.deck-tag-right{right:10%;top:4%;background:var(--sage);transform:translateY(calc((1 - var(--deck-progress)) * 28px)) rotate(7deg)}
.hero-scroll .hero-note{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;white-space:nowrap;z-index:3}.hero-scroll .scroll-cue{left:auto;right:3%;bottom:24px}.hero-scroll:after{content:'';position:absolute;bottom:0;left:0;right:0;height:44px;background:linear-gradient(to bottom,var(--transparent),var(--cream));pointer-events:none}
@media(max-width:1050px){.hero-card{width:clamp(126px,18vw,184px)}.hero-card-1{--sx:-265px}.hero-card-2{--sx:-140px}.hero-card-4{--sx:140px}.hero-card-5{--sx:265px}}
@media(max-width:760px){.hero-scroll{height:175vh}.hero-sticky{top:78px;height:calc(100vh - 78px);min-height:600px;padding:28px 0 12px}.hero-scroll .hero-copy{padding:0 6%}.hero-scroll h1{font-size:clamp(2.6rem,11.8vw,4rem);line-height:.94}.hero-scroll h1 br:first-of-type{display:block}.hero-scroll .hero-description{font-size:.75rem;margin:10px auto}.hero-scroll .button{padding:9px 15px}.hero-deck{width:100%;height:min(39vh,315px)}.hero-card{--iy:130px;width:clamp(108px,33vw,145px);border-width:4px}.hero-card-1{--ix:-190px;--sx:-178px;--sy:28px}.hero-card-2{--ix:-110px;--sx:-92px;--sy:6px}.hero-card-4{--ix:110px;--sx:92px;--sy:6px}.hero-card-5{--ix:190px;--sx:178px;--sy:28px}.deck-tag-left{left:5%}.deck-tag-right{right:5%}.hero-scroll .hero-note{font-size:.58rem;bottom:10px;max-width:72%;white-space:normal;text-align:center}.hero-scroll .scroll-cue{right:10px;bottom:10px;background:var(--cream-glass)}}
@media(prefers-reduced-motion:reduce){.hero-scroll{height:auto}.hero-sticky{position:relative;top:auto;height:auto;min-height:760px}.hero-card{opacity:1;transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--sr))}.deck-tag{opacity:1}.hero-scroll .hero-copy{opacity:1;transform:none}.hero-scroll .hero-note{opacity:1}}