/* ============================================================
   Survive 2 Thrive — shared stylesheet for secondary pages
   (Clinical Corner, Resources, ...). Mirrors the tokens, merged Ink header,
   and footer from index.html so every page reads as one site.
   index.html keeps its own inline <style>; this file serves the
   subpages built in P46.
   ============================================================ */

:root {
  /* Locked 3-color palette (P55) — cream dominant, olive secondary, ink accent.
     Tertiary warm tones + seabay are RETIRED as visible surfaces; tokens kept
     for compatibility only. */
  --salty:      #C57E5B;
  --terracotta: #D7A488;
  --sandbar:    #C5B7A0;
  --seabay:     #9CACAB;

  /* — Active palette — */
  --cream:      #EFE9DA;   /* dominant ground */
  --cream-2:    #E0D6C0;   /* deeper cream */
  --ink:        #36302A;   /* primary text + contrast */
  --ink-soft:   #62594F;
  --ink-quiet:  #655C53;
  --olive:      #909878;   /* secondary anchor — mid olive */
  --olive-light:#B3BC97;   /* light sage — accents on dark ink */
  --olive-deep: #7A8265;   /* deeper olive — richer marks */
  --cream-band: #DAD7C4;   /* section-band cream — distinct from --cream-2 (#E0D6C0) */
  --olive-text: #575C46;  /* P127/P128 — olive that is legal NEXT TO CREAM in either
            direction: olive text on cream, and cream text on an olive fill
            (eyebrows,
            links, meta, her italic questions). --olive (#909878) is
            2.09-2.50:1 on the four light grounds an
            eyebrow sits on and fails WCAG AA at 12.5px;
            --olive-deep tops out at 3.33:1. This is the
            same hue (75) and saturation (13.4%) darkened
            to L 31.9%, worst ground 4.79:1. --olive is
            unchanged: it is used for hairlines and fills,
            which carry no text-contrast requirement. */

  --rule:       rgba(144, 152, 120, 0.45); /* the standard olive hairline. P129:
            site.css used var(--rule) but never defined it, so every rule using it
            was an invalid declaration and silently dropped. */

  --olive-footer: #464B3A;  /* P128 — the footer ground. --olive-deep (#7A8265) is
            only 3.33:1 against --cream and 4.03:1 against pure WHITE,
            so no footer text could ever pass on it; the ground had to
            move, not the text. Same olive hue, L 45.3%->26.0%. Chosen
            so --olive-light still clears 4.5:1 on it (4.53) and the
            existing hover colour is unchanged. */
  --cream-dim:    #D1CDBD;  /* P128 — footer small print. Was rgba(cream,.62),
            which blended to 2.23:1. Solid, 5.64:1 on --olive-footer. */

  --on-terracotta: #36302A;
  --on-olive:      #F4EFE0;
  --on-seabay:     #2C2B26;
  --on-sandbar:    #36302A;
  --on-salty:      #F4EFE0;
  --on-ink:        #EFE9DA;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Outfit", "Outfit Fallback", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gutter: 1.25rem;
  --maxw: 72rem;
}
@media (min-width: 640px)  { :root { --gutter: 2rem; } }
@media (min-width: 1024px) { :root { --gutter: 3rem; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; max-width: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (min-width: 768px) { html { scroll-padding-top: 90px; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  color: inherit;
}
.h1 { font-size: 2.25rem; line-height: 1.08; letter-spacing: -0.018em; }
/* P64 — heading scale bumped to match index.html (stronger editorial hierarchy). */
.h2 { font-size: 2.05rem; line-height: 1.1; letter-spacing: -0.016em; }
.h3 { font-size: 1.45rem; line-height: 1.2; }
.h4 { font-size: 1.1rem; line-height: 1.25; }
@media (min-width: 640px) {
  .h1 { font-size: 2.85rem; }
  .h2 { font-size: 2.5rem; }
  .h3 { font-size: 1.6rem; }
}
@media (min-width: 1024px) {
  .h1 { font-size: 3.6rem; }
  .h2 { font-size: 3.1rem; }
  .h3 { font-size: 1.8rem; }
}
@media (min-width: 1280px) { .h1 { font-size: 4.1rem; } }

.lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
}
@media (min-width: 640px) { .lede { font-size: 1.18rem; } }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--olive-text);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { background: var(--olive-text); transform: translateY(-1px); }  /* P128 — --olive was 2.5:1 against the cream label */
.btn .arrow { transition: transform 0.35s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.18rem;
  transition: opacity 0.3s var(--ease);
}
.btn-quiet:hover { opacity: 0.7; }
.btn-quiet .arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.btn-quiet:hover .arrow { transform: translateX(4px); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============= HEADER (P56 — A/B cream variant, dev-only) =============
   Identical to index.html's P56 cream header. `git revert <p56-sha>` flips
   back to the dark Ink version cleanly. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cream);
  color: var(--ink);
  /* P133: was overflow:hidden, which only ever existed to clip the P46 Ink
     header's decorative ::before/::after glows (long gone). It would clip the
     For Clients sub-menu, which hangs below the header. */
  overflow: visible;
  border-bottom: 1px solid rgba(144, 152, 120, 0.55);
}
.site-header .shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 58px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.header-brand img { height: 44px; width: auto; opacity: 0.95; }
.header-brand-text { display: flex; flex-direction: column; gap: 0.12rem; }
.header-brand-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: 0.005em;
  line-height: 1.1;
  white-space: nowrap;
}
.header-brand-cred {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
nav.nav { display: none; align-items: center; gap: 1.4rem; }
nav.nav a { font-size: 0.95rem; color: var(--ink); transition: color 0.3s var(--ease); }
nav.nav a:hover { color: var(--olive-text); }
/* ---- Header sub-menus: For Clients (P133), For Therapists (P146) — WAI-ARIA disclosure, js/nav.js ----
   The chevron is its own 24x24 button so it clears WCAG 2.2 target size
   (2.5.8) sitting right beside the "For Clients" link. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-sub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 0.05rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 3px;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.nav-group:hover .nav-sub-btn { color: var(--olive-text); }
.nav-sub-btn svg { transition: transform 0.3s var(--ease); }
.nav-sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The panel hangs from the header's bottom hairline: its top sits exactly on
   that line (the header's inner height is the 58px logo + 1.2rem padding;
   the 24px button is the tallest thing in the row), and it carries no top
   border, so the hairline appears to step down and wrap around it. */
.nav-sub {
  position: absolute;
  top: calc(100% + (58px + 1.2rem - 24px) / 2);
  left: -1rem;
  z-index: 40;
  margin: 0;
  padding: 0.35rem 0 0.5rem;
  list-style: none;
  background: var(--cream);
  border: 1px solid rgba(144, 152, 120, 0.55);
  border-top: 0;
}
/* Hover bridge across the gap between the item and the panel. */
.nav-sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: calc((58px + 1.2rem - 24px) / 2 + 1px);
}
.nav-sub li { margin: 0; }
nav.nav .nav-sub a { display: block; padding: 0.55rem 1rem; white-space: nowrap; }
/* No-JS fallback: hover or focus inside the item shows the list. */
.nav-group:not(.is-enhanced):hover .nav-sub,
.nav-group:not(.is-enhanced):focus-within .nav-sub { display: block; }
@media (prefers-reduced-motion: reduce) { .nav-sub-btn svg { transition: none; } }
@media (min-width: 768px) {
  .site-header .shell { min-height: 64px; }
  .header-brand img { height: 58px; }
  .header-brand-name { font-size: 1.15rem; }
}
/* P76 — desktop nav reveals at 1024px with the brand tagline hidden; it returns
   at 1280px. Hamburger covers 0–1023px. nowrap stops flex-shrink from wrapping
   the multi-word links.
   P133 had to tighten this row to fit Home + the For Clients chevron (slack
   7.5 / 7.3px at 1024 / 1280). P146 moved Clinical Corner under For Therapists,
   which returned ~77px, so the tightening is undone in full: this is the P76
   sizing again — gap 1.05rem (1.2rem from 1280), links 0.9rem, the CTA's own
   1.1rem side padding, the brand name at 1.15rem at every desktop width.
   Measured (shell 928 / 1056px at 1024 / 1280): nav 599 / 611px, slack
   19.2 / 35.7px at the tighter of Chromium and WebKit — more than the pre-P133
   13 / 30px. Header height unchanged (78.2px), one line.
   P183: Contact joined the row and Home left it (the logo links home; the phone
   menu keeps Home). Nav 612.4 / 624.3px, slack 31.0 / 46.5px at 1024 / 1280 (the
   tighter of Chromium and WebKit), header 78.2px, one line.
   P185: the Book a Consultation button left the row for the footer, Home came back
   first and Contact went last. Nav 491.8 / 503.8px, free space (inner width minus
   brand minus nav) 150.8 / 167.3px at 1024 / 1280, the tighter engine; header
   78.2px, one line. The row still ends on the shell edge (space-between), so the
   button was not holding the layout.
   Anything added to this row needs the same measurement. */
@media (min-width: 1024px) {
  nav.nav { display: flex; gap: 1.05rem; }
  nav.nav a { font-size: 0.9rem; white-space: nowrap; }
  .header-brand-cred { display: none; }
}
@media (min-width: 1280px) {
  nav.nav { gap: 1.2rem; }
  .header-brand-cred { display: block; }
}
@media (max-width: 639px) { .header-brand-cred { display: none; } }

.menu-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.menu-btn.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (min-width: 1024px) { .menu-btn { display: none; } }

.mobile-nav {
  position: fixed;
  top: 63px;
  left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid rgba(144, 152, 120, 0.45);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  z-index: 25;
  padding: 0.5rem 0 1.25rem 0;
  /* P133: scroll inside the menu rather than run off the bottom of a short
     (landscape-phone) viewport, where the last rows would be unreachable. */
  max-height: calc(100dvh - 63px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 768px) { .mobile-nav { top: 78px; max-height: calc(100dvh - 78px); } }
.mobile-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-nav a {
  display: block;
  padding: 0.85rem var(--gutter);
  font-size: 1.1rem;
  font-family: var(--serif);
  color: var(--ink);
  border-bottom: 1px solid rgba(54, 48, 42, 0.08);
}
.mobile-nav > a:last-child { border-bottom: none; }
/* P133 — the For Clients pages (and, P146, Clinical Corner under For
   Therapists), always visible and indented under their
   parent, with an olive rule marking the group. No nested tap on mobile. */
.mobile-sub { position: relative; }
.mobile-sub::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) + 0.3rem);
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: var(--olive);
}
.mobile-nav .mobile-sub a {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  padding-left: calc(var(--gutter) + 1.2rem);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ============= PAGE HERO STRIP (subpages) ============= */
.page-hero {
  background: var(--cream);
  padding: 3.25rem 0 2.5rem;
  border-bottom: 1px solid rgba(144, 152, 120, 0.45);
}
@media (min-width: 768px) { .page-hero { padding: 4.5rem 0 3.25rem; } }
.page-hero .eyebrow { display: inline-block; margin-bottom: 0.7rem; }
.page-hero h1 { color: var(--ink); margin-bottom: 1rem; }
.page-hero .lede { max-width: 46rem; }

/* ============= CONTACT (P181) =============
   The page hero, then one cream-band section: booking first, in a cream panel with
   the site's dark pill (the primary action); the who-I-work-with facts use the
   .group-facts style every offering card uses.
   P185: the phone came off the page and the lotus photo came on. The grid is now
   booking | photo, then email | who I work with, then the crisis notice across both
   columns from 900px, and one column below it in the same order, so the photo
   follows booking at every width instead of leading it. The email-security notice
   was removed at Tina's request. */
.contact { background: var(--cream-band); padding: 3.25rem 0 4.5rem; }
@media (min-width: 768px) { .contact { padding: 4.5rem 0 5.5rem; } }
.contact-grid { display: grid; gap: 2.75rem; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 4rem; row-gap: 3.25rem; align-items: start; }
}
/* The whole frame at its native 3:2, unframed like the portraits: the booking panel
   beside it already carries this row's one rule. figure's UA margin zeroed (P111). */
.contact-photo { margin: 0; }
.contact-photo img { width: 100%; }
.contact-book {
  background: rgba(239, 233, 218, 0.7);
  border: 1px solid rgba(144, 152, 120, 0.5);
  border-radius: 3px;
  padding: 1.75rem 1.5rem 1.9rem;
}
@media (min-width: 768px) { .contact-book { padding: 2.5rem 2.5rem 2.6rem; } }
.contact-book p { color: var(--ink-soft); max-width: 36rem; margin: 0 0 1.6rem; }
.contact-h { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; color: var(--ink); margin: 0 0 1rem; }
.contact-h--lead { font-size: 1.8rem; line-height: 1.12; letter-spacing: -0.014em; }
@media (min-width: 640px) { .contact-h { font-size: 1.6rem; } .contact-h--lead { font-size: 2.15rem; } }
.contact-book .contact-small { margin: 1rem 0 0; }
.contact-small { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
/* Stacked, a hairline separates email from who-I-work-with; side by side (900px+)
   both blocks carry it, so the second row reads as one ruled band under the first. */
.contact-block + .contact-block { padding-top: 2.2rem; border-top: 1px solid var(--rule); }
@media (min-width: 900px) {
  .contact-block { padding-top: 2.2rem; border-top: 1px solid var(--rule); }
}
.contact-email { margin: 0 0 1rem; }
.contact-facts { margin-bottom: 1rem; }
.contact-facts:last-child { margin-bottom: 0; }
.contact-facts a,
.contact-email a,
.contact-crisis a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(87, 92, 70, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.contact-facts a:hover,
.contact-email a:hover,
.contact-crisis a:hover { text-decoration-color: currentColor; }
/* P185 — Tina's crisis copy, the grid's last row: both columns, ruled like the blocks
   above it, so the grid's own gaps space it. Three sentences of numbers someone may
   need in a hurry read best in the roman body face at the body colour, on a measure
   under 80 characters (held on the text, not the row). No box and no alarm colour;
   the one emphasis is on the three call targets (weight, underline, never broken
   across lines). Her closing disclaimer is set in the site's caption voice. */
.contact-crisis { grid-column: 1 / -1; padding-top: 2.2rem; border-top: 1px solid var(--rule); }
.contact-crisis > * { max-width: 35rem; }
.contact-crisis-h { margin: 0 0 0.6rem; font-style: italic; font-size: 1.2rem; line-height: 1.3; }
.contact-crisis p { margin: 0; line-height: 1.7; }
.contact-crisis a { font-weight: 600; white-space: nowrap; }
.contact-crisis .contact-crisis-note { margin-top: 1rem; font-family: var(--serif); font-style: italic; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }

/* ============= CLINICAL CORNER — post list =============
   The page was Reflections until P132; the .reflections / .r-* class names
   are internal and kept, matching the content/reflections/ folder. */
.reflections {
  padding: 4rem 0 5rem;   /* P64 — more top breathing room on mobile */
}
@media (min-width: 768px) { .reflections { padding: 4rem 0 6rem; } }
.r-list {
  border-top: 1px solid rgba(54, 48, 42, 0.18);
}
.r-post {
  display: block;
  padding: 2.2rem 0;
  border-bottom: 1px solid rgba(54, 48, 42, 0.18);
  color: inherit;
}
.r-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 500;
  margin-bottom: 0.7rem;
}
.r-post-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.6rem;
  max-width: 30ch;
  transition: color 0.4s var(--ease);
}
.r-post:hover .r-post-title { color: var(--olive-text); }
.r-post-excerpt {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 0 0.8rem;
}
.r-post-read {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--olive-text);
}
.r-post-read .arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.r-post:hover .r-post-read .arrow { transform: translateX(4px); }

/* ============= CLINICAL CORNER — The House of Healing™ (P132) =============
   Tina's framework: heading, subheading, her diagram at full content width,
   her credit line, then her three paragraphs. The diagram is the page's one
   bold element and everything around it stays quiet: no band, no card, no
   frame.
   Full width because it has to be READ. Its smallest annotation text is
   ~17 px in the 1215 px original, so the rendered size is 17 x width/1215:
   ~15 px at the 1056 px desktop slot, ~13 px at 1024, ~10 px at 768, and
   ~5 px on a phone. Beside the paragraphs at >=1024 it would have been
   ~500 px wide and ~7 px text, so it goes above them instead. On phones the
   annotations need a pinch-zoom (P174 removed the enlarge link); the native
   1215 rung keeps them sharp when zoomed on a high-density screen. */
.hoh { padding-top: 0.5rem; }
.hoh h2 { color: var(--ink); max-width: 20ch; }
/* Lora's ™ is drawn for text sizes; at display size it sets nearly at cap
   height and outweighs the word. Scaled and lifted so its top meets the cap
   line. Still the ™ character, not a superscript "TM", and only here — at
   body sizes the glyph is already right. */
.hoh-tm { font-size: 0.5em; vertical-align: 0.82em; line-height: 0; margin-left: 0.04em; }
.hoh-sub {
  margin: 0.8rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--olive-text);
}
@media (min-width: 640px) { .hoh-sub { font-size: 1.55rem; } }
.hoh-figure { margin: 2.25rem 0 0; }
@media (min-width: 768px) { .hoh-figure { margin-top: 3rem; } }
.hoh-plate { display: block; }
/* Multiply drops the drawing's white ground so the ink sits on the cream.
   For a neutral grey drawing this is exactly a luminance-keyed alpha over
   cream (cream x L/255 either way), measured before shipping: grey tones
   hold their contrast (1.657:1 vs 1.673:1 on white) with no halo, where a
   white-threshold knockout left pale fringes on 9.6% of the kept pixels.
   Nothing between the image and the section ground may create a stacking
   context (opacity, transform, filter, isolation) or the white comes back. */
.hoh-plate img { width: 100%; height: auto; mix-blend-mode: multiply; }
/* Forced colours repaint the ground with the system Canvas, which can be
   black, and black x anything = black. Show the drawing on its own white. */
@media (forced-colors: active) { .hoh-plate img { mix-blend-mode: normal; } }
.hoh-cap {
  margin-top: 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.hoh-prose {
  margin-top: 2.75rem;
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.78;
}
@media (min-width: 640px) { .hoh-prose { font-size: 1.12rem; } }
@media (min-width: 768px) { .hoh-prose { margin-top: 3.5rem; } }
.hoh-prose p { margin: 0 0 1.2rem; max-width: 64ch; }
/* Her last paragraph is a status note about the forthcoming paper, not part of
   the argument, so it steps back behind a hairline. Wording untouched. */
.hoh-prose p.hoh-note {
  margin: 2rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.98rem;
  color: var(--ink-quiet);
}
/* The post list only exists once js/reflections.js adds .r-list. */
.hoh ~ .r-list { margin-top: 4.5rem; }

.r-empty {
  padding: 3rem 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink-soft);
}

/* ============= CLINICAL CORNER — single post ============= */
.r-article {
  max-width: 44rem;
  margin: 0 auto;
  padding: 4rem 0 5rem;   /* P64 — mobile breathing room */
}
@media (min-width: 768px) { .r-article { padding: 4rem 0 6rem; } }
.r-article-meta {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  font-weight: 500;
  margin-bottom: 0.9rem;
}
.r-article h1 {
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.r-article-figure { margin: 0 0 2rem; }
.r-article-figure img { width: 100%; border-radius: 2px; }
.r-prose { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; }
.r-prose > * + * { margin-top: 1.2rem; }
.r-prose p { max-width: 64ch; }
.r-prose h2, .r-prose h3 { color: var(--ink); margin-top: 2.2rem; }
.r-prose h2 { font-size: 1.6rem; }
.r-prose h3 { font-size: 1.3rem; }
.r-prose a { color: var(--olive-text); border-bottom: 1px solid rgba(144, 152, 120, 0.5); }
.r-prose a:hover { border-color: var(--olive); }
.r-prose blockquote {
  margin: 1.6rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--olive);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}
.r-prose ul, .r-prose ol { padding-left: 1.4rem; }
.r-prose li + li { margin-top: 0.4rem; }
.r-prose img { width: 100%; border-radius: 2px; margin: 1.6rem 0; }
.r-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--olive-text);
}
.r-back .arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.r-back:hover .arrow { transform: translateX(-4px); }
.r-foot-back {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(54, 48, 42, 0.14);
}

/* ============= WEBSITE PRIVACY POLICY + 404 (P141; renamed P180) =============
   Both reuse the page-hero; the policy reuses the Clinical Corner .r-prose long-form type
   in a left-aligned column that lines up with the hero text, like every other page. */
/* P180: a line break that exists only on narrow screens, so a heading wraps at the
   same word in Lora and in its fallback (see the privacy page's h1). */
@media (min-width: 420px) { .br-narrow { display: none; } }
.legal { padding: 3rem 0 5rem; }
@media (min-width: 768px) { .legal { padding: 3.5rem 0 6rem; } }
.legal-prose { max-width: 46rem; }
.legal-prose h2 { font-size: 1.45rem; margin-top: 2.6rem; }
.legal-prose h2:first-child { margin-top: 0; }
@media (min-width: 640px) { .legal-prose h2 { font-size: 1.6rem; } }
.legal-prose ul { margin-top: 0.9rem; }
.legal-prose strong { color: var(--ink); font-weight: 600; }

/* P163 — Notice of Privacy Practices (/privacy/notice-of-privacy-practices/).
   Small tracked Outfit headings retain the legal page's quiet rhythm;
   roman numerals use the serif. */
.npp-download { margin: 1.1rem 0 0; font-size: 0.95rem; }
.npp-download a { color: var(--olive-text); border-bottom: 1px solid rgba(144, 152, 120, 0.5); }
.npp-download a:hover { border-color: var(--olive); }
.npp-head {
  padding: 1.3rem 1.4rem 1.4rem;
  border-left: 2px solid var(--olive);
  background: rgba(144, 152, 120, 0.12);
}
.npp-head p { margin: 0; }
.npp-practice { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink); }
.npp-title { margin-top: 0.3rem !important; font-size: 0.8rem; letter-spacing: 0.12em; font-weight: 600; color: var(--olive-text); }
.npp-lead { margin-top: 0.9rem !important; font-size: 0.92rem; letter-spacing: 0.02em; line-height: 1.6; font-weight: 500; color: var(--ink); }
.legal-prose.npp h2 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.45;
  margin-top: 2.8rem;
  color: var(--ink);
}
@media (min-width: 640px) { .legal-prose.npp h2 { font-size: 1rem; } }
.npp-num {
  margin-right: 0.35em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35em;
  letter-spacing: 0;
  color: var(--olive-text);
}
.npp ol, .npp ul { margin-top: 0.9rem; }
.npp li::marker { color: var(--olive-text); font-weight: 600; }
.npp ol ol { margin-top: 0.6rem; }
.npp-related { margin: 3rem 0 0; max-width: 46rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.95rem; }
.npp-related a { color: var(--olive-text); border-bottom: 1px solid rgba(144, 152, 120, 0.5); }
/* 404: enough height that the footer does not ride up under a short page. */
.nf { min-height: 58vh; display: flex; align-items: center; border-bottom: 0; }
.nf .shell { width: 100%; }
.nf-links { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2rem; }
.nf-links .btn-quiet { font-size: 1rem; padding: 0.35rem 0 0.2rem; }

/* ============= RESOURCES ============= */
.resources { padding: 4rem 0 5rem; }   /* P64 — mobile breathing room */
@media (min-width: 768px) { .resources { padding: 4rem 0 6rem; } }
.r-category {
  padding: 2.4rem 0;
  border-top: 1px solid rgba(144, 152, 120, 0.5);
}
.r-category:first-child { border-top: none; padding-top: 0.5rem; }
.r-category-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
.r-category-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--olive-text);
}
.r-category h2 { color: var(--ink); }
.r-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 768px) { .r-items { grid-template-columns: 1fr 1fr; gap: 1.6rem 3rem; } }
.r-item { max-width: 52ch; }
.r-item-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.25rem;
}
.r-item-name a { color: var(--ink); border-bottom: 1px solid rgba(144, 152, 120, 0.5); transition: color 0.3s var(--ease); }
.r-item-name a:hover { color: var(--olive-text); }
.r-item-name .ext { font-size: 0.85em; color: var(--olive-text); margin-left: 0.3rem; }
.r-item-desc {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}
.r-category-empty {
  color: var(--ink-quiet);
  font-style: italic;
  font-family: var(--serif);
}

/* ---------- Recommended Reading (P129) ----------
   Replaces P121's three AI-generated collage plates with a real, CMS-driven
   list. The plates were a picture OF a reading list; this is the reading list.

   It has to read as a curated library, not a store — so: no fills, no card
   boxes, no shadows, no borders on the covers, and no links out to a retailer
   anywhere (Tina does not want to appear to endorse one). The only structural
   device is the site's olive hairline, which separates one book from the next
   the way a shelf edge does. The cover is the only colour in the row; every
   other cue is typographic. */
.library { padding-top: 3.4rem; margin-top: 3.4rem; border-top: 1px solid var(--rule); }
/* P146 — with the sage-dish band gone, nothing sits above the list while
   Tina's CMS resources are empty, and its rule would double the page hero's
   bottom hairline across an empty 7rem. The separator returns by itself the
   moment js/resources.js renders a category into #resources-list. */
#resources-list:empty + .library { padding-top: 0; margin-top: 0; border-top: 0; }
.library-head { margin-bottom: 2.6rem; }
.library-head h2 { color: var(--ink); }
.library-lede {
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0.9rem 0 0;
  font-size: 1.02rem;
  line-height: 1.7;
}
/* P134 — jump links to the three categories. The site's small tracked-caps
   label (cf. .r-post-meta, .header-brand-cred) in the eyebrow's olive: Outfit
   has no true small caps, and synthesised ones come out spindly, so this is
   uppercase at a small size with open tracking. One row separated by olive
   hairline dots; a stack below 600px, where the row would wrap unevenly. No
   fills, no pills — a thin olive underline is the only link cue. The padding
   takes each link past the 24px WCAG 2.2 target height. */
.lib-jump { margin-top: 1.6rem; }
.lib-jump ul {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lib-jump li[hidden] { display: none; }   /* beats the display:flex below */
.lib-jump a {
  display: inline-block;
  padding: 0.3rem 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive-text);
  text-decoration: underline;
  text-decoration-color: rgba(144, 152, 120, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  transition: text-decoration-color 0.3s var(--ease);
}
.lib-jump a:hover { text-decoration-color: var(--olive-text); }
@media (min-width: 600px) {
  .lib-jump ul { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; }
  .lib-jump li { display: flex; align-items: center; gap: 1.1rem; }
  /* A dot before every link that has a visible link ahead of it, so hiding an
     empty category never leaves a leading or doubled dot. */
  .lib-jump li:not([hidden]) ~ li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--olive);
  }
}

/* P130 — height reservation. Removing the "Resources coming soon." placeholder
   pulled this section up to ~665px on a phone, i.e. inside the fold, so the
   JS fill was shifting in-viewport content: CLS went 0.0167 -> 0.1844 at 320px.
   These are the MEASURED maxima of #library-list per breakpoint range for the
   current book list (one column below 900px, two above; covers are 92px wide
   below 420px and 120px above, which is why the middle band is the tallest).
   P146 re-derived them for Mother Brain (one more row, ~230px): the 41-book
   values 8340 / 9870 / 5390 no longer covered the list. Maxima, Chromium and
   WebKit alike: 8554 at 320, 10100 at 640, 5623 at 1040.
   P163 re-derived them again for 44 books (two more in Trauma, which also moved
   first): maxima, Chromium and WebKit within 1px, 8939 at 320, 10557 at 640,
   5852 at 1040 (swept 320-419 by 5, 420-899 by 10, 900-1600 by 20).
   js/books.js clears the reservation once the list is rendered, so a shorter
   render leaves no gap — that release moves only the footer, which is ~9000px
   down and out of viewport, so it costs no CLS.
   RE-DERIVE these if the book count changes materially. */
#library-list { min-height: 8940px; }
@media (min-width: 420px) { #library-list { min-height: 10560px; } }
@media (min-width: 900px) { #library-list { min-height: 5860px; } }

.lib-cat + .lib-cat { margin-top: 3.2rem; padding-top: 2.8rem; border-top: 1px solid var(--rule); }
.lib-cat-title { color: var(--ink); margin: 0; }
/* P134 — jump-link targets. html's scroll-padding-top (72 / 90px) already
   clears the sticky header (64 / 78px); this adds air so the heading does not
   land flush under the header's hairline. */
.lib-cat-title { scroll-margin-top: 1.5rem; }
.lib-cat-lede {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
  font-size: 1.04rem;
  max-width: 52ch;
}

.lib-books { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
/* Two columns of shelf, not a gallery of tiles: the column-gap is wide enough
   that the two runs of hairlines never read as one table. */
@media (min-width: 900px) {
  .lib-books { grid-template-columns: 1fr 1fr; column-gap: 3.2rem; }
}

.lib-book {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 1.4rem;
  align-items: start;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
/* The first row in each column starts the run, so it keeps its rule; nothing
   is suppressed. At one column that is simply every row. */
.lib-book:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  /* In a 2-col grid the second item is also a run-start on the right column. */
  .lib-book:nth-child(2) { border-top: 0; padding-top: 0; }
}
@media (max-width: 419px) {
  .lib-book { grid-template-columns: 92px 1fr; column-gap: 1.1rem; }
}

.lib-cover { display: block; margin: 0; }
.lib-cover img {
  width: 100%;
  height: auto;
  display: block;
  /* No border and no radius: a rule around a cover turns a shelf into a shop. */
}
/* Books with no usable cover get a typographic plate rather than an upscale. */
.lib-cover--none {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 2 / 3;
  padding: 0.7rem 0.6rem;
  background: var(--cream);
  border: 1px solid var(--rule);
}
.lib-cover--none span {
  font-family: var(--serif);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.lib-title {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
/* The author line borrows .eyebrow's exact treatment — small, tracked, olive —
   so the list speaks in the voice the rest of the site already uses for labels. */
.lib-author {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive-text);
  margin: 0.45rem 0 0;
}
.lib-note {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.55rem 0 0;
  max-width: 42ch;
}

/* ============= FOOTER (identical to index.html) ============= */
footer.site-footer {
  background: var(--olive-footer);
  color: var(--cream);
  padding: 3rem 0 2rem;
  border-top: 1px solid rgba(239, 233, 218, 0.12);
}
footer .shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  footer .shell { grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
}
.brand-lockup { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand-lockup .wordmark { display: inline-block; }
.wordmark {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.brand-mark { display: block; flex-shrink: 0; width: 40px; height: 40px; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
.brand-lockup:hover .brand-mark { transform: rotate(-3deg); }
@media (min-width: 640px) { .brand-mark { width: 48px; height: 48px; } }
.brand-mark--footer { opacity: 0.92; }
footer .brand-lockup:hover .brand-mark--footer { opacity: 1; }
footer .foot-brand .wordmark { color: var(--cream); font-size: 1.2rem; }
footer .foot-brand p {
  font-size: 0.92rem;
  margin: 0.7rem 0 0;
  max-width: 32rem;
  line-height: 1.55;
}
footer .foot-contact { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.92rem; }
footer .foot-contact a { color: var(--cream); }
footer .foot-contact a:hover { color: var(--olive-light); }
/* P186: the footer's primary action is the header button P185 removed, flipped for
   the olive ground: the same padding, radius and type (Outfit 600, 0.85rem), a cream
   pill with footer-olive text. Hover dims the pill to --cream-dim (5.66:1; P187
   swapped it from the sage --olive-light, 4.53:1, for contrast headroom). Content
   width at every size, with real space below so it doesn't group with the email and
   phone. Focus: the footer ring. */
footer .foot-contact .foot-book {
  align-self: flex-start;
  margin-bottom: 1.2rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--cream);
  color: var(--olive-footer);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
footer .foot-contact .foot-book:hover { background: var(--cream-dim); color: var(--olive-footer); }
/* A cream ring for every footer link: the default ring barely shows on the olive ground. */
footer a:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
footer .foot-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(239, 233, 218, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--cream-dim);
}
footer .foot-legal { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.25rem; }
/* P141: the privacy link. Underlined — colour alone would not mark it on the olive ground;
   the padding lifts it past WCAG 2.2's 24px target height. */
footer .foot-legal a {
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--cream-dim);
  text-decoration: underline;
  text-decoration-color: rgba(209, 205, 189, 0.5);
  text-underline-offset: 0.2em;
  transition: color 0.3s var(--ease);
}
footer .foot-legal a:hover { color: var(--olive-light); }
footer .ij-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cream-dim);
  transition: color 0.3s var(--ease);
}
footer .ij-badge:hover { color: var(--olive-light); }
footer .ij-badge img { height: 18px; width: auto; opacity: 0.8; }

/* ============= SERVICES PAGES — For Clients / For Therapists (P75) =============
   Card pattern mirrors index.html's P64 services cards so the subpages read as
   the same system. Section ground is the deeper cream from the homepage
   services band, var(--cream-band). */
.page-hero-meta {
  margin: 1.2rem 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive-text);
}

.svc-page { background: var(--cream-band); padding: 4rem 0 5rem; }
@media (min-width: 768px) { .svc-page { padding: 5rem 0 6rem; } }

/* P155 — disclosures (Tina asked for expandable services), replacing the
   P74 cards. Native <details>: all closed, no JS, keyboard- and screen-reader-
   operable, find-in-page reaches closed text. The name sits on the <summary>
   (no heading inside it: some screen readers flatten one), in the serif, with
   an olive chevron. The homepage specialties use the same component in
   index.html's inline <style>; keep the two in step. The FAQ keeps its plus. */
.svc-page-h { color: var(--ink); margin-bottom: 2.25rem; }
@media (min-width: 768px) { .svc-page-h { margin-bottom: 2.75rem; } }
.disc-list { max-width: 50rem; border-bottom: 1px solid var(--rule); }
.disc { border-top: 1px solid var(--rule); }
.disc-sum {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.disc-sum::-webkit-details-marker { display: none; }
.disc-sum:hover { color: var(--olive-text); }
.disc-sum:focus-visible { outline: 2px solid var(--olive-text); outline-offset: 4px; }
@media (min-width: 640px)  { .disc-sum { font-size: 1.6rem; padding: 1.75rem 0; } }
@media (min-width: 1024px) { .disc-sum { font-size: 1.8rem; } }
/* P175 — the chevron sits in a round olive button, so every row reads as the
   same control and its state shows at a glance: closed = outline, chevron down;
   open = solid olive, cream chevron up; hover tints the circle. Measured: olive
   on the band 4.79:1, cream on the fill 5.73:1 (WCAG 1.4.11 wants 3:1). The svg
   itself is the circle (border + padding on the outer <svg>), so no markup
   changed. The homepage specialties' copy in index.html must match. */
.disc-chev {
  flex: none;
  box-sizing: border-box;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.5625rem 0.5rem;
  margin-top: calc((1.25em - 1.75rem) / 2);
  border: 1px solid var(--olive-text);
  border-radius: 50%;
  color: var(--olive-text);
  transition: transform 0.35s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
@media (min-width: 640px) { .disc-chev { width: 2rem; height: 2rem; padding: 0.625rem 0.5625rem; margin-top: calc((1.25em - 2rem) / 2); } }
.disc-sum:hover .disc-chev { background-color: rgba(144, 152, 120, 0.22); }
.disc[open] > .disc-sum .disc-chev { transform: rotate(180deg); background-color: var(--olive-text); color: var(--cream); }
.disc-body { padding: 0 0 2.4rem; }
@media (prefers-reduced-motion: reduce) { .disc-sum, .disc-chev { transition: none; } }
/* Services keep their numerals (they were the cards' left column): small,
   italic, olive, riding on the name's baseline. */
.disc-num { font-style: italic; font-size: 0.72em; color: var(--olive-text); margin-right: 0.35em; }
.svc-body p { color: var(--ink-soft); max-width: 58ch; margin: 0; font-size: 1.04rem; line-height: 1.75; }
@media (min-width: 640px) { .svc-body p { font-size: 1.08rem; } }
/* The cards' side facts, now a quiet two-line note under the copy. */
.svc-body .svc-facts { margin-top: 1rem; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); }
/* P162 — Tina's service copy runs to several paragraphs, a sub-head and a photo
   per service. Sub-heads take the homepage .focus-sub h3 treatment; the photo is
   the KAP page's in-prose figure (.kap-figure: 36rem, offset hairline), set
   between her opening line and the rest. Links read as the FAQ's do. */
.svc-body > p + p { margin-top: 1rem; }
.svc-sub { font-size: 1.08rem; line-height: 1.3; color: var(--olive-text); margin: 2.2rem 0 0.7rem; }
@media (min-width: 640px) { .svc-sub { font-size: 1.2rem; } }
.svc-body .svc-figure { margin: 1.9rem 0; }
.svc-body strong { font-weight: 600; color: var(--ink); }
.svc-body p a {
  color: var(--olive-text);
  text-decoration: underline;
  text-decoration-color: rgba(87, 92, 70, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.svc-body p a:hover { text-decoration-color: currentColor; }
.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--olive-text);
}
.svc-cta .arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.svc-cta:hover .arrow { transform: translateX(4px); }
.svc-page-foot { margin-top: 3rem; max-width: 42rem; }
.svc-page-foot p { color: var(--ink-soft); margin: 0 0 1.5rem; }

/* ============= FAQ — /for-clients/#faq (P133) =============
   Tina's ten questions as native <details>: opens without JavaScript, is
   keyboard- and screen-reader-operable as shipped, and find-in-page reaches
   the closed answers. Grounds run cream-band (services) -> cream (FAQ) ->
   cream-band (closing CTA), so each block reads as its own without a rule.
   Questions are not a sequence, so no numerals — unlike the services list. */
.faq { background: var(--cream); padding: 4.5rem 0 5rem; }
@media (min-width: 768px) { .faq { padding: 6rem 0 6.5rem; } }
.faq h2 { color: var(--ink); margin-bottom: 2.25rem; }
@media (min-width: 768px) { .faq h2 { margin-bottom: 3rem; } }
.faq-list { max-width: 50rem; border-bottom: 1px solid var(--rule); }
.faq-item { border-top: 1px solid var(--rule); }
/* The .h3 scale, set on the summary rather than an <h3> inside it: a heading
   nested in <summary> is flattened by some screen readers, and the section's
   <h2> already carries the outline. */
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--olive-text); }
.faq-q:focus-visible { outline: 2px solid var(--olive-text); outline-offset: 4px; }
@media (min-width: 640px)  { .faq-q { font-size: 1.6rem; padding: 1.75rem 0; } }
@media (min-width: 1024px) { .faq-q { font-size: 1.8rem; } }
/* A hairline plus that becomes a minus when open. Centred on the FIRST line of
   the question (1.25em line box), so a question that wraps keeps its mark up
   top instead of drifting to the middle. */
.faq-mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: calc((1.25em - 14px) / 2);
}
.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--olive-deep);
  transition: transform 0.35s var(--ease);
}
.faq-mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: rotate(0deg); }
.faq-a {
  max-width: 62ch;
  padding: 0 0 2rem;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.75;
}
@media (min-width: 640px) { .faq-a { font-size: 1.08rem; } }
.faq-a p { margin: 0 0 1rem; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { font-weight: 600; color: var(--ink); }
.faq-a a {
  color: var(--olive-text);
  text-decoration: underline;
  text-decoration-color: rgba(87, 92, 70, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.faq-a a:hover { text-decoration-color: currentColor; }
/* Opening glides where the browser can animate to height:auto; elsewhere it
   opens instantly, which is the correct fallback, not a bug. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .faq-list { interpolate-size: allow-keywords; }
    .faq-item::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete;
    }
    .faq-item[open]::details-content { block-size: auto; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-mark::before, .faq-mark::after, .faq-q { transition: none; }
}

/* Closing CTA band (P133) — lifted out of .svc-page so the FAQ precedes it. */
.svc-close { background: var(--cream-band); padding: 4rem 0 4.5rem; }
@media (min-width: 768px) { .svc-close { padding: 5rem 0 5.5rem; } }
.svc-close .svc-page-foot { margin-top: 0; }

/* — Dash lists (KAP; an offering's Full Description) and the facts list (every
     offering card). P177 removed the rest of the old For Therapists group card
     (.group-card/-head/-sub/-prose/-section/-invest/-register): Beyond Survival is
     now an Events & Groups entry, rendered as an .offering--full below. — */
.group-list { list-style: none; margin: 0.9rem 0 0; padding: 0; color: var(--ink-soft); }
.group-list li { position: relative; padding-left: 1.3rem; }
.group-list li + li { margin-top: 0.45rem; }
.group-list li::before { content: "—"; position: absolute; left: 0; color: var(--olive-text); }
@media (min-width: 640px) {
  .group-list--cols { columns: 2; column-gap: 2.5rem; }
  .group-list--cols li { break-inside: avoid; }
  .group-list--cols li + li { margin-top: 0.45rem; }
}
.group-facts { margin: 0 0 1.8rem; }
.group-facts dt {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive-text);
  margin-top: 0.8rem;
}
.group-facts dt:first-child { margin-top: 0; }
.group-facts dd { margin: 0.1rem 0 0; color: var(--ink); }
@media (min-width: 640px) {
  .group-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.6rem 1.8rem;
    align-items: baseline;
  }
  .group-facts dt { margin-top: 0; }
  .group-facts dd { margin: 0; }
}

/* — Current Offerings (P90; P176: one build-time renderer, scripts/render-
     offerings.js, on /for-clients/ and /for-therapists/ alike). Written only
     when there is at least one offering for that page's audience, so the
     section never renders empty. It can end the page, hence the bottom padding. */
.offerings { padding: 4rem 0 4.5rem; }
@media (min-width: 768px) { .offerings { padding: 5rem 0 5.5rem; } }
.offerings h2 { color: var(--ink); }
.offerings-list { display: grid; gap: 1.25rem; margin-top: 1.7rem; }
@media (min-width: 1024px) {
  .offerings-list { grid-template-columns: repeat(auto-fit, minmax(24rem, 34rem)); gap: 1.6rem; }
}
.offering {
  border: 1px solid rgba(144, 152, 120, 0.5);
  border-radius: 3px;
  background: rgba(218, 215, 196, 0.35);
  padding: 1.5rem 1.4rem;
}
@media (min-width: 640px)  { .offering { padding: 1.8rem 1.9rem; } }
@media (min-width: 768px)  { .offering { padding: 2rem 2.2rem; } }
@media (min-width: 1280px) { .offering { padding: 2.2rem 2.5rem; } }
.offering-title { color: var(--ink); margin-bottom: 0.6rem; }
/* P176: the offering's status (Open reads "Now enrolling"; Waitlist; Full) — a quiet
   line in the caption voice above the title, not a badge. */
.offering-status { margin: 0 0 0.35rem; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--olive-text); }
.offering-summary { color: var(--ink-soft); max-width: 54ch; margin: 0 0 1.3rem; }
.offering-summary a {
  color: var(--olive-text);
  text-decoration: underline;
  text-decoration-color: rgba(87, 92, 70, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.offering-summary a:hover { text-decoration-color: currentColor; }
.offering-facts { margin-bottom: 1.6rem; }
.offering .btn { margin-top: 0.2rem; }
/* P152: with no payment link the card has no button, so the facts close it. */
.offering-facts:last-child { margin-bottom: 0; }

/* P177 — an offering with a Full Description (its markdown body) is a feature:
   it spans the list, the write-up reads down a 62ch column, and the details +
   Register & Pay sit in a tinted key panel — above the write-up on phones and
   tablets, beside it from 1024, where it stays in view (sticky) while she reads
   ~550 words. Heading ladder: section h2 > title h3 (set between the h2 and h3
   sizes) > the body's own section headings, demoted to h4 by the renderer and
   set like the old card's h3s, each opening on a hairline. */
.offering--full { background: rgba(239, 233, 218, 0.55); padding: 1.75rem 1.4rem 2rem; }
@media (min-width: 768px)  { .offering--full { padding: 3rem 2.75rem; } }
@media (min-width: 1024px) {
  /* auto-fit collapses the empty track, leaving a lone card nothing to span; a list
     holding a feature (the renderer adds the class) keeps its tracks and fills them. */
  .offerings-list--feature { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
  .offering--full {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    padding: 3.5rem;
  }
  .offering-head { grid-column: 1; grid-row: 1; }
  .offering-body { grid-column: 1; grid-row: 2; }
  .offering-key { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 6.5rem; }
}
.offering-head { margin-bottom: 1.8rem; }
.offering--full .offering-title { font-size: 1.8rem; line-height: 1.12; letter-spacing: -0.014em; max-width: 24ch; margin-bottom: 0.8rem; }
@media (min-width: 640px)  { .offering--full .offering-title { font-size: 2.15rem; } }
@media (min-width: 1024px) { .offering--full .offering-title { font-size: 2.5rem; } }
.offering--full .offering-summary {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.45;
  color: var(--olive-text);
  max-width: 38rem;
  margin: 0;
}
.offering-key {
  margin-bottom: 2.4rem;
  padding: 1.3rem 1.4rem 1.4rem;
  border-left: 2px solid var(--olive);
  background: rgba(144, 152, 120, 0.12);
}
.offering-end { margin: 2rem 0 0; }
@media (min-width: 1024px) { .offering-end { display: none; } }   /* the sticky panel has it */
.offering-key .offering-facts:not(:last-child) { margin-bottom: 1.4rem; }
.offering-key .btn { margin-top: 0; }
@media (min-width: 1024px) {
  .offering-key { margin-bottom: 0; }
  .offering-key .group-facts { display: block; }
  .offering-key .group-facts dt { margin-top: 0.9rem; }
  .offering-key .group-facts dt:first-child { margin-top: 0; }
  .offering-key .group-facts dd { margin-top: 0.15rem; }
}
.offering-body { color: var(--ink-soft); max-width: 62ch; }
.offering-body p { margin: 0 0 1.1rem; }
.offering-body > :last-child { margin-bottom: 0; }
.offering-body h4 {
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 2.4rem 0 1rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(144, 152, 120, 0.45);
}
@media (min-width: 640px)  { .offering-body h4 { font-size: 1.6rem; } }
@media (min-width: 1024px) { .offering-body h4 { font-size: 1.8rem; } }
.offering-body h5, .offering-body h6 { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin: 1.6rem 0 0.6rem; }
.offering-body .group-list { margin: 0 0 1.1rem; }
.offering-body strong { font-weight: 600; color: var(--ink); }
.offering-body a {
  color: var(--olive-text);
  text-decoration: underline;
  text-decoration-color: rgba(87, 92, 70, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.offering-body a:hover { text-decoration-color: currentColor; }


/* ============= KETAMINE-ASSISTED PSYCHOTHERAPY (P81) =============
   A nested For Clients service page. Full-width section-band rhythm in
   Tina's Google-Doc order — prose stays prose, lists stay lists, nothing
   card-chopped. Alternating cream / deeper-cream / olive-tint grounds,
   ≥96px (6rem) mobile section padding, palette tokens only. Reuses the
   established .eyebrow / .group-list / .btn vocabulary so it reads as one
   site; only KAP-specific rhythm classes live here. */

/* hero subtitle — "Healing Beyond Survival" */
.kap-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--olive-text);
  margin: 0.7rem 0 0;
}
@media (min-width: 640px) { .kap-hero-sub { font-size: 1.6rem; } }

/* section band */
.kap-section { padding: 6rem 0; }                /* ≥96px mobile */
@media (min-width: 768px)  { .kap-section { padding: 7rem 0; } }
@media (min-width: 1024px) { .kap-section { padding: 8rem 0; } }
.kap-section--cream  { background: var(--cream); }
.kap-section--cream2 { background: var(--cream-band); }  /* deeper cream band */
.kap-section--olive  { background: rgba(144, 152, 120, 0.16); }
.kap-section--ink    { background: var(--ink); color: var(--on-ink); }

/* content column inside the shell */
.kap-block { max-width: 60rem; margin: 0 auto; }
.kap-head { margin-bottom: 1.7rem; }
.kap-head .eyebrow { display: block; margin-bottom: 0.7rem; }
.kap-head h2 { color: var(--ink); max-width: 28ch; }

.kap-prose { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.78; max-width: 64ch; }
@media (min-width: 640px) { .kap-prose { font-size: 1.12rem; } }
.kap-prose p { margin: 0 0 1.2rem; }
.kap-prose p:last-child { margin-bottom: 0; }
.kap-prose + .group-list { margin-top: 0.4rem; }
.group-list + .kap-prose { margin-top: 1.4rem; }

/* opening lede band (no heading) — slightly larger, ink-weighted */
.kap-intro p { font-size: 1.16rem; color: var(--ink); max-width: 60ch; }
@media (min-width: 640px) { .kap-intro p { font-size: 1.22rem; } }

/* "What Does Treatment Look Like?" — three numbered stages */
.kap-stages { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 2.6rem; }
.kap-stage { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 640px) {
  .kap-stage { grid-template-columns: 4rem 1fr; gap: 1.6rem; }
}
.kap-stage-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--olive-text);
}
.kap-stage-body h3 { color: var(--ink); margin-bottom: 1rem; }

/* "Who May Not Be a Good Candidate?" — clinical-safety callout, kept prominent */
.kap-callout {
  max-width: 60rem;
  margin: 0 auto;
  background: var(--cream);
  border: 1px solid rgba(144, 152, 120, 0.5);
  border-left: 4px solid var(--olive-deep);
  border-radius: 3px;
  padding: 1.9rem 1.6rem;
}
@media (min-width: 768px) { .kap-callout { padding: 2.6rem 2.8rem; } }
.kap-callout .kap-head { margin-bottom: 1.2rem; }
.kap-callout .kap-head h2 { font-size: 1.8rem; }
@media (min-width: 1024px) { .kap-callout .kap-head h2 { font-size: 2.1rem; } }

/* FAQ — clean question/answer stack, not card-chopped */
.kap-faq { margin-top: 2rem; max-width: 60rem; margin-left: auto; margin-right: auto; }
.kap-faq-item {
  padding: 1.8rem 0;
  border-top: 1px solid rgba(144, 152, 120, 0.45);
}
.kap-faq-item:last-child { border-bottom: 1px solid rgba(144, 152, 120, 0.45); }
.kap-faq-q {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.7rem;
}
@media (min-width: 640px) { .kap-faq-q { font-size: 1.45rem; } }
.kap-faq-a { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.75; max-width: 64ch; margin: 0; }
@media (min-width: 640px) { .kap-faq-a { font-size: 1.1rem; } }

/* "A Note About Healing" — centered, serif, emotional close */
.kap-note { text-align: center; }
.kap-note .eyebrow { display: block; margin-bottom: 0.7rem; }
.kap-note h2 { color: var(--ink); margin-bottom: 1.6rem; }
.kap-note-prose {
  max-width: 40rem;
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.55;
  color: var(--ink);
}
@media (min-width: 640px) { .kap-note-prose { font-size: 1.5rem; } }
.kap-note-prose p { margin: 0 0 1.1rem; }
.kap-note-prose p:last-child { margin-bottom: 0; color: var(--olive-text); }

/* "Ready to Learn More?" — dark closing CTA band */
.kap-cta { text-align: center; }
.kap-cta .eyebrow { display: block; margin-bottom: 0.7rem; color: var(--olive-light); }
.kap-cta h2 { color: var(--cream); margin-bottom: 1.4rem; }
.kap-cta .kap-prose { color: rgba(239, 233, 218, 0.85); max-width: 44rem; margin: 0 auto; }
.kap-cta .btn { margin-top: 1.9rem; background: var(--cream); color: var(--ink); }
.kap-cta .btn:hover { background: var(--olive-light); color: var(--ink); }

/* ============= REVEAL =============
   NOTE: only the CSS half of this lives here. The IntersectionObserver that
   adds `.in` is inline per-page (index.html and about/index.html carry it).
   Adding class="reveal" to a page WITHOUT that observer leaves the element at
   opacity: 0 forever, with no error and no console warning. Copy the observer
   with the class, or the content is silently invisible. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============= ABOUT (P100) =============
   Tina's own About copy, verbatim. The page is built as a long-read with a
   different COLUMN SHAPE per section rather than the flat band-after-band
   rhythm of the For Therapists / KAP pages, where ground colour was doing all
   the differentiating work. Grounds still alternate, but each section also
   changes measure, alignment or structure so the eye gets pacing across a
   long page. Nothing is card-chopped (P78) — panels are reading surfaces
   carrying full body copy, never button-like chips.

   Emphasis note: her <strong>/<em> runs come from the .docx and are hers.
   Em dashes in this page's prose are client-authored — never strip them. */

.ab-section { padding: 5rem 0; }
@media (min-width: 768px)  { .ab-section { padding: 6.5rem 0; } }
@media (min-width: 1024px) { .ab-section { padding: 7.5rem 0; } }
.ab-section--cream  { background: var(--cream); }
.ab-section--cream2 { background: var(--cream-band); }
.ab-section--olive  { background: rgba(144, 152, 120, 0.16); }
.ab-section--ink    { background: var(--ink); color: var(--on-ink); }

/* shared prose */
.ab-prose { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.78; }
@media (min-width: 640px) { .ab-prose { font-size: 1.12rem; } }
.ab-prose p { margin: 0 0 1.2rem; max-width: 64ch; }
.ab-prose p:last-child { margin-bottom: 0; }
.ab-prose strong { font-weight: 600; color: var(--ink); }

/* Italic runs in Lora/Outfit overhang to the right far enough that the space
   after a closing curly quote visually disappears ("you?”I begin"). The text
   node is correct; this is purely optical compensation at the italic-to-roman
   boundary. Both of Tina's italic runs are followed by a space, never by
   punctuation, so a trailing margin is safe here. */
.ab-prose em,
.ab-panel em,
.ab-house-prose em { font-style: italic; margin-right: 0.11em; }

.ab-head { margin-bottom: 2rem; }
.ab-head h2 { color: var(--ink); max-width: 26ch; }

/* ---------- 1. Opening: asymmetric portrait + intro ---------- */
.ab-open { background: var(--cream); padding: 3.5rem 0 4.5rem; }
@media (min-width: 768px) { .ab-open { padding: 5rem 0 6rem; } }
.ab-open-grid { display: grid; grid-template-columns: 1fr; gap: 2.75rem; }
@media (min-width: 900px) {
  .ab-open-grid { grid-template-columns: minmax(16rem, 21rem) 1fr; gap: 4rem; align-items: start; }
}
/* The figure carried no rule of its own, so the UA default (figure { margin:
   1em 40px }) sized it: 224px at >=900px but ~592px between 768-899px. Cap it
   at the width the desktop grid already produces, so the portrait is one size
   everywhere it fits. (P110) P120 removed the mat, so the slot is now the full
   16rem = 256 CSS px (was 224) and the ladder tops out at 256 x 3. */
.ab-portrait-fig { max-width: 16rem; }
/* Unframed since P120 — Tina found the mat + hairline constricting. The photo
   meets the cream ground directly; the room/KAP/hero plates keep the hairline,
   which is a band treatment rather than a portrait one. */
.room-band-img::after,
.kap-figure-img::after,
.hero-inset-img::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(144, 152, 120, 0.75);
  pointer-events: none;
}
/* P180: the photo sets its own shape. The About portrait is the whole frame at its
   native ratio (the B&W studio portrait is 3500:4659, not 3:4), and the img's
   width/height attributes reserve that box before it loads. The old forced 3:4 +
   object-fit is gone; any future portrait here keeps its own ratio the same way. */
.ab-portrait img { width: 100%; height: auto; }
.ab-portrait-cap,
.room-band-cap,
.kap-figure-cap {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.ab-open h1 { color: var(--ink); margin-bottom: 0.9rem; }
.ab-open-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--olive-text);
  margin: 0 0 1.9rem;
}
@media (min-width: 640px) { .ab-open-sub { font-size: 1.6rem; } }
.ab-open-intro p:first-child { font-size: 1.18rem; color: var(--ink); }
@media (min-width: 640px) { .ab-open-intro p:first-child { font-size: 1.26rem; } }

/* ---------- 2. My Journey ----------
   P120 removed the continuous olive thread and its two year nodes (2010, 2020)
   at Tina's request. Her prose is unchanged and now reads as plain paragraphs
   on .ab-prose; both years are stated in her own sentences, so the markers were
   chrome restating the copy. Only the measure survives. ---------- */
.ab-journey-wrap { max-width: 58rem; }

/* ---------- 3. The Model: three panels (her explicit instruction) ---------- */
.ab-model-intro { max-width: 60rem; margin-bottom: 3rem; }
.ab-model-intro p { font-size: 1.12rem; color: var(--ink); max-width: 58ch; }
@media (min-width: 640px) { .ab-model-intro p { font-size: 1.18rem; } }
.ab-panels { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 1024px) {
  .ab-panels { grid-template-columns: repeat(3, 1fr); }
}
.ab-panel { padding-top: 1.4rem; border-top: 2px solid var(--olive); }
.ab-panel h3 { color: var(--ink); margin-bottom: 1rem; font-size: 1.4rem; }
@media (min-width: 1024px) { .ab-panel h3 { font-size: 1.5rem; } }
.ab-panel p { color: var(--ink-soft); font-size: 1.01rem; line-height: 1.72; margin: 0 0 1rem; max-width: 60ch; }
.ab-panel p:last-child { margin-bottom: 0; }
/* her bolded clinical question, the strongest line in the section.
   Selector is qualified with the parent so it outranks `.ab-panel p`
   on plain cascade — no !important needed. */
.ab-panel p.ab-panel-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.4;
  color: var(--olive-text);
}
.ab-panel-q strong { font-weight: 500; color: var(--olive-text); }

/* ---------- 4. Beyond Talk Therapy ---------- */
.ab-expect { max-width: 62rem; }
.ab-expect-marker {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive-text);
  padding-bottom: 1.1rem;
  margin-bottom: 1.9rem;
  border-bottom: 1px solid rgba(122, 130, 101, 0.4);
}
.ab-expect h2 { color: var(--ink); margin-bottom: 1.2rem; }
.ab-expect-hook {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--olive-text);
  margin: 0 0 2rem;
  max-width: 34ch;
}
@media (min-width: 640px) { .ab-expect-hook { font-size: 1.7rem; } }
/* the "they know why / they understand / they can trace" triad — set apart
   because it is a rhetorical list she wrote as one sentence run */
.ab-prose p.ab-triad {
  margin: 1.6rem 0;
  padding-left: 1.3rem;
  border-left: 2px solid rgba(122, 130, 101, 0.5);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 54ch;
}

/* ---------- 5. THE HOUSE OF HEALING — the page's signature ----------
   The only ink-ground section on the page: the moment the reader steps
   inside the house her metaphor describes. The threshold outline is drawn
   in hairlines and is deliberately OPEN AT THE BOTTOM — it is a doorway
   you walk through, not a box you are shut into. That openness is the
   whole point of her metaphor, so it is the one place this page spends
   its boldness. Everything else here stays quiet. */
.ab-house { max-width: 54rem; margin: 0 auto; }
.ab-threshold {
  position: relative;
  /* Sized to a doorway, not a banner: just wide enough to hold the heading on
     one line at desktop, and centred so the reader passes through it. */
  max-width: 36rem;
  margin: 0 auto 2.9rem;
  padding: 2.6rem 1.4rem 0;
  text-align: center;
}
@media (min-width: 768px) { .ab-threshold { padding: 3.4rem 2rem 0; } }
.ab-threshold::before {
  content: "";
  position: absolute;
  inset: 0 0 -1.5rem 0;
  border: 1px solid rgba(179, 188, 151, 0.34);
  border-bottom: none;
  pointer-events: none;
}
.ab-threshold .eyebrow { display: block; margin-bottom: 0.8rem; color: var(--olive-light); }
.ab-threshold h2 { color: var(--cream); }
.ab-house-prose { color: rgba(239, 233, 218, 0.82); font-size: 1.08rem; line-height: 1.8; }
@media (min-width: 640px) { .ab-house-prose { font-size: 1.14rem; } }
.ab-house-prose p { margin: 0 0 1.3rem; max-width: 62ch; }
.ab-house-prose strong { font-weight: 600; color: var(--cream); }
/* P133 — her mention of the framework links to its section on Clinical Corner.
   Links carry no underline site-wide, and on the ink ground colour alone cannot
   mark one, so this one is underlined in olive-light. */
.ab-house-prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(179, 188, 151, 0.7);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.3s var(--ease);
}
.ab-house-prose a:hover { text-decoration-color: var(--olive-light); }
/* her closing couplet — the emotional payoff of the whole page */
.ab-house-prose p.ab-house-payoff {
  margin: 2.4rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(179, 188, 151, 0.28);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--olive-light);
  max-width: 46ch;
}
@media (min-width: 640px) { .ab-house-prose p.ab-house-payoff { font-size: 1.5rem; } }
.ab-house-payoff strong { font-weight: 500; color: var(--olive-light); }
/* P106 — the House-of-Healing CTA and its modifier were removed with the
   markup. Tina is writing the paper; rebuild the link off .btn-quiet when she
   publishes it. */

/* ---------- 6. Therapist · Educator · Supervisor ---------- */
.ab-teach { max-width: 62rem; }
.ab-teach h2 { color: var(--ink); margin-bottom: 1.8rem; }
/* P106 — the question Tina supplied, and the last line of the page's last
   substantive section. Her copy ends the paragraph above on a colon, so the
   setup already lives in the writing: this needs scale and a pause, not a rule
   or a label layered on top of a turn the sentence has already made. Serif
   italic in olive-deep is the page's established voice for her own questions
   (cf. .ab-panel-q), sized up because this one closes the section instead of
   sitting inside a third-width panel. Sibling of .ab-prose, so it keeps its
   own measure rather than inheriting the body one. */
.ab-teach-q {
  margin: 2.2rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--olive-text);
  /* wide enough to hold on one line from 1024px up; balance keeps the narrower
     widths from orphaning "heal?" on a line of its own. */
  max-width: 34ch;
  text-wrap: balance;
}
@media (min-width: 640px)  { .ab-teach-q { margin-top: 2.6rem; font-size: 1.9rem; } }
@media (min-width: 1024px) { .ab-teach-q { font-size: 2.15rem; } }

/* ---------- 7. Ready to Begin? ---------- */
.ab-begin { max-width: 44rem; margin: 0 auto; text-align: center; }
.ab-begin h2 { color: var(--ink); margin-bottom: 1.4rem; }
.ab-begin .ab-prose p { max-width: none; }
.ab-begin .ab-prose a {
  color: var(--olive-text);
  border-bottom: 1px solid rgba(122, 130, 101, 0.5);
  transition: border-color 0.3s var(--ease);
}
.ab-begin .ab-prose a:hover { border-color: var(--olive-deep); }
.ab-begin .btn { margin-top: 2rem; }

/* ============================================================
   PHOTOGRAPHY (P110) — Tina's own shoot, 2026-09-03
   Two documentary images: the room on /for-clients/ and the session
   setup on the KAP page. Both borrow the portraits' offset olive
   hairline and caption (grouped into those rules above rather than
   restated here) but take no cream mat: the mat is the site's
   portrait gesture, and against --cream-band it would read as a
   near-miss rather than a frame.
   ============================================================ */

/* Room band — opens the services list with the room those services
   happen in. Full shell width; the hairline needs 9px of clearance,
   which the 1.25rem minimum gutter covers. */
.room-band { margin: 0 0 3.5rem; }
/* P134 retired the slim .room-band--sm variant (40rem cap, P114). Its only user
   was /resources/, which now runs full width like every other band. */
/* Band sitting directly under a page hero rather than above a card list. */
.room-band--top { margin: 0 0 2.75rem; }
/* P177: on /for-therapists/ the photo is now alone in its band (the group card left
   for Current Offerings), so it ends the band: no margin under the caption. */
.svc-page--lead .room-band--top { margin-bottom: 0; }
/* Wayfinding inset (P114) — the building exterior beside the office address.
   Deliberately small: /for-clients/ already carries the full-width room band,
   and two competing plates would read as a gallery. */
/* Hero split (P118) — text and the waiting-room photo share the hero row.
   Stacked below 900px; two columns above, bottom-aligned so the meta line and
   the caption settle on one baseline. */
.hero-split { display: grid; grid-template-columns: 1fr; }
.hero-inset { margin: 1.8rem 0 0; }   /* full shell width when stacked */
@media (min-width: 900px) {
  /* 5/7, photo the wider column: "For Clients" and a three-line lede do not
     need 7fr, and the photo is the element carrying the page's welcome.
     Top-aligned — bottom-aligning left a conspicuous void above the heading,
     since the text block is shorter than the photo. */
  .hero-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
  .hero-inset { max-width: none; margin: 0; }
}
.hero-inset-img { position: relative; }
.hero-inset-img img { display: block; width: 100%; height: auto; }
.hero-inset-cap {
  margin-top: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.room-band-img { position: relative; }
.room-band-img img { display: block; width: 100%; height: auto; }
/* P151 — the portrait books plate ran 1056 x 1262 at full content width, taller
   than the viewport. From 1024 up it is held to 40rem (640 x 765) and centred;
   below 1024 it stays full content width, where it is already the column. */
@media (min-width: 1024px) { .room-band--capped { max-width: 40rem; margin-left: auto; margin-right: auto; } }

/* Session setup — a tall flat-lay, so it is held to a narrow measure
   and centred rather than run full width. */
/* Landscape from P113 (the flat-lay was rotated 90deg CCW so it reads left to
   right: candle, pointer, masks). A landscape plate wants the prose measure,
   not a narrow centred column, so it aligns to the text's left edge instead of
   floating in the middle of a 60rem block. */
.kap-figure { max-width: 36rem; margin: 2.8rem 0 0; }
.kap-figure-img { position: relative; }
.kap-figure-img img { display: block; width: 100%; height: auto; }
.kap-figure-cap { line-height: 1.55; }