:root {
  --maroon-950: #3b0715;
  --maroon-900: #5f0d22;
  --maroon-800: #7b1230;
  --maroon-700: #941a39;
  --maroon-100: #f8e9ee;
  --gold-500: #d9a526;
  --gold-200: #f5df9f;
  --ink-950: #17191d;
  --ink-800: #32363d;
  --ink-650: #555b65;
  --ink-500: #707782;
  --line: #dfe2e7;
  --line-strong: #c8cdd5;
  --paper: #ffffff;
  --paper-soft: #f7f8fa;
  --paper-warm: #f2f4f6;   /* cool neutral, deliberately not cream */
  --success: #236b45;
  --warning: #8a5a00;
  --danger: #a12835;
  --shadow-sm: 0 8px 28px rgba(23, 25, 29, .07);
  --shadow-md: 0 20px 60px rgba(23, 25, 29, .11);
  --radius-sm: .65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --container: 74rem;
  --reading: 48rem;
  --header-height: 5rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-950);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin-top: 0; }
h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.08;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
p { color: var(--ink-650); }
::selection { background: var(--gold-200); color: var(--ink-950); }

.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.reading-width { width: min(100%, var(--reading)); }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 9999;
  padding: .7rem 1rem;
  border-radius: .5rem;
  color: white;
  background: var(--maroon-800);
  transform: translateY(-180%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* Header */
.announcement { color: white; background: var(--maroon-900); }
.announcement__inner {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: .55rem;
  text-align: center;
  font-size: .88rem;
}
.announcement p { margin: 0; color: inherit; }
.announcement a { font-weight: 750; white-space: nowrap; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(200, 205, 213, .8);
  background: #ffffff;
}
.nav-shell { min-height: var(--header-height); display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; flex: 0 0 auto; }
.brand img { width: 2.75rem; height: 2.75rem; }
.brand span { display: grid; line-height: 1.08; }
.brand strong { font-size: 1rem; letter-spacing: -.01em; }
.brand small { margin-top: .2rem; color: var(--ink-500); font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-left: auto; }
.primary-nav a {
  padding: .65rem .8rem;
  border-radius: .55rem;
  color: var(--ink-650);
  font-size: .94rem;
  font-weight: 650;
  text-decoration: none;
}
.primary-nav a:hover, .primary-nav a.active { color: var(--maroon-800); background: var(--maroon-100); }
.nav-actions { display: flex; align-items: center; gap: .75rem; }
.menu-button {
  width: 2.75rem;
  height: 2.75rem;
  display: none;
  place-content: center;
  gap: .28rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: white;
  cursor: pointer;
}
.menu-button i { width: 1.15rem; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-button[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
.menu-button[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: var(--menu-top, var(--header-height)) 0 0; z-index: 99; overflow: auto; background: white; box-shadow: 0 18px 38px rgba(23, 25, 29, .12); }
.mobile-menu nav { display: grid; gap: .15rem; padding-block: 1.25rem 3rem; }
.mobile-menu a:not(.button) { display: grid; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1.2rem; font-weight: 750; text-decoration: none; }
.mobile-menu a span { margin-top: .15rem; color: var(--ink-500); font-size: .85rem; font-weight: 450; }

/* Buttons and utility */
.button {
  min-height: 3.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .72rem 1.1rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  font-size: .96rem;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(217, 165, 38, .55);
  outline-offset: 3px;
}
.button--small { min-height: 2.65rem; padding: .58rem .95rem; font-size: .9rem; }
.button--primary { color: white; background: var(--maroon-800); box-shadow: 0 8px 20px rgba(123, 18, 48, .18); }
.button--primary:hover { background: var(--maroon-900); box-shadow: 0 12px 26px rgba(123, 18, 48, .24); }
.button--secondary { color: var(--maroon-800); border-color: var(--line-strong); background: white; }
.button--secondary:hover { border-color: var(--maroon-700); background: var(--maroon-100); }
.button--quiet { min-height: auto; padding: .2rem 0; color: var(--maroon-800); background: transparent; }
.button[disabled] { opacity: .65; transform: none; cursor: wait; }
.text-link { color: var(--maroon-800); font-weight: 750; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  color: var(--maroon-800);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--gold-500); }
/* A quiet text label, not a dashboard chip. The rounded outline plus a
 * coloured status dot read as generated-template furniture, so the status is
 * carried by the word itself. */
.status-pill {
  display: inline-block;
  color: var(--ink-500);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.status-pill--open { color: var(--maroon-800); }
.tag-list { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.tag-list li { padding: .3rem .55rem; border-radius: 999px; color: var(--ink-650); background: var(--paper-soft); font-size: .78rem; font-weight: 650; }

/* Page foundations */
.page-hero { padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.25rem, 7vw, 5.5rem); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #fff 0%, var(--paper-warm) 100%); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); align-items: end; gap: clamp(2rem, 6vw, 6rem); }
.page-hero h1 { max-width: 13ch; margin-bottom: 1.25rem; }
.page-hero__lead { max-width: 42rem; margin-bottom: 0; font-size: clamp(1.08rem, 2vw, 1.3rem); }
.page-hero__aside { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.page-hero__aside p:last-child { margin-bottom: 0; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--soft { background: var(--paper-soft); }
.section--warm { background: var(--paper-warm); }
.section--maroon { color: white; background: var(--maroon-900); }
.section--maroon p { color: rgba(255, 255, 255, .76); }
.section--maroon .eyebrow { color: var(--gold-200); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr); align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.section-heading h2 { max-width: 14ch; margin-bottom: 0; }
.section-heading p { max-width: 38rem; margin: 0; }
.section-heading--stack { display: block; }
.section-heading--stack h2 { margin-bottom: 1rem; }
.section-heading--stack p { max-width: 44rem; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.callout { padding: 1.15rem 1.2rem; border-left: 4px solid var(--gold-500); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--paper-warm); }
.callout p:last-child { margin-bottom: 0; }
.callout--warning { border-left-color: var(--warning); background: #fff8e6; }
.callout--plain { border: 1px solid var(--line); border-left-width: 1px; border-radius: var(--radius-md); background: white; }
.notice { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: white; }
.notice strong { display: block; margin-bottom: .15rem; }
.notice p { margin-bottom: 0; font-size: .92rem; }
.notice__icon { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--maroon-800); font-size: .85rem; font-weight: 800; }

/* Home */
.home-hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 4.5vw, 4rem) 0 clamp(3rem, 5vw, 4.5rem); background: var(--paper-warm); }
.home-hero::after { content: ""; position: absolute; width: 32rem; height: 32rem; right: -12rem; top: -14rem; border: 7rem solid rgba(148, 26, 57, .06); border-radius: 50%; pointer-events: none; }
.home-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); align-items: center; gap: clamp(2.5rem, 7vw, 7rem); }
.home-hero h1 { max-width: 11ch; margin-bottom: 1.4rem; }
.home-hero h1 span { color: var(--maroon-800); }
.home-hero__copy > p { max-width: 43rem; font-size: clamp(1.1rem, 2vw, 1.32rem); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.home-hero__proof { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.4rem; color: var(--ink-650); font-size: .86rem; font-weight: 650; }
.home-hero__proof span { display: inline-flex; align-items: center; gap: .45rem; }
.home-hero__proof span::before { content: "✓"; color: var(--success); font-weight: 900; }
.hero-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hero-card figure { margin: 0; }
.hero-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.hero-card figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0 .15rem; color: var(--ink-500); font-size: .75rem; }
.hero-card__status { margin-top: .9rem; padding: 0; border-radius: 0; background: none; }
.hero-card__status strong { display: block; margin-bottom: .25rem; }
.hero-card__status p { margin: 0; font-size: .9rem; }
.pathway-strip { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: white; }
.pathway-strip div { min-height: 8rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; border-right: 1px solid var(--line); }
.pathway-strip div:last-child { border-right: 0; }
.pathway-strip span { color: var(--maroon-800); font-size: 1.8rem; font-family: inherit; font-weight: 700; }
.pathway-strip strong { font-size: .86rem; }
.pathway-strip small { color: var(--ink-500); font-size: .74rem; }
.pathway-strip .engineering-year { color: white; background: var(--maroon-800); }
.pathway-strip .engineering-year span, .pathway-strip .engineering-year small { color: inherit; }

/* Cards and grids */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  box-shadow: 0 1px 0 rgba(23, 25, 29, .02);
}
.card h3 { margin-bottom: .65rem; }
.card p:last-child { margin-bottom: 0; }
.card__number { display: block; margin-bottom: .45rem; color: var(--maroon-800); font-size: .82rem; font-weight: 700; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .9rem; color: var(--ink-500); font-size: .78rem; font-weight: 650; }
.card__meta-sep { color: var(--line-strong); }
.card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.card--feature { padding: 0; overflow: hidden; }
.card--feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card--feature .card__body { padding: 1.35rem; }
.icon-card__icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; margin-bottom: 1.25rem; border-radius: .75rem; color: var(--maroon-800); background: var(--maroon-100); font-size: 1.2rem; font-weight: 850; }
.project-card { display: flex; flex-direction: column; }
.project-card__image { margin: -1.35rem -1.35rem 1.2rem; overflow: hidden; border-radius: 0; }
.project-card__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.project-card__footer { margin-top: auto; }
.project-card details { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.project-card summary { color: var(--maroon-800); font-weight: 760; cursor: pointer; }
.project-card details p { margin-top: .75rem; }
.resource-card { position: relative; }
.resource-card__source { display: block; margin-bottom: .4rem; color: var(--ink-500); font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.resource-card a { color: var(--maroon-800); font-weight: 760; }
.event-card time { display: block; margin-bottom: .6rem; color: var(--maroon-800); font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.event-card .event-card__place { margin-bottom: .8rem; color: var(--ink-800); font-weight: 650; }
.leader-card { display: flex; gap: 1rem; }
.leader-card__avatar { width: 8.5rem; height: 10rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 0; color: white; background: var(--maroon-800); font-family: inherit; font-size: 2rem; font-weight: 700; }
.leader-card__avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.leader-card h3 { margin-bottom: .2rem; }
.leader-card__role { margin-bottom: .55rem; color: var(--maroon-800); font-size: .85rem; font-weight: 780; }

/* Lists, timelines and comparison */
.check-list { display: grid; gap: .85rem; padding: 0; margin: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.8rem; color: var(--ink-650); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: .05rem; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--success); font-size: .67rem; font-weight: 900; }
.plain-list { display: grid; gap: .65rem; padding-left: 1.2rem; color: var(--ink-650); }
.timeline { display: grid; gap: 0; }
.timeline__item { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.timeline__item:last-child { border-bottom: 1px solid var(--line); }
.timeline__period { color: var(--maroon-800); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.timeline__item h3 { margin-bottom: .4rem; }
.timeline__item p { margin-bottom: .6rem; }
.timeline__item p:last-child { margin-bottom: 0; }
.roadmap { display: grid; gap: .8rem; }
.roadmap__item { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; align-items: start; gap: 1.25rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.roadmap__item:last-child { border-bottom: 1px solid var(--line); }
.roadmap__period { color: var(--ink-500); font-size: .82rem; font-weight: 750; }
.roadmap__item h3 { margin-bottom: .35rem; }
.roadmap__item p { margin-bottom: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--line); }
.stat { padding: 1.5rem; background: white; }
.stat strong { display: block; margin-bottom: .3rem; color: var(--maroon-800); font-family: inherit; font-size: 2.6rem; line-height: 1; }
.stat span { color: var(--ink-650); font-size: .86rem; font-weight: 650; }
.partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.partner-card { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; }
.partner-card h3 { margin-bottom: .3rem; }
.partner-card__location { color: var(--ink-500); font-size: .84rem; }
.partner-card details { margin-top: .8rem; }
.partner-card summary { color: var(--maroon-800); font-weight: 750; cursor: pointer; }
.partner-card ul { margin: .65rem 0 0; padding-left: 1.1rem; color: var(--ink-650); }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.filter-button { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-650); background: white; font-size: .84rem; font-weight: 700; cursor: pointer; }
.filter-button:hover, .filter-button.active { color: white; border-color: var(--maroon-800); background: var(--maroon-800); }
.search-field { position: relative; display: block; max-width: 34rem; margin-bottom: 1rem; }
.search-field input { width: 100%; min-height: 3rem; padding: .7rem 1rem .7rem 2.75rem; border: 1px solid var(--line-strong); border-radius: .65rem; background: white; }
.search-field::before { content: "⌕"; position: absolute; left: 1rem; top: .62rem; color: var(--ink-500); font-size: 1.1rem; }
.empty-state { grid-column: 1 / -1; padding: 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); text-align: center; background: var(--paper-soft); }
.empty-state h3 { margin-bottom: .45rem; }
.empty-state p { margin-bottom: 0; }

/* Forms */
.form-shell { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-sm); }
.form-shell h2, .form-shell h3 { margin-bottom: .6rem; }
.form-shell > p { margin-bottom: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-field { display: grid; gap: .35rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field > span, fieldset > legend { color: var(--ink-800); font-size: .86rem; font-weight: 750; }
.form-field small { color: var(--ink-500); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  min-height: 3rem;
  padding: .68rem .78rem;
  border: 1px solid var(--line-strong);
  border-radius: .55rem;
  color: var(--ink-950);
  background: white;
}
.form-field textarea { min-height: 8rem; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--maroon-700); box-shadow: 0 0 0 3px rgba(148, 26, 57, .1); outline: none; }
.fieldset { grid-column: 1 / -1; padding: 0; border: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .5rem; }
.choice { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: .65rem; cursor: pointer; }
.choice:hover { border-color: var(--maroon-700); background: var(--maroon-100); }
.choice input { margin-top: .25rem; accent-color: var(--maroon-800); }
.choice span { display: grid; }
.choice strong { font-size: .9rem; }
.choice small { color: var(--ink-500); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: .25rem; }
.form-status { margin: 0; color: var(--ink-650); font-size: .9rem; }
.form-status.success { color: var(--success); }
.form-status.error { color: var(--danger); }
.form-note { grid-column: 1 / -1; margin: 0; color: var(--ink-500); font-size: .78rem; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Split layouts and quotes */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.split--center { align-items: center; }
.photo-frame { margin: 0; }
.photo-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.photo-frame figcaption { margin-top: .55rem; color: var(--ink-500); font-size: .75rem; }
.founder-note { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; box-shadow: var(--shadow-sm); }
.founder-note blockquote { margin-bottom: 1.25rem; color: var(--ink-950); font-family: inherit; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.35; }
.founder-note cite { display: block; color: var(--ink-650); font-style: normal; }
.founder-note cite strong { display: block; color: var(--ink-950); }

/* FAQ and legal */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; font-weight: 760; cursor: pointer; }
.faq summary::after { content: "+"; color: var(--maroon-800); font-size: 1.3rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 46rem; padding-bottom: 1.2rem; }
.legal { width: min(calc(100% - 2rem), 50rem); margin-inline: auto; padding: 4rem 0 7rem; }
.legal h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.legal h2 { margin-top: 2.5rem; font-size: 1.6rem; }
.legal p, .legal li { color: var(--ink-650); }
.legal .last-updated { color: var(--ink-500); font-size: .85rem; }

/* Media kit */
.brand-swatch { display: flex; align-items: center; gap: .8rem; }
.brand-swatch i { width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: .5rem; }
.brand-swatch--maroon i { background: var(--maroon-800); }
.brand-swatch--gold i { background: var(--gold-500); }
.brand-swatch--paper i { background: var(--paper-warm); }
.logo-panel { min-height: 14rem; display: grid; place-items: center; padding: 2rem; border: 1px solid var(--line); border-radius: 0; background: var(--paper-soft); }
.logo-panel img { max-width: 18rem; max-height: 8rem; }

/* Footer */
.site-footer { padding: 4rem 0 1.25rem; color: white; background: var(--ink-950); }
.footer-grid { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.1fr); gap: 4rem; padding-bottom: 3rem; }
.brand--footer { color: white; }
.brand--footer small { color: rgba(255, 255, 255, .62); }
.footer-intro > p { max-width: 30rem; margin-top: 1.15rem; color: rgba(255, 255, 255, .68); }
.footer-status { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.footer-status span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold-500); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-links h2 { margin-bottom: .8rem; color: rgba(255, 255, 255, .55); font-family: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.footer-links a { display: block; margin: .45rem 0; color: rgba(255, 255, 255, .82); font-size: .9rem; text-decoration: none; }
.footer-links a:hover { color: white; text-decoration: underline; }
.footer-base { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .13); font-size: .75rem; }
.footer-base p { margin: 0; color: rgba(255, 255, 255, .48); }
.footer-base p:nth-child(2) { text-align: center; }
.footer-base a { color: rgba(255, 255, 255, .65); }

.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 999; display: grid; gap: .5rem; }
.toast { max-width: 24rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .65rem; background: white; box-shadow: var(--shadow-md); }
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }

/* Responsive */
@media (max-width: 960px) {
  .primary-nav, .desktop-join { display: none; }
  .menu-button { display: grid; }
  .nav-actions { margin-left: auto; }
  .home-hero__grid, .page-hero__grid, .split, .footer-grid { grid-template-columns: 1fr; }
  .home-hero__copy { order: 1; }
  .hero-card { order: 2; max-width: 42rem; }
  .section-heading { grid-template-columns: 1fr; align-items: start; }
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links { max-width: 42rem; }
}

@media (max-width: 720px) {
  :root { --header-height: 4.4rem; }
  .announcement__inner { align-items: flex-start; justify-content: space-between; text-align: left; }
  .announcement p { max-width: 26ch; }
  .brand img { width: 2.45rem; height: 2.45rem; }
  .brand strong { font-size: .9rem; }
  .brand small { font-size: .61rem; }
  .home-hero, .page-hero { padding-top: 3.5rem; }
  .card-grid, .card-grid--2, .card-grid--4, .partner-grid, .stat-grid, .form-grid, .choice-grid { grid-template-columns: 1fr; }
  .pathway-strip { grid-template-columns: 1fr; }
  .pathway-strip div { min-height: auto; display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: .7rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .pathway-strip div:last-child { border-bottom: 0; }
  .pathway-strip small { grid-column: 2; }
  .timeline__item { grid-template-columns: 1fr; gap: .35rem; }
  .roadmap__item { grid-template-columns: 1fr; gap: .45rem; }
  .roadmap__item .status-pill { width: fit-content; }
  .form-field--full, .fieldset, .form-actions, .form-note { grid-column: auto; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-base { grid-template-columns: 1fr; }
  .footer-base p:nth-child(2) { text-align: left; }
  .hero-card figcaption { display: block; }
}

@media (max-width: 460px) {
  .container { width: min(calc(100% - 1.25rem), var(--container)); }
  .announcement__inner { gap: .5rem; font-size: .75rem; }
  .announcement a { max-width: 11ch; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  .nav-shell { gap: .7rem; }
  .brand span { max-width: 9rem; }
  .page-hero__actions, .home-hero__actions, .form-actions { align-items: stretch; flex-direction: column; }
  .page-hero__actions .button, .home-hero__actions .button, .form-actions .button { width: 100%; }
  .footer-links { grid-template-columns: 1fr; }
  /* A 8.5rem portrait beside text leaves too little room for the role and bio
     on a narrow phone, so the photo goes full width above the copy. */
  .leader-card { flex-direction: column; }
  .leader-card__avatar { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}

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

@media print {
  .announcement, .site-header, .site-footer, .button, .filters, .form-shell { display: none !important; }
  body { color: black; background: white; }
  .section, .page-hero { padding: 1rem 0; }
  .card, .partner-card { break-inside: avoid; box-shadow: none; }
}

/* ---------------------------------------------------------------- ratio ---
   The signature. Three years at Oberlin, two at a partner engineering school:
   the programme's whole structure, stated as proportion rather than prose. It
   is the one place the design raises its voice, so everything else stays quiet.
   --------------------------------------------------------------------------- */
.ratio { margin: 1.75rem 0 1.1rem; max-width: 30rem; }
.ratio__bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ratio__unit {
  display: flex;
  align-items: flex-end;
  height: 3.1rem;
  padding: .4rem .5rem;
  border-radius: .3rem;
}
.ratio__unit span {
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ratio__unit--here  { background: var(--maroon-800); }
.ratio__unit--here span { color: #fff; }
.ratio__unit--there { background: transparent; border: 1.5px dashed var(--line-strong); }
.ratio__unit--there span { color: var(--ink-500); }

.ratio__key {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  margin-top: .7rem;
  color: var(--ink-650);
  font-size: .8rem;
}
.ratio__swatch {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  margin-right: .4rem;
  border-radius: .15rem;
  vertical-align: -.05rem;
}
.ratio__swatch--here  { background: var(--maroon-800); }
.ratio__swatch--there { border: 1.5px dashed var(--line-strong); }

.home-hero__copy .home-hero__proof {
  /* .home-hero__copy p sets the lede at 21px/650; this is supporting text and
     needs to outrank it rather than sit at the same weight as the lede. */
  margin-top: 1.1rem;
  /* --ink-500 only reaches 4.1:1 on the hero's --paper-warm panel */
  color: var(--ink-650);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.55;
}

/* The hero photograph was running taller than the copy column and pushing the
   signature below the fold. Cap it so both sides read at a glance. */
.hero-card figure img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.hero-card { align-self: start; }

/* Every page hero carries an image, not just the home page. The right column
   holds the photograph above its note, matching the home hero rather than
   leaving eleven pages with an empty half. */
.page-hero__grid > div:first-child { min-width: 0; }
.page-hero__figure { margin: 0 0 1rem; }
.page-hero__figure img {
  width: 100%;
  /* height:auto is required: the markup carries height="900" as a
     presentational hint, which otherwise beats aspect-ratio and stretched the
     image to 900px tall against 426px of copy. */
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.page-hero__grid { align-items: start; }
@media (max-width: 720px) {
  .page-hero__figure img { aspect-ratio: 16 / 9; }
}
/* The photo and its note share the hero's right column. Without this wrapper
   they became a third child of a two-column grid and the note wrapped onto a
   new row underneath the copy. */
.page-hero__side { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.section-more { margin: 1.25rem 0 0; }