:root{--slate:#5F86AD;--orange:#C4602F;--green:#2F6B4F;--gray:#BCC3CB;--bg:#F7F6F3;--ink:#2B2F2E;--muted:#5E6361;--line:#E3E1DC;--w:1240px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--slate)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 2rem}
/* header (Pila-style: thin sticky bar, logo left, links centered, CTA right) */
.hd{position:sticky;top:0;z-index:50;background:rgba(247,246,243,.88);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.hd.sc{border-color:var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--ink)}
.brand b{font-weight:400;font-size:1.05rem;letter-spacing:.42em}
.bars{display:flex;gap:6px}.bars span{width:16px;height:3px;border-radius:2px}
.s1{background:var(--slate)}.s2{background:var(--orange)}.s3{background:var(--green)}.s4{background:var(--gray)}
.nav{display:flex;gap:2.4rem}
.nav a{color:var(--ink);text-decoration:none;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--gray)}.nav a[aria-current]{border-color:var(--c,var(--slate))}
.cta{display:inline-block;padding:.95rem 1.6rem;border:1px solid var(--slate);border-radius:2px;color:var(--slate);background:transparent;text-decoration:none;font:inherit;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;transition:background .2s,color .2s;cursor:pointer}
.cta:hover,.cta:focus-visible{background:var(--slate);color:#fff;outline:none}
.cta.solid{background:var(--ink);border-color:var(--ink);color:#fff}.cta.solid:hover{background:var(--slate);border-color:var(--slate)}
.cta.light{border-color:#fff;color:#fff}.cta.light:hover{background:#fff;color:var(--ink)}
.hd .cta{padding:.7rem 1.1rem;font-size:.68rem}
.mb{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.mb i{position:absolute;left:11px;width:22px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.mb i:nth-child(1){top:15px}.mb i:nth-child(2){top:21px}.mb i:nth-child(3){top:27px}
.open .mb i:nth-child(1){transform:translateY(6px) rotate(45deg)}.open .mb i:nth-child(2){opacity:0}.open .mb i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mm{display:none}
/* hero */
.hero{position:relative;min-height:min(78vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.08) 65%),linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.45))}
.hero .wrap{position:relative;z-index:1;padding-bottom:4.5rem;width:100%}
.hero h1{font-weight:300;font-size:clamp(2.2rem,5vw,4rem);line-height:1.12;max-width:16ch}
.hero p{font-size:1.2rem;max-width:40ch;margin:1.1rem 0 2rem;opacity:.95}
.eyebrow{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.hero .eyebrow{color:#fff;opacity:.9}
/* sections */
section.s{padding:6.5rem 0}
section.alt{background:#fff}
h2{font-weight:300;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.2;max-width:22ch}
h3{font-weight:500;font-size:1.2rem;margin-bottom:.5rem}
.lead{font-size:1.2rem;color:var(--muted);max-width:52ch;margin-top:1.2rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.5rem}
.step{border-top:3px solid var(--c);padding-top:1.25rem}
.step .n{font-size:.78rem;letter-spacing:.25em;color:var(--muted);margin-bottom:.6rem}
.step p{color:var(--muted);font-size:1rem}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
.pk{background:var(--bg);border-radius:4px;padding:1.6rem;border-left:4px solid var(--c)}
section.alt .pk{background:var(--bg)}
.pk p{color:var(--muted);font-size:1rem}
.band{position:relative;color:#fff;padding:9rem 0;overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band:after{content:"";position:absolute;inset:0;background:rgba(20,24,24,.45)}
.band .wrap{position:relative;z-index:1}
.band h2{max-width:20ch}.band p{font-size:1.2rem;max-width:46ch;margin:1rem 0 2rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
.duo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
.wide{width:100%;border-radius:4px;margin-top:3rem}
.cap{font-size:.9rem;color:var(--muted);margin-top:.75rem}
/* faq accordion */
.faq{max-width:860px;margin-top:3rem}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;font-size:1.15rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s;margin-right:4px}
.faq details[open] summary:after{transform:rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid var(--slate);outline-offset:4px}
.faq .a{padding:0 0 1.6rem;color:var(--muted);max-width:70ch}
.faq .a p+p,.faq .a ul{margin-top:.8rem}.faq .a ul{padding-left:1.2rem}
.faq .src{font-size:.88rem;margin-top:.9rem}
.cat{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:3.5rem 0 .5rem;display:flex;align-items:center;gap:.7rem}
.cat:before{content:"";width:18px;height:3px;border-radius:2px;background:var(--c)}
.note{font-size:.9rem;color:var(--muted);margin-top:2.5rem;max-width:70ch}
.band.plain{background:#fff;color:var(--ink);padding:7rem 0;border-top:1px solid var(--line)}
.band.plain:after{display:none}.band.plain p{color:var(--muted)}
.band.plain .cta.light{border-color:var(--slate);color:var(--slate)}.band.plain .cta.light:hover{background:var(--slate);color:#fff}
.band.plain .wrap:before,.phd .wrap:before{content:"";display:block;width:136px;height:3px;margin-bottom:2rem;background:linear-gradient(90deg,var(--slate) 0 22%,transparent 22% 26%,var(--orange) 26% 48%,transparent 48% 52%,var(--green) 52% 74%,transparent 74% 78%,var(--gray) 78%)}
.phd{padding:7rem 0 5rem;border-bottom:1px solid var(--line)}
.phd h1{font-weight:300;font-size:clamp(2.2rem,5vw,4rem);line-height:1.12;max-width:16ch}
.hd.open{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--line)}
@media (max-width:980px){.mm{height:calc(100vh - 72px);height:calc(100dvh - 72px);bottom:auto;overflow-y:auto;z-index:1000;background:var(--bg)!important}.hd.open{z-index:1000}}
@media (max-width:700px){
 .hero{min-height:max(560px,88svh)!important}
 .hero img{object-position:64% 50%}
 .hero:after{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.72))}
 .hero .wrap{padding:0 1.25rem 2.75rem}
 .hero h1{font-size:2.4rem}.hero p{font-size:1.1rem;margin:.9rem 0 1.6rem}
 .hero.rt{align-items:flex-start}
 .hero.rt img{object-position:40% 100%}
 .hero.rt:after{background:linear-gradient(0deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.65))}
 .hero.rt .wrap{padding:2.5rem 1.25rem 0}
}
.hero.pk{display:block;min-height:0!important;background:#f1eff0;color:#2B3440}
.hero.pk:after{display:none}.hero.pk .wrap{padding:7rem 2rem 1rem}.hero.pk .eyebrow{color:#2B3440;opacity:.75}
.hero.pk picture,.hero.pk img{position:static;display:block;width:100%;height:auto;max-width:1400px;margin:0 auto;object-fit:fill}
@media (max-width:700px){.hero.pk .wrap{padding:6rem 1.25rem .5rem}}
@media (max-height:520px){.hero.pk .wrap{padding:2.5rem 2rem .25rem}.hero.pk h1{font-size:2.2rem;max-width:none}}

/* how-it-works patio hero: text top-left, clear of the tub (tub sits ~39-71% x, 45-78% y of the photo) */
.hero.tb{align-items:flex-start}
.hero.tb img{object-position:55% 60%}
.hero.tb .wrap{max-width:none;padding:8rem clamp(1.25rem,4vw,4rem) 2rem}
.hero.tb h1{max-width:12ch}
.hero.tb:after{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 30%,rgba(0,0,0,0) 45%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 45%)}
@media (max-width:700px){.hero.tb{min-height:0!important;height:118vw}.hero.tb img{object-position:58% 50%}.hero.tb .wrap{padding:5rem 1.25rem 0}
 .hero.tb h1{font-size:7.4vw;max-width:none}.hero.tb .eyebrow{margin-bottom:.4rem}
 .hero.tb:after{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.3) 35%,rgba(0,0,0,0) 50%)}}
@media (max-height:520px) and (min-width:701px){.hero.tb .wrap{padding-top:5rem;padding-bottom:1rem}.hero.tb h1{font-size:1.7rem;max-width:13ch}}
@media (max-width:980px){.hd .mm .cta{display:block}}
@media (min-width:701px){.hero.rt img{object-position:center 95%}.hero.rt:after{background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 65%),linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,0) 40%,rgba(0,0,0,.4))}}
/* shop */
.hero.tb.wt img{object-position:50% 15%}
.hero.tb.wt:after{background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.3) 35%,rgba(0,0,0,0) 55%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 60%)}.hero.tb.wt h1,.hero.tb.wt p{text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media (max-width:700px){.hero.tb.wt:after{background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.45) 50%,rgba(0,0,0,.05) 75%)}}
@media (max-width:700px){.hero.tb.wt img{object-position:50% 15%}}
@media (max-height:520px) and (min-width:701px){.hero.tb.wt .wrap{padding-top:3.5rem;padding-bottom:.75rem}.hero.tb.wt p{font-size:.95rem;margin:.4rem 0 0;max-width:46ch}}
.shop{display:grid;grid-template-columns:repeat(6,1fr);gap:1.75rem;margin-top:3.5rem}
.card{grid-column:span 2;background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;overflow:hidden}
.card .ic{position:relative;aspect-ratio:16/10;background:color-mix(in srgb,var(--c) 14%,#fff);display:flex;align-items:center;justify-content:center;border-bottom:3px solid var(--c)}
.card .ic svg{width:34%;height:auto;color:var(--c)}
.badge{position:absolute;top:1rem;left:1rem;background:#fff;color:var(--ink);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;padding:.4rem .7rem;border-radius:2px}
.card .bd{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.card .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.card h3{margin:0}.card .pr{font-size:1.05rem;white-space:nowrap}.card .pr small{font-size:.8rem;color:var(--muted)}
.card p{color:var(--muted);font-size:1rem;flex:1}
.card .note2{font-size:.85rem;color:var(--muted);margin-top:.6rem}
.card button{margin-top:1.4rem;width:100%;cursor:not-allowed;opacity:.55;border-color:var(--muted);color:var(--muted)}
.card button:hover{background:transparent;color:var(--muted)}
.shop .card:nth-child(4){grid-column:2/span 2}.card.hd2 .ic svg{color:#3A3F44}
@media (max-width:980px){.shop{grid-template-columns:repeat(4,1fr)}.shop .card:nth-child(4){grid-column:span 2}.shop .card:nth-child(5){grid-column:2/span 2}}
@media (max-width:620px){.shop{grid-template-columns:1fr;}.shop .card,.shop .card:nth-child(n){grid-column:auto}.shop{gap:1.25rem}.card .ic{aspect-ratio:2/1}.card .ic svg{width:22%}}
/* footer */
.ft{border-top:1px solid var(--line);padding:3.5rem 0 3rem;font-size:.95rem;color:var(--muted)}
.ft .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.ft nav{display:flex;gap:1.8rem;flex-wrap:wrap}.ft nav a{color:var(--muted);text-decoration:none}.ft nav a:hover{color:var(--ink)}
.ft small{display:block;margin-top:1rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
/* home intro keeps the coming-soon mark */
.mark{text-align:center;padding:7rem 0 6rem}
.mark .bars{justify-content:center;gap:10px;margin-bottom:2.25rem}.mark .bars span{width:28px}
.mark h2{font-weight:400;font-size:clamp(1.9rem,5vw,3.1rem);letter-spacing:.42em;margin:0 auto;margin-right:-.42em;max-width:none}
.mark p{margin-top:1.75rem;font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);line-height:2}
.mark .cta{margin-top:2.25rem}
.f{opacity:0;animation:in 1.2s ease forwards}.d1{animation-delay:.1s}.d2{animation-delay:.35s}.d3{animation-delay:.6s}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.f{animation:none;opacity:1}html{scroll-behavior:auto}}
@media (max-width:980px){
 .nav,.hd .cta{display:none}.mb{display:block}
 .mm{display:block;position:fixed;top:72px;left:0;right:0;bottom:0;background:var(--bg);padding:2rem;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:49}
 .open .mm{opacity:1;visibility:visible;transform:none}
 .mm a{display:block;font-size:1.5rem;font-weight:300;color:var(--ink);text-decoration:none;padding:1rem 0;border-bottom:1px solid var(--line)}
 .mm a[aria-current]{color:var(--slate)}
 .mm .cta{margin-top:2rem;font-size:.8rem;border:1px solid var(--slate);color:var(--slate);text-align:center;padding:1rem}
 .split,.duo{grid-template-columns:1fr;gap:2.5rem}
 .steps,.packs{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
 body{font-size:17px}.wrap{padding:0 1.25rem}
 section.s{padding:4.5rem 0}.band{padding:6rem 0}
 .steps,.packs{grid-template-columns:1fr}
 .hero{min-height:72vh}.hero .wrap{padding-bottom:3rem}
 .mark{padding:5rem 0 4rem}.mark .bars span{width:22px}.mark h2{letter-spacing:.32em;margin-right:-.32em}
}