/* =============================================================
   Certificate in Advanced Christian Apologetics — landing page
   South India Baptist Bible College & Seminary
   -------------------------------------------------------------
   1. Tokens
   2. Reset & base
   3. Typography helpers
   4. Buttons & links
   5. Layout: wrap / section
   6. Navigation
   7. Hero
   8. Program / cards
   9. Pathway (signature) + modules
   10. How you'll learn
   11. Outcomes
   12. Faculty
   13. Enrolment & spec
   14. FAQ
   15. Closer & footer
   16. Motion / reveal
   17. Responsive
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --navy-900: #071634;
  --navy-800: #0a2149;
  --navy-700: #12315f;
  --navy-600: #234a86;
  --navy-500: #365f9e;

  --gold:       #f4a81d;
  --gold-600:   #d9930b;
  --gold-soft:  #f9c65a;

  --parchment:      #f6f1e7;
  --parchment-deep: #efe6d4;
  --paper:          #ffffff;
  --rule:           #e3d8c1;

  --ink:      #202d46;
  --ink-soft: #55607a;
  --cream:      #f4efe4;
  --cream-soft: rgba(244, 239, 228, 0.70);
  --cream-rule: rgba(244, 239, 228, 0.16);

  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-script: "Playwrite DE Grund", "Segoe Script", "Bradley Hand", cursive;

  --wrap: 1140px;
  --wrap-narrow: 760px;
  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.25rem);

  --r: 4px;
  --r-lg: 12px;
  --shadow: 0 1px 2px rgba(10, 33, 73, 0.06), 0 12px 32px -12px rgba(10, 33, 73, 0.16);
  --shadow-lift: 0 20px 44px -20px rgba(10, 33, 73, 0.4);

  --fs-eyebrow: 0.72rem;
  --fs-h1: clamp(2.4rem, 1.55rem + 3.7vw, 4.15rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 2.15vw, 2.75rem);
  --fs-h3: clamp(1.15rem, 1.06rem + 0.4vw, 1.34rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.32vw, 1.2rem);
  --fs-body: 1.0625rem;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Lenis drives smooth scrolling; this is the fallback when JS is off */
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;   /* clears the fixed header on #anchor jumps */
  -webkit-text-size-adjust: 100%;
}
/* when Lenis is active it manages scroll itself */
html.lenis, html.lenis body { scroll-behavior: auto; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--parchment);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

a { color: inherit; }

::selection { background: var(--gold); color: var(--navy-900); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 200;
  background: var(--navy-800);
  color: var(--cream);
  padding: 0.65rem 1rem;
  border-radius: var(--r);
  font-size: 0.9rem;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Typography helpers ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 1.15rem;
  margin-top: 1.15rem;
}
/* the little rule draws itself in when the label scrolls into view */
.eyebrow::before {
  content: "";
  flex: none;
  inline-size: 1.6rem;
  block-size: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.eyebrow.is-visible::before { transform: scaleX(1); }
.eyebrow--onDark { color: var(--gold-soft); }

.section__title {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: 1.5rem;
}
.section__title--onDark { color: var(--cream); }

.section__intro {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 3rem;
}
.section__intro--onDark { color: var(--cream-soft); }

/* ---------- 4. Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.8rem 1.5rem;
  border-radius: var(--r);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--lg { padding: 0.95rem 1.9rem; font-size: 1rem; }

.btn--gold { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }

.btn--ghost { background: transparent; color: var(--cream); border-color: var(--cream-rule); }
.btn--ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); }

.btn--ink { background: var(--navy-800); color: var(--cream); border-color: var(--navy-800); }
.btn--ink:hover { background: var(--navy-700); border-color: var(--navy-700); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.link-arrow::after { content: "\2192"; transition: transform 0.15s ease; }
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 5. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--paper     { background: var(--parchment); }
.section--parchment { background: var(--parchment-deep); }
.section--navy      { background: var(--navy-800); }
.section--navy .section__title { color: var(--cream); }

.wrap--split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.wrap--split .section__intro { margin-bottom: 2rem; }

/* ---------- 6. Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.2s ease;
}
.nav.is-stuck {
  box-shadow: 0 6px 24px -16px rgba(10, 33, 73, 0.45);
}
.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.5rem var(--pad-x);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__brand { flex-shrink: 0; display: flex; align-items: center; }
.nav__logo { height: 48px; width: auto; display: block; }

.nav__links {
  display: flex;
  gap: 1.65rem;
  margin-left: auto;
}
.nav__links a {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav__links a:hover { color: var(--navy-800); border-bottom-color: var(--gold); }

.nav__cta { flex-shrink: 0; padding: 0.6rem 1.25rem; font-size: 0.9rem; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--navy-800);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem var(--pad-x) 1.5rem;
  background: #ffffff;
  border-bottom: 1px solid var(--rule);
}
.nav__mobile a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  padding: 0.8rem 0.25rem;
  border-bottom: 1px solid var(--rule);
}
.nav__mobile a:last-child { border-bottom: 0; margin-top: 0.75rem; }
.nav__mobile .btn { justify-content: center; }

/* screen-reader-only utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(31, 74, 134, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: var(--cream);
  padding-top: clamp(6rem, 11vh, 8.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.hero .eyebrow { margin-bottom: 1rem; }

/* Visible headline for tablet / phone, where the banner artwork is too
   small to read. Hidden on desktop — the banner carries the message there. */
.hero__headline { display: none; }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.35rem + 2.8vw, 2.55rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: balance;
}
.hero__sub {
  margin-top: 0.8rem;
  font-family: var(--font-script);
  font-size: clamp(1.02rem, 0.9rem + 1vw, 1.3rem);
  line-height: 1.4;
  color: var(--gold-soft);
}

/* ---- hero banner carousel ---- */
.hero__carousel {
  --slide-ratio: 3000 / 1485;   /* shape of the banners */
  position: relative;
  margin: 0 0 2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--cream-rule);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}
.hero__carousel__viewport { overflow: hidden; }
.hero__carousel__track {
  display: flex;
  list-style: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__carousel__track.is-instant { transition: none; }
.hero__carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}
.hero__carousel__slide img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: var(--slide-ratio);
  object-fit: cover;
  transform: scale(1);
  transition: transform 7s linear;
}
/* the active slide drifts in a slow, subtle zoom */
.hero__carousel__slide[aria-hidden="false"] img { transform: scale(1.045); }

.hero__carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 20%;
  background: rgba(139, 157, 193, 0.55);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.hero__carousel__arrow:hover { background: var(--gold); color: var(--navy-900); }
.hero__carousel__arrow--prev { left: 0.75rem; }
.hero__carousel__arrow--next { right: 0.75rem; }

.hero__carousel__toggle {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 22, 52, 0.55);
  color: var(--cream);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__carousel__toggle::before,
.hero__carousel__toggle::after {
  content: "";
  width: 3px;
  height: 12px;
  background: currentColor;   /* two bars = pause */
}
.hero__carousel__toggle[aria-pressed="true"]::after { display: none; }
.hero__carousel__toggle[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  background: transparent;
  border-left: 11px solid currentColor;   /* triangle = play */
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 2px;
}

.hero__carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
.hero__carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 239, 228, 0.4);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.hero__carousel__dot[aria-current="true"] {
  background: var(--gold);
  transform: scale(1.3);
}

/* single banner — controls hidden by the script */
.hero__carousel[data-single] .hero__carousel__arrow,
.hero__carousel[data-single] .hero__carousel__toggle,
.hero__carousel[data-single] .hero__carousel__dots { display: none; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1rem; }

/* ---------- 7b. Countdown ---------- */
.countdown {
  background: var(--navy-900);
  color: var(--cream);
  /* more room above the timer than below it */
  padding: clamp(3.25rem, 8vw, 5.5rem) var(--pad-x) clamp(2.5rem, 5vw, 3.75rem);
}
.countdown__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}
.countdown .eyebrow { margin-bottom: 0; letter-spacing: 0.14em; }
.countdown__title {
  font-family: var(--font-script);
  font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.15rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--gold-soft);
  max-width: 26ch;
  margin: 0;
}

/* ---- flip clock ---- */
.flipclock {
  --fc-w: clamp(50px, 11vw, 76px);
  --fc-h: clamp(66px, 15vw, 98px);
  --fc-fs: clamp(1.75rem, 4.2vw, 2.75rem);
  --fc-radius: 8px;
  --fc-split: 2px;                 /* the dark line across the middle */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.3rem, 1.4vw, 0.85rem);
  margin: 0.4rem 0 0.2rem;
}

.flip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.flip__stack {
  position: relative;
  width: var(--fc-w);
  height: var(--fc-h);
  perspective: 360px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fc-fs);
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  border-radius: var(--fc-radius);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}
.flip__leaf {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(50% - var(--fc-split) / 2);
  overflow: hidden;
  background: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.flip__leaf span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--fc-h);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.flip__leaf--top,
.flip__leaf--fold-top {
  top: 0;
  border-radius: var(--fc-radius) var(--fc-radius) 0 0;
}
.flip__leaf--top span,
.flip__leaf--fold-top span { top: 0; }

.flip__leaf--bottom,
.flip__leaf--fold-bottom {
  bottom: 0;
  border-radius: 0 0 var(--fc-radius) var(--fc-radius);
}
.flip__leaf--bottom span,
.flip__leaf--fold-bottom span { bottom: 0; }

.flip__leaf--fold-top {
  z-index: 3;
  transform-origin: center bottom;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}
.flip__leaf--fold-bottom {
  z-index: 3;
  transform-origin: center top;
  backface-visibility: hidden;
  transform: rotateX(90deg);
}
.flip.is-flipping .flip__leaf--fold-top {
  animation: flipFoldTop 0.3s ease-in forwards;
}
.flip.is-flipping .flip__leaf--fold-bottom {
  animation: flipFoldBottom 0.3s 0.3s ease-out forwards;
}
@keyframes flipFoldTop {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-90deg); }
}
@keyframes flipFoldBottom {
  from { transform: rotateX(90deg); }
  to   { transform: rotateX(0deg); }
}

.flip__label {
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.5vw, 0.68rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.flipclock__colon {
  align-self: flex-start;
  margin-top: calc(var(--fc-h) / 2 - 0.62em);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-soft);
}
.flipclock__colon::before { content: ":"; }

.countdown__done {
  font-size: 1rem;
  color: var(--gold-soft);
  max-width: 42ch;
}
.countdown.is-done .flipclock { display: none; }

@media (prefers-reduced-motion: reduce) {
  .flip.is-flipping .flip__leaf--fold-top,
  .flip.is-flipping .flip__leaf--fold-bottom { animation: none; }
}

.factstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--cream-rule);
  border: 1px solid var(--cream-rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.factstrip > div { 
  background: var(--navy-800); 
  padding: 1.3rem 1.35rem; 
}
.factstrip dt {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.5rem;
}
.factstrip dd { 
  font-size: 1.1rem; 
  font-weight: 600; 
  line-height: 1.4; 
  color: var(--cream); 
}

/* ---------- 8. Program / cards ---------- */
.program__head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);   /* 60 / 40 */
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.75rem, 6vw, 4rem);
}
.program__text .section__intro { margin-bottom: 0; }
.program__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.program__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* every section figure settles out of a soft zoom as it scrolls in
   (only when JS has armed the reveal — [data-reveal] is JS-added) */
.program__figure,
.pathway__figure,
.learn__figure { overflow: hidden; }
.program__figure[data-reveal] img,
.pathway__figure[data-reveal] img,
.learn__figure[data-reveal] img {
  transform: scale(1.08);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.program__figure.is-visible img,
.pathway__figure.is-visible img,
.learn__figure.is-visible img { transform: none; }

.cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow);
}
.card__kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.75rem;
}
.card__title { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.card p { font-size: 0.96rem; color: var(--ink-soft); }
.card__title + p { color: var(--ink-soft); }

/* ---------- 9. Pathway (signature) ---------- */
.pathway .wrap { position: relative; }

.pathway__head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);   /* 60 / 40 */
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}
.pathway__text .section__intro { margin-bottom: 0; }
.pathway__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* border: 1px solid var(--cream-rule); */
  /* box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55); */
}
.pathway__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.spine {
  list-style: none;
  position: relative;
  margin-top: 1rem;
}
.spine::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: linear-gradient(180deg, rgba(249, 198, 90, 0.55), rgba(54, 95, 158, 0.55) 14%, rgba(54, 95, 158, 0.9));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.spine.is-visible::before { transform: scaleY(1); }

.stage {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0.25rem 1.75rem;
  padding-block: 1rem;
}
.stage__marker {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-800);
  border: 2px solid var(--gold);
}
.stage__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold-soft);
  letter-spacing: 0.02em;
}

.stage__body { min-width: 0; }
.stage__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.6rem 0.25rem 0.9rem;
  border-bottom: 1px solid var(--navy-500);
}
.stage__summary::-webkit-details-marker { display: none; }
.stage__weeks {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.stage__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 600;
  color: var(--cream);
  grid-column: 1 / -1;
}
.stage__hint {
  grid-row: 1;
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-soft);
  position: relative;
  padding-right: 1.5rem;
}
.stage__hint::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -0.15em;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gold-soft);
  transition: transform 0.2s ease;
}
.stage__body[open] .stage__hint::after { content: "\2212"; }

.stage__modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-top: 1.25rem;
}
.stage__body[open] .stage__modules { animation: revealUp 0.35s ease both; }

.module {
  background: var(--navy-700);
  border: 1px solid var(--navy-500);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.3rem;
}
.module__code {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.5rem;
}
.module__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.module p { font-size: 0.9rem; color: var(--cream-soft); }

.pathway__foot { margin-top: 2.5rem; padding-left: 0; }

/* ---------- 10. How you'll learn ---------- */
.learn__head {
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}
.learn__head:has(.learn__figure) {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);   /* 60 / 40 */
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.learn__text .section__intro { margin-bottom: 0; }
.learn__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* background: var(--cream-softer); */
  /* border: 1px solid var(--rule); */
  /* box-shadow: var(--shadow); */
}
.learn__figure iframe {
  width: 100%;
  height: 350px;
  display: block;

}

.learn {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  counter-reset: none;
}
.learn__item {
  padding: 1.75rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.learn__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.learn__item h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.learn__item p { font-size: 0.96rem; color: var(--ink-soft); }

.learn__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.learn__meta span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--parchment-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
}

/* ---------- 11. Outcomes ---------- */
.outcomes { list-style: none; display: grid; gap: 0.15rem; }
.outcomes li {
  position: relative;
  padding: 1.1rem 0 1.1rem 2.25rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
  color: var(--ink);
}
.outcomes li:last-child { border-bottom: 0; }
.outcomes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.4rem;
  width: 10px;
  height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ---------- 12. Faculty ---------- */
.faculty {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 7vw, 5.5rem);
  margin-top: 0.5rem;
}
.fac {
  display: flex;
  align-items: flex-start;          /* photo + content share the same top edge */
  gap: clamp(1.5rem, 5vw, 4rem);
}
.fac:nth-child(even) { flex-direction: row-reverse; }

.fac__portrait {
  margin: 0;
  flex: 1 1 0;                      /* 50 / 50 with the body */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;            /* photo hugs the centre gap */
}
.fac:nth-child(even) .fac__portrait { align-items: flex-start; }

.fac__frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.5));   /* blob-shaped shadow */
}
.fac__frame::after {                      /* initials shown only if a photo is missing */
  content: attr(data-initials);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 600;
  color: var(--gold-soft);
  z-index: 0;
}
.fac__frame:has(.fac__photo)::after { content: none; }

/* the second blob, traced as a thin outline, offset behind the photo */
.fac__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  transform: scale(1.17) translate(-7%, -7%) translateY(var(--py, 0px));
  will-change: transform;
}
.fac__outline path {
  fill: none;
  stroke: rgba(244, 239, 228, 0.55);
  stroke-width: 0.7;
}
.fac:nth-child(even) .fac__outline {
  transform: scale(1.17) translate(7%, -7%) translateY(var(--py, 0px));
}

/* the cut-out photo, clipped to the blob shape, on a soft navy panel */
.fac__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit:contain;
  object-position: center;
  z-index: 2;
  background: linear-gradient(165deg, var(--navy-600) 0%, var(--navy-800) 78%);
  border: 2px solid #d9930b;
  border-radius: 10% 20% 10% 40%;
}
.fac__portrait figcaption {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 420px;
  margin-top: 1rem;              /* name sits over the lower curve of the blob */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}
.fac__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cream);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.fac__role {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

.fac__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  padding-top: 5%;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(var(--py, 0px));
  will-change: transform;
}
.fac__badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--gold);
  padding: 0.42rem 1.05rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.fac__module {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  max-width: 24ch;
  min-height: 2.4em;                     /* keeps every card's content the same height */
}
.fac__topics { list-style: none; display: grid; gap: 0.9rem; width: 100%; }
.fac__topics li {
  position: relative;
  padding-left: 1.7rem;
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  color: var(--cream-soft);
}
.fac__topics li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- 13. Enrolment & spec ---------- */
.enrol__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.5rem; }
.enrol__contact { font-size: 0.95rem; color: var(--ink-soft); }
.enrol__contact a { color: var(--navy-800); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }

.spec {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.9rem 1.8rem;
  box-shadow: var(--shadow);
}
.spec__head {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 1rem;
}
.spec__list { display: grid; gap: 0; margin-bottom: 1.75rem; }
.spec__list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec__list dt { color: var(--ink-soft); font-size: 0.92rem; }
.spec__list dd { font-weight: 600; text-align: right; font-size: 0.95rem; }

.spec__fees {
  background: linear-gradient(180deg, #fdf4e0, #fbedd0);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.4rem 1.5rem;
}
.spec__feesLabel {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.5rem;
}
.spec__feesMain { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--navy-800); line-height: 1; }
.spec__feesMain span { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); margin-left: 0.5rem; }
.spec__feesNote { font-size: 0.88rem; color: var(--ink-soft); margin: 0.6rem 0 0.9rem; }
.spec__feesList { list-style: none; display: flex; gap: 1.25rem; }
.spec__feesList li { position: relative; padding-left: 1.1rem; font-size: 0.9rem; font-weight: 600; color: var(--navy-800); }
.spec__feesList li::before { content: "\2713"; position: absolute; left: 0; color: var(--gold-600); }

/* ---------- 13b. Registration form ---------- */
.enrol__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 550px);
  gap: clamp(2.25rem, 6vw, 4.5rem);
  align-items: start;
}
.enrol__aside { display: flex; flex-direction: column; gap: 1.25rem; }
.enrol__aside .enrol__contact { margin: 0; }

.regform {
  margin-top: 2.25rem;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.regform__row { display: contents; }   /* every field on its own row */
.regfield { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.regfield--full { grid-column: 1 / -1; }

.regfield label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.regfield__req { color: var(--gold-600); }

.regfield input,
.regfield textarea,
.regfield select {
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 0.82rem 1rem;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.regfield textarea { resize: vertical; min-height: 5rem; }
.regfield select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.regfield input:focus,
.regfield textarea:focus,
.regfield select:focus {
  outline: none;
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(244, 168, 29, 0.22);
}
.regfield input::placeholder,
.regfield textarea::placeholder { color: var(--ink-soft); opacity: 0.7; }

.regfield.is-invalid input,
.regfield.is-invalid textarea,
.regfield.is-invalid select { border-color: #c0392b; }
.regfield.is-invalid input:focus,
.regfield.is-invalid textarea:focus,
.regfield.is-invalid select:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18); }

.regfield__err {
  font-size: 0.8rem;
  font-weight: 500;
  color: #c0392b;
}

.regform__consent {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
  margin-top: 0.25rem;
}
.regform__consent input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--gold-600);
}
.regform__consent + .regfield__err { display: block; margin-top: -0.5rem; }

.regform__submit { margin-top: 0.75rem; align-self: flex-start; }
.regform__submit[disabled] { opacity: 0.65; cursor: progress; transform: none; }
.regform.is-sending .regform__submitText::after {
  content: "";
  display: inline-block;
  width: 0.9em; height: 0.9em;
  margin-left: 0.55em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: regSpin 0.7s linear infinite;
}
@keyframes regSpin { to { transform: rotate(360deg); } }

.regform__note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  max-width: 46ch;
}
.regform__status { font-size: 0.88rem; font-weight: 500; color: #c0392b; }
.regform__status:empty { display: none; }

.regform__done {
  margin-top: 2rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid #1fbe59;
  border-radius: var(--r-lg);
  padding: 1.75rem 1.8rem;
  box-shadow: var(--shadow);
}
.regform__done:focus { outline: none; }
.regform__doneIcon {
  width: 2.4rem;
  height: 2.4rem;
  color: #1fbe59;
  margin-bottom: 0.6rem;
}
.regform__done h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.regform__done p { color: var(--ink-soft); font-size: 0.96rem; max-width: 52ch; }
.regform__done a { color: var(--navy-800); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }

/* ---------- 14. FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  font-weight: 600;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gold-600);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__answer { padding: 0 0.25rem 1.5rem; animation: revealUp 0.3s ease both; }
.faq__answer p { color: var(--ink-soft); max-width: 68ch; }

/* ---------- 15. Closer & footer ---------- */
.closer { padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.closer__inner h2 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  line-height: 1.4;
  color: var(--gold-soft);
  margin-bottom: 1rem;
}
.closer__inner p { color: var(--cream-soft); font-size: var(--fs-lead); margin-bottom: 2rem; }

.footer { background: var(--navy-900); color: var(--cream-soft); padding-block: 3rem 2rem; }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--cream-rule);
}
.footer__brand { display: flex; align-items: center; gap: 1rem; }
.footer__seal { width: 52px; height: 52px; }
.footer__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--cream); }
.footer__tag { font-size: 0.85rem; }
.footer__contact { display: grid; gap: 0.35rem; font-size: 0.9rem; }
.footer__contact a { text-decoration: none; border-bottom: 1px solid var(--cream-rule); padding-bottom: 1px; }
.footer__contact a:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

/* ---------- 16. Motion / reveal ---------- */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* scroll-reveal — JS tags blocks with [data-reveal]; grouped children
   get a --reveal-delay so they cascade in one after another */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* header drops in on first load */
@keyframes navDrop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.nav { animation: navDrop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* smooth accordion open/close where the browser supports it
   (progressive enhancement — elsewhere <details> just snaps as before) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content,
  .stage__body::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.34s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.34s allow-discrete;
  }
  .faq__item[open]::details-content,
  .stage__body[open]::details-content { block-size: auto; }
}

/* ---------- 16b. Hover polish (pointer devices only) ---------- */
@media (hover: hover) {
  .card,
  .learn__item,
  .spec {
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
  }
  .card:hover,
  .learn__item:hover,
  .spec:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
  .module { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease; }
  .module:hover { transform: translateY(-3px); border-color: var(--gold-soft); }
}

/* ---------- 16c. Floating WhatsApp button ---------- */
.wa-fab {
  position: fixed;
  right: clamp(1rem, 3.5vw, 1.9rem);
  bottom: clamp(1rem, 3.5vw, 1.9rem);
  z-index: 95;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 30px -6px rgba(37, 211, 102, 0.5), 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease, box-shadow 0.2s ease;
  animation: waFabIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}
.wa-fab__icon { width: 1.85rem; height: 1.85rem; }

.wa-fab:hover,
.wa-fab:focus-visible {
  transform: translateY(-3px) scale(1.05);
  background: #1fbe59;
  box-shadow: 0 18px 40px -6px rgba(37, 211, 102, 0.55), 0 6px 18px rgba(0, 0, 0, 0.26);
}

/* slow attention ring */
.wa-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: waFabPulse 2.6s ease-out infinite 1.5s;
  pointer-events: none;
}

/* label reveals on hover / keyboard focus (pointer devices) */
.wa-fab__label {
  position: absolute;
  right: calc(100% + 0.7rem);
  top: 50%;
  padding: 0.42rem 0.8rem;
  border-radius: var(--r-lg);
  background: var(--navy-800);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(0.4rem);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .wa-fab:hover .wa-fab__label,
  .wa-fab:focus-visible .wa-fab__label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes waFabIn {
  from { opacity: 0; transform: translateY(1.25rem) scale(0.6); }
  to   { opacity: 1; transform: none; }
}
@keyframes waFabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---------- 17. Responsive ---------- */
/* Desktop layout is the baseline above. Each step below only *adjusts*
   it for a narrower screen — nothing here changes the desktop view.
   Breakpoints: 1024 · 900 (tablet) · 780 · 600 (phone) · 400 · 380     */

/* — small desktop / large tablet — */
@media (max-width: 1024px) {
  .cards          { grid-template-columns: repeat(2, 1fr); }
  .factstrip      { grid-template-columns: repeat(2, 1fr); }
  .learn          { grid-template-columns: repeat(2, 1fr); }
}

/* — tablet: split layouts go single-column, nav collapses to the button — */
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__mobile[data-open] { display: flex; }

  .hero__headline { display: block; margin-bottom: 1.75rem; }

  .wrap--split { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
  .wrap--split .section__intro { margin-bottom: 1.5rem; }

  .program__head,
  .pathway__head,
  .learn__head:has(.learn__figure) {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 5vw, 2.5rem);
  }
  .program__figure,
  .pathway__figure { max-width: 460px; margin-inline: auto; }
  .learn__figure   { max-width: 620px; margin-inline: auto; }

  .enrol__grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
  .enrol__aside { max-width: 460px; }
}

/* — large phone: modules go single-column, faculty rows stack — */
@media (max-width: 780px) {
  .stage__modules { grid-template-columns: 1fr; }

  .fac,
  .fac:nth-child(even) {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .fac__portrait,
  .fac:nth-child(even) .fac__portrait {
    flex: none;
    width: min(320px, 84%);
    align-items: flex-start;
  }
  .fac__body {
    width: 100%;
    max-width: none;
    padding-top: 0;
    transform: none;
  }
  .fac__outline,
  .fac:nth-child(even) .fac__outline { transform: scale(1.12) translate(0, -3%); }
  .fac__portrait figcaption { max-width: none; text-align: left; align-items: flex-start; }
  .fac__module { min-height: 0; }
}

/* — phone — */
@media (max-width: 640px) {
  .cards, .learn { grid-template-columns: 1fr; }
  .regform__submit { align-self: stretch; }
}

@media (max-width: 600px) {
  .hero__carousel__arrow { display: none; }   /* keep swipe + dots */

  .hero__actions .btn,
  .enrol__actions .btn { flex: 1 1 100%; }
  .hero__actions, .enrol__actions { width: 100%; }
  .countdown__inner .btn { width: 100%; max-width: 22rem; }
  .flip__label { letter-spacing: 0.08em; }

  .section__intro { line-height: 1.55; }

  .nav__inner { gap: 1rem; }
  .nav__logo  { height: 38px; }

  .factstrip > div { padding: 0.95rem 1rem; }
  .factstrip dt { font-size: 0.68rem; letter-spacing: 0.12em; margin-bottom: 0.3rem; }
  .factstrip dd { font-size: 0.98rem; }

  .spec { padding: 1.5rem 1.35rem; }
  .spec__feesList { flex-wrap: wrap; gap: 0.5rem 1.25rem; }

  .spine::before { left: 19px; }
  .stage { grid-template-columns: 40px minmax(0, 1fr); gap: 0.25rem 1rem; }
  .stage__marker { width: 40px; height: 40px; }
  .stage__num { font-size: 0.9rem; }
  .stage__summary { grid-template-columns: 1fr; }
  .stage__hint { grid-row: auto; grid-column: 1; padding-right: 1.5rem; }

  .footer__inner { gap: 1.5rem; }
  .footer__legal { flex-direction: column; }
}

/* — small phone — */
@media (max-width: 400px) {
  .factstrip { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .flipclock { --fc-w: 44px; --fc-h: 58px; --fc-fs: 1.7rem; gap: 0.25rem; }
  .flipclock__colon { font-size: 1.15rem; margin-top: calc(var(--fc-h) / 2 - 0.55em); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .spine::before { transform: scaleY(1); }
  .eyebrow::before { transform: none; }
  .program__figure img,
  .pathway__figure img,
  .learn__figure img,
  .hero__carousel__slide img { transform: none !important; }
  .wa-fab { animation: none; opacity: 1; }
  .wa-fab::after { display: none; }
}