/* ==========================================================================
   Firefly Therapy Services — Stylesheet v3
   Photography-led, audit-driven. Fireflies retired to the home hero only.
   Decorations the audit killed: .scene-tag, .card.feature::after,
   .site-footer::before, .eyebrow.center::after on secondary uses,
   per-page-header firefly clouds. Body text contrast lifted to AA.
   ========================================================================== */

:root {
  /* sage */
  --sage-50:  #f4f7f3;
  --sage-100: #e3ece5;
  --sage-200: #c2d6c8;
  --sage-300: #9bbaa6;
  --sage-400: #6f9784;
  --sage-500: #4f7d6c;
  --sage-600: #3f6d63;
  --sage-700: #305449;
  --sage-800: #22433c;
  --sage-900: #14302a;

  /* sky */
  --sky-50:  #f0f6f8;
  --sky-100: #dbeaef;
  --sky-200: #b9d6df;
  --sky-300: #93bbc7;
  --sky-400: #86b6c5;
  --sky-500: #5e93a4;
  --sky-600: #467788;

  /* firefly */
  --fly-100: #fff4c2;
  --fly-200: #fbe8a0;
  --fly-300: #f6deaf;
  --fly-400: #f4d35e;
  --fly-500: #e4b84a;
  --fly-600: #b6912f;
  --fly-glow: 0 0 24px rgba(244, 211, 94, 0.55), 0 0 8px rgba(255, 244, 194, 0.7);

  /* warm neutrals */
  --paper: #fcfaf3;
  --cream: #f7f2e3;
  --cream-deep: #efe7cf;
  --ink-900: #1c2a26;
  --ink-700: #314540;
  --ink-600: #4a5d56;     /* lifted from #536760 — improves AA contrast on paper */
  --ink-500: #687a73;     /* lifted from #6b7d76 — passes 4.5:1 on paper + white (pa11y verified) */
  --ink-300: #a9b6b0;
  --ink-200: #cad1cc;
  --line:    #e9e2d1;
  --line-soft: #f0eadb;
  --white: #ffffff;

  /* dusk gradient (now reserved for the hero overlay only) */
  --dusk: radial-gradient(ellipse 110% 70% at 80% 0%, #c9d8d3 0%, #b5cbc5 22%, #708e85 60%, #2f4a44 100%);

  /* shadows */
  --shadow-xs: 0 1px 2px rgba(28, 42, 38, 0.05);
  --shadow-sm: 0 2px 6px rgba(28, 42, 38, 0.06), 0 1px 2px rgba(28, 42, 38, 0.04);
  --shadow-md: 0 8px 22px rgba(28, 42, 38, 0.08), 0 2px 6px rgba(28, 42, 38, 0.05);
  --shadow-lg: 0 22px 48px rgba(28, 42, 38, 0.14), 0 6px 14px rgba(28, 42, 38, 0.08);
  --shadow-xl: 0 36px 80px rgba(28, 42, 38, 0.18), 0 12px 24px rgba(28, 42, 38, 0.10);
  --shadow-photo: 0 28px 60px rgba(28, 42, 38, 0.16), 0 8px 18px rgba(28, 42, 38, 0.08);

  /* radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* type */
  --font-serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* spacing */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 6rem;
  --s-8: 8rem;

  --container: 1180px;
  --container-narrow: 880px;
  --container-wide: 1320px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--sage-700); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--sage-900); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--fly-200); color: var(--ink-900); }

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sage-800);
  color: var(--white);
  padding: 0.7rem 1rem;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 1000;
}
.skip:focus { left: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  color: var(--ink-900);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 var(--s-2);
  font-variation-settings: 'opsz' 144;
}
h1 {
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 72;
}
h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-variation-settings: 'opsz' 36;
  letter-spacing: -0.01em;
  line-height: 1.22;
}
h4 {
  font-size: 1.05rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
}
p { margin: 0 0 var(--s-2); }
.lead {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-600);
  max-width: 60ch;
}
main p { max-width: 70ch; }
main p.lead, main .section-head p, main .hero-lead { max-width: 60ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--sage-700);
  margin-bottom: var(--s-2);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--sage-400);
}
/* Centered eyebrow gets dashes on BOTH sides — only used on hero / page-header */
.eyebrow.center::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--sage-400);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-3);
}
.container.narrow { max-width: var(--container-narrow); }
.container.wide { max-width: var(--container-wide); }
.text-center { text-align: center; }
.section-head {
  max-width: 720px;
  margin: 0 auto var(--s-5);
  text-align: center;
}
.section-head .lead { margin: 0 auto; }

section { padding: var(--s-7) 0; }
section.tight { padding: var(--s-5) 0; }
section.cream { background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%); }

@media (max-width: 768px) {
  section { padding: var(--s-6) 0; }
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(252, 250, 243, 0.85);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  gap: var(--s-3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; }
.brand-text small {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-600);
  margin-top: 3px;
  font-weight: 600;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  color: var(--ink-700);
  font-size: 0.96rem;
  font-weight: 500;
  position: relative;
  padding: 0.4rem 0;
}
.nav-menu a:hover { color: var(--ink-900); }
.nav-menu a.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fly-400);
  box-shadow: var(--fly-glow);
}
.nav-cta {
  background: var(--ink-900);
  color: var(--white) !important;
  padding: 0.7rem 1.2rem !important;
  border-radius: var(--r-pill);
  transition: background 0.18s ease, transform 0.18s ease;
}
.nav-cta:hover {
  background: var(--sage-800);
  color: var(--white) !important;
  transform: translateY(-1px);
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  color: var(--ink-900);
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
    padding: 0.6rem var(--s-3) var(--s-3);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: none;
    box-shadow: var(--shadow-md);
  }
  .nav-menu.open { display: flex; }
  .nav-menu a {
    padding: 1.1rem 0.4rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.05rem;
  }
  .nav-menu a:last-child { border: 0; }
  .nav-cta { text-align: center; margin-top: 0.6rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 3px solid var(--fly-400);
  outline-offset: 2px;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--ink-900);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background: var(--sage-800);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-sage {
  background: var(--sage-600);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-sage:hover {
  background: var(--sage-800);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-secondary {
  background: var(--white);
  color: var(--ink-900);
  border: 1.5px solid var(--line);
}
.btn-secondary:hover {
  background: var(--cream);
  border-color: var(--sage-300);
  color: var(--ink-900);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: var(--white);
}
.btn-gold {
  background: linear-gradient(135deg, var(--fly-400), var(--fly-500));
  color: var(--ink-900);
  box-shadow: var(--shadow-md);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--fly-glow);
  color: var(--ink-900);
}
.btn-arrow::after { content: '\2192'; transition: transform 0.18s ease; }
.btn-arrow:hover::after { transform: translateX(4px); }
.btn-group { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.btn-group.center { justify-content: center; }
.btn-link {
  font-weight: 600;
  color: var(--sage-700);
  font-size: 0.96rem;
}
.btn-link::after { content: ' \2192'; transition: transform 0.18s ease; display: inline-block; }
.btn-link:hover::after { transform: translateX(4px); }

/* ---------- Photographic frame component ---------- */
.photo {
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow-photo);
  position: relative;
  isolation: isolate;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo.portrait { aspect-ratio: 4 / 5; }
.photo.landscape { aspect-ratio: 16 / 10; }
.photo.square { aspect-ratio: 1 / 1; }
.photo.tall { aspect-ratio: 3 / 4; }

/* warm overlay for photos with too much cool light */
.photo-warm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244, 211, 94, 0.04), rgba(244, 211, 94, 0.10));
  pointer-events: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--s-7) 0 var(--s-6);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 30%, rgba(244, 211, 94, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 90%, rgba(134, 182, 197, 0.14) 0%, transparent 65%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-5);
  align-items: center;
}
.hero h1 { margin-bottom: var(--s-3); max-width: 18ch; }
.hero h1 em {
  font-style: italic;
  color: var(--sage-700);
  font-variation-settings: 'opsz' 96;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.hero-lead {
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0 0 var(--s-4);
  max-width: 52ch;
}
.hero-actions { margin-bottom: var(--s-3); }
.hero-reassure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-700);
  font-weight: 500;
}
.hero-reassure::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage-400);
  box-shadow: 0 0 0 4px rgba(123, 168, 156, 0.18);
  flex-shrink: 0;
}

/* hero photo with floating fireflies inside it */
.hero-photo {
  position: relative;
  max-width: 560px;
  margin-left: auto;
}
.hero-photo .photo {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.hero-photo .firefly-cluster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--r-xl);
  overflow: hidden;
}

@media (max-width: 880px) {
  .hero { padding: var(--s-5) 0 var(--s-5); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero-photo { order: -1; max-width: 480px; margin: 0 auto; }
  .hero-photo .photo { aspect-ratio: 4 / 3; }
}

/* ---------- Realistic Firefly System (HERO ONLY) ----------
   The audit retired fireflies on every page-header, founder-portrait,
   split-visual, and 6/7 CTA bands. The firefly meadow lives only on the home hero.
*/
.firefly {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  will-change: transform, opacity;
  animation: firefly-drift 18s ease-in-out infinite;
  z-index: 3;
}
.firefly svg { width: 100%; height: 100%; overflow: visible; }
.firefly .glow {
  fill: #cce886;
  filter: drop-shadow(0 0 4px rgba(244, 230, 130, 0.95))
          drop-shadow(0 0 12px rgba(244, 230, 130, 0.55))
          drop-shadow(0 0 22px rgba(244, 230, 130, 0.25));
  animation: firefly-pulse 3.4s ease-in-out infinite;
  transform-origin: center;
}
.firefly .body { fill: #1a1f17; opacity: 0.78; }
.firefly .body-light { fill: rgba(255, 255, 255, 0.18); }

.firefly-cluster .firefly:nth-child(1) { top: 12%; left:  6%; --scale: 0.85; animation-duration: 16s; animation-delay: 0s; }
.firefly-cluster .firefly:nth-child(1) .glow { animation-duration: 2.6s; }
.firefly-cluster .firefly:nth-child(2) { top: 22%; left: 78%; --scale: 0.7; animation-duration: 21s; animation-delay: 1.4s; }
.firefly-cluster .firefly:nth-child(2) .glow { animation-duration: 3.8s; animation-delay: 0.7s; }
.firefly-cluster .firefly:nth-child(3) { top: 38%; left: 18%; --scale: 1.0; animation-duration: 14s; animation-delay: 2.8s; }
.firefly-cluster .firefly:nth-child(3) .glow { animation-duration: 2.9s; animation-delay: 1.5s; }
.firefly-cluster .firefly:nth-child(4) { top: 55%; left: 80%; --scale: 0.85; animation-duration: 19s; animation-delay: 0.6s; }
.firefly-cluster .firefly:nth-child(4) .glow { animation-duration: 3.2s; animation-delay: 2.1s; }
.firefly-cluster .firefly:nth-child(5) { top: 72%; left: 12%; --scale: 0.75; animation-duration: 17s; animation-delay: 3.4s; }
.firefly-cluster .firefly:nth-child(5) .glow { animation-duration: 4.2s; animation-delay: 0.3s; }
.firefly-cluster .firefly:nth-child(6) { top: 86%; left: 70%; --scale: 0.95; animation-duration: 22s; animation-delay: 1.0s; }
.firefly-cluster .firefly:nth-child(6) .glow { animation-duration: 3.5s; animation-delay: 1.8s; }

@keyframes firefly-drift {
  0%, 100% { transform: translate(0, 0) scale(var(--scale, 1)); }
  16%      { transform: translate(14px, -8px) scale(var(--scale, 1)); }
  32%      { transform: translate(22px, -22px) scale(var(--scale, 1)); }
  48%      { transform: translate(8px, -32px) scale(var(--scale, 1)); }
  64%      { transform: translate(-14px, -22px) scale(var(--scale, 1)); }
  80%      { transform: translate(-18px, -4px) scale(var(--scale, 1)); }
  92%      { transform: translate(-6px, 8px) scale(var(--scale, 1)); }
}
@keyframes firefly-pulse {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  3%       { opacity: 0.15; transform: scale(0.75); }
  6%       { opacity: 0.6;  transform: scale(0.95); }
  9%       { opacity: 1.0;  transform: scale(1.1); }
  12%      { opacity: 0.85; transform: scale(1.0); }
  16%      { opacity: 0.4;  transform: scale(0.85); }
  20%      { opacity: 0.05; transform: scale(0.7); }
}

/* ---------- Trust band ---------- */
.trust-band {
  position: relative;
  background: var(--white);
  padding: var(--s-3) 0;
  box-shadow: inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  align-items: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.2rem var(--s-2);
}
.trust-item + .trust-item { border-left: 1px solid var(--line-soft); }
.trust-item svg {
  width: 28px;
  height: 28px;
  color: var(--sage-600);
  flex-shrink: 0;
}
.trust-text strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.trust-text span {
  font-size: 0.86rem;
  color: var(--ink-600);
  margin-top: 2px;
  display: block;
  line-height: 1.35;
}

@media (max-width: 880px) {
  .trust-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-2); }
  .trust-item + .trust-item { border-left: 0; }
  .trust-item:nth-child(odd) { border-right: 1px solid var(--line-soft); }
}

/* ---------- Card grids ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
  .card-grid.three, .card-grid.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .card-grid.three, .card-grid.four { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--sage-200);
  }
}
.card-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--sage-100), var(--sky-100));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-2);
  color: var(--sage-700);
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { margin: 0 0 0.4rem; font-size: 1.18rem; }
.card p { color: var(--ink-600); font-size: 0.97rem; margin: 0; line-height: 1.55; }

/* feature card (cleaned: no corner glow per audit) */
.card.feature { padding: var(--s-4); }

/* age card with photo */
.age-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}
@media (hover: hover) {
  .age-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--sage-200);
  }
}
.age-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream);
  position: relative;
}
.age-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.age-card-body { padding: var(--s-3); }
.age-card-body h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.age-card-body p { color: var(--ink-600); margin: 0; font-size: 0.95rem; line-height: 1.55; }

/* ---------- Process / How it works ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  position: relative;
  counter-reset: step;
}
.process::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sage-300) 0, var(--sage-300) 5px, transparent 5px, transparent 10px);
  z-index: 0;
}
.process-step {
  position: relative;
  text-align: center;
  background: transparent;
  padding: 0 var(--s-2);
}
.process-num {
  counter-increment: step;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-2);
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--sage-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--sage-700);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-sm);
}
.process-num::before { content: counter(step); }
.process-step h3 { font-size: 1.12rem; margin-bottom: 0.3rem; }
.process-step p { color: var(--ink-600); font-size: 0.94rem; margin: 0; }

@media (max-width: 880px) {
  .process { grid-template-columns: 1fr; gap: var(--s-3); position: relative; }
  .process::before {
    top: 32px;
    bottom: 32px;
    left: 32px;
    right: auto;
    width: 1px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--sage-300) 0, var(--sage-300) 5px, transparent 5px, transparent 10px);
  }
  .process-step {
    text-align: left;
    padding: 0 0 0 var(--s-1);
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--s-3);
    row-gap: 0.3rem;
    align-items: start;
  }
  .process-num { margin: 0; grid-row: 1 / 3; grid-column: 1; align-self: start; }
  .process-step h3 { grid-row: 1; grid-column: 2; margin-top: 0.5rem; }
  .process-step p { grid-row: 2; grid-column: 2; }
}

/* ---------- Founder block ---------- */
.founder {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
.founder .photo { aspect-ratio: 4 / 5; }
.founder-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-700);
  font-style: italic;
  margin-bottom: var(--s-3);
  font-variation-settings: 'opsz' 36;
}
.founder-quote::before {
  content: '\201C';
  font-size: 2.4rem;
  color: var(--fly-500);
  display: block;
  line-height: 1;
  margin-bottom: -0.1rem;
}
.founder-quote p { margin: 0 0 var(--s-2); max-width: none; }
.founder-quote p:last-child { margin: 0; }
.founder-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink-900);
  margin-bottom: 0;
  font-variation-settings: 'opsz' 24;
}
.founder-title {
  font-size: 0.92rem;
  color: var(--ink-600);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-3);
}

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

/* ---------- Service detail blocks ---------- */
.service-list {
  display: grid;
  gap: var(--s-3);
  max-width: 920px;
  margin: 0 auto;
}
.service-item {
  background: var(--white);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-3);
  align-items: start;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .service-item:hover {
    border-color: var(--sage-200);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}
.service-item .card-icon { margin: 0; }
.service-item h3 { margin-bottom: 0.4rem; font-size: 1.25rem; }
.service-item p { color: var(--ink-600); margin: 0; }
@media (max-width: 560px) {
  .service-item { grid-template-columns: 1fr; padding: var(--s-3); }
}

/* ---------- Check list ---------- */
.check-list {
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
  display: grid;
  gap: 0.85rem;
}
.check-list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 1rem;
  color: var(--ink-700);
}
.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sage-100) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233f6d63'><path d='M7.5 13.5l-3-3 1.4-1.4 1.6 1.6 4.6-4.6 1.4 1.4z'/></svg>") center no-repeat;
  background-size: 18px;
  margin-top: 1px;
}

/* ---------- Split sections ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-5);
  align-items: center;
}
.split.reverse > :first-child { order: 2; }
.split-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
}
.split-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .split-photo { max-width: 480px; margin: 0 auto; aspect-ratio: 5 / 6; }
}

/* ---------- Two-up image stack (used in services formats) ---------- */
.image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.image-pair .photo { aspect-ratio: 4 / 5; }
@media (max-width: 560px) {
  .image-pair { grid-template-columns: 1fr; }
}

/* ---------- Testimonials ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-3);
}
.quote {
  background: var(--white);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .quote:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}
.quote::before {
  content: '\201C';
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--fly-400);
  line-height: 1;
  font-variation-settings: 'opsz' 96;
  opacity: 0.6;
}
.quote-stars {
  color: var(--fly-500);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}
.quote-body {
  font-size: 1.05rem;
  color: var(--ink-700);
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.55;
  margin-bottom: var(--s-3);
  font-variation-settings: 'opsz' 24;
  position: relative;
  z-index: 1;
}
.quote-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
}
.quote-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage-300), var(--sky-300));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.quote-author strong { color: var(--ink-900); display: block; line-height: 1.2; font-weight: 600; }
.quote-author span { color: var(--ink-600); font-size: 0.88rem; }

.notice {
  background: var(--sage-50);
  border: 1px solid var(--sage-200);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  max-width: 720px;
  margin: 0 auto var(--s-4);
  text-align: center;
  color: var(--ink-700);
}
.notice strong { color: var(--ink-900); display: block; margin-bottom: 0.4rem; }
.notice p { margin: 0; font-size: 0.96rem; max-width: none; }

/* ---------- FAQ ---------- */
.faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0.9rem;
}
.faq-group + .faq-group { margin-top: var(--s-4); }
h2.faq-group-label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sage-700);
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--sage-200);
  letter-spacing: 0.16em;
  line-height: 1.2;
  font-variation-settings: normal;
}
.faq details {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.faq details[open] {
  border-color: var(--sage-200);
  box-shadow: var(--shadow-sm);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-900);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 1.7rem;
  color: var(--sage-600);
  font-weight: 500;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body {
  padding: 0 1.3rem 1.2rem;
  color: var(--ink-700);
}
.faq-body p { margin: 0 0 0.6rem; }
.faq-body p:last-child { margin: 0; }

/* ---------- Contact section ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-5);
  align-items: start;
}
.contact-info {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.92);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.contact-info h3 { color: var(--white); }
.contact-info > p { color: rgba(255, 255, 255, 0.82); }
.contact-info-h {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--white);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-variation-settings: 'opsz' 36;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.contact-row:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.contact-row svg {
  width: 22px;
  height: 22px;
  color: var(--fly-300);
  flex-shrink: 0;
}
.contact-row a, .contact-row span {
  color: var(--white);
  font-weight: 500;
  word-break: break-word;
  font-size: 0.96rem;
}
.contact-row a:hover { color: var(--fly-400); }
.contact-row small {
  display: block;
  font-weight: 400;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 1px;
}

/* form */
.form {
  background: var(--white);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}
.form-section {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
.form-section:last-of-type { border: 0; padding: 0; margin: 0; }
.form-section-title {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  color: var(--sage-700);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.form-field { margin-bottom: var(--s-2); }
.form-field:last-child { margin-bottom: 0; }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-900);
  margin-bottom: 0.35rem;
}
.form-field label .req { color: var(--fly-600); margin-left: 2px; font-weight: 700; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--sage-500);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(63, 109, 99, 0.16);
}
.form-note {
  font-size: 0.86rem;
  color: var(--ink-600);
  margin-top: 0.5rem;
}
.form-success {
  display: none;
  background: var(--sage-50);
  border: 1px solid var(--sage-300);
  color: var(--sage-800);
  border-radius: var(--r-md);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.form-success.show { display: block; }
.form button[type="submit"] { width: auto; min-width: 220px; }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .contact-grid > .contact-info { order: 2; }
  .form-row { grid-template-columns: 1fr; }
  .form button[type="submit"] { width: 100%; }
}

/* ---------- CTA bands ---------- */

/* Dark CTA — used only on home final */
.cta-band-dark {
  position: relative;
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
}
.cta-band-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 20%, rgba(244, 211, 94, 0.18), transparent 60%),
    radial-gradient(ellipse 70% 60% at 82% 80%, rgba(134, 182, 197, 0.18), transparent 65%);
  z-index: -1;
}
.cta-band-dark h2 { color: var(--white); margin-bottom: var(--s-2); }
.cta-band-dark p { color: rgba(255, 255, 255, 0.86); max-width: 56ch; margin: 0 auto var(--s-3); font-size: 1.08rem; }
.cta-band-dark .btn-group { justify-content: center; }
.cta-band-dark .eyebrow { color: var(--fly-400); }
.cta-band-dark .eyebrow::before, .cta-band-dark .eyebrow.center::after { background: var(--fly-400); }

/* Light photo-supported CTA — used on About / Services / Testimonials / FAQ */
.cta-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-photo);
  background: var(--cream);
}
.cta-photo-text {
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cta-photo-text .eyebrow { color: var(--sage-700); }
.cta-photo-text h2 { margin-bottom: var(--s-2); }
.cta-photo-text p { color: var(--ink-700); margin-bottom: var(--s-3); max-width: 50ch; }
.cta-photo-image { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream); }
.cta-photo-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 880px) {
  .cta-photo { grid-template-columns: 1fr; }
  .cta-photo-image { aspect-ratio: 4 / 3; order: -1; }
}

/* ---------- Page header ---------- */
.page-header {
  position: relative;
  padding: var(--s-7) 0 var(--s-5);
  background:
    radial-gradient(ellipse 60% 60% at 80% 30%, rgba(244, 211, 94, 0.10), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
  text-align: center;
  overflow: hidden;
}
.page-header h1 { margin-bottom: var(--s-2); }
.page-header p {
  color: var(--ink-600);
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1.12rem;
}
@media (max-width: 880px) {
  .page-header { padding: var(--s-5) 0 var(--s-4); }
}

/* page header with photo background */
.page-header-photo {
  position: relative;
  padding: 0;
  background: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
}
.page-header-photo .photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-header-photo .photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.95);
}
.page-header-photo .photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 42, 38, 0.4) 0%, rgba(28, 42, 38, 0.7) 100%);
}
.page-header-photo > .container {
  position: relative;
  z-index: 1;
  padding-top: var(--s-7);
  padding-bottom: var(--s-5);
}
.page-header-photo h1 { color: var(--white); }
.page-header-photo p { color: rgba(255, 255, 255, 0.88); }
.page-header-photo .eyebrow { color: var(--fly-300); }
.page-header-photo .eyebrow::before, .page-header-photo .eyebrow.center::after { background: var(--fly-400); }

/* ---------- Credentials chip strip ---------- */
.credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0 0;
}
.credentials .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  background: var(--sage-50);
  border: 1px solid var(--sage-200);
  color: var(--sage-800);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.credentials .pill svg { width: 14px; height: 14px; color: var(--sage-600); }

/* ---------- Sticky mobile CTA bar ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(252, 250, 243, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 0.7rem var(--s-2) calc(0.7rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(28, 42, 38, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-cta.shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 0.6rem;
}
.mobile-cta .btn {
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  width: 100%;
}
@media (max-width: 880px) {
  .mobile-cta { display: block; }
  body { padding-bottom: 96px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.78);
  padding: var(--s-6) 0 var(--s-3);
  margin-top: var(--s-7);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-4);
}
.site-footer .brand { color: var(--white); }
.site-footer .brand-text small { color: var(--fly-400); }
.site-footer p {
  color: rgba(255, 255, 255, 0.68);
  margin-top: var(--s-2);
  max-width: 42ch;
  font-size: 0.96rem;
  line-height: 1.6;
}
.site-footer .footer-label {
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  font-weight: 600;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.94rem;
}
.site-footer a:hover { color: var(--fly-400); }
.footer-base {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .footer-base { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reveal-on-scroll (scoped, fail-safe) ----------
   The reveal animation only hides content if JS confirms it's ready.
   Without JS, content stays visible (no opacity:0 trap on initial paint). */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-ready .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .firefly .glow { opacity: 0.85; animation: none; }
  .firefly { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.text-balance { text-wrap: balance; }

/* ==========================================================================
   Final-audit overrides (responsive, code-quality, a11y, SEO synthesis).
   Lives at the end so it cleanly overrides everything above.
   ========================================================================== */

/* ---- WCAG 2.1 AA contrast fixes ---- */

/* .quote-stars — pa11y verified: fly-600 #b6912f = 2.97:1 on cream, still fails AA. Use deeper gold. */
.quote-stars { color: #96710f; }

/* .req #b6912f on white = 2.97:1 → switch to a darker warning amber */
.form-field label .req { color: #8a5a00; }

/* .quote-avatar white on sage-300 = 2.11:1 → use sage-600 for ≥4.5:1 */
.quote-avatar {
  background: linear-gradient(135deg, var(--sage-600), var(--sky-500));
}

/* .footer-base rgba(255,255,255,0.55) = 4.44:1 → 0.65 ≈ 5.2:1 */
.footer-base { color: rgba(255, 255, 255, 0.65); }

/* ---- Focus visibility (Safari hides browser defaults) ---- */
.brand:focus-visible,
.nav-menu a:focus-visible,
.faq summary:focus-visible,
.form-field select:focus-visible,
.btn-link:focus-visible,
.contact-row a:focus-visible {
  outline: 3px solid var(--fly-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---- Reduced-motion should also kill smooth-scroll ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Form-success: keep in AT tree, just hidden visually until shown ---- */
.form-success {
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, max-height 0.25s ease;
}
.form-success.show {
  display: block;
  opacity: 1;
  max-height: 400px;
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--sage-300);
  pointer-events: auto;
}

/* ---- Touch targets (44×44 minimum on phones) ---- */
@media (max-width: 880px) {
  .nav-toggle { padding: 0.7rem; }   /* 26px svg + 1.4rem padding = 48.4px */
  .btn-link, .contact-row a { padding: 0.4rem 0; min-height: 44px; display: inline-flex; align-items: center; }
  .form-field input,
  .form-field select,
  .form-field textarea { min-height: 48px; }
  .site-footer ul a { padding: 0.4rem 0; display: inline-block; min-height: 44px; }
}

/* ---- Hero h1 sub-480px tier: clamp floor too tall for tiny phones ---- */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2rem, 8vw, 2.5rem); max-width: 100%; }
  .hero h1 em { font-size: inherit; }
  .hero-lead { font-size: 1rem; }
  /* Page header H1 too */
  .page-header h1, .page-header-photo h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
}

/* ---- Split nav vs mobile-CTA breakpoint so iPad portrait doesn't get phone CTA ---- */
@media (min-width: 641px) and (max-width: 880px) {
  /* Tablet portrait: nav stays hamburger, but kill the mobile sticky CTA */
  .mobile-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ---- .page-header-photo padding reduction on phones (was missed) ---- */
@media (max-width: 880px) {
  .page-header-photo > .container {
    padding-top: var(--s-5);
    padding-bottom: var(--s-4);
  }
}

/* ---- Mobile CTA grid: 1fr 1.5fr crushes Email at 320px ---- */
.mobile-cta-inner { grid-template-columns: 1fr 1fr; gap: 0.7rem; }

/* ---- Landscape phone guard: don't show sticky CTA if viewport is too short ---- */
@media (max-width: 880px) and (max-height: 480px) {
  .mobile-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ---- .process vertical connector: was using one big absolute track that
        doesn't track text-grown rows. Use per-step ::before segments. ---- */
@media (max-width: 880px) {
  .process::before { display: none; }
  .process-step { position: relative; }
  .process-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 32px;
    top: 64px;
    bottom: -16px;
    width: 1px;
    background: repeating-linear-gradient(180deg, var(--sage-300) 0, var(--sage-300) 5px, transparent 5px, transparent 10px);
  }
}

/* ---- Stylelint hygiene ---- */
/* (deprecated word-break: break-word → overflow-wrap) */
.contact-row a, .contact-row span { word-break: normal; overflow-wrap: anywhere; }

/* ---- Reveal: be lenient — many transition flashes were caused by the original
        opacity:0 starting state running before observer attached. Default to
        a tiny offset so even unobserved reveals render legibly. ---- */
.js-ready .reveal { opacity: 0.001; }
.js-ready .reveal.in { opacity: 1; }

/* ---- Two-up card grid (Services payment cards): collapses to 1 col on phones ---- */
.card-grid.two-up { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  .card-grid.two-up { grid-template-columns: 1fr; }
}

/* ---- Contact aside footnote (was inline-style) ---- */
.contact-info .footnote {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: var(--s-3);
}

/* ---- Nav-cta specificity bump (no more !important) ---- */
.site-header .nav-menu .nav-cta {
  background: var(--ink-900);
  color: var(--white);
  padding: 0.7rem 1.2rem;
}
.site-header .nav-menu .nav-cta:hover {
  background: var(--sage-800);
  color: var(--white);
}

/* ==========================================================================
   Founder monogram placeholder (replaces stock photo until real headshot)
   Warm sage-and-gold gradient + "ET" monogram + hairline + caption
   Intentional design that reads as a brand statement, not "missing photo"
   ========================================================================== */
.founder-mono {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-photo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 60% at 25% 18%, rgba(244, 211, 94, 0.28), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 85%, rgba(63, 109, 99, 0.45), transparent 65%),
    linear-gradient(160deg, var(--sage-700) 0%, var(--sage-800) 50%, var(--sage-900) 100%);
}
.founder-mono::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 70% at 50% 110%, rgba(13, 32, 28, 0.55), transparent 65%);
  pointer-events: none;
}
.founder-mono-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 0 var(--s-3);
}
.founder-mono-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(5.5rem, 13vw, 9.5rem);
  color: var(--fly-300);
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-variation-settings: 'opsz' 144;
  text-shadow:
    0 2px 30px rgba(244, 211, 94, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.08);
}
.founder-mono-rule {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fly-400), transparent);
  opacity: 0.8;
}
.founder-mono-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  font-variation-settings: 'opsz' 36;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.4;
}
.founder-mono-sub {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fly-300);
  margin-top: 0.3rem;
  display: block;
  font-weight: 600;
}
.founder-mono .firefly {
  z-index: 3;
}

/* ==========================================================================
   ClientSecure / SimplePractice booking widget embed
   ========================================================================== */
.widget-wrap {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.widget-frame {
  display: block;
  width: 100%;
  min-height: 820px;
  border: 0;
  background: var(--paper);
}
.widget-fallback {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-600);
}
.widget-fallback a {
  font-weight: 600;
}
@media (max-width: 880px) {
  .widget-frame { min-height: 1200px; }
}
@media (max-width: 480px) {
  .widget-frame { min-height: 1350px; }
}
@media (max-width: 360px) {
  .widget-frame { min-height: 1450px; }
}

/* ==========================================================================
   QA Live audit fixes (P0 + P1)
   ========================================================================== */

/* P0-1: founder-mono caption overflow at 320-360px */
@media (max-width: 480px) {
  .founder-mono-sub { font-size: 0.62rem; letter-spacing: 0.18em; }
  .founder-mono-inner { padding: 0 var(--s-2); }
}

/* P0-2: founder-mono no max-width cap → 832x1040 wall on iPad portrait */
@media (max-width: 880px) {
  .founder-mono { max-width: 380px; margin-left: auto; margin-right: auto; }
}

/* P0-3: mobile-CTA buttons overflow at ≤375px */
@media (max-width: 380px) {
  .mobile-cta { padding: 0.7rem 0.6rem calc(0.7rem + env(safe-area-inset-bottom)); }
  .mobile-cta .container { padding: 0 0.4rem; }
  .mobile-cta .btn { padding: 0.85rem 0.6rem; font-size: 0.88rem; }
  .mobile-cta-inner { gap: 0.4rem; }
}

/* P0-4: landscape hero balance — see aspect-ratio 4/3 above ✓ */

/* P1-3: trust-band labels wrap 3 lines at 320 (AUDIT_RESPONSIVE M4 never landed) */
@media (max-width: 480px) {
  .trust-text strong { font-size: 1rem; }
  .trust-text span { font-size: 0.78rem; }
}

/* P1-4: quote-grid 300px min overflows 272px container at 320 */
@media (max-width: 480px) {
  .quote-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* P1-5: FAQ summary text wraps 4 lines on narrow phones — reduce summary type slightly */
@media (max-width: 400px) {
  .faq summary { font-size: 0.96rem; padding: 0.95rem 1.05rem; }
  .faq-body { padding: 0 1.05rem 1rem; }
}

/* P1-6: email wbr conflict — drop overflow-wrap: anywhere on .contact-row a */
.contact-row a { overflow-wrap: break-word; word-break: normal; }

/* M-new-2: contact-info padding cramped at 320 */
@media (max-width: 480px) {
  .contact-info { padding: var(--s-3); }
}

/* TAB-new-2: hero h1 dangles "say it." at 881-1280 — tighten max-width */
@media (min-width: 881px) and (max-width: 1280px) {
  .hero h1 { max-width: 15ch; }
}

/* TAB-new-3: contact-grid cramped at 881-1100 — collapse to 1 column */
@media (min-width: 881px) and (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid > .contact-info { order: 2; }
}

/* D-new-3: cta-photo image cell vs text cell height mismatch on desktop */
.cta-photo-image { aspect-ratio: 4 / 3; }

/* ============================================================
   ELEVATION PASS (AUDIT_ELEVATE.md)
   Senior-product-designer pass. Append-only. No HTML rule changes
   above this line are mutated. Lifts the system from "competent
   template" to "top-tier private-practice."
   ============================================================ */

/* E1. Fluid 1.250 (major third) modular type scale.
   Two anchors at 320 / 1440 viewports. Every size is one step on
   the same ratio so the page composes itself. */
:root {
  --step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.97rem);   /* 14 → 15.5 (small / eyebrow) */
  --step-0:  clamp(1rem,    0.96rem + 0.22vw, 1.13rem);    /* 16 → 18 (body) */
  --step-1:  clamp(1.25rem, 1.18rem + 0.36vw, 1.44rem);    /* 20 → 23 (lead) */
  --step-2:  clamp(1.56rem, 1.43rem + 0.66vw, 1.85rem);    /* 25 → 30 (h3) */
  --step-3:  clamp(1.95rem, 1.74rem + 1.07vw, 2.65rem);    /* 31 → 42 (h2) */
  --step-4:  clamp(2.44rem, 2.05rem + 1.95vw, 3.79rem);    /* 39 → 60 (display) */
  --step-5:  clamp(3.05rem, 2.40rem + 3.27vw, 5.41rem);    /* 49 → 86 (hero h1) */
}
body { font-size: var(--step-0); }
h1 { font-size: var(--step-5); letter-spacing: -0.045em; }
h2 { font-size: var(--step-3); letter-spacing: -0.028em; }
h3 { font-size: var(--step-2); letter-spacing: -0.012em; }
.lead, .hero-lead { font-size: var(--step-1); line-height: 1.5; }
.eyebrow { font-size: var(--step--1); }

/* E2. Hero h1 italic OPSZ harmony + tighter tracking.
   Eliminates the italic graft seam between upright and <em>. */
.hero h1 {
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.045em;
  line-height: 0.98;
  max-width: 16ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--sage-700);
  font-variation-settings: 'opsz' 144;
  font-weight: 500;
  letter-spacing: -0.035em;
}

/* E3. Eyebrow dashes: editorial flourish only on major moments.
   Default eyebrow loses the 28px hairline; hero / page-header /
   centered / dark-CTA / cta-photo eyebrows reinstate it. */
.eyebrow { display: inline-flex; align-items: center; gap: 0; }
.eyebrow::before { content: none; }
.hero .eyebrow::before,
.page-header .eyebrow::before,
.page-header-photo .eyebrow::before,
.cta-band-dark .eyebrow::before,
.cta-photo-text .eyebrow::before,
.eyebrow.center::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--sage-400);
  margin-right: 0.7rem;
}
.eyebrow.center::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--sage-400);
  margin-left: 0.7rem;
}

/* E4. Three-speed vertical rhythm: tight / standard / deep.
   Founder section becomes the page's deepest breath, 128px. */
section.tight { padding: var(--s-5) 0; }
section.deep { padding: var(--s-8, 8rem) 0; }
@media (max-width: 768px) {
  section.tight { padding: var(--s-4) 0; }
  section.deep { padding: var(--s-7) 0; }
}
section.deep .section-head { margin-bottom: var(--s-6); }

/* E5. Wax-seal monogram: corner crest + year stamp + credentials.
   "ET" + "EST." + 2025 + signature rule + (when confirmed) chips
   reads as a certificate. */
.founder-mono { aspect-ratio: 4 / 5; }
.founder-mono::after {
  content: 'EST.';
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  color: rgba(244, 211, 94, 0.5);
  font-weight: 600;
  z-index: 4;
}
.founder-mono-year {
  position: absolute;
  top: calc(var(--s-3) + 0.95rem);
  right: var(--s-3);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: rgba(244, 211, 94, 0.75);
  letter-spacing: 0.08em;
  font-variation-settings: 'opsz' 36;
  z-index: 4;
}
.founder-mono-rule { width: 72px; }
.founder-mono-caption { font-size: 1.15rem; line-height: 1.35; }
.founder-mono-sub { font-size: 0.66rem; letter-spacing: 0.22em; margin-top: 0.45rem; }
.founder-credentials {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.founder-credentials li { display: inline-flex; }
.founder-credentials li span {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
}

/* E6. Trust band v2: editorial credentials stripe, no icon boxes.
   Single editorial line like a Bloomberg byline-strip. */
.trust-band { padding: var(--s-3) 0; box-shadow: inset 0 -1px 0 var(--line-soft); background: var(--white); }
.trust-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
  text-align: center;
}
.trust-item {
  padding: 0;
  border: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
}
.trust-item svg { display: none; }
.trust-text { display: inline-flex; align-items: baseline; gap: 0.5rem; flex-direction: row; }
.trust-text strong {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-900);
  font-variation-settings: 'opsz' 36;
  letter-spacing: 0;
}
.trust-text span {
  font-size: 0.82rem;
  color: var(--ink-500);
  margin: 0;
  display: inline;
}
.trust-item + .trust-item::before {
  content: '';
  width: 1px;
  height: 14px;
  background: var(--sage-200);
  margin-right: var(--s-4);
  align-self: center;
  border-left: 0;
}
@media (max-width: 880px) {
  .trust-grid { flex-direction: column; gap: var(--s-1); }
  .trust-item + .trust-item::before { display: none; }
  .trust-item + .trust-item { border-top: 0; }
}

/* E7. Card hover: subtler lift + warm border-tint instead of jumpy 3px.
   The card warms, doesn't pop. */
@media (hover: hover) {
  .card,
  .quote,
  .age-card,
  .service-item {
    transition:
      border-color 0.25s ease,
      background-color 0.25s ease,
      box-shadow 0.25s ease,
      transform 0.25s ease;
  }
  .card:hover,
  .quote:hover,
  .age-card:hover,
  .service-item:hover {
    transform: translateY(-1px);
    border-color: var(--sage-300);
    box-shadow: 0 6px 14px rgba(28, 42, 38, 0.06), 0 1px 0 rgba(63, 109, 99, 0.05) inset;
    background-color: var(--cream-light, #fefcf8);
  }
}

/* E8. Primary CTA → 8px radius rectangle. Secondary stays as pill.
   Differentiates primary as "press this is an action." */
.btn-primary,
.btn-sage,
.btn-gold {
  border-radius: 8px;
}
.btn-secondary,
.btn-ghost {
  border-radius: var(--r-pill);
}

/* E9. Hero photo: editorial matted-print shadow + warm inset rim.
   Grounds the photo on the page rather than letting it float. */
.photo {
  box-shadow:
    var(--shadow-photo),
    inset 0 0 0 1px rgba(28, 42, 38, 0.06);
}
.hero-photo .photo {
  box-shadow:
    0 30px 60px -20px rgba(28, 42, 38, 0.25),
    0 16px 30px -16px rgba(28, 42, 38, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* E10. Process numbers: editorial dropcap-tier instead of icon badges.
   Italic Fraunces opsz 96 inside cream disc with inset hairline. */
.process-num {
  background: var(--cream);
  border: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.1rem;
  color: var(--sage-700);
  box-shadow: inset 0 0 0 1px rgba(63, 109, 99, 0.18);
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* E11. Quote pull-quote glyph: lighter, larger, top-left flourish
   with letterpress "punched off the white card" shadow. */
.quote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 18px;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  color: var(--fly-300);
  line-height: 1;
  font-variation-settings: 'opsz' 144;
  font-style: italic;
  font-weight: 400;
  opacity: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
.quote-body { padding-top: var(--s-2); }

/* E12. Section heads: stronger weight contrast between eyebrow, h2, lead. */
.section-head {
  max-width: 760px;
  margin: 0 auto var(--s-5);
  text-align: center;
}
.section-head .eyebrow { margin-bottom: var(--s-3); }
.section-head h2 { margin-bottom: var(--s-2); }
.section-head .lead { margin: var(--s-2) auto 0; max-width: 56ch; }

/* E13. Footer: tighter brand line, softer gold on hover, gold-tinted base rule. */
.site-footer .brand-text small { color: var(--fly-300); letter-spacing: 0.24em; }
.site-footer a:hover { color: var(--fly-300); }
.site-footer .footer-label { color: var(--cream); letter-spacing: 0.22em; }
.footer-base { border-top: 1px solid rgba(244, 211, 94, 0.10); }

/* E14. Focus rings: differentiated by element type. Buttons offset, inputs ring. */
.btn:focus-visible,
.btn-link:focus-visible,
a:focus-visible,
.nav-menu a:focus-visible {
  outline: 2px solid var(--fly-500);
  outline-offset: 3px;
  border-radius: var(--r-xs, 4px);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--sage-600);
  box-shadow: 0 0 0 4px rgba(63, 109, 99, 0.18);
  background: var(--white);
}

/* E15. View transitions: free cross-page polish in Chrome/Edge/Safari 18+. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
.brand-mark { view-transition-name: brand-mark; }

/* E16. Reveal animation: opacity-only with editorial easing.
   Drops the Y-translate so the page "settles" rather than "loads." */
.js-ready .reveal {
  opacity: 0.001;
  transform: none;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-ready .reveal.in { opacity: 1; }

/* E17. Container width: hero gets 60px more cinema, body keeps editorial column. */
:root { --container-wide: 1240px; }
.hero .container { max-width: var(--container-wide); }

/* E18. Color discipline: warmer body ink on cream sections. */
:root { --ink-700: #2e423d; }
section.cream { color: #2a3d38; }
section.cream p { color: inherit; }

/* FAQ summary easing — micro-interaction polish. */
.faq summary::after { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); }

/* Button press feedback — kill flicker with hover translateY. */
.btn:active { transform: scale(0.985) translateY(0); transition-duration: 0.08s; }

/* Specialty grid gap: tighten the 2-up at tablet so cards don't feel cramped. */
@media (max-width: 1024px) {
  .card-grid.three { gap: var(--s-3); }
}

/* Hero reassure: room to breathe before the hero ends. */
.hero-reassure { margin-top: var(--s-2); }

/* Mobile elevations (M-E1..M-E5). */

/* M-E1. Mobile hero photo crops less aggressively at 320px. */
@media (max-width: 480px) {
  .hero-photo .photo { aspect-ratio: 5 / 4; }
}

/* M-E2. Mobile nav: hairline dividers above items, not below. */
@media (max-width: 880px) {
  .nav-menu a { border-top: 1px solid var(--line-soft); border-bottom: 0; padding: 1.1rem 0.4rem; }
  .nav-menu li:first-child a { border-top: 0; }
}

/* M-E3. Sticky CTA: gold accent above the cream rule. */
.mobile-cta {
  box-shadow: 0 -1px 0 rgba(244, 211, 94, 0.18), 0 -4px 16px rgba(28, 42, 38, 0.08);
}

/* M-E4. Mobile h1: clean 3-line break instead of 4 awkward ones on iPhone SE. */
@media (max-width: 480px) {
  .hero h1 { max-width: 18ch; font-size: clamp(1.95rem, 9vw, 2.4rem); }
}

/* Booking widget: framed inset rim so iframe reads as embedded, not dropped. */
.widget-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  box-shadow:
    var(--shadow-md, 0 6px 24px rgba(28, 42, 38, 0.06)),
    inset 0 0 0 1px rgba(244, 211, 94, 0.08);
}

/* Photography cohesion: warm overlay on virtual.jpg outlier. */
.image-pair .photo:nth-child(2) img { filter: saturate(0.85) sepia(0.05); }

/* ============================================================
   CREDENTIALS PASS (AUDIT_CREDENTIALS_*.md)
   Triggered by founder questionnaire return. Adds the visual
   layer for verified credentials: pull-quote, author byline,
   founder credline italic, constituency pills, mobile chip tweak.
   ============================================================ */

/* C1. Pull-quote section — About page, between founder and approach.
   Single editorial breath. Centered Fraunces italic between sage hairlines. */
.pull-quote-section {
  padding: var(--s-6) 0;
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 50%, var(--paper) 100%);
}
.pull-quote {
  margin: 0;
  text-align: center;
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}
.pull-quote-rule {
  display: block;
  width: 72px;
  height: 1px;
  background: var(--sage-300);
}
.pull-quote blockquote {
  margin: 0;
  max-width: 32ch;
}
.pull-quote blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: var(--sage-800);
  letter-spacing: -0.012em;
  font-variation-settings: 'opsz' 96;
  margin: 0;
  text-wrap: balance;
}
.pull-quote figcaption {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-700);
  font-weight: 600;
}
.pull-quote figcaption span {
  display: block;
  margin-top: 0.4rem;
  color: var(--ink-500);
  font-weight: 500;
  letter-spacing: 0.18em;
}
@media (max-width: 768px) {
  .pull-quote-section { padding: var(--s-5) 0; }
  .pull-quote blockquote { max-width: 22ch; }
}

/* C2. Founder credline — small italic Fraunces line under the
   founder paragraphs on About. Reads like a journalist's byline. */
.founder-credline {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink-500);
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
  letter-spacing: 0.01em;
  max-width: 60ch;
}
.founder-credline em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--sage-700);
  font-variation-settings: 'opsz' 24;
  font-weight: 500;
  margin-right: 0.25rem;
}

/* C3. Author byline (.author-card) — Vox/Healthline pattern.
   Ships on Services + FAQ between page-header and first body section.
   E-E-A-T trust signal for YMYL content. */
.author-card {
  padding: var(--s-3) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.author-card-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 720px;
  margin: 0 auto;
}
.author-card-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage-700) 0%, var(--sage-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(244, 211, 94, 0.18);
}
.author-card-mono {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fly-300);
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.02em;
  line-height: 1;
}
.author-card-text { display: grid; gap: 0.18rem; }
.author-card-name {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  color: var(--ink-900);
  margin: 0;
  font-weight: 500;
}
.author-card-name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink-900);
  font-variation-settings: 'opsz' 36;
  margin-right: 0.15rem;
  font-size: 1.02rem;
}
.author-card-meta {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin: 0;
  font-weight: 600;
}
.author-card-reviewed {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-500);
  margin: 0;
}
@media (max-width: 480px) {
  .author-card-inner { gap: var(--s-2); }
  .author-card-mark { width: 40px; height: 40px; }
  .author-card-mono { font-size: 0.95rem; }
  .author-card-meta { letter-spacing: 0.14em; }
}

/* C4. Constituency pills — small 3-up under "Collaboration across
   your child's team" item on Services. Matches credentials chip grammar. */
.constituency-row {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.constituency-row li { display: inline-flex; }
.constituency-row li span {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
}
@media (max-width: 480px) {
  .constituency-row { gap: 0.3rem; }
  .constituency-row li span { padding: 0.2rem 0.55rem; font-size: 0.74rem; }
}

/* C5. Mobile credentials chip tweak — prevents janky 2-line wrap
   on iPhone SE. Drops chip padding + font ~7%. */
@media (max-width: 480px) {
  .founder-credentials {
    gap: 0.3rem;
    font-size: 0.72rem;
  }
  .founder-credentials li span {
    padding: 0.22rem 0.5rem;
  }
}

/* C6. Footer-base wrap rule — 3 spans wrap cleanly on narrow
   viewports rather than orphaning the credentials line. */
.footer-base {
  flex-wrap: wrap;
  gap: 0.6rem var(--s-3);
}

/* ============================================================
   TEAM CONSENSUS PASS (AUDIT_TEAM_*.md)
   Honesty caption under monogram (Conversion #1), iframe preview
   block (Conversion #2), and supporting micro-components.
   ============================================================ */

/* Monogram honesty note — small italic line acknowledging
   the missing headshot. Converts a defensive design pattern
   into an honest brand voice. Renders below .founder-mono. */
.founder-mono-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-500);
  text-align: center;
  max-width: 320px;
  margin: var(--s-2) auto 0;
  padding: 0 var(--s-2);
  font-variation-settings: 'opsz' 14;
  font-weight: 400;
}
@media (max-width: 880px) {
  .founder-mono-note { max-width: 380px; }
}

/* Iframe preview block on Contact page —
   "what's in the form" 90-second preview that sets expectations
   before the SimplePractice iframe loads. */
.widget-preview {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.widget-preview-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-700);
  margin-bottom: var(--s-2);
  font-weight: 600;
}
.widget-preview h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  font-variation-settings: 'opsz' 36;
  color: var(--ink-900);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}
.widget-preview p {
  font-size: 0.95rem;
  margin: 0 0 var(--s-2);
  color: var(--ink-700);
  line-height: 1.55;
}
.widget-preview-examples {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.widget-preview-examples li {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--sage-800);
  padding: 0.5rem 0.75rem;
  background: var(--white);
  border-left: 2px solid var(--sage-300);
  border-radius: 0 4px 4px 0;
  font-variation-settings: 'opsz' 24;
}

/* ==========================================================================
   TRUST BAND v3 — graphics + animation upgrade
   Replaces the E6 monoline stripe with four crafted cards: bespoke sage
   glyph per item, a quiet firefly that glows on hover, scroll-reveal,
   serif numeral pull-quote on the reimbursement card. Mobile-stacked,
   tablet 2x2, desktop 4-up. Premium private-practice voice.
   ========================================================================== */

/* Section — warm rule top + bottom, paper background, generous breathing room. */
.trust-band {
  position: relative;
  padding: var(--s-5) 0;
  background:
    linear-gradient(180deg, var(--paper, #fffdf6) 0%, var(--white) 100%);
  box-shadow:
    inset 0 1px 0 var(--line-soft),
    inset 0 -1px 0 var(--line-soft);
  overflow: hidden;
}

/* Grid — back to a real 4-column system, not a flex stripe. */
.trust-band .trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: stretch;
  justify-content: stretch;
  flex-wrap: nowrap;
  text-align: left;
}

/* Each item is now a proper card: cream wash, soft border, breathing room. */
.trust-band .trust-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) calc(var(--s-3) + 2px);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease,
    background-color 0.28s ease;
}

/* Override stripe pseudo-divider + odd border-right from older rules. */
.trust-band .trust-item + .trust-item { border-left: 0; }
.trust-band .trust-item:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.trust-band .trust-item + .trust-item::before { content: none; display: none; }

/* Sage hairline accent under each headline — quiet, editorial. */
.trust-band .trust-item::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  top: calc(var(--s-3) + 84px); /* sits under the glyph block */
  width: 28px;
  height: 2px;
  background: var(--sage-300);
  border-radius: 2px;
  opacity: 0.75;
  transition: width 0.35s ease, background-color 0.28s ease;
}

/* Glyph wrapper — circular cream halo, sage glyph, single firefly resting inside. */
.trust-band .trust-spark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--cream, #f7f2e3) 0%, var(--sage-50) 70%, var(--sage-100) 100%);
  box-shadow: inset 0 0 0 1px var(--sage-100);
  color: var(--sage-700);
  flex-shrink: 0;
  transition: box-shadow 0.35s ease, background 0.35s ease;
}

/* Reset the original .trust-item svg sizing from line ~611 and the E6 display:none. */
.trust-band .trust-item svg { display: block; color: inherit; }
.trust-band .trust-glyph {
  width: 36px;
  height: 36px;
  color: var(--sage-700);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The resting firefly inside each glyph halo — a tiny brand throughline.
   Position bottom-right of the circle. Reuses .firefly token glow. */
.trust-band .trust-fly {
  position: absolute;
  width: 14px;
  height: 14px;
  right: -2px;
  bottom: -2px;
  pointer-events: none;
  opacity: 0; /* hidden until hover or focus */
  transform: scale(0.6);
  transition: opacity 0.35s ease, transform 0.45s ease;
  z-index: 2;
}
.trust-band .trust-fly svg { width: 100%; height: 100%; overflow: visible; }
.trust-band .trust-fly .glow {
  fill: #cce886;
  filter:
    drop-shadow(0 0 3px rgba(244, 230, 130, 0.95))
    drop-shadow(0 0 8px rgba(244, 230, 130, 0.55));
}
.trust-band .trust-fly .body { fill: #1a1f17; opacity: 0.78; }
.trust-band .trust-fly .body-light { fill: rgba(255, 255, 255, 0.2); }

/* Text block — restore real hierarchy after the E6 stripe flattened it. */
.trust-band .trust-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
  margin-top: 0.4rem;
}
.trust-band .trust-text strong {
  display: block;
  font-family: var(--font-serif);
  font-style: normal; /* reset the E6 italic */
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sage-800);
  font-variation-settings: 'opsz' 36, 'wght' 500;
  margin: 0;
}
.trust-band .trust-text span {
  display: block;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-600);
  margin: 0;
}

/* The "50 to 80%" stat callout on the superbills card.
   Serif italic, sage-800, slight gold underline on hover. */
.trust-band .trust-stat {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--sage-800);
  font-variation-settings: 'opsz' 36, 'wght' 600;
  font-variant-numeric: tabular-nums;
  background:
    linear-gradient(180deg, transparent 62%, rgba(244, 211, 94, 0.32) 62%, rgba(244, 211, 94, 0.32) 92%, transparent 92%);
  padding: 0 0.12rem;
  border-radius: 2px;
  white-space: nowrap;
}

/* The stat card gets a slightly warmer top accent so it reads as the closing punch. */
.trust-band .trust-item--stat {
  background:
    linear-gradient(180deg, #fefcf3 0%, var(--white) 60%);
}
.trust-band .trust-item--stat::after { background: var(--fly-500); opacity: 0.7; }

/* Hover state — sage border, micro lift, firefly wakes up, glyph halo glows. */
@media (hover: hover) {
  .trust-band .trust-item:hover {
    transform: translateY(-2px);
    border-color: var(--sage-300);
    background-color: #fefcf8;
    box-shadow:
      0 12px 28px rgba(28, 42, 38, 0.07),
      0 2px 6px rgba(28, 42, 38, 0.04),
      0 1px 0 rgba(63, 109, 99, 0.05) inset;
  }
  .trust-band .trust-item:hover .trust-spark {
    background:
      radial-gradient(circle at 30% 30%, #fff8d6 0%, var(--sage-50) 60%, var(--sage-100) 100%);
    box-shadow: inset 0 0 0 1px var(--sage-200), 0 0 0 4px rgba(244, 211, 94, 0.08);
  }
  .trust-band .trust-item:hover .trust-fly {
    opacity: 1;
    transform: scale(1) translate(-1px, -1px);
    animation: trust-fly-pulse 2.4s ease-in-out infinite;
  }
  .trust-band .trust-item:hover::after {
    width: 56px;
    background: var(--sage-500);
  }
  .trust-band .trust-item--stat:hover::after {
    background: var(--fly-500);
  }
}

/* Keyboard focus state — accessibility parity with hover. */
.trust-band .trust-item:focus-within {
  outline: 3px solid var(--fly-400);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* Firefly pulse — slow, soft, non-distracting. */
@keyframes trust-fly-pulse {
  0%, 100% {
    opacity: 0.55;
    filter: drop-shadow(0 0 2px rgba(244, 230, 130, 0.6));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 4px rgba(244, 230, 130, 0.95))
      drop-shadow(0 0 10px rgba(244, 230, 130, 0.55));
  }
}

/* Scroll reveal — stagger four cards with opacity-only fade.
   The site uses `.js-ready .reveal { opacity: 0.001 }` baseline and toggles
   `.in` when the IntersectionObserver fires (see js/script.js). We add a
   per-card transition-delay so the four cards arrive ~90ms apart, and a
   small upward translate for crafted polish. Cards stay visible if JS is
   off (no .js-ready class → no opacity:0 baseline). */
.js-ready .trust-band .trust-item.reveal {
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-ready .trust-band .trust-item.reveal.in {
  transform: translateY(0);
}
.trust-band .trust-item.reveal:nth-child(1) { transition-delay: 0ms; }
.trust-band .trust-item.reveal:nth-child(2) { transition-delay: 90ms; }
.trust-band .trust-item.reveal:nth-child(3) { transition-delay: 180ms; }
.trust-band .trust-item.reveal:nth-child(4) { transition-delay: 270ms; }

/* ----- Responsive ----- */

/* Tablet — 2 x 2 grid. */
@media (max-width: 980px) {
  .trust-band { padding: var(--s-4) 0; }
  .trust-band .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .trust-band .trust-item { padding: var(--s-3); }
  .trust-band .trust-item::after { top: calc(var(--s-3) + 76px); }
  .trust-band .trust-item:nth-child(odd) { border-right: 1px solid var(--line-soft); }
}

/* Phone — single column stack, tighter padding, smaller glyph but still
   visually anchored. No horizontal scroll. */
@media (max-width: 640px) {
  .trust-band { padding: var(--s-4) 0; }
  .trust-band .trust-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    text-align: left;
  }
  .trust-band .trust-item {
    flex-direction: row;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
  }
  .trust-band .trust-item:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .trust-band .trust-spark { width: 48px; height: 48px; }
  .trust-band .trust-glyph { width: 28px; height: 28px; }
  .trust-band .trust-fly { width: 11px; height: 11px; }
  .trust-band .trust-text { margin-top: 0; gap: 0.2rem; flex: 1; }
  .trust-band .trust-text strong { font-size: 1.05rem; }
  .trust-band .trust-text span { font-size: 0.86rem; line-height: 1.45; }
  /* On phone the after-rule sits inside the row, so anchor it to the bottom edge. */
  .trust-band .trust-item::after {
    top: auto;
    bottom: 6px;
    left: calc(var(--s-3) + 48px + var(--s-2));
    width: 20px;
  }
  .trust-band .trust-stat { font-size: 0.95rem; }
}

/* Very small phone — keep glyph at 44, prevent any wrap collisions. */
@media (max-width: 380px) {
  .trust-band .trust-item { padding: var(--s-2); }
  .trust-band .trust-spark { width: 44px; height: 44px; }
  .trust-band .trust-glyph { width: 24px; height: 24px; }
  .trust-band .trust-text strong { font-size: 1rem; }
}

/* Reduced motion — kill firefly pulse + card lift transform + scroll fade. */
@media (prefers-reduced-motion: reduce) {
  .js-ready .trust-band .trust-item.reveal,
  .trust-band .trust-item.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .trust-band .trust-item:hover {
    transform: none;
  }
  .trust-band .trust-item:hover .trust-fly { animation: none; }
  .trust-band .trust-fly { opacity: 0.55; transform: scale(1); }
}

/* ============================================================
   FIREFLY REMOVAL — owner directive, 2026-05-12.
   The dark firefly bodies were reading as black bugs on the
   hero photo (especially on the girl's face) and the trust band
   glyphs. All firefly DOM has been stripped from index.html and
   about.html. This block is a defense-in-depth safety net so
   that if any firefly markup is ever reintroduced, NOTHING
   renders visibly. Do not delete unless owner explicitly
   re-approves the firefly motif.
   ============================================================ */
.firefly,
.firefly-cluster,
.trust-fly,
.firefly .body,
.firefly .body-light,
.firefly .glow,
.trust-fly .body,
.trust-fly .body-light,
.trust-fly .glow,
.founder-mono .firefly,
.hero-photo .firefly-cluster,
.trust-band .trust-fly,
.trust-spark .trust-fly {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}