/* PROTOTYPE A: the golden-hour world carried down the page + the page cleans as you read */
:root{--sunset-a:#FFD9A8;--sunset-b:#F59A4A;--pool-a:#0B6E93;--pool-b:#1497BF;--palm:#1C4A2E;--sky-a:#9CCBF0;--sky-b:#DCEEFB}
/* overflow-x:clip, never overflow:hidden: 'hidden' makes a section its own scroller and breaks every pinned (sticky) scene inside it */
main>section:not(.story){position:relative;isolation:isolate;overflow-x:clip}
/* the yellow-white stripe between sections, the brand's mark */
main>section::before{content:"";position:absolute;left:-5%;right:-5%;top:0;height:14px;z-index:2;background:linear-gradient(90deg,var(--yellow) 0 38%,#fff 38% 62%,var(--yellow) 62%);transform:skewY(-1.2deg);transform-origin:left;box-shadow:0 2px 0 rgba(16,32,26,.12)}
#price{background:linear-gradient(170deg,var(--sunset-a) 0%,#FBBF7C 55%,var(--sunset-b) 100%)}
#price .kicker{color:#7A2E06}#price h2{color:var(--ink)}#price .lede{color:#3B2410}
#price .stage{box-shadow:0 30px 60px -28px rgba(90,40,0,.55)}
#price .quote{box-shadow:0 30px 60px -28px rgba(90,40,0,.55)}
#price .chip{background:rgba(255,248,238,.8);border-color:transparent}#price .note{color:#3B2410}
.how{background:radial-gradient(120% 90% at 20% 0%,var(--pool-b) 0%,var(--pool-a) 70%)!important;color:#fff}
.how::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.25;background:repeating-radial-gradient(circle at 30% 20%,rgba(255,255,255,.5) 0 2px,transparent 2px 38px),repeating-radial-gradient(circle at 70% 60%,rgba(255,255,255,.35) 0 1px,transparent 1px 27px)}
.how .kicker{color:var(--yellow)}.how h2{color:#FFF8EE}
.how .step{border:0;box-shadow:0 24px 50px -26px rgba(0,30,50,.7)}
#meet{background:var(--palm);color:#FFF8EE}#meet .kicker{color:var(--yellow)}#meet h2{color:#FFF8EE}#meet .lede{color:#E6EFE7}
#meet .facts-list div{background:#FFF8EE;color:var(--ink);border-radius:14px;padding:14px 16px;border-left:6px solid var(--yellow)}
#meet figure{background:radial-gradient(80% 70% at 50% 40%,#FFE3B0,#F2A65A);border:0}
#services{background:linear-gradient(180deg,var(--sky-a),var(--sky-b))}
#services .svc-card{background:#FFF8EE;border-radius:18px;padding:10px 10px 16px}#services .svc-card figcaption{padding:0 6px}
#club{background:linear-gradient(170deg,var(--sunset-b),#E0662B)!important;color:var(--ink)}
#club .kicker{color:#3B1405}#club h2{color:var(--ink)}#club .lede{color:#2A1206}
#club .panel{background:#FFF8EE;border:0;box-shadow:0 24px 50px -26px rgba(90,30,0,.6)}
#towns{background:radial-gradient(120% 90% at 80% 0%,var(--pool-b),var(--pool-a))}#towns .kicker{color:var(--yellow)}#towns h2{color:#FFF8EE}
#towns .towns a{background:#FFF8EE;border-color:transparent}#towns .towns a.big{background:var(--yellow)}
#faq{background:var(--paper)}
/* the grime film and the clean waterline */
.grime{position:absolute;inset:0;z-index:3;pointer-events:none;background:url(../img/grime.webp) 0 0/420px repeat;opacity:.62;mix-blend-mode:multiply;will-change:clip-path}
.waterline{position:fixed;left:0;right:0;height:0;z-index:45;pointer-events:none}
.waterline::before{content:"";position:absolute;left:0;right:0;top:-10px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.85) 50%,rgba(255,255,255,0));filter:blur(2px)}
.waterline i{position:absolute;top:-28px;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(220,240,255,.4) 45%,rgba(255,255,255,0) 70%);animation:sweep 2.2s ease-in-out infinite alternate}
@keyframes sweep{from{left:8%}to{left:92%}}
.cleanpill{position:fixed;right:12px;top:calc(70px + env(safe-area-inset-top,0px));z-index:55;background:var(--ink);color:#fff;border-radius:999px;padding:7px 12px;font:700 12px/1 var(--mono);letter-spacing:.06em;opacity:0;transition:opacity .3s}
.cleanpill.on{opacity:1}.cleanpill b{color:var(--yellow)}
.finale{background:var(--yellow);color:var(--ink);text-align:left;padding:34px 20px}
.finale h2{font-size:clamp(40px,9vw,80px)}
/* PROTOTYPE C: the street. Pinned; scrolling slides the houses past while the puma walks the curb. */
.street{height:560svh;padding:0!important;background:linear-gradient(180deg,#9CCBF0 0%,#FFD9A8 62%,#F59A4A 100%)}
.street::before{display:none}
.st-pin{position:sticky;top:var(--hdr,63px);height:var(--pinh,calc(100svh - 63px));overflow:hidden}
.st-head{position:absolute;left:0;right:0;top:14px;z-index:3}
.st-head h2{color:var(--ink);margin:0}
.st-track{position:absolute;left:0;top:108px;bottom:26%;display:flex;gap:6vw;padding-left:8vw;will-change:transform}
.house{margin:0;flex:0 0 min(78vw,560px);display:flex;flex-direction:column;background:#FFF8EE;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(80,40,0,.6)}
.house .pic{position:relative;flex:1;min-height:0}
.house img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.house .aft{clip-path:polygon(0 0,var(--c,0%) 0,calc(var(--c,0%) - 12%) 100%,0 100%)}
.house figcaption{padding:14px 16px 16px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline}
.house .no{font:700 12px/1 var(--mono);color:var(--blue);grid-row:span 2}
.house h3{font:900 26px/1 var(--display);text-transform:uppercase;margin:0}
.house p{margin:0;grid-column:2;font-size:14.5px;color:var(--body-ink)}
.house b{grid-column:2;font:700 14px/1.4 var(--mono);color:var(--ink)}
.road{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,#CFC6B6 0 10%,#4A4A48 10% 100%)}
.road i{position:absolute;left:-50%;right:-50%;top:55%;height:6px;background:repeating-linear-gradient(90deg,#FFD21F 0 60px,transparent 60px 120px);will-change:transform}
.st-count{position:absolute;right:16px;bottom:calc(26% + 12px);z-index:3;font:700 13px/1 var(--mono);background:var(--ink);color:#fff;border-radius:999px;padding:7px 11px}
@media (prefers-reduced-motion:reduce){.street{height:auto}.st-pin{position:relative;height:auto}.st-track{position:relative;top:0;flex-direction:column;padding:120px 20px 40px}.house .aft{clip-path:none}.road,.st-count{display:none}}
.street>.grime{display:none}
.st-track{bottom:31%}