:root{color-scheme:light}
:root{
  --ground:#F6F3EC; --wash:#E9ECEC; --card:#FFFDF8; --line:#D9D9D0;
  --ink:#202E37; --ink-2:#4B5A64; --muted:#616970; /* was #7C878F: 3.0:1 on the coral panel, failed WCAG AA at 14px */
  --sage:#2F4452; --sage-deep:#202E37; --sage-soft:#B5C3CB;
  --warm:#F1A198; --warm-soft:#FBE3DF; --coral-ink:#C4645A;
  --shadow:0 18px 50px -24px rgba(32,46,55,.35);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;font-variation-settings:"SOFT" 100,"opsz" 96;font-weight:400;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,4.6vw,3.7rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
h3{font-size:1.3rem;font-weight:500}
p{margin:0}
em{font-style:italic;color:var(--coral-ink)}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:700}
.lede{font-size:1.15rem;color:var(--ink-2);max-width:34em}
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--sage);color:#fff;text-decoration:none;font-weight:700;padding:1rem 1.6rem;border-radius:999px;font-size:1.02rem;transition:transform .2s,background .2s;box-shadow:0 10px 24px -12px rgba(32,46,55,.55)}

.btn:hover{transform:translateY(-2px);background:var(--sage-deep)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--warm);outline-offset:3px}
.btn svg{width:1.1em;height:1.1em}
.ghost{background:none;color:var(--sage);box-shadow:none;padding:1rem .4rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--sage-soft)}
.ghost:hover{background:none;color:var(--sage-deep)}
.note{font-size:.9rem;color:var(--muted)}

/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{font-family:Fraunces,Georgia,serif;font-size:1.35rem;font-variation-settings:"SOFT" 100;text-decoration:none}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:.95rem}
nav ul a{text-decoration:none;color:var(--ink-2)}
nav .btn{padding:.7rem 1.2rem;font-size:.92rem}
@media (max-width:820px){nav ul{display:none}}

/* hero */
.herowrap{background:#202E37;color:#F5F4EF}
.herowrap nav ul a,.herowrap .brand{color:#F5F4EF}
.herowrap nav ul a{color:rgba(245,244,239,.75)}
.herowrap .lede{color:rgba(245,244,239,.8)}
.herowrap .note{color:rgba(245,244,239,.6)}
.herowrap h1{color:#fff;font-size:clamp(2.4rem,4.9vw,4rem)}
.herowrap em{color:var(--warm)}
.btn.coral{background:#F1A198;color:#202E37;box-shadow:0 10px 24px -12px rgba(241,161,152,.6)}
.btn.coral:hover{background:#F7B7B0}
.herowrap .ghost{color:#F5F4EF;text-decoration-color:rgba(245,244,239,.4)}
.herowrap .ghost:hover{color:#fff}
.herowrap .photo img{border-radius:20px;aspect-ratio:4/5;object-position:60% 25%;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.herowrap .photo .tag{background:#2B3C47;border-color:rgba(245,244,239,.12);color:rgba(245,244,239,.8)}
.herowrap .photo .tag strong{color:#fff}
.herowrap .photo::after{content:"";position:absolute;inset:auto -18px -18px auto;width:56%;height:46%;border:2px solid var(--warm);border-radius:20px;z-index:-1}
.herowrap .photo{z-index:0}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center;padding:36px 0 84px}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.hero-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero-cta .row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.photo{position:relative}
.photo img{display:block;width:100%;aspect-ratio:9/10;object-fit:cover;object-position:62% 30%;border-radius:48% 52% 46% 54% / 60% 42% 58% 40%;box-shadow:var(--shadow)}
.photo .tag{position:absolute;left:-10px;bottom:34px;background:var(--card);border:1px solid var(--line);padding:12px 16px;border-radius:16px;font-size:.9rem;max-width:230px;box-shadow:var(--shadow)}
.photo .tag strong{display:block;font-weight:800;color:var(--ink)}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-top:12px}.photo{order:-1;max-width:420px}.photo img{aspect-ratio:1}}

/* steps */
.steps{background:var(--wash);padding:72px 0}
.steps-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:40px}
.steps-head p{color:var(--ink-2)}
.step-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:var(--card);border-radius:22px;padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px;position:relative}
.step::before{counter-increment:s;content:counter(s);font-family:Fraunces,serif;font-size:2.4rem;color:var(--coral-ink);line-height:1;font-variation-settings:"SOFT" 100}
.step small{color:var(--muted);font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.step p{color:var(--ink-2);font-size:.98rem}
.step.now{outline:2px solid var(--sage);outline-offset:-2px}
@media (max-width:820px){.steps-head,.step-row{grid-template-columns:1fr}}

/* sounds like you */
.you{padding:80px 0}
.you-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.you ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.you li{padding:18px 0;border-top:1px solid var(--line);font-size:1.08rem;display:flex;gap:16px;align-items:flex-start}
.you li:last-child{border-bottom:1px solid var(--line)}
.you li span{flex:none;width:10px;height:10px;border-radius:50%;background:var(--warm);margin-top:.55em}
.you .aside{margin-top:22px;color:var(--ink-2)}
@media (max-width:820px){.you-grid{grid-template-columns:1fr}}

/* why */
.why{background:#202E37;color:#F3F0E7;padding:80px 0}

.why .eyebrow{color:var(--warm)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.why h2{color:#fff}
.why em{color:var(--warm)}
.why p{color:#CFD6DA}
.why dl{margin:0;display:flex;flex-direction:column;gap:22px}
.why dt{font-family:Fraunces,serif;font-size:1.25rem;font-variation-settings:"SOFT" 100;margin-bottom:4px}
.why dd{margin:0;color:#CFD6DA;font-size:.98rem}
@media (max-width:820px){.why-grid{grid-template-columns:1fr}}

/* proof */
.proof{padding:80px 0}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.quote{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:14px}
.quote .stars{color:var(--warm);letter-spacing:.1em;font-size:.9rem}
.quote p{font-size:1rem;color:var(--ink-2)}
.quote cite{font-style:normal;font-size:.88rem;color:var(--muted);margin-top:auto}
.quote cite b{display:block;color:var(--ink);font-weight:700}
.stat{background:var(--warm-soft);border-color:transparent;justify-content:center;align-items:flex-start}
.stat .big{font-family:Fraunces,serif;font-size:2.8rem;line-height:1;font-variation-settings:"SOFT" 100;font-variant-numeric:tabular-nums}
.stat .big span{color:var(--coral-ink)}
@media (max-width:820px){.proof-grid{grid-template-columns:1fr}}

/* rich */
.rich{background:var(--wash);padding:80px 0}
.rich-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.rich img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:60% 20%;border-radius:28px;box-shadow:var(--shadow)}
.rich .copy{display:flex;flex-direction:column;gap:18px}
.rich .copy p{color:var(--ink-2)}
@media (max-width:820px){.rich-grid{grid-template-columns:1fr}.rich img{max-width:380px}}

/* paths */
.paths{padding:80px 0 64px}
.paths table{width:100%;border-collapse:collapse;margin-top:28px;font-size:.98rem}
.paths th,.paths td{text-align:left;padding:16px 12px;border-top:1px solid var(--line);vertical-align:top}
.paths th{font-family:Fraunces,serif;font-weight:500;font-size:1.1rem;font-variation-settings:"SOFT" 100;width:28%}
.paths td.price{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;width:22%}
.paths td.for{color:var(--ink-2)}
.paths tr:last-child td,.paths tr:last-child th{border-bottom:1px solid var(--line)}
.paths td a{color:var(--sage);text-decoration:none;font-weight:700;white-space:nowrap}
.tablewrap{overflow-x:auto}
.gband{background:#202E37;color:#F5F4EF;padding:64px 0}
.gband .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.gband h2{color:#fff}
.gband em{color:var(--warm)}
.gband p{color:rgba(245,244,239,.78)}
@media (max-width:820px){.gband .wrap{grid-template-columns:1fr}}

/* faq */
.faq{background:var(--wash);padding:80px 0}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--sage);font-weight:400;font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--ink-2);max-width:60ch}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px}
@media (max-width:820px){.faq-grid{grid-template-columns:1fr}}

/* final */
.final{padding:96px 0 80px;text-align:center}
.final .eyebrow{color:var(--coral-ink)}
.final .inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:22px;align-items:center}
.final p{color:var(--ink-2)}
footer{border-top:1px solid var(--line);padding:32px 0 100px;font-size:.88rem;color:var(--muted)}
footer .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}

/* sticky mobile cta */
.sticky{position:fixed;left:0;right:0;bottom:0;padding:12px 16px;background:var(--card);border-top:1px solid var(--line);display:none;justify-content:space-between;align-items:center;gap:12px;z-index:10}
.sticky .btn{padding:.8rem 1.2rem;font-size:.92rem}
.sticky span{font-size:.85rem;color:var(--ink-2)}
@media (max-width:820px){.sticky{display:flex}}

@media (prefers-reduced-motion: reduce){.btn{transition:none}}

nav ul{gap:22px}
.herowrap.inner .ihero{padding:28px 0 64px;display:flex;flex-direction:column;gap:20px;max-width:760px}
.herowrap.inner .eyebrow{color:var(--warm)}
.herowrap.inner h1{font-size:clamp(2.1rem,4vw,3.3rem)}
.herowrap.inner .row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.step-row.four{grid-template-columns:repeat(4,1fr)}
.creds .step::before{content:none}
@media (max-width:1000px){.step-row.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.step-row.four{grid-template-columns:1fr}}
.offers{padding:64px 0 40px}
.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.offer{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:14px}
.offer-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.offer .price{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.offer .for{color:var(--ink-2);font-size:1.05rem}
.offer ul,.pricecard ul,.suits ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--ink-2);font-size:.96rem}
.offer li::before,.pricecard li::before,.suits li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warm);margin-right:10px}
.offer .ghost{padding-left:0;align-self:flex-start}
@media (max-width:820px){.offer-grid{grid-template-columns:1fr}}
.pricecards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
.pricecard{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:14px}
.pricecard p{color:var(--ink-2)}
.pricecard .big{font-family:Fraunces,serif;font-size:2.2rem;line-height:1;color:var(--ink);font-variation-settings:"SOFT" 100}
.pricecard .btn{align-self:flex-start;margin-top:6px}
.pricecard.solo{max-width:none}
@media (max-width:820px){.pricecards{grid-template-columns:1fr}}
.dates{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.date{background:var(--card);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px}
.date small{color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.date h3{font-size:1.15rem}.date p{color:var(--ink-2);font-size:.92rem}
.date.full{opacity:.6}.soldout{color:var(--coral-ink);font-weight:700}
@media (max-width:820px){.dates{grid-template-columns:1fr}}
.suits{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.suits h3{margin-bottom:12px;font-size:1.1rem}
.suits div:last-child li::before{background:var(--sage-soft)}
@media (max-width:640px){.suits{grid-template-columns:1fr}}
.states{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}
.states div{border-top:3px solid var(--warm);padding-top:14px}
.states div:nth-child(1){border-color:#7FA58A}.states div:nth-child(2){border-color:#D9A36D}.states div:nth-child(3){border-color:var(--warm)}.states div:nth-child(4){border-color:#8A97A3}
.states h3{font-size:1.1rem;margin-bottom:6px}.states p{color:var(--ink-2);font-size:.95rem}
@media (max-width:820px){.states{grid-template-columns:1fr 1fr}}
.you li div strong{color:var(--ink)}
.prose{display:flex;flex-direction:column;gap:16px;color:var(--ink-2)}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.story{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px}
.story h3{font-size:1.15rem}.story p{color:var(--ink-2);font-size:.96rem}
@media (max-width:820px){.story-grid{grid-template-columns:1fr}}
.proof+.proof{padding-top:0}
.form{display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.9rem}
.form input,.form textarea{font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.form input:focus,.form textarea:focus{outline:3px solid var(--warm);outline-offset:1px;border-color:transparent}
.form .btn{align-self:flex-start;border:0;cursor:pointer;font-family:inherit}
.step.check::before{content:none}
.step.check h3{color:var(--ink)}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.choose div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.choose strong{font-size:1.05rem}
@media (max-width:820px){.choose{grid-template-columns:1fr}}
.credit{margin-top:22px;color:var(--ink-2);font-size:.98rem;max-width:70ch;border-left:3px solid var(--warm);padding-left:16px}
.gband .stat{margin-top:20px}.gband .stat .big span{color:var(--warm)}
.gband .stat p{margin-top:6px}

/* ── additions to the mockup system (not in the reference file) ────────────
   1. a working mobile menu: the mockup hides nav ul under 820px with nothing
      to open it, which would leave phones with no navigation at all.
   2. reveal-on-scroll with a visible resting state, carried over from the
      previous build so nothing starts invisible.
   3. small safety rules for images and long words.                        */

img{max-width:100%}
h1,h2,h3,p,li,summary{overflow-wrap:break-word}

/* mobile menu */
.navtoggle{display:none;order:2;background:none;border:0;padding:8px;cursor:pointer;color:inherit;line-height:0;border-radius:8px}
.navtoggle svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.navtoggle:focus-visible{outline:3px solid var(--warm);outline-offset:2px}
@media (max-width:820px){
  nav{flex-wrap:wrap;gap:8px}
  .navtoggle{display:block}
  .brand{order:0}
  .brand{font-size:1.12rem}
  nav .btn{order:1;margin-left:auto;padding:.55rem .9rem;font-size:.8rem}
  .navtoggle{padding:10px;margin-left:0}
  .navtoggle svg{width:24px;height:24px}
  nav ul{display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;padding:2px 0 12px}
  nav ul.open{display:flex}
  nav ul li{border-top:1px solid var(--line)}
  nav ul a{display:block;padding:14px 2px;font-size:1.02rem}
  .herowrap nav ul li{border-top-color:rgba(245,244,239,.18)}
}

/* reveal, resting state stays visible */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:.85;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
}

/* contact form, wired to the live handler */
.eq-success{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.eq-success p{color:var(--ink)}
.form .hp{position:absolute;left:-9999px}

/* The width/height attributes on the photos are there to reserve space and stop
   layout shift, but the height attribute lands as a presentation hint that beats
   the aspect-ratio rules above and stretches the image. Let aspect-ratio win. */
.photo img,.rich img{height:auto}

/* The footer carries class="wrap", so .wrap's padding (a class) beats the
   footer element rule and zeroes the 100px bottom padding that keeps the
   sticky mobile bar from covering the footer text. Restore it at matching
   specificity. */
footer.wrap{padding:32px clamp(20px,4vw,48px) 100px}

/* Sections are written class="wrap hero", class="wrap you" and so on, but
   .hero/.you/.proof/.paths/.final/.offers each set the padding shorthand at the
   same specificity as .wrap and later in the file, which wipes out .wrap's side
   gutter. On a phone that puts every heading and paragraph hard against both
   screen edges. Re-assert the gutter as longhands, after those rules. */
.wrap{padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.herowrap.inner .ihero{padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}

/* The closing eyebrow is 12px uppercase in --coral-ink, which is 3.56:1 on the
   light ground and fails WCAG AA. Darken it for this small-text use only; the
   large decorative numerals keep the original coral, which passes at their size. */
.final .eyebrow{color:#a3534b}

/* On a phone the mockup pulls the photo above the headline with order:-1, so
   the first thing on the homepage is a picture and you have to scroll to learn
   what the site is for. Let the natural order stand: headline, then the lede
   and the call to action, then the photo. Desktop is a two-column grid and is
   unaffected. */
@media (max-width:820px){ .hero .photo{order:0} }

/* Six nav items plus the button no longer fit between 820 and about 900px, so
   the button wrapped to a second line. The mockup tightens the gap to 22px;
   this also nudges the font down slightly in that narrow band. */
@media (max-width:1000px){ nav ul{gap:16px;font-size:.9rem} }

/* Homepage hero credential card. Rich's decision of 8 Sep: the card positions
   Rich himself, so Eden Health Retreat is deliberately not here; it stays on
   About and For teams. Four lines, widened from the mockup's 230px so the award
   line does not wrap awkwardly. */
.photo .tag{max-width:264px;line-height:1.45}
/* Not small caps, despite the brief: BPsychSc(Hons) is an abbreviation whose
   meaning depends on its capitals, and small caps flattens it to BPSYCHSC(HONS).
   Muted and letterspaced instead, which reads as a credential line either way. */
.photo .tag .award{display:block;letter-spacing:.02em;font-weight:700}
.photo .tag .role{display:block}
.photo .tag .meta{display:block;font-size:.79rem;margin-top:5px}
.herowrap .photo .tag .award{color:rgba(245,244,239,.72)}
.herowrap .photo .tag .role{color:rgba(245,244,239,.92)}
.herowrap .photo .tag .meta{color:rgba(245,244,239,.66)}
@media (max-width:820px){ .photo .tag{max-width:min(264px,78vw)} }