/* ==========================================================================
   Traina Behavioral — Homepage
   Tokens sourced from clients/traina-behavioral/docs/BRAND.md
   ========================================================================== */

:root {
  /* Brand colors */
  --wonder-blue: #0e3a5a;
  --curious-teal: #31a098;
  --apricot: #f18864;
  --sunflower: #fecb44;
  --lilac-sky: #cdb2d6;
  --soft-mint: #cce5d8;
  --white-cream: #fffbf3;
  /* Derived deep tint of Lilac Sky (same hue, hsl(285, 33%, 38%)) for bold
     "pop" bands. Not a core brand color. White-cream text on it is 7.3:1,
     sunflower 5.0:1 (WCAG AA). */
  --lilac-deep: #714181;

  /* Tints/shades for depth without leaving the palette */
  --wonder-blue-10: #e7edf1;
  --wonder-blue-80: rgba(14, 58, 90, 0.8);
  --teal-15: rgba(49, 160, 152, 0.15);
  --apricot-15: rgba(241, 136, 100, 0.15);
  --sunflower-20: rgba(254, 203, 68, 0.22);
  --lilac-20: rgba(205, 178, 214, 0.28);
  --mint-40: rgba(204, 229, 216, 0.5);
  --ink: #1c2b33;
  --ink-soft: #4a5b63;

  /* Soft "flag"/warning tone — not part of the core brand palette (which is
     deliberately red-free), added only for the "what ABA should not be"
     comparison panel on the What Is ABA Therapy page. Muted rose, not an
     alarm red, to stay consistent with the site's pastel system. */
  --flag-rose: #c96a5e;
  --flag-rose-10: rgba(201, 106, 94, 0.1);

  /* Type */
  --font-display: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;
  --font-accent: "Manrope", "Segoe UI", sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Single side gutter used by .container and every hero/section wrapper
     that isn't a plain .container — keeps the edge margin small, minimum
     16px, and consistent everywhere instead of each component picking
     its own clamp() floor. */
  --gutter: clamp(16px, 4vw, 28px);

  /* Shadows */
  --shadow-rest: 0 4px 14px rgba(14, 58, 90, 0.08);
  --shadow-hover: 0 14px 30px rgba(14, 58, 90, 0.16);

  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --measure: 62ch;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white-cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--wonder-blue);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

h1 { font-weight: 700; font-size: clamp(2.25rem, 5.2vw, 4rem); }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.5rem); }

p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
  color: var(--ink-soft);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--curious-teal);
  background: var(--teal-15);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--gutter, clamp(16px, 4vw, 28px));
  position: relative;
  box-sizing: border-box;
}

section {
  position: relative;
  padding: var(--space-8) 0;
  overflow: hidden;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary {
  background: var(--apricot);
  color: var(--white-cream);
  box-shadow: var(--shadow-rest);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-hover);
  background: #ef7a53;
}

.btn-secondary {
  background: transparent;
  color: var(--wonder-blue);
  border: 2px solid var(--wonder-blue);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  transform: translateY(-3px) scale(1.02);
  background: var(--wonder-blue);
  color: var(--white-cream);
}

.btn-teal {
  background: var(--curious-teal);
  color: var(--white-cream);
}
.btn-teal:hover, .btn-teal:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-hover);
  background: #2a8d86;
}

.btn-light {
  background: var(--white-cream);
  color: var(--wonder-blue);
}
.btn-light:hover, .btn-light:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-hover);
}

/* ---------- Decorative shapes ---------- */
.blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.hill-divider {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}
.hill-divider.top { top: -1px; }
.hill-divider.bottom { bottom: -1px; }
.hill-divider svg { width: 100%; height: auto; display: block; }

/* Wave that continues the hero's paper texture instead of a flat cream fill */
.hill-divider--paper {
  aspect-ratio: 1440 / 90;
  background-color: var(--white-cream);
  background-image:
    linear-gradient(rgba(255, 251, 243, 0.94), rgba(255, 251, 243, 0.94)),
    url("../assets/optimized/assets/textures/paper-grain-700.webp");
  background-size: cover, 480px 300px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C400,90 900,0 1440,50 L1440,0 L0,0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C400,90 900,0 1440,50 L1440,0 L0,0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.hill-divider--paper svg { display: none; }

.decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* Recolorable brand shapes (from assets/Shape assets/, defined once as
   <symbol>s right after <body> and drawn here via <use>) — each instance
   sets its own `color`, which the <use fill="currentColor"> picks up, so
   one shape can be reused in any brand color without duplicating artwork.
   Inline SVG rather than mask-image: an external mask-image url() is
   CORS-blocked under file:// (null origin) and silently renders nothing. */
.decor-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 251, 243, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(14, 58, 90, 0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  padding: var(--space-3) clamp(20px, 4vw, 56px);
}

.logo-link img {
  height: 44px;
  width: auto;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.main-nav a {
  text-decoration: none;
  color: var(--wonder-blue);
  position: relative;
  padding-bottom: 4px;
}

/* ---------- Mega menu (ABA Therapy nav item) ---------- */
.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: min(560px, 90vw);
  /* padding (not margin) so this gap is still part of the hoverable box —
     otherwise the mouse loses :hover crossing the dead space and the panel
     closes before you can reach it. */
  padding-top: 14px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transition-delay: 0.25s;
  z-index: 60;
}
.nav-dropdown-inner {
  background: var(--white-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: var(--space-4);
}
@media (hover: hover) {
  .has-dropdown:hover .nav-dropdown,
  .has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
  }
  .has-dropdown:hover .nav-dropdown-trigger::before,
  .has-dropdown:focus-within .nav-dropdown-trigger::before { transform: translateY(-30%) rotate(225deg); }
}
.nav-dropdown-trigger { padding-right: 16px; }
.nav-dropdown-trigger::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.has-dropdown.is-open .nav-dropdown-trigger::before { transform: translateY(-30%) rotate(225deg); }
.nav-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--wonder-blue);
  transition: background 0.15s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible { background: var(--teal-15); }
.nav-dropdown-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wonder-blue-10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-dropdown-icon svg { width: 18px; height: 18px; }
.nav-dropdown-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 2px;
}
.nav-dropdown-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.nav-dropdown-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(14, 58, 90, 0.08);
}
.nav-dropdown-btn {
  flex: 1 1 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 11px 18px;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nav-dropdown-btn-primary {
  background: var(--apricot);
  color: var(--wonder-blue);
}
.nav-dropdown-btn-primary:hover,
.nav-dropdown-btn-primary:focus-visible {
  background: #ef7a53;
  transform: translateY(-2px);
}
.nav-dropdown-btn-secondary {
  background: transparent;
  color: var(--wonder-blue);
  border: 2px solid var(--wonder-blue);
  padding: 9px 18px;
}
.nav-dropdown-btn-secondary:hover,
.nav-dropdown-btn-secondary:focus-visible {
  background: var(--wonder-blue);
  color: var(--white-cream);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wonder-blue);
  text-decoration: none;
  white-space: nowrap;
}
.phone-link:hover { color: var(--apricot); }

.btn-text-short { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--wonder-blue);
  margin: 5px 0;
  border-radius: 2px;
}

/* ---------- Paper texture ----------
   Warm-white base with the grain photo tiled underneath a near-opaque
   cream wash, so it reads as clean white at a glance and only barely
   textured up close (~6% visibility, not a visible paper photo). */
.paper-texture {
  background-color: var(--white-cream);
  background-image:
    linear-gradient(rgba(255, 251, 243, 0.94), rgba(255, 251, 243, 0.94)),
    url("../assets/optimized/assets/textures/paper-grain-700.webp");
  background-repeat: no-repeat, repeat;
  background-size: cover, 480px 300px;
  background-position: center, center;
}

/* ---------- Hero ---------- */
.hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  position: relative;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
  margin-top: -20px;
  /* CSS Grid items default to min-width:auto, which lets a descendant's
     content (here: .trust-row, once it became a horizontal scroller)
     force this whole column — and the 1fr track holding it — wider than
     the viewport, silently clipped by body's overflow-x:hidden. Without
     this, the mobile density fixes below cause the hero to overflow. */
  min-width: 0;
}

.hero h1 {
  margin-left: -2px;
}

.text-highlight {
  color: var(--apricot);
}

.hero-sub {
  font-size: 1.15rem;
  max-width: 46ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-5);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: var(--white-cream);
  box-shadow: var(--shadow-rest);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--wonder-blue);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trust-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.trust-badge .badge-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
}
.trust-badge:nth-child(1) { background: var(--sunflower-20); }
.trust-badge:nth-child(2) { background: var(--teal-15); }
.trust-badge:nth-child(3) { background: var(--apricot-15); }
.trust-badge:nth-child(4) { background: var(--lilac-20); }

.hero-art {
  position: relative;
  aspect-ratio: 1 / 1.05;
  z-index: 1;
}

.hero-art .art-frame {
  position: absolute;
  inset: 6% 6%;
  background: var(--apricot);
  border-radius: var(--radius-lg);
  transform: rotate(-3deg);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}

.hero-art .art-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transform: rotate(3deg) scale(1.16);
}

/* Homepage hero: the illustration is a wide scene with a lot of empty
   cream on the left. On desktop, crop to the child and the star so they
   fill the frame. Phones keep the wide scene so the hero stays short. */
.home .hero-art--star {
  aspect-ratio: 1024 / 576;
  width: 100%;
}
/* Give the homepage photo 20% more of the hero row than the shared
   0.9fr column, and keep the gap beside the headline. */
@media (min-width: 901px) {
  .home .hero .container {
    grid-template-columns: 0.85fr 1fr;
  }
  .home .hero-art--star {
    aspect-ratio: 4 / 5;
  }
}
.home .hero-art--star .art-frame {
  inset: 0;
  background: transparent;
  transform: none;
}
.home .hero-art--star .art-frame img {
  object-fit: cover;
  object-position: center;
  transform: none;
}
@media (min-width: 901px) {
  .home .hero-art--star .art-frame img {
    object-position: 78% 46%;
  }
}

/* Hand-drawn doodle accents scattered around the photo card —
   loose single-stroke line art, distinct from the clean filled
   icon-pack icons used elsewhere on the page. */
.doodle {
  position: absolute;
  z-index: 2;
}
.doodle svg { display: block; width: 100%; height: 100%; }

/* ---------- Hero: Icon Focus (what-aba-can-help-with) ----------
   Photo hero with six concept pills clipped along its left edge.
   Originated in the header sandbox (sandbox/headers/option-3-icon-focus.*)
   — see that folder for the design history/reasoning behind these values. */

.hero-icon-focus {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4.1vw, 52px) var(--gutter) clamp(46px, 6.5vw, 72px);
  font-family: var(--font-body);
}

.hero-icon-focus .icf-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-icon-focus .icf-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  column-gap: clamp(48px, 5vw, 64px);
  align-items: start;
  max-width: 1240px;
  margin-inline: auto;
}

.hero-icon-focus .icf-copy {
  max-width: 600px;
  /* Same grid-item min-width:auto fix as .hero-copy above — needed since
     .contact-hero-trust became a horizontal scroller. */
  min-width: 0;
}

.hero-icon-focus .eyebrow {
  background: #d8efe8;
  color: #2aa79b;
  padding: 10px 20px;
  letter-spacing: 0.05em;
}

.hero-icon-focus .icf-heading {
  margin: var(--space-3) 0 0;
  max-width: 520px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 1.4rem + 3.8vw, 4rem);
  line-height: 0.98;
  color: var(--wonder-blue);
}

.hero-icon-focus .icf-heading .text-highlight {
  display: inline-block;
  white-space: nowrap;
}

.hero-icon-focus .icf-body {
  margin: var(--space-2) 0 0;
  max-width: 540px;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.hero-icon-focus .icf-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: var(--space-3) 0 0;
}

.hero-icon-focus .icf-ctas .btn {
  padding: 20px 34px;
}

.hero-icon-focus .icf-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  /* Same grid-item min-width:auto fix as .icf-copy — .icf-pills' 2-column
     grid (used on pages without the --long-labels modifier) doesn't
     shrink below its own content's intrinsic width otherwise. */
  min-width: 0;
}

.hero-icon-focus .icf-photo-wrap {
  position: relative;
  flex: 1 1 auto;
  max-width: 500px;
  margin-left: clamp(36px, 5.5vw, 60px);
}

.hero-icon-focus .icf-photo-frame {
  box-sizing: border-box;
  border-radius: 50%;
  border: 7px solid var(--white-cream);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  aspect-ratio: 6 / 5;
}

.hero-icon-focus .icf-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 30%;
  display: block;
}

.hero-icon-focus .icf-pills {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-icon-focus .icf-pill {
  position: absolute;
  top: var(--top);
  left: 0;
  z-index: 2;
}

.hero-icon-focus .icf-pill a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 28px 12px 21px;
  border-radius: 999px;
  border: 2.5px solid var(--white-cream);
  box-shadow: 0 8px 20px rgba(14, 58, 90, 0.08);
  text-decoration: none;
  transform: translateX(calc(-1 * var(--overlap, 30%) - 15px)) rotate(var(--rot, 0deg));
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero-icon-focus .icf-pill a:hover,
.hero-icon-focus .icf-pill a:focus-visible {
  transform: translateX(calc(-1 * var(--overlap, 30%) - 15px)) translateY(-6px) rotate(0deg);
  box-shadow: var(--shadow-hover);
}

.hero-icon-focus .icf-pill a:focus-visible {
  outline: 3px solid var(--wonder-blue);
  outline-offset: 3px;
}

.hero-icon-focus .icf-pill-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wonder-blue);
}

.hero-icon-focus .icf-pill-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 220ms ease;
}

.hero-icon-focus .icf-pill a:hover .icf-pill-icon svg,
.hero-icon-focus .icf-pill a:focus-visible .icf-pill-icon svg {
  transform: scale(1.15);
}

.hero-icon-focus .icf-pill-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--wonder-blue);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero-icon-focus .icf-pill a,
  .hero-icon-focus .icf-pill-icon svg {
    transition: none;
  }
}

.hero-icon-focus .icf-pill-spark {
  position: absolute;
  top: 128px;
  right: 8%;
  width: 18px;
  height: 18px;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero-icon-focus .icf-pill-spark {
    display: none;
  }
}

.hero-icon-focus .icf-callout {
  position: relative;
  flex: 0 0 auto;
  width: clamp(84px, 8vw, 116px);
  margin-left: -10px;
  text-align: right;
}

.hero-icon-focus .icf-callout p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--wonder-blue);
}

.hero-icon-focus .icf-callout-doodle {
  display: block;
  width: 26px;
  height: auto;
  margin-left: auto;
}

.hero-icon-focus .icf-callout-doodle--top {
  position: relative;
  margin-bottom: var(--space-2);
  margin-left: -24px;
  z-index: 2;
}

.hero-icon-focus .icf-callout-doodle--bottom {
  width: 40px;
  margin-top: var(--space-2);
}

@media (max-width: 1000px) {
  .hero-icon-focus .icf-photo-wrap {
    margin-left: clamp(32px, 6vw, 56px);
  }
}

@media (max-width: 768px) {
  .hero-icon-focus .icf-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
  }

  .hero-icon-focus .icf-copy {
    max-width: none;
    order: 2;
  }

  .hero-icon-focus .icf-heading .text-highlight {
    white-space: normal;
  }

  .hero-icon-focus .icf-visual {
    order: 1;
    flex-direction: column;
  }

  .hero-icon-focus .icf-photo-wrap {
    max-width: 260px;
    margin: 0 auto;
  }

  .hero-icon-focus .icf-callout {
    width: auto;
    margin: var(--space-3) 0 0;
    text-align: center;
  }

  .hero-icon-focus .icf-callout-doodle {
    margin-inline: auto;
  }

  .hero-icon-focus .icf-callout-doodle--top {
    margin-left: auto;
  }

  .hero-icon-focus .icf-pills {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: var(--space-4);
    width: 100%;
  }

  .hero-icon-focus .icf-pill {
    position: static;
  }

  .hero-icon-focus .icf-pill a {
    transform: none;
    justify-content: center;
  }

  .hero-icon-focus .icf-pill a:hover,
  .hero-icon-focus .icf-pill a:focus-visible {
    transform: translateY(-3px);
  }
}

/* ---------- Section heading block ---------- */
.section-head {
  max-width: 640px;
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-6);
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.offset-right {
  margin-left: auto;
  text-align: right;
}

/* ---------- Where do I fit? (path finder) ---------- */
.path-finder {
  background: var(--soft-mint);
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  position: relative;
  z-index: 2;
}

.path-item { display: flex; }

.path-blob {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15% 14% 12%;
  box-shadow: var(--shadow-rest);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.path-item:hover .path-blob {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.path-item:nth-child(1) .path-blob { background: var(--apricot); border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; }
.path-item:nth-child(2) .path-blob { background: var(--curious-teal); border-radius: 60% 40% 45% 55% / 55% 45% 40% 60%; }
.path-item:nth-child(3) .path-blob { background: var(--wonder-blue); border-radius: 45% 55% 60% 40% / 60% 40% 45% 55%; }

.path-num {
  position: absolute;
  top: 9%;
  left: 12%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white-cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-rest);
  z-index: 2;
}
.path-item:nth-child(1) .path-num { color: var(--apricot); }
.path-item:nth-child(2) .path-num { color: var(--curious-teal); }
.path-item:nth-child(3) .path-num { color: var(--wonder-blue); }

.path-icon { display: block; width: 44px; height: 44px; margin-bottom: var(--space-3); }
.path-icon svg { display: block; width: 100%; height: 100%; }

.path-blob h3 { color: var(--white-cream); font-size: 1.4rem; margin-bottom: var(--space-2); }
.path-blob p {
  color: rgba(255, 251, 243, 0.92);
  font-size: 0.88rem;
  max-width: 24ch;
  margin: 0 auto var(--space-4);
}

.path-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--white-cream);
  text-decoration: underline;
  text-decoration-color: rgba(255, 251, 243, 0.5);
  text-underline-offset: 4px;
  transition: transform 0.18s ease, text-decoration-color 0.18s ease;
}
.path-link:hover,
.path-link:focus-visible {
  transform: translateX(4px);
  text-decoration-color: var(--white-cream);
}

/* ---------- ABA therapy options ---------- */
.aba-options {
  background: var(--teal-15);
  padding-top: calc(var(--space-8) + var(--space-4));
  padding-bottom: calc(var(--space-8) + var(--space-4));
}

.aba-hub {
  position: relative;
  max-width: 1140px;
  min-height: 520px;
  margin: var(--space-2) auto 0;
}

.aba-hub-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--wonder-blue);
  stroke-opacity: 0.35;
  stroke-width: 2;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
  z-index: 1;
}

.aba-hub-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 460px;
  transform: translate(-50%, -50%);
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background: radial-gradient(circle, var(--curious-teal) 55%, rgba(49, 160, 152, 0.4) 78%, rgba(49, 160, 152, 0) 100%);
  z-index: 1;
}

.aba-hub-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  z-index: 2;
}
.aba-hub-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.aba-item {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 320px;
  z-index: 3;
}
.aba-item-1 { top: 0; left: 0; }
.aba-item-2 { top: 0; right: 0; }
.aba-item-3 { bottom: 0; left: 0; }
.aba-item-4 { bottom: 0; right: 0; }
.aba-item.right { flex-direction: row-reverse; text-align: right; }

.aba-item-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white-cream);
  box-shadow: var(--shadow-rest);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aba-item-icon svg { width: 24px; height: 24px; }

.aba-item h3 { font-size: 2rem; font-weight: 800; line-height: 1.05; margin-bottom: var(--space-2); }
.aba-item p { font-size: 1rem; color: var(--ink-soft); margin: 0 0 var(--space-2); }

.aba-item-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--wonder-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: transform 0.18s ease;
  display: inline-block;
}
.aba-item-link:hover,
.aba-item-link:focus-visible { transform: translateX(4px); }

.aba-cta {
  text-align: center;
  margin-top: var(--space-4);
  position: relative;
  z-index: 2;
}
.aba-cta p { margin: 0 auto var(--space-2); }

/* ---------- Why families choose Traina ---------- */
.choose-traina { background: var(--soft-mint); }

.choose-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  z-index: 2;
}

.choose-photo {
  position: relative;
  margin: 0 8% var(--space-6) 4%;
}

.choose-photo-frame {
  position: relative;
  aspect-ratio: 4/4.8;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--curious-teal);
  transform: rotate(-2deg);
  box-shadow: var(--shadow-hover);
}
.choose-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: rotate(2deg) scale(1.12);
  display: block;
}

.choose-photo-frame-secondary {
  position: absolute;
  right: -14%;
  bottom: -12%;
  z-index: 2;
  width: 55%;
  aspect-ratio: 4/3.3;
  padding: 8px;
  background: var(--white-cream);
  border-radius: var(--radius-md);
  transform: rotate(4deg);
  box-shadow: var(--shadow-hover);
}
.choose-photo-frame-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% 40%;
  border-radius: calc(var(--radius-md) - 6px);
  display: block;
}

.choose-cta-badge {
  position: absolute;
  left: -16px;
  bottom: -20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--white-cream);
  border-radius: 999px;
  padding: 8px 22px 8px 8px;
  box-shadow: var(--shadow-hover);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.choose-cta-badge:hover, .choose-cta-badge:focus-visible {
  transform: translateY(-3px);
}
.choose-cta-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--apricot);
  color: var(--white-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.choose-cta-badge-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.choose-cta-badge-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--wonder-blue);
}

.choose-content { position: relative; z-index: 2; }
.choose-content .section-head { max-width: 52ch; margin-bottom: var(--space-5); }

.choose-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.choose-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--white-cream);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-rest);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.choose-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.choose-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.choose-item-icon img { width: 24px; height: 24px; }
.choose-item:nth-child(1) .choose-item-icon { background: var(--sunflower-20); }
.choose-item:nth-child(2) .choose-item-icon { background: var(--teal-15); }
.choose-item:nth-child(3) .choose-item-icon { background: var(--apricot-15); }
.choose-item:nth-child(4) .choose-item-icon { background: var(--lilac-20); }

.choose-item h3 { font-size: 1.05rem; margin-bottom: 4px; }
.choose-item p { font-size: 0.92rem; margin: 0; }

.choose-content .btn { margin-top: var(--space-5); }

/* ---------- Support-area cards ---------- */
.symptom-bento {
  background: var(--white-cream);
  overflow: hidden;
  position: relative;
  padding-top: clamp(96px, 10vw, 140px);
  padding-bottom: clamp(96px, 10vw, 140px);
}
.symptom-bento .container {
  /* Slightly wider max-width than the sitewide 1180px on large screens
     only; width/padding-inline fall through to the base .container rule
     so this section's gutter matches every other section, not its own
     tighter one. */
  max-width: 1360px;
}
.symptom-bento .section-head { margin-bottom: clamp(48px, 6vw, 64px); }

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  position: relative;
  z-index: 2;
}

.help-tile {
  perspective: 1200px;
  min-height: 290px;
  cursor: pointer;
}

.help-tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 290px;
  transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
  transform-style: preserve-3d;
}

@media (hover: hover) {
  .help-tile:hover .help-tile-inner { transform: rotateY(180deg); }
}
.help-tile.is-flipped .help-tile-inner { transform: rotateY(180deg); }
.help-tile:focus-within .help-tile-inner { transform: rotateY(180deg); }
.help-tile:focus { outline: none; }

.help-tile-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-rest);
}

.help-tile-front {
  display: flex;
  flex-direction: column;
  color: var(--wonder-blue);
}
.help-tile-icon { display: block; margin-bottom: var(--space-3); }
.help-tile-icon svg { display: block; }
.help-tile-front h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-2); }
.help-tile-front p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.help-tile-plus {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(14, 58, 90, 0.08);
  color: var(--wonder-blue);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-tile-back {
  transform: rotateY(180deg);
  background: var(--wonder-blue);
  color: var(--white-cream);
  display: flex;
  flex-direction: column;
}
.help-tile-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.help-tile-back ul {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}
.help-tile-back li {
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(255, 251, 243, 0.92);
  padding-left: 14px;
  position: relative;
}
.help-tile-back li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--white-cream);
}
.help-tile-back a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--white-cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: flex-start;
}

/* ---------- Help-grid connector (tiles converge into the guide card) ---------- */
.help-connectors {
  display: block;
  width: 100%;
  height: clamp(110px, 13vw, 150px);
  margin-top: var(--space-5);
  fill: none;
  stroke: var(--wonder-blue);
  stroke-opacity: 0.4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 9;
}

/* ---------- Lead-magnet CTA (the "cloud" card) ---------- */
.lead-magnet {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--wonder-blue-10);
  border: 2px solid var(--wonder-blue);
  border-radius: var(--radius-lg);
  box-shadow:
    0 10px 18px rgba(14, 58, 90, 0.14),
    0 32px 56px rgba(14, 58, 90, 0.22);
}

@keyframes leadMagnetHoverBounce {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-16px); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-9px); }
  80% { transform: translateY(0); }
}
.lead-magnet.is-bouncing,
.lead-magnet.reveal.is-visible.is-bouncing,
.lead-magnet.reveal.is-visible.pop-done.is-bouncing {
  animation: leadMagnetHoverBounce 0.9s ease-in-out;
}

.lead-magnet-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  text-align: left;
  padding: var(--space-7) var(--space-6);
}
.lead-magnet-copy { flex: 1 1 420px; }
.lead-magnet-ctas { flex: 0 1 320px; }
.lead-magnet-content p { max-width: 40ch; }
.lead-magnet-content .trust-badge { margin-top: var(--space-4); background: var(--lilac-20); }

.lead-magnet-ctas { display: flex; flex-direction: column; gap: var(--space-3); }
.lead-magnet-ctas .btn { justify-content: center; }

.lead-magnet-visual { position: relative; flex: 0 0 210px; height: 220px; }
.guide-cover-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 14px rgba(14, 58, 90, 0.18),
    0 24px 40px rgba(14, 58, 90, 0.3);
  transform: translate(-50%, -50%) rotate(-6deg) perspective(600px) rotateY(18deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.guide-cover-photo:hover {
  transform: translate(-50%, -56%) rotate(-2deg) perspective(600px) rotateY(8deg);
  box-shadow:
    0 12px 18px rgba(14, 58, 90, 0.2),
    0 32px 52px rgba(14, 58, 90, 0.34);
}

/* Pop-and-bounce entrance, replacing the standard .reveal fade-up for this card only */
@keyframes leadMagnetPop {
  0% { opacity: 0; transform: translateY(50px) scale(0.88); }
  55% { opacity: 1; transform: translateY(-10px) scale(1.04); }
  75% { transform: translateY(4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lead-magnet.reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.88);
  transition: none;
}
.lead-magnet.reveal.is-visible {
  animation: leadMagnetPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Once the entrance pop finishes, freeze it as a plain resting state — otherwise
   toggling .is-bouncing on/off later makes the browser treat the entrance
   animation as newly (re)applied each time and replay it from scratch. */
.lead-magnet.reveal.is-visible.pop-done {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Decorative doodles filling the section's outer whitespace */
.symptom-bento .decor { z-index: 1; }

/* ---------- Programs (age/developmental-stage cards) ---------- */

.programs-grid {
  display: grid;
  grid-template-columns: minmax(200px, 20%) 1fr;
  gap: var(--space-6);
  align-items: center;
  position: relative;
  z-index: 2;
}

.programs-intro { display: flex; flex-direction: column; align-items: flex-start; }
.programs-intro .section-head { margin-bottom: var(--space-4); }
.programs-intro .section-head p { margin-bottom: 0; }

.programs-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.program-card {
  display: block;
  background: var(--white-cream);
  border: 1px solid rgba(14, 58, 90, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-rest);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.program-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.program-card-image {
  position: relative;
}
.program-card-frame {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.program-card-frame img,
.program-card-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.program-card:hover .program-card-frame img,
.program-card:hover .program-card-placeholder { transform: scale(1.02); }

/* Sibling of .program-card-frame (not a child of it) so the half that
   overlaps the photo/body seam isn't sliced off by the frame's own
   overflow:hidden — that was clipping the badge and its icon in half. */
.program-card-badge {
  position: absolute;
  left: var(--space-4);
  bottom: -26px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid var(--white-cream);
  box-shadow: var(--shadow-rest);
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-card-badge img { width: 26px; height: 26px; display: block; }

.program-card-body { padding: 36px var(--space-4) var(--space-4); }
.program-card-body h3 { font-size: 1.2rem; margin: 0 0 4px; color: var(--wonder-blue); }
.program-card-age {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--curious-teal);
  margin-bottom: var(--space-2);
}
.program-card-body p { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--space-3); }

.program-card-link {
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--wonder-blue);
  transition: transform 0.18s ease;
}
.program-card:hover .program-card-link { transform: translateX(3px); }

/* ---------- What does ABA actually look like ---------- */
.aba-look { background: #fff0cd; } /* solid pastel sunflower */

.aba-look-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  z-index: 2;
}

.aba-look-content .section-head { max-width: 46ch; margin-bottom: var(--space-3); }

.aba-look-intro {
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}

.aba-look-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.aba-look-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.aba-look-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aba-look-icon img { width: 100%; height: 100%; }
.aba-look-list strong { color: var(--wonder-blue); }

.aba-look-closing { max-width: 46ch; margin-bottom: var(--space-4); }

.aba-look-photo { position: relative; }
.aba-look-photo-frame {
  position: relative;
  aspect-ratio: 4/3.4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: rotate(1.5deg);
  box-shadow: var(--shadow-hover);
}
.aba-look-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(-1.5deg) scale(1.08);
  display: block;
}

/* ---------- Video placeholder ---------- */
.aba-look-video img { position: absolute; inset: 0; transform: rotate(-1.5deg) scale(1.12); }
.aba-look-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 58, 90, 0.75), rgba(14, 58, 90, 0) 55%);
}
.aba-look-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 251, 243, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-hover);
  transition: transform 0.2s ease;
}
.aba-look-video:hover .aba-look-play-btn { transform: translate(-50%, -50%) scale(1.08); }
.aba-look-play-btn svg { margin-left: 4px; }
.aba-look-video-caption {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  color: var(--white-cream);
}
.aba-look-video-caption span {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.aba-look-video-caption small {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 251, 243, 0.8);
  margin-top: 4px;
}

/* ---------- "What this might look like": Photo Story Ribbon
   (what-aba-can-help-with) — six moment cards clipped onto a curved
   line. Originated in the section sandbox (sandbox/sections/
   option-5-photo-story-ribbon.*) — see that folder for the design
   history/reasoning behind these values. ---------- */

.section-photo-ribbon {
  position: relative;
  overflow: hidden;
  background: var(--soft-mint);
  padding: clamp(70px, 9vw, 110px) clamp(20px, 5vw, 48px) clamp(64px, 8vw, 100px);
  font-family: var(--font-body);
}

.section-photo-ribbon .psr-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section-photo-ribbon .psr-note {
  position: absolute;
  margin: 0;
  max-width: 190px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--wonder-blue);
}

.section-photo-ribbon .psr-note-doodle,
.section-photo-ribbon .psr-note-icon {
  display: block;
  width: 20px;
  height: auto;
}

.section-photo-ribbon .psr-note--tl {
  top: clamp(10px, 3vw, 40px);
  left: clamp(10px, 4vw, 56px);
  text-align: left;
}

.section-photo-ribbon .psr-note--tl .psr-note-doodle {
  margin-bottom: 6px;
}

.section-photo-ribbon .psr-note--tl .psr-note-icon {
  margin-top: 6px;
}

.section-photo-ribbon .psr-note--tr {
  top: clamp(10px, 3vw, 40px);
  right: clamp(10px, 4vw, 56px);
  text-align: right;
}

.section-photo-ribbon .psr-note--tr .psr-note-icon {
  margin-left: auto;
  margin-bottom: 6px;
}

.section-photo-ribbon .psr-note--br {
  bottom: clamp(10px, 3vw, 30px);
  right: clamp(10px, 4vw, 56px);
  text-align: right;
}

.section-photo-ribbon .psr-note--br .psr-note-icon {
  margin-left: auto;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .section-photo-ribbon .psr-note {
    display: none;
  }
}

.section-photo-ribbon .psr-intro {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.section-photo-ribbon .psr-heading {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem);
  line-height: 1.15;
  color: var(--wonder-blue);
}

.section-photo-ribbon .psr-body {
  max-width: 760px;
  margin: var(--space-3) auto 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.section-photo-ribbon .psr-ribbon {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: clamp(26px, 3.2vw, 38px) auto 0;
}

.section-photo-ribbon .psr-line-wrap {
  position: relative;
  height: 90px;
}

.section-photo-ribbon .psr-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.section-photo-ribbon .psr-line path {
  fill: none;
  stroke: var(--curious-teal);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.7;
}

.section-photo-ribbon .psr-line-dot {
  position: absolute;
  top: 44px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--curious-teal);
  opacity: 0.6;
  transform: translateX(-50%);
}

.section-photo-ribbon .psr-cards {
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(18px, 2.2vw, 25px);
  margin: -56px 0 0;
  padding: 0;
}

.section-photo-ribbon .psr-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(155px, 13.5vw, 190px);
  padding-top: 38px;
  transform: translateY(var(--ty, 0px)) rotate(var(--rot, 0deg));
  transition: transform 260ms ease, filter 260ms ease;
}

.section-photo-ribbon .psr-card:hover,
.section-photo-ribbon .psr-card:focus-within {
  transform: translateY(calc(var(--ty, 0px) - 5px)) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .section-photo-ribbon .psr-card {
    transition: none;
  }
}

.section-photo-ribbon .psr-peg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 38px;
  border-radius: 5px;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(14, 58, 90, 0.18);
  z-index: 2;
}

.section-photo-ribbon .psr-badge {
  position: absolute;
  top: 26px;
  left: -6px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wonder-blue);
  box-shadow: var(--shadow-rest);
  z-index: 2;
}

.section-photo-ribbon .psr-badge svg {
  width: 24px;
  height: 24px;
}

.section-photo-ribbon .psr-frame {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--white-cream);
  box-shadow: var(--shadow-rest);
  border: 5px solid var(--white-cream);
}

.section-photo-ribbon .psr-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-photo-ribbon .psr-title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--wonder-blue);
}

.section-photo-ribbon .psr-desc {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .section-photo-ribbon .psr-line-wrap {
    height: 2px;
    max-width: 70%;
    margin: 0 auto;
  }

  .section-photo-ribbon .psr-line,
  .section-photo-ribbon .psr-line-dot {
    display: none;
  }

  .section-photo-ribbon .psr-line-wrap::before {
    content: "";
    display: block;
    height: 2px;
    background: var(--curious-teal);
    opacity: 0.4;
    border-radius: 2px;
  }

  .section-photo-ribbon .psr-cards {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding: 4px 20px 12px;
    margin-top: 20px;
    -webkit-overflow-scrolling: touch;
  }

  .section-photo-ribbon .psr-card {
    width: 62vw;
    max-width: 220px;
    scroll-snap-align: center;
    transform: rotate(var(--rot, 0deg));
  }

  .section-photo-ribbon .psr-card:hover,
  .section-photo-ribbon .psr-card:focus-within {
    transform: rotate(0deg);
  }
}

/* ---------- "What progress can look like" comparison grid
   (what-aba-can-help-with) — four rows, each its own independent grid
   sharing the same column template so they all stay aligned. ---------- */

.section-progress-grid {
  position: relative;
  overflow: hidden;
  background: var(--white-cream);
  padding: clamp(58px, 7vw, 86px) clamp(20px, 5vw, 48px) clamp(36px, 4.5vw, 56px);
  font-family: var(--font-body);
}

.section-progress-grid .wpg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section-progress-grid .wpg-intro {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.section-progress-grid .wpg-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem);
  color: var(--wonder-blue);
}

.section-progress-grid .wpg-body {
  margin: var(--space-3) 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.section-progress-grid .wpg-table {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: clamp(42px, 5vw, 56px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.section-progress-grid .wpg-header-row,
.section-progress-grid .wpg-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 1.15fr 32px 1.15fr 32px 1.15fr;
  align-items: stretch;
  column-gap: clamp(10px, 1.5vw, 20px);
}

.section-progress-grid .wpg-header-row {
  padding: 0 clamp(20px, 3vw, 32px);
}

.section-progress-grid .wpg-header-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  line-height: 1.25;
  color: var(--wonder-blue);
}

.section-progress-grid .wpg-header-pill--notice { background: var(--wonder-blue-10); }
.section-progress-grid .wpg-header-pill--focus { background: var(--teal-15); }
.section-progress-grid .wpg-header-pill--progress { background: var(--apricot-15); }

.section-progress-grid .wpg-row {
  height: 132px;
  border-radius: 8px;
  padding: clamp(12px, 1.6vw, 18px) clamp(16px, 2vw, 22px);
  overflow: visible;
}

.section-progress-grid .wpg-row--communication { background: var(--apricot-15); }
.section-progress-grid .wpg-row--daily-living { background: var(--teal-15); }
.section-progress-grid .wpg-row--social-skills { background: var(--lilac-20); }
.section-progress-grid .wpg-row--transitions { background: var(--sunflower-20); }

.section-progress-grid .wpg-category {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-width: 0;
  padding-right: clamp(12px, 1.6vw, 18px);
  border-right: 1.5px solid rgba(14, 58, 90, 0.16);
}

.section-progress-grid .wpg-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wonder-blue);
}

.section-progress-grid .wpg-icon svg {
  width: 20px;
  height: 20px;
}

.section-progress-grid .wpg-row--communication .wpg-icon { background: var(--apricot); }
.section-progress-grid .wpg-row--daily-living .wpg-icon { background: var(--soft-mint); }
.section-progress-grid .wpg-row--social-skills .wpg-icon { background: var(--lilac-sky); }
.section-progress-grid .wpg-row--transitions .wpg-icon { background: var(--sunflower); }

.section-progress-grid .wpg-category-label {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--wonder-blue);
}

.section-progress-grid .wpg-cell {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0 clamp(10px, 1.4vw, 16px);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.section-progress-grid .wpg-mobile-label {
  display: none;
}

.section-progress-grid .wpg-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  justify-self: center;
  align-self: center;
}

.section-progress-grid .wpg-arrow svg {
  width: 100%;
  height: 100%;
}

.section-progress-grid .wpg-row--communication .wpg-arrow { color: var(--apricot); }
.section-progress-grid .wpg-row--daily-living .wpg-arrow { color: var(--curious-teal); }
.section-progress-grid .wpg-row--social-skills .wpg-arrow { color: var(--lilac-sky); }
.section-progress-grid .wpg-row--transitions .wpg-arrow { color: #d9a520; }

.section-progress-grid .wpg-reassurance {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 620px;
  margin: clamp(20px, 2.5vw, 28px) auto 0;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--apricot-15);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wonder-blue);
  text-align: center;
}

.section-progress-grid .wpg-reassurance-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--apricot);
}

.section-progress-grid .wpg-reassurance-icon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  .section-progress-grid .wpg-header-row {
    display: none;
  }

  .section-progress-grid .wpg-row {
    grid-template-columns: 1fr;
    height: auto;
    row-gap: 14px;
    text-align: left;
  }

  .section-progress-grid .wpg-cell {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 0;
  }

  .section-progress-grid .wpg-category {
    border-right: none;
    border-bottom: 1.5px solid rgba(14, 58, 90, 0.16);
    padding-right: 0;
    padding-bottom: 12px;
    width: 100%;
  }

  .section-progress-grid .wpg-mobile-label {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wonder-blue);
    opacity: 0.7;
  }

  .section-progress-grid .wpg-arrow {
    transform: rotate(90deg);
    justify-self: flex-start;
    margin-left: 4px;
  }

  .section-progress-grid .wpg-reassurance {
    flex-direction: row;
    text-align: left;
  }
}

/* ---------- Process ---------- */
.process {
  background: var(--wonder-blue);
  color: var(--white-cream);
  padding-top: calc(var(--space-8) + var(--space-6));
  padding-bottom: calc(var(--space-8) + var(--space-6));
}
.process .section-head h2 { color: var(--white-cream); }
.process .section-head p { color: rgba(255,251,243,0.8); }
.process .eyebrow { background: rgba(255,251,243,0.16); color: var(--soft-mint); }

.journey {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
  z-index: 2;
  padding-top: var(--space-2);
  margin-bottom: var(--space-6);
}
.journey::before {
  content: "";
  display: none;
}
.journey-wave {
  position: absolute;
  top: var(--space-2);
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 0;
  pointer-events: none;
}
.journey-traveler {
  position: absolute;
  top: 0;
  left: 4%;
  width: 30px;
  height: 30px;
  color: var(--sunflower);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(14, 58, 90, 0.35));
}
.journey:hover .journey-traveler {
  animation: journey-fly 1.7s ease-in-out forwards;
}
@keyframes journey-fly {
  0%   { left: 2%;  top: 38px; opacity: 0; transform: rotate(8deg) scale(0.85); }
  8%   { opacity: 1; }
  22%  { left: 12.5%; top: 18px; transform: rotate(-8deg) scale(1); }
  37%  { left: 37.5%; top: 58px; transform: rotate(16deg) scale(1); }
  62%  { left: 62.5%; top: 18px; transform: rotate(-16deg) scale(1); }
  87%  { left: 87.5%; top: 58px; transform: rotate(10deg) scale(1); }
  94%  { opacity: 1; }
  100% { left: 97%; top: 38px; opacity: 0; transform: rotate(-4deg) scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .journey:hover .journey-traveler { animation: none; }
}
.journey-step {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.journey-marker {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-rest);
  flex: none;
}
.journey-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white-cream);
  color: var(--wonder-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-rest);
}
.journey-step h3 { color: var(--white-cream); font-size: 1.05rem; margin-bottom: var(--space-2); }
.journey-step p { color: rgba(255,251,243,0.82); font-size: 0.9rem; margin: 0; max-width: 22ch; }

.process-reassurance {
  text-align: center;
  font-style: italic;
  color: rgba(255, 251, 243, 0.85);
  position: relative;
  z-index: 2;
  margin: 0 auto var(--space-4);
  max-width: 50ch;
}

.process-cta { text-align: center; margin-top: var(--space-3); position: relative; z-index: 2; }

/* ---------- Brand belief ---------- */
.belief {
  background: var(--white-cream);
  text-align: center;
}
.belief .container { max-width: 780px; }
.belief h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.belief-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.belief-tags span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--sunflower-20);
  color: var(--wonder-blue);
}
.belief-tags span:nth-child(2) { background: var(--teal-15); }
.belief-tags span:nth-child(3) { background: var(--apricot-15); }
.belief-tags span:nth-child(4) { background: var(--lilac-20); }

/* ---------- Hero value row (Center-Based page) ---------- */
.hero-value-row { display: flex; gap: var(--space-6); padding-top: var(--space-5); margin-top: var(--space-2); flex-wrap: wrap; }
.hero-value { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); width: 110px; }
.hero-value-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hero-value-icon svg { width: 26px; height: 26px; }
.hero-value span { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--wonder-blue); line-height: 1.25; }

/* ---------- Fit puzzle — "Could this be a good fit?" (Center-Based page) ---------- */
.fit-puzzle { background: var(--soft-mint); }
.fit-puzzle-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--space-7); align-items: center; }
.puzzle-collage {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  transform: translateX(-24px) perspective(1300px) rotateY(-6deg) rotateX(3deg);
  filter: drop-shadow(0 20px 32px rgba(14, 58, 90, 0.22)) drop-shadow(0 6px 12px rgba(14, 58, 90, 0.14));
}
.puzzle-piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
  transform: scale(0.94);
}
.puzzle-piece img { position: absolute; width: 62%; height: 62%; object-fit: cover; display: block; }
.piece-tl { transform-origin: 0% 0%; }
.piece-tr { transform-origin: 100% 0%; }
.piece-bl { transform-origin: 0% 100%; }
.piece-br { transform-origin: 100% 100%; }
.piece-tl img { top: 0; left: 0; }
.piece-tr img { top: 0; right: 0; }
.piece-bl img { bottom: 0; left: 0; }
.piece-br img { bottom: 0; right: 0; }
.puzzle-piece:hover,
.puzzle-piece:focus-visible {
  transform: scale(1);
  z-index: 3;
  filter: drop-shadow(0 10px 18px rgba(14, 58, 90, 0.25));
}
.puzzle-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  padding: 10px;
  border-radius: 50%;
  background: var(--white-cream);
  box-shadow: var(--shadow-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}
.puzzle-badge img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Support collage (Center-Based page) ---------- */
.support-collage { position: relative; margin: 0 10% var(--space-6) 6%; }

.support-collage-main {
  position: relative;
  z-index: 1;
  aspect-ratio: 4/4.6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--curious-teal);
  transform: rotate(-2deg);
  box-shadow: var(--shadow-hover);
}
.support-collage-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: rotate(2deg) scale(1.12);
  display: block;
}

.support-collage-secondary {
  position: absolute;
  width: 46%;
  aspect-ratio: 4/3.3;
  padding: 8px;
  background: var(--white-cream);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
}
.support-collage-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 6px);
  display: block;
}

.support-collage-a { right: -12%; bottom: -10%; z-index: 2; transform: rotate(4deg); }
.support-collage-b { left: -26%; top: 10%; z-index: 2; width: 42%; transform: rotate(-6deg); }

.fit-copy .eyebrow { margin-bottom: var(--space-3); }
.fit-copy p { font-size: 1.05rem; color: var(--ink-soft); max-width: 48ch; margin-bottom: var(--space-5); }
.fit-features { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-6); }
.fit-feature { display: flex; align-items: flex-start; gap: var(--space-4); }
.fit-feature-icon { flex: none; width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.fit-feature-icon svg { width: 26px; height: 26px; }
.fit-feature h3 { font-size: 1.15rem; font-weight: 800; color: var(--wonder-blue); margin-bottom: var(--space-1); }
.fit-feature p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }

/* ---------- Trust stats ---------- */
.trust-stats { background: var(--wonder-blue-10); }
.trust-stats-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  z-index: 2;
}

.trust-stats-content h2 { max-width: 20ch; }

.trust-stats-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.trust-stat-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
a.trust-stat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
a.trust-stat-card:hover { transform: translateY(-2px); }
.trust-stat-card .stat-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.trust-stat-card .stat-number sup {
  font-size: 0.5em;
  font-weight: 700;
  top: -0.6em;
}
.trust-stat-card .stat-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
}
.trust-stat-card:nth-child(1) { background: var(--sunflower); }
.trust-stat-card:nth-child(1) .stat-number,
.trust-stat-card:nth-child(1) .stat-label { color: var(--wonder-blue); }

.trust-stat-card:nth-child(2) { background: var(--apricot); }
.trust-stat-card:nth-child(2) .stat-number,
.trust-stat-card:nth-child(2) .stat-label { color: var(--white-cream); }

.trust-stat-card:nth-child(3) { background: var(--lilac-sky); }
.trust-stat-card:nth-child(3) .stat-number,
.trust-stat-card:nth-child(3) .stat-label { color: var(--wonder-blue); }

.trust-stat-card:nth-child(4) { background: var(--soft-mint); }
.trust-stat-card:nth-child(4) .stat-number,
.trust-stat-card:nth-child(4) .stat-label { color: var(--wonder-blue); }

.trust-stats-photo {
  position: relative;
  aspect-ratio: 4/3.4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
}
.trust-stats-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Center / environments ---------- */
.center-section { background: var(--white-cream); }
.center-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  position: relative;
  z-index: 2;
}
.center-visual {
  position: relative;
  aspect-ratio: 4/3;
}
.center-visual .frame {
  position: absolute;
  inset: 4%;
  background: var(--sunflower-20);
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
}
.center-visual .frame-icon {
  position: absolute;
  background: var(--white-cream);
  border-radius: 50%;
  padding: 12px;
  box-shadow: var(--shadow-rest);
}
.center-copy .note {
  font-size: 0.9rem;
  color: var(--curious-teal);
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: var(--space-4);
}

/* ---------- Insurance ---------- */
.insurance { background: var(--wonder-blue-10); }

.insurance-unified {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  position: relative;
  z-index: 2;
}

.insurance-panel-info {
  position: relative;
  overflow: hidden;
  background: var(--wonder-blue-10);
  padding: var(--space-7) var(--space-6) var(--space-7) var(--space-7);
}

.insurance-panel-info .eyebrow { position: relative; z-index: 2; }
.insurance-panel-info h2,
.insurance-panel-info p { position: relative; z-index: 2; max-width: 46ch; }

.partner-logos {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-6) 0 var(--space-4);
}
.partner-logo {
  height: 28px;
  width: auto;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
  opacity: 0.82;
}

.insurance-provider-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--wonder-blue);
  text-decoration: none;
}
.insurance-provider-link:hover { opacity: 0.8; }

.insurance-panel-check {
  position: relative;
  background: var(--white-cream);
  padding: var(--space-7) var(--space-6);
  clip-path: url(#insurance-wave-clip);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.insurance-panel-check h3 { margin-bottom: var(--space-2); }
.insurance-panel-check p { font-size: 0.95rem; margin-bottom: var(--space-5); }

.insurance-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--wonder-blue);
  background: var(--white-cream);
  border: 1.5px solid rgba(14, 58, 90, 0.16);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: var(--space-4);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e3a5a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.insurance-select:focus-visible { outline: 2px solid var(--curious-teal); outline-offset: 2px; }

.insurance-check-btn { width: 100%; justify-content: center; border: none; cursor: pointer; font-size: 1rem; }

.insurance-check-note {
  margin: var(--space-3) 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Resources ---------- */
.resources { background: var(--white-cream); }
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  position: relative;
  z-index: 2;
}
.resource-card {
  background: var(--soft-mint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block;
}
.resource-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.resource-card-image {
  aspect-ratio: 16 / 9;
  background: var(--wonder-blue);
  overflow: hidden;
}
.resource-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resource-card:nth-child(2) .resource-card-image { background: var(--apricot); }
.resource-card:nth-child(3) .resource-card-image { background: var(--curious-teal); }
.resource-card:nth-child(4) .resource-card-image { background: var(--sunflower); }
.resource-card:nth-child(5) .resource-card-image { background: var(--lilac-sky); }
.resource-card:nth-child(6) .resource-card-image { background: var(--soft-mint); }
.resource-card-body { padding: var(--space-4); }
.resource-card .tag {
  display: inline-block;
  background: var(--white-cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--curious-teal);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
}
.resource-card h3 { font-size: 1.35rem; margin: var(--space-2) 0 0; color: var(--wonder-blue); }
.resource-card-body p { font-size: 0.92rem; color: var(--ink-soft); margin: var(--space-2) 0 var(--space-3); }
.resource-link {
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--wonder-blue);
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--apricot);
  color: var(--white-cream);
  text-align: center;
}
.final-cta .container { max-width: 720px; position: relative; z-index: 2; }
.final-cta h2 { color: var(--white-cream); }
.final-cta p { color: rgba(255,251,243,0.92); margin-left: auto; margin-right: auto; }
.final-cta .ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
}
.final-cta .reassure {
  font-size: 0.9rem;
  color: rgba(255,251,243,0.85);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--wonder-blue);
  color: rgba(255,251,243,0.85);
  padding: var(--space-8) 0 var(--space-6);
}
/* The footer spans the full viewport width (unlike sections, which cap out
   around 1180px), so the hill-divider's height — which scales with width to
   preserve its viewBox aspect ratio — grows tall enough on wide screens that
   its deepest dips sink past the padding above and overlap the footer-top
   content. Capping its height and letting the SVG stretch to fill it
   (preserveAspectRatio="none" is already set) keeps it clear at any width. */
.site-footer .hill-divider { height: 70px; }
.site-footer .hill-divider svg { height: 100%; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: var(--space-5);
}
.footer-brand > img { height: 40px; margin-bottom: var(--space-3); }
.footer-brand p { color: rgba(255,251,243,0.7); font-size: 0.9rem; }
.footer-ace {
  display: inline-block;
  margin-top: var(--space-4);
}
.footer-ace img {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0;
}
.footer-col h4 {
  color: var(--white-cream);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { text-decoration: none; color: rgba(255,251,243,0.78); font-size: 0.92rem; }
.footer-col a:hover { color: var(--sunflower); }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,251,243,0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: rgba(255,251,243,0.6);
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--sunflower); }

/* ---------- Scroll reveal ----------
   --offset-y lets an element keep a permanent staggered position that
   survives past the reveal transition, instead of being reset to
   translateY(0). */
.reveal {
  --offset-y: 0px;
  opacity: 0;
  transform: translateY(calc(var(--offset-y) + 28px));
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(var(--offset-y));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lead-magnet.reveal { animation: none; }
  .lead-magnet.is-bouncing { animation: none; }
  .btn, .program-card, .resource-card { transition: none; }
  .parallax { transform: none !important; }
  .profile-panel.is-entering { animation: none; }
  .team-panel.is-entering { animation: none; }
}

/* ==========================================================================
   Service-page components
   Shared across every ABA-setting service page. Designed once here, reused
   unmodified per page — only text/images/links change per page.
   ========================================================================== */

/* ---------- Accordion (base) — used for "Could this fit my child?" and FAQ ---------- */
.accordion { display: flex; flex-direction: column; }
.accordion-item + .accordion-item { margin-top: var(--space-3); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--wonder-blue);
  padding: 0;
}
.accordion-trigger-text { flex: 1; }
.accordion-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(14, 58, 90, 0.08);
  color: var(--wonder-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel-inner p { margin: 0; padding-top: var(--space-2); color: var(--ink-soft); font-size: 0.95rem; }

/* Skin: fit-check list (section 2, "Could this fit my child?") */
.accordion--fit .accordion-item {
  background: var(--white-cream);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-rest);
}
.accordion--fit .accordion-trigger { font-size: 1.05rem; }
.accordion--fit .accordion-check {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--curious-teal);
  color: var(--white-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Skin: FAQ (section 7) — no card chrome, per brief; hairline dividers only */
.accordion--faq .accordion-item { border-bottom: 1px solid rgba(14, 58, 90, 0.12); padding: var(--space-4) 0; }
.accordion--faq .accordion-item:first-child { padding-top: 0; }
.accordion--faq .accordion-trigger { font-size: 1.05rem; }

/* ---------- Showcase — "Why this service?" large photo + 3 floating callouts ---------- */
.showcase {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-6);
  align-items: center;
  position: relative;
}
.showcase-photo-wrap { position: relative; }
.showcase-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  height: 92%;
  transform: translate(-50%, -50%);
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background: radial-gradient(circle, var(--curious-teal) 55%, rgba(49, 160, 152, 0.4) 78%, rgba(49, 160, 152, 0) 100%);
  z-index: 0;
}
.showcase-photo-frame {
  position: relative;
  aspect-ratio: 4/3.6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  z-index: 1;
}
.showcase-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-callouts { display: flex; flex-direction: column; gap: var(--space-5); position: relative; z-index: 1; }
.showcase-callout { display: flex; align-items: flex-start; gap: var(--space-3); }
.showcase-callout-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white-cream);
  box-shadow: var(--shadow-rest);
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-callout-icon svg { width: 24px; height: 24px; }
.showcase-callout-text h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: var(--space-1); }
.showcase-callout-text p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }
.showcase-callout-overlap {
  position: absolute;
  left: -6%;
  bottom: -8%;
  z-index: 2;
  background: var(--white-cream);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-hover);
  max-width: 240px;
}

/* ---------- Program overview — center-based ABA page, Section 3 ---------- */
.program-overview { background: var(--white-cream); }

.overview-split {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  z-index: 2;
}

.overview-copy .eyebrow { margin-bottom: var(--space-3); }
.overview-copy h2 { margin-bottom: var(--space-4); }
.overview-copy > p { font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: var(--space-6); }

.overview-visual { position: relative; aspect-ratio: 4/3; max-width: 420px; }
.overview-visual .frame {
  position: absolute;
  inset: 4%;
  background: var(--mint-40);
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--curious-teal);
}
.overview-visual .frame:has(img) { overflow: hidden; padding: 0; box-shadow: var(--shadow-hover); }
.overview-visual .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overview-visual .frame svg { width: 48px; height: 48px; }
.overview-visual .frame span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--curious-teal);
  max-width: 15ch;
}

/* -- Program at a Glance panel -- */
.glance-panel {
  position: relative;
  background: var(--apricot);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  box-shadow:
    0 10px 20px rgba(241, 136, 100, 0.28),
    0 28px 52px rgba(14, 58, 90, 0.22);
  transform: translateY(calc(-1 * var(--space-4)));
  z-index: 2;
}
.glance-tab {
  position: absolute;
  top: var(--space-5);
  right: -16px;
  background: var(--white-cream);
  color: var(--wonder-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-rest);
  writing-mode: vertical-rl;
  z-index: 3;
}
.glance-body {
  position: relative;
  background: var(--white-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow: hidden;
}
.glance-num {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-4);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--apricot-15);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.glance-head { position: relative; z-index: 2; margin-bottom: var(--space-5); padding-right: var(--space-5); }
.glance-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apricot);
  margin-bottom: var(--space-1);
}
.glance-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  color: var(--wonder-blue);
  margin: 0;
}
.glance-rows { position: relative; z-index: 2; }
.glance-row { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) 0; }
.glance-row:first-child { padding-top: 0; }
.glance-row:last-child { padding-bottom: 0; }
.glance-row + .glance-row { border-top: 1px solid rgba(14, 58, 90, 0.12); }
.glance-row-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-rest);
}
.glance-row-icon svg { width: 20px; height: 20px; }
.glance-row-text { display: flex; flex-direction: column; gap: 2px; }
.glance-row-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wonder-blue-80);
}
.glance-row-value { font-weight: 600; font-size: 0.98rem; line-height: 1.35; color: var(--wonder-blue); }

/* -- Center experience ribbon (below the 50/50 split, same section) -- */
.experience-ribbon { margin-top: var(--space-7); position: relative; z-index: 2; }
.experience-ribbon .section-head { margin-bottom: var(--space-6); }

.experience-path {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
  z-index: 2;
  padding-top: var(--space-2);
}
.experience-path::before { content: ""; display: none; }
.experience-path-line {
  position: absolute;
  top: var(--space-2);
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 0;
  pointer-events: none;
}
.experience-node {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.experience-marker {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-rest);
  flex: none;
}
.experience-node h3 { font-size: 1.05rem; margin-bottom: var(--space-2); color: var(--wonder-blue); }
.experience-node p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; max-width: 22ch; }

/* ---------- Goal ribbon — "What could we work on?" ---------- */
.goal-ribbon {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2) 0 var(--space-3);
}
.goal-ribbon-item {
  position: relative;
  flex: 1 1 0;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-lg);
}
.goal-ribbon-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--wonder-blue-80);
  border-right: 2px solid var(--wonder-blue-80);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.4;
}
.goal-ribbon-item:nth-child(6n+1) { background: var(--sunflower-20); }
.goal-ribbon-item:nth-child(6n+2) { background: var(--teal-15); }
.goal-ribbon-item:nth-child(6n+3) { background: var(--apricot-15); }
.goal-ribbon-item:nth-child(6n+4) { background: var(--lilac-20); }
.goal-ribbon-item:nth-child(6n+5) { background: var(--mint-40); }
.goal-ribbon-item:nth-child(6n+6) { background: var(--wonder-blue-10); }
.goal-ribbon-icon svg { width: 28px; height: 28px; }
.goal-ribbon-label { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--wonder-blue); }
.goal-ribbon-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: 180px;
  transform: translateX(-50%) translateY(6px);
  background: var(--wonder-blue);
  color: var(--white-cream);
  font-size: 0.8rem;
  line-height: 1.4;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}
.goal-ribbon-item:hover .goal-ribbon-tooltip,
.goal-ribbon-item:focus-within .goal-ribbon-tooltip,
.goal-ribbon-item.is-active .goal-ribbon-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Profile explorer — "What could an individualized ABA program look like?" (center-based ABA page only) ---------- */
.section-head-tags { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.section-head-tags .eyebrow { margin-bottom: 0; }
.illustrative-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--apricot);
  background: var(--apricot-15);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
}

.profile-tabs { display: flex; justify-content: center; flex-wrap: nowrap; gap: var(--space-5); padding: var(--space-2) 0; }
.profile-tab {
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: var(--space-2);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.profile-tab:focus-visible { outline: 2px solid var(--curious-teal); outline-offset: 4px; border-radius: var(--radius-lg); }
.profile-tab:nth-child(1) { --tab-accent: var(--curious-teal); }
.profile-tab:nth-child(2) { --tab-accent: var(--apricot); }
.profile-tab:nth-child(3) { --tab-accent: var(--lilac-sky); }
.profile-tab:nth-child(4) { --tab-accent: var(--sunflower); }
.profile-tab:nth-child(1) .profile-tab-blob { background: var(--teal-15); }
.profile-tab:nth-child(2) .profile-tab-blob { background: var(--apricot-15); }
.profile-tab:nth-child(3) .profile-tab-blob { background: var(--lilac-20); }
.profile-tab:nth-child(4) .profile-tab-blob { background: var(--sunflower-20); }

.profile-tab-portrait { position: relative; width: clamp(110px, 12vw, 140px); height: clamp(110px, 12vw, 140px); margin: 0 auto var(--space-3); transition: transform 0.25s ease; }
@media (hover: hover) {
  .profile-tab:hover .profile-tab-portrait { transform: translateY(-4px); }
  .profile-tab.is-active:hover .profile-tab-portrait { transform: scale(1.08) translateY(-4px); }
}
.profile-tab:focus-visible .profile-tab-portrait { transform: translateY(-4px); }
.profile-tab.is-active .profile-tab-portrait { transform: scale(1.08); }

.profile-tab-blob {
  position: absolute;
  inset: -8%;
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  z-index: 0;
}
.profile-tab-frame {
  position: absolute;
  inset: 6%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white-cream);
  box-shadow: var(--shadow-rest);
  z-index: 1;
  transition: box-shadow 0.2s ease;
}
.profile-tab-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-tab.is-active .profile-tab-frame { box-shadow: 0 0 0 4px var(--white-cream), 0 0 0 7px var(--tab-accent); }
.profile-tab-dot {
  position: absolute;
  bottom: 2px;
  right: 6%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tab-accent);
  border: 3px solid var(--white-cream);
  z-index: 2;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.profile-tab.is-active .profile-tab-dot { opacity: 1; transform: scale(1); }
.profile-tab-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--wonder-blue); }
.profile-tab-age { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }

.profile-tabs-caption { text-align: center; font-size: 0.85rem; color: var(--ink-soft); max-width: 52ch; margin: 0 auto var(--space-6); }
.profile-disclaimer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--wonder-blue);
  background: var(--apricot-15);
  max-width: 58ch;
  margin: var(--space-3) auto var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}
.profile-disclaimer strong { color: var(--apricot); }

.profile-panel:nth-child(1) { --panel-accent: var(--curious-teal); }
.profile-panel:nth-child(2) { --panel-accent: var(--apricot); }
.profile-panel:nth-child(3) { --panel-accent: var(--lilac-sky); }
.profile-panel:nth-child(4) { --panel-accent: var(--sunflower); }

@keyframes profilePanelFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-panel.is-entering { animation: profilePanelFade 0.4s ease forwards; }

.profile-panel-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-7); align-items: center; }
.profile-panel-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--panel-accent);
  background: var(--wonder-blue-10);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.profile-panel-copy h3 { margin-bottom: var(--space-2); }
.profile-panel-copy > p { font-size: 1.02rem; color: var(--ink-soft); max-width: 48ch; margin-bottom: var(--space-5); }

.profile-mini-lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.profile-mini-list-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--wonder-blue); margin-bottom: var(--space-3); }
.profile-mini-row { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.profile-mini-row:last-child { margin-bottom: 0; }
.profile-mini-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--panel-accent); margin-top: 8px; }

.profile-support { margin-top: var(--space-5); }
.profile-support-label { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--wonder-blue); margin-bottom: var(--space-2); }

.profile-panel-visual { position: relative; aspect-ratio: 4 / 4.6; max-width: 360px; margin: 0 auto; }
.profile-panel-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  height: 92%;
  transform: translate(-50%, -50%);
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background: var(--panel-accent);
  opacity: 0.18;
  z-index: 0;
}
.profile-panel-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  z-index: 1;
}
.profile-panel-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sibling of .profile-panel-photo-frame (not a child) — same reasoning as
   .program-card-badge: the frame's own overflow:hidden would clip a
   corner-overlapping tag if nested inside it. */
.profile-panel-tag {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  background: var(--white-cream);
  color: var(--wonder-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-hover);
}

.profile-explorer-cta { text-align: center; margin-top: var(--space-7); }
.profile-explorer-cta p { max-width: 44ch; margin: 0 auto var(--space-4); font-size: 1.05rem; }

/* ---------- Team explorer — "Meet the team" (center-based ABA page only) ---------- */
.team-tabs { display: flex; justify-content: center; flex-wrap: nowrap; gap: var(--space-5); padding: var(--space-2) 0; }
.team-tab {
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: var(--space-2);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.team-tab:focus-visible { outline: 2px solid var(--curious-teal); outline-offset: 4px; border-radius: var(--radius-lg); }
.team-tab:nth-child(1) { --tab-accent: var(--curious-teal); }
.team-tab:nth-child(2) { --tab-accent: var(--apricot); }
.team-tab:nth-child(3) { --tab-accent: var(--lilac-sky); }
.team-tab:nth-child(4) { --tab-accent: var(--sunflower); }
.team-tab:nth-child(1) .team-tab-blob { background: var(--teal-15); }
.team-tab:nth-child(2) .team-tab-blob { background: var(--apricot-15); }
.team-tab:nth-child(3) .team-tab-blob { background: var(--lilac-20); }
.team-tab:nth-child(4) .team-tab-blob { background: var(--sunflower-20); }

.team-tab-portrait { position: relative; width: clamp(110px, 12vw, 140px); height: clamp(110px, 12vw, 140px); margin: 0 auto var(--space-3); transition: transform 0.25s ease; }
@media (hover: hover) {
  .team-tab:hover .team-tab-portrait { transform: translateY(-4px); }
  .team-tab.is-active:hover .team-tab-portrait { transform: scale(1.08) translateY(-4px); }
}
.team-tab:focus-visible .team-tab-portrait { transform: translateY(-4px); }
.team-tab.is-active .team-tab-portrait { transform: scale(1.08); }

.team-tab-blob {
  position: absolute;
  inset: -8%;
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  z-index: 0;
}
.team-tab-frame {
  position: absolute;
  inset: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--white-cream);
  box-shadow: var(--shadow-rest);
  z-index: 1;
  transition: box-shadow 0.2s ease;
  color: var(--tab-accent);
}
.team-tab-frame svg { width: 30%; height: 30%; }
.team-tab.is-active .team-tab-frame { box-shadow: 0 0 0 4px var(--white-cream), 0 0 0 7px var(--tab-accent); }
.team-tab-dot {
  position: absolute;
  bottom: 2px;
  right: 6%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tab-accent);
  border: 3px solid var(--white-cream);
  z-index: 2;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.team-tab.is-active .team-tab-dot { opacity: 1; transform: scale(1); }
.team-tab-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--wonder-blue); }
.team-tab-role { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }

.team-tabs-caption { text-align: center; font-size: 0.85rem; color: var(--ink-soft); max-width: 52ch; margin: 0 auto var(--space-6); }

.team-panel:nth-child(1) { --panel-accent: var(--curious-teal); }
.team-panel:nth-child(2) { --panel-accent: var(--apricot); }
.team-panel:nth-child(3) { --panel-accent: var(--lilac-sky); }
.team-panel:nth-child(4) { --panel-accent: var(--sunflower); }

@keyframes teamPanelFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.team-panel.is-entering { animation: teamPanelFade 0.4s ease forwards; }

.team-panel-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-7); align-items: center; }
.team-panel-kicker-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.team-panel-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--panel-accent);
  background: var(--wonder-blue-10);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
}
.team-panel-placeholder-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--apricot);
  background: var(--apricot-15);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
}
.team-panel-copy h3 { margin-bottom: var(--space-2); }
.team-panel-credentials { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--wonder-blue); margin-bottom: var(--space-3); }
.team-panel-experience { font-size: 1.02rem; color: var(--ink-soft); max-width: 48ch; margin-bottom: var(--space-4); }

.team-specialty-label { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--wonder-blue); margin-bottom: var(--space-2); }

.team-panel-quote {
  border-left: 3px solid var(--panel-accent);
  margin: var(--space-5) 0 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--wonder-blue);
}

.team-panel-cta { margin-top: var(--space-5); }
.team-cta-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--panel-accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
  transition: transform 0.18s ease;
}
.team-cta-link:hover, .team-cta-link:focus-visible { transform: translateX(4px); }

.team-panel-visual { position: relative; width: 100%; aspect-ratio: 4 / 4.6; max-width: 360px; margin: 0 auto; }
.team-panel-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  height: 92%;
  transform: translate(-50%, -50%);
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background: var(--panel-accent);
  opacity: 0.18;
  z-index: 0;
}
.team-panel-photo-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  z-index: 1;
  background: var(--mint-40);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--curious-teal);
}
.team-panel-photo-frame svg { width: 22%; height: 22%; }
.team-panel-photo-frame span { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--curious-teal); max-width: 14ch; }
.team-panel-tag {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  background: var(--white-cream);
  color: var(--wonder-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-hover);
}

.team-explorer-cta { text-align: center; margin-top: var(--space-7); }

.clinical-team-note {
  max-width: 62ch;
  margin: var(--space-7) auto 0;
  text-align: center;
}
.clinical-team-note h3 { font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-2); }
.clinical-team-note p { color: var(--ink-soft); margin-bottom: var(--space-3); }

/* ---------- Blog post template (resources/blog/) ---------- */
.post-meta { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0; }
.post-body { max-width: var(--measure); }
.post-body h2 { margin-top: var(--space-6); }

.post-cover { aspect-ratio: 16 / 9; max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Author byline — placeholder initials avatar + credential badge until a
   real headshot is provided (same swap-later convention as assets/stock/CREDITS.md). */
.post-author { display: flex; align-items: center; gap: var(--space-3); }
.post-author-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wonder-blue);
  color: var(--white-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.post-author-info { display: flex; flex-direction: column; gap: 2px; }
.post-author-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--wonder-blue);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.post-author-badge {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--curious-teal);
  background: var(--teal-15);
  padding: 2px 8px;
  border-radius: 999px;
}
.post-author-date { font-size: 0.85rem; color: var(--ink-soft); }
.post-author--sm .post-author-avatar { width: 32px; height: 32px; font-size: 0.75rem; }
.post-author--sm .post-author-name { font-size: 0.85rem; }
.post-author--sm .post-author-date { font-size: 0.78rem; }

/* Blog index grid */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.blog-card-image-link { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.blog-card:hover .blog-card-image { transform: scale(1.04); }
.blog-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.blog-card-body h3 { margin: 0; font-size: 1.25rem; }
.blog-card-body h3 a { color: var(--wonder-blue); text-decoration: none; }
.blog-card-body p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; }
.blog-card .post-author { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--wonder-blue-10); }

/* Category tag pills — mapped to topic, not nth-child rotation, so a given
   category always shows the same color across the grid and future posts. */
.blog-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
}
.blog-tag--teal { background: var(--teal-15); color: var(--curious-teal); }
.blog-tag--apricot { background: var(--apricot-15); color: var(--apricot); }
.blog-tag--sunflower { background: var(--sunflower-20); color: var(--wonder-blue); }

/* ---------- Team trust strip (center-based ABA page, "Meet the team") ---------- */
.team-trust-strip { margin-top: var(--space-7); }
.team-trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.team-trust-card {
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}
.team-trust-card .stat-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.team-trust-card .stat-number sup {
  font-size: 0.5em;
  font-weight: 700;
  top: -0.6em;
}
.team-trust-card .stat-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
}
.team-trust-card:nth-child(1) { background: var(--sunflower); }
.team-trust-card:nth-child(1) .stat-number,
.team-trust-card:nth-child(1) .stat-label { color: var(--wonder-blue); }

.team-trust-card:nth-child(2) { background: var(--apricot); }
.team-trust-card:nth-child(2) .stat-number,
.team-trust-card:nth-child(2) .stat-label { color: var(--white-cream); }

.team-trust-card:nth-child(3) { background: var(--lilac-sky); }
.team-trust-card:nth-child(3) .stat-number,
.team-trust-card:nth-child(3) .stat-label { color: var(--wonder-blue); }

.team-trust-card:nth-child(4) { background: var(--soft-mint); }
.team-trust-card:nth-child(4) .stat-number,
.team-trust-card:nth-child(4) .stat-label { color: var(--wonder-blue); }

/* ---------- Trust story — "Why Traina?" ---------- */
.trust-story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: center; }
.trust-story-photo {
  position: relative;
  aspect-ratio: 4/3.4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
}
.trust-story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trust-story-statement { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1.1; margin-bottom: var(--space-4); }
.trust-story-content p { font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: var(--space-5); }
.trust-story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--wonder-blue);
}
.trust-story-meta span + span::before { content: "·"; margin: 0 var(--space-3); color: var(--curious-teal); }

/* ---------- Consult CTA — "Tell us about your child" lead-gen form ---------- */
.consult-cta { background: var(--wonder-blue); color: var(--white-cream); }
.consult-cta .eyebrow { background: rgba(255, 251, 243, 0.16); color: var(--soft-mint); }
.consult-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: center; }
.consult-intro h2 { color: var(--white-cream); font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: var(--space-3); }
.consult-intro p { color: rgba(255, 251, 243, 0.82); font-size: 1.05rem; max-width: 42ch; }
.consult-panel { background: var(--white-cream); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-hover); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field { margin-bottom: var(--space-4); }
.form-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--wonder-blue);
  margin-bottom: var(--space-2);
}
.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--wonder-blue);
  background: var(--white-cream);
  border: 1.5px solid rgba(14, 58, 90, 0.16);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  resize: vertical;
}
.form-field input:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--curious-teal); outline-offset: 2px; }
.form-submit { width: 100%; justify-content: center; border: none; cursor: pointer; font-size: 1rem; margin-top: var(--space-2); }
.form-status { margin-top: var(--space-3); font-size: 0.85rem; color: var(--wonder-blue); text-align: center; }
.form-status[hidden] { display: none; }

.consult-people { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.consult-avatars { display: flex; }
.consult-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white-cream);
  border: 3px solid var(--wonder-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -12px;
}
.consult-avatar:first-child { margin-left: 0; }
.consult-avatar svg { width: 45%; height: 45%; }
.consult-avatar:nth-child(1) { color: var(--curious-teal); z-index: 3; }
.consult-avatar:nth-child(2) { color: var(--apricot); z-index: 2; }
.consult-avatar:nth-child(3) { color: var(--lilac-sky); z-index: 1; }
.consult-people-caption { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--soft-mint); }

.consult-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--soft-mint);
  margin-top: var(--space-4);
}
.consult-trust-line span + span::before { content: "·"; margin: 0 var(--space-3); color: var(--white-cream); opacity: 0.5; }

.care-panel { border-top: 5px solid var(--curious-teal); border-radius: var(--radius-xl); }

.field-optional-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--wonder-blue-10);
  padding: 2px var(--space-2);
  border-radius: 999px;
  margin-left: var(--space-1);
}

.form-reassurance { margin-top: var(--space-3); font-size: 0.85rem; color: var(--ink-soft); text-align: center; }

/* ---------- Guide banner — compact "Recently diagnosed?" callout (section 7 top) ---------- */
.guide-banner {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: var(--space-6);
  align-items: center;
  background: var(--lilac-20);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}
.guide-banner-visual { position: relative; width: 220px; height: 170px; margin: 0 auto; }
.guide-banner-visual .frame {
  position: absolute;
  inset: 6%;
  background: var(--white-cream);
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
}
.guide-banner-copy h3 { font-size: 1.3rem; margin-bottom: var(--space-3); }

/* ---------- "What ABA Can Help With" page: support-area cards, settings grid, reassurance ---------- */
#support-areas { background: var(--mint-40); }

.help-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.help-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-rest);
  color: var(--wonder-blue);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.help-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.help-card-icon { display: block; margin-bottom: var(--space-3); }
.help-card-icon svg { display: block; }
.help-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-2); padding-right: var(--space-6); }
.help-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; padding-right: var(--space-6); }

.help-card-cta { text-align: center; margin-top: var(--space-6); }
.help-card-cta p { font-weight: 600; color: var(--wonder-blue); margin-bottom: var(--space-4); }
.help-card-cta .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }

.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.settings-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--wonder-blue);
  background: var(--white-cream);
  box-shadow: var(--shadow-rest);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.settings-item:hover,
.settings-item:focus-visible { background: var(--teal-15); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.settings-item-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.settings-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wonder-blue-10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-icon svg { width: 20px; height: 20px; }
.settings-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.settings-text span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.settings-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--curious-teal);
}

.reassurance-block { text-align: center; max-width: 620px; margin: var(--space-6) auto 0; }
.reassurance-block p { margin: 0 0 var(--space-3); }

.reassurance-note {
  font-style: italic;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .main-nav { display: none; }
  .main-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white-cream);
    border-bottom: 1px solid rgba(14, 58, 90, 0.1);
    padding: var(--space-4) var(--space-3);
  }
  .main-nav.is-open ul {
    flex-direction: column;
    gap: var(--space-3);
  }
  .nav-toggle { display: block; }
  .nav-dropdown {
    display: none;
    position: static;
    width: 100%;
    margin-top: var(--space-3);
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: 1px solid rgba(14, 58, 90, 0.1);
  }
  .has-dropdown.is-open .nav-dropdown { display: block; }
  .nav-dropdown-grid { grid-template-columns: 1fr; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 380px; margin: 0 auto; }
  .path-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .aba-hub { min-height: 0; }
  .aba-hub-connectors, .aba-hub-halo { display: none; }
  .aba-hub-image { position: static; transform: none; width: 220px; height: 220px; margin: 0 auto var(--space-5); }
  .aba-item, .aba-item.right { position: static; width: 100%; max-width: 480px; margin: 0 auto var(--space-4); flex-direction: row; text-align: left; }
  .choose-grid { grid-template-columns: 1fr; }
  .choose-photo { order: -1; max-width: 380px; margin: 0 auto var(--space-6); }
  .aba-look-grid { grid-template-columns: 1fr; }
  .aba-look-photo { order: -1; max-width: 380px; margin: 0 auto var(--space-6); }
  .trust-stats-grid { grid-template-columns: 1fr; }
  .trust-stats-photo { order: -1; max-width: 380px; margin: 0 auto var(--space-6); }
  .journey { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .journey::before { display: block; position: absolute; top: 0; bottom: 0; left: 31px; right: auto; border-left: 2px dashed rgba(255, 251, 243, 0.35); }
  .journey-wave, .journey-traveler { display: none; }
  .journey-step { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--space-4); }
  .journey-marker { margin-bottom: 0; }
  .journey-step p { max-width: none; }
  .help-connectors { display: none; }
  .lead-magnet { margin-top: var(--space-6); }
  .lead-magnet-content { grid-template-columns: 1fr; text-align: center; }
  .lead-magnet-visual { order: -1; flex-basis: 100%; height: 190px; margin-bottom: var(--space-2); }
  .lead-magnet-ctas { align-items: center; }
  .lead-magnet-ctas .btn { width: 100%; max-width: 320px; }
  .programs-grid { grid-template-columns: 1fr; }
  .programs-intro { align-items: center; text-align: center; margin-bottom: var(--space-6); }
  .programs-intro .section-head { max-width: none; }
  .programs-track { grid-template-columns: repeat(2, 1fr); }
  .center-grid { grid-template-columns: 1fr; }
  .insurance-unified { grid-template-columns: 1fr; }
  .insurance-panel-info { padding: var(--space-6); }
  .insurance-panel-check { clip-path: none; padding: var(--space-6); }
  .showcase { grid-template-columns: 1fr; }
  .showcase-callout-overlap { position: static; max-width: none; margin-top: var(--space-4); }
  .overview-split { grid-template-columns: 1fr; }
  .overview-visual { max-width: 380px; margin: var(--space-5) auto 0; }
  .glance-tab, .glance-num { display: none; }
  .glance-panel { padding: var(--space-2); transform: none; }
  .glance-body { padding: var(--space-5) var(--space-4); }
  .experience-path { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .experience-path::before { display: block; position: absolute; top: 0; bottom: 0; left: 31px; border-left: 2px dashed rgba(14, 58, 90, 0.25); }
  .experience-path-line { display: none; }
  .experience-node { flex-direction: row; align-items: flex-start; text-align: left; gap: var(--space-4); }
  .experience-marker { margin-bottom: 0; }
  .experience-node p { max-width: none; }
  .goal-ribbon { flex-wrap: wrap; overflow-x: visible; }
  .goal-ribbon-item { flex: 1 1 calc(50% - var(--space-2)); }
  .goal-ribbon-item::after { display: none; }
  .fit-puzzle-grid { grid-template-columns: 1fr; }
  .fit-copy { order: 1; }
  .puzzle-collage { order: 2; max-width: 340px; margin: 0 auto; transform: none; filter: none; }
  .support-collage { order: 2; margin: 0 12% var(--space-7) 12%; }
  .trust-story { grid-template-columns: 1fr; }
  .trust-story-photo { order: -1; max-width: 380px; margin: 0 auto; }
  .consult-grid { grid-template-columns: 1fr; }
  .consult-intro { text-align: center; margin: 0 auto var(--space-6); }
  .consult-intro p { margin-left: auto; margin-right: auto; }
  .guide-banner { grid-template-columns: 1fr; text-align: center; }
  .profile-tabs { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .profile-tabs::-webkit-scrollbar { display: none; }
  .profile-tab { flex: 0 0 auto; scroll-snap-align: start; }
  .profile-panel-grid { grid-template-columns: 1fr; }
  .profile-panel-visual { order: -1; max-width: 300px; margin: 0 auto var(--space-5); }
  .profile-mini-lists { grid-template-columns: 1fr; gap: var(--space-4); }
  .team-tabs { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .team-tabs::-webkit-scrollbar { display: none; }
  .team-tab { flex: 0 0 auto; scroll-snap-align: start; }
  .team-panel-grid { grid-template-columns: 1fr; }
  .team-panel-visual { order: -1; max-width: 300px; margin: 0 auto var(--space-5); }
  .team-trust-strip-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .help-card-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  section { padding: var(--space-6) 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .help-card-grid { grid-template-columns: 1fr; }
  .symptom-bento { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .help-grid { grid-template-columns: 1fr; }
  .lead-magnet-content { padding: var(--space-5) var(--space-4); }
  .programs-track {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
    margin: 0 -4vw;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .programs-track::-webkit-scrollbar { display: none; }
  .program-card { flex: 0 0 86%; scroll-snap-align: start; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .resources-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .header-actions .btn-primary .btn-text-full { display: none; }
  .header-actions .btn-primary .btn-text-short { display: inline; }
  .form-row { grid-template-columns: 1fr; }
  .consult-panel { padding: var(--space-5) var(--space-4); }
}

/* ==========================================================================
   Getting Started: "Is ABA Right for My Child?"
   ========================================================================== */

/* ---------- Hero: Guide Download (ported from sandbox/css/option-2-guide-download.css) ----------
   Loaded after the tokens/.blob/.eyebrow/.text-highlight/.btn/.container
   rules above, so only what's new for this hero concept lives here, scoped
   under .hero-guide-download. Originated in the header sandbox
   (sandbox/headers/option-2-guide-download.*) — see that folder for the
   design history/reasoning behind these values. */

.hero-guide-download {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(64px, 8vw, 96px);
  background-color: #cce5d8;
  font-family: var(--font-body);
}

.hgd-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hgd-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: var(--space-2);
  align-items: start;
  max-width: 1240px;
  margin-inline: auto;
}

.hero-guide-download .eyebrow {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: fit-content;
  background: var(--white-cream);
  color: #1f7a70;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hgd-heading {
  grid-column: 1;
  grid-row: 2;
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.15;
  color: var(--wonder-blue);
}

.hgd-body {
  grid-column: 1;
  grid-row: 3;
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.hgd-benefits {
  grid-column: 1;
  grid-row: 4;
  /* Same grid-item min-width:auto fix as .hero-copy above. */
  min-width: 0;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(14px, 2.5vw, 24px);
  margin: var(--space-4) 0 0;
  padding: 0;
}

.hgd-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 180px;
  min-width: 0;
}

.hgd-benefit-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
}

.hgd-benefit-icon img,
.hgd-benefit-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hgd-benefit-text {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wonder-blue);
}

.hgd-cta-row {
  grid-column: 1;
  grid-row: 5;
  margin: var(--space-4) 0 0;
}

/* Secondary text link under the primary CTA (new — the sandbox source
   only has the primary "Download the Free Guide" button). */
.hgd-subcta {
  grid-column: 1;
  grid-row: 6;
  margin: 14px 0 0;
}

.hgd-subcta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--wonder-blue);
  text-decoration: underline;
  text-decoration-color: rgba(14, 58, 90, 0.35);
  text-underline-offset: 4px;
  transition: transform 0.18s ease, text-decoration-color 0.18s ease;
}

.hgd-subcta-link:hover,
.hgd-subcta-link:focus-visible {
  transform: translateX(3px);
  text-decoration-color: var(--wonder-blue);
}

.hgd-visual {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / 7;
  align-self: center;
  justify-self: center;
  width: clamp(240px, 26vw, 380px);
  padding: 30px 24px 24px 30px;
}

.hgd-visual-blob {
  position: absolute;
  z-index: 0;
  width: 84%;
  height: 84%;
  bottom: -18%;
  left: -20%;
  background: rgba(143, 209, 200, 0.3);
  border-radius: 58% 42% 46% 54% / 50% 55% 45% 50%;
}

.hgd-sheet {
  position: absolute;
  z-index: 1;
  inset: 30px 24px 24px 30px;
  border-radius: 8px;
  box-shadow: var(--shadow-rest);
}

.hgd-sheet--white {
  background: var(--white-cream);
  transform: rotate(7deg) translate(8px, 4px);
}

.hgd-sheet--resource {
  background: var(--lilac-sky);
  transform: rotate(-6deg) translate(-6px, 6px);
}

.hgd-cover-link {
  position: relative;
  z-index: 2;
  display: block;
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  transform: rotate(-2deg);
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.hgd-cover-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: -5px;
  width: 8px;
  background: linear-gradient(90deg, rgba(14, 58, 90, 0.35), rgba(14, 58, 90, 0.12));
  border-radius: 4px 0 0 4px;
}

.hgd-cover-frame {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.hgd-cover-link:hover,
.hgd-cover-link:focus-visible {
  transform: translateY(-5px) rotate(0deg);
  box-shadow: 0 24px 48px rgba(14, 58, 90, 0.22);
}

.hgd-cover-link:focus-visible {
  outline: 3px solid var(--wonder-blue);
  outline-offset: 4px;
}

.hgd-cover {
  display: block;
  width: 100%;
  height: auto;
}

.hgd-badge {
  position: absolute;
  z-index: 3;
  top: -14px;
  right: -16px;
  width: clamp(92px, 10vw, 122px);
  height: clamp(92px, 10vw, 122px);
  margin: 0;
  border-radius: 50%;
  background: var(--sunflower);
  box-shadow: 0 8px 18px rgba(14, 58, 90, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--wonder-blue);
}

@media (prefers-reduced-motion: reduce) {
  .hgd-cover-link {
    transition: none;
  }
}

@media (max-width: 768px) {
  .hgd-grid {
    grid-template-columns: 1fr;
  }

  .hero-guide-download .eyebrow,
  .hgd-heading,
  .hgd-body,
  .hgd-benefits,
  .hgd-cta-row,
  .hgd-subcta,
  .hgd-visual {
    grid-column: 1;
    grid-row: auto;
  }

  .hero-guide-download .eyebrow { order: 1; }
  .hgd-heading { order: 2; }
  .hgd-body { order: 3; }

  .hgd-visual {
    order: 4;
    width: clamp(240px, 62vw, 290px);
    margin: var(--space-5) auto 0;
  }

  .hgd-benefits {
    order: 5;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .hgd-cta-row { order: 6; }
  .hgd-subcta { order: 7; text-align: center; }

  .hgd-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Mega menu: Getting Started (wide variant, 8 items, icon+label only) ---------- */

/* ---------- "You might be exploring ABA if…" (recognition signs) ----------
   Compact editorial layout: left-aligned header (flush with the hero's own
   left text edge — same max-width/padding formula as .hero-guide-download
   .hgd-grid), short horizontal (icon-left/text-right) cards in solid pastel
   brand colors. Rebuilt twice per feedback — see conversation history. */
.iarfmc-recognition {
  position: relative;
  overflow: hidden;
  background: var(--white-cream);
  padding: clamp(48px, 6vw, 76px) clamp(20px, 5vw, 48px);
  font-family: var(--font-body);
}

.iarfmc-recognition-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
}

.iarfmc-recognition .section-head {
  text-align: left;
  max-width: 800px;
  margin: 0 0 var(--space-6);
}

.iarfmc-recognition .section-head h2 { white-space: nowrap; }

.iarfmc-recognition .section-head p { margin: 0; max-width: 62ch; }

.iarfmc-recognition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.iarfmc-recognition-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 22px;
  border-radius: 20px;
  padding: 26px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.iarfmc-recognition-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-rest);
}

.iarfmc-recognition-icon {
  flex: none;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--white-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.iarfmc-recognition-icon svg { width: 42px; height: 42px; }

.iarfmc-recognition-card:nth-child(6n+1) { background: #F9DED5; }
.iarfmc-recognition-card:nth-child(6n+1) .iarfmc-recognition-icon { color: var(--apricot); }
.iarfmc-recognition-card:nth-child(6n+2) { background: #DDF1EE; }
.iarfmc-recognition-card:nth-child(6n+2) .iarfmc-recognition-icon { color: var(--curious-teal); }
.iarfmc-recognition-card:nth-child(6n+3) { background: #EADCF5; }
.iarfmc-recognition-card:nth-child(6n+3) .iarfmc-recognition-icon { color: var(--lilac-sky); }
.iarfmc-recognition-card:nth-child(6n+4) { background: #DDEBFA; }
.iarfmc-recognition-card:nth-child(6n+4) .iarfmc-recognition-icon { color: var(--wonder-blue); }
.iarfmc-recognition-card:nth-child(6n+5) { background: #FFF0B8; }
.iarfmc-recognition-card:nth-child(6n+5) .iarfmc-recognition-icon { color: var(--sunflower); }
.iarfmc-recognition-card:nth-child(6n+6) { background: #F9DED5; }
.iarfmc-recognition-card:nth-child(6n+6) .iarfmc-recognition-icon { color: var(--apricot); }

.iarfmc-recognition-card p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--wonder-blue);
  max-width: 24ch;
}

@media (max-width: 1080px) {
  .iarfmc-recognition .section-head h2 { white-space: normal; }
}

@media (max-width: 900px) {
  .iarfmc-recognition-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .iarfmc-recognition-grid { grid-template-columns: 1fr; }
  .iarfmc-recognition-icon { width: 76px; height: 76px; }
  .iarfmc-recognition-icon svg { width: 36px; height: 36px; }
}

/* ---------- "What happens next?" 3-step process ----------
   Full-bleed mint section (no inset "card" panel — background IS the
   section), wide container, horizontal icon-left/text-right blocks with
   large dominant connecting arrows. Rebuilt per feedback — the bridge
   section above this was replaced with the homepage's .belief section. */
.iarfmc-next {
  position: relative;
  overflow: hidden;
  background: var(--soft-mint);
  padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 48px);
}

.iarfmc-next-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
}

.iarfmc-next-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-7);
}

.iarfmc-next-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}

.iarfmc-next-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--white-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
  padding: 28px 26px;
  text-align: left;
}

.iarfmc-next-num {
  position: absolute;
  top: -16px;
  left: -14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white-cream);
  box-shadow: var(--shadow-rest);
  z-index: 2;
}

.iarfmc-next-card:nth-child(1) .iarfmc-next-num { background: var(--apricot); }
.iarfmc-next-card:nth-child(2) .iarfmc-next-num { background: var(--curious-teal); }
.iarfmc-next-card:nth-child(3) .iarfmc-next-num { background: var(--lilac-sky); }

.iarfmc-next-icon {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wonder-blue);
}

.iarfmc-next-card:nth-child(1) .iarfmc-next-icon { background: var(--apricot-15); }
.iarfmc-next-card:nth-child(2) .iarfmc-next-icon { background: var(--teal-15); }
.iarfmc-next-card:nth-child(3) .iarfmc-next-icon { background: var(--lilac-20); }

.iarfmc-next-icon svg { width: 34px; height: 34px; }

.iarfmc-next-text h3 { font-size: 1.15rem; margin-bottom: 6px; }
.iarfmc-next-text p { font-size: 0.95rem; margin: 0; }

.iarfmc-next-arrow {
  position: absolute;
  top: 50%;
  right: -46px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  color: var(--wonder-blue);
  opacity: 0.55;
  z-index: 1;
}

.iarfmc-next-card:last-child .iarfmc-next-arrow { display: none; }

.iarfmc-next-cta { text-align: center; margin-top: var(--space-7); }

@media (max-width: 900px) {
  .iarfmc-next-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .iarfmc-next-arrow { width: 30px; height: 30px; right: -32px; }
}

@media (max-width: 800px) {
  .iarfmc-next-grid { grid-template-columns: 1fr; gap: 48px; }
  .iarfmc-next-arrow {
    top: auto;
    bottom: -34px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* ---------- FAQ — 2-column layout, mirrored from the homepage's
   .choose-traina ("Why families choose Traina", index.html ~L376, css
   ~L1070) with photo/CTA badge on the right instead of left, and the
   .choose-list info items swapped for the FAQ accordion. Ported under its
   own prefix rather than reusing .choose-* directly, same approach as the
   hero (.hgd-*) — rebuilt per feedback that the old single full-width
   white card read as too much empty space for how short the questions are. ---------- */
.iarfmc-faq {
  position: relative;
  background: #F1E4D2;
  padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 48px);
}

.iarfmc-faq-grid {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}

.iarfmc-faq-content { position: relative; z-index: 2; }
.iarfmc-faq-content .section-head { max-width: 52ch; margin-bottom: var(--space-5); }

/* Tighter collapsed row height than the shared .accordion--faq default
   (tuned for the wider full-width card on other pages) — this column is
   already narrower, so the rows read compact without further overrides
   needed beyond this. */
.iarfmc-faq-content .accordion--faq .accordion-item { padding: 16px 0; }
.iarfmc-faq-content .accordion--faq .accordion-trigger { font-size: 1rem; }

.iarfmc-faq-photo {
  position: relative;
  margin: 0 4% var(--space-6) 8%;
}

.iarfmc-faq-photo-frame {
  position: relative;
  aspect-ratio: 4/4.8;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--curious-teal);
  transform: rotate(2deg);
  box-shadow: var(--shadow-hover);
}
.iarfmc-faq-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: rotate(-2deg) scale(1.12);
  display: block;
}

.iarfmc-faq-photo-frame-secondary {
  position: absolute;
  left: -14%;
  bottom: -12%;
  z-index: 2;
  width: 55%;
  aspect-ratio: 4/3.3;
  padding: 8px;
  background: var(--white-cream);
  border-radius: var(--radius-md);
  transform: rotate(-4deg);
  box-shadow: var(--shadow-hover);
}
.iarfmc-faq-photo-frame-secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% 40%;
  border-radius: calc(var(--radius-md) - 6px);
  display: block;
}

.iarfmc-faq-badge {
  position: absolute;
  right: -16px;
  bottom: -20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--white-cream);
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  box-shadow: var(--shadow-hover);
  text-decoration: none;
  flex-direction: row-reverse;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.iarfmc-faq-badge:hover, .iarfmc-faq-badge:focus-visible {
  transform: translateY(-3px);
}
.iarfmc-faq-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--apricot);
  color: var(--white-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.iarfmc-faq-badge-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: right;
}
.iarfmc-faq-badge-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--wonder-blue);
  text-align: right;
}

@media (max-width: 900px) {
  .iarfmc-faq-grid { grid-template-columns: 1fr; }
  .iarfmc-faq-photo { order: -1; max-width: 380px; margin: 0 auto var(--space-6); }
}

/* ---------- "Get our free guide" section (reuses the hero-guide-download
   visual sub-components — .hgd-visual/.hgd-sheet/.hgd-cover-*/.hgd-badge —
   and the closing section's copy styling, so no new visual pieces here) ---------- */
.iarfmc-guide {
  position: relative;
  background: var(--white-cream);
  padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 48px);
}

.iarfmc-guide-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.iarfmc-guide-inner .hgd-visual {
  grid-column: 2;
  grid-row: auto;
  justify-self: center;
}

@media (max-width: 800px) {
  .iarfmc-guide-inner { grid-template-columns: 1fr; text-align: center; }
  .iarfmc-guide-inner .iarfmc-closing-copy p { margin-left: auto; margin-right: auto; }
}

/* ---------- "Still not sure? That's okay." closing section ---------- */
/* Flat #fdeade instead of var(--apricot-15) (rgba(241,136,100,.15)) on
   purpose: the footer's hill-divider paints this same color directly over
   the footer's solid navy background, and a translucent color composites
   differently there than it does here over the page's cream backdrop —
   that mismatch was the "random color piece" breaking the transition.
   #fdeade is apricot-15 flattened against --white-cream, so both spots
   render pixel-identical regardless of what's behind them. */
.iarfmc-closing {
  background: #fdeade;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 48px) clamp(72px, 9vw, 100px);
}

.iarfmc-closing-banner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 300px;
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.iarfmc-closing-photo-frame {
  position: relative;
  aspect-ratio: 4 / 4.6;
  border-radius: 22px;
  overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-hover);
}

.iarfmc-closing-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.iarfmc-closing-copy { position: relative; z-index: 1; }
.iarfmc-closing-copy p { max-width: 46ch; }
.iarfmc-closing-copy .btn { margin-top: var(--space-4); }
.iarfmc-closing-secondary {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--wonder-blue);
  text-decoration: underline;
  text-decoration-color: rgba(14, 58, 90, 0.35);
  text-underline-offset: 4px;
}
.iarfmc-closing-secondary:hover,
.iarfmc-closing-secondary:focus-visible { text-decoration-color: var(--wonder-blue); }

@media (max-width: 800px) {
  .iarfmc-closing-banner { grid-template-columns: 1fr; text-align: center; }
  .iarfmc-closing-photo-frame { max-width: 240px; margin: 0 auto; aspect-ratio: 4 / 3.4; }
  .iarfmc-closing-copy p { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   Contact Us page
   ========================================================================== */

/* ---------- Hero — adapts .hero-icon-focus (css/styles.css:564-793, live on
   aba-therapy/what-aba-can-help-with/). Reuses that class wholesale for the
   grid/copy/photo-frame; these rules are only the deltas: an organic photo
   mask instead of a perfect circle, a row of trust points reusing
   .hgd-benefit-icon instead of the overlapping pill list, and a handwritten
   note overlapping the photo's corner instead of a side callout. ---------- */
.contact-hero .icf-photo-wrap {
  max-width: 420px;
  margin-left: auto;
  margin-right: 12px;
}
.contact-hero .icf-photo {
  object-position: 42% 18%;
}
.contact-hero .icf-photo-frame {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

.contact-hero .icf-pill-spark {
  top: -8px;
  right: 12%;
  left: auto;
}

.contact-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.5vw, 28px);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.contact-hero-trust .hgd-benefit {
  flex: 1 1 160px;
}

.contact-hero-note {
  position: absolute;
  right: calc(100% + 36px);
  bottom: 22%;
  left: auto;
  z-index: 2;
  width: 148px;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--wonder-blue);
  text-align: right;
  transform: rotate(-3deg);
}

.contact-hero-note svg {
  flex: none;
  width: 16px;
  height: auto;
  margin-top: 3px;
  color: var(--apricot);
}

@media (max-width: 1000px) {
  .contact-hero-note { display: none; }
}

/* ---------- Contact Block — two-panel rounded container, templated on
   .insurance-unified (css/styles.css:2564-2650, live on index.html's
   insurance section): one grid element with a single border-radius holding
   two panels, rather than two separate cards. ---------- */
.contact-block {
  padding: clamp(48px, 6vw, 72px) var(--gutter);
}

.contact-panels {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}

.contact-panel-form,
.contact-panel-alt {
  padding: clamp(32px, 4vw, 56px);
}

/* True white (not --white-cream) is deliberate here: the page's own
   background and --white-cream read as nearly the same warm off-white, so
   the form panel was blending into the page instead of standing out. */
.contact-panel-form {
  background: #ffffff;
}

.contact-panel-alt {
  position: relative;
  overflow: hidden;
  background: var(--soft-mint);
}

.contact-panel-form h2,
.contact-panel-alt h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}

/* Fields stack full-width, single column (no .form-row pairing here) and
   sit close to the submit button — the last field before it drops to a
   tighter margin so the form doesn't trail off with a big gap above the
   button. */
.contact-panel-form form .form-field { margin-bottom: var(--space-3); }
.contact-panel-form form .form-field--last { margin-bottom: var(--space-2); }

.contact-form-submit-icon {
  width: 18px;
  height: 18px;
}

/* Alternative-contact rows — icon + title + link (reuses .hgd-benefit-icon
   for the circle), stacked vertically instead of .hgd-benefits' horizontal
   row. Sized a step up from the compact v1 pass so the panel doesn't read
   as an afterthought next to the form, without the big card/button
   treatment that previously blew the panel's height out. */
.contact-alt-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}

.contact-alt-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-alt-row .hgd-benefit-icon {
  width: 50px;
  height: 50px;
}

.contact-alt-row-text { flex: 1 1 auto; min-width: 0; }

.contact-alt-row-text h3 {
  margin: 0;
  font-size: 1.05rem;
}

.contact-alt-row-text p {
  margin: 0;
  font-size: 0.94rem;
}

.contact-alt-row-text p a,
.contact-alt-row-text > a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--wonder-blue);
  text-decoration: underline;
  text-decoration-color: rgba(14, 58, 90, 0.35);
  text-underline-offset: 2px;
}

.contact-alt-row-text p a:hover,
.contact-alt-row-text p a:focus-visible { text-decoration-color: var(--wonder-blue); }

.contact-panel-alt-doodle {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: auto;
  color: var(--apricot);
  opacity: 0.6;
  pointer-events: none;
}

/* Trust block — reuses .trust-stat-card (the homepage's colored stat
   cards), 2-per-row, sized down slightly to fit this panel. No forced
   height/flex split this time (that's what clipped content last round) —
   this just flows naturally under the rows above, and the grid row stretch
   on .contact-panels handles matching heights safely. */
.contact-panel-alt-trust {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(14, 58, 90, 0.15);
}

.contact-panel-alt-trust .trust-stats-cards {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.contact-panel-alt-trust .trust-stat-card {
  padding: var(--space-3) var(--space-2);
}

.contact-panel-alt-trust .trust-stat-card .stat-number {
  font-size: 1.5rem;
}

.contact-panel-alt-trust .trust-stat-card .stat-label {
  font-size: 0.75rem;
}

/* Card 4 ("Kids Helped") reused the homepage's --soft-mint fill, which on
   the homepage sits on a white/cream background — here it's nested inside a
   panel whose own background IS --soft-mint, so the card vanished into it.
   Swapped to a solid wonder-blue card instead for real contrast. */
.contact-panel-alt-trust .trust-stat-card:nth-child(4) {
  background: var(--wonder-blue);
}
.contact-panel-alt-trust .trust-stat-card:nth-child(4) .stat-number,
.contact-panel-alt-trust .trust-stat-card:nth-child(4) .stat-label {
  color: var(--white-cream);
}

@media (max-width: 860px) {
  .contact-panels { grid-template-columns: 1fr; }
}

/* ---------- Service Area banner — a single wide rounded container (not a
   two-panel split like the Contact Block above). The graphic is a photo
   placeholder, adapted from the homepage's "Our Langhorne Center" section's
   .frame/.frame-icon pattern (css/styles.css:2536-2552, an organic-blob
   "image coming soon" treatment) rather than an illustrated scene, since a
   real photo belongs here once one exists. ---------- */
.contact-service-area {
  padding: 0 clamp(20px, 5vw, 48px) clamp(48px, 6vw, 72px);
}

.contact-service-area-inner {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--lilac-20);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(32px, 4.5vw, 56px);
}

.contact-service-area-copy h2 { max-width: 22ch; }
.contact-service-area-copy p { max-width: 46ch; }

.contact-service-area-graphic {
  position: relative;
  aspect-ratio: 4 / 3;
}

.contact-service-area-frame {
  position: absolute;
  inset: 4%;
  background: var(--apricot-15);
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
}

.contact-service-area-frame-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white-cream);
  border-radius: 50%;
  padding: 14px;
  box-shadow: var(--shadow-rest);
}

.contact-service-area-frame-label {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 70%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--wonder-blue);
  background: var(--white-cream);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-rest);
}

@media (max-width: 860px) {
  .contact-service-area-inner { grid-template-columns: 1fr; text-align: center; }
  .contact-service-area-copy h2, .contact-service-area-copy p { margin-left: auto; margin-right: auto; }
  .contact-service-area-graphic { margin-top: var(--space-5); max-width: 320px; margin-inline: auto; }
}

/* ---------- FAQ / Support closer — plain and spacious, no card container. --------- */
.contact-support {
  position: relative;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
}

.contact-support-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.contact-support-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.contact-support-icon {
  width: 18px;
  height: 18px;
}

.contact-rainbow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.contact-rainbow-note {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wonder-blue);
  text-align: center;
}

@media (max-width: 860px) {
  .contact-support-inner { grid-template-columns: 1fr; text-align: center; }
  .contact-support-ctas { justify-content: center; }
}

/* ==========================================================================
   What Is ABA Therapy? page
   Everything else on this page reuses existing classes verbatim
   (.hero-icon-focus, .iarfmc-next, .hgd-benefit, .section-photo-ribbon,
   .choose-traina, .accordion--faq, .final-cta) — these rules are only for
   the page's two genuinely new sections plus small wrap/grid overrides.
   ========================================================================== */

/* ---------- "What Can ABA Help With" — 6 .hgd-benefit items as 2 rows of 3
   instead of .hgd-benefits' default single nowrap row. ---------- */
.wiat-help { padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 48px); }

.wiat-help-grid {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  margin: var(--space-6) auto 0;
  row-gap: var(--space-5);
}
.wiat-help-grid .hgd-benefit { flex: 1 1 260px; }

.wiat-help-cta { text-align: center; margin-top: var(--space-6); }

/* ---------- "What ABA Is / Isn't" — new comparison component. ---------- */
.wiat-compare-section { padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 48px); }

.wiat-compare {
  max-width: 900px;
  margin: var(--space-6) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.wiat-compare-col {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.wiat-compare-col h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-3);
}

.wiat-compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wiat-compare-col li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--wonder-blue);
}

.wiat-compare-col li svg { flex: none; width: 18px; height: 18px; }

.wiat-compare-col--no {
  background: var(--flag-rose-10);
}
.wiat-compare-col--no h3,
.wiat-compare-col--no li svg { color: var(--flag-rose); }

.wiat-compare-col--yes {
  background: var(--teal-15);
}
.wiat-compare-col--yes h3,
.wiat-compare-col--yes li svg { color: var(--curious-teal); }

@media (max-width: 700px) {
  .wiat-compare { grid-template-columns: 1fr; }
}

/* ---------- "Your Care Team" — 3-column grid wrapping the portable
   .choose-item/.choose-item-icon classes outside their usual .choose-traina
   context; those classes themselves are unchanged. ---------- */
.wiat-team { padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 48px); background: var(--white-cream); }

.wiat-team-grid {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1000px;
  margin: var(--space-6) auto 0;
}
.wiat-team-grid .choose-item {
  flex: 1 1 280px;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.wiat-team-grid .choose-item-icon { margin-bottom: var(--space-2); }

@media (max-width: 700px) {
  .wiat-team-grid .choose-item { flex: 1 1 100%; }
}

/* ---------- FAQ — narrows the reused .accordion--faq to a comfortable
   reading width, centered under the section heading. ---------- */
.wiat-faq { padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 48px); }

.wiat-faq-wrap {
  max-width: 760px;
  margin: var(--space-6) auto 0;
}

/* ==========================================================================
   Parent Support Quiz ("Where Should I Start With ABA?")
   getting-started/parent-support-quiz/ — additive only. The hero, section-2,
   section-3 and section-4 markup all reuse existing classes (.hero-icon-focus,
   .iarfmc-next, .aba-options/.aba-hub, .hgd-benefits) wholesale and are
   unaffected by anything below. This block covers: two small additions to
   the hero, and the full-screen quiz shell + engine, which have no existing
   precedent on the site.
   ========================================================================== */

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

/* Quiz hero photo is a wide side-by-side of a parent and child. The shared
   .icf-photo crop (65% 30%) shoved them toward the edge of the round frame. */
.psq-hero .icf-photo {
  object-position: 42% 62%;
}

/* ---------- Hero additions (microcopy + disclaimer under the primary CTA) --- */
.icf-microcopy {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--curious-teal);
}

.icf-disclaimer {
  margin: var(--space-2) 0 0;
  max-width: 480px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* This page's pill labels are full phrases ("Recently diagnosed?") rather
   than the single/short words (.icf-pill used elsewhere), which clipped in
   the base component's 2-column mobile grid — scoped to this modifier only
   so the other two live .icf-pills pages are unaffected.
   Selector must out-specify ".hero-icon-focus .icf-pills" (0,2,0) above,
   or this override silently loses the cascade and the clip comes back. */
@media (max-width: 768px) {
  .hero-icon-focus .icf-pills.icf-pills--long-labels {
    grid-template-columns: 1fr;
  }

  .icf-pills--long-labels .icf-pill-label {
    white-space: normal;
  }
}

/* ---------- Full-screen quiz shell ---------- */
body.quiz-open {
  overflow: hidden;
}

.quiz-shell {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 999;
  background: var(--white-cream);
  display: flex;
  flex-direction: column;
}

/* An author rule that sets `display` always beats the UA stylesheet's
   `[hidden] { display: none }`, regardless of specificity order — so
   without this, the shell above would render on top of the page even
   while [hidden] is present. */
.quiz-shell[hidden] {
  display: none;
}

.quiz-shell-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) clamp(20px, 5vw, 48px);
  border-bottom: 1px solid var(--wonder-blue-10);
  background: var(--white-cream);
}

.quiz-shell-logo img {
  height: 32px;
  width: auto;
  display: block;
}

.quiz-progress {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 420px;
  margin: 0 auto;
}

.quiz-progress-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--wonder-blue-10);
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--curious-teal);
  border-radius: 999px;
  transition: width 260ms ease;
}

.quiz-progress-label {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--wonder-blue);
  white-space: nowrap;
}

.quiz-shell-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.quiz-back,
.quiz-exit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--wonder-blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-2);
}

.quiz-back:hover,
.quiz-exit:hover,
.quiz-back:focus-visible,
.quiz-exit:focus-visible {
  color: var(--curious-teal);
}

.quiz-shell-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 48px) clamp(56px, 8vw, 96px);
}

.qz-screen {
  max-width: 640px;
  margin: 0 auto;
}

.qz-intro {
  text-align: center;
}

.qz-intro-body {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.qz-fineprint {
  margin-top: var(--space-4);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.qz-question-heading {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  margin-bottom: var(--space-2);
}

.qz-question-sub {
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}

.qz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.qz-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--wonder-blue-10);
  background: var(--white-cream);
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.qz-option:hover,
.qz-option:focus-visible {
  border-color: var(--curious-teal);
  transform: translateY(-2px);
}

.qz-option.is-selected {
  border-color: var(--curious-teal);
  background: var(--teal-15);
}

.qz-option-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--wonder-blue);
}

.qz-option-sub {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.qz-option--toggle {
  position: relative;
}

.qz-option--toggle::before {
  content: "";
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--wonder-blue-10);
  background: var(--white-cream);
}

.qz-option--toggle.is-selected::before {
  background: var(--curious-teal);
  border-color: var(--curious-teal);
}

.qz-option--toggle.is-selected::after {
  content: "\2713";
  position: absolute;
  top: calc(var(--space-4) + 1px);
  right: calc(var(--space-4) + 3px);
  color: var(--white-cream);
  font-size: 0.8rem;
  font-weight: 700;
}

.qz-continue {
  display: block;
  margin: var(--space-5) auto 0;
}

/* ---------- Transition screen ---------- */
.qz-transition-screen {
  text-align: center;
  padding-top: clamp(24px, 6vw, 64px);
}

.qz-transition-lines {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 420px;
  margin-inline: auto;
}

.qz-transition-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-soft);
  opacity: 0.35;
  transition: opacity 320ms ease;
}

.qz-transition-line.is-active {
  opacity: 1;
  color: var(--wonder-blue);
}

.qz-transition-check,
.qz-transition-dots {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wonder-blue-10);
  color: var(--curious-teal);
  font-weight: 700;
}

.qz-transition-line.is-active .qz-transition-check,
.qz-transition-line.is-active .qz-transition-dots {
  background: var(--teal-15);
}

@media (prefers-reduced-motion: reduce) {
  .qz-transition-line { transition: none; }
}

/* ---------- Result screen ---------- */
.qz-result-screen {
  max-width: 720px;
}

.qz-result-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--curious-teal);
  margin-bottom: 4px;
}

.qz-result-heading {
  margin-bottom: var(--space-3);
}

.qz-result-intro {
  max-width: 62ch;
}

.qz-result-priorities {
  background: var(--soft-mint);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.qz-result-priorities h3 {
  margin-bottom: var(--space-2);
  font-size: 1.1rem;
}

.qz-result-priorities p {
  margin: 0;
}

.qz-result-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.qz-result-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--wonder-blue-10);
}

.qz-result-step-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--curious-teal);
  color: var(--white-cream);
  font-family: var(--font-display);
  font-weight: 700;
}

.qz-result-step h3 {
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.qz-result-step p {
  margin-bottom: var(--space-2);
}

.qz-result-service-link {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 2px dashed var(--lilac-sky);
}

.qz-result-service-link p {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--wonder-blue);
}

.qz-result-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--wonder-blue-10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.qz-result-bottom > p:first-child {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--wonder-blue);
  margin-bottom: 0;
}

.qz-result-bottom-sub {
  width: 100%;
  margin: 0 0 var(--space-2);
}

.qz-result-reassure {
  width: 100%;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: var(--space-2) 0 0;
}

/* Embedded consultation form — reuses .consult-cta/.consult-grid/.consult-panel
   wholesale, scoped down from a full-bleed page section to a card that sits
   inside the quiz shell's content column. */
.qz-result-consult.consult-cta {
  margin-top: var(--space-7);
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--radius-lg);
}

.qz-result-consult .consult-grid {
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-align: left;
}

.qz-result-consult .consult-panel {
  padding: var(--space-5);
}

/* ---------- Email capture (appears after the result, never gates it) ------- */
.qz-email-capture {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--soft-mint);
  text-align: center;
}

.qz-email-capture h3 {
  margin-bottom: var(--space-2);
}

.qz-email-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-3);
}

.qz-email-form input {
  flex: 1 1 240px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 2px solid var(--wonder-blue-10);
  font-family: var(--font-body);
  font-size: 1rem;
}

.qz-email-form .form-status {
  width: 100%;
  text-align: center;
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--wonder-blue);
}

.qz-email-skip {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: underline;
}

@media (max-width: 700px) {
  .quiz-shell-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .quiz-progress {
    order: 3;
    max-width: none;
    margin: 0;
  }

  .qz-result-step {
    flex-direction: column;
  }

  .qz-result-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .qz-result-bottom .btn {
    justify-content: center;
  }
}

/* ---------- Homepage-only background color variety ----------
   Scoped to body.home so these never leak onto other pages that reuse the
   same section classes (e.g. .choose-traina and .programs are also reused
   on getting-started pages and the blog scaffold). Per Alison's review:
   Option A's section rhythm as the base, but with real full-palette
   sections mixed in instead of only pastel tints. Each dark/bold section
   below gets its own text-contrast override, using the same "on dark
   background" button treatment already established in .final-cta
   (border-color/color: var(--white-cream), inverted on hover) — a
   previous sandbox draft skipped this and left the "Meet Traina" button
   and the fixed-cream cta-badge illegible against a matching background. */
body.home .choose-traina { background: var(--wonder-blue); }
body.home .choose-traina .section-head h2 { color: var(--white-cream); }
/* .choose-item-text h3/p sit inside .choose-item's own white-cream card
   (see .choose-item in the base stylesheet), so they keep their default
   dark colors here — an earlier draft overrode them to white and made the
   text invisible against that same white card. */

/* Icons already ship as complete circles (solid color + line art baked
   into the SVG itself, see assets/icons/*.svg) — no extra tinted "outline"
   circle needed around them. Bigger, vertically centered against the text
   block, one solid brand color each. */
body.home .choose-item { align-items: center; }
body.home .choose-item-icon {
  width: 64px;
  height: 64px;
  background: none;
}
body.home .choose-item-icon img,
body.home .choose-item-icon svg { width: 64px; height: 64px; }
body.home .choose-content > .btn.btn-secondary {
  border-color: var(--white-cream);
  color: var(--white-cream);
}
body.home .choose-content > .btn.btn-secondary:hover,
body.home .choose-content > .btn.btn-secondary:focus-visible {
  background: var(--white-cream);
  color: var(--wonder-blue);
}

/* Real brand paper photo on the homepage hero only, per Alison's "paper
   background for home page only" note — every other page keeps the
   existing lighter paper-grain texture from .paper-texture. */
body.home .hero.paper-texture {
  background-color: var(--white-cream);
  background-image:
    linear-gradient(rgba(255, 251, 243, 0.2), rgba(255, 251, 243, 0.4)),
    url("../assets/optimized/assets/textures/paper-background-1200.webp");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}

body.home .path-finder { background: var(--lilac-sky); }

body.home .programs { background: var(--sunflower); }

body.home .belief { background: var(--apricot); }
body.home .belief h2,
body.home .belief p { color: var(--white-cream); }
body.home .belief-tags span { background: rgba(255, 251, 243, 0.28); color: var(--white-cream); }

/* Real center photo dropped into the existing organic-shaped frame, which
   was a plain color placeholder before real photography existed. */
body.home .center-visual .frame {
  background-image: url("../assets/optimized/assets/stock/center-playroom-mural-1200.webp");
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   About Us page (about/index.html)
   Reuses existing components: .program-overview/.overview-split/.glance-panel,
   .profile-explorer, .center-grid + .choose-photo-frame, .contact-support.
   Below: the "Hanging Moments" hero (ported from
   sandbox/headers/hanging-moments.html + sandbox/css/hanging-moments.css,
   namespaced under .hero-photo-line / .hpl-*) and the About-only bits.
   ========================================================================== */

/* ---------- "Hanging Moments" hero (approved sandbox template) ---------- */
.hero-photo-line {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 48px) clamp(40px, 5vw, 64px);
  font-family: var(--font-body);
}
.hpl-container { position: relative; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; text-align: center; }
.hpl-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hpl-decor svg { position: absolute; }
.hpl-decor .hpl-sun { top: 9%; left: 4%; width: clamp(30px, 4vw, 46px); height: auto; color: var(--sunflower); }
.hpl-decor .hpl-spark { top: 46%; left: 2.5%; width: 24px; height: auto; color: var(--curious-teal); }
.hpl-decor .hpl-heart { top: 6%; right: 15%; width: 26px; height: auto; color: var(--wonder-blue); opacity: 0.7; }
.hpl-badge {
  position: absolute;
  top: -10px;
  right: clamp(-6px, 1.5vw, 20px);
  z-index: 1;
  max-width: 132px;
  padding: 12px 16px;
  background: var(--soft-mint);
  border-radius: 42% 58% 63% 37% / 48% 42% 58% 52%;
  transform: rotate(-6deg);
  box-shadow: var(--shadow-rest);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--wonder-blue);
}
.hero-photo-line .eyebrow {
  position: relative;
  z-index: 1;
  background: var(--soft-mint);
  color: #1f7a70;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.hpl-heading {
  position: relative;
  z-index: 1;
  margin: 0 auto var(--space-4);
  max-width: min(92%, 900px);
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.15rem, 1.3rem + 3vw, 3.6rem);
  line-height: 1.1;
  color: var(--wonder-blue);
}
.hpl-body {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: min(85%, 760px);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.hero-photo-line .hero-ctas { position: relative; z-index: 1; justify-content: center; margin: var(--space-5) 0 0; }
.hero-photo-line .hill-divider svg { display: block; }
.hpl-line-wrap { position: relative; z-index: 1; height: 64px; max-width: 96%; margin: clamp(28px, 4vw, 44px) auto 0; }
.hpl-line-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hpl-line-svg path { fill: none; stroke: var(--curious-teal); stroke-width: 3; stroke-linecap: round; opacity: 0.7; }
.hpl-line-flat { display: none; }
.hpl-photos {
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: clamp(14px, 2.6vw, 28px);
  margin: -34px 0 0;
  padding: 0;
}
.hpl-photo { flex: 0 0 auto; width: clamp(172px, 18vw, 240px); }
.hpl-photo:nth-child(1) { margin-top: 14px; }
.hpl-photo:nth-child(2) { margin-top: -8px; }
.hpl-photo:nth-child(3) { margin-top: 20px; }
.hpl-photo:nth-child(4) { margin-top: -6px; }
.hpl-photo-link {
  display: block;
  position: relative;
  border-radius: 20px;
  box-shadow: var(--shadow-rest);
  text-decoration: none;
  transform: rotate(var(--rot, 0deg));
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.hpl-photo-link:hover,
.hpl-photo-link:focus-visible {
  transform: translateY(-5px) rotate(calc(var(--rot, 0deg) * 0.3));
  box-shadow: var(--shadow-hover);
}
.hpl-photo-frame { display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; }
.hpl-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpl-clip {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(14, 58, 90, 0.2);
}
.hpl-clip--sunflower { background: var(--sunflower); }
.hpl-clip--teal { background: var(--curious-teal); }
.hpl-clip--lilac { background: var(--lilac-sky); }
.hpl-clip--apricot { background: var(--apricot); }
.hpl-clip--mint { background: var(--soft-mint); }
@media (prefers-reduced-motion: reduce) { .hpl-photo-link { transition: none; } }
@media (max-width: 1000px) {
  .hpl-badge { max-width: 116px; font-size: 0.76rem; padding: 10px 14px; }
}
@media (max-width: 768px) {
  /* Was clamp(48px,...) top — bigger than desktop's own 24px floor, so
     mobile got MORE padding than tablet/desktop. Sides now come from
     .hpl-container's gutter above instead of a separate 20px override. */
  .hero-photo-line { padding: clamp(24px, 6vw, 32px) 0 clamp(32px, 6vw, 40px); }
  .hpl-badge { position: static; display: inline-block; margin: 0 0 var(--space-4); transform: rotate(-3deg); }
  .hpl-decor .hpl-heart { display: none; }
  .hpl-heading { max-width: 22ch; }
  .hpl-line-svg { display: none; }
  /* Squiggle divider is pure decoration between the CTAs and the photo
     strip — cut it on mobile rather than just flattening it. */
  .hpl-line-wrap { display: none; }
  .hpl-photos {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding: 6px 20px 12px;
    margin-top: 16px;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .hpl-photo { width: 42vw; max-width: 150px; scroll-snap-align: center; }
  .hpl-photo:nth-child(n) { margin-top: 0; }
}

/* ---------- Where It Started (reuses .program-overview split) ---------- */
.program-overview.about-story { background: var(--sunflower-20); }
.about-story .overview-copy > p { margin-bottom: var(--space-4); }
.about-bullets {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.about-bullets li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--wonder-blue);
  line-height: 1.35;
}
.about-story .overview-visual { aspect-ratio: 4/3; }
.about-story .overview-photo {
  position: absolute;
  inset: 0;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}
.about-story .overview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the glance panel sits on sunflower here, so the apricot frame keeps its pop */

/* ---------- Meet Allison ---------- */
.founder-section { background: #fdeadd; }
.founder-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  align-items: start;
  position: relative;
  z-index: 2;
}
/* Keep the headshot a small portrait. Stretching it to the bio height
   pushed the photo down over the quote. */
.founder-photo-wrap { position: relative; width: 220px; max-width: 100%; aspect-ratio: 4 / 5; }
.founder-photo-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow: var(--shadow-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.founder-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.founder-photo-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--white-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-rest);
}
.founder-photo-label {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--wonder-blue);
  background: var(--white-cream);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-rest);
}
.founder-copy { align-self: start; }
.founder-copy h2 { margin-bottom: 2px; }
.founder-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--curious-teal);
  margin-bottom: var(--space-3);
}
.founder-copy > p { margin-bottom: var(--space-3); }
.founder-rows { background: var(--white-cream); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); box-shadow: var(--shadow-rest); }
.founder-rows .glance-row,
.founder-rows .glance-row:first-child,
.founder-rows .glance-row:last-child { padding: 14px 0; align-items: center; }
.founder-rows .glance-row-value { font-size: 0.92rem; font-weight: 500; }

/* ---------- Quote block (Allison card + What We Believe band) ---------- */
.about-quote {
  position: relative;
  margin: var(--space-7) 0 0;
  padding: 84px clamp(28px, 6vw, 88px) clamp(36px, 4vw, 52px);
  background: var(--wonder-blue);
  border-radius: 64px 28px 64px 28px;
  text-align: center;
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}
.about-quote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: clamp(16px, 4vw, 40px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9rem;
  line-height: 1;
  color: var(--sunflower);
  pointer-events: none;
}
.about-quote p {
  position: relative;
  max-width: 28ch;
  margin: 0 auto var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.25;
  color: var(--white-cream);
}
.about-quote-by {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sunflower);
}
.about-quote-by::before { content: ""; width: 40px; height: 3px; border-radius: 2px; background: var(--sunflower); }

/* ---------- Family testimonials (About page) ---------- */
.about-testimonials { padding: clamp(64px, 8vw, 96px) 0; text-align: center; }
.about-testimonials h2 { max-width: 32ch; margin: 0 auto var(--space-6); }
.testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.testimonial-card {
  flex: 1 1 260px;
  max-width: 320px;
  background: var(--white-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: left;
  box-shadow: var(--shadow-rest);
}
.testimonial-card p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.testimonial-card footer { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); }

.about-believe {
  background: var(--lilac-deep);
  text-align: center;
  padding-top: clamp(96px, 10vw, 128px);
  padding-bottom: clamp(96px, 10vw, 128px);
}
.about-believe .eyebrow { background: rgba(255, 251, 243, 0.16); color: var(--sunflower); }
.about-believe h2 {
  position: relative;
  z-index: 2;
  max-width: 20ch;
  margin: 0 auto var(--space-6);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  color: var(--white-cream);
}
.about-believe h2::before {
  content: "\201C";
  display: block;
  height: 0.55em;
  font-size: 1.9em;
  line-height: 1;
  color: var(--sunflower);
}
.believe-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.believe-card {
  flex: 1 1 190px;
  max-width: 226px;
  background: var(--white-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.believe-card .glance-row-icon { width: 52px; height: 52px; margin: 0 auto var(--space-3); }
.believe-card .glance-row-icon svg { width: 26px; height: 26px; }
.believe-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.believe-card p { font-size: 0.9rem; line-height: 1.4; margin: 0 auto; }

@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-photo-wrap { width: 200px; max-width: 200px; margin: 0 auto; }
}

/* ---------- Gated free-guide pop-up ---------- */
.guide-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(960px, 94vw);
  width: 100%;
  max-height: 92vh;
  overflow: visible;
}
.guide-modal::backdrop { background: rgba(14, 58, 90, 0.6); backdrop-filter: blur(3px); }
.guide-modal-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: var(--white-cream);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hover);
  padding: clamp(28px, 4vw, 48px);
  max-height: 92vh;
  overflow-y: auto;
}
.guide-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--wonder-blue-10);
  color: var(--wonder-blue);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.guide-modal-close:hover { background: var(--apricot-15); }
.guide-modal-form h2 { margin: var(--space-2) 0 var(--space-2); }
.guide-modal-form > p { margin-bottom: var(--space-4); }
.guide-modal-thanks h3 { margin-bottom: var(--space-2); }
.guide-modal-thanks p { margin-bottom: var(--space-4); }
.guide-modal-form form[hidden],
.guide-modal-thanks[hidden] { display: none; }
.guide-modal-visual { grid-column: 2; grid-row: auto; width: clamp(200px, 22vw, 300px); }
.guide-modal-visual .hgd-cover-link { pointer-events: none; }
body.guide-modal-open { overflow: hidden; }
@media (max-width: 700px) {
  .guide-modal-panel { grid-template-columns: 1fr; }
  .guide-modal-visual { display: none; }
}

/* About page: pastel yellow closer so it differs from the Since 2009 section above */
.contact-support--yellow { background: #fff1cd; }

/* Home eyebrow pills: contrast against each section's background */
body.home .choose-traina .eyebrow { background: rgba(255, 251, 243, 0.16); color: var(--soft-mint); }
body.home .path-finder .eyebrow { background: rgba(255, 251, 243, 0.6); color: var(--wonder-blue); }
body.home .belief .eyebrow { background: rgba(255, 251, 243, 0.28); color: var(--white-cream); }

/* ==========================================================================
   What Is ABA Therapy? (getting-started/what-is-aba-therapy/) — short V1.
   Hero reuses .hero-photo-line / .hpl-*; guide mockup reuses .hgd-*.
   Namespaced .wiat-* below.
   ========================================================================== */

/* Hero: 3 hanging photos with caption labels, one calm supporting line */
.wiat-hero .wiat-hero-line {
  position: relative;
  z-index: 1;
  margin: var(--space-3) auto 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--wonder-blue);
}
.wiat-photos .hpl-photo { width: clamp(180px, 22vw, 260px); }
.wiat-photo-label {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%) rotate(calc(var(--rot, 0deg) * -1));
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-rest);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--wonder-blue);
  white-space: nowrap;
}
.wiat-photos { padding-bottom: 20px; }

/* Section 2: mint rounded panel, 40/60 split, vertical steps */
.wiat-explain {
  background: var(--soft-mint);
  padding: 0 clamp(16px, 4vw, 48px) clamp(72px, 9vw, 120px);
}
.wiat-explain-panel {
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  background: var(--white-cream);
  border-radius: 56px 56px 56px 140px;
}
.wiat-explain-intro h2 { margin: 0 0 var(--space-3); color: var(--wonder-blue); text-wrap: balance; }
.wiat-explain-intro p { margin: 0; color: var(--ink-soft); max-width: 44ch; }
.wiat-steps { list-style: none; margin: 0; padding: 0; }
.wiat-step {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.wiat-step:last-child { padding-bottom: 0; }
.wiat-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 72px;
  bottom: 0;
  border-left: 2px dashed var(--curious-teal);
  opacity: 0.5;
}
.wiat-step-num {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--wonder-blue);
  box-shadow: var(--shadow-rest);
}
.wiat-step-kicker {
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--curious-teal);
}
.wiat-step h3 { margin: 4px 0 var(--space-2); color: var(--wonder-blue); }
.wiat-step p { margin: 0; color: var(--ink-soft); max-width: 48ch; }

/* Section 3: photo + divider-separated examples, then the guide panel */
.wiat-looks { position: relative; padding: clamp(96px, 10vw, 140px) 0 clamp(72px, 8vw, 112px); background: var(--white-cream); }
.wiat-resources { background: #f3ecf6; }
.wiat-looks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: var(--space-6);
}
.wiat-looks-photo {
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px 36px 36px / 140px 140px 36px 36px;
  overflow: hidden;
  box-shadow: var(--shadow-rest);
}
.wiat-looks-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; display: block; }
.wiat-examples { list-style: none; margin: 0; padding: 0; }
.wiat-example {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid rgba(14, 58, 90, 0.14);
}
.wiat-example:first-child { border-top: 0; padding-top: 0; }
.wiat-example:last-child { padding-bottom: 0; }
.wiat-example-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--wonder-blue);
}
.wiat-example-icon svg { width: 26px; height: 26px; }
.wiat-example h3 { margin: 0 0 4px; color: var(--wonder-blue); }
.wiat-example p { margin: 0; color: var(--ink-soft); }

.wiat-guide {
  margin-top: clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-5);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  background: #f9ded5;
  border-radius: 48px;
  overflow: hidden;
}
.wiat-guide-copy h2 { margin: 0 0 var(--space-3); color: var(--wonder-blue); text-wrap: balance; }
.wiat-guide-copy p { margin: 0 0 var(--space-4); max-width: 46ch; color: var(--ink-soft); }
.wiat-guide-micro { display: block; margin-top: var(--space-3); font-size: 0.85rem; color: var(--ink-soft); }
.wiat-guide .hgd-visual { grid-column: auto; grid-row: auto; width: clamp(220px, 24vw, 320px); }

@media (max-width: 860px) {
  .wiat-explain-panel { grid-template-columns: 1fr; border-radius: 40px; }
  .wiat-looks-grid { grid-template-columns: 1fr; }
  .wiat-looks-photo { aspect-ratio: 4 / 3; border-radius: 36px 36px 36px 120px; }
  .wiat-guide { grid-template-columns: 1fr; border-radius: 36px; }
  .wiat-photos { gap: 28px; }
}
@media (max-width: 480px) {
  .wiat-step { grid-template-columns: 56px 1fr; gap: var(--space-3); }
  .wiat-step-num { width: 56px; height: 56px; font-size: 1.2rem; }
  .wiat-step:not(:last-child)::before { left: 27px; top: 56px; }
}

/* Single-column variant of the pop-up (no cover art) */
.guide-modal--single { max-width: min(560px, 94vw); }
.guide-modal--single .guide-modal-panel { grid-template-columns: 1fr; }

/* ==========================================================================
   Mobile foundations
   Loaded last on purpose: touch-target minimums, small-phone header fit,
   scrollable mobile menu, iOS-safe form sizing, safe-area padding.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, svg { height: auto; }
a, button, summary, input, select, textarea, [role="button"] { touch-action: manipulation; }
h1, h2, h3, p, li { overflow-wrap: break-word; }

/* iOS zooms the page when a focused field is under 16px */
input, select, textarea { font-size: max(16px, 1em); }

@media (max-width: 900px) {
  body.nav-open { overflow: hidden; }

  .nav-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .nav-toggle span { margin: 3px 0; }

  .main-nav.is-open {
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .main-nav a,
  .nav-dropdown-item,
  .nav-dropdown-btn {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-dropdown-btn { justify-content: center; }
  .main-nav a.nav-dropdown-item { padding-top: 8px; padding-bottom: 8px; }

  .phone-link { min-width: 44px; min-height: 44px; justify-content: center; }

  .accordion-trigger { min-height: 48px; }

  .footer-col a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col li { margin-bottom: 0; }
}

/* Small phones: the logo, call icon, CTA and menu button must fit one row */
@media (max-width: 480px) {
  .site-header .container { padding-left: 16px; padding-right: 16px; }
  .logo-link img { height: 36px; }
  .header-actions { gap: var(--space-1, 4px); }
  .header-actions .phone-text { display: none; }
  .header-actions .btn-primary { padding: 12px 16px; font-size: 0.9rem; white-space: nowrap; }
  .btn { min-height: 44px; }
}

/* Keep footer/legal rows clear of the iPhone home indicator */
.footer-bottom { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }

/* Touch: grow the hit area of inline text links to 44px without moving layout */
@media (pointer: coarse) {
  main p a:not(.btn),
  main li a:not(.btn):not(.nav-dropdown-item),
  main h3 a,
  .path-link,
  .aba-item-link {
    position: relative;
  }
  main p a:not(.btn)::after,
  main li a:not(.btn):not(.nav-dropdown-item)::after,
  main h3 a::after,
  .path-link::after,
  .aba-item-link::after {
    content: "";
    position: absolute;
    inset: -11px -4px;
  }
  .logo-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Sticky mobile CTA bar (injected by js/main.js) ---------- */
.sticky-cta { display: none; }
@media (max-width: 900px) {
  .sticky-cta {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 251, 243, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(14, 58, 90, 0.1);
    box-shadow: 0 -6px 20px rgba(14, 58, 90, 0.08);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }
  .sticky-cta.is-visible { transform: none; }
  body.nav-open .sticky-cta { transform: translateY(110%); }
  .sticky-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
  }
  .sticky-cta-call { flex: 0 0 auto; padding: 0 20px; border: 2px solid var(--wonder-blue); color: var(--wonder-blue); }
  .sticky-cta-main { flex: 1; background: var(--apricot); color: var(--white-cream); }
  body.has-sticky-cta { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* ==========================================================================
   Mobile length trim
   Homepage + About: hide/condense sections that only exist because that's
   how the grid looks on desktop, so mobile visitors aren't scrolling ~40
   screens to reach the footer. Every rule here is inside a max-width
   query — desktop is untouched.
   ========================================================================== */

/* ---- Padding-bug fixes: these sections declare their own fixed/uncapped
   padding, which (being equally specific) beats the generic `section`
   element's mobile padding rule (css ~4048) and never shrinks at any
   width, including 375px. ---- */
@media (max-width: 640px) {
  .hero { padding-top: var(--space-6); padding-bottom: var(--space-5); }
  .aba-options { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .process { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .about-believe { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .wiat-looks { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}

/* ---- Tighter type/spacing on phones. Inputs are untouched
   (font-size:max(16px,1em) above), so iOS zoom-prevention still holds. ---- */
@media (max-width: 480px) {
  body { font-size: 15px; line-height: 1.55; }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
  section { padding: var(--space-5) 0; }
  .help-tile-face, .blog-card-body, .believe-card { padding: var(--space-3); }
}

/* ---- Homepage: cut duplicate/decorative sections ---- */
@media (max-width: 900px) {
  /* "What we believe" restates .choose-traina + .trust-stats' message */
  .belief { display: none; }
  /* Its own top divider is tuned to blend after .belief; simplify the
     seam now that .belief never renders here on mobile. */
  .trust-stats .hill-divider.top { display: none; }

  /* Keep the 4 stat cards, drop the photo — it adds no info beyond the
     numbers already next to it. */
  .trust-stats-photo { display: none; }

  /* Duplicate lead-magnet CTA: .path-finder's "Get the Free Guide" card
     right below carries the same offer. */
  .symptom-bento .lead-magnet { display: none; }

  /* Decorative hub illustration — the 4 cards right below it already
     explain the same 4 settings in text. */
  .aba-hub-image { display: none; }

  /* Decorative icon-frame, no informational content. */
  .center-visual { display: none; }
}

/* "Where do I fit?" cards: square aspect-ratio blobs → compact rows.
   Border-radius must be re-set per nth-child: the desktop organic-blob
   shape rules are ".path-item:nth-child(n) .path-blob" (3 selectors),
   more specific than a plain ".path-blob" override, so they'd otherwise
   keep winning here regardless of source order. */
@media (max-width: 640px) {
  .path-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .path-blob {
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: var(--space-4);
    gap: var(--space-3);
  }
  .path-item:nth-child(1) .path-blob,
  .path-item:nth-child(2) .path-blob,
  .path-item:nth-child(3) .path-blob {
    border-radius: 24px;
  }
  .path-num { display: none; }
  .path-icon { flex: none; width: 34px; height: 34px; margin-bottom: 0; }
  .path-blob h3 { font-size: 1.02rem; margin-bottom: 2px; }
  .path-blob p { font-size: 0.85rem; max-width: none; margin: 0 0 6px; }
}

/* ---- About page: same treatment ---- */
@media (max-width: 900px) {
  /* Duplicates the "since 2009 / privately owned" photo+fact already
     shown on the homepage's Why Families Choose Traina section. */
  .legacy-section .center-grid > :first-child { display: none; }
}

/* ---- Shared "show 3 + See all" reveal pattern: help-grid, blog-grid,
   believe-grid. Desktop always shows every card; only mobile trims the
   default view. JS: js/main.js [data-reveal-more] handler. ---- */
.reveal-more-btn { display: none; }
.reveal-more-chevron { transition: transform 0.2s ease; }
.reveal-more-btn[aria-expanded="true"] .reveal-more-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .reveal-more-chevron { transition: none; } }

@media (max-width: 900px) {
  .help-grid .help-tile.is-extra,
  .blog-grid .blog-card.is-extra,
  .believe-grid .believe-card.is-extra {
    display: none;
  }
  .help-grid.is-expanded .help-tile.is-extra,
  .blog-grid.is-expanded .blog-card.is-extra,
  .believe-grid.is-expanded .believe-card.is-extra {
    display: block;
  }
  .reveal-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    margin: var(--space-4) auto 0;
    padding: 12px 22px;
    min-height: 44px;
    border-radius: 999px;
    border: 2px solid var(--wonder-blue);
    background: transparent;
    color: var(--wonder-blue);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
  }
  .about-believe .reveal-more-btn { border-color: var(--white-cream); color: var(--white-cream); }
}

/* ==========================================================================
   Mobile density overhaul
   Rounds 1-2 fixed bugs and cut duplicate content; this pass fixes visual
   density — heroes that don't fit one screen, inconsistent heading sizes,
   a footer/form that still read as "narrowed desktop." Desktop untouched:
   everything below is inside a max-width query.
   ========================================================================== */

/* ---- One consistent mobile heading scale ----
   ~25 section-scoped selectors (.belief h2, .aba-item h3, etc.) each hard-
   code their own size and never shrink on mobile — a class selector always
   beats the one bare h3 rule that existed. !important is used deliberately
   and only here: it's the only way to reset all of them from one place
   instead of editing every scattered selector individually. */
@media (max-width: 640px) {
  h1 { font-size: clamp(1.6rem, 7vw, 2rem) !important; }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.6rem) !important; }
  h3 { font-size: clamp(1.05rem, 4.5vw, 1.2rem) !important; }
  h4 { font-size: 0.95rem !important; }
}

/* ---- Shared compact horizontal-scroll row for hero trust/value strips ----
   .trust-row (homepage hero), .hero-value-row (service-page heroes),
   .contact-hero-trust + .hgd-benefits (icon-focus/guide-download heroes)
   all currently wrap to 2 rows on mobile with no compaction anywhere.
   Same overflow-x pattern already used for .profile-tabs/.team-tabs. */
@media (max-width: 640px) {
  .trust-row,
  .hero-value-row,
  .contact-hero-trust,
  .hgd-benefits {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .trust-row::-webkit-scrollbar,
  .hero-value-row::-webkit-scrollbar,
  .contact-hero-trust::-webkit-scrollbar,
  .hgd-benefits::-webkit-scrollbar { display: none; }

  .trust-badge { flex: 0 0 auto; padding: 8px 14px 8px 8px; font-size: 0.78rem; }
  .trust-badge .badge-icon { width: 24px; height: 24px; }

  .hero-value { flex: 0 0 auto; width: 84px; }
  .hero-value-icon { width: 40px; height: 40px; }
  .hero-value-icon svg { width: 20px; height: 20px; }
  .hero-value span { font-size: 0.74rem; }

  .contact-hero-trust .hgd-benefit,
  .hgd-benefits .hgd-benefit { flex: 0 0 auto; width: 150px; }
  .hgd-benefit-icon { width: 32px; height: 32px; }
  .hgd-benefit-text { font-size: 0.78rem; }
}

/* ---- .hero family (homepage + 4 ABA service pages): shrink the photo and
   tighten padding so the hero fits within one phone screen. ---- */
@media (max-width: 640px) {
  .hero { padding-top: var(--space-4); padding-bottom: var(--space-3); }
  .hero-art { max-width: 170px; }
  .home .hero-art--star { max-width: 100%; }
  .hero-sub { font-size: 1rem; }
  .hero-ctas { margin: var(--space-3) 0; gap: var(--space-2); }
  .hero-ctas .btn { padding: 12px 22px; }
  .trust-row { padding-top: var(--space-3); margin-top: 0; }
  .hero-value-row { padding-top: var(--space-3); margin-top: 0; }
}

/* ---- .hero-icon-focus family (contact, what-aba-can-help-with, quiz) ---- */
@media (max-width: 640px) {
  .hero-icon-focus .icf-photo-wrap { max-width: 150px; }
  .hero-icon-focus .icf-body { font-size: 1rem; }
}

/* ---- .hero-photo-line family (About, what-is-ABA): still ~200px over
   budget after the padding/photo-strip fixes above — the floating
   "Privately owned since 2009" badge repeats a fact already in the body
   paragraph right below it, and the 2 CTAs keep a 32px top margin that
   out-specifies the generic .hero-ctas mobile rule above. ---- */
@media (max-width: 640px) {
  .hpl-badge { display: none; }
  .hero-photo-line .hero-ctas { margin-top: var(--space-3); }
  .hpl-photo { width: 34vw; max-width: 128px; }
  .hpl-photo-frame { aspect-ratio: 1 / 1.05; }
}

/* ---- .hero-guide-download family (is-aba-right-for-my-child) ----
   .hgd-visual's own 768px rule floors width at 240px (no phone-specific
   reduction) and .hgd-benefits' 768px rule sets flex-direction:column,
   which defeats the horizontal-scroll compaction above (a column can't
   scroll sideways) — both re-set here at the narrower breakpoint. */
@media (max-width: 640px) {
  .hero-guide-download { padding: clamp(20px, 5vw, 28px) var(--gutter) clamp(24px, 5vw, 32px); }
  .hgd-visual { width: 128px; margin: var(--space-2) auto 0; padding: 14px 10px 10px 14px; }
  .hgd-benefits { flex-direction: row; align-items: center; margin-top: var(--space-3); }
  .hgd-cta-row { margin-top: var(--space-3); }
}

/* .hgd-visual is reused in a second spot (.iarfmc-guide-inner, further
   down this same page) where it isn't centered with as much clearance —
   .hgd-badge's -16px overlap offset then pushes past the viewport edge
   (pre-existing at the 641-768px width too, not new to this round).
   Applies to every .hgd-badge, not just that one instance, since the
   overlap amount should be smaller on phones regardless of context. */
@media (max-width: 768px) {
  .hgd-badge {
    top: -6px;
    right: 0;
    width: clamp(64px, 13vw, 88px);
    height: clamp(64px, 13vw, 88px);
    padding: 8px;
    font-size: 0.74rem;
  }
}

/* ---- Footer: tap-to-expand accordion (JS: js/main.js [data-footer-toggle]
   is just the existing markup — every .footer-col already has an h4
   immediately followed by a ul, so no HTML changes were needed). Also
   drop the never-reduced 96px top padding and 64px pre-legal margin, and
   force the 6 blocks to genuinely stack 1-per-row (previously maxed out
   at 2 columns on phones). ---- */
@media (max-width: 640px) {
  .site-footer { padding-top: var(--space-6); }
  .footer-top { grid-template-columns: 1fr; row-gap: 0; }
  .footer-brand { margin-bottom: var(--space-4); }
  .footer-col {
    border-top: 1px solid rgba(255, 251, 243, 0.15);
  }
  .footer-col h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 14px 2px;
    cursor: pointer;
  }
  .footer-col h4:focus-visible {
    outline: 2px solid var(--sunflower);
    outline-offset: 2px;
  }
  .footer-col h4::after {
    content: "+";
    font-size: 1.1rem;
    font-weight: 400;
    transition: transform 0.2s ease;
  }
  .footer-col.is-open h4::after { transform: rotate(45deg); }
  .footer-col ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .footer-col.is-open ul { max-height: 320px; padding-bottom: var(--space-2); }
  .footer-bottom { margin-top: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-col h4::after, .footer-col ul { transition: none; }
}

/* ---- Compact the contact form + insurance-check panel: same padding at
   every nested layer (section -> card -> panel) compounds into "3 scrolls
   to see the whole form." ---- */
@media (max-width: 640px) {
  .contact-panel-form,
  .contact-panel-alt { padding: var(--space-4); }
  .contact-panel-form form .form-field { margin-bottom: var(--space-2); }
  .form-field label { margin-bottom: 4px; font-size: 0.8rem; }
  .form-field input,
  .form-field textarea,
  .insurance-select { padding: 12px 14px; }
  .insurance-panel-check { padding: var(--space-4); }
  .insurance-panel-check p { margin-bottom: var(--space-3); }
}

/* ---------- Blog posts (shared article shell) ----------
   Shared by all resources/blog/<slug>/ pages and post-template.html.
   New classes only. Does not change .hero, .aba-look, tokens, or cards
   outside .post-article / .post-related. */
.post-article {
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
}
.post-back {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--curious-teal);
  text-decoration: none;
}
.post-back:hover { color: var(--wonder-blue); }
.post-article-head {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto var(--space-5);
}
.post-article .post-cover {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  overflow: visible;
}
.post-article .post-cover img {
  border-radius: var(--radius-lg);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-article .post-cover .decor-shape { z-index: 2; }
.post-article .post-body {
  position: relative;
  z-index: 2;
  max-width: var(--measure);
  margin: var(--space-6) auto 0;
}
.post-body strong { color: var(--wonder-blue); }
.post-sign-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.post-sign-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.post-sign-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-sign-icon img { width: 100%; height: 100%; display: block; }
.post-callout {
  background: var(--teal-15);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.post-callout p {
  margin: 0;
  max-width: none;
  color: var(--wonder-blue);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
}
.post-related {
  position: relative;
  overflow: hidden;
  background: var(--wonder-blue-10);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.post-related .section-head { margin-bottom: var(--space-5); }
.post-related .section-head h2 { margin-bottom: 0; }
.post-related .blog-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) {
  .post-related .blog-grid { grid-template-columns: 1fr; }
}

.post-faq {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0;
}
.post-faq .container { max-width: var(--measure); position: relative; z-index: 1; }
.post-faq .section-head { margin-bottom: var(--space-5); }
.post-faq .section-head h2 { margin-bottom: 0; }
.post-related .container { position: relative; z-index: 1; }

/* Two-card setting comparison (settings post) */
.post-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.post-compare-card {
  background: var(--white-cream);
  border: 1px solid var(--wonder-blue-10);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-rest);
}
.post-compare-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
}
.post-compare-card p { margin: 0 0 var(--space-3); }
.post-compare-card ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
}
.post-compare-card li + li { margin-top: 0.35em; }
@media (max-width: 700px) {
  .post-compare { grid-template-columns: 1fr; }
}

/* Quiet citation list for GEO (real sources only) */
.post-sources {
  margin: var(--space-3) 0 0;
  padding-left: 1.15em;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.post-sources li + li { margin-top: 0.4em; }
.post-sources a { color: var(--curious-teal); }

/* Blog pack widgets (2026-09) */
.post-answer {
  background: var(--mint-40);
  border: 1px solid var(--teal-15);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
}
.post-answer p {
  margin: 0;
  max-width: none;
  color: var(--wonder-blue);
  font-size: 1.02rem;
  line-height: 1.5;
}
.post-notice {
  background: var(--sunflower-20);
  border-left: 4px solid var(--apricot);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
}
.post-notice p { margin: 0 0 var(--space-3); max-width: none; }
.post-notice p:last-child { margin-bottom: 0; }
.post-quote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--white-cream);
  border-left: 4px solid var(--curious-teal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.post-quote p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wonder-blue);
  max-width: none;
}
.post-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.post-steps {
  margin: var(--space-4) 0 var(--space-5);
  padding-left: 1.35em;
  color: var(--ink-soft);
}
.post-steps > li + li { margin-top: 0.55em; }
.post-table-wrap {
  overflow-x: auto;
  margin: var(--space-4) 0 var(--space-5);
  -webkit-overflow-scrolling: touch;
}
.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--white-cream);
}
.post-table th,
.post-table td {
  border: 1px solid var(--wonder-blue-10);
  padding: 0.7em 0.85em;
  text-align: left;
  vertical-align: top;
}
.post-table th {
  background: var(--teal-15);
  color: var(--wonder-blue);
  font-weight: 700;
}
.post-table tbody tr:nth-child(even) { background: var(--wonder-blue-10); }

/* Blog posts: turn off scroll-reveal. Wrapping the full .post-body in one
   .reveal meant readers had to scroll deep before 15% of that tall block
   entered the viewport, so copy stayed invisible too long. Scoped to post
   page sections only; homepage / other pages keep the shared reveal. */
.post-article .reveal,
.post-faq .reveal,
.post-related .reveal,
.final-cta .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.cutover-page {
  padding: 4.5rem 0 5rem;
}
.cutover-page h1 {
  font-family: var(--font-display, "Baloo 2", sans-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.1;
  margin: 0.4rem 0 1rem;
}
.cutover-page .cutover-lead {
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
}
.directory-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.directory-list a {
  display: block;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(14, 58, 90, 0.06);
}
.directory-list a strong {
  display: block;
  color: var(--wonder-blue, #0e3a5a);
}
.directory-list a span {
  display: block;
  margin-top: 0.2rem;
}
.cutover-prose {
  max-width: 42rem;
}
.cutover-prose h2,
.cutover-prose h3 {
  margin: 1.6rem 0 0.5rem;
}
.cutover-prose p,
.cutover-prose li {
  line-height: 1.6;
}
.store-frame {
  width: 100%;
  min-height: 720px;
  border: 0;
  margin-top: 1.5rem;
  background: #fff;
}