/**
 * Takween Therapy — Consolidated Stylesheet
 *
 * Ported directly from the approved prototype (takween-prototype-v3.html),
 * per the brief: "Take the copy directly from the prototype... match it
 * closely, not loosely." Same applies to CSS — this is the prototype's
 * <style> block as-is, with only the SPA page-router rules removed
 * (.page / .page.on), since WordPress serves each page at its own real URL
 * instead of toggling divs client-side.
 *
 * Single consolidated file per the project's standing pattern — full-file
 * overwrite when updating, not incremental patches, to avoid drift.
 */

:root{
  --navy:#10243B;
  --navy-mid:#22405C;
  --sage:#6B7F6D;
  --sage-deep:#54654F;
  --sage-tint:#E6EBE3;
  --sage-wash:#F2F5F0;
  --gold:#C9A46A;
  /* Darkened from #9C7830 (QA — small gold text contrast): the old value
     measured only 3.17–4.08:1 on the site's light surfaces (e.g. 3.38:1 on
     --sage-tint behind the homepage "Take a Moment" label). #7B5F26 keeps
     the same hue and clears 4.5:1 on every light surface it's used on:
     paper 5.84, white 5.99, sage-wash 5.44, sage-tint 4.95, cream 4.64,
     cream-soft 5.22. Recheck here before using it on any new background. */
  --gold-ink:#7B5F26;      /* accessible gold for small text on light */
  --gold-on-dark:#D4B688;  /* small gold text over the closing CTA's lighter sage glow (4.6:1 at its brightest; 8.1:1 on plain navy) — --gold only reaches ~3.8:1 there */
  --cream:#E8E2D6;
  --cream-soft:#F3EFE6;
  --paper:#FDFCFA;
  --ink:#132434;
  --body-ink:#3A4B59;      /* strengthened body colour */
  --line:rgba(16,36,59,.14);
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Jost","Sofia Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:1160px;
  --shadow:0 20px 46px -26px rgba(16,36,59,.32);
  --shadow-sm:0 8px 22px -14px rgba(16,36,59,.28);
  --radius-card:16px; /* was referenced by 5 empty-state boxes sitewide but never defined, so they rendered square-cornered */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;background:var(--paper);color:var(--body-ink);
  font-family:var(--body);font-weight:400;font-size:17.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}

/* TW-29 — hardens the_content() output (single-resource.php's blog/article/
   video detail page) against fixed-width elements a post's content might
   contain: a pasted <table>, an image inserted at a fixed pixel width wider
   than the phone viewport, an <iframe> embed, or a <pre> code block. Without
   this, body's overflow-x:hidden above clips such an element on both edges
   rather than letting it scroll — exactly the "part of the text on the
   right, part on the left, only the middle visible" symptom described.
   The universal `.entry-content *` rule (with !important) is the real fix
   for the reported case: content pasted from Word/Google Docs commonly
   wraps paragraphs in a plain <div>/<p> carrying an inline style="width:…"
   — that's not an img/table/iframe, so the specific rules below never
   caught it, and an inline style always wins over an external stylesheet
   rule of any specificity short of !important. */
.entry-content{max-width:100%;overflow-wrap:break-word;word-wrap:break-word}
.entry-content *{max-width:100% !important;}
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object{height:auto !important;}
.entry-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content pre{overflow-x:auto;white-space:pre-wrap;word-break:break-word}

/* TW-21 — plain prose legal pages; h2 sitewide is sized for big section
   headings ("Ready to take the first step?"), way too large for repeated
   numbered subsections in a Terms/Privacy document. */
.legal-copy h2{font-size:1.15rem;line-height:1.3;margin:34px 0 12px}
.legal-copy h2:first-child{margin-top:0}
.legal-copy h3{font-size:1.02rem;line-height:1.35;margin:24px 0 10px}
.legal-copy p{color:var(--body-ink);font-size:.96rem;line-height:1.65}
.legal-copy ul,.legal-copy ol{margin:0 0 1em;padding-left:22px}
.legal-copy li{margin-bottom:6px;line-height:1.6;color:var(--body-ink);font-size:.96rem}
.legal-copy a{color:var(--navy);text-decoration:underline;transition:color .2s}
.legal-copy a:hover{color:var(--gold-ink)} /* was --gold: 2.28:1 on paper */

/* ---------- type: heavier, higher contrast ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--navy);margin:0;letter-spacing:0}
h1{font-size:clamp(2.5rem,5.4vw,4rem);line-height:1.08}
h2{font-size:clamp(1.95rem,3.8vw,2.85rem);line-height:1.16}
h3{font-size:1.4rem;line-height:1.3}
p{margin:0 0 1em}
.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 14px;display:block;
}
.eyebrow.light{color:var(--gold)}
.lede{font-size:1.1rem;font-weight:400;color:var(--body-ink);max-width:62ch;line-height:1.72}
.dark .lede,.dark p{color:rgba(255,255,255,.9)}
.dark h1,.dark h2,.dark h3{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;padding:15px 28px;border-radius:60px;
  border:1.5px solid transparent;transition:.32s cubic-bezier(.2,.7,.3,1);
}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-gold:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:rgba(16,36,59,.32)}
.btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)}
.dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.dark .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-sm{padding:11px 20px;font-size:.72rem}

/* ---------- header ----------
   header.site's own box (fixed bar, background/border/shadow) and .nav-pill's
   layout tweaks are defined together further down, in the "Header — full-width
   bar" section — kept as one definition instead of splitting it across two
   places in the file. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand .logo{height:56px;width:auto;flex-shrink:0;display:block}
.menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.menu a{
  text-decoration:none;font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--body-ink);
  padding:6px 0;position:relative;transition:.25s;
}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:.3s}
.menu a:hover::after,.menu a.on::after{width:100%}
.menu a:hover,.menu a.on{color:var(--navy)}
.nav-actions{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px}
.drawer{position:fixed;inset:0;background:var(--paper);z-index:200;padding:76px 26px 40px;transform:translateY(-100%);transition:.45s cubic-bezier(.6,0,.2,1);overflow-y:auto;pointer-events:none;visibility:hidden}
.drawer.open{transform:translateY(0);pointer-events:auto;visibility:visible}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{border-bottom:1px solid var(--line)}
.drawer a{display:block;padding:15px 0;text-decoration:none;color:var(--navy);font-family:var(--display);font-weight:600;font-size:1.5rem}
.drawer .close{position:absolute;top:20px;right:22px;background:none;border:0;color:var(--navy);font-size:2rem;cursor:pointer;line-height:1}
/* TW-24: without this, .drawer a (display:block, large display-font sizing)
   overrides .btn's own display/padding/typography, since it carries higher
   specificity — the CTA would render as an oversized plain nav link instead
   of a button. */
.drawer .btn{display:inline-flex;width:100%;justify-content:center;margin-top:24px;padding:15px 28px;border-radius:60px;font-family:var(--body);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#fff}
.drawer .btn:hover{color:var(--navy)}

/* ---------- page router ---------- */
.sec{padding:96px 0}
.sec-sm{padding:66px 0}
/* A .sec-sm's own bottom padding plus the next .sec's top padding stack to
   ~162px of dead space where they're adjacent — halve the combined gap
   without touching either section's padding against non-adjacent neighbours. */
.sec-sm + .sec{padding-top:48px}
.sec-head{max-width:640px;margin-bottom:50px}
.sec-head.centre{margin-left:auto;margin-right:auto;text-align:center}
.wash{background:var(--cream-soft)}
.sagewash{background:var(--sage-wash)}
.dark{background:var(--navy);color:#fff}

/* page banner for inner pages */
.banner{background:var(--cream-soft);border-bottom:1px solid var(--line);padding:56px 0 48px;position:relative;overflow:hidden}
.banner .crumb{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.banner h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.banner p{margin-top:14px;max-width:62ch}
.banner .motif{position:absolute;right:-60px;top:-40px;width:280px;opacity:.09;color:var(--navy)}

/* ---------- hero (light) ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--cream-soft) 0%,var(--paper) 55%,var(--sage-wash) 100%);padding:74px 0 78px}
.hero .veil{position:absolute;inset:0;pointer-events:none}
.hero .veil .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42}
.hero .b1{width:44vw;height:44vw;background:radial-gradient(circle,rgba(107,127,109,.5),transparent 70%);top:-16%;right:-10%}
.hero .b2{width:34vw;height:34vw;background:radial-gradient(circle,rgba(201,164,106,.4),transparent 70%);bottom:-18%;left:-8%}
.hero .motif{position:absolute;right:-6%;bottom:-26%;width:min(480px,46vw);opacity:.07;color:var(--navy);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold-ink)}
.hero .lede{margin-top:20px;font-size:1.14rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* Superseded TW-02's "match .btn-ghost exactly" treatment: four same-weight
   pills (2 real buttons + 2 assure pills) all competing at once read as a
   wall of buttons, not a hierarchy — so these sit a size down from the real
   CTAs: white pill badges, icon + label + a quietly-visible arrow. */
.assure-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.assure{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--navy);background:#fff;border:1px solid rgba(16,36,59,.08);border-radius:999px;padding:11px 18px;cursor:pointer;box-shadow:0 4px 14px rgba(16,36,59,.12);transition:.25s ease;text-decoration:none}
.assure:hover{color:var(--navy);transform:translateY(-1px);box-shadow:0 6px 20px rgba(16,36,59,.18)}
.assure:hover svg{color:var(--gold-ink)}
.assure .arw{opacity:.4;color:rgba(16,36,59,.4);transition:.25s ease}
.assure:hover .arw{opacity:.85;transform:translateX(2px)}
.assure svg{flex:0 0 15px;color:var(--sage)}

/* helper card (light) */
.helper-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.helper-card .status{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--sage);display:inline-block;box-shadow:0 0 0 0 rgba(107,127,109,.6);animation:pulse 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(107,127,109,.5)}70%{box-shadow:0 0 0 11px rgba(107,127,109,0)}100%{box-shadow:0 0 0 0 rgba(107,127,109,0)}}
.helper-card h3{font-size:1.5rem;margin-bottom:8px}
.helper-card p{font-size:.95rem;margin-bottom:18px}
.helper-card .btn{width:100%;justify-content:center;white-space:nowrap;font-weight:700}
.helper-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{background:var(--sage-wash);border:1px solid var(--line);color:var(--navy);border-radius:40px;padding:8px 15px;font-size:.79rem;font-weight:500;cursor:pointer;transition:.28s}
.chip:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.helper-note{font-size:.75rem;line-height:1.55;color:#5A6975;margin:14px 0 0;text-align:center}
.helper-note strong{color:var(--navy);font-weight:600}

/* ---------- who we support ---------- */
/* TW-26 */
.consult-nudge{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;font-size:.92rem;color:var(--navy);text-decoration:none;padding:8px 4px}
.consult-nudge strong{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px}
.consult-nudge .arw{opacity:.5;transition:.3s}
.consult-nudge:hover .arw{opacity:1;transform:translateX(3px)}
@media(max-width:480px){ .consult-nudge{font-size:.85rem} }
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Card interaction (lift + magnetic tilt) is driven by GSAP in
   assets/js/core/card-interactions.js, which sets transform directly —
   CSS deliberately does NOT set :hover{transform:...} here, since an
   inline style from GSAP would just fight/override a CSS transform rule
   on the same property. CSS only owns non-transform hover states
   (shadow, border, colour) so the two systems never collide. If GSAP or
   motion is unavailable, the card still has a real (if simpler) native
   CSS lift — see .tile:hover below the no-js fallback. */
.tile{
  position:relative;background:#fff;border:1px solid var(--line);border-left:3px solid transparent;
  border-radius:14px;padding:28px 24px 26px;overflow:hidden;text-align:left;text-decoration:none;
  display:flex;flex-direction:column;height:100%;
  transition:box-shadow .4s cubic-bezier(.2,.7,.3,1),border-color .4s cubic-bezier(.2,.7,.3,1);
  cursor:pointer;
}
.tile::before{
  content:"";position:absolute;top:-40%;right:-30%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,164,106,.16) 0%,transparent 72%);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.tile:hover{box-shadow:var(--shadow);border-color:rgba(201,164,106,.6);border-left-color:var(--gold)}
.tile:hover::before{opacity:1}
.no-js .tile:hover,.tw-no-tilt .tile:hover{transform:translateY(-5px)} /* fallback lift when JS/GSAP never runs — see card-interactions.js */
.tile .ico-badge{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--sage-tint);margin-bottom:18px;transition:background .4s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .ico-badge{background:var(--gold)}
.tile .ico{width:22px;height:22px;color:var(--sage-deep);transition:color .4s cubic-bezier(.2,.7,.3,1)}
.tile:hover .ico{color:var(--navy)}
.tile h3{font-size:1.28rem;margin-bottom:6px}
.tile p{font-size:.93rem;margin:0}
.tile .go{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-top:auto;padding-top:14px;display:inline-block;opacity:1;transform:none;transition:.35s}
.tile:hover .go{transform:translateX(3px)}

/* ---------- offerings (readable) ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.offer-grid-2{grid-template-columns:repeat(2,1fr)}
.offer{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 24px 26px;text-decoration:none;display:block;transition:.38s;position:relative;overflow:hidden;text-align:left;cursor:pointer;width:100%}
.offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sage);transform:scaleY(0);transform-origin:top;transition:.4s}
.offer:hover::before{transform:scaleY(1)}
.offer:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.offer .kicker{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);display:block}
.offer h3{font-size:1.32rem;margin:12px 0 9px}
.offer p{font-size:.93rem;margin:0}

/* ---------- take a moment ---------- */
.moment-hero{background:linear-gradient(165deg,var(--sage-tint),var(--sage-wash) 60%,var(--paper));position:relative;overflow:hidden}
.act-shell{background:var(--sage-wash);padding:96px 0}
.act-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.act-tab{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);color:var(--navy);padding:12px 22px;border-radius:50px;cursor:pointer;font-size:.83rem;font-weight:500;transition:.3s}
.act-tab svg{flex:0 0 16px;color:var(--sage-deep);transition:.3s}
.act-tab:hover{border-color:var(--sage)}
.act-tab.on{background:var(--sage);color:#fff;border-color:var(--sage);box-shadow:var(--shadow-sm)}
.act-tab.on svg{color:#fff}
.act-stage{background:#fff;border:1px solid var(--line);border-radius:22px;padding:42px 30px;box-shadow:var(--shadow)}
.act-panel{display:none;text-align:center}
.act-panel.on{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.act-title{font-family:var(--display);font-weight:600;font-size:1.75rem;color:var(--navy);margin-bottom:6px}
.act-sub{font-size:.95rem;margin-bottom:26px;max-width:52ch;margin-left:auto;margin-right:auto}

/* breathing */
.breath-stage{display:flex;flex-direction:column;align-items:center;gap:20px}
.breath-ring{position:relative;width:min(250px,66vw);height:min(250px,66vw);display:grid;place-items:center}
.breath-halo{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(107,127,109,.28)}
.breath-orb{width:44%;height:44%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#DCE5D9 45%,var(--sage) 100%);box-shadow:0 14px 44px -14px rgba(107,127,109,.6)}
.breath-word{position:absolute;font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--navy);pointer-events:none}
.breath-count{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep)}
.pattern-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.pattern-row .chip.on{background:var(--sage);color:#fff;border-color:var(--sage)}

/* puzzle */
.scene-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}
.scene-pick{width:64px;height:46px;border-radius:9px;border:2px solid var(--line);cursor:pointer;background-size:cover;background-position:center;transition:.3s;padding:0}
.scene-pick.on{border-color:var(--sage);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.puzzle-grid{width:min(360px,82vw);height:min(360px,82vw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px}
.p-tile{border-radius:7px;cursor:pointer;background-size:300% 300%;border:0;padding:0;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;outline:2.5px solid transparent;outline-offset:-2px}
.p-tile:hover{transform:scale(.965)}
.p-tile.sel{outline-color:var(--gold);transform:scale(.94)}
.p-status{margin-top:16px;font-size:.9rem;font-weight:500;color:var(--sage-deep);min-height:24px}

/* colouring */
.colour-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.swatches{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);cursor:pointer;transition:.22s;padding:0}
.sw:hover{transform:scale(1.12)}
.sw.on{border-color:var(--navy);transform:scale(1.18)}
.canvas-box{width:min(420px,86vw);background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.canvas-box svg{width:100%;height:auto;display:block}
.canvas-box .region{fill:#FDFCFA;stroke:var(--navy);stroke-width:1.5;cursor:pointer;transition:fill .35s ease}
.canvas-box .region:hover{stroke-width:2.4}
/* Keyboard focus on a colourable area (QA — colouring keyboard access): SVG
   shapes don't reliably draw outlines, so the stroke itself is the ring. */
.canvas-box .region:focus{outline:none}
.canvas-box .region:focus-visible{stroke:var(--gold-ink);stroke-width:5;stroke-dasharray:10 5}
.canvas-box .liner{fill:none;stroke:var(--navy);stroke-width:1.5;pointer-events:none}

.act-foot{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.act-foot p{max-width:50ch;font-size:.96rem;margin:0}
.act-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.disclaim{font-size:.78rem;color:#5A6975;max-width:56ch}

/* teaser band on home */
.teaser{background:var(--sage-tint);border-radius:24px;padding:48px 44px;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center;position:relative;overflow:hidden}
.teaser .motif{position:absolute;right:-40px;bottom:-60px;width:250px;opacity:.12;color:var(--sage-deep)}
.teaser h2{font-size:clamp(1.7rem,3vw,2.35rem)}
.teaser p{margin:14px 0 0;max-width:48ch}
.teaser .picks{display:flex;flex-direction:column;gap:10px;position:relative;z-index:2}
.pick{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;text-decoration:none;font-weight:500;color:var(--navy);font-size:.94rem;cursor:pointer;transition:.3s;text-align:left;width:100%}
.pick:hover{transform:translateX(5px);box-shadow:var(--shadow-sm);border-color:var(--sage);background:var(--sage-tint);color:var(--sage-deep)}
.pick:hover svg{color:var(--sage)}
.pick svg{flex:0 0 22px;color:var(--sage-deep)}
/* TW-03: same trailing-arrow affordance as .assure/.tile .go, so these read
   as clickable rather than plain informational rows. */
.pick .arw{margin-left:auto;opacity:.5;transition:.3s}
.pick:hover .arw{opacity:1;transform:translateX(3px)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.steps::before{content:"";position:absolute;top:25px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent);opacity:.5}
.step{position:relative}
.step .dot{width:50px;height:50px;border-radius:50%;background:#fff;border:2px solid var(--gold);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--navy);margin-bottom:20px;position:relative;z-index:2;transition:.35s}
.step:hover .dot{background:var(--gold);transform:scale(1.08)}
.step h3{font-size:1.18rem;margin-bottom:7px}
.step p{font-size:.93rem;margin:0}

/* team */
/* TW-07/TW-27 team carousel — built from scratch since no prior CSS for
   this existed. .team is the horizontally-scrolling track; .team-nav-row
   overlays it (desktop) or sits below it (mobile, see breakpoint) so the
   arrows travel with the row instead of scrolling away from it. */
.team-carousel{position:relative}
.team-carousel .team{display:flex;align-items:stretch;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.team-carousel .team::-webkit-scrollbar{display:none}
.team-carousel .team>*{scroll-snap-align:start;flex:0 0 calc((100% - 48px) / 3);min-width:0;display:flex;flex-direction:column;align-self:stretch}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;overflow:visible;align-items:stretch}
.team-grid>*{flex:unset;min-width:unset;height:100%;display:flex;flex-direction:column}
.team-nav-row{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.team-nav{pointer-events:auto;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px -8px rgba(16,36,59,.45);color:var(--navy);transition:.25s}
.team-nav.prev{transform:translateX(calc(-100% - 10px))}
.team-nav.next{transform:translateX(calc(100% + 10px))}
.team-nav:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.team-nav[disabled]{opacity:.3;cursor:default;pointer-events:none}
.team-nav-row.no-overflow{display:none}
/* Lift (translateY) on hover is owned by GSAP (card-interactions.js), same
   reasoning as .tile — CSS never sets a :hover{transform} here so the two
   systems can't fight over the same property. .no-js/.tw-no-tilt below is
   the fallback lift for when JS/GSAP never runs. */
.card-p{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;height:100%;transition:box-shadow .42s cubic-bezier(.2,.7,.3,1),border-color .42s cubic-bezier(.2,.7,.3,1)}
.card-p:hover{box-shadow:var(--shadow);border-color:rgba(201,164,106,.6)}
.no-js .card-p:hover,.tw-no-tilt .card-p:hover{transform:translateY(-6px)}
.card-p .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream);flex:0 0 auto}
/* Live WP 'medium' thumbs have mixed ratios (225x300 vs 300x297). Pin the
   img to the frame so those attributes cannot shift the crop up/down. */
.card-p .ph img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;filter:saturate(.9) sepia(.06) contrast(1.04);transition:.7s cubic-bezier(.2,.7,.3,1)}
.card-p .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(16,36,59,.12) 100%)}
.card-p:hover .ph img{transform:scale(1.05)}
.card-p .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.card-p h3{font-size:1.36rem}
.card-p .role{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:6px 0 12px}
.card-p p{font-size:.93rem;margin:0 0 16px;line-height:1.6;color:var(--body-ink);flex:1 1 auto}
.tags{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:6px}
.card-p .tags{width:100%;margin-top:auto;margin-bottom:16px;min-height:calc(2 * (10px + .71rem * 1.2) + 6px);overflow:visible}
.tag{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;font-size:.71rem;line-height:1.2;font-weight:500;background:var(--sage-wash);color:var(--sage-deep);padding:5px 12px;border-radius:30px}

/* services */
.svc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.svc-tab{background:#fff;border:1.5px solid var(--line);color:var(--body-ink);padding:11px 20px;border-radius:50px;cursor:pointer;font-size:.82rem;font-weight:500;transition:.28s}
.svc-tab:hover{border-color:var(--gold);color:var(--navy)}
.svc-tab.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.svc-panel{display:none}
.svc-panel.on{display:block;animation:fade .4s ease}
.svc-note{font-size:.88rem;font-weight:500;color:var(--sage-deep);background:var(--sage-wash);border-left:3px solid var(--sage);padding:12px 18px;border-radius:8px;margin-bottom:22px}
/* FIXED (TW-10): grid-template-columns:repeat(3,1fr) left dangling empty
   tracks whenever a panel's item count wasn't a multiple of 3 (e.g. 13
   items = 4 full rows + 1 lone item, with 2 blank cells beside it). Flexbox
   with justify-content:center wraps the same 3-per-row layout but centers
   an incomplete last row instead of leaving visible gaps. */
/* TW-12/13 (Free Workshops page) — built from scratch, no prior styles
   existed for either of these. */
.trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
/* cursor:default and no hover-state deliberately — these are informational,
   not actions, unlike every real .btn on this site which does have both. */
.trust-badge{display:inline-flex;align-items:center;gap:6px;background:var(--sage-wash);border:1px solid var(--sage);border-radius:50px;padding:9px 14px;font-size:.81rem;font-weight:500;color:var(--navy);cursor:default;white-space:nowrap}
.trust-badge svg{flex:0 0 15px;color:var(--sage-deep)}
/* Same radial-glow depth technique as .band (gold + a soft white wash),
   scaled down and corner-anchored for a smaller card. overflow:hidden
   keeps both glows clipped to the card's own rounded corners. */
.topics-band{position:relative;overflow:hidden;background:var(--navy);border-radius:20px;padding:36px 34px}
.topics-band::before{content:"";position:absolute;top:-45%;right:-15%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle, rgba(201,164,106,.22) 0%, transparent 68%);pointer-events:none}
.topics-band::after{content:"";position:absolute;bottom:-40%;left:10%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);pointer-events:none}
.topics-band > *{position:relative}
.topics-band .eyebrow{margin-bottom:6px}
.topics-band h3{color:#fff;font-size:1.3rem;margin-bottom:18px}
.topic-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
/* White text on navy per TW-13's fix instruction — this band must never
   drop below that contrast. Tags are real links (each jumps to the matching
   card below), so they get a visible hover/focus state like every other
   interactive element on the site, not just a static badge look. */
.topic-tag{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;height:100%;min-height:4.1rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:50px;padding:12px 16px;font-size:.85rem;font-weight:500;line-height:1.3;color:#fff;text-decoration:none;text-align:center;transition:.25s ease}
.topic-tag span{min-width:0;line-height:1.25}
.topic-tag svg{flex:0 0 16px;color:var(--gold);transition:.25s ease}
.topic-tag:hover,.topic-tag:focus-visible{background:rgba(255,255,255,.18);border-color:var(--gold);transform:translateY(-2px)}
.topic-tag:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.svc-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:left}
.svc-item{flex:0 1 calc((100% - 32px) / 3);background:#fff;border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:10px;padding:22px;transition:.32s;display:flex;flex-direction:column}
.svc-item:hover{border-left-color:var(--gold);transform:translateX(4px);box-shadow:var(--shadow-sm)}
.svc-item h4{font-size:1.18rem;margin-bottom:10px}
.svc-item ul{margin:0;padding-left:15px;list-style:none}
.svc-item li{font-size:.9rem;position:relative;padding:2px 0}
.svc-item li::before{content:"";position:absolute;left:-14px;top:13px;width:6px;height:2px;background:var(--gold)}

/* 1 row x 4 columns grid for 4-card workshops / community sets */
.svc-grid-4,
#svc-wor .svc-grid,
.svc-grid:has(> .svc-item:nth-child(4):last-child){
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  width:100%;
}
.svc-grid-4 .svc-item,
#svc-wor .svc-grid .svc-item,
.svc-grid:has(> .svc-item:nth-child(4):last-child) .svc-item{
  flex:unset;
  max-width:100%;
  width:100%;
  box-sizing:border-box;
}

.fees{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fee{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;text-align:center}
.fee .amt{font-family:var(--display);font-weight:700;font-size:2.4rem;color:var(--navy);line-height:1}
.fee .lbl{font-size:.73rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-top:10px}
.fee .note{font-size:.85rem;margin-top:8px}

/* ---------- band (modern high-converting CTA card) ---------- */
.band{
  position:relative;
  background:linear-gradient(135deg, var(--sage-deep) 0%, var(--sage) 60%, #738775 100%);
  color:#fff;
  border-radius:24px;
  padding:48px 52px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:36px;
  align-items:center;
  overflow:hidden;
  box-shadow:0 22px 48px -24px rgba(16,36,59,.35), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.12);
}
.band::before{
  content:"";
  position:absolute;
  top:-60%;
  right:-10%;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,164,106,.22) 0%, transparent 68%);
  pointer-events:none;
}
.band::after{
  content:"";
  position:absolute;
  bottom:-50%;
  left:25%;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events:none;
}
.band-content{
  position:relative;
  z-index:2;
}
.band .eyebrow{
  color:rgba(255,255,255,.82);
  display:inline-block;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.band h2{
  color:#fff;
  font-family:var(--display);
  font-size:clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight:600;
  line-height:1.2;
  margin:0 0 12px;
  letter-spacing:-.01em;
}
.band p{
  color:rgba(255,255,255,.92);
  font-size:.98rem;
  line-height:1.65;
  margin:0;
  max-width:54ch;
}
.band-action{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-shrink:0;
}
.band .btn-gold{
  background:#fff;
  border-color:#fff;
  color:var(--navy);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:16px 32px;
  border-radius:60px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 8px 24px -6px rgba(16,36,59,.25);
  transition:all .32s cubic-bezier(.2,.7,.3,1);
}
.band .btn-gold:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(16,36,59,.4);
}
.band .btn-gold svg{
  transition:transform .25s ease;
}
.band .btn-gold:hover svg{
  transform:translateX(4px);
}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;padding:22px 44px 22px 0;cursor:pointer;position:relative;font-family:var(--display);font-weight:600;font-size:1.24rem;color:var(--navy);transition:.25s}
.faq-q:hover{color:var(--gold-ink)}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--body);font-weight:400;font-size:1.5rem;color:var(--gold-ink);transition:.32s}
.faq-q.on::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.3,1);border-bottom:1px solid var(--line)}
.faq-a .inner{padding:4px 44px 24px 0;font-size:.98rem}

/* final cta */
.final{background:var(--navy);color:#fff;text-align:center;padding:100px 0;position:relative;overflow:hidden}
.final .blob{position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(100px);background:radial-gradient(circle,rgba(107,127,109,.45),transparent 70%);left:50%;top:50%;transform:translate(-50%,-50%)}
.final .wrap{position:relative;z-index:2}
.final h2{max-width:17ch;margin:0 auto}
.final .lede{margin:18px auto 0;text-align:center;color:rgba(255,255,255,.9)}
.final h2{color:#fff}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.final .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

/* footer */
footer.site{background:var(--navy);color:rgba(255,255,255,.78);padding:64px 0 28px;font-size:.93rem}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
footer h4{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:15px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer a{text-decoration:none;transition:.25s;cursor:pointer}
footer a:hover{color:var(--gold)}
footer .brand .logo{height:48px}
.f-bottom{margin-top:42px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.55)}
.crisis-line{background:rgba(255,255,255,.07);border:1px solid rgba(201,164,106,.4);border-radius:12px;padding:16px 20px;margin-bottom:38px;font-size:.88rem;color:rgba(255,255,255,.88)}
.crisis-line strong{color:var(--gold);font-weight:600}
.crisis-line a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* bio link on practitioner cards */
.bio-btn{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;margin-top:0;padding:16px 0 0;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);transition:.25s}
.bio-btn:hover{color:var(--navy)}
.bio-btn .arw{transition:.25s}
.bio-btn:hover .arw{transform:translateX(4px)}

/* modal / lightbox */
.modal-veil{position:fixed;inset:0;background:rgba(16,36,59,.55);backdrop-filter:blur(4px);z-index:180;opacity:0;pointer-events:none;transition:.3s}
.modal-veil.open{opacity:1;pointer-events:auto}
.modal{position:fixed;z-index:190;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  width:min(760px,calc(100vw - 32px));max-height:min(86svh,860px);overflow-y:auto;background:var(--paper);border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(16,36,59,.6);transition:.35s cubic-bezier(.2,.7,.3,1)}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal .m-close{position:absolute;right:14px;top:12px;z-index:3;background:rgba(255,255,255,.92);border:1px solid var(--line);
  width:38px;height:38px;border-radius:50%;font-size:1.4rem;line-height:1;color:var(--navy);cursor:pointer;transition:.25s}
.modal .m-close:hover{background:var(--navy);color:#fff}
/* align-items:start (not the grid default stretch) — the photo column is
   naturally taller than a name+role+tags block, and stretching the text
   column to match just left a dead gap below the tags before "About"
   started; smaller photo width narrows that height gap further. */
.m-top{display:grid;grid-template-columns:168px 1fr;gap:20px;padding:26px 26px 0;align-items:center}
.m-photo{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:var(--cream);box-shadow:0 10px 26px -14px rgba(16,36,59,.4)}
.m-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;filter:saturate(.9) sepia(.06) contrast(1.04)}
.m-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(16,36,59,.12) 100%)}
.m-top h3{font-size:1.85rem}
.m-top .role{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:6px 0 12px}
.m-body{padding:24px 26px 30px}
.m-body h4{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin:24px 0 10px}
/* .m-body already has its own top padding — without this, the first
   heading's margin-top stacked on top of that padding (padding blocks
   margin collapsing), doubling up to ~48px of dead space before "About". */
.m-body h4:first-child{margin-top:0}
.m-body ul{margin:0;padding-left:16px;list-style:none}
.m-body li{font-size:.94rem;position:relative;padding:3px 0}
.m-body li::before{content:"";position:absolute;left:-15px;top:14px;width:6px;height:2px;background:var(--sage)}
.m-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}

/* enquiry form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.req-mark{color:var(--gold-ink);margin-left:3px}
.form-required-note{font-size:.8rem;color:#5A6975;margin:-6px 0 22px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:.98rem;font-weight:400;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;outline:none;transition:.25s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:#fff}
.check{display:flex;flex-wrap:nowrap;gap:11px;align-items:flex-start;font-size:.88rem;margin:6px 0 20px}
.check input{width:19px;height:19px;flex:0 0 19px;margin-top:2px;accent-color:var(--sage)}
.check span{flex:1 1 auto;min-width:0}
/* Point-of-collection privacy notice + policy links (QA — privacy info distant from sensitive fields) */
.form-privacy-note{font-size:.86rem;line-height:1.55;margin-top:8px;color:var(--body-ink)}
.form-privacy-note a,.check a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.form-privacy-note a{display:inline-block;margin-top:4px}
.form-note{font-size:.8rem;color:#5A6975;margin-top:16px}
.sent{background:var(--sage-wash);border:1.5px solid var(--sage);border-radius:16px;padding:26px;text-align:center;display:none;margin-top:24px}
.sent.on{display:block;animation:fade .4s ease}
.sent h3{margin-bottom:8px}
.form-card.is-sent #formInner,
.form-card.is-sent #workshopFormInner{display:none}
.form-card.is-sent .sent{margin-top:0}

/* resources */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.res-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.38s cubic-bezier(.2,.7,.3,1);text-align:left;text-decoration:none;cursor:pointer;padding:0;width:100%}
.res-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(201,164,106,.6)}
.res-thumb{aspect-ratio:16/9;overflow:hidden;position:relative;display:grid;place-items:center;background:var(--sage-tint)}
.res-thumb svg{width:44px;height:44px;color:var(--sage-deep);opacity:.75}

/* image loading skeleton — shared by .res-thumb (resource cards), .card-p
   .ph (practitioner cards) and .m-photo (bio modal); toggled by
   assets/js/core/img-skeleton.js. Images default to opacity:1 (visible) —
   .tw-img-loading is only ever added by JS for a genuinely-still-loading
   image, so if that script fails to run nothing is ever left hidden. */
.res-thumb img,.card-p .ph img,.m-photo img{opacity:1}
.res-thumb img,.m-photo img{transition:opacity .4s ease}
.tw-img-loading img{opacity:0}
.tw-img-loading::before{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
	background-size:200% 100%;
	animation:tw-shimmer 1.4s ease-in-out infinite;
}
@keyframes tw-shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}
.res-kind{position:absolute;left:12px;top:12px;background:#fff;border:1px solid var(--line);font-size:.63rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);padding:5px 11px;border-radius:30px}
.res-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.res-body h3{font-size:1.2rem;margin-bottom:8px}
.res-body p{font-size:.92rem;margin:0 0 14px;flex:1 1 auto}
.res-meta{font-size:.75rem;font-weight:500;color:#5A6975;margin-top:auto;display:block}
.res-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}

/* ---------- Single resource (blog detail) — TW-29 ---------- */
.res-single-banner .res-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:500;color:var(--body-ink);text-decoration:none;
  margin-bottom:18px;
}
.res-single-banner .res-back:hover{color:var(--gold-ink)}
.res-single-banner .eyebrow{margin-top:2px}
.res-meta-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin-top:10px;
  font-size:.84rem;font-weight:500;color:#5A6975;
}
/* Byline + references (QA — health articles show no authorship/review info) */
.res-single-banner .eyebrow.light{color:var(--gold-ink)} /* banner is cream-soft, where --gold is only ~2.2:1 */
.res-byline{margin:16px 0 0;font-size:.92rem;line-height:1.6;color:var(--body-ink)}
.res-byline a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.res-byline a:hover{color:var(--gold-ink)}
.res-refs{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.res-refs h2{font-size:1.3rem;margin:0 0 12px}
.res-refs ol{margin:0;padding-left:22px;font-size:.92rem;line-height:1.6;color:var(--body-ink)}
.res-refs li{margin-bottom:8px;overflow-wrap:anywhere}
.res-refs a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.res-featured-wrap{margin:-26px auto 0;position:relative;z-index:2;max-width:900px}
.res-featured-img{width:100%;height:auto;max-height:460px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow);display:block}
.res-article-wrap{max-width:720px;margin:0 auto}
.res-article .entry-content{font-size:1.05rem;line-height:1.8;color:var(--body-ink)}
.res-article .entry-content h2{font-size:1.5rem;margin:36px 0 16px}
.res-article .entry-content h3{font-size:1.2rem;margin:28px 0 14px}
.res-article .entry-content p{margin:0 0 20px}
.res-article .entry-content ul,
.res-article .entry-content ol{margin:0 0 20px;padding-left:1.3em}
.res-article .entry-content li{margin-bottom:8px}
.res-article .entry-content blockquote{
  margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);
  font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--navy);
}
.res-article .entry-content img{border-radius:12px}
.res-cta-band{background:var(--sage-tint);text-align:center}
.res-cta-wrap{max-width:560px;margin:0 auto}
.res-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
@media(max-width:620px){
  .res-featured-wrap{margin-top:-16px}
  .res-featured-img{max-height:260px;border-radius:14px}
  .res-article .entry-content{font-size:1rem}
}

/* helper widget */
/* FIXED (TW-22): background:var(--navy) is the exact same colour as the
   footer's background (footer.php), so the launcher visually disappeared
   whenever it sat over the footer. A gold border keeps it visible over any
   background on the site, navy included. */
.helper-launch{position:fixed;right:20px;bottom:20px;z-index:140;display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;border:2px solid var(--gold);padding:11px 20px 11px 15px;border-radius:60px;cursor:pointer;box-shadow:0 16px 36px -14px rgba(16,36,59,.6);font-size:.83rem;font-weight:500;transition:.3s}
.helper-launch:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px)}
.helper-launch .mk{width:22px;height:22px;flex:0 0 22px}
.helper-launch span{white-space:nowrap}

.helper-panel{position:fixed;right:20px;bottom:20px;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100svh - 40px));background:var(--paper);border-radius:22px;z-index:160;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 36px 80px -28px rgba(16,36,59,.55);border:1px solid var(--line);transform:translateY(20px) scale(.97);opacity:0;pointer-events:none;transition:.38s cubic-bezier(.2,.7,.3,1)}
.helper-panel.open{transform:none;opacity:1;pointer-events:auto}
.hp-head{background:var(--navy);color:#fff;padding:17px 20px 15px;position:relative}
.hp-head .row{display:flex;align-items:center;gap:11px}
.hp-head h4{font-size:1.2rem;color:#fff;margin:0}
.hp-head .sub{font-size:.72rem;color:rgba(255,255,255,.7)}
.hp-head .x{position:absolute;right:14px;top:12px;background:none;border:0;color:rgba(255,255,255,.8);font-size:1.5rem;cursor:pointer;line-height:1}
.hp-disclaim{background:var(--cream-soft);color:var(--navy);font-size:.75rem;line-height:1.55;padding:11px 20px;border-bottom:1px solid var(--line);position:relative}
.hp-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px;display:flex;flex-direction:column;gap:12px}
/* FIXED (TW-19/TW-28): body.tw-helper-open is toggled by helper-panel.js
   while the panel is open, so the background page can't be scrolled behind
   it — on desktop via the wheel, and on mobile via a touch-drag that starts
   outside the chat body. */
body.tw-helper-open{overflow:hidden}
.msg{max-width:87%;padding:13px 16px;border-radius:16px;font-size:.93rem;line-height:1.6;animation:fade .35s ease}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;color:var(--body-ink)}
.msg.me{background:var(--navy);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg.crisis{background:#fff;border:2px solid var(--gold);align-self:stretch;max-width:100%}
.msg.crisis strong{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:8px;color:var(--navy)}
.msg.crisis ul{margin:8px 0 0;padding-left:18px}
.msg.crisis li{margin-bottom:5px}
.hp-opts{display:flex;flex-direction:column;gap:8px;padding:0 20px 12px}
.hp-opts-head{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.hp-opts-title{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);opacity:.85}
.opt-clear{background:var(--sage-wash);border:1.5px solid var(--navy);color:var(--navy);border-radius:40px;padding:4px 11px;display:inline-flex;align-items:center;gap:6px;font-family:var(--body);font-size:.72rem;font-weight:600;cursor:pointer;transition:.22s;box-shadow:0 1px 4px -1px rgba(16,36,59,.18)}
.opt-clear svg{display:block;flex-shrink:0}
.opt-clear:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px);box-shadow:0 3px 8px -1px rgba(16,36,59,.25)}
.hp-opts-pills{display:flex;flex-wrap:wrap;gap:7px}
.opt{background:#fff;border:1px solid var(--line);color:var(--navy);border-radius:40px;padding:9px 14px;font-size:.79rem;font-weight:500;cursor:pointer;transition:.26s}
.opt:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.hp-input{display:flex;gap:8px;padding:13px 16px;border-top:1px solid var(--line);background:#fff}
.hp-input input{flex:1;border:1.5px solid var(--line);border-radius:40px;padding:11px 16px;font-family:var(--body);font-size:.9rem;outline:none;color:var(--ink);background:var(--paper)}
.hp-input input:focus{border-color:var(--gold)}
.hp-input button{background:var(--navy);border:0;color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:.26s;flex:0 0 42px}
.hp-input button:hover{background:var(--gold);color:var(--navy)}
.typing{display:flex;gap:4px;align-items:center;padding:15px 16px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--sage);animation:blink 1.3s infinite}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.rv{opacity:0;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  *{animation-duration:.01ms!important;transition-duration:.05ms!important}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2.5px solid var(--gold-ink);outline-offset:3px}

@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .offer-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px}
  .steps::before{display:none}
  .team-carousel .team>*{flex:0 0 100%}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .team-nav-row{position:static;justify-content:center;gap:14px;margin-top:16px}
  .team-nav.prev,.team-nav.next{transform:none}
  .svc-grid .svc-item{flex-basis:calc((100% - 16px) / 2)}
  .svc-grid-4,
  #svc-wor .svc-grid,
  .svc-grid:has(> .svc-item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  .fees{grid-template-columns:1fr}
  .band{grid-template-columns:1fr;gap:26px;padding:36px 30px}
  .band-action{justify-content:flex-start;width:100%}
  .teaser{grid-template-columns:1fr;padding:36px 28px}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:940px){
  .res-grid{grid-template-columns:repeat(2,1fr)}
  /* Stacked layout (photo above text). justify-items:center shrinks the
     photo column to content, and .m-photo's img is position:absolute so
     the box had 0 width — photo vanished on mobile. Give it a real size. */
  .m-top{grid-template-columns:1fr;justify-items:stretch;text-align:center;padding-top:52px}
  .m-photo{width:min(200px,58vw);max-width:200px;margin:0 auto 6px}
  .m-top .tags{justify-content:center}
}
@media(max-width:620px){
  body{font-size:16.5px}
  .res-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .helper-card{padding:22px 16px}
  .helper-card .btn{font-size:.7rem;letter-spacing:.05em;padding:14px 12px;font-weight:700;white-space:nowrap}
  .sec{padding:66px 0}
  .sec-sm{padding:42px 0}
  .act-shell{padding:66px 0}
  .mosaic,.offer-grid,.steps,.f-grid,.team-grid{grid-template-columns:1fr}
  .svc-grid .svc-item{flex-basis:100%}
  .svc-grid-4,
  #svc-wor .svc-grid,
  .svc-grid:has(> .svc-item:nth-child(4):last-child){grid-template-columns:1fr}
  .band{padding:30px 22px;border-radius:18px}
  .band-action .btn{width:100%;justify-content:center}
  .band .btn-gold{white-space:normal;width:100%;justify-content:center;text-align:center;padding:16px 20px}
  /* FIXED (TW-85): the button above goes full-width with bigger padding on
     mobile, but its arrow icon (a fixed 16x16 SVG in the markup) never
     scaled to match — next to a now much larger button, it read as too
     small to notice. Workshops' "Request workshop information" band button
     was the one flagged, but Resources' and the homepage closing CTA's
     gold band buttons share this exact selector and had the identical
     issue, so scaling it here fixes all of them at once. */
  .band .btn-gold svg{width:20px;height:20px;flex-shrink:0}
  .act-stage{padding:26px 16px}
  .act-tabs{gap:8px}
  .act-tab{padding:11px 16px;font-size:.78rem;line-height:1.25}
  .svc-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .svc-tabs .svc-tab{white-space:normal;flex-shrink:unset;width:100%;text-align:center;padding:10px 6px;font-size:.76rem;line-height:1.25}
  .trust-badges{flex-direction:column;align-items:stretch}
  .trust-badge{width:100%;justify-content:center;text-align:center}
  .topics-band{padding:28px 18px;border-radius:18px}
  .topic-tags{grid-template-columns:1fr 1fr;gap:11px}
  .topic-tag{padding:14px 10px;font-size:.85rem;font-weight:600;line-height:1.32}
  .topic-tag:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 11px) / 2);justify-self:center}
  .helper-launch{right:10px;bottom:10px;width:46px;height:46px;padding:0;justify-content:center}
  .helper-launch .mk{width:20px;height:20px}
  .helper-launch span{display:none}
  .helper-panel{right:8px;bottom:8px;height:calc(100svh - 16px)}
}

/* ---------- WordPress admin bar offset fix ----------
   The fixed header (position:fixed; top:0) collides with WP's own fixed
   admin toolbar when logged in — without this, the header (and anything
   inside it, like the Book Free Consultation button) gets clipped at the
   top. WordPress adds .admin-bar to <body> automatically when logged in. */
.admin-bar header.site{
  top:32px;
}
@media screen and (max-width:782px){
  .admin-bar header.site{
    top:46px; /* WP's admin bar is taller on mobile/tablet widths */
  }
}

/* ---------- Hero — richer gradient variant (Saif-approved, logged for QA) ----------
   Deviation from the original prototype hero, applied after explicit
   sign-off. Uses a brand-colour gradient (navy → sage), NOT a photograph —
   deliberately avoids the specific issue the client rejected before
   (content sitting behind the headline with poor contrast): text here is
   white/light against a deliberately dark portion of the gradient, with a
   contrast-safe overlay, rather than a busy image behind the words.
   Flag this section on the project thread as a reproduction deviation. */
.hero-rich{
  background:linear-gradient(160deg, var(--cream-soft) 0%, var(--paper) 55%, var(--sage-wash) 100%);
}
.hero-rich .hero-title-light em{ color:var(--gold-ink); }
.hero-rich .motif{ color:rgba(16,36,59,.08); }

.btn-arrow{ display:inline-flex; align-items:center; gap:9px; }
.btn-arrow svg{ transition:.25s ease; pointer-events:none; }
.btn-arrow:hover svg{ transform:translateX(3px); }

/* ---------- Header — full-width bar ----------
   Same nav items, same copy, same crisis/AI-disclosure structure as the
   approved prototype. Reverted from the floating rounded-pill container
   back to a flush, full-width bar (edge-to-edge, square corners) at every
   viewport — .nav-pill is now a plain flex layout row with no chrome of
   its own; the bar's background/border/shadow live on header.site so
   there's exactly one visual container, not a pill nested inside a bar. */

header.site{
  position:fixed; top:0; left:0; right:0; z-index:120;
  background:rgba(253,252,250,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 20px -14px rgba(16,36,59,.35);
  padding:16px 0;
  transition:padding .3s ease, box-shadow .3s ease;
}
header.site.stuck{
  padding:10px 0;
  box-shadow:0 2px 20px -14px rgba(16,36,59,.4);
}

.nav-pill{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.nav-pill .menu{ display:flex; align-items:center; gap:22px; }
.nav-pill .menu a{ white-space:nowrap; }
.nav-pill .nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-pill .btn-primary.btn-sm{ padding:11px 22px; white-space:nowrap; }

/* main content offset — header is flush again, so main only needs to clear
   the bar's own height, not a floating pill plus its outer margin */
main{ padding-top:92px; }
header.site.stuck ~ main{ padding-top:82px; }

/* ---------- Nav row — polished & responsive ----------
   .nav-pill sits inside .wrap (capped at var(--maxw), 1160px), which is
   what constrains and centers it now — no separate max-width of its own. */
.nav-pill .brand{ gap:12px; }
.nav-pill .brand .logo{ height:52px; }
.nav-pill .menu{ display:flex; align-items:center; gap:14px; }
.nav-pill .menu a{
  white-space:nowrap;
  font-size:.78rem;
  letter-spacing:.01em;
}
.nav-pill .nav-actions{ display:flex; align-items:center; gap:10px; padding-left:10px; position:relative; }
.nav-pill .nav-actions::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:24px;
  background:var(--line);
}
.nav-pill .btn-primary.btn-sm{
  padding:10px 18px;
  font-size:.74rem;
  white-space:nowrap;
  position:relative;
  z-index:2;
}
/* Hover lift moves the hit-box up 2px, so the cursor on the bottom/arrow
   edge is no longer on the link and the click does nothing. */
.nav-pill .btn-primary.btn-sm:hover{
  transform:none;
}

@media(max-width:1120px){
  .nav-pill .menu{ display:none; }
  .nav-pill .btn-primary.btn-sm{ display:none; }
  .nav-pill .burger{ display:flex; }
  .nav-pill .nav-actions::before{ display:none; }
}

@media(max-width:620px){
  header.site{ padding:12px 0; }
  .nav-pill .brand .logo{ height:40px; }
  main{ padding-top:80px; }
}

.admin-bar header.site{ top:32px; }
@media screen and (max-width:782px){
  .admin-bar header.site{ top:46px; }
}

/* ---------- Drawer — admin bar offset fix ----------
   Same issue as the header: WP's mobile admin toolbar (~46px, very high
   z-index) sits on top of everything, hiding the drawer's close button
   (positioned at top:20px relative to the drawer's own top:0) behind it.
   Only affects logged-in admin view — visitors never see this. */
.admin-bar .drawer{
  padding-top:108px;
}
.admin-bar .drawer .close{
  top:52px;
}
@media screen and (max-width:782px){
  .admin-bar .drawer{
    padding-top:122px;
  }
  .admin-bar .drawer .close{
    top:66px;
  }
}

/* ---------- Closing CTA — polish pass ---------- */
.final .blob{
  opacity:.85;
}
.final .eyebrow{
  display:block;
  margin-bottom:14px;
}
.final h2{
  color:#fff;
}

/* ---------- Closing CTA — 80% width rounded card ----------
   Was full-bleed edge-to-edge navy; now a contained rounded panel, matching
   the visual language of .teaser (rounded card on a page background)
   instead of a full-width colour band. */
.final-wrap{
  background:var(--paper);
  padding:60px 0;
}
.final-wrap .wrap{
  max-width:1160px;
}
.final{
  width:80%;
  margin:0 auto;
  border-radius:32px;
  padding:80px 40px;
}
@media(max-width:940px){
  .final{ width:92%; padding:60px 28px; }
}
@media(max-width:620px){
  .final{ width:100%; border-radius:22px; padding:48px 22px; }
}

/* ---------- Services page — tab bar fix (desktop only) ----------
   Buttons were flex-shrinking below their text width, causing labels like
   "Couples & relationships" to wrap/overlap inside the pill instead of the
   whole button wrapping to the next row (the parent already has
   flex-wrap:wrap — the buttons themselves needed to stop shrinking).
   FIXED (TW-81): this had no media query, so it also applied on mobile and
   overrode the intentional @media(max-width:620px) .svc-tab rule further
   up (white-space:normal / flex-shrink:unset / width:100% for a 2-column
   grid) — same specificity, later in the cascade always wins, so the
   mobile-specific layout was silently undone and pills overflowed/
   overlapped their grid cells. Scoped to desktop widths only now. */
@media(min-width:621px){
  .svc-tab{
    white-space:nowrap;
    flex-shrink:0;
  }
}

/* ---------- Contact form — error states + reduced-motion flash fallback ---------- */
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color:#A32D2D;
}
.check.has-error{
  margin-bottom:6px;
}
.check.has-error input{
  outline:2px solid #A32D2D;
  outline-offset:1px;
}
.field-error{
  color:#A32D2D;
  font-size:.78rem;
  font-weight:500;
  margin-top:5px;
  display:block;
}
.check-error,
.check + .field-error{
  margin-top:-14px;
  margin-bottom:20px;
  padding-left:30px;
  width:100%;
}
.check .field-error{
  flex:0 0 100%;
  width:100%;
  padding-left:30px;
  margin-top:4px;
}
.flash-gold{
  outline:3px solid var(--gold);
  outline-offset:4px;
  transition:outline-color .6s ease;
}

/* ---------- Contact form — custom-styled select dropdowns ----------
   Native <select> arrows are OS-default (usually plain black/grey) and
   don't match the brand palette. Replaces the browser default arrow with
   an inline SVG chevron in --gold-ink, keeping everything else about the
   native select (accessibility, keyboard support, mobile picker) intact —
   only the visual arrow changes, not the interaction. */
.field select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237B5F26' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 16px center !important;
  background-size:14px !important;
  padding-right:44px !important;
  cursor:pointer;
}
.field select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A46A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Toast notification (newsletter, form confirmations) ---------- */
.tw-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%,20px);
  z-index:300;
  min-width:280px;
  max-width:min(420px,calc(100vw - 32px));
  background:var(--navy);
  color:#fff;
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 24px 50px -20px rgba(16,36,59,.55);
  display:flex;
  align-items:flex-start;
  gap:12px;
  opacity:0;
  pointer-events:none;
  transition:.35s cubic-bezier(.2,.7,.3,1);
}
.tw-toast.show{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.tw-toast .tw-toast-icon{
  flex:0 0 auto;
  width:26px;height:26px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sage);
}
.tw-toast.error .tw-toast-icon{ background:#B3554B; }
.tw-toast .tw-toast-body{ flex:1; font-size:.86rem; line-height:1.5; }
.tw-toast .tw-toast-close{
  flex:0 0 auto;
  background:none;border:0;color:rgba(255,255,255,.6);
  cursor:pointer;font-size:1.1rem;line-height:1;padding:0 0 0 6px;
}
.tw-toast .tw-toast-close:hover{ color:#fff; }

@media(max-width:620px){
  .tw-toast{ bottom:16px; min-width:0; width:calc(100vw - 32px); }
}

/* ---------- Empty state (Resources, Our Team, filters with no matches) ----------
   Replaces the ad-hoc inline-styled dashed box that used to be duplicated
   per template — one card style, one character, reused everywhere a query
   or client-side filter can legitimately come back with nothing. Entrance
   + idle animation are handled in assets/js/core/empty-state.js; this file
   only sets the resting (pre-JS / reduced-motion) state so the block never
   depends on JS to be readable. */
.empty-state{
  background:var(--sage-wash);
  border:1.5px dashed var(--sage);
  border-radius:var(--radius-card);
  padding:40px 30px 34px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.empty-state-char{ width:120px; height:120px; margin-bottom:6px; overflow:visible; }
.empty-state-title{ font-weight:600; color:var(--navy); margin:0 0 6px; }
.empty-state-desc{ color:var(--body-ink); max-width:42ch; margin:0 0 16px; }
.empty-state .btn{ margin-top:2px; }

.es-body{ fill:#fff; stroke:var(--sage); stroke-width:2.5; }
.es-leaf{ fill:var(--sage-tint); stroke:var(--sage-deep); stroke-width:2; stroke-linejoin:round; }
.es-leaf-2{ fill:var(--sage); opacity:.85; }
.es-eye{ fill:none; stroke:var(--navy); stroke-width:2.5; stroke-linecap:round; }
.es-mouth{ fill:none; stroke:var(--gold-ink); stroke-width:2.5; stroke-linecap:round; }
.es-blush{ fill:var(--gold); opacity:.35; }
.es-shadow{ fill:var(--navy); opacity:.08; }
.es-z{
  font-family:var(--display); font-weight:600; fill:var(--gold);
  font-size:16px; opacity:0;
}
.es-z2{ font-size:13px; }
.es-z3{ font-size:11px; }

/* No-JS / reduced-motion fallback — .rv already hides this via opacity:0
   until animations.js (or reduced-motion's immediate show) runs, same as
   every other .rv element sitewide, so nothing extra needed here besides
   making sure the character doesn't look broken pre-animation. */
.es-zzz{ opacity:1; }