/* Juno Childcare Academy — modern luxury Montessori
   Covers every page: home, about, doula services, contact.
   Palette: pine / honey / sage on warm paper. Type: Fraunces + Albert Sans. */

/* ============================================================
   1 · TOKENS
   ============================================================ */

:root {
  --paper: #f7f3ec;
  --cream: #efe8db;
  --ink: #222b24;
  --muted: #5c655c;
  --pine: #2c4234;
  --pine-deep: #1e2e23;
  --honey: #a87f3f;
  /* channel triplets, so the alpha variants below stay in step with the hex */
  --pine-deep-rgb: 30 46 35;
  --honey-rgb: 168 127 63;
  --open: #3d7a4f;   /* the "open now" green — only ever used by the status chip */
  --honey-text: #7d5a22;   /* darker honey for TEXT: 5.65:1 on paper, 5.13:1 on cream (AA) */
  --honey-soft: #e8d9b8;
  --sage: #9fae98;
  --line: #ddd3c2;

  /* honey at low opacity, for washes and focus halos */
  --honey-wash: rgb(var(--honey-rgb) / 0.09);
  --honey-halo: rgb(var(--honey-rgb) / 0.22);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Albert Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 76rem;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-pad: clamp(3.25rem, 11vw, 9.5rem);
}

/* ============================================================
   2 · RESET & BASE
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* `hidden` must beat any component's own `display`. Without this, every rule
   that sets one — .btn, .wl-stage, .inquiry-form label — silently out-specifies
   the UA's [hidden] rule, and the element stays on screen while the markup and
   the script both believe it is gone. */
[hidden] { display: none !important; }

a { color: inherit; }

/* anchored targets land below the fixed/sticky header */
section[id],
main[id] { scroll-margin-top: 5.5rem; }

/* ============================================================
   3 · UTILITIES
   ============================================================ */

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

/* first tab stop on every page — drops down when focused */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  transform: translate(-50%, -130%);
  background: var(--pine-deep);
  color: var(--paper);
  padding: 0.7rem 1.3rem;
  border-radius: 0 0 3px 3px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.skip-link:focus { transform: translate(-50%, 0); outline-offset: -4px; }

/* top hairline where two same-toned sections meet */
.section--ruled { border-top: 1px solid var(--line); }

/* keyboard focus, everywhere */
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }

/* ============================================================
   4 · TYPE
   ============================================================ */

h1, h2, h3, blockquote p, .wordmark, .footer-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  /* long single words (e.g. "Compassionate" in the doula h1) must not spill
     out of their column on narrow screens; only applies when a word cannot fit */
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.75rem, 6.2vw, 4.9rem);
  line-height: 1.06;
  max-width: 16ch;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.12;
  max-width: 18ch;
}

h3 { font-size: 1.35rem; line-height: 1.3; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--honey-text);
  margin-bottom: 1.6rem;
}

.lede { color: var(--muted); max-width: 46ch; }

/* ============================================================
   5 · HEADER & NAV
   ============================================================ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gutter);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }

.brand-mark {
  width: 38px;
  height: auto;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover .brand-mark { transform: translateY(-2px) rotate(-4deg); }

.wordmark {
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--pine-deep);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.site-nav a {
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.site-nav a:not(.nav-cta) { position: relative; }

/* honey underline slides in on hover; the current page keeps it */
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--honey);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-nav a:not(.nav-cta):hover { color: var(--honey-text); }

.site-nav a:not(.nav-cta):hover::after,
.site-nav a[aria-current]:not(.nav-cta)::after { transform: scaleX(1); }

.site-nav a[aria-current] { color: var(--honey-text); }

.nav-cta {
  border: 1px solid var(--pine);
  border-radius: 2px;
  padding: 0.55rem 1.15rem;
  color: var(--pine);
  transition: background 0.25s ease, color 0.25s ease;
}

.nav-cta:hover { background: var(--pine); color: var(--paper); }

/* --- hamburger --- */

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.45rem;
  cursor: pointer;
  color: var(--pine-deep);
}

.nav-toggle i {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease;
}

.nav-toggle i + i { margin-top: 5px; }

.nav-open .nav-toggle i:first-child { transform: translateY(3.5px) rotate(45deg); }

.nav-open .nav-toggle i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* --- overlay header: transparent over the hero, solid once scrolled --- */

.site-header--overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

.site-header--overlay:not(.is-scrolled) .wordmark,
.site-header--overlay:not(.is-scrolled) .site-nav a {
  color: #fff;
  text-shadow: 0 1px 10px rgb(var(--pine-deep-rgb) / 0.4);
}

.site-header--overlay:not(.is-scrolled) .site-nav a:not(.nav-cta):hover { color: var(--honey-soft); }

.site-header--overlay:not(.is-scrolled) .nav-cta { border-color: rgba(255, 255, 255, 0.75); }

.site-header--overlay:not(.is-scrolled) .nav-cta:hover {
  background: var(--paper);
  color: var(--pine-deep);
}

.site-header--overlay:not(.is-scrolled) .nav-toggle { color: #fff; }

.site-header--overlay.is-scrolled {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}

/* an open menu forces the solid treatment, even over the hero */
.site-header--overlay.nav-open {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-bottom-color: var(--line);
}

.site-header--overlay.nav-open .wordmark,
.site-header--overlay.nav-open .site-nav a { color: var(--ink); text-shadow: none; }

.site-header--overlay.nav-open .nav-toggle { color: var(--pine-deep); }

.site-header--overlay.nav-open .nav-cta { border-color: var(--pine); color: var(--pine); }

/* ============================================================
   6 · BUTTONS & LINKS
   ============================================================ */

.btn {
  display: inline-block;
  background: var(--pine);
  color: var(--paper);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border-radius: 2px;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
  background: var(--pine-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -12px rgb(var(--pine-deep-rgb) / 0.45);
}

.btn:active { transform: translateY(0); box-shadow: none; }

.btn--light { background: var(--paper); color: var(--pine-deep); }

.btn--light:hover { background: var(--cream); }

/* Secondary action — quieter than .btn so a pair of them cannot compete. Used
   for "Back", where the weight belongs entirely to "Continue". */
.btn--ghost {
  background: none;
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: none;
}

.btn--ghost:hover {
  background: none;
  color: var(--pine-deep);
  border-color: var(--pine);
  box-shadow: none;
}

.text-link {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--honey);
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1px;
  transition: color 0.25s ease, text-underline-offset 0.25s ease;
}

.text-link:hover { color: var(--honey-text); text-underline-offset: 0.6em; }

.text-link--light { color: #fff; text-decoration-color: var(--honey-soft); }

.text-link--light:hover { color: var(--honey-soft); }

.actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2.6rem;
}

/* ============================================================
   7 · HEROES
   ============================================================ */

/* --- text hero (about, contact, doula) --- */

.hero {
  padding: clamp(4rem, 9vh, 7rem) var(--gutter) 0;
  max-width: var(--max);
  margin: 0 auto;
}

.hero-text { max-width: 46rem; }

.hero-sub {
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 38ch;
}

.hero-media {
  margin-top: clamp(3rem, 7vh, 5rem);
  height: clamp(22rem, 68vh, 42rem);
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.hero-media img { object-position: 50% 62%; }

/* an image-less hero needs air before the next section starts */
.hero--text + section { margin-top: clamp(3rem, 7vh, 5rem); }

/* --- immersive banner hero (home) --- */

.hero-banner {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 38rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 80% at 20% 88%, rgb(var(--pine-deep-rgb) / 0.72) 0%, rgb(var(--pine-deep-rgb) / 0) 62%),
    linear-gradient(180deg, rgb(var(--pine-deep-rgb) / 0.55) 0%, rgb(var(--pine-deep-rgb) / 0.05) 30%, rgb(var(--pine-deep-rgb) / 0.38) 100%);
}

.hero-banner-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) calc(clamp(2.6rem, 6vh, 4.5rem) + clamp(2.2rem, 5vw, 4rem));
  color: var(--paper);
}

.hero-banner-content h1 {
  color: #fff;
  max-width: 17ch;
  text-shadow: 0 1px 24px rgb(var(--pine-deep-rgb) / 0.35);
}

.hero-banner-content h1 em {
  font-style: italic;
  font-weight: 400;
  color: #fff;
}

.hero-banner-content .hero-sub {
  color: rgba(247, 243, 236, 0.92);
  text-shadow: 0 1px 16px rgb(var(--pine-deep-rgb) / 0.4);
}

/* staggered entrance for the hero stack */
.hero-banner-content .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero-banner-content .reveal:nth-child(2) { transition-delay: 0.15s; }
.hero-banner-content .reveal:nth-child(3) { transition-delay: 0.25s; }
.hero-banner-content .reveal:nth-child(4) { transition-delay: 0.32s; }
.hero-banner-content .reveal:nth-child(5) { transition-delay: 0.4s; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.15rem;
  margin-bottom: 1.7rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgb(var(--pine-deep-rgb) / 0.38);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}

.hero-badge i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 3px rgba(168, 127, 63, 0.3);
}

.hero-tagline {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--honey-text);
}

.hero-tagline + .hero-sub { margin-top: 0.9rem; }

.hero-banner-content .hero-tagline {
  color: var(--honey-soft);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

/* shallow paper arch rising into the hero's bottom edge */
.hero-arch {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -1px;
  height: clamp(2.2rem, 5vw, 4rem);
  background: var(--paper);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
}

/* ============================================================
   8 · SECTION LAYOUT
   ============================================================ */

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}

/* when the section above already supplied the breathing room */
.section-inner--flush-top { padding-top: 0; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.split-media { aspect-ratio: 4 / 5; overflow: hidden; }

.split-text h2 { margin-bottom: 1.4rem; }

/* a section that opens with its own heading, then a list or grid */
.section-inner > h2 { margin-bottom: 1.4rem; }

.section-inner > .program-list,
.section-inner > .pillars,
.section-inner > .why-list { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* photography breathes slowly on hover */
.split-media img,
.why-media img,
.interlude img { transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1); }

.split-media:hover img,
.why-media:hover img,
.interlude:hover img { transform: scale(1.04); }

/* ============================================================
   9 · PHILOSOPHY & PILLARS
   ============================================================ */

.philosophy { border-top: 1px solid var(--line); }

.hero-banner + .philosophy { border-top: 0; }

.pillars {
  margin-top: 2.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
}

.pillar {
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  transition: border-color 0.35s ease;
}

/* close the two columns off at the bottom */
.pillar:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }

.pillar:hover { border-top-color: var(--honey); }

.pillar dt {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--pine-deep);
}

.pillar dd {
  margin-top: 0.25rem;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ============================================================
   10 · INTERLUDE
   ============================================================ */

.interlude {
  position: relative;
  height: clamp(20rem, 60vh, 34rem);
  overflow: hidden;
}

.interlude figcaption {
  position: absolute;
  left: var(--gutter);
  bottom: 1.8rem;
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgb(var(--pine-deep-rgb) / 0.55);
}

/* ============================================================
   11 · PROGRAMS
   ============================================================ */

.programs { background: var(--cream); }

.program-list { list-style: none; margin-top: 1rem; }

.program-row {
  padding: 1.9rem 0;
  border-top: 1px solid var(--line);
}

.program-row:last-child { border-bottom: 1px solid var(--line); }

.program-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.program-ages {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey-text);
  white-space: nowrap;
}

.program-row p {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 44ch;
}

.program-hours {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* editorial rows: honey rule + gentle indent on hover.
   the indent is offset by a negative right margin so text never re-wraps */
.program-row,
.why-list li {
  border-left: 2px solid transparent;
  transition: border-color 0.3s ease, padding-left 0.35s ease, margin-right 0.35s ease;
}

.program-row:hover,
.why-list li:hover {
  border-left-color: var(--honey);
  padding-left: 0.6rem;
  margin-right: -0.6rem;
}

/* ---------- the daily rhythm ---------- */

.rhythm {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.rhythm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
}

.rhythm-heading { font-size: 1.7rem; }

/* shown only while the centre is genuinely open */
.rhythm-now {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pine);
  white-space: nowrap;
}

.rhythm-now i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 3px var(--honey-halo);
}

.rhythm-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.rhythm-table caption {
  caption-side: top;
  margin: 0.55rem 0 1.9rem;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: left;
}

.rhythm-table thead th {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--pine-deep);
  padding: 0 0 0.9rem 1.6rem;
  border-bottom: 1px solid var(--line);
}

.rhythm-table thead th em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--honey-text);
  margin-left: 0.55rem;
  vertical-align: 0.12em;
}

/* the day line: one hairline spine down the time column, nine nodes on it */
.rhythm-table thead th:first-child,
.rhythm-table tbody th {
  width: 5.6rem;
  padding-left: 0;
  border-right: 1px solid var(--line);
}

.rhythm-table tbody th {
  position: relative;
  padding: 0.72rem 1.6rem 0.72rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--honey-text);
  vertical-align: top;
  white-space: nowrap;
  transition: color 0.4s ease;
}

.rhythm-table tbody th::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.rhythm-table td {
  padding: 0.72rem 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.4s ease;
}

/* the moment in progress — lit in both rooms at once */
.rhythm-table tbody tr { transition: background 0.5s ease; }

.rhythm-table tbody tr.is-now {
  background: linear-gradient(90deg, var(--honey-wash), transparent 78%);
}

.rhythm-table tbody tr.is-now th { color: var(--pine-deep); }

.rhythm-table tbody tr.is-now td { color: var(--ink); }

.rhythm-table tbody tr.is-now th::after {
  background: var(--honey);
  border-color: var(--honey);
  box-shadow: 0 0 0 3px var(--honey-halo);
}

/* ============================================================
   12 · WHY
   ============================================================ */

.why .section-inner > h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.why-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.why-media { aspect-ratio: 4 / 5; overflow: hidden; }

.why-list { list-style: none; }

.why-list li {
  padding: 1.7rem 0;
  border-top: 1px solid var(--line);
}

.why-list li:last-child { border-bottom: 1px solid var(--line); }

.why-list h3 { color: var(--pine-deep); }

.why-list p {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ============================================================
   13 · VOICES
   ============================================================ */

.voices { background: var(--pine-deep); color: var(--paper); }

.voices .eyebrow { color: var(--sage); }

.voices-inner { text-align: center; }

blockquote { max-width: 44rem; margin: 0 auto; }

blockquote p {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.4;
  font-style: italic;
  letter-spacing: 0;
}

blockquote cite {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}

.quotes { display: grid; }

/* stacked in one cell; hidden ones stay out of the reading order too */
.quotes .quote {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

.quotes .quote.is-active { opacity: 1; visibility: visible; }

.quote-nav {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 2.6rem;
}

.quote-nav button {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0.7rem 0.2rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.quote-nav button:hover { opacity: 0.9; }

.quote-nav button[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--sage); }

/* ============================================================
   14 · VISIT
   ============================================================ */

.visit-list {
  list-style: none;
  margin-top: 2.2rem;
}

.visit-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}

.visit-list li:last-child { border-bottom: 1px solid var(--line); }

/* direct child only: the status chip is the first *element* child of the value
   span, so without > this rule outranked .status.is-open and stole its colour */
.visit-list li > span:first-child {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--honey-text);
  padding-top: 0.2rem;
}

/* value column: times on one line, status chip right-aligned beneath */
.visit-list li > span:last-child {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
  text-align: right;
}

.visit-list a { text-decoration: none; }

.visit-list a:hover { color: var(--honey-text); }

.visit-list + .why-list { margin-top: clamp(2rem, 4vw, 2.4rem); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.24rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.status em { font-style: normal; }

.status.is-open {
  border-color: color-mix(in srgb, var(--open) 35%, transparent);
  background: color-mix(in srgb, var(--open) 7%, var(--paper));
  color: #2f5f3e;
}

.status.is-open i { background: var(--open); }

.map-frame {
  aspect-ratio: 4 / 3.2;
  border: 1px solid var(--line);
  overflow: hidden;
}

.map-frame--wide { aspect-ratio: 16 / 7; }

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.25) sepia(0.1) saturate(0.9);
  transition: filter 0.6s ease;
}

.map-frame:hover iframe { filter: none; }

/* ============================================================
   15 · CLOSING BANDS
   ============================================================ */

.closing {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(5rem, 12vw, 9rem) var(--gutter);
}

.closing-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(247, 243, 236, 0.97) 0%, rgba(247, 243, 236, 0.7) 100%);
}

.closing-inner { position: relative; z-index: 1; max-width: 38rem; }

.closing-inner h2 { margin: 0 auto 1rem; }

.closing-inner p { color: var(--muted); margin-bottom: 2.4rem; }

.closing--dark { color: var(--paper); }

.closing--dark::after {
  background: linear-gradient(180deg, rgb(var(--pine-deep-rgb) / 0.78), rgb(var(--pine-deep-rgb) / 0.88));
}

.closing--dark h2 { color: var(--paper); }

.closing--dark .eyebrow { color: var(--sage); }

.closing--dark .closing-inner p { color: var(--cream); }

/* ============================================================
   16 · FOOTER
   ============================================================ */

.site-footer {
  background: var(--pine-deep);
  color: var(--paper);
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  border-top: 1px solid rgba(247, 243, 236, 0.12);
}

.footer-mark {
  width: 96px;
  height: auto;
  margin: 0 auto 1.7rem;
  animation: butterfly-drift 7s ease-in-out infinite;
}

@keyframes butterfly-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.footer-tagline {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-style: italic;
  color: var(--cream);
}

.footer-social {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 1.6rem;
}

.footer-social a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  text-decoration: none;
}

.footer-social a:hover { color: var(--cream); }

.footer-small {
  margin-top: 1.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--sage);
}

/* One line, on the page whose whole point is that it is one screen. The
   butterfly, the tagline and the social links are marketing furniture; on a
   form they would cost more height than they earn. */
.site-footer--slim { padding: 1.15rem var(--gutter); }

.site-footer--slim .footer-small { margin-top: 0; }

.footer-social + .footer-small { margin-top: 1.4rem; }

/* ============================================================
   17 · SUBPAGE PIECES
   ============================================================ */

/* --- about --- */

.portrait-media { aspect-ratio: 1 / 1; }

.landscape-media { aspect-ratio: 4 / 3; }

.chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.chip-list li {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pine);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  background: var(--paper);
}

/* --- about + doula: pull quotes and moment grids --- */

.inline-quote { margin: 1.8rem 0; max-width: none; text-align: left; }

.inline-quote p {
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--pine-deep);
}

.moments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* height:auto overrides the global img rule — here the aspect-ratio lives on the
   image itself, so height:100% would stretch it over the whole grid row and push
   the figcaption outside the figure */
.moments-grid img {
  aspect-ratio: 4 / 5;
  height: auto;
  transition: filter 0.5s ease;
}

.moments-grid figure:hover img { filter: brightness(1.05) saturate(1.05); }

.moments-grid figcaption {
  margin-top: 0.85rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s ease;
}

.moments-grid figure:hover figcaption { color: var(--honey-text); }

/* --- contact form --- */

.split--form { align-items: start; }

.inquiry-form {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}

.form-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--pine-deep);
  margin-bottom: 1.6rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.2rem;
  margin-bottom: 1.8rem;
}

.form-wide { grid-column: 1 / -1; }

:is(.inquiry-form, .wl-form) label { display: block; }

:is(.inquiry-form, .wl-form) label span {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

:is(.inquiry-form, .wl-form) input,
:is(.inquiry-form, .wl-form) select,
:is(.inquiry-form, .wl-form) textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
}

:is(.inquiry-form, .wl-form) textarea { resize: vertical; }

:is(.inquiry-form, .wl-form) input:focus,
:is(.inquiry-form, .wl-form) select:focus,
:is(.inquiry-form, .wl-form) textarea:focus {
  outline: 2px solid var(--honey);
  outline-offset: 1px;
}

.inquiry-form .btn { border: 0; cursor: pointer; width: 100%; }

.form-note {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.form-note a { text-decoration-color: var(--honey); text-underline-offset: 0.25em; }

/* --- long-form prose (privacy policy) --- */

/* Measure over decoration: a policy is read, not scanned, so the column is
   narrower than the site's other text and the rhythm is looser. */
/* `.prose` IS the .section-inner, so its own width and centring must be left
   alone — constraining it here pulled the whole section off the page's gutter.
   The measure is set on the children instead, which keeps the text starting on
   the same left edge as the hero above it. */
.prose {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.prose > * { max-width: 44rem; }

.prose h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  max-width: 26ch;
  margin: clamp(2.2rem, 5vw, 3rem) 0 0.9rem;
}

.prose h2:first-of-type { margin-top: 0; }

.prose p { color: var(--muted); margin-bottom: 1.1rem; }

.prose p strong { color: var(--ink); font-weight: 500; }

.prose a { text-decoration-color: var(--honey); text-underline-offset: 0.25em; }

.prose-meta {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey-text);
  margin-bottom: clamp(2rem, 5vw, 2.8rem);
}

.prose-list {
  list-style: none;
  margin: 0 0 1.1rem;
  color: var(--muted);
}

.prose-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
}

.prose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 1px;
  background: var(--honey);
}

.prose-address { font-style: normal; line-height: 1.9; }

/* the footer's privacy link — quieter than the social row above it */
.footer-link {
  color: var(--sage);
  text-decoration: underline;
  text-decoration-color: rgb(159 174 152 / 0.4);
  text-underline-offset: 0.25em;
  transition: color 0.25s ease;
}

.footer-link:hover { color: var(--cream); }

/* --- waitlist: three stages, one screen each --- */

/* A parent should never have to scroll to find out what to do. The page is a
   full-height column — header, one stage, one-line footer — and the stage takes
   whatever is left, so it is exactly one screen without this file needing to
   know how tall the header or the footer happens to be.
   `flex: 1` with the default `min-height: auto` also means a stage that
   genuinely needs more room still grows and scrolls, rather than being cut off. */
.page--stage {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page--stage main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wl-stage {
  display: flex;
  flex: 1;
  align-items: flex-start;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(1.8rem, 5vh, 3.4rem) var(--gutter) clamp(2.4rem, 6vh, 4rem);
}

/* The invitation and the confirmation are compositions, so they centre. The
   form is top-aligned on purpose — centring would make the whole panel jump
   every time a step changed height. */
.wl-stage--centred { align-items: center; }

/* ── the invitation ── */

.wl-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}

.wl-intro-text { max-width: 34rem; }

.wl-intro h1 { margin-top: 1.4rem; max-width: 13ch; }

.wl-lede {
  margin-top: 1.2rem;
  max-width: 40ch;
  font-size: 1.1rem;
  color: var(--muted);
}

/* The one live thing on the page, in the same vocabulary as the "open now"
   chip in the visit section so a returning visitor already knows how to read
   it. The state comes from the ERP; the markup's default is the inviting one,
   because a family should not be turned away by an outage. */
.wl-availability {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.wl-availability i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--honey);
}

.wl-availability em { font-style: normal; }

/* A place that can be filled now is the one state worth raising your voice for. */
.wl-availability.is-spots {
  border-color: color-mix(in srgb, var(--open) 38%, transparent);
  background: color-mix(in srgb, var(--open) 8%, var(--paper));
  color: #2f5f3e;
}

.wl-availability.is-spots i {
  background: var(--open);
  animation: wl-pulse 2.6s ease-out infinite;
}

@keyframes wl-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--open) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--open) 0%, transparent); }
}

.wl-availability.is-paused i { background: var(--muted); }

.wl-availability-note {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--honey-text);
  max-width: 38ch;
}

/* Three worries, answered: what it costs, how much work it is, and whether
   the queue is fair. Ruled rather than bulleted — the list is a table of
   facts, not a sequence. */
.wl-facts {
  list-style: none;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  border-top: 1px solid var(--line);
}

.wl-facts li {
  display: grid;
  grid-template-columns: 6.25rem 1fr;
  gap: 0 1.2rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.wl-facts span {
  padding-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--honey-text);
}

.wl-facts p { font-size: 0.95rem; line-height: 1.55; color: var(--muted); }

.wl-intro-actions { margin-top: clamp(1.7rem, 4vh, 2.3rem); }

.wl-alt { margin-top: 0.95rem; font-size: 0.85rem; color: var(--muted); }

.wl-alt a { text-decoration-color: var(--honey); text-underline-offset: 0.25em; }

/* Arch-topped, echoing the paper arch that closes the home hero. Driven from
   its height so it can never grow taller than the screen it has to fit in. */
.wl-intro-media {
  height: min(58svh, 32rem);
  aspect-ratio: 4 / 5;
  margin-left: auto;
  overflow: hidden;
  border-radius: 999px 999px 3px 3px;
}

.wl-intro-media img { transition: transform 1.2s ease; }

.wl-intro-media:hover img { transform: scale(1.03); }

/* ── the application panel ── */

.wl-panel {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.wl-panel--done { max-width: 40rem; }

.wl-panel--done > p { color: var(--muted); max-width: 46ch; }

/* ── the step rail ── */

.wl-steps { margin-bottom: clamp(1.5rem, 4vw, 2rem); }

.wl-steps ol {
  display: flex;
  gap: clamp(0.8rem, 4vw, 2.2rem);
  list-style: none;
  margin-bottom: 0.8rem;
}

.wl-steps button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 1.7rem;
  padding: 0.1rem 0.15rem;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s ease;
}

.wl-steps button[disabled] { opacity: 0.4; cursor: default; }

.wl-steps button:not([disabled]):hover { color: var(--honey-text); }

.wl-steps button[aria-current] { color: var(--pine-deep); }

.wl-step-n {
  min-width: 1.1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: normal;
  color: var(--honey-text);
}

/* One continuous hairline that fills as steps are completed — the same honey
   underline the nav uses, stretched across the whole application. */
.wl-track { position: relative; height: 1px; background: var(--line); }

.wl-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 33.333%;
  background: var(--honey);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── a step ── */

.wl-step { border: 0; margin: 0; padding: 0; }

/* The heading of whichever view is on screen, so the document always has an h1
   — the invitation's, a step's, or the confirmation's. `max-width` has to be
   reset because the global h1 rule caps it at 16ch for display type. */
.wl-step-title,
.wl-done-title {
  padding: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.25;
  color: var(--pine-deep);
}

.wl-step-title { font-size: clamp(1.35rem, 3.4vw, 1.7rem); }

.wl-done-title {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  max-width: 26ch;
  margin-bottom: 1rem;
}

.wl-step-help {
  margin: 0.5rem 0 1.4rem;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Removing `hidden` re-renders the step, which restarts the animation — so the
   transition between steps needs no JavaScript at all. */
html.js .wl-step { animation: wl-step-in 0.42s ease both; }

@keyframes wl-step-in {
  from { opacity: 0; transform: translateY(10px); }
}

.wl-nav {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: clamp(1.5rem, 4vw, 2.1rem);
}

.wl-nav .btn {
  flex: 1;
  width: auto;
  border: 0;
  cursor: pointer;
  text-align: center;
}

.wl-nav .btn--ghost { flex: none; border: 1px solid var(--line); }

/* ── the review step ── */

.wl-review { display: grid; gap: 0.7rem; margin-bottom: 1.5rem; }

.wl-review-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  background: var(--paper);
  padding: 0.9rem 1.1rem;
}

.wl-review-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--pine-deep);
  overflow-wrap: anywhere;
}

.wl-review-meta {
  grid-column: 1;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Both the row AND the column have to be explicit. An item with a definite row
   and an auto column is placed before the fully-auto items, so with only
   `grid-row` set, "Edit" claimed column one and pushed the name across. */
.wl-review-edit,
.child-summary-edit {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--honey-text);
  text-decoration: underline;
  text-decoration-color: var(--honey-halo);
  text-underline-offset: 0.25em;
}

.wl-review-edit {
  font-family: var(--font-body);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.wl-review-edit:hover { text-decoration-color: var(--honey); }

/* --- waitlist form --- */

/* required marker: decorative, the real signal is the required attribute */
:is(.inquiry-form, .wl-form) label span i {
  font-style: normal;
  color: var(--honey-text);
  margin-left: 0.15em;
}

/* Bot trap. Positioned off-screen rather than display:none, which some bots
   check for, and never given an autofill-friendly name. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- one card per child --- */

.child-list { list-style: none; }

.child-card { margin-bottom: 0.7rem; }

/* The card is the unit a parent reasons about: everything inside it belongs to
   one child, and the pine edge is what makes "two children" legible at a glance
   without numbering anything twice. */
.child-body {
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  background: var(--paper);
  padding: clamp(1.1rem, 3vw, 1.5rem);
}

/* Exactly one child is open at a time; the rest collapse to this line. It is
   what keeps a family of three no taller than a family of one — and it is the
   same line the review step shows, so the summary is never a second opinion. */
.child-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pine);
  background: var(--paper);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.child-summary:hover { border-color: var(--honey); }

.child-summary-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--pine-deep);
  overflow-wrap: anywhere;
}

.child-summary-meta {
  grid-column: 1;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

/* An unfinished child must look unfinished, or it is possible to reach the
   review step believing everything is in. */
.child-summary.is-incomplete { border-left-color: #a3402f; }

.child-summary.is-incomplete .child-summary-meta { color: #8a2f20; }

.child-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

/* Becomes the child's name as it is typed, so the card labels itself rather
   than repeating a number the parent has to map onto a person. */
/* An h2, because the step's heading is the h1 — a card title is a level below
   it, and skipping to h3 broke the document's heading order. */
.child-card-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  max-width: none;
  font-weight: 400;
  color: var(--pine-deep);
  overflow-wrap: anywhere;
}

.child-remove,
.note-toggle,
.add-child {
  font-family: var(--font-body);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.child-remove {
  flex: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.25em;
  transition: color 0.2s ease;
}

.child-remove:hover { color: #8a2f20; text-decoration-color: currentColor; }

.add-child {
  display: block;
  width: 100%;
  border: 1px dashed var(--line);
  background: var(--paper);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--honey-text);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.add-child:hover {
  border-color: var(--honey);
  background: var(--honey-wash);
}

.add-child span { font-size: 1.05em; margin-right: 0.2em; }

/* Reads the birthday back as a program rather than asking for one. Set in the
   display italic because it is the form answering, not another question. */
.program-echo {
  margin: -0.5rem 0 1.3rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--honey-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--honey-text);
}

.note-toggle {
  font-size: 0.85rem;
  color: var(--honey-text);
  text-decoration: underline;
  text-decoration-color: var(--honey-halo);
  text-underline-offset: 0.25em;
}

.note-toggle:hover { text-decoration-color: var(--honey); }

.child-note { margin-top: 1rem; }

/* --- schedule: three cards rather than a dropdown --- */

/* Asked as the days needed, which is the thing a parent knows, instead of a
   tier name they would have to translate. Full-time answers the follow-up
   question by itself, so the day picker below stays hidden for it. */
.tier-picker,
.day-picker {
  border: 0;
  margin: 0 0 1.4rem;
  padding: 0;
}

.tier-picker legend,
.day-picker legend {
  padding: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.tier-picker legend i {
  font-style: normal;
  color: var(--honey-text);
  margin-left: 0.15em;
}

.tier-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.tier-option {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  padding: 0.8rem 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* the input covers the card, so the whole card is the target on a phone */
.tier-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

:is(.inquiry-form, .wl-form) .tier-option span { display: block; margin: 0; }

:is(.inquiry-form, .wl-form) .tier-name {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

:is(.inquiry-form, .wl-form) .tier-detail {
  margin-top: 0.15rem;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
}

.tier-option:has(:checked) {
  border-color: var(--pine);
  background: var(--pine);
}

:is(.inquiry-form, .wl-form) .tier-option:has(:checked) .tier-name { color: var(--paper); }

:is(.inquiry-form, .wl-form) .tier-option:has(:checked) .tier-detail {
  color: rgb(255 255 255 / 0.72);
}

.tier-option:has(:focus-visible) { outline: 2px solid var(--honey); outline-offset: 2px; }

.field-help {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

.day-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The `label span` rule above is the field-label treatment: uppercase, tracked,
   block. It is right for "CHILD'S FULL NAME" and wrong for anything that is a
   sentence — a consent statement set in all caps is materially harder to read,
   which is the last thing a consent statement should be. */
:is(.inquiry-form, .wl-form) .check-row span,
:is(.inquiry-form, .wl-form) .day-options label span {
  display: inline;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  margin-bottom: 0;
  color: inherit;
}

:is(.inquiry-form, .wl-form) .day-options label span {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

:is(.inquiry-form, .wl-form) .check-row span { font-size: 0.92rem; line-height: 1.5; }

/* the checkbox itself is hidden; the label is the target, so it stays a
   comfortable tap size on a phone */
.day-options label {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.day-options input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.day-options label:has(:checked) {
  border-color: var(--pine);
  background: var(--pine);
  color: var(--paper);
}

.day-options label:has(:focus-visible) { outline: 2px solid var(--honey); outline-offset: 2px; }

.day-options label:has(:disabled) { opacity: 0.55; cursor: not-allowed; }

.day-options label:has(:disabled) input { cursor: not-allowed; }

/* a checkbox with a sentence beside it, not a form-grid cell */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}

.check-row input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18rem;
  accent-color: var(--pine);
}

.check-row--consent { color: var(--ink); margin-bottom: 1.7rem; }

.check-row a { text-decoration-color: var(--honey); text-underline-offset: 0.2em; }

.form-status {
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.9rem;
  background: var(--paper);
  color: var(--ink);
}

.form-status.is-error {
  border-color: color-mix(in srgb, #a3402f 40%, transparent);
  background: color-mix(in srgb, #a3402f 6%, var(--paper));
  color: #8a2f20;
}

.form-status.is-busy { color: var(--muted); }

/* One line per child, because each child got their own application and their
   own reference — showing a single number would hide one of them. */
.done-list {
  list-style: none;
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.done-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.done-list .done-child {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--pine-deep);
  overflow-wrap: anywhere;
}

.done-list .done-reference {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--honey-text);
}

/* ============================================================
   18 · REVEAL ON SCROLL
   ============================================================ */

/* scoped to html.js so content stays visible if the script never loads */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   19 · RESPONSIVE
   ============================================================ */

/* The waitlist invitation drops its photograph rather than stacking it. The
   whole promise of that screen is that it needs no scrolling, and an image
   above the text is the one thing that would break it on a phone. */
@media (max-width: 54rem) {
  .wl-intro { grid-template-columns: 1fr; }

  .wl-intro-media { display: none; }

  .wl-intro-text { max-width: none; }
}

/* Three cards side by side stop being readable once each is narrower than its
   own words: at 390px "Five days" and "Mon to Fri" both wrapped. So below this
   they become three full-width rows — but laid out along the row rather than
   down it, which reads properly AND costs a third less height than stacking
   the label above the detail would. */
@media (max-width: 30rem) {
  .tier-options { grid-template-columns: 1fr; }

  /* Selected through the parent because `.tier-option` is a <label>, and
     `:is(.inquiry-form, .wl-form) label { display: block }` is a class plus an
     element — more specific than a bare class, which a media query does nothing
     to change. Without the extra class this silently stayed a block. */
  .tier-options .tier-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
  }

  :is(.inquiry-form, .wl-form) .tier-detail { margin-top: 0; }

  .wl-facts li { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.6rem 0; }

  .wl-facts span { padding-top: 0; }

  /* On a phone the invitation has a screen and no more to work with, so the
     stage keeps less air around itself than it does on a desktop. */
  .wl-stage { padding-top: 1.5rem; padding-bottom: 1.75rem; }

  .wl-intro h1 { margin-top: 1rem; }

  .wl-panel { padding: 1.15rem; }

  .wl-lede { margin-top: 0.9rem; font-size: 1.05rem; }
}

/* Short screens — an older phone, or any phone held sideways — get a tighter
   invitation rather than a scrollbar. The display size is the only thing here
   generous enough to give any back. */
@media (max-height: 48rem) {
  .wl-intro h1 { font-size: clamp(2.1rem, 7.5vw, 2.7rem); margin-top: 0.9rem; }

  .wl-lede { margin-top: 0.75rem; font-size: 1rem; }

  .wl-facts { margin-top: 1.1rem; }

  .wl-facts li { padding: 0.5rem 0; }

  .wl-intro-actions { margin-top: 1.2rem; }

  .wl-alt { margin-top: 0.7rem; }
}

/* At the narrowest supported width three labelled steps cannot fit on one line.
   Every step keeps its number, so the rail still says where you are and stays
   clickable; only the current step spells itself out. */
@media (max-width: 23rem) {
  .wl-steps button:not([aria-current]) .wl-step-name { display: none; }
}

@media (max-width: 54rem) {
  /* --- layout collapses to one column --- */
  .split,
  .why-grid,
  .form-grid { grid-template-columns: 1fr; }

  .split--reverse .split-media { order: -1; }

  /* order matters: the portrait override below must win */
  .split-media { aspect-ratio: 3 / 2; }

  .portrait-media { aspect-ratio: 1 / 1; }

  .why-media { aspect-ratio: 3 / 2; }

  /* pillars stay two-up: a one-word term over a single line of description
     reads fine at half width, and stacking them cost a whole screen */
  .pillars { column-gap: 1.2rem; }

  /* moments stay two-up as square crops, with the odd third image closing
     the row as a deliberate wide shot rather than a lone half-width portrait */
  .moments-grid { grid-template-columns: 1fr 1fr; }

  .moments-grid img { aspect-ratio: 1 / 1; }

  .moments-grid figure:last-child { grid-column: 1 / -1; }

  .moments-grid figure:last-child img { aspect-ratio: 16 / 10; }

  .hero-media { height: clamp(16rem, 52vh, 26rem); }

  .actions { flex-wrap: wrap; gap: 1.2rem 1.8rem; }

  /* --- nav collapses behind the hamburger --- */
  .nav-toggle { display: block; }

  .site-nav a:not(.nav-cta) { display: none; }

  .site-header.nav-open .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.4rem var(--gutter) 1.5rem;
  }

  .site-header.nav-open .site-nav a:not(.nav-cta) {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }

  .site-header.nav-open .nav-cta { margin-top: 1.1rem; text-align: center; }

  .hero-badge {
    font-size: 0.62rem;
    letter-spacing: 0.11em;
    padding: 0.5rem 0.95rem;
    border-radius: 1.1rem;
    align-items: flex-start;
  }

  .hero-badge i { margin-top: 0.4em; }

  /* the embedded map must not trap scrolling — "Get directions" covers navigation */
  .map-frame iframe { pointer-events: none; }

  .status { margin-top: 0.1rem; }
}

/* Very narrow viewports — also what a 1280px screen looks like at 400% zoom.
   Rows that pair a label with a long value have to stack or they get clipped. */
@media (max-width: 30rem) {
  h1 { font-size: clamp(2.25rem, 11vw, 2.75rem); }

  .visit-list li { display: grid; gap: 0.3rem; }

  .visit-list li > span:last-child { justify-items: start; text-align: left; }

  .program-row-head { flex-wrap: wrap; gap: 0.35rem 1rem; }

  .program-ages { white-space: normal; }
}

/* The rhythm table holds its two columns down to phone width — it only
   stacks when three columns genuinely stop fitting. */
@media (max-width: 48rem) {
  .rhythm-table caption { margin-bottom: 1.5rem; }

  .rhythm-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .rhythm-table tbody,
  .rhythm-table tbody tr,
  .rhythm-table tbody th,
  .rhythm-table td { display: block; }

  /* the spine keeps running down the left edge */
  .rhythm-table tbody { border-left: 1px solid var(--line); }

  .rhythm-table tbody tr {
    padding: 0.7rem 0 0.75rem 1.2rem;
    border-bottom: 1px solid var(--line);
  }

  .rhythm-table tbody th {
    width: auto;
    padding: 0 0 0.35rem;
    border: 0;
  }

  .rhythm-table tbody th::after { right: auto; left: -1.45rem; top: 0.45rem; }

  .rhythm-table td {
    position: relative;
    padding: 0.1rem 0 0 5.2rem;
    border: 0;
  }

  /* the column heading is gone, so each line names its own room */
  .rhythm-table td::before {
    content: attr(data-room);
    position: absolute;
    left: 0;
    top: 0.3rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .rhythm-table tbody tr.is-now {
    background: linear-gradient(90deg, var(--honey-wash), transparent 94%);
  }
}

/* ============================================================
   20 · REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js .reveal { opacity: 1; transform: none; transition: none; }

  .footer-mark { animation: none; }

  .btn, .brand-mark, .text-link, .skip-link,
  .split-media img, .why-media img, .interlude img,
  .program-row, .why-list li,
  .rhythm-table tbody tr, .rhythm-table tbody th,
  .rhythm-table tbody th::after, .rhythm-table td { transition: none; }

  .btn:hover, .brand:hover .brand-mark,
  .split-media:hover img, .why-media:hover img, .interlude:hover img { transform: none; }

  /* The waitlist relies on motion in three places — the pulsing availability
     dot, the step entrance, and the progress fill. None of them carry
     information the static state does not. */
  .wl-availability.is-spots i { animation: none; }

  html.js .wl-step { animation: none; }

  .wl-track i, .child-summary, .wl-intro-media img { transition: none; }

  .wl-intro-media:hover img { transform: none; }
}