/* =========================================================================
   Teachers Who Move — design system
   Deep navy for trust and structure. Warm gold for calls to action.
   Muted green for community impact. Cream and soft gray for ground.
   All text/background pairings used here meet WCAG AA (4.5:1 body,
   3:1 large text) — see tests/contrast.js, which fails the build if a
   pairing regresses.
   ========================================================================= */

:root {
  /* Brand */
  --navy: #19324a;
  --navy-700: #12253a;
  --navy-900: #0c1a29;
  --navy-400: #3c5a78;
  --gold: #f4b942;
  --gold-600: #d99a1f;
  --gold-100: #fdf1d6;
  --green: #5d8c6e;
  --green-text: #3c6b4f; /* AA-safe green for text on white/cream */
  --green-100: #e8f1ea;
  --cream: #fff9f0;
  --gray: #f3f5f7;
  --gray-200: #e4e8ed;
  --gray-300: #cbd3dc;
  --ink: #1f2937;
  --ink-muted: #59616e;
  --white: #ffffff;
  --danger: #a4262c;
  --danger-bg: #fdeceb;
  --success-text: #2f6b46;
  --success-bg: #e8f4ec;

  /* Type */
  /* Fraunces is a warm, slightly literary serif — it reads as a person wrote
     this, which is the whole positioning. Public Sans carries the long guides
     and every form without competing with it. Both have real fallbacks: a
     blocked font request degrades to Georgia and the system stack, not to
     something unrecognisable. */
  --font-heading: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  /* Kept for the few places that want a grotesque: eyebrows, data, prices. */
  --font-ui: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Space + shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15, 30, 48, 0.06), 0 1px 3px rgba(15, 30, 48, 0.08);
  --shadow: 0 4px 6px -1px rgba(15, 30, 48, 0.07), 0 10px 24px -6px rgba(15, 30, 48, 0.12);
  --shadow-lg: 0 12px 40px -12px rgba(15, 30, 48, 0.28);
  --container: 1160px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 7vw, 5.5rem);
}

/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  font-weight: 600;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.35rem, 5.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.12;
}
h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.005em;
}
h4 {
  font-size: 1.075rem;
  font-weight: 700;
}
p {
  margin: 0 0 1.15em;
  max-width: 64ch;
}
a {
  color: var(--navy);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover {
  color: var(--navy-700);
}
ul,
ol {
  padding-left: 1.25em;
}
li {
  margin-bottom: 0.4em;
}
hr {
  border: 0;
  border-top: 1px solid var(--gray-200);
  margin: 2.5rem 0;
}
small {
  font-size: 0.875rem;
}
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-dark :focus-visible,
.site-header :focus-visible,
.announcement :focus-visible {
  outline-color: var(--gold);
}

/* ------------------------------------------------------------- utilities */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  max-width: 780px;
}
.section {
  padding-block: var(--section-y);
}
.section--cream {
  background: var(--cream);
}
.section--gray {
  background: var(--gray);
}
.section--navy {
  background: var(--navy);
  color: #eef2f7;
}
.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--white);
}
.section--green {
  background: var(--green-100);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0.5rem;
  color: var(--white);
}
.text-center {
  text-align: center;
}
.muted {
  color: var(--ink-muted);
}
.stack > * + * {
  margin-top: 1rem;
}
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-text);
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.section--navy .eyebrow {
  color: var(--gold);
}
.lede {
  font-size: clamp(1.075rem, 1.6vw, 1.25rem);
  color: var(--ink-muted);
  max-width: 62ch;
}
.section--navy .lede {
  color: #c9d5e2;
}
.section-head {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 62ch;
  padding-top: 1.4rem;
  border-top: 1px solid var(--gray-200);
}
.section--navy .section-head {
  border-top-color: rgba(255, 255, 255, 0.18);
}
.section--cream .section-head {
  border-top-color: rgba(25, 50, 74, 0.14);
}
.section-head h2 {
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.95rem 1.5rem;
  min-height: 52px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease;
  text-align: center;
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--gold);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--gold-600);
  color: var(--navy-900);
}
.btn--navy {
  background: var(--navy);
  color: var(--white);
}
.btn--navy:hover {
  background: var(--navy-700);
  color: var(--white);
}
.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover {
  background: var(--navy);
  color: var(--white);
}
.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--white);
}
.btn--outline-light:hover {
  background: var(--white);
  color: var(--navy);
}
.btn--ghost {
  background: var(--white);
  border-color: var(--gray-300);
  color: var(--navy);
}
.btn--ghost:hover {
  border-color: var(--navy);
}
.btn--sm {
  padding: 0.6rem 1.05rem;
  min-height: 44px;
  font-size: 0.9375rem;
}
.btn--block {
  width: 100%;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* --------------------------------------------------------- announcement */
.announcement {
  background: var(--navy-900);
  color: #e8eef5;
  font-size: 0.9375rem;
  text-align: center;
  position: relative;
}
.announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem var(--gutter);
  min-height: 42px;
}
.announcement a {
  color: var(--gold);
  font-weight: 700;
}
.announcement__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
/* The header breakpoints below are measured, not guessed. At the compact size
   the logo, nine menu links and the quote button need about 1,233px plus the
   gutters; with the phone number and the larger links, about 1,486px. Each
   breakpoint leaves room for a 17px desktop scrollbar. Adding a menu item
   means re-measuring — the no-overflow checks in tests/e2e.js will say so. */
.site-header__inner {
  max-width: 1600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
  padding-block: 0.6rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex: none;
}
.brand svg,
.brand img {
  height: 38px;
  width: auto;
}
.nav {
  display: none;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__link:hover {
  background: var(--gray);
}
.nav__link[aria-current='page'] {
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.nav__item {
  position: relative;
}
.nav__caret {
  width: 10px;
  height: 10px;
  flex: none;
  transition: transform 0.15s ease;
}
.nav__link[aria-expanded='true'] .nav__caret {
  transform: rotate(180deg);
}
.mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.15rem;
  min-width: 460px;
  display: none;
}
.mega[data-open='true'] {
  display: block;
}
@media (hover: hover) and (min-width: 1340px) {
  .nav__item:hover .mega {
    display: block;
  }
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega__link {
  display: block;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9375rem;
}
.mega__link span {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.mega__link:hover {
  background: var(--cream);
}
.mega__footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.9rem;
}
.header__actions {
  display: none;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}
.header__phone {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.header__phone:hover {
  text-decoration: underline;
}
/* Very small phones: shrink the logo and the menu button so the bar fits. */
@media (max-width: 400px) {
  .brand img,
  .brand svg {
    height: 32px;
  }
  .menu-toggle {
    padding: 0.7rem 0.9rem;
  }
}
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  min-height: 48px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9375rem;
  cursor: pointer;
}
/* The phone number is the first thing to go when the bar gets tight — it is
   still one tap away in the footer and on the sticky mobile bar. */
.header__phone {
  display: none;
}
@media (min-width: 1340px) {
  .nav,
  .header__actions {
    display: flex;
  }
  .menu-toggle {
    display: none;
  }
}
@media (min-width: 1600px) {
  .header__phone {
    display: inline-flex;
  }
  .nav__link {
    font-size: 0.9375rem;
    padding: 0.6rem 0.7rem;
  }
}

/* mobile drawer */
.mobile-nav {
  display: block;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 1rem var(--gutter) 1.5rem;
}
.mobile-nav[hidden] {
  display: none;
}
.mobile-nav__list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.mobile-nav__list a {
  display: block;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--gray-200);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  color: var(--navy);
  min-height: 48px;
}
.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 0.9rem;
}
.mobile-nav__sub a {
  font-weight: 500;
  font-size: 0.9375rem;
  border-bottom: 0;
  padding: 0.6rem 0.25rem;
  color: var(--ink);
}
.mobile-nav details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--gray-200);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  min-height: 48px;
  list-style: none;
}
.mobile-nav details > summary::-webkit-details-marker {
  display: none;
}
.mobile-nav details > summary::after {
  content: '+';
  font-size: 1.3rem;
  line-height: 1;
  color: var(--navy-400);
}
.mobile-nav details[open] > summary::after {
  content: '–';
}

/* sticky mobile action bar */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 1px;
  background: var(--navy-900);
  padding: 0.5rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(12, 26, 41, 0.22);
}
.action-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8125rem;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
}
.action-bar__quote {
  background: var(--gold);
  color: var(--navy-900);
}
.action-bar__call,
.action-bar__text {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}
.action-bar svg {
  width: 18px;
  height: 18px;
}
body.has-action-bar {
  padding-bottom: 78px;
}
@media (min-width: 1340px) {
  .action-bar {
    display: none;
  }
  body.has-action-bar {
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  background: var(--navy);
  color: #e9eff5;
  overflow: hidden;
  /* The navy reads as a panel sitting ON the page, not a band welded to the
     section below it. The margin lets the page show underneath, and the
     softened bottom corners make that edge look chosen rather than cut. */
  margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
  border-bottom-left-radius: clamp(0px, 1.5vw, 18px);
  border-bottom-right-radius: clamp(0px, 1.5vw, 18px);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Two layers, doing two different jobs.
 *
 * The first is a scrim that follows the text: near-opaque under the headline
 * and the paragraph, then falling away once the copy has ended, so the right
 * of the hero is photograph rather than paint. The earlier single gradient
 * bottomed out at 0.72 and that was too heavy — a brick wall behind it
 * composited to roughly rgb(50,49,56), which the eye reads as flat colour, so
 * the photograph was there and invisible.
 *
 * The second is a flat tint across the whole hero. It stops the exposed part
 * of the photograph drifting away from the brand navy, and it puts a floor
 * under the contrast: however bright the image happens to be, nothing behind
 * the text can get lighter than this allows. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      100deg,
      rgba(12, 26, 41, 0.96) 0%,
      rgba(12, 26, 41, 0.92) 44%,
      rgba(12, 26, 41, 0.6) 70%,
      rgba(12, 26, 41, 0.38) 100%
    ),
    linear-gradient(rgba(12, 26, 41, 0.3), rgba(12, 26, 41, 0.3));
}
/* Below the wide breakpoint the copy runs the full width of the hero, so it
   sits over the part of the image the gradient above deliberately exposes.
   Here the scrim stays heavy all the way across; the photograph shows as
   texture rather than subject, which is the correct trade on a phone. */
@media (max-width: 899px) {
  .hero__overlay {
    background:
      linear-gradient(
        100deg,
        rgba(12, 26, 41, 0.96) 0%,
        rgba(12, 26, 41, 0.93) 60%,
        rgba(12, 26, 41, 0.78) 100%
      ),
      linear-gradient(rgba(12, 26, 41, 0.22), rgba(12, 26, 41, 0.22));
  }
}
.hero__inner {
  position: relative;
  z-index: 2;
  /* Asymmetric on purpose. The generous space above the headline is what gives
     it room to land; repeating that below just left a stretch of empty navy
     running off the bottom of the screen. */
  padding-top: clamp(2.75rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
  max-width: 20ch;
}
/* The headline sets its own measure — around twenty characters a line is what
   makes a display serif look set rather than typed. Supporting copy below is
   let out to a readable width again. */
.hero h1 {
  color: var(--white);
  font-size: clamp(2.5rem, 6.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 0.85rem;
}
.hero__inner > *:not(h1) {
  max-width: 58ch;
}
@media (min-width: 900px) {
  .hero__inner {
    max-width: 72ch;
  }
  /* Wide enough for the headline to set in two lines rather than three. The
     tighter measure read well on its own, but it pushed the whole block past
     the height of a laptop screen, so the navy ran off the bottom edge with no
     page showing beneath it. */
  .hero h1 {
    max-width: 24ch;
  }
}
.hero__supporting {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: #cfdbe7;
  max-width: 60ch;
}
.hero__tagline {
  font-family: var(--font-ui);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 1.1rem;
  font-size: 1rem;
}
.hero .btn-row {
  margin-top: 1.75rem;
}
.hero__trust {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  font-size: 0.9375rem;
  color: #c4d2e0;
  list-style: none;
  padding: 0;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}
.hero__trust li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ------------------------------------------------------------- trust bar */
.trustbar {
  background: var(--cream);
  border-bottom: 1px solid var(--gray-200);
}
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  padding-block: 1.75rem;
}
.trustbar__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.95rem;
}
.trustbar__item strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--navy);
  font-size: 1rem;
}
.trustbar__check {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: var(--green-100);
  color: var(--green-text);
  display: grid;
  place-items: center;
}
.trustbar__check svg {
  width: 15px;
  height: 15px;
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--navy);
}

/* ----------------------------------------------------------------- cards */
/* Grid and flex children default to min-width:auto, which lets a wide child
   (a nested auto-fit grid, a long word, a table) push the track past the
   viewport. Zeroing it is what keeps every layout inside the screen. */
.grid > *,
.split > *,
.steps > *,
.option-grid > *,
.field-row > *,
.area-grid > *,
.counter-grid > *,
.trustbar__grid > * {
  min-width: 0;
}
.grid {
  display: grid;
  gap: 1.25rem;
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 1.65rem 1.5rem;
  display: flex;
  flex-direction: column;
}
/* Elevation is spent on one thing per screen, never sprayed across a grid —
   when every card floats, none of them reads as important. */
.card--raised {
  box-shadow: var(--shadow);
  border-color: transparent;
}
.card h3 {
  margin-bottom: 0.4rem;
}
.card p {
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.card__icon {
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.card__icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}
.card__price {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--navy);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.card__price small {
  font-weight: 600;
  color: var(--ink-muted);
  display: block;
  font-size: 0.8125rem;
}
.card__actions {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.card--flat {
  box-shadow: none;
}
.card--cream {
  background: var(--cream);
  border-color: #f0e6d5;
}

/* numbered / checklist blocks — the education cue, used sparingly */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps > li {
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.4rem 1.4rem;
  position: relative;
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.85rem;
}
.steps h3 {
  font-size: 1.075rem;
  margin-bottom: 0.35rem;
}
.steps p {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  margin: 0;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
.checklist li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0;
  font-size: 0.975rem;
}
.checklist li::before {
  content: '';
  width: 21px;
  height: 21px;
  flex: none;
  margin-top: 2px;
  border-radius: 6px;
  background: var(--green-100)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233c6b4f'%3E%3Cpath d='M7.6 14.2 3.4 10l1.4-1.4 2.8 2.8 7-7L16 5.8z'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
.checklist--x li::before {
  background: #f6e9e9
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a4262c'%3E%3Cpath d='M14.8 6.6 13.4 5.2 10 8.6 6.6 5.2 5.2 6.6 8.6 10l-3.4 3.4 1.4 1.4L10 11.4l3.4 3.4 1.4-1.4L11.4 10z'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}

/* notebook-line accent panel */
.notebook {
  background: var(--white)
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(25, 50, 74, 0.07) 31px 32px);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.callout {
  border-left: 4px solid var(--green);
  background: var(--green-100);
  padding: 1.15rem 1.35rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.975rem;
}
.callout--gold {
  border-left-color: var(--gold);
  background: var(--gold-100);
}
.callout--gray {
  border-left-color: var(--navy-400);
  background: var(--gray);
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout strong {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------- pricing */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.975rem;
}
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.price-table th,
.price-table td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}
.price-table thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-table tbody tr:last-child td {
  border-bottom: 0;
}
.price-table tbody tr:nth-child(even) {
  background: var(--gray);
}

/* ---------------------------------------------------------------- forms */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--shadow);
}
.field {
  margin-bottom: 1.15rem;
}
.field > label,
.fieldset__legend {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.field__hint {
  display: block;
  font-size: 0.8438rem;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}
.field__required {
  color: var(--danger);
  font-weight: 700;
}
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='date'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='url'],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  min-height: 50px;
}
textarea {
  min-height: 120px;
  resize: vertical;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2359616e'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 20px;
  padding-right: 2.4rem;
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--navy-400);
}
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.field__error {
  display: block;
  color: var(--danger);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.35rem;
}
.field-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}
.option-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.option {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  cursor: pointer;
  background: var(--white);
  min-height: 52px;
}
.option:hover {
  border-color: var(--navy-400);
  background: var(--cream);
}
.option input {
  margin: 0;
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--navy);
}
.option span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.option span small {
  display: block;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}
.option:has(input:checked) {
  border-color: var(--navy);
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.option:has(input:focus-visible) {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* progress indicator */
.progress {
  margin-bottom: 1.75rem;
}
.progress__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--gray-200);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.progress__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.progress__steps li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.progress__steps li[data-state='done'] {
  color: var(--green-text);
  font-weight: 600;
}
.progress__steps li[data-state='current'] {
  color: var(--navy);
  font-weight: 800;
}

.alert {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.alert--error {
  background: var(--danger-bg);
  border-color: #eec6c4;
  color: #7d1d22;
}
.alert--success {
  background: var(--success-bg);
  border-color: #bfdccb;
  color: var(--success-text);
}
.alert--info {
  background: var(--gold-100);
  border-color: #f0dcae;
  color: #6b4d09;
}
.alert p:last-child {
  margin-bottom: 0;
}
.alert strong {
  font-family: var(--font-heading);
}

/* --------------------------------------------------------------- estimate */
.estimate {
  background: var(--navy);
  color: #e6ecf3;
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 2.25rem);
}
.estimate h2,
.estimate h3 {
  color: var(--white);
}
.estimate__range {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.9rem);
  color: var(--gold);
  line-height: 1.1;
  margin: 0.4rem 0;
}
.estimate__label {
  display: inline-block;
  background: rgba(244, 185, 66, 0.16);
  border: 1px solid rgba(244, 185, 66, 0.5);
  color: var(--gold);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 700;
}
.estimate__lines {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.estimate__lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9375rem;
  margin: 0;
}
.estimate__lines span:last-child {
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------------- educators */
.educator-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.educator-card__photo {
  aspect-ratio: 4 / 5;
  background: var(--gray);
  overflow: hidden;
}
.educator-card__photo img,
.educator-card__photo svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.educator-card__body {
  padding: 1.15rem 1.25rem 1.35rem;
}
.educator-card__name {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--navy);
  font-size: 1.1rem;
  margin: 0 0 0.15rem;
}
.educator-card__role {
  font-size: 0.875rem;
  color: var(--green-text);
  font-weight: 700;
  margin: 0 0 0.6rem;
}
.educator-card__intro {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  margin: 0;
}
.sample-flag {
  display: inline-block;
  background: var(--gold-100);
  border: 1px dashed var(--gold-600);
  color: #6b4d09;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------ area / map */
.area-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.area-grid li {
  margin: 0;
}
.area-grid a {
  display: block;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  min-height: 56px;
}
.area-grid a:hover {
  border-color: var(--navy);
  background: var(--cream);
}
.area-grid small {
  display: block;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--ink-muted);
  margin-top: 2px;
}
.region-block {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  padding: 1.35rem;
}
.region-block h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
}
.region-block h3::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--gold);
  flex: none;
}

/* ------------------------------------------------------------- counters */
.counter-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.counter {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.counter__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.35rem;
  color: var(--gold);
  line-height: 1;
}
.counter__label {
  font-size: 0.875rem;
  color: #c9d5e2;
  margin-top: 0.4rem;
}

/* --------------------------------------------------------------- empty */
.empty-state {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--ink-muted);
  background: var(--white);
}
.empty-state p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------- breadcrumbs */
.breadcrumbs {
  background: var(--gray);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.875rem;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
}
.breadcrumbs li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-muted);
}
.breadcrumbs li + li::before {
  content: '›';
  color: var(--gray-300);
}
.breadcrumbs a {
  color: var(--navy);
}

/* ------------------------------------------------------------ page head */
.page-head {
  background: var(--cream);
  border-bottom: 1px solid #f0e6d5;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.page-head h1 {
  /* Service and location headings are long and descriptive on purpose, so they
     are set a step smaller than the homepage hero. */
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}
.page-head .lede {
  margin-bottom: 0;
}
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin-top: 1rem;
}

/* --------------------------------------------------------------- prose */
.prose {
  font-size: 1.0625rem;
  line-height: 1.72;
}
.prose h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}
.prose h3 {
  margin-top: 2rem;
}
.prose p {
  max-width: 62ch;
}
/* An opening paragraph set slightly larger is the oldest trick in editorial
   layout and it still works — it tells the eye where the article starts. */
.prose > p:first-of-type {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
}
.prose > *:first-child {
  margin-top: 0;
}
.prose ul,
.prose ol {
  max-width: 68ch;
}

/* ---------------------------------------------------------------- FAQ */
.faq-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 1.05rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  list-style: none;
  min-height: 56px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--navy-400);
  line-height: 1;
  flex: none;
}
.faq-item[open] summary::after {
  content: '–';
}
.faq-item summary:hover {
  background: var(--cream);
}
.faq-item__body {
  padding: 0 1.25rem 1.25rem;
}
.faq-item__body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- footer */
.site-footer {
  background: var(--navy-900);
  color: #b9c6d4;
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-size: 0.9375rem;
}
.site-footer h2,
.site-footer h3 {
  color: var(--white);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.site-footer a {
  color: #d3dde7;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--gold);
  text-decoration: underline;
}
.footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.footer__brand {
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .footer__brand {
    grid-column: auto;
    max-width: 320px;
  }
}
.footer__brand svg {
  height: 44px;
  width: auto;
  margin-bottom: 1rem;
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__list li {
  margin-bottom: 0.5rem;
}
.footer__contact a {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--white);
  font-size: 1.05rem;
}
.footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8438rem;
  color: #93a3b4;
}
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal-links li {
  margin: 0;
}
.footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.footer__social a,
.footer__social span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  color: #93a3b4;
}

/* ------------------------------------------------------------- final CTA */
.final-cta {
  background: var(--navy);
  color: #dbe4ee;
  text-align: center;
}
.final-cta h2 {
  color: var(--white);
}
.final-cta .btn-row {
  justify-content: center;
}

/* -------------------------------------------------------------- media */
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray);
  border: 1px solid var(--gray-200);
}
.media-frame img,
.media-frame svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.05fr 1fr;
  }
  .split--reverse > *:first-child {
    order: 2;
  }
}

/* ------------------------------------------------------------- tables */
.dl-grid {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0;
}
.dl-grid > div {
  border-top: 1px solid var(--gray-200);
  padding-top: 0.65rem;
}
.dl-grid dt {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.8438rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dl-grid dd {
  margin: 0.2rem 0 0;
  font-size: 0.975rem;
}

.tag {
  display: inline-block;
  background: var(--gray);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin: 0 0.3rem 0.3rem 0;
}
.tag--green {
  background: var(--green-100);
  border-color: #cfe1d5;
  color: var(--green-text);
  font-weight: 600;
}
.tag--gold {
  background: var(--gold-100);
  border-color: #f0dcae;
  color: #6b4d09;
  font-weight: 600;
}

@media print {
  .site-header,
  .action-bar,
  .announcement,
  .site-footer,
  .btn {
    display: none !important;
  }
}

/* ---------------------------------------------------------- amount input
   A currency field where the dollar sign belongs to the control rather than
   floating beside it, so the caret lands after the $ where people expect. */
.amount-input {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}
.amount-input:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(25, 50, 74, .12);
}
.amount-input > span {
  display: grid;
  place-items: center;
  padding: 0 .85rem;
  background: var(--gray);
  border-right: 1.5px solid var(--gray-300);
  font-weight: 700;
  color: var(--ink-muted);
}
.amount-input > input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.amount-input > input:focus { outline: none; box-shadow: none; }