/*
 * Course-page bespoke sections — MSEED Education
 *
 * Covers sections unique to single-course.php (parent degree layout):
 *   .course-overview   — tabs(overview/eligibility/fee) section
 *   .curriculum        — curriculum accordion section
 *   .careers           — job opportunities grid
 *   .how-to-apply      — 4-step application guide
 *   .other-programs    — related program cards (conditional)
 *
 * Organism components (hero, tabs/accordion, step-card, card-grid, cta-band)
 * have their own _component.css files.
 *
 * All values via var(--*). Breakpoints use raw px.
 */

/* ══════════════════════════════════════════════════════════════════════
   COURSE HERO FOOTER — specs (left) + Download Brochure (right) on one row.
   Scoped here (course bundle) so the opt-in hero footer_row layout never
   touches other pages. Markup: hero.php emits .hero__footer only when the
   caller passes footer_row => true (course template does).
═══════════════════════════════════════════════════════════════════════ */

.hero__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: var(--sp-8);
}

.hero__footer .hero__specs,
.hero__footer .hero__actions {
  margin: 0;
}

@media (max-width: 768px) {
  .hero__footer {
    align-items: stretch;
    margin-top: var(--sp-7);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   COURSE OVERVIEW — tabs section
═══════════════════════════════════════════════════════════════════════ */

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

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

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

/* Tab content typography — applies inside accordion__body within course-overview */

.course-overview .accordion__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  margin: 0 0 var(--sp-4);
}

.course-overview .accordion__body ul,
.course-overview .accordion__body ol {
  margin: 0 0 var(--sp-4);
  padding-inline-start: var(--sp-5);
}

.course-overview .accordion__body li {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  margin-bottom: var(--sp-2);
}

/* ══════════════════════════════════════════════════════════════════════
   TRACK INTRO — split-layout (child specialisation only)
═══════════════════════════════════════════════════════════════════════ */

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

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

.track-intro__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-8);
  align-items: start;
}

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

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

.track-intro__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  margin: 0 0 var(--sp-5);
}

.track-intro__facts {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.track-intro__fact {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  padding-inline-start: var(--sp-5);
  position: relative;
}

.track-intro__fact::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: var(--sp-3);
  height: var(--sp-3);
  border-radius: var(--r-circle);
  background-color: var(--c-accent-500);
}

/* Snapshot card — right column */

.track-intro__snapshot {
  background-color: var(--c-navy-900);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  color: var(--c-white);
}

.track-intro__snapshot-heading {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-5);
}

.track-intro__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.track-intro__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: var(--sp-4);
}

.track-intro__stat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.track-intro__stat-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--c-accent-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.track-intro__stat-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  line-height: var(--lh-snug);
}

/* ══════════════════════════════════════════════════════════════════════
   SPECIALIZATIONS
═══════════════════════════════════════════════════════════════════════ */

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

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

.specializations__eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-blue-500);
  margin: 0 0 var(--sp-6);
}

/* ── Bachelors-in-event-management/experiential-marketing only — scoped via
      .specializations--expmkt, never touches the shared base rules above. ── */
.specializations--expmkt {
  background-color: var(--c-blue-50);
}

.specializations--expmkt .specializations__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-transform: none;
  font-family: "Circular Spotify", sans-serif;
  font-size: 20px;
  font-weight: var(--fw-regular);
  letter-spacing: 5.5px;
  color: var(--c-ink-900);
}

.specializations--expmkt .specializations__eyebrow::before,
.specializations--expmkt .specializations__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--c-line-200);
}

.specializations--expmkt .program-card {
  background-color: var(--c-white);
  border: 1px solid var(--c-blue-200);
}

.specializations--expmkt .program-card__title,
.specializations--expmkt .program-card__title-link {
  font-family: "Circular Spotify", sans-serif;
  font-weight: var(--fw-semibold);
  font-size: 24px;
  color: var(--c-blue-500);
}

/* ══════════════════════════════════════════════════════════════════════
   CURRICULUM
═══════════════════════════════════════════════════════════════════════ */

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

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

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

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

.curriculum__list {
  margin: 0;
  padding-inline-start: var(--sp-5);
  list-style: disc;
}

.curriculum__item {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  padding-block: var(--sp-1);
}

.curriculum__group-heading {
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  margin: var(--sp-4) 0 var(--sp-2);
}

.curriculum__group-heading:first-child {
  margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CAREERS (JOB OPPORTUNITIES)
═══════════════════════════════════════════════════════════════════════ */

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

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

.careers__head {
  max-width: 44rem;
  margin: 0 0 var(--sp-7);
}

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

.careers__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

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

/* ── Viewport + track — no-JS: static grid (3/2/1 cols, matches slider's
      per-view counts so layout doesn't jump once JS upgrades it). ────── */
.careers__viewport {
  width: 100%;
}

.careers--ready .careers__viewport {
  overflow: hidden;
}

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

@media (max-width: 1024px) {
  .careers__track {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ── .--ready (JS): grid → flex row, one "page" of slides per view,
      transform-slid between pages. ─────────────────────────────────── */
.careers--ready .careers__track {
  display: flex;
  gap: var(--sp-5);
  transition: transform 300ms var(--ease);
  will-change: transform;
}

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

.careers__item {
  background-color: var(--c-bg-50);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

/* 3 slides per view desktop, 2 tablet, 1 mobile — matches the no-JS grid
   breakpoints above. Basis subtracts the flex `gap` so 3 full cards + 2
   gaps fit exactly one viewport width (one "page"). */
.careers--ready .careers__item {
  flex: 0 0 calc((100% - (2 * var(--sp-5))) / 3);
  min-width: 0;
}

@media (max-width: 1024px) {
  .careers--ready .careers__item {
    flex-basis: calc((100% - var(--sp-5)) / 2);
  }
}

@media (max-width: 768px) {
  .careers--ready .careers__item {
    flex-basis: 100%;
  }
}

/* ── Controls (prev / next) — below the slider, hidden until JS-ready. ── */
.careers__controls {
  display: none;
}

.careers--ready .careers__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.careers__prev,
.careers__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  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);
}

.careers__prev:hover,
.careers__next:hover {
  background-color: var(--c-navy-900);
  color: var(--c-white);
}

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

.careers__prev:disabled,
.careers__next:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

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

/* Dark variant controls (careers--expmkt) flip to white outline. */
.careers--expmkt .careers__prev,
.careers--expmkt .careers__next {
  border-color: var(--c-white);
  color: var(--c-white);
}

.careers--expmkt .careers__prev:hover,
.careers--expmkt .careers__next:hover {
  background-color: var(--c-white);
  color: var(--c-navy-900);
}

.careers__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

.careers__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ── Dark variant — bachelors-in-event-management/experiential-marketing
      page only (scoped via .careers--expmkt, not the shared .careers base). ── */
.careers--expmkt {
  background-color: var(--c-navy-800);
}

.careers--expmkt .careers__heading,
.careers--expmkt .careers__sub {
  color: var(--c-white);
}

.careers--expmkt .careers__item {
  background-color: var(--c-navy-900);
  border-color: var(--c-navy-700);
}

.careers--expmkt .careers__title,
.careers--expmkt .careers__desc {
  color: var(--c-white);
}

/* ══════════════════════════════════════════════════════════════════════
   HOW TO APPLY
═══════════════════════════════════════════════════════════════════════ */

.how-to-apply {
  padding-block: var(--sp-9);
  background-color: var(--c-bg-50);
}

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

.how-to-apply__head {
  margin-bottom: var(--sp-7);
  text-align: center;
}

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

.how-to-apply__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 1024px) {
  .how-to-apply__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ══════════════════════════════════════════════════════════════════════
   OTHER PROGRAMS
═══════════════════════════════════════════════════════════════════════ */

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

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

.other-programs__head {
  margin-bottom: var(--sp-7);
}

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

.other-programs__heading + .other-programs__sub {
  margin-top: var(--sp-3);
}

.other-programs__sub {
  max-width: 48rem;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--c-ink-500);
  line-height: var(--lh-base);
  margin: 0 0 var(--sp-2);
}

.other-programs__sub:last-of-type {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   PAYMENT GUIDELINES — callout box (page-admissionform.php)
═══════════════════════════════════════════════════════════════════════ */

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

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

.payment-guidelines__card {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--sp-7);
  background-color: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-md);
}

.payment-guidelines__heading {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  margin: 0 0 var(--sp-4);
}

.payment-guidelines__list,
.payment-guidelines__methods {
  margin: 0 0 var(--sp-4);
  padding-inline-start: var(--sp-5);
  color: var(--c-ink-700);
  line-height: var(--lh-base);
}

.payment-guidelines__methods {
  margin-bottom: 0;
}

.payment-guidelines__intro {
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
  margin: 0 0 var(--sp-2);
}

/* ══════════════════════════════════════════════════════════════════════
   FAQ SECTION (page-admissionform.php)
═══════════════════════════════════════════════════════════════════════ */

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

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

.faq-section__heading {
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-7);
}

/* ══════════════════════════════════════════════════════════════════════
   BACK STAGE EXPERIENCE — 2-up event slider (masters page only)
═══════════════════════════════════════════════════════════════════════ */
.backstage {
  padding-block: var(--sp-9);
  background-color: #000;
}

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

.backstage__head {
  text-align: center;
  color: var(--c-white);
  margin-bottom: var(--sp-7);
}

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

.backstage__sub {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--lh-base);
  margin: 0;
}

.backstage__track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.backstage__track::-webkit-scrollbar {
  display: none;
}

.backstage__card {
  flex: 0 0 calc(50% - var(--sp-5) / 2);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (max-width: 768px) {
  .backstage__card {
    flex-basis: 100%;
  }
}

.backstage__card-media {
  border-radius: var(--r-card);
  overflow: hidden;
}

.backstage__card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.backstage__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.backstage__card-title {
  font-family: "Circular Spotify", sans-serif;
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-white);
  margin: 0;
}

.backstage__card-text {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   WHAT YOU'LL MASTER — 8-item curriculum grid (masters page only)
═══════════════════════════════════════════════════════════════════════ */
.what-master {
  padding-block: var(--sp-9);
  background-color: var(--c-bg-50);
}

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

.what-master__head {
  text-align: center;
  margin-bottom: var(--sp-7);
}

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

.what-master__sub {
  font-size: var(--fs-body);
  color: var(--c-ink-500);
  line-height: var(--lh-base);
  margin: 0;
}

.what-master__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 1024px) {
  .what-master__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .what-master__grid {
    grid-template-columns: 1fr;
  }
}

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

.what-master__card-icon {
  display: inline-flex;
  color: var(--c-blue-500);
  margin-bottom: var(--sp-3);
}

.what-master__card-icon svg {
  width: 2rem;
  height: 2rem;
}

.what-master__card-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}

.what-master__card-text {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   INDUSTRY SPEAK — 2-up image slider (.js-slider upgraded by slider.js)
═══════════════════════════════════════════════════════════════════════ */
.industry-speak {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

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

.industry-speak__head {
  text-align: center;
  margin-bottom: var(--sp-7);
}

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

.industry-speak__sub {
  font-size: var(--fs-body);
  color: var(--c-ink-500);
  line-height: var(--lh-base);
  margin: 0;
}

/* Scroll-snap track — 2 cards per view (1 on mobile). */
.industry-speak__track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.industry-speak__track::-webkit-scrollbar {
  display: none;
}

.industry-speak__slide {
  flex: 0 0 calc(50% - var(--sp-5) / 2);
  scroll-snap-align: start;
}

@media (max-width: 768px) {
  .industry-speak__slide {
    flex-basis: 100%;
  }
}

.industry-speak__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

/* ══════════════════════════════════════════════════════════════════════
   PRESS MEDIA SLIDER — bachelors page only, dynamic press_item CPT feed
═══════════════════════════════════════════════════════════════════════ */
.press-slider {
  padding-block: var(--sp-9);
  background-color: var(--c-bg-50);
}

.press-slider__head {
  max-width: 40rem;
  margin: 0 auto var(--sp-7);
  text-align: center;
}

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

.press-slider__sub {
  font-size: var(--fs-body);
  color: var(--c-ink-500);
  line-height: var(--lh-base);
  margin: 0;
}

/* Scroll-snap track — 3 cards per view (2 tablet, 1 mobile). */
.press-slider__track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.press-slider__track::-webkit-scrollbar {
  display: none;
}

.press-slider__slide {
  flex: 0 0 calc((100% - 2 * var(--sp-5)) / 3);
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .press-slider__slide {
    flex-basis: calc((100% - var(--sp-5)) / 2);
  }
}

@media (max-width: 768px) {
  .press-slider__slide {
    flex-basis: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   CAREER PATHS SLIDER — bachelors page only
═══════════════════════════════════════════════════════════════════════ */
.career-paths {
  padding-block: var(--sp-9);
  background-color: var(--c-blue-50);
}

.career-paths__head {
  max-width: 40rem;
  margin: 0 auto var(--sp-7);
  text-align: center;
}

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

.career-paths__sub {
  font-size: var(--fs-body);
  color: var(--c-ink-500);
  line-height: var(--lh-base);
  margin: 0;
}

/* Scroll-snap track — 4 cards per view (2 tablet, 1 mobile). */
.career-paths__track {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.career-paths__track::-webkit-scrollbar {
  display: none;
}

.career-paths__slide {
  flex: 0 0 calc((100% - 3 * var(--sp-5)) / 4);
  scroll-snap-align: start;
  background-color: var(--c-white);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}

@media (max-width: 1024px) {
  .career-paths__slide {
    flex-basis: calc((100% - var(--sp-5)) / 2);
  }
}

@media (max-width: 768px) {
  .career-paths__slide {
    flex-basis: 100%;
  }
}

.career-paths__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 251 / 167;
  object-fit: cover;
  border-radius: var(--r-card);
  margin-bottom: var(--sp-3);
}

.career-paths__title {
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
  line-height: var(--lh-snug);
  text-align: center;
  margin: 0;
}

/* ── Course FAQ section ──────────────────────────────────────────────── */
.course-faq {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

.course-faq__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  text-align: center;
  margin: 0 0 var(--sp-7);
}

@media (max-width: 768px) {
  .course-faq {
    padding-block: var(--sp-7);
  }
  .course-faq__heading {
    margin-bottom: var(--sp-5);
  }
}

/* ── How to Apply sub-copy ───────────────────────────────────────────── */
.how-to-apply__sub {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: var(--sp-2) 0 0;
}

.how-to-apply__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* ── Certificate only: periwinkle hero gets the campus-sky photo bg and
      extra vertical padding (other periwinkle pages keep the gradient) ── */
.page-template-page-certificate .hero--periwinkle {
  background-image:
    url("../../img/735b58770b2031fa.png"),
    radial-gradient(
      ellipse at center,
      var(--c-white) 0%,
      var(--c-blue-100) 100%
    );
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat;
}

.page-template-page-certificate .hero--periwinkle .container {
  padding-block: var(--sp-9);
}

/* ── Certificate: upper section — hero copy + pillar cards + lead on one
      light photo background; spec computed styles (Circular Spotify,
      navy #0F3557 text, centered) ───────────────────────────────────── */
.cert-hero {
  position: relative;
  padding: var(--sp-9) 0 var(--sp-7);
}
.cert-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cert-hero__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cert-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cert-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-white);
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-navy-700);
}

.cert-hero__badge svg {
  flex: 0 0 auto;
  fill: var(--c-accent-500);
}

.cert-hero__title {
  font-family: var(--font-head);
  font-size: var(--fs-hero-title);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--c-navy-700);
  margin: 0;
}
.cert-hero__tagline {
  font-family: var(--font-head);
  font-size: var(--fs-hero-tagline);
  font-weight: var(--fw-regular);
  color: var(--c-navy-700);
  margin: var(--sp-2) 0 0;
}
.cert-hero__sub {
  max-width: 60rem;
  margin: var(--sp-4) auto 0;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--c-navy-700);
}
.cert-hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* ── Certificate: 4-pillar photo cards (image + navy caption plate) ──── */
.cert-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
}
.cert-pillars__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
}
.cert-pillars__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cert-pillars__plate {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 90%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-navy-900);
  border-top-left-radius: var(--r-card);
}
.cert-pillars__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}
.cert-pillars__sub {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin: 0;
}
.cert-pillars__lead {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 60rem;
  margin: var(--sp-7) auto var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-blue-50);
  border-radius: var(--r-card);
  text-align: left;
}

.cert-pillars__lead svg {
  flex: 0 0 auto;
}

.cert-pillars__lead-text {
  margin: 0;
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-blue-500);
}

/* ── Certificate: guaranteed-placement strip ─────────────────────────── */
.cert-placement-strip {
  background: var(--c-accent-500);
  padding: var(--sp-4) 0;
}
.cert-placement-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.cert-placement-strip__inner svg {
  flex: 0 0 auto;
}
.cert-placement-strip__text {
  margin: 0;
  text-align: center;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--c-white);
}


/* ── Certificate: Admissions Open banner ─────────────────────────────── */
.admissions-banner {
  background: var(--c-navy-900);
  padding: var(--sp-7) 0;
}
.admissions-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-9);
  flex-wrap: wrap;
}
.admissions-banner__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: var(--c-white);
}

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

@media (max-width: 1024px) {
  .cert-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cert-pillars__grid { grid-template-columns: 1fr; }
}

/* ── Application modal — native <dialog>, opened by modal.js ─────────── */
.mseed-modal {
  /* The global reset zeroes margins, which kills the UA's dialog centering —
     re-centre explicitly. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 34rem);
  max-height: min(85vh, 85dvh);
  overflow-y: auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-pop);
}

.mseed-modal[open] {
  animation: mseed-modal-in 0.18s ease-out;
}

@keyframes mseed-modal-in {
  from {
    opacity: 0;
    transform: translateY(var(--sp-2));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mseed-modal::backdrop {
  background: color-mix(in srgb, var(--c-navy-900) 65%, transparent);
  backdrop-filter: blur(3px);
}

.mseed-modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border: 0;
  border-radius: var(--r-circle);
  background: var(--c-bg-100);
  font-size: var(--fs-body-lg);
  line-height: 1;
  color: var(--c-ink-500);
  cursor: pointer;
  z-index: 1;
}

.mseed-modal__close:hover,
.mseed-modal__close:focus-visible {
  background: var(--c-line-200);
  color: var(--c-ink-900);
}

/* Video variant — 16:9 player, edge-to-edge, floating close */
.mseed-modal--video {
  width: min(92vw, 60rem);
  height: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.mseed-modal--video .mseed-modal__frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-navy-950);
  box-shadow: var(--sh-pop);
}

.mseed-modal--video .mseed-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mseed-modal--video .mseed-modal__close {
  top: calc(-1 * var(--sp-6) - var(--sp-2));
  right: 0;
  background: var(--c-white);
  color: var(--c-navy-900);
}

.mseed-modal--video .mseed-modal__close:hover,
.mseed-modal--video .mseed-modal__close:focus-visible {
  background: var(--c-accent-400);
  color: var(--c-navy-900);
}

/* ── Instagram embed variant — portrait frame ────────────────────────── */
.mseed-modal--ig {
  width: min(92vw, 25rem);
  height: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.mseed-modal--ig .mseed-modal__frame {
  height: min(85vh, 46rem);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-pop);
}

.mseed-modal--ig .mseed-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mseed-modal--ig .mseed-modal__close {
  top: calc(-1 * var(--sp-6) - var(--sp-2));
  right: 0;
  background: var(--c-white);
  color: var(--c-navy-900);
}

.mseed-modal--ig .mseed-modal__close:hover,
.mseed-modal--ig .mseed-modal__close:focus-visible {
  background: var(--c-accent-400);
  color: var(--c-navy-900);
}

/* ── Book A Call — nopaperforms widget, embedded form frame ──────────── */
.mseed-modal--form {
  width: min(92vw, 48rem);
  height: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.mseed-modal--form .mseed-modal__frame {
  height: min(85vh, 700px);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--sh-pop);
}

.mseed-modal--form .mseed-modal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.mseed-modal--form .mseed-modal__close {
  top: calc(-1 * var(--sp-6) - var(--sp-2));
  right: 0;
  background: var(--c-white);
  color: var(--c-navy-900);
}

.mseed-modal--form .mseed-modal__close:hover,
.mseed-modal--form .mseed-modal__close:focus-visible {
  background: var(--c-accent-400);
  color: var(--c-navy-900);
}

/* ══════════════════════════════════════════════════════════════════════
   SOCIAL MEDIA CENTER — Instagram tiles (masters page only)
═══════════════════════════════════════════════════════════════════════ */
.social-center {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

.social-center__head {
  margin-bottom: var(--sp-6);
  text-align: center;
}

.social-center__heading {
  font-family: "Circular Spotify", sans-serif;
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-navy-900);
  margin: 0;
}

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

@media (max-width: 768px) {
  .social-center__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.social-center__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-bg-50);
}

.social-center__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms var(--ease);
}

.social-center__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}

.social-center__play svg {
  width: 3rem;
  height: 3rem;
  padding: 0.7rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
}

.social-center__tile:hover .social-center__play,
.social-center__tile:focus-visible .social-center__play {
  opacity: 1;
}

.social-center__tile:hover .social-center__img {
  transform: scale(1.05);
}

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

@media (prefers-reduced-motion: reduce) {
  .social-center__img,
  .social-center__play {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ELIGIBILITY BAND — masters page only
═══════════════════════════════════════════════════════════════════════ */
.eligibility {
  padding-block: var(--sp-9);
  background-color: var(--c-white);
}

.eligibility__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-8);
  background-color: var(--c-navy-900);
  border-radius: var(--r-card);
}

.eligibility__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.eligibility__heading {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-accent-400);
}

.eligibility__line {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-white);
}

.eligibility__btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--sp-6);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  text-decoration: none;
  white-space: nowrap;
  background: var(--c-accent-500);
  border-radius: var(--r-pill);
  transition: background-color 150ms var(--ease);
}

.eligibility__btn:hover,
.eligibility__btn:focus-visible {
  background: var(--c-accent-400);
}

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

.eligibility__badge {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-accent-400);
}

.eligibility__scholarship {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.eligibility__scholarship-heading {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-white);
}

.eligibility__scholarship-list {
  margin: 0;
  padding-inline-start: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-snug);
  color: var(--c-white);
}

@media (max-width: 768px) {
  .eligibility__card {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eligibility__btn {
    transition: none;
  }
}
/*
 * Feature List section — MSEED Education
 *
 * BEM: .feature-list / --card / --numbered / --tile
 *      __head / __heading / __sub / __grid / --2col / --3col / --4col
 *      __item / __number / __body / __title / __text
 *
 * Static, non-interactive grid. Column count via --_cols; reflows to 1 col mobile.
 * All values via var(--*) design tokens. No hardcoded hex, no raw px for spacing/color.
 * Breakpoints use raw px — custom props are not valid inside @media queries.
 */

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

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

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

/* ── Head ───────────────────────────────────────────────────────────── */

.feature-list__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: var(--container);
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

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

.feature-list__sub {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
}

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

.feature-list__grid {
  --_cols: 3;

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

.feature-list__grid--2col { --_cols: 2; }
.feature-list__grid--3col { --_cols: 3; }
.feature-list__grid--4col { --_cols: 4; }

/* ══════════════════════════════════════════════════════════════════════
   ITEM — shared
═══════════════════════════════════════════════════════════════════════ */

.feature-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
}

.feature-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.feature-list__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
}

.feature-list__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
}

/* ══════════════════════════════════════════════════════════════════════
   VARIANT — card (bordered / shadow)
═══════════════════════════════════════════════════════════════════════ */

.feature-list--card .feature-list__item {
  padding: var(--sp-5);
  background-color: var(--c-white);
  border: var(--outline-width) solid var(--c-line-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

/* ── Fade slider — 3/2/1 items per view, prev/next below. No horizontal
      movement: paging cross-fades the visible item set via opacity only.
      Without JS (.feature-list--ready absent): plain static grid. ───────── */

.feature-list--card .feature-list__viewport {
  position: relative;
}

.feature-list--card.feature-list--ready .feature-list__item {
  opacity: 1;
  transition: opacity 300ms var(--ease);
}

.feature-list--card.feature-list--ready .feature-list__item[hidden] {
  display: none;
}

.feature-list--card.feature-list--ready .feature-list__item.is-leaving {
  opacity: 0;
}

.feature-list--card.feature-list--ready .feature-list__item.is-entering {
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .feature-list--card.feature-list--ready .feature-list__item {
    transition: none;
  }
}

.feature-list__controls {
  display: none;
}

.feature-list--ready .feature-list__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.feature-list__prev,
.feature-list__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--r-circle);
  border: 2px solid var(--c-ink-900);
  background: transparent;
  color: var(--c-ink-900);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.feature-list__prev:hover,
.feature-list__next:hover {
  background-color: var(--c-ink-900);
  color: var(--c-white);
}

.feature-list__prev:focus-visible,
.feature-list__next:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

.feature-list__prev:disabled,
.feature-list__next:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .feature-list__prev,
  .feature-list__next {
    transition: none;
  }
}

/* Per-view breakpoints for the card slider — 3 desktop / 2 tablet / 1 mobile
   (overrides the generic 768/375 collapse below for this variant only). */
@media (max-width: 1024px) {
  .feature-list--card .feature-list__grid--3col {
    --_cols: 2;
  }
}

@media (max-width: 768px) {
  .feature-list--card .feature-list__grid--3col {
    --_cols: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VARIANT — numbered (check-circle list card + optional tilted photo)
═══════════════════════════════════════════════════════════════════════ */

.feature-list__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-8);
  align-items: center;
}

/* No photo → centred list card on its own. */
.feature-list__split--solo {
  grid-template-columns: 1fr;
  max-width: 48rem;
  margin-inline: auto;
}

.feature-list__panel {
  border: var(--outline-width) solid var(--c-line-200);
  border-radius: var(--r-card);
  padding-inline: var(--sp-6);
}

.feature-list__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-list__check-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: var(--outline-width) solid var(--c-line-200);
}

.feature-list__check-item:last-child {
  border-bottom: none;
}

.feature-list__check {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--sp-4);
  height: var(--sp-4);
}

.feature-list__check svg {
  width: 100%;
  height: 100%;
  fill: var(--c-blue-500);
}

.feature-list__check-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-ink-900);
}

.feature-list__media {
  display: flex;
  justify-content: center;
}

.feature-list__media-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  box-shadow: var(--sh-pop);
  transform: rotate(4deg);
}

/* ══════════════════════════════════════════════════════════════════════
   VARIANT — tile (compact flat)
═══════════════════════════════════════════════════════════════════════ */

.feature-list--tile .feature-list__item {
  padding: var(--sp-4);
  background-color: var(--c-bg-50);
  border-radius: var(--r-md);
}

.feature-list--tile .feature-list__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.feature-list--tile .feature-list__text {
  font-size: var(--fs-small);
}

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

@media (max-width: 768px) {
  /* 4-up / 3-up collapse to 2 cols; 2-up stays 2. */
  .feature-list__grid--4col,
  .feature-list__grid--3col {
    --_cols: 2;
  }

  .feature-list__head {
    margin-bottom: var(--sp-6);
  }

  /* Stack list card above photo; drop the tilt. */
  .feature-list__split {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .feature-list__media-img {
    transform: none;
  }
}

@media (max-width: 375px) {
  /* All variants → single column. */
  .feature-list__grid--2col,
  .feature-list__grid--3col,
  .feature-list__grid--4col {
    --_cols: 1;
  }
}
/*
 * Comparison section — MSEED Education
 *
 * BEM: .comparison / __head / __heading / __body
 *      / __grid (--2col) / __col-head (--criteria/--a/--b)
 *      / __row / __cell (--criteria/--a/--b) / __cell-body / __cell-label
 *      / __icon / __badge (--check/--cross) / __text (--criterion)
 *
 * Markup is row-major: one .comparison__row per criterion, holding all 3
 * columns' cells. Desktop/tablet: .comparison__row is `display: contents`,
 * so its cells become direct children of the 3-col grid and auto-flow into
 * column 1/2/3 — same visual result (and same 3 solid-color panels) as the
 * old per-column layout, just sourced row-first. Mobile: the row becomes a
 * visible card and its cells stack vertically inside it.
 *
 * Spec (certificate-program.html): navy-700 section, 2px white top border,
 * left-aligned head, 3 flush panels — criteria (navy-950, radius left),
 * MSEED (blue-500), traditional (navy-950, radius right). All text white.
 *
 * All values via var(--*). Breakpoints use raw px.
 */

.comparison {
  padding-block: var(--sp-9);
  background-color: var(--c-navy-700);
  border-top: 2px solid var(--c-white);
}

/* ── Head — left aligned ─────────────────────────────────────────────── */

.comparison__head {
  text-align: left;
  margin-bottom: var(--sp-7);
}

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

.comparison__body {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-white);
  margin: var(--sp-3) 0 0;
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP / TABLET (≥769px) — 3 flush panels, row-major source
═══════════════════════════════════════════════════════════════════════ */

.comparison__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

.comparison__grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.comparison__row {
  display: contents;
}

/* ── Column heads (row 1) + cells (rows 2+) share one solid-color block
      per column: col-head owns the top radius/padding, the last row owns
      the bottom radius/padding, everything between is flush same-color. ── */

.comparison__col-head,
.comparison__cell {
  background-color: var(--c-navy-950);
  padding-inline: var(--sp-6);
}

.comparison__col-head--a,
.comparison__cell--a {
  background-color: var(--c-blue-500);
}

.comparison__col-head--criteria,
.comparison__cell--criteria {
  border-radius: 0;
}

.comparison__col-head--criteria {
  border-top-left-radius: var(--r-card);
}

.comparison__col-head--b {
  border-top-right-radius: var(--r-card);
}

.comparison__row:last-of-type .comparison__cell--criteria {
  border-bottom-left-radius: var(--r-card);
}

.comparison__row:last-of-type .comparison__cell--b {
  border-bottom-right-radius: var(--r-card);
}

.comparison__col-head {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-white);
  padding-top: var(--sp-6);
  padding-bottom: calc(var(--sp-4) / 2);
}

.comparison__row:first-of-type .comparison__cell {
  padding-top: calc(var(--sp-4) / 2);
}

.comparison__row:last-of-type .comparison__cell {
  padding-bottom: var(--sp-6);
}

.comparison__cell {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: calc(var(--sp-4) / 2);
}

/* Per-row-per-column label ("MSEED College" / "Traditional Degree") —
   redundant with the col-head on desktop/tablet, shown on mobile only. */
.comparison__cell-label {
  display: none;
}

.comparison__cell-body {
  display: contents;
}

/* ── Icons ───────────────────────────────────────────────────────────── */

.comparison__icon,
.comparison__badge {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--sp-4);
  height: var(--sp-4);
  margin-top: 0.15em;
}

.comparison__icon svg,
.comparison__badge svg {
  width: 100%;
  height: 100%;
  fill: var(--c-white);
}

.comparison__cell--criteria .comparison__icon svg {
  fill: var(--c-cmp-icon-a);
}

.comparison__badge--check svg {
  fill: var(--c-cmp-icon-b);
}

.comparison__badge--cross svg {
  fill: var(--c-cmp-icon-c);
}

.comparison__text {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-white);
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE (≤768px) — one card per row, all 3 columns' data inside it
═══════════════════════════════════════════════════════════════════════ */

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

  .comparison__grid,
  .comparison__grid--2col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .comparison__col-head {
    display: none;
  }

  .comparison__row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    background-color: var(--c-blue-500);
    border-radius: var(--r-card);
    padding: var(--sp-5);
  }

  .comparison__cell {
    background: none;
    padding: 0;
  }

  .comparison__cell--criteria {
    align-items: center;
  }

  .comparison__icon {
    width: var(--sp-6);
    height: var(--sp-6);
    margin-top: 0;
  }

  .comparison__text--criterion {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
  }

  .comparison__cell--a,
  .comparison__cell--b {
    border-radius: var(--r-md);
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  .comparison__cell--a {
    background-color: rgba(255, 255, 255, 0.14); /* lighter tint over the card's blue-500 */
  }

  .comparison__cell--b {
    background-color: var(--c-navy-950);
  }

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

  .comparison__cell-label {
    display: block;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--c-white);
  }

  .comparison__badge {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-circle);
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }

  .comparison__badge svg {
    width: 60%;
    height: 60%;
  }

  .comparison__badge--check {
    background-color: var(--c-cmp-icon-b);
  }

  .comparison__badge--check svg {
    fill: var(--c-navy-950);
  }

  .comparison__badge--cross {
    background-color: var(--c-cmp-icon-c);
  }

  .comparison__badge--cross svg {
    fill: var(--c-white);
  }
}
/*
 * People Cards section — MSEED Education
 *
 * BEM: .people-cards / --profile / --quote
 *      __head / __heading / __sub / __grid / __item / __tagline
 *      .people-card / __photo / __img / __body / __quote / __quote-text
 *                   / __name / __role / __meta
 *
 * profile variant: circle photo, name + role + specialisation meta.
 * quote variant:   rounded-rect photo, testimonial blockquote + name + role.
 * Column count driven by [data-cols]; grid reflows to 2 → 1 on small screens.
 *
 * All values via var(--*). No hardcoded hex/px for spacing/color.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

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

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

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

/* Trim padding where sections stack against neighbours. */
.people-cards--quote {
  padding-top: var(--sp-6);
}

.people-cards--profile {
  padding-bottom: var(--sp-6);
}

/* ── Head ───────────────────────────────────────────────────────────── */

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

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

.people-cards__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  max-width: 42rem;
  margin: 0;
}

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

.people-cards__grid {
  --_cols: 4;

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

.people-cards__grid[data-cols="2"] { --_cols: 2; }
.people-cards__grid[data-cols="3"] { --_cols: 3; }
.people-cards__grid[data-cols="4"] { --_cols: 4; }

/* Slider variant — CSS-only horizontal scroll-snap track (no JS needed).
   Card width derives from --_cols so `columns` still sets cards-per-view. */
.people-cards__grid--slider {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.people-cards__grid--slider::-webkit-scrollbar {
  display: none;
}

.people-cards__grid--slider > .people-cards__item {
  flex: 0 0 calc( ( 100% - ( var(--_cols) - 1 ) * var(--sp-5) ) / var(--_cols) );
  scroll-snap-align: start;
}

@media (max-width: 768px) {
  .people-cards__grid--slider > .people-cards__item {
    flex-basis: min(85%, 20rem);
  }
}

.people-cards__item {
  display: flex;
}

/* ══════════════════════════════════════════════════════════════════════
   CARD — shared
═══════════════════════════════════════════════════════════════════════ */

.people-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5);
  background-color: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

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

.people-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Name / role / meta ─────────────────────────────────────────────── */

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

.people-card__role {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-blue-500);
  margin: 0;
}

.people-card__meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   PROFILE VARIANT — circle photo
═══════════════════════════════════════════════════════════════════════ */

.people-cards--profile .people-card__photo {
  flex-shrink: 0;
  width: 7rem;    /* structural — circle diameter */
  height: 7rem;
  border-radius: var(--r-circle);
  overflow: hidden;
  border: 3px solid var(--c-line-200);
}

/* ══════════════════════════════════════════════════════════════════════
   QUOTE VARIANT — rounded-rect photo + testimonial
═══════════════════════════════════════════════════════════════════════ */

.people-cards--quote .people-card {
  align-items: flex-start;
  text-align: left;
}

.people-cards--quote .people-card__body {
  align-items: flex-start;
}

.people-cards--quote .people-card__photo {
  flex-shrink: 0;
  width: 4.5rem;   /* structural — avatar size */
  height: 4.5rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line-200);
}

.people-card__quote {
  margin: 0;
}

.people-card__quote-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  margin: 0;
}

.people-card__quote-text::before {
  content: "\201C";
}

.people-card__quote-text::after {
  content: "\201D";
}

/* ══════════════════════════════════════════════════════════════════════
   TAGLINE
═══════════════════════════════════════════════════════════════════════ */

.people-cards__tagline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.people-cards__tagline-icon {
  flex: none;
  display: inline-flex;
  line-height: 0;
}

.people-cards__tagline-icon svg {
  border-radius: 50%;
}

.people-cards__tagline {
  --_tagline-fs: 1.5rem; /* 24px — fixed, off the fluid type scale */
  display: block;
  font-family: var(--font-head);
  font-size: var(--_tagline-fs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-accent-500);
  text-align: center;
  max-width: 46rem;
  margin: 0;
}

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

@media (max-width: 1024px) {
  /* Tablet — 2 cards per row */
  .people-cards__grid[data-cols="3"],
  .people-cards__grid[data-cols="4"] {
    --_cols: 2;
  }
}

@media (max-width: 768px) {
  /* Mobile — single column for all counts */
  .people-cards__grid[data-cols="2"],
  .people-cards__grid[data-cols="3"],
  .people-cards__grid[data-cols="4"] {
    --_cols: 1;
  }

  .people-card {
    padding: var(--sp-4);
  }

  .people-cards--profile .people-card__photo {
    width: 5.5rem;
    height: 5.5rem;
  }
}

@media (max-width: 375px) {
  /* All → 1-col */
  .people-cards__grid[data-cols="2"],
  .people-cards__grid[data-cols="3"],
  .people-cards__grid[data-cols="4"] {
    --_cols: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PROFILE FADE SLIDER — "Meet Your Mentors": 4 desktop / 3 tablet / 1
   mobile per view, no horizontal movement (opacity cross-fade only).
   Without JS (.people-cards--ready absent): plain static grid.
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .people-cards--profile .people-cards__grid[data-cols="4"] {
    --_cols: 3;
  }
}

@media (max-width: 768px) {
  .people-cards--profile .people-cards__grid[data-cols="4"] {
    --_cols: 1;
  }
}

.people-cards--profile .people-cards__viewport {
  position: relative;
}

.people-cards--profile.people-cards--ready .people-cards__item {
  opacity: 1;
  transition: opacity 300ms var(--ease);
}

.people-cards--profile.people-cards--ready .people-cards__item[hidden] {
  display: none;
}

.people-cards--profile.people-cards--ready .people-cards__item.is-leaving {
  opacity: 0;
}

.people-cards--profile.people-cards--ready .people-cards__item.is-entering {
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .people-cards--profile.people-cards--ready .people-cards__item {
    transition: none;
  }
}

.people-cards__controls {
  display: none;
}

.people-cards--ready .people-cards__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.people-cards__prev,
.people-cards__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--r-circle);
  border: 2px solid var(--c-ink-900);
  background: transparent;
  color: var(--c-ink-900);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.people-cards__prev:hover,
.people-cards__next:hover {
  background-color: var(--c-ink-900);
  color: var(--c-white);
}

.people-cards__prev:focus-visible,
.people-cards__next:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

.people-cards__prev:disabled,
.people-cards__next:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .people-cards__prev,
  .people-cards__next {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   CAROUSEL VARIANT — one split-panel slide per view (quote cards)
   Left: dark quote panel (slider.js arrows repositioned here).
   Right: blue portrait panel — big name, underline bar, photo at bottom.
═══════════════════════════════════════════════════════════════════════ */

.people-cards__grid--carousel {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.people-cards__grid--carousel::-webkit-scrollbar {
  display: none;
}

.people-cards__grid--carousel > .people-cards__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
}

.people-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  width: 100%;
}

/* Left — dark quote panel */

.people-slide__quote-panel {
  display: flex;
  flex-direction: column;
  background: var(--c-navy-950);
  border-radius: var(--r-card);
  padding: var(--sp-7);
  /* room for the slider.js arrows pinned bottom-left */
  padding-bottom: calc( var(--sp-7) + var(--sp-8) );
  color: var(--c-white);
}

.people-slide__name-sm {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--c-white);
  margin: 0;
}

.people-slide__role-sm {
  font-size: var(--fs-small);
  color: var(--c-line-300);
  margin: var(--sp-1) 0 0;
}

.people-slide__quote {
  margin: var(--sp-6) 0 0;
}

.people-slide__quote p {
  font-family: var(--font-head);
  font-size: 25px; /* spec computed value — no matching type token */
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-white);
  margin: 0;
}

/* Right — blue portrait panel */

.people-slide__portrait-panel {
  display: flex;
  background: var(--c-blue-500);
  border-radius: var(--r-card);
  overflow: hidden;
}


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

/* slider.js arrows — pin bottom-left inside the quote panel, outline style */

.people-cards--quote .slider-wrap .slider-btn {
  top: auto;
  bottom: var(--sp-6);
  transform: none;
  background: transparent;
  color: var(--c-white);
  border: 2px solid var(--c-white);
  box-shadow: none;
}

.people-cards--quote .slider-wrap .slider-btn--prev {
  left: var(--sp-7);
}

.people-cards--quote .slider-wrap .slider-btn--next {
  left: calc( var(--sp-7) + var(--sp-8) );
  right: auto;
}

.people-cards--quote .slider-wrap .slider-btn:not(:disabled):hover,
.people-cards--quote .slider-wrap .slider-btn:focus-visible {
  color: var(--c-accent-400);
  border-color: var(--c-accent-400);
}

@media (max-width: 768px) {
  .people-slide {
    grid-template-columns: 1fr;
  }
  .people-slide__quote p {
    font-size: var(--fs-h3);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet — tighter quote panel */
  .people-slide__quote-panel {
    padding: 1.3rem;
    padding-bottom: calc( 1.3rem + var(--sp-8) );
  }
  .people-slide__quote p {
    font-size: var(--fs-small); /* 14px */
  }
}
/*
 * Logo Wall section — MSEED Education
 *
 * BEM: .logo-wall / --logos / --images
 *      __head / __heading / __sub / __grid / __item / __tile / __img
 *
 * logos variant:  contained logos on white cards, grayscale-on-idle,
 *                 colorize on hover/focus.
 * images variant: image cards, cover fit, fixed aspect ratio.
 * Column count driven by [data-cols]; grid reflows down at each breakpoint
 * so the page never scrolls horizontally.
 *
 * All values via var(--*). No hardcoded hex/px for spacing/color.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

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

.logo-wall {
  padding-block: var(--sp-9);
  background-color: var(--c-bg-25);
}

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

/* ── Head ───────────────────────────────────────────────────────────── */

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

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

.logo-wall__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  max-width: 42rem;
  margin: 0;
}

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

.logo-wall__grid {
  --_cols: 6;

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

.logo-wall__grid[data-cols="3"] { --_cols: 3; }
.logo-wall__grid[data-cols="4"] { --_cols: 4; }
.logo-wall__grid[data-cols="6"] { --_cols: 6; }

.logo-wall__item {
  display: flex;
}

/* ══════════════════════════════════════════════════════════════════════
   TILE — shared
═══════════════════════════════════════════════════════════════════════ */

.logo-wall__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

/* ── Trigger (lightbox) — fills the tile, no visual change beyond cursor ── */

.logo-wall__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

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

/* ══════════════════════════════════════════════════════════════════════
   LOGOS VARIANT — contained logo on white card
═══════════════════════════════════════════════════════════════════════ */

.logo-wall--logos .logo-wall__tile {
  aspect-ratio: 3 / 2;
  padding: var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-md);
}

.logo-wall--logos .logo-wall__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 150ms var(--ease), opacity 150ms var(--ease);
}

.logo-wall--logos .logo-wall__tile:hover .logo-wall__img,
.logo-wall--logos .logo-wall__tile:focus-within .logo-wall__img {
  filter: grayscale(0%);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .logo-wall--logos .logo-wall__img {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   IMAGES VARIANT — image card, cover fit
═══════════════════════════════════════════════════════════════════════ */

.logo-wall--images .logo-wall__tile {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.logo-wall--images .logo-wall__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

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

@media (max-width: 768px) {
  /* 6-up → 3-col; 4-up → 2-col; 3-up → 2-col */
  .logo-wall__grid[data-cols="6"] {
    --_cols: 3;
  }
  .logo-wall__grid[data-cols="3"],
  .logo-wall__grid[data-cols="4"] {
    --_cols: 2;
  }
}

@media (max-width: 375px) {
  /* logos → 2-col (keeps them legible); images → 1-col */
  .logo-wall--logos .logo-wall__grid[data-cols="3"],
  .logo-wall--logos .logo-wall__grid[data-cols="4"],
  .logo-wall--logos .logo-wall__grid[data-cols="6"] {
    --_cols: 2;
  }
  .logo-wall--images .logo-wall__grid[data-cols="3"],
  .logo-wall--images .logo-wall__grid[data-cols="4"],
  .logo-wall--images .logo-wall__grid[data-cols="6"] {
    --_cols: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHTBOX OVERLAY
   Hidden by default; JS removes `hidden` attribute to show.
   BEM: __lightbox / __dialog / __close / __figure / __backdrop / __prev / __next
═══════════════════════════════════════════════════════════════════════ */

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

.logo-wall__lightbox[hidden] {
  display: none;
}

.logo-wall__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;
}

.logo-wall__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  max-width: min(90vw, 56rem);
  max-height: 90vh;
  touch-action: pan-y;
}

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

.logo-wall__close {
  position: absolute;
  top: calc(-1 * var(--sp-8));
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  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);
}

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

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

@media (max-width: 768px) {
  .logo-wall__close {
    top: calc(-1 * var(--sp-7));
  }
}

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

.logo-wall__prev,
.logo-wall__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  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);
}

.logo-wall__prev:hover,
.logo-wall__next:hover {
  background-color: var(--c-white);
  color: var(--c-navy-900);
}

.logo-wall__prev:focus-visible,
.logo-wall__next:focus-visible {
  outline: var(--outline-width) solid var(--c-accent-500);
  outline-offset: var(--outline-offset);
}

.logo-wall__prev:disabled,
.logo-wall__next:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  .logo-wall__prev,
  .logo-wall__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .logo-wall__prev { left: 0; }
  .logo-wall__next { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-wall__close,
  .logo-wall__prev,
  .logo-wall__next {
    transition: none;
  }
}

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

.logo-wall__figure {
  margin: 0;
  line-height: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background-color: var(--c-white);
  padding: var(--sp-6);
}

.logo-wall__figure img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 6rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
/*
 * Why Choose Us section — MSEED Education
 *
 * BEM: .why-choose-us / __head / __heading / __body / __actions
 *      __grid / __item / __item-title / __item-text / __closing
 *
 * Points laid out 2×2 on desktop (icon-box style boxes), reflow to 1-col on
 * mobile. Non-interactive, static — no JS.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

.why-choose-us {
  padding-block: var(--sp-9);
  background-color: var(--c-navy-700);
}

/* Two-column head: heading + body left, actions right */
.why-choose-us__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'heading actions'
    'body    actions';
  align-items: center;
  column-gap: var(--sp-7);
  row-gap: var(--sp-3);
  text-align: left;
  margin-bottom: var(--sp-8);
}

.why-choose-us__heading {
  grid-area: heading;
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-white);
  margin: 0;
}

.why-choose-us__body {
  grid-area: body;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-white);
  margin: 0;
}

.why-choose-us__actions {
  grid-area: actions;
}

/* Ghost button on the navy band: transparent + white, accent fill on hover */
.why-choose-us__actions .btn {
  color: var(--c-white);
  background-color: transparent;
  border-color: var(--c-white);
}

.why-choose-us__actions .btn:hover,
.why-choose-us__actions .btn:focus-visible {
  color: var(--c-white);
  background-color: var(--c-accent-500);
  border-color: var(--c-accent-500);
}

/* ── Grid of point boxes (4-up) ────────────────────────────────────────── */

.why-choose-us__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-choose-us__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 22px; /* spec computed value — no matching spacing token */
  background-color: var(--c-white);
  border: var(--outline-width) solid var(--c-line-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.why-choose-us__item-title {
  font-family: var(--font-head);
  font-size: var(--fs-body-lg); /* 20px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-navy-900);
  margin: 0;
}

.why-choose-us__item-text {
  font-family: var(--font-body);
  font-size: var(--fs-label); /* 12px */
  font-weight: var(--fw-regular);
  line-height: 16px; /* spec computed value */
  color: var(--c-ink-500);
  margin: 0;
}

.why-choose-us__closing {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 0;
  text-align: left;
}

.why-choose-us__closing svg {
  flex: 0 0 auto;
}

.why-choose-us__closing-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-h3); /* 24px desktop (fluid) */
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  color: var(--c-white);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .why-choose-us__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .why-choose-us__head {
    grid-template-columns: 1fr;
    grid-template-areas:
      'heading'
      'body'
      'actions';
  }

  .why-choose-us__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .why-choose-us__item {
    padding: var(--sp-5);
  }
}

@media (max-width: 375px) {
  .why-choose-us__item {
    padding: var(--sp-4);
  }

  .why-choose-us__closing {
    margin-top: var(--sp-6);
  }
}

/* ── Point-box icon (orange rounded square, from spec icon-box) ────────── */

.why-choose-us__item-icon {
  display: inline-flex;
  width: var(--sp-7);
  height: var(--sp-7);
  margin-bottom: var(--sp-2);
}

.why-choose-us__item-icon svg {
  width: 100%;
  height: 100%;
}
/*
 * Infrastructure section — MSEED Education
 *
 * BEM: .infrastructure / __head / __heading / __sub / __sub-heading
 *      __copy / __paragraph / __grid / __card / __media / __img / __body
 *      __card-title / __card-subtitle / __card-text / __cta
 *
 * Intro block + 3-col grid of program cards (image top, title, accent
 * subtitle, body, CTA). Cards reflow to 1-col on mobile. Static — no JS.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

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

.infrastructure__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: var(--container);
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

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

.infrastructure__sub {
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

.infrastructure__sub-heading {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-accent-500);
  margin: var(--sp-2) 0 0;
}

.infrastructure__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 70ch;
}

.infrastructure__paragraph {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  margin: 0;
}

/* ── 3-col card grid ───────────────────────────────────────────────────── */

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

.infrastructure__card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border: var(--outline-width) solid var(--c-line-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

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

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

  .infrastructure__card:hover {
    transform: none;
  }
}

.infrastructure__media {
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

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

.infrastructure__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1 1 auto;
}

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

.infrastructure__card-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-accent-500);
  margin: 0;
}

.infrastructure__card-text {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

.infrastructure__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-blue-500);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.infrastructure__cta::after {
  content: '→';
  font-size: var(--fs-label);
}

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

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

/* ── Responsive ────────────────────────────────────────────────────────── */

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

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

  .infrastructure__body {
    padding: var(--sp-4);
  }
}

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

/* ══════════════════════════════════════════════════════════════════════
   BANNER MODE — full-bleed campus photo, play link, translucent text band
═══════════════════════════════════════════════════════════════════════ */

.infrastructure--banner {
  padding-block: 0;
}

.infrastructure__banner {
  position: relative;
}

/* Slight dark overlay for play-button/text legibility over the photo */
.infrastructure__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-navy-900) 55%, transparent);
  pointer-events: none;
}

/* Keep play link and text band above the overlay */
.infrastructure__band {
  z-index: 1;
}

/* Above the band so a tall mobile band can't cover it */
.infrastructure__play {
  z-index: 2;
}

.infrastructure__banner-img {
  display: block;
  width: 100%;
  aspect-ratio: 1600 / 546;
  min-height: 18rem;
  object-fit: cover;
}

.infrastructure__play {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-white);
  display: inline-flex;
  border-radius: var(--r-circle);
  transition: transform 0.2s ease;
}

.infrastructure__play:hover,
.infrastructure__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  /* Global link hover sets a dark color — invisible on the dark photo.
     Keep the icon light: gold accent on hover. */
  color: var(--c-accent-400);
}

.infrastructure__band {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding-block: var(--sp-5);
  background: color-mix(in srgb, var(--c-navy-700) 60%, transparent);
  backdrop-filter: blur(2px);
}

.infrastructure__heading--banner {
  color: var(--c-white);
  margin: 0;
}

.infrastructure__sub--banner {
  color: var(--c-white);
  max-width: 40rem;
  margin: var(--sp-2) 0 0;
}

@media (max-width: 768px) {
  .infrastructure__banner-img {
    min-height: 14rem;
  }
  .infrastructure__play {
    top: 30%; /* clear of the taller mobile text band */
  }
  .infrastructure__play svg {
    width: 44px;
    height: 44px;
  }
}
/*
 * Program Tracks section — MSEED Education
 *
 * BEM: .program-tracks / __head / __heading / __sub / __sub-heading
 *      __copy / __paragraph / __grid / __card / __media / __img / __body
 *      __card-title / __card-subtitle / __card-text / __cta
 *
 * Intro block + 3-col grid of specialisation cards (image top, title, accent
 * subtitle, body, CTA). Cards reflow to 1-col on mobile. Static — no JS.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

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

.program-tracks__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: var(--container);
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

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

.program-tracks__sub {
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* Acts as the section heading (main __heading/__sub are unused here). */
.program-tracks__sub-heading {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;
}

/* Acts as the section description under the heading. */
.program-tracks__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 60ch;
  margin-top: var(--sp-2);
}

.program-tracks__paragraph {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ── 3-col card grid ───────────────────────────────────────────────────── */

.program-tracks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.program-tracks__card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border: var(--outline-width) solid var(--c-line-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

.program-tracks__card:hover {
  box-shadow: var(--sh-pop);
  transform: translateY(-3px);
}

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

  .program-tracks__card:hover {
    transform: none;
  }
}

.program-tracks__media {
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

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

.program-tracks__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1 1 auto;
}

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

.program-tracks__card-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-accent-500);
  margin: 0;
}

.program-tracks__card-text {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

.program-tracks__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-blue-500);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.program-tracks__cta::after {
  content: '→';
  font-size: var(--fs-label);
}

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

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

/* ── Responsive ────────────────────────────────────────────────────────── */

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

  .program-tracks__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .program-tracks__body {
    padding: var(--sp-4);
  }
}

@media (max-width: 375px) {
  .program-tracks__body {
    padding: var(--sp-3) var(--sp-4);
  }
}
/*
 * Masters Tracks section — MSEED Education
 *
 * BEM: .masters-tracks / __head / __heading / __sub
 *      __grid / __card / __media / __img / __body
 *      __card-title / __card-subtitle / __card-text / __cta
 *
 * Intro block + 3-col grid of specialisation cards (image top, title, accent
 * subtitle, body, CTA). Cards reflow to 1-col on mobile. Static — no JS.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

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

.masters-tracks__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: var(--container);
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

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

.masters-tracks__sub {
  max-width: 110ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ── 3-col card grid ───────────────────────────────────────────────────── */

.masters-tracks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.masters-tracks__card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border: var(--outline-width) solid var(--c-accent-500);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

.masters-tracks__card:hover {
  box-shadow: var(--sh-pop);
  transform: translateY(-3px);
}

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

  .masters-tracks__card:hover {
    transform: none;
  }
}

.masters-tracks__media {
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

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

.masters-tracks__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1 1 auto;
}

.masters-tracks__card-title {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;
}

.masters-tracks__card-subtitle {
  display: inline-block;
  max-width: fit-content;
  background-color: var(--c-navy-700);
  color: var(--c-white);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}

.masters-tracks__card-text {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

.masters-tracks__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--c-accent-500);
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.masters-tracks__cta::after {
  content: '→';
  font-size: var(--fs-label);
}

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

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

/* ── Responsive ────────────────────────────────────────────────────────── */

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

  .masters-tracks__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .masters-tracks__body {
    padding: var(--sp-4);
  }
}

@media (max-width: 375px) {
  .masters-tracks__body {
    padding: var(--sp-3) var(--sp-4);
  }
}
/*
 * Mega Events section — MSEED Education (masters page only)
 *
 * BEM: .mega-events / __head / __heading / __sub / __track / __slide / __img
 *
 * Heading + sub-copy + scroll-snap image slider (3 visible per view desktop,
 * 2 tablet, 1 mobile). Progressive enhancement: .js-slider (slider.js) adds
 * prev/next arrows over the native scroll-snap track (see .slider-* rules).
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

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

.mega-events__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: var(--container);
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

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

.mega-events__sub {
  max-width: 70ch;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* Scroll-snap track — 3 slides per view (2 tablet, 1 mobile). */
.mega-events__track {
  display: flex;
  height: clamp(16rem, 30vw, 24rem);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-events__track::-webkit-scrollbar {
  display: none;
}

.mega-events__slide {
  flex: 0 0 calc((100% - var(--sp-4) * 2) / 3);
  scroll-snap-align: start;
  height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
}

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

@media (max-width: 1024px) {
  .mega-events__slide {
    flex-basis: calc((100% - var(--sp-4)) / 2);
  }
}

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

  .mega-events__slide {
    flex-basis: 100%;
  }
}
/*
 * EVA Live Legacy section — MSEED Education (masters page only)
 *
 * BEM: .eva-legacy / __inner / __content / __heading / __text / __media / __img
 *
 * Two-column layout: text left, image right. Stacks to single column on
 * tablet/mobile (image below text). Static — no JS.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

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

.eva-legacy__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-8);
}

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

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

.eva-legacy__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

.eva-legacy__media {
  border-radius: var(--r-card);
  overflow: hidden;
}

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

@media (max-width: 1024px) {
  .eva-legacy__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

@media (max-width: 768px) {
  .eva-legacy {
    padding-block: var(--sp-7);
  }
}
/*
 * Media Center section — MSEED Education
 *
 * BEM: .media-center / __inner / __heading / __sub
 *
 * Lightweight centered intro band (heading + sub-copy). Static — no JS.
 *
 * All values via var(--*). No hardcoded hex/px/rem.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

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

.media-center__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: 70ch;
  margin-inline: auto;
}

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

.media-center__sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

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

@media (max-width: 375px) {
  .media-center {
    padding-block: var(--sp-6);
  }
}
/*
 * Founders section — MSEED Education
 *
 * BEM: .founders / __row / __portrait / __content / __name / __role / __bio
 *
 * Each founder is a white rounded card (source c92cbf7): portrait left,
 * content right. Stacks portrait-on-top on mobile.
 *
 * Source: founders.html §founder cards + design values from the reference.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

.founders {
  padding-block: var(--sp-9);
  background-color: var(--c-bg-25);   /* light bg so white cards + shadow read */
}

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

/* Column of centred cards, spaced vertically. */
.founders .container {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* ── Card row ───────────────────────────────────────────────────────── */
.founders__row {
  display: flex;
  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);
  transition: background 0.3s var(--ease), border 0.3s var(--ease),
              box-shadow 0.3s var(--ease), transform 0.4s var(--ease);
}

/* ── Portrait — orange-framed photo ─────────────────────────────────── */
.founders__portrait {
  flex: 0 0 20rem;
}

.founders__portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 28rem;
  border: var(--bw-frame) solid var(--c-accent-500);
  border-radius: var(--r-person);
}

/* ── Content ────────────────────────────────────────────────────────── */
.founders__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: -webkit-fill-available;
  padding-right: 3rem;
}

.founders__content-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.founders__name {
  font-family: "Circular Spotify", sans-serif;
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--c-accent-500);
  margin: 0;
}

.founders__role {
  font-family: var(--font-body);   /* Manrope */
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--c-ink-900);
  margin: 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-line-300);
}

.founders__bio {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-family: var(--font-body);   /* Manrope */
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
}

.founders__bio p {
  margin: 0;
}

/* ── Responsive: stack portrait on top ──────────────────────────────── */
@media (max-width: 768px) {
  .founders__row {
    flex-direction: column;
    gap: 0;
  }

  .founders__portrait {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION VARIANT — sections/founders.php (__head/__item/__photo/__body)
═══════════════════════════════════════════════════════════════════════ */

.founders__head {
  text-align: center;
  margin-bottom: var(--sp-7);
}

article.founders__item {
  display: flex;
  gap: var(--sp-8); /* 4rem */
  background-color: var(--c-white);
  box-shadow: var(--sh-person);
  border-radius: var(--r-person);
}

.founders__item--alt {
  flex-direction: row-reverse;
}

.founders__photo {
  flex: 0 0 33%;
}

.founders__photo--playable {
  position: relative;
}

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

.founders__play {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-accent-500);
  border: none;
  border-radius: var(--r-circle);
  box-shadow: var(--sh-pop);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.founders__play svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--c-white);
}

.founders__play:hover,
.founders__play:focus-visible {
  transform: scale(1.08);
}

.founders__play:focus-visible {
  outline: var(--outline-width) solid var(--c-accent-500);
  outline-offset: 3px;
}

.founders__body {
  padding: 9% 6% 6% 5%;
}

@media (max-width: 768px) {
  article.founders__item,
  .founders__item--alt {
    flex-direction: column;
    gap: var(--sp-5);
  }

  .founders__photo {
    flex-basis: auto;
  }

  .founders__body {
    padding: 0 var(--sp-5) var(--sp-5);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TABS — founders-tabs.js (progressive enhancement)
   Without JS: strip hidden, every panel shows. With JS: .founders--tabbed
   is added → strip shows, only the active panel shows.
═══════════════════════════════════════════════════════════════════════ */

.founders__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.founders__tabs {
  display: none;
}

.founders--tabbed .founders__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-6);
  border-bottom: 1px solid var(--c-line-200);
}

@media (max-width: 768px) {
  .founders--tabbed .founders__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .founders--tabbed .founders__tabs::-webkit-scrollbar {
    display: none;
  }

  .founders--tabbed .founders__tab {
    flex: 0 0 auto;
  }
}

.founders__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  margin-bottom: -1px; /* overlap the strip's bottom border */
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-ink-400);
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}

.founders__tab-icon {
  display: inline-flex;
  width: var(--sp-4);
  height: var(--sp-4);
}

.founders__tab-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.founders__tab:hover {
  color: var(--c-blue-500);
}

.founders__tab.is-active {
  color: var(--c-blue-500);
  border-bottom-color: var(--c-blue-500);
}

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

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

/* Tabbed: show only the active panel. */
.founders--tabbed .founders__item {
  display: none;
}

.founders--tabbed article.founders__item.is-active {
  display: flex;
}
/*
 * Social Media section — MSEED Education
 *
 * BEM: .social-media / __head / __heading
 *      / __captions / __caption-card / __caption
 *      / __follow
 *      / __backstage / __backstage-heading / __backstage-sub
 *      / __events / __event / __event-media / __event-img
 *      / __event-body / __event-title / __event-caption
 *
 * Two stacked grids (caption cards, then event cards) with a Follow CTA and an
 * optional backstage intro between them.
 *
 * All values via var(--*). No hardcoded hex/px for spacing/color.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

.social-media {
  padding-block: var(--sp-9);
  background-color: var(--c-bg-25);
}

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

/* ── Head ───────────────────────────────────────────────────────────── */

.social-media__head {
  text-align: center;
  margin-bottom: var(--sp-7);
}

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

/* ── Caption cards grid ─────────────────────────────────────────────── */

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

.social-media__caption-card {
  background-color: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--sp-5);
}

.social-media__caption {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  margin: 0;
}

/* ── Follow CTA ─────────────────────────────────────────────────────── */

.social-media__follow {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-9);
}

/* ── Backstage intro ────────────────────────────────────────────────── */

.social-media__backstage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--sp-7);
}

.social-media__backstage-heading {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;
}

.social-media__backstage-sub {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ── Event cards grid ───────────────────────────────────────────────── */

.social-media__events {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Slider variant — CSS-only horizontal scroll-snap track (no JS needed) */
.social-media__events--slider {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.social-media__events--slider::-webkit-scrollbar {
  display: none;
}

.social-media__events--slider .social-media__event {
  flex: 0 0 clamp(16rem, 30vw, 24rem);
  scroll-snap-align: start;
}

.social-media__event {
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.social-media__event-media {
  aspect-ratio: 4 / 3;
  background-color: var(--c-bg-50);
  overflow: hidden;
}

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

.social-media__event-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
}

.social-media__event-title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;
}

.social-media__event-caption {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

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

  .social-media__events {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
}

@media (max-width: 375px) {
  .social-media__captions,
  .social-media__events {
    grid-template-columns: 1fr;
  }
}
/*
 * Start Application CTA band — MSEED Education
 *
 * BEM: .start-application / --with-media / __inner / __copy / __heading
 *      / __body / __tagline / __actions / __media / __img
 *
 * Navy CTA band. When --with-media is present, copy and collage sit side by
 * side; otherwise the copy centers. Stacks copy-above-media on mobile.
 *
 * All values via var(--*). No hardcoded hex/px for spacing/color.
 * Breakpoints in @media use raw px — custom props not valid in queries.
 */

.start-application {
  padding-block: var(--sp-10);
  background-color: var(--c-navy-900);
}

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

/* ── Inner layout ───────────────────────────────────────────────────── */

.start-application__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-5);
  max-width: 60ch;
  margin-inline: auto;
}

/* With media: two columns, copy left-aligned. */
.start-application--with-media .start-application__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  text-align: left;
  gap: var(--sp-8);
  max-width: none;
}

/* ── Copy ───────────────────────────────────────────────────────────── */

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

.start-application--with-media .start-application__copy {
  align-items: flex-start;
}

.start-application__heading {
  font-family: var(--font-head);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin: 0;
}

.start-application__body {
  font-family: var(--font-body);
  font-size: var(--fs-h3); /* 24px desktop (fluid) */
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-white);
  margin: 0;
}

.start-application__body p {
  margin: 0 0 var(--sp-3);
}

.start-application__body p:last-child {
  margin-bottom: 0;
}

.start-application__tagline {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-accent-400);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Actions ────────────────────────────────────────────────────────── */

.start-application__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  justify-content: center;
}

/* With media the copy is left-aligned, so left-align the actions too. */
.start-application--with-media .start-application__actions {
  justify-content: flex-start;
}

/* ── Media collage ──────────────────────────────────────────────────── */

.start-application__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.start-application__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--sh-pop);
}

/* First image spans both columns for a hero-led collage feel. */
.start-application__media .start-application__img:first-child {
  grid-column: 1 / -1;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .start-application--with-media .start-application__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--sp-6);
  }

  .start-application--with-media .start-application__copy {
    align-items: center;
  }

  .start-application__actions {
    justify-content: center;
  }
}

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

  .start-application__media {
    grid-template-columns: 1fr;
  }
}

/* ── Form variant — copy left, lead form-panel card right ────────────── */

.start-application--with-form .start-application__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 28rem);
  align-items: center;
  text-align: left;
  gap: var(--sp-8);
  max-width: none;
}

.start-application--with-form .start-application__copy {
  align-items: flex-start;
}

.start-application__form {
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--sh-pop);
}

@media (max-width: 768px) {
  .start-application--with-form .start-application__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .start-application__form {
    padding: var(--sp-5);
  }
}

/* ── Form variant — blue band (spec) ─────────────────────────────────── */

.start-application--with-form {
  background-color: var(--c-blue-500);
}