/* ============================================================
   American Heritage School
   One design system for the landing page and all four schools.

   Shared brand: navy, crimson and gold, Lora over Lato, square
   corners, the logo's star. Each school adds one accent color
   (data-accent on <html>) that marks its eyebrows, card rules and
   tiles — enough to tell the schools apart, never enough to make
   them look like different sites.

   Themes: light (default) and [data-theme="dark"].
   ============================================================ */


/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — sampled from the logo */
  --navy:         #212c65;
  --navy-deep:    #171f4a;
  --navy-abyss:   #0d1330;
  --ink-on-gold:  #171f4a;  /* fixed: reads on gold/light fills in BOTH themes */
  --navy-soft:    #e6e9f3;
  --on-navy:      #ffffff;

  --crimson:      #a51e36;
  --crimson-deep: #8c1a2f;
  --on-crimson:   #ffffff;

  --gold:         #daac27;
  --gold-bright:  #edc040;
  --gold-lit:     #f0cc63;
  --gold-deep:    #7a5d0e;
  --gold-soft:    #f6ecc9;

  /* Grounds */
  --light:  #fbf9f4;
  --cream:  #f4f0e6;
  --white:  #ffffff;
  --band:   #212c65;  /* the stat band under every hero */
  --panel:  #171f4a;  /* navy sections */

  /* Ink */
  --ink:        #1b1e29;
  --ink-muted:  #545968;
  --ink-faint:  #858a9c;
  --on-dark:    #ffffff;
  --on-dark-muted: rgba(255, 255, 255, .78);

  /* Lines & states */
  --line:        #ded8c8;
  --line-strong: #7d7a6e;
  --line-on-dark: rgba(255, 255, 255, .16);
  --focus:       #212c65;
  --focus-on-dark: #f0cc63;
  --success:     #1f6b3a;
  --danger:      #a51e36;

  /* Space — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Rhythm */
  --section-y: clamp(48px, 5.5vw, 80px);
  --head-gap:  clamp(24px, 2.5vw, 36px);  /* section heading to its content */
  --grid-gap:  clamp(16px, 2vw, 24px);

  /* Measure & frame */
  --measure: 64ch;
  --container: 1220px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 5vw, 48px);

  /* Shape */
  --rule: 3px;
  --hairline: 1px;
  --star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

  /* Elevation */
  --shadow-sm:   0 1px 2px rgba(23, 31, 74, .06), 0 2px 8px -4px rgba(23, 31, 74, .10);
  --shadow-md:   0 2px 4px rgba(23, 31, 74, .05), 0 12px 28px -12px rgba(23, 31, 74, .22);
  --shadow-lg:   0 4px 8px rgba(23, 31, 74, .05), 0 28px 56px -20px rgba(23, 31, 74, .32);
  --shadow-gold: 0 16px 40px -20px rgba(138, 106, 16, .55);

  /* Type */
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans:  "Lato", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.4rem);
  --t-title-1: clamp(1.65rem, 1.35rem + 1.1vw, 2.2rem);
  --t-title-2: clamp(1.3rem, 1.18rem + .5vw, 1.6rem);
  --t-title-3: clamp(1.2rem, 1.12rem + 0.35vw, 1.4rem);
  --t-quote:   clamp(1.25rem, 1.05rem + .8vw, 1.65rem);
  --t-lead:    clamp(1.02rem, 1rem + .15vw, 1.1rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-meta:    0.8125rem;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .28s;
  --dur-slow: .6s;

  color-scheme: light;
}

[data-theme="dark"] {
  --navy:         #c9d2f2;
  --navy-deep:    #e3e9ff;
  --navy-abyss:   #070b1c;
  --ink-on-gold:  #171f4a;  /* deliberately does not invert */
  --navy-soft:    #1d2547;
  --on-navy:      #0e1330;

  --crimson:      #dd5c76;
  --crimson-deep: #e87f95;
  --on-crimson:   #12172e;

  --gold:         #e4bc45;
  --gold-bright:  #f2d371;
  --gold-lit:     #f7e29a;
  --gold-deep:    #f0cc63;
  --gold-soft:    #2d2716;

  --light:  #0e1330;
  --cream:  #151c3c;
  --white:  #1a2246;
  --band:   #1d2547;
  --panel:  #1d2547;

  --ink:        #f1eee6;
  --ink-muted:  #b2b8ce;
  --ink-faint:  #868ca6;

  --line:        #2d3763;
  --line-strong: #8b93b3;
  --focus:       #f0cc63;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -4px rgba(0, 0, 0, .5);
  --shadow-md:   0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -12px rgba(0, 0, 0, .7);
  --shadow-lg:   0 4px 8px rgba(0, 0, 0, .4), 0 28px 56px -20px rgba(0, 0, 0, .8);

  color-scheme: dark;
}

/* ---------- 2. School accents ----------
   --accent       rules, fills
   --accent-ink   text on light grounds (AA at eyebrow size)
   --accent-bright  marks on dark grounds (topbar, photo tiles, footer)
   --accent-on    text on an --accent fill
   Pages without a school (landing, 404) fall back to crimson. */
:root,
[data-accent="crimson"] { --accent: #a51e36; --accent-ink: #8c1a2f; --accent-bright: #e0677f; --accent-on: #ffffff; }
[data-accent="gold"]    { --accent: #daac27; --accent-ink: #7a5d0e; --accent-bright: #edc040; --accent-on: #171f4a; }
[data-accent="teal"]    { --accent: #1f7a6b; --accent-ink: #1a6659; --accent-bright: #5cc9b2; --accent-on: #ffffff; }
[data-accent="violet"]  { --accent: #5b4a9e; --accent-ink: #4c3d88; --accent-bright: #a898e0; --accent-on: #ffffff; }

/* Both forms: the accent sits on <html> next to data-theme, and on
   individual elements (topbar links, tiles, footer cards) below it. */
[data-theme="dark"],
[data-theme="dark"][data-accent="crimson"], [data-theme="dark"] [data-accent="crimson"] { --accent: #dd5c76; --accent-ink: #e87f95; --accent-bright: #e87f95; --accent-on: #12172e; }
[data-theme="dark"][data-accent="gold"],    [data-theme="dark"] [data-accent="gold"]    { --accent: #e4bc45; --accent-ink: #f0cc63; --accent-bright: #f0cc63; --accent-on: #0e1330; }
[data-theme="dark"][data-accent="teal"],    [data-theme="dark"] [data-accent="teal"]    { --accent: #4fbfa8; --accent-ink: #6fd3be; --accent-bright: #6fd3be; --accent-on: #062018; }
[data-theme="dark"][data-accent="violet"],  [data-theme="dark"] [data-accent="violet"]  { --accent: #9b8ad8; --accent-ink: #b3a4e6; --accent-bright: #b3a4e6; --accent-on: #14102b; }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--light);
  color: var(--ink);
  font: 400 var(--t-body)/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: var(--t-title-1); line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: var(--t-title-2); line-height: 1.2; }
h4 { font-size: var(--t-title-3); line-height: 1.3; }

p { margin: 0 0 var(--space-5); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--crimson); text-decoration-color: var(--crimson); }

img, svg, video { max-width: 100%; display: block; }
strong, b { font-weight: 700; }
::selection { background: var(--gold); color: var(--ink-on-gold); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* Navy focus rings vanish on navy grounds. */
.topbar, .hero, .stats, .section--navy, .footer, .landing { --focus: var(--focus-on-dark); }

.skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--crimson);
  color: var(--on-crimson);
  padding: var(--space-3) var(--space-5);
  font: 900 var(--t-small)/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--space-4); color: var(--on-crimson); }

.star { width: 16px; height: 16px; fill: var(--gold); flex: none; }

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

/* Star bullet list */
ul.list { list-style: none; padding: 0; margin: 0; }
ul.list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--ink-muted);
}
ul.list li:last-child { margin-bottom: 0; }
ul.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 14px;
  height: 14px;
  background: var(--gold);
  clip-path: var(--star);
}

/* ---------- 4. Type ---------- */
.lead { font: 400 var(--t-lead)/1.6 var(--font-sans); color: var(--ink-muted); }
.meta { font: 400 var(--t-meta)/1.5 var(--font-sans); color: var(--ink-muted); }

.eyebrow {
  display: block;
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.prose p { max-width: 60ch; }
.prose .link-arrow { margin-top: var(--space-2); }

/* ---------- 5. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 860px; }

.section { position: relative; padding-block: var(--section-y); background-color: var(--light); }
.section--tight { padding-block: clamp(28px, 3vw, 40px); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--panel); color: var(--on-dark); }
.section--navy h2, .section--navy h3 { color: var(--on-dark); }
.section__foot { margin-top: var(--space-5); }
/* Two plain sections in a row (an optional block like events between them)
   get a hairline, so they still read as separate. */
.section:not(.section--cream):not(.section--navy)
  + .section:not(.section--cream):not(.section--navy) {
  border-top: var(--hairline) solid var(--line);
}

/* minmax(0, …) everywhere so one long word or button can't widen a column. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
.grid--center { align-items: center; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Three across on desktop, two on tablets — where a lone last item
   takes the full row rather than sitting orphaned in the first column. */
@media (min-width: 600px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid--3 > .ptile:last-child:nth-child(odd) { aspect-ratio: 16 / 7; }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.grid--split { gap: clamp(40px, 6vw, 88px); }
@media (min-width: 960px) {
  .grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--form { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
}

@media (min-width: 960px) {
  .split__aside { position: sticky; top: 120px; align-self: start; }
}

.stack > * + * { margin-top: var(--space-4); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* Reveal on scroll */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 6. Buttons & links ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font: 900 var(--t-small)/1.1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover:not([disabled]) { transform: translateY(-2px); }
.btn:active:not([disabled]) { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn__icon { flex: none; width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
  background: var(--crimson);
  color: var(--on-crimson);
  border-color: var(--crimson);
  box-shadow: 0 10px 24px -14px rgba(165, 30, 54, .9);
}
.btn--primary:hover:not([disabled]) {
  background: var(--crimson-deep);
  border-color: var(--crimson-deep);
  color: var(--on-crimson);
}

.btn--gold {
  background: var(--gold);
  color: var(--ink-on-gold);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover:not([disabled]) {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--ink-on-gold);
}

.btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--secondary:hover:not([disabled]) { background: var(--navy); color: var(--on-navy); }

.btn--on-dark {
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, .5);
  background: rgba(13, 19, 48, .25);
  backdrop-filter: blur(6px);
}
.btn--on-dark:hover:not([disabled]) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-on-gold);
}

.btn--lg { padding: 20px var(--space-6); font-size: var(--t-body); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--t-meta); }
.btn--block { width: 100%; }
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 900 var(--t-small)/1.2 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--crimson); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 7. Top bar: every school, on every page ---------- */
.topbar {
  background: var(--navy-abyss);
  font: 700 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-theme="dark"] .topbar { background: #060a18; }

.topbar__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  min-height: 44px;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
}
.topbar a:hover { color: #fff; }

.topbar__home {
  padding-right: var(--space-5);
  border-right: var(--hairline) solid var(--line-on-dark);
}
.topbar__home svg { width: 14px; height: 14px; }

.topbar__schools { display: flex; gap: var(--space-5); }
.topbar__school { position: relative; }
.topbar__dot {
  width: 9px;
  height: 9px;
  background: var(--accent-bright);
  clip-path: var(--star);
}
.topbar__school[aria-current="page"] { color: #fff; }
.topbar__school[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rule);
  background: var(--accent-bright);
}

.topbar__links { display: flex; gap: var(--space-5); margin-left: auto; }

/* On phones the schools scroll sideways; the edge fades to say there is more. */
@media (max-width: 899px) {
  .topbar__links { display: none; }
  .topbar__inner {
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .topbar__inner::-webkit-scrollbar { display: none; }
  .topbar__inner::after { content: ""; flex: 0 0 var(--space-7); }
  .topbar__home { padding-right: var(--space-4); }
  .topbar__schools { gap: var(--space-4); }
}

/* ---------- 8. Masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--light) 90%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: var(--rule) solid var(--accent);
  border-bottom: var(--hairline) solid var(--line);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.masthead.is-stuck { box-shadow: var(--shadow-md); background: color-mix(in srgb, var(--light) 96%, transparent); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 80px;
  transition: min-height var(--dur) var(--ease);
}
.masthead.is-stuck .nav { min-height: 66px; }

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}
.nav__brand img { height: 50px; width: auto; transition: height var(--dur) var(--ease); }
.masthead.is-stuck .nav__brand img { height: 42px; }
[data-theme="dark"] .nav__brand img {
  /* The logo's ink is navy; give it a light plate on the dark ground. */
  background: #fbf9f4;
  padding: 6px 10px;
  box-sizing: content-box;
}
.nav__brand-text {
  display: none;
  border-left: var(--hairline) solid var(--line);
  padding-left: var(--space-3);
  font: 700 var(--t-meta)/1.35 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
@media (min-width: 1180px) { .nav__brand-text { display: block; } }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 1.6vw, var(--space-6));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nav__link {
  position: relative;
  display: block;
  font: 700 var(--t-small)/1 var(--font-sans);
  letter-spacing: .04em;
  color: var(--navy);
  text-decoration: none;
  padding-block: var(--space-3);
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rule);
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--crimson); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--crimson); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--crimson); }

.nav__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 3px; width: 16px; }
.nav__toggle-bars span {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav.is-open .nav__toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav { flex-wrap: wrap; min-height: 68px; }
  .nav__brand img { height: 44px; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease-out);
  }
  .nav.is-open .nav__links { max-height: 70vh; overflow-y: auto; }
  .nav__links li { border-top: var(--hairline) solid var(--line); }
  .nav__link { padding: var(--space-4) 0; font-size: var(--t-lead); }
  .nav__link::after { display: none; }
  .nav__actions { display: none; }
  .nav.is-open .nav__actions {
    display: flex;
    order: 4;
    width: 100%;
    padding-block: var(--space-4) var(--space-5);
    border-top: var(--hairline) solid var(--line);
  }
  .nav.is-open .nav__actions .btn { flex: 1; }
}

/* ---------- 9. Hero ----------
   Every school opens the same way: its own picture (or film) under a
   navy scrim, text on the left edge of the page grid. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(440px, 58vh, 580px);
  background: var(--navy-abyss);
  color: var(--on-dark);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__photo,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, center);
  filter: saturate(.9) contrast(1.04);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 19, 48, .94) 0%, rgba(13, 19, 48, .84) 34%, rgba(13, 19, 48, .42) 66%, rgba(13, 19, 48, .18) 100%),
    linear-gradient(to top, rgba(13, 19, 48, .7) 0%, transparent 38%);
}

.hero__inner { padding-block: clamp(48px, 5vw, 72px); }
.hero__content { max-width: 680px; }

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  margin: 0 0 20px;
  padding: var(--space-2) var(--space-4);
  border: var(--hairline) solid rgba(255, 255, 255, .24);
  background: rgba(13, 19, 48, .45);
  backdrop-filter: blur(6px);
  font: 700 var(--t-meta)/1.4 var(--font-sans);
  letter-spacing: .03em;
  color: #fff;
}
.hero__note .star { width: 14px; height: 14px; }
.hero__note a { color: inherit; text-decoration: none; }
.hero__note a:hover { color: var(--gold-lit); text-decoration: underline; text-decoration-color: var(--gold); }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 14px;
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__eyebrow::before { content: ""; flex: none; width: 36px; height: 2px; background: var(--gold); }

.hero h1 { color: var(--on-dark); max-width: 20ch; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--gold-lit); }

.hero__rule {
  width: 88px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--crimson) 100%);
  margin: var(--space-4) 0;
}
[data-theme="dark"] .hero__rule { background: linear-gradient(90deg, #daac27 0%, #a51e36 100%); }

.hero__lead {
  font: 400 var(--t-lead)/1.6 var(--font-sans);
  color: rgba(255, 255, 255, .86);
  max-width: 50ch;
  margin-bottom: var(--space-5);
}

@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: 72px 64px; }
  .hero__scrim {
    background: linear-gradient(to top, rgba(13, 19, 48, .95) 0%, rgba(13, 19, 48, .82) 55%, rgba(13, 19, 48, .66) 100%);
  }
  .hero__eyebrow { letter-spacing: .14em; }
  .hero__eyebrow::before { width: 24px; }
}
@media (max-width: 479px) {
  .hero__cta .btn { width: 100%; }
}

/* Credit and controls along the foot of a hero; shared with the landing page. */
.mediabar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
  font: 700 var(--t-meta)/1.4 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mediabar__credit { color: rgba(255, 255, 255, .6); }
.mediabar__controls { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
@media (max-width: 599px) {
  .mediabar__credit { display: none; }
}

.media-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(13, 19, 48, .55);
  backdrop-filter: blur(8px);
  border: var(--hairline) solid rgba(255, 255, 255, .28);
  color: #fff;
  font: inherit;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.media-toggle[hidden] { display: none; }
.media-toggle:hover { border-color: var(--gold); background: rgba(13, 19, 48, .8); }
.media-toggle svg { width: 12px; height: 12px; }
.media-toggle .icon-play { display: none; }
.media-toggle[aria-pressed="true"] .icon-play { display: block; }
.media-toggle[aria-pressed="true"] .icon-pause { display: none; }

/* ---------- 10. Stat band ---------- */
.stats {
  background: var(--band);
  color: var(--on-dark);
  border-top: 4px solid var(--gold);
}

/* The 1px gap shows the grid's own color through, so the cells get
   hairline dividers in any arrangement. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-on-dark);
}
.stat {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: 22px var(--space-3);
  text-align: center;
  background: var(--band);
}
.stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .stats__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .stat:last-child:nth-child(odd) { grid-column: auto; }
}

.stat__num {
  font: 600 clamp(1.8rem, 1.4rem + 1.3vw, 2.5rem)/1.05 var(--font-serif);
  color: var(--gold);
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}
.stat__label {
  margin-top: var(--space-2);
  font: 700 var(--t-meta)/1.4 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.stat__note { font: 400 var(--t-meta)/1.4 var(--font-sans); color: var(--on-dark-muted); }

/* The same figures on a light card, for in-page numbers. */
.figures {
  margin-top: var(--space-6);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--accent);
}
.figures__title {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent-ink);
}
.figures .stats__grid { background: var(--line); }
.figures .stat { background: var(--white); }
.figures .stat__num { color: var(--navy); }
.figures .stat__label { color: var(--ink); }
.figures .stat__note { color: var(--ink-muted); }

/* ---------- 11. Section heading ---------- */
/* Every section head aligns left, on the same edge as the content under it. */
.heading { max-width: 760px; margin-bottom: var(--head-gap); }
.heading .eyebrow { margin-bottom: var(--space-2); }
.heading__rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-top: 14px;
}
.heading__lead {
  font: 400 var(--t-lead)/1.6 var(--font-sans);
  color: var(--ink-muted);
  margin: 14px 0 0;
  max-width: 58ch;
}
.heading--on-dark .eyebrow { color: var(--accent-bright); }
.heading--on-dark .heading__title { color: var(--on-dark); }
.heading--on-dark .heading__lead { color: var(--on-dark-muted); }

/* ---------- 12. Cards ----------
   One surface for every card: white, a hairline, the school's accent
   along the top edge. */
.pillar,
.plan,
.action,
.minicard,
.form-panel {
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--accent);
}

.pillar {
  padding: var(--space-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pillar__mark {
  display: block;
  margin-bottom: var(--space-4);
  font: 600 1.05rem/1 var(--font-serif);
  letter-spacing: .12em;
  color: var(--accent-ink);
}
.pillar__title { font-size: var(--t-title-2); margin-bottom: var(--space-3); }
.pillar p { color: var(--ink-muted); font-size: var(--t-small); margin: 0; }

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}
.plan--featured { box-shadow: var(--shadow-lg); }
.plan__tier {
  align-self: flex-start;
  padding-block: 6px;
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.plan--featured .plan__tier {
  padding-inline: var(--space-3);
  background: var(--accent);
  color: var(--accent-on);
}
.plan__name { font: 600 var(--t-title-3)/1.25 var(--font-serif); margin: 0; }
.plan__price {
  font: 600 clamp(2rem, 1.6rem + 1.4vw, 2.6rem)/1 var(--font-serif);
  color: var(--navy);
  letter-spacing: -.02em;
}
.plan__unit { font: 400 var(--t-small)/1 var(--font-sans); color: var(--ink-muted); letter-spacing: 0; }
.plan__text { font-size: var(--t-small); color: var(--ink-muted); margin: 0 0 var(--space-2); }

.actions-row {
  display: grid;
  gap: var(--grid-gap);
  margin-top: var(--space-6);
}
@media (min-width: 760px) { .actions-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.actions-row--flush { margin-top: 0; }
.action {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.action:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; }
.action__icon { width: 40px; height: 40px; margin-bottom: var(--space-2); color: var(--accent-ink); }
.action__name { font: 600 var(--t-title-3)/1.2 var(--font-serif); color: var(--navy); }
.action__note { font-size: var(--t-small); color: var(--ink-muted); }

.minicard { padding: var(--space-5); }
.minicard__title { font-size: var(--t-title-3); margin-bottom: var(--space-2); }
.minicard p { font-size: var(--t-small); color: var(--ink-muted); margin: 0; }

/* ---------- 13. Photo tiles ---------- */
.ptile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--navy-abyss);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ptile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ptile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ptile:hover img { transform: scale(1.05); }
.ptile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 19, 48, .9) 0%, rgba(13, 19, 48, .4) 40%, rgba(13, 19, 48, 0) 72%);
}
.ptile__label {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
}
.ptile__rule {
  width: 40px;
  height: var(--rule);
  background: var(--accent-bright);
  transition: width var(--dur) var(--ease);
}
.ptile:hover .ptile__rule { width: 72px; }
.ptile__name { font: 600 var(--t-title-3)/1.2 var(--font-serif); color: #fff; }
.ptile__note {
  font: 700 var(--t-meta)/1.4 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

/* One lead tile and a run of smaller ones */
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery__lead { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery__lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* Promo artwork already carries its own wording, so it is shown whole. */
.banners { display: grid; gap: var(--grid-gap); }
@media (min-width: 640px)  { .banners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .banners { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.banner-img {
  display: block;
  overflow: hidden;
  background: var(--white);
  border: var(--hairline) solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.banner-img:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.banner-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 504;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.banner-img:hover img { transform: scale(1.03); }

.framed {
  width: 100%;
  height: auto;
  border: var(--hairline) solid var(--line);
  box-shadow: var(--shadow-md);
}

/* ---------- 14. Editorial blocks ---------- */
.quote { position: relative; max-width: 820px; margin: 0; }
.quote__mark {
  display: block;
  font: 700 5rem/.6 var(--font-serif);
  color: var(--gold);
  margin-bottom: var(--space-4);
}
.quote__text {
  font: italic 500 var(--t-quote)/1.4 var(--font-serif);
  color: var(--navy);
  margin: 0;
  text-wrap: pretty;
}
.quote__cite {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font: 400 var(--t-small)/1.4 var(--font-sans);
  color: var(--ink-muted);
  text-align: left;
}
.quote__cite strong { display: block; color: var(--ink); font-weight: 900; letter-spacing: .02em; }
.quote__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--gold);
  color: var(--ink-on-gold);
  font: 600 1.1rem/1 var(--font-serif);
}
.quote--on-dark .quote__text,
.quote--on-dark .quote__cite strong { color: var(--on-dark); }
.quote--on-dark .quote__cite { color: var(--on-dark-muted); }
.quote--center { margin-inline: auto; text-align: center; }
.quote--center .quote__cite { justify-content: center; }

.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-left: var(--rule) solid var(--accent);
}
.testimonial blockquote { margin: 0; font: italic 400 var(--t-body)/1.6 var(--font-serif); color: var(--ink); }
.testimonial figcaption { font: 400 var(--t-meta)/1.5 var(--font-sans); color: var(--ink-muted); }
.testimonial figcaption strong { display: block; color: var(--navy); font-weight: 900; letter-spacing: .02em; }

/* Events */
.events { border-top: var(--hairline) solid var(--line); }
.event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-3);
  border-bottom: var(--hairline) solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur) var(--ease);
}
a.event:hover { background: var(--white); color: inherit; }
.event__date {
  display: grid;
  width: 64px;
  padding: var(--space-2) var(--space-1);
  text-align: center;
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--accent);
}
.event__month {
  font: 900 var(--t-meta)/1.2 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.event__day { font: 600 1.6rem/1.1 var(--font-serif); color: var(--navy); }
.event__title { font: 600 var(--t-title-3)/1.3 var(--font-serif); margin: 0 0 var(--space-1); }
.event__meta { font: 400 var(--t-small)/1.4 var(--font-sans); color: var(--ink-muted); }
.event__go { width: 18px; height: 18px; color: var(--ink-faint); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.event:hover .event__go { transform: translateX(4px); color: var(--accent-ink); }
@media (max-width: 599px) {
  .event { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); }
  .event__go { display: none; }
}

/* Notice */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--gold-soft);
  border-top: var(--rule) solid var(--gold);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink);
}
.notice--navy { background: var(--navy-soft); border-top-color: var(--navy); }
.notice strong { color: var(--navy); }
.notice .star { margin-top: 3px; }
.notice p { margin: 0; max-width: none; }

/* Numbered steps */
.steps { list-style: none; counter-reset: step; margin: 0 0 var(--space-6); padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  margin-bottom: var(--space-4);
  color: var(--ink-muted);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--navy);
  color: var(--on-navy);
  font: 900 var(--t-meta)/1 var(--font-sans);
}
.steps li strong { color: var(--ink); }

/* Contact details, from the campus registry */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-5) var(--space-6);
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--line);
}
.contact dt {
  margin-bottom: var(--space-2);
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.contact dd {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

/* Problem → answer */
.problems { display: grid; gap: var(--space-4); }
.problem {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-left: var(--rule) solid var(--accent);
}
.problem__from {
  font: 700 var(--t-small)/1.4 var(--font-sans);
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--crimson);
  text-decoration-thickness: 2px;
}
.problem__to { font-size: var(--t-small); color: var(--ink-muted); }
.problem__to strong { color: var(--navy); }

/* Curriculum */
.syllabi { row-gap: var(--space-7); }
.syllabus { padding-top: var(--space-5); border-top: var(--rule) solid var(--accent); }
.syllabus__name { font: 600 var(--t-title-3)/1.25 var(--font-serif); margin: 0 0 var(--space-3); }
.syllabus__text { font-size: var(--t-small); color: var(--ink-muted); margin: 0; }

/* Course tracks */
.tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.track {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-left: var(--rule) solid var(--accent);
}
.track__num { font: 600 var(--t-small)/1 var(--font-serif); letter-spacing: .08em; color: var(--accent-ink); }
.track__name { font: 600 var(--t-title-3)/1.25 var(--font-serif); color: var(--navy); }
.track__area {
  font: 700 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Funding states */
.statecloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.statecloud__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--hairline) solid var(--line-on-dark);
  color: var(--on-dark);
  font: 600 var(--t-title-3)/1 var(--font-serif);
}
.statecloud__item .star { width: 14px; height: 14px; }

/* ---------- 15. Forms ---------- */
.form-panel {
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}
.form-panel__title { font-size: var(--t-title-2); margin-bottom: var(--space-2); }
.form-panel__note { margin-bottom: var(--space-6); font-size: var(--t-small); color: var(--ink-muted); }

/* align-content: start keeps the label, box and error together at the top
   when the field beside it is taller (an error shown there, a hint here). */
.field { display: grid; gap: var(--space-2); align-content: start; }
.field label {
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
.field__req { color: var(--crimson); }
/* The honeypot: off screen for people, still in the form for bots. */
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.input {
  width: 100%;
  padding: var(--space-4);
  font: 400 var(--t-body)/1.5 var(--font-sans);
  color: var(--ink);
  background: var(--light);
  border: var(--hairline) solid var(--line-strong);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.input::placeholder { color: var(--ink-faint); }
.input:hover { border-color: var(--navy); }
.input:focus {
  border-color: var(--navy);
  background: var(--white);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23858a9c' d='M7 9 0 2l2-2 5 5 5-5 2 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
}
.field__hint { font: 400 var(--t-meta)/1.5 var(--font-sans); color: var(--ink-muted); }
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--danger);
  font: 700 var(--t-meta)/1.4 var(--font-sans);
}
.field[data-invalid="true"] .field__error { display: flex; }
.field[data-invalid="true"] .input { border-color: var(--danger); border-width: 2px; }
/* The send itself failed, as opposed to .field__error, which flags one
   input the visitor can correct. */
.form-error {
  display: none;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--danger);
  font: 700 var(--t-meta)/1.4 var(--font-sans);
}
.form-error svg { flex: none; margin-top: 2px; }
.form-error.is-shown { display: flex; }
.form-status {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--navy-soft);
  border-top: var(--rule) solid var(--success);
  color: var(--ink);
  font-size: var(--t-small);
}
.form-status.is-shown { display: flex; }

/* ---------- 16. Footer ---------- */
.footer {
  background: var(--navy-abyss);
  color: var(--on-dark-muted);
  padding-block: clamp(48px, 7vw, 88px) var(--space-6);
  font-size: var(--t-small);
}
[data-theme="dark"] .footer { background: #060a18; }
.footer h4, .footer .footer__heading {
  margin-bottom: var(--space-5);
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer a { color: var(--on-dark-muted); text-decoration: none; }
.footer a:hover { color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--space-3); }
.footer p { color: var(--on-dark-muted); max-width: 34ch; }

.footer__top {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom: var(--space-8);
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 760px) and (max-width: 1023px) {
  .footer__top { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}
.footer__logo {
  height: 56px;
  width: auto;
  margin-bottom: var(--space-5);
  /* The logo's ink is navy; give it a light plate on the dark footer. */
  background: #fbf9f4;
  padding: var(--space-3) var(--space-4);
  box-sizing: content-box;
}
.footer__meta { margin-left: var(--space-2); font-size: var(--t-meta); color: var(--ink-faint); }

.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--hairline) solid var(--line-on-dark);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-on-gold); }
.footer__social svg { width: 18px; height: 18px; }

.footer__campuses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-7);
  border-top: var(--hairline) solid var(--line-on-dark);
}
.footer__campus {
  padding: var(--space-5);
  border: var(--hairline) solid var(--line-on-dark);
  border-top: var(--rule) solid var(--accent-bright);
}
.footer__campus strong {
  display: block;
  margin-bottom: var(--space-1);
  font: 600 var(--t-title-3)/1.3 var(--font-serif);
  color: var(--on-dark);
}
.footer__campus-meta {
  display: block;
  margin-bottom: var(--space-4);
  font: 700 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.footer__contact { display: grid; gap: var(--space-3); font-size: var(--t-meta); overflow-wrap: anywhere; }
.footer__contact-row { display: flex; gap: var(--space-3); }
.footer__contact-key {
  flex: none;
  width: 48px;
  font: 700 var(--t-meta)/1.6 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--line-on-dark);
  font-size: var(--t-meta);
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: var(--hairline) solid var(--line-on-dark);
  color: var(--on-dark-muted);
  font: 700 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   17. Landing page
   The film, the animated flag, and the four campus tiles that
   carry all the navigation this page needs.
   ============================================================ */
.is-landing { scroll-padding-top: 0; }

.landing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-block: clamp(56px, 9vw, 96px) clamp(80px, 10vw, 120px);
  background: var(--navy-abyss);
  color: var(--on-dark);
}
.landing__media { position: absolute; inset: 0; z-index: -1; }
/* One photo per school. The incoming slide fades in over the outgoing one,
   which holds at full opacity underneath so the scene never dips to black;
   each drifts slowly back from a slight zoom while it is on screen. */
/* z-index keeps the slides' own stacking inside this box, under the scrim. */
.slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
  opacity: 0;
  filter: saturate(.9) contrast(1.04);
  transition: opacity 1.6s var(--ease);
}
.slide.is-active  { z-index: 2; opacity: 1; }
.slide.is-leaving { z-index: 1; opacity: 1; transition: none; }
.slide.is-active,
.slide.is-leaving { animation: slide-drift 12s linear both; }
@keyframes slide-drift {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* One bar per school; the current one fills over the slide's time on screen. */
.slides__progress { display: flex; gap: 6px; }
.slides__progress[hidden] { display: none; }
.slides__progress span {
  position: relative;
  width: 28px;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .26);
}
.slides__progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: left;
}
.slides__progress span.is-done::after { transform: scaleX(1); }
.slides__progress span.is-current::after { animation: slide-progress var(--slide-ms, 7s) linear forwards; }
.slides__progress[data-paused="true"] span.is-current::after { animation-play-state: paused; }
@keyframes slide-progress { to { transform: scaleX(1); } }
.landing__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 80% at 50% 45%, rgba(13, 19, 48, .58) 0%, rgba(13, 19, 48, .86) 70%, rgba(13, 19, 48, .95) 100%),
    linear-gradient(to bottom, rgba(13, 19, 48, .72) 0%, transparent 28%, transparent 62%, rgba(13, 19, 48, .92) 100%);
}
.landing__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  text-align: center;
}
.landing__wordmark {
  width: clamp(260px, 42vw, 440px);
  height: auto;
  /* The wordmark is navy ink; knock it back to white for the dark field. */
  filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0, 0, 0, .55));
}
.landing__tagline {
  max-width: 44ch;
  margin: 0;
  font: italic 400 var(--t-lead)/1.6 var(--font-serif);
  color: rgba(255, 255, 255, .88);
  text-wrap: balance;
}
.landing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* The flag: banner, star and chevron drawn from the logo */
.flag {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(150px, 20vw, 210px);
  aspect-ratio: 1;
  margin-bottom: var(--space-3);
}
.flag__banner {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, #2b3878 0%, #1b2450 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  border: 2px solid rgba(218, 172, 39, .6);
  box-shadow: 0 28px 60px -22px rgba(0, 0, 0, .8);
  transform-origin: 50% 0;
  animation: flag-wave 6s var(--ease) infinite;
}
.flag__banner::after {
  content: "";
  position: absolute;
  inset: 9px 9px 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}
/* A highlight that sweeps across the banner like light over cloth */
.flag__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
  animation: flag-sheen 6s var(--ease) infinite;
}
.flag__star {
  position: relative;
  width: 44%;
  margin-bottom: 16%;
  fill: var(--gold);
  filter: drop-shadow(0 6px 18px rgba(218, 172, 39, .6));
  animation: flag-twinkle 6s var(--ease) infinite;
}
.flag__chevron {
  position: absolute;
  z-index: 1;
  bottom: 11%;
  width: 72%;
  height: 18%;
  background: #a51e36;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .45));
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 42%, 50% 88%, 0 42%);
  animation: flag-wave 6s var(--ease) infinite .35s;
}
.flag__ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(218, 172, 39, .38);
  border-radius: 50%;
  animation: flag-spin 52s linear infinite;
}
.flag__ring--inner {
  inset: 13%;
  border-style: solid;
  border-color: rgba(255, 255, 255, .12);
  animation-duration: 38s;
  animation-direction: reverse;
}
@keyframes flag-wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-7px) rotate(-1.1deg); }
  65%      { transform: translateY(4px) rotate(.9deg); }
}
@keyframes flag-sheen {
  0%, 62%, 100% { transform: translateX(-120%); }
  80%           { transform: translateX(120%); }
}
@keyframes flag-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  46%      { opacity: .82; transform: scale(.94); }
}
@keyframes flag-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .flag__banner, .flag__chevron, .flag__ring, .flag__star, .flag__banner::before { animation: none; }
}

/* Campus chooser: four across, as on the old campus picker; two, then one. */
.chooser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}
@media (min-width: 620px)  { .chooser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .chooser__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.tile:hover { color: inherit; }
/* The supplied artwork has a white ground baked in, so it sits on white. */
.tile__shot {
  display: block;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover .tile__shot { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.tile__shot img {
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tile:hover .tile__shot img { transform: scale(1.035); }
.tile__copy {
  flex: 1;
  padding: var(--space-5) var(--space-1) var(--space-3);
  font: 400 var(--t-small)/1.6 var(--font-sans);
  color: var(--ink-muted);
}
.tile__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-1);
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.tile__arrow { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.tile:hover .tile__arrow { transform: translateX(4px); }

/* The three attributes, set as type so they read in either theme. */
.attributes { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--line); }
.attributes li {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
  font: 600 var(--t-title-2)/1.2 var(--font-serif);
  color: var(--navy);
}
.attributes__num {
  flex: none;
  width: 2.5em;
  font: 600 var(--t-small)/1 var(--font-serif);
  letter-spacing: .12em;
  color: var(--gold-deep);
}

/* ---------- 18. Not found ---------- */
.notfound { padding-block: clamp(80px, 12vw, 160px); text-align: center; }
.notfound__title { margin: var(--space-5) 0; }
.notfound .lead { margin-inline: auto; }
.notfound__actions { justify-content: center; margin-top: var(--space-6); }

/* ============================================================
   19. Site pages (About, Tuition, Employment, ...)
   ============================================================ */
.pagehead {
  background: var(--navy-deep);
  color: var(--on-dark);
  border-bottom: 4px solid var(--gold);
  padding-block: clamp(36px, 5vw, 64px) clamp(32px, 4vw, 52px);
  --focus: var(--focus-on-dark);
}
[data-theme="dark"] .pagehead { background: var(--panel); }
.pagehead__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.pagehead__title { color: var(--on-dark); font-size: var(--t-title-1); max-width: 24ch; }
.pagehead__lead { margin: var(--space-4) 0 0; max-width: 62ch; color: var(--on-dark-muted); font-size: var(--t-lead); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none;
  font: 700 var(--t-meta)/1.4 var(--font-sans); letter-spacing: .04em; }
.crumbs li + li::before { content: "›"; margin-right: var(--space-2); color: rgba(255, 255, 255, .45); }
.crumbs a { color: var(--on-dark-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }

/* Long-form reading: policies, program descriptions */
.doc { max-width: 72ch; }
.doc h2 { font-size: var(--t-title-2); margin: var(--space-7) 0 var(--space-3); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: var(--t-title-3); margin: var(--space-5) 0 var(--space-2); }
.doc p, .doc li { color: var(--ink); }
.doc ul, .doc ol { padding-left: 1.2em; margin: 0 0 var(--space-5); }
.doc li { margin-bottom: var(--space-2); }
.doc .meta { margin-top: var(--space-6); }
.source-note { margin-top: var(--space-6); font-size: var(--t-meta); color: var(--ink-muted); }
.source-note a { color: inherit; }

/* Side column next to a long text */
.aside-grid { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 960px) {
  .aside-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; }
  .aside-grid > aside { position: sticky; top: 110px; }
}
.aside-card { padding: var(--space-5); background: var(--white); border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--accent); }
.aside-card h2, .aside-card h3 { font-size: var(--t-title-3); margin-bottom: var(--space-3); }
.aside-card p { font-size: var(--t-small); color: var(--ink-muted); }
.aside-card .btn { margin-top: var(--space-3); }

/* Lists of things: jobs, programs, campuses */
.rows { border-top: var(--hairline) solid var(--line); }
.row {
  display: grid;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-5) var(--space-2);
  border-bottom: var(--hairline) solid var(--line);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 720px) { .row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
a.row:hover { background: var(--white); color: inherit; }
.row__title { font: 600 var(--t-title-3)/1.3 var(--font-serif); color: var(--navy); margin: 0; }
.row__meta { font-size: var(--t-small); color: var(--ink-muted); }
.row__side { font: 700 var(--t-meta)/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }

/* Simple data tables (tuition) */
.datatable { width: 100%; border-collapse: collapse; font-size: var(--t-small); background: var(--white);
  border: var(--hairline) solid var(--line); }
.datatable th, .datatable td { padding: var(--space-3) var(--space-4); border-bottom: var(--hairline) solid var(--line); text-align: left; vertical-align: top; }
.datatable thead th { font: 900 var(--t-meta)/1.2 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--light); }
.datatable td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6); }
.chips-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips-nav a { padding: 7px 14px; border: var(--hairline) solid var(--line-strong); border-radius: 999px;
  font: 700 var(--t-small)/1.2 var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.chips-nav a:hover { border-color: var(--navy); color: var(--navy); }
.chips-nav a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.month-title { font-size: var(--t-title-3); margin: var(--space-6) 0 var(--space-3); }
.month-title:first-of-type { margin-top: 0; }
.empty-state { padding: var(--space-6); background: var(--white); border: var(--hairline) dashed var(--line-strong); }
.source-note code { font-size: .95em; }
.offices { display: grid; gap: var(--space-5); }
.office { padding-left: var(--space-5); border-left: var(--rule) solid var(--accent); }
.office__name { font-size: var(--t-title-3); }
.office__name a { text-decoration: none; }
.office__meta { margin: var(--space-1) 0 0; font: 700 var(--t-meta)/1.4 var(--font-sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-ink); }
.office .contact { margin-top: var(--space-4); padding-top: 0; border-top: 0; }
.section-title { font-size: var(--t-title-2); margin-bottom: var(--space-4); }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); }
.jump a { color: var(--on-dark-muted); font: 700 var(--t-small)/1.4 var(--font-sans); text-decoration-color: rgba(218,172,39,.6); }
.jump a:hover { color: #fff; }
.aims { padding-left: 1.4em; }
.aims li { margin-bottom: var(--space-2); }
.attr-cards { margin-top: var(--space-5); }
.attr-card { display: grid; gap: var(--space-2); text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.attr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.attr-card p { color: var(--ink-muted); }
.principles { list-style: none; counter-reset: principle; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.principles li { counter-increment: principle; position: relative; padding: var(--space-5) var(--space-5) var(--space-5) 64px;
  background: var(--white); border: var(--hairline) solid var(--line); }
.principles li::before { content: counter(principle); position: absolute; left: var(--space-5); top: var(--space-5);
  font: 600 1.6rem/1 var(--font-serif); color: var(--gold-deep); }
.principles h3 { font-size: var(--t-title-3); margin-bottom: var(--space-2); }
.principles p { font-size: var(--t-small); color: var(--ink-muted); margin: 0; max-width: none; }
.people { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-3) var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.people li { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--line); }
.people strong { color: var(--navy); }
.people span { font-size: var(--t-small); color: var(--ink-muted); }
.people a { text-decoration: none; }
.doc blockquote { margin: var(--space-5) 0; padding-left: var(--space-5); border-left: var(--rule) solid var(--gold);
  font: italic 400 var(--t-lead)/1.5 var(--font-serif); color: var(--navy); }
.doc .attribution { margin-top: calc(-1 * var(--space-3)); font-size: var(--t-small); color: var(--ink-muted); }
.funds .fund { display: grid; gap: var(--space-3); align-content: start; }
.fund__text p, .fund__text li { font-size: var(--t-small); color: var(--ink-muted); }
.fund__text h3 { font-size: 1rem; margin: var(--space-3) 0 var(--space-1); color: var(--navy); }
.fund .btn { justify-self: start; margin-top: auto; }
.faq { margin-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.faq details { border-bottom: var(--hairline) solid var(--line); }
.faq summary { padding: var(--space-4) var(--space-2); cursor: pointer; font: 600 var(--t-body)/1.4 var(--font-serif); color: var(--navy); }
.faq summary:hover { color: var(--crimson); }
.faq details > .doc { padding: 0 var(--space-2) var(--space-4); }
.statelist { columns: 2; }
.faq-single { margin: var(--space-4) 0; border: var(--hairline) solid var(--line); background: var(--white); padding: 0 var(--space-4); }
.faq-single summary { padding: var(--space-3) 0; cursor: pointer; font-weight: 700; color: var(--navy); }
.banner-photo { width: 100%; height: auto; aspect-ratio: 1500 / 430; object-fit: cover; margin-bottom: var(--space-6); border: var(--hairline) solid var(--line); }
.program-photo { float: right; width: min(45%, 300px); margin: 0 0 var(--space-4) var(--space-5); }
@media (max-width: 599px) { .program-photo { float: none; width: 100%; margin: 0 0 var(--space-4); } }
.people--stacked { grid-template-columns: 1fr; margin: 0; }
.people-group { font-size: 1rem; font-family: var(--font-sans); font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); margin: var(--space-6) 0 var(--space-2); }
.people-group:first-of-type { margin-top: 0; }
.plain-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

/* ---------- Next.js port ----------
   The landing class moved from <html> to the page wrapper; the scroll
   padding it cleared still belongs on the scrolling element. */
html:has(.is-landing) { scroll-padding-top: 0; }

/* ---------- 20. Application form (/apply) ---------- */
/* Progress: one thin bar per step, filled up to the current one. The
   step's name is in the line underneath, so the bars carry no text and fit
   any card width. (Named apart from .steps, the numbered lists on the
   site's other pages.) */
.apply-progress {
  display: flex;
  gap: 6px;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.apply-progress__bar {
  flex: 1 1 0;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  transition: background-color var(--dur) var(--ease);
}
.apply-progress__bar.is-done,
.apply-progress__bar[aria-current="step"] { background: var(--accent); }
.apply-progress__label {
  display: block;
  margin-bottom: var(--space-4);
  font: 700 var(--t-meta)/1.4 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Radio groups and the consent checkbox. Each choice is a tappable row. */
.choices { display: grid; gap: var(--space-2); }
.choices--row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--light);
  border: var(--hairline) solid var(--line-strong);
  cursor: pointer;
  font: 400 var(--t-body)/1.4 var(--font-sans);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.choice:hover { border-color: var(--navy); }
.choice:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.choice.is-checked { border-color: var(--accent); background: var(--white); box-shadow: inset 0 0 0 1px var(--accent); }
.choice .topbar__dot { flex: none; }
.choice__text { display: grid; gap: 2px; }
/* A choice is a <label> inside .field, whose label rule (capitals, heavy)
   would otherwise win: choices read as normal text, the option name in
   semibold and any explanation under it. */
.field label.choice { font: 400 var(--t-body)/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.field label.choice .choice__text { font-weight: 600; color: var(--navy); }
.choice__text small { font: 400 var(--t-meta)/1.4 var(--font-sans); color: var(--ink-muted); }
.choice__meta { font-size: var(--t-meta); color: var(--ink-muted); }
.field[data-invalid="true"] .choice { border-color: var(--danger); }
.field--consent .choice { align-items: flex-start; }
.field--consent .choice input { margin-top: 2px; }
/* Two short fields side by side on wide screens (name parts, city/state). */
.fields { display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields > .field { grid-column: span 2; }
  .fields > .field--half { grid-column: span 1; }
}
.stack > .fields + * { margin-top: var(--space-4); }

/* The influence grid: one row per source, three toggles. */
.matrix { display: grid; gap: var(--space-2); }
.matrix__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--line);
}
.matrix__label { flex: 1 1 220px; font: 400 var(--t-small)/1.4 var(--font-sans); color: var(--ink); }
.matrix__options { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.matrix__option {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-3);
  background: var(--light);
  border: var(--hairline) solid var(--line-strong);
  border-radius: 0;
  color: var(--ink-muted);
  font: 700 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.matrix__option:hover { border-color: var(--navy); color: var(--navy); }
.matrix__option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.matrix__option[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
[data-theme="dark"] .matrix__option { background: var(--panel); }
@media (max-width: 479px) { .matrix__options { flex-basis: 100%; } .matrix__option { flex: 1 1 0; } }

.apply__nav { justify-content: space-between; margin-top: var(--space-6); }
.apply__nav > :only-child { margin-left: auto; }
.apply__panel { max-width: 720px; margin: 0 auto; }
[data-theme="dark"] .choice { background: var(--panel); }
[data-theme="dark"] .choice.is-checked { background: var(--navy-soft); }

/* ============================================================
   21. Home page as a squeeze page
   One goal: a parent leaving an inquiry. The short form sits in the
   hero; every other block points back to it. No navigation.
   ============================================================ */
.squeeze { --focus: var(--navy); }

/* Bar */
.squeeze-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  border-bottom: var(--hairline) solid var(--line);
  box-shadow: var(--shadow-sm);
}
.squeeze-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: 10px;
}
.squeeze-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: 900 var(--t-meta)/1.15 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
.squeeze-bar__brand img { width: auto; height: 40px; }
[data-theme="dark"] .squeeze-bar__brand img { filter: brightness(0) invert(1); }
.squeeze-bar__actions { display: flex; align-items: center; gap: var(--space-4); }
.squeeze-bar__phone { font: 700 var(--t-small)/1 var(--font-sans); color: var(--navy); text-decoration: none; }
.squeeze-bar__phone:hover { text-decoration: underline; }
@media (max-width: 479px) {
  .squeeze-bar__brand span { display: none; }
  .squeeze-bar__phone { font-size: var(--t-meta); }
}

/* Hero */
.squeeze-hero { padding-block: clamp(32px, 5vw, 64px) var(--section-y); }
.squeeze-hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}
.squeeze-hero__copy { display: grid; gap: var(--space-3); max-width: 880px; }
.squeeze-hero__copy .eyebrow { margin: 0; }
.squeeze-hero__video { width: 100%; max-width: 1040px; }
.squeeze-hero__title { margin: 0; }
.squeeze-hero__points { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.squeeze-hero__points li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--t-small); color: var(--ink-muted); }
.squeeze-hero__points .star { width: 14px; height: 14px; flex: none; fill: var(--gold); }

/* The hero video: a poster frame with a play button until someone presses
   play, then YouTube's player in the same 16:9 box. */
.hero-video {
  position: relative;
  width: 100%;
  height: 0;
  /* 16:9 from padding, not aspect-ratio: iPhone Safari stretched the box
     when its only child was an absolutely positioned <button>. */
  padding-top: 56.25%;
  overflow: hidden;
  background: var(--navy-abyss);
  box-shadow: var(--shadow-lg);
  border-top: var(--rule) solid var(--gold);
}
.hero-video__poster {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  overflow: hidden;
  cursor: pointer;
}
.hero-video__poster img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.hero-video__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 19, 48, 0) 45%, rgba(13, 19, 48, .7) 100%);
}
.hero-video__poster:hover img { transform: scale(1.03); }
.hero-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(13, 19, 48, .6);
  transition: transform var(--dur) var(--ease);
}
.hero-video__play svg { width: 42%; height: 42%; margin-left: 6%; }
.hero-video__poster:hover .hero-video__play,
.hero-video__poster:focus-visible .hero-video__play { transform: translate(-50%, -50%) scale(1.08); }
.hero-video__label {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-4);
  z-index: 1;
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.hero-video__frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 599px) { .hero-video__label { display: none; } }

/* The lead card */
.lead-card { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.lead-card__panel { padding: var(--space-5); box-shadow: var(--shadow-lg); }
.lead-card__panel .form-panel__note { margin-bottom: var(--space-5); }
.lead-card__panel .fields { gap: var(--space-4); }
.lead-card__link {
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: 700 var(--t-small)/1.4 var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}
.lead-card__link:hover { color: var(--crimson); }
.lead-card__back { justify-self: start; margin-bottom: var(--space-3); }
/* The card's two ways forward: Apply, or Learn more further down the page. */
.lead-card__choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.lead-card__choices--one { grid-template-columns: 1fr; }
@media (max-width: 420px) { .lead-card__choices { grid-template-columns: 1fr; } }
/* The home page's second section: the band's question, its two buttons,
   and, once Apply is pressed, the application in a card under the question. */
.lead-band { flex: 0 1 460px; min-width: 0; }
.lead-band .lead-card__choices { margin-bottom: 0; }
.lead-band.is-applying { flex-basis: 100%; }
.lead-band .lead-card__panel { color: var(--ink); text-align: left; }
/* The card is light even though the band is dark: its headings go back to navy. */
.lead-band .lead-card__panel h2, .lead-band .lead-card__panel h3 { color: var(--navy); }
/* Opening the application scrolls the card to the top: clear the sticky bar. */
#inquire { scroll-margin-top: 96px; }
.band:has(.lead-band.is-applying) .bg-video__toggle { display: none; }
/* While the application is open the video is paused (background-video.tsx)
   and the band fades to its own solid color behind the form. */
.band--video .bg-video__still,
.band--video .bg-video__media,
.band--video .bg-video__scrim { transition: opacity 600ms var(--ease); }
.band:has(.lead-band.is-applying) .bg-video__still,
.band:has(.lead-band.is-applying) .bg-video__media,
.band:has(.lead-band.is-applying) .bg-video__scrim { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .band--video .bg-video__still, .band--video .bg-video__media, .band--video .bg-video__scrim { transition: none; }
}
.apply__embedded .steps { margin-bottom: var(--space-4); }
.apply__embedded .form-panel__title { font-size: var(--t-title-3); }
.choices--schools .choice__text { display: grid; gap: 2px; }
.choices--schools .choice__text small { font: 400 var(--t-meta)/1.3 var(--font-sans); color: var(--ink-muted); }
@media (min-width: 560px) { .choices--schools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Benefit cards */
.benefits { display: grid; gap: var(--grid-gap); }
@media (min-width: 760px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.benefit {
  padding: var(--space-5);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--gold);
}
.benefit__icon { width: 40px; height: 40px; color: var(--crimson); margin-bottom: var(--space-3); }
.benefit h3 { font-size: var(--t-title-3); margin-bottom: var(--space-2); }
.benefit p { margin: 0; font-size: var(--t-small); color: var(--ink-muted); }

/* Proof cards */
.proof { display: grid; gap: var(--grid-gap); }
@media (min-width: 760px) { .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof__card {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background: var(--band);
  color: var(--on-dark);
}
.proof__num {
  font: 600 clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem)/1 var(--font-serif);
  color: var(--gold);
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}
.proof__rule { width: 48px; height: 3px; background: var(--gold); }
.proof__text { font: 600 var(--t-title-3)/1.25 var(--font-serif); color: var(--on-dark); text-wrap: balance; }
.proof__note { font: 400 var(--t-meta)/1.4 var(--font-sans); color: var(--on-dark-muted); }

/* Four ways to learn */
.ways { display: grid; gap: var(--grid-gap); }
@media (min-width: 720px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.way {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--accent);
}
.way__shot { background: #fff; }
.way__shot img { display: block; width: 100%; height: auto; }
.way__body { display: grid; gap: var(--space-3); padding: var(--space-5); }
.way__body .eyebrow { margin: 0; }
.way__name { font-size: var(--t-title-2); }
.way__blurb { margin: 0; font-size: var(--t-small); color: var(--ink-muted); }
.way__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.way__facts li {
  padding: 4px 10px;
  font: 700 var(--t-meta)/1.3 var(--font-sans);
  color: var(--accent-ink);
  background: var(--cream);
  border: var(--hairline) solid var(--line);
}
.way__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.way__more { font: 700 var(--t-meta)/1.4 var(--font-sans); color: var(--accent-ink); text-decoration: none; }
.way__more:hover { text-decoration: underline; }

/* Life: eight still tiles, four across */
.life { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (min-width: 900px) { .life { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ptile--still { cursor: default; }
.ptile--still:hover { transform: none; box-shadow: none; }
.ptile--still:hover img { transform: none; }

/* Attributes with their one-line meaning */
.attributes--lines li { align-items: flex-start; }
.attributes--lines li > span:last-child { display: grid; gap: var(--space-1); }
.attributes__line { font: 400 var(--t-small)/1.5 var(--font-sans); color: var(--ink-muted); }

/* Next steps */
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); }
@media (min-width: 760px) { .next-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.next-step { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--white); border: var(--hairline) solid var(--line); }
.next-step__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  font: 600 1.1rem/1 var(--font-serif);
}
.next-step h3 { font-size: var(--t-title-3); }
.next-step p { margin: 0; font-size: var(--t-small); color: var(--ink-muted); }

/* Mid-page band */
.band { padding-block: clamp(36px, 5vw, 56px); }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.band__title { max-width: 26ch; font-size: var(--t-title-1); }

/* FAQ */
.faq { display: grid; border-top: var(--hairline) solid var(--line); }
.faq__item { border-bottom: var(--hairline) solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  min-height: 44px;
  font: 600 var(--t-title-3)/1.3 var(--font-serif);
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font: 400 1.4rem/1 var(--font-sans);
  color: var(--gold-deep);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: 0 0 var(--space-5); max-width: var(--measure); color: var(--ink-muted); }
.still { margin-top: var(--space-7); padding: var(--space-5); background: var(--white); border: var(--hairline) solid var(--line); border-left: var(--rule) solid var(--gold); }
.still h3 { font-size: var(--t-title-3); margin-bottom: var(--space-2); }
.still p { margin: 0; color: var(--ink-muted); }

/* Closing */
.squeeze-close__inner { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .squeeze-close__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.squeeze-close .lead-card { margin-top: 0; }

/* Footer */
.squeeze-footer__top { display: grid; gap: var(--space-6); padding-bottom: var(--space-5); }
@media (min-width: 900px) { .squeeze-footer__top { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.squeeze-footer__schools { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.squeeze-footer__schools li { display: grid; gap: 2px; font-size: var(--t-meta); color: var(--on-dark-muted); }
.squeeze-footer__schools strong { color: var(--accent-bright); font: 900 var(--t-meta)/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.squeeze-footer .footer__bottom { margin-top: 0; }
[data-theme="dark"] .benefit, [data-theme="dark"] .next-step, [data-theme="dark"] .still, [data-theme="dark"] .way { background: var(--white); }

/* ---------- 22. Quick facts (campus pages) ----------
   A short, self-contained answer block near the top of each campus page. */
.quick-facts { border-bottom: var(--hairline) solid var(--line); }
.quick-facts__title { font-size: var(--t-title-3); margin: 0 0 var(--space-2); }
.quick-facts__summary { max-width: 72ch; margin: 0 0 var(--space-5); color: var(--ink-muted); }
.quick-facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
}
.quick-facts__list dt {
  margin-bottom: var(--space-1);
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.quick-facts__list dd { margin: 0; font-size: var(--t-small); color: var(--ink); overflow-wrap: anywhere; }
.site-updated { font-size: var(--t-meta); color: var(--ink-faint); }

/* ---------- Home page: "Our schools" menu in the top bar ---------- */
.campus-switcher { position: relative; }
.campus-switcher__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: var(--hairline) solid var(--line);
  background: var(--white);
  color: var(--navy);
  font: 900 var(--t-meta)/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.campus-switcher__button:hover,
.campus-switcher__button[aria-expanded="true"] { border-color: var(--navy); }
.campus-switcher__button svg { width: 18px; height: 18px; flex: none; }
.campus-switcher__chevron { width: 14px !important; height: 14px !important; transition: transform var(--dur) var(--ease); }
.campus-switcher__button[aria-expanded="true"] .campus-switcher__chevron { transform: rotate(180deg); }
.campus-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: min(340px, calc(100vw - 32px));
  padding: var(--space-3);
  background: var(--white);
  border-top: var(--rule) solid var(--gold);
  box-shadow: var(--shadow-lg);
}
.campus-switcher__heading {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-2);
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.campus-switcher__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.campus-switcher__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.campus-switcher__school {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-2);
  color: var(--navy);
  text-decoration: none;
}
.campus-switcher__school:hover { background: var(--cream); }
.campus-switcher__school strong { display: block; font: 700 var(--t-small)/1.25 var(--font-sans); }
.campus-switcher__meta { display: block; font-size: var(--t-meta); color: var(--ink-muted); }
.campus-switcher__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--accent); }
.campus-switcher__portal {
  flex: none;
  padding: var(--space-2);
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--accent-ink);
  white-space: nowrap;
}
@media (max-width: 599px) {
  .campus-switcher__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .campus-switcher__button { padding: 0 var(--space-2); }
}

/* Phones: the bar holds the logo, "Our schools", the phone and Apply. The
   number stays on one line, and at the narrowest widths it gives way to
   the other controls (the number is still in the hero and footer). */
.squeeze-bar__phone { white-space: nowrap; }
@media (max-width: 419px) { .squeeze-bar__phone { display: none; } }
/* Phones: the menu spans the screen just under the bar instead of hanging
   off the button, which sits mid-bar and would push it off the left edge. */
@media (max-width: 599px) {
  .campus-switcher { position: static; }
  .campus-switcher__menu { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; }
}

/* The wide wordmark (as in version 2) in v1's top-left corner. */
/* logo-wordmark.png is trimmed to the artwork, so these heights are the
   wordmark itself, not padding around it. */
.squeeze-bar__brand img { height: 58px; }
.nav__brand img { height: 60px; }
.masthead.is-stuck .nav__brand img { height: 48px; }
@media (max-width: 599px) {
  .squeeze-bar__brand img { height: 40px; }
  .nav__brand img { height: 40px; }
}
/* Phones: clear the V1/V2/V3 tab flush against the left edge. */
@media (max-width: 599px) {
  .squeeze-bar__brand, .nav__brand { padding-left: 14px; }
}

/* The top bar's Apply button: gold with black text. */
.btn--apply {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
  box-shadow: var(--shadow-gold);
}
.btn--apply:hover:not([disabled]),
.btn--apply:focus-visible {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: #000;
}

/* Home page photos */
.home-photo { display: block; margin: 0; overflow: hidden; background: var(--cream); box-shadow: var(--shadow-sm); }
.home-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-photo--wide { margin: var(--space-5) 0 var(--space-6); aspect-ratio: 21 / 9; }
.home-photo--wide img { object-position: 55% 40%; }
@media (max-width: 699px) { .home-photo--wide { aspect-ratio: 4 / 3; } }
.teach-aside { display: grid; gap: var(--space-5); }
.teach-aside .home-photo { aspect-ratio: 4 / 3; }
.teach-aside .home-photo img { object-position: 50% 30%; }

/* The "Already know" band with the campus video playing behind it. */
.band--video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(360px, 42vw, 560px);
}
.band--video .band__inner { position: relative; z-index: 2; }
.band--video .band__title { color: #fff; text-shadow: 0 2px 18px rgba(13, 19, 48, .5); }
.bg-video__still,
.bg-video__still img,
.bg-video__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.bg-video__media { opacity: 0; transition: opacity 1s var(--ease); }
.bg-video__media.is-playing { opacity: 1; }
.bg-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(13, 19, 48, .88) 0%, rgba(13, 19, 48, .62) 55%, rgba(13, 19, 48, .45) 100%);
}
.bg-video__toggle {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(13, 19, 48, .5);
  color: #fff;
  cursor: pointer;
}
.bg-video__toggle svg { width: 16px; height: 16px; }
.bg-video__toggle:hover { background: rgba(13, 19, 48, .75); }
@media (max-width: 599px) {
  .bg-video__scrim { background: rgba(13, 19, 48, .72); }
}

/* ---------- Home page: staff-interview additions ---------- */

/* Top bar: wraps instead of overlapping when text is enlarged. */
.squeeze-bar__inner { flex-wrap: wrap; row-gap: var(--space-2); }
.squeeze-bar__actions { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.campus-switcher__signin {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--navy);
  font: 700 var(--t-small)/1 var(--font-sans);
  cursor: pointer;
}
.campus-switcher__signin:hover .campus-switcher__text,
.campus-switcher__signin[aria-expanded="true"] .campus-switcher__text { text-decoration: underline; text-underline-offset: 4px; }
.campus-switcher__signin .campus-switcher__chevron { width: 12px; height: 12px; }
.campus-switcher__signin[aria-expanded="true"] .campus-switcher__chevron { transform: rotate(180deg); }
@media (max-width: 599px) {
  /* Phones: "Our schools" already lists every parent portal. */
  .squeeze-bar__signin { display: none; }
}

/* The pillars as "I am" statements */
.attributes__pillar {
  font: 900 var(--t-meta)/1.3 var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* Known by name */
.known { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 800px) { .known { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.known__col {
  padding: var(--space-5);
  background: var(--white);
  border: var(--hairline) solid var(--line);
  border-top: var(--rule) solid var(--gold);
}
.known__col h3 { font-size: var(--t-title-3); margin-bottom: var(--space-3); }
.known__col p { margin: 0; color: var(--ink-muted); }
.known__highlight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-6) auto 0;
  max-width: 760px;
  font: italic 500 var(--t-title-3)/1.45 var(--font-serif);
  color: var(--navy);
  text-align: left;
}
.known__highlight .star { flex: none; width: 22px; height: 22px; margin-top: .25em; fill: var(--gold); }

/* A living school */

/* Summer as a first step */
.summer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--navy);
  color: var(--on-dark-muted);
}
.summer__title { color: #fff; font-size: var(--t-title-3); margin-bottom: var(--space-2); }
.summer p { margin: 0; }
@media (max-width: 599px) {
  /* Phones: logo, Our schools and Apply stay on one row at normal text
     size; tighter gaps leave the wrap for enlarged text only. */
  .squeeze-bar__inner { column-gap: var(--space-2); }
  .squeeze-bar__actions { gap: var(--space-2); }
  .squeeze-bar__brand { padding-left: 10px; }
}
@media (max-width: 379px) {
  .squeeze-bar__brand img { height: 34px; }
  .squeeze-bar .btn--sm { padding-inline: 12px; }
}

/* ---------- Class of 2026 ---------- */
.results__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0 clamp(40px, 5vw, 64px);
}
.results__stat { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--rule) solid var(--gold); }
.results__num {
  font: 600 clamp(3rem, 6vw, 4.5rem)/1 var(--font-serif);
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.results__label { font: 700 var(--t-meta)/1.35 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }

.results__chart { margin: 0; max-width: 760px; }
.results__caption { margin-bottom: var(--space-4); font: 600 var(--t-title-3)/1.3 var(--font-serif); color: var(--on-dark); }
.results__note { margin: var(--space-4) 0 0; font-size: var(--t-meta); color: var(--on-dark-muted); }

/* One bar per university, sorted largest first, on a 0-100% scale. */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.bars__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: var(--space-3);
}
.bars__name { font: 900 var(--t-small)/1 var(--font-sans); letter-spacing: .06em; color: var(--on-dark); }
.bars__name abbr { text-decoration: none; cursor: help; }
.bars__track { position: relative; height: 14px; background: rgba(255, 255, 255, .1); border-radius: 0 4px 4px 0; overflow: hidden; }
.bars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct) * 100%);
  background: var(--gold);
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
}
.bars__value { font: 700 var(--t-small)/1 var(--font-sans); color: var(--on-dark); font-variant-numeric: tabular-nums; text-align: right; }
.bars__row:hover .bars__fill { background: var(--gold-bright); }

/* ---------- Subtle motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Bars grow from the baseline when the chart reveals. */
  .js .results__chart .bars__fill { transform: scaleX(0); }
  .js .results__chart.is-in .bars__fill {
    transform: scaleX(1);
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) calc(.2s + var(--i, 0) * .09s);
  }
  /* Cards lift slightly on hover. */
  .benefit, .way, .moment, .known__col, .results__stat {
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .benefit:hover, .way:hover, .moment:hover, .known__col:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 12px 28px -14px rgba(13, 19, 48, .35));
  }
  /* Photos drift in very slowly once revealed. */
  .home-photo img { transition: transform 8s ease-out; transform: scale(1.04); }
  .home-photo.is-in img { transform: scale(1); }
}

/* Class of 2026: the class photo across the section. */
.results__class { margin: var(--space-6) 0 0; aspect-ratio: 2600 / 1153; border-top: var(--rule) solid var(--gold); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55); }
@media (max-width: 599px) { .results__class { aspect-ratio: 2600 / 1153; } }
@media (max-width: 599px) {
  .results__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .results__num { font-size: 2.25rem; }
  .results__label { font-size: .6875rem; letter-spacing: .06em; }
}

/* Known by name: the students in uniform, wide under the heading. */
.known__photo { margin: var(--space-5) 0 var(--space-6); aspect-ratio: 16 / 7; }
.known__photo img { object-position: 50% 32%; }
@media (max-width: 699px) { .known__photo { aspect-ratio: 4 / 3; } .known__photo img { object-position: 50% 40%; } }

/* ---------- How we teach: the "I am" pillars with a photo each ---------- */
.pillars { display: grid; gap: var(--space-6); }
.pillars__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; }
.pillars__row { border-top: var(--hairline) solid var(--line); }
.pillars__row:last-child { border-bottom: var(--hairline) solid var(--line); }
.pillars__button {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  margin: 0;
  padding: var(--space-5) var(--space-4) var(--space-5) var(--space-3);
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pillars__num { font: 600 var(--t-small)/1.6 var(--font-serif); color: var(--gold-deep); }
.pillars__text { display: grid; gap: 4px; }
.pillars__statement { font: 600 var(--t-title-2)/1.15 var(--font-serif); color: var(--navy); }
.pillars__pillar { font: 900 var(--t-meta)/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.pillars__line { font-size: var(--t-small); line-height: 1.55; color: var(--ink-muted); }
.pillars__inline { display: block; aspect-ratio: 4 / 3; margin: var(--space-4) 0 0; }
.pillars__inline img { object-position: 50% 40%; }
.pillars__media { display: none; }
.pillars__quote { margin-top: clamp(40px, 5vw, 64px); max-width: 760px; }

.pillars__frame {
  position: relative;
  height: 0;
  padding-top: 75%;               /* 4:3 */
  overflow: hidden;
  background: var(--navy-abyss);
  border-top: var(--rule) solid var(--gold);
  box-shadow: 0 24px 48px -24px rgba(13, 19, 48, .45);
}
.pillars__photo { position: absolute; inset: 0; margin: 0; opacity: 0; }
.pillars__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.pillars__photo.is-active { opacity: 1; }
.pillars__badge {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: 8px 14px;
  background: rgba(13, 19, 48, .82);
  color: #fff;
  font: 600 var(--t-title-3)/1 var(--font-serif);
}

@media (min-width: 1000px) {
  .pillars { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .pillars__inline { display: none; }
  .pillars__media { display: block; position: sticky; top: calc(50vh - 210px); }
  /* Room to scroll, so each statement has its moment in the middle of the screen. */
  .pillars__row { min-height: 34vh; display: flex; align-items: center; }
  .pillars__row .pillars__button { opacity: .42; }
  .pillars__row.is-active .pillars__button { opacity: 1; border-left-color: var(--gold); background: rgba(255, 255, 255, .55); }
  .pillars__button:hover, .pillars__button:focus-visible { opacity: .85; }
}

@media (prefers-reduced-motion: no-preference) {
  .pillars__photo { transition: opacity .7s var(--ease); }
  .pillars__photo img { transform: scale(1.04); transition: transform 1.6s var(--ease); }
  .pillars__photo.is-active img { transform: scale(1); }
  .pillars__button { transition: opacity .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease); }
}

/* Phones: wide tables scroll inside themselves; long addresses wrap. */
.datatable { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
code { overflow-wrap: anywhere; }
.aside-grid > *, .doc { min-width: 0; }