/* Nature Awareness - shared design system
   Palette verified against WCAG 2.1, see design/PALETTE.md
   Used by: index (landing), about-leah, contact */

/* ============================================================
   NATURE AWARENESS
   Palette verified against WCAG 2.1, see design/PALETTE.md
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* surfaces */
  --paper:#fbf8e7;
  --paper-2:#f5f1dc;
  --forest:#143b1f;
  --forest-2:#0d2815;

  /* ink on cream */
  --ink:#143b1f;          /* 11.75:1 AAA */
  --ink-2:#345f31;        /*  6.96:1 AA  */
  --muted:#61755c;        /*  4.68:1 AA  */
  --copper-ink:#9d652e;   /*  4.54:1 AA, small copper text on plain cream */
  --copper-deep:#875626;  /*  5.31:1 AA, small copper text on a TINTED cream  */
  --copper:#bf7b38;       /*  3.22:1, large text + fills only */

  /* ink on forest */
  --on-forest:#fbf8e7;    /* 11.75:1 AAA */
  --lime:#f9f871;         /* 11.16:1 AAA */
  --olive:#b3b241;        /*  5.59:1 AA  */
  --copper-glow:#cc8e51;  /*  4.51:1 AA  */
  --sage-glow:#9fafa1;    /*  5.44:1 AA  */

  /* type */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* rhythm */
  --label:.73rem;        /* every uppercase micro-label on the site */
  --r-card:1rem;         /* one card radius, so nothing is off by 2px */
  --gap:clamp(1rem,2.5vw,1.75rem);
  --bleed:clamp(1.25rem,5vw,3rem);
  --band:clamp(4rem,9vw,7.5rem);
  --measure:38rem;

  /* motion: critically damped, no overshoot (Apple: damping 1.0, response .3 to .4) */
  --ease:cubic-bezier(.32,.72,0,1);
  --fast:160ms;
  --mid:320ms;
}

@media(max-width:620px){ :root{--label:.79rem} }

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type scale: tracking tightens as size grows ---------- */
h1,h2,h3,h4{font-family:var(--display);font-optical-sizing:auto;font-weight:600;line-height:1.08;letter-spacing:-.022em}
h1{font-size:clamp(2.5rem,1.6rem + 4.2vw,4.75rem);line-height:1.02;letter-spacing:-.032em}
h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem);letter-spacing:-.026em}
h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.5rem);letter-spacing:-.016em}
h4{font-size:1.075rem;letter-spacing:-.012em}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

a{color:inherit}

.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--bleed)}
section[id]{scroll-margin-top:5.5rem}
.band{padding-block:var(--band)}

/* eyebrow: sage on cream (4.68:1), never copper at this size */
.eyebrow{
  font-family:var(--body);
  font-size:.75rem;font-weight:650;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:1.1rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.32;max-width:5rem}
.on-dark .eyebrow{color:var(--sage-glow)}

.lede{font-size:clamp(1.075rem,1rem + .45vw,1.3rem);color:var(--ink-2);max-width:var(--measure);line-height:1.55}
h1+.lede,h2+.lede{margin-top:1.05rem}
.on-dark{background:var(--forest);color:var(--on-forest)}
.on-dark h2,.on-dark h3{color:var(--on-forest)}
.on-dark .lede{color:var(--sage-glow)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:.5rem;top:-4rem;z-index:200;
  background:var(--forest);color:var(--on-forest);
  padding:.7rem 1.1rem;border-radius:.5rem;font-weight:600;text-decoration:none;
  transition:top var(--fast) var(--ease);
}
.skip:focus{top:.5rem}

/* ---------- nav: translucent, content scrolls under ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem var(--bleed);
  background:color-mix(in srgb,var(--paper) 72%,transparent);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color var(--mid) var(--ease),background var(--mid) var(--ease);
}
.nav[data-stuck="true"]{
  border-bottom-color:color-mix(in srgb,var(--ink) 12%,transparent);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-size:1.02rem;color:var(--ink)}
.brand-seal{width:26px;height:26px;flex:none}
.brand em{font-style:normal;color:var(--copper-ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:600;font-size:.95rem;letter-spacing:.005em;
  padding:.8rem 1.35rem;border-radius:.6rem;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform 110ms var(--ease),background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
/* feedback on pointer-DOWN, not release */
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--forest);color:var(--paper)}
.btn-solid:hover{background:#1c5029}
.btn-quiet{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 26%,transparent)}
.btn-quiet:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.on-dark .btn-solid{background:var(--lime);color:var(--forest)}
.on-dark .btn-solid:hover{background:#fbfa96}
.on-dark .btn-quiet{color:var(--on-forest);border-color:color-mix(in srgb,var(--on-forest) 34%,transparent)}
.on-dark .btn-quiet:hover{border-color:var(--on-forest);background:color-mix(in srgb,var(--on-forest) 8%,transparent)}
.btn-sm{padding:.55rem 1rem;font-size:.875rem}
.btn-lg{padding:.95rem 1.7rem;font-size:1rem}
/* on a phone a row of buttons that wraps to two ragged widths reads as two
   different components. Full width each, stacked. */
@media(max-width:520px){ .hero-actions .btn,.book-actions .btn{flex:1 1 100%} }

:focus-visible{outline:2.5px solid var(--copper-ink);outline-offset:3px;border-radius:.35rem}
.on-dark :focus-visible{outline-color:var(--lime)}

/* ---------- scroll reveal ---------- */
.rise{transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.js-reveal .rise{opacity:0;transform:translateY(10px)}
.js-reveal .rise.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid,.bodies-grid,.about-grid{grid-template-columns:1fr}
  .hero-grid{gap:2.75rem}
  .breath-stage{max-width:16rem}
  .seal{max-width:22rem}
}
@media(max-width:720px){
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero-meta{flex-direction:column;gap:.35rem}
}

/* ---------- reduced motion / transparency / contrast ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js-reveal .rise{opacity:1;transform:none}
  .breath-ring,.breath-core{transition:opacity 200ms linear}
}
@media(prefers-reduced-transparency:reduce){
  .nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-contrast:more){
  .tier{border-color:var(--ink)}
  .eyebrow::after{opacity:.7}
}

/* ---------- shared: contact strip + footer ---------- */
.contact{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;margin-top:3rem;padding-top:2rem;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:.88rem;color:var(--muted)}
.contact a{color:var(--copper-ink);text-decoration-thickness:1px;text-underline-offset:2px}
.contact a:hover{color:var(--ink)}

/* ---------- footer ----------
   A single centred line worked while the site was three pages. With nine it
   is the only place every page is reachable from every other page. */
.foot{background:var(--forest-2);color:var(--sage-glow);padding-block:3rem 2.5rem;font-size:.85rem;line-height:1.7}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:2rem clamp(1.5rem,4vw,3rem)}
.foot .mark{width:52px;height:52px;margin-bottom:.7rem;border-radius:50%}
.foot h4{font-size:var(--label);font-family:var(--body);font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-bottom:.9rem}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.1rem}
/* 44px targets in a column of links, without the column growing a gap */
.foot ul a{display:inline-block;padding-block:.35rem}
.foot a{color:var(--sage-glow);text-decoration:none;transition:color var(--fast) var(--ease)}
.foot a:hover{color:var(--on-forest)}
.foot-base{
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--sage-glow) 22%,transparent);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:.78rem;
}
.foot em{font-style:normal;color:var(--olive)}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr;gap:2rem} }


/* ---------- shared: the real logo mark ---------- */
.mark{display:block;width:100%;height:auto}
.brand .mark{width:30px;height:30px;flex:none;border-radius:50%}
.seal-hero{width:min(100%,15rem);margin-inline:auto;filter:drop-shadow(0 14px 34px rgba(20,59,31,.16))}

/* ---------- shared: page hero for interior pages ---------- */
.page-hero{padding-top:clamp(7rem,13vw,9.5rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.page-hero h1{max-width:16ch}
.page-hero .lede{margin-top:1.3rem}

/* ---------- shared: stat row ---------- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:clamp(1.25rem,3vw,2.5rem);margin-top:2.75rem}
.fig .n{font-family:var(--display);font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);line-height:1;letter-spacing:-.03em;color:var(--copper-ink);display:block}
.on-dark .fig .n{color:var(--lime)}
.fig .t{margin-top:.55rem;font-size:.86rem;color:var(--ink-2);line-height:1.45}
.on-dark .fig .t{color:var(--on-forest)}

/* ---------- shared: prose ---------- */
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.05rem}
.prose strong{color:var(--ink);font-weight:650}
.on-dark .prose strong{color:var(--lime)}

/* ---------- shared: quiet inline CTA ---------- */
.nudge{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.on-dark .nudge{border-top-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.nudge p{font-size:.95rem;color:var(--muted);margin:0}
.on-dark .nudge p{color:var(--sage-glow)}
.link-arrow{
  font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1.5px solid var(--copper);padding-bottom:2px;
  transition:gap var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.link-arrow:hover{gap:.65rem;border-bottom-color:var(--ink)}
.on-dark .link-arrow{color:var(--on-forest);border-bottom-color:var(--copper-glow)}
.on-dark .link-arrow:hover{border-bottom-color:var(--lime)}

/* ---------- shared: nav links ---------- */
.nav-links{display:flex;align-items:center;gap:1.4rem;margin-left:auto}
.nav-links a{
  font-size:.9rem;font-weight:550;color:var(--ink-2);text-decoration:none;
  padding-bottom:2px;border-bottom:1.5px solid transparent;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--copper)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--copper)}
/* The CTA is a sibling of the drawer, not a child of it, so it stays in the bar
   at every width. On desktop .nav-links takes the auto margin and the CTA
   follows the links; on mobile the drawer is out of flow, so the CTA takes the
   auto margin itself and sits beside the toggle. */
.nav-cta{margin-left:.4rem;flex:none}

/* ---------- mobile drawer ----------
   Six nav items plus a CTA. The old rule simply hid .nav-links below 820px,
   which on a three-page site cost you two links and on a nine-page one costs
   you the whole site. */
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
  padding:0;border-radius:.5rem;color:var(--ink);flex:none;
}
.nav-toggle svg{display:block}
.nav-toggle:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}

/* a scrim, so the drawer reads as a layer over the page rather than a panel
   that happens to cut a line of body copy in half */
.nav-scrim{
  position:fixed;inset:0;z-index:99;
  background:color-mix(in srgb,var(--forest) 42%,transparent);
  opacity:0;pointer-events:none;transition:opacity var(--mid) var(--ease);
}
.nav[data-open="true"] ~ .nav-scrim{opacity:1;pointer-events:auto}
@media(min-width:901px){ .nav-scrim{display:none} }

@media(max-width:900px){
  /* absolute, not fixed. A fixed child resolves top:100% against whichever
     ancestor happens to establish a containing block, which here would be the
     nav only because of its backdrop-filter: drop the filter and the drawer
     jumps to the bottom of the viewport. Absolute resolves against the fixed
     nav itself, so the drawer sits under it whatever the nav is painting. */
  .nav-links{
    position:absolute;inset:0 0 auto 0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:.5rem var(--bleed) 1.25rem;
    background:var(--paper);
    border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
    max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease);
  }
  .nav[data-open="true"] .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:.85rem 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font-size:1rem}
  .nav-links a[aria-current="page"]{color:var(--copper-ink)}
  .nav-toggle{display:flex}
  /* brand, then CTA and toggle hard right. The bar has to hold all three down
     to about 340px, so the gap tightens and the CTA loses a little padding
     rather than the wordmark being dropped. */
  .nav{gap:.5rem;padding-inline:1rem}
  .nav-cta{margin-left:auto;padding:.5rem .75rem;font-size:.82rem}
  .brand{font-size:.95rem;gap:.5rem;min-width:0}
  .brand .mark{width:28px;height:28px}
}
/* below this the wordmark and a button genuinely cannot share the bar, so the
   seal carries the brand on its own. The CTA is the thing worth keeping.
   Clipped rather than display:none, because the logo's alt is empty by design
   and hiding the word outright would leave the home link with no accessible
   name at all. A screen reader still reads "Nature Awareness". */
@media(max-width:360px){
  .brand-word{
    position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
}

/* the bar is opaque once scrolled: this site is roughly half dark bands, and
   94% cream over forest with a saturate boost turns the bar a muddy sage. */
.nav[data-open="true"]{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}

/* ============================================================
   SHARED COMPONENTS
   Defined once, used by every page. If a pattern appears on
   two pages it lives here, not in a page's own <style>.
   ============================================================ */

/* ---------- pull quotes (home: outcomes · about: voices) ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:3rem}
.quote::before{content:"";display:block;width:1.6rem;height:2px;background:var(--copper);margin-bottom:1.1rem}
.on-dark .quote::before{background:var(--copper-glow)}
.quote p{
  font-family:var(--display);font-optical-sizing:auto;
  font-size:clamp(1.02rem,.98rem + .32vw,1.2rem);
  line-height:1.42;letter-spacing:-.015em;color:var(--ink);
}
.on-dark .quote p{color:var(--on-forest)}
.quote footer{
  margin-top:1rem;font-family:var(--body);font-size:.76rem;font-weight:650;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copper-ink);
}
.on-dark .quote footer{color:var(--olive)}

/* ---------- key list: a row index with a label column ----------
   home: credentials · about: timeline and the practice index      */
.keylist{border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.on-dark .keylist{border-top-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.keyrow{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;
  padding:.95rem 0;align-items:baseline;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  font-size:.93rem;
}
.on-dark .keyrow{border-bottom-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.keyrow .k{
  font-family:var(--display);font-optical-sizing:auto;
  font-size:.85rem;letter-spacing:.01em;white-space:nowrap;color:var(--copper-ink);
}
.on-dark .keyrow .k{color:var(--copper-glow)}

/* rich variant: label · title and description · where */
.keylist--rich .keyrow{
  grid-template-columns:9.5rem minmax(0,32rem) 1fr;
  gap:1.5rem;padding:1.4rem .9rem;align-items:start;
  border-radius:.7rem;
  transition:background var(--fast) var(--ease);
}
.keylist--rich .keyrow:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.keylist--rich .k{
  font-family:var(--body);font-size:.71rem;font-weight:650;
  letter-spacing:.13em;text-transform:uppercase;white-space:normal;
  color:var(--muted);padding-top:.28em;
}
.keylist--rich .keyrow:hover .k{color:var(--copper-ink)}
.keylist--rich h3{font-size:1.08rem;margin-bottom:.32rem}
.keylist--rich h3 a{
  text-decoration:none;border-bottom:1.5px solid var(--copper);padding-bottom:1px;
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.keylist--rich h3 a:hover{color:var(--copper-ink);border-bottom-color:var(--ink)}
.keylist--rich p{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.keylist--rich .meta{
  font-size:.8rem;color:var(--muted);line-height:1.5;
  text-align:right;padding-top:.35em;
}
@media(max-width:860px){
  .keylist--rich .keyrow{grid-template-columns:1fr;gap:.5rem;padding:1.25rem .75rem}
  .keylist--rich .meta{text-align:left;padding-top:.15rem}
}

/* ---------- closing call to action (every page ends this way) ---------- */
.book{text-align:center}
.book .eyebrow{justify-content:center}
.book .lede{margin-inline:auto}
.book-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.2rem}

/* ---------- small utilities, so markup does not carry style="" ---------- */
/* visually hidden, still read aloud and still focusable */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.eyebrow--spaced{margin-top:2.75rem}
.band-end{padding-bottom:var(--band)}

.h2-sub{font-size:clamp(1.5rem,1.25rem + 1vw,1.95rem)}

/* ============================================================
   SHARED COMPONENTS, part 2
   Everything below appeared on the landing page first and is
   now used by two or more pages, so it lives here rather than
   being copied into each page's own <style>.
   ============================================================ */

/* ---------- a row of calls to action under a page heading ---------- */
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* ---------- the shared card surface ---------- */
.card{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:var(--r-card);
  padding:1.6rem 1.5rem 1.5rem;
  transition:border-color var(--mid) var(--ease),transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.card:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-2px);box-shadow:0 12px 32px -18px rgba(20,59,31,.4)}
.card h3{margin-bottom:.55rem}
.card>p{font-size:.93rem;color:var(--ink-2);margin-bottom:1.1rem}
.card .btn,.card .link-arrow{margin-top:auto}
.card .btn{align-self:stretch}
.card .link-arrow{align-self:flex-start}
.card .when{
  font-size:var(--label);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--copper-ink);display:block;margin-bottom:.7rem;
}
.card ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.3rem}
.card li{font-size:.9rem;padding-left:1.25rem;position:relative;line-height:1.5;color:var(--ink)}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--copper)}
/* A card on a dark band lightens its own surface by 6%, which takes
   copper-glow from 4.51:1 down to 3.82:1. The warm accent on a tinted dark
   surface is therefore olive (4.73:1), not copper-glow. See PALETTE.md. */
.on-dark .card{background:color-mix(in srgb,var(--on-forest) 6%,transparent);border-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.on-dark .card>p{color:var(--sage-glow)}
.on-dark .card li{color:var(--on-forest)}
.on-dark .card li::before{background:var(--olive)}
.on-dark .card .when{color:var(--olive)}
.on-dark .card:hover{border-color:color-mix(in srgb,var(--sage-glow) 50%,transparent);box-shadow:0 12px 32px -18px rgba(0,0,0,.6)}

/* three equal cards, or one column. A 2 + 1 tablet row orphans the third. */
.card-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:3rem}
@media(max-width:960px){ .card-3{grid-template-columns:1fr;max-width:34rem;margin-inline:auto} }
.card-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:3rem}
@media(max-width:820px){ .card-2{grid-template-columns:1fr} }
.card-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1.25rem;margin-top:3rem}

/* ---------- the two audiences ----------
   home, and a cross-link between the two audience pages */
.audience{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,1.75rem);margin-top:3rem}
.aud{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:var(--r-card);padding:1.65rem 1.55rem 1.5rem;
  position:relative;overflow:hidden;
  transition:border-color var(--mid) var(--ease),transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.aud::before{content:"";position:absolute;inset:0 0 auto 0;height:3px}
.aud--clinical::before{background:var(--ink)}
.aud--corporate::before{background:var(--copper)}
.aud:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-2px);box-shadow:0 12px 32px -18px rgba(20,59,31,.4)}
.aud-tag{
  font-size:var(--label);font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.55rem;
}
.aud--corporate .aud-tag{color:var(--copper-ink)}
.aud h3{margin-bottom:1rem}
.aud ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.5rem}
.aud li{font-size:.92rem;line-height:1.55;color:var(--ink-2);padding-left:1.25rem;position:relative}
.aud li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--copper)}
.aud--clinical li::before{background:var(--ink-2)}
.aud li strong{color:var(--ink);font-weight:650}
.aud .link-arrow{margin-top:auto;align-self:flex-start}
@media(max-width:820px){ .audience{grid-template-columns:1fr} }

/* ---------- the three formats, as a real duration progression ----------
   home, and the workshops page */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem;margin-top:3rem}
.tier{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:var(--r-card);padding:1.6rem 1.5rem 1.5rem;
  transition:border-color var(--mid) var(--ease),transform var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.tier:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-2px);box-shadow:0 12px 32px -18px rgba(20,59,31,.4)}
.tier-dur{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.15rem}
.tier-dur .len{font-family:var(--display);font-size:.95rem;color:var(--copper-ink);letter-spacing:-.005em}
.tier-dur .cap{font-size:var(--label);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:650}
/* the bar encodes actual duration: 1.5h / 4h / 7h */
.meter{height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);margin:.9rem 0 1.2rem;overflow:hidden}
.meter i{display:block;height:100%;background:var(--copper);border-radius:2px}
.tier h3{margin-bottom:.6rem}
.tier>p{font-size:.93rem;color:var(--ink-2);margin-bottom:1.1rem}
.tier ul{list-style:none;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.tier li{font-size:.9rem;padding-left:1.25rem;position:relative;line-height:1.5;color:var(--ink)}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--copper)}
.tier .btn{margin-top:auto;width:100%}
.on-dark .tier{background:color-mix(in srgb,var(--on-forest) 6%,transparent);border-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.on-dark .tier>p{color:var(--sage-glow)}
.on-dark .tier li{color:var(--on-forest)}
.on-dark .tier li::before,.on-dark .meter i{background:var(--olive)}
.on-dark .tier-dur .len{color:var(--olive)}
.on-dark .tier-dur .cap{color:var(--sage-glow)}
.on-dark .meter{background:color-mix(in srgb,var(--sage-glow) 26%,transparent)}

/* ---------- reasons-why columns ---------- */
.why-band{background:var(--paper-2)}
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,3.5vw,3.25rem);margin-top:3rem}
.why-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.why{border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding-top:1.1rem}
.why h3{margin-bottom:.5rem}
.why p{font-size:.93rem;color:var(--ink-2)}
.on-dark .why{border-top-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.on-dark .why p{color:var(--sage-glow)}
@media(max-width:960px){ .why-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- chips: short factual labels under a heading ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.6rem}
.chip{
  font-size:var(--label);font-weight:650;letter-spacing:.06em;
  padding:.35rem .7rem;border-radius:.4rem;
  background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink-2);
}
.on-dark .chip{background:color-mix(in srgb,var(--on-forest) 12%,transparent);color:var(--on-forest)}

/* ---------- a numbered sequence ----------
   contact (what happens next), programmes (the year), coaching (the arc) */
.steps{counter-reset:s;margin-top:2.25rem;display:flex;flex-direction:column;gap:0}
.step{
  counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  padding:1.15rem 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 13%,transparent);
}
.step:first-child{border-top:1px solid color-mix(in srgb,var(--ink) 13%,transparent)}
.step::before{
  content:counter(s);
  font-family:var(--display);font-size:.9rem;color:var(--copper-ink);
  width:1.75rem;height:1.75rem;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--copper) 55%,transparent);
  display:grid;place-items:center;flex:none;
}
.step h3{font-size:1.02rem;margin-bottom:.2rem}
.step p{font-size:.9rem;color:var(--ink-2)}
.on-dark .step,.on-dark .step:first-child{border-color:color-mix(in srgb,var(--sage-glow) 26%,transparent)}
.on-dark .step::before{color:var(--copper-glow);border-color:color-mix(in srgb,var(--copper-glow) 55%,transparent)}
.on-dark .step p{color:var(--sage-glow)}

/* ---------- a two-column page hero ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:center}
/* a split that follows the section heading needs the same air every other
   grid on the site gets, or the first paragraph sits on the h2's descenders */
h2+.split,.lede+.split{margin-top:2.5rem}
.split--top{align-items:start}
@media(max-width:900px){ .split{grid-template-columns:1fr;gap:2.5rem} }

/* ---------- the seal, used as a page motif ---------- */
.seal-plate{display:grid;place-items:center}

/* ---------- the evidence band ----------
   home, gp-practices and corporate. Every figure in it is sourced in
   design/SOURCES.md; nothing goes in here without a primary source. */
.evidence{border-block:1px solid color-mix(in srgb,var(--lime) 16%,transparent)}
.evidence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(1.5rem,3vw,2.75rem);margin-top:2.75rem}
.stat .n{font-family:var(--display);font-size:clamp(2.1rem,1.6rem + 1.7vw,2.9rem);line-height:1;color:var(--lime);letter-spacing:-.03em;display:block}
.stat .t{margin-top:.7rem;font-size:.94rem;color:var(--on-forest);line-height:1.45}
.stat cite{display:block;margin-top:.6rem;font-size:.72rem;font-style:normal;letter-spacing:.02em;line-height:1.45}
.stat cite a{
  color:var(--sage-glow);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--sage-glow) 45%,transparent);
  padding-bottom:1px;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.stat cite a:hover{color:var(--lime);border-bottom-color:var(--lime)}

/* ---------- pull quote ----------
   home, leadership and gp-practices. On the dark bands it takes the copper
   that reads on forest, not the one that reads on cream. */
.pull{
  margin-top:2rem;padding-left:1.4rem;
  border-left:2px solid var(--copper-glow);
  font-family:var(--display);font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  line-height:1.35;letter-spacing:-.018em;color:var(--on-forest);
}
.on-dark .pull{color:var(--on-forest);border-left-color:var(--copper-glow)}

/* ---------- the talk panel ----------
   One per page, about two thirds down, on the tinted band. It is the only
   place besides the closing block where the phone number appears, and it is
   deliberately a person rather than a banner: a route to Leah, not a repeat
   of the hero button. Sits at the foot of a section like .nudge does, so it
   never adds a band of its own and never disturbs the light/dark rhythm. */
.talk{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1.25rem,3vw,2.25rem);align-items:center;
  margin-top:3rem;padding:clamp(1.35rem,3vw,1.85rem) clamp(1.35rem,3vw,2rem);
  border-radius:var(--r-card);
  background:color-mix(in srgb,var(--copper) 9%,var(--paper));
  border:1px solid color-mix(in srgb,var(--copper) 42%,transparent);
}
.talk-mark{width:clamp(3.25rem,7vw,4.25rem);flex:none}
.talk-mark .mark{width:100%;height:auto;border-radius:50%}
/* a grid child needs min-width:0 or a long word sets the column's floor */
.talk-body{min-width:0}
.talk h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);margin-bottom:.35rem}
.talk p{font-size:.93rem;color:var(--ink-2);margin:0;max-width:34rem}
.talk-actions{display:flex;flex-direction:column;gap:.7rem;align-items:stretch;flex:none}
.talk-actions .btn{white-space:nowrap}
/* the direct routes are the quiet half of the panel: someone who wants to ring
   rather than fill anything in should not have to scroll to the footer */
.talk-direct{display:flex;flex-direction:column;gap:.2rem;text-align:center}
/* copper-deep, not copper-ink. copper-ink is 4.54:1 on plain cream, with
   nothing spare, so it drops to 4.16:1 the moment the surface is warm-tinted.
   Even a 4% tint fails. See PALETTE.md rule 6. */
.talk-direct a{
  font-size:.85rem;color:var(--copper-deep);text-decoration:none;
  padding-block:.2rem;transition:color var(--fast) var(--ease);
}
.talk-direct a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* on a tablet the three columns leave the copy a 26-character measure */
@media(max-width:900px){
  .talk{grid-template-columns:auto minmax(0,1fr);row-gap:1.35rem}
  .talk-actions{grid-column:1 / -1}
  .talk-actions .btn{width:100%}
  .talk-direct{flex-direction:row;justify-content:center;gap:1.25rem}
}
@media(max-width:520px){
  .talk{grid-template-columns:1fr;text-align:center;justify-items:center}
  .talk-mark{display:none}          /* the seal is already in the bar above */
  .talk p{margin-inline:auto}
  .talk-direct{flex-direction:column;gap:.2rem}
}

/* the panel lives on the tinted band, but must not fall apart if it is ever
   put on cream or on a dark band */
.on-dark .talk{
  background:color-mix(in srgb,var(--copper) 14%,var(--forest));
  border-color:color-mix(in srgb,var(--copper-glow) 45%,transparent);
}
.on-dark .talk h3{color:var(--on-forest)}
.on-dark .talk p{color:var(--sage-glow)}
.on-dark .talk-direct a{color:var(--olive)}
.on-dark .talk-direct a:hover{color:var(--on-forest)}