/* ============================================================
   Modern Therapy Group — Responsive site
   Breakpoints (mobile-first):
     base   : <= 599px   (mobile)
     sm     : >= 600px   (large mobile)
     md     : >= 768px   (tablet)
     lg     : >= 1024px  (small desktop)
     xl     : >= 1280px  (desktop, matches design)
   ============================================================ */

:root {
  --cream:    #F5EEDF;
  --cream-2:  #EBE2CE;
  --sand:     #D9CBAE;
  --sand-2:   #C8B791;
  --ink:      #1B1714;
  --ink-2:    #4A3F36;
  --ink-3:    #786757;
  --butter:   #F4D26A;
  --butter-2: #FAE9B3;
  --dusk:     #B6C5DC;
  --dusk-2:   #DDE5F0;
  --moss:     #5A6A4E;
  --moss-2:   #8FA084;

  --font-serif: "Newsreader","Times New Roman",serif;
  --font-sans:  "Geist", system-ui, sans-serif;
  /* Client request (July 2026): label/eyebrow text uses the body face in caps,
     not a monospace face. Variable keeps its name so the ~20 usages don't churn. */
  --font-mono:  "Geist", system-ui, sans-serif;

  /* ---- Canonical typography tokens ----
     One source of truth for the four tiers so every page template matches.
     Long-form prose (article bodies) and in-article headings reference these
     and never redeclare their own sizes. */
  --fs-micro:      11px;                        /* eyebrows, tags, caps labels */
  --fs-body-prose: clamp(17px, 1.6vw, 19px);    /* article body copy */
  --lh-prose:      1.7;                         /* article body line-height */
  --fs-article-h2: clamp(26px, 4vw, 34px);      /* in-article H2 */
  --fs-article-h3: clamp(20px, 2.6vw, 26px);    /* in-article H3 */

  /* fluid spacing */
  --wrap-px: clamp(20px, 5vw, 56px);
  --section-py: clamp(48px, 8vw, 112px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body { font-size: 16px; line-height: 1.5; overflow-x: hidden; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

.wrap, .wrap-tight {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--wrap-px);
}
.wrap { max-width: 1360px; }
.wrap-tight { max-width: 1200px; }

/* ---------- Type scale (fluid) ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  margin-right: 10px;
  transform: translateY(-2px);
}

.serif { font-family: var(--font-serif); font-weight: 400; }
.serif em { font-style: italic; font-weight: 400; }

/* Headings are italic serif site-wide; the emphasized <em> word flips to
   upright roman so it still stands out against the italic heading. */
.h-mega {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  /* Interior-page heroes sit BELOW the homepage hero's 73px cap (Maya,
     July 24: the old 128px cap dwarfed the homepage). The homepage keeps
     its own .hero-left .h-mega spec. */
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.h-mega em { font-style: normal; font-weight: 300; }

.h-1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 6.5vw, 84px);
  line-height: 1;
  letter-spacing: -.028em;
}
.h-1 em { font-style: normal; font-weight: 400; }

.h-2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.h-2 em { font-style: normal; font-weight: 400; }

.h-3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -.018em;
}
.h-3 em { font-style: normal; }

.h-4 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.1;
  letter-spacing: -.012em;
}
.h-4 em { font-style: normal; }

/* In-article prose headings (blog, service, group, profile, etc.) share the
   same italic-serif treatment; their <em> flips upright to stay distinct. */
.article-body h2, .article-body h3,
.profile-body h2, .profile-body h3,
.group-body h2, .group-body h3 { font-style: italic; }
.article-body h2 em, .article-body h3 em,
.profile-body h2 em, .profile-body h3 em,
.group-body h2 em, .group-body h3 em { font-style: normal; }

/* Card & sub-headings also adopt the italic-serif convention; their emphasized
   <em> word flips upright to stay distinct. */
.cond .cond-h,
.step h3,
.therap h4,
.therap-mini-body h3,
.location-page .state-therapist-info h3,
.afford-rows .row .plan,
.group-name,
.profile-video h2 { font-style: italic; }

.body-lg { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); letter-spacing: -.005em; }
.body    { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.body-sm { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.micro {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Marker highlight signature */
.mark {
  background: linear-gradient(180deg, transparent 56%, var(--butter) 56%, var(--butter) 92%, transparent 92%);
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark-blue { background: linear-gradient(180deg, transparent 56%, var(--dusk) 56%, var(--dusk) 92%, transparent 92%); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mark-sand { background: linear-gradient(180deg, transparent 56%, var(--sand) 56%, var(--sand) 92%, transparent 92%); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--cream);
  padding: 16px 24px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  border: 0;
  transition: transform .2s ease, background .2s ease;
  white-space: nowrap;
}
.pill, .pill em { font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 16px; margin-right: 0; }
.pill:hover { transform: translateY(-1px); }
.pill-light { background: var(--cream); color: var(--ink); border: 1px solid var(--ink); }
.pill-butter { background: var(--butter); color: var(--ink); }
/* Dark-green primary CTA, offered for the July 24 "Get started color" review.
   Swap back to the default (black) by dropping the class. */
.pill-moss { background: var(--moss); color: var(--cream); }
.pill-moss:hover { background: color-mix(in oklab, var(--moss) 88%, var(--ink)); }
.pill-sm { padding: 12px 20px; font-size: 15px; }
.pill-lg { padding: 20px 30px; font-size: 16px; }
.pill-ghost { background: transparent; color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent); }
.arrow { display: inline-block; transition: transform .2s ease; }
.pill:hover .arrow { transform: translate(3px, 0); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--wrap-px);
  max-width: 1440px;
  margin: 0 auto;
  gap: 16px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.site-logo { height: 31px; width: auto; display: block; }
.foot-brand .site-logo { height: 32px; }

.nav-menu {
  display: none;
  gap: 28px;
  font-size: 14px;
  color: var(--ink-2);
  align-items: center;
}
.nav-menu a { transition: color .2s; }
.nav-menu a:hover { color: var(--ink); }

/* Nav dropdowns (Services / Therapists). Open on hover + keyboard focus via
   CSS; script.js also toggles aria-expanded on click for touch devices. */
.nav-dd { position: relative; }
.nav-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color .2s;
}
.nav-dd-btn:hover, .nav-dd:hover .nav-dd-btn, .nav-dd:focus-within .nav-dd-btn { color: var(--ink); }
.nav-dd-caret { transition: transform .2s ease; }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret, .nav-dd-btn[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: var(--cream);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius: 14px;
  box-shadow: 0 12px 32px color-mix(in oklab, var(--ink) 12%, transparent);
  padding: 8px;
  display: none;
  flex-direction: column;
  z-index: 60;
}
/* Invisible hover bridge so the pointer can travel from button to menu. */
.nav-dd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd-btn[aria-expanded="true"] + .nav-dd-menu { display: flex; }
.nav-dd-menu a {
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav-dd-menu a:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink); }

/* Mega variant for long lists (Services mirrors the old site's full menu).
   Grid columns instead of one tall column; display:grid must win over the
   display:flex the open-state selectors set, hence the open-state repeats. */
.nav-dd-menu.nav-dd-mega { min-width: min(880px, calc(100vw - 48px)); padding: 14px; }
.nav-dd:hover .nav-dd-mega,
.nav-dd:focus-within .nav-dd-mega,
.nav-dd-btn[aria-expanded="true"] + .nav-dd-mega {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8px;
}
.nav-dd-mega a { white-space: normal; line-height: 1.3; }

/* Mobile panel groups */
.nav-mobile-group { display: flex; flex-direction: column; }
.nav-mobile-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 12px 0 4px;
}
.nav-mobile-group a { padding-left: 12px; }
.nav-right { display: flex; gap: 10px; align-items: center; }
.nav-right .login { display: none; font-size: 14px; color: var(--ink-2); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  align-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav[data-open="true"] .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav[data-open="true"] .nav-toggle span:nth-child(2) { opacity: 0; }
.nav[data-open="true"] .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile-panel {
  display: none;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  padding: 24px var(--wrap-px) 32px;
  z-index: 49;
  flex-direction: column;
  gap: 18px;
}
.nav[data-open="true"] .nav-mobile-panel { display: flex; }
.nav-mobile-panel a {
  font-size: 18px;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.nav-mobile-panel .pill { align-self: flex-start; margin-top: 8px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 36px 0 0;
  background-image: url('img/hero-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 50%, color-mix(in oklab, var(--cream) 70%, transparent) 64%, color-mix(in oklab, var(--cream) 92%, transparent) 78%, var(--cream) 92%),
    linear-gradient(90deg, var(--cream) 0%, color-mix(in oklab, var(--cream) 92%, transparent) 32%, color-mix(in oklab, var(--cream) 55%, transparent) 55%, transparent 78%);
  pointer-events: none;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-left { position: relative; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
@keyframes pulse {
  0%   { transform: scale(.9); opacity: .6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.hero h1 { margin: 0 0 24px; text-wrap: balance; }
.hero-sub {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 520px;
  margin-bottom: 32px;
}

.lead-capture {
  background: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-width: 560px;
  box-shadow: 0 1px 0 rgba(27, 23, 20, .06);
}
.lead-capture .select-wrap { flex: 1; position: relative; }
.lead-capture select,
.lead-capture input {
  font: inherit;
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 16px 36px 16px 14px;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.lead-capture .select-wrap::after {
  content: "↓";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-2);
  font-size: 12px;
}
.lead-capture .pill {
  padding: 14px 22px;
  font-size: 15px;
  justify-content: center;
}

.hero-trust {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-trust .micro { font-size: 14px; letter-spacing: .12em; }
.hero-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-2); }

.hero-right { position: relative; min-height: 320px; }
.hero-right .badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(245, 238, 223, .95);
  backdrop-filter: blur(6px);
  padding: 14px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 280px;
  z-index: 3;
}
.hero-right .badge-img {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-right .badge-text { font-size: 12px; line-height: 1.35; color: var(--ink); }
.hero-right .badge-text strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

/* Bleed wordmark — SVG marquee */
.brand-marquee {
  display: block;
  width: 100%;
  background: var(--cream-2);
  overflow: hidden;
  line-height: 0;
  position: relative;
  z-index: 1;
}
.brand-marquee text {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -.04em;
  fill: var(--butter);
}
.hero > .brand-marquee { margin-top: 0; }

.hero-stats {
  position: relative;
  z-index: 3;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 28px 0;
}
.hero-stats .stat { display: flex; flex-direction: column; gap: 6px; }
.hero-stats .stat-n {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-stats .stat-n em { font-style: italic; }
.hero-stats .stat-l { font-size: 12px; color: var(--ink-2); max-width: 220px; line-height: 1.4; }

/* ---------- Trust strip ---------- */
.trust { padding: 36px 0; background: var(--cream-2); }
.trust-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.trust-label {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: -.01em;
  line-height: 1.15;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.trust-label em { font-style: italic; }
.trust-logos {
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  flex-wrap: wrap;
  opacity: .72;
}
.trust-logos div {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ---------- Sections shared ---------- */
section.page {
  padding: var(--section-py) 0;
  position: relative;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head h2 { text-align: left; max-width: none; text-wrap: balance; }
.section-head .meta .micro { margin-bottom: 14px; display: block; font-size: 14px; letter-spacing: .12em; }
/* Section eyebrow labels are uniform: 14px, .12em tracking (overrides the 11px
   --fs-micro base that other small labels keep). */
.micro.eyebrow-row { font-size: 14px; letter-spacing: .12em; }
.section-head .meta p { font-size: clamp(15px, 1.6vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 480px; }
/* Conditions head stacks full-width: eyebrow, serif headline, then body lead. */
.section-head.cond-head { grid-template-columns: 1fr; text-align: center; }
.section-head.cond-head .meta { max-width: 860px; margin-inline: auto; }
.section-head.cond-head h2 { text-align: center; }
.section-head.cond-head .meta h2 { margin-top: 6px; }
.section-head.cond-head .meta p { margin: 20px auto 0; max-width: 620px; }

/* ---------- Conditions grid ---------- */
.cond-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cond {
  background: var(--cream-2);
  border-radius: 18px;
  padding: 28px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  transition: transform .3s ease, background .3s ease;
}
.cond:hover { transform: translateY(-3px); }
.cond .cond-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cond .cond-h {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.05;
  letter-spacing: -.012em;
}
.cond .cond-h em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 56%, var(--butter) 56%, var(--butter) 92%, transparent 92%);
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cond .cond-s { font-family: var(--font-sans); font-style: normal; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.cond .cond-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  align-self: flex-start;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.cond.feat-butter { background: var(--butter-2); }
.cond.feat-dusk   { background: var(--dusk-2); }
.cond.feat-sand   { background: var(--cream-2); }
.cond.feat-ink    { background: var(--ink); color: var(--cream); }
.cond.feat-ink .cond-cat, .cond.feat-ink .cond-s { color: color-mix(in oklab, var(--cream) 88%, var(--ink)); }
.cond.feat-ink .cond-cta { color: var(--cream); border-color: var(--butter); }
.cond.feat-moss   { background: var(--moss); color: var(--cream); }
.cond.feat-moss .cond-cat, .cond.feat-moss .cond-s { color: var(--cream); }
.cond.feat-moss .cond-cta { color: var(--cream); border-color: var(--butter); }
.cond.feat-moss .sym-tile {
  background: color-mix(in oklab, var(--cream) 14%, transparent);
  border-color: color-mix(in oklab, var(--cream) 22%, transparent);
  color: var(--butter);
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; position: relative; }
.step {
  background: var(--cream-2);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
}
.step-num {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(56px, 7vw, 80px);
  line-height: .85;
  color: var(--moss);
  letter-spacing: -.02em;
}
.step h3 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.05;
}
.step h3 em { font-style: normal; }
.step p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin-top: auto; }
.step-art {
  padding: 8px 0 4px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  color: var(--ink);
}
.step-art .sym { color: var(--ink); }

/* ---------- Therapists ---------- */
.therapy-bg { background: var(--moss); color: var(--cream); }
.therapy-bg .h-1,
.therapy-bg .h-2,
.therapy-bg .micro,
.therapy-bg .body-lg,
.therapy-bg .body { color: var(--cream); }
.therapy-bg .section-head .meta p,
.therapy-bg .body-lg { color: color-mix(in oklab, var(--cream) 94%, var(--moss)); }
.therapy-bg .micro { color: color-mix(in oklab, var(--cream) 92%, var(--moss)); }
.therapy-bg .pill-light { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.therapists { display: grid; grid-template-columns: 1fr; gap: 16px; }
.therap {
  background: color-mix(in oklab, var(--cream) 4%, var(--moss));
  border: 1px solid color-mix(in oklab, var(--cream) 22%, transparent);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--cream);
}
.therap-photo {
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--moss-2);
  overflow: hidden;
  display: flex;
  align-items: end;
  padding: 14px;
  position: relative;
}
.therap-photo img.therap-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.therap-tag {
  position: relative;
  z-index: 2;
  background: var(--butter);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.therap h4 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--cream);
}
.therap h4 em { font-style: normal; }
.therap .quote-line {
  color: color-mix(in oklab, var(--cream) 80%, transparent);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.4;
}
.therap .specs { display: flex; flex-wrap: wrap; gap: 6px; }
.therap .specs span {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--cream) 40%, var(--moss));
  color: var(--cream);
}
.therap .meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid color-mix(in oklab, var(--cream) 25%, var(--moss));
  padding-top: 14px;
  margin-top: auto;
  font-size: 13px;
  color: var(--cream);
  gap: 8px;
  flex-wrap: wrap;
}
.therap .meta-row .next {
  color: var(--butter);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
}
.therap-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(32px, 5vw, 56px);
  gap: 24px;
  flex-wrap: wrap;
}
.therap-foot .pitch {
  color: var(--cream);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 26px);
}

/* ---------- Affordability ---------- */
.afford { background: var(--butter); }
.afford-inner {
  display: block;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--section-py) 0;
  text-align: center;
}
.afford-inner > div:first-child { display: flex; flex-direction: column; align-items: center; }
.afford-inner .lead-capture { margin-left: auto; margin-right: auto; }
.afford .h-1 { margin-bottom: 18px; }

.afford-rows { margin-top: 40px; display: grid; gap: 12px; text-align: left; width: 100%; }
.afford-rows .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.afford-rows .row:first-child { border-top: 0; padding-top: 0; }
.afford-rows .row .plan { font-family: var(--font-serif); font-size: 20px; }
.afford-rows .row .cost {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 30px);
}
.afford-rows .row .cost em { font-style: italic; }
.afford-rows .row .desc { font-size: 15px; color: var(--ink-2); line-height: 1.45; }

/* ---------- Closing CTA ---------- */
.close {
  /* Top padding kept tight so the emblem sits up on the solid-cream top of the
     gradient (icon on full beige, headline flows down onto the image below).
     Bottom padding lifts the coverage CTA + trustline off the dark footer. */
  padding: clamp(24px, 4vw, 56px) 0 clamp(44px, 6vw, 88px);
  /* Overlap the section above by 1px to hide the subpixel seam (both edges are
     the same cream, so the overlap is invisible). */
  margin-top: -1px;
  position: relative;
  overflow: hidden;
  background-image: url('img/close-bg.webp');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 30%, color-mix(in oklab, var(--cream) 85%, transparent) 50%, color-mix(in oklab, var(--cream) 55%, transparent) 70%, transparent 92%);
  pointer-events: none;
  z-index: 0;
}
.close .wrap-tight { position: relative; z-index: 2; }
.close h2 {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 1100px;
}
.close .lead-capture { margin: 0 auto; }
.close .micro { display: block; text-align: center; margin-top: 14px; color: var(--cream); }
.close > .brand-marquee {
  background: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  position: relative;
  z-index: 2;
  margin-top: clamp(60px, 10vw, 120px);
}

/* ---------- Footer ---------- */
footer { background: var(--ink); color: var(--cream); padding: clamp(56px, 8vw, 96px) 0 40px; }
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
  align-items: start;
}
.foot-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 55%, transparent);
  margin-top: 4px;
}
.foot-tagline {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--cream);
  margin-top: 4px;
  max-width: 360px;
}
.foot-tagline em { font-style: italic; }
.foot-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; align-items: flex-start; }
.foot-ctas .pill { padding: 12px 20px; font-size: 15px; }
.foot-ctas .pill-ghost-dark {
  background: transparent;
  color: var(--cream);
  border: 1px solid color-mix(in oklab, var(--cream) 30%, transparent);
}
.foot-loc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 14px;
  color: color-mix(in oklab, var(--cream) 85%, transparent);
  line-height: 1.45;
}
.foot-loc-name {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.25;
  color: var(--cream);
  margin-bottom: 4px;
}
.foot-loc-row { display: flex; gap: 10px; align-items: flex-start; }
.foot-loc-ic { color: var(--butter); font-size: 13px; line-height: 1.45; flex-shrink: 0; width: 14px; }
.foot-social { display: flex; gap: 12px; margin-top: 4px; }
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--cream) 30%, transparent);
  color: var(--cream);
  transition: color .2s, border-color .2s;
}
.foot-social a:hover { color: var(--butter); border-color: var(--butter); }
.foot-social svg {
  width: 17px;
  height: 17px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foot-col-head {
  font-family: var(--font-mono);
  /* July 24 review: column heads read slightly larger, lighter, and bold. */
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 74%, transparent);
  margin-bottom: 22px;
  font-weight: 600;
}
.foot-grid h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 60%, transparent);
  margin-bottom: 22px;
  font-weight: 400;
}
.foot-grid ul { list-style: none; display: grid; gap: 10px; }
.foot-grid a {
  font-size: 14px;
  color: color-mix(in oklab, var(--cream) 85%, transparent);
  transition: color .2s;
}
.foot-grid a:hover { color: var(--butter); }
/* GMB listing links keep the serif location-name look instead of the 14px
   link style .foot-grid a would give them. */
.foot-grid .foot-loc-name a { font-size: inherit; font-family: inherit; color: inherit; }
.foot-grid .foot-loc-name a:hover { color: var(--butter); }
.foot-brand { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
.foot-brand p {
  font-size: 14px;
  color: color-mix(in oklab, var(--cream) 75%, transparent);
  line-height: 1.5;
  font-family: var(--font-serif);
  font-style: italic;
}
.foot-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--cream) 18%, transparent);
  font-size: 12px;
  color: color-mix(in oklab, var(--cream) 65%, transparent);
}
.foot-bottom .links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Wellness symbols ---------- */
.sym { display: inline-flex; align-items: center; justify-content: center; color: currentColor; flex-shrink: 0; width: 20px; height: 20px; }
.eyebrow-row .sym { width: 24px; height: 24px; }
.sym svg {
  width: 100%; height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sym svg * { vector-effect: non-scaling-stroke; }
.sym-12 { width: 12px; height: 12px; } .sym-12 svg { stroke-width: 1.6; }
.sym-16 { width: 16px; height: 16px; } .sym-16 svg { stroke-width: 1.5; }
.sym-20 { width: 20px; height: 20px; }
.sym-24 { width: 24px; height: 24px; }
.sym-32 { width: 32px; height: 32px; }
.sym-48 { width: 48px; height: 48px; stroke-width: 1.2; }
.sym-72 { width: 72px; height: 72px; } .sym-72 svg { stroke-width: 1.2; }
.sym-96 { width: 96px; height: 96px; } .sym-96 svg { stroke-width: 1; }

.eyebrow-row { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow-row .sym { color: var(--ink-2); }

.sym-tile {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  flex-shrink: 0;
}
.sym-tile .sym { width: 24px; height: 24px; }
.cond.feat-ink .sym-tile,
.cond.feat-moss .sym-tile {
  background: color-mix(in oklab, var(--cream) 14%, transparent);
  border-color: color-mix(in oklab, var(--cream) 22%, transparent);
  color: var(--butter);
}
.cond.feat-butter .sym-tile,
.cond.feat-dusk .sym-tile { background: var(--cream); }

.emblem { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.emblem .sym-tile-lg {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--butter);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  position: relative;
}
.emblem .sym-tile-lg .sym { width: 46px; height: 46px; }
.emblem .sym-tile-lg::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  border-radius: 50%;
}
.emblem .emblem-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.section-head .meta .eyebrow-row { margin-bottom: 16px; display: inline-flex; align-items: center; gap: 14px; }
.section-head .meta .eyebrow-row .sym { width: 36px; height: 36px; }
.hero-eyebrow .eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.hero-eyebrow .eyebrow .sym { width: 36px; height: 36px; }

/* ============================================================
   Breakpoints
   ============================================================ */

/* sm: ≥600px — large mobile */
@media (min-width: 600px) {
  .lead-capture { flex-direction: row; align-items: center; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .therapists { grid-template-columns: repeat(2, 1fr); }
  .cond-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

/* md: ≥768px — tablet */
@media (min-width: 768px) {
  .nav-inner { padding: 16px var(--wrap-px); }
  .nav-right .login { display: inline; }
  .site-logo { height: 32px; }

  .hero { padding: 48px 0 0; }
  .hero-stats {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 64px;
    padding: 32px 0;
  }
  .hero-right { min-height: 460px; }

  .section-head {
    grid-template-columns: 1fr 1.5fr;
    gap: 32px;
  }

  .afford-rows .row {
    grid-template-columns: 140px 1fr 130px;
    gap: 28px;
    align-items: center;
  }
  .afford-rows .row .cost { text-align: right; }

  .foot-grid {
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: 36px;
  }
  .foot-bottom { flex-direction: row; align-items: center; }
}

/* lg: ≥1024px — small desktop */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-menu { display: flex; }
  .nav-mobile-panel { display: none !important; }

  .hero-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
  }
  .hero-right { min-height: 560px; }

  .cond-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .therapists { grid-template-columns: repeat(4, 1fr); }

  .foot-grid {
    grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr 1.4fr;
    gap: 48px;
  }
}

/* xl: ≥1280px — full desktop (matches original design) */
@media (min-width: 1280px) {
  .hero { padding: 64px 0 0; }
  .hero-grid { gap: 64px; }
  .hero-right { min-height: 640px; }
  .section-head { gap: 40px; }
}

/* ============================================================
   Accessibility — WCAG 2.1 AA
   ============================================================ */

/* Skip-to-content link — visible on focus only */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

/* Remove default outline only when we provide our own focus-visible style */
:focus { outline: none; }

/* Global keyboard focus indicator — high contrast butter ring */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Pills and buttons get a butter halo without losing their shape */
.pill:focus-visible,
.therap-arrow:focus-visible,
.view-profile-btn:focus-visible,
.quiz-option:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 3px;
}

/* Form fields — strong focus state on cream-2 background */
.lead-capture:focus-within {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
  border-radius: 14px;
}

/* main wrapper — invisible but keyboard-focusable target for the skip link */
main:focus { outline: none; }

/* Hide the SVG sprite from assistive tech (decorative defs only) */
svg[aria-hidden="true"] { pointer-events: none; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Pulse in hero — disable */
  /* Smooth carousel scroll — instant */
  .therap-carousel .therapists,
  .cond-carousel .cond-grid { scroll-behavior: auto; }
}

/* Ensure primary interactive elements meet 44x44 touch-target on mobile (WCAG 2.5.5 AAA / iOS HIG) */
@media (max-width: 599px) {
  .nav-toggle,
  .therap-arrow { min-width: 44px; min-height: 44px; }
}


/* Screen-reader-only utility — visible to assistive tech, hidden visually */
.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;
}

/* Carousel arrow + dot controls — hidden site-wide (touch-swipe handles navigation) */
.therap-controls { display: none !important; }

/* ============================================================
   Whole-card clickability — "stretched link" pattern.
   Make the entire therapist card a click target by having the
   <h3><a> link expand via ::after to fill the parent card.
   ============================================================ */
.therap { position: relative; }
.therap h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* Inner interactive elements need z-index > the overlay so clicks land on them.
   NOTE: .therap-photo img is intentionally NOT in this list — we want clicks
   on the photo to pass through to the stretched ::after link and navigate to the profile. */
.therap .therap-tag,
.therap .specs,
.therap .meta-row,
.therap .view-profile-btn,
.therap .quote-line {
  position: relative;
  z-index: 2;
}
/* Pointer cursor over the whole card so it reads as clickable everywhere */
.therap, .therap-dir { cursor: pointer; }
/* Subtle hover affordance on directory cards (the homepage carousel has its own hover lift) */
.therap-dir { transition: transform .2s ease, box-shadow .2s ease; }
.therap-dir:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 8%, transparent);
}
.therap-dir:focus-within {
  box-shadow: 0 0 0 3px var(--butter);
}

/* ============================================================
   Anchor-link scroll offset — accounts for sticky nav height
   so #how, #therapists, #pricing etc. don't get hidden behind the header.
   ============================================================ */
:where(section[id], [id^="how"], [id^="therapists"], [id^="conditions"], [id^="pricing"]) {
  scroll-margin-top: 80px;
}
@media (max-width: 767px) {
  :where(section[id], [id^="how"], [id^="therapists"], [id^="conditions"], [id^="pricing"]) {
    scroll-margin-top: 64px;
  }
}

/* ============================================================
   MOTION LAYER (pairs with /assets/motion.js)
   Everything is gated behind html.motion, which motion.js only
   adds when prefers-reduced-motion is NOT set. Static fallback
   is the unstyled page, exactly as before.
   ============================================================ */

/* Soft cross-fade between pages (Chromium; others ignore safely) */
@view-transition { navigation: auto; }

/* Hero entrance: eyebrow, headline, subhead, form, trust stagger up */
@keyframes mtg-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
html.motion .hero-left > * { animation: mtg-rise .75s cubic-bezier(.2,.7,.2,1) both; }
html.motion .hero-left > *:nth-child(1) { animation-delay: .05s; }
html.motion .hero-left > *:nth-child(2) { animation-delay: .16s; }
html.motion .hero-left > *:nth-child(3) { animation-delay: .28s; }
html.motion .hero-left > *:nth-child(4) { animation-delay: .40s; }
html.motion .hero-left > *:nth-child(5) { animation-delay: .52s; }
html.motion .hero-right { animation: mtg-rise .9s cubic-bezier(.2,.7,.2,1) .45s both; }
html.motion .hero-stats .stat { animation: mtg-rise .7s cubic-bezier(.2,.7,.2,1) both; }
html.motion .hero-stats .stat:nth-child(1) { animation-delay: .55s; }
html.motion .hero-stats .stat:nth-child(2) { animation-delay: .65s; }
html.motion .hero-stats .stat:nth-child(3) { animation-delay: .75s; }
html.motion .hero-stats .stat:nth-child(4) { animation-delay: .85s; }

/* Slow drift on the hero background, the "alive" feel */
@keyframes mtg-bg-drift {
  from { background-position: 50% 48%; }
  to   { background-position: 50% 56%; }
}
html.motion .hero { animation: mtg-bg-drift 22s ease-in-out infinite alternate; }

/* Scroll reveals (elements get .reveal + .in from motion.js) */
html.motion .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.motion .reveal.in { opacity: 1; transform: none; }

/* Marker-stroke draw on highlights */
html.motion .mark-anim {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .9s cubic-bezier(.6, 0, .2, 1) .25s;
}
html.motion .mark-anim.drawn { background-size: 100% 100%; }

/* Insurance trust-strip marquee */
html.motion .trust-logos.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
html.motion .marquee-track { display: flex; width: max-content; animation: mtg-marquee 36s linear infinite; }
html.motion .marquee-group { display: flex; align-items: center; gap: inherit; }
html.motion .marquee-group > div { padding-right: 48px; white-space: nowrap; }
@keyframes mtg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Card hover lift, slightly richer than the static defaults */
html.motion .t-card, html.motion .svc-card, html.motion .blog-card {
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
html.motion .t-card:hover, html.motion .svc-card:hover, html.motion .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(20, 18, 12, .10);
}

/* Availability badges (profile + directory) */
.avail-badge.avail-open { background: #e8f0e4; color: #3e6b3f; }
.avail-badge.avail-limited { background: #f6ecce; color: #8a6d1f; }
.therap-open { color: #2f5a30; font-weight: 600; }
.therap-ltd { color: #7a5e16; font-weight: 600; }

/* ============================================================
   CHAT WIDGET + EXIT INTENT (pairs with /assets/chat.js)
   ============================================================ */
.mtg-chat { position: fixed; right: 20px; bottom: 20px; z-index: 9000; font-size: 15px; }
.mtg-chat-bubble {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ink); color: var(--butter); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(20,18,12,.25); transition: transform .2s ease;
}
.mtg-chat-bubble:hover { transform: scale(1.06); }
.mtg-chat-bubble.is-open { display: none; }
.mtg-chat-panel {
  position: fixed; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 32px));
  background: var(--cream, #f4eee2); border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(20,18,12,.28); display: flex; flex-direction: column;
}
.mtg-chat-head { background: var(--ink); color: #fff; padding: 14px 44px 14px 16px; position: relative; }
.mtg-chat-head strong { display: block; font-size: 15px; }
.mtg-chat-head span { font-size: 12px; opacity: .85; }
.mtg-chat-head a { color: var(--butter, #eed27a); }
.mtg-chat-close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: none;
  background: transparent; color: #fff; font-size: 22px; cursor: pointer; line-height: 1;
}
.mtg-chat-body { padding: 14px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mtg-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.4; }
.mtg-msg-bot { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.mtg-msg-me { background: var(--butter, #eed27a); align-self: flex-end; border-bottom-right-radius: 4px; }
.mtg-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.mtg-opts button {
  border: 1.5px solid color-mix(in oklab, var(--ink) 22%, transparent); background: #fff;
  border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; transition: background .15s ease;
}
.mtg-opts button:hover { background: var(--butter-2, #f6ecce); }
.mtg-inrow { display: flex; flex-direction: column; gap: 8px; }
.mtg-inrow input { border: 1.5px solid color-mix(in oklab, var(--ink) 20%, transparent); border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.mtg-send { border: none; background: var(--ink); color: var(--butter, #eed27a); border-radius: 999px; padding: 10px 16px; cursor: pointer; font-size: 15px; }
.mtg-chat-note { font-size: 11px; color: var(--ink-2, #6b6453); padding: 0 14px 12px; line-height: 1.4; }
@media (max-width: 600px) { .mtg-chat-bubble { width: 52px; height: 52px; } }

/* Callback widget */
.callback-card { margin-top: 64px; padding: 48px 24px; background: var(--butter-2, #f6ecce); border-radius: 18px; }
.callback-form { display: flex; flex-wrap: wrap; gap: 10px; }
.callback-form input, .callback-form select {
  flex: 1 1 160px; border: 1.5px solid color-mix(in oklab, var(--ink) 20%, transparent);
  border-radius: 10px; padding: 12px 14px; font-size: 15px; background: #fff;
}
.callback-form button { flex: 0 0 auto; }

/* Quiz results email capture */
.quiz-capture { margin: 40px auto 0; max-width: 560px; background: var(--butter-2, #f6ecce); border-radius: 16px; padding: 24px; text-align: center; }
.quiz-capture-form { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.quiz-capture-form input { flex: 1 1 220px; border: 1.5px solid color-mix(in oklab, var(--ink) 20%, transparent); border-radius: 999px; padding: 12px 18px; font-size: 15px; }

/* Chat typed-question row */
.mtg-typed { position: relative; }
.mtg-typed-note { flex-basis: 100%; font-size: 10px; color: var(--ink-2, #6b6453); }

/* ============================================================
   A11Y WIDGET (pairs with /assets/a11y.js)
   ============================================================ */
.mtg-a11y { position: fixed; left: 20px; bottom: 20px; z-index: 9000; }
.mtg-a11y-btn {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(20,18,12,.25); transition: transform .2s ease;
}
.mtg-a11y-btn:hover { transform: scale(1.06); }
.mtg-a11y-panel {
  position: absolute; left: 0; bottom: 64px; width: 230px;
  background: #fff; border-radius: 14px; padding: 12px;
  box-shadow: 0 18px 48px rgba(20,18,12,.28); display: flex; flex-direction: column; gap: 4px;
}
.mtg-a11y-head { font-weight: 700; font-size: 14px; padding: 4px 8px 8px; }
.mtg-a11y-opt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: none; background: transparent; border-radius: 8px; padding: 9px 8px;
  font-size: 14px; cursor: pointer; color: #1c1a14;
}
.mtg-a11y-opt:hover { background: #f4eee2; }
.mtg-a11y-check {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 2px solid #99917d; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.mtg-a11y-opt[aria-pressed="true"] .mtg-a11y-check { background: #1c1a14; border-color: #1c1a14; }
.mtg-a11y-opt[aria-pressed="true"] .mtg-a11y-check::after { content: "✓"; }
.mtg-a11y-reset { border: none; background: transparent; color: #6b6453; font-size: 13px; cursor: pointer; padding: 8px; text-decoration: underline; }
.mtg-a11y-link { font-size: 12px; color: #6b6453; padding: 0 8px 4px; }

/* --- Preference effects (classes on <html>) --- */
/* The design is px/clamp based, so bumping root font-size does nothing.
   `zoom` scales everything including px and clamp values, and is supported
   in all current browsers (Firefox added it in 2024). Scoped to page regions
   so the floating a11y/chat widgets stay their normal, usable size. */
html.a11y-text-lg main,
html.a11y-text-lg nav,
html.a11y-text-lg header,
html.a11y-text-lg footer { zoom: 1.18; }
html.a11y-spacing body { letter-spacing: .04em; word-spacing: .12em; line-height: 1.8; }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; }
html.a11y-contrast body { background: #fff; }
html.a11y-contrast body * { color: #000 !important; }
html.a11y-contrast .pill, html.a11y-contrast .mtg-chat-head, html.a11y-contrast .mtg-a11y-btn { background: #000 !important; color: #fff !important; }
html.a11y-contrast .pill *, html.a11y-contrast .mtg-chat-head *, html.a11y-contrast footer * { color: #fff !important; }
html.a11y-contrast img { filter: contrast(1.1); }
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation: none !important; transition: none !important;
}
html.a11y-no-motion .reveal { opacity: 1 !important; transform: none !important; }
html.a11y-no-motion .mark-anim { background-size: 100% 100% !important; }
html.a11y-no-images img, html.a11y-no-images video { visibility: hidden !important; }
html.a11y-no-images .hero, html.a11y-no-images [style*="background-image"] { background-image: none !important; }

/* Chat skip + emergency note */
.mtg-skip { border: none; background: transparent; color: var(--ink-2, #6b6453); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 6px; }
.mtg-chat-note strong { color: #8a2f1f; }

/* FIX: the hidden attribute must always win over the panels' display:flex.
   Without this, the chat and a11y panels render open on page load and the
   close buttons appear broken. */
.mtg-chat-panel[hidden], .mtg-a11y-panel[hidden] { display: none !important; }

/* Chat: tighter footprint per client feedback */
.mtg-chat-panel { width: min(330px, calc(100vw - 32px)); }
.mtg-chat-body { max-height: 290px; }

/* A11y panel close button */
.mtg-a11y-head { display: flex; align-items: center; justify-content: space-between; }
.mtg-a11y-close { border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: #6b6453; padding: 2px 6px; }

/* ============================================================
   HOMEPAGE THERAPIST MARQUEE (pairs with therapist-marquee.js)
   ============================================================ */
.therap-marquee {
  overflow-x: auto; overflow-y: hidden;
  padding: 8px 0 20px; margin-top: 8px;
  scroll-behavior: auto; cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.therap-marquee.dragging { cursor: grabbing; }
.therap-marquee:focus-visible { outline: 2px solid var(--butter); outline-offset: 4px; border-radius: 12px; }
/* Visible, on-brand scrollbar — white thumb on a faint dark groove so it
   reads clearly as a scrollbar against the moss-green section. */
.therap-marquee::-webkit-scrollbar { height: 10px; }
.therap-marquee::-webkit-scrollbar-track { background: color-mix(in oklab, var(--ink) 16%, transparent); border-radius: 999px; }
.therap-marquee::-webkit-scrollbar-thumb { background: var(--cream); border-radius: 999px; }
.therap-marquee::-webkit-scrollbar-thumb:hover { background: #fff; }
.therap-marquee { scrollbar-color: var(--cream) color-mix(in oklab, var(--ink) 16%, transparent); scrollbar-width: thin; }

/* Prev / next arrow buttons flanking the marquee (pairs with therapist-marquee.js) */
.therap-marquee-wrap { position: relative; }
.therap-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--cream) 92%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  box-shadow: 0 6px 18px rgba(20, 18, 12, .18);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.therap-nav:hover { background: var(--cream); transform: translateY(-50%) scale(1.06); }
.therap-nav:focus-visible { outline: 2px solid var(--butter); outline-offset: 3px; }
.therap-nav-prev { left: -8px; }
.therap-nav-next { right: -8px; }
@media (max-width: 599px) {
  .therap-nav { width: 38px; height: 38px; font-size: 17px; }
  .therap-nav-prev { left: 2px; }
  .therap-nav-next { right: 2px; }
}

.therap-marquee-track { display: flex; gap: 18px; width: max-content; }
.therap-mini {
  flex: 0 0 240px; width: 240px;
  background: var(--cream-2); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.therap-mini:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20,18,12,.12); }
.therap-mini-photo { aspect-ratio: 4 / 5; background: var(--sand); }
.therap-mini-photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.therap-mini-body { padding: 14px 16px 18px; }
.therap-mini-body h3 { font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.1; margin: 0; }
.therap-mini-cred { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 0; }
.therap-mini-tag { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }

/* ============================================================
   SECTION SYMBOLS ARE STATIC
   The decorative section symbols no longer rotate or float, per
   client direction (icons should hold still). The keyframes below
   are kept defined but unused, so ambient motion can be restored
   later by re-adding the animation rules to `html.motion .sym svg`
   (and the float to `html.motion .sym-tile-lg`).
   ============================================================ */
@keyframes mtg-sym-spin { to { transform: rotate(360deg); } }
@keyframes mtg-sym-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.04); }
}

/* `.sym` is the section symbol class only (nav arrows, chat, and a11y
   widgets use their own markup, so they are unaffected). No animation. */
html.motion .sym svg { transform-origin: 50% 50%; }

/* ============================================================
   MOBILE POLISH for the new interactive components (<=600px)
   ============================================================ */
@media (max-width: 600px) {
  /* Floating widgets: slightly smaller, never overlapping or off-screen */
  .mtg-chat { right: 14px; bottom: 14px; }
  .mtg-a11y { left: 14px; bottom: 14px; }
  .mtg-a11y-btn { width: 46px; height: 46px; }
  .mtg-chat-bubble { width: 50px; height: 50px; }
  .mtg-chat-panel { right: 10px; left: 10px; width: auto; bottom: 10px; }
  .mtg-chat-body { max-height: 48vh; }
  .mtg-a11y-panel { width: min(230px, calc(100vw - 28px)); }

  /* Therapist marquee: slightly narrower cards so the next one peeks in */
  .therap-mini { flex-basis: 76vw; width: 76vw; max-width: 280px; }

  /* Quiz options + nav: comfortable tap targets, full-width buttons */
  .quiz-option { padding: 16px 18px; font-size: 16px; }
  .quiz-nav { flex-direction: column-reverse; }
  .quiz-nav .pill { width: 100%; justify-content: center; }

  /* Callback + capture forms stack cleanly */
  .callback-form .pill, .quiz-capture-form .pill { width: 100%; justify-content: center; }

  /* Admin leads: stack label/value instead of a tight 2-column grid */
  .lead-row-fields { grid-template-columns: 1fr; gap: 2px 0; }
  .lead-row-fields dt { margin-top: 8px; }
}

/* Chat inline validation error */
.mtg-err { flex-basis: 100%; font-size: 12px; color: #8a2f1f; }

/* (Removed: the per-icon "stop rotating" exceptions from an earlier client
   review. They are no longer needed now that no section symbol rotates.) */

/* =========================================================================
   THERAPIST PROFILE PAGE
   Moved here from the in-body <style> block in _layouts/therapist.njk:
   styles that arrive after the content mean the profile paints unstyled
   (single column) on slow devices, then reflows into the grid once the
   parser reaches the block. That reflow scored CLS ~0.23 in Lighthouse CI.
   Loading them with the main stylesheet keeps the first paint final.
   ========================================================================= */
.profile-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 768px) { .profile-grid { grid-template-columns: minmax(280px, 1fr) 1.5fr; gap: 48px; } }
.profile-photo { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--cream-2); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-photo .photo-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ink-3); font-size: 13px; }
.profile-body { margin-top: 56px; max-width: 760px; font-size: var(--fs-body-prose); line-height: var(--lh-prose); color: var(--ink-2); }
.profile-body p { margin-bottom: 1.2em; }
.profile-body h2, .profile-body h3 { font-family: var(--font-serif); color: var(--ink); margin-top: 1.6em; margin-bottom: .6em; }
.profile-body h2 { font-size: var(--fs-article-h2); }
.profile-body h3 { font-size: var(--fs-article-h3); }

/* Pill tags on the profile page (Specialties / Modalities / Insurance) */
.profile-meta .specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-meta .specs span {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  background: var(--cream-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.profile-meta h3.h-4 { margin-top: 32px; margin-bottom: 12px; font-family: var(--font-serif); }
.bio-placeholder {
  padding: 32px;
  border-radius: 18px;
  background: var(--cream-2);
  border: 1px dashed color-mix(in oklab, var(--ink) 18%, transparent);
}
.bio-placeholder em { color: var(--ink-2); font-family: var(--font-serif); }
.bio-placeholder p:last-child { margin-bottom: 0; }
.avail-badge {
  display: inline-block; margin-top: 24px; padding: 7px 14px; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}
.request-info { max-width: 640px; }
.request-info .form-card { background: var(--cream-2); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 599px) { .request-info .form-card { padding: 20px; } }
.request-info .field { display: flex; flex-direction: column; gap: 6px; }
.request-info label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.request-info input, .request-info textarea {
  font: inherit; padding: 12px 14px; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  background: var(--cream); color: var(--ink); width: 100%;
}
.request-info input:focus, .request-info textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.request-info button { align-self: flex-start; border: none; cursor: pointer; }

.profile-video { max-width: 760px; }
.profile-video h2 { font-family: var(--font-serif); color: var(--ink); }
.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
}
.video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-caption-note { margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.video-caption-note a { color: var(--ink); text-decoration: underline; }

/* =========================================================================
   PAGE-LAYOUT STYLES MOVED OUT OF END-OF-BODY <style> BLOCKS
   The sections below were moved here from in-body <style> blocks in
   src/_layouts/ (same latent CLS risk PR #79 fixed for therapist.njk:
   styles that arrive after the content paint late on slow devices and
   reflow the page). Selectors that reused generic names across layouts
   with different rules (.article-body, .group-badge, .group-inquiry,
   .group-fac, .state-therapist-*) are scoped under a per-layout class on
   the layout's top-level section (.std-page, .static-page, .blog-post,
   .location-page, .group-page, .groups-hub, .landing-blocks) so no layout
   restyles another's pages. Identical rule sets are merged once (FAQ
   accordion, group inquiry form internals).
   ========================================================================= */

/* ---- FAQ accordion (shared) ----
   Identical in audience.njk, landing.njk, service.njk, payer.njk, and
   landing-blocks.liquid (which also contributed .faq-a p:last-child; inert
   for the four njk layouts, whose answers render as plain text, not <p>).
   Scoped under .faqs; a page opts in by wrapping its accordions in a
   .faqs div (city-pages.njk and payer-state-pages.njk now do too).
   On /iop/, program-page.css loads after this file and its .iop-page rules
   still win every tie, exactly as they did against the old inline blocks. */
.faqs { display: flex; flex-direction: column; gap: 12px; }
/* Homepage FAQ only: narrow the accordion to match the pricing section's
   insurance field width (.lead-capture, max-width 560px). Scoped to #faq so
   the full-width .faqs on city / payer-state / IOP pages is untouched. */
#faq .faqs { max-width: 560px; }
.faqs .faq {
  background: var(--cream-2);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.faqs .faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.3;
  color: var(--ink);
  user-select: none;
}
.faqs .faq summary::-webkit-details-marker { display: none; }
.faqs .faq-mark {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 300;
  color: var(--ink-2);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faqs .faq[open] .faq-mark { transform: rotate(45deg); }
.faqs .faq-a {
  padding: 0 24px 24px;
  color: var(--ink-2);
  line-height: 1.6;
  font-size: clamp(15px, 1.5vw, 17px);
}
.faqs .faq-a p:last-child { margin-bottom: 0; }

/* ---- Standard article body (audience.njk, landing.njk, service.njk,
   payer.njk; all four blocks were identical) ---- */
.std-page .article-body { font-size: var(--fs-body-prose); line-height: var(--lh-prose); color: var(--ink-2); }
.std-page .article-body p { margin-bottom: 1.2em; }
/* July 24 review: in-article images capped and centered (they rendered at
   full container width), and list rhythm tightened to match the prose.
   Scope-free .article-body so service, audience, payer, group, and blog
   bodies all get the same treatment. */
.article-body img { display: block; max-width: min(520px, 100%); height: auto; border-radius: 14px; margin: 28px auto; }
/* WP-migrated inline icon marks (SVG) render at icon scale beside their
   heading, never at photo/container width (Maya, July 24). */
.article-body img[src$=".svg"] { width: 64px; height: 64px; max-width: 64px; border-radius: 0; margin: 32px 0 4px; }
.std-page .article-body ul, .std-page .article-body ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.std-page .article-body li { margin-bottom: .55em; }
.std-page .article-body li::marker { color: var(--ink-3); }
.std-page .article-body h2, .std-page .article-body h3 { font-family: var(--font-serif); color: var(--ink); margin-top: 1.6em; margin-bottom: .6em; }
.std-page .article-body h2 { font-size: var(--fs-article-h2); }
.std-page .article-body h3 { font-size: var(--fs-article-h3); }
/* FAQ block matches the homepage FAQ anatomy: centered head on an 880px
   measure, accordion text left-aligned inside it. */
.std-page .faq-section { max-width: 880px; margin-inline: auto; text-align: center; }
.std-page .faq-section .faqs { text-align: left; }

/* ---- Insurance & fees page (insurance-and-fees.njk; migrated from its
   end-of-body <style> block, July 2026. Long-form article rides .std-page.
   Generic form names stay scoped under #insurance-check because contact,
   groups, and therapist pages define their own .form-card/.field.) ---- */
.payer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.payer-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; background: var(--cream-2); border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
  text-decoration: none; color: var(--ink); font-family: var(--font-serif);
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.25; transition: transform .15s ease, border-color .15s ease;
}
.payer-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--ink) 24%, transparent); }
.payer-card .arrow { color: var(--ink-2); flex-shrink: 0; }

.verify-branches { display: grid; gap: 20px; max-width: 760px; margin: 0 auto 16px; }
@media (min-width: 700px) { .verify-branches { grid-template-columns: 1fr 1fr; } }
.verify-card {
  background: var(--cream-2); border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.verify-card--primary { border-color: var(--ink); }
.verify-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.verify-divider { text-align: center; margin: 40px auto; position: relative; max-width: 640px; color: var(--ink-2); }
.verify-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: color-mix(in oklab, var(--ink) 14%, transparent); }
.verify-divider span { position: relative; background: var(--cream); padding: 0 16px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; }

#insurance-check .form-card { background: var(--cream-2); border-radius: 18px; padding: 32px; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 599px) { #insurance-check .form-card { padding: 20px; } }
#insurance-check .row-2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 600px) { #insurance-check .row-2 { grid-template-columns: 1fr 1fr; } }
#insurance-check .field { display: flex; flex-direction: column; gap: 6px; }
#insurance-check .field label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
#insurance-check .field input, #insurance-check .field select, #insurance-check .field textarea {
  font: inherit; font-size: 16px;
  padding: 14px 16px; background: var(--cream);
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  border-radius: 10px; color: var(--ink); outline: none;
  font-family: var(--font-sans);
}
#insurance-check .field input:focus, #insurance-check .field select:focus, #insurance-check .field textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px var(--butter-2);
}
.next-steps { display: grid; gap: 32px; margin-top: 64px; }
@media (min-width: 768px) { .next-steps { grid-template-columns: 1fr 1fr; gap: 48px; } }
.next-steps .h-4 { margin-bottom: 12px; }
.next-steps ol { padding-left: 20px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.next-steps ol li { margin-bottom: 8px; }
.next-steps p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* ---- Static page (page.njk) ---- */
.static-page .article-body { font-size: var(--fs-body-prose); line-height: var(--lh-prose); color: var(--ink-2); max-width: 720px; }
.static-page .article-body p { margin-bottom: 1.2em; }
.static-page .article-body h2, .static-page .article-body h3 {
  font-family: var(--font-serif); font-weight: 400; color: var(--ink); letter-spacing: -.02em;
}
.static-page .article-body h2 { margin-top: 1.8em; margin-bottom: .6em; font-size: var(--fs-article-h2); line-height: 1.1; }
.static-page .article-body h3 { margin-top: 1.5em; margin-bottom: .5em; font-size: var(--fs-article-h3); line-height: 1.15; }
.static-page .article-body h2 em, .static-page .article-body h3 em { font-style: normal; }

/* ---- Blog post (blog-post.njk) ---- */
.post-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.post-meta .post-author { color: var(--ink); }
.post-hero {
  margin: 48px 0 0;
  max-width: 720px;
}
.post-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
.post-hero + .article-body { margin-top: 40px !important; }
.blog-post .article-body {
  font-size: var(--fs-body-prose);
  line-height: var(--lh-prose);
  color: var(--ink-2);
  max-width: 720px;
}
.blog-post .article-body p { margin-bottom: 1.3em; }
.blog-post .article-body h2, .blog-post .article-body h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.018em;
}
.blog-post .article-body h2 { margin-top: 2em; margin-bottom: .5em; font-size: var(--fs-article-h2); line-height: 1.1; }
.blog-post .article-body h3 { margin-top: 1.5em; margin-bottom: .4em; font-size: var(--fs-article-h3); line-height: 1.15; }
.blog-post .article-body em { font-style: italic; }
.blog-post .article-body h2 em, .blog-post .article-body h3 em { font-style: normal; }
.blog-post .article-body ul, .blog-post .article-body ol { padding-left: 24px; margin-bottom: 1.3em; }
.blog-post .article-body li { margin-bottom: .5em; }
.blog-post .article-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.blog-post .article-body blockquote {
  border-left: 3px solid var(--butter);
  padding-left: 24px;
  margin: 2em 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1em;
  color: var(--ink);
}
.blog-post .article-body table {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: clamp(15px, 1.4vw, 17px);
}
.blog-post .article-body th, .blog-post .article-body td {
  border: 1px solid var(--cream-2, #e3ddd0);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
.blog-post .article-body th {
  background: var(--cream-2, #f1ece1);
  color: var(--ink);
  font-weight: 600;
}
.post-tags {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--cream-2, #f1ece1);
  border-radius: 999px;
  padding: 6px 14px;
}
.post-cta {
  margin-top: 80px;
  padding: 40px;
  background: var(--cream-2);
  border-radius: 18px;
  text-align: center;
}

/* ---- Location / state pages (location.njk; payer-state-pages.njk opts in
   by putting .location-page on its top-level section, since it renders the
   identical state-therapist card markup) ---- */
.location-page .article-body { font-size: var(--fs-body-prose); line-height: var(--lh-prose); color: var(--ink-2); }
/* FAQ block matches the homepage FAQ anatomy (same rule as .std-page). */
.location-page .faq-section { max-width: 880px; margin-inline: auto; text-align: center; }
.location-page .faq-section .faqs { text-align: left; }
.location-page .faq-section .h-2 { margin-bottom: 32px; }
/* Internal-link lists (Therapy near you / Use your insurance) render as
   chips, same treatment as .profile-meta .specs; bare .specs is unstyled. */
.location-page .specs { display: flex; flex-wrap: wrap; gap: 8px; }
.location-page .specs span {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  background: var(--cream-2);
  color: var(--ink-2);
  white-space: nowrap;
  transition: border-color .2s ease;
}
.location-page .specs a:hover span { border-color: color-mix(in oklab, var(--ink) 45%, transparent); }
.location-page .article-body p { margin-bottom: 1.2em; }
.location-page .article-body h2 { font-family: var(--font-serif); color: var(--ink); margin-top: 1.6em; margin-bottom: .6em; font-size: var(--fs-article-h2); }
.location-page .state-therapist-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .location-page .state-therapist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .location-page .state-therapist-grid { grid-template-columns: repeat(3, 1fr); } }
.location-page .state-therapist-card {
  background: var(--cream-2);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, background .2s ease;
  border: 1px solid color-mix(in oklab, var(--ink) 6%, transparent);
}
.location-page .state-therapist-card:hover { transform: translateY(-2px); background: var(--sand); }
.location-page .state-therapist-card img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.location-page .state-therapist-info { flex: 1; min-width: 0; }
.location-page .state-therapist-info h3 { font-family: var(--font-serif); font-weight: 400; font-size: 18px; line-height: 1.1; margin-bottom: 4px; color: var(--ink); }
.location-page .state-therapist-tag { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ---- Group detail page (group.njk) ---- */
.group-hero { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 820px) { .group-hero { grid-template-columns: minmax(280px, 420px) 1fr; gap: 48px; } }
.group-hero-media { position: relative; border-radius: 18px; overflow: hidden; background: var(--cream-2); border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
.group-hero-media img { display: block; width: 100%; height: auto; }
.group-hero-ph { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; }
.group-page .group-badge { position: absolute; top: 14px; left: 14px; background: var(--ink); color: var(--cream); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.group-page .group-badge--wait, .group-page .group-badge--soon { background: var(--butter); color: var(--ink); }
.group-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.group-chip { border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--ink-2); }
.group-chip strong { color: var(--ink); font-weight: 500; margin-right: 6px; }
.group-lead { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding: 12px 18px 12px 12px; border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius: 999px; background: var(--cream-2); color: var(--ink); text-decoration: none; }
.group-lead img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.group-lead .arrow { color: var(--ink-2); }
.group-body { margin-top: 56px; max-width: 720px; font-size: var(--fs-body-prose); line-height: var(--lh-prose); color: var(--ink-2); }
.group-body h2, .group-body h3 { font-family: var(--font-serif); color: var(--ink); margin: 1.6em 0 .6em; }
.group-body h2 { font-size: var(--fs-article-h2); }
.group-body h3 { font-size: var(--fs-article-h3); }
.group-page .group-inquiry .form-card { background: var(--cream-2); border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); border-radius: 18px; padding: 32px; max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 599px) { .group-page .group-inquiry .form-card { padding: 20px; } }
.group-page .group-inquiry form { display: flex; flex-direction: column; gap: 16px; }

/* ---- Support groups hub (support-groups.njk) ---- */
.groups-hub .article-body { font-size: var(--fs-body-prose); line-height: var(--lh-prose); color: var(--ink-2); }
.groups-hub .article-body p { margin-bottom: 1.2em; }
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.group-card { background: var(--cream-2); border-radius: 18px; overflow: hidden; border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
/* Hover animation (July 24 review): gentle lift + zoom, motion-gated. */
.group-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px color-mix(in oklab, var(--ink) 14%, transparent); border-color: color-mix(in oklab, var(--ink) 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .group-card, .group-flyer img { transition: none; } .group-card:hover { transform: none; } .group-card:hover .group-flyer img { transform: none; } }
/* Standardized image size (July 24 review): every flyer renders as the same
   square crop regardless of the source file's dimensions. */
.group-flyer { position: relative; aspect-ratio: 1; overflow: hidden; background: color-mix(in oklab, var(--ink) 5%, var(--cream-2)); }
.group-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.group-card:hover .group-flyer img { transform: scale(1.04); }
.group-flyer-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.group-flyer-ph span { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.groups-hub .group-badge { position: absolute; top: 12px; left: 12px; background: var(--cream); color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); }
.group-info { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.group-name { font-family: var(--font-serif); font-size: 21px; line-height: 1.2; color: var(--ink); margin: 0; }
.groups-hub .group-fac { font-size: 14px; color: var(--ink-2); margin: 0; }
.groups-hub .group-fac a { color: var(--ink); text-decoration: underline; }
.group-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2); margin: 0; }
.group-desc { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 4px 0 0; }
.group-link { margin-top: 8px; align-self: flex-start; font-family: var(--font-sans); font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent); padding-bottom: 1px; }
.group-flyer { display: block; }
.groups-hub .group-badge--accent { background: var(--butter); border-color: transparent; }
.group-lead-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.group-lead-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.group-lead-chip strong { color: var(--ink); font-weight: 500; }
.view-group-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 12px; padding: 12px 20px;
  background: var(--butter); color: var(--ink); border-radius: 999px;
  font-family: var(--font-sans); font-weight: 500; font-size: 14px; text-decoration: none;
}
.view-group-btn:hover { filter: brightness(.97); }
/* Centered with its page column (Maya, July 24: heads and body share one
   centered column; the form card was hugging the left). */
.groups-hub .group-inquiry { margin-top: 72px; max-width: 640px; margin-inline: auto; }
.groups-hub .group-inquiry .form-card { background: var(--cream-2); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 599px) { .groups-hub .group-inquiry .form-card { padding: 20px; } }

/* ---- Group inquiry form internals (shared) ----
   Identical in group.njk and support-groups.njk (the hub version also
   covers <select>, which the detail page's form simply does not have).
   The differing .form-card and .group-inquiry block rules stay scoped in
   the two sections above. */
.group-inquiry .field { display: flex; flex-direction: column; gap: 6px; }
.group-inquiry label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.group-inquiry input, .group-inquiry select, .group-inquiry textarea {
  font: inherit; padding: 12px 14px; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--ink) 20%, transparent);
  background: var(--cream); color: var(--ink); width: 100%;
}
.group-inquiry input:focus, .group-inquiry select:focus, .group-inquiry textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.group-inquiry button { align-self: flex-start; border: none; cursor: pointer; }

/* ---- Landing blocks + group blocks (landing-blocks.liquid,
   group-blocks.liquid) ----
   .content-blocks, .block-image-text, and .block-stats stay unscoped: they
   serve both layouts (group-blocks.liquid's mid-body <style> copy of these
   rules was identical and was deduplicated into them when it moved here),
   and on /iop/ the program-page.css .iop-page overrides still win on
   specificity, so all render exactly as before. The .article-body
   typography is scoped because the rich_text/image_text components are
   shared with layouts that style it differently; both block layouts use
   the same values, hence the selector pairs. */
.content-blocks > * + * { margin-top: 56px; }
.landing-blocks .article-body, .group-blocks .article-body { font-size: var(--fs-body-prose); line-height: var(--lh-prose); color: var(--ink-2); }
.landing-blocks .article-body p, .group-blocks .article-body p { margin-bottom: 1.2em; }
.landing-blocks .article-body h2, .landing-blocks .article-body h3, .group-blocks .article-body h2, .group-blocks .article-body h3 { font-family: var(--font-serif); color: var(--ink); margin-top: 1.6em; margin-bottom: .6em; }
.landing-blocks .article-body h2, .group-blocks .article-body h2 { font-size: var(--fs-article-h2); }
.landing-blocks .article-body h3, .group-blocks .article-body h3 { font-size: var(--fs-article-h3); }
.landing-blocks .article-body ul, .landing-blocks .article-body ol, .group-blocks .article-body ul, .group-blocks .article-body ol { margin: 0 0 1.2em 1.2em; }
.landing-blocks .article-body li, .group-blocks .article-body li { margin-bottom: .4em; }
.block-image-text { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.block-image-text img { width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 720px) { .block-image-text { grid-template-columns: 1fr; } }
.block-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; text-align: center; }

/* ---- Group content blocks (group-blocks.liquid) ----
   Only the wrapper offset below the group hero is unique to this layout.
   Everything else its mid-body <style> block carried (FAQ accordion,
   .content-blocks rhythm, .block-image-text, .block-stats, .article-body
   typography) duplicated the shared sections above rule for rule and was
   deduplicated into them. */
.group-blocks { margin-top: 56px; }

/* =============================================================
   HOME SEO ZONE (.home-seo) + trust-strip logo band + hero H1 line.
   July 2026 SEO carry-over build. Scoped: never unscope (PR #85 rule).
   ============================================================= */

/* Hero: the real H1, rendered as a supporting line under the mega headline. */
.hero-h1line {
  /* Reworked into the section eyebrow: a small mono kicker ABOVE the mega
     headline, matching the other sections' eyebrow font + sizing. Still the
     page's real <h1> (SEO carry-over) — the uppercasing is visual only. */
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 20px;
}

/* Trust strip: carrier logo marquee on the light band. The webp assets are
   white-on-transparent (from the old WP strip), so brightness(0) re-tints
   them to ink; opacity matches the old text-strip weight. */
.trust .trust-strip-label { text-align: center; margin-bottom: 16px; }
.trust .trust-logos { flex-wrap: nowrap; }
.trust .carrier-logo {
  height: 28px; width: auto; max-width: none; display: block;
  filter: brightness(0); opacity: .62;
}
.trust .carrier-more {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}

/* SEO content blocks */
/* The SEO zone was one section; each block is now its own peer section so it
   can be reordered/hidden in the CMS. Collapse the doubled section padding
   between consecutive SEO blocks back to the original in-zone rhythm
   (clamp(56px,8vw,96px)), while a block keeps full section padding where the
   zone meets a non-SEO section (or when moved elsewhere in the order). */
section.page.home-seo + section.page.home-seo { padding-top: 0; }
section.page.home-seo:has(+ section.page.home-seo) { padding-bottom: clamp(56px, 8vw, 96px); }
.home-seo .home-seo-block { margin-bottom: clamp(56px, 8vw, 96px); }
.home-seo .home-seo-block:last-child { margin-bottom: 0; }
.home-seo .home-seo-block h2 { margin: 14px 0 20px; }
.home-seo .home-seo-block p { color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; margin-bottom: 1.1em; }
/* FAQ centered like the pricing section: centered block, centered eyebrow +
   heading, and the accordion in a centered column with left-aligned text. */
#faq .faq-section { max-width: 880px; margin-inline: auto; text-align: center; }
#faq .faqs { margin-inline: auto; text-align: left; }
.home-seo .home-seo-intro h2 { margin-top: 0; }
.home-seo .home-seo-cols { display: grid; gap: 0 40px; }
@media (min-width: 860px) { .home-seo .home-seo-cols { grid-template-columns: 1fr 1fr; } }
.home-seo .home-seo-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* Charlie Health-style photo card with floating facilitator chips */
.home-seo .home-seo-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .home-seo .home-seo-split { grid-template-columns: 1fr 1fr; } }
.home-seo .photo-card { position: relative; border-radius: 20px; }
.home-seo .photo-card > img {
  width: 100%; height: auto; display: block; border-radius: 20px;
  box-shadow: 0 18px 48px color-mix(in oklab, var(--ink) 18%, transparent);
}
.home-seo .photo-chip {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--cream); border-radius: 999px; padding: 6px 16px 6px 6px;
  text-decoration: none; box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 25%, transparent);
}
.home-seo .photo-chip img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.home-seo .photo-chip-text { display: flex; flex-direction: column; line-height: 1.15; }
.home-seo .photo-chip-text strong { font-size: 14px; font-weight: 600; }
.home-seo .photo-chip-text span { font-size: 11px; opacity: .75; }
.home-seo .photo-chip-text span::before { content: "•"; color: var(--butter); margin-right: 4px; }
.home-seo .photo-chip-1 { top: -18px; right: 18px; }
.home-seo .photo-chip-2 { bottom: 64px; left: -22px; }
.home-seo .photo-chip-3 { bottom: -16px; left: 44px; }
@media (max-width: 899px) {
  .home-seo .photo-chip-2 { left: 8px; }
}
/* Gentle float, motion-gated (mirrors motion.js html.motion idiom) */
@keyframes mtg-chip-float {
  from { transform: translateY(-4px); }
  to   { transform: translateY(5px); }
}
html.motion .home-seo .photo-chip { animation: mtg-chip-float 4.2s ease-in-out infinite alternate; }
html.motion .home-seo .photo-chip-2 { animation-duration: 5.1s; animation-delay: .6s; }
html.motion .home-seo .photo-chip-3 { animation-duration: 4.7s; animation-delay: 1.1s; }

/* Footer Miami tagline line */
.foot-loc-tagline { font-size: 12px; opacity: .75; padding-left: 22px; }

/* Testimonials carousel (Charlie Health-style) */
.testi .testi-carousel { position: relative; margin-top: 40px; }
.testi .testi-slide {
  display: none; gap: clamp(32px, 5vw, 72px); align-items: stretch;
}
/* Left column matches the photo height: eyebrow/quote/name at top, pager at
   the bottom (level with the image bottom). */
.testi .testi-copy { display: flex; flex-direction: column; }
.testi .testi-copy .eyebrow-row { margin-bottom: 22px; }
.testi .testi-copy blockquote { margin-bottom: 0; }
/* Indent the quote copy clear of the sticky rail (rail shows >= 1440px); the
   indent shrinks as the viewport widens and disappears once the centered
   content clears the rail on its own. */
@media (min-width: 1440px) {
  /* Indent left-hand content clear of the sticky rail (shrinks as the viewport
     widens). .testi-copy carries its own eyebrow + pager, so one rule covers
     the whole testimonial column. */
  .testi .testi-copy,
  #group-therapy .home-seo-split,
  #conditions .cond-carousel,
  #therapists .therap-marquee-wrap { padding-left: max(0px, calc(156px - (100vw - 1360px) / 2)); }
  /* Keep the marquee's left arrow with the shifted cards. */
  #therapists .therap-nav-prev { left: calc(-8px + max(0px, 156px - (100vw - 1360px) / 2)); }
}
.testi .testi-slide.is-active { display: grid; }
@media (min-width: 900px) { .testi .testi-slide { grid-template-columns: 1fr 1fr; } }
html.motion .testi .testi-slide.is-active { animation: mtg-testi-in .5s ease both; }
@keyframes mtg-testi-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.testi blockquote { margin: 0; }
.testi .testi-headline { color: var(--ink); margin-bottom: 20px; }
.testi .testi-body { color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; }
.testi cite { display: block; margin-top: 22px; font-style: normal; color: var(--ink-2); }
.testi .testi-photo > img {
  width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 18px 48px color-mix(in oklab, var(--ink) 18%, transparent);
}
.testi .testi-controls { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 40px; }
.testi .testi-counter { color: var(--ink-2); margin-right: auto; }

/* Floating chips on the testimonial photo card, mirroring the group-therapy
   section's .home-seo .photo-chip treatment (chips here are text-only). */
.testi .testi-photo { position: relative; border-radius: 20px; }
.testi .photo-chip {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--cream); border-radius: 999px; padding: 8px 18px;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--ink) 25%, transparent);
}
.testi .photo-chip-text strong { font-size: 14px; font-weight: 600; }
.testi .photo-chip-1 { top: -18px; right: 18px; }
.testi .photo-chip-2 { bottom: 64px; left: -22px; }
.testi .photo-chip-3 { bottom: -16px; left: 44px; }
@media (max-width: 899px) { .testi .photo-chip-2 { left: 8px; } }
/* Black-background testimonials, offered for the July 24 review comparison.
   Ink-based text flips to cream tones; remove .testi-dark from the section
   in home/testimonials.njk to return to the cream background. */
.testi.testi-dark { background: var(--ink); }
.testi.testi-dark .testi-headline { color: var(--cream); }
.testi.testi-dark .testi-body { color: color-mix(in oklab, var(--cream) 80%, var(--ink)); }
.testi.testi-dark cite,
.testi.testi-dark .testi-counter,
.testi.testi-dark .micro { color: color-mix(in oklab, var(--cream) 65%, var(--ink)); }
.testi.testi-dark .therap-arrow { color: var(--cream); }
.testi.testi-dark .sym { color: var(--butter); }
html.motion .testi .photo-chip { animation: mtg-chip-float 4.2s ease-in-out infinite alternate; }
html.motion .testi .photo-chip-2 { animation-duration: 5.1s; animation-delay: .6s; }
html.motion .testi .photo-chip-3 { animation-duration: 4.7s; animation-delay: 1.1s; }

/* Carrier logo size tiers: wide wordmarks (sm) sit lower than compact marks
   (lg) so the strip reads optically even after the alpha-trim of the webps. */
.trust .carrier-logo { height: 24px; }
.trust .carrier-logo.carrier-sm { height: 20px; }
.trust .carrier-logo.carrier-lg { height: 28px; }

/* Scattered hero story cards. The .badge base styles position card 1 where
   the original single badge sat; 2-4 scatter across hero-right and bob
   gently under html.motion. On small screens only the first card shows. */
.hero-badges .badge { max-width: 300px; }
.hero-right .hero-badge-2 { bottom: auto; top: 8px; left: auto; right: 8px; }
.hero-right .hero-badge-3 { bottom: 140px; left: auto; right: 40px; }
.hero-right .hero-badge-4 { bottom: auto; top: 120px; left: 4px; }
@media (max-width: 899px) {
  .hero-right .hero-badge-2, .hero-right .hero-badge-3, .hero-right .hero-badge-4 { display: none; }
}
/* Cards run a seamless 14s loop: fade in, hold ~8s, fade out, rest, repeat.
   Staggered 2s apart, the visible windows overlap so the photo is never
   empty. Opacity lives in the cycle; the float owns transform, so both
   run together. Without html.motion all cards are simply visible; on
   mobile only card 1 shows and it stays put (no cycle, or it would blank). */
@keyframes mtg-badge-cycle {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  62%  { opacity: 1; }
  72%  { opacity: 0; }
  100% { opacity: 0; }
}
html.motion .hero-badges .badge {
  opacity: 0;
  animation:
    mtg-badge-cycle 14s ease-in-out 0s infinite,
    mtg-chip-float 4.6s ease-in-out infinite alternate;
}
html.motion .hero-right .hero-badge-2 { animation: mtg-badge-cycle 14s ease-in-out 2s infinite, mtg-chip-float 5.4s ease-in-out infinite alternate; }
html.motion .hero-right .hero-badge-3 { animation: mtg-badge-cycle 14s ease-in-out 4s infinite, mtg-chip-float 4.1s ease-in-out infinite alternate; }
html.motion .hero-right .hero-badge-4 { animation: mtg-badge-cycle 14s ease-in-out 6s infinite, mtg-chip-float 5s ease-in-out infinite alternate; }
@media (max-width: 899px) {
  html.motion .hero-badges .badge { opacity: 1; animation: mtg-chip-float 4.6s ease-in-out infinite alternate; }
}

/* Static label inside the coverage capsule (replaced the decorative select) */
.lead-capture .lead-capture-label {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  font-size: 16px;
  color: var(--ink);
}

/* Clinician-count line in the therapists section foot (moved from the head) */
.therap-foot .therap-count { color: color-mix(in oklab, var(--cream) 78%, transparent); font-size: 15px; line-height: 1.5; margin: 0; white-space: nowrap; }
@media (max-width: 899px) { .therap-foot .therap-count { white-space: normal; } }

/* Therapists section head: eyebrow, headline, and clinician count centered. */
.section-head.therap-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.section-head.therap-head > div:first-child { flex: 0 1 860px; min-width: 0; margin-inline: auto; }
.therap-head h2 { margin-top: 16px; text-align: center; }
/* Lead under the therapists heading matches the pricing head's .body-lg
   size; measure matches the pricing lead's 880px column. Color stays the
   muted 78% cream (Maya's call) rather than the standard 94% lead mix. */
.therap-head .therap-count {
  margin-top: 18px; margin-inline: auto; max-width: 880px;
  color: color-mix(in oklab, var(--cream) 78%, transparent);
}
/* "Match with a therapist" CTA: pitch stacks centered above the button,
   both centered under the marquee scrollbar. */
.therap-cta-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(24px, 4vw, 40px); }
.therap-cta-row .pitch {
  margin: 0; max-width: 620px; text-align: center;
  color: var(--cream);
  font-family: var(--font-sans); font-style: normal;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5;
}

/* ---------- Support-group landing blocks (July 2026 Beyond Youth template) ---------- */
/* All selectors stay under .group-blocks so these never leak into other layouts. */
.group-blocks .em-butter { color: var(--butter); font-style: normal; }

.group-blocks .grp-covered { background: var(--ink); color: var(--cream); border-radius: 22px; padding: clamp(28px, 4vw, 52px); }
.group-blocks .grp-covered-head { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: end; margin-bottom: 36px; }
@media (min-width: 900px) { .group-blocks .grp-covered-head { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.group-blocks .grp-covered-head h2 { color: var(--cream); margin-top: 16px; }
.group-blocks .grp-covered-head .body-lg { color: color-mix(in oklab, var(--cream) 78%, transparent); max-width: 420px; }
.group-blocks .grp-eyebrow-dark { color: var(--butter); }
.group-blocks .grp-eyebrow-dark .dot { background: var(--butter); }
.group-blocks .grp-covered-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: color-mix(in oklab, var(--cream) 14%, transparent); border: 1px solid color-mix(in oklab, var(--cream) 14%, transparent); border-radius: 14px; overflow: hidden; }
@media (min-width: 640px) { .group-blocks .grp-covered-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .group-blocks .grp-covered-grid { grid-template-columns: repeat(3, 1fr); } }
.group-blocks .grp-covered-grid li { background: var(--ink); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.group-blocks .grp-covered-grid h3 { color: var(--cream); margin: 0; }
.group-blocks .grp-covered-grid .body-sm { color: color-mix(in oklab, var(--cream) 72%, transparent); }
.group-blocks .grp-covered-num { font-family: var(--font-serif); font-style: italic; font-size: 26px; color: var(--butter); line-height: 1; }

.group-blocks .grp-who { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .group-blocks .grp-who { grid-template-columns: 1fr 1.2fr; gap: 56px; } }
.group-blocks .grp-who-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.group-blocks .grp-ph { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: var(--cream-2); border-radius: 18px; }
.group-blocks .grp-ph span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.group-blocks .grp-who-copy h2 { margin-top: 16px; }
.group-blocks .grp-who-copy .body-lg { margin-top: 16px; color: var(--ink-2); max-width: 520px; }
.group-blocks .grp-signals { list-style: none; margin: 24px 0 0; padding: 0; }
.group-blocks .grp-signals li { padding: 13px 0 13px 32px; border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); position: relative; line-height: 1.5; }
.group-blocks .grp-signals li:last-child { border-bottom: none; }
.group-blocks .grp-signals li::before { content: "\2726"; position: absolute; left: 4px; color: var(--butter); font-size: 15px; }

.group-blocks .grp-sessions-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.group-blocks .grp-sessions-head h2 { margin-top: 16px; }
.group-blocks .grp-sessions-head .body-lg { margin-top: 12px; color: var(--ink-2); }
.group-blocks .grp-session-details { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: color-mix(in oklab, var(--ink) 10%, transparent); border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); border-radius: 14px; overflow: hidden; }
@media (min-width: 560px) { .group-blocks .grp-session-details { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .group-blocks .grp-session-details { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .group-blocks .grp-session-details:has(li:last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); } }
.group-blocks .grp-session-details li { background: var(--cream-2); padding: 26px 22px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.group-blocks .grp-session-details .micro { color: var(--ink-2); }
.group-blocks .grp-session-details strong { font-family: var(--font-serif); font-size: clamp(20px, 2.2vw, 24px); font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.group-blocks .grp-detail-sub { font-size: 13px; color: var(--ink-2); }
.group-blocks .grp-session-flow { list-style: none; margin: 28px 0 0; padding: clamp(24px, 3.5vw, 40px); background: var(--cream-2); border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); border-radius: 14px; display: flex; flex-direction: column; }
.group-blocks .grp-session-flow li { display: grid; grid-template-columns: 1fr; gap: 6px 28px; padding: 18px 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); }
@media (min-width: 640px) { .group-blocks .grp-session-flow li { grid-template-columns: 130px 1fr; } }
.group-blocks .grp-session-flow li:first-child { padding-top: 0; }
.group-blocks .grp-session-flow li:last-child { border-bottom: none; padding-bottom: 0; }
.group-blocks .grp-flow-time { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: color-mix(in oklab, var(--ink) 65%, transparent); }
.group-blocks .grp-session-flow strong { display: block; margin-bottom: 3px; }
.group-blocks .grp-session-flow .body-sm { color: var(--ink-2); }

.group-blocks .grp-facilitator { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .group-blocks .grp-facilitator { grid-template-columns: 280px 1fr; gap: 56px; } }
.group-blocks .grp-facilitator-media img { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
.group-blocks .grp-ph-round { aspect-ratio: 1 / 1; max-width: 280px; border-radius: 50%; }
.group-blocks .grp-facilitator-copy h2 { margin-top: 16px; }
.group-blocks .grp-facilitator-name { margin-top: 10px; font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink-2); }
.group-blocks .grp-facilitator-name a { color: inherit; }
.group-blocks .grp-facilitator-bio { margin-top: 16px; color: var(--ink-2); line-height: 1.65; max-width: 560px; }
.group-blocks .grp-facilitator-bio p + p { margin-top: 12px; }
.group-blocks .grp-chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.group-blocks .grp-chips li { background: var(--cream-2); border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); border-radius: 999px; padding: 8px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

.group-blocks .grp-note { background: var(--butter); border-radius: 22px; padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
@media (min-width: 900px) { .group-blocks .grp-note { flex-direction: row; align-items: center; gap: 40px; } .group-blocks .grp-note-text { flex: 1; } }
.group-blocks .grp-note-eyebrow { color: var(--ink); flex: none; }
.group-blocks .grp-note-text { font-family: var(--font-serif); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; color: var(--ink); }
.group-blocks .grp-note-text p { margin: 0; }
.group-blocks .grp-note .pill-dark { background: var(--ink); color: var(--cream); flex: none; }
.group-blocks .grp-note .pill-dark:hover { background: color-mix(in oklab, var(--ink) 88%, var(--cream)); }

/* Hero badge person photo (July 20 revision doc: reviews carry a face). */
.badge-img-photo { padding: 0; overflow: hidden; }
.badge-img-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Hero headline is the page's primary moment: sized deliberately larger than
   the section headlines (.h-1) so it reads as the top of the hierarchy, while
   staying within the two-column left column so whole phrases hold on a line
   (Maya, July 22: hero should be the biggest heading; weight matched to the
   unified section spec). */
.hero-left .h-mega { font-size: clamp(28px, 5.2vw, 73px); line-height: 1.02; font-weight: 400; }
/* Hero opts out of the upright-emphasis flip: the whole mega headline reads as
   one uniform italic statement (only the .mark word carries the highlight). */
.hero-left .h-mega em { font-weight: 400; font-style: italic; }

/* ============================================================
   HOMEPAGE SECTION RAIL (pairs with section-rail.js)
   Sticky left-side scroll-spy menu. Desktop only. Hidden until the reader
   reaches Group Therapy; JS toggles .is-visible. A translucent card keeps it
   legible over the varying section backgrounds (cream / moss).
   ============================================================ */
.section-rail {
  position: fixed;
  left: clamp(16px, 2vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  background: color-mix(in oklab, var(--cream) 86%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 32px color-mix(in oklab, var(--ink) 14%, transparent);
}
.section-rail { padding: 8px; }
.section-rail.is-visible { opacity: 1; visibility: visible; }
.section-rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.section-rail a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px; line-height: 1.2;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.section-rail a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.section-rail a.is-active { color: var(--ink); background: color-mix(in oklab, var(--ink) 10%, transparent); font-weight: 500; }
.section-rail .rail-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.section-rail a.is-active .rail-num { color: var(--ink-2); }
@media (min-width: 1440px) { .section-rail { display: block; } }
@media (prefers-reduced-motion: reduce) { .section-rail { transition: none; } }