/*
 * Typography — MSEED Education
 *
 * @font-face (self-hosted Manrope, no Google CDN) + type scale.
 * All values via var(--*). No raw hex / px / rem — see _tokens.css.
 *
 * NOTE: Font-weight mapping was derived from file size order (15→43 KB =
 * 400→800). Verify in browser QA that each weight renders correctly;
 * re-map if a weight looks wrong (e.g., body looks bold, headings look light).
 */

/* ── Self-hosted Manrope ──────────────────────────────────────────────── */

@font-face {
  font-family: 'Manrope';
  src: url('../../fonts/manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope';
  src: url('../../fonts/manrope-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope';
  src: url('../../fonts/manrope-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope';
  src: url('../../fonts/manrope-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope';
  src: url('../../fonts/manrope-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}

/* ── Self-hosted Circular Spotify (spec heading font — cert hero) ─────── */

@font-face {
  font-family: 'Circular Spotify';
  src: url('../../fonts/circular-spotify-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

/* ── Type scale ───────────────────────────────────────────────────────── */

h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h4,
h5,
h6 {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
}

p {
  line-height: var(--lh-base);
}

small {
  font-size: var(--fs-small);
}

/* ── Utility classes ──────────────────────────────────────────────────── */

.eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: var(--lh-base);
}

.btn-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/*
 * Layout — MSEED Education
 *
 * Container, 12-col grid, auto-fit card grid, section rhythm.
 * All values via var(--*). No raw hex / px / rem — see _tokens.css.
 *
 * Breakpoints used in @media (raw px — custom props not allowed in queries):
 *   mobile  ≤375px  /  tablet 768px  /  desktop 1440px
 */

/* ── Container ────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

/* ── 12-column grid ───────────────────────────────────────────────────── */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

@media (max-width: 768px) {
  .grid-12 {
    grid-template-columns: 1fr;
  }
}

/* ── Auto-fit card grid ───────────────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}

/* ── Section rhythm ───────────────────────────────────────────────────── */

.section {
  padding-block: var(--sp-7); /* 48px mobile */
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--sp-9); /* 96px desktop */
  }
}

/* ── Flex utilities ───────────────────────────────────────────────────── */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Fallback page sections ───────────────────────────────────────────── */

/* page.php */
.page-content {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

.page-content__body {
  max-width: 44rem;
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
}

@media (max-width: 768px) {
  .page-content {
    padding-block: var(--sp-7);
  }
}

/* archive.php / archive-press_item.php */
.archive-content,
.press-archive {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

@media (max-width: 768px) {
  .archive-content,
  .press-archive {
    padding-block: var(--sp-7);
  }
}

/* search.php */
.search-header {
  padding-block: var(--sp-7);
  background-color: var(--c-bg-50);
  border-bottom: 1px solid var(--c-line-200);
}

.search-header__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  margin: 0;
}

.search-header__query {
  color: var(--c-blue-500);
}

.search-results {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

.search-results__form {
  margin-top: var(--sp-6);
  max-width: 32rem;
}

@media (max-width: 768px) {
  .search-header {
    padding-block: var(--sp-5);
  }
  .search-results {
    padding-block: var(--sp-7);
  }
}

/* 404.php */
.not-found {
  padding-block: var(--sp-12, 10rem);
  background-color: var(--c-white);
  text-align: center;
}

.not-found__body {
  max-width: 36rem;
  margin-inline: auto;
}

.not-found__eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-blue-500);
  margin: 0 0 var(--sp-3);
}

.not-found__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
}

.not-found__message {
  font-size: var(--fs-body);
  color: var(--c-ink-500);
  margin: 0 0 var(--sp-7);
}

.not-found__home {
  display: inline-flex;
  margin-bottom: var(--sp-8);
}

.not-found__search {
  margin-inline: auto;
  max-width: 28rem;
}

@media (max-width: 768px) {
  .not-found {
    padding-block: var(--sp-9);
  }
}

/* ── Screen-reader utility ────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;  /* structural — must be 1px to clip content */
  height: 1px; /* structural — must be 1px to clip content */
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/*
 * Eyebrow atom — MSEED Education
 *
 * BEM root: .eyebrow
 * Variants: .eyebrow--accent (orange), .eyebrow--inverse (white on dark bg)
 * All values via var(--*).
 */

.eyebrow {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  line-height: var(--lh-tight);
}

.eyebrow--accent {
  color: var(--c-accent-500);
}

.eyebrow--inverse {
  color: rgba(255, 255, 255, 0.75);
}
/*
 * Button atom — MSEED Education
 *
 * BEM root: .btn
 * Variants: .btn--primary (orange pill fill), .btn--secondary (ghost navy), .btn--lg
 * All values via var(--*). No raw hex / px / rem.
 */

/* ── Base ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  min-height: 2.75rem; /* 44px touch target */
  transition:
    background-color 150ms var(--ease),
    color 150ms var(--ease),
    border-color 150ms var(--ease),
    transform 100ms var(--ease);
}

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

/* ── Primary — orange fill ──────────────────────────────────────────── */

.btn--primary {
  color: var(--c-white);
  background-color: var(--c-accent-500);
  border-color: var(--c-accent-500);
}

.btn--primary:hover {
  background-color: var(--c-navy-700);
  border-color: var(--c-navy-700);
  color: var(--c-white);
}

.btn--primary:focus-visible {
  outline: var(--outline-width) solid var(--c-accent-500);
  outline-offset: var(--outline-offset);
  background-color: var(--c-navy-700);
  border-color: var(--c-navy-700);
}

.btn--primary:active {
  transform: scale(0.97);
}

/* ── Secondary — ghost navy ─────────────────────────────────────────── */

.btn--secondary {
  color: var(--c-navy-900);
  background-color: transparent;
  border-color: var(--c-navy-900);
}

.btn--secondary:hover {
  background-color: var(--c-navy-900);
  color: var(--c-white);
}

.btn--secondary:focus-visible {
  outline: var(--outline-width) solid var(--c-navy-900);
  outline-offset: var(--outline-offset);
  background-color: var(--c-navy-900);
  color: var(--c-white);
}

.btn--secondary:active {
  transform: scale(0.97);
}

/* Secondary inverse — for dark backgrounds */
.btn--secondary.btn--inverse {
  color: var(--c-white);
  border-color: var(--c-white);
}

.btn--secondary.btn--inverse:hover,
.btn--secondary.btn--inverse:focus-visible {
  background-color: var(--c-white);
  color: var(--c-navy-900);
}

/* ── Large modifier ─────────────────────────────────────────────────── */

.btn--lg {
  font-size: var(--fs-body);
  padding: var(--sp-3) var(--sp-6);
  min-height: 3.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:active,
  .btn--secondary:active {
    transform: none;
  }
}
/*
 * Site Header — MSEED Education
 *
 * Sticky nav: white → shadow on scroll. Mobile: hamburger overlay.
 * WAI-ARIA disclosure dropdowns. All values via var(--*).
 *
 * BEM: .site-header / .nav__* — button styles from _button.css (.btn--primary)
 * JS classes: .site-header--scrolled, .is-open (mobile open)
 */

/* ══════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
═══════════════════════════════════════════════════════════════════════ */

.announcement-bar {
  background-color: var(--c-navy-900);
  color: var(--c-white);
  padding-block: var(--sp-2);
  text-align: center;
}

.announcement-bar__text {
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: var(--lh-base);
}

.announcement-bar__highlight {
  color: var(--c-accent-500);
}

/* ══════════════════════════════════════════════════════════════════════
   SITE HEADER SHELL
═══════════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--c-white);
  border-bottom: 1px solid var(--c-line-200);
  transition: box-shadow 200ms var(--ease);
}

.admin-bar .site-header {
  top: var(--wp-admin-bar);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.site-header--scrolled {
  box-shadow: var(--sh-card);
  border-bottom-color: transparent;
}

/* ── Inner flex row ─────────────────────────────────────────────────── */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4.5rem; /* 72px — visual target; adjust in QA */
}

/* ── Logo ───────────────────────────────────────────────────────────── */

.site-header__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo img {
  width: auto;
  height: 3.25rem; /* ~52px; matches 175×61 proportions at small scale */
  max-width: 175px;
}

.site-header__logo:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
}

/* ══════════════════════════════════════════════════════════════════════
   PRIMARY NAV (DESKTOP)
═══════════════════════════════════════════════════════════════════════ */

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* ── Top-level list ─────────────────────────────────────────────────── */

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Top-level items ────────────────────────────────────────────────── */

.nav__item {
  position: relative;
}

.nav__item--has-dropdown {
  display: flex;
  align-items: center;
}

/* ── Top-level links (no children) ─────────────────────────────────── */

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--c-navy-900);
  background-color: var(--c-bg-50);
}

.nav__link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

.nav__item--active > .nav__link {
  color: var(--c-navy-900);
  font-weight: var(--fw-bold);
}

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

/* ── Dropdown toggle buttons ────────────────────────────────────────── */

.nav__toggle,
.nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  font-family: var(--font-body);
  color: var(--c-ink-700);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.nav__toggle:hover,
.nav__toggle:focus-visible,
.nav__sub-toggle:hover,
.nav__sub-toggle:focus-visible {
  color: var(--c-navy-900);
  background-color: var(--c-bg-50);
}

.nav__toggle:focus-visible,
.nav__sub-toggle:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

.nav__item--active > .nav__toggle {
  color: var(--c-navy-900);
  font-weight: var(--fw-bold);
}

@media (prefers-reduced-motion: reduce) {
  .nav__toggle,
  .nav__sub-toggle {
    transition: none;
  }
}

/* ── Chevron rotation on open ───────────────────────────────────────── */

.nav__chevron {
  flex-shrink: 0;
  transition: transform 200ms var(--ease);
}

.nav__toggle[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

/* Nested has-sub items open a sideways flyout — static right arrow, no rotation */
.nav__chevron--static {
  transition: none;
}

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

/* ── Dropdown panels ────────────────────────────────────────────────── */

.nav__dropdown {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 14rem;
  padding: var(--sp-2) 0;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-md);
  box-shadow: var(--sh-pop);
  list-style: none;
  margin: 0;
}

/* Sub-dropdown — nested, offset right */
.nav__dropdown--sub {
  top: 0;
  left: 100%;
  margin-left: var(--sp-1);
}

/* Flip to the left when the right-offset flyout would overflow the viewport (set by JS) */
.nav__dropdown--sub.nav__dropdown--sub-flip {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: var(--sp-1);
}

/* Show/hide via [hidden] attribute — JS removes/adds the attribute */
.nav__dropdown[hidden] {
  display: none;
}

/* ── Dropdown items ─────────────────────────────────────────────────── */

.nav__dropdown-item {
  position: relative;
}

.nav__dropdown-item--has-sub {
  display: flex;
  align-items: center;
}

.nav__dropdown-item--has-sub > .nav__dropdown-link {
  flex: 1;
}

.nav__dropdown-link {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-ink-700);
  white-space: nowrap;
  text-decoration: none;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.nav__dropdown-link:hover,
.nav__dropdown-link:focus-visible {
  color: var(--c-navy-900);
  background-color: var(--c-bg-50);
}

.nav__dropdown-link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: calc(-1 * var(--outline-offset));
}

.nav__dropdown-item--active > .nav__dropdown-link {
  color: var(--c-navy-900);
  font-weight: var(--fw-bold);
  background-color: var(--c-bg-50);
}

.nav__dropdown-item--has-sub > .nav__sub-toggle {
  flex-shrink: 0;
  border-radius: 0;
  padding: var(--sp-2) var(--sp-4);
}

@media (prefers-reduced-motion: reduce) {
  .nav__dropdown-link {
    transition: none;
  }
}

/* ── Sub-dropdown items ─────────────────────────────────────────────── */

.nav__sub-item {
  list-style: none;
}

.nav__sub-link {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-ink-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.nav__sub-link:hover,
.nav__sub-link:focus-visible {
  color: var(--c-navy-900);
  background-color: var(--c-bg-50);
}

.nav__sub-link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: calc(-1 * var(--outline-offset));
}

.nav__sub-item--active > .nav__sub-link {
  color: var(--c-navy-900);
  font-weight: var(--fw-bold);
  background-color: var(--c-bg-50);
}

@media (prefers-reduced-motion: reduce) {
  .nav__sub-link {
    transition: none;
  }
}

/* ── Actions group (phone + brochure) — desktop+tablet visible ─────── */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* ── Brochure CTA ───────────────────────────────────────────────────── */

.nav__brochure {
  flex-shrink: 0;
}

/* ── Phone icon link ────────────────────────────────────────────────── */

.site-header__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity 150ms var(--ease);
}

.site-header__phone:hover,
.site-header__phone:focus-visible {
  opacity: 0.8;
}

.site-header__phone:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__phone {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   HAMBURGER BUTTON (hidden desktop >1024px, visible tablet+mobile)
═══════════════════════════════════════════════════════════════════════ */

.site-header__hamburger {
  display: none; /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;  /* 44px — WCAG touch-target minimum */
  height: 2.75rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.site-header__hamburger:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

.site-header__bar {
  display: block;
  width: 1.5rem; /* 24px — matches reference width */
  height: 2px;
  background-color: var(--c-ink-700); /* #475467 equivalent */
  border-radius: var(--r-pill);
  transition: transform 250ms var(--ease), opacity 200ms var(--ease);
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__bar {
    transition: none;
  }
}

/* Hamburger → X on open */
.is-open .site-header__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.is-open .site-header__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.is-open .site-header__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════════════
   TABLET + MOBILE NAV OVERLAY (≤1024px)
   Tablet + Mobile: logo | hamburger (actions hidden ≤1200px — see below)
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .site-header__hamburger {
    display: inline-flex;
  }

  /* Nav collapses to right-side slide-in panel */
  .site-header__nav {
    position: fixed;
    /* top set dynamically by JS (header.getBoundingClientRect().bottom) */
    top: 4.5rem; /* fallback */
    right: 0;
    bottom: 0;
    left: auto;
    z-index: var(--z-overlay);
    width: min(20rem, 100vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-6) var(--sp-5) max(var(--sp-6), env(safe-area-inset-bottom));
    background-color: var(--c-navy-900);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 300ms var(--ease);
    visibility: hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__nav {
      transition: none;
    }
  }

  .is-open .site-header__nav {
    transform: translateX(0);
    visibility: visible;
  }

  /* Overlay backdrop */
  .is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);
    background-color: rgba(7, 36, 63, 0.6);
  }

  /* Nav list — vertical stack in panel */
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav__item--has-dropdown {
    position: static;
    flex-wrap: wrap;
  }

  .nav__link {
    flex: 1;
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-white);
    font-size: var(--fs-body);
    border-radius: 0;
  }

  .nav__item--has-dropdown > .nav__toggle {
    flex-shrink: 0;
    padding: var(--sp-3) var(--sp-4);
    color: var(--c-white);
    border-radius: 0;
  }

  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__toggle:hover,
  .nav__toggle:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--c-white);
  }

  .nav__item--active > .nav__link {
    color: var(--c-blue-100);
    font-weight: var(--fw-bold);
    background: #17304a;
  }

  .nav__dropdown-item--active > .nav__dropdown-link,
  .nav__sub-item--active > .nav__sub-link {
    color: var(--c-blue-100);
    font-weight: var(--fw-bold);
    background: #17304a;
  }

  .nav__link:focus-visible,
  .nav__toggle:focus-visible {
    outline-color: var(--c-accent-500);
  }

  .nav__dropdown {
    position: static;
    width: 100%;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }

  /* Depth-1 has-sub <li> is a flex row (link + arrow); without wrap the
     nested <ul> gets squeezed onto the same row as a shrunk flex item and
     overflows the viewport. Wrap + full-basis pushes it onto its own row. */
  .nav__dropdown-item--has-sub {
    flex-wrap: wrap;
  }

  .nav__dropdown--sub {
    left: 0;
    margin-left: 0;
    flex-basis: 100%;
  }

  .nav__dropdown-link,
  .nav__sub-toggle,
  .nav__sub-link {
    padding: var(--sp-2) var(--sp-6);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-small);
    border-radius: 0;
    white-space: normal; /* desktop-only fit-to-content sizing; mobile panel is full-width and must wrap */
  }

  /* 44px touch-target minimum for every interactive row in the panel */
  .nav__toggle,
  .nav__dropdown-link,
  .nav__sub-toggle,
  .nav__sub-link {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }

  .nav__dropdown-link:hover,
  .nav__dropdown-link:focus-visible,
  .nav__sub-toggle:hover,
  .nav__sub-toggle:focus-visible,
  .nav__sub-link:hover,
  .nav__sub-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--c-white);
  }

  .nav__dropdown-item--has-sub > .nav__sub-toggle {
    flex-shrink: 0;
    padding: var(--sp-2) var(--sp-6);
    border-radius: 0;
  }

  .nav__sub-link {
    padding-left: var(--sp-7);
  }
}

/* ── Hide actions from top bar (≤1200px) — from where the hamburger takes
      over (1024px) through to 1200px, plus mobile. ─────────────────────── */

@media (max-width: 1200px) {
  .site-header__actions {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SKIP LINK
═══════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: calc(var(--z-sticky) + 1);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-navy-900);
  color: var(--c-white);
  border-radius: var(--r-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
    transform: none;
  }

  /* On reduce-motion: keep skip-link off-screen via sr-only approach */
  .skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
/*
 * Site Footer — MSEED Education
 *
 * Reference: outer section has soft blue gradient bg (fe6f9c6bd3aedcd8.jpg).
 * Footer content sits in a white rounded card (border-radius top only).
 * Dark text throughout. Phoenix is blue (decorative).
 *
 * BEM: .site-footer / .site-footer__*
 */

/* ══════════════════════════════════════════════════════════════════════
   FOOTER SHELL — gradient background
═══════════════════════════════════════════════════════════════════════ */

.site-footer {
  background-color: #e8effc;
  background-image: url('../../img/fe6f9c6bd3aedcd8.jpg');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2% 2% 0 2%;
}

@media (max-width: 768px) {
  .site-footer {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER CARD — white rounded-top panel
═══════════════════════════════════════════════════════════════════════ */

.site-footer__card {
}

.site-footer__card > .container {
  background-color: var(--c-white);
  border-radius: 1.5rem 1.5rem 0 0;
  padding-top: var(--sp-8);
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet — inset footer card */
  .site-footer__card {
    padding: 30px 30px 0 30px;
  }
}

/* ── Main 4-column grid ─────────────────────────────────────────────── */

.site-footer__grid {
  display: grid;
  grid-template-columns: 0.5fr 1.2fr 1fr 1.2fr;
  gap: var(--sp-7) var(--sp-6);
  align-items: start;
  padding-block-end: var(--sp-7);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
}

@media (max-width: 600px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* Column vertical dividers (desktop only) */
@media (min-width: 901px) {
  .site-footer__contact-col,
  .site-footer__nav,
  .site-footer__follow {
    border-left: 1px solid rgba(0, 0, 0, 0.10);
    padding-left: var(--sp-6);
    align-self: stretch;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   COL 1 — PHOENIX
═══════════════════════════════════════════════════════════════════════ */

.site-footer__phoenix-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer__phoenix-col img {
  width: 100%;
  max-width: 7rem;
  height: auto;
}

@media (max-width: 600px) {
  .site-footer__phoenix-col {
    justify-content: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   COL 2 — CONTACT
═══════════════════════════════════════════════════════════════════════ */

.site-footer__contact-col {
  display: flex;
  flex-direction: column;
}

/* ── Contact block ──────────────────────────────────────────────────── */

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--c-ink-500);
  line-height: var(--lh-snug);
}

.site-footer__contact p {
  margin: 0;
  line-height: 18px;
}

.site-footer__contact-link {
  color: var(--c-ink-500);
  text-decoration: none;
  transition: color 150ms var(--ease);
}

.site-footer__contact-link:hover {
  color: var(--c-ink-900);
}

.site-footer__contact-link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__contact-link { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   QUICK LINKS NAV COLUMN
═══════════════════════════════════════════════════════════════════════ */

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.site-footer__heading {
  font-family: "Circular Spotify", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-ink-900);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}

/* wp_nav_menu output */
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-footer__links a {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--c-ink-500);
  text-decoration: none;
  transition: color 150ms var(--ease);
}

.site-footer__links a:hover {
  color: var(--c-ink-900);
}

.site-footer__links a:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
  color: var(--c-ink-900);
}

.site-footer__links .current-menu-item > a {
  color: var(--c-ink-900);
  font-weight: var(--fw-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__links a { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOLLOW US + MAP COLUMN
═══════════════════════════════════════════════════════════════════════ */

.site-footer__follow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── Social icon row ────────────────────────────────────────────────── */

.site-footer__social-icons {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-500);
  text-decoration: none;
  min-height: 2.75rem;
  min-width: 2.75rem;
  transition: color 150ms var(--ease);
}

.site-footer__social-link:hover {
  color: var(--c-ink-900);
}

.site-footer__social-link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
  color: var(--c-ink-900);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__social-link { transition: none; }
}

/* ── Google Maps embed ──────────────────────────────────────────────── */

.site-footer__map {
  border-radius: var(--r-md);
  overflow: hidden;
  flex: 1;
}

.site-footer__map iframe {
  display: block;
  width: 100%;
  min-height: 12rem;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   BOTTOM BAR — copyright only
═══════════════════════════════════════════════════════════════════════ */

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--sp-4);
}

.site-footer__copy {
  font-size: var(--fs-label);
  color: var(--c-ink-500);
  margin: 0;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   ADDRESS DIVIDER (between two address blocks)
═══════════════════════════════════════════════════════════════════════ */

.site-footer__contact-divider {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
═══════════════════════════════════════════════════════════════════════ */

.wab-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  /* #25D366 = WhatsApp brand green — third-party brand constraint */
  background-color: #25D366;
  color: var(--c-white);
  text-decoration: none;
  box-shadow: var(--sh-pop);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.wab-float:hover,
.wab-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

.wab-float:focus-visible {
  outline: var(--outline-width) solid var(--c-white);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  .wab-float { transition: none; }
}
/*
 * Hero organism — MSEED Education
 *
 * BEM: .hero / .hero__media / .hero__scrim / .hero__inner / .hero__title / etc.
 * Variants: .hero--tall  .hero--short  .hero--navy  .hero--image  .hero--light
 * All design values via var(--*). Height tokens defined below as component-level
 * custom properties (structural sizing, not design-system values).
 *
 * Breakpoints in @media use raw px — custom props not allowed in queries.
 */

/* ── Component-level height tokens (structural) ─────────────────────── */

.hero {
  --_hero-min-h: 20rem;   /* default / short ≈ 320px */
}

.hero--tall {
  --_hero-min-h: 35rem;   /* tall ≈ 560px desktop */
}

@media (max-width: 768px) {
  .hero--tall {
    --_hero-min-h: 25rem; /* tall → reduced on tablet/mobile ≈ 400px */
  }
}

@media (max-width: 375px) {
  .hero--tall,
  .hero {
    --_hero-min-h: 20rem; /* all collapse to short on smallest mobile */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO SHELL
═══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--_hero-min-h);
  background-color: var(--c-navy-900);
}

/* ── Navy gradient (default + --navy + --short without image) ────────── */

.hero--navy,
.hero--short,
.hero--tall {
  background-image: linear-gradient(
    150deg,
    var(--c-navy-900) 0%,
    var(--c-navy-700) 100%
  );
}

/* ── Image variant — bg image visible through scrim ─────────────────── */

.hero--image {
  background-image: none; /* image element covers bg */
}

/* ── Light variant — white/light-bg, dark text ───────────────────────── */

.hero--light {
  background-color: var(--c-bg-50);
  background-image: none;
}

.hero--light .hero__title {
  color: var(--c-ink-900);
}

.hero--light .hero__sub {
  color: var(--c-ink-500);
}

.hero--light .hero__scrim {
  display: none;
}

.hero--light .eyebrow,
.hero--light .eyebrow--inverse {
  color: var(--c-accent-500);
}

.hero--light .hero__actions .btn--secondary {
  color: var(--c-navy-900);
  border-color: var(--c-navy-900);
}

.hero--light .hero__actions .btn--secondary:hover,
.hero--light .hero__actions .btn--secondary:focus-visible {
  background-color: var(--c-navy-900);
  color: var(--c-white);
}

/* ── Periwinkle variant — light blue/lavender radial gradient, dark text ── */

.hero--periwinkle {
  background-color: var(--c-white);
  background-image: radial-gradient(
    ellipse at center,
    var(--c-white) 0%,
    var(--c-blue-100) 100%
  );
}

.hero--periwinkle .hero__title {
  font-family: "Circular Spotify", sans-serif;
  font-size: 4.5rem;   /* 72px */
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--c-navy-700);   /* #0F3557 */
  text-align: center;
}

@media (max-width: 768px) {
  .hero--periwinkle .hero__title {
    font-size: 2.5rem;   /* 40px mobile */
  }
}

.hero--periwinkle .hero__sub {
  font-family: var(--font-body);   /* Manrope */
  font-size: 1.25rem;   /* 20px */
  font-weight: var(--fw-medium);
  line-height: 1.2;   /* ~24px at 20px */
  color: var(--c-navy-700);   /* #0F3557 */
  text-align: center;
}

.hero--periwinkle .hero__scrim {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   MEDIA LAYER
═══════════════════════════════════════════════════════════════════════ */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   SCRIM OVERLAY
═══════════════════════════════════════════════════════════════════════ */

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Gradient variants — navy fades in from edges */
.hero--navy .hero__scrim,
.hero--short .hero__scrim,
.hero--tall .hero__scrim {
  /* gradient bg already on shell; scrim adds subtle vignette */
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(7, 36, 63, 0.4) 100%
  );
}

/* Image variant — heavier dark overlay for text legibility */
.hero--image .hero__scrim {
  background: linear-gradient(
    to bottom,
    rgba(7, 36, 63, 0.55) 0%,
    rgba(7, 36, 63, 0.75) 100%
  );
}

/* ══════════════════════════════════════════════════════════════════════
   CONTENT INNER
═══════════════════════════════════════════════════════════════════════ */

.hero .container {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-8);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Center align (default) */
.hero__inner--center {
  align-items: center;
  text-align: center;
}

/* Left align */
.hero__inner--left {
  align-items: flex-start;
  text-align: left;
}

@media (max-width: 768px) {
  /* Always left-align on mobile for readability */
  .hero__inner--center {
    align-items: flex-start;
    text-align: left;
  }

  /* Periwinkle (people/leadership) hero stays centered on mobile */
  .hero--periwinkle .hero__inner--center {
    align-items: center;
    text-align: center;
  }
}

/* ── Title ──────────────────────────────────────────────────────────── */

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin: 0;
}

/* ── Subtitle ───────────────────────────────────────────────────────── */

.hero__sub {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ── Footer row — specs + actions share one space-between row (opt-in) ── */

.hero__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
}

.hero__footer .hero__actions {
  margin-left: auto;
}

@media (max-width: 375px) {
  .hero__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__footer .hero__actions {
    margin-left: 0;
  }
}

/* ── Actions — button row ───────────────────────────────────────────── */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Secondary button in hero context — white ghost */
.hero__actions .btn--secondary {
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.7);
}

.hero__actions .btn--secondary:hover,
.hero__actions .btn--secondary:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--c-white);
  color: var(--c-white);
}

@media (max-width: 375px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Eyebrow in hero context ────────────────────────────────────────── */

.hero .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.hero .eyebrow--inverse {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Breadcrumb in hero context — inverse on navy ───────────────────── */

.hero__breadcrumb {
  order: -1;   /* always first in hero__inner flex flow */
}

.hero__breadcrumb .breadcrumb {
  padding-block: 0;
}

.hero__breadcrumb .breadcrumb__link {
  color: rgba(255, 255, 255, 0.75);
  min-height: 0;   /* tight, decorative path — not a primary touch target */
}

.hero__breadcrumb .breadcrumb__link:hover {
  color: var(--c-white);
}

.hero__breadcrumb .breadcrumb__current,
.hero__breadcrumb .breadcrumb__text {
  color: var(--c-white);
  min-height: 0;
}

.hero__breadcrumb .breadcrumb__sep {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Fact grid — Duration / Eligibility (course + track hero) ────────── */

.hero__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-6);
  margin: 0;
  width: 100%;
  max-width: 32rem;
}

.hero__spec {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.hero__spec-label {
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  margin: 0;
}

.hero__spec-value {
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

@media (max-width: 375px) {
  .hero__specs {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VIDEO VARIANT — poster LCP + lazy YouTube bg + bordered ticker + vertical CTA
   Spec: home.html §hero. Poster (.hero__img) is the eager LCP element; the
   iframe is injected post-idle by hero-video.js (desktop only) behind the scrim.
═══════════════════════════════════════════════════════════════════════ */

.hero--video {
  --_hero-min-h: 71vh;    /* source: fluid, tall (home.html §hero) */
  justify-content: flex-end;   /* ticker pinned to hero bottom */
  background-color: var(--c-navy-900);
  background-image: none;
}

@media (max-width: 768px) {
  .hero--video {
    --_hero-min-h: 75vh;   /* source raises to 75vh ≤767px */
  }
}

/* Lazy-attached YouTube iframe — 16:9 cover fill behind the scrim.
   Viewport-ratio math (177.78vh / 56.25vw) is structural cover geometry,
   not a design-system value. */
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 0;
}

/* Reuse the image-variant scrim gradient for legibility over motion video. */
.hero--video .hero__scrim {
  background: linear-gradient(
    to bottom,
    rgba(7, 36, 63, 0.45) 0%,
    rgba(7, 36, 63, 0.65) 100%
  );
}

.hero__video-inner {
  --_video-inner-max: 80rem;   /* source boxed content-width 1280px */
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--_video-inner-max);
  margin-inline: auto;         /* centre the boxed row */
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-inline: var(--gutter);
}

.hero__ticker {
  flex: 1 1 auto;
  min-width: 0;   /* allow the marquee to clip its overflowing track */
}

/* ── Right-side vertical (rotated) Download Brochure button ──────────── */

.hero__vertical-cta {
  --_cta-fs: 1.375rem;   /* 22px source label (95b0e8c) */
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;   /* source c99ab52: vertical label + arrow side-by-side */
  align-items: center;   /* arrow sits at mid-height of the label */
  gap: var(--sp-5);      /* ~20px source arrow padding-left */
  padding-block: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(255, 255, 255, 0.7);   /* source divider */
  color: var(--c-white);
  text-decoration: none;
  font-weight: var(--fw-regular);
  font-size: var(--_cta-fs);
  letter-spacing: normal;
  text-transform: none;   /* source: "Download Brochure" title case */
}

.hero__vertical-cta-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);   /* read bottom-to-top */
  white-space: nowrap;
}

.hero__vertical-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-circle);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

@media (min-width: 769px) {
  .hero__vertical-cta-icon {
    width: 3.5rem;   /* 56px desktop */
    height: 3.5rem;
  }
}

/* Source 51b32df: arrow-right rotated to diagonal ↗. */
.hero__vertical-cta-icon svg {
  transform: rotate(-45deg);
}

.hero__vertical-cta:hover .hero__vertical-cta-icon,
.hero__vertical-cta:focus-visible .hero__vertical-cta-icon {
  background-color: var(--c-accent-500);
  border-color: var(--c-accent-500);
}

@media (max-width: 768px) {
  .hero__vertical-cta-label {
    display: none;   /* icon-only on small screens to preserve ticker width */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .hero__img {
    transition: none;
  }
}
/*
 * CTA Band organism — MSEED Education
 *
 * White bg section. Left: "Join MSEED now" panel (dark text, orange CTA).
 * Right: two action cards side-by-side (horizontal). Circle-arrow icon bottom-right.
 * Matches reference: light bg, cards horizontal, orange "Apply Now" button.
 */

/* ══════════════════════════════════════════════════════════════════════
   BAND SHELL
═══════════════════════════════════════════════════════════════════════ */

.cta-band {
  padding-block: var(--sp-8);
}

.cta-band .container {
  padding: 0;
}

@media (max-width: 768px) {
  .cta-band {
    padding-block: var(--sp-6);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   INNER LAYOUT — panel left (~1fr), cards right (~2fr horizontal)
═══════════════════════════════════════════════════════════════════════ */

.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-5);
  align-items: stretch;
}

@media (max-width: 900px) {
  .cta-band__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LEFT PROMO PANEL — dark text on white
═══════════════════════════════════════════════════════════════════════ */

.cta-band__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}

.cta-band__panel-heading {
  font-family: "Circular Spotify", Sans-serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-ink-900);
  margin: 0;
  padding: 0;
}

.cta-band__panel-sub {
  font-family: "Manrope", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-ink-500);
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   RIGHT CARDS — horizontal row of two
═══════════════════════════════════════════════════════════════════════ */

.cta-band__cards {
  display: flex;
  flex-direction: row;
  gap: var(--sp-4);
}

@media (max-width: 600px) {
  .cta-band__cards {
    flex-direction: column;
  }
}

/* ── Individual card — full <a> link ────────────────────────────────── */

.cta-band__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 30px;
  border-radius: 2.5rem;
  background-color: #45c0ef;
  text-decoration: none;
  flex: 1;
  transition: opacity 150ms var(--ease);
  min-height: 5rem;
  max-height: 168px;
}

/* Second card: darker blue */
.cta-band__card:nth-child(2) {
  /* #2178BD — reference dark blue, closest to --c-navy-700 */
  background-color: #2178bd;
}

.cta-band__card:hover {
  opacity: 0.9;
}

.cta-band__card:focus-visible {
  outline: var(--outline-width) solid var(--c-white);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  .cta-band__card { transition: none; }
}

@media (max-width: 900px) {
  .cta-band__card {
    padding: var(--sp-5);
  }
}

/* ── Circle arrow icon — absolute BOTTOM-right ──────────────────────── */

.cta-band__card-icon {
  position: absolute;
  bottom: var(--sp-5);
  right: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.cta-band__card-icon svg {
  width: 3rem;
  height: 3rem;
}

/* ── Question label (small, top) ────────────────────────────────────── */

.cta-band__card-label {
  font-size: 32px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--lh-snug);
  padding-right: 0;
}

/* ── Action text (large, bold) ──────────────────────────────────────── */

.cta-band__card-action {
  font-size: 26px;
  font-weight: 400;
  color: var(--c-white);
  line-height: var(--lh-snug);
}

/* ══════════════════════════════════════════════════════════════════════
   TABLET (769–1024px) — compact two-column band
═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
  .cta-band {
    padding: 30px;
  }
  .cta-band__inner {
    grid-template-columns: 3fr 5fr;
  }
  .cta-band__panel-heading {
    font-size: 33px;
  }
  .cta-band__panel-sub {
    font-size: 19px;
    line-height: 1.2;
  }
  .cta-band__card {
    padding: 1rem;
  }
  .cta-band__card-label {
    font-size: 25px;
  }
  .cta-band__card-action {
    font-size: 21px;
  }
}
/*
 * Card Grid organism — MSEED Education
 *
 * BEM: .card-grid / .card-grid--2 / .card-grid--3 / .card-grid--4
 *
 * Base: repeat(auto-fit, minmax(min(280px, 100%), 1fr))
 *   - auto-fit collapses empty tracks (no orphan gaps)
 *   - min(280px, 100%) prevents card overflow on very narrow viewports
 *   - Column modifiers set --_col-min to hint the breakpoint at which reflow occurs
 *
 * Column modifiers are hints — auto-fit governs actual reflow:
 *   --2: min 340px → 2-col at ~700px+
 *   --3: min 280px → 3-col at ~880px+ (default)
 *   --4: min 240px → 4-col at ~1000px+
 *
 * All values via var(--*). No hardcoded hex/px outside minmax (structural).
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

/* ══════════════════════════════════════════════════════════════════════
   BASE GRID
═══════════════════════════════════════════════════════════════════════ */

.card-grid {
  --_col-min: 280px;   /* default: 3-col hint */

  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( min( var(--_col-min), 100% ), 1fr ) );
  gap: var(--sp-5);
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   COLUMN HINT MODIFIERS
═══════════════════════════════════════════════════════════════════════ */

/* 2-col: wider cards — listings, alternating-hero style */
.card-grid--2 {
  --_col-min: 340px;
}

/* 3-col: default — program cards, blog, press */
.card-grid--3 {
  --_col-min: 280px;
}

/* Lock to exactly 3 columns on desktop (auto-fit would fit 4 when wide) */
@media (min-width: 901px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4-col: compact grid — step-cards, partner logos */
.card-grid--4 {
  --_col-min: 220px;
}

/* ══════════════════════════════════════════════════════════════════════
   EQUAL HEIGHT — cards in same row fill to tallest
   (flex column on card child already handles internal stretch)
═══════════════════════════════════════════════════════════════════════ */

/*
 * Cards that use flex-direction:column + flex:1 on their body
 * (program-card, person-card--grid, step-card) will stretch to fill row height.
 * No additional CSS needed here — grid auto-rows aligns baselines.
 */

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   auto-fit handles most reflow; these tighten gap on small viewports.
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .card-grid {
    gap: var(--sp-4);
  }
}

@media (max-width: 375px) {
  .card-grid {
    gap: var(--sp-3);
  }

  /* Force single column on narrowest — overrides auto-fit when min would cause overflow */
  .card-grid--4 {
    --_col-min: 100%;
  }
}
/*
 * Breadcrumb molecule — MSEED Education
 *
 * BEM: .breadcrumb / __list / __item / __item--current
 *      __link / __text / __current / __sep
 *
 * Layout: inline flex, wraps to multi-line on narrow viewports.
 * No images, no JS. Touch targets via min-height on links.
 *
 * All values via var(--*). Breakpoints use raw px (custom props invalid in @media).
 */

/* ══════════════════════════════════════════════════════════════════════
   NAV SHELL
═══════════════════════════════════════════════════════════════════════ */

.breadcrumb {
  padding-block: var(--sp-3);
}

/* ══════════════════════════════════════════════════════════════════════
   LIST
═══════════════════════════════════════════════════════════════════════ */

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;        /* wraps to multi-line @375 rather than scroll */
  align-items: center;
  gap: var(--sp-1) 0;    /* row gap only; sep provides column spacing */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   ITEMS
═══════════════════════════════════════════════════════════════════════ */

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

/* ── Link ───────────────────────────────────────────────────────────── */

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* 44px touch target */
  padding-inline: var(--sp-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-blue-500);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 150ms var(--ease), color 150ms var(--ease);
}

.breadcrumb__link:hover {
  color: var(--c-navy-900);
  text-decoration-color: currentColor;
}

.breadcrumb__link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
}

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

/* ── Non-linked ancestor (no url provided) ──────────────────────────── */

.breadcrumb__text {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-ink-500);
}

/* ── Current page (last crumb, no link) ─────────────────────────────── */

.breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--sp-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);

  /* Clamp long current-page labels */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}

/* ── Separator ──────────────────────────────────────────────────────── */

.breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-ink-300);
  user-select: none;
  flex-shrink: 0;
}
/*
 * Blog Card molecule — MSEED Education
 *
 * BEM: .blog-card / .blog-card--linked
 *      __media / __img / __body / __title / __link / __excerpt / __meta / __date
 *
 * Accessible full-card click: .blog-card__link::after stretches to cover the
 * entire card (position:absolute inset:0). Only one interactive element.
 *
 * All values via var(--*). Breakpoints use raw px (custom props invalid in @media).
 */

/* ══════════════════════════════════════════════════════════════════════
   CARD SHELL
═══════════════════════════════════════════════════════════════════════ */

.blog-card {
  position: relative;      /* contains ::after overlay */
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);        /* 1rem */
  background-color: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

.blog-card--linked:hover {
  box-shadow: var(--sh-pop);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: box-shadow 200ms var(--ease);
  }

  .blog-card--linked:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MEDIA
═══════════════════════════════════════════════════════════════════════ */

.blog-card__media {
  flex-shrink: 0;
  aspect-ratio: 3 / 2;   /* 480×320 = 3:2 — matches mseed-card size */
  overflow: hidden;
}

.blog-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 300ms var(--ease);
}

.blog-card--linked:hover .blog-card__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__img {
    transition: none;
  }

  .blog-card--linked:hover .blog-card__img {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BODY
═══════════════════════════════════════════════════════════════════════ */

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1 1 auto;   /* stretch in equal-height grid rows */
}

/* ── Title ──────────────────────────────────────────────────────────── */

.blog-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;

  /* Clamp at 3 lines — prevents unequal heights in grid */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Full-card overlay link ─────────────────────────────────────────── */

.blog-card__link {
  color: inherit;
  text-decoration: none;
}

.blog-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-card);
}

.blog-card__link:focus-visible {
  outline: none;  /* managed on ::after */
}

.blog-card__link:focus-visible::after {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

/* ── Excerpt ────────────────────────────────────────────────────────── */

.blog-card__excerpt {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;

  /* Clamp at 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Meta / Date ────────────────────────────────────────────────────── */

.blog-card__meta {
  margin-top: auto;   /* push to bottom of body */
}

.blog-card__date {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-ink-300);
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .blog-card__body {
    padding: var(--sp-4);
  }
}

@media (max-width: 375px) {
  .blog-card__body {
    padding: var(--sp-3) var(--sp-4);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ROW LAYOUT — blog archive list (thumbnail-left, plain row, no card chrome)
═══════════════════════════════════════════════════════════════════════ */

.blog-card--row {
  flex-direction: row;
  align-items: flex-start;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--c-line-200);
  padding-block: var(--sp-6);
}

.blog-card--row:first-child {
  padding-top: 0;
}

.blog-card--row.blog-card--linked:hover {
  box-shadow: none;
  transform: none;
}

.blog-card--row .blog-card__media {
  width: 12rem;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-card);
}

.blog-card--row .blog-card__body {
  padding: 0;
  gap: var(--sp-2);
}

.blog-card--row .blog-card__title {
  font-size: var(--fs-h4, var(--fs-h3));
  -webkit-line-clamp: 2;
}

.blog-card--row .blog-card__excerpt {
  -webkit-line-clamp: 3;
}

.blog-card--row .blog-card__meta {
  margin-top: 0;
}

.blog-card--row .blog-card__date {
  color: var(--c-blue-500);
  font-weight: var(--fw-semibold);
}

@media (max-width: 768px) {
  .blog-card--row {
    flex-direction: column;
  }

  .blog-card--row .blog-card__media {
    width: 100%;
  }
}
/*
 * Press Card molecule — MSEED Education
 *
 * BEM: .press-card / .press-card--linked
 *      __media / __img / __body / __headline / __meta / __date / __button
 *
 * Single interactive element: .press-card__button (external link).
 * Headline is plain text — no overlay link needed, no nested interactives.
 * Hover shadow-lift is CSS-only visual feedback; card itself is not clickable.
 *
 * All values via var(--*). Breakpoints use raw px (custom props invalid in @media).
 */

/* ══════════════════════════════════════════════════════════════════════
   CARD SHELL
═══════════════════════════════════════════════════════════════════════ */

.press-card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-bg-100);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 200ms var(--ease);
}

.press-card--linked:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .press-card--linked:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MEDIA
═══════════════════════════════════════════════════════════════════════ */

.press-card__media {
  flex-shrink: 0;
  aspect-ratio: 3 / 2;   /* landscape banner — reference: dark backdrop, phone centered */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reference composites a dark event photo behind the transparent phone mockup.
     That photo was not captured in the cloned spec assets (0ee2c9e4f0501820.img is
     an HTML stub, not an image), so a dark backdrop stands in until it is sourced. */
  background-color: var(--c-ink-900);
}

.press-card__img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;   /* full portrait phone-mockup, not a landscape crop */
  object-position: center;
  transition: transform 300ms var(--ease);
}

.press-card--linked:hover .press-card__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .press-card__img {
    transition: none;
  }

  .press-card--linked:hover .press-card__img {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BODY
═══════════════════════════════════════════════════════════════════════ */

.press-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1 1 auto;
}

/* ── Headline ───────────────────────────────────────────────────────── */

.press-card__headline {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;

  /* Clamp at 3 lines — prevents unequal card heights in grid */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Date ───────────────────────────────────────────────────────────── */

.press-card__meta {
  flex: 0 0 auto;
}

.press-card__date {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-ink-300);
}

/* ── Description ────────────────────────────────────────────────────── */

.press-card__desc {
  flex: 1 1 auto; /* push button to bottom */
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ── CTA button (external link) ─────────────────────────────────────── */

.press-card__button {
  margin-top: auto;         /* push to card bottom */
  position: relative;       /* for future stacking if needed */
}

.press-card__button-icon {
  flex: 0 0 auto;           /* never shrink the arrow */
  transition: transform 150ms var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  .press-card__button:hover .press-card__button-icon,
  .press-card__button:focus-visible .press-card__button-icon {
    transform: translateX(0.15em);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .press-card__body {
    padding: var(--sp-4);
  }
}

@media (max-width: 375px) {
  .press-card__body {
    padding: var(--sp-3) var(--sp-4);
  }

  /* Full-width button on smallest viewport for easier tap */
  .press-card__button {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }
}
/*
 * Program Card molecule — MSEED Education
 *
 * BEM: .program-card / .program-card--featured / .program-card--linked
 *      __media / __img / __body / __title / __title-link / __text / __cta
 *
 * Accessible full-card click: .program-card__title-link::after stretches to
 * cover the entire card via position:absolute + inset:0. Only one interactive
 * element — no nested links or buttons.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

/* ══════════════════════════════════════════════════════════════════════
   CARD SHELL
═══════════════════════════════════════════════════════════════════════ */

.program-card {
  position: relative;      /* contains the ::after overlay */
  display: flex;
  flex-direction: column;
  background-color: var(--c-bg-25);   /* #F8FAFC */
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

/* Hover lift — only when card is linked */
.program-card--linked:hover {
  box-shadow: var(--sh-pop);
  transform: translateY(-3px);
}

/* Featured modifier — accent left border */
.program-card--featured {
  border-left: 4px solid var(--c-accent-500);
}

@media (prefers-reduced-motion: reduce) {
  .program-card {
    transition: box-shadow 200ms var(--ease); /* keep shadow, drop transform */
  }

  .program-card--linked:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MEDIA
═══════════════════════════════════════════════════════════════════════ */

.program-card__media {
  flex-shrink: 0;
  aspect-ratio: 3 / 2;   /* 480×320 = 3:2 — matches mseed-card size */
  overflow: hidden;
}

.program-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 300ms var(--ease);
}

.program-card--linked:hover .program-card__img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .program-card__img {
    transition: none;
  }

  .program-card--linked:hover .program-card__img {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BODY
═══════════════════════════════════════════════════════════════════════ */

.program-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1 1 auto; /* stretch in equal-height grid rows */
}

/* ── Title ──────────────────────────────────────────────────────────── */

.program-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;
}

.program-card__subtitle {
  font-family: var(--font-body);   /* Manrope */
  font-size: var(--fs-label);      /* 12px */
  font-weight: var(--fw-semibold); /* 600 */
  line-height: 1;                  /* 12px */
  color: var(--c-white);
  text-align: left;
  margin: 0;
  padding: 0;
}

/* ── Full-card overlay link ─────────────────────────────────────────── */

.program-card__title-link {
  display: block;
  font-family: "Circular Spotify", sans-serif;
  font-size: 1.625rem;   /* 26px */
  font-weight: var(--fw-regular);
  line-height: 1;        /* 26px */
  color: var(--c-ink-900);
  text-decoration: none;
}

/*
 * Stretch to cover the full card. z-index:1 keeps it above card content
 * so the entire card surface is clickable, but below any real interactive
 * elements added later (e.g. a nested button at z-index:2).
 */
.program-card__title-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-card);
}

.program-card__title-link:focus-visible {
  outline: none; /* managed on ::after */
}

.program-card__title-link:focus-visible::after {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

/* ── Excerpt ────────────────────────────────────────────────────────── */

.program-card__text {
  display: block;
  font-family: Roboto, sans-serif;
  font-size: var(--fs-small);   /* 14px */
  font-weight: var(--fw-regular);
  line-height: 1.25rem;         /* 20px */
  color: var(--c-ink-500);
  margin: 0 0 0.9rem;           /* 14.4px */
}

/* ── CTA label (decorative — screen readers skip via aria-hidden) ────── */

/* Bordered pill (source .elementor-button size-sm): white bg, 1px orange
   border + orange text, 20px radius. Decorative — the card-wide title link
   handles the actual click. */
/* Bordered pill (source .elementor-button size-sm): white bg, orange border +
   text, with a trailing orange circle holding a white diagonal arrow.
   Decorative — the card-wide title link handles the actual click. */
.program-card__cta {
  align-self: flex-start;
  margin-top: auto; /* push to bottom of body */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-5);   /* tight right for the circle */
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-accent-500);
  background-color: var(--c-white);
  border: 1px solid var(--c-accent-500);
  border-radius: var(--r-pill);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.program-card__cta-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-7);    /* 48px circle */
  height: var(--sp-7);
  border-radius: var(--r-circle);
  background-color: var(--c-accent-500);
  color: var(--c-white);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.program-card__cta-icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  transform: rotate(-45deg);   /* diagonal ↗ */
}

/* Hover: invert — button fills orange, circle flips to white. */
.program-card--linked:hover .program-card__cta,
.program-card__title-link:focus-visible ~ .program-card__cta {
  background-color: var(--c-accent-500);
  color: var(--c-white);
}

.program-card--linked:hover .program-card__cta-icon,
.program-card__title-link:focus-visible ~ .program-card__cta .program-card__cta-icon {
  background-color: var(--c-white);
  color: var(--c-accent-500);
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .program-card__body {
    padding: var(--sp-4);
  }
}

@media (max-width: 375px) {
  /* At 375 card fills full col — body padding tightened */
  .program-card__body {
    padding: var(--sp-3) var(--sp-4);
  }
}
/*
 * Person Card molecule — MSEED Education
 *
 * BEM: .person-card / --grid / --alternating / --alt
 *      __photo / __img / __body / __name / __role / __bio / __links / __link
 *
 * Grid variant:        centered column, photo as circle.
 * Alternating variant: side-by-side, photo rounded rect; --alt flips to row-reverse.
 * Mobile (≤768px):     alternating → stacked (photo above text).
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

/* ══════════════════════════════════════════════════════════════════════
   SHARED BASE
═══════════════════════════════════════════════════════════════════════ */

.person-card {
  display: flex;
  background-color: var(--c-white);
}

/* ══════════════════════════════════════════════════════════════════════
   GRID VARIANT — centered column, circle photo
═══════════════════════════════════════════════════════════════════════ */

.person-card--grid {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ── Grid photo — full-width, rounded top ───────────────────────────── */

.person-card--grid .person-card__photo {
  width: 100%;
  height: auto;
  border-radius: 15px 15px 0 0;
  border: none;
}

.person-card--grid .person-card__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ── Grid body ──────────────────────────────────────────────────────── */

.person-card--grid .person-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 1rem 1rem 1.8rem 1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   ALTERNATING VARIANT — side-by-side, rounded rect photo
═══════════════════════════════════════════════════════════════════════ */

.person-card--alternating {
  flex-direction: row;
  align-items: flex-start;
  align-self: flex-end;
  gap: var(--sp-8);
  padding: 0;
  background-color: var(--c-white);
  border-radius: var(--r-person);
  box-shadow: var(--sh-person);
}

/* ── Alt modifier — flip photo to right ────────────────────────────── */

.person-card--alternating.person-card--alt {
  flex-direction: row-reverse;
}

/* ── Alternating photo — rounded rect ──────────────────────────────── */

.person-card--alternating .person-card__photo {
  flex: 0 0 20rem;
}

.person-card--alternating .person-card__img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--bw-frame) solid var(--c-accent-500);
  border-radius: var(--r-person);
}

/* ── Alternating body ───────────────────────────────────────────────── */

.person-card--alternating .person-card__body {
  flex: 1 1 0;
  height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertically center the content wrapper */
  padding-right: 3rem;
}

.person-card--alternating .person-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Board-card typography — matches source (Circular Spotify name, ruled role) */
.person-card--alternating .person-card__name {
  font-family: "Circular Spotify", sans-serif;
  font-size: var(--fs-h2);          /* 36px desktop */
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--c-accent-500);
}

.person-card--alternating .person-card__role {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  padding-bottom: 1.25rem;          /* 20px */
  border-bottom: 1px solid var(--c-line-300);
}

.person-card--alternating .person-card__bio p {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);      /* 21px */
  color: var(--c-ink-500);
  margin: 0 0 0.9rem;               /* 14.4px */
}

.person-card--alternating .person-card__bio p:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SHARED BODY ELEMENTS
═══════════════════════════════════════════════════════════════════════ */

/* ── Name ───────────────────────────────────────────────────────────── */

.person-card__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-blue-500);
  margin: 0;
}

/* ── Role ───────────────────────────────────────────────────────────── */

.person-card__role {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--c-ink-500);
  margin: 0;
}

/* ── Bio ────────────────────────────────────────────────────────────── */

.person-card__bio {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
}

.person-card__bio p {
  margin: 0 0 var(--sp-2);
}

.person-card__bio p:last-child {
  margin-bottom: 0;
}

/* ── Social / profile links ─────────────────────────────────────────── */

.person-card__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.person-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem; /* 44px touch target */
  padding-inline: var(--sp-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--c-blue-500);
  text-decoration: none;
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-pill);
  transition: color 150ms var(--ease), border-color 150ms var(--ease),
              background-color 150ms var(--ease);
}

.person-card__link:hover,
.person-card__link:focus-visible {
  color: var(--c-navy-900);
  border-color: var(--c-navy-900);
  background-color: var(--c-bg-50);
}

.person-card__link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  .person-card__link {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

/* Tablet — side-by-side layout retained; trim body padding (top/bottom/right) */
@media (min-width: 769px) and (max-width: 1024px) {
  .person-card--alternating .person-card__body {
    padding: 1.5rem 1.5rem 1.5rem 0;
  }
}

@media (max-width: 768px) {
  /* Alternating: stack photo above text */
  .person-card--alternating,
  .person-card--alternating.person-card--alt {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    padding: 0;
  }

  .person-card--alternating .person-card__photo {
    flex: none;
    width: 100%;
  }

  .person-card--alternating .person-card__body {
    padding: 15px 30px 30px;
  }
}
/*
 * Step Card molecule — MSEED Education
 *
 * BEM: .step-card / __number / __body / __title / __text
 * Non-interactive. Used 4× inside .card-grid for the how-to-apply section.
 * Navy bg, large accent numeral, white text.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

/* ══════════════════════════════════════════════════════════════════════
   CARD SHELL
═══════════════════════════════════════════════════════════════════════ */

.step-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background-color: var(--c-navy-900);
  border-radius: var(--r-card);
  /* Subtle top accent line */
  border-top: 4px solid var(--c-blue-500);
}

/* ── Alternating-blue scheme (opt-in via variant='alt') ─────────────────
   even index (steps 01·03) → darker; odd index (steps 02·04) → lighter.
   Top accent matches the card fill so the shell reads flat, per reference. */

.step-card--alt {
  background-color: var(--c-blue-400);
  border-top-color: var(--c-blue-400);
}

.step-card--alt .step-card__number {
  color: var(--c-blue-600);
}

.step-card--alt-light {
  background-color: var(--c-blue-300);
  border-top-color: var(--c-blue-300);
}

.step-card--alt-light .step-card__number {
  color: var(--c-blue-400);
}

/* ══════════════════════════════════════════════════════════════════════
   STEP NUMBER — large accent numeral
═══════════════════════════════════════════════════════════════════════ */

.step-card__number {
  font-size: clamp(2.5rem, 5vw, 4rem); /* scales 40px → 64px; clamp avoids overflow */
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--c-accent-500);
  letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════════════
   BODY
═══════════════════════════════════════════════════════════════════════ */

.step-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 auto; /* stretch in equal-height grid rows */
}

/* ── Title ──────────────────────────────────────────────────────────── */

.step-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-white);
  margin: 0;
}

/* ── Body text ──────────────────────────────────────────────────────── */

.step-card__text {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, 0.8);
}

.step-card__text p {
  margin: 0 0 var(--sp-2);
}

.step-card__text p:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .step-card {
    padding: var(--sp-5);
    flex-direction: row;  /* numeral left, body right on tablet — saves vertical height */
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .step-card__number {
    flex-shrink: 0;
    font-size: 2.5rem; /* fixed on tablet row layout */
    min-width: 3.5rem;
  }
}

@media (max-width: 375px) {
  .step-card {
    flex-direction: column; /* stack back at narrowest */
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  .step-card__number {
    font-size: 2rem;
  }
}
/*
 * Stat Row organism — MSEED Education
 *
 * BEM: .stat-row / --3up / --4up / __head / __heading / __list / __item / __number / __label
 *
 * Non-interactive static grid. No transitions, no JS.
 * Column count set via --_cols custom property; auto-fit handles reflow.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

/* ══════════════════════════════════════════════════════════════════════
   SHELL
═══════════════════════════════════════════════════════════════════════ */

.stat-row {
  --_stat-bg:     #EEF8FF;
  --_stat-blue:   #2178BD;
  --_stat-border: rgb(33, 120, 189);

  padding-block: var(--sp-9);
  background-color: var(--_stat-bg);
}

@media (max-width: 768px) {
  .stat-row {
    padding-block: var(--sp-7);
  }
}

.stat-row .container {
  padding-inline: 0;
}

/* ── Optional head ──────────────────────────────────────────────────── */

.stat-row__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}

.stat-row__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   GRID LIST
═══════════════════════════════════════════════════════════════════════ */

.stat-row__list {
  --_cols: 3; /* default; overridden by modifiers */

  display: grid;
  grid-template-columns: repeat( var(--_cols), 1fr );
  gap: var(--sp-6) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat-row--3up .stat-row__list { --_cols: 3; }
.stat-row--4up .stat-row__list { --_cols: 4; }

/* ── 4-up variant — solid blue band, white text + white item borders ── */

.stat-row--4up {
  --_stat-bg:     var(--c-blue-500);
  --_stat-blue:   var(--c-white);
  --_stat-border: var(--c-white);
}

.stat-row--4up .stat-row__heading,
.stat-row--4up .stat-row__label,
.stat-row--4up .stat-row__desc {
  color: var(--c-white);
}

/* ══════════════════════════════════════════════════════════════════════
   STAT ITEM
═══════════════════════════════════════════════════════════════════════ */

.stat-row__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--_stat-border);
}

/* ── Number ─────────────────────────────────────────────────────────── */

.stat-row__number {
  font-family: "Circular Spotify", sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  text-align: start;
  white-space: pre-wrap;
  color: var(--_stat-blue);
  letter-spacing: -0.02em;
}

/* ── Label ──────────────────────────────────────────────────────────── */

.stat-row__label {
  font-family: "Circular Spotify", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-ink-900);
  margin: 0;
  padding: 0;
}

/* ── Description ────────────────────────────────────────────────────── */

.stat-row__desc {
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #475467;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 4-up → 2-col; 3-up → 2-col */
  .stat-row--3up .stat-row__list,
  .stat-row--4up .stat-row__list {
    --_cols: 2;
  }
}

@media (max-width: 375px) {
  /* All → 1-col */
  .stat-row--3up .stat-row__list,
  .stat-row--4up .stat-row__list {
    --_cols: 1;
  }
}
/*
 * Logo Strip / Affiliations organism — MSEED Education
 *
 * Two-column: left = heading + intro, right = affiliation cards.
 * BEM: .logo-strip / __inner / __content / __heading / __intro /
 *      __cards / __card / __card-img-wrap / __card-img / __card-name / __card-desc
 */

/* ══════════════════════════════════════════════════════════════════════
   SHELL
═══════════════════════════════════════════════════════════════════════ */

.logo-strip {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
  background-image: url("../../img/0d910c2a5b83854b.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

@media (max-width: 768px) {
  .logo-strip {
    padding-block: var(--sp-8);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TWO-COLUMN INNER
═══════════════════════════════════════════════════════════════════════ */

.logo-strip__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
  align-items: start;
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet — single column */
  .logo-strip__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .logo-strip__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LEFT CONTENT
═══════════════════════════════════════════════════════════════════════ */

.logo-strip__heading {
  font-family: "Circular Spotify", sans-serif;
  font-size: 3rem;   /* 48px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--c-ink-900);
  margin: 0 0 var(--sp-6);
}

@media (max-width: 768px) {
  .logo-strip__heading {
    font-size: 2rem;   /* 32px mobile */
  }
}

.logo-strip__intro {
  font-family: var(--font-body);   /* Manrope */
  font-size: var(--fs-body);       /* 16px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0 0 var(--sp-5);
}

.logo-strip__intro:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   RIGHT CARDS GRID
═══════════════════════════════════════════════════════════════════════ */

.logo-strip__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

@media (max-width: 768px) {
  .logo-strip__cards {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   AFFILIATION CARD
═══════════════════════════════════════════════════════════════════════ */

.logo-strip__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6);
  color: var(--c-ink-700);
  background-color: var(--c-white);
  border: 2px solid var(--c-blue-500);
  border-radius: var(--r-lg);   /* 20px */
  transition: background 0.3s var(--ease), border 0.3s var(--ease),
              box-shadow 0.3s var(--ease), transform 0.4s var(--ease);
}

/* ── Logo image — sits in a soft rounded panel ──────────────────────── */

.logo-strip__card-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  padding: var(--sp-5);
  background-color: var(--c-bg-25);
  border-radius: var(--r-md);   /* 12px */
}

.logo-strip__card-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0.625rem;   /* 10px */
  display: block;
}

/* ── Card name — Circular Spotify, blue, centered ───────────────────── */

.logo-strip__card-name {
  font-family: "Circular Spotify", sans-serif;
  font-size: 1.375rem;   /* 22px */
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-blue-500);
  text-align: center;
  margin: 0;
}

/* ── Card description ───────────────────────────────────────────────── */

.logo-strip__card-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}
/*
 * Marquee organism — MSEED Education
 *
 * BEM: .marquee / __track / __item / __sep
 *
 * Seamless loop: PHP renders content × 2; CSS animates translateX(0 → -50%).
 * Animation speed tuned via --marquee-duration (default 30s; JS overrides
 * based on measured track width for consistent px/s across viewports).
 *
 * Decorative: aria-hidden="true" on root element (set in PHP).
 * No focusable elements. No interactive targets.
 *
 * All values via var(--*). Breakpoints use raw px (custom props invalid in @media).
 */

/* ══════════════════════════════════════════════════════════════════════
   SHELL
═══════════════════════════════════════════════════════════════════════ */

.marquee {
  /* Structural source values off the design scale (home.html §hero ticker). */
  --_marquee-item-fs: 1.25rem;   /* 20px */
  --_marquee-gap: 2.5rem;        /* 40px between items */
  --_marquee-icon-h: 4rem;       /* ~65px source graduation-spark glyph */
  width: 100%;
  overflow: hidden;           /* clip the scrolling track */
  background-color: var(--c-navy-900);
  padding-block: var(--sp-4);
}

/* ══════════════════════════════════════════════════════════════════════
   TRACK
   Two content copies side-by-side; animation moves left by exactly 50%
   so the seam is invisible when the first copy exits the viewport.
═══════════════════════════════════════════════════════════════════════ */

/* Clipping window — the track scrolls INSIDE this, so translateX never slides
   text over a preceding icon (the icon is a sibling of the window, not inside
   it). Mirrors the source marquee-window wrapper. */
.marquee__window {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow: hidden;   /* clips the track's left/right overflow */
}

.marquee__track {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;   /* keep max-content width so translateX(-50%) = half content */
  align-items: center;
  gap: var(--_marquee-gap);   /* 40px item rhythm (image track overrides) */
  width: max-content;   /* expands to fit all inline children */
  animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* ── Reduced-motion: CSS belt (JS is the braces) ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════
   ITEMS + SEPARATORS
═══════════════════════════════════════════════════════════════════════ */

/* Source home.html §hero ticker: Circular Spotify 20px / 400, mixed-case,
   no letter-spacing. Item spacing comes from the track gap, not padding —
   the middot separator is baked into the item text by the caller. */
.marquee__item {
  display: inline-block;
  white-space: nowrap;
  font-family: "Circular Spotify", sans-serif;
  font-size: var(--_marquee-item-fs);
  font-weight: var(--fw-regular);
  color: var(--c-white);
  letter-spacing: normal;
  text-transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   PAUSE ON HOVER (JS also handles this; CSS covers no-JS case)
═══════════════════════════════════════════════════════════════════════ */

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ── Image marquee (logo/badge loop) ─────────────────────────────────── */
.marquee--images {
  padding-block: var(--sp-2);
}

.marquee--images .marquee__track {
  align-items: center;
  gap: var(--sp-8);
}

.marquee__item--img {
  display: inline-flex;
  align-items: center;
}

.marquee__img {
  height: 1.75rem;
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .marquee--images .marquee__track { gap: var(--sp-6); }
  .marquee__img { height: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   BORDERED VARIANT (hero ticker) — transparent bg, top/bottom rule, left icon
   Used inside .hero--video. Text stays white (default __item colour).
═══════════════════════════════════════════════════════════════════════ */

.marquee--bordered {
  background-color: transparent;
  padding-block: var(--sp-3);
}

/* Top/bottom rule sits on the scrolling track (not the wrapper) so it hugs the
   text band and clears the in-flow icon. Scoped to bordered — image marquees
   must stay ruleless. */
.marquee--bordered .marquee__track {
  border-block: 1px solid rgba(255, 255, 255, 0.35);
}

/* Left-side spark glyph — in-flow flex sibling of the track (source: own grid
   cell that pushes the track start). The track keeps its max-content width and
   overflows the flex row, clipped by .marquee overflow:hidden. Track must NOT
   shrink, or translateX(-50%) would measure the shrunk box, not the content. */
.marquee--has-icon {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.marquee--has-icon .marquee__window {
  flex: 1 1 auto;   /* fill the space right of the icon; clips the track there */
  min-width: 0;
}

.marquee__icon {
  flex: 0 0 auto;
  height: var(--_marquee-icon-h);
  pointer-events: none;
}

.marquee__icon svg {
  display: block;
  height: 100%;
  width: auto;
}

@media (max-width: 768px) {
  .marquee__icon {
    display: none;   /* source: glyph hidden on tablet/mobile */
  }
}
/*
 * Slider controls — arrow buttons over scroll-snap tracks (slider.js).
 *
 * BEM: .slider-wrap / .slider-btn (--prev/--next)
 * Buttons are JS-injected; without JS the track stays a native swipe/scroll.
 *
 * All values via var(--*).
 */

.slider-wrap {
  position: relative;
  width: 87%;
  margin-inline: auto;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-7);
  height: var(--sp-7);
  border: 0;
  border-radius: var(--r-circle);
  background: var(--c-white);
  color: var(--c-navy-900);
  box-shadow: var(--sh-pop);
  cursor: pointer;
}

.slider-btn--prev {
  left: 0;
}

.slider-btn--prev svg {
  transform: rotate(180deg);
}

.slider-btn--next {
  right: 0;
}

.slider-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.slider-btn:not(:disabled):hover,
.slider-btn:focus-visible {
  color: var(--c-accent-500);
}
/*
 * Accordion + Tabs organism — MSEED Education
 *
 * BEM: .accordion / __item / __header / __trigger / __title / __chevron / __panel / __body
 * Tabs (injected by JS): .tabs__list / .tabs__tab
 *
 * Two modes (set by JS on .accordion):
 *   .accordion--mobile   → always accordion layout
 *   .accordion--desktop  → tabs layout (tablist above, panels below)
 *
 * Progressive enhancement: without JS, all panels visible in document flow.
 * With JS: panels hidden, managed via [hidden] attribute.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

/* ══════════════════════════════════════════════════════════════════════
   ACCORDION SHELL
═══════════════════════════════════════════════════════════════════════ */

.accordion {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   ACCORDION ITEMS
═══════════════════════════════════════════════════════════════════════ */

.accordion__item {
  border-bottom: 1px solid var(--c-line-200);
}

.accordion__item:first-child {
  border-top: 1px solid var(--c-line-200);
}

/* ── Header / trigger button ────────────────────────────────────────── */

.accordion__header {
  margin: 0;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 3.5rem; /* 56px — comfortable tap target */
  padding: var(--sp-4) 0;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
  transition: color 150ms var(--ease);
}

.accordion__trigger:hover {
  color: var(--c-navy-900);
}

.accordion__trigger:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
}

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

.accordion__title {
  flex: 1 1 auto;
}

/* ── Numbered variant (opt-in via numbered arg) ─────────────────────────
   Zero-padded item numbers via CSS counter. Rendered as a decorative
   ::before, so screen readers read only the question text, in order. */

.accordion--numbered {
  counter-reset: accordion-num;
}

.accordion--numbered .accordion__item {
  counter-increment: accordion-num;
}

.accordion--numbered .accordion__title::before {
  content: counter(accordion-num, decimal-leading-zero);
  margin-right: var(--sp-5);
  color: var(--c-ink-900);
}

/* Numbered variant is presented as separate rounded "pill" rows (admissionform
   FAQ reference), not the flush bordered list used by the default variant. */
.accordion--numbered .accordion__item {
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-md);
  background-color: var(--c-white);
  box-shadow: var(--sh-card);
  margin-bottom: var(--sp-4);
}

.accordion--numbered .accordion__item:first-child {
  border-top: 1px solid var(--c-line-200); /* full pill border, not a list top-rule */
}

.accordion--numbered .accordion__trigger {
  padding: var(--sp-4) var(--sp-5);
}

.accordion--numbered .accordion__body {
  padding: 0 var(--sp-5) var(--sp-5);
}

/* Reference toggle glyph is + (closed) → − (open), not the rotating chevron. */
.accordion--numbered .accordion__chevron {
  display: none;
}

.accordion--numbered .accordion__trigger::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5em;
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--c-ink-500);
}

.accordion--numbered .accordion__trigger[aria-expanded="true"]::after {
  content: "\2212"; /* U+2212 minus sign */
}

/* ── Chevron ────────────────────────────────────────────────────────── */

.accordion__chevron {
  flex-shrink: 0;
  color: var(--c-ink-500);
  transition: transform 250ms var(--ease);
}

.accordion__trigger[aria-expanded="true"] .accordion__chevron {
  transform: rotate(180deg);
}

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

/* ── Panel ──────────────────────────────────────────────────────────── */

/*
 * JS uses [hidden] to show/hide. Without JS, panels display: block (all visible).
 * Keep this rule; browsers with JS will toggle [hidden].
 */
.accordion__panel[hidden] {
  display: none;
}

.accordion__body {
  padding-bottom: var(--sp-5);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
}

.accordion__body > *:first-child {
  margin-top: 0;
}

.accordion__body > *:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   TABS PRESENTATION (desktop — injected by accordion.js)
   Active when .accordion has class .accordion--desktop
═══════════════════════════════════════════════════════════════════════ */

/* ── Tablist ────────────────────────────────────────────────────────── */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--c-line-200);
  margin-bottom: var(--sp-6);
  list-style: none;
  padding: 0;
  margin-top: 0;
}

/* ── Tab buttons ────────────────────────────────────────────────────── */

.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-500);
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: color 150ms var(--ease);
  /* Active underline via ::after — avoids layout shift */
  bottom: -2px; /* overlap tablist border */
}

.tabs__tab:hover {
  color: var(--c-navy-900);
}

.tabs__tab[aria-selected="true"] {
  color: var(--c-navy-900);
}

/* Active underline */
.tabs__tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: -2px;  /* sits flush on tablist border-bottom */
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--c-accent-500);
  border-radius: var(--r-pill) var(--r-pill) 0 0;
}

.tabs__tab:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
  z-index: 1;
}

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

/* ── Desktop: hide accordion headers (JS sets aria-hidden; CSS hides visually) ── */

.accordion--desktop .accordion__header[aria-hidden="true"] {
  display: none;
}

/* ── Desktop: remove item borders (tabs handle separation) ──────────── */

.accordion--desktop .accordion__item {
  border: none;
}

.accordion--desktop .accordion__item:first-child {
  border-top: none;
}

/* ── Desktop: panel body padding top (header hidden) ───────────────── */

.accordion--desktop .accordion__panel[role="tabpanel"] .accordion__body {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-6);
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE — accordion mode (≤768px)
   .accordion--mobile added by JS when viewport ≤ 768px
═══════════════════════════════════════════════════════════════════════ */

/* Tablist hidden on mobile (JS removes it from auto mode; safety rule for edge cases) */
.accordion--mobile .tabs__list {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   NO-JS FALLBACK — without .accordion--desktop or .accordion--mobile
   All panels visible; no layout chrome; readable plain document
═══════════════════════════════════════════════════════════════════════ */

.accordion:not(.accordion--desktop):not(.accordion--mobile) .accordion__chevron {
  display: none; /* triggers look like headings without JS */
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .tabs__list {
    display: none; /* tablist hidden on mobile regardless */
  }

  .accordion__trigger {
    font-size: var(--fs-small);
    padding: var(--sp-3) 0;
    min-height: 3rem;
  }
}

@media (max-width: 375px) {
  .accordion__body {
    font-size: var(--fs-small);
  }
}
/*
 * Testimonial Carousel organism — MSEED Education
 *
 * BEM: .testimonial-carousel
 *   __head / __heading
 *   __inner / __viewport / __track / __slide
 *   __avatar / __avatar-img
 *   __quote / __text / __attribution / __author / __role
 *   __controls / __prev / __next / __dots / __dot
 *
 * Progressive enhancement:
 *   Default (no-JS): slides stack vertically, controls hidden.
 *   .testimonial-carousel--ready (JS): overflow:hidden viewport, flex-row track,
 *   transform-based transitions, controls visible.
 *
 * All values via var(--*). Breakpoints use raw px (custom props invalid in @media).
 */

/* ══════════════════════════════════════════════════════════════════════
   SHELL
═══════════════════════════════════════════════════════════════════════ */

.testimonial-carousel {
  padding-block: var(--sp-9);
  background-color: var(--c-bg-50);
}

@media (max-width: 768px) {
  .testimonial-carousel {
    padding-block: var(--sp-7);
  }
}

/* ── Optional head ──────────────────────────────────────────────────── */

.testimonial-carousel__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}

.testimonial-carousel__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   INNER WRAPPER (positions viewport + controls in column)
═══════════════════════════════════════════════════════════════════════ */

.testimonial-carousel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* ══════════════════════════════════════════════════════════════════════
   VIEWPORT + TRACK
   Default (no-JS): track is flex-column (stacked).
   .--ready (JS): track is flex-row with overflow clipped and transform.
═══════════════════════════════════════════════════════════════════════ */

.testimonial-carousel__viewport {
  width: 100%;
}

.testimonial-carousel--ready .testimonial-carousel__viewport {
  overflow: hidden;
}

.testimonial-carousel__track {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.testimonial-carousel--ready .testimonial-carousel__track {
  flex-direction: row;
  gap: 0;
  transition: transform 300ms var(--ease);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel--ready .testimonial-carousel__track {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SLIDE
═══════════════════════════════════════════════════════════════════════ */

.testimonial-carousel__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--sp-5);
}

.testimonial-carousel--ready .testimonial-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: var(--sp-7);
}

@media (min-width: 768px) {
  .testimonial-carousel--ready .testimonial-carousel__slide {
    padding-inline: var(--sp-9);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   AVATAR
═══════════════════════════════════════════════════════════════════════ */

.testimonial-carousel__avatar {
  width: 5rem;   /* 80px */
  height: 5rem;
  border-radius: var(--r-circle);
  overflow: hidden;
  margin-bottom: var(--sp-5);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .testimonial-carousel__avatar {
    width: 6rem;  /* 96px */
    height: 6rem;
  }
}

.testimonial-carousel__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════════════
   QUOTE CONTENT
═══════════════════════════════════════════════════════════════════════ */

.testimonial-carousel__quote {
  margin: 0;
  max-width: 45rem; /* ~720px — prevents ultra-wide single-column quotes */
}

.testimonial-carousel__text {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--c-ink-700);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-5);
}

@media (max-width: 768px) {
  .testimonial-carousel__text {
    font-size: var(--fs-body);
  }
}

.testimonial-carousel__attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.testimonial-carousel__author {
  font-style: normal;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--c-ink-900);
}

.testimonial-carousel__role {
  font-size: var(--fs-small);
  color: var(--c-ink-500);
}

/* ══════════════════════════════════════════════════════════════════════
   CONTROLS (prev / dots / next)
   Hidden by default (no-JS); shown when .--ready class present.
═══════════════════════════════════════════════════════════════════════ */

.testimonial-carousel__controls {
  display: none;
}

.testimonial-carousel--ready .testimonial-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

/* ── Prev / Next ────────────────────────────────────────────────────── */

.testimonial-carousel__prev,
.testimonial-carousel__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;   /* 44px touch target */
  min-height: 2.75rem;
  border-radius: var(--r-circle);
  border: 2px solid var(--c-navy-900);
  background: transparent;
  color: var(--c-navy-900);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.testimonial-carousel__prev:hover,
.testimonial-carousel__next:hover {
  background-color: var(--c-navy-900);
  color: var(--c-white);
}

.testimonial-carousel__prev:focus-visible,
.testimonial-carousel__next:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel__prev,
  .testimonial-carousel__next {
    transition: none;
  }
}

/* ── Dots ────────────────────────────────────────────────────────────── */

.testimonial-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Each dot button has a 44px touch target; visual dot is a ::after pseudo */
.testimonial-carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;   /* 44px */
  min-height: 2.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.testimonial-carousel__dot::after {
  content: '';
  display: block;
  width: 0.625rem;  /* 10px visual dot */
  height: 0.625rem;
  border-radius: var(--r-circle);
  border: 2px solid var(--c-navy-900);
  background: transparent;
  transition: background-color 200ms var(--ease);
}

.testimonial-carousel__dot[aria-current="true"]::after {
  background: var(--c-navy-900);
}

.testimonial-carousel__dot:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel__dot::after {
    transition: none;
  }
}
/*
 * Gallery Grid organism — MSEED Education
 *
 * BEM: .gallery-grid
 *   __head / __heading
 *   __grid / __item
 *   __trigger / __link / __img
 *   __lightbox / __dialog / __close / __figure / __backdrop
 *
 * Layout: 4-col × 2-row (8 images), square-crop thumbnails.
 * Lightbox: fixed full-viewport overlay; dialog centered, max-constrained.
 * Progressive enhancement: grid renders without JS; lightbox shown via JS class.
 *
 * All values via var(--*). Breakpoints use raw px (custom props invalid in @media).
 */

/* ══════════════════════════════════════════════════════════════════════
   SHELL
═══════════════════════════════════════════════════════════════════════ */

.gallery-grid {
  padding-block: var(--sp-9);
  background-color: var(--c-navy-900);
}

@media (max-width: 768px) {
  .gallery-grid {
    padding-block: var(--sp-7);
  }
}

/* ── Optional head ──────────────────────────────────────────────────── */

.gallery-grid__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}

.gallery-grid__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  line-height: var(--lh-snug);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════════════════════════════ */

.gallery-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .gallery-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
}

@media (max-width: 375px) {
  .gallery-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-1);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ITEM
═══════════════════════════════════════════════════════════════════════ */

.gallery-grid__item {
  position: relative;
  /* 1:1 aspect ratio via grid + square crop image */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-card);
  background-color: var(--c-navy-700);
}

/* ── Trigger (lightbox) ─────────────────────────────────────────────── */

.gallery-grid__trigger,
.gallery-grid__link {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: inherit;
  overflow: hidden;
}

.gallery-grid__trigger:focus-visible,
.gallery-grid__link:focus-visible {
  outline: var(--outline-width) solid var(--c-accent-500);
  outline-offset: var(--outline-offset);
}

/* ── Image ──────────────────────────────────────────────────────────── */

.gallery-grid__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 300ms var(--ease), opacity 200ms var(--ease);
}

.gallery-grid__trigger:hover .gallery-grid__img,
.gallery-grid__link:hover .gallery-grid__img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid__img {
    transition: none;
  }

  .gallery-grid__trigger:hover .gallery-grid__img,
  .gallery-grid__link:hover .gallery-grid__img {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LOAD MORE
═══════════════════════════════════════════════════════════════════════ */

.gallery-grid__more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

.gallery-grid__loadmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; /* 44px */
  padding-inline: var(--sp-5);
  border-radius: var(--r-pill, var(--r-circle));
  border: 2px solid var(--c-white);
  background: transparent;
  color: var(--c-white);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.gallery-grid__loadmore:hover {
  background-color: var(--c-white);
  color: var(--c-navy-900);
}

.gallery-grid__loadmore:focus-visible {
  outline: var(--outline-width) solid var(--c-accent-500);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid__loadmore {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHTBOX OVERLAY
   Hidden by default; JS removes `hidden` attribute to show.
═══════════════════════════════════════════════════════════════════════ */

.gallery-grid__lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

/* hidden attribute overrides display */
.gallery-grid__lightbox[hidden] {
  display: none;
}

/* ── Backdrop ────────────────────────────────────────────────────────── */

.gallery-grid__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(7, 36, 63, 0.88); /* --c-navy-900 at 88% — must use literal for rgba */
  cursor: pointer;
}

/* ── Dialog (centered panel) ────────────────────────────────────────── */

.gallery-grid__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: min(90vw, 56rem);
  max-height: 90vh;
}

/* ── Close button ───────────────────────────────────────────────────── */

.gallery-grid__close {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;   /* 44px */
  min-height: 2.75rem;
  border-radius: var(--r-circle);
  border: 2px solid var(--c-white);
  background: transparent;
  color: var(--c-white);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.gallery-grid__close:hover {
  background-color: var(--c-white);
  color: var(--c-navy-900);
}

.gallery-grid__close:focus-visible {
  outline: var(--outline-width) solid var(--c-accent-500);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid__close {
    transition: none;
  }
}

/* ── Figure + lightbox image ────────────────────────────────────────── */

.gallery-grid__figure {
  margin: 0;
  line-height: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  max-width: 100%;
}

.gallery-grid__figure img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 6rem); /* subtract close button + gap */
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-card);
}
/*
 * Contact Block organism — MSEED Education
 *
 * BEM: .contact-block / __inner / __card / __card-title / __info-list / __info-row / __icon
 *      __info-body / __info-label / __info-link / __info-value
 *      __map / __map-trigger / __map-hint
 *
 * Layout: 2-col (info | form) → stacked ≤768px; full-width map below.
 * Map uses reserved aspect-ratio box (CLS=0); iframe injected by lazy-map.js.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

/* ══════════════════════════════════════════════════════════════════════
   SECTION SHELL
═══════════════════════════════════════════════════════════════════════ */

.contact-block {
  padding-block: var(--sp-9);
}

@media (max-width: 768px) {
  .contact-block {
    padding-block: var(--sp-7);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   INNER — 2-col grid
═══════════════════════════════════════════════════════════════════════ */

.contact-block__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr; /* info narrower, form wider */
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 768px) {
  .contact-block__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   CARDS — info + form, visually distinct per reference
═══════════════════════════════════════════════════════════════════════ */

.contact-block__card {
  padding: var(--sp-6);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-card);
  background-color: var(--c-white);
}

.contact-block__card-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  margin-bottom: var(--sp-2);
}

.contact-block__card-intro {
  font-size: var(--fs-body);
  color: var(--c-ink-500);
  line-height: var(--lh-base);
  margin: 0 0 var(--sp-6);
}

/* ══════════════════════════════════════════════════════════════════════
   INFO COLUMN
═══════════════════════════════════════════════════════════════════════ */

.contact-block__info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ── Info row ───────────────────────────────────────────────────────── */

.contact-block__info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* ── Icon ───────────────────────────────────────────────────────────── */

.contact-block__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;   /* 28px — bare glyph, no tile */
  height: 1.75rem;
  color: var(--c-ink-900);
}

.contact-block__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ── Info body ──────────────────────────────────────────────────────── */

.contact-block__info-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-1); /* align with icon center */
}

.contact-block__info-label {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: var(--lh-tight);
}

.contact-block__info-value {
  font-size: var(--fs-body);
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  margin-top: var(--sp-2);
}

.contact-block__info-timing {
  font-size: var(--fs-small);
  color: var(--c-ink-400);
  line-height: var(--lh-snug);
}

.contact-block__info-link {
  font-size: var(--fs-body);
  color: var(--c-ink-900);
  text-decoration: none;
  line-height: var(--lh-snug);
  margin-top: var(--sp-2);
  transition: color 150ms var(--ease);
}

.contact-block__info-link:hover {
  color: var(--c-navy-900);
  text-decoration: underline;
}

.contact-block__info-link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .contact-block__info-link {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MAP — lazy-loaded; reserved aspect prevents CLS
═══════════════════════════════════════════════════════════════════════ */

.contact-block__map {
  position: relative;
  margin-top: var(--sp-7);
  aspect-ratio: 21 / 6;  /* ~600px tall at 1440 container */
  background-color: var(--c-bg-50);
  border-radius: var(--r-card);
  overflow: hidden;
}

@media (max-width: 768px) {
  .contact-block__map {
    aspect-ratio: 4 / 3;  /* taller on mobile for usability */
    margin-top: var(--sp-6);
  }
}

/* Injected iframe — fills reserved box */
.contact-block__map iframe,
.contact-block__map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Placeholder / trigger ──────────────────────────────────────────── */

.contact-block__map-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-ink-500);
  transition: background-color 200ms var(--ease);
}

.contact-block__map-trigger:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.contact-block__map-trigger:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: calc(-1 * var(--outline-offset));
  border-radius: var(--r-card);
}

/* Hide trigger once map is loaded */
.contact-block__map.is-loaded .contact-block__map-trigger {
  display: none;
}

.contact-block__map-hint {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-blue-500);
  text-decoration: underline;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .contact-block__map-trigger {
    transition: none;
  }
}
/*
 * Form Panel organism — MSEED Education
 *
 * BEM: .form-panel / --apply / --admission / --brochure / --contact
 *      __title / __intro / __status / __form / __row / __field / __label / __req
 *      __input / __select / __textarea / __error / __pot / __submit
 *
 * States: .is-invalid on __field; aria-invalid="true" on control; :focus-visible on all controls.
 * ≥16px font on inputs at 375px — prevents iOS auto-zoom.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

/* ══════════════════════════════════════════════════════════════════════
   PANEL SHELL
═══════════════════════════════════════════════════════════════════════ */

.form-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-panel__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;
}

.form-panel__intro {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ── aria-live status (success / global error) ──────────────────────── */

.form-panel__status {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  background-color: var(--c-bg-50);
  border: 1px solid var(--c-line-200);
  color: var(--c-ink-700);
}

.form-panel__status[hidden] {
  display: none;
}

.form-panel__status.is-success {
  background-color: #f0fdf4; /* P3: move to --c-success-bg when token defined */
  border-color: #bbf7d0;
  color: #15803d;
}

.form-panel__status.is-error {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* ══════════════════════════════════════════════════════════════════════
   FORM
═══════════════════════════════════════════════════════════════════════ */

.form-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ══════════════════════════════════════════════════════════════════════
   FIELD ROW
═══════════════════════════════════════════════════════════════════════ */

.form-panel__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.form-panel__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

@media (max-width: 480px) {
  .form-panel__row {
    grid-template-columns: 1fr;
  }
}

/* ── Label ──────────────────────────────────────────────────────────── */

.form-panel__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-ink-500);
}

.form-panel__req {
  color: var(--c-accent-500);
  margin-left: var(--sp-1);
}

/* ── Controls — shared ──────────────────────────────────────────────── */

.form-panel__input,
.form-panel__select,
.form-panel__textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-ink-900);
  background-color: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-md);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
  appearance: none;
}

.form-panel__input::placeholder,
.form-panel__textarea::placeholder {
  color: var(--c-ink-300);
}

.form-panel__input:hover,
.form-panel__select:hover,
.form-panel__textarea:hover {
  border-color: var(--c-ink-400);
}

.form-panel__input:focus,
.form-panel__select:focus,
.form-panel__textarea:focus {
  outline: none;
  border-color: var(--c-blue-500);
  box-shadow: 0 0 0 3px rgba(33, 120, 189, 0.2);
}

.form-panel__input:focus-visible,
.form-panel__select:focus-visible,
.form-panel__textarea:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  .form-panel__input,
  .form-panel__select,
  .form-panel__textarea {
    transition: none;
  }
}

/* ── Select chevron ─────────────────────────────────────────────────── */

.form-panel__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23475467' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-8);
  cursor: pointer;
}

/* ── Textarea ───────────────────────────────────────────────────────── */

.form-panel__textarea {
  resize: vertical;
  min-height: 2rem;
}

/* Contact variant — taller message box so the form card matches the info
   card height (no dead gap below the shorter info column). */
.form-panel--contact .form-panel__textarea {
  min-height: 2rem;
  max-height: 4rem;
}

/* ── Invalid state ──────────────────────────────────────────────────── */

.form-panel__field.is-invalid .form-panel__input,
.form-panel__field.is-invalid .form-panel__select,
.form-panel__field.is-invalid .form-panel__textarea,
.form-panel__input[aria-invalid="true"],
.form-panel__select[aria-invalid="true"],
.form-panel__textarea[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* ── Error message ──────────────────────────────────────────────────── */

.form-panel__error {
  font-size: var(--fs-label);
  color: #dc2626;
  font-weight: var(--fw-medium);
}

.form-panel__error[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   PHONE — country-code + number compound field
═══════════════════════════════════════════════════════════════════════ */

.form-panel__tel-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.form-panel__tel-code {
  display: flex;
  align-items: center;
  padding-inline: var(--sp-4);
  background-color: var(--c-bg-50);
  border-right: 1px solid var(--c-line-200);
  color: var(--c-ink-700);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.form-panel__tel-group .form-panel__tel-input {
  border: none;
  border-radius: 0;
}

.form-panel__tel-group:focus-within {
  border-color: var(--c-blue-500);
  box-shadow: 0 0 0 3px rgba(33, 120, 189, 0.2);
}

.form-panel__tel-group .form-panel__tel-input:focus {
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════
   CHECKBOX — consent field
═══════════════════════════════════════════════════════════════════════ */

.form-panel__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-ink-700);
  line-height: var(--lh-snug);
  cursor: pointer;
}

.form-panel__checkbox input[type="checkbox"] {
  margin-top: 0.2em;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--c-blue-500);
}

/* ══════════════════════════════════════════════════════════════════════
   CAPTCHA
═══════════════════════════════════════════════════════════════════════ */

.form-panel__captcha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.form-panel__captcha-display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-sm);
  background-color: var(--c-bg-50);
}

.form-panel__captcha-code {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-heading, var(--font-body));
  font-size: var(--fs-h4, var(--fs-h3));
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  user-select: none;
}

.form-panel__captcha-char {
  display: inline-block;
}

.form-panel__captcha-refresh {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: var(--c-ink-400);
  cursor: pointer;
}

.form-panel__captcha-refresh:hover,
.form-panel__captcha-refresh:focus-visible {
  color: var(--c-blue-500);
}

@media (max-width: 480px) {
  .form-panel__captcha {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   HONEYPOT — visually hidden; not sr-only (bots still see it)
═══════════════════════════════════════════════════════════════════════ */

.form-panel__pot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   SUBMIT BUTTON
═══════════════════════════════════════════════════════════════════════ */

.form-panel__submit {
  align-self: flex-start;
}

.form-panel--contact .form-panel__submit {
  align-self: stretch;
  width: 100%;
  justify-content: center;
}

.form-panel__submit[disabled],
.form-panel__submit[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .form-panel__title {
    font-size: var(--fs-h3);
  }

  .form-panel__submit {
    align-self: stretch; /* full-width button on tablet */
    justify-content: center;
  }
}

@media (max-width: 375px) {
  /* ≥16px on inputs prevents iOS auto-zoom on focus */
  .form-panel__input,
  .form-panel__select,
  .form-panel__textarea {
    font-size: 1rem; /* 16px — minimum for iOS no-zoom; var(--fs-body) may be <16px */
  }

  .form-panel__form {
    gap: var(--sp-4);
  }
}
/*
 * People Grid — simple mentor card layout
 * BEM: .people-grid / __head / __heading / __sub / __list / __card / __tagline / __cta
 */

.people-grid {
  padding-block: var(--sp-10);
  background-color: var(--c-white);
}

/* ── Head ────────────────────────────────────────────────────────── */

.people-grid__head {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.people-grid__heading {
  font-family: "Circular Spotify", sans-serif;
  font-size: 56px;
  font-weight: 400;
  color: var(--c-ink-900);
  margin: 0 0 var(--sp-4);
  line-height: 1.1;
}

.people-grid__sub {
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #475467;
  line-height: var(--lh-relaxed);
  margin: 0 auto;
}

/* ── Slider wrap ─────────────────────────────────────────────────── */

.people-grid__slider-wrap {
  overflow: hidden;
}

/* ── Card track ─────────────────────────────────────────────────── */

.people-grid__list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--sp-4);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.people-grid__list::-webkit-scrollbar {
  display: none;
}

/* ── Individual card ─────────────────────────────────────────────── */

.people-grid__card {
  flex: 0 0 calc(33.333% - var(--sp-4) * 2 / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 20px;
  background-color: #EEF8FF;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .people-grid__card {
    flex: 0 0 calc(50% - var(--sp-4) / 2);
  }
}

@media (max-width: 480px) {
  .people-grid__card {
    flex: 0 0 85%;
  }
}

.people-grid__card-name {
  font-family: "Circular Spotify", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #2178BD;
  line-height: 1;
  margin: 0.5rem 0 1rem;
  padding: 0;
  position: relative;
}

.people-grid__card-name::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: rgb(33, 120, 189);
  margin-top: 0.5rem;
}

.people-grid__card-underline {
  display: block;
  width: 2.5rem;
  height: 2px;
  background-color: var(--c-blue-600);
  border-radius: 1px;
  margin-bottom: var(--sp-1);
}

.people-grid__card-company {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgb(71, 84, 103);
  line-height: var(--lh-snug);
}

.people-grid__card-role {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgb(71, 84, 103);
  line-height: var(--lh-snug);
}

/* ── Tagline ─────────────────────────────────────────────────────── */

.people-grid__tagline {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-ink-500);
  margin: 0 0 var(--sp-5);
}

/* ── CTA ─────────────────────────────────────────────────────────── */

.people-grid__cta {
  display: flex;
  justify-content: center;
}

.people-grid__cta .btn--outline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 2px solid var(--c-ink-900);
  color: var(--c-ink-900);
  background: transparent;
  border-radius: 99px;
  padding: var(--sp-3) var(--sp-6);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.people-grid__cta .btn--outline:hover {
  background-color: var(--c-ink-900);
  color: var(--c-white);
}