:root{--yellow:#ffc400;--cream:#f3f6ff;--ink:#15120e;--orange:#ff5a1f;--white:#fff;--muted:#4a4237;--r:18px;--bd:2.5px solid var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
code{background:rgba(21,18,14,.08);padding:.1em .4em;border-radius:6px;font-size:.9em}
h1,h2,h3{line-height:1.08;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.3rem,5.4vw,4.4rem);max-width:15ch}
h1 em{font-style:normal;background:var(--ink);color:var(--yellow);padding:.04em .22em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
h2{font-size:clamp(1.7rem,3.2vw,2.7rem);max-width:24ch}
h3{font-size:1.2rem}
.muted{color:var(--muted)}
.lead{font-size:1.2rem;max-width:44ch}

.proto-bar{background:var(--ink);color:var(--yellow);text-align:center;font-size:.85rem;padding:.5rem 1rem}

.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.2rem;padding:.7rem clamp(16px,4vw,48px);background:var(--yellow);border-bottom:var(--bd)}
.brand{font-weight:800;text-decoration:none;font-size:1.2rem}
.brand span{background:var(--ink);color:var(--yellow);padding:.05em .4em;border-radius:6px}
.nav nav{display:flex;gap:1.2rem;margin-left:auto}
.nav nav a{text-decoration:none;font-weight:600;font-size:.95rem}
.nav nav a:hover{text-decoration:underline;text-underline-offset:4px}
.reviews{text-decoration:none;font-weight:600;font-size:.9rem;padding:.4rem .9rem;border:var(--bd);border-radius:999px;background:var(--white);white-space:nowrap}

.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:12px;text-decoration:none;font-weight:700;border:var(--bd);cursor:pointer;background:var(--white);color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn.primary{background:var(--ink);color:var(--yellow)}
.btn.small{padding:.5rem 1rem;box-shadow:3px 3px 0 var(--ink);font-size:.92rem}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0}

.hero{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:center;padding:clamp(28px,6vw,80px) clamp(16px,4vw,48px);background:var(--yellow);border-bottom:var(--bd)}
.hero>*{max-width:1400px}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.trust li{background:var(--white);border:var(--bd);border-radius:999px;padding:.4rem 1rem;font-size:.85rem;font-weight:600}
.hero-media img{filter:drop-shadow(0 20px 18px rgba(21,18,14,.25))}

.services,.groups,.gallery,.paint,.faq,.book{max-width:1400px;margin:auto;padding:clamp(40px,7vw,96px) clamp(16px,4vw,48px)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.2rem;margin-top:2rem}
.svc{background:var(--white);border:var(--bd);border-radius:var(--r);padding:1.4rem;box-shadow:6px 6px 0 var(--ink)}
.svc:nth-child(3n+1){background:#ffe8b0}
.svc:nth-child(3n+2){background:#ffd2bd}
.svc p{margin:.6rem 0 0;font-size:.95rem}
.price{font-weight:700}

.explode{height:420vh;position:relative;background:var(--orange);border-block:var(--bd)}
.sticky{position:sticky;top:60px;height:calc(100vh - 60px);display:flex;flex-direction:column;padding:1rem clamp(16px,4vw,48px);max-width:1400px;margin:auto}
.sticky-head{margin-bottom:.8rem}
.stage{position:relative;flex:1;min-height:0;border-radius:var(--r);overflow:hidden;border:var(--bd);background:var(--yellow)}
.f{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;padding:1rem}
.f-a{opacity:1}
.step{margin:.6rem 0 0;font-weight:700;text-align:center}

.pins{list-style:none;margin:0;padding:0}
.pin{position:absolute;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s;pointer-events:none}
.pin.on{opacity:1;pointer-events:auto}
.pin b{display:block;width:12px;height:12px;background:var(--ink);border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.8);margin:0 auto 6px}
.pin span{display:block;background:var(--white);border:var(--bd);border-radius:10px;padding:.4rem .75rem;font-size:.8rem;font-weight:600;line-height:1.3;white-space:nowrap}
.pin em{display:block;font-style:normal;font-size:.72rem}

.group-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.group-list li{background:var(--white);border:var(--bd);border-radius:var(--r);padding:1.1rem 1.2rem}
.group-list h3{margin:0 0 .3rem;font-size:1.05rem}
.group-list p{margin:0;font-size:.92rem}
.group-list .price{margin-top:.7rem}

.gallery{max-width:none;background:var(--orange);border-block:var(--bd);padding-inline:max(16px,calc((100% - 1400px)/2 + 48px))}
.gallery .note{font-weight:600;max-width:64ch}
.gal{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.gal li{background:var(--white);border:var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.gal .ph{aspect-ratio:3/2;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#ffffff,#ffffff 14px,#ffe8b0 14px,#ffe8b0 28px);font-weight:700;text-align:center;padding:1rem}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal figcaption{padding:.7rem 1rem;font-size:.9rem;font-weight:600;display:flex;justify-content:space-between;gap:.5rem}
.gal figcaption small{font-weight:600;background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:.1rem .7rem;white-space:nowrap}
.gal figure{margin:0}

.paint{display:grid;grid-template-columns:1fr 1.3fr;gap:2rem;align-items:center}
.paint-media img{background:var(--yellow);border:var(--bd);border-radius:var(--r)}
.swatches{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.swatches button{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;background:var(--white);color:var(--ink);border:var(--bd);border-radius:999px;cursor:pointer;font:inherit;font-weight:600}
.swatches button[aria-checked="true"]{background:var(--ink);color:var(--yellow)}
.swatches i{width:16px;height:16px;border-radius:50%;background:var(--c);border:2px solid var(--white)}

.faq details{background:var(--white);border:var(--bd);border-radius:14px;padding:1rem 1.2rem;margin-top:.8rem;max-width:820px}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:.6rem 0 0}

.book{max-width:none;background:var(--yellow);border-top:var(--bd);padding-inline:max(16px,calc((100% - 1400px)/2 + 48px))}
.info{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.2rem;margin:1.4rem 0 0}
.info dt{font-weight:700}
.info dd{margin:0}

footer{padding:2rem clamp(16px,4vw,48px);font-size:.85rem;max-width:1400px;margin:auto;color:var(--muted)}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

@media (max-width:800px){
  .hero,.paint{grid-template-columns:1fr}
  .nav nav{display:none}
  .nav .btn{margin-left:auto}
  .explode{height:auto;padding-block:24px}
  .sticky{position:static;height:auto}
  .stage{aspect-ratio:16/9;flex:none}
  .pin span{font-size:.62rem;padding:.3rem .5rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .explode{height:auto;padding-block:24px}
  .sticky{position:static;height:auto}
  .stage{aspect-ratio:16/9;flex:none}
  .btn,.pin{transition:none}
}