/* ==========================================================================
   Little Luminaries Therapy Services — site styles

   T207 design reset (September 2026). A warm, whimsical, bold, photo-led
   system translated from the Homegrown Therapy reference into the Little
   Luminaries firefly world: one display face (Fredoka since the playful reset) and one readable
   sans (Nunito); the established cream / navy / muted-blue / gold
   family; the four original firefly art files; neutral photography
   slots until the commissioned photography lands; and small, calm
   moments of motion that switch off under prefers-reduced-motion.

   Mobile-first. Sections:
     1 fonts · 2 tokens · 3 base · 4 layout & text utilities · 5 buttons ·
     6 header · 7 footer · 8 breadcrumbs · 9 photography placeholders ·
     10 firefly art & motion · 11 shared modules (edges, CTA band, lists) ·
     12 homepage · 13 interior layouts · 14 resources & articles ·
     15 contact, rates, careers, and legal pages
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, latin, variable) ----------
   Playful-reset (September 2026): Fredoka for headings (round, friendly,
   still easy to read), Nunito for body text (soft rounded terminals), and
   Caveat as the handwritten "note in the margin" voice for eyebrows and
   little annotations. Spectral SC (bold) sets the header wordmark in the
   serif capitals of the Little Luminaries logo. All SIL Open Font License. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/fredoka-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/nunito-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/nunito-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/spectral-sc-700.woff2') format('woff2');
}
/* If Fredoka is slow or fails, headings fall back to the phone's own Arial,
   Helvetica or Roboto, shrunk to Fredoka's width so long words such as
   "communication" still fit on a line instead of breaking mid-word. */
@font-face {
  font-family: 'Fredoka Fallback';
  font-weight: 300 499;
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'), local('Roboto-Regular'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 93%;
}
@font-face {
  font-family: 'Fredoka Fallback';
  font-weight: 500 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
  size-adjust: 93%;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/caveat-var.woff2') format('woff2');
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Established brand family (unchanged hues), plus two working shades of it. */
  --cream: hsl(45, 76%, 89%);
  --cream-soft: hsl(45, 70%, 93%);
  --paper: #fffdf8;
  --navy: hsl(200.69, 46.77%, 24.31%);     /* brand "black": #21475b */
  --midnight: hsl(203, 50%, 16%);           /* deeper navy for the hero and footer */
  --deep: hsl(199.64, 44.72%, 24.12%);
  --teal: hsl(199.2, 34.25%, 42.94%);
  --teal-dark: #365d70;                     /* text-safe accent on light grounds */
  --sky: hsl(203, 36%, 82%);                /* the muted-blue section colour */
  --sky-soft: hsl(203, 34%, 90%);
  --pale: hsl(201.43, 17.07%, 83.92%);
  --gold: #f5c242;                          /* firefly gold, from the logo mark */
  --gold-bright: #ffd35e;
  --gold-ink: #8a5a12;                      /* gold-brown for text on cream (5.7:1) */
  --sage: hsl(96, 12%, 55%);                /* leaf tone from the art kit, accents only */
  --white: #ffffff;
  --ink: var(--navy);

  --line: hsla(200.69, 46.77%, 24.31%, .16);
  --line-strong: hsla(200.69, 46.77%, 24.31%, .3);
  --line-on-dark: hsla(45, 75%, 88%, .22);

  --font-display: 'Fredoka', 'Fredoka Fallback', 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --font-logo: 'Spectral SC', 'Iowan Old Style', Georgia, serif;

  --container: 1240px;
  --pad-x: clamp(min(1.1rem, 18px), 4vw, 2.75rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --sec-y: clamp(2.5rem, 4.5vw, 5rem); /* T242: 40–80px-ish major bands */
  --hero-y: clamp(1.5rem, 3vw, 2.75rem);
  --header-h: 72px;
  --radius: 18px;
  --radius-sm: 10px;
  /* Organic photo shapes: one softened corner or a gentle blob, never a circle. */
  --shape-a: var(--radius);
  --shape-b: var(--radius);
  --shape-c: var(--radius);
  --blob: var(--radius);

  /* Shared tokens from DESIGN.md (September 2026 site check). */
  --card: #fffaf0;                          /* cream card, readable on any sky */
  --on-dark: hsl(45, 76%, 93%);             /* moonlight text on night skies */
  --radius-inner: 22px;                     /* icons, inner tiles, photos inside cards */
  --radius-card: 28px;                      /* every card */
  --radius-panel: 34px;                     /* large feature panels */
  --radius-pill: 999px;                     /* buttons, chips, pills */
  --shadow: 0 8px 24px hsla(200.69, 46.77%, 24.31%, .12);
  --shadow-soft: 0 4px 12px hsla(200.69, 46.77%, 24.31%, .08);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--midnight);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.05;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.5rem + 3.1vw, 4.5rem); font-weight: 650; }
h2 { font-size: clamp(2rem, 1.45rem + 2.3vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.8rem); line-height: 1.15; }
h4 { font-family: var(--font-body); font-weight: 800; font-size: 1.1rem; line-height: 1.3; letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }
strong { font-weight: 800; }
em { font-style: italic; }
a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.theme-navy :focus-visible, .theme-midnight :focus-visible, .site-footer :focus-visible,
body.hero-dark .site-header :focus-visible, .ph--dark :focus-visible,
.skip-link:focus-visible, .mobile-consult :focus-visible, .w-neighbor--listen :focus-visible,
body.world-page .crumbs :focus-visible, body.night-page .crumbs :focus-visible { outline-color: var(--gold); }
::selection { background: var(--gold); color: var(--midnight); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--midnight); color: var(--cream); padding: .7rem 1.1rem; border-radius: 0 0 12px 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }
.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;
}
[hidden] { display: none !important; }
a, p, li, dd, dt, h1, h2, h3, strong, small, address { overflow-wrap: anywhere; }

/* ---------- 4. Layout & text utilities ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.container--wide { max-width: 1480px; }
.narrow { max-width: 780px; }
.measure { max-width: 62ch; }
.center { text-align: center; }
.center .lead, .center .measure { margin-inline: auto; }
.section { position: relative; padding-block: var(--sec-y); }
.section--tight { padding-block: var(--space-3); }
.theme-cream { background: var(--cream); color: var(--navy); }
.theme-paper { background: var(--paper); color: var(--navy); }
.theme-sky { background: var(--sky); color: var(--navy); }
.theme-sky-soft { background: var(--sky-soft); color: var(--navy); }
.theme-navy { background: var(--navy); color: var(--cream); }
.theme-midnight { background: var(--midnight); color: var(--cream); }
.theme-navy h1, .theme-navy h2, .theme-navy h3, .theme-navy h4,
.theme-midnight h1, .theme-midnight h2, .theme-midnight h3, .theme-midnight h4 { color: var(--cream); }
.theme-navy a, .theme-midnight a { color: var(--cream); }
.theme-navy a:hover, .theme-midnight a:hover { color: var(--gold); }

.eyebrow {
  display: block;
  margin: 0 0 var(--space-1);
  font: 800 .8rem/1.4 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.theme-navy .eyebrow, .theme-midnight .eyebrow { color: var(--gold); }
.lead {
  font-size: clamp(1.12rem, 1rem + .45vw, 1.3rem);
  line-height: 1.55;
  max-width: 58ch;
}
.flow > * + * { margin-top: 1em; }
.flow > :last-child, .stack > :last-child { margin-bottom: 0; }
.section-head { max-width: 720px; margin-bottom: var(--space-3); }
.section-head h2 { margin-bottom: .4em; }
.section-head > :last-child { margin-bottom: 0; }
.section-head--split { max-width: none; display: grid; gap: .75rem 3rem; align-items: end; }
.section-head--split > p { max-width: 46ch; }
/* Links that lead somewhere next read as clear, soft buttons (not small
   arrow links), so they are easy to spot and tap. */
.text-link {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1.15rem; justify-self: start; align-self: flex-start;
  border: 2px solid currentColor; border-radius: var(--radius-pill); background: hsla(45, 100%, 70%, .16);
  font: 600 1rem/1.25 var(--font-display);
  color: var(--navy);
  text-decoration: none;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.text-link:hover { background: var(--navy); border-color: var(--navy); color: var(--cream); transform: translateY(-2px); }
.text-link .arrow, .btn .arrow { display: inline-block; transition: transform .2s var(--ease); }
.text-link:hover .arrow, .btn:hover .arrow { transform: translateX(4px); }
.theme-navy .text-link, .theme-midnight .text-link { color: var(--cream); background: hsla(45, 100%, 70%, .1); }
.theme-navy .text-link:hover, .theme-midnight .text-link:hover { background: var(--gold); border-color: var(--gold); color: var(--midnight); }
.ext-mark { width: .7em; height: .7em; margin-left: .3em; display: inline-block; vertical-align: baseline; }
.note {
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--paper);
  font-size: .96rem;
}
.note > :last-child { margin-bottom: 0; }
.theme-navy .note, .theme-midnight .note { background: hsla(45, 75%, 95%, .08); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px;
  padding: .85rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font: 800 1rem/1.2 var(--font-body);
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  max-width: 100%;
  transition: transform .18s var(--ease), background-color .18s, color .18s, box-shadow .18s;
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: translateY(1px) scale(.97); transition-duration: .08s; }
.btn-primary { background: var(--navy); color: var(--cream); }
.btn-primary:hover { background: var(--midnight); color: var(--white); box-shadow: var(--shadow-soft); }
.btn-gold { background: var(--gold); color: var(--midnight); }
.btn-gold:hover { background: var(--gold-bright); color: var(--midnight); box-shadow: 0 12px 30px hsla(43, 90%, 61%, .35); }
.btn-outline { background: transparent; color: var(--navy); border-color: currentColor; }
.btn-outline:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.theme-navy .btn-primary, .theme-midnight .btn-primary { background: var(--gold); color: var(--midnight); }
.theme-navy .btn-primary:hover, .theme-midnight .btn-primary:hover { background: var(--gold-bright); color: var(--midnight); box-shadow: 0 12px 30px hsla(43, 90%, 61%, .3); }
.theme-navy .btn-outline, .theme-midnight .btn-outline { color: var(--cream); border-color: currentColor; }
.theme-navy .btn-outline:hover, .theme-midnight .btn-outline:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.btn--lg { min-height: 56px; padding: 1rem 2.2rem; font-size: 1.08rem; }
/* A clear but quieter button for dark skies. */
.btn-ghost { background: hsla(45, 100%, 70%, .12); color: var(--on-dark); border-color: hsla(45, 90%, 80%, .8); }
.btn-ghost:hover { background: var(--on-dark); color: var(--navy); border-color: var(--on-dark); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.5rem 0 0; }
.actions--center { justify-content: center; }
.quiet-link {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-weight: 800; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; text-decoration-color: var(--gold);
}
.quiet-link:hover { color: inherit; text-decoration-color: currentColor; }

/* ---------- 6. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px hsla(200.69, 46.77%, 24.31%, .12); }
body.hero-dark .site-header { background: var(--midnight); color: var(--cream); border-bottom-color: hsla(45, 75%, 88%, .1); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
}
.brand-mark { width: 42px; height: auto; flex-shrink: 0; }
.brand-word {
  font-family: var(--font-logo);
  font-weight: 700;
  /* The wordmark is a logo: it stays inside the header (never pushing the
     menu button off) even when a parent has large text turned on. */
  font-size: min(1.1rem, 5.4vw, 18px);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  min-width: 0;
  overflow-wrap: normal;
}
.brand-word small {
  display: block;
  margin-top: .32rem;
  font: 800 min(.55rem, 2.7vw, 9px)/1 var(--font-body);
  letter-spacing: .24em;
  opacity: .82;
}
.header-cta { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  margin-left: auto;
  border: 0; border-radius: 12px;
  background: transparent; color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle svg { width: 28px; height: 28px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.site-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; top: var(--header-h);
  z-index: 39;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem var(--pad-x) 1.5rem;
  background: var(--cream);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
body.hero-dark .site-nav { background: var(--midnight); color: var(--cream); }
.site-nav.open { display: block; }
body.nav-open { overflow: hidden; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav-list > li { margin: 0; }
.nav-list > li + li { border-top: 1px solid var(--line); }
body.hero-dark .nav-list > li + li { border-top-color: var(--line-on-dark); }
.nav-list a:not(.btn) {
  position: relative;
  display: flex; align-items: center;
  min-height: 54px;
  padding: .6rem .25rem;
  color: inherit;
  font: 800 1.15rem/1.2 var(--font-body);
  text-decoration: none;
}
.nav-list a[aria-current="page"]:not(.btn) { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em; text-decoration-color: var(--gold); }
.nav-cta-li { border-top: 0 !important; padding: 1rem 0 .25rem; }
.nav-cta-li .btn { width: 100%; }
body.hero-dark .nav-cta-li .btn-primary { background: var(--gold); color: var(--midnight); }
@media (min-width: 480px) {
  .header-cta { display: inline-flex; min-height: 44px; padding: min(.55rem, 9px) min(1.1rem, 18px); font-size: min(.92rem, 16px); white-space: nowrap; margin-left: auto; }
  .nav-toggle { margin-left: 0; }
  body.hero-dark .header-cta.btn-primary { background: var(--gold); color: var(--midnight); }
}
@media (min-width: 901px) {
  .nav-toggle, .header-cta { display: none; }
  .brand-mark { width: 46px; }
  .brand-word { font-size: min(1.15rem, 19px); }
  .site-nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
  }
  body.hero-dark .site-nav { background: transparent; }
  .nav-list { flex-direction: row; align-items: center; gap: .15rem; }
  .nav-list > li + li { border-top: 0; }
  .nav-list a:not(.btn) {
    min-height: 44px;
    padding: .5rem .85rem;
    border-radius: var(--radius-pill);
    font-size: 1rem;
  }
  .nav-list a[aria-current="page"]:not(.btn) { text-decoration: none; }
  .nav-list a:not(.btn)::after {
    content: '';
    position: absolute; left: .85rem; right: .85rem; bottom: .42rem;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
  }
  .nav-list a:not(.btn):hover::after, .nav-list a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
  .nav-cta-li { padding: 0; margin-left: .6rem; }
  .nav-cta-li .btn { width: auto; min-height: 44px; padding: .6rem 1.3rem; font-size: .95rem; }
}

/* ---------- 7. Footer ---------- */
.site-footer {
  position: relative;
  background: var(--midnight);
  color: var(--cream);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) 1.5rem;
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.footer-brand { padding-bottom: 1.25rem; }
.footer-brand .brand { color: var(--cream); }
.footer-tagline {
  margin: 1rem 0 .25rem;
  max-width: 24ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--gold);
}
.site-footer .footer-col > h2 {
  margin: 0 0 .5rem;
  font: 800 .8rem/1.4 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: .96rem; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer-address { font-style: normal; margin: 0 0 .4rem; line-height: 1.5; }
.footer-bottom {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-on-dark);
  font-size: .86rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
}
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin: 0; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer-disclaimer { margin: 0; opacity: .78; max-width: 62ch; }
.social-row { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--cream);
}
.social-row a:hover { background: hsla(45, 75%, 88%, .1); color: var(--gold); }
.social-row svg { width: 20px; height: 20px; fill: currentColor; }
/* Phones: the three link groups collapse into accordions (buttons are
   injected by site.js; without JS every link simply shows). */
.footer-acc { border-top: 1px solid var(--line-on-dark); }
.footer-acc-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 50px;
  padding: .6rem .1rem;
  border: 0; background: transparent;
  color: var(--gold);
  font: 800 .8rem/1.4 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.footer-acc-trigger::after {
  content: '';
  flex-shrink: 0;
  width: .55rem; height: .55rem;
  margin-right: .35rem;
  border-right: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  transform: rotate(45deg);
  transition: transform .18s var(--ease);
}
.footer-acc-trigger[aria-expanded="true"]::after { transform: rotate(225deg); }
.footer-acc-panel { padding-bottom: .75rem; }
.footer-contact { border-top: 1px solid var(--line-on-dark); padding-top: .9rem; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 2.5rem; }
  .footer-brand { padding-bottom: 0; }
  .footer-acc, .footer-contact { border-top: 0; padding-top: 0; }
  .site-footer .footer-col > h2 { margin-bottom: .75rem; }
  .footer-col li + li { margin-top: .1rem; }
}

/* ---------- 8. Breadcrumbs ---------- */
.crumbs {
  font-size: .86rem;
  line-height: 1.5;
  padding-block: .75rem .25rem;
  background: var(--cream);
  color: var(--navy);
}
body.theme-paper-page .crumbs { background: var(--paper); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.crumbs li + li::before { content: '\203A'; opacity: .55; }
.crumbs a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: .2em; }
.crumbs [aria-current="page"] { font-weight: 800; }
.crumbs + main > .section:first-child { padding-top: var(--hero-y); }

/* ---------- 9. Photography placeholders ----------
   Shot briefs live in template comments. Add approved images and meaningful
   alt text inside these reserved containers, removing aria-hidden at that time. */
.ph {
  --ph-bg: hsl(204, 22%, 78%);
  --ph-ink: var(--navy);
  --ph-chip: hsla(45, 70%, 96%, .9);
  position: relative;
  display: grid;
  align-content: end;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: 160px;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, hsla(0, 0%, 100%, .06) 0 1px, transparent 2px 22px),
    radial-gradient(circle at 30% 20%, hsla(0, 0%, 100%, .28), transparent 55%),
    var(--ph-bg);
  color: var(--ph-ink);
}
.ph--dark { --ph-bg: hsl(204, 30%, 30%); }
.ph--wide { aspect-ratio: 21 / 9; }
.ph--landscape { aspect-ratio: 4 / 3; }
.ph--photo { aspect-ratio: 3 / 2; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--square { aspect-ratio: 1; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--shape-a { border-radius: var(--shape-a); }
.ph--shape-b { border-radius: var(--shape-b); }
.ph--shape-c { border-radius: var(--shape-c); }
.ph--blob { border-radius: var(--blob); }
.ph--fill { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* Real photographs share the same shapes. */
.photo { margin: 0; position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.photo--shape-a img { border-radius: var(--shape-a); }
.photo--shape-b img { border-radius: var(--shape-b); }
.photo--shape-c img { border-radius: var(--shape-c); }
.photo--portrait img { aspect-ratio: 4 / 5; }
.photo--square img { aspect-ratio: 1; }

/* ---------- 10. Firefly art & motion ----------
   The four supplied art files keep their transparent edges and never sit
   over text, faces, controls, or form fields. All of it is decorative
   (alt="" or aria-hidden) unless it carries meaning on an AAC heading. */
.art { pointer-events: none; user-select: none; }
.art img:not(.sprite) { width: 100%; height: auto; }
/* Small firefly glyph (inline SVG partial) used as an accent. */
.firefly-glyph { width: 34px; height: 34px; color: var(--navy); flex-shrink: 0; }
.firefly-glyph .glow { fill: var(--gold); }
.theme-navy .firefly-glyph, .theme-midnight .firefly-glyph { color: var(--cream); }
/* Glow dots: a few small independent pulses (never many, never over text). */
.glow-dots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.glow-dots i {
  position: absolute;
  width: var(--s, 8px); height: var(--s, 8px);
  left: var(--x); top: var(--y);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 4px hsla(43, 90%, 61%, .55);
  opacity: .75;
}
/* Curved section edges (inline SVG). */
.edge { position: absolute; left: 0; right: 0; height: clamp(26px, 5vw, 72px); pointer-events: none; }
.edge svg { width: 100%; height: 100%; display: block; }
.edge--bottom { bottom: -1px; }
.edge--top { top: -1px; transform: rotate(180deg); }
.has-edge-bottom { padding-bottom: calc(var(--sec-y) + clamp(26px, 5vw, 72px)); }
.has-edge-top { padding-top: calc(var(--sec-y) + clamp(26px, 5vw, 72px)); }
/* The full-width divider art at one or two major transitions. */
.divider-art {
  position: relative;
  z-index: 2;
  width: min(100%, 1400px);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.divider-art img { width: 100%; height: auto; }
.divider-art--overlap { margin-bottom: calc(-1 * clamp(2rem, 5vw, 4.5rem)); }

/* Motion. Hidden-until-revealed states exist only when JS is running AND the
   visitor has not asked for reduced motion; without either, everything is
   simply visible. Durations are short and easing gentle; nothing blocks
   interaction. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-draw] { clip-path: inset(-20% 100% -20% 0); transition: clip-path 1.6s var(--ease); }
  .js [data-draw].is-in { clip-path: inset(-20% 0 -20% 0); }
  .glow-dots i { animation: glow-pulse var(--d, 4.2s) ease-in-out var(--delay, 0s) infinite alternate; }
  @keyframes glow-pulse {
    from { opacity: .35; transform: scale(.85); }
    to { opacity: .9; transform: scale(1.15); }
  }
  /* Two hero fireflies drift a short distance along a curved path once the
     page has loaded, then rest with a slow, small glow. */
  .sprite {
    offset-path: path('M0,0 C 40,-36 96,-40 140,-12 C 184,16 214,58 262,40');
    offset-rotate: 0deg;
    animation: sprite-drift 7s cubic-bezier(.45, .05, .25, 1) .6s 1 both, sprite-glow 5s ease-in-out 7.6s infinite alternate;
  }
  .sprite--b {
    offset-path: path('M0,0 C -30,-30 -70,-26 -104,-4 C -136,18 -160,50 -190,36');
    animation-duration: 8.5s, 5.6s;
    animation-delay: 1.1s, 9.6s;
  }
  @keyframes sprite-drift { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  @keyframes sprite-glow { from { filter: brightness(1); } to { filter: brightness(1.18); } }
  @supports not (offset-path: path('M0 0')) {
    .sprite { animation: sprite-fallback 7s cubic-bezier(.45, .05, .25, 1) .6s 1 both; }
    .sprite--b { animation: sprite-fallback-b 8.5s cubic-bezier(.45, .05, .25, 1) 1.1s 1 both; }
    @keyframes sprite-fallback { from { transform: translate(0, 0); } to { transform: translate(262px, 40px); } }
    @keyframes sprite-fallback-b { from { transform: translate(0, 0); } to { transform: translate(-190px, 36px); } }
  }
}

/* ---------- 11. Shared modules ---------- */
/* Consultation band: one clear action, one quiet contact line. */
.cta-band { overflow: clip; }
.cta-inner { position: relative; z-index: 1; max-width: 760px; }
.cta-band h2 { margin-bottom: .35em; }
.cta-band .lead { margin-bottom: 0; }
.cta-note { margin: 1rem 0 0; font-size: .96rem; opacity: .9; }
.cta-note a { color: inherit; font-weight: 800; }
.cta-band .divider-art { margin-bottom: clamp(1.25rem, 3vw, 2.5rem); padding-inline: 0; }
/* Divided lists (rows with hairlines), never boxes. */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li { margin: 0; border-bottom: 1px solid var(--line); }
.rows a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px;
  padding: .9rem .2rem;
  color: var(--navy);
  text-decoration: none;
  transition: padding .2s var(--ease), background-color .2s;
}
.rows a:hover { background: hsla(199.2, 34.25%, 42.94%, .08); padding-inline: .7rem; }
.rows strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.rows small { display: block; margin-top: .15rem; font-size: .92rem; line-height: 1.45; opacity: .9; }
.rows .arrow { color: var(--teal); font-size: 1.3rem; flex-shrink: 0; transition: transform .2s var(--ease); }
.rows a:hover .arrow { transform: translateX(4px); }
.theme-navy .rows, .theme-navy .rows > li { border-color: var(--line-on-dark); }
.theme-navy .rows a { color: var(--cream); }
.theme-navy .rows a:hover { background: hsla(45, 75%, 95%, .08); }
.theme-navy .rows .arrow { color: var(--gold); }
/* Numbered steps: big serif numerals, vertical rhythm, never a grid of boxes. */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: .25rem 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--teal-dark);
  grid-row: 1 / 3;
  padding-top: .1rem;
}
.steps h3 { font-size: 1.2rem; margin: 0 0 .2rem; }
.steps p { margin: 0; font-size: 1rem; }
.theme-navy .steps > li, .theme-navy .steps > li:last-child { border-color: var(--line-on-dark); }
.theme-navy .steps > li::before { color: var(--gold); }
/* Pull quote in the display italic. */
.pull-quote { margin: 0; }
.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.15rem + 1.3vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.pull-quote blockquote p { margin: 0; }
.pull-quote figcaption { margin-top: 1rem; font-size: .95rem; }
.quote-mark {
  display: block;
  width: 2.2rem;
  height: 1.6rem;
  margin-bottom: .4rem;
  font: 700 4rem/0.6 var(--font-display);
  color: var(--gold);
}
/* Accordion (details/summary). */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px;
  padding: .9rem .2rem;
  font: 800 1.05rem/1.35 var(--font-body);
  color: var(--navy);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '+';
  flex-shrink: 0;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  font: 500 1.25rem/1 var(--font-display);
  transition: transform .2s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion-body { padding: 0 .2rem 1.1rem; max-width: 70ch; }
.accordion-body > :last-child { margin-bottom: 0; }
/* Tag chips (credentials / expertise). */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; padding: 0; }
.chips li {
  margin: 0;
  padding: .35rem .8rem;
  border-radius: var(--radius-pill);
  background: var(--sky-soft);
  border: 1px solid hsla(200.69, 46.77%, 24.31%, .12);
  font: 800 .8rem/1.3 var(--font-body);
  color: var(--navy);
}

/* ---------- 12. Homepage ---------- */
/* Hero. Mobile: copy on midnight, then the photo placeholder with the trail
   art laid over its lower-right corner. Desktop: the placeholder fills the
   section, a left-to-right scrim keeps the headline legible over the quiet
   side of the photograph, and the trail runs up the right-hand side. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-bottom: clamp(26px, 5vw, 72px);
}
.hero-inner { position: relative; z-index: 4; padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.75rem, 4vw, 3rem); }
.hero-copy { max-width: 660px; }
.hero h1 {
  color: var(--cream);
  margin-bottom: .4em;
  font-size: clamp(2.4rem, 1.55rem + 3.6vw, 4.5rem); /* ~64–72px desktop; keep mobile readable */
  line-height: 1.02;
  letter-spacing: -.02em;
}
.hero .lead { color: var(--cream); max-width: 46ch; opacity: .94; margin-bottom: 0; }
.hero .actions { margin-top: 1.6rem; gap: .9rem 1.5rem; }
.hero .quiet-link { color: var(--cream); }
.hero-visual { position: relative; z-index: 1; margin: 0 var(--pad-x); }
.hero-photo { aspect-ratio: 4 / 3; border-radius: var(--shape-b); }
.hero-scrim { display: none; }
.hero-art { position: absolute; right: -8%; bottom: -6%; width: 80%; z-index: 3; }
.hero-art picture { display: block; }
.sprite { position: absolute; width: clamp(52px, 8vw, 92px); height: auto; }
.sprite--a { left: 14%; top: 2%; }
.sprite--b { right: 3%; bottom: 36%; width: clamp(40px, 6vw, 70px); }
.hero .glow-dots { z-index: 2; }
.hero .edge { z-index: 5; }
@media (min-width: 900px) {
  .hero { display: grid; align-items: center; min-height: clamp(520px, 72vh, 720px); }
  .hero-inner { padding-block: clamp(4rem, 8vw, 6rem) clamp(5rem, 9vw, 7.5rem); }
  .hero-visual { position: absolute; inset: 0; margin: 0; z-index: 1; }
  .hero-photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; align-content: end; justify-items: end; }
  .hero-scrim {
    display: block;
    position: absolute; inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, var(--midnight) 0%, hsla(203, 50%, 16%, .94) 34%, hsla(203, 50%, 16%, .42) 58%, hsla(203, 50%, 16%, 0) 78%);
  }
  .hero-art { right: -2%; bottom: 2%; width: 56%; max-width: 920px; }
  .sprite--a { left: auto; right: 18%; top: auto; bottom: 12%; }
  .sprite--b { right: 4%; bottom: 28%; }
}
/* At ~1024px the left trail sprite previously crowded the headline period. */
@media (min-width: 900px) and (max-width: 1100px) {
  .hero-art { right: -4%; bottom: 0; width: 48%; }
  .sprite--a, .sprite--b { display: none; } /* trail art remains; drifting sprites leave the text-safe zone */
}
@media (min-width: 1500px) {
  .hero-copy { max-width: 720px; }
}

/* Introduction: two short paragraphs and one square clinic-detail placeholder. */
.intro-grid { display: grid; gap: 2rem; align-items: center; }
.intro-copy h2 { max-width: 18ch; }
.intro-copy p { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); line-height: 1.6; max-width: 62ch; }
.intro-visual { width: min(100%, 360px); }
@media (min-width: 860px) {
  .intro-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 6vw, 5.5rem); }
  .intro-visual { justify-self: end; width: min(100%, 440px); }
}

/* Our Approach: the strongest colour moment; photo placeholder, photo-corner
   art kept clear of where a face would be, and a pull quote in gold. */
.approach-section { overflow: clip; padding-top: var(--sec-y); }
.approach-grid { display: grid; gap: 3rem; align-items: center; }
.approach-copy h2 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4.1rem); max-width: 13ch; }
.principles { list-style: none; margin: 1.6rem 0 1.25rem; padding: 0; border-top: 1px solid var(--line-on-dark); }
.principles li {
  position: relative;
  margin: 0;
  padding: .95rem 0 .95rem 2.1rem;
  border-bottom: 1px solid var(--line-on-dark);
  font-size: 1.02rem;
  line-height: 1.55;
}
.principles li::before {
  content: '';
  position: absolute; left: .3rem; top: 1.5rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px 3px hsla(43, 90%, 61%, .5);
}
.principles strong {
  display: block;
  margin-bottom: .1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -.005em;
  color: var(--cream);
}
.approach-visual { position: relative; padding-top: 1.75rem; }
.approach-visual .ph { --ph-bg: hsl(204, 26%, 38%); --ph-ink: var(--cream); --ph-chip: hsla(203, 50%, 14%, .8); }
.approach-corner { position: absolute; top: -6%; right: -9%; width: 44%; max-width: 300px; z-index: 2; }
.approach-quote {
  position: relative;
  z-index: 2;
  width: min(100%, 26rem);
  margin: -2.25rem 0 0 auto;
  padding: 1.25rem 1.5rem 1.3rem;
  border-radius: 18px 18px 18px 4px;
  background: var(--midnight);
  box-shadow: var(--shadow);
}
.approach-quote blockquote { color: var(--gold); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); }
@media (min-width: 900px) {
  .approach-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5.5rem); }
  .approach-visual { padding-top: 2.5rem; }
  .approach-quote { margin-top: -3rem; }
}

/* How we help: image-led pathways, not boxed cards. */
.pathways { display: grid; gap: 1.75rem; }
.pathway { display: flex; flex-direction: column; color: var(--navy); text-decoration: none; transition: transform .12s ease; }
.pathway .ph { margin-bottom: 1.1rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) { .pathway:hover .ph { transform: translateY(-4px); box-shadow: var(--shadow); } }
.pathway-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.pathway-title { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); margin: 0 0 .35rem; }
@media (hover: hover) { .pathway:hover .pathway-title { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--gold); text-underline-offset: .18em; } }
.pathway-desc { display: block; margin: 0 0 .4rem; font-size: 1rem; line-height: 1.5; }
.pathway .text-link { min-height: 36px; margin-top: auto; }
@media (min-width: 720px) {
  .pathways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
}

/* Meet the team: provider photography, one human sentence each. */
.team-preview { display: grid; gap: 1.75rem; align-items: start; }
.team-card h3 { font-size: 1.32rem; margin: 1rem 0 .15rem; }
.team-role {
  margin: 0 0 .45rem;
  font: 800 .78rem/1.45 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.team-card > p:last-child { font-size: 1rem; margin: 0; }
.team-card .photo img { object-position: 50% 18%; }
.team-more .ph { margin-bottom: 1rem; }
@media (min-width: 720px) {
  .team-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
}

/* Parent voice: one testimonial in the display italic. */
.voice-section { overflow: clip; }
.voice-inner { max-width: 920px; }
.voice-heading {
  margin: 0 0 1rem;
  font: 800 .8rem/1.4 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.voice-quote blockquote { font-size: clamp(1.45rem, 1.15rem + 1.6vw, 2.5rem); max-width: 28ch; }
.voice-quote figcaption { margin-top: 1.25rem; line-height: 1.7; }
.voice-quote figcaption .text-link { min-height: 40px; }

/* ---------- 13. Interior layouts ---------- */
.editorial-grid, .concern-hero-grid, .concern-help-grid, .concern-sense-grid,
.provider-grid, .split, .location-panel, .rates-breakdown-layout,
.careers-hero-layout, .guide-hero-layout { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.editorial-grid > *, .concern-hero-grid > *, .concern-help-grid > *, .concern-sense-grid > *,
.provider-grid > *, .split > *, .guide-hero-layout > * { min-width: 0; }
.editorial-grid .pull-quote { margin-top: 1.5rem; }
.editorial-grid h1, .concern-hero h1 { font-size: clamp(2rem, 1.35rem + 3vw, 4.1rem); }
.section-intro { margin-bottom: 2rem; max-width: 65ch; }
.flow > :last-child { margin-bottom: 0; }
.service-ways { list-style: none; padding: 0; margin: 0; }
.service-ways li { padding: 1rem 0 1rem 2rem; border-bottom: 1px solid var(--line); position: relative; }
.service-ways li::before { content: '✦'; position: absolute; left: 0; color: var(--teal-dark); }
.service-ways li:first-child { border-top: 1px solid var(--line); }
@media (min-width: 800px) {
  .editorial-grid, .concern-hero-grid, .concern-help-grid, .concern-sense-grid,
  .split, .location-panel, .careers-hero-layout, .guide-hero-layout { grid-template-columns: 1.05fr 1fr; }
  .split--top, .concern-sense-grid { align-items: start; }
  .provider-grid { grid-template-columns: 1.3fr .7fr; align-items: start; }
  .rates-breakdown-layout { grid-template-columns: .65fr 1.35fr; align-items: start; }
  .rows--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* Concern pages keep the answer visible and deeper education collapsed. */
.concern-hero { background: var(--sky); }
.concern-hero-visual { position: relative; }
.concern-hero-visual > .ph { aspect-ratio: 4 / 3; }
.concern-firefly { position: absolute; width: 68px; right: 1rem; top: .75rem; }
.concern-illustration { display: block; max-width: 500px; margin: 0 auto; }
.concern-illustration img { width: 100%; }
.noticing { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem 2.5rem; }
.noticing > li { display: flex; gap: 1rem; align-items: center; margin: 0; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.noticing-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; color: var(--teal-dark); }
.noticing-icon svg { width: 30px; height: 30px; }
.reassure { border-left: 3px solid var(--teal-dark); padding-left: 1.25rem; margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.4; }
.concern-directory--compact { margin-top: 2rem; }
.concern-sense .steps h3 { font-family: var(--font-body); font-weight: 800; font-size: 1rem; line-height: 1.4; }
.learn-more-details { border-block: 1px solid var(--line-strong); }
.learn-more-details > summary { cursor: pointer; padding: 1.25rem .25rem; }
.learn-more-details > summary > span { display: inline-block; max-width: calc(100% - 2rem); vertical-align: middle; }
.learn-more-kicker { display: block; font: 800 .75rem var(--font-body); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4rem; }
.learn-more-title { display: inline; font-size: 1.5rem; }
.learn-more-body { padding: 1rem 0; }
.learn-more-body h3 { margin-top: 1.75rem; }
@media (min-width: 700px) { .noticing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Provider portraits stay beside the complete, unchanged biography. */
.provider .photo { max-width: 410px; }
.provider .photo img { object-position: 50% 15%; }
.provider h2 { font-size: clamp(2rem, 1.4rem + 1.5vw, 3rem); }
.provider .eyebrow { letter-spacing: .06em; }
.provider-bio { max-width: 68ch; }
.provider-bio p { margin-bottom: 1.25rem; }
.expertise-tags { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; margin-block: 1.25rem; font-size: .88rem; font-weight: 800; }
.expertise-tags li { margin: 0; padding-block: .2rem; border-bottom: 2px solid var(--line-strong); }

/* ---------- 14. Resources and long-form reading ---------- */
.chip { font: 700 .9rem/1.4 var(--font-body); color: var(--navy); background: transparent; border: 1px solid var(--teal-dark); border-radius: var(--radius-card); padding: .65rem 1rem; cursor: pointer; min-height: 44px; }
.chip:hover { background: var(--sky-soft); }
.chip.is-active { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.article-grid, .blog-grid { display: grid; gap: 2rem; }
.article-card, .post-card { color: var(--navy); text-decoration: none; display: flex; flex-direction: column; align-items: start; gap: .65rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--line); }
.article-card > .ph { width: 100%; aspect-ratio: 3 / 2; }
.article-card:hover, .post-card:hover { border-color: var(--teal-dark); }
.article-card h3, .post-card h3 { font-size: 1.5rem; margin: 0; }
.article-card p, .post-card p { margin: 0; font-size: 1rem; }
.article-card .text-link { margin-top: auto; }
.post-category { display: block; font: 800 .74rem/1.4 var(--font-body); color: var(--teal-dark); text-transform: uppercase; letter-spacing: .08em; margin-top: .35rem; }
.article-meta, .post-meta, .hint { font-size: .9rem; color: var(--teal-dark); }
.article { max-width: 780px; }
.article h2 { font-size: clamp(1.7rem, 1.45rem + 1vw, 2.5rem); margin-top: 2rem; }
.article h3 { margin-top: 1.5rem; }
.article h2:first-child { margin-top: 0; }
.article p, .article li { line-height: 1.75; }
.note-box { padding: 1rem 1.25rem; margin-block: 1.5rem; background: var(--sky-soft); border-left: 3px solid var(--teal-dark); }
.note-box p:last-child { margin-bottom: 0; }
.guide-hero { background: var(--sky); }
.guide-hero h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem); }
.guide-hero-figure { margin: 0; }
.guide-orientation { background: var(--paper); padding-block: 2rem; }
.guide-orientation-layout { display: grid; gap: 1rem; }
.guide-learn h2 { font-size: 1.65rem; }
.guide-learn ul { margin-bottom: 0; }
.guide-toc-mobile summary { cursor: pointer; padding: .75rem 0; font-weight: 800; }
.guide-toc-mobile a, .guide-toc-desktop a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .4rem; }
.article li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.guide-toc-desktop { display: none; }
.guide-reading-layout { display: grid; gap: 2.5rem; }
.guide-related { background: var(--paper); }
.post-figure { margin: 1.5rem 0; }
.post-figure img { border-radius: var(--shape-b); width: 100%; }
.post-card-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 700px) {
  .article-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-reading-layout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .guide-toc-desktop { display: block; position: sticky; top: calc(var(--header-h) + 1.5rem); font-size: .9rem; }
  .guide-toc-mobile { display: none; }
}

/* ---------- 15. Contact, rates, careers, and legal pages ---------- */
input, select, textarea, button { font: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea { display: block; width: 100%; min-height: 48px; padding: .7rem .8rem; color: var(--navy); background: var(--paper); border: 1px solid var(--teal-dark); border-radius: 8px; }
textarea { min-height: 140px; resize: vertical; }
input[type=file] { font-size: .9rem; }
input[type=checkbox], input[type=radio] { accent-color: var(--navy); width: 20px; height: 20px; flex-shrink: 0; }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; background: var(--paper); padding: clamp(1.1rem, 3vw, 2.5rem); border-radius: var(--radius); text-align: left; }
.form label { display: block; font-weight: 800; margin-bottom: .35rem; }
.form .choice { display: flex; align-items: center; gap: .6rem; font-weight: 500; min-height: 44px; margin: 0; }
.form fieldset { min-width: 0; }
.form legend { font-weight: 800; }
.form-status:empty { display: none; }
.form-status.ok { color: #24503a; font-weight: 800; }
.form-status.err, .form-field-error { color: #8c2929; font-weight: 800; }
.form-field-error { margin: .4rem 0 0; font-size: .95rem; line-height: 1.4; }
.form [aria-invalid="true"]:is(input:not([type=radio]):not([type=checkbox]), select, textarea) { border: 2px solid #b3261e; background: #fff6f4; }
.form fieldset.has-error legend, .w-form-card .form fieldset.has-error legend { color: #8c2929; }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; border-radius: 6px; }
.form-status { margin: 0; }
.form button:disabled { cursor: wait; opacity: .7; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-info > .ph { margin-top: 2rem; }
.action-row, .hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-block: 1.25rem; align-items: center; }
.center-ctas { justify-content: center; }
.location-copy address { font-style: normal; font-size: 1.25rem; margin-bottom: 1rem; }
.location-map iframe { width: 100%; height: 350px; border: 0; border-radius: var(--shape-c); }
.rates-breakdown-list { margin: 0; }
.rates-breakdown-list > div { border-top: 1px solid var(--line-strong); padding-block: 1.2rem; }
.rates-breakdown-list dt { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.rates-breakdown-list dt span { color: var(--teal-dark); margin-right: .75rem; }
.rates-breakdown-list dd { margin: .5rem 0 0; }
.coverage-list { margin: 0; }
.coverage-list > div { border-bottom: 1px solid var(--line-strong); padding-block: .85rem; }
.coverage-list dt { font-weight: 800; }
.coverage-list dd { margin: .2rem 0 0; }
.careers-team-portrait { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; align-items: start; }
.careers-team-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--shape-a); }
.careers-team-portrait img:last-child { margin-top: 2rem; border-radius: var(--shape-c); }
.status-pill { display: inline-block; font-size: .9rem; font-weight: 800; padding: .5rem .8rem; border-radius: 8px; background: var(--sky); }
.option-cards { display: grid; gap: 2rem; margin-block: 2rem; }
.option-cards .tile { border-top: 2px solid var(--teal-dark); padding-top: 1.25rem; }
.support-cards { display: grid; gap: 2.5rem; }
.support-cards .tile { border-top: 2px solid var(--teal-dark); padding-top: 1.25rem; }
.card-icon { display: block; width: 40px; height: 40px; margin-bottom: 1rem; }
.card-facts { padding-left: 1.2rem; }
.review-feature .testimonial-inner { display: grid; gap: 1.5rem; max-width: 950px; }
.testimonial-glow { width: 70px; }
.review-feature blockquote { margin: 0 0 1rem; font: 500 clamp(1.35rem, 1.1rem + 1vw, 2rem)/1.45 var(--font-display); }
.review-grid { display: grid; gap: 1.5rem 2.5rem; }
.review-grid figure, .review-grid blockquote { margin: 0; }
.review-grid figure { padding-block: 1.5rem; border-top: 1px solid var(--line-strong); }
.review-grid figcaption { margin-top: .85rem; font-size: .9rem; }
.error-hero { min-height: 55vh; display: grid; place-items: center; }
@media (min-width: 800px) {
  .option-cards, .support-cards, .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-feature .testimonial-inner { grid-template-columns: 80px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-draw] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
.concern-hero-visual--art .concern-illustration { width: 44%; margin: -1rem 0 0 auto; position: relative; }
.directory-note { margin-top: 1.5rem; }
html:not(.js) .nav-toggle, html:not(.js) .header-cta { display: none; }
@media (max-width: 900px) {
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .site-nav { display: block; position: static; width: 100%; max-height: none; box-shadow: none; }
  html:not(.js) .site-header { position: relative; }
}
.footer-logo { display: inline-block; padding: 1rem; background: var(--cream); border-radius: var(--radius); }
.footer-logo img { width: 150px; height: auto; }
.ph--shape-a .ph-label { margin-left: 2.5rem; margin-bottom: 1.3rem; max-width: calc(100% - 3.5rem); }
.ph--blob .ph-label { justify-self: center; margin: 0 0 15%; max-width: 65%; }
.ph--blob::before { left: 45%; top: 12%; }
.js [data-reveal]:focus-within { opacity: 1; transform: none; }

/* T235 shared rhythm and compact conversion controls. */
main:not(.home) > .section:first-child { padding-block: var(--hero-y); }
.credentials { font-size: .9rem; font-weight: 700; margin-bottom: var(--space-1); }
.photo--portrait img { object-position: 50% 18%; filter: saturate(.92); }
.bio-disclosure summary { cursor: pointer; min-height: 48px; padding-block: .75rem; font-weight: 800; }
.bio-disclosure { border-block: 1px solid var(--line-strong); }
.provider-preview { max-width: 60ch; }
.provider-ventures { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; max-width: 60ch; }
.provider-ventures li { margin: 0; padding: .65rem .9rem; border-radius: 16px; background: hsla(170, 45%, 60%, .14); }
.provider-ventures a { font-weight: 800; color: var(--teal-dark); }
.trust-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.trust-strip li { margin: 0; padding-left: var(--space-2); border-left: 3px solid var(--teal-dark); font-size: 1rem; }
.trust-strip a { color: inherit; }
.service-details { margin: 0; }
.service-details > div { padding-block: var(--space-2); border-top: 1px solid var(--line); }
.service-details dt { font-weight: 800; }
.service-details dd { margin: var(--space-1) 0 0; max-width: 62ch; }
.cta-band .divider-art { max-width: 680px; margin: 0 auto var(--space-2); }
.cta-band .divider-art picture { max-height: 110px; overflow: hidden; }
.cta-band .divider-art img { height: 110px; object-fit: contain; }
.social-row svg { width: 17px; height: 17px; }
.footer-tagline { font-style: normal; color: var(--cream); }
.mobile-consult { display: none; }
@media (min-width: 700px) {
  .trust-strip ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 800px) {
  .editorial-grid--reverse > :first-child { grid-column: 2; grid-row: 1; }
  .editorial-grid--reverse > :last-child { grid-column: 1; grid-row: 1; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .brand-word { font-size: min(1rem, 16px); letter-spacing: .06em; }
  .nav-list a:not(.btn) { padding-inline: .55rem; font-size: .92rem; }
  .nav-cta-li { margin-left: .2rem; }
  .nav-cta-li .btn { padding-inline: .8rem; }
}
@media (max-width: 900px) {
  html { scroll-padding-block: calc(var(--header-h) + 1rem) 5rem; }
  .hero-inner { padding-block: var(--space-3); }
  .hero .actions { margin-top: var(--space-2); }
  .hero-photo { aspect-ratio: 2 / 1; min-height: 0; }
}
@media (max-width: 799px) {
  .contact-info .ph { display: none; }
  .contact-page .split { gap: var(--space-3); }
  .contact-page .action-row { gap: .25rem 1rem; }
  .contact-page .hint { margin-bottom: 0; }
  main:not(.home) > .section:first-child .ph { aspect-ratio: 2 / 1; min-height: 0; }
  .provider .photo { max-width: 300px; }
}
@media (max-width: 374px) {
  .hero .eyebrow { font-size: .8rem; letter-spacing: .04em; }
  .hero-inner { padding-top: var(--space-2); }
  .hero .lead { font-size: 1.0625rem; line-height: 1.45; }
  .hero .actions { gap: var(--space-1); }
  .hero h1 { font-size: 2.25rem; text-wrap: balance; overflow-wrap: normal; margin-bottom: .3em; }
  .brand-word { font-size: min(.86rem, 4.4vw); letter-spacing: .05em; }
  .brand-mark { width: 34px; }
  .brand { gap: .4rem; }
}

@media (max-width: 479px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .mobile-consult { display: flex; justify-content: center; gap: .5rem; position: fixed; z-index: 35; bottom: 0; inset-inline: 0; padding: 8px var(--pad-x) calc(8px + env(safe-area-inset-bottom)); background: var(--midnight); }
  /* One short row at any text size: labels stop growing at 24px, so the bar stays 64px tall and clear of the firefly jar. */
  .mobile-consult .btn { min-height: 48px; min-width: 0; padding: 6px min(1.1rem, 18px); flex: 1 1 auto; max-width: 12rem; font-size: min(1rem, 24px); }
  .mobile-consult .btn-outline { background: transparent; color: var(--cream); border-color: hsla(45, 75%, 88%, .45); }
  .mobile-consult .btn-outline:hover, .mobile-consult .btn-outline:focus-visible { border-color: var(--gold); color: var(--gold); }
  /* Hide while menus/forms have focus, and while a hero/section jump link is focused so it is not covered. */
  body.nav-open .mobile-consult,
  body:has(.form :focus) .mobile-consult,
  body:has(.mobile-consult-hide:focus) .mobile-consult,
  body.consult-bar-suppressed .mobile-consult { display: none; }
  main > .section:first-child,
  .hero { padding-bottom: calc(var(--space-3) + 0.5rem); }
}


/* ---------- T242 finishing: evaluation timeline, phone actions, resource library ---------- */
.guide-timeline,
.evaluation-timeline {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  gap: .75rem;
  counter-reset: none;
}
.guide-timeline > li,
.evaluation-timeline > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-timeline > li::marker,
.evaluation-timeline > li::marker { content: ''; }
.guide-timeline a,
.evaluation-timeline a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: .85rem;
  row-gap: .15rem;
  align-items: start;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: inherit;
  text-decoration: none;
}
.guide-timeline a:hover,
.evaluation-timeline a:hover { border-color: var(--teal-dark); }
.guide-timeline a > span:first-child,
.evaluation-timeline a > span:first-child {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--teal-dark);
  line-height: 1.2;
}
.guide-timeline a > strong,
.evaluation-timeline a > strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.3;
}
.guide-timeline a > small,
.evaluation-timeline a > small {
  display: block;
  color: var(--muted, #4a5a66);
  font-size: .92rem;
  line-height: 1.4;
}
.phone-actions { display: inline-flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; }
.phone-actions a { overflow-wrap: normal; }
.team-more { display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem; min-height: 100%; padding: 1rem 0; }
.team-more .ph { display: none; } /* T242: plain team link, not a missing-person portrait */


/* ==========================================================================
   16. Playful reset (September 2026)
   Site-wide whimsy on top of the T207 system: handwritten eyebrows, a
   firefly that bobs in the header, glowing firefly "jars" in place of the
   grey photo placeholders, and a small meadow of fireflies in every footer.
   The homepage's scroll-driven world lives in /css/world.css.
   ========================================================================== */
.eyebrow {
  font: 600 clamp(1.3rem, 1.15rem + .5vw, 1.6rem)/1.15 var(--font-hand);
  letter-spacing: .005em;
  text-transform: none;
  color: var(--teal-dark);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}
.center .eyebrow { transform-origin: center; }
h1, h2 { letter-spacing: -.005em; }
h1 { font-weight: 600; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }
.hand { font-family: var(--font-hand); font-weight: 600; font-size: 1.3em; line-height: 1; }
.btn { font-family: var(--font-display); font-weight: 600; letter-spacing: .015em; }
.brand-word { font-weight: 700; letter-spacing: .1em; }

/* Photography slots: until the commissioned photos arrive, each slot is a
   little jar of night with fireflies in it, so it reads as art rather than a
   gap. Swap in <img> (or a .photo figure) and the jar disappears. */
.ph {
  --ph-bg: hsl(203, 42%, 26%);
  background:
    radial-gradient(circle at 22% 30%, hsla(45, 100%, 70%, .95) 0 2px, hsla(45, 100%, 65%, .35) 3px, transparent 9px),
    radial-gradient(circle at 70% 22%, hsla(45, 100%, 70%, .9) 0 1.5px, hsla(45, 100%, 65%, .3) 2.5px, transparent 8px),
    radial-gradient(circle at 58% 64%, hsla(45, 100%, 72%, .95) 0 2.5px, hsla(45, 100%, 65%, .35) 4px, transparent 12px),
    radial-gradient(circle at 36% 78%, hsla(45, 100%, 70%, .8) 0 1.5px, transparent 7px),
    radial-gradient(circle at 84% 72%, hsla(45, 100%, 70%, .85) 0 2px, hsla(45, 100%, 65%, .3) 3px, transparent 9px),
    radial-gradient(ellipse 90% 60% at 50% 110%, hsla(150, 30%, 30%, .85), transparent 70%),
    radial-gradient(circle at 30% 10%, hsla(203, 50%, 60%, .35), transparent 60%),
    linear-gradient(180deg, hsl(222, 38%, 22%), var(--ph-bg));
  color: var(--cream);
  box-shadow: inset 0 0 0 1px hsla(45, 80%, 85%, .12), inset 0 0 40px hsla(45, 100%, 60%, .08);
}
.ph--dark { --ph-bg: hsl(204, 44%, 18%); }
.approach-visual .ph { --ph-bg: hsl(204, 40%, 30%); }
@media (prefers-reduced-motion: no-preference) {
  .ph { background-size: 100% 100%; animation: ph-twinkle 6s ease-in-out infinite alternate; }
  @keyframes ph-twinkle { from { filter: brightness(.94) saturate(.95); } to { filter: brightness(1.08) saturate(1.1); } }
  .brand-mark { animation: brand-bob 4.5s ease-in-out infinite; transform-origin: 60% 60%; }
  @keyframes brand-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-3px) rotate(-4deg); }
  }
  .brand:hover .brand-mark { animation-duration: 1.2s; }
}

/* Footer meadow: a thin strip of grass and a few fireflies along the top
   edge of every footer (canvas drawn by site.js; purely decorative). */
.site-footer { overflow: hidden; }
.footer-fireflies { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .9; }
.site-footer > .container { position: relative; z-index: 1; }

/* ==========================================================================
   17. Night pages (immersive pass, September 2026)
   Every page now opens under the same firefly night sky as the homepage:
   the first section carries .night-hero (stars, a moon glow, fireflies drawn
   by site.js, and layered hills that fall away into the page below). The
   hills' front layer takes the next section's colour (site.js sets
   --next-bg), so the night flows into the day content without a seam.
   ========================================================================== */
body.night-page .site-header { background: hsla(214, 48%, 11%, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.night-page .crumbs:has(+ main > .night-hero:first-child) { background: #0b1a28; color: hsl(45, 55%, 86%); }
main > .section.night-hero {
  --nh-top: #0b1a28;
  --nh-mid: #15304a;
  --nh-low: #2a4e6b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 45% 55% at 88% 6%, hsla(48, 90%, 82%, .16), transparent 62%),
    radial-gradient(ellipse 70% 60% at 10% 100%, hsla(160, 40%, 40%, .22), transparent 65%),
    linear-gradient(180deg, var(--nh-top) 0%, var(--nh-mid) 55%, var(--nh-low) 100%);
  color: hsl(45, 55%, 90%);
  padding-bottom: calc(var(--hero-y) + clamp(80px, 10vw, 150px));
}
main > .section.night-hero > .container { position: relative; z-index: 2; }
main > .section.night-hero::before { /* stars */
  content: ""; position: absolute; inset: 0 0 35%; z-index: 0; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 37% 12%, #fff8dc 50%, transparent 51%),
    radial-gradient(1px 1px at 53% 36%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 66% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 30%, #fff8dc 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 56%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 64%, #fff 50%, transparent 51%);
  background-size: 460px 360px;
}
.night-hero h1, .night-hero h2, .night-hero h3, .night-hero h4 { color: var(--on-dark); text-shadow: 0 2px 30px hsla(220, 60%, 5%, .45); }
.night-hero .eyebrow { color: var(--gold); }
.night-hero .lead, .night-hero p { color: hsl(45, 45%, 88%); }
.night-hero a:not(.btn) { color: var(--on-dark); }
.night-hero a:not(.btn):hover { color: var(--gold); }
.night-hero .text-link { color: var(--on-dark); background: hsla(45, 100%, 70%, .1); }
.night-hero .text-link:hover { background: var(--gold); border-color: var(--gold); color: var(--midnight); }
.night-hero .btn-primary { background: var(--gold); color: var(--midnight); }
.night-hero .btn-primary:hover { background: var(--gold-bright); color: var(--midnight); box-shadow: 0 12px 30px hsla(43, 90%, 61%, .3); }
.night-hero .btn-outline { color: var(--on-dark); }
.night-hero .article-meta, .night-hero .hint { color: hsl(45, 35%, 80%); }
.night-hero :focus-visible { outline-color: var(--gold); }
.night-hero .status-pill { background: hsla(45, 100%, 70%, .16); color: var(--gold-bright); border-color: hsla(45, 100%, 70%, .45); }
.night-hero .rows a { color: var(--on-dark); }
.night-hero .rows a:hover { background: hsla(45, 75%, 95%, .08); }
.night-hero .note { background: hsla(215, 45%, 14%, .55); color: hsl(45, 50%, 90%); }
/* Photo slots and portraits in a night hero become glowing arched windows. */
.night-hero .ph {
  border-radius: 50% 50% 26px 26px / 38% 38% 26px 26px;
  box-shadow: 0 0 0 3px hsla(45, 90%, 75%, .5), 0 0 0 12px hsla(45, 90%, 75%, .07), 0 0 80px 10px hsla(45, 100%, 60%, .16);
}
.night-hero .photo img, .night-hero figure > img { box-shadow: 0 0 0 3px hsla(45, 90%, 75%, .55), 0 0 60px hsla(45, 100%, 60%, .2); }
.night-hero .concern-illustration img, .night-hero .art img { box-shadow: none; }
.night-hero .concern-illustration { filter: drop-shadow(0 0 30px hsla(45, 100%, 70%, .25)); }
/* Contact: the form sits on a warm card under the night sky. */
.night-hero .form { background: hsla(45, 76%, 96%, .97); color: var(--navy); padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-card); box-shadow: 0 30px 80px hsla(220, 60%, 4%, .45); }
.night-hero .form p, .night-hero .form .hint, .night-hero .form label, .night-hero .form legend { color: var(--navy); text-shadow: none; }
.night-hero .form a:not(.btn) { color: var(--teal-dark); }
.night-hero .form .btn-primary { background: var(--navy); color: var(--cream); }
.night-hero--compact { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.night-hero--compact h1 { margin-bottom: .25em; }

/* Stars twinkle; horizons and fireflies are injected by site.js. */
.nh-fireflies { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.nh-horizon { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(80px, 11vw, 170px); z-index: 1; pointer-events: none; }
.nh-horizon svg { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.nh-horizon .nh-front { fill: var(--next-bg, var(--cream)); }
@media (prefers-reduced-motion: no-preference) {
  main > .section.night-hero::before { animation: nh-twinkle 5s ease-in-out infinite alternate; }
  @keyframes nh-twinkle { from { opacity: .55; } to { opacity: .95; } }
  .night-hero h1 { animation: nh-rise 1s var(--ease) both; }
  @keyframes nh-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
}

/* ---------- Cursor firefly and tap sparkles (site.js) ---------- */
.ll-sparkles { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.ll-buddy {
  position: fixed; left: 0; top: 0; width: 34px; height: 28px; z-index: 61; pointer-events: none;
  background: url('/assets/firefly-sprite.png') center / contain no-repeat;
  filter: drop-shadow(0 0 8px hsla(45, 100%, 60%, .8));
  opacity: 0; transition: opacity .6s ease;
}
.ll-buddy.is-awake { opacity: 1; }

/* ---------- Catch a firefly: the jar (site.js) ---------- */
.ll-jar {
  position: fixed; left: 18px; bottom: 18px; z-index: 40; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  margin: 0; padding: 4px; border: 0; border-radius: 14px; background: none; font: inherit; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(20px) scale(.8);
  transition: opacity .5s ease, transform .5s var(--ease), visibility 0s linear .5s;
}
.ll-jar.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.ll-jar:focus-visible { outline: 3px solid var(--gold, #f5c242); outline-offset: 2px; }
@media (hover: hover) { .ll-jar.is-shown:hover .ll-jar-glass { transform: rotate(-6deg) scale(1.06); } }
.ll-jar-glass { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ll-jar-glass {
  position: relative; width: 46px; height: 58px; border-radius: 12px 12px 16px 16px;
  background: linear-gradient(160deg, hsla(200, 60%, 90%, .28), hsla(200, 60%, 70%, .1));
  border: 2px solid hsla(45, 70%, 88%, .7);
  box-shadow: inset 0 0 18px hsla(45, 100%, 60%, .25), 0 6px 18px hsla(220, 50%, 8%, .35);
  backdrop-filter: blur(3px);
}
.ll-jar-lid { position: absolute; left: 6px; right: 6px; top: -9px; height: 9px; border-radius: 4px 4px 2px 2px; background: #b7791f; box-shadow: inset 0 -2px 0 hsla(0, 0%, 0%, .2); }
.ll-jar-dots { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.ll-jar-dots i {
  position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
  background: #fff3b0; box-shadow: 0 0 8px 3px hsla(45, 100%, 60%, .8);
  animation: ll-jar-blink 3s ease-in-out infinite alternate;
}
@keyframes ll-jar-blink { from { opacity: .35; transform: translate(-2px, 2px); } to { opacity: 1; transform: translate(2px, -3px); } }
.ll-jar-count { font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem; line-height: 1; color: var(--gold, #f5c242); text-shadow: 0 1px 4px hsla(220, 50%, 8%, .7); }
.ll-jar-say {
  position: absolute; left: 10px; bottom: 100%; margin-bottom: 8px; width: max-content; max-width: calc(100vw - 48px);
  padding: .35rem .75rem; border-radius: 16px 16px 16px 4px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #1b2440;
  background: var(--card); box-shadow: 0 6px 18px hsla(220, 50%, 8%, .3);
  opacity: 0; transform: translateY(8px) scale(.8); transform-origin: bottom left;
}
.ll-jar.is-saying .ll-jar-say { animation: ll-say var(--say-ms, 2.6s) var(--ease) forwards; }
@keyframes ll-say { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.ll-jar.is-bump .ll-jar-glass { animation: ll-bump .5s var(--ease); }
@keyframes ll-bump { 30% { transform: scale(1.15) rotate(-6deg); } 60% { transform: scale(.95) rotate(3deg); } }
.ll-caught {
  position: fixed; width: 14px; height: 14px; margin: -7px; border-radius: 50%; z-index: 62; pointer-events: none;
  background: #fff6c4; box-shadow: 0 0 14px 6px hsla(45, 100%, 60%, .85);
}
@media (max-width: 479px) {
  .ll-jar { left: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ll-jar-glass { width: 38px; height: 48px; }
}
@media print { .ll-jar, .ll-caught { display: none; } }

/* ---------- Playful polish: photo wall polaroids ---------- */
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .lead { margin-inline: auto; }
.moments {
  list-style: none; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding: 1rem 0 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2.4vw, 1.75rem);
}
.moment {
  position: relative; flex: 0 1 220px; margin: 0; padding: 10px 10px 0;
  background: #fffdf8; border-radius: 6px;
  box-shadow: 0 2px 4px hsla(25, 40%, 20%, .12), 0 14px 30px hsla(25, 50%, 25%, .18);
  transform: rotate(var(--r, 0deg));
}
.moment::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 74px; height: 24px; margin-left: -37px;
  background: var(--tape, hsla(45, 95%, 65%, .75)); transform: rotate(calc(var(--r, 0deg) * -1.6));
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, .08); border-radius: 2px;
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px));
          mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px));
}
.moment .ph, .moment img { display: block; width: 100%; min-height: 0; aspect-ratio: 4 / 3; border-radius: 3px; object-fit: cover; }
.moment-cap { display: block; padding: .55rem .25rem .7rem; text-align: center; font: 600 1.3rem/1.1 var(--font-hand); color: #3a3f55; }
.moment--card { flex: none; width: 100%; max-width: 250px; margin: 1.6rem auto 0; align-self: center; }
@media (min-width: 1000px) { .moments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) {
  .moment { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s ease; }
  .moment:hover { transform: rotate(0deg) translateY(-8px) scale(1.04); box-shadow: 0 4px 8px hsla(25, 40%, 20%, .12), 0 24px 44px hsla(25, 50%, 25%, .24); z-index: 2; }
  .js .moments .moment { animation: moment-drop .8s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-play-state: paused; }
  .js .moments.is-in .moment { animation-play-state: running; }
  .moments .moment:nth-child(2) { animation-delay: .08s; } .moments .moment:nth-child(3) { animation-delay: .16s; }
  .moments .moment:nth-child(4) { animation-delay: .24s; } .moments .moment:nth-child(5) { animation-delay: .32s; }
  @keyframes moment-drop { from { opacity: 0; transform: translateY(-30px) rotate(calc(var(--r, 0deg) * -2)); } }
}
@media (max-width: 699px) {
  /* A swipeable strip on phones. */
  .moments { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.25rem var(--pad-x, 16px) 1.5rem; margin-inline: calc(var(--pad-x, 16px) * -1); scrollbar-width: none; }
  .moments::-webkit-scrollbar { display: none; }
  .moments .moment { flex: 0 0 68%; scroll-snap-align: center; }
}

/* ---------- Playful polish: aligned card actions ---------- */
.support-cards .tile, .option-cards .tile { display: flex; flex-direction: column; }
.support-cards .tile > :is(.card-action, .btn, .text-link, .actions):last-child,
.option-cards .tile > :is(.card-action, .btn, .text-link, .actions):last-child { margin-top: auto; }

/* ---------- Playful polish: bouncy buttons ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn:hover { animation: btn-boing .5s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes btn-boing { 0% { transform: scale(1); } 35% { transform: scale(1.06, .94); } 65% { transform: scale(.97, 1.03); } 100% { transform: scale(1); } }
}

/* ---------- Whimsy: the wishing firefly and the secret bubbles ---------- */
/* A firefly within reach of the mouse turns the cursor into a hand. */
.ll-near-fly, .ll-near-fly *:not(input):not(textarea):not(select) { cursor: pointer; }
.ll-caught--gold { background: #fff; box-shadow: 0 0 14px 6px hsla(320, 100%, 75%, .8), 0 0 28px 12px hsla(190, 100%, 70%, .55); }
.ll-bubbles-top { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 58; }

/* Wiggly heading words (site.js wraps each word). */
.wj { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) { .wj:hover { animation: ll-jiggle .6s cubic-bezier(.34, 1.56, .64, 1); } }
  .wj.is-jiggle { animation: ll-jiggle .6s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes ll-jiggle {
    0% { transform: none; } 25% { transform: translateY(-.18em) rotate(-6deg) scale(1.08); }
    50% { transform: translateY(0) rotate(4deg) scale(.97); } 75% { transform: translateY(-.05em) rotate(-2deg); } 100% { transform: none; }
  }
}

/* Calm switch (footer) and calm mode. */
.footer-calm { margin: .75rem 0 0; }
.calm-toggle {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .95rem;
  border: 1px solid hsla(45, 75%, 88%, .35); border-radius: var(--radius-pill); background: hsla(45, 100%, 70%, .08);
  color: inherit; font: 600 .9rem/1 var(--font-body); cursor: pointer;
}
.calm-toggle:hover { border-color: var(--gold, #f5c242); }
.calm-toggle:focus-visible { outline: 3px solid var(--gold, #f5c242); outline-offset: 2px; }
.calm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold, #f5c242); box-shadow: 0 0 8px 2px hsla(45, 100%, 60%, .7); }
.calm-toggle.is-calm .calm-dot { background: hsl(210, 20%, 70%); box-shadow: none; }
.ll-calm *, .ll-calm *::before, .ll-calm *::after {
  animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}

/* ---------- Parent Resources: one page of parent questions ----------
   Each question in the list jumps down to its answer on the same page. */
.pr-hero-copy { max-width: 720px; }
.pr-pick { padding-top: clamp(2.5rem, 5vw, 4rem); }
#concerns, .pr-answer { scroll-margin-top: .25rem; } /* phones already pad for the header */
@media (min-width: 901px) { #concerns, .pr-answer { scroll-margin-top: calc(var(--header-h) + 1.25rem); } }
#concerns:focus, .pr-answer:focus { outline: none; }
.pr-groups { display: grid; gap: 2.5rem; }
.pr-group-title { margin: 0 0 1rem; font: 600 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.2 var(--font-hand); color: var(--gold-ink); }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pr-list li { margin: 0; }
.pr-link {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: .9rem; min-height: 72px; padding: .7rem .8rem .7rem .7rem;
  border-radius: var(--radius-inner); background: #fffdf8; border: 2px solid hsla(200, 47%, 24%, .12); color: var(--navy); text-decoration: none;
  font: 600 1.08rem/1.35 var(--font-display); box-shadow: 0 6px 16px hsla(200, 47%, 24%, .06);
  transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease;
}
.pr-link:hover { color: var(--navy); border-color: var(--tone); box-shadow: 0 10px 24px hsla(200, 47%, 24%, .12); transform: translateY(-2px); }
.pr-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--tone) 38%, #fff); }
.pr-icon svg { width: 38px; height: 38px; }
.pr-go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tone); color: var(--navy); transition: transform .2s var(--ease); }
.pr-link:hover .pr-go { transform: translateY(3px); }
.pr-ask { margin-top: 1.5rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-inner); background: hsla(45, 100%, 70%, .28); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; }
.pr-ask p { margin: 0; flex: 1 1 260px; }

.pr-answers .container { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.pr-answer {
  position: relative; padding: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: var(--radius-card); background: #fffdf8; color: var(--navy);
  border: 2px solid hsla(200, 47%, 24%, .1); box-shadow: 0 12px 30px hsla(200, 47%, 24%, .07);
}
.pr-answer::before { content: ""; position: absolute; left: clamp(1.4rem, 3.5vw, 2.4rem); right: clamp(1.4rem, 3.5vw, 2.4rem); top: -2px; height: 6px; border-radius: 0 0 6px 6px; background: var(--tone); }
.pr-answer:target { border-color: var(--tone); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 35%, transparent), 0 16px 36px hsla(200, 47%, 24%, .12); }
.pr-answer-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.pr-answer-head .pr-icon { flex: none; width: 60px; height: 60px; border-radius: 18px; }
.pr-answer-head .pr-icon svg { width: 44px; height: 44px; }
.pr-answer-head h2 { margin: 0; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); line-height: 1.2; }
.pr-answer-body { display: grid; gap: 1.25rem 2.25rem; grid-template-areas: "intro" "side" "help"; }
.pr-answer-intro { grid-area: intro; }
.pr-answer-side { grid-area: side; }
.pr-answer-help { grid-area: help; }
.pr-answer-lead { font-size: 1.12rem; margin: 0; }
.pr-answer-lead + .pr-answer-lead { margin-top: 1rem; }
.pr-answer h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
.pr-answer-help p { margin: 0 0 1rem; }
.pr-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem !important; }
.pr-box { padding: 1.1rem 1.2rem; border-radius: 20px; background: color-mix(in srgb, var(--tone) 16%, #fff); }
.pr-box + .pr-box { margin-top: .9rem; }
.pr-box--try { background: hsla(45, 100%, 70%, .2); border: 2px dashed hsla(40, 70%, 45%, .35); }
.pr-box ul, .pr-box ol { margin: 0; padding-left: 1.2rem; }
.pr-box li { margin: .3rem 0; }
.pr-box li::marker { color: var(--gold-ink); font-weight: 700; }
.pr-back-row { margin: 1.4rem 0 0; }
.pr-back {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; border-radius: var(--radius-pill);
  border: 2px solid currentColor; color: var(--teal-dark); font: 600 .98rem/1.2 var(--font-display); text-decoration: none; background: hsla(200, 47%, 24%, .04);
}
.pr-back:hover { background: var(--navy); border-color: var(--navy); color: var(--cream); }

.pr-more h2 { margin-bottom: 1.5rem; }
.pr-more-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.pr-more-grid li { margin: 0; padding: 1.4rem; border-radius: var(--radius-inner); background: hsla(45, 75%, 95%, .07); border: 1px solid var(--line-on-dark); display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.pr-more-grid h3 { margin: 0; font-size: 1.3rem; }
.pr-more-grid p { margin: 0 0 .4rem; }
.pr-more-grid .btn { margin-top: auto; }
@media (min-width: 760px) {
  .pr-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .pr-groups { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .pr-answer-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "intro side" "help side"; align-items: start; }
}
@media (max-width: 599px) {
  .pr-link { grid-template-columns: 44px 1fr auto; gap: .7rem; min-height: 64px; font-size: 1rem; }
  .pr-link .pr-icon { width: 44px; height: 44px; border-radius: 14px; }
  .pr-link .pr-icon svg { width: 32px; height: 32px; }
  .pr-go { width: 32px; height: 32px; }
  .pr-answer-head { align-items: flex-start; }
  .pr-answer-head .pr-icon { width: 48px; height: 48px; border-radius: 14px; }
  .pr-answer-head .pr-icon svg { width: 36px; height: 36px; }
  .pr-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .pr-answer:target { animation: pr-found 1.4s var(--ease) 1; }
  @keyframes pr-found { 0% { transform: scale(.985); } 40% { transform: scale(1.01); } 100% { transform: scale(1); } }
}

/* ---------- Gentle opening: the phone menu and "read more" sections ----------
   They ease in instead of popping open; with reduced motion (or "Calm the
   sky") they stay instant. */
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 900px) { .js .site-nav.open { animation: ll-drop .24s var(--ease); } }
  details[open] > :not(summary), .footer-acc-heading:has(> [aria-expanded="true"]) + .footer-acc-panel { animation: ll-disclose .3s var(--ease); }
}
@keyframes ll-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes ll-disclose { from { opacity: 0; transform: translateY(-6px); } }