/* ==========================================================================
   The Montessori Farm — global stylesheet · v2 "Porcelain & Navy"
   Design locked 30 Jul 2026: Mockup 25 v2 — 01's gradient-video-hero layout
   in 07's porcelain/navy palette. Colours live in the :root block below and
   nowhere else — swapping the palette later is minutes, not a rebuild.
   Type (Windows-stock trio, 4 Aug 2026 — no webfonts, no installs):
   Georgia (display) · Segoe UI (text) · Ink Free (script accent).
   ========================================================================== */

:root {
  /* --- the palette, CUT 4 Aug 2026 (Tristan: "too many colors") ---
     Five families + two working accents. Navy Two (#2c3e6b) MERGED into Ink;
     the old --hInk/--soft duplicates and ~22 stray hexes are gone. Every
     colour on the site comes from these tokens (plus white/alpha). */
  --bg: #f5f6f8;            /* Porcelain — page background */
  --sur: #ffffff;           /* White — cards and surfaces */
  --ink: #1f2a44;           /* Navy Ink — ALL text, headlines, stats, footer */
  --muted: #5b6b7e;         /* Slate — Ink's quiet voice: captions, support copy */
  --ac: #c47e3d;            /* Copper — the accent: CTAs, script, numbers */
  --ac-deep: #9c5f24;       /* Copper's small-text shade (contrast on light) */
  --band: #4a6b9d;          /* Steel Blue — CTA band (his pick) */
  --mist: #eef1f6;          /* Mist — soft fills, gradient top (was hA + soft) */
  --mist2: #d8e0ee;         /* Mist deep — gradient bottom, frosted tints */
  --line: #dfe3ea;          /* hairlines and borders, everywhere */
  --good: #2e6b4f;          /* FUNCTIONAL: "good"/included — fee page only */
  --good-soft: #eaf4ee;     /* Green's tint */
  --warm: #f9f1e4;          /* FUNCTIONAL: Cream — note panels */
  --warm-line: #e8d3b0;     /* Cream's border */
  --warm-ink: #6b4a22;      /* Cream's text */
  --on-dark: #e8edf6;       /* light text on Ink/Steel (footer links, band copy) */
  --on-dark-dim: #c3cfe4;   /* dimmer on-dark text (fine print, notes) */

  --r: 18px;                /* the ELM rounding, everywhere */
  --shadow: 0 2px 14px rgb(0 0 0 / .06);
  --shadow-lift: 0 6px 30px rgb(31 42 68 / .08);
  --focus: #1d4ed8;
  --wrap: 1140px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ac-deep); }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; line-height: 1.15; font-weight: 700; }

/* ---------- scroll-reveal (JS adds .rv; no-JS pages stay visible) ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- accessibility ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--sur); color: var(--ink); font-weight: 600;
  padding: 12px 20px; border-radius: 0 0 14px 14px; text-decoration: none;
  transition: top .18s;
}
.skip-link:focus { top: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- shared bits ---------- */
/* padding-inline / padding-block (not the padding shorthand): elements carry
   BOTH classes (class="section wrap"), and two padding shorthands on the same
   element mean the later rule wipes the earlier one's sides — which is exactly
   what happened: every .section.wrap lost its 24px side padding, so phones
   rendered content flush to the screen edge (Tristan, 4 Aug). Longhands can't
   collide. */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
.section { padding-block: 64px; }
.accent { font-family: 'Ink Free', 'Segoe Script', 'Bradley Hand', cursive; color: var(--ac); font-size: 1.06em; font-weight: 600; line-height: 1; }
.kicker, .eyebrow {
  display: block; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ac-deep); margin-bottom: 10px;
}
.center { text-align: center; }
h2 { font-size: clamp(28px, 4vw, 36px); margin-bottom: 12px; }
.sec-head { max-width: 720px; margin-bottom: 34px; }
.sec-head p:not(.eyebrow) { color: var(--muted); }
.sec-head.center { margin-inline: auto; text-align: center; }

.btn {
  display: inline-block; padding: 13px 26px; border-radius: 48px;
  background: var(--ac); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  border: 2px solid transparent; cursor: pointer; line-height: 1.4;
}
.btn:hover { filter: brightness(1.06); }
.btn-ghost, .btn.ghost { background: transparent; border-color: currentColor; color: inherit; }

/* ---------- header / nav — floats on every screen (Tristan, 4 Aug rd 5) ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 14px rgb(31 42 68 / .10);
}
.site-header.is-stuck nav { padding-top: 9px; padding-bottom: 9px; }
.site-header.is-stuck .logomark { height: 42px; }
.logomark { transition: height .25s ease; }
[id] { scroll-margin-top: 96px; }
.site-header nav {
  max-width: var(--wrap); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; gap: 10px; color: var(--ink);
}
.site-header .logo { margin-right: auto; display: flex; align-items: center; }
.logomark { height: 54px; width: auto; display: block; }
.navbtn {
  padding: 10px 18px; border-radius: 14px; font-size: 15.5px; font-weight: 600;
  color: inherit; text-decoration: none;
  background: color-mix(in srgb, var(--mist2) 24%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 8px rgb(0 0 0 / .07);
}
.navbtn:hover { background: color-mix(in srgb, var(--mist2) 45%, transparent); border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.navbtn[aria-current="page"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 0 1px 8px rgb(0 0 0 / .07); }
.navbtn.call { font-weight: 700; color: var(--ac-deep); white-space: nowrap; }
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 44px; padding: 0 11px; border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 14px; cursor: pointer;
  background: color-mix(in srgb, var(--mist2) 24%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.burger span:not(.visually-hidden) { display: block; height: 2.5px; border-radius: 2px; background: var(--ink); }
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 90; padding: 110px 30px 30px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.mobile-menu[data-open="true"] { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu a {
  font-family: Georgia, 'Times New Roman', serif; font-size: 21px; font-weight: 600;
  color: var(--ink); text-decoration: none; padding: 10px 4px; border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) {
  .site-header nav > a.navbtn { display: none; }
  .burger { display: flex; }
}

/* ---------- HOME hero: video clear (~35% veil) + frosted glass panel ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--mist), var(--mist2));
  color: var(--ink); border-radius: 0 0 40px 40px;
}
.hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero .hero-media picture, .hero .hero-media img, .hero .hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.hero .hero-media video { opacity: 0; transition: opacity .6s ease; }
.hero .hero-media video.is-ready { opacity: 1; }
.hero .veil { position: absolute; inset: 0; z-index: 1; background: none; }
.hero .hero-inner {
  position: relative; z-index: 2; padding: 40px 24px; text-align: center;
  min-height: clamp(420px, 62vh, 660px);
  display: flex; align-items: flex-end; justify-content: center;
}
.glass--cta { padding: 18px 22px; margin-bottom: 26px; }
.intro-lead {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: clamp(21px, 2.6vw, 29px); line-height: 1.4; color: var(--ink);
  max-width: 860px; margin: 0 auto; text-align: center; padding-top: 56px;
}
.glass {
  display: inline-block; text-align: center;
  background: rgb(255 255 255 / .26);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 28px; padding: 36px 48px; margin-top: 20px;
  box-shadow: var(--shadow-lift);
}
.glass h1 { font-size: clamp(34px, 5.4vw, 56px); max-width: 820px; margin: 0 auto; }
.glass .lead { max-width: 640px; margin: 18px auto 26px; font-size: 18px; opacity: .94; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* faint floating outline shapes — art artifact 1 */
.fs { position: absolute; border: 1.5px solid currentColor; border-radius: 26px; opacity: .35; pointer-events: none; z-index: 1; }
.fs1 { width: 210px; height: 150px; transform: rotate(-14deg); top: 12%; left: -60px; }
.fs2 { width: 260px; height: 180px; transform: rotate(11deg); right: -80px; bottom: 14%; }
@media (max-width: 700px) {
  .glass { padding: 26px 22px; margin-inline: 2px; }
  .intro-lead { padding-top: 44px; }

  /* ⭐ Tristan, 4 Aug: on phones the frosted CTA panel sat over the film and
     covered too much of it. Below 700px the hero now STACKS — .hero-media takes
     real height so the video has the whole frame to itself, and the two buttons
     drop underneath onto the mist gradient.
     ⛔ DESKTOP IS DELIBERATELY UNTOUCHED — there the panel still floats over the
     video, which is the locked Mockup 25 v2 layout.
     The frosted treatment is dropped in the stacked version because there is no
     longer a photo behind the panel to separate it from; glass over flat mist
     just reads as a smudge. The unobstructed video area is unchanged (46vh here
     vs 54vh minus the ~80px the panel used to cover). */
  .hero { display: flex; flex-direction: column; }
  .hero .hero-media { position: relative; height: 46vh; min-height: 290px; }
  .hero .hero-inner { display: block; min-height: 0; padding: 18px 14px 24px; }
  .glass--cta {
    display: block; background: none; box-shadow: none; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; margin: 0;
  }
  /* No flex-grow: the pair must SHRINK to share one row on a 390px phone, but
     must not stretch to 360px each on a 700px tablet. Default 0 1 auto does
     both; the tighter padding is what keeps them on a single line at 390. */
  .hero-cta { gap: 10px; }
  .hero-cta .btn { padding-inline: 18px; }
}

/* ---------- inner-page hero (porcelain gradient) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--mist), var(--mist2));
  color: var(--ink); border-radius: 0 0 40px 40px;
  padding: 140px 0 64px; text-align: center;
}
.page-hero h1 { font-size: clamp(32px, 4.6vw, 48px); max-width: 820px; margin: 0 auto; }
.page-hero p { max-width: 640px; margin: 16px auto 0; color: var(--muted); font-size: 17px; }
.page-hero a { color: var(--ac-deep); font-weight: 600; }

/* ---------- stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; padding-top: 56px; }
.stats b { display: block; font-size: 34px; font-family: Georgia, 'Times New Roman', serif; color: var(--ink); }
.stats span { font-size: 13.5px; color: var(--muted); }

/* ---------- journey path — art artifact 2 ---------- */
.journey { display: flex; justify-content: center; margin: 10px 0 -40px; pointer-events: none; }
.journey svg { width: 340px; height: 130px; overflow: visible; }

/* ---------- motifs — art artifact 3 ---------- */
.motif { display: block; width: 54px; height: 54px; margin-bottom: 10px; }

/* ---------- photo trio ---------- */
.day-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0 34px; }
.day-trio figure { position: relative; overflow: hidden; border-radius: var(--r); min-height: 230px; margin: 0; }
.day-trio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- feature cards (six) ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--sur); border-radius: var(--r); padding: 26px 22px;
  box-shadow: var(--shadow);
}
.card .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--mist); display: grid; place-items: center; margin-bottom: 14px; }
.card .ic svg { width: 26px; height: 26px; stroke: var(--ink); fill: none; }
.card h3 { font-size: 20px; margin-bottom: 6px; }
.card p { font-size: 14.5px; color: var(--muted); }
.card .tags { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.card .tags span {
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--mist); border-radius: 20px; padding: 3px 11px;
}

/* ---------- numbered program cards ---------- */
.programs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.program {
  display: block; color: inherit; text-decoration: none;
  background: var(--sur); border-radius: var(--r); padding: 26px 22px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .program:hover { transform: scale(1.03); box-shadow: var(--shadow-lift); }
  .program:hover .golink { color: var(--ac-deep); }
}
.program:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.program .golink { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .program, .vbtn { transition: none; } .program:hover { transform: none; } }
.program .num { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; color: var(--ac); font-weight: 700; }
.program h3 { margin: 6px 0 2px; font-size: 20px; }
.program .age { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.program p { font-size: 14px; margin-top: 8px; color: var(--muted); }

/* ---------- Our Story artwork panel (replaces the misread photo) ---------- */
.art-panel {
  background: linear-gradient(155deg, var(--mist), var(--mist2));
  display: grid; place-items: center; min-height: 340px; padding: 8%;
}
.art-panel svg { width: min(300px, 82%); height: auto; }

/* ---------- page photo band (FAQs · Fees · Employment) ---------- */
.page-photo { margin-top: 26px; }
/* Fee page: line the photo band up with the calculator column rather than the
   wider page wrap (Tristan 4 Aug). 900 − 22×2 matches .feewrap's inner width
   exactly, so the photo's edges sit flush with the calculator card below. */
.page-photo--fee { max-width: 900px; padding-inline: 22px; }
.page-photo img {
  width: 100%; height: clamp(180px, 30vw, 300px); object-fit: cover;
  border-radius: var(--r); box-shadow: var(--shadow-lift);
}

/* ---------- showcase / splits ---------- */
.showcase, .split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
}
.split.rev .media { order: 2; }
.showcase .img, .split .media { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.showcase .img img, .split .media img { width: 100%; height: 100%; object-fit: cover; }
.showcase ul { margin: 18px 0 26px; }
.showcase li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; }
.showcase li svg { width: 22px; height: 22px; flex: none; stroke: var(--good); fill: none; margin-top: 3px; }
.split p:not(.eyebrow) { color: var(--muted); margin-bottom: 12px; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.gallery figure { position: relative; overflow: hidden; border-radius: var(--r); margin: 0; }
.gallery figure img, .gallery picture, .gallery picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }

/* ---------- named gallery sets: scroll-snap carousels (no library) ---------- */
.gset { margin-top: 30px; }
.ghead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.ghead h3 { font-size: 21px; margin: 0; }
.gnav { display: none; gap: 8px; }
@media (hover: hover) and (min-width: 700px) { .gnav { display: flex; } }
.gnav button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--sur);
  color: var(--ink); font-size: 18px; cursor: pointer; box-shadow: var(--shadow);
}
.gnav button:hover { background: var(--mist); }
.ggrid {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.ggrid::-webkit-scrollbar { display: none; }
.ggrid figure {
  flex: 0 0 calc((100% - 28px) / 3); scroll-snap-align: start;
  position: relative; overflow: hidden; border-radius: var(--r); margin: 0; aspect-ratio: 3 / 2;
}
.ggrid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .ggrid figure { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 520px) { .ggrid figure { flex-basis: 82%; } }

/* ---------- click-to-play video (poster first, nothing autoplays) ---------- */
.vplay { position: relative; border-radius: var(--r); overflow: hidden; margin: 0 0 26px; box-shadow: var(--shadow-lift); }
.vplay--narrow { max-width: 860px; margin-inline: auto; }
.vplay img { display: block; width: 100%; height: auto; }
.vplay video { display: block; width: 100%; height: auto; }
.vbtn {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgb(255 255 255 / .92); color: var(--ac-deep);
  display: grid; place-items: center; box-shadow: 0 6px 24px rgb(0 0 0 / .3);
  transition: transform .2s ease, background .2s ease;
}
.vbtn svg { width: 38px; height: 38px; margin-left: 4px; }
@media (hover: hover) { .vplay:hover .vbtn { transform: scale(1.07); background: #fff; } }
.vplay figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 12px; color: #fff; font-size: 14px; font-weight: 600;
  background: linear-gradient(transparent, rgb(0 0 0 / .55)); pointer-events: none;
}
.vplay.is-playing .vbtn, .vplay.is-playing figcaption { display: none; }
.vplay.is-preview { cursor: pointer; }
.vplay.is-preview .vbtn, .vplay.is-preview figcaption { display: none; }
.vplay .sound-hint {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; display: none;
  background: rgb(0 0 0 / .62); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 9px 15px; border-radius: 40px; pointer-events: none;
}
.vplay.is-preview .sound-hint { display: inline-block; }
.vplay.is-playing .sound-hint { display: none; }
/* captions: match the brand rather than the browser default */
/* Captions sit on the picture with no box behind them (Tristan 4 Aug — the
   browser-default black block "doesn't look that great"). Legibility comes
   from a soft dark halo instead, which is how broadcast subtitles do it.
   ⚠ A gradient veil over the base of the frame does NOT work as an
   alternative: cues are painted by the video element itself, so any overlay
   stacked above the video dims the text along with the picture. Only the
   properties WebVTT allows on ::cue are available here — background, color,
   opacity, text-shadow, font, outline — so no padding and no border-radius. */
.vplay video::cue {
  background: transparent; color: #fff; line-height: 1.35;
  text-shadow:
    0 0 2px rgb(0 0 0 / .95),
    0 1px 2px rgb(0 0 0 / .95),
    0 2px 9px rgb(0 0 0 / .85),
    0 0 20px rgb(0 0 0 / .6);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}
/* Phones: roughly double the default cue size (Tristan 4 Aug). The browser's
   default is a fraction of the video height, so a percentage keeps it
   proportional rather than pinning a pixel size that breaks on other handsets.
   The halo is scaled up to match — text-shadow blur is in px, so it would
   otherwise look proportionally thinner behind the larger type.
   ⚠ iOS applies the viewer's own Accessibility caption size on top of this. */
@media (max-width: 700px) {
  .vplay video::cue {
    font-size: 200%; line-height: 1.25;
    text-shadow:
      0 0 3px rgb(0 0 0 / .95),
      0 2px 4px rgb(0 0 0 / .95),
      0 3px 14px rgb(0 0 0 / .85),
      0 0 28px rgb(0 0 0 / .6);
  }
}
/* The "Tap for sound" badge sits bottom-right, exactly where cues render — move
   it clear on the captioned film only, so the uncaptioned one is unchanged. */
.vplay[data-captions] .sound-hint { top: 14px; bottom: auto; }

/* The transcript panel that sat under the testimonial film was removed 4 Aug at
   Tristan's request. Its CSS went with it — nothing else used .transcript. */

/* ---------- employment opening copy (Tristan's merged text, 4 Aug) ---------- */
/* Body copy spans the full wrap so its edges line up with the value tiles and
   the photo band above (Tristan 4 Aug - "the text doesn't align with the tiles
   or the Photo").
   DO NOT REINTRODUCE COLUMNS. An .emp-copy--cols class used to set
   `columns: 2` above 900px, to keep the line length readable at that width.
   Tristan, 5 Aug: "there's columns on the employment page. Please fix." The
   class is gone from employment.js and the rule is gone from here. If the
   lines ever need shortening, cap the width instead. */
.emp-copy { max-width: none; }
.emp-copy p { margin-bottom: 14px; }
.emp-copy p:last-child { margin-bottom: 0; }
.emp-lead { margin-top: 22px; }
.emp-copy .close, .emp-close { font-weight: 600; margin-top: 22px; }
.emp-copy .close { font-weight: 600; margin-top: 4px; }
.emp-copy + .values { margin-top: 24px; }
.values + .emp-copy { margin-top: 30px; }

/* ---------- values ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value { background: var(--sur); border-radius: var(--r); padding: 26px 22px; box-shadow: var(--shadow); }
.value .num { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; color: var(--ac); font-weight: 700; }
.value .bar { height: 3px; width: 44px; border-radius: 3px; background: var(--mist2); margin: 10px 0 12px; }
.value h3 { font-size: 20px; margin-bottom: 6px; }
.value p:not(.num) { font-size: 14.5px; color: var(--muted); }

/* ---------- Google reviews carousel ---------- */
.gset--reviews .ggrid figure { aspect-ratio: auto; }
.gset--reviews .ghead { margin-bottom: 0; min-height: 0; justify-content: flex-end; }
.sec-head .rev-agg { margin-top: 10px; font-size: 15px; }
.rcard {
  flex: 0 0 calc((100% - 28px) / 3); scroll-snap-align: start;
  background: var(--sur); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 24px 22px 20px; margin: 0; display: flex; flex-direction: column;
}
.rcard .stars { color: var(--ac); font-size: 15px; letter-spacing: 2px; margin-bottom: 8px; }
.rcard blockquote { margin: 0; }
.rcard blockquote p { font-size: 14.5px; color: var(--ink); }
.rcard figcaption { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.rcard figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.rev-agg { color: var(--muted); }
.rev-agg b { color: var(--ac); letter-spacing: 2px; }
@media (max-width: 820px) { .rcard { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 520px) { .rcard { flex-basis: 86%; } }

/* ---------- quote ---------- */
.quote { max-width: 760px; margin: 0 auto; text-align: center; padding: 8px 0; }
.quote .mark { font-family: Georgia, 'Times New Roman', serif; font-size: 64px; line-height: .4; color: var(--ac); }
.quote blockquote p { font-size: 20px; font-family: Georgia, 'Times New Roman', serif; }
.quote figcaption { margin-top: 16px; font-weight: 700; font-size: 14px; color: var(--ink); }
.quote figcaption span { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }

/* ---------- CTA band (steel blue) ---------- */
.cta-band {
  background: var(--band); color: #fff; text-align: center;
  border-radius: var(--r); padding: 56px 24px; margin-bottom: 34px;
}
.cta-band .eyebrow { color: var(--on-dark); }
.cta-band p { max-width: 560px; margin: 0 auto 10px; color: var(--on-dark); }
.cta-band a { color: #fff; }
.cta-band .btn { background: #fff; color: var(--band); margin-top: 12px; }
.cta-band .hours { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: 14.5px; margin-top: 14px; }
.cta-band .hours a { font-weight: 700; }

/* ---------- Cognito seamless form, styled to the site ---------- */
.cognito-host {
  background: var(--sur); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 30px 30px 36px;
}
.cognito-host .cog-form, .cognito-host .cog-form * { font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; }
.cognito-host .cog-form { background: transparent; }
.cognito-host .cog-header { background: transparent; border: 0; padding: 0 0 8px; }
.cognito-host .cog-header .cog-heading, .cognito-host .cog-page-heading,
.cognito-host .cog-form h1, .cognito-host .cog-form h2 { font-family: Georgia, 'Times New Roman', serif; color: var(--ink); }
.cognito-host .cog-label, .cognito-host .cog-field .cog-label { color: var(--ink); font-weight: 600; font-size: .92rem; }
.cognito-host .cog-help { color: var(--muted); }
.cognito-host .cog-form { --highlight: var(--ac); }
.cognito-host .el-input__inner, .cognito-host .el-textarea__inner, .cognito-host select,
.cognito-host input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]) {
  border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff !important;
  color: var(--ink) !important; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.cognito-host .el-input__inner:focus, .cognito-host .el-textarea__inner:focus,
.cognito-host input:focus, .cognito-host select:focus, .cognito-host textarea:focus {
  outline: 2px solid var(--ink) !important; outline-offset: 1px; border-color: var(--ink) !important;
}
.cognito-host input[type=radio], .cognito-host input[type=checkbox] { accent-color: var(--ac); }
.cognito-host .cog-button, .cognito-host .el-button {
  border-radius: 48px !important; font-weight: 700 !important; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.cognito-host .cog-button--submit, .cognito-host .cog-button--primary {
  background: var(--ac) !important; border-color: var(--ac) !important; color: #fff !important;
  padding: 12px 26px !important;
}
.cognito-host .cog-button--submit:hover, .cognito-host .cog-button--primary:hover { filter: brightness(1.06); }
.cognito-host .cog-button--secondary {
  background: #fff !important; border: 1px solid var(--ink) !important; color: var(--ink) !important;
}
.cognito-host .cog-button--secondary:hover { background: var(--mist) !important; }
.cognito-host .cog-loading { color: var(--muted); display: flex; align-items: center; gap: 10px; }
/* Placeholder while the (third-party) Cognito script loads: keeps the block
   the right size so nothing jumps, and makes a slow load read as "loading"
   rather than "broken". Removed the moment the real form renders. */
.cog-spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--mist2); border-top-color: var(--ac);
  animation: cog-spin 0.8s linear infinite;
}
@keyframes cog-spin { to { transform: rotate(360deg); } }
.cog-skeleton { margin-top: 18px; display: grid; gap: 18px; }
.cog-skeleton span {
  display: block; height: 44px; border-radius: 10px;
  background: linear-gradient(90deg, var(--mist) 25%, var(--mist2) 37%, var(--mist) 63%);
  background-size: 400% 100%; animation: cog-sheen 1.4s ease infinite;
}
.cog-skeleton span:nth-child(4) { height: 96px; }
@keyframes cog-sheen { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .cog-spin, .cog-skeleton span { animation: none; }
}
/* enquiry embed: attribution fields are filled from the URL, never shown */
.cognito-host--enquiry .cog-field--10, .cognito-host--enquiry .cog-field--11,
.cognito-host--enquiry .cog-field--12, .cognito-host--enquiry .cog-field--13 { display: none !important; }

/* ---------- embeds (OWNA / Cognito) ---------- */
.embed { margin-top: 34px; }
.frame { background: var(--sur); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.frame iframe { display: block; width: 100%; border: 0; min-height: 900px; }
.fallback { text-align: center; font-size: 14px; color: var(--muted); margin-top: 14px; }

.foot-serving { margin: 26px 0 0; font-size: 14px; color: var(--on-dark-dim); }
.foot-serving strong { color: var(--on-dark); font-weight: 600; }

/* ---------- FAQs ---------- */
.faq-list { max-width: 780px; margin: 0 auto; }
/* FAQ page: accordion left, photo right (Tristan 4 Aug — "push it left, photo on the right") */
.faq-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; align-items: start; }
.faq-split .faq-list { max-width: none; margin: 0; }
.faq-photo { margin: 0; position: sticky; top: 112px; }
.faq-photo img {
  display: block; width: 100%; height: clamp(380px, 48vw, 580px); object-fit: cover;
  border-radius: var(--r); box-shadow: var(--shadow-lift);
}
@media (max-width: 900px) {
  .faq-split { grid-template-columns: 1fr; gap: 22px; }
  .faq-photo { position: static; order: -1; }
  .faq-photo img { height: clamp(180px, 34vw, 280px); }
}
.faq-item {
  background: var(--sur); border-radius: var(--r); box-shadow: var(--shadow);
  margin-bottom: 12px; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px;
  padding: 20px 24px; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 18px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--ac); font-weight: 700; font-size: 22px; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .answer { padding: 0 24px 20px; color: var(--muted); font-size: 15px; }

/* ---------- footer (navy) ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-dim); margin-top: 72px; font-size: 14.5px; }
.site-footer .wrap { padding-top: 52px; padding-bottom: 26px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; padding-bottom: 34px; }
.foot-logo { height: 58px; width: auto; margin-bottom: 16px; }
.site-footer h2 { font-size: 15px; color: #fff; margin-bottom: 12px; }
.site-footer a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer li { padding: 3px 0; }
.site-footer address { font-style: normal; }
.foot-bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid rgb(255 255 255 / .14); padding-top: 18px; font-size: 13px; color: var(--on-dark-dim);
}

/* ==========================================================================
   FEE PAGE — ported from fees-v2 (marketing's reference), restyled 25 v2.
   Class names preserved verbatim: the calculator JS toggles them.
   ========================================================================== */
.staffbar { background: var(--ink); color: var(--warm-line); padding: 10px 22px; font-size: .82rem; letter-spacing: .02em; }
.staffbar strong { color: #fff; letter-spacing: .08em; }
.staffbar code { background: rgb(255 255 255 / .12); padding: 1px 6px; border-radius: 4px; }

.feewrap { max-width: 900px; margin: 0 auto; padding: 0 22px; }
.feewrap section { padding: 44px 0; border-bottom: 1px solid var(--line); }
.feewrap section:last-of-type { border-bottom: 0; }
.feewrap h2 { font-size: 1.5rem; margin: 0 0 6px; }
.feewrap h2 .step {
  display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .8rem; margin-right: 10px; vertical-align: 3px;
  font-weight: 600; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.feewrap .sub { color: var(--muted); margin: 0 0 24px; font-size: .96rem; max-width: 64ch; }
.calc { background: var(--sur); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.calc .pad { padding: 24px 26px; }
.calc label, .estimator label {
  display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; margin-bottom: 6px; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.calc select, .calc input[type=number] {
  width: 100%; padding: 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-size: .93rem; font-family: inherit; color: var(--ink);
}
#sess { max-width: 230px; }
.calc select:focus, .calc input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 20px; }
.hint { font-size: .78rem; color: var(--muted); margin: 6px 0 0; }
.overrun {
  font-size: .82rem; margin: 10px 0 0; padding: 11px 13px; border-radius: 10px;
  background: var(--warm); border: 1px solid var(--warm-line); border-left: 3px solid var(--ac); color: var(--warm-ink); line-height: 1.5;
}
.overrun strong { color: var(--warm-ink); }
.child { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; background: var(--sur); }
.child h4 { margin: 0 0 14px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; }
.child h4 button { float: right; background: none; border: 0; color: var(--muted); font-size: .78rem; cursor: pointer; text-transform: none; letter-spacing: 0; text-decoration: underline; }
.addbtn {
  background: #fff; border: 1px dashed var(--line); color: var(--ink); padding: 10px 16px; border-radius: 10px;
  cursor: pointer; font-size: .9rem; font-family: inherit; font-weight: 600;
}
label.switch {
  display: inline-flex; align-items: center; gap: 11px; margin-left: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px 9px 13px; background: #fff;
  font-size: .9rem; font-weight: 600; color: var(--ink); vertical-align: top;
  text-transform: none; letter-spacing: 0; margin-bottom: 0;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 38px; height: 21px; border-radius: 20px; background: var(--line); position: relative; transition: background .2s ease; flex: none; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .2s ease; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.switch input:checked + .track { background: var(--ac); }
.switch input:checked + .track .knob { transform: translateX(17px); }
.switch.on { border-color: var(--ac); background: var(--warm); }
.calc select:disabled { opacity: 1; cursor: default; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; padding-right: 12px; }
.estimator { margin-top: 18px; border: 1px solid var(--warm-line); background: var(--warm); border-radius: 14px; padding: 22px 24px; }
.estimator h4 { margin: 0 0 4px; font-size: 1.02rem; color: var(--warm-ink); }
.estimator label { color: var(--warm-ink); }
.estimator .hint { color: var(--warm-ink); }
.incomeval { font-size: 1.8rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 8px; line-height: 1; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; }
.estimator input[type=range] { width: 100%; accent-color: var(--ac); margin: 0; }
.scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--warm-ink); margin-top: 2px; }
select.isEst { background: var(--good-soft); border-color: var(--good); color: var(--ink); font-weight: 600; }
select.pulse { background: var(--good-soft); transition: none; }
select[data-ccs] { transition: background-color .55s ease, border-color .3s ease; }
.estresult div.changed span:last-child { animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(1); } 30% { transform: scale(1.14); color: var(--ac); } 100% { transform: scale(1); } }
.estresult { margin: 18px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: .94rem; }
.estresult div { display: flex; justify-content: space-between; padding: 5px 0; }
.estresult div span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.estresult .lead { color: var(--good); }
.applybtn { margin-top: 14px; background: var(--ink); color: #fff; border: 0; padding: 11px 22px; border-radius: 10px; font-weight: 600; font-size: .94rem; font-family: inherit; cursor: pointer; }
.days { display: flex; gap: 8px; flex-wrap: wrap; }
.days label.day {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 13px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: .94rem; font-weight: 500; color: var(--ink); margin: 0; background: #fff;
}
.days label.day.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.days input { accent-color: var(--ac); }
.result { background: linear-gradient(155deg, var(--ink), var(--ink)); color: #fff; padding: 26px; }
.result .lead { font-size: 2.7rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; font-family: Georgia, 'Times New Roman', serif; }
.result .unit { font-size: .98rem; color: var(--on-dark-dim); margin-left: 4px; }
.result .note { color: var(--on-dark-dim); font-size: .9rem; margin: 12px 0 0; }
.detail { border-top: 2px solid var(--ink); background: var(--mist); padding: 20px 26px; font-size: .86rem; }
.detail h5 { margin: 0 0 10px; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; }
.detail h5:not(:first-child) { margin-top: 22px; }
.detail table { width: 100%; border-collapse: collapse; font-size: .8rem; background: #fff; border: 1px solid var(--line); }
.detail th { background: var(--mist); text-align: right; padding: 7px 8px; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.detail th:first-child, .detail td:first-child { text-align: left; }
.detail td { padding: 6px 8px; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.detail tr.off td { color: var(--muted); }
.detail tr.short td { background: var(--warm); }
.detail .kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-variant-numeric: tabular-nums; }
.detail .kv b { font-weight: 700; }
.detail .flag { border-left: 3px solid var(--ac); background: var(--warm); padding: 10px 13px; border-radius: 8px; margin-top: 9px; color: var(--warm-ink); line-height: 1.5; }
.detail .flag b { color: var(--warm-ink); }
.detail .kidhead { font-weight: 700; color: var(--ink); margin: 20px 0 8px; font-size: .95rem; }
.daybreak { background: #fff; padding: 18px 26px; border-top: 1px solid var(--line); }
.disclose {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--warm); border: 1px solid var(--warm-line); border-radius: 10px; padding: 13px 16px; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--warm-ink); text-align: left;
}
.disclose:hover { background: var(--warm-line); }
.disclose i { font-style: normal; transition: transform .2s ease; color: var(--ac); }
.disclose.open i { transform: rotate(180deg); }
.disclose + #breakWrap { margin-top: 14px; }
.daybreak table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.daybreak td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.daybreak td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.daybreak tr:last-child td { border-bottom: 0; }
.daybreak .fk { color: var(--good); }
.tag { display: inline-block; background: var(--good-soft); color: var(--good); border-radius: 20px; padding: 1px 9px; font-size: .72rem; font-weight: 700; margin-left: 7px; vertical-align: 1px; }
table.fees { width: 100%; border-collapse: collapse; font-size: .94rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.fees th { background: var(--mist); text-align: left; padding: 12px 14px; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
table.fees td { padding: 12px 14px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.fees td:first-child { font-weight: 600; font-variant-numeric: normal; }
.feewrap .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: none; }
.feewrap .card h3 { margin: 0 0 12px; font-size: 1rem; }
ul.tick { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
ul.tick li { padding: 5px 0 5px 25px; position: relative; }
ul.tick li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 6px; border-left: 2.5px solid var(--good); border-bottom: 2.5px solid var(--good); transform: rotate(-45deg); }
.feewrap .cta { display: inline-block; background: var(--ac); color: #fff; text-decoration: none; padding: 13px 24px; border-radius: 48px; font-weight: 600; }
.cta-alt { background: #fff; color: var(--ink); border: 1px solid var(--ink); font-family: inherit; font-size: 1rem; cursor: pointer; line-height: 1.2; }
.cta-alt:hover { background: var(--mist); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fine { font-size: .84rem; color: var(--muted); }
details.disc { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-top: 12px; }
details.disc summary { cursor: pointer; font-weight: 600; font-size: .94rem; }
details.disc p { font-size: .85rem; color: var(--muted); margin: 10px 0 0; }
.feefoot { padding: 24px 0 10px; font-size: .8rem; color: var(--muted); }
#copyBox { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid, .programs { grid-template-columns: 1fr 1fr; }
  .showcase, .split { grid-template-columns: 1fr; gap: 26px; }
  .split.rev .media { order: 0; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .day-trio { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .journey { display: none; }
  .result .lead { font-size: 2.2rem; }
}
@media (max-width: 560px) {
  .grid, .programs { grid-template-columns: 1fr; }
  .section { padding-block: 48px; }
}

/* ---- gallery lightbox ---- */
.gbtn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.gbtn img { display: block; }
.lbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(31, 42, 68, .94); opacity: 0; transition: opacity .22s ease; }
.lbox.open { display: flex; opacity: 1; }
.lbox-lock, .lbox-lock body { overflow: hidden; }
.lbox-fig { margin: 0; max-width: min(1400px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lbox-fig img { max-width: 100%; max-height: calc(88vh - 44px); object-fit: contain; border-radius: 12px; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
.lbox-cap { color: var(--on-dark); font-size: 15px; text-align: center; padding: 0 12px; }
.lbox-close, .lbox-nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; font-size: 20px; cursor: pointer; transition: background .18s ease; }
.lbox-close:hover, .lbox-nav:hover { background: rgba(255, 255, 255, .28); }
.lbox-close:focus-visible, .lbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lbox-close { top: 18px; right: 18px; }
.lbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lbox-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: var(--on-dark-dim); font-size: 14px; margin: 0; }
/* Phones: the lightbox goes TRUE full-screen (Tristan, 4 Aug — "either they
   go full screen, or we ditch the lightbox"). Image fills the viewport,
   arrows drop to the bottom corners clear of the photo, swipe is native. */
@media (max-width: 700px) {
  .lbox { background: rgb(10 14 24 / .97); }
  .lbox-fig { max-width: 100vw; max-height: 100vh; max-height: 100dvh; gap: 0; }
  .lbox-fig img {
    max-width: 100vw; max-height: 100vh; max-height: 100dvh;
    border-radius: 0; box-shadow: none;
  }
  .lbox-cap {
    position: fixed; left: 0; right: 0; bottom: 60px; padding: 0 16px;
    text-shadow: 0 1px 10px rgb(0 0 0 / .85); font-size: 14px;
  }
  .lbox-close { top: 10px; right: 10px; }
  .lbox-prev, .lbox-next {
    top: auto; bottom: 10px; transform: none; width: 42px; height: 42px;
    background: rgb(255 255 255 / .10);
  }
  .lbox-prev { left: 12px; } .lbox-next { right: 12px; }
  .lbox-count { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lbox { transition: none; }
}

/* ---- fee tables on small phones (<=420px): scroll inside their box
        instead of stretching the page (caught by responsive CI, iPhone SE;
        420px also covers 390px phones when web fonts fall back wider) ---- */
@media (max-width: 420px) {
  table.fees, .detail table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.fees th, table.fees td { padding: 10px 8px; font-size: .85rem; }
}