/* ═══════════════════════════════════════════════════════════════════
   SFS Shared Styles — nav, footer, variables, reset, buttons
   Single source of truth. Edit here, applies to all 47 pages.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── SELF-HOSTED FONTS (no external requests) ───────── */
/* Raleway — variable weight, latin + latin-ext */
@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 600 800;
  font-display: swap;
  src: url(/fonts/raleway-latin-ext.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: 'Raleway'; font-style: normal; font-weight: 600 800;
  font-display: swap;
  src: url(/fonts/raleway-latin.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;
}
/* Titillium Web 300 — latin + latin-ext */
@font-face {
  font-family: 'Titillium Web'; font-style: normal; font-weight: 300;
  font-display: swap;
  src: url(/fonts/titillium-300-latin-ext.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: 'Titillium Web'; font-style: normal; font-weight: 300;
  font-display: swap;
  src: url(/fonts/titillium-300-latin.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;
}
/* Titillium Web 400 */
@font-face {
  font-family: 'Titillium Web'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url(/fonts/titillium-400-latin-ext.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: 'Titillium Web'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url(/fonts/titillium-400-latin.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;
}
/* Titillium Web 600 */
@font-face {
  font-family: 'Titillium Web'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url(/fonts/titillium-600-latin-ext.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: 'Titillium Web'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url(/fonts/titillium-600-latin.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;
}
/* Titillium Web 700 */
@font-face {
  font-family: 'Titillium Web'; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url(/fonts/titillium-700-latin-ext.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: 'Titillium Web'; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url(/fonts/titillium-700-latin.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;
}

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

::selection { background: var(--gold); color: var(--navy); }

:root {
  color-scheme: light;
  --lime: #AAB923;
  --warm-gray: #6B6053;
  --navy: #004862;
  --olive: #5F6714;
  --dark: #3D352F;
  --teal: #2FBAC7;
  --dark-teal: #0E7C8A;
  --bright-teal: #7DE0EA;
  --gold-dark: #E8A31D;      /* hover shade for gold surfaces that keep navy text (2026-09-13) */
  --crimson: #911E37;
  --orange: #E45D26;
  --gold: #F3AE21;
  --forest: #20302F;
  --purple: #4B384C;
  --purple-dark: #3A2A3B;
  --light-gray: #E4E4E4;
  --off-white: #f8f8f6;
  --font-head: 'Raleway', sans-serif;
  --font-body: 'Titillium Web', sans-serif;

  /* Section rhythm — tiered by content density. Cascade via media queries below.
     Use --sec-y-tall for narrative sections (intro, community, programs),
     --sec-y for panel sections (research-banner, field-skills, faculty, student-research),
     --sec-strip-y for thin colored bands (facts-banner, center-cta).
     --sec-x is horizontal padding for all sections. */
  --sec-y-tall: 80px;
  --sec-y: 72px;
  --sec-strip-y: 36px;
  --sec-x: 48px;
  /* Inner stack rhythm */
  --stack-h2-body: 20px;      /* H2 → first paragraph */
  --stack-h2-grid: 32px;      /* H2 → grid/card row */
}

@media (max-width: 860px) {
  :root { --sec-y-tall: 64px; --sec-y: 64px; --sec-strip-y: 32px; --sec-x: 24px; }
}
@media (max-width: 640px) {
  :root { --sec-y-tall: 56px; --sec-y: 56px; --sec-strip-y: 28px; }
}
@media (max-width: 380px) {
  :root { --sec-y-tall: 48px; --sec-y: 48px; --sec-x: 16px; }
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--dark); background: #fff;
  overflow-x: hidden; text-wrap: pretty;
  /* Force lining figures everywhere — prevents Titillium Web from using old-style
     figures with varying baselines ("weird up down numbering"). */
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
/* Emphasis is weight 600 in the surrounding colour (brand 3.3). Without this rule a strong took the
   browser's 700 on every page that did not set it (ledger P03-010). A strong that stands in for a heading
   or sits in bold text sets its own weight. */
strong, b { font-weight: 600; }
/* A telephone number stays whole (pass 7, cycle 5, 2026-09-27; ledger P07-006). Chrome and Firefox set the
   emergency number on Parents as "(978)" on one line and "219-5113" on the next from 346 to 457px wide, the
   width of nearly every Android phone; Safari kept it together. */
a[href^="tel:"] { white-space: nowrap; }

/* ─── NUMERIC ALIGNMENT ──────────────────────────────────
   Stat numbers, cost figures, and any column of numbers that should visually
   align use tabular-nums (equal-width digits) on top of lining-nums. Apply this
   class OR the listed selectors — whichever is available. */
.tabular-nums,
.facts-banner-num, .intro-stat-number,
.session-pill-cost, .topic-card-num,
.guideline-num, .safety-stats-num,
.step-num,
.timeline-num, .thrive-fit-num,
.outcomes-number,
.session-card dd {
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-feature-settings: "lnum", "tnum";
  font-feature-settings: "lnum", "tnum";
}

/* ─── FOCUS VISIBILITY ────────────────────────────────── */
/* Three-band ring: white, navy, white (2026-09-19, recert 8b). A single-colour ring vanished
   wherever it matched its ground: navy on the navy header and the dark sections, and the old
   white override for .btn-navy on every light section. One of the two colours always contrasts
   with whatever sits behind it, so there is no per-section list to keep in step. The white is a
   box-shadow painted under the outline. Form fields are left out: they carry their own certified
   focus borders and match :focus-visible on every mouse click. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
:focus-visible:not(input):not(select):not(textarea) {
  /* !important on purpose: several pages give buttons and cards a resting or hover drop shadow with
     two-class rules, and any of them would silently take the halo away (found on Admissions,
     Finances, the homepage and Our Centers). A focus indicator has to win that contest. */
  box-shadow: 0 0 0 6px #fff !important;
}

/* ─── SCREEN-READER ONLY ─────────────────────────────── */
.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;
}

/* ─── A READER'S OWN TEXT SPACING (WCAG 1.4.12) ──────── */
/* Dougie, 2026-09-27: "fix major issues" (pass 4, ledger P04-004). Some readers set their own line
   height, letter spacing and word spacing. Wider letters and words make more lines, and a clamp that
   fits the text as built then cuts it: 35 Team and Faculty bios lost up to three lines, Alumni cards
   their names, titles and companies, the Programs index a center's name on phones, and on Advisors
   five values ran past their card's edge. site.js adds .rs-probe, a line this sheet sets to no spacing
   at all, and puts reader-spacing on <html> when a reader's style overrules it. Only then are the
   clamps lifted, and the cards grow with their text. As built the class is never set, so every clamp
   stands as ruled (the bio clamp stays, 2026-09-27) and no page changes by a pixel. The rules name
   html and two classes so they outrank the page styles that load after this file. They never set
   display: on phones the bios are display: none and stay so. */
.rs-probe {
  position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none;
  margin: 0; white-space: nowrap; font-size: 16px; line-height: 1; letter-spacing: 0; word-spacing: 0;
}
html.reader-spacing .person-bio,
html.reader-spacing .alum-name,
html.reader-spacing .alum-title,
html.reader-spacing .alum-company,
html.reader-spacing .program-card-center { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
html.reader-spacing .alum-name,
html.reader-spacing .alum-title,
html.reader-spacing .alum-company { overflow-wrap: anywhere; }   /* a web address for a company has no place to break, and the card clips */
html.reader-spacing .alum-meta { white-space: normal; overflow: visible; text-overflow: clip; }
html.reader-spacing .session-card .sc-row { flex-wrap: wrap; }
html.reader-spacing .session-card dd { overflow-wrap: anywhere; }

/* ─── SKIP NAV ────────────────────────────────────────── */
.skip-nav {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  z-index: 10020; padding: 12px 24px; /* above every overlay incl. the cookie banner */
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  background: var(--navy); color: #fff; text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}
.skip-nav:focus { top: 0; outline: 3px solid var(--lime); outline-offset: 2px; }

/* ─── NAV ─────────────────────────────────────────────── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 36px; height: 72px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  background: var(--navy);
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
#main-nav.solid { box-shadow: 0 2px 20px rgba(0,0,0,0.18); }
#main-nav.nav-hidden { transform: translateY(-100%); }
/* Keyboard focus inside a hidden bar brings it back (2026-09-19). On pages whose first content link
   sits below the fold, Tab from Apply scrolls down, the bar hides, and Shift+Tab then walked focus
   along an off-screen bar. :focus-visible, not :focus-within: closing Teleport or the mobile menu
   with a mouse or a tap returns focus to the bar too, and that must not pin it open. */
#main-nav:has(:focus-visible) { transform: none; }
/* Boxless logo: logo-mark.webp is the trimmed 3:2 artwork (the old
   logo.webp padded it inside a 96x96 square). 60x40 fills the exact
   footprint the translucent box used to occupy, so the header layout is
   unchanged. */
.nav-logo img { height: 40px; width: 60px; display: block; transition: transform 0.2s ease; }
.nav-logo:hover img { transform: scale(1.08); }
.nav-left { display: flex; align-items: center; gap: 12px; justify-self: start; }
.nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;   /* 44px tap target; the mark itself stays 60x40 (pass 7, 2026-09-14) */
}
.nav-links { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; }
.nav-actions { display: flex; align-items: center; gap: 14px; justify-self: end; }
.nav-actions a, .nav-links a {
  text-decoration: none; font-family: var(--font-head); font-weight: 600;
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  border-radius: 3px; white-space: nowrap; transition: color 0.25s ease, background 0.25s ease, text-shadow 0.25s ease;
}
.nav-links a { padding: 8px 10px; }
.nav-links a { color: rgba(255,255,255,0.9); }
.nav-links > li > a:hover,
.nav-links > li:hover > a,
.nav-links > li:focus-within > a {
  color: var(--lime);
  text-shadow: 0 0 8px rgba(170,185,35,0.65), 0 0 18px rgba(170,185,35,0.35);
}
.nav-actions .nav-apply { background: var(--lime); color: var(--navy); padding: 10px 22px; border-radius: 6px; font-size: 14px; }
.nav-actions .nav-apply:hover { background: var(--olive); color: #fff; }
.nav-actions .nav-donate { background: var(--gold); color: var(--navy); padding: 10px 22px; border-radius: 6px; font-size: 14px; }
.nav-actions .nav-donate:hover { background: var(--gold-dark); color: var(--navy); }
/* Inquire sits between two solid CTAs. A ghost button keeps a fourth brand
   colour off the 72px bar and ranks it below Give/Apply, which is right for
   the earliest step in the funnel. Border is inset so its box matches the
   solid buttons' height exactly. */
.nav-actions .nav-inquire {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
  padding: 10px 22px; border-radius: 6px; font-size: 14px;
}
.nav-actions .nav-inquire:hover { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px #fff; }
/* its hairline is a box-shadow too, so the focus state restates it next to the shared halo */
.nav-actions .nav-inquire:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55), 0 0 0 6px #fff !important; }

/* Three CTAs plus five nav links get tight before the hamburger takes over
   at 860px. Step the bar down rather than letting it wrap: once at 1180,
   again at 1000 (both blocks below, §5.1). */
@media (max-width: 1180px) and (min-width: 861px) {
  #main-nav { padding: 0 20px; gap: 10px; }
  .nav-actions { gap: 8px; }
  .nav-actions .nav-donate,
  .nav-actions .nav-inquire,
  .nav-actions .nav-apply { padding: 9px 14px; font-size: 13px; letter-spacing: 0.5px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 7px; font-size: 13px; letter-spacing: 0.5px; }
}
@media (max-width: 1000px) and (min-width: 861px) {   /* second nav compression step, see the note above (§5.1) */
  .nav-left { gap: 8px; }
  .nav-teleport { font-size: 12px; }
  .nav-links a { padding: 8px 5px; font-size: 12px; letter-spacing: 0.2px; }
  .nav-actions .nav-donate,
  .nav-actions .nav-inquire,
  .nav-actions .nav-apply { padding: 8px 11px; font-size: 12px; letter-spacing: 0.2px; }
}

/* ─── SUBLINKS ────────────────────────────────────────── */
.nav-links li { position: relative; }
.nav-links .nav-sub {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); padding-top: 12px; z-index: 100;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}
.nav-links li:hover .nav-sub,
.nav-links li.touch-open .nav-sub,
.nav-links li:focus-within .nav-sub {
  opacity: 1; visibility: visible; pointer-events: auto;
}
/* Escape closes an open dropdown while focus stays on its trigger; chrome.py lifts the class on
   the next focus change or when the pointer leaves, so Tab moves on cleanly (pass 11, 2026-09-14) */
.nav-links li.nav-closed .nav-sub { opacity: 0; visibility: hidden; transform: translateX(-50%); pointer-events: none; }
.nav-sub-inner {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
  padding: 6px;
  white-space: nowrap;
}
.nav-links .nav-sub-inner a {
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex; align-items: flex-end; justify-content: flex-start; text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  background-color: var(--navy);
  width: 160px;
  aspect-ratio: 2 / 1; /* matches the ar_2:1 thumb crop and the ~2:1 page heroes */
  transition: transform 0.2s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  z-index: 0;
}
.nav-sub-inner a img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 10px; pointer-events: none;
  z-index: -2;
}
.nav-sub-inner a::before {
  content: '';
  position: absolute; inset: 0;
  /* teleport-card gradient (keep these two in sync): the dark value holds across the
     label band, then falls off fast so the image above stays clear */
  background: linear-gradient(to top, rgba(0,20,40,0.78) 0%, rgba(0,20,40,0.52) 26%, rgba(0,20,40,0.04) 46%, transparent 62%);
  border-radius: 10px;
  transition: background 0.25s ease;
  z-index: -1;
}
.nav-links .nav-sub-inner a:hover {
  transform: scale(1.03);
}
.nav-sub-inner a:hover::before {
  background: linear-gradient(to top, rgba(0,20,40,0.62) 0%, rgba(0,20,40,0.36) 26%, rgba(0,20,40,0.02) 46%, transparent 62%);
}

/* ─── MOBILE NAV ─────────────────────────────────────── */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 14px 10px; border: none; background: none; justify-self: end;
}
.nav-hamburger span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: all 0.3s; }
/* Nav bg is always navy (solid state only adds shadow) — bars stay white in both states */
.nav-hamburger { color: #fff; }
.nav-mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 10015; /* above #main-nav (1000) AND the cookie banner (9999) */
  background: var(--forest); flex-direction: column;
  align-items: center; justify-content: center; gap: 36px;
}
.nav-mobile-menu.open { display: flex; }
/* Short screens: centered flex clips both ends unreachably once content
   exceeds the viewport — top-align and scroll instead */
@media (max-height: 760px) {
  .nav-mobile-menu { justify-content: flex-start; overflow-y: auto; padding: 76px 0 40px; overscroll-behavior: contain; }
}
/* Tap areas in the open menu (pass 7, 2026-09-20). The padding is cancelled by an equal negative margin,
   so the layout does not move and only the hit box grows: a 24px section line + 2 x 10 = 44, a 17px
   sub-link line + 2 x 14 = 45. At 8px they measured 40 and 33 on every page; the menu has to be OPEN
   to measure them. The sub row sits 24px under its section link (margin-top -12px of the 36px gap),
   which is 10 + 14, so the two hit boxes meet and never overlap. */
.nav-mobile-menu > a {
  padding: 10px 16px; margin: -10px -16px; /* invisible tap-area extension */
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--lime);
  text-shadow: 0 0 8px rgba(170,185,35,0.65), 0 0 18px rgba(170,185,35,0.35);
  text-decoration: none; transition: color 0.2s, text-shadow 0.2s;
}
.nav-mobile-menu > a:hover,
.nav-mobile-menu > a:active {
  color: var(--lime);
  text-shadow: 0 0 10px rgba(170,185,35,0.85), 0 0 22px rgba(170,185,35,0.5);
}
.nav-mobile-close {
  position: absolute; top: 10px; right: 16px; background: none; border: none;
  color: rgba(255,255,255,0.7); font-size: 36px; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px; padding: 12px;
}
.nav-mobile-close:hover { color: #fff; }
.nav-mobile-divider { width: 40px; height: 1px; background: rgba(255,255,255,0.2); margin: 4px 0; }
.nav-mobile-actions { display: flex; gap: 12px; margin-top: 8px; }
/* Phones: at the mobile .btn size the three CTAs are 418px wide and ran off both
   screen edges from 381 to 417px (pass 11b, 2026-09-19). The row is now a fixed
   328px (the look already certified at 375), never wider than the screen minus
   16px a side; the buttons share it, so their padding gives way before the row
   can overflow (320px, or a wider fallback font). */
@media (max-width: 480px) {
  .nav-mobile-actions { width: 328px; max-width: calc(100% - 32px); }
  .nav-mobile-actions .btn { flex: 1 1 auto; padding: 16px 8px; font-size: 14px; letter-spacing: 1.5px; text-align: center; }
}
.nav-mobile-sub {
  display: flex; gap: 18px; margin-top: -12px;
}
.nav-mobile-menu .nav-mobile-sub a {
  padding: 14px 6px; margin: -14px -6px; /* invisible tap-area extension */
  font-family: var(--font-head); font-weight: 600;
  font-size: 14px; letter-spacing: 2px;
  color: rgba(255,255,255,0.9); text-decoration: none; transition: color 0.2s;
}
.nav-mobile-menu .nav-mobile-sub a:hover { color: var(--lime); }
/* Two items are left in the bar at this width (logo + Teleport, hamburger), so it is two columns.
   On the desktop 1fr auto 1fr the hamburger fell into the middle track: beside Teleport on phones,
   dead centre at 768 with the right half of the bar empty (pass 7, 2026-09-20).
   Teleport stays in the phone bar (Dougie, 2026-09-20: "keep teleport"), as it has rendered since
   April: a `.nav-teleport { display: none }` used to sit here but never applied, because
   `.nav-left .nav-teleport` below out-ranks it. Do not bring that rule back. */
@media (max-width: 860px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
  #main-nav { padding: 0 20px; grid-template-columns: 1fr auto; }
}

/* ─── TELEPORT OVERLAY ────────────────────────────────── */
.nav-left .nav-teleport {
  background: transparent; color: var(--gold); padding: 10px 22px;
  min-height: 44px; min-width: 44px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; border: none; cursor: pointer;
  transform: skewX(-8deg); display: inline-block;
  border-radius: 6px; transition: all 0.25s ease; text-decoration: none;
}
.nav-left .nav-teleport:hover { color: #fff; }

.teleport-overlay {
  position: fixed; inset: 0; z-index: 10010; /* modals sit above the cookie banner (9999) */
  background: rgba(245,243,238,0.65);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* keep iOS from scroll-chaining to the locked page behind */
}
.teleport-overlay.open { display: block; animation: teleportIn 0.3s ease; }
@keyframes teleportIn { from { opacity: 0; } to { opacity: 1; } }

.teleport-close {
  position: fixed; top: 20px; right: 28px; z-index: 10011;
  background: none; border: none; font-size: 36px; line-height: 1;
  color: var(--navy); cursor: pointer; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.2s;
}
.teleport-close:hover { background: rgba(0,72,98,0.08); }
.teleport-close:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.teleport-content {
  padding: 72px 48px 48px; max-width: 1200px; margin: 0 auto;
}

.teleport-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px;
}
.teleport-tab {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase; min-height: 44px;
  padding: 12px 32px; border: 2px solid var(--navy); border-radius: 6px;
  background: none; color: var(--navy); cursor: pointer;
  transition: all 0.2s ease;
}
.teleport-tab:hover { background: rgba(0,72,98,0.06); }
.teleport-tab[aria-selected="true"] {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.teleport-tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.teleport-panel { display: none; }
.teleport-panel.active { display: block; }

.teleport-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}

.teleport-card {
  position: relative; display: block; overflow: hidden; border-radius: 8px;
  background-color: var(--navy);
  aspect-ratio: 16/9; text-decoration: none; color: #fff;
  transition: transform 0.2s ease;
}
.teleport-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.teleport-card:hover { transform: scale(1.03); }
.teleport-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,20,40,0.78) 0%, rgba(0,20,40,0.52) 26%, rgba(0,20,40,0.04) 46%, transparent 62%);
  border-radius: 8px; transition: background 0.25s; z-index: 1;
}
.teleport-card:hover::before {
  background: linear-gradient(to top, rgba(0,20,40,0.62) 0%, rgba(0,20,40,0.36) 26%, rgba(0,20,40,0.02) 46%, transparent 62%);
}

.teleport-label {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 10px 12px 8px;
}
.teleport-name {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 15px; line-height: 1.25; letter-spacing: 0.5px;
}
.teleport-country {
  /* 400 on purpose: photo-card captions are the brand.md §3.4 exception (Dougie, 2026-09-19) */
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 15px; opacity: 0.85; margin-top: 2px; letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 1200px) {
  .teleport-content { padding: 72px 24px 32px; }
  .teleport-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .teleport-content { padding: 72px 20px 32px; }
  .teleport-grid { grid-template-columns: repeat(2, 1fr); }
  .teleport-tabs { gap: 8px; }
  .teleport-tab { padding: 10px 20px; font-size: 14px; }
}
@media (max-width: 480px) {
  .teleport-card { aspect-ratio: 3/2; }
  .teleport-name { font-size: 14px; }
  .teleport-tab { padding: 8px 14px; font-size: 14px; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .teleport-overlay { transition: none; }
  .teleport-card { transition: none; }
}

/* ─── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; padding: 16px 36px; border-radius: 3px;
  transition: all 0.25s ease; cursor: pointer; border: none;
}
.btn-primary { background: var(--lime); color: var(--navy); }
.btn-primary:hover { background: var(--olive); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.btn-outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); }
/* In a hero, from 861px up, the outline button carries a 25% wash of the overlay navy (Dougie,
   2026-09-27: "fix critical", "1: buttons"; pass 4, ledger P04-001). Its label is white 14px/700 with
   no ground and no shadow of its own, so on the 09-25 text fade it read 3.82:1 on Croatia and under
   4.5 on three more heroes; the fade had been tuned on the eyebrow, heading and subhead alone. With the
   wash over the fade's full 0.48, where every hero's buttons sit (55px or more inside it), the label
   reads 5.09 or better on any photo, a pure white one included. At 860 and under the bottom-up band
   carries the button (lowest 6.87), so nothing changes there. The rule sits BEFORE
   the :hover rule on purpose: both count two classes, so the later one wins and the hover keeps its
   white ground. Never write it as .hero:not(...) or move it below: either one outranks the hover. */
@media (min-width: 861px) {
  .hero .btn-outline-white { background: rgba(0,20,40,0.25); }
}
.btn-outline-white:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--forest); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.btn-lime { background: var(--lime); color: var(--navy); }
.btn-lime:hover { background: var(--olive); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: var(--off-white); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.btn-outline-navy { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.btn-gold { background: var(--gold); color: var(--navy); }   /* navy-on-gold for urgent CTAs (§2 rule 5); added 2026-09-13 */
.btn-gold:hover { background: var(--gold-dark); color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* ─── SECTION UTILITIES ───────────────────────────────── */
.section-label {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--dark);
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.section-label::before { content: ''; width: 32px; height: 2px; background: currentColor; flex-shrink: 0; }

/* ─── FOOTER ──────────────────────────────────────────── */
/* The photo starts at the footer's own top edge (Dougie, 2026-09-27: "end the bleed at the footer's edge").
   Until then the two layers below rose 160px above the footer and painted over the block before it, text
   included: 100 text boxes on 30 pages read under AA beneath them, the center strips' copy 2.17:1 (ledger
   P03-001). The layers keep their geometry, so nothing inside the footer moves; overflow: hidden is what
   ends them at the edge. Never set it back to visible. */
footer { background-color: var(--navy); position: relative; overflow: hidden; }
footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -160px; bottom: 0;
  background: #2A1A0A;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 160px, black 300px);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 160px, black 300px);
  pointer-events: none;
}
.footer-bg {
  position: absolute; left: 0; right: 0; top: -160px; bottom: 0;
  /* 50% opacity under a dark gradient: q_auto:eco is invisible here, and phones get a w_900 tier (pass 8, 2026-09-14) */
  background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url('https://res.cloudinary.com/dqdygbl2z/image/upload/c_fill,g_auto,f_auto,q_auto:eco,w_1800/Luke_Chavez_ITF_Kenya_lwtirf.jpg');
  background-size: cover; background-position: center 80%;
  opacity: 0.5; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 160px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 160px);
}
@media (max-width: 640px) {
  .footer-bg { background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url('https://res.cloudinary.com/dqdygbl2z/image/upload/c_fill,g_auto,f_auto,q_auto:eco,w_900/Luke_Chavez_ITF_Kenya_lwtirf.jpg'); }
}
/* Top padding trimmed 72->56 with the logo gone: it was sized to sit
   above the mark, and the tagline is now the first element. */
.footer-inner {
  position: relative; z-index: 1;
  padding: 56px 48px 56px;
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.footer-tagline {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  /* Full white: it sits on the palest part of the photo, where 0.92 measured 4.50 (pass 4, 2026-09-19). */
  letter-spacing: 2px; text-transform: uppercase; color: #fff;
}
.footer-social-icons { display: flex; gap: 12px; align-items: center; }
.footer-social-icons a {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; transition: border-color 0.2s, background 0.2s;
}
.footer-social-icons a:hover { border-color: var(--lime); background: rgba(170,185,35,0.1); }
.footer-social-icons svg {
  width: 16px; height: 16px; fill: rgba(255,255,255,0.92);
  transition: fill 0.2s; display: block;
}
.footer-social-icons a:hover svg { fill: var(--lime); }
/* Two rows by meaning (2026-09-19, Dougie): the institution, then students and alumni.
   Each row stays alphabetical. One wrapped row of nine orphaned its last link at tablet widths. */
.footer-nav {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 4px;
}
.footer-nav-row { display: flex; gap: 8px 20px; justify-content: center; flex-wrap: wrap; }
/* Footer links are white text with a 2px lime underline at rest, so they read as links at first
   look, and hover grows them slightly (below) (Dougie, 2026-09-25). Never lime text: 2.5 to 3.8:1
   on the pale top of the footer photo (pass 4, 2026-09-19; 2.5 again 2026-09-25), white 5.4 or
   better. The contact email and phone numbers stay plain, with the underline on hover only. */
.footer-nav a {
  font-family: var(--font-head); font-weight: 700;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.footer-legal {
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.92);
  line-height: 1.8; text-align: center;
  margin-top: -10px; margin-bottom: -14px;
}
/* inline-block so the hover grow below applies: transforms skip inline boxes */
.footer-legal a,
.footer-legal .footer-cookies-link {
  display: inline-block;
  color: #fff; text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.footer-contact {
  margin-top: 16px;
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.92);
  line-height: 1.8;
}
.footer-contact a {
  color: rgba(255,255,255,0.92); text-decoration: none; transition: color 0.2s;
}
.footer-contact a:hover {
  text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.footer-contact p { margin: 0; }
.footer-nonprofit {
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.92); line-height: 1.8; margin-top: 4px; margin-bottom: -12px;
}
/* line-height 1.8 like the two lines above it: at normal it lost their 3.5px of leading
   and sat tight under the legal row (Dougie, 2026-09-25) */
.footer-copy {
  font-family: var(--font-head); font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.92); letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.8; margin-top: -8px;
}
.footer-easter-egg {
  display: block; text-align: center; margin-top: 12px;
  min-height: 44px; padding: 14px 0;
  font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.92);
  text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
/* The underlined footer links grow 5% under a mouse (Dougie, 2026-09-25). A transform, so nothing
   around them moves; 8% crowded the legal row's "|" separators. Mice only: a tap leaves :hover
   stuck on touch screens, and Manage Cookies would stay enlarged behind the consent card. */
.footer-nav a,
.footer-legal a,
.footer-legal .footer-cookies-link,
.footer-easter-egg { transition: transform 0.2s ease; }
@media (hover: hover) {
  .footer-nav a:hover,
  .footer-legal a:hover,
  .footer-legal .footer-cookies-link:hover,
  .footer-easter-egg:hover { transform: scale(1.05); }
}

/* ─── CENTER PAGES ───────────────────────────────────── */
.hero-center { border-bottom: 8px solid var(--lime); }
.hero {
  position: relative; height: 100vh; min-height: 600px;
  overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
  background-color: var(--navy);
}
.hero-video-wrap {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity 1s ease;
}
.hero-video-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.hero-mobile-fallback {
  display: block; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  /* ALL pages (homepage included) set --hero-fallback / --hero-fallback-m as
     inline custom properties and rely on this declaration to paint; only the
     homepage's separate .hero-mobile-fallback-portrait div uses a true inline
     background-image. Do not remove. */
  background-image: var(--hero-fallback);
}
@media (max-width: 860px) {
  .hero-video-wrap { display: none; }
}
/* Pause / Play for the looping hero video (WCAG 2.2.2, pass 4, 2026-09-19). site.js adds the button
   once the video is actually playing, so phones and reduced-motion visitors, who never load the
   video, never see it. Same dark pill as Give's Mute button, which sits beside one of these.
   Top right, 24px under the 72px bar, on purpose (pass 11, 2026-09-20): bottom right is where the
   consent card sits on a first visit (it covered the pill until the visitor answered it), and bottom
   left is where the center heroes keep their buttons. Give's row overrides this with position: static. */
.hero-video-pause {
  position: absolute; right: 24px; top: 96px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px 10px 14px;
  background: rgba(0,0,0,0.65); color: #fff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 30px;
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase; line-height: 1;
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.hero-video-pause[hidden] { display: none; }   /* Give keeps its button hidden until the Vimeo player is ready */
.hero-video-pause:hover { background: rgba(0,0,0,0.85); border-color: rgba(255,255,255,0.55); }
.hero-video-pause svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.hero-video-pause .icon-play { display: none; }
.hero-video-pause.is-paused .icon-pause { display: none; }
.hero-video-pause.is-paused .icon-play { display: block; }
@media (max-width: 860px) {
  .hero-video-pause { display: none; }
}
@media (max-width: 640px) {
  .hero-mobile-fallback { background-image: var(--hero-fallback-m, var(--hero-fallback)); }
}
/* The overlay layer darkens the photo only at 860 and under, where the text spans the width: the plain
   bottom-up band below. From 861 up the photo carries no overlay and the text brings its own fade
   (.hero-content::before, after .hero-content). Until 2026-09-25 desktop had a pool pinned to the photo's
   bottom-left corner plus a bottom band here, so the text sat at a different depth in it on every hero. */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
}
@media (max-width: 860px) {
  .hero-overlay { background: linear-gradient(to top, rgba(0,20,40,0.72) 0%, rgba(0,20,40,0.50) 30%, rgba(0,20,40,0.28) 60%, rgba(0,20,40,0.06) 100%); }
}
.hero-content {
  position: relative; z-index: 2; text-align: left; color: #fff;
  padding: 0 48px 60px; max-width: 900px; width: 100%;
  margin-right: auto; margin-left: clamp(24px, 5vw, 80px);
}
/* One fade behind the hero text, desktop (Dougie, 2026-09-25: "an overlay of the full text (eyebrow, h1,
   subhead) with fade"). The photo-wide pool, the program pages' full-width band, the eyebrow's own patch
   and Make a Payment's extra pool put the text on anything from about 10% to 60% navy, depending on how
   tall its block was. This one shape travels with the text, so every eyebrow, heading and subhead sits on
   the same 48% and the photo stays clear away from it. It rises 150px above the eyebrow on an eased curve,
   reaches the hero's left edge and bottom border, and fades out over its last 380px on the right (it ends
   260px past the text column). Near-black navy rgb(0,20,40), the overlay colour since 2026-09-16. Scoped
   to the 64 photo heroes: Give, Compare and FAQ carry hero-own-layout. z-index -1 puts it on the floor of
   .hero-content's stacking context (every .hero-content is position: relative; z-index: 2), under the
   text. The homepage (section padding) and short windows (padding-top, below) move its edges. Measured in
   WebKit on the photo, shadows not counted: Prelaunch Reports/2026-09-25 Hero text fade/. */
@media (min-width: 861px) {
  .hero:not(.hero-own-layout) > .hero-content::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: -150px; bottom: 0; left: calc(-1 * clamp(24px, 5vw, 80px)); right: -260px;
    background: linear-gradient(to bottom, rgba(0,20,40,0) 0, rgba(0,20,40,0.014) 22px, rgba(0,20,40,0.048) 45px, rgba(0,20,40,0.106) 67px, rgba(0,20,40,0.192) 90px, rgba(0,20,40,0.298) 112px, rgba(0,20,40,0.413) 135px, rgba(0,20,40,0.48) 150px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 380px), rgba(0,0,0,0.86) calc(100% - 330px), rgba(0,0,0,0.62) calc(100% - 270px), rgba(0,0,0,0.38) calc(100% - 200px), rgba(0,0,0,0.18) calc(100% - 130px), rgba(0,0,0,0.05) calc(100% - 60px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 380px), rgba(0,0,0,0.86) calc(100% - 330px), rgba(0,0,0,0.62) calc(100% - 270px), rgba(0,0,0,0.38) calc(100% - 200px), rgba(0,0,0,0.18) calc(100% - 130px), rgba(0,0,0,0.05) calc(100% - 60px), transparent);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;   /* a repeating mask tile shows as a hairline along the top edge */
  }
}
/* Short windows (Dougie, 2026-09-21): a 1366x768 laptop with a bookmarks bar, a tablet or a phone
   held sideways. The hero has a fixed height and its text is anchored to the bottom, so in a window
   about 650px tall or less the tallest text blocks (Australia, Tanzania, the three-line program H1s)
   rode up until the eyebrow touched or slid under the 72px bar. Here the hero may grow instead:
   min-height restates each hero's own height, so a hero whose text already fits does not change by a
   pixel, and padding-top keeps 32px between the bar and the first line of the ones that do not. The
   height query is the whole point of this off-list breakpoint; above 700px tall, or at 640px wide and
   under (every hero is height: auto there), nothing here applies. It started at 861 until pass 7
   (cycle 4, 2026-09-24): phones held sideways from 667 to 860 wide (an iPhone SE is 667x375, an
   iPhone 14 844x390) kept the fixed hero, so the eyebrow sat 4 to 24px from the bar on four pages,
   and from 641 to about 663 seven slid behind it (About -49px). :not(.hero-own-layout) keeps it to
   the 64 photo heroes, whose .hero-content is a direct child: Give, Compare and FAQ lay out their own
   heroes and carry that class, as must any new hero without a bottom-anchored .hero-content. At two
   classes it outranks the page-level .hero rules that load after this file. It was
   :has(> .hero-content) until pass 11b (cycle 4, 2026-09-24): Firefox 115 to 120, inside the support
   floor, drop any rule with :has(), and there Australia's H1 slid behind the bar. The homepage,
   Inquiry and Make a Payment have their own hero heights and restate the min-height in their own
   styles.
   Every window height since 2026-09-27 (Dougie: "fix major issues"; pass 4, ledger P04-003): the
   query was (min-width: 641px) and (max-height: 700px). A reader who sets their own text spacing
   (WCAG 1.4.12: line height 1.5, letter spacing 0.12em, word spacing 0.16em) makes the text block
   taller in a window of any height, and in a fixed hero it rode up under the bar on 20 pages at
   laptop sizes (About lost 137px of its H1 at 1366x768). As built nothing moves but two heroes: at
   208 window shapes from 641x568 to 2560x1440 no other hero's first line sits closer than 104px to
   the top. Make a Payment's sits 101 to 103px down in a window 701px tall, so that page keeps 96px
   over 700px tall in its own styles (ledger P04-008). Turks and Caicos takes a fourth H1 line in
   Safari and Firefox from 861 to 864px wide: there its first line sat 84 to 104px down in windows
   701 to 721px tall, and sits at 104px now (ledger P04-009). Read a change to this rule in all
   three engines. Never put the height condition back. */
@media (min-width: 641px) {
  .hero:not(.hero-own-layout) { height: auto; min-height: max(520px, 85vh); }
  .hero.hero-center:not(.hero-own-layout) { min-height: max(600px, 100vh); }
  .hero:not(.hero-own-layout) > .hero-content { padding-top: 104px; }
  .hero:not(.hero-own-layout) > .hero-content::before { top: -46px; }   /* the fade still starts 150px above the eyebrow (104 - 150) */
}
.hero-eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--lime);
  margin-bottom: 20px; display: flex; align-items: center; gap: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6);
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: currentColor; flex-shrink: 0; }
.hero-headline {
  font-family: var(--font-head); font-weight: 800;
  font-size: 72px; letter-spacing: -2px;
  line-height: 0.95; text-transform: uppercase; margin-bottom: 28px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.45);
}
.hero-headline span { color: var(--lime); }
.hero-subhead {
  font-family: var(--font-body); font-weight: 300;
  font-size: 22px; line-height: 1.6;
  color: #fff; max-width: 560px; margin: 0 0 44px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.5);
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .hero-content { padding: 0 32px 48px; margin-left: 16px; }
}
@media (max-width: 860px) {
  .hero-headline { font-size: 56px; letter-spacing: -1px; }
}
@media (max-width: 640px) {
  .hero { height: auto; min-height: 0; }
  .hero-content { padding: 120px 24px 40px; margin-left: 0; }
  .hero-headline { font-size: 36px; letter-spacing: -0.5px; line-height: 1.05; overflow-wrap: break-word; }
  .hero-eyebrow { font-size: 13px; letter-spacing: 2px; }   /* §3.6 mobile eyebrow, every hero (2026-09-13) */
  .hero-subhead { font-size: 18px; margin-bottom: 28px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; text-align: center; }
}
.intro {
  max-width: 1200px; margin: 0 auto; padding: var(--sec-y-tall) var(--sec-x);
}
.intro-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.intro-text h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 40px;
  text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy); line-height: 1.1;
  margin-bottom: var(--stack-h2-body);
}
.intro-text p {
  font-size: 16px; line-height: 1.75; color: var(--dark); margin-bottom: 16px;
}
.intro-text p:last-child { margin-bottom: 0; }   /* §5.6 rule 6: the photo beside it centres on the text, not on a trailing margin */
.intro-image { border-radius: 8px; overflow: hidden; }
.intro-image img {
  width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4 / 3;
}
.facts-banner {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.facts-banner-item {
  padding: var(--sec-strip-y) 32px; text-align: center;
}
.facts-banner-item:nth-child(odd) { background: var(--navy); }
.facts-banner-item:nth-child(even) { background: var(--teal); color: var(--forest); }   /* text on teal is forest (§4.1) */
.facts-banner-item:nth-child(even) .facts-banner-num { color: var(--forest); }
.facts-banner-item:nth-child(even) .facts-banner-label { color: var(--forest); }
.facts-banner-num {
  font-family: var(--font-body); font-weight: 700; font-size: 32px;
  color: #fff; line-height: 1; margin-bottom: 4px;
}
.facts-banner-label {
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
/* Two across from 860, not 640 (pass 7, cycle 4, 2026-09-24): four columns cannot shrink below their longest
   uppercase word plus 64px of padding, so from 641 to 709px the fourth fact ran off the screen on seven
   center pages (Costa Rica 69px over; at 667, an iPhone SE held sideways, three of them scrolled). */
@media (max-width: 860px) {
  .facts-banner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .facts-banner-item { padding: var(--sec-strip-y) 16px; }
  .facts-banner-num { font-size: 28px; }
}
@media (max-width: 860px) {
  .intro-inner { grid-template-columns: 1fr; gap: 32px; }
}
.programs-section {
  background: var(--off-white); padding: var(--sec-y-tall) var(--sec-x);
}
.programs-section-inner { max-width: 1200px; margin: 0 auto; }
.programs-section h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 40px;
  text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
  margin-bottom: var(--stack-h2-grid);
}
.programs-row {
  display: grid; gap: 24px;
}
.programs-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.programs-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.program-card {
  background: #fff; border-radius: 8px; overflow: hidden;
  text-decoration: none; color: var(--dark);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.program-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.program-card-img {
  position: relative; overflow: hidden;
}
.program-card-img img {
  width: 100%; height: auto; display: block; object-fit: cover;
  transition: transform 0.5s;
}
.cols-3 .program-card-img img { aspect-ratio: 4 / 5; }
.cols-2 .program-card-img img { aspect-ratio: 3 / 2; }
.program-card:hover .program-card-img img { transform: scale(1.05); }
.program-type-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 3px; color: #000;
}
.badge-semester { background: var(--teal); }
.badge-summer1 { background: var(--orange); }
.badge-summer2 { background: var(--orange); }
.program-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.program-card-country {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--dark);
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.country-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); display: inline-block; }
.program-card-title {
  font-family: var(--font-head); font-weight: 800; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.3px; color: var(--navy);
  line-height: 1.2; margin-bottom: 4px;
}
.program-card-center {
  font-size: 14px; color: var(--dark); margin-bottom: 16px;   /* the meta-line tier, as on the Programs index (brand 3.3) */
}
.program-card-footer {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; border-top: 1px solid var(--light-gray);
}
.program-card-theme-tag {
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  background: rgba(0,72,98,0.07); color: var(--navy);
  padding: 5px 12px; border-radius: 3px;
}
.program-card-learn {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--olive);
}
@media (max-width: 860px) {
  /* §5.4: three cards step to two before the single column — no 3→1 jump (pass 7, 2026-09-14) */
  .programs-row.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .programs-row.cols-3, .programs-row.cols-2 { grid-template-columns: 1fr; }
  .cols-3 .program-card-img img { aspect-ratio: 4 / 3; }
}
.research-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  outline: 1px solid rgba(0,0,0,0.12);
}
.research-banner > * { min-width: 0; }
.research-banner-photos > div { min-width: 0; }
.research-banner-text {
  background: var(--forest);
  padding: var(--sec-y) var(--sec-x);
  padding-left: max(var(--sec-x), calc((100vw - 1200px) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.research-banner-text .section-label { color: var(--teal); }
.research-banner-text .section-label::before { background: var(--teal); }
.research-banner-text h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: 40px; text-transform: uppercase;
  color: #fff; letter-spacing: -0.5px; line-height: 1.1;
  margin-bottom: var(--stack-h2-body);
}
.research-banner-text p {
  font-family: var(--font-body); font-size: 16px; font-weight: 300;
  color: #fff; line-height: 1.75;
  margin-bottom: 16px; max-width: 400px;
}
.research-banner-photos {
  display: grid;
  grid-template-columns: 1fr 3px 1fr;
  gap: 0;
}
.research-banner-photos::before {
  content: ''; grid-column: 2; grid-row: 1; background: #fff;
}
.research-banner-photos > div:first-child {
  border-left: 3px solid #fff;
}
.research-banner-photos div { overflow: hidden; }
.research-banner-photos img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 860px) {
  .research-banner { grid-template-columns: 1fr; height: auto; }
  .research-banner-text { padding: var(--sec-y) var(--sec-x); padding-left: var(--sec-x); }
  /* §5.5: stacked, the rail between text and photos becomes a 3px white seam between the rows, and the
     desktop rail on the first photo would otherwise be a stray strip on the screen's left edge. The
     program sheets stack the photos first and move the seam to their bottom edge. */
  .research-banner-photos { min-height: 260px; border-top: 3px solid #fff; }
  .research-banner-photos > div:first-child { border-left: 0; }
}
.anthem-section {
  background: var(--teal); padding: var(--sec-y) var(--sec-x);
}
.anthem-inner {
  max-width: 1000px; margin: 0 auto;
}
.anthem-section .section-label { color: var(--forest); }
.anthem-section .section-label::before { background: currentColor; }
.anthem-section h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 40px;
  text-transform: uppercase; color: var(--forest);
  margin-bottom: var(--stack-h2-body);
}
.anthem-section p {
  font-size: 16px; line-height: 1.75; color: var(--forest); margin-bottom: 32px; max-width: 600px;
}
.video-embed {
  position: relative; padding-bottom: 56.25%; height: 0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}
.video-embed iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.community-section {
  background: var(--purple);
  border-top: 3px solid #fff;
}
.community-section .section-label { color: var(--gold); }
.community-section .section-label::before { background: var(--gold); }
.community {
  max-width: 1200px; margin: 0 auto; padding: var(--sec-y-tall) var(--sec-x);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.community-text h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 40px;
  text-transform: uppercase; letter-spacing: -0.5px; color: #fff;
  margin-bottom: var(--stack-h2-body);
}
.community-text p {
  font-size: 16px; font-weight: 300; line-height: 1.75; color: #fff; margin-bottom: 16px;
}
.community-text p:last-child { margin-bottom: 0; }   /* §5.6 rule 6 */
.community-img {
  border-radius: 8px; overflow: hidden;
}
.community-img img {
  width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4 / 3;
}
@media (max-width: 860px) {
  .community { grid-template-columns: 1fr; gap: 32px; }
}
.center-cta {
  background: var(--lime); padding: var(--sec-strip-y) var(--sec-x); margin-bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 48px;
}
.center-cta h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 26px;
  text-transform: uppercase; color: var(--navy); margin-bottom: 4px;
}
.center-cta p {
  font-size: 16px; color: var(--navy); margin: 0;
}
.center-cta .btn-navy { white-space: nowrap; }   /* no background here: it would out-rank .btn-navy:hover */
@media (max-width: 860px) {
  .center-cta { gap: 24px; }
}
@media (max-width: 640px) {
  .center-cta { flex-direction: column; text-align: center; gap: 20px; }
}
/* ─── CENTER FACULTY ─────────────────────────────────────── */
.center-faculty {
  max-width: 1200px; margin: 0 auto; padding: var(--sec-y) var(--sec-x);
}
.center-faculty h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 40px;
  text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
  margin-bottom: var(--stack-h2-grid);
}
.faculty-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px; margin: 0; padding: 0; list-style: none;
}
.faculty-card { text-align: center; }
.faculty-card .person-photo {
  width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 6px;
  object-fit: cover; display: block; margin-bottom: 16px;
}
.faculty-card .person-name {
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  color: var(--navy); line-height: 1.3; margin-bottom: 4px;
}
.faculty-card .person-title {
  font-family: var(--font-body); font-size: 16px; font-weight: 400;
  color: var(--dark); line-height: 1.4; margin-bottom: 4px;
}
.faculty-card .person-degree {
  font-family: var(--font-body); font-size: 16px; font-weight: 400;
  font-style: italic; color: var(--dark); line-height: 1.4;
}
@media (max-width: 640px) {
  .faculty-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ─── CENTER PARTNER (inside .center-faculty) ───────── */
/* Credits a named institutional field partner whose staff teach students.
   It sits at the foot of the faculty section rather than as a band of its
   own, so a centre with a partner keeps the same section rhythm as the ones
   without. Generic on purpose: reuse for any partner whose mark we may show. */
.center-partner {
  margin-top: 56px;
  background: var(--off-white); border-radius: 8px;
  padding: 36px 48px;
  display: flex; align-items: center; gap: 48px;
}
.center-partner-logo { flex: none; display: block; line-height: 0; }
/* 180px against a 250px source: no larger original exists, so this is the
   widest the mark renders without going soft. */
.center-partner-logo img { width: 180px; height: auto; display: block; }
.center-partner-text { min-width: 0; }
.center-partner-text .section-label { margin-bottom: 10px; }
.center-partner-text h3 {
  font-family: var(--font-head); font-weight: 800; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0.2px; color: var(--navy);
  line-height: 1.2; margin: 0 0 10px;
}
.center-partner-text p {
  font-size: 16px; line-height: 1.7; color: var(--dark); margin: 0;
  max-width: 720px;
}
@media (max-width: 860px) {
  .center-partner { padding: 32px; gap: 32px; }
  .center-partner-logo img { width: 160px; }
}
@media (max-width: 640px) {
  .center-partner {
    flex-direction: column; align-items: flex-start;
    gap: 20px; padding: 28px 24px; margin-top: 48px;
  }
  .center-partner-logo img { width: 150px; }
  .center-partner-text h3 { font-size: 20px; }
}
/* .gallery / .gallery-mosaic removed — program-page photo montage retired 2026-07-08 */
/* .related section removed — no longer used (was Related Centers on center pages) */

/* ─── FIELD SKILLS (center pages) ───────────────────── */
.field-skills {
  background: var(--off-white); padding: var(--sec-y) var(--sec-x);
  border-bottom: 3px solid var(--teal);
}
.field-skills-inner {
  max-width: 1200px; margin: 0 auto;
}
.field-skills h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 40px;
  text-transform: uppercase; letter-spacing: -0.5px; color: var(--navy);
  margin-bottom: var(--stack-h2-grid);
}
.skills-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; list-style: none; margin: 0; padding: 0;
}
.skill-chip {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 24px; background: #fff; border-radius: 8px;
  border-left: 3px solid var(--teal);
}
.skill-icon {
  width: 28px; height: 28px; flex-shrink: 0; color: var(--dark-teal);
}
.skill-chip-text { min-width: 0; }
h3.skill-name {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: var(--navy); display: block; margin: 0 0 2px;
}
.skill-desc {
  font-family: var(--font-body); font-size: 16px; color: var(--dark);
  line-height: 1.5; display: block;
}
@media (max-width: 640px) {
  .skills-grid { grid-template-columns: 1fr; }   /* one column at 640, not 860: brand 5.4 (pass 7, cycle 4) */
}

/* ─── STUDENT RESEARCH (center pages) ───────────────── */
.student-research {
  background: var(--navy); padding: var(--sec-y) var(--sec-x);
}
.student-research-inner {
  max-width: 1200px; margin: 0 auto;
}
.student-research .section-label { color: var(--bright-teal); }
.student-research .section-label::before { background: currentColor; }
.student-research h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 40px;
  text-transform: uppercase; letter-spacing: -0.5px; color: #fff;
  margin-bottom: var(--stack-h2-grid);
}
/* The H2 with the center's Directed Research PDF to its right, on its baseline; the link wraps under
   the H2 where the row runs out (Dougie, 2026-09-25). White text on a bright-teal underline, the
   footer's link cue; the PDF tag matches the Research page's DR cards. The underline sits on the
   inner span so it stays off the tag. */
.student-research-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 32px; margin-bottom: var(--stack-h2-grid);
}
.student-research-head h2 { margin-bottom: 0; }
.student-research-pdf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: #fff; text-decoration: none; transition: color 0.2s;
}
.student-research-pdf-text {
  text-decoration: underline; text-decoration-color: var(--bright-teal);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.student-research-pdf-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--bright-teal);
}
.student-research-pdf-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.student-research-pdf:hover { color: var(--bright-teal); }
.abstracts-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.abstract-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 28px 32px;
}
.abstract-semester {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--bright-teal); margin-bottom: 12px;
}
.abstract-title {
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  color: #fff; line-height: 1.3; margin-bottom: 8px;
}
.abstract-summary {
  font-family: var(--font-body); font-size: 16px; font-weight: 300;
  color: rgba(255,255,255,0.85); line-height: 1.65; margin: 0;
}
@media (max-width: 640px) {
  .abstracts-grid { grid-template-columns: 1fr; }   /* one column at 640, not 860: brand 5.4 (pass 7, cycle 4) */
  .abstract-card { padding: 24px; }
  .abstract-title { font-size: 16px; }
}
/* Press strip: student/staff writing in the local press (currently TCI only) */
.press-strip { margin-top: 40px; }
.press-strip-lead {
  font-family: var(--font-body); font-weight: 300; font-size: 17px;
  color: rgba(255,255,255,0.9); line-height: 1.65; margin: 0 0 18px;
}
.press-strip-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.press-strip-links a {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: #fff; text-decoration: none; line-height: 1.3;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.press-strip-links a:hover {
  background: rgba(125,224,234,0.10); border-color: var(--bright-teal);
}
.press-strip-year {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  letter-spacing: 1.5px; color: var(--bright-teal);
}
@media (max-width: 640px) {
  .press-strip { margin-top: 32px; }
  .press-strip-links { gap: 10px; }
  .press-strip-links a { width: 100%; justify-content: space-between; }
}

/* ─── MOBILE HEADING SIZES ───────────────────────────── */
@media (max-width: 640px) {
  .intro-text h2,
  .programs-section h2,
  .anthem-section h2,
  .community-text h2,
  .center-faculty h2,
  .field-skills h2,
  .student-research h2,
  .research-banner-text h2 { font-size: 28px; }
  .center-cta h2 { font-size: 22px; }   /* compact strip H2, §3.7 (26px desktop, 22px phones) */
  .btn { padding: 18px 36px; font-size: 15px; }
}

/* ─── FOOTER MOBILE ──────────────────────────────────── */
/* 860px, not 640: the hamburger band (641-860px) is touch too */
@media (max-width: 860px) {
  .footer-inner { padding: 44px 24px 40px; }
  .footer-nav { gap: 0; }   /* the 44px link boxes already space the rows */
  .footer-nav-row { gap: 0 20px; }
  .footer-nav a { padding: 14px 0; display: inline-block; min-height: 44px; }
  .footer-contact a { padding: 14px 0; display: inline-block; min-height: 44px; }
  /* font-size: 0 swallows the bare "|" text nodes between the legal items
     so they can't dangle when the row wraps; the items restore their own
     size — the cookies button included, or it inherits the 0 and vanishes */
  .footer-legal { font-size: 0; }
  .footer-legal a,
  .footer-legal .footer-cookies-link { font-size: 12px; letter-spacing: 2.5px; padding: 14px 6px; display: inline-block; min-height: 44px; }
}
/* Phones: four links just miss fitting one line (371px of ~342), which strands "Resources" alone.
   Capping the second row makes it break 2 + 2 instead. Labels are fixed, so the numbers hold. */
@media (max-width: 480px) {
  .footer-nav-row:last-child { max-width: 236px; }
}

/* ─── SMALL SCREEN FIXES ────────────────────────────── */
@media (max-width: 480px) {
  .research-banner-photos { height: 200px; }
  .teleport-content { padding: 72px 12px 24px; }
}
@media (max-width: 380px) {
  .hero-content { padding-left: 16px; padding-right: 16px; }
  .hero-headline { font-size: 32px; letter-spacing: -0.5px; }
  .hero-eyebrow { letter-spacing: 2px; }
  .btn { padding: 16px 24px; font-size: 14px; letter-spacing: 1.5px; }
  #main-nav { padding: 0 12px; }
}

/* ─── COOKIE CONSENT BANNER ──────────────────────────── */
#cookie-consent-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  display: flex; justify-content: flex-end; align-items: flex-end;
  padding: 0 24px 24px;
  transform: translateY(130%);
  transition: transform 0.4s ease-out;
  pointer-events: none;
}
#cookie-consent-banner.cookie-banner-visible { transform: translateY(0); }
#cookie-consent-banner.cookie-banner-exit { transform: translateY(130%); transition-duration: 0.3s; }
.cookie-banner-inner {
  max-width: 340px; width: 100%;
  background: rgba(32, 48, 47, 0.92);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 15px 18px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  pointer-events: auto;
}
.cookie-banner-inner p {
  font-family: var(--font-body); font-size: 13px; font-weight: 300;
  line-height: 1.5; color: #fff; margin: 0 0 9px;
}
.cookie-banner-inner a { color: var(--lime); text-decoration: underline; }
.cookie-banner-inner a:hover { color: #fff; }

/* Toggle rows */
.cookie-toggles { margin-bottom: 11px; }
.cookie-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; gap: 14px;
}
.cookie-toggle:last-child { border-bottom: none; }
.cookie-toggle-info { flex: 1; min-width: 0; }
.cookie-toggle-name {
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: #fff; display: block; letter-spacing: 0.5px;
}
.cookie-toggle-desc {
  font-family: var(--font-body); font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.85); display: block; margin-top: 1px;
}
.cookie-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-toggle-slider {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 11px;
  background: rgba(255,255,255,0.2); transition: background 0.2s ease;
}
.cookie-toggle-slider::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform 0.2s ease;
}
.cookie-toggle-input:checked + .cookie-toggle-slider { background: var(--lime); }
.cookie-toggle-input:checked + .cookie-toggle-slider::after { transform: translateX(16px); }
.cookie-toggle-input:focus-visible + .cookie-toggle-slider {
  outline: 2px solid #fff; outline-offset: 2px;
}

/* Buttons */
.cookie-banner-actions { display: flex; gap: 8px; }
.cookie-btn-accept, .cookie-btn-save, .cookie-btn-reject { flex: 1; text-align: center; }
.cookie-btn-accept, .cookie-btn-save, .cookie-btn-reject {
  font-family: var(--font-head); font-weight: 700; font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 9px 10px; min-height: 44px; border-radius: 3px; cursor: pointer;
  transition: all 0.25s ease; border: none;
}
.cookie-btn-accept {
  background: var(--lime); color: var(--forest);
}
.cookie-btn-accept:hover { background: var(--olive); color: #fff; }
.cookie-btn-save {
  background: rgba(255,255,255,0.15); color: #fff;
}
.cookie-btn-save:hover { background: rgba(255,255,255,0.25); }
.cookie-btn-reject {
  background: transparent; color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.5);
}
.cookie-btn-reject:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.5); }

/* Footer manage-cookies button: strip the UA button styling so it inherits
   the .footer-legal type treatment; colour and underline come from the shared
   .footer-legal rule it sits in, alongside Privacy Policy and Terms */
.footer-cookies-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}

@media (max-width: 640px) {
  #cookie-consent-banner {
    justify-content: center; align-items: stretch;
    padding: 0 16px;
  }
  #cookie-consent-banner, #cookie-consent-banner.cookie-banner-exit { transform: translateY(100%); }
  #cookie-consent-banner.cookie-banner-visible { transform: translateY(0); }
  .cookie-banner-inner {
    max-width: 420px;
    border-radius: 14px 14px 0 0; border-bottom: none;
    padding: 16px 20px 18px;
  }
  .cookie-banner-actions { flex-direction: column; }
  .cookie-btn-accept, .cookie-btn-save, .cookie-btn-reject { width: 100%; text-align: center; }
}


/* ─── REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-video-wrap { display: none !important; }
  .hero-mobile-fallback { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT STYLES — clean output for parents & students
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  /* ── Hide non-content elements ── */
  #cookie-consent-banner,
  #main-nav, .nav-mobile-menu, .teleport-overlay,
  .hero-video-wrap, .hero-mobile-fallback, .hero-mobile-fallback-portrait,
  footer, .cta-strip, .cta-banner, .center-cta,
  .nav-hamburger, .nav-actions, .skip-nav,
  .btn, .btn-primary, .btn-outline-white, .btn-lime,
  .btn-navy, .btn-white, .btn-outline-navy,
  .cta-btn-row,
  iframe, video, .video-embed, .anthem-section,
  .filter-bar,
  .inquiry-note, .form-section,
  .form-submit, button[type="submit"] { display: none !important; }

  /* ── Reset layout & kill motion ── */
  body { font-size: 12pt; line-height: 1.5; color: #222; background: #fff; }
  main { padding: 0; }
  * {
    box-shadow: none !important; text-shadow: none !important;
    transition: none !important; animation: none !important;
  }

  /* ── Hero: compact, no overlay ── */
  .hero, .hero-center, .hero-semester, .hero-summer1, .hero-summer2 {
    height: auto !important; min-height: 0 !important;
    background-size: cover; padding: 24pt 0 12pt !important;
    page-break-after: avoid;
  }
  .hero-overlay, .hero-content::before { display: none; }
  .hero-content { position: relative; color: #222; }
  .hero-content * { color: #222 !important; }
  .hero-eyebrow { color: #555 !important; }
  .hero-title { font-size: 22pt; color: #004862 !important; }

  /* ── Colored sections → print-safe ── */
  .facts-banner { background: #f5f5f5 !important; }
  .facts-banner-item { background: transparent !important; color: #222 !important; }
  .facts-banner-num, .facts-banner-label { color: #222 !important; }
  .research-banner-text { background: #f5f5f5 !important; color: #222 !important; }
  .research-banner-text h2, .research-banner-text p { color: #222 !important; }
  /* The eyebrow prints in the hero eyebrow's grey: its screen teal was about 2.1:1 on this ground (pass 4, 2026-09-23). */
  .research-banner-text .section-label { color: #555 !important; }
  .research-banner-text .section-label::before { background: currentColor !important; }
  .programs-section { background: #fff !important; }

  /* ── Content sections ── */
  section { padding: 12pt 0 !important; page-break-inside: avoid; }
  h2 { font-size: 16pt; color: #004862; page-break-after: avoid; }
  h3 { font-size: 13pt; page-break-after: avoid; }
  img { max-width: 100%; height: auto; page-break-inside: avoid; }

  /* ── Course cards: show all expanded ── */
  .course-card { page-break-inside: avoid; }

  /* ── Program cards: no hover effects ── */
  .program-card { transform: none !important; break-inside: avoid; }
  .program-card-img img { transform: none !important; }

  /* ── Links: show URL ── */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  a[href^="http"] { color: #004862; text-decoration: underline; }
  .nav-links a::after, .btn::after { content: none; }

  /* ── Tables and lists ── */
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ccc; padding: 4pt 8pt; text-align: left; }

  /* ── Widows/orphans ── */
  p, li { orphans: 3; widows: 3; }
}