/* ============================================================
   SOL & SON DUAL LANGUAGE ACADEMY — shared site system
   "Sol — Brighter" (approved). Full brand palette used as a
   joyful, confident multicolor SUN system. Bright + warm +
   community-rooted — trust over polish.
   This file = the reusable component layer:
   tokens · reset · buttons · header · footer · sun emblem ·
   sections · cards · forms · accordion · sticky TOC · page hero.
   ============================================================ */

/* ---------- Fonts: SELF-HOSTED (Aug 10, 2026) ----------
   Previously <link>ed from fonts.googleapis.com, which put a 3-hop
   cross-origin chain (html -> googleapis CSS -> gstatic woff2) on the
   critical path and delayed the H1 — the LCP element — by ~1s.
   Serving them from our own origin removes that chain entirely (and
   keeps visitor data off Google's servers).
   Each file is a VARIABLE font: one file covers its whole weight range.
   unicode-range keeps latin-ext off the wire unless the page needs it;
   the italic serif faces only download if italic serif text is used.
   Critical latin faces are <link rel="preload">ed in each page's head. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/inter-normal-latin.v2.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/inter-normal-latin-ext.v2.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/source-serif-4-normal-latin.v2.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/source-serif-4-normal-latin-ext.v2.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/source-serif-4-italic-latin.v2.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/source-serif-4-italic-latin-ext.v2.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root {
  /* Brand palette — the school's official tokens */
  --b-gold:   #FFAD01;
  --b-blue:   #022D8C;
  --b-green:  #027C4F;
  --b-pink:   #FC1170;
  --b-orange: #FD630A;
  /* TEXT-SAFE brand inks. The brand hexes above are tuned for large text,
     buttons, borders and dots; at small sizes they fail WCAG AA on white
     and cream. Use these whenever brand colour is carrying actual words.
       --kicker-ink #C2410C on white = 4.89:1 (brand orange was 3.01:1)
       --pink-ink   #C20E56 on white = 6.02:1, on #ffe0ee = 4.91:1 (was 3.85 / 3.14)
       --gold-ink   #7A5D1A on #FFE9B8 = 5.16:1 (was 4.22:1) */
  --kicker-ink: #C2410C;
  --pink-ink:   #C20E56;
  --gold-ink:   #7A5D1A;
  /* Warm supporting tones */
  --cream:      #FFF3D6;
  --cream-deep: #FFE9B8;
  --paper:      #FBF8F2;
  --ink:        #1B2438;
  --ink-soft:   #50596B;
  --line:       #ECE2CB;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 24px;

  --wrap: 1200px;
  --gutter: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip — NOT hidden. `clip` stops sideways scrolling without
   creating a scroll container, so the sticky article TOC and sticky legal nav
   keep working; `overflow-x: hidden` here would silently kill both. This is a
   backstop, not a licence to ship overflowing layouts: the structural fixes
   (min-width:0 on the multi-column containers, overflow-wrap on .prose) are
   what actually keep content on screen, and this only catches the last few
   stray pixels at 320px. Re-run the width sweep after layout changes rather
   than trusting this to hide problems. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 { font-family: var(--serif); line-height: 1.12; margin: 0; font-weight: 700; }
a { color: var(--b-green); }
button { font-family: inherit; cursor: pointer; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--b-blue);
  outline-offset: 2px;
  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;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--b-blue); color: #fff; padding: 10px 18px;
  border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none;
  transition: top .18s;
}
.skip-link:focus { top: 0; }

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

/* ---- Photo placeholder (warm stripes + monospace caption) ---- */
.ph {
  position: relative;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(135deg,
    rgba(255,173,1,0.10) 0 14px, rgba(255,173,1,0.18) 14px 28px);
  color: #8a6a1e;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #8a6a1e; opacity: 0.8; padding: 0.5em 0.9em;
  border: 1px dashed rgba(185,125,36,0.55); border-radius: 100px;
  background: rgba(255,255,255,0.6); max-width: 82%; line-height: 1.4;
}
.ph.has-photo { background-color: var(--b-blue); background-size: cover; background-position: center; background-repeat: no-repeat; }
.ph.has-photo::after { content: none; }
/* Below-the-fold photos are deferred. Their URL lives in --bg, and a URL in an
   unused custom property is never fetched — the request only fires when
   site.js adds .bg-in and background-image: var(--bg) starts applying. The
   hero photo on each page is exempt (plain background-image + preload), and
   every affected page carries a <noscript> rule that restores these with JS
   off. No CLS risk: .ph is sized by CSS, never by its image. */
.ph.has-photo.lazy-bg { background-image: none; }
.ph.has-photo.lazy-bg.bg-in { background-image: var(--bg); }

/* =====================  BUTTONS  ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 700; font-size: 16px; padding: 15px 28px;
  border-radius: 100px; text-decoration: none; white-space: nowrap;
  min-height: 52px; border: 2px solid transparent;
  transition: transform .16s, background .16s, color .16s, box-shadow .16s;
}
.btn:active { transform: translateY(0); }
.btn-blue  { background: var(--b-blue); color: #fff; }
.btn-blue:hover  { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(2,45,140,.7); }
.btn-gold  { background: var(--b-gold); color: var(--b-blue); border-color: var(--b-blue); }
.btn-gold:hover  { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(255,173,1,.9); }
.btn-out   { background: transparent; color: var(--b-blue); border-color: var(--b-blue); }
.btn-out:hover   { background: var(--b-blue); color: #fff; }
.btn-white { background: #fff; color: var(--b-blue); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0,0,0,.5); }
.btn-lg { font-size: 17px; padding: 17px 34px; min-height: 58px; }
.btn-block { display: flex; justify-content: center; width: 100%; }

.alink {
  color: var(--b-green); font-weight: 700; text-decoration: none;
  display: inline-flex; gap: 7px; align-items: center;
  border-bottom: 2px solid var(--b-gold); padding-bottom: 2px;
  transition: gap .16s, border-color .16s;
}
.alink:hover { gap: 11px; border-color: var(--b-green); }

/* =====================  SUN EMBLEM  ===================== */
.sun-art { position: relative; aspect-ratio: 1; width: 100%; }
.sunburst { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; animation: spin 90s linear infinite; }
/* A spinning .sunburst sweeps an axis-aligned box up to 1.41x its own width, so
   a 337px sun overhangs its container by ~50px at 45°. `.hero` and `.tour-cta`
   already set overflow:hidden and contain theirs; these sections did not, and
   were leaning on the root-level `overflow-x: clip` to hide the overhang.
   That is not safe — an infinitely animating transform gets its own compositing
   layer, and iOS Safari lets that escape the root clip, so the page becomes
   horizontally pannable near the sun (reported on an iPhone, Aug 16 2026, on
   the landing page; the offender is `.people`, low on the page).
   Clip at the section that owns the sun instead. `clip`, not `hidden`: clip
   does not create a scroll container, so sticky descendants keep working and
   overflow-y stays visible. Any new section holding a `.sun-art` belongs here. */
.page-hero, .people, .hub-hero { overflow-x: clip; }
@keyframes spin { to { transform: rotate(360deg); } }
.sun-photo { position: absolute; inset: 19%; border-radius: 50%; border: 10px solid #fff; overflow: hidden;
  box-shadow: 0 26px 55px -26px rgba(2,45,140,.5); background-color: var(--cream-deep);
  background-size: cover; background-position: center; }

/* =====================  HEADER  ===================== */
/* CLS: the header ships EMPTY (<header id="site-header"></header>) and site.js
   fills it after first paint, which shoved the whole page down 83px. Reserve
   that height by ID so it applies before the .site-header class is added.
   83px = .nav height 80px + 3px border-bottom, constant at every breakpoint. */
#site-header { min-height: 83px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); border-bottom: 3px solid var(--b-gold); }
.nav { display: flex; align-items: center; gap: 22px; height: 80px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; flex: none; }
.brand img { height: 50px; width: auto; display: block; }
.nav-links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink); position: relative; padding: 4px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2.5px; background: var(--b-pink); transition: right .2s; border-radius: 2px; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
.nav-links a[aria-current="page"] { color: var(--b-blue); }
.lang { display: inline-flex; border: 2px solid var(--b-blue); border-radius: 100px; overflow: hidden; font-size: 13px; font-weight: 800; }
.lang button { border: 0; background: transparent; padding: 6px 12px; color: var(--b-blue); }
.lang button[aria-pressed="true"] { background: var(--b-blue); color: #fff; }
.menu-btn { display: none; background: var(--b-gold); border: 2px solid var(--b-blue); border-radius: 12px; width: 50px; height: 50px; }
.menu-btn svg { display: block; margin: auto; }
.drawer { display: none; }

/* =====================  SECTIONS  ===================== */
section { padding: clamp(60px, 8vw, 108px) 0; }
.kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kicker-ink); }
.kicker::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--b-pink); flex: none; }
.kicker .es { color: var(--ink-soft); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 13.5px; }
h1.title, h2.title { font-family: var(--serif); font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; margin: 14px 0 0; color: var(--b-blue); }
h2.title { font-size: clamp(31px, 4vw, 52px); }
h1.title { font-size: clamp(36px, 5vw, 62px); }
.lead { font-size: 18px; color: var(--ink-soft); line-height: 1.7; }
.center { text-align: center; }
.center .kicker { justify-content: center; }
.measure { max-width: 640px; }
.center.measure { margin-left: auto; margin-right: auto; }

/* =====================  PAGE HERO (interior pages)  ===================== */
.page-hero { background: radial-gradient(125% 95% at 82% 4%, #FFE7A0 0%, var(--cream) 40%, #FFFDF8 82%); padding: clamp(40px,5vw,72px) 0 clamp(44px,5vw,72px); }
.page-hero.hero-blue { background: var(--b-blue); }
.page-hero.hero-blue h1.title, .page-hero.hero-blue .crumbs a, .page-hero.hero-blue .crumbs { color: #fff; }
.page-hero.hero-blue .lead { color: #c2cdf0; }
.page-hero.hero-green { background: var(--b-green); }
.page-hero.hero-green h1.title { color: #fff; }
.page-hero.hero-green .lead { color: #cbeede; }
.page-hero .lead { margin-top: 16px; max-width: 60ch; }
.crumbs { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--b-green); text-decoration: underline; }
.crumbs .sep { opacity: 0.5; }

/* =====================  GENERIC CARD GRIDS  ===================== */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.split { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(32px,6vw,64px); align-items: center; }

/* Pillar card */
.pillar { background: #fff; border: 3px solid var(--b-blue); border-radius: 26px; padding: 34px; box-shadow: 9px 9px 0 var(--accent); transition: transform .18s, box-shadow .18s; text-decoration: none; color: inherit; display: block; }
.pillar:hover { transform: translate(-3px,-3px); box-shadow: 14px 14px 0 var(--accent); }
.pillar .ic { width: 58px; height: 58px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; margin-bottom: 20px; box-shadow: 0 8px 18px -8px var(--accent); }
.pillar .ic span { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.pillar h3 { font-family: var(--serif); font-size: 24px; margin-bottom: 8px; color: var(--b-blue); }
.pillar p { color: var(--ink-soft); margin: 0; font-size: 16px; }

/* Quote card */
.quote { background: #fff; border: 3px solid var(--accent); border-radius: 26px; padding: 32px; display: flex; flex-direction: column; }
.quote .big { font-family: var(--serif); font-size: 58px; line-height: 0.5; color: var(--accent); height: 30px; }
.quote p { font-family: var(--serif); font-size: 19px; line-height: 1.45; margin: 0 0 22px; color: var(--ink); }
.quote .who { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.av { width: 48px; height: 48px; border-radius: 50%; background: var(--b-blue); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; font-size: 15px; }
.quote .who b { display: block; font-size: 15px; color: var(--b-blue); }
.quote .who span { font-size: 13px; color: var(--ink-soft); }

/* Staff card */
.staff-card { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s; }
.staff-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(2,45,140,.5); border-color: var(--b-gold); }
.staff-card .photo { aspect-ratio: 4/5; }
/* No-photo staff cards: cream field + serif monogram + "coming soon" pill.
   The monogram reads data-initials; the pill reads data-label via the .ph
   base ::after. Set BOTH attributes on every staff placeholder — with no
   data-label the base pill renders as an empty dashed chip. */
.staff-card .ph:not(.has-photo) { background-image: none; flex-direction: column; gap: 16px; }
.staff-card .ph:not(.has-photo)::before {
  content: attr(data-initials);
  font-family: var(--serif); font-weight: 600; font-size: 42px; line-height: 1;
  color: var(--b-blue);
  width: 112px; height: 112px; border-radius: 50%;
  background: #fff; border: 3px solid var(--b-gold);
  display: grid; place-items: center;
  box-shadow: 0 12px 26px -16px rgba(2,45,140,.4);
}
.staff-card .body { padding: 20px 22px 24px; }
.staff-card h3 { font-size: 21px; color: var(--b-blue); }
.staff-card .role { font-size: 13.5px; font-weight: 700; color: var(--kicker-ink); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.staff-card .flags { margin-top: 12px; display: flex; gap: 6px; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 100px; background: var(--cream); color: #8a6a1e; }

/* Feature / info card */
.info-card { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); padding: 30px; }
.info-card h3 { font-size: 22px; color: var(--b-blue); margin-bottom: 8px; }
.info-card p { color: var(--ink-soft); margin: 0; }
.chip-num { width: 44px; height: 44px; border-radius: 50%; background: var(--accent, var(--b-gold)); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 20px; margin-bottom: 16px; }

/* Resource / article card */
.res-card { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s; }
.res-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(2,45,140,.5); border-color: var(--b-gold); }
.res-card .thumb { aspect-ratio: 16/10; }
.res-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.res-card .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kicker-ink); }
.res-card :is(h2, h3) { font-size: 22px; color: var(--b-blue); line-height: 1.15; }
.res-card p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.res-card .more { margin-top: auto; color: var(--b-green); font-weight: 700; }

/* Event card */
.event-card { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s; }
.event-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(2,45,140,.5); border-color: var(--b-gold); }
.event-card .thumb { aspect-ratio: 16/10; position: relative; }
.event-card .datechip { position: absolute; top: 14px; left: 14px; background: #fff; border-radius: var(--r-md); padding: 8px 12px; text-align: center; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); }
.event-card .datechip .m { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink-ink); }
.event-card .datechip .d { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--b-blue); line-height: 1; }
.event-card .body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.event-card .etype { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kicker-ink); }
.event-card h3 { font-size: 20px; color: var(--b-blue); line-height: 1.18; }
.event-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* Grade card */
.grade-card { background: #fff; border: 3px solid var(--b-blue); border-radius: 26px; padding: 30px; box-shadow: 8px 8px 0 var(--accent); text-decoration: none; color: inherit; display: block; transition: transform .18s, box-shadow .18s; }
.grade-card:hover { transform: translate(-3px,-3px); box-shadow: 13px 13px 0 var(--accent); }
.grade-card.future { border-style: dashed; border-color: var(--ink-soft); box-shadow: none; opacity: 0.92; }
.grade-card .status { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.grade-card .status.now { color: var(--b-green); }
.grade-card .status.soon { color: var(--ink-soft); }
.grade-card h3 { font-size: 26px; color: var(--b-blue); margin: 8px 0 6px; }
.grade-card .ratio { font-weight: 800; color: var(--b-orange); }

/* Tuition tier card */
.tier { background: #fff; border: 3px solid var(--b-blue); border-radius: 26px; padding: 30px; display: flex; flex-direction: column; box-shadow: 8px 8px 0 var(--b-blue); }
.tier.feature { border-color: var(--b-green); box-shadow: 8px 8px 0 var(--b-green); }
.tier .tname { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.tier .tprice { font-family: var(--serif); font-size: 52px; font-weight: 700; color: var(--b-green); line-height: 1; margin: 10px 0 2px; }
.tier .tprice small { font-size: 18px; color: var(--ink-soft); font-weight: 500; }
.tier .tsub { font-size: 14px; color: var(--ink-soft); }
.tier ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.tier li { font-size: 14.5px; color: var(--ink); display: flex; gap: 9px; align-items: flex-start; }

/* Small stat facts row */
.facts { display: flex; gap: 32px; flex-wrap: wrap; }
.facts b { font-family: var(--serif); font-size: 34px; color: var(--b-pink); display: block; line-height: 1; }
.facts span { font-size: 14px; color: var(--ink-soft); }

/* =====================  FORMS  ===================== */
.form-card { background: #fff; border: 3px solid var(--b-blue); border-radius: 30px; padding: clamp(26px,4vw,44px); box-shadow: 12px 12px 0 var(--b-gold); }
.field { margin-bottom: 20px; }
.field > label { display: block; font-size: 14px; font-weight: 700; color: var(--b-blue); margin-bottom: 7px; }
.field .req { color: var(--b-pink); }
.field .hint { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; margin-top: 4px; }
.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 15px; border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--b-blue); background: #fff; box-shadow: 0 0 0 3px rgba(2,45,140,.12); outline: none; }
.textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; padding: 10px 16px; border: 2px solid var(--line); border-radius: 100px; font-size: 14px; font-weight: 700; color: var(--ink-soft); background: var(--paper); transition: all .14s; }
.seg input:checked + span { border-color: var(--b-blue); background: var(--b-blue); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--b-blue); outline-offset: 2px; }
.field.error .input, .field.error .select, .field.error .textarea { border-color: var(--b-pink); }
.err-msg { display: none; color: var(--b-pink); font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.field.error .err-msg { display: block; }
.form-success { display: none; text-align: center; padding: 20px 8px; }
.form-success.show { display: block; }
.form-success .tick { width: 68px; height: 68px; border-radius: 50%; background: var(--b-green); display: grid; place-items: center; margin: 0 auto 18px; }
.form-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }

/* =====================  ACCORDION  ===================== */
.acc { border-top: 2px solid var(--line); }
.acc-item { border-bottom: 2px solid var(--line); }
.acc-q { width: 100%; text-align: left; background: none; border: 0; padding: 22px 46px 22px 0; font-family: var(--serif); font-size: clamp(18px,2.2vw,22px); font-weight: 600; color: var(--b-blue); position: relative; display: block; }
.acc-q::after { content: ""; position: absolute; right: 6px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FC1170' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); transition: transform .2s; }
.acc-item.open .acc-q::after { transform: translateY(-50%) rotate(135deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.acc-a .acc-a-inner { padding: 0 46px 24px 0; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.acc-item.open .acc-a { max-height: 600px; }

/* =====================  STICKY TOC (long-form article)  ===================== */
.article-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px,5vw,64px); align-items: start; }
/* min-width:0 is load-bearing on every multi-column layout in the build.
   Flex and grid children default to min-width:auto, so a track refuses to
   shrink below its widest unbreakable content and pushes the whole page wider
   than the screen — the reader gets a horizontal scrollbar. Found live on
   Aug 16 2026 in three separate places: a bare URL in the scholarship guide
   (.article-layout), the tour page's date rows (.date-row), and the legal
   sidebar (.legal-layout). Pairs with .prose's overflow-wrap below — this lets
   the track shrink, that lets a long token wrap instead of spilling. Both are
   needed. Add any new multi-column container to this list.
   Note both levels are listed for the tour rows: .date-row is itself a grid
   item of .dates-list (so the row must be allowed to shrink) AND a flex
   container of its own (so its children must be too). Fixing only the inner
   level leaves the bug in place.
   Verify with the 320/360/375 sweep before shipping layout changes. */
.article-layout > *, .legal-layout > *, .dates-list > *, .date-row > * { min-width: 0; }
.toc { position: sticky; top: 100px; }
.toc h4 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.toc a { display: block; text-decoration: none; color: var(--ink-soft); font-size: 14.5px; font-weight: 600; padding: 7px 0 7px 14px; border-left: 3px solid var(--line); transition: color .15s, border-color .15s; }
.toc a:hover { color: var(--b-blue); }
.toc a.active { color: var(--b-blue); border-color: var(--b-pink); }
.prose { font-size: 18px; color: var(--ink); line-height: 1.75; max-width: 68ch; overflow-wrap: break-word; }
.prose h2 { font-size: clamp(26px,3vw,36px); color: var(--b-blue); margin: 48px 0 14px; scroll-margin-top: 100px; }
.prose h3 { font-size: 22px; color: var(--b-blue); margin: 34px 0 10px; }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
/* :not(.btn) is load-bearing — .prose a (0,1,1) outranks .btn-blue (0,1,0),
   which painted every in-article button's label green on navy (2.27:1). */
.prose a:not(.btn) { color: var(--b-green); font-weight: 600; }
.pullquote { font-family: var(--serif); font-size: clamp(24px,3vw,32px); font-weight: 600; color: var(--b-blue); line-height: 1.3; border-left: 5px solid var(--b-gold); padding: 6px 0 6px 24px; margin: 36px 0; }
.inline-cta { background: var(--cream); border: 2px solid var(--b-gold); border-radius: var(--r-lg); padding: 28px 30px; margin: 40px 0; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.inline-cta p { margin: 0; font-family: var(--serif); font-size: 21px; color: var(--b-blue); font-weight: 600; }

/* =====================  BANDED SECTION BACKGROUNDS  ===================== */
.bg-cream { background: var(--cream); }
.bg-paper { background: var(--paper); }
.bg-blue { background: var(--b-blue); color: #fff; }
.bg-blue h2.title, .bg-blue h1.title { color: #fff; }
.bg-blue .lead { color: #c2cdf0; }
.bg-green { background: var(--b-green); color: #eafff5; position: relative; overflow: hidden; }
.bg-green h2.title { color: #fff; } .bg-green .lead { color: #c8eedd; }
.bg-green .kicker { color: var(--b-gold); } .bg-green .kicker::before { background: #fff; }
.bg-gold { background: var(--b-gold); position: relative; overflow: hidden; }
.bg-gold h2.title { color: var(--b-blue); } .bg-gold .lead { color: #5a4413; }
.bg-gold .kicker { color: var(--b-blue); } .bg-gold .kicker::before { background: var(--b-blue); }
.glow-tr::before { content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.32), transparent 62%); }
.glow-bl::after { content:""; position:absolute; left:-120px; bottom:-160px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(255,173,1,.22), transparent 64%); }

/* Photo treatment — "sticker" bordered photo */
.photo-sticker { border-radius: 26px; border: 4px solid var(--b-blue); box-shadow: 12px 12px 0 var(--b-gold); }
.photo-round { border-radius: var(--r-lg); }

/* Bulleted checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 11px; font-size: 16px; align-items: flex-start; }
.checklist li svg { flex: none; margin-top: 3px; }

/* =====================  TOUR CTA band (reusable)  ===================== */
.tour-cta { background: var(--b-blue); color: #fff; text-align: center; position: relative; overflow: hidden; }
.tour-cta::before { content:""; position:absolute; left:50%; top:-180px; transform:translateX(-50%); width:520px; height:520px; border-radius:50%; background: radial-gradient(circle, rgba(255,173,1,.26), transparent 60%); }
.tour-cta .wrap { position: relative; }
.tour-cta .sun-art { width: 96px; margin: 0 auto 6px; }
.tour-cta h2 { font-family: var(--serif); font-size: clamp(30px,4.4vw,52px); color: #fff; max-width: 20ch; margin: 14px auto 16px; line-height: 1.04; }
.tour-cta p { color: #c2cdf0; font-size: 18px; max-width: 52ch; margin: 0 auto 30px; }

/* =====================  FOOTER  ===================== */
.site-footer { background: var(--b-blue); color: #c2cdf0; }
.foot-rainbow { height: 6px; display: flex; }
.foot-rainbow i { flex: 1; }
.site-footer .foot-body { padding: 48px var(--gutter) 38px; }
.site-footer .brand img { height: 54px; filter: brightness(0) invert(1); opacity: .96; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.foot-col h4 { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.foot-col a { display: block; color: #c2cdf0; text-decoration: none; font-size: 15px; padding: 5px 0; }
.foot-col a:hover { color: var(--b-gold); }
.foot-contact { font-size: 15px; line-height: 1.8; margin-top: 16px; }
.foot-contact a { color: #c2cdf0; text-decoration: none; }
.foot-social { display: flex; gap: 12px; margin-top: 16px; }
.foot-social a { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); display: grid; place-items: center; color: #fff; }
.foot-social a:hover { background: var(--b-gold); border-color: var(--b-gold); color: var(--b-blue); }
.nondiscrim { border-top: 1px solid rgba(255,255,255,0.18); margin-top: 40px; padding-top: 22px; font-size: 12.5px; line-height: 1.7; color: #9aa6cd; max-width: 96ch; }
.foot-legal { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; align-items: center; }
.foot-legal a { color: #c2cdf0; text-decoration: none; }
.foot-legal a:hover { color: var(--b-gold); }
/* a11y: #7f8cbd on --b-blue was 3.63:1. #9aa6cd (already the .nondiscrim tone) = 4.96:1. */
.foot-credit { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9aa6cd; text-decoration: none; }
.foot-credit:hover { color: var(--b-gold); }
.foot-credit .cs { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, var(--b-gold), var(--b-orange)); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 12px; color: var(--b-blue); }

/* =====================  UTILITIES  ===================== */
.stack-sm > * + * { margin-top: 10px; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }
.hr { border: 0; border-top: 2px solid var(--line); margin: 0; }

/* =====================  RESPONSIVE  ===================== */
.drawer { display: none; }
@media (max-width: 1024px) {
  .nav-links, .nav .lang, .nav > .btn-gold { display: none; }
  .menu-btn { display: block; }
  .split, .article-layout { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); }
  .toc { position: static; top: auto; display: none; }
  /* inset: 0 — the drawer covers the viewport edge to edge and brings its own
     logo row and close button (.drawer-top). It used to start at 80px to let
     the sticky header show through, but opening the drawer sets
     `overflow:hidden` on <body>, which makes <body> the scroll container; a
     position:sticky header then has nothing to stick to and paints at its
     static position, off-screen on any scrolled page. That left a bare band of
     page content at the top and put the only close control out of reach.
     z-index must beat .site-header (50). Do not reintroduce a top offset. */
  .drawer.open { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--cream); z-index: 60; overflow-y: auto; overscroll-behavior: contain; }
  /* Solid white, not the site header's translucent rgba: this row is sticky and
     the menu scrolls under it on short screens, so any transparency lets the
     links show through the logo. The page header gets away with rgba only
     because it pairs it with backdrop-filter. */
  .drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 80px; padding: 0 28px; border-bottom: 3px solid var(--b-gold); background: #fff; flex: none; position: sticky; top: 0; z-index: 1; }
  .drawer-top .brand img { height: 50px; width: auto; display: block; }
  .drawer-close { background: var(--b-gold); border: 2px solid var(--b-blue); border-radius: 12px; width: 50px; height: 50px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .drawer-body { padding: 28px; }
  .drawer .nav-links { display: flex; flex-direction: column; gap: 0; }
  /* display:block is load-bearing. These inherit .nav-links a, which is inline
     for the desktop hover underline — and on an inline box vertical padding
     does not build the row, so the 14px padding-bottom pushed the border that
     far below the text and the border only spanned the word rather than the
     row. Blocks make the padding real: the rule now sits just under each link
     and runs the full width, as a list divider should. */
  .drawer .nav-links a { display: block; font-family: var(--serif); font-size: 23px; padding: 13px 0 7px; border-bottom: 2px solid var(--line); color: var(--b-blue); }
  .drawer .nav-links a::after { display: none; }
  /* Stacked, not side by side: the toggle and the tour button used to be two
     inline-flex siblings sharing a row, which crowded them and left them
     misaligned by 14px on a phone. */
  .drawer-actions { display: flex; flex-direction: column; align-items: stretch; gap: 28px; margin-top: 34px; }
  .drawer .lang { display: inline-flex; align-self: flex-start; margin: 0; }
  .drawer .btn-gold { display: flex; justify-content: center; margin: 0; width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .inline-cta { flex-direction: column; align-items: flex-start; }
}

/* =====================  SIGNATURE INTERACTIONS  ===================== */
/* 1 · Rainbow scroll progress — injected into the header by site.js;
      fills the gold header rule with the brand rainbow as you read. */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg,
    var(--b-gold) 0 22%, var(--b-orange) 22% 42%, var(--b-pink) 42% 62%,
    var(--b-green) 62% 82%, var(--b-blue) 82% 100%);
}

/* 2 · Scroll-reveal — site.js tags card-grid children with .rv;
      base style stays visible (print / no-JS / reduced motion safe). */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(16px);
        transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1);
        transition-delay: calc(var(--rv-i, 0) * 70ms); }
  .rv.rv-in { opacity: 1; transform: none; }
}

/* Motion courtesy */
@media (prefers-reduced-motion: reduce) {
  .sunburst { animation: none; }
  html { scroll-behavior: auto; }
}

/* Cruxsmith footer credit — the .cs monogram box was replaced by the
   inline cairn SVG (injected by site.js); keep it sized and un-shrunk. */
.foot-credit svg { width: 13px; height: 15px; flex: 0 0 auto; display: block; }

/* Mobile fix (Jul 7, 2026): long button labels ("What is dual-language
   immersion?") are nowrap pills; at narrow widths their min-content width
   blows out 1fr grid tracks and forces horizontal scroll. Let them wrap. */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; }
}

/* Sidebar nav labels: real headings so the outline has no h1->h4 skip, styled small. */
.legal-nav .nav-h, .faqs-nav .nav-h { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }

/* Honeypot: pushed off-screen rather than display:none — bots skip hidden
   fields but happily fill ones that are merely out of view. aria-hidden +
   tabindex="-1" keep it away from screen readers and keyboard users. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Shown only if the endpoint reports a failure. Nobody should ever be told
   their message sent when it didn't — that was the old mock behaviour. */
.form-error { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--r-md);
  background: #FFF1F5; border: 2px solid var(--b-pink); color: #8A0B3D;
  font-size: 14.5px; font-weight: 600; line-height: 1.5; }

/* footer column labels: h2 for a valid heading outline, styled small */
.foot-col .foot-h{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;color:inherit;}

/* a11y: avatar initials stay white on navy. `.quote .who span` (0,2,1) outranks
   `.av` (0,1,0) and would paint the initials --ink-soft on --b-blue = 1.69:1.
   `.quote .who .av` (0,3,0) wins on specificity alone — no !important — and
   declares only `color`, so the 13px size from `.quote .who span` is unchanged. */
.quote .who .av { color: #fff; }