/* ============================================================
   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; }
.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-top: 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. */
@media (max-width: 640px) {
  .hero-veil-2 {
    background: linear-gradient(to top, rgba(55,12,15,.84) 0%,
                                        rgba(55,12,15,.46) 62%,
                                        rgba(55,12,15,.50) 100%);
  }
  .theme-embark .hero-veil-2 {
    background: linear-gradient(to top, rgba(27,23,24,.84) 0%,
                                        rgba(27,23,24,.46) 62%,
                                        rgba(27,23,24,.50) 100%);
  }
}

/* ============================================================
   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; }
}