:root{--cream:#F7F0E6;--sand:#EFE3D1;--ink:#2B2622;--soft:#6B5F55;--terra:#C4643A;--terra-d:#A9502A;--sage:#7F9C83;--butter:#E9B75A;--plum:#8C5A6E;--line:#E2D4BF;--r:22px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 17px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,.brand span{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(2.2rem,7.5vw,4.3rem)}
h2{font-size:clamp(1.8rem,5vw,2.8rem);margin:.3rem 0 1.6rem}
h3{font-size:1.12rem;font-weight:700;margin-bottom:.25rem}
a{color:inherit}
.eyebrow{color:var(--terra);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.muted{color:var(--soft)} .micro{margin-top:14px;font-size:.88rem;color:var(--soft)} .card p strong{color:var(--ink)} .small{font-size:.88rem}
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:rgba(247,240,230,.86);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.25rem}
.brand-mark{width:34px;height:34px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-mark{transform:rotate(72deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--terra);color:#fff;text-decoration:none;font-weight:700;padding:15px 28px;border-radius:999px;box-shadow:0 6px 18px -8px rgba(196,100,58,.7);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(196,100,58,.8);background:var(--terra-d)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,.link:focus-visible,summary:focus-visible{outline:3px solid var(--plum);outline-offset:3px}
.btn-small{padding:9px 18px;font-size:.9rem;display:none}
.link{font-weight:600;text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:2px;transition:border-color .2s}
.link:hover{border-color:var(--terra)}
/* hero */
.hero{display:grid;gap:8px;padding:28px 20px 40px;max-width:1160px;margin:0 auto;align-items:center}
.hero-copy{order:2}
.hero h1{margin:.5rem 0 1rem}
.lead{font-size:1.1rem;color:var(--soft);max-width:34rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:1.4rem 0 1.8rem}
.chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;font-weight:600;font-size:.92rem;transition:transform .2s,border-color .2s}
.chip:hover{transform:translateY(-2px);border-color:var(--terra)}
.chip i{width:11px;height:11px;border-radius:50%;display:block}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-art{order:1;position:relative;width:min(78vw,420px);aspect-ratio:1;margin:0 auto}
.ring{position:absolute;inset:4%;border-radius:50%;border:3px dashed rgba(43,38,34,.18);animation:spin 60s linear infinite}
.table{position:absolute;inset:33%;border-radius:50%;background:var(--sand);border:4px solid var(--ink);transform:scale(.4);opacity:0;animation:pop .9s 1.2s cubic-bezier(.2,.9,.3,1.3) forwards}
.p{position:absolute;width:17%;height:17%;border-radius:50%;left:41.5%;top:41.5%;--tx:0;--ty:0;transform:translate(var(--sx),var(--sy));animation:gather 1.8s cubic-bezier(.3,.8,.2,1) forwards,bob 5s 2s ease-in-out infinite}
/* final positions: radius 30% around centre at 72deg steps */
.p1{background:var(--terra);--sx:-120%;--sy:-210%;--tx:0%;--ty:-176%}
.p2{background:var(--sage);--sx:230%;--sy:-160%;--tx:168%;--ty:-55%;animation-delay:.1s,2.3s}
.p3{background:var(--butter);--sx:200%;--sy:230%;--tx:104%;--ty:143%;animation-delay:.2s,2.6s}
.p4{background:var(--sage);--sx:-240%;--sy:190%;--tx:-104%;--ty:143%;animation-delay:.15s,2.9s}
.p5{background:var(--plum);--sx:-230%;--sy:-40%;--tx:-168%;--ty:-55%;animation-delay:.05s,3.2s}
.spark{position:absolute;width:3%;height:3%;border-radius:50%;background:var(--butter);opacity:0;animation:twinkle 4s ease-in-out infinite}
.s1{left:10%;top:18%}.s2{right:8%;top:30%;animation-delay:1s;background:var(--terra)}.s3{left:16%;bottom:12%;animation-delay:2s;background:var(--sage)}.s4{right:18%;bottom:8%;animation-delay:3s;background:var(--plum)}
@keyframes gather{0%{transform:translate(var(--sx),var(--sy)) scale(.6);opacity:0}30%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:1}}
@keyframes bob{0%,100%{transform:translate(var(--tx),var(--ty))}50%{transform:translate(var(--tx),calc(var(--ty) - 8%))}}
@keyframes pop{to{transform:scale(1);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.8;transform:scale(1)}}
/* sections */
.section{max-width:1060px;margin:0 auto;padding:56px 20px}
.steps{list-style:none;display:grid;gap:16px;position:relative}
.step{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:20px;transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(43,38,34,.35)}
.step p,.card p,.place p{color:var(--soft);font-size:.98rem}
.num{flex:none;width:46px;height:46px;border-radius:50%;color:#fff;font:600 1.3rem Fraunces,serif;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.step:hover .num{transform:scale(1.1) rotate(-8deg)}
.safety{background:linear-gradient(180deg,transparent,rgba(239,227,209,.55) 18%,rgba(239,227,209,.55) 82%,transparent);max-width:none}
.safety>*{max-width:1020px;margin-left:auto;margin-right:auto}
.cards{display:grid;gap:16px}
.card{background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-3px) rotate(-.4deg);border-color:var(--sage)}
.icon{display:inline-flex;width:40px;height:40px;border-radius:12px;background:#fff;border:1.5px solid var(--line);align-items:center;justify-content:center;font-weight:700;margin-bottom:12px;color:var(--terra)}
.isnt-row{display:flex;flex-wrap:wrap;gap:12px;margin:1rem 0 1.2rem}
.nope{position:relative;font:600 clamp(1.15rem,3.6vw,1.5rem) Fraunces,serif;padding:6px 4px}
.nope::after{content:"";position:absolute;left:0;right:0;top:55%;height:3px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .7s .3s cubic-bezier(.6,0,.2,1)}
.isnt.in .nope::after{transform:scaleX(1)}
.isnt.in .nope:nth-child(2)::after{transition-delay:.6s}.isnt.in .nope:nth-child(3)::after{transition-delay:.9s}
.places{display:grid;gap:16px;margin-top:8px}
.place{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:22px 22px 22px 58px;position:relative;transition:transform .25s}
.place:hover{transform:translateY(-3px)}
.pin{position:absolute;left:22px;top:26px;width:18px;height:18px;border-radius:50%}
.pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;opacity:.0;animation:ping 2.4s ease-out infinite}
.place:nth-child(1) .pin::after{color:var(--terra)}.place:nth-child(2) .pin::after{color:var(--sage);animation-delay:.6s}.place:nth-child(3) .pin::after{color:var(--butter);animation-delay:1.2s}.place:nth-child(4) .pin::after{color:var(--plum);animation-delay:1.8s}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}
.honest{background:#fff;border:1.5px solid var(--line);border-radius:28px;margin:24px 20px;padding:36px 24px;max-width:1020px}
.honest-list{list-style:none;margin:0 0 1.6rem;display:grid;gap:10px}
.honest-list li{padding-left:28px;position:relative}
.honest-list li::before{content:"";position:absolute;left:4px;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--sage)}
.faq details{border-bottom:1.5px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:600;padding:16px 36px 16px 0;position:relative;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--terra);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{color:var(--soft);padding:0 0 16px;animation:fadeDown .35s ease}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.footer{text-align:center;padding:48px 20px 120px;border-top:1.5px solid var(--line);display:grid;gap:8px;justify-items:center}
.footer .brand{font-family:Fraunces,serif;font-size:1.2rem}
.footer p{max-width:36rem}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--cream) 60%,rgba(247,240,230,0));z-index:30;transform:translateY(110%);transition:transform .35s ease}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
/* desktop */
@media (min-width:860px){
  body{font-size:18px}
  .btn-small{display:inline-flex}
  .nav{padding:16px 40px}
  .hero{grid-template-columns:1.15fr .85fr;padding:56px 40px 70px;gap:40px}
  .hero-copy{order:1}.hero-art{order:2;width:100%;max-width:460px}
  .section{padding:80px 40px}
  .steps{grid-template-columns:repeat(5,1fr);gap:14px}
  .step{flex-direction:column;padding:22px 18px}
  .cards{grid-template-columns:repeat(6,1fr)}
  .card{grid-column:span 2}
  .card:nth-child(4){grid-column:2/span 2}.card:nth-child(5){grid-column:4/span 2}
  .places{grid-template-columns:1fr 1fr}
  .honest{margin:24px auto;padding:52px 56px}
  .sticky-cta{display:none}
  .footer{padding-bottom:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .p{transform:translate(var(--tx),var(--ty))}
  .table{transform:none;opacity:1}
  .reveal{opacity:1;transform:none}
  .nope::after{transform:scaleX(1)}
}
.footer a{color:var(--terra);font-weight:600;text-underline-offset:3px}