/* Amanda Lifestyle — brand tokens taken from her own Shopify theme config
   (config/settings_data.json, colour schemes 1-5). Do not invent colours. */
:root{
  --cream:#FDFBF7;
  --ink:#2E2A39;          /* her purple-charcoal, NOT black */
  --magenta:#9B046F;      /* site accent — the flow Heath likes: headings, links, rules */
  --logo:#CA0088;         /* HER LOGO, sampled from the emblem (100% of pixels) — BUTTONS + FOOTER only */
  --logo-hover:#A5006F;   /* 18% darker; white on it = 7.42:1 */
  --magenta-hover:#A60978;/* accent hover */
  --magenta-bright:#EA33B3;/* scheme-2 bg */
  --plum:#5E3653;         /* scheme-5 bg */
  --gold:#E4C891;
  --ink-70:#5B5468;
  --ink-45:#6B6479;   /* was #8A8397 = 3.52:1, failed AA. now 5.4:1 on cream */
  --line:#E7E1DC;
  --white:#FFFFFF;
  /* Heath/Amanda 2026-09-03: a hard 1120px cap left ~300px of dead gutter each side
     on a 1728px Mac — only 65% of the screen used. Fluid now: grows with the viewport,
     stops at 1360 so line lengths stay readable. Body copy is separately capped in ch. */
  /* Heath 2026-09-03: "her logo should be flush against the side and the right hand
     side shouldn't have a gap either... it should automatically fill the screen at 100%".
     Only her wide Mac desktop showed it badly — laptops and phones never hit the cap.
     So: no centred column at all. Full bleed, with just enough gutter that nothing
     touches the glass. Readability is protected per-element with ch caps instead. */
  --maxw:100%;
  --gutter:clamp(16px, 2.2vw, 40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.7;font-weight:400;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--magenta)}
/* Codex gate 2026-09-02: a magenta ring is invisible on the magenta CTA and only 1.75:1
   on the dark sections. White ring + dark halo is visible on every background we use. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #FFFFFF;outline-offset:2px;
  box-shadow:0 0 0 6px rgba(46,42,57,.85);border-radius:2px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
/* Heath 2026-09-02: match her LOGO wordmark — light geometric monoline caps, wide tracking.
   Jost is the open-source Futura-class face (SIL OFL) and is the closest legitimate match.
   Her brand kit's "Springfield" is a calligraphic SCRIPT — verified 2026-09-02, it is the
   decorative accent face, NOT the wordmark. Do not use it for headings. */
.serif,h1,h2,h3{font-family:'Jost','Century Gothic','Avenir Next',system-ui,sans-serif}
h1,h2{font-weight:300;letter-spacing:.06em}
h3{font-weight:400;letter-spacing:.02em}
.hero h1{font-weight:200;letter-spacing:.07em}
.sec-head h2{font-weight:300;letter-spacing:.07em}
.cta h2,.quote blockquote{font-weight:300;letter-spacing:.05em}
.type-card h3{font-family:'Poppins',system-ui,sans-serif}
.site-foot h2.foot-h{font-family:'Poppins',system-ui,sans-serif}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(253,251,247,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:24px;padding:14px var(--gutter);max-width:var(--maxw);margin:0 auto}
.head-in .logo img{width:190px;max-width:46vw}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.01em}
.nav a:hover{color:var(--magenta)}
.nav a.current{color:var(--magenta);font-weight:600}
.btn{display:inline-block;background:var(--logo);color:#FFFFFF;text-decoration:none;
  font-weight:600;font-size:15px;letter-spacing:.02em;padding:13px 26px;border-radius:2px;
  transition:background .2s}
.btn:hover{background:var(--magenta-hover);color:var(--cream)}
.btn-lg{font-size:17px;padding:17px 40px}
/* hamburger — no border, no word, animates to an X */
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:10px 4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.bars{display:block;width:26px;height:18px;position:relative}
.bars i{position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease, top .28s cubic-bezier(.4,0,.2,1)}
.bars i:nth-child(1){top:0}
.bars i:nth-child(2){top:8px}
.bars i:nth-child(3){top:16px}
.nav-toggle.is-open .bars i:nth-child(1){top:8px;transform:rotate(45deg)}
.nav-toggle.is-open .bars i:nth-child(2){opacity:0}
.nav-toggle.is-open .bars i:nth-child(3){top:8px;transform:rotate(-45deg)}
.nav-toggle:hover .bars i{background:var(--magenta)}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--cream);padding:26px 0 30px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin:0 0 14px}
.hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.14;margin:0 0 22px;
  text-wrap:balance}
.hero p.lede{font-size:17.5px;color:#DCD5E2;margin:0 0 26px;max-width:52ch}
.hero-img{border-radius:2px;overflow:hidden}
.hero-img img{width:100%;aspect-ratio:4/5;max-height:52vh;object-fit:cover;object-position:center 20%}

/* ---------- generic section ---------- */
section{padding:40px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 34px}
.sec-head h2{font-size:clamp(27px,3.4vw,38px);line-height:1.24;margin:0 0 14px;
  text-wrap:balance}
.sec-head p{font-size:18px;color:var(--ink-70);margin:0}
.alt{background:var(--white)}
.dark{background:var(--ink);color:var(--cream)}
.dark .sec-head p{color:#C9C2D2}

/* ---------- two types ---------- */
.types{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:960px;margin:0 auto}
.type-card{padding:28px 28px;border-radius:2px}
.type-a{background:#F2EDE9;color:var(--ink-70)}
.type-b{background:var(--magenta);color:var(--cream)}
.type-card h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 20px;font-weight:700}
.type-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.type-card li{font-size:17px;line-height:1.55;padding-left:22px;position:relative}
.type-card li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:currentColor;opacity:.5}
.types-kicker{text-align:center;margin:32px auto 0;max-width:640px;font-size:19px;font-weight:600}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
/* Heath 2026-09-03: on a phone the hero photo and this one stacked back to back.
   The copy now leads in the DOM (better for screen readers too); on desktop the
   photo is placed back into column 1, which is the layout he already approved. */
.about > img{grid-column:1;grid-row:1}
.about > div{grid-column:2;grid-row:1}
/* Heath 2026-09-03: full-bleed made these balloon — a 3:4 image in an ~810px column is
   ~1080px tall, taller than his 870px viewport, so the section could not be read without
   scrolling. Cap by viewport height and let the width follow the ratio (the same pattern
   he approved on the Join and ST40 heroes). Image stays uncropped. */
.about img{border-radius:2px;aspect-ratio:3/4;object-fit:cover;
  max-height:80vh;width:auto;max-width:100%;margin-inline:auto}
.about h2{font-size:clamp(26px,3.2vw,36px);line-height:1.24;margin:0 0 20px;font-weight:300;letter-spacing:.05em}
.about p{margin:0 0 13px;color:var(--ink-70);max-width:62ch;font-size:16px;line-height:1.62}
.about p.first{color:var(--ink);font-size:17.5px;font-weight:500}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.step{counter-increment:s;position:relative;padding-top:52px}
.step::before{content:counter(s);position:absolute;top:0;left:0;
  font-family:'Libre Baskerville',Georgia,serif;font-size:34px;color:var(--magenta);font-weight:700}
.step h3{font-size:17px;margin:0 0 10px;font-weight:600;line-height:1.35}
.step p{margin:0;font-size:15.5px;color:var(--ink-70);line-height:1.6}
.dark .step p{color:#C9C2D2}
.dark .step::before{color:var(--gold)}

/* ---------- modules ---------- */
.modules{align-items:stretch;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.module{background:var(--white);border:1px solid var(--line);border-radius:2px;padding:24px 24px}
.module .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);
  font-weight:700;display:block;margin-bottom:12px}
.module h3{font-size:21px;margin:0 0 14px;font-weight:600}
.module p{margin:0 0 12px;font-size:16px;color:var(--ink-70);line-height:1.65}
.module p:last-child{margin-bottom:0}

/* ---------- quote ---------- */
.quote{background:var(--plum);color:var(--cream);text-align:center}
.quote blockquote{max-width:820px;margin:0 auto;font-size:clamp(22px,2.8vw,30px);line-height:1.4;
  font-weight:400}
.quote .attrib{margin-top:22px;font-size:15px;color:#D9CFE0;letter-spacing:.04em}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-size:18px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--magenta);font-size:24px;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding-top:14px;color:var(--ink-70);font-size:16.5px}
.faq .a ul{margin:10px 0 0;padding-left:20px}
.faq .a li{margin-bottom:6px}

/* ---------- final cta: WHITE section, brand colours on top ----------
   Her cutout came off a white studio backdrop, so a white ground hides the edge
   fringe completely. Heath's call 2026-09-02. */
.cta{background:#FFFFFF;color:var(--ink);text-align:center;border-top:1px solid var(--line)}
.cta h2{font-size:clamp(24px,3vw,36px);margin:0 0 16px;line-height:1.18;color:var(--ink)}
.cta p{font-size:17px;margin:0 auto 30px;color:var(--ink-70);max-width:46ch}
.cta .btn{background:var(--logo);color:#FFFFFF}
.cta .btn:hover{background:var(--logo-hover);color:#FFFFFF}
.cta .fineprint{margin-top:22px;font-size:14.5px;color:var(--ink-70)}  /* 7.21:1, was 3.64:1 */
.cta .fineprint a{color:var(--magenta)!important;text-decoration:underline}

/* ---------- footer: HER LOGO MAGENTA with black type (Heath 2026-09-02) ----------
   ⚠️ Tested all three of Heath's options on #CA0088:
        white  5.43:1  PASSES AA at any size   <- chosen
        black  3.87:1  large text only, and reads muddy on a saturated magenta
        black + white outline — a text-shadow gimmick that breaks up at small sizes
   White is the only one that is both accessible and clean. One-line swap if wanted. */
.site-foot{background:var(--logo);color:#FFFFFF;padding:32px 0 20px;
  font-size:16px;line-height:1.7;font-weight:400}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:26px}
.site-foot a{color:#FFFFFF;text-decoration:none;font-weight:500}
.site-foot a:hover,.site-foot a:focus-visible{text-decoration:underline}
.site-foot h2.foot-h{color:#FFFFFF;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 16px;font-weight:700;font-family:'Poppins',system-ui,sans-serif;line-height:1.4}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
/* social row — ⚠️ `.site-foot ul` (0,1,1) sets flex-direction:column and BEATS
   `.socials` (0,1,0). That stacked the icons vertically. Scope it to win. */
.site-foot ul.socials{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:9px;margin:20px 0 0;flex-wrap:wrap;list-style:none;padding:0}
.site-foot ul.socials li{display:flex}
.site-foot ul.socials a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-width:38px;padding:7px 7px 5px;border:1.5px solid rgba(255,255,255,.5);
  border-radius:8px;color:#FFFFFF;font-weight:600;text-decoration:none;
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.site-foot ul.socials svg{fill:currentColor;display:block}
.soc-tag{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}
.site-foot ul.socials a:hover,.site-foot ul.socials a:focus-visible{
  background:#FFFFFF;color:var(--logo);border-color:#FFFFFF;transform:translateY(-2px)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.32);padding-top:20px;display:flex;flex-wrap:wrap;
  gap:18px;align-items:center;justify-content:space-between;font-size:16px}
.powered{line-height:0}
.powered a{display:inline-block;line-height:0}
.powered img{width:160px;height:auto;opacity:.9;transition:opacity .4s ease}
.powered a:hover img{opacity:1}

@media (max-width:900px){
  .hero .wrap,.about{grid-template-columns:1fr;gap:28px}
  .about > img,.about > div{grid-column:1;grid-row:auto}
  .hero{padding:38px 0 44px}
  .hero-img img{max-height:44vh}
  .types,.modules{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  section{padding:44px 0}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--cream);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--line)}
  .nav.open a{padding:11px 0;width:100%}
  .nav-toggle{display:block}
  .site-head{position:relative}
}
@media (max-width:560px){ .steps{grid-template-columns:1fr} body{font-size:16px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* footer column headings are h2 for document outline, but must stay visually small */
.site-foot h2.foot-h{
  color:var(--cream);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 16px;font-weight:600;font-family:'Poppins',system-ui,sans-serif;line-height:1.4;
}
.module h2{font-size:21px;margin:0 0 14px;font-weight:600;font-family:'Poppins',system-ui,sans-serif}

/* Codex gate 2026-09-02: 320px viewport fixes */
@media (max-width:380px){
  .head-in{gap:10px;padding:12px 14px}
  .head-in .logo img{width:150px}
  .wrap{padding:0 var(--gutter)}
  .btn{padding:12px 18px;font-size:14px}
  .btn-lg{padding:15px 22px;font-size:15px}
}
.btn{max-width:100%;overflow-wrap:anywhere;word-break:break-word}

/* ---------- enquiry form ---------- */
.enquiry{max-width:760px;margin:0 auto}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.field{margin:0 0 20px}
.field label{display:block;font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:7px;color:var(--ink)}
.field .opt{font-weight:400;color:var(--ink-45)}
.field input,.field textarea{
  width:100%;font:400 16px/1.5 'Poppins',system-ui,sans-serif;color:var(--ink);
  background:var(--cream);border:1px solid var(--line-strong,#CFC5BE);border-radius:2px;
  padding:12px 14px;transition:border-color .15s}
.field input:focus,.field textarea:focus{border-color:var(--magenta);outline:none;
  box-shadow:0 0 0 3px rgba(155,4,111,.16)}
.field textarea{resize:vertical;min-height:120px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{margin:6px 0 14px}
.consent label{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--ink-70);cursor:pointer}
.consent input{margin-top:5px;width:18px;height:18px;flex:none;accent-color:var(--magenta)}
.finelaw{font-size:13.5px;color:var(--ink-45);margin:0 0 26px;line-height:1.6}
.formnote{max-width:760px;margin:0 auto 26px;padding:14px 18px;border-radius:2px;font-size:15.5px}
.formnote.ok{background:#E8F4EC;border:1px solid #1F7A4D;color:#155F3B}
.formnote.err{background:#FBE9EC;border:1px solid #A8202F;color:#8A1A26}
@media (max-width:700px){ .f-row{grid-template-columns:1fr} }

/* ---------- before/after gallery + lightbox ---------- */
.ba-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin-inline:auto}
.ba{display:block;width:100%;padding:0;border:1px solid rgba(255,255,255,.18);
  background:none;border-radius:2px;overflow:hidden;cursor:zoom-in;transition:border-color .2s}
.ba:hover{border-color:var(--gold)}
.ba img{width:100%;height:auto;display:block;aspect-ratio:13/10;object-fit:cover}
.ba-note{text-align:center;margin:26px auto 0;font-size:13.5px;color:#9990A6;max-width:52ch}
.cta-art{max-width:620px;margin:0 auto 10px;opacity:.9}
.lb{position:fixed;inset:0;z-index:999;background:rgba(30,26,38,.94);
  display:flex;align-items:center;justify-content:center;padding:28px}
.lb[hidden]{display:none}
.lb img{max-width:min(1100px,94vw);max-height:90vh;width:auto;height:auto;border-radius:2px}
.lb-close{position:absolute;top:16px;right:22px;background:none;border:0;color:#FDFBF7;
  font-size:44px;line-height:1;cursor:pointer;padding:6px 14px}
.lb-close:hover{color:var(--gold)}
@media (max-width:820px){ .ba-grid{grid-template-columns:1fr 1fr;gap:12px} }
@media (max-width:480px){ .ba-grid{grid-template-columns:1fr} .cta-art{max-width:100%} }

/* ---------- header: tighter, and fix the Join Now contrast ----------
   BUG: `.nav a` (0,1,1) beat `.btn` (0,1,0), so the CTA rendered ink-on-magenta.
   Raise specificity so the button keeps its own colours. */
.head-in{padding:12px 24px}
.head-in .logo img{width:auto;height:82px;max-width:52vw}
.nav a.btn{color:#FFFFFF;padding:11px 22px}
.nav a.btn:hover,.nav a.btn:focus-visible{background:var(--cream);color:var(--logo)}
.site-head{box-shadow:0 1px 0 rgba(46,42,57,.06)}
@media (max-width:900px){ .head-in .logo img{height:60px} }
@media (max-width:380px){ .head-in .logo img{height:50px} }

/* ---------- pricing plans ---------- */
/* Heath 2026-09-03: a 1/1 crop cut her off top and bottom. The photo is 4:5, so match it
   and raise the height cap — she is shown in full, uncropped. */
/* Heath 2026-09-03: same treatment as the ST40 hero, which he approved. The photo is 4:5,
   so a 4:5 box means object-fit:cover crops NOTHING — full head-to-toe, no wasted
   background, and 72vh keeps the whole hero above the fold. */
.join-hero .hero-img img{aspect-ratio:4/5;height:72vh;width:auto;max-height:none;
  max-width:100%;margin-left:auto;object-fit:cover;object-position:center center}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto;align-items:start}
.plan{position:relative;background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:30px 28px 28px}
.plan-best{border:2px solid var(--magenta);box-shadow:0 18px 50px -30px rgba(155,4,111,.55)}
.ribbon{position:absolute;top:-13px;left:34px;background:var(--magenta);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 14px;border-radius:2px}
.plan h3{font-size:24px;margin:0 0 12px;font-weight:400;letter-spacing:.03em}
.plan-sub{font-size:17px;color:var(--ink);font-weight:500;margin:0 0 10px}
.plan-for{font-size:15.5px;color:var(--ink-70);margin:0 0 24px}
.plan-price{margin:0 0 22px;display:flex;align-items:baseline;gap:6px}
.plan-price .amt{font-family:'Jost',system-ui,sans-serif;font-size:46px;font-weight:300;
  letter-spacing:.02em;color:var(--ink);line-height:1}
.plan-price .per{font-size:16px;color:var(--ink-45)}
.plan-cta{width:100%;text-align:center;margin-bottom:26px}
.plan-inc{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
  font-weight:700;margin:0 0 14px}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.55;color:var(--ink-70)}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;
  border-left:2px solid var(--magenta);border-bottom:2px solid var(--magenta);transform:rotate(-45deg)}
.ticks li b{color:var(--ink);font-weight:600}
.plan-note{text-align:center;max-width:60ch;margin:36px auto 0;font-size:14.5px;color:var(--ink-45)}
.plan-note strong{color:var(--ink)}
@media (max-width:860px){ .plans{grid-template-columns:1fr} }   /* #9 no order: DOM == visual */

/* ---------- closing CTA: Amanda flanking the copy ---------- */
.cta .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:end;gap:0 clamp(8px,3vw,48px)}
.cta-mid{text-align:center;padding:14px 0 26px;align-self:center}
.cta-side{width:clamp(96px,14vw,190px);height:auto;align-self:end;display:block}
.cta-l{order:-1}   /* decorative, alt="" aria-hidden — safe to reorder */
.cta h2{font-size:clamp(23px,2.7vw,32px);margin:0 0 14px}
.cta p{font-size:16.5px;max-width:44ch;margin:0 auto 28px}
.cta .btn-lg{font-size:16px;padding:15px 34px}
.cta .fineprint{margin-top:20px}
  @media (max-width:860px){
  .cta .wrap{grid-template-columns:1fr 1fr;gap:0}
  .cta-mid{grid-column:1 / -1;padding-bottom:14px}
  .cta-l{order:0}   /* stacked: copy on top, both images below — DOM order already says so */
  .cta-side{width:clamp(88px,30vw,150px);justify-self:center}
}

/* footer brand mark — her real logo, recoloured white for the magenta ground */
.site-foot h2.foot-logo{margin:0 0 18px;letter-spacing:0}
.site-foot h2.foot-logo img{width:auto!important;height:56px!important;max-width:100%;display:block}
@media (max-width:900px){ .site-foot h2.foot-logo img{height:56px} }

/* ---------- contact page ---------- */
.contact-hero{padding:44px 0 48px}
/* Heath 2026-09-02: solid colour hero — no photo behind the type. The purple shot
   moved down into the aside card instead. */
.hero.contact-hero .wrap{grid-template-columns:1fr;text-align:center}
.hero.contact-hero p.lede{margin-left:auto;margin-right:auto}  /* out-specify .hero p.lede */

.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.contact-form-col h2{font-size:clamp(24px,3vw,32px);margin:0 0 10px}
.contact-intro{color:var(--ink-70);margin:0 0 30px}
.contact-form-col .enquiry{max-width:none}

.field select{width:100%;font:400 16px/1.5 'Poppins',system-ui,sans-serif;color:var(--ink);
  background:var(--cream);border:1px solid var(--line-strong,#CFC5BE);border-radius:2px;
  padding:12px 14px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-45) 50%),linear-gradient(135deg,var(--ink-45) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select:focus{border-color:var(--logo);outline:none;box-shadow:0 0 0 3px rgba(202,0,136,.16)}

.contact-aside{position:sticky;top:110px}
.contact-photo{width:100%;max-width:57.6vh;aspect-ratio:4/5;margin-inline:auto;overflow:hidden;border-radius:2px}
/* ⚠️ 2026-09-04: the box is reserved by the WRAPPER, not the image. width/height:auto
   on the img gave the browser no definite size before load, so the facts panel below
   jumped — CLS 0.145 on contact.html. max-width 57.6vh == 72vh x 4/5, which keeps the
   old max-height:72vh behaviour. Do not put aspect-ratio back on the img. */
.contact-aside .contact-photo img{width:100%;height:100%;max-height:none;display:block;object-fit:cover;
  object-position:center 20%;margin-bottom:24px}
.contact-facts{background:var(--white);border:1px solid var(--line);border-radius:2px;padding:28px 26px}
.contact-facts h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);
  font-weight:700;margin:0 0 18px;font-family:'Poppins',system-ui,sans-serif}
.contact-facts .ticks li{font-size:16px}
.contact-facts a:not(.btn){color:var(--logo);font-weight:600}
.contact-facts a.btn{color:#fff}   /* .contact-facts a was beating .btn — magenta on magenta */
.contact-loc{margin:22px 0 0;font-size:14px;color:var(--ink-45);letter-spacing:.02em}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .contact-aside{position:static}   /* #9 form first on mobile, matching the DOM */
  .contact-photo{max-width:108vh;aspect-ratio:3/2}
  .contact-aside .contact-photo img{object-position:center 18%}
  .contact-hero{padding:70px 0 76px}
}

/* text-only heroes: no image column, so keep them compact */
.hero .wrap:not(:has(.hero-img)){padding-block:6px}
.hero .wrap:not(:has(.hero-img)) .lede{margin-bottom:6px}

/* #10 — inline validation messages */
.field-err{display:block;margin-top:6px;font-size:14px;color:#8A1A26;font-weight:500}
.enquiry [aria-invalid="true"]{border-color:#A8202F;box-shadow:0 0 0 3px rgba(168,32,47,.12)}

/* ---------- shop: the $33 guide, led by its real cover ---------- */
/* align-items:start, not center — centring made the two cards' headings start at
   different heights, so they read as mismatched even with identical images. */
.module-book{display:grid;grid-template-columns:clamp(160px,30%,300px) minmax(0,1fr);
  gap:clamp(20px,3vw,34px);align-items:start}
/* Heath 2026-09-03: these are PRODUCT COVERS with text baked in — cropping cut
   "STRONGER THAN 40" mid-word and clipped her logo and footer off the ebook. So: never crop.
   Equal HEIGHT with width following each image's own ratio, centred in a column wide enough
   for the wider of the two. Same visual weight, nothing lost. */
.module-book .book-cover{height:clamp(240px,32vh,330px);width:auto;max-width:100%;
  object-fit:contain;display:block;margin-inline:auto;align-self:center;border-radius:2px;
  box-shadow:0 22px 48px -26px rgba(46,42,57,.55)}
.module-book .book-copy > :first-child{margin-top:0}
@media (max-width:620px){
  .module-book{grid-template-columns:1fr;justify-items:center;text-align:center}
  .module-book .book-cover{max-width:210px}
}

/* the button + secondary link used to collide when the link wrapped */
.module-actions{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.module-actions .module-link{font-weight:600;color:var(--magenta)}

/* cache-bust 2026-09-02: Cloudflare had cached a 404 for the previous filename */

/* Google Business Profile card — she is a service-area business, so no map and no address */
.google-card{margin-top:22px}
.google-card p{margin:0 0 18px;font-size:16px}
.google-card .module-actions{margin-top:0}

/* ---------- legal pages: long-form reading, generous measure ---------- */
.legal{max-width:74ch;margin:0 auto}
.legal h2{font-family:Jost,sans-serif;font-weight:300;font-size:clamp(21px,2.4vw,27px);
  letter-spacing:-.01em;margin:38px 0 12px;color:var(--ink);text-wrap:balance}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 15px;color:var(--ink-70);font-size:16.5px;line-height:1.72}
.legal .legal-updated{font-family:'Poppins',sans-serif;font-size:14px;color:var(--ink-45);
  letter-spacing:.02em;margin-bottom:30px}
.legal-list{margin:0 0 18px;padding-left:22px}
.legal-list li{margin:0 0 8px;color:var(--ink-70);font-size:16.5px;line-height:1.66}
.legal a{color:var(--magenta);font-weight:500}
.hero.legal-hero{padding:52px 0 56px}
.hero.legal-hero h1{margin-bottom:0}

/* Heath 2026-09-03: tall portrait box, not a sideways rectangle. The source is 4:5, so a
   4:5 box means object-fit:cover crops NOTHING — her full body, no side background wasted.
   74vh keeps the whole hero on screen without scrolling. */
.hero-img img[src*="st40/hero"]{aspect-ratio:4/5;height:72vh;width:auto;max-height:none;
  max-width:100%;margin-left:auto;object-position:center center}

/* ⛔ 2026-09-04: `.module-book{display:grid}` BEATS the UA stylesheet's
   [hidden]{display:none}, so hidden confirmation cards rendered anyway and the
   buyer saw BOTH "your program is on the way" AND "welcome to ST40". Any class
   that sets `display` outranks the attribute — this is the guard. */
[hidden]{display:none!important}

/* ── Confirmation pages (thank-you*.html) ────────────────────────────────────
   Heath, 2026-09-04: "that thank you page should basically just open up to one
   single page you shouldn't even have to scroll it."
   A confirmation is a receipt, not a landing page — it should be readable at a
   glance on a phone, a tablet and a laptop. Everything here is scoped to
   body.ty so no other page moves. The footer's Explore/Members columns are
   hidden here ONLY: both already sit in the header nav two inches above, so on
   this page they are pure height. ⛔ Do not "tidy" these into the global rules. */
.ty .hero{padding:14px 0 16px}
.ty .hero h1{font-size:clamp(30px,4.6vw,50px);margin:2px 0 6px}
.ty .hero .lede{margin-block:0}
.ty .hero .eyebrow{margin:0 0 2px}
.ty main section{padding:18px 0}
.ty .modules{grid-template-columns:1fr;max-width:800px;margin-inline:auto;gap:14px}
.ty .module{padding:16px 18px}
.ty .module-book{grid-template-columns:clamp(96px,20%,150px) minmax(0,1fr);gap:16px;align-items:start}
.ty .module h2{margin:2px 0 6px}
.ty .module p{margin:0 0 8px}
.ty .module p:last-child{margin-bottom:0}
.ty .module .ticks{margin:6px 0 8px}
.ty .module .ticks li{font-size:15px}
.ty .module-note{font-size:13.5px;line-height:1.45}
.ty main section h2.serif{margin:0 0 6px;font-size:clamp(22px,2.6vw,30px)}
.ty main section .lede{margin:0 auto 12px}
.ty .module-actions{margin:0}

/* compact footer — logo + blurb + socials only */
.ty .site-foot{padding:24px 0 16px}
.ty .site-foot ul{gap:6px}
.ty .site-foot h2.foot-logo{margin:0 0 8px}
.ty .site-foot h2.foot-logo img{height:38px!important}
.ty .site-foot .socials{margin-top:10px}
.ty .foot-bottom{margin-top:12px;padding-top:10px}

@media (max-width:900px){
  .ty .hero{padding:10px 0 12px}
  .ty main section{padding:12px 0}
  .ty .module-book{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .ty .module{padding:13px 14px}
  .ty .module-note{font-size:12.5px}
  .ty .site-foot{padding:14px 0 10px}
}