/* ==========================================================================
   Heritage Montessori Academy of Murphy, GARDEN design system
   Direction 2 (Garden), locked 2026-06-24. Built to the Reem's/SecureNet
   premium bar. Source of truth: brand/guidelines/2-garden/board.html +
   design/heroes/hero-2.html + design/brand_palette.json.

   preemit: P5 H5 E5 S5 R5 V4

   --------------------------------------------------------------------------
   COMPONENT VOCABULARY  (every page assembles from these, keep consistent)
   --------------------------------------------------------------------------
   LAYOUT
     .container            centered max-width gutter wrapper
     .section              vertical section rhythm
     .section--cream       cream/ivory ground (default reading ground)
     .section--sage        soft mint/sage ground
     .section--forest      deep-forest ground (on-dark, uses Color-Negative logo)
     .eyebrow              gold tracked label (leaf optional)
     .h-display            Fraunces display heading helper
     .lead                 intro paragraph under a heading
     .grid-2 / .grid-3     responsive content grids

   HEADER / NAV (sticky, shrinks via .is-scrolled)
     .site-nav  .site-nav__inner  .site-nav__logo
     .site-nav__links            desktop link row
     .site-nav__phone            tap-to-call (tel:)
     .nav-toggle                 mobile hamburger button
     .nav-drawer                 mobile slide-down menu (.is-open)
     .nav-dd  .nav-dd__top  .nav-dd__caret  .nav-dd__menu   Programs dropdown
     .nav-drawer__sub            indented mobile program children

   BUTTONS
     .btn  .btn--primary  .btn--ghost  .btn--book (primary book-a-tour pill)

   ARCH PHOTO FRAME (Montessori doorway)
     .arch  .arch--gold (offset gold keyline)  .arch__ring  .arch__cap

   BOTANICAL (literal leaves, never abstract blobs)
     .leaf       inline leaf glyph helper (color via currentColor)
     .sprig      vertical leaf sprig (sways)
     .leaf-rule  centered leaf section divider

   CARDS / TILES
     .program-tile (arch-topped)  .feature  .testimonial  .theme-card

   PAGE COMPONENTS (added for About / Montessori / Programs detail / Contact /
   Summer Camp pages, all on-brand, reuse tokens)
     .map-embed                   responsive 16:9 Google Maps wrapper
     .contact-grid  .contact-card location / hours / contact-info blocks
     .class-details               key/value card (Age group / Classroom / etc.)
     .prog-detail-hero  .prog-nav program detail hero + prev/next links
     .camp-highlights  .camp-highlight  summer-camp highlight grid + card
     .info-band                   full-width prose band (OUR STAFF / INFO FOR PARENTS)

   TOUR FORM (book-a-tour page + home section)
     .tour-form  .tour-form__head  .fields  .field  .field.full
     .form-note  .form-success

   TRUST + CTA
     .trust-line                  inline gold-dot trust facts
     .mobile-cta                  fixed bottom Call / Book bar (<=720px)

   FOOTER
     .site-footer  .site-footer__col  .site-footer__credit

   MOTION HOOKS  (JS reveals; reduced-motion shows everything)
     [data-reveal]  .is-revealed  [data-arch-grow]  [data-sway]
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* core brand (logo is source of truth, never recolor) */
  --green: #005c4b;          /* heritage green */
  --forest: #003a30;         /* deep forest */
  --forest-deep: #04241d;    /* deepest forest panel */
  --gold: #b89a47;           /* warm gold (decorative marks/keylines only) */
  --deep-gold: #7a6427;      /* gold for TEXT: darkened to meet WCAG AA on cream/white */

  /* support */
  --sage: #9db5a8;
  --mint: #dbe9e0;
  --bright-green: #1f7a63;

  /* neutrals */
  --ivory: #f7f4ec;
  --cream: #f3efe3;
  --warm-white: #fffdf8;
  --white: #ffffff;
  --ink: #232826;
  --soft-gray: #8a8f8b;

  /* derived reading colors */
  --muted: #45504b;          /* body on light */
  --muted-deep: #3f5249;
  --muted-mint: #5a7066;     /* body on mint */
  --label: #57625c;
  --placeholder: #9aa39d;
  --on-forest: #c7d6cd;      /* body on deep forest */

  --forest-glass: rgba(0, 58, 48, 0.82);
  --hairline: rgba(0, 92, 75, 0.12);
  --hairline-strong: rgba(0, 92, 75, 0.20);

  /* type */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito Sans", system-ui, -apple-system, sans-serif;

  /* fluid type scale (clamp: min @ 360px, max @ 1200px) */
  --fs-eyebrow: 0.74rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.4vw, 1.18rem);
  --fs-h3: clamp(1.32rem, 1.2rem + 0.6vw, 1.62rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.9vw, 2.6rem);
  --fs-h1: clamp(2.4rem, 1.7rem + 3.2vw, 3.7rem);
  --fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 4.4rem);

  /* rhythm + shape: generous, consistent breathing room */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1200px;
  --section-y: clamp(76px, 10vw, 132px);   /* vertical section padding */
  --space-block: clamp(28px, 4vw, 48px);   /* gap between stacked blocks */
  --space-cta: clamp(28px, 3.5vw, 44px);   /* heading/subcopy -> its CTA(s) */
  --space-actions: clamp(14px, 1.6vw, 22px); /* between buttons in an action row */
  --r-card: 22px;
  --r-input: 12px;

  /* motion */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-micro: 150ms;
  --t-ui: 300ms;

  /* shadows */
  --shadow-btn: 0 10px 22px -14px rgba(0, 58, 48, 0.7);
  --shadow-card: 0 26px 48px -34px rgba(0, 58, 48, 0.45);
  --shadow-arch: 0 40px 70px -38px rgba(0, 58, 48, 0.5);
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 12% 0%, var(--mint) 0%, rgba(219, 233, 224, 0) 46%),
    var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--forest);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- LAYOUT ---------- */
.container {
  width: min(var(--maxw), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }
.section--cream { background: var(--ivory); }
.section--sage { background: var(--mint); }
.section--forest { background: var(--forest); color: var(--on-forest); }
.section--forest h1, .section--forest h2, .section--forest h3 { color: var(--warm-white); }

/* Eyebrow is an OPTIONAL accent: keep it light and use it sparingly, not on
   every block. Toned-down weight + tracking so it reads as a quiet label. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep-gold);
  margin: 0 0 16px;
}
/* The decorative leaf inside an eyebrow is opt-in: hidden by default so pages
   can add it on a single hero accent, not repeat it on every section. Restore
   on any eyebrow that explicitly wants the mark via .eyebrow--leaf. */
.eyebrow .leaf { display: none; }
.eyebrow--leaf .leaf { display: inline-block; width: 18px; height: 18px; flex: none; color: var(--gold); }

/* Hero / inline tap-to-call: same look as the nav phone link but ALWAYS visible
   (the nav .site-nav__phone is hidden below the desktop breakpoint, so hero CTAs
   must NOT reuse that class or the phone disappears on mobile). */
.hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.hero-phone svg { width: 18px; height: 18px; flex: none; }
.hero-phone:hover { color: var(--forest); }
.section--forest .eyebrow { color: var(--gold); opacity: 1; }

.h-display {
  font-size: var(--fs-h1);
  line-height: 1.04;
}
.h-display .grow,
.h-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--green);
}
.section--forest .h-display em { color: var(--sage); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
  margin-top: 16px;
}
.section--forest .lead { color: var(--on-forest); }
.section--sage .lead { color: var(--muted-mint); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 38px); }

/* ---------- SPACING / RHYTHM ----------
   Breathing room so CTAs and text never read as bunched. The lead sets the
   gap to the CTA row; the action row spaces its own buttons; secondary grids
   (cards, testimonials, themes) sit below their intro copy with real air. */

/* gap from a heading/subcopy down to its call(s)-to-action */
.lead + .hero-actions,
.lead + .actions,
.h-display + .hero-actions,
.h-display + .actions { margin-top: var(--space-cta); }

/* the hero / generic action row: button + tap-to-call + room to breathe */
.hero-actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-actions);
}

/* trust line sits a clear step below the actions, never crowding them */
.hero-actions + .trust-line,
.actions + .trust-line { margin-top: var(--space-block); }

/* secondary grids get clear separation from the intro copy above them */
.lead + .grid-3,
.lead + .grid-2,
.h-display + .grid-3 { margin-top: var(--space-block); }
.diff-values,
.love-grid,
.camp-grid { margin-top: var(--space-block); }

/* room around a trust line that closes a section (e.g. testimonials band) */
.grid-3 + .trust-line,
.love-trust { margin-top: var(--space-block); }

/* ---------- STICKY HEADER / NAV ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 236, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-ui) var(--ease-soft),
              box-shadow var(--t-ui) var(--ease-soft),
              border-color var(--t-ui) var(--ease-soft);
}
.site-nav.is-scrolled {
  background: rgba(247, 244, 236, 0.96);
  border-bottom-color: var(--hairline);
  box-shadow: 0 8px 24px -20px rgba(0, 58, 48, 0.6);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* Fixed comfortable height. The scrolled state is signaled by the logo
     scaling down (transform, compositor-only) plus the background/shadow
     change above, so nothing here transitions a layout property. */
  min-height: 76px;
}
.site-nav.is-scrolled .site-nav__inner { /* logo carries the shrink */ }

.site-nav__logo { display: inline-flex; align-items: center; transform-origin: left center; }
.site-nav__logo img {
  width: 196px;
  height: auto;
  transform-origin: left center;
  transition: transform var(--t-ui) var(--ease-soft);
}
/* shrink the logo with transform (compositor-only, no layout) */
.site-nav.is-scrolled .site-nav__logo img { transform: scale(0.8); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  list-style: none;
}
.site-nav__links a {
  position: relative;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted-deep);
  padding-block: 4px;
  transition: color var(--t-ui) var(--ease-soft);
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] { color: var(--green); }
/* gold underline draw on hover + active */
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px; width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-ui) var(--ease-soft);
}
.site-nav__links a:hover::after,
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.site-nav__actions { display: flex; align-items: center; gap: 18px; }

.site-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--deep-forest);
  transition: color var(--t-ui) var(--ease-soft);
}
.site-nav__phone:hover { color: var(--green); }
.site-nav__phone svg { width: 17px; height: 17px; flex: none; }

/* mobile menu */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hairline-strong);
  border-radius: 12px; color: var(--green);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--gutter) 22px;
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline);
}
.nav-drawer.is-open { display: flex; }
.nav-drawer a {
  padding: 13px 4px;
  font-weight: 600;
  color: var(--muted-deep);
  border-bottom: 1px solid var(--hairline);
}
.nav-drawer a[aria-current="page"] { color: var(--green); }
.nav-drawer .btn { margin-top: 14px; justify-content: center; }

/* indented mobile program children under the Programs drawer link */
.nav-drawer .nav-drawer__sub {
  padding-left: 22px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--label);
}
.nav-drawer .nav-drawer__sub[aria-current="page"] { color: var(--green); }

/* ---------- PROGRAMS DROPDOWN (desktop) ---------- */
.nav-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* the top link wears the same look as the other nav links + a caret */
.nav-dd__top {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted-deep);
  padding-block: 4px;
  transition: color var(--t-ui) var(--ease-soft);
}
.nav-dd__top:hover,
.nav-dd:hover .nav-dd__top,
.nav-dd:focus-within .nav-dd__top,
.nav-dd__top[aria-current="page"] { color: var(--green); }
/* gold underline draw, matching .site-nav__links a */
.nav-dd__top::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px; width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-ui) var(--ease-soft);
}
.nav-dd__top:hover::after,
.nav-dd:hover .nav-dd__top::after,
.nav-dd:focus-within .nav-dd__top::after,
.nav-dd__top[aria-current="page"]::after { transform: scaleX(1); }

.nav-dd__caret {
  width: 11px; height: 8px; flex: none;
  transition: transform var(--t-ui) var(--ease-soft);
}
/* caret flips up when the menu is open (hover / focus / explicit state) */
.nav-dd:hover .nav-dd__caret,
.nav-dd:focus-within .nav-dd__caret,
.nav-dd__top[aria-expanded="true"] .nav-dd__caret { transform: rotate(180deg); }

.nav-dd__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  min-width: 190px;
  padding: 8px;
  background: var(--warm-white);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);   /* thin gold keyline */
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  /* hidden by default; opacity/visibility so it stays out of the a11y tree */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-ui) var(--ease-soft),
              transform var(--t-ui) var(--ease-soft),
              visibility var(--t-ui) var(--ease-soft);
  z-index: 60;
}
/* a small hover bridge so the pointer can cross the gap without closing */
.nav-dd__menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -12px;
  height: 12px;
}
/* show on hover, on keyboard focus-within, AND on the explicit ARIA flag */
.nav-dd:hover .nav-dd__menu,
.nav-dd:focus-within .nav-dd__menu,
.nav-dd__top[aria-expanded="true"] + .nav-dd__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dd__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted-deep);
  transition: background-color var(--t-micro) var(--ease-soft),
              color var(--t-micro) var(--ease-soft);
}
.nav-dd__menu a:hover,
.nav-dd__menu a[aria-current="page"] {
  background: var(--mint);            /* sage tint */
  color: var(--green);
}
.nav-dd__menu a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* reduced motion: no transform travel, keep the show/hide instant + accessible */
@media (prefers-reduced-motion: reduce) {
  .nav-dd__menu {
    transform: none;
    transition: opacity 0.001ms, visibility 0.001ms;
  }
  .nav-dd:hover .nav-dd__menu,
  .nav-dd:focus-within .nav-dd__menu,
  .nav-dd__top[aria-expanded="true"] + .nav-dd__menu { transform: none; }
  .nav-dd__caret { transition: none; }
}

/* ---------- BUTTONS ---------- */
.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--warm-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: transform var(--t-ui) var(--ease-soft),
              box-shadow var(--t-ui) var(--ease-soft),
              background-color var(--t-ui) var(--ease-soft);
  box-shadow: var(--shadow-btn);
}
.btn .leaf { width: 16px; height: 18px; flex: none; color: var(--gold); }
.btn:hover { transform: translateY(-2px); background: var(--forest); box-shadow: 0 16px 28px -16px rgba(0, 58, 48, 0.85); }
.btn:active { transform: translateY(0); }

.btn--primary { /* default look, alias for clarity in markup */ }
.btn--book { /* primary book-a-tour pill, same as default */ }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--green);
  border-color: var(--green);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--green); color: var(--warm-white); }

.section--forest .btn--ghost {
  --btn-fg: var(--warm-white);
  border-color: rgba(157, 181, 168, 0.55);
}
.section--forest .btn--ghost:hover { background: var(--warm-white); color: var(--forest); }

/* ---------- ARCH PHOTO FRAME ---------- */
.arch {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: 50% 50% 14px 14px / 32% 32% 5px 5px;
  overflow: hidden;
  background: var(--mint);
  border: 1px solid rgba(0, 92, 75, 0.10);
  box-shadow: var(--shadow-arch);
}
.arch img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  transform: scale(1.02);
  transition: transform 700ms var(--ease-soft);
}
/* Standing in front of the doorway: the photo eases a hair closer on hover.
   Stays inside the arch crop, compositor-only, no reflow. */
.arch:hover img { transform: scale(1.06); }
/* inner ivory keyline tracing the doorway */
.arch__ring {
  position: absolute;
  inset: 11px;
  border-radius: 50% 50% 9px 9px / 31% 31% 4px 4px;
  border: 1.5px solid rgba(255, 253, 248, 0.55);
  pointer-events: none;
}
/* offset GOLD keyline (the signature) */
.arch--gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 14px 14px / 32% 32% 5px 5px;
  border: 2px solid var(--gold);
  transform: translate(13px, 15px);
  z-index: -1;
  opacity: 0.9;
}
.arch__cap {
  position: absolute;
  left: 16px; bottom: 16px;
  background: var(--forest-glass);
  color: var(--warm-white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---------- BOTANICAL (literal leaves) ---------- */
.leaf { display: inline-block; vertical-align: middle; color: var(--gold); }

.sprig {
  position: absolute;
  width: 92px;
  height: auto;
  color: var(--soft-sage);
  z-index: 2;
}

/* centered leaf section divider */
.leaf-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  margin-block: clamp(28px, 5vw, 48px);
}
.leaf-rule::before,
.leaf-rule::after {
  content: "";
  height: 1px;
  width: clamp(40px, 12vw, 90px);
  background: currentColor;
  opacity: 0.6;
}
.leaf-rule svg { width: 22px; height: 24px; }

/* ---------- COLORED PANEL (photo-free fallback slot) ---------- */
.leaf-panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: 50% 50% 14px 14px / 32% 32% 5px 5px;
  background: linear-gradient(160deg, var(--mint), var(--sage));
  border: 1px solid rgba(0, 92, 75, 0.12);
  overflow: hidden;
}
.leaf-panel svg { width: 38%; height: auto; color: rgba(0, 58, 48, 0.22); }

/* ---------- CARDS / TILES ---------- */
.program-tile {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  transition: transform var(--t-ui) var(--ease-soft), box-shadow var(--t-ui) var(--ease-soft);
}
.program-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
/* On hover the framed photo eases in a touch, like leaning toward the doorway.
   Compositor-only; the arch crop clips the overflow so nothing reflows. */
.program-tile__arch img,
.program-tile__panel svg {
  transition: transform 600ms var(--ease-soft);
}
.program-tile:hover .program-tile__arch img { transform: scale(1.05); }
.program-tile__arch {
  height: 200px;
  padding: 14px 14px 0;
  background: var(--mint);
  overflow: hidden;
}
.program-tile__arch img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  border-bottom: 3px solid var(--gold);
}
.program-tile__body { padding: 18px 22px 24px; }
.program-tile__tag {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--deep-gold); font-weight: 700;
}
.program-tile__name { font-size: var(--fs-h3); margin: 6px 0 8px; }
.program-tile__rooms { font-size: 0.95rem; color: var(--muted); }

/* Editorial feature entries, NOT three identical rounded icon-tile cards.
   Each reads as a numbered line in a set: a gold hairline keyline at the top,
   an italic Fraunces ordinal in the corner, and a quiet leaf only on the
   lead entry. The trio reads as one composed list, distinctively Garden. */
.diff-values { counter-reset: feat; }
.feature {
  counter-increment: feat;
  position: relative;
  background: var(--warm-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(28px, 3.2vw, 36px);
  padding-top: clamp(30px, 3.4vw, 40px);
  overflow: hidden;
  transition: transform var(--t-ui) var(--ease-soft), box-shadow var(--t-ui) var(--ease-soft);
}
/* gold hairline keyline runs across the top edge of each entry */
.feature::before {
  content: "";
  position: absolute;
  left: clamp(28px, 3.2vw, 36px); right: clamp(28px, 3.2vw, 36px);
  top: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(184, 154, 71, 0));
}
/* italic Fraunces ordinal, the numbered-set signature */
.feature::after {
  content: counter(feat, decimal-leading-zero);
  position: absolute;
  top: clamp(16px, 1.8vw, 22px); right: clamp(20px, 2.4vw, 28px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.62;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
/* leaf appears only where the markup includes one (the lead feature carries
   it); the other entries lean on the gold keyline + ordinal, so the mark is a
   single quiet accent for the set, not a stamp repeated on every card. */
.feature__mark { color: var(--gold); width: 26px; height: 28px; margin-bottom: 18px; }
.feature h3 { font-size: var(--fs-h3); margin-bottom: 8px; max-width: 18ch; }
.feature p { color: var(--muted); font-size: 0.98rem; }

.testimonial {
  background: var(--ivory);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: clamp(28px, 3.4vw, 40px);
}
.testimonial blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--green);
}
.testimonial cite {
  display: block;
  margin-top: 16px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep-gold);
}

.theme-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(165deg, var(--green), var(--forest));
  color: var(--warm-white);
  overflow: hidden;
}
/* Decorative leaf is a quiet accent, not a loud repeated stamp on every card. */
.theme-card__leaf { position: absolute; top: 14px; right: 14px; width: 24px; color: var(--gold); opacity: 0.55; }
.theme-card h3 { color: var(--warm-white); font-size: var(--fs-h3); }

/* ==========================================================================
   PAGE COMPONENTS
   Added for the About / Montessori / Programs-detail / Contact / Summer-Camp
   pages. All reuse the Garden tokens above; same shapes, shadows, gold keyline.
   ========================================================================== */

/* ---------- MAP EMBED (Contact) ----------
   Responsive 16:9 wrapper so the Google Maps iframe never overflows. */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- CONTACT GRID (location / hours / contact info) ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 28px);
}
.contact-card {
  background: var(--warm-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-card);
}
.contact-card__icon { width: 26px; height: 28px; color: var(--gold); margin-bottom: 14px; }
.contact-card h3 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep-gold);
  margin-bottom: 12px;
}
.contact-card p { color: var(--muted); font-size: 0.98rem; line-height: 1.8; }
.contact-card a { color: var(--green); font-weight: 600; }
.contact-card a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CLASS DETAILS (key/value card on program pages) ---------- */
.class-details {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.8vw, 30px);
  box-shadow: var(--shadow-card);
}
.class-details dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
}
.class-details dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  padding: 13px 18px 13px 0;
  border-top: 1px solid var(--hairline);
  align-self: center;
}
.class-details dd {
  font-weight: 600;
  color: var(--forest);
  text-align: right;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  align-self: center;
}
.class-details dl > dt:first-of-type,
.class-details dl > dt:first-of-type + dd { border-top: 0; }

/* ---------- PROGRAM DETAIL HERO + PREV/NEXT NAV ---------- */
.prog-detail-hero { position: relative; }
.prog-detail-hero .prog-detail-hero__sub {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--deep-gold);
  margin-top: 12px;
}
.prog-detail-hero .prog-detail-hero__age {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.prog-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.prog-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--green);
  padding: 10px 4px;
  transition: color var(--t-ui) var(--ease-soft);
}
.prog-nav a:hover { color: var(--forest); }
.prog-nav a .prog-nav__dir {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep-gold);
}
.prog-nav__next { text-align: right; }

/* ---------- SUMMER CAMP HIGHLIGHTS ---------- */
.camp-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
}
.camp-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--warm-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(18px, 2.2vw, 24px);
  transition: transform var(--t-ui) var(--ease-soft), box-shadow var(--t-ui) var(--ease-soft);
}
.camp-highlight:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.camp-highlight .leaf,
.camp-highlight__icon {
  width: 22px; height: 24px; flex: none;
  color: var(--gold);
  margin-top: 2px;
}
.camp-highlight span { font-weight: 600; color: var(--forest); line-height: 1.5; }

/* ---------- INFO BAND (OUR STAFF / INFO FOR PARENTS prose) ---------- */
.info-band {
  background: var(--warm-white);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: clamp(28px, 3.6vw, 44px);
}
.info-band h2,
.info-band h3 { margin-bottom: 14px; }
.info-band p {
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 68ch;
}
.info-band p + p { margin-top: 16px; }

/* ---------- TOUR FORM ---------- */
.tour-form {
  background: var(--warm-white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow-card);
  max-width: 560px;
}
.tour-form__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.tour-form__head h2 { font-size: var(--fs-h3); margin: 0; }
.tour-form__sub { font-size: 0.82rem; color: var(--soft-gray); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--label);
}
.field input,
.field select {
  min-height: 48px;        /* >=44px tap target */
  width: 100%;
  font-size: 1rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid rgba(0, 92, 75, 0.16);
  border-radius: var(--r-input);
  padding: 12px 14px;
  transition: border-color var(--t-ui) var(--ease-soft),
              box-shadow var(--t-ui) var(--ease-soft),
              background-color var(--t-ui) var(--ease-soft);
}
.field input::placeholder { color: var(--placeholder); }
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23005c4b' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.field input:focus,
.field select:focus {
  outline: none;
  background: var(--warm-white);
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 92, 75, 0.14);
}
.field input:focus-visible,
.field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.tour-form .btn { width: 100%; margin-top: 16px; padding: 15px 24px; }

.form-note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--soft-gray);
  text-align: center;
}

.form-success {
  display: none;
  text-align: center;
  padding: 14px 6px;
}
.form-success.is-visible { display: block; }
.form-success .leaf { width: 34px; height: 38px; margin: 0 auto 10px; color: var(--gold); }
.form-success h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.form-success p { color: var(--muted); font-size: 0.95rem; }

/* ---------- TRUST LINE ---------- */
.trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 0.9rem;
  color: var(--muted-deep);
  font-weight: 500;
}
.trust-line .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.section--forest .trust-line { color: var(--on-forest); }

/* ---------- MOBILE BOTTOM CTA BAR ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(247, 244, 236, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
}
.mobile-cta a {
  flex: 1;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.96rem;
  border-radius: 999px;
}
.mobile-cta .mc-call {
  background: var(--ivory);
  color: var(--green);
  border: 1px solid var(--hairline-strong);
}
.mobile-cta .mc-book {
  background: var(--green);
  color: var(--warm-white);
  box-shadow: var(--shadow-btn);
}
.mobile-cta .mc-book .leaf { color: var(--gold); width: 15px; height: 17px; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--forest);
  color: var(--on-forest);
  padding-block: clamp(48px, 7vw, 72px);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
}
.site-footer__logo img { width: 200px; height: auto; margin-bottom: 18px; }
.site-footer__col h4 {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer__col a,
.site-footer__col p { color: var(--on-forest); font-size: 0.95rem; line-height: 2; }
.site-footer__col a:hover { color: var(--warm-white); }
.site-footer__credit {
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: 22px;
  border-top: 1px solid rgba(157, 181, 168, 0.22);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--sage);
}
.site-footer__credit a { color: var(--sage); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__credit a:hover { color: var(--warm-white); }

/* ==========================================================================
   MOTION HOOKS
   Default state is the REDUCED / NO-JS state: everything visible.
   motion.js adds .js-reveal to <html> ONLY after confirming motion is
   allowed AND IntersectionObserver exists. That class is what hides the
   targets; if JS fails or motion is reduced, the page reads as a still.
   The browser owns scrolling natively (CSS scroll-behavior on <html>).
   ========================================================================== */

/* --------------------------------------------------------------------------
   REVEAL VOCABULARY, varied by content role (the cure for fade-up-on-everything).
   Reveal is hidden only when JS arms the observer (.js-reveal on <html>).
   Role is set by motion.js via data-reveal-role; default is a gentle rise.
     headline  -> rises from below (heads lead)
     image/arch-> clips open from the floor (doorway grows up)
     meta      -> fades in place (eyebrows, trust lines settle, no travel)
   A per-index --i (set by motion.js on grouped children) staggers a set so it
   reads like leaves settling one after another, not a single block.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  /* stagger: each child carries its own --i; lead delay is gentle */
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
.js-reveal [data-reveal].is-revealed { will-change: auto; }

/* metadata fades in place, no travel (eyebrows, trust line, captions) */
.js-reveal [data-reveal][data-reveal-still],
.js-reveal [data-reveal][data-reveal-role="meta"] {
  transform: none;
}

/* --------------------------------------------------------------------------
   ARCH CLIP-PATH GROW, the signature doorway reveal.
   The framed photo grows up from the floor: clip-path inset collapses the top
   while opacity lifts, so the arch "opens" the way a child sees a doorway. The
   gold offset keyline rides along. Compositor-friendly (clip-path + opacity +
   transform), GPU-only, no layout. Arches are armed by motion.js with
   data-reveal; reduced-motion + no-JS leave them fully open.
   -------------------------------------------------------------------------- */
.js-reveal [data-arch-grow] {
  opacity: 0;
  clip-path: inset(72% 0 0 0 round 50% 50% 14px 14px / 32% 32% 5px 5px);
  transform: translateY(14px) scale(0.985);
  transition: opacity .8s var(--ease-out),
              clip-path .9s var(--ease-out),
              transform .9s var(--ease-out);
}
.js-reveal [data-arch-grow].is-revealed {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 50% 50% 14px 14px / 32% 32% 5px 5px);
  transform: none;
}

/* --------------------------------------------------------------------------
   GOLD UNDERLINE DRAW under section headings.
   A warm gold rule grows left-to-right under each .h-display the moment it
   reveals (background-size 0 -> 100%), like a teacher underlining a word.
   This is the heading-scale companion to the hand-drawn SVG .underline accent
   in the hero. background-size is composited; no layout, no repaint of text.
   -------------------------------------------------------------------------- */
.h-display[data-reveal] {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  padding-bottom: 0.18em;
  transition: opacity .62s var(--ease-out),
              transform .62s var(--ease-out),
              background-size .85s var(--ease-soft) .18s;
}
.h-display[data-reveal].is-revealed { background-size: clamp(56px, 18%, 132px) 3px; }
.section--forest .h-display[data-reveal] {
  background-image: linear-gradient(var(--gold), var(--gold));
}

/* hand-drawn hero underline accent (decorative SVG, CSS only) */
.underline { display: block; color: var(--gold); }
.underline path {
  fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
  /* CSS-only leaf sway: compositor-only transform, opt-in via [data-sway].
     Gentle, slow, organic; staggered so neighbouring sprigs never sway in
     lockstep ("leaves settling in still afternoon light"). */
  [data-sway] {
    transform-origin: bottom center;
    animation: gd-sway 7s ease-in-out infinite;
  }
  [data-sway]:nth-of-type(even) { animation-duration: 8.4s; animation-direction: alternate-reverse; }
  [data-sway]:nth-of-type(3n) { animation-duration: 9.2s; }

  .underline path {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: gd-draw 1100ms var(--ease-soft) 300ms forwards;
  }
  @keyframes gd-draw { to { stroke-dashoffset: 0; } }
  @keyframes gd-sway {
    0%, 100% { transform: rotate(-2.4deg); }
    50% { transform: rotate(2.4deg); }
  }
}

@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;
  }
  /* belt-and-suspenders: even if .js-reveal were present, force the still.
     Photos fully open (no clip), headings keep their gold underline, sprigs
     rest straight. The reduced-motion still IS the finished composition. */
  [data-reveal],
  [data-arch-grow] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-arch-grow] {
    clip-path: inset(0 0 0 0 round 50% 50% 14px 14px / 32% 32% 5px 5px) !important;
  }
  .h-display[data-reveal] { background-size: clamp(56px, 18%, 132px) 3px !important; }
  [data-sway] { transform: none !important; }
}

/* ==========================================================================
   RESPONSIVE
   Mobile-first: the page reads single-column with the hamburger by default,
   and progressively widens at each min-width step. Writing the breakpoints as
   min-width (desktop-up) keeps the still small-screen state the baseline, so
   nothing depends on a fixed pixel container. The 7-item nav now needs more
   room, so the desktop link row only appears at the large step (>=64rem),
   collapsing to the hamburger drawer everywhere below it.
   ========================================================================== */

/* default (small screens): grids stack, form is one column, nav is the
   hamburger drawer, fixed bottom CTA bar is shown */
.grid-2,
.grid-3,
.contact-grid,
.camp-highlights,
.fields { grid-template-columns: 1fr; }
.tour-form__head { flex-direction: column; gap: 4px; }
.site-footer__grid { grid-template-columns: 1fr; }

.site-nav__links,
.site-nav__phone { display: none; }
.nav-toggle { display: inline-flex; }

.mobile-cta { display: flex; }
body { padding-bottom: 74px; }   /* clear the fixed bottom bar */

/* small phones: trim the logo + button so nothing crowds */
@media (max-width: 33.75rem) {
  .site-nav__logo img { width: 168px; }
  .btn { padding: 13px 20px; font-size: 0.94rem; }
}

/* tablet (>=45rem ~ 720px): two-up grids return, form goes side-by-side,
   the fixed bottom CTA bar steps aside (room for inline CTAs again) */
@media (min-width: 45rem) {
  .grid-3,
  .contact-grid,
  .camp-highlights { grid-template-columns: repeat(2, 1fr); }
  .fields { grid-template-columns: 1fr 1fr; }
  .tour-form__head { flex-direction: row; gap: 12px; }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .mobile-cta { display: none; }
  body { padding-bottom: 0; }
}

/* wide tablet (>=57rem ~ 912px): two-column content grids open up */
@media (min-width: 57rem) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* desktop (>=64rem ~ 1024px): the 3-up content grids reach their final width. */
@media (min-width: 64rem) {
  .grid-3,
  .contact-grid,
  .camp-highlights { grid-template-columns: repeat(3, 1fr); }
}

/* wide desktop (>=80rem ~ 1280px): the full 7-item nav row appears and the
   hamburger retires. Held to 1280 (not 1024) so the wider link row plus logo,
   tap-to-call, and the Book a tour button never overflow between 1024 and 1280;
   below 1280 the drawer drives navigation. */
@media (min-width: 80rem) {
  .site-nav__links { display: flex; }
  .site-nav__phone { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav-drawer { display: none !important; }   /* drawer never shows on wide desktop */
}