/* ==========================================================================
   VOYAGER PSYCHIATRY — Design System
   --------------------------------------------------------------------------
   One shared stylesheet for the whole site. No frameworks, no build step.
   Authored mobile-first: base rules target small screens; min-width media
   queries layer on tablet/desktop refinements.

   Reading order:
     1. Design tokens (:root)        — colors, type, spacing, radii, shadows
     2. Reset & base elements        — sensible, minimal normalization
     3. Typography                   — Cinzel headings + Montserrat body
     4. Layout primitives            — .container, sections, grid helpers
     5. Components                   — buttons, skip link, header/footer scaffold,
                                        mobile nav + FAQ accordion (driven by main.js)
     6. Utilities & motion           — helpers + the gentle on-load fade-in

   COLOR RULES (from the brand spec):
     - Structure is navy; backgrounds are warm white / beige; gold is used
       sparingly (accents, underlines, primary buttons). No large gold fills.
     - Brand gold #A08060 is too light for small text on white. For gold-
       colored TEXT or links on light backgrounds, always use --gold-600.
     - Primary button  = gold fill + navy text.
     - Secondary button = navy outline.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Brand core (sampled exactly from the logo) ---- */
  --navy-900: #202840;   /* primary: headings, header, footer            */
  --gold-500: #A08060;   /* accent: buttons, underlines, icons (warm tan) */

  /* ---- Navy ramp ---- */
  --navy-800: #2B344F;
  --navy-700: #384258;
  --navy-600: #4A5468;
  --navy-link: #2E4A7A;  /* readable link blue on white                  */

  /* ---- Gold ramp ---- */
  --gold-600: #8A6E50;   /* gold TEXT / links on white (AA-readable)      */
  --gold-300: #BFA588;   /* gold hover                                    */
  --gold-100: #EDE4D8;   /* faint gold section tint                       */

  /* ---- Neutrals ---- */
  --beige-100: #F4EEE5;  /* warm section background                       */
  --off-white: #FAF8F4;  /* page background                               */
  --ink: #1C1F26;        /* body text                                     */
  --muted: #5A6170;      /* secondary text                                */
  --line: #E4E2DC;       /* borders / hairlines                           */
  --white: #FFFFFF;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg-page: var(--off-white);
  --bg-section: var(--beige-100);
  --bg-section-gold: var(--gold-100);
  --text-body: var(--ink);
  --text-muted: var(--muted);
  --text-heading: var(--navy-900);
  --border-color: var(--line);

  /* ---- Typography ---- */
  --font-heading: "Cinzel", Georgia, "Times New Roman", serif; /* headings only */
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --line-height-body: 1.65;   /* airy body copy (spec: 1.6+)               */
  --line-height-tight: 1.2;   /* headings                                  */
  --letter-spacing-heading: 0.04em; /* slightly open Cinzel headings       */

  /* Type scale (~1.2–1.25 modular). Fluid via clamp so it stays trustworthy,
     not stuffy, from 380px up to wide desktop. */
  --fs-base: 1rem;                              /* 16px body                */
  --fs-sm: 0.875rem;                            /* 14px small / labels      */
  --fs-xs: 0.75rem;                             /* 12px micro / eyebrows    */
  --fs-lg: 1.125rem;                            /* 18px lead paragraph      */
  --fs-h6: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-h5: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-h4: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 1.95rem);
  --fs-h2: clamp(1.85rem, 1.5rem + 1.6vw, 2.6rem);
  --fs-h1: clamp(2.25rem, 1.8rem + 2.6vw, 3.4rem);

  /* ---- Spacing scale: 4 / 8 / 16 / 24 / 40 / 64 / 96 ---- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 1rem;      /* 16 */
  --space-4: 1.5rem;    /* 24 */
  --space-5: 2.5rem;    /* 40 */
  --space-6: 4rem;      /* 64 */
  --space-7: 6rem;      /* 96 */

  /* ---- Radii: soft cards (8–12px), pill buttons ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* ---- Shadows: subtle, low-opacity ---- */
  --shadow-sm: 0 1px 2px rgba(32, 40, 64, 0.06),
               0 2px 6px rgba(32, 40, 64, 0.05);
  --shadow-md: 0 4px 12px rgba(32, 40, 64, 0.08),
               0 12px 28px rgba(32, 40, 64, 0.07);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;   /* long-form reading width                  */
  --container-pad: var(--space-3);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Focus ring (visible, brand-tinted) ---- */
  --focus-ring: 0 0 0 3px rgba(46, 74, 122, 0.45);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Clip the off-canvas mobile drawer so it can't widen the page.
     overflow-x:clip (not hidden) avoids creating a scroll container,
     so the sticky header keeps working. */
  overflow-x: clip;
}

/* Media should never overflow its container. */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Forms inherit type instead of the browser default. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.25rem;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: var(--space-5) 0;
}


/* ==========================================================================
   3. TYPOGRAPHY
   --------------------------------------------------------------------------
   Cinzel: headings, the logo wordmark, and short section titles ONLY —
   never body copy. Montserrat: everything else.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--text-heading);
  text-wrap: balance; /* tidier multi-line headings where supported */
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  margin: 0 0 var(--space-3);
  max-width: 68ch; /* comfortable measure for readability */
}

/* Lead paragraph — for hero subheads and section intros. */
.lead {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Eyebrow / kicker label above a heading. */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600); /* gold TEXT on light => gold-600 for contrast */
}

small { font-size: var(--fs-sm); }

strong, b { font-weight: 600; }

/* ---- Links ---- */
a {
  color: var(--navy-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--navy-900);
}

/* Gold-styled text link helper — uses the AA-readable gold, never #A08060. */
.link-gold {
  color: var(--gold-600);
}
.link-gold:hover {
  color: var(--gold-300);
}


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

/* Centered content column with responsive side padding. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Narrow column for long-form reading (legal, condition copy). */
.container--narrow {
  max-width: var(--container-narrow);
}

/* Vertical rhythm between major page sections. */
.section {
  padding-block: var(--space-6);
}

/* Background variants for alternating section bands. */
.section--beige { background-color: var(--bg-section); }
.section--gold  { background-color: var(--bg-section-gold); }
.section--navy  {
  background-color: var(--navy-900);
  color: var(--off-white);
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--white); }

/* Simple responsive auto-grid for card rows. */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container { --container-pad: var(--space-4); }
  .section { padding-block: var(--space-7); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* An odd number of cards in a 2-up grid leaves the last one stranded in the
   left column. This centres it instead (e.g. the five therapy approaches). */
@media (min-width: 768px) {
  .grid--center-last > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - (var(--space-4) / 2));
    margin-inline: auto;
  }
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* ---- Skip link (visually hidden until focused) ---- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 200;
  padding: var(--space-2) var(--space-3);
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--space-3);
  color: var(--white);
}

/* ---- Buttons ----
   .btn base + modifiers. Pill shape, generous tap target (>=44px). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary = gold fill + navy text (per spec). */
.btn--primary {
  background-color: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}
.btn--primary:hover {
  background-color: var(--gold-300);
  border-color: var(--gold-300);
  color: var(--navy-900);
}

/* Secondary = navy outline. */
.btn--secondary {
  background-color: transparent;
  border-color: var(--navy-900);
  color: var(--navy-900);
}
.btn--secondary:hover {
  background-color: var(--navy-900);
  color: var(--white);
}

/* On a dark (navy) band, an outline button reads in white. */
.section--navy .btn--secondary {
  border-color: var(--white);
  color: var(--white);
}
.section--navy .btn--secondary:hover {
  background-color: var(--white);
  color: var(--navy-900);
}

.btn--block { width: 100%; }

/* ---- Card (shared surface for services/conditions) ---- */
.card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base),
              transform var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ==========================================================================
   SITE HEADER + PRIMARY NAVIGATION
   --------------------------------------------------------------------------
   Mobile-first: the nav is an off-canvas drawer opened by the hamburger.
   At >=1024px the same <nav> becomes a horizontal bar and the hamburger is
   hidden. Dropdowns are click/tap disclosure menus (driven by main.js) so
   they work on touch and the keyboard — never hover-only.
   ========================================================================== */
.site-header {
  --header-h: 64px;            /* drawer offset reads this (cascades to nav) */
  position: sticky;            /* sticky on scroll */
  top: 0;
  z-index: 100;
  background: var(--off-white);
  border-bottom: 1px solid var(--border-color);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}

/* ---- Wordmark (Cinzel) ---- */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--navy-900);
  white-space: nowrap;
}
.site-header__logo {
  height: 38px;
  width: auto;
  display: block;
}
.site-header__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}
.site-header__brand:hover .site-header__name { color: var(--navy-700); }

@media (min-width: 1024px) {
  .site-header__logo { height: 44px; }
  .site-header__name { font-size: 1.2rem; }
}

/* ---- Hamburger toggle (mobile only) ---- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--navy-900);
  cursor: pointer;
}
/* Three bars drawn with the middle element + its two pseudo-elements. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; left: 0; }
.nav-toggle__bars::after  { position: absolute; top: 7px;  left: 0; }
/* Morph into an X when the drawer is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---- Primary nav: mobile off-canvas drawer (base) ---- */
.primary-nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  z-index: 90;
  width: min(360px, 86vw);
  height: calc(100dvh - var(--header-h));
  padding: var(--space-3) var(--space-3) var(--space-6);
  background: var(--off-white);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
  transform: translateX(100%);   /* hidden off-screen */
  visibility: hidden;            /* removes from tab order while closed */
  transition: transform var(--transition-base), visibility var(--transition-base);
}
.primary-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}
.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.primary-nav__list a,
.dropdown__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--navy-900);
  text-decoration: none;
}
.primary-nav__list > li > a:hover,
.dropdown__trigger:hover { background: var(--beige-100); }
/* Current page indicator. */
.primary-nav__list a[aria-current="page"],
.dropdown__trigger.is-active { color: var(--gold-600); font-weight: 600; }

/* ---- Dropdown disclosure ---- */
.dropdown__trigger {
  justify-content: space-between;
  gap: var(--space-2);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
/* Chevron, rotates open. */
.dropdown__trigger::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}
.dropdown__trigger[aria-expanded="true"]::after { transform: rotate(-135deg); }

.dropdown__menu {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0 var(--space-2) var(--space-3);
  display: none;                /* JS toggles via aria-expanded on the trigger */
}
.dropdown__trigger[aria-expanded="true"] + .dropdown__menu { display: block; }
.dropdown__menu a {
  padding: 0.5rem var(--space-2);
  font-weight: 400;
  color: var(--navy-700);
}
.dropdown__menu a:hover { background: var(--beige-100); color: var(--navy-900); }
/* Current page inside a dropdown: keep the item the same navy as the rest of
   the menu and mark it with weight + a tint instead of gold, so the only gold
   in the row stays the "Coming Soon" tag. */
.dropdown__menu a[aria-current="page"] {
  color: var(--navy-900);
  font-weight: 600;
  background: var(--beige-100);
}
/* "Coming Soon" tag inside a dropdown item. */
.dropdown__tag {
  margin-left: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* CTA item. */
.primary-nav__cta { margin-top: var(--space-2); }
.primary-nav__cta .btn { width: 100%; }

/* ---- Backdrop behind the mobile drawer ---- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(28, 31, 38, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }
/* Lock background scroll while the drawer is open. */
body.nav-open { overflow: hidden; }

/* ---- Desktop: horizontal bar (>=1024px) ---- */
@media (min-width: 1024px) {
  .site-header { --header-h: 76px; }
  .nav-toggle,
  .nav-backdrop { display: none; }

  .primary-nav {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    visibility: visible;
  }
  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }
  .primary-nav__list > li { position: relative; } /* dropdown anchor */
  .primary-nav__list > li > a,
  .dropdown__trigger {
    width: auto;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
  }

  /* Desktop dropdown floats below its trigger. */
  .dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    padding: var(--space-2);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  .dropdown__menu a { border-radius: var(--radius-sm); }

  .primary-nav__cta { margin-top: 0; margin-left: var(--space-2); }
  .primary-nav__cta .btn { width: auto; }
}


/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
  background: var(--navy-900);
  color: var(--off-white);
}
/* Plain footer links (not buttons) read in gold on the dark navy. */
.site-footer a:not(.btn) {
  color: var(--gold-300);
  text-decoration: none;
}
.site-footer a:not(.btn):hover {
  color: var(--white);
  text-decoration: underline;
}
.site-footer p { color: rgba(250, 248, 244, 0.78); }

/* ---- Top region ---- */
.site-footer__top { padding-block: var(--space-6); }
.site-footer__inner {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--white);
}
.site-footer__logo { height: 40px; width: auto; display: block; }
.site-footer__brand:hover { color: var(--gold-300); text-decoration: none; }
.site-footer__tagline { font-style: italic; }
.site-footer__states strong,
.site-footer__hours strong { color: var(--white); }
.site-footer__creds { font-size: var(--fs-sm); color: rgba(250, 248, 244, 0.6); }

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--space-3);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.site-footer address {
  font-style: normal;
  display: grid;
  gap: var(--space-1);
  color: rgba(250, 248, 244, 0.85);
}
.site-footer__cta { margin-top: var(--space-3); }

/* ---- Crisis band ---- */
.site-footer__crisis {
  background: var(--navy-800);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-3);
}
.site-footer__crisis p { margin: 0; color: rgba(250, 248, 244, 0.88); }
.site-footer__crisis strong { color: var(--white); }

/* ---- Bottom bar ---- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
}
.site-footer__legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}
.site-footer__copy {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(250, 248, 244, 0.6);
}

@media (min-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1.5fr 1fr 1.2fr; }
}

/* ---- FAQ ACCORDION ----
   Progressive-enhancement pattern driven by main.js.
   Markup: a button[aria-expanded] toggles the panel that follows it.
   Without JS, panels remain visible (no content is hidden from no-JS users). */
.faq {
  border-top: 1px solid var(--border-color);
}
.faq__item {
  border-bottom: 1px solid var(--border-color);
}
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  background: none;
  border: 0;
  font-size: var(--fs-h6);
  font-weight: 600;
  color: var(--navy-900);
  text-align: left;
  cursor: pointer;
}
/* Plus/minus indicator, rotates when open. */
.faq__trigger::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-600);
  transition: transform var(--transition-base);
}
.faq__trigger[aria-expanded="true"]::after {
  content: "\2212"; /* minus sign */
}
.faq__panel {
  color: var(--text-muted);
}
/* Bottom spacing lives on the inner content so the panel can collapse cleanly
   (see the grid-rows glide in section 14). */
.faq__panel p {
  margin: 0;
  padding-bottom: var(--space-4);
}


/* ==========================================================================
   6. UTILITIES & MOTION
   ========================================================================== */

/* Screen-reader-only (kept in the a11y tree, hidden visually). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }
/* Hide an element on small screens (used to condense dense sections on mobile). */
@media (max-width: 767px) { .u-hide-mobile { display: none; } }

/* Visible focus state for all interactive elements (keyboard users). */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Gentle on-load fade-in ----
   One staggered fade for the hero + first section. JS adds .is-ready to
   <body> on load; until then elements sit at their start state. The whole
   effect is disabled for users who prefer reduced motion. */
/* Only hide the start state when JS is active (html.js is set synchronously
   by main.js). Without JS the content stays fully visible. */
.js .fade-in {
  opacity: 0;
  transform: translateY(12px);
}
.is-ready .fade-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--ease-out),
              transform 600ms var(--ease-out);
}
.is-ready .fade-in--delay-1 { transition-delay: 120ms; }
.is-ready .fade-in--delay-2 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Never leave reduced-motion users with hidden content. */
  .fade-in,
  .reveal,
  .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   7. PAGE CONTENT COMPONENTS
   --------------------------------------------------------------------------
   Reusable building blocks for page <main> content. Authored for the Home
   page but intentionally generic so service/condition pages reuse them.
   ========================================================================== */

/* ---- Shared section header (eyebrow + title + intro), centered ---- */
.section__head {
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  text-align: center;
}
.section__head p { margin-inline: auto; }

/* ---- HERO ---- */
.hero {
  padding-block: var(--space-6) var(--space-7);
  background: linear-gradient(180deg, var(--beige-100) 0%, var(--off-white) 100%);
  text-align: center;
}
.hero__inner { max-width: 760px; margin-inline: auto; }
.hero h1 { margin-bottom: var(--space-3); }
.hero .lead { margin-inline: auto; max-width: 620px; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero__textlink {
  font-weight: 600;
  color: var(--navy-link);
  text-decoration: none;
}
.hero__textlink::after { content: " \2192"; } /* → */
.hero__textlink:hover { color: var(--navy-900); text-decoration: underline; }
.hero__trustline {
  margin-top: var(--space-5);
  margin-bottom: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-700);
}
.hero__trustline .sep { color: var(--gold-600); margin-inline: 0.4rem; }

/* ---- TRUST STRIP ---- */
.trust-strip {
  background: var(--white);
  border-block: 1px solid var(--line);
}
.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0;
}
.trust-strip__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-700);
  text-align: left;
}
.trust-strip__item::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-500);
}

/* On narrow screens, items wrap to multiple lines — switch to a centered
   block with an inline dot so the bullet stays with the text instead of
   floating to the far left. */
@media (max-width: 640px) {
  .trust-strip__item {
    display: block;
    text-align: center;
  }
  .trust-strip__item::before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    position: relative;
    top: -2px;
  }
}

/* ---- NUMBERED STEPS (approach + how-it-works) ---- */
.steps {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-300);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}
.step__title { margin-bottom: var(--space-2); }
.step p { margin: 0; color: var(--text-muted); }

@media (min-width: 768px) {
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .steps--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- LINK CARDS (service-card / condition-card) ----
   The whole card is a single anchor — one frictionless tap target. */
.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.link-card h3 { margin: 0; color: var(--navy-900); }
.link-card p { margin: 0; color: var(--text-muted); }
.link-card__more {
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: 600;
  color: var(--gold-600);
}
.link-card__more::after {
  content: " \2192";
  transition: margin-left var(--transition-fast);
}
.link-card:hover .link-card__more::after { margin-left: 0.25rem; }

/* ---- "Coming soon" tag row ---- */
.coming-soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.coming-soon__label { font-weight: 600; color: var(--text-muted); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: none;
}
a.tag:hover { border-color: var(--gold-500); color: var(--navy-900); }
.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}
/* A payer that is not live yet: same pill, muted, with a small status note. */
.tag--soon { color: var(--text-muted); border-style: dashed; }
.tag--soon::before { background: var(--line); }
.tag__note {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* ---- PROSE BLOCK (who he helps) ---- */
.prose-block {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}
.prose-block p { margin-inline: auto; font-size: var(--fs-lg); line-height: 1.7; }

/* ---- INSURANCE TAG ROW ---- */
.insurer-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block: var(--space-4);
  padding: 0;
  list-style: none;
}

/* ---- MEDIA OBJECT (about teaser) ---- */
.media {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: center;
}
.media__figure { margin: 0; }
.media__img {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.media__more {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--gold-600);
  text-decoration: none;
}
.media__more::after { content: " \2192"; }
.media__more:hover { color: var(--gold-300); }

@media (min-width: 768px) {
  .media { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); }
  /* Image on the right instead of the left. DOM order stays body-then-figure so
     the reading order still makes sense to screen readers and on mobile. */
  .media--reverse { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---- TESTIMONIAL SLOT (empty by design — never invent reviews) ---- */
.testimonial-slot {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-5);
  text-align: center;
  background: var(--off-white);
  border: 1px dashed var(--gold-300);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}
.testimonial-slot__mark {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gold-300);
}
.testimonial-slot p { margin: var(--space-2) auto 0; max-width: 48ch; }

/* ---- CLOSING CTA BAND ---- */
.cta-band { text-align: center; }
.cta-band__inner { max-width: 640px; margin-inline: auto; }
.cta-band .lead { color: rgba(250, 248, 244, 0.82); margin-inline: auto; }
.cta-band__actions { margin-top: var(--space-4); }
.cta-band__crisis {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: rgba(250, 248, 244, 0.7);
}
.cta-band__crisis a { color: var(--gold-300); }
.cta-band__crisis a:hover { color: var(--white); }


/* ==========================================================================
   8. ICONS, HERO ILLUSTRATION & MOTION (added in revision)
   --------------------------------------------------------------------------
   Custom on-brand SVG icons (from the sprite at the top of <body>), an
   animated hero graphic built on the logo's star/orbit motif, and a refined
   set of scroll-reveal + hover animations. All motion is disabled under
   prefers-reduced-motion (see the block at the end of the file).
   ========================================================================== */

/* ---- Inline icons (stroke, inherit color) ---- */
.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
/* Hidden sprite host. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icon tile — a soft gold square that holds an icon on cards & steps. */
.icon-tile {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--gold-100);
  color: var(--navy-900);
  transition: transform var(--transition-base), background-color var(--transition-base);
}
.icon-tile .icon { width: 28px; height: 28px; }

/* ---- Step blocks now lead with an icon tile + small index label ---- */
.step__index {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--gold-600);
}
.step__icon { margin-bottom: var(--space-3); }
.step:hover .icon-tile { transform: translateY(-3px); background: var(--gold-300); }

/* ---- Link cards lead with an icon tile ---- */
.link-card .icon-tile { margin-bottom: var(--space-1); }
.link-card:hover .icon-tile { transform: translateY(-3px) scale(1.03); background: var(--gold-300); }

/* ==========================================================================
   HERO ILLUSTRATION
   ========================================================================== */
.hero { overflow: hidden; } /* contain the floating art */

.hero__grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  grid-template-columns: 1fr;
  text-align: center;
}
/* min-width:0 stops grid tracks from blowing past the viewport (the default
   min-width:auto would expand a track to its content's min-size). */
.hero__content,
.hero__art { min-width: 0; }
.hero__content { max-width: 640px; margin-inline: auto; }
.hero__content .lead { margin-inline: auto; }
.hero__art {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}
.hero__art svg { width: 100%; height: auto; display: block; }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-6);
    text-align: left;
  }
  .hero__content { margin-inline: 0; }
  .hero__content .lead { margin-inline: 0; }
  .hero__actions { justify-content: flex-start; }
  .hero__art { max-width: 440px; margin-inline: 0; }
}

/* Floating + twinkling pieces of the hero art. */
.hero-art__float { transform-box: fill-box; transform-origin: center; animation: heroFloat 7s ease-in-out infinite; }
.hero-art__halo  { transform-box: fill-box; transform-origin: center; animation: heroPulse 6s ease-in-out infinite; }
.hero-art__orbiter {
  /* Rides the orbit ellipse (cx230 cy240 rx170 ry74). */
  offset-path: path("M60 240 a170 74 0 1 0 340 0 a170 74 0 1 0 -340 0");
  offset-rotate: 0deg;
  animation: heroOrbit 16s linear infinite;
}
.hero-art__spark { transform-box: fill-box; transform-origin: center; animation: heroTwinkle 3.2s ease-in-out infinite; }
.hero-art__spark--2 { animation-delay: 1.1s; }
.hero-art__spark--3 { animation-delay: 2s; }

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes heroPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes heroTwinkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.45; }
}
/* The orbiter rides the ellipse path defined via offset-path. */
@keyframes heroOrbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* ==========================================================================
   SCROLL REVEAL (IntersectionObserver adds .is-visible)
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
/* Staggered children inside a revealed group. */
.js .reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
}
.reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: 0.40s; }


/* ==========================================================================
   9. APPROACH — HOVER-EXPAND STRIP (added in revision)
   --------------------------------------------------------------------------
   A row of image panels; the hovered/focused/active one expands while the
   others collapse to slivers (their titles rotate vertical). Pure CSS +
   a little JS (initExpandStrip) for persistent active state and click.
   CSS :hover/:focus-within is the no-JS fallback. Stacks to full cards on
   mobile, where every panel is fully open and readable.
   ========================================================================== */
.expand-strip {
  display: flex;
  gap: var(--space-2);
}

.expand-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 24rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--navy-800);
  transition: flex-grow var(--transition-base);
}

/* The active / hovered / focused panel grows; siblings stay slim. */
.expand-panel.is-active,
.expand-panel:hover,
.expand-panel:focus-within { flex-grow: 3.4; }

.expand-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.expand-panel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(32, 40, 64, 0.82) 0%, rgba(32, 40, 64, 0.30) 45%, rgba(32, 40, 64, 0.12) 100%);
}

.expand-panel__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
  color: var(--off-white);
}
/* Icon tile reads on the dark image. */
.expand-panel__icon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  backdrop-filter: blur(2px);
}
/* Step label: hidden in the slim collapsed tile, shown once expanded.
   White + a soft shadow, since it sits over the brightest part of the photo
   and the gold read as low-contrast on small screens. */
.expand-panel .step__index {
  color: var(--white);
  display: none;
  text-shadow: 0 1px 4px rgba(20, 26, 44, 0.75);
}
.expand-panel.is-active .step__index,
.expand-panel:hover .step__index,
.expand-panel:focus-within .step__index { display: block; }

/* Title is small + vertical while collapsed (so it fits the slim tile),
   then grows + turns horizontal once the tile expands. */
.expand-panel__title {
  margin: 0 0 var(--space-2);
  color: var(--white);
  font-size: 1rem;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  transition: font-size var(--transition-base);
}
.expand-panel.is-active .expand-panel__title,
.expand-panel:hover .expand-panel__title,
.expand-panel:focus-within .expand-panel__title {
  font-size: var(--fs-h3);
  letter-spacing: var(--letter-spacing-heading);
  writing-mode: horizontal-tb;
  transform: none;
  white-space: normal;
}

/* Description is revealed only when the panel is open. */
.expand-panel__desc {
  margin: 0;
  max-width: 34ch;
  color: rgba(250, 248, 244, 0.88);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.expand-panel.is-active .expand-panel__desc,
.expand-panel:hover .expand-panel__desc,
.expand-panel:focus-within .expand-panel__desc { opacity: 1; }

/* ---- Mobile: stack into full, fully-readable cards ---- */
@media (max-width: 767px) {
  .expand-strip { flex-direction: column; }
  .expand-panel {
    flex: none;
    height: auto;
    min-height: 13rem;
  }
  .expand-panel__body { position: relative; } /* let content set height */
  .expand-panel__title {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
    font-size: var(--fs-h4);
    letter-spacing: var(--letter-spacing-heading);
  }
  .expand-panel__desc { opacity: 1; }
  .expand-panel__icon { margin-bottom: var(--space-3); }
  .expand-panel .step__index { display: block; font-size: var(--fs-sm); }
  /* The mobile card is short, so all of the copy sits over the photo rather
     than the dark foot of the gradient. Deepen the scrim to match. */
  .expand-panel__scrim {
    background: linear-gradient(to top,
                rgba(32, 40, 64, 0.88) 0%,
                rgba(32, 40, 64, 0.68) 55%,
                rgba(32, 40, 64, 0.52) 100%);
  }
}


/* ==========================================================================
   10. SERVICES — SPLIT EXPLORER (added in revision)
   --------------------------------------------------------------------------
   Left: a selectable list of services. Right: a preview panel that
   cross-fades to the hovered/focused/active service (initServiceExplorer in
   main.js). No-JS: the first preview stays visible and every row is a link.
   Mobile: the list hides and the previews stack as full cards.
   ========================================================================== */
.svc-explorer {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .svc-explorer {
    grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
    gap: var(--space-5);
    align-items: start;
  }
}

/* ---- Left list ---- */
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.svc-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--navy-900);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.svc-row__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--gold-100);
  color: var(--navy-900);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.svc-row__icon .icon { width: 22px; height: 22px; }
.svc-row__name { flex: 1 1 auto; font-weight: 600; }
.svc-row__arrow {
  color: var(--gold-600);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
/* Active / hovered / focused row */
.svc-row.is-active,
.svc-row:hover,
.svc-row:focus-visible {
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.svc-row.is-active .svc-row__arrow,
.svc-row:hover .svc-row__arrow,
.svc-row:focus-visible .svc-row__arrow { opacity: 1; transform: none; }
.svc-row.is-active .svc-row__icon { background: var(--gold-500); }

.svc-list__divider {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--line);
}
/* Coming-soon rows read as muted. A <span> row is inert; an <a> row still
   links out to its explainer page (TMS has one, Spravato doesn't yet). */
.svc-row--soon { color: var(--muted); }
span.svc-row--soon { cursor: default; }
.svc-row--soon .svc-row__name { font-weight: 500; }
.svc-row--soon .dropdown__tag { margin-left: auto; }

/* ---- Right stage (cross-fading previews) ---- */
.svc-stage { display: grid; }
.svc-preview {
  grid-area: 1 / 1;            /* stack all previews in one cell */
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base);
}
.svc-preview.is-active { opacity: 1; visibility: visible; }
/* Big faint brand icon watermark in the corner. */
.svc-preview__ghost {
  position: absolute;
  top: -28px;
  right: -28px;
  color: var(--gold-500);
  opacity: 0.07;
  pointer-events: none;
}
.svc-preview__ghost .icon { width: 168px; height: 168px; stroke-width: 1.25; }
.svc-preview__icon { margin-bottom: var(--space-3); }
.svc-preview__title { margin-bottom: var(--space-2); }
.svc-preview__desc { color: var(--text-muted); margin-bottom: var(--space-4); }

/* Coming-soon line is desktop-hidden (it's in the list there), mobile-shown. */
.svc-soon-mobile { display: none; }

/* ---- Mobile: hide list, stack previews as cards ---- */
@media (max-width: 767px) {
  .svc-list { display: none; }
  .svc-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .svc-preview {
    grid-area: auto;
    position: static;
    opacity: 1;
    visibility: visible;
  }
  .svc-soon-mobile { display: flex; justify-content: center; margin-top: var(--space-4); }
}


/* ==========================================================================
   11. CONDITIONS — RECOGNITION REVEAL (added in revision)
   --------------------------------------------------------------------------
   Default face shows an empathetic prompt + the condition label. On hover /
   focus a navy panel cross-fades in (icon, name, reassurance, CTA). Pure CSS;
   each card is a link, so touch users simply tap through to the detail page.
   ========================================================================== */
.cond-card {
  position: relative;
  display: grid;                 /* face + reveal share one cell */
  min-height: 15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.cond-card:hover,
.cond-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.cond-card__face,
.cond-card__reveal {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}

/* Default face */
.cond-card__face {
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--beige-100);
}
.cond-card__feeling {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy-900);
  text-wrap: balance;
}
.cond-card__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* Reveal panel (navy), fades in over the face */
.cond-card__reveal {
  justify-content: flex-end;
  gap: var(--space-2);
  background: var(--navy-900);
  color: var(--off-white);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.cond-card:hover .cond-card__reveal,
.cond-card:focus-visible .cond-card__reveal { opacity: 1; }

.cond-card__icon {
  margin-bottom: var(--space-2);
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}
.cond-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--white);
}
.cond-card__desc { color: rgba(250, 248, 244, 0.85); }
.cond-card__more {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--gold-300);
}

.cond-more {
  margin-top: var(--space-5);
}
.cond-more p {
  margin-bottom: var(--space-3);
  color: var(--text-body);
}

/* ---- Conditions on mobile: no hover, so rest on the informative panel ---- */
@media (max-width: 767px) {
  .cond-card { display: block; min-height: 0; }
  .cond-card__face { display: none; }          /* the hook is a desktop delight */
  .cond-card__reveal { position: relative; opacity: 1; }
}


/* ==========================================================================
   12. GETTING STARTED — JOURNEY TIMELINE (added in revision)
   --------------------------------------------------------------------------
   Three steps joined by a gold connector. Desktop: horizontal line that
   draws in on scroll (when JS adds .is-visible). Mobile: a vertical timeline
   with the node on the left. With no JS, the line simply shows in full.
   ========================================================================== */
.journey {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.journey__step { position: relative; }
.journey__node {
  position: relative;
  z-index: 1;                    /* sits over the connector line */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
  background: var(--off-white);  /* matches page bg so the line tucks behind */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy-900);
}
.journey__icon { margin-bottom: var(--space-3); }
.journey__title { margin-bottom: var(--space-2); }
.journey__step p { margin: 0; color: var(--text-muted); }

/* Desktop horizontal connector (<li class="journey__line">) — hidden by default. */
.journey__line { display: none; }

/* ---- Mobile: vertical timeline (node left, content right) ---- */
@media (max-width: 767px) {
  .journey__step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: var(--space-3);
    align-items: start;
  }
  .journey__node { grid-column: 1; grid-row: 1 / span 3; }
  .journey__icon,
  .journey__title,
  .journey__step p { grid-column: 2; }
  .journey__icon { margin-bottom: var(--space-2); }
  /* connector segment from this node down to the next */
  .journey__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    width: 2px;
    height: calc(100% - 44px + var(--space-5));
    background: var(--gold-500);
    opacity: 0.5;
  }
}

/* ---- Desktop: horizontal, centered, with the drawing line ---- */
@media (min-width: 768px) {
  .journey { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .journey__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .journey__node { margin-bottom: var(--space-3); }
  .journey__step p { max-width: 30ch; }

  .journey__line {
    display: block;
    position: absolute;
    top: 22px;                   /* node vertical centre (44 / 2) */
    left: 16.66%;                /* ≈ centre of the first column */
    right: 16.66%;               /* ≈ centre of the last column */
    height: 2px;
    background: var(--gold-500);
    opacity: 0.5;
    transform-origin: left center;
  }
  /* Only animate (and pre-hide) when JS is present; no-JS shows it full. */
  .js .journey__line {
    transform: scaleX(0);
    transition: transform 0.9s var(--ease-out) 0.15s;
  }
  .js .journey.is-visible .journey__line { transform: scaleX(1); }
}


/* ==========================================================================
   13. INNER PAGES — shared building blocks
   --------------------------------------------------------------------------
   Reused across About and the service/condition/legal pages.
   ========================================================================== */

/* Compact page hero (intro band at the top of an inner page). */
.page-hero { padding-block: var(--space-6); text-align: center; }
.page-hero__inner { max-width: 760px; margin-inline: auto; }
.page-hero h1 { margin-bottom: var(--space-3); }
.page-hero .lead { margin-inline: auto; }

/* Media object: top-align columns (for long-form story copy beside an image). */
.media--top { align-items: start; }

/* Credentials / qualifications list. */
.creds {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.creds__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h5);
}
.creds__title--spaced { margin-top: var(--space-5); }
.cred { margin-bottom: var(--space-3); }
.cred__term { margin: 0; font-weight: 600; color: var(--navy-900); }
.cred__detail { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.creds__note {
  margin-top: var(--space-5);
  max-width: var(--container-narrow);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
@media (min-width: 768px) {
  .creds { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}


/* ---- Service / condition detail pages ---- */
/* Wide feature image inside a media object (landscape hero/feature shots). */
.media--feature .media__img {
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* Gold-tick checklist for "who it helps" / "what to expect" lists. */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 62ch;
}
.checklist li {
  position: relative;
  padding-left: 2rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.15em;
  width: 0.5rem;
  height: 0.9rem;
  border-right: 2px solid var(--gold-500);
  border-bottom: 2px solid var(--gold-500);
  transform: rotate(45deg);
}
/* Center a checklist when it sits under a centered section head. */
.checklist--center { margin-inline: auto; width: fit-content; text-align: left; }

/* ---- NOTICE ----
   A short, bordered aside for status copy that shouldn't read as body text
   (e.g. "this service isn't live yet"). */
.notice {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-700);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.notice strong { color: var(--navy-900); }
.notice--soon { border-left-color: var(--gold-600); }


/* ==========================================================================
   14. INNER-PAGE MOTION (added in revision)
   --------------------------------------------------------------------------
   Directional/zoom reveal modifiers, a staggered hero entrance, and a smooth
   FAQ accordion glide. All build on the .reveal engine and the
   prefers-reduced-motion guard already in section 6.
   ========================================================================== */

/* Reveal direction modifiers — these only change the START transform; the
   existing `.reveal.is-visible { transform: none }` rule animates them home.
   (Defined after `.js .reveal` so they win on equal specificity.) */
.js .reveal--left  { transform: translate3d(-2rem, 0, 0); }
.js .reveal--right { transform: translate3d(2rem, 0, 0); }
.js .reveal--zoom  { transform: scale(1.05); }

/* Smooth FAQ accordion: animate open/closed via grid-template-rows.
   JS toggles aria-expanded (drives the CSS) and `inert` (keeps collapsed
   answers out of the tab order / a11y tree). No-JS: answers show open. */
.js .faq__panel {
  overflow: hidden;
  max-height: 0;                 /* fully collapsed on load (no transition yet) */
  opacity: 0;
}
.js .faq__trigger[aria-expanded="true"] + .faq__panel {
  max-height: 40rem;             /* generous; answers are short */
  opacity: 1;
}
/* Only animate after first paint, so panels don't visibly collapse on load. */
body.is-ready .faq__panel {
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

/* (G) Nudge the icon tile on any card hover, matching the link-card behavior. */
.card:hover .icon-tile { transform: translateY(-3px); }


/* (F) Gold accent line under section eyebrows; draws in on reveal.
   Centered under centered heads, left-aligned elsewhere. No-JS: shown full. */
.eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--gold-500);
  transform-origin: left center;
}
.section__head .eyebrow::after,
.page-hero__inner .eyebrow::after {
  margin-inline: auto;
  transform-origin: center;
}
.js .reveal .eyebrow::after,
.js .reveal-group .eyebrow::after {
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-out) 0.1s;
}
.js .reveal.is-visible .eyebrow::after,
.js .reveal-group.is-visible .eyebrow::after { transform: scaleX(1); }


/* ==========================================================================
   15. INNER-PAGE IMAGERY (added in revision)
   --------------------------------------------------------------------------
   Adds photographic weight to the otherwise text-heavy inner pages: a split
   page-hero (intro copy beside an image), a full-width interstitial "mood
   band" with a reassuring pull-quote, and thumbnail images on the related
   link cards. The imagery here is atmospheric AI-generated stock (no people);
   real photos of Dr. Nguyen can swap into the same crops later.
   ========================================================================== */

/* ---- Split page hero: intro copy beside an atmospheric image ---- */
.page-hero--split { text-align: left; }
.page-hero--split .page-hero__inner {
  max-width: var(--container-max);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: center;
}
.page-hero--split .lead { margin-inline: 0; }
.page-hero--split .eyebrow::after { margin-inline: 0; transform-origin: left center; }
.page-hero__content { max-width: 34rem; }
/* The hero image is a desktop enhancement. On mobile it's hidden so it doesn't
   stack directly above the "What it is" feature image (two photos back-to-back). */
.page-hero__figure { margin: 0; display: none; }
.page-hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .page-hero--split .page-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-6);
  }
  .page-hero__figure { display: block; }
  .page-hero__img { aspect-ratio: 5 / 4; }
}

/* ---- Interstitial mood band: image + navy scrim + pull-quote ---- */
.imgband {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  padding: clamp(var(--space-5), 7vw, var(--space-7)) var(--space-4);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
  background: var(--navy-900);
}
.imgband__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.imgband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(32, 40, 64, 0.5), rgba(32, 40, 64, 0.72));
}
.imgband__quote {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--white);
}
/* A plain full-width photograph with a caption underneath. Unlike .imgband there
   is no navy scrim, so it's the right choice when the people in the shot are the
   point and their faces need to stay clearly visible. */
.figure-wide {
  /* Longhands, not the `margin` shorthand: this rule sits below the .mt-* spacing
     utilities, and a shorthand here would silently reset the top margin they set. */
  margin-inline: auto;
  margin-bottom: var(--space-6);
  max-width: var(--container-narrow);
}
.figure-wide__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.figure-wide__caption {
  margin-top: var(--space-3);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.imgband__quote::before { content: "\201C"; }
.imgband__quote::after  { content: "\201D"; }

/* Subtle scale-in as the band scrolls into view (rides the .reveal engine). */
.js .imgband .imgband__img { transform: scale(1.06); transition: transform 1.2s var(--ease-out); }
.js .imgband.is-visible .imgband__img { transform: scale(1); }

/* ---- Thumbnail image on related / "keep exploring" link cards ---- */
.link-card--media { overflow: hidden; }
.link-card__thumb {
  display: block;
  width: calc(100% + 2 * var(--space-4));
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-1);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.link-card--media:hover .link-card__thumb { transform: scale(1.04); }