/* ============================================================
   IADEBAYO Foundation — design system
   Brand: red #ED3237 / blue #3E4095 (from foundation logo SVG)
   Embark sub-brand: gold #FCC015 / orange #F1592C / cream #FAEDCC
   Type: Archivo (headlines + body) · Fraunces italic (accents)

   COLOUR ROLES (inverted Jul 2026 — red leads, blue complements):
     --surface-dark   RED   — header, dark sections, page heads (major bg)
     --surface-darker RED   — footer, hero base
     --ink / --ink-2  deep red-black inks for TEXT (headings, quotes)
     --accent         BLUE  — eyebrows, icons, ticks, primary buttons
     --secondary      RED   — links, statements, secondary buttons
   The role names are deliberately hue-free: swapping the brand
   emphasis again means editing these values, nothing else.
   Contrast: white on --surface-dark 7.7:1, on --surface-darker 10.2:1.
   ============================================================ */

:root {
  --brand-red: #ED3237;  /* logo red  — the leading brand hue */
  --brand-blue: #3E4095; /* logo blue — the complement */
  --secondary: #ED3237;
  --surface-dark: #A31A1E;
  --surface-darker: #821417;
  --ink: #4A1114;        /* deep red-black — heading & quote text */
  --ink-2: #370C0F;
  --accent: #3E4095;
  --accent-dark: #2E3078;
  --gold: #FCC015;
  --orange: #F1592C;
  --cream: #FBF6EA;      /* warm Embark-derived light section */
  --paper: #FFFFFF;
  --text: #23242C;
  --muted: #5C5E6E;
  --line: rgba(74, 17, 20, 0.14);
  --display: "Archivo", system-ui, sans-serif;
  --accent-serif: "Fraunces", Georgia, serif;
  --radius: 10px;
  --container: 1160px;
  --shadow: 0 14px 40px rgba(55, 12, 15, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--secondary); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--gold);
  color: var(--ink); padding: 10px 18px; z-index: 200; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ------------------------------------------------ typography */
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; font-weight: 700; }
.accent { font-family: var(--accent-serif); font-style: italic; font-weight: 600; }
.accent-gold { color: var(--gold); }
.accent-primary { color: var(--accent); }
.lead { font-size: 1.2rem; color: var(--muted); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark p { color: #fff; }
.on-dark .lead { color: rgba(255,255,255,.82); }

/* Eyebrow label: spark + small caps + short rule (signature device) */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: "✳"; color: var(--gold); font-size: 1rem; animation: spark-in .8s ease both; }
.eyebrow::after { content: ""; width: 42px; height: 2px; background: currentColor; opacity: .55; }
.on-dark .eyebrow, .eyebrow.gold { color: var(--gold); }
@keyframes spark-in { from { transform: rotate(-90deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* -------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--secondary); color: #fff; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-outline { border-color: var(--secondary); color: var(--secondary); }

/* --------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface-dark); color: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { height: 44px; width: auto; }
.footer-logo { height: 52px; width: auto; margin-bottom: 14px; }
.brand-word { font-weight: 900; font-size: 1.15rem; color: #fff; letter-spacing: .01em; }
.brand-word em { font-family: var(--accent-serif); font-weight: 600; color: var(--gold); margin-left: 5px; }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.main-nav a {
  display: block; padding: 10px 11px; color: rgba(255,255,255,.88);
  text-decoration: none; font-weight: 600; font-size: .9rem; border-radius: 6px;
}
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; background: rgba(255,255,255,.1); }
.has-sub { position: relative; }
.has-sub .sub {
  position: absolute; top: 100%; left: 0; min-width: 190px; display: none;
  flex-direction: column; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; z-index: 60;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { display: flex; }
.has-sub .sub a { color: var(--ink); }
.has-sub .sub a:hover { background: var(--cream); color: var(--ink); }
.caret { font-size: .7em; opacity: .7; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.translate-slot { min-width: 0; }
.translate-slot .goog-te-gadget { font-size: 0; }
.btn-apply { padding: 10px 20px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: #fff; margin: 5px 0; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ----------------------------------------------------- hero */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--surface-darker);
  min-height: min(88vh, 760px);
  display: flex; align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide { opacity: 0; transition: opacity 1.2s ease; background-size: cover; background-position: center; }
.hero-slide.is-active { opacity: 1; }
/* Signature: brand duotone veil, blue -> red, over any photo */
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(15deg, rgba(62,64,149,.50) 0%, rgba(237,50,55,.66) 52%, rgba(55,12,15,.93) 100%);
  mix-blend-mode: multiply;
}
.hero-veil-2 { position: absolute; inset: 0; background: linear-gradient(to top, rgba(55,12,15,.94) 0%, rgba(55,12,15,.25) 45%, rgba(55,12,15,.35) 100%); }
.hero-inner { position: relative; padding: 140px 0 84px; width: 100%; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lead { max-width: 56ch; color: rgba(255,255,255,.88); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-kicker {
  font-family: var(--accent-serif); font-style: italic; font-weight: 600;
  color: var(--gold); font-size: 1.15rem; margin-bottom: 14px; display: block;
}
.hero-rule { width: min(100%, 880px); height: 1px; background: rgba(255,255,255,.35); margin-top: 56px; }

/* ------------------------------------------------- sections */
.section { padding: 92px 0; }
.section-tight { padding: 64px 0; }
.section-dark { background: var(--surface-dark); }
.section-secondary { background: var(--secondary); }
.section-cream { background: var(--cream); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-tight { gap: 40px; }
.statement {
  border-left: 3px solid var(--accent); padding-left: 22px;
  font-family: var(--accent-serif); font-style: italic; font-weight: 600;
  font-size: 1.35rem; color: var(--secondary); line-height: 1.45;
}
.on-dark .statement { color: var(--gold); border-color: var(--gold); }
.media-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.media-frame img { width: 100%; object-fit: cover; }
.placeholder-photo {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(252,192,21,.35), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(62,64,149,.45), transparent 50%),
    linear-gradient(135deg, var(--secondary), var(--surface-darker));
  color: rgba(255,255,255,.75); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .8rem; text-align: center; padding: 20px;
}

/* --------------------------------------------------- impact */
.impact { text-align: left; }
.impact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 36px 28px; border-top: 1px solid rgba(255,255,255,.28); padding-top: 40px;
}
.impact-num {
  font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; color: #fff;
  letter-spacing: -0.02em; line-height: 1;
}
.impact-num .suffix { color: var(--gold); }
.impact-label { color: rgba(255,255,255,.75); font-size: .9rem; margin-top: 8px; font-weight: 600; }

/* ---------------------------------------------------- cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.card:hover::after { transform: scaleX(1); }
.card h3 { margin-top: 14px; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--cream); color: var(--accent); font-size: 1.3rem; font-weight: 900;
}
.card p { color: var(--muted); font-size: .98rem; margin-bottom: 0; }

/* people (team / faculty) */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 26px; }
.person { text-align: left; }
.person-photo { aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; background: var(--cream); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin-bottom: 2px; font-size: 1.05rem; }
.person .role { color: var(--accent); font-weight: 700; font-size: .85rem; }
.person .expertise { color: var(--muted); font-size: .88rem; }

/* testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.testimonial {
  background: #fff; border-radius: var(--radius); padding: 28px; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
}
.testimonial blockquote { margin: 0; font-family: var(--accent-serif); font-style: italic; font-size: 1.08rem; color: var(--ink); }
.testimonial .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial .who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial .who strong { display: block; color: var(--ink); }
.testimonial .who span { color: var(--muted); font-size: .85rem; }
.video-embed { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

/* blog cards */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.post-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card .cover { aspect-ratio: 16/9; background: var(--cream); }
.post-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.post-card .cat { color: var(--accent); font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a:hover { color: var(--secondary); }
.post-card p { color: var(--muted); font-size: .95rem; margin: 0; }
.post-card time { color: var(--muted); font-size: .82rem; }

/* article */
.article { max-width: 760px; margin: 0 auto; }
.article-cover { border-radius: var(--radius); overflow: hidden; margin: 34px 0; }
.article h2 { margin-top: 1.6em; font-size: 1.5rem; }
.article p { font-size: 1.08rem; }

/* ------------------------------------------------ curriculum */
.curriculum-list { list-style: none; margin: 0; padding: 0; columns: 2; gap: 40px; counter-reset: mod; }
.curriculum-list li {
  counter-increment: mod; break-inside: avoid; padding: 14px 0 14px 56px;
  border-bottom: 1px solid var(--line); position: relative; font-weight: 600; color: var(--ink);
}
.curriculum-list li::before {
  content: counter(mod, decimal-leading-zero); position: absolute; left: 0; top: 12px;
  font-weight: 900; color: var(--gold); font-size: 1.05rem;
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 8px; font-weight: 800; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 8px 22px; color: var(--muted); }

/* value chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: .95rem;
}
.chip::before { content: "✳ "; color: var(--accent); }

/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-grid figure:hover img { transform: scale(1.04); }

/* ---------------------------------------------------- forms */
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 42px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
/* Pins a field to column 1 so the one after it sits alongside rather than
   wrapping to the next row — see BaseStyledForm.ROW_START_FIELDS. */
.form-grid .row-start { grid-column: 1; }
.form-field label { display: block; font-weight: 700; font-size: .88rem; color: var(--ink); margin-bottom: 6px; }
.form-input {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 8px;
  font: inherit; color: var(--text); background: #fff;
}
.form-input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(237,50,55,.15); }
.form-textarea { min-height: 84px; resize: vertical; }
.form-help { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.form-help strong { color: var(--ink); font-weight: 800; }
/* The video brief (see EmbarkApplication.business_video_url). Three numbered
   points the applicant can tick off, rather than instructions buried in a
   paragraph they will skim — this is the most-missed field on the form, so the
   field also takes a full grid row (FULL_WIDTH_FIELDS) to give it the width.

   Stacked at every size on purpose: the form card is roughly half the page on
   desktop, so a three-across layout would be ~170px per column. */
.form-help-brief {
  list-style: none; counter-reset: brief;
  margin: 9px 0 11px; padding: 13px 15px;
  background: rgba(62, 64, 149, .05);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  display: grid; gap: 9px;
}
.form-help-brief li {
  counter-increment: brief; line-height: 1.5;
  position: relative; padding-left: 27px;
}
.form-help-brief li::before {
  content: counter(brief);
  position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .64rem; font-weight: 800; line-height: 19px; text-align: center;
}
.form-help-brief b { color: var(--ink); font-weight: 800; }
.recaptcha-slot { margin: 6px 0; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-form .form-input { flex: 1; }

/* flash messages */
.flash-stack { position: sticky; top: 84px; z-index: 90; display: grid; gap: 8px; padding-top: 12px; }
.flash { padding: 14px 20px; border-radius: 8px; font-weight: 600; box-shadow: var(--shadow); }
.flash-success { background: #E8F6EC; color: #1C6B34; border: 1px solid #BFE5CB; }
.flash-error { background: #FDECEC; color: #C4262B; border: 1px solid #F6C6C8; }

/* --------------------------------------------------- footer */
.site-footer { background: var(--surface-darker); color: rgba(255,255,255,.8); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 44px; padding: 72px 24px 44px; }
.footer-brand p { max-width: 34ch; }
.footer-col h3 { color: #fff; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: rgba(255,255,255,.78); text-decoration: none; }
.footer-col a:hover { color: var(--gold); }
.social { list-style: none; display: flex; gap: 10px; padding: 0; margin-top: 20px; }
.social a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35); color: #fff; text-decoration: none;
  font-weight: 800; font-size: .8rem;
}
.social a:hover { background: var(--accent); border-color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.14); padding-top: 26px; padding-bottom: 34px; font-size: .88rem;
}
.footer-bottom ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.footer-bottom a { color: rgba(255,255,255,.75); }

/* sticky apply (mobile requirement) */
.sticky-apply {
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 800;
  padding: 14px 22px; border-radius: 999px; box-shadow: 0 10px 26px rgba(46,48,120,.45);
  display: none;
}

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .btn { margin-top: 22px; }

/* embark sub-brand banner */
.embark-mark { color: var(--gold); font-family: var(--accent-serif); font-style: italic; }
.subbrand-note {
  display: inline-flex; align-items: center; gap: 10px; background: rgba(252,192,21,.14);
  border: 1px solid rgba(252,192,21,.5); color: var(--gold); border-radius: 999px;
  padding: 8px 18px; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
}

/* utility */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ----------------------------------------------- responsive */
@media (max-width: 1080px) {
  .main-nav a { padding: 10px 8px; font-size: .84rem; }
}
@media (max-width: 960px) {
  .main-nav {
    position: fixed; inset: 72px 0 0 0; background: var(--surface-dark); padding: 24px;
    transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  }
  .nav-open .main-nav { transform: none; }
  .main-nav ul { flex-direction: column; gap: 2px; }
  .main-nav a { font-size: 1.1rem; padding: 14px 10px; min-height: 44px; }
  .has-sub .sub { position: static; display: flex; background: transparent; box-shadow: none; padding-left: 18px; }
  .has-sub .sub a { color: rgba(255,255,255,.75); }
  .nav-toggle { display: block; }
  .btn-apply { display: none; }
  .sticky-apply { display: inline-block; }
  .split, .grid-2, .footer-grid { grid-template-columns: 1fr; }
  .split { gap: 36px; }
  .curriculum-list { columns: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .hero-inner { padding: 110px 0 64px; }
  .flash-stack { top: 76px; }
}

/* ============================================================
   v2 — motion & imagery upgrades
   ============================================================ */

/* Ken Burns slow zoom on the active hero slide */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
.hero-slide.is-active { animation: kenburns 9s ease-out forwards; }

/* Hero entrance sequence (staggered fade-up on load) */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-inner > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .18s; }
.hero-inner > *:nth-child(3) { animation-delay: .32s; }
.hero-inner > *:nth-child(4) { animation-delay: .46s; }
.hero-inner > *:nth-child(5) { animation-delay: .6s; }

/* Values marquee strip */
.marquee { overflow: hidden; background: var(--gold); padding: 16px 0; }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marquee 26s linear infinite; }
.marquee span {
  font-weight: 900; color: var(--ink); text-transform: uppercase;
  letter-spacing: .12em; font-size: .95rem; white-space: nowrap;
}
.marquee span::before { content: "✳"; color: var(--accent); margin-right: 14px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Full-width image band with duotone veil */
.image-band { position: relative; min-height: 380px; background-size: cover; background-position: center; background-attachment: fixed; display: flex; align-items: center; }
@media (max-width: 960px), (prefers-reduced-motion: reduce) { .image-band { background-attachment: scroll; } }
.image-band .veil { position: absolute; inset: 0; background: linear-gradient(15deg, rgba(62,64,149,.45), rgba(55,12,15,.88)); }
.image-band .container { position: relative; }

/* Home gallery strip */
.strip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.strip-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.strip-grid figure:nth-child(even) { transform: translateY(20px); }
.strip-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.strip-grid figure:hover img { transform: scale(1.06); }

/* Card icon micro-interaction */
.card:hover .card-icon { transform: rotate(90deg); background: var(--gold); }
.card-icon { transition: transform .3s ease, background .3s ease; }

/* Section heading accent underline draw */
.section-head h2 .accent { background-image: linear-gradient(90deg, var(--gold), var(--gold)); background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 100%; transition: background-size .8s ease .2s; padding-bottom: 4px; }
.section-head.is-visible h2 .accent, .is-visible .section-head h2 .accent { background-size: 100% 3px; }

/* Person photo hover */
.person-photo img { transition: transform .35s ease; }
.person:hover .person-photo img { transform: scale(1.05); }

/* Extra mobile polish */
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .hero { min-height: 78vh; }
  .hero-inner { padding: 96px 0 56px; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .strip-grid { grid-template-columns: repeat(3, 1fr); }
  .strip-grid figure:nth-child(even) { transform: none; }
  .form-card { padding: 26px 20px; }
  .section { padding: 52px 0; }
  .chip { padding: 8px 14px; font-size: .85rem; }
  .footer-grid { padding: 52px 18px 36px; gap: 32px; }
  .marquee-track { animation-duration: 18s; }
  .curriculum-list li { padding-left: 46px; font-size: .95rem; }
}

/* ============================================================
   v3 — client-reference alignment
   ============================================================ */

/* Eyebrow: client style — "• LABEL" with a short rule BELOW */
.eyebrow { display: block; }
.eyebrow::before { content: "• "; color: currentColor; animation: none; font-size: inherit; }
.eyebrow::after {
  content: ""; display: block; width: 46px; height: 2px;
  background: currentColor; opacity: .9; margin-top: 10px;
}

/* Hero milestone timeline (reference image 1) */
.hero-timeline {
  border-top: 1px solid rgba(255,255,255,.4); margin-top: 52px; padding-top: 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px;
}
.hero-timeline .yr { display: block; font-weight: 800; color: #fff; font-size: .95rem; letter-spacing: .04em; }
.hero-timeline .tx { color: rgba(255,255,255,.78); font-size: .85rem; line-height: 1.45; display: block; margin-top: 6px; }
@media (max-width: 640px) { .hero-timeline { grid-template-columns: repeat(2, 1fr); } .hero-timeline > div:nth-child(n+5) { display: none; } }

/* Image band: centered italic serif line (reference image 2) */
.image-band { justify-content: center; text-align: center; }
.band-quote {
  font-family: var(--accent-serif); font-style: italic; font-weight: 600;
  color: #fff; font-size: clamp(1.4rem, 3vw, 2.1rem); max-width: 26ch; margin: 0 auto;
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
}

/* Gold spark badge — back to top (reference image 1, right edge) */
.spark-top {
  position: fixed; right: 0; top: 45vh; z-index: 96;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--gold); color: var(--ink); font-size: 1.3rem;
  border: 0; border-radius: 8px 0 0 8px; cursor: pointer;
  transform: translateX(100%); transition: transform .3s ease;
  box-shadow: -4px 4px 18px rgba(0,0,0,.2);
}
.spark-top.show { transform: none; }
.spark-top:hover { filter: brightness(1.06); }
.spark-top:focus-visible { outline: 3px solid var(--secondary); }

/* Rotating headline word */
.rw { display: inline-block; animation: rw-in .55s cubic-bezier(.2,.75,.25,1) both; will-change: transform, opacity; }
@keyframes rw-in {
  from { opacity: 0; transform: translateY(60%) rotate(2deg); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   v4 — discipline pass: one accent, calmer type, more air
   ============================================================ */
:root {
  --display: "Plus Jakarta Sans", system-ui, sans-serif;
  --accent-soft: #CFD0FF;               /* eyebrow blue, 5.2:1 on --surface-dark */
}
body { font-family: var(--display); line-height: 1.7; }
h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; }

/* Accent words: white on dark (per reference), red on light */
.accent-light { color: #fff; }
.accent-gold { color: var(--gold); }         /* Embark pages only */

/* One eyebrow color: red family everywhere */
.on-dark .eyebrow, .eyebrow.gold { color: var(--accent-soft); }

/* Impact numbers: neutral suffix, no gold */
.impact-num .suffix { color: rgba(255,255,255,.65); }
.hero-timeline .yr { color: #fff; }

/* Chips: quieter */
.chip::before { content: "• "; color: var(--accent); }

/* Card icon: red family */
.card-icon { color: var(--accent); }
.card:hover .card-icon { background: var(--accent); color: #fff; transform: none; }

/* Spark badge: red */
.spark-top { background: var(--accent); color: #fff; }
.spark-top:focus-visible { outline: 3px solid var(--ink); }

/* Spacing: more air, steadier rhythm */
.section { padding: 116px 0; }
.section-tight { padding: 72px 0; }
.section-head { margin-bottom: 60px; }
.section-head p.lead, .hero .lead { max-width: 60ch; }
.card { padding: 36px 30px; border-color: rgba(74,17,20,.1); }
.card-grid { gap: 26px; }
.split { gap: 80px; }
.hero-inner { padding: 150px 0 92px; }
.eyebrow { margin-bottom: 22px; }
.form-card { padding: 48px; }
p { margin: 0 0 1.2em; }
@media (max-width: 960px) { .section { padding: 76px 0; } .split { gap: 44px; } }
@media (max-width: 640px) { .section { padding: 60px 0; } .form-card { padding: 28px 20px; } }

/* Marquee retired */
.marquee { display: none; }

/* Header lockup: mark + wordmark */
.brand { gap: 12px; }
.brand-logo { height: 38px; }
.brand-word { font-weight: 800; font-size: 1.06rem; letter-spacing: -0.01em; }
.brand-word em { font-style: normal; font-weight: 500; color: rgba(255,255,255,.8); margin-left: 6px; }

/* ============================================================
   v5 — RESPONSIVE CONSOLIDATION (must stay last in this file)
   Earlier appended rules were overriding media queries; every
   breakpoint rule is re-asserted here, in order, wide → narrow.
   ============================================================ */

@media (max-width: 1080px) {
  .main-nav a { padding: 10px 8px; font-size: .84rem; }
}

/* ---------- tablet & below */
@media (max-width: 960px) {
  .main-nav {
    position: fixed; inset: 72px 0 0 0; background: var(--surface-dark); padding: 20px 22px 60px;
    transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  }
  .nav-open .main-nav { transform: none; }
  .nav-open { overflow: hidden; }              /* lock background scroll */
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { font-size: 1.05rem; padding: 14px 8px; min-height: 44px; }
  .has-sub .sub { position: static; display: flex; background: transparent; box-shadow: none; padding: 0 0 0 18px; }
  .has-sub .sub a { color: rgba(255,255,255,.72); font-size: .95rem; padding: 10px 8px; }
  .nav-toggle { display: block; }
  .btn-apply { display: none; }
  .sticky-apply { display: inline-block; }
  .translate-slot { max-width: 112px; overflow: hidden; }
  .brand-word { font-size: .95rem; }

  .hero { min-height: 70vh; }
  .hero-inner { padding: 100px 0 56px; }
  .hero-timeline { margin-top: 36px; }
  .section { padding: 72px 0; }
  .section-tight { padding: 52px 0; }
  .section-head { margin-bottom: 38px; }
  .split, .grid-2, .footer-grid { grid-template-columns: 1fr; }
  .split { gap: 40px; }
  .curriculum-list { columns: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 32px 26px; }
  .strip-grid { grid-template-columns: repeat(3, 1fr); }
  .strip-grid figure:nth-child(even) { transform: translateY(12px); }
  .image-band { min-height: 280px; background-attachment: scroll; }
  .flash-stack { top: 76px; }
  .footer-grid { padding: 56px 24px 36px; gap: 36px; }
}

/* ---------- phones */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .container { padding: 0 18px; }
  h1 { font-size: clamp(1.9rem, 8.2vw, 2.5rem); }
  h2 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .lead { font-size: 1.05rem; }
  .statement { font-size: 1.15rem; }
  .band-quote { font-size: 1.3rem; }
  .btn { padding: 13px 22px; font-size: .9rem; }

  .hero { min-height: 0; }
  .hero-inner { padding: 84px 0 44px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { width: 100%; text-align: center; }
  .hero-timeline { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; padding-top: 16px; margin-top: 30px; }
  .hero-timeline > div:nth-child(n+5) { display: none; }
  .hero-timeline .tx { font-size: .8rem; }

  .section { padding: 54px 0; }
  .section-tight { padding: 40px 0; }
  .section-head { margin-bottom: 30px; }
  .eyebrow { margin-bottom: 16px; }

  .impact-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; padding-top: 28px; }
  .impact-num { font-size: 2.1rem; }
  .impact-label { font-size: .82rem; }

  .card { padding: 26px 22px; }
  .card-grid, .testimonial-grid, .video-grid, .post-grid { grid-template-columns: 1fr; gap: 18px; }
  .people-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .strip-grid figure:nth-child(even) { transform: none; }
  .chip { padding: 8px 14px; font-size: .84rem; }
  .curriculum-list li { padding: 12px 0 12px 42px; font-size: .93rem; }
  .curriculum-list li::before { top: 10px; font-size: .95rem; }

  .form-card { padding: 26px 18px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }

  .footer-grid { padding: 44px 18px 30px; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 28px; }
  .image-band { min-height: 220px; }
  .article h1 { font-size: 1.7rem; }
  .sticky-apply { padding: 12px 18px; font-size: .9rem; }
}

/* ---------- small phones */
@media (max-width: 380px) {
  .brand-word em { display: none; }
  .people-grid { grid-template-columns: 1fr; }
  .hero-timeline { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   v6 — button system, header fix, margin rhythm, Embark orange
   (self-contained: re-asserts its own breakpoints)
   ============================================================ */

/* --- Header: pin actions (and hamburger) to the right edge always */
.header-inner { justify-content: space-between; }
.main-nav { margin-left: 0; }
.header-actions { margin-left: auto; flex-shrink: 0; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
.nav-toggle span { margin: 2.5px 0; }

/* --- Buttons: clean rectangles, reference style (no bouncy pill) */
.btn {
  border-radius: 8px; padding: 15px 26px;
  font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: none; box-shadow: none; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary:hover { background: #C4262B; }
.btn-outline { border-width: 2px; }
.btn-outline:hover { background: var(--secondary); color: #fff; }
.btn-ghost { border-width: 2px; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #D64A22; }
.btn-gold { background: var(--orange); color: #fff; }   /* legacy alias → orange */
.btn-gold:hover { background: #D64A22; }

/* --- Margin rhythm: consistent page headers + calmer sections */
.page-head { background: var(--surface-dark); padding: 88px 0 64px; }
.page-head h1 { margin-bottom: .35em; }
.page-head .lead { margin-bottom: 0; }
.section { padding: 96px 0; }
.section-head { margin-bottom: 46px; }
h1 { margin: 0 0 .4em; }
h2 { margin: 0 0 .5em; }
.hero-inner { padding: 128px 0 76px; }

/* --- Footer alignment: container already pads horizontally */
.footer-grid { padding: 68px 0 40px; }
.footer-bottom { padding-bottom: 32px; }

/* --- Accent underline draw: red, not gold */
.section-head h2 .accent { background-image: linear-gradient(90deg, var(--accent), var(--accent)); }
.on-dark .section-head h2 .accent, .section-dark .section-head h2 .accent { background-image: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.7)); }

/* --- Embark: orange sub-brand, zero yellow */
.accent-orange { color: var(--orange); }
.subbrand-note { background: rgba(241,89,44,.14); border-color: rgba(241,89,44,.55); color: #FF9B76; }
.curriculum-list li::before { color: var(--orange); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.14); }

/* --- v6 responsive re-assertions */
@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .section { padding: 70px 0; }
  .page-head { padding: 60px 0 44px; }
  .hero-inner { padding: 96px 0 52px; }
  .section-head { margin-bottom: 34px; }
  .footer-grid { padding: 48px 0 30px; }
}
@media (max-width: 640px) {
  .btn { padding: 13px 20px; font-size: .78rem; width: auto; }
  .hero-cta .btn { width: 100%; }
  .section { padding: 52px 0; }
  .page-head { padding: 44px 0 36px; }
  .hero-inner { padding: 80px 0 40px; }
  .footer-grid { padding: 38px 0 24px; }
}

/* ============================================================
   v7 — EMBARK THEME: charcoal / cream / orange only.
   Scoped to .theme-embark (Embark + Apply pages). The global
   header/footer stay Foundation ink as site chrome.
   ============================================================ */
.theme-embark {
  --em-dark: #231F20;      /* Embark charcoal (from brand files) */
  --em-dark-2: #1B1718;
  --em-cream: #FAEDCC;     /* Embark cream */
  --em-orange: #F1592C;
  --em-orange-dark: #CC431C;
  --em-orange-soft: #FF9B76;
}

/* Dark surfaces: charcoal, never ink-blue */
.theme-embark .hero { background: var(--em-dark-2); }
.theme-embark .hero-veil {
  background: linear-gradient(15deg, rgba(241,89,44,.55) 0%, rgba(35,31,32,.72) 55%, rgba(27,23,24,.94) 100%);
}
.theme-embark .hero-veil-2 {
  background: linear-gradient(to top, rgba(27,23,24,.94) 0%, rgba(27,23,24,.25) 45%, rgba(27,23,24,.35) 100%);
}
.theme-embark .section-dark, .theme-embark .page-head { background: var(--em-dark); }
.theme-embark .section-cream { background: var(--em-cream); }
.theme-embark .image-band .veil {
  background: linear-gradient(15deg, rgba(241,89,44,.5), rgba(35,31,32,.85));
}

/* Type + accents: orange family */
.theme-embark h1, .theme-embark h2, .theme-embark h3, .theme-embark h4 { color: var(--em-dark); }
.theme-embark .on-dark h1, .theme-embark .on-dark h2, .theme-embark .on-dark h3 { color: #fff; }
.theme-embark .eyebrow { color: var(--em-orange); }
.theme-embark .on-dark .eyebrow { color: var(--em-orange-soft); }
.theme-embark .accent-primary, .theme-embark .accent-orange { color: var(--em-orange); }
.theme-embark main a:not(.btn) { color: var(--em-orange-dark); }
.theme-embark .statement { color: var(--em-orange-dark); border-color: var(--em-orange); }
.theme-embark .section-head h2 .accent { background-image: linear-gradient(90deg, var(--em-orange), var(--em-orange)); }

/* Components */
.theme-embark .btn-primary, .theme-embark .btn-secondary, .theme-embark .btn-orange { background: var(--em-orange); color: #fff; }
.theme-embark .btn-primary:hover, .theme-embark .btn-secondary:hover, .theme-embark .btn-orange:hover { background: var(--em-orange-dark); }
.theme-embark .btn-outline { border-color: var(--em-dark); color: var(--em-dark); }
.theme-embark .btn-outline:hover { background: var(--em-dark); color: #fff; }
.theme-embark .card { border-color: rgba(35,31,32,.12); }
.theme-embark .card-icon { background: var(--em-cream); color: var(--em-orange); }
.theme-embark .card::after { background: linear-gradient(90deg, var(--em-orange), var(--em-orange-soft)); }
.theme-embark .card p, .theme-embark .lead { color: #5D5654; }
.theme-embark .on-dark .lead { color: rgba(255,255,255,.82); }
.theme-embark .chip { border-color: rgba(35,31,32,.16); color: var(--em-dark); background: #fff; }
.theme-embark .chip::before { color: var(--em-orange); }
.theme-embark .curriculum-list li { color: var(--em-dark); border-color: rgba(35,31,32,.12); }
.theme-embark .curriculum-list li::before { color: var(--em-orange); }
.theme-embark .faq summary { color: var(--em-dark); }
.theme-embark .faq summary::after { color: var(--em-orange); }
.theme-embark .faq details, .theme-embark .faq { border-color: rgba(35,31,32,.12); }
.theme-embark .form-input:focus { border-color: var(--em-orange); box-shadow: 0 0 0 3px rgba(241,89,44,.18); }
.theme-embark .testimonial blockquote { color: var(--em-dark); }
.theme-embark .spark-top { background: var(--em-orange); }
.theme-embark .sticky-apply { background: var(--em-orange); box-shadow: 0 10px 26px rgba(204,67,28,.45); }
.theme-embark .subbrand-note { background: rgba(241,89,44,.16); border-color: rgba(241,89,44,.55); color: var(--em-orange-soft); }
.theme-embark ::selection { background: var(--em-orange); color: #fff; }

/* v8 — hamburger: stack the bars (flex defaults to row, oops) */
.nav-toggle { flex-direction: column; }

/* ============================================================
   v19 — EMBARK CHROME (supersedes v9, which kept the Foundation
   red header/footer on every page).

   Embark pages now carry their own header and footer: charcoal
   instead of red, orange instead of gold, and the Embark lockup
   in place of the Foundation one (see embark_base.html). Nav and
   footer *structure* stay identical site-wide, so the sub-brand
   reads as a section of the site, not a different website.

   Header uses --em-dark and the footer the darker --em-dark-2,
   mirroring the Foundation's lighter-bar/darker-footer pairing.
   ============================================================ */
.theme-embark .site-header {
  background: var(--em-dark);
  border-bottom: 1px solid rgba(255,255,255,.08);   /* page-head is the same charcoal — keep the bar legible */
}
.theme-embark .site-header a, .theme-embark .site-header .brand-word { color: rgba(255,255,255,.88); }
.theme-embark .site-header a:hover, .theme-embark .site-header a:focus-visible { color: #fff; }
.theme-embark .main-nav a:hover, .theme-embark .main-nav a:focus-visible { background: rgba(241,89,44,.22); }
.theme-embark .brand-word em { color: var(--em-orange-soft); }   /* never gold on Embark */

/* Desktop dropdown panel: white card, charcoal type (not the red-black ink) */
.theme-embark .site-header .has-sub .sub a { color: var(--em-dark); }
.theme-embark .site-header .has-sub .sub a:hover { background: var(--em-cream); color: var(--em-dark); }

/* Embark lockup: one wide horizontal mark, so it replaces mark + wordmark */
.brand-logo-embark { height: 32px; }
.footer-logo-embark { height: 44px; }

.theme-embark .site-footer { background: var(--em-dark-2); }
/* .theme-embark h3 paints headings charcoal for light sections — same-specificity
   as .footer-col h3 and declared later, so it was winning here and rendering the
   column headings charcoal-on-charcoal. The footer is dark: keep them white. */
.theme-embark .footer-col h3 { color: #fff; }
.theme-embark .site-footer a { color: rgba(255,255,255,.78); }
.theme-embark .site-footer a:hover, .theme-embark .footer-col a:hover,
.theme-embark .footer-bottom a:hover { color: var(--em-orange-soft); }
.theme-embark .social a:hover { background: var(--em-orange); border-color: var(--em-orange); }

/* Sub-brand attribution under the footer lockup */
.footer-subbrand { font-size: .92rem; color: rgba(255,255,255,.62); margin-top: -.4em; }
.footer-subbrand a { text-decoration: underline; text-underline-offset: 2px; }
.theme-embark .footer-subbrand a { color: var(--em-orange-soft); }

@media (max-width: 960px) {
  /* Slide-in mobile menu panel — red by default, charcoal here */
  .theme-embark .main-nav { background: var(--em-dark); }
  .brand-logo-embark { height: 28px; }
}

/* v10 — nav decrowded: fewer items, roomier links; dropdown machinery retired */
.main-nav a { padding: 10px 15px; font-size: .92rem; }
/* Translate widget retired. The dropdown machinery is back in use for
   Get Involved (see v18) — do not fold .has-sub/.caret back in here. */
.translate-slot { display: none !important; }
@media (max-width: 1080px) { .main-nav a { padding: 10px 11px; font-size: .88rem; } }

/* v11 — nav links never wrap to two lines */
.main-nav ul { flex-wrap: nowrap; }
.main-nav a { white-space: nowrap; }
.brand-word { white-space: nowrap; }
.header-inner { flex-wrap: nowrap; }
@media (max-width: 1240px) {
  .main-nav a { padding: 10px 10px; font-size: .88rem; }
  .btn-apply { padding: 10px 16px; font-size: .76rem; }
}
@media (max-width: 1060px) {
  .main-nav a { padding: 10px 7px; font-size: .84rem; }
}

/* v12 — rotating hero word pops in brand red, brightened for dark bg */
.hero .accent-primary { color: #A9ACFF; }

/* v13 — every framed image fits its position regardless of source shape */
.media-frame img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.split .media-frame img { aspect-ratio: 4 / 3; }

/* ============================================================
   v14 — EXCELLENCE PASS: order, alignment, rhythm
   ============================================================ */

/* Checklists: one consistent style everywhere (about, embark, apply) */
.ticklist { list-style: none; padding: 0; margin: 0; }
.ticklist li {
  padding: 14px 0 14px 30px; border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--ink); position: relative;
}
.ticklist li:last-child { border-bottom: 0; }
.ticklist li::before { content: "✓"; position: absolute; left: 0; top: 14px; color: var(--accent); font-weight: 800; }
.theme-embark .ticklist li { color: var(--em-dark); border-color: rgba(35,31,32,.12); }
.theme-embark .ticklist li::before { color: var(--em-orange); }
.on-dark .ticklist li, .section-dark .ticklist li { color: #fff; border-color: rgba(255,255,255,.18); }

/* Form card headings: consistent size + spacing */
.form-title { font-size: 1.55rem; margin-bottom: 6px; }
.form-card > p { margin-top: 0; }
.form-card form { margin-top: 22px; }

/* Centered sections: the eyebrow underline must center too (was left-stuck) */
.center .eyebrow, .cta-band .eyebrow { text-align: center; }
.center .eyebrow::after, .cta-band .eyebrow::after { margin-left: auto; margin-right: auto; }

/* Cards: equal heights in a row; actions pinned to the bottom */
.card-grid { align-items: stretch; }
.card { display: flex; flex-direction: column; }
.card p:last-child, .card .card-cta { margin-top: auto; }
.card h3 { margin-bottom: 10px; }

/* Testimonials & people: consistent internal rhythm */
.testimonial { min-height: 100%; }
.person h3 { margin-top: 0; }
.person .role { display: block; margin-top: 2px; }

/* Headlines: balanced line breaks (no orphan words) */
h1, h2, .statement, .band-quote { text-wrap: balance; }

/* Split sections: media and text top-align consistently */
.split { align-items: start; }
.split > .reveal > .media-frame:first-child { margin-top: 6px; }

/* Consistent gap after intro leads */
.page-head .lead { max-width: 62ch; }

/* ============================================================
   v15 — Rotating headline (home + Embark heroes)

   The fixed line and the changing phrase must not share a line
   box: `text-wrap: balance` re-wraps a whole block whenever its
   content changes, so a rotating word on the same line as fixed
   text drags that text around on every swap.

   So .rotator is a block on its own line. Inside it, a hidden
   ghost holding the longest phrase reserves the height, and the
   live phrase sits in the same grid cell — the row is then as
   tall as the taller of the two, so a phrase can never spill onto
   the paragraph below even if the ghost drifts out of sync with
   the longest data-words entry.

   The ghost must carry the same .accent typography as the live
   span: measuring Archivo to reserve room for Fraunces italic
   reserves the wrong height and the phrase overlaps the lead.
   ============================================================ */
.hero h1.hero-headline { max-width: 30ch; }          /* Embark: long phrases */
.hero h1.hero-headline-compact { max-width: 21ch; }  /* home: single words */
.rotator { display: grid; margin-top: .08em; }
.rotator-ghost, .rotator-live { grid-area: 1 / 1; }
.rotator-ghost { visibility: hidden; }
@media (max-width: 640px) {
  .hero h1.hero-headline { max-width: 22ch; }
  .hero h1.hero-headline-compact { max-width: 18ch; }
}

/* Headings that must not break across lines on desktop. Below the
   breakpoint they wrap normally — nowrap on a phone would overflow. */
@media (min-width: 961px) {
  h1.one-line, h2.one-line, h3.one-line, p.one-line {
    white-space: nowrap;
    text-wrap: nowrap;   /* beats the inherited `balance` */
  }
}

/* ============================================================
   v16 — Sectioned (multi-step) forms
   Used by the Embark application. Everything degrades: with JS
   off all fieldsets are visible and the form posts in one go.
   ============================================================ */

/* Intro block above the form */
.form-intro { border-left: 3px solid var(--orange); padding-left: 18px; margin-bottom: 22px; }
.form-intro p { color: var(--muted); font-size: .98rem; margin-bottom: .6em; }
.form-intro p:last-child { margin-bottom: 0; }
.form-intro-video { font-weight: 700; text-decoration: none; }
.form-intro-video:hover { text-decoration: underline; }
.form-note { color: var(--muted); font-size: .95rem; }

/* Progress rail */
.step-rail {
  list-style: none; margin: 0 0 30px; padding: 0 0 22px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  border-bottom: 1px solid var(--line); counter-reset: none;
}
.step-rail-item { display: grid; gap: 8px; font-size: .78rem; line-height: 1.3; color: var(--muted); }
.step-rail-num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(35,31,32,.08); color: var(--muted);
  font-weight: 800; font-size: .8rem; transition: background .2s ease, color .2s ease;
}
.step-rail-label { font-weight: 700; }
.step-rail-item.is-current { color: var(--em-dark, var(--ink)); }
.step-rail-item.is-current .step-rail-num { background: var(--orange); color: #fff; }
.step-rail-item.is-done .step-rail-num { background: var(--em-dark, var(--ink)); color: #fff; }
.step-rail-item[role="button"] { cursor: pointer; }
.step-rail-item:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Step container */
.form-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-step-legend { display: block; padding: 0; margin-bottom: 6px; }
.form-step-count {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 6px;
}
.form-step-title { display: block; font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.theme-embark .form-step-title { color: var(--em-dark); }
.form-step-blurb { color: var(--muted); font-size: .95rem; margin: 8px 0 24px; }

/* Radio / checkbox groups */
.form-group-label { display: block; font-weight: 700; font-size: .88rem; color: var(--ink); margin-bottom: 10px; }
.theme-embark .form-group-label { color: var(--em-dark); }
.form-field.is-choices > [role="group"] > div { display: grid; gap: 10px; }
.form-field.is-choices label {
  display: flex; gap: 11px; align-items: flex-start;
  font-weight: 500; font-size: .96rem; color: var(--text); cursor: pointer;
}
.form-field.is-choices input { flex: none; width: 1.05em; height: 1.05em; margin-top: .32em; accent-color: var(--orange); }

/* Lone tickbox (consent) */
.form-check-row { display: flex; gap: 11px; align-items: flex-start; font-weight: 500; font-size: .95rem; cursor: pointer; }
.form-check-row .form-check { flex: none; width: 1.1em; height: 1.1em; margin-top: .28em; accent-color: var(--orange); }

/* File input */
.form-file { padding: 10px 12px; cursor: pointer; }

/* Errors */
.form-error { color: #C4262B; font-size: .85rem; font-weight: 600; margin-top: 6px; }
.form-error-top {
  background: #FDECEC; border: 1px solid #F6C6C8; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 26px; font-weight: 600;
}
.form-field.has-error .form-input { border-color: #C4262B; }
.form-field.has-error .form-input:focus { box-shadow: 0 0 0 3px rgba(196,38,43,.16); }

/* Step actions */
.form-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line);
}
.form-actions .btn { flex: 1 1 auto; text-align: center; }
.form-draft-note { color: var(--muted); font-size: .82rem; margin: 14px 0 0; }

@media (max-width: 640px) {
  .step-rail { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
  .step-rail-label { display: none; }          /* numbers alone on small screens */
  .step-rail-num { width: 26px; height: 26px; }
  .form-step-title { font-size: 1.15rem; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; flex: none; }
}

/* ============================================================
   v17 — HERO LEGIBILITY over photography
   The hero photos are bright (market stalls, white baskets, sunlit
   walls), and the old veil only went dark at the bottom — so the
   headline sat on near-white and the accent word vanished. Two fixes:

   1. The scrim is now weighted to the text side (left) as well as
      the bottom, so copy always has a dark backing while the subject
      on the right of frame stays visible.
   2. Accents on photography need light tints of the brand hues. The
      solid hues are too dark to read here: brand blue #3E4095 measures
      1.00:1 against the veil (identical luminance — invisible), and
      Embark orange #F1592C lands orange-on-orange where the duotone
      veil is warmest, at 2.21:1.

   The horizontal layer fades to fully transparent by 80%, so the extra
   darkening lands on the copy and not on the subject. Measured worst
   case in the headline box, and mean luminance where the subject
   stands, before → after:
      Foundation  white 5.5 → 7.4   accent #A9ACFF 2.6 → 3.5   subject .034 → .037
      Embark      white 7.4 → 10.9  accent #FF9B76 3.6 → 5.3   subject .015 → .015
   The photo ends up marginally brighter, not darker: the old veil-2
   dimmed the whole frame bottom-up, this one is weighted to one side.
   The v12 hero blue needed no new value — the scrim was too thin, not
   the colour.
   ============================================================ */
.hero-veil-2 {
  background:
    linear-gradient(100deg, rgba(55,12,15,.80) 0%,  rgba(55,12,15,.60) 30%,
                            rgba(55,12,15,.20) 58%, rgba(55,12,15,0)   80%),
    linear-gradient(to top,  rgba(55,12,15,.78) 0%,  rgba(55,12,15,.20) 42%,
                             rgba(55,12,15,.10) 100%);
}
.theme-embark .hero-veil-2 {
  background:
    linear-gradient(100deg, rgba(27,23,24,.80) 0%,  rgba(27,23,24,.60) 30%,
                            rgba(27,23,24,.20) 58%, rgba(27,23,24,0)   80%),
    linear-gradient(to top,  rgba(27,23,24,.78) 0%,  rgba(27,23,24,.20) 42%,
                             rgba(27,23,24,.10) 100%);
}

/* Hero headings are always over photography, so they are always white.
   `.theme-embark h1` (v7) and `.hero h1` (base) both score 0-1-1, so the
   theme rule won on source order alone and painted the Embark hero
   headline charcoal #231F20 on a charcoal hero — invisible. The Apply
   page escaped it only because .page-head carries `on-dark`. */
.theme-embark .hero h1,
.theme-embark .hero h2 { color: #fff; }

/* Embark's rotating phrase takes the soft orange the theme already uses
   on dark surfaces (see .theme-embark .on-dark .eyebrow). Scoped to
   .hero — on cream and white sections solid --em-orange is correct. */
.theme-embark .hero .accent-orange,
.theme-embark .hero .accent-primary { color: var(--em-orange-soft); }

/* Supporting hero copy: lift off the photo rather than blend into it. */
.hero .lead { color: rgba(255,255,255,.92); }
.hero h1, .hero .lead { text-shadow: 0 1px 18px rgba(20,6,8,.45); }

/* Phones: the scrim goes full-width — there is no side room for the
   subject once the copy spans the viewport. But full-width previously also
   meant *everywhere*: the lightest stop was .46, so under .hero-veil's
   multiply pass the photo sat at roughly a tenth of its brightness across the
   whole hero and read as a flat maroon block. Desktop keeps a window (veil-2
   reaches full transparency at 80% of its 100deg sweep); phones get the same
   courtesy turned ninety degrees — clear at the top, heavy at the bottom
   where the copy actually is. .hero is align-items: flex-end, so the window
   costs no legibility: the measurements above were taken in the headline box,
   which still sits under .88–.72. */
@media (max-width: 640px) {
  .hero-veil {
    background: linear-gradient(15deg, rgba(62,64,149,.44) 0%,
                                       rgba(237,50,55,.52) 45%,
                                       rgba(55,12,15,.58) 100%);
  }
  .hero-veil-2 {
    background: linear-gradient(to top, rgba(55,12,15,.88) 0%,
                                        rgba(55,12,15,.72) 30%,
                                        rgba(55,12,15,.28) 66%,
                                        rgba(55,12,15,.04) 100%);
  }
  .theme-embark .hero-veil {
    background: linear-gradient(15deg, rgba(241,89,44,.46) 0%,
                                       rgba(35,31,32,.56) 55%,
                                       rgba(27,23,24,.62) 100%);
  }
  .theme-embark .hero-veil-2 {
    background: linear-gradient(to top, rgba(27,23,24,.88) 0%,
                                        rgba(27,23,24,.72) 30%,
                                        rgba(27,23,24,.28) 66%,
                                        rgba(27,23,24,.04) 100%);
  }
  /* The photo now reaches up behind the kicker, so the copy carries a little
     more of its own scrim rather than leaning entirely on the veils. */
  .hero h1, .hero .lead {
    text-shadow: 0 1px 16px rgba(20,6,8,.72), 0 1px 3px rgba(20,6,8,.5);
  }
  .hero-kicker { text-shadow: 0 1px 12px rgba(20,6,8,.6); }
}

/* ============================================================
   v17 — Programme cards: all five on one row (desktop)

   auto-fit with minmax(240px, 1fr) only fits 4 columns in the
   1112px container, so the fifth card orphaned onto its own row.
   Forcing 5 columns means resizing the card to match: tighter gap
   and padding, slightly smaller type.

   The 1140px floor is set by the longest title, "Pitch
   Competition" — any narrower and it wraps to two lines while its
   siblings stay on one, which reads as a mistake. Between 641px
   and there we pin 3 columns (a deliberate 3 + 2) because plain
   auto-fit swings back to 4 around 1100px and re-orphans the
   fifth card. Below 641px the existing single-column rule wins.
   ============================================================ */
@media (min-width: 1140px) {
  .card-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
  .card-grid-5 .card { padding: 28px 18px; }
  .card-grid-5 .card h3 { font-size: 1rem; letter-spacing: -0.01em; }
  .card-grid-5 .card p { font-size: .9rem; line-height: 1.55; }
  .card-grid-5 .card-icon {
    width: 40px; height: 40px; border-radius: 10px; font-size: 1.1rem;
  }
}
@media (min-width: 641px) and (max-width: 1139px) {
  .card-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   v18 — About: team group photo
   Sits above the per-person grid on the dark section. Capped and
   centred rather than spanning the full 1160px container, which
   would tower over the profile tiles underneath it.
   ============================================================ */
/* OUR TEAM banner. 16:9 and full container width — the previous 720px cap put
   eight faces at ~90px each, which made the names printed on the artwork
   unreadable. Matted on white because the artwork's own background is near-white
   and needs to read as a deliberate inset panel on the red section, not a slab. */
.team-photo {
  max-width: 100%; margin: 0 auto 48px;
  background: #fff; padding: 14px; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Deliberately NOT wrapped in .media-frame: that class forces `aspect-ratio: 4/3`
   with `object-fit: cover`, which centre-crops a 16:9 banner and slices off the
   first and last person — their faces and names sit flush with the edges. The
   matte below is what .media-frame would have provided. */
.team-photo img { width: 100%; height: auto; border-radius: 4px; }
.team-photo + .people-grid { margin-top: 0; }
@media (max-width: 640px) {
  .team-photo { margin-bottom: 32px; padding: 8px; }
}

/* ============================================================
   v18 — Get Involved dropdown, calmer textareas, new layouts
   ============================================================ */

/* --- Nav dropdown (Get Involved → Join Faculty / Volunteer).
   Un-retired in v10; re-stated here because the base rules predate the
   current header colours. Keyboard path: focusing the parent link fires
   :focus-within, which reveals the panel so Tab can reach inside it. */
.has-sub > a { display: flex; align-items: center; gap: 6px; }
.caret { font-size: .62em; opacity: .8; line-height: 1; }
.has-sub .sub {
  min-width: 208px; padding: 10px; gap: 2px;
  border: 1px solid var(--line);
}
/* Bridges the gap between the parent link and the panel so the pointer
   can travel down without the panel closing underneath it. */
.has-sub::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 10px; display: none;
}
.has-sub:hover::after { display: block; }
.has-sub .sub a {
  color: var(--ink); font-size: .9rem; padding: 9px 12px; border-radius: 6px;
}
.has-sub .sub a:hover, .has-sub .sub a:focus-visible {
  background: var(--cream); color: var(--ink);
}
.has-sub > a[aria-haspopup]:hover .caret { transform: translateY(1px); }

/* --- Stacked cards in one column (Facilitators / Mentors) */
.grid-1-tight { display: grid; gap: 18px; }

/* --- Long FAQ lists read better in two columns on desktop */
@media (min-width: 961px) {
  .faq-columns { columns: 2; column-gap: 44px; }
  .faq-columns details { break-inside: avoid; }
}
.faq-columns summary { padding: 16px 8px; font-size: .98rem; }
.on-dark .faq-columns summary, .section-dark .faq-columns summary { color: #fff; }
.on-dark .faq-columns, .section-dark .faq-columns,
.on-dark .faq-columns details, .section-dark .faq-columns details {
  border-color: rgba(255,255,255,.2);
}
.on-dark .faq-columns .answer, .section-dark .faq-columns .answer {
  color: rgba(255,255,255,.8);
}
.on-dark .faq-columns summary::after, .section-dark .faq-columns summary::after {
  color: #fff;
}

/* --- Mobile: the dropdown is a plain indented sub-list, no hover needed */
@media (max-width: 960px) {
  .has-sub > a { justify-content: flex-start; }
  .has-sub::after { display: none; }
  .has-sub .sub { border: 0; padding: 0 0 0 18px; min-width: 0; }
  .has-sub .sub a { color: rgba(255,255,255,.72); }
  .has-sub .sub a:hover, .has-sub .sub a:focus-visible {
    background: rgba(255,255,255,.1); color: #fff;
  }
}

/* ============================================================
   v19 — Alumni spotlight: video posters, portrait clips, story cards
   ============================================================ */

/* --- Click-to-play poster. The box keeps its aspect ratio whether it holds
   the thumbnail or the swapped-in iframe, so nothing jumps on click. */
.video-facade {
  position: absolute; inset: 0; display: block; cursor: pointer;
  background: var(--ink-2); text-decoration: none;
}
.video-embed { position: relative; }
.video-facade img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, opacity .3s ease;
}
.video-facade:hover img { transform: scale(1.04); opacity: .82; }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--secondary); box-shadow: 0 8px 26px rgba(0,0,0,.4);
  transition: transform .2s ease, background .2s ease;
}
/* Play triangle, drawn with borders so there is no icon font or SVG to load */
.video-play::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.1); }
.video-facade:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* --- Vertical clips (Shorts). Capped so a 9:16 frame cannot tower over the
   text beside it; centred because it is narrower than its grid cell. */
.video-embed-portrait { aspect-ratio: 9 / 16; max-width: 320px; margin-inline: auto; }

/* --- Alumni spotlight entries: video one side, story the other, alternating */
.alumni-list { display: grid; gap: 72px; }
.alumnus { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center; }
.alumnus:nth-child(even) .alumnus-media { order: 2; }
.alumnus-name { margin-bottom: 4px; }
.alumnus-venture {
  display: block; font-family: var(--accent-serif); font-style: italic;
  font-size: 1.15rem; color: var(--secondary); margin-bottom: 6px;
}
.alumnus-cohort {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; margin-bottom: 18px;
}
.alumnus-story p { color: var(--muted); }
.alumnus-quote {
  border-left: 3px solid var(--gold); padding-left: 18px; margin: 20px 0;
  font-family: var(--accent-serif); font-style: italic; font-size: 1.14rem; color: var(--ink);
}
.alumnus-link { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--gold); }
.alumnus-photo {
  width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold);
}
.alumnus-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }

@media (max-width: 860px) {
  .alumni-list { gap: 56px; }
  .alumnus { grid-template-columns: 1fr; gap: 24px; }
  /* Media always leads on a phone, so the alternating order must not apply. */
  .alumnus:nth-child(even) .alumnus-media { order: 0; }
}

/* ============================================================
   v20 — Campaign promo modal (admin-managed, see PromoPopup)
   ============================================================ */

/* Off-screen but still announced. The promo dialog needs a heading for its
   accessible name, and the flier artwork already shows that text. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.promo-backdrop {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 6, 7, .72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .28s ease;
  overflow-y: auto;
}
/* [hidden] must beat the flex above, or the modal shows before JS decides. */
.promo-backdrop[hidden] { display: none; }
.promo-backdrop.is-open { opacity: 1; }

.promo-dialog {
  position: relative;
  width: min(460px, 100%);
  margin: auto;                      /* centres it when taller than the viewport */
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  transform: translateY(14px) scale(.98);
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
  outline: none;
}
.promo-backdrop.is-open .promo-dialog { transform: none; }

/* Artwork is the whole point — it fills the dialog, corners clipped to match. */
.promo-art { display: block; border-radius: 14px 14px 0 0; overflow: hidden; }
.promo-art img { display: block; width: 100%; height: auto; }

.promo-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(20,6,7,.55); color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.promo-close:hover { background: rgba(20,6,7,.8); }
.promo-close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.promo-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; padding: 18px 22px 22px;
}
.promo-cta { padding: 13px 30px; }
.promo-dismiss {
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .9rem; font-weight: 600;
  text-decoration: underline; padding: 8px;
}
.promo-dismiss:hover { color: var(--ink); }

body.promo-open { overflow: hidden; }   /* stop the page scrolling behind it */

@media (max-width: 520px) {
  .promo-backdrop { padding: 14px; }
  .promo-actions { padding: 14px 16px 18px; gap: 10px; }
  .promo-cta { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-backdrop, .promo-dialog { transition: none; }
  .promo-dialog { transform: none; }
}

/* ============================================================
   v21 — Cohort schedule timeline (Embark + Apply)
   Six month-columns strung on a rail. The rail is a pseudo-element
   on the list, inset by half a column so it starts and ends at the
   first and last node centres rather than the container edges.
   ============================================================ */
.schedule {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 16px;
  position: relative;
}
.schedule::before {
  content: ""; position: absolute; z-index: 0;
  left: 8.333%; right: 8.333%;      /* half of 1/6 — lands on the node centres */
  top: 22px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  opacity: .5;
}
.schedule-month { position: relative; z-index: 1; text-align: center; }

.schedule-step {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  /* Opaque, so the rail passes behind the node instead of through it. */
  background: var(--surface-dark);
  border: 2px solid var(--orange);
  color: #fff; font-weight: 800; font-size: .95rem; line-height: 1;
}
.schedule-when {
  display: block; margin-top: 12px;
  font-weight: 800; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}

.schedule-items { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.schedule-item {
  font-size: .82rem; font-weight: 600; line-height: 1.35;
  padding: 9px 8px; border-radius: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.82);
}
/* The month a strand joins — the thing worth seeing in six similar lists. */
.schedule-item.starts-here {
  background: rgba(241,89,44,.2);
  border-color: var(--orange);
  color: #fff;
}
.schedule-item.starts-here::before {
  content: "✳"; color: var(--gold); margin-right: 5px; font-size: .9em;
}

.schedule-legend {
  margin: 34px 0 0; text-align: center;
  font-size: .84rem; color: rgba(255,255,255,.6);
}
.schedule-legend span { color: var(--gold); }

/* Two rows of three. The rail assumes one row, so it goes. */
@media (max-width: 1080px) and (min-width: 741px) {
  .schedule { grid-template-columns: repeat(3, 1fr); gap: 40px 18px; }
  .schedule::before { display: none; }
}

/* Stacked: the rail turns vertical and runs down through the nodes. */
@media (max-width: 740px) {
  .schedule { grid-template-columns: 1fr; gap: 0; }
  .schedule::before {
    left: 21px; right: auto; top: 10px; bottom: 26px;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--gold), var(--orange));
  }
  .schedule-month { text-align: left; padding-bottom: 26px; }
  .schedule-head { display: flex; align-items: center; gap: 14px; }
  .schedule-when { margin-top: 0; }
  .schedule-items { margin-left: 58px; margin-top: 10px; }
  .schedule-item { font-size: .86rem; padding: 10px 12px; }
}


/* ============================================================
   v22 - Cohort strands (supersedes the v21 month-column timeline)
   One row per activity; bar length is the information, which is
   why there is no legend. --cols is set inline from the data.
   ============================================================ */
.strands { --label: 150px; }
.strands-head,
.strand-row {
  display: grid;
  grid-template-columns: var(--label) repeat(var(--cols), 1fr);
  gap: 0 6px; align-items: center;
}
.strands-head { margin-bottom: 10px; }
.strand-col {
  text-align: center; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.strand-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.strand-name {
  font-size: .86rem; font-weight: 700; line-height: 1.3;
  color: rgba(255,255,255,.9); padding-right: 12px;
}
.strand-bar {
  min-height: 40px; border-radius: 10px;
  display: flex; align-items: center; padding: 0 14px;
  background: rgba(241,89,44,.22);
  border: 1px solid var(--orange);
  color: #fff; font-size: .78rem; font-weight: 700;
}
.strand-bar.is-single {
  justify-content: center; padding: 0 8px;
  background: rgba(212,175,55,.18); border-color: var(--gold);
}
.strand-range { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .strands-head { display: none; }
  .strand-row { display: flex; justify-content: space-between; align-items: baseline;
                gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .strand-name { padding: 0; font-size: .95rem; }
  .strand-bar { grid-column: auto !important; min-height: 0; border: 0; background: none;
                padding: 0; color: var(--gold); font-size: .82rem; text-align: right; }
  .strand-bar.is-single { background: none; }
}


.key-dates {
  list-style: none; margin: 0 0 28px; padding: 0 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px 40px;
}
.key-dates li { display: flex; flex-direction: column; gap: 4px; }
.key-date-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.key-date-when { font-size: .95rem; font-weight: 700; color: #fff; }

/* ============================================================
   v23 — MOBILE-FIRST POLISH & MOTION SYSTEM
   (must stay last: it re-asserts a handful of earlier rules)

   Three jobs, in this order:

     1. MOBILE ERGONOMICS. Everything a thumb touches is at least
        44px, the header gives space back as you read, the two
        floating buttons stop fighting the footer, and hero height
        never depends on `vh` — iOS resizes that mid-scroll.

     2. TOUCH CORRECTNESS. Every hover effect in this file was
        written for a mouse. On a phone `:hover` sticks after the
        tap and cards sit lifted until you touch something else,
        which reads as a stuck selection. Those are neutralised
        under `hover: none` and replaced with :active press states.

     3. MOTION. One easing/duration vocabulary, a reveal system
        that covers every page without touching every template
        (see the auto-tagging in site.js), and scroll-driven
        effects behind @supports so they cost nothing where they
        are not understood.

   All of it opts out under prefers-reduced-motion — the global
   rule at the top of this file kills the durations, and the
   scroll-driven block below is wrapped in `no-preference`.
   Content is never hidden behind JS: `html:not(.js)` unwinds the
   start states, so a failed script leaves a readable page.
   ============================================================ */

/* ---------------------------------------------------- 22.1 tokens */
:root {
  --ease-out:      cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.28, .48, 1);
  --dur-1: .18s;   /* press / colour */
  --dur-2: .32s;   /* small movement */
  --dur-3: .55s;   /* reveal fade    */
  --dur-4: .8s;    /* reveal travel  */
  --header-h: 72px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Lets `height: auto` animate — needed by the FAQ panel below. A
     capability switch only; it changes no static layout. */
  interpolate-size: allow-keywords;
}
@media (max-width: 640px) { :root { --header-h: 64px; } }

/* Reduced motion: the global rule at the top of this file crushes every
   duration to .01ms, which turns a *looping* animation into a strobe rather
   than stopping it. Nothing above needed iteration-count because nothing
   above looped; the ambient drift in 22.9 does. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; }
  .page-head::before { animation: none; }
}

/* --------------------------------------------- 22.2 base hygiene */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 18px);
}
/* Safety net against a stray wide child on a 320px screen. `clip`, not
   `hidden`: `hidden` would turn <main> into a scroll container and break
   every `position: sticky` inside it. */
main { overflow-x: clip; }
a, button, summary, label, input, select, textarea, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline-offset: 3px; }

/* `hidden` must win. The UA sheet's `[hidden] { display: none }` loses to any
   author rule that sets display — `.btn { display: inline-block }` in this
   file, which meant the application form showed Back, Next *and* Submit on
   every step: form-steps.js was setting `.hidden` and nothing happened. */
[hidden] { display: none !important; }

/* The horizontal gutter, stated once and last.

   `.hero-inner` and `.footer-grid` are both `.container` elements, and both
   were given a `padding` *shorthand* (v6) to set their vertical rhythm —
   which silently zeroed the 24px gutter `.container` provides. Below the
   1160px container width there is no auto margin left to stand in for it, so
   on a phone the hero headline and every footer link sat flush against the
   screen edge, and on desktop the footer columns were 24px out of line with
   the copyright row beneath them.

   Declaring only `padding-inline` here restores the gutter without touching
   anyone's vertical spacing, and folds in the safe-area inset for landscape
   on a notched phone. Any future rule that needs custom vertical padding on
   a `.container` should use `padding-block`, not the shorthand. */
.container { padding-inline: max(24px, var(--safe-l)) max(24px, var(--safe-r)); }
@media (max-width: 640px) {
  .container { padding-inline: max(18px, var(--safe-l)) max(18px, var(--safe-r)); }
}
/* Script failed or is off: unwind every animation start state so the page is
   simply a static page rather than a set of invisible boxes. */
html:not(.js) .reveal,
html:not(.js) .stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
html:not(.js) .media-frame::after,
html:not(.js) .article-cover::after { display: none; }
html:not(.js) .impact-grid { border-top-color: rgba(255, 255, 255, .28); }

/* --------------------------------- 22.3 touch vs hover behaviour */
/* Mouse: keep — and sharpen — the lifts. The specificity is deliberate:
   `.reveal.is-visible { transform: none }` is declared after the original
   `.card:hover`, so on any revealed card the lift never actually landed. */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .card.reveal.is-visible:hover,
  .post-card:hover, .post-card.reveal.is-visible:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
  }
}
/* Touch: no lift to get stuck in, a real press instead. */
@media (hover: none) {
  .card:hover, .post-card:hover { transform: none; box-shadow: none; }
  .card:hover::after { transform: scaleX(0); }
  .person:hover .person-photo img,
  .gallery-grid figure:hover img,
  .strip-grid figure:hover img,
  .video-facade:hover img { transform: none; opacity: 1; }
  .video-facade:hover .video-play { transform: translate(-50%, -50%); }
}
.btn {
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease,
              color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(.972); }
.card, .post-card { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.card:active, .post-card:active { transform: scale(.99); }
.chip, .social a, .promo-close {
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) ease,
              border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.chip:active, .social a:active, .promo-close:active { transform: scale(.94); }
.nav-toggle { transition: transform var(--dur-1) var(--ease-out); border-radius: 8px; }
.nav-toggle:active { transform: scale(.9); }
.nav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 0; }
.theme-embark .nav-toggle:focus-visible { outline-color: var(--em-orange-soft); }

/* Button sheen: a slow highlight sweep, mouse only. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .26) 50%, transparent 68%);
  transform: translateX(-130%);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: translateX(130%); transition: transform .65s var(--ease-out); }
}

/* ------------------------------------------- 22.4 header on scroll */
.site-header {
  /* No `will-change` here: it would make the header a containing block, and
     the fixed mobile nav panel inside it would then size to the header
     instead of the viewport. Same reason `.header-hidden` excludes
     `.nav-open` — a transformed header must never hold an open panel. */
  transition: transform .34s var(--ease-out), box-shadow var(--dur-2) ease;
}
.header-inner { min-height: var(--header-h); transition: min-height var(--dur-2) var(--ease-out); }
.brand-logo, .brand-logo-embark { transition: height var(--dur-2) var(--ease-out); }
.header-scrolled .site-header { box-shadow: 0 8px 28px rgba(0, 0, 0, .3); }
.header-scrolled .header-inner { min-height: calc(var(--header-h) - 8px); }
/* The nav panel is inset by the full bar height, so the bar must not be
   condensed underneath it — that opened an 8px strip of page at the top. */
.nav-open .header-inner { min-height: var(--header-h); }
/* Reading progress, drawn along the bottom edge of the bar. */
.site-header::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  transform: scaleX(var(--scroll-progress, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  pointer-events: none;
}
.theme-embark .site-header::after {
  background: linear-gradient(90deg, var(--em-orange), var(--em-orange-soft));
}
/* Phones: hand the bar back while reading down, return it on the way up. */
@media (max-width: 960px) {
  body.header-hidden:not(.nav-open) .site-header { transform: translateY(-101%); }
}

/* --------------------------------------- 22.5 mobile nav panel */
@media (max-width: 960px) {
  .main-nav {
    inset: var(--header-h) 0 0 0;
    background: linear-gradient(170deg, var(--surface-dark) 0%, var(--surface-darker) 100%);
    padding: 14px max(22px, var(--safe-r)) calc(48px + var(--safe-b)) max(22px, var(--safe-l));
    overscroll-behavior: contain;
    /* Hidden rather than merely off-screen: an off-screen panel keeps its
       links in the tab order, so Tab used to walk focus into nowhere. */
    visibility: hidden;
    transition: transform .42s var(--ease-out-expo), visibility 0s linear .42s;
  }
  .theme-embark .main-nav { background: linear-gradient(170deg, var(--em-dark) 0%, var(--em-dark-2) 100%); }
  .nav-open .main-nav {
    transform: none; visibility: visible;
    transition: transform .42s var(--ease-out-expo), visibility 0s;
  }
  .main-nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .09); }
  .main-nav > ul > li:last-child { border-bottom: 0; }
  .main-nav a { font-size: 1.12rem; font-weight: 700; padding: 16px 4px; letter-spacing: -.01em; }
  .has-sub .sub { padding: 0 0 10px 20px; }
  .has-sub .sub a { font-size: .98rem; padding: 12px 4px; }

  /* Links slide in behind the panel rather than arriving with it. */
  .main-nav > ul > li, .nav-cta {
    opacity: 0; transform: translateX(28px);
    transition: opacity var(--dur-2) var(--ease-out), transform .45s var(--ease-out-expo);
  }
  .nav-open .main-nav > ul > li, .nav-open .nav-cta { opacity: 1; transform: none; }
  .nav-open .main-nav > ul > li:nth-child(1) { transition-delay: .09s; }
  .nav-open .main-nav > ul > li:nth-child(2) { transition-delay: .14s; }
  .nav-open .main-nav > ul > li:nth-child(3) { transition-delay: .19s; }
  .nav-open .main-nav > ul > li:nth-child(4) { transition-delay: .24s; }
  .nav-open .main-nav > ul > li:nth-child(5) { transition-delay: .29s; }
  .nav-open .main-nav > ul > li:nth-child(6) { transition-delay: .34s; }
  .nav-open .main-nav > ul > li:nth-child(7) { transition-delay: .39s; }
  .nav-open .nav-cta { transition-delay: .44s; }
}
/* The apply CTA lives in the bar on desktop and inside the panel on phones,
   so the primary action is never more than one tap away. */
.nav-cta { display: none; }
@media (max-width: 960px) {
  .nav-cta { display: block; margin-top: 30px; }
  .nav-cta .btn { display: block; width: 100%; text-align: center; padding: 17px 20px; font-size: .84rem; }
  .nav-cta-note {
    display: block; margin: 14px 0 0; text-align: center;
    font-size: .82rem; color: rgba(255, 255, 255, .6);
  }
  .nav-cta-note a { color: rgba(255, 255, 255, .84); }
}

/* ------------------------------------------------ 22.6 hero sizing */
/* `svh` is the small viewport height — the one that does not change when the
   mobile URL bar hides, so the hero cannot jump mid-scroll. */
.hero { min-height: min(88svh, 760px); }
.hero-compact { min-height: min(74svh, 660px); }
@media (max-width: 960px) {
  .hero { min-height: min(76svh, 680px); }
  .hero-compact { min-height: min(70svh, 600px); }
}
@media (max-width: 640px) {
  .hero, .hero-compact { min-height: min(84svh, 640px); }
  /* padding-block, not the shorthand — .hero-inner is a .container and the
     shorthand would wipe the gutter set in 22.2. */
  .hero-inner { padding-block: 92px 48px; }
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero-rule { margin-top: 34px; }
}
@media (max-width: 380px) { .hero, .hero-compact { min-height: min(88svh, 600px); } }

/* ------------------------------------- 22.7 floating action stack */
/* Two fixed buttons on a 360px screen have to behave as one group: arrive
   together, stack rather than overlap, clear the home indicator, and get out
   of the way once the footer — which repeats every link they offer — is on
   screen. `.js-float` is set by site.js, so with no script they stay put and
   visible exactly as before. */
/* A flat distance, not a percentage: these buttons sit 16–78px above the
   bottom edge, so `translateY(150%)` of a 46px badge only moved it 69px and
   left it half on screen. 180px clears the tallest of them plus the largest
   offset plus the home indicator. */
:root { --float-hide: 180px; }
.spark-top, .sticky-apply {
  transition: transform .42s var(--ease-out-expo), opacity var(--dur-2) ease,
              bottom var(--dur-2) var(--ease-out);
}
.js-float .sticky-apply { opacity: 0; transform: translateY(var(--float-hide)); }
.js-float.show-apply .sticky-apply { opacity: 1; transform: none; }
/* Over the footer the pill goes: the footer repeats every link it offers and
   the newsletter field sits exactly where it parks. Back-to-top stays — it is
   most wanted at the bottom of a page — and drops into the vacated slot. */
.js-float.near-footer .sticky-apply { opacity: 0; transform: translateY(var(--float-hide)); pointer-events: none; }
.js-float.nav-open .sticky-apply,
.js-float.nav-open .spark-top { opacity: 0; pointer-events: none; }
.js-float.nav-open .spark-top { transform: translateX(100%); }
.page-apply .sticky-apply { display: none; }   /* the form is already here */

@media (max-width: 960px) {
  .sticky-apply {
    right: max(16px, var(--safe-r));
    bottom: calc(16px + var(--safe-b));
    padding: 15px 22px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  }
  /* Off the mid-right edge, where it sat under a scrolling thumb, and
     stacked above the apply pill instead. */
  .spark-top {
    top: auto; bottom: calc(78px + var(--safe-b));
    right: max(16px, var(--safe-r));
    width: 46px; height: 46px; border-radius: 50%;
    transform: translateY(var(--float-hide));
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  }
  .spark-top.show { transform: none; }
  .js-float.nav-open .spark-top { transform: translateY(var(--float-hide)); }
  .page-apply .spark-top,
  .js-float.near-footer .spark-top { bottom: calc(16px + var(--safe-b)); }
}

/* ------------------------------------------ 22.8 the reveal system */
.reveal {
  opacity: 0;
  transform: translate3d(var(--rv-x, 0), var(--rv-y, 26px), 0) scale(var(--rv-s, 1));
  filter: blur(var(--rv-blur, 0px));
  transition:
    opacity var(--dur-3) var(--ease-out) var(--rv-delay, 0ms),
    transform var(--dur-4) var(--ease-out-expo) var(--rv-delay, 0ms),
    filter var(--dur-3) var(--ease-out) var(--rv-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
[data-reveal="left"]  { --rv-x: -36px; --rv-y: 0; }
[data-reveal="right"] { --rv-x: 36px;  --rv-y: 0; }
[data-reveal="fade"]  { --rv-y: 0; }
[data-reveal="scale"] { --rv-y: 14px; --rv-s: .955; }
[data-reveal="blur"]  { --rv-y: 18px; --rv-blur: 7px; }

/* Container-level stagger, for lists and grids whose children carry no
   .reveal of their own. site.js tags these — and skips any container whose
   children are already revealing, so nothing animates twice. */
.stagger > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out-expo);
}
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(1)  { transition-delay: .04s; }
.stagger.is-visible > *:nth-child(2)  { transition-delay: .09s; }
.stagger.is-visible > *:nth-child(3)  { transition-delay: .14s; }
.stagger.is-visible > *:nth-child(4)  { transition-delay: .19s; }
.stagger.is-visible > *:nth-child(5)  { transition-delay: .24s; }
.stagger.is-visible > *:nth-child(6)  { transition-delay: .29s; }
.stagger.is-visible > *:nth-child(7)  { transition-delay: .33s; }
.stagger.is-visible > *:nth-child(8)  { transition-delay: .37s; }
.stagger.is-visible > *:nth-child(9)  { transition-delay: .41s; }
.stagger.is-visible > *:nth-child(10) { transition-delay: .44s; }
.stagger.is-visible > *:nth-child(n+11) { transition-delay: .47s; }

/* --------------------------------- 22.9 per-component entrances */

/* Page head: the staggered rise the hero already uses, plus a slow light
   drift so a flat colour band is not completely inert. */
.page-head { position: relative; overflow: hidden; }
.page-head > .container { position: relative; z-index: 1; }
.page-head::before {
  content: ""; position: absolute; inset: -45% -15%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .11), transparent 72%);
  animation: ambient-drift 22s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  from { transform: translate3d(-9%, -7%, 0) scale(1); }
  to   { transform: translate3d(9%, 7%, 0) scale(1.18); }
}
.page-head > .container > * { animation: rise .75s var(--ease-out-expo) both; }
.page-head > .container > *:nth-child(1) { animation-delay: .06s; }
.page-head > .container > *:nth-child(2) { animation-delay: .16s; }
.page-head > .container > *:nth-child(3) { animation-delay: .26s; }
.page-head > .container > *:nth-child(4) { animation-delay: .36s; }

/* Impact numbers: the rule above them draws in, then the figures rise. */
.impact-grid { position: relative; border-top-color: transparent; }
.impact-grid::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: rgba(255, 255, 255, .28);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-out-expo);
}
.impact-grid.is-visible::before { transform: scaleX(1); }

/* Framed imagery: a brand-coloured curtain lifts off the photo. */
.media-frame, .article-cover { position: relative; }
.media-frame::after, .article-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--secondary); transform-origin: bottom;
  transition: transform .85s var(--ease-out-expo) .12s;
}
.theme-embark .media-frame::after, .theme-embark .article-cover::after { background: var(--em-orange); }
.media-frame.is-visible::after, .article-cover.is-visible::after { transform: scaleY(0); }

/* Cohort strands: each bar wipes in from the left, so what animates is the
   thing the chart is actually saying — how long an activity runs.

   clip-path rather than scaleX: scaling the bar would squash the date label
   inside it. The row already carries .reveal (see cohort_schedule.html) and
   inherits the --rv-delay site.js stamps on it, so the bars draw in the same
   sequence their rows arrive, just behind them.

   Above 860px only. Below that the theme drops the bar to plain right-aligned
   text with no background, and there is nothing left to wipe.

   (This replaced a rail-draw on .schedule — the v21 month-column timeline the
   strands superseded. That markup is gone; the v21 block above it is now dead
   too and can go whenever someone is in here.) */
@media (min-width: 861px) {
  .strand-row.reveal .strand-bar {
    clip-path: inset(0 100% 0 0 round 10px);
    transition: clip-path .8s var(--ease-out-expo) calc(var(--rv-delay, 0ms) + 140ms);
  }
  .strand-row.reveal.is-visible .strand-bar { clip-path: inset(0 0 0 0 round 10px); }
}

/* FAQ: the answer slides instead of appearing. Chromium and Safari
   understand ::details-content; anywhere else the panel snaps open as it
   always has. */
.faq details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq summary { min-height: 48px; transition: color var(--dur-1) ease; }
.faq summary::after { transition: transform var(--dur-2) var(--ease-spring); }

/* Flash messages arrive rather than appear. */
.flash { animation: flash-in .45s var(--ease-out-expo) both; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.flash-stack { top: calc(var(--header-h) + 12px); }
@media (max-width: 960px) { .flash-stack { top: calc(var(--header-h) + 8px); } }

/* ------------------------------- 22.10 scroll-driven enhancements */
/* Runs off the main thread where supported, and is simply absent elsewhere.
   Desktop only: on a phone the extra image scale costs more than it adds. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
    .media-frame img, .article-cover img, .post-card .cover img {
      animation: media-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes media-parallax {
      from { transform: scale(1.1) translateY(-2.4%); }
      to   { transform: scale(1.1) translateY(2.4%); }
    }
    .post-card .cover { overflow: hidden; }
    /* Hero copy drifts away as the section leaves, so the fold has depth. */
    .hero-inner {
      animation: hero-exit linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
    @keyframes hero-exit { to { opacity: .12; transform: translateY(-44px); } }
  }
}

/* Cross-document page transitions. Chromium crossfades between pages; every
   other browser navigates exactly as it does today. */
@view-transition { navigation: auto; }
/* A crossfade and nothing more: the snapshot is the whole page, so anything
   that moves it exposes the canvas at one edge. */
::view-transition-old(root) { animation: vt-fade-out .18s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-fade-in .3s var(--ease-out) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* -------------------------------------- 22.11 mobile tap targets */
.social a { width: 44px; height: 44px; }
/* inline-flex for the 40px floor; the gap replaces the trailing space in
   `content: "• "`, which a flex container would trim away. */
.chip { min-height: 40px; display: inline-flex; align-items: center; gap: .3em; }
@media (max-width: 960px) {
  /* 9px of block padding on a 27px line box clears 44. Measured, not guessed —
     5px left every footer link at 37. */
  .footer-col a, .footer-bottom a, .footer-subbrand a { display: inline-block; padding-block: 9px; }
  .footer-col ul { gap: 0; }
  .curriculum-list li, .ticklist li { padding-block: 15px; }
  /* The lockup is a link, and the mark alone is 28–38px tall. */
  .brand { min-height: 44px; }
}

/* ---------------------------------------- 22.12 filter chip rail */
/* Category filters wrap to four rows on a phone and push the first post under
   the fold. One swipeable row instead, running edge to edge. */
.chip-filter { text-decoration: none; }
.chip-filter.is-active { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.on-dark .chip-filter:not(.is-active) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.on-dark .chip-filter:not(.is-active)::before { color: rgba(255, 255, 255, .7); }
@media (max-width: 640px) {
  .chip-rail {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * max(18px, var(--safe-l))) calc(-1 * max(18px, var(--safe-r)));
    padding-inline: max(18px, var(--safe-l)) max(18px, var(--safe-r));
    padding-bottom: 4px;
  }
  .chip-rail::-webkit-scrollbar { display: none; }
  .chip-rail > .chip { flex: 0 0 auto; scroll-snap-align: start; }
}

/* --------------------------------------------- 22.13 footer, phones */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-brand, .footer-news { grid-column: 1 / -1; }
  .site-footer { padding-bottom: var(--safe-b); }
}
@media (max-width: 640px) {
  .footer-grid { gap: 30px 18px; }
  .footer-brand p { max-width: none; }
  .footer-col h3 { margin-bottom: 12px; font-size: .8rem; }
}

/* ------------------------------------------- 22.14 forms on phones */
@media (max-width: 640px) {
  /* 16px is the threshold below which iOS zooms the page on focus. */
  .form-input, .form-textarea, select.form-input { font-size: 16px; }
  .form-textarea { min-height: 110px; }
  /* Bare numbers are ambiguous three steps in — name the one you are on. */
  .step-rail-item.is-current .step-rail-label {
    display: block; font-size: .68rem; letter-spacing: .02em;
  }
  /* Back/Next follow you down a long section instead of living at the end.
     Side by side, not stacked: v16 stacks them column-reverse, which is right
     at the foot of a page but costs ~140px of a sticky bar — a sixth of the
     screen, permanently. Back takes only the width of its label. */
  .form-steps .form-actions {
    position: sticky; bottom: 0; z-index: 5;
    flex-direction: row; flex-wrap: nowrap; gap: 10px;
    margin-inline: -18px;      /* matches .form-card's 18px side padding */
    padding: 16px max(18px, var(--safe-l)) calc(14px + var(--safe-b)) max(18px, var(--safe-r));
    background: linear-gradient(to top, var(--paper) 74%, rgba(255, 255, 255, 0));
    border-top: 1px solid var(--line);
  }
  .form-steps .form-actions .btn { width: auto; flex: 1 1 auto; padding: 15px 14px; }
  .form-steps .form-actions [data-step-prev] { flex: 0 1 auto; padding-inline: 16px; }
  .form-actions .btn { padding: 15px 20px; }
  /* The badge would sit on top of that bar, over the Next button. The form is
     the page; its own navigation wins. */
  .page-apply .spark-top { display: none; }
}
.step-rail-num {
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) ease,
              transform var(--dur-2) var(--ease-spring);
}
.step-rail-item.is-current .step-rail-num { transform: scale(1.12); }
/* Sections slide in the direction you are travelling. form-steps.js sets the
   class per move; without the script every fieldset is visible at once and
   nothing animates, which is the correct no-JS behaviour. */
.form-step.is-entering { animation: step-in .38s var(--ease-out-expo) both; }
.form-step.is-entering-back { animation: step-in-back .38s var(--ease-out-expo) both; }
@keyframes step-in      { from { opacity: 0; transform: translateX(18px); }  to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.form-input { transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease, background var(--dur-1) ease; }

/* ------------------------------------ 22.15 remaining mobile trims */
@media (max-width: 640px) {
  .statement { padding-left: 16px; }
  .section-head { max-width: 100%; }
  .team-photo { padding: 6px; }
  .video-play { width: 56px; height: 56px; }
  .video-play::after { border-width: 9px 0 9px 15px; }
  .alumnus-photo { width: 54px; height: 54px; }
  .alumni-list { gap: 44px; }
  .article p { font-size: 1.02rem; }
  .article h2 { font-size: 1.28rem; }
  .promo-dialog { width: min(420px, 100%); }
  /* Key dates stack rather than sitting in a sparse two-up row. */
  .key-dates { gap: 14px 28px; margin-bottom: 24px; padding-bottom: 18px; }
  /* "✳ AN IADEBAYO FOUNDATION PROGRAMME" wrapped to two lines inside a pill,
     which reads as a mistake. Tightened to fit a 360px screen on one line. */
  .subbrand-note { font-size: .68rem; letter-spacing: .05em; padding: 7px 14px; }
  /* A lone CTA fills the column; :only-child keeps the two-button pagination
     row on the blog index side by side. */
  .cta-band .btn, .center > .btn:only-child { width: 100%; max-width: 340px; }
}
@media (max-width: 380px) {
  .btn { padding: 12px 16px; font-size: .74rem; letter-spacing: .06em; }
  .card { padding: 22px 18px; }
  .impact-num { font-size: 1.85rem; }
  .chip { font-size: .8rem; padding: 8px 12px; }
}