/* ============================================================
   MODERN UNIVERSITY SYSTEM — Design System v2.0
   E-Learning / Online University Edition
   ============================================================ */

/* --- Custom Properties --- */
:root {
  /* ══════════════════════════════════════════════════════════════
     EAU BRAND PALETTE — deep indigo · crimson · gold
     Taken from eau.edu.so. The indigo ramp is the brand base, gold
     is the single warm accent, crimson is a highlight used WITH gold
     (gradients, rules, badges) rather than on its own.
     Interactive elements deliberately use the indigo family, not the
     crimson: red on every link and button reads as an error state.
     ══════════════════════════════════════════════════════════════ */
  --p-900:         #2b2560;
  --p-800:         #3a3179;
  --p-700:         #4a3f96;
  --p-600:         #5b53a5;
  --p-400:         #8b83d4;
  --p-300:         #b5afe3;
  --p-200:         #d4d0f0;
  --p-100:         #eceafa;
  --p-50:          #f6f5fd;

  --primary:       #2b2560;   /* brand indigo */
  --primary-light: #1f1a48;   /* deeper indigo */
  --accent:        #4a3f96;   /* links & interactive */
  --accent-hover:  #3a3179;
  --crimson:       #e03a52;   /* highlight, paired with gold */
  --crimson-dark:  #b52a40;
  --gold:          #f0b429;
  --gold-light:    #ffd97a;
  --gold-dark:     #d69a17;

  --text-dark:     #1f1a48;
  --text-mid:      #535575;
  --text-light:    #8b8da6;
  --bg-light:      #f6f5fd;
  --bg-white:      #FFFFFF;
  --bg-dark:       #1a1540;
  --border:        #e4e1f4;
  --shadow:        0 4px 24px rgba(43,37,96,.10);
  --shadow-lg:     0 20px 60px rgba(43,37,96,.18);
  --radius:        14px;
  --radius-lg:     24px;
  --transition:    all .3s cubic-bezier(.4,0,.2,1);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text-dark);
  background: var(--bg-white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--text-dark); }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h4 { font-size: 1.2rem; }
p { color: var(--text-mid); line-height: 1.75; }

/* --- Section Spacing --- */
.section-pad { padding: 6rem 0; }
.section-pad-sm { padding: 4rem 0; }

/* --- Section Label --- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: linear-gradient(135deg,#EFF6FF,#DBEAFE);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.section-divider {
  width: 48px; height: 4px;
  background: var(--accent);
  border-radius: 2px;
  margin: .9rem 0 1.5rem;
}
.section-divider.centered { margin-left: auto; margin-right: auto; }
.text-gradient {
  background: linear-gradient(135deg, #a87a12 0%, var(--gold-dark) 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.uni-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.2rem 0;
  transition: var(--transition);
}
.uni-navbar.scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--border), 0 8px 40px rgba(0,0,0,.07);
  padding: .75rem 0;
}
.uni-navbar .navbar-brand img {
  height: 46px;
  transition: var(--transition);
}
.uni-navbar .nav-link {
  color: rgba(255,255,255,.88) !important;
  font-weight: 500;
  font-size: .9rem;
  padding: .45rem .9rem !important;
  border-radius: 8px;
  transition: var(--transition);
}
.uni-navbar.scrolled .nav-link { color: var(--text-dark) !important; }
.uni-navbar .nav-link:hover,
.uni-navbar .nav-link.active {
  color: var(--accent) !important;
  background: rgba(10,43,78,.08);
}
.uni-navbar.scrolled .nav-link:hover { color: var(--accent) !important; }
.uni-navbar.scrolled .navbar-toggler { color: var(--text-dark); background: var(--bg-light); }
@media (max-width: 991px) {
  .uni-navbar {
    background: rgba(11,30,59,.97);
    backdrop-filter: blur(24px);
    padding: .9rem 0;
  }
  .navbar-collapse {
    margin-top: .75rem;
    padding: 1rem 0 .5rem;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .uni-navbar.scrolled .navbar-collapse {
    border-top-color: var(--border);
  }
  .uni-navbar.scrolled .navbar-collapse .nav-link { color: var(--text-dark) !important; }
}

/* ============================================================
   HERO SECTION — Cinematic v2 (video-ready, full-screen)
   ============================================================ */

/* ── Shell ── */

/* ── Video background ── */

/* ── Slider image fallback ── */
.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0;
  transition: opacity 1.6s ease;
  z-index: 0;
}
.hero-bg-slide.active { opacity: .85; }

/* ── Overlay layers ── */

/* Noise texture on top */

/* ── Animated glow orbs ── */
.hero-orb-parallax {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(20px,-30px) scale(1.06); }
  66%       { transform: translate(-15px,20px) scale(.95); }
}

/* ── Main content wrapper ── */

/* ── Eyebrow badge ── */
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,.1); }
}

/* ── Headline ── */
@keyframes shimmer-text {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Subtitle ── */

/* ── Program type pills ── */
.hero-program-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.8);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
  backdrop-filter: blur(4px);
}
.hero-program-pill:hover {
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.35);
  color: #ffd97a;
  text-decoration: none;
}

/* ── CTA buttons ── */
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0; }

/* ── Ken Burns drift on the active slide ── */
@keyframes heroKenBurns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.09); }
}
.hero-bg-slide.active { animation: heroKenBurns 6s ease-out forwards; }

/* ── Hero entrance animation (load-triggered, not scroll-triggered —
     hero is already in view on page load) ── */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-rise {
  opacity: 0;
  animation: heroRise .7s cubic-bezier(.16,1,.3,1) forwards;
}

/* ── Floating code terminal ── */
/* ── Hero video panel ──────────────────────────────────────────────
   Occupies the same spot as the terminal on wide screens, so the hero
   layout is unchanged. The terminal is hidden below 1399px; the video
   is not - below that width it stops floating and follows the copy as a
   normal block, because unlike the terminal it is actual content. */
/* The copy column and the video column are siblings, so the panel can never
   land on top of the subtitle the way the absolutely-positioned one did. */


@keyframes heroVideoPulse {
  0%   { box-shadow: 0 0 0 0    rgba(245,166,35,.5); }
  70%  { box-shadow: 0 0 0 22px rgba(245,166,35,0); }
  100% { box-shadow: 0 0 0 0    rgba(245,166,35,0); }
}

.hero-video-frame iframe,


/* Below the two-column breakpoint the columns stack, so the video simply
   follows the copy. Cap the width so it does not become a billboard. */
@media (max-width: 991px) {
  .hero-video { width: min(560px, 100%); margin: 0 auto; }
  .hero-col-video { margin-top: -1.5rem; padding-bottom: 3rem; }
}
@media (max-width: 575px) {
  .hero-video-play { width: 54px; height: 54px; font-size: 1.1rem; }
  .hero-video-caption { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { animation: none; opacity: 1; }
  .hero-video-play { animation: none; }
  .hero-video-trigger, .hero-video-play { transition: none; }
}

@keyframes heroCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Only render the decorative terminal when the viewport is wide enough that
   it clears both the centered hero copy and the fixed chat-button column. */
@media (max-width: 1399px) { .hero-terminal { display: none; } }

/* ── Stats bar (bottom of hero) ── */

/* ── Scroll hint ── */
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .5; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ── Slide transition ── (keep old class compatibility) */

/* ── Video play button ── */

/* ── Responsive ── */
@media (max-width: 991px) {
  .hero-sub   { font-size: .98rem; }
  .hero-stat-item { padding: 0 1.5rem; }
  .hero-stats-bar { margin-top: 3rem; }
}
@media (max-width: 575px) {
  .hero-stat-item { padding: .75rem 1.25rem; }
  .hero-stat-item + .hero-stat-item::before { display: none; }
  .hero-stats-inner { gap: 0; }
  .hero-scroll-hint { display: none; }
}

/* ============================================================
   FEATURES STRIP
   ============================================================ */
.features-strip {
  background: #fff;
  padding: 4rem 0;
  border-bottom: 1px solid var(--border);
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  transition: var(--transition);
  border: 1px solid transparent;
}
.feature-item:hover { background: var(--bg-light); border-color: var(--border); transform: translateY(-4px); }
.feature-icon-wrap {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg,#EFF6FF,#DBEAFE);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.feature-item h5 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.feature-item p { font-size: .875rem; color: var(--text-mid); margin: 0; }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section { background: var(--bg-light); padding: 7rem 0; }
.about-visual { position: relative; }
.about-main-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-main-img img { width: 100%; height: 480px; object-fit: cover; }
.about-accent-img {
  position: absolute;
  bottom: -28px; right: -28px;
  width: 200px; height: 200px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: var(--shadow-lg);
}
.about-accent-img img { width: 100%; height: 100%; object-fit: cover; }
.about-exp-bubble {
  position: absolute;
  top: -20px; left: -20px;
  width: 124px; height: 124px;
  padding: 0 .6rem;
  background: var(--accent);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 12px 40px rgba(10,43,78,.45);
  border: 4px solid #fff;
}
.about-exp-bubble .num { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--gold); }
.about-exp-bubble .label { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; opacity: .9; margin-top: .25rem; text-align: center; line-height: 1.25; }
.about-text { padding-left: 2.5rem; }
@media (max-width: 991px) { .about-text { padding-left: 0; margin-top: 3rem; } .about-accent-img { display: none; } .about-exp-bubble { display: none; } }
.about-text p { font-size: 1rem; color: var(--text-mid); }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 575px) { .mission-grid { grid-template-columns: 1fr; } }
.mission-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.4rem;
  border-left: 4px solid var(--accent);
  box-shadow: 0 2px 12px rgba(11,30,59,.05);
  transition: var(--transition);
}
.mission-box:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mission-box h6 { font-size: .9rem; font-weight: 700; color: var(--accent); margin-bottom: .5rem; }
.mission-box p { font-size: .84rem; color: var(--text-mid); margin: 0; }

/* ============================================================
   PROGRAMS (COURSES ON HOME)
   ============================================================ */
.programs-home { padding: 7rem 0; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  position: relative;
  background: linear-gradient(135deg, var(--gold) 0%, #ffd97a 48%, var(--gold-dark) 100%);
  padding: 6rem 0;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: rgba(255,255,255,.22);
  border-radius: 50%;
  top: -320px; right: -150px;
}
.cta-banner::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  background: rgba(10,43,78,.08);
  border-radius: 50%;
  bottom: -160px; left: -80px;
}
.cta-banner-inner { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--primary); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800; }
.cta-banner p { color: rgba(10,43,78,.72); font-size: 1.05rem; margin-top: .75rem; }

/* Buttons need a dark treatment to read on the gold background */
.cta-banner .btn-gold-uni {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 10px 28px -8px rgba(10,43,78,.45);
}
.cta-banner .btn-gold-uni:hover { background: var(--primary-light); border-color: var(--primary-light); color: #fff; }
.cta-banner .btn-outline-uni { color: var(--primary); border-color: rgba(10,43,78,.35); }
.cta-banner .btn-outline-uni:hover { background: rgba(10,43,78,.08); border-color: var(--primary); color: var(--primary); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS  (.ts)
   The old card led with five gold stars on every single testimonial -
   a rating widget for a rating system that does not exist - then set
   the actual words in small grey italic underneath. The words are the
   only reason the section exists, so they lead now. The rail is masked
   at both edges so the part-visible card reads as "more this way"
   instead of a card sliced in half at the container edge.
   ══════════════════════════════════════════════════════════════════ */
.ts {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2.75rem, 5.5vw, 4.5rem);
  background: linear-gradient(180deg, #eceafa 0%, #e4e1f4 55%, #eceafa 100%);
  overflow: hidden;
}
.ts::before, .ts::after {
  content: '';
  position: absolute; width: 520px; height: 520px;
  border-radius: 50%; filter: blur(120px); opacity: .45;
  pointer-events: none;
}
.ts::before { top: -240px; left: -150px;  background: radial-gradient(circle, #8b5cf6, transparent 70%); }
.ts::after  { bottom: -250px; right: -150px; background: radial-gradient(circle, #16b8a6, transparent 70%); }
.ts .container { position: relative; z-index: 1; }

.ts-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.ts-nav { display: flex; gap: .6rem; flex-shrink: 0; }
.ts-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9);
  background: #fff;
  color: #2b3444; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 18px -10px rgba(15,23,42,.35);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, color .3s, opacity .3s;
}
.ts-btn:hover:not(:disabled) {
  background: #2b2560; color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 14px 26px -10px rgba(11,63,126,.6);
}
.ts-btn:disabled { opacity: .34; cursor: default; box-shadow: none; }

/* ── the rail ────────────────────────────────────────────────────── */
.ts-rail {
  position: relative;
  /* the mask is what turns a clipped card into an invitation */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 72px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 72px), transparent 100%);
  margin: 0 -42px;
  padding: .5rem 42px 1.25rem;
}
.ts-track {
  display: flex;
  gap: 1.35rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ts-track::-webkit-scrollbar { display: none; }
.ts-track:focus-visible { outline: 2px solid #2b2560; outline-offset: 6px; border-radius: 22px; }

/* ── the card ────────────────────────────────────────────────────── */
.ts-card {
  position: relative;
  display: flex; flex-direction: column;
  flex: 0 0 auto;
  width: 372px;
  margin: 0;
  padding: 1.9rem 1.7rem 1.6rem;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(15,23,42,.06),
              0 10px 22px -12px rgba(15,23,42,.22),
              0 26px 50px -30px var(--tc);
  transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s cubic-bezier(.2,.8,.2,1);
}
.ts-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 5px; z-index: 3;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--tc), var(--tc-d));
  transform: scaleX(.34);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.ts-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 2px 6px rgba(15,23,42,.06),
              0 26px 50px -20px rgba(15,23,42,.32),
              0 40px 80px -30px var(--tc);
}
.ts-card:hover::before { transform: scaleX(1); }

/* the quote glyph as a watermark rather than a grey blob above the text */
.ts-mark {
  position: absolute;
  top: -1.1rem; right: .5rem;
  z-index: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9rem; line-height: 1;
  color: var(--tc);
  opacity: .11;
  pointer-events: none;
  user-select: none;
}

.ts-quote {
  position: relative; z-index: 1;
  margin: 0 0 1.35rem;
  padding: 0;
  border: 0;
  font-size: 1rem;
  line-height: 1.72;
  color: #29323f;
  font-weight: 450;
}

/* ── attribution ─────────────────────────────────────────────────── */
.ts-by {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .9rem;
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid #e4e1f4;
}
.ts-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700; letter-spacing: .03em;
  color: #fff;
  background: linear-gradient(135deg, var(--tc), var(--tc-d));
  box-shadow: 0 6px 16px -8px var(--tc), 0 0 0 4px #fff, 0 0 0 5px var(--tc-s);
}
.ts-id { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.ts-name { font-size: .95rem; font-weight: 700; color: #1f1a48; line-height: 1.2; }
.ts-qual {
  align-self: flex-start;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tc-d);
  background: var(--tc-s);
  padding: .2rem .55rem;
  border-radius: 100px;
}
.ts-field { font-size: .78rem; color: #7c8797; line-height: 1.35; }

/* ── position dots ───────────────────────────────────────────────── */
.ts-dots { display: flex; gap: .45rem; margin-top: .35rem; }
.ts-dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 100px;
  background: #c2cddc;
  cursor: pointer;
  transition: width .35s cubic-bezier(.2,.8,.2,1), background .35s;
}
.ts-dot.is-on { width: 26px; background: #2b2560; }

@media (max-width: 575.98px) {
  .ts-card { width: 84vw; padding: 1.6rem 1.35rem 1.35rem; }
  .ts-quote { font-size: .95rem; }
  .ts-rail {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
    margin: 0 -1rem; padding: .5rem 1rem 1.25rem;
  }
  .ts-head { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-card, .ts-card::before, .ts-btn, .ts-dot { transition: none; }
  .ts-card:hover { transform: none; }
}

/* ============================================================
   NEWS (HOME PREVIEW)
   ============================================================ */
.news-preview { padding: 7rem 0; }

/* ============================================================
   PAGE HERO (BREADCRUMB HEADER)
   ============================================================ */
/* ══════════════════════════════════════════════════════════════════
   PAGE HERO — shared by 21 inner pages
   Was 9rem of padding over a flat navy band with two hard-edged
   circles floating in it. Now: tighter, blurred colour blooms in the
   same family as the homepage, and a faint dot grid for texture.
   ══════════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: 7.5rem 0 3rem;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(37,99,235,.22), transparent 58%),
    linear-gradient(140deg, #2b2560 0%, #071c33 58%, #04101f 100%);
}
/* soft blooms rather than hard circles */
.page-hero::before,
.page-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.page-hero::before {
  width: 460px; height: 460px; top: -220px; right: 4%;
  background: radial-gradient(circle, rgba(47,127,216,.5), transparent 70%);
}
.page-hero::after {
  width: 300px; height: 300px; bottom: -170px; left: 8%;
  background: radial-gradient(circle, rgba(245,158,11,.34), transparent 70%);
}
/* texture */
.page-hero-inner::before {
  content: '';
  position: absolute; inset: -3rem -100vw;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  z-index: -1;
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 800; letter-spacing: -.02em;
  margin-bottom: .5rem;
}
.page-hero-lede {
  color: rgba(255,255,255,.66);
  font-size: 1rem; margin: 0 0 .9rem;
}

/* live figures under a page title — separated by hairlines rather than
   bullets, so they read as data instead of a sentence */
.page-hero-facts {
  display: flex; flex-wrap: wrap;
  list-style: none; margin: 0 0 1rem; padding: 0;
  gap: .35rem 0;
}
.page-hero-facts li {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: 0 .95rem;
  font-size: .88rem; color: rgba(255,255,255,.6);
  border-left: 1px solid rgba(255,255,255,.16);
  line-height: 1.3;
}
.page-hero-facts li:first-child { padding-left: 0; border-left: 0; }
.page-hero-facts b {
  color: #fff; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.page-hero-facts .is-live b { color: var(--gold); }
.phf-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34D399; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: phfPulse 2.2s ease-out infinite;
}
@keyframes phfPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
@media (max-width: 575.98px) {
  .page-hero-facts li { padding: 0 .7rem; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .phf-dot { animation: none; } }
.page-hero .breadcrumb { background: transparent; padding: 0; margin: 0; }
.page-hero .breadcrumb-item { font-size: .82rem; color: rgba(255,255,255,.55); }
.page-hero .breadcrumb-item a { color: rgba(255,255,255,.72); }
.page-hero .breadcrumb-item a:hover { color: var(--gold); }
.page-hero .breadcrumb-item.active { color: rgba(255,255,255,.9); }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3); }

/* ============================================================
   COURSE CARDS
   ============================================================ */
.courses-page { padding: 2.5rem 0 4rem; background: var(--bg-light); }
.course-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(11,30,59,.05);
  transition: var(--transition);
  height: 100%;
  display: flex; flex-direction: column;
}
.course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(245,166,35,.45); }
.course-card-img { height: 210px; overflow: hidden; position: relative; }
.course-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.course-card:hover .course-card-img img { transform: scale(1.07); }
.course-faculty-pill {
  position: absolute; bottom: .875rem; left: .875rem;
  background: rgba(11,30,59,.82);
  color: #fff; font-size: .72rem; font-weight: 600;
  padding: .3rem .8rem; border-radius: 100px;
  backdrop-filter: blur(4px);
  display: flex; align-items: center; gap: .35rem;
}
.course-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.course-card-body h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.course-card-body h4 a { color: var(--text-dark); }
.course-card-body h4 a:hover { color: var(--accent); }
.course-card-body p { font-size: .875rem; color: var(--text-mid); flex: 1; line-height: 1.65; margin-bottom: 1.25rem; }
.course-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; border: 1.5px solid var(--border);
  color: var(--accent); font-size: .84rem; font-weight: 600;
  padding: .6rem 1.25rem; border-radius: 100px;
  transition: var(--transition); width: fit-content; margin-top: auto;
}
.course-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; gap: .7rem; }

/* ============================================================
   EVENT CARDS
   ============================================================ */
.events-page { padding: 5.5rem 0; }
.event-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(11,30,59,.05);
  transition: var(--transition);
  display: flex; flex-direction: column; height: 100%;
}
.event-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(245,166,35,.45); }
.event-card-img { height: 210px; overflow: hidden; position: relative; }
.event-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.event-card:hover .event-card-img img { transform: scale(1.07); }
.event-date-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--accent); color: #fff;
  border-radius: 12px; padding: .5rem .875rem; text-align: center; line-height: 1.2;
}
.event-date-badge .day { font-size: 1.5rem; font-weight: 800; }
.event-date-badge .mon { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.event-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.event-card-body h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.event-card-body h4 a { color: var(--text-dark); }
.event-card-body h4 a:hover { color: var(--accent); }
.event-card-body p { font-size: .875rem; color: var(--text-mid); flex: 1; line-height: 1.65; margin-bottom: 1rem; }
.event-meta-row {
  display: flex; flex-wrap: wrap; gap: .75rem;
  padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--text-light);
}
.event-meta-row span { display: flex; align-items: center; gap: .35rem; }
.event-meta-row i { color: var(--accent); }

/* ============================================================
   NEWS CARDS
   ============================================================ */
.news-page { padding: 5.5rem 0; background: var(--bg-light); }
.news-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(11,30,59,.05);
  transition: var(--transition);
  height: 100%; display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(245,166,35,.45); }
.news-card-img { height: 220px; overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.news-card:hover .news-card-img img { transform: scale(1.07); }
.news-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.news-date-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--text-light); font-weight: 500;
  margin-bottom: .75rem;
}
.news-date-tag i { color: var(--accent); }
.news-card-body h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.4; }
.news-card-body h4 a { color: var(--text-dark); }
.news-card-body h4 a:hover { color: var(--accent); }
.news-card-body p { font-size: .875rem; color: var(--text-mid); flex: 1; margin-bottom: 1.25rem; }
.news-read-more {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--accent); font-weight: 600; font-size: .84rem;
  margin-top: auto; transition: var(--transition);
}
.news-read-more:hover { gap: .75rem; color: var(--accent-hover); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-page { padding: 5.5rem 0; }
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-accordion-item {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: .75rem;
  overflow: hidden;
  transition: var(--transition);
}
.faq-accordion-item:hover { border-color: rgba(245,166,35,.5); }
.faq-accordion-item.open { border-color: var(--accent); box-shadow: 0 4px 24px rgba(10,43,78,.1); }
.faq-toggle {
  width: 100%; text-align: left; background: none; border: none;
  padding: 1.35rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font-size: .98rem; font-weight: 600; color: var(--text-dark);
  transition: var(--transition);
}
.faq-toggle.open { color: var(--accent); }
.faq-chevron {
  width: 32px; height: 32px; border-radius: 50%; background: var(--bg-light);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--text-mid); flex-shrink: 0;
  transition: var(--transition);
}
.faq-toggle.open .faq-chevron { background: rgba(10,43,78,.1); color: var(--accent); transform: rotate(180deg); }
.faq-body { padding: 0 1.5rem 1.35rem; font-size: .94rem; color: var(--text-mid); line-height: 1.75; border-top: 1px solid var(--border); padding-top: 1rem; display: none; }
.faq-body.open { display: block; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-page { padding: 5.5rem 0; background: var(--bg-light); }
.gallery-masonry {
  columns: 3 280px;
  column-gap: 1rem;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: block;
}
.gallery-item img { width: 100%; display: block; transition: var(--transition); }
.gallery-hover {
  position: absolute; inset: 0;
  background: rgba(11,30,59,.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: var(--transition);
}
.gallery-hover i { color: #fff; font-size: 2rem; transform: scale(.7); transition: var(--transition); }
.gallery-item:hover .gallery-hover { opacity: 1; }
.gallery-item:hover .gallery-hover i { transform: scale(1); }
.gallery-item:hover img { transform: scale(1.04); }

/* ============================================================
   DETAIL PAGES (Course / Event / News single + custom page)
   ============================================================ */
.detail-page { padding: 5.5rem 0; }
.detail-main { max-width: 800px; }
.detail-hero-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-lg);
}
.detail-hero-img img { width: 100%; max-height: 480px; object-fit: cover; }
.detail-meta-bar {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-bottom: 2rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.detail-meta-item {
  display: flex; align-items: center; gap: .45rem;
  font-size: .875rem; color: var(--text-mid);
}
.detail-meta-item i { color: var(--accent); }
.detail-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 1.5rem; color: var(--text-dark); }
.detail-body { font-size: 1rem; color: var(--text-mid); line-height: 1.85; }
.detail-body img { border-radius: var(--radius); margin: 1.5rem 0; }
.detail-body h2, .detail-body h3, .detail-body h4 { color: var(--text-dark); margin: 2rem 0 1rem; }
.detail-body p { margin-bottom: 1.25rem; }
.detail-body a { color: var(--accent); }
.detail-body a:hover { color: var(--accent-hover); text-decoration: underline; }
.detail-sidebar { padding-left: 1.5rem; }
@media (max-width: 991px) { .detail-sidebar { padding-left: 0; margin-top: 3rem; } }
.sidebar-box {
  background: var(--bg-light);
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.sidebar-box-title {
  font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent);
  margin-bottom: 1.25rem; padding-bottom: .75rem;
  border-bottom: 2px solid rgba(10,43,78,.15);
}
.info-list { }
.info-list li {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: .75rem 0; border-bottom: 1px solid var(--border); gap: 1rem;
}
.info-list li:last-child { border-bottom: none; padding-bottom: 0; }
.info-list .il-label { font-size: .85rem; color: var(--text-mid); font-weight: 500; }
.info-list .il-value { font-size: .88rem; color: var(--text-dark); font-weight: 600; text-align: right; }

/* Countdown */
.event-countdown { display: flex; gap: .875rem; flex-wrap: wrap; margin: 2rem 0; }
.cd-box {
  background: var(--primary); color: #fff;
  border-radius: var(--radius); padding: 1.25rem 1.5rem; text-align: center; min-width: 78px;
}
.cd-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.cd-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; opacity: .65; margin-top: .35rem; }

/* Share */
.share-row { display: flex; gap: .75rem; flex-wrap: wrap; margin: 2rem 0; }
.share-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.25rem; border-radius: 100px;
  font-size: .84rem; font-weight: 600; transition: var(--transition);
}
.share-pill:hover { transform: translateY(-2px); opacity: .9; }
.share-pill.fb { background: #1877F2; color: #fff; }
.share-pill.tw { background: #1DA1F2; color: #fff; }
.share-pill.li { background: #0A66C2; color: #fff; }

/* ============================================================
   PAGINATION
   ============================================================ */
.modern-pagination { display: flex; justify-content: center; margin-top: 3.5rem; }
.modern-pagination .pagination { gap: .35rem; flex-wrap: wrap; }
.modern-pagination .page-link {
  border-radius: 10px !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-mid); font-size: .875rem; font-weight: 500;
  padding: .55rem .95rem;
  transition: var(--transition);
  background: #fff;
}
.modern-pagination .page-link:hover { background: var(--accent); border-color: var(--accent) !important; color: #fff; }
.modern-pagination .page-item.active .page-link { background: var(--accent); border-color: var(--accent) !important; color: #fff; }
.modern-pagination .page-item.disabled .page-link { opacity: .45; }

/* ============================================================
   BUTTONS (global)
   ============================================================ */
.btn-primary-uni {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #fff;
  border: 2px solid var(--accent); padding: .85rem 2rem;
  border-radius: 100px; font-weight: 600; font-size: .95rem;
  transition: var(--transition);
}
.btn-primary-uni:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(10,43,78,.35); }
.btn-outline-uni {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.55); padding: .85rem 2rem;
  border-radius: 100px; font-weight: 600; font-size: .95rem;
  transition: var(--transition);
}
.btn-outline-uni:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-gold-uni {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gold); color: var(--primary);
  border: 2px solid var(--gold); padding: .85rem 2rem;
  border-radius: 100px; font-weight: 700; font-size: .95rem;
  transition: var(--transition);
}
.btn-gold-uni:hover { background: #d69a17; border-color: #d69a17; color: #fff; transform: translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================ */
/* ══════════════════════════════════════════════════════════════════
   FOOTER — "Neon Glass Panels"
   A gold admissions ticker, then three solid glass panels (brand ·
   links · contact) with a thin gold-to-violet edge, and a slim bottom
   bar. Same overall height as the previous footer (~480px on desktop).
   On phones the panels stack and the link groups become an accordion.
   ══════════════════════════════════════════════════════════════════ */
.nf {
  --nf-gold: #ffc83d;
  --nf-gold2: #ff9b1a;
  --nf-vio: #a78bfa;
  --nf-ink: #1a1033;
  --nf-txt: #a9abd0;
  position: relative;
  overflow: hidden;
  color: var(--nf-txt);
  background:
    radial-gradient(520px 300px at 88% 40%, rgba(139,92,246,.28), transparent 70%),
    radial-gradient(480px 280px at 6% 75%, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(600px 200px at 50% 100%, rgba(255,200,61,.06), transparent 70%),
    #070818;
}
.nf::before {
  content: '';
  position: absolute; inset: 44px 0 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 75%);
  pointer-events: none;
}
.nf .container { position: relative; }
.nf a { text-decoration: none; }

/* ── admissions ticker ───────────────────────────────────────────── */
.nf-tick {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  height: 44px; overflow: hidden;
  background: linear-gradient(90deg, #ffd45e, #ffb021 55%, var(--nf-gold2));
  box-shadow: 0 8px 30px -10px rgba(255,170,30,.55);
}
.nf-live {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; gap: .55rem;
  height: 100%;
  padding: 0 2.4rem 0 max(1.25rem, calc((100vw - 1320px) / 2 + 12px));
  background: #0d0b2e; color: var(--nf-gold);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.nf-live:hover { color: #fff; }
.nf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25);
  animation: nfPulse 1.8s ease-in-out infinite;
}
.nf-marquee { flex: 1; overflow: hidden; margin-left: -16px; }
.nf-track { display: flex; width: max-content; animation: nfScroll 45s linear infinite; }
.nf-tick:hover .nf-track { animation-play-state: paused; }
.nf-set { display: flex; align-items: center; gap: 1.6rem; padding-left: 1.6rem; }
.nf-set span {
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--nf-ink); white-space: nowrap;
}
.nf-set i { width: 6px; height: 6px; background: var(--nf-ink); opacity: .5; transform: rotate(45deg); flex: none; }
@keyframes nfScroll { to { transform: translateX(-50%); } }
@keyframes nfPulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.08); } }

/* ── panels ──────────────────────────────────────────────────────── */
.nf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr) minmax(0, 1.25fr);
  gap: 1.35rem;
  padding: 1.6rem 0;
}
.nf-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 310px;
  padding: 1.6rem 1.75rem;
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #141535, #0d0e25) padding-box,
    linear-gradient(160deg, rgba(255,200,61,.55), rgba(255,255,255,.07) 35%, rgba(255,255,255,.05) 65%, rgba(167,139,250,.55)) border-box;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.nf-card::before {
  content: '';
  position: absolute; left: 28px; right: 28px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.nf-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(139,92,246,.45); }

.nf-title {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; list-style: none; cursor: default;
}
.nf-title::-webkit-details-marker { display: none; }
.nf-title::before {
  content: ''; flex: none; order: -1;
  width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--nf-gold), var(--nf-vio));
}
.nf-title { justify-content: flex-start; }
.nf .nf-tg { display: none; margin-left: auto; color: var(--nf-gold); font-size: .85rem; transition: transform .25s; }

/* brand */
.nf-logo { height: 58px; width: auto; max-width: 100%; align-self: flex-start; }
.nf-desc { margin: 1rem 0 1.25rem; font-size: .875rem; line-height: 1.72; color: var(--nf-txt); }
.nf-bfoot { margin-top: auto; }
.nf-social { display: flex; gap: .45rem; flex-wrap: wrap; }
.nf-social a {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #e9e9ff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  transition: background .25s, color .25s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.nf-social a:hover {
  background: linear-gradient(135deg, var(--nf-gold), var(--nf-gold2)); color: var(--nf-ink);
  border-color: transparent; transform: translateY(-3px);
  box-shadow: 0 8px 18px -6px rgba(255,170,30,.6);
}
.nf-est {
  display: none;
  padding: .35rem .75rem; border-radius: 99px;
  font-size: .75rem; font-weight: 700; color: var(--nf-gold);
  border: 1px solid rgba(255,200,61,.3); background: rgba(255,200,61,.06);
}

/* links */
.nf-links { flex-direction: row; gap: 1.5rem; padding-left: 1.9rem; padding-right: 1.5rem; }
.nf-group { flex: 1 1 0; min-width: 0; }
.nf-group-wide { flex-grow: 2; }
.nf-group ul { list-style: none; margin: 0; padding: 0; }
.nf-group .nf-2col { columns: 2; column-gap: 1.25rem; }
.nf-group li { margin-bottom: .62rem; break-inside: avoid; }
.nf-group a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .875rem; color: var(--nf-txt); white-space: nowrap;
  transition: color .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.nf-group a::after {
  content: '→'; color: var(--nf-gold); font-weight: 700;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .25s, transform .25s;
}
.nf-group a:hover { color: #fff; transform: translateX(4px); }
.nf-group a:hover::after { opacity: 1; transform: none; }

/* contact */
.nf-touch-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.nf-touch-top .nf-title { margin: 0; }
.nf-status {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: .3rem .7rem; border-radius: 99px;
  font-size: .74rem; font-weight: 700;
  color: var(--nf-gold); background: rgba(255,200,61,.1);
}
.nf-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nf-status.is-open { color: #4ade80; background: rgba(74,222,128,.1); }
.nf-status[hidden] { display: none; }
.nf-contact { list-style: none; margin: 0; padding: 0; }
.nf-contact li {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .5rem;
  font-size: .875rem; line-height: 1.35; color: #ececff;
}
.nf-contact a { color: inherit; }
.nf-contact a:hover { color: var(--nf-gold); }
.nf-ic {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: #c4b5fd; background: rgba(167,139,250,.12);
}
.nf-actions { margin-top: auto; padding-top: .9rem; display: flex; gap: .6rem; }
.nf-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem .5rem; border-radius: 12px;
  font-size: .875rem; font-weight: 700; white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.nf-btn i { font-size: .78rem; transition: transform .25s; }
.nf-btn-gold {
  color: var(--nf-ink);
  background: linear-gradient(135deg, #ffd45e, var(--nf-gold2));
  box-shadow: 0 10px 24px -8px rgba(255,170,30,.6);
}
.nf-btn-gold:hover { color: var(--nf-ink); transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(255,170,30,.75); }
.nf-btn-gold:hover i { transform: translateX(3px); }
.nf-btn-ghost { color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nf-btn-ghost:hover { color: #fff; background: rgba(255,255,255,.12); }

/* bottom bar */
.nf-bottom {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem 1rem;
  padding: 1.15rem 0 1.25rem;
}
.nf-bottom::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 20%, rgba(255,255,255,.1) 80%, transparent);
}
.nf-copy, .nf-credit { margin: 0; font-size: .84rem; color: #6f72a0; }
.nf-copy a { color: #9a9cc4; }
.nf-copy a:hover { color: #fff; }
.nf-credit span { color: var(--nf-gold); font-weight: 600; }

/* ── narrow desktop ───────────────────────────────────────────── */
@media (max-width: 1399.98px) {
  .nf-card { padding: 1.5rem 1.4rem; }
  .nf-social { gap: .35rem; }
  .nf-social a { width: 34px; height: 34px; font-size: .82rem; border-radius: 10px; }
  .nf-title { white-space: nowrap; }
  .nf-status { font-size: .68rem; padding: .28rem .6rem; }
}

/* ── tablet ──────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .nf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-links { grid-column: 1 / -1; grid-row: 2; min-height: 0; }
}

/* ── phone: stack + accordion ────────────────────────────────────── */
@media (max-width: 767.98px) {
  .nf::before { display: none; }
  .nf-tick { height: 40px; }
  .nf-live { padding-left: 1rem; padding-right: 1.9rem; font-size: .7rem; }
  .nf-set span { font-size: .74rem; }
  .nf-row { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: 1.4rem 0; }
  .nf-links { grid-row: auto; }
  .nf-card { min-height: 0; padding: 1.35rem; }
  .nf-card:hover { transform: none; }
  .nf-est { display: none; }
  .nf-links { flex-direction: column; gap: 0; padding: .35rem 1.35rem; }
  .nf-group { border-bottom: 1px solid rgba(255,255,255,.07); padding: .95rem 0; }
  .nf-group:last-child { border-bottom: 0; }
  .nf-group .nf-title { margin: 0; cursor: pointer; }
  .nf-group[open] .nf-title { margin-bottom: .9rem; }
  .nf .nf-tg { display: inline-block; }
  .nf .nf-group[open] .nf-tg { transform: rotate(45deg); }
  .nf-group .nf-2col { columns: 1; }
  .nf-bottom { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nf-track, .nf-dot { animation: none; }
  .nf-card, .nf-social a, .nf-group a, .nf-btn, .nf-btn i { transition: none; }
  .nf-card:hover, .nf-social a:hover, .nf-group a:hover, .nf-btn:hover { transform: none; }
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-sr] { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
[data-sr].in-view { opacity: 1; transform: translateY(0); }
[data-sr][data-delay="1"] { transition-delay: .1s; }
[data-sr][data-delay="2"] { transition-delay: .2s; }
[data-sr][data-delay="3"] { transition-delay: .3s; }
[data-sr][data-delay="4"] { transition-delay: .4s; }
[data-sr][data-delay="5"] { transition-delay: .5s; }

/* ============================================================
   RESPONSIVE UTILITIES
   ============================================================ */
@media (max-width: 767px) {
  .hero-visual { display: none; }
  .hero-content-wrap { padding-top: 6.5rem; padding-bottom: 4rem; }
  .hero-stats-row { gap: 1.5rem; }
  .hero-stat-num { font-size: 1.8rem; }
  .section-pad { padding: 4.5rem 0; }
  .gallery-masonry { columns: 2 160px; }
  .mission-grid { grid-template-columns: 1fr; }
  .about-text { padding-left: 0; }
}
@media (max-width: 575px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-eyebrow { font-size: .72rem; }
  .gallery-masonry { columns: 1; }
  .cta-banner { padding: 4rem 0; }
}

/* ============================================================
   E-LEARNING / ONLINE UNIVERSITY ADDITIONS
   ============================================================ */

/* Level badge pills */
.level-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .3rem .8rem; border-radius: 100px;
}
.level-badge.diploma  { background: #eceafa; color: #4a3f96; }
.level-badge.bachelor { background: #d4d0f0; color: #2b2560; }
.level-badge.master   { background: #241f52; color: #f5c96b; }
.level-badge.online   { background: #FDF3DF; color: #a87a12; }

/* ── Program Level Cards (homepage) ─────────────────────── */
.level-cards-section { padding: 0; margin-top: -4rem; position: relative; z-index: 10; }
.level-card {
  position: relative;
  height: 100%;
  padding: 2.4rem 1.75rem 2rem;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.1);
  /* each level owns a hue: teal → blue → violet. Three navy cards read
     as one card printed three times; the colour is what makes the
     progression legible at a glance. */
  background:
    radial-gradient(120% 80% at 20% 0%, var(--lv) 0%, transparent 58%),
    linear-gradient(155deg, var(--lv-d) 0%, #050d1a 92%);
  box-shadow: 0 1px 2px rgba(0,0,0,.4),
              0 18px 38px -20px rgba(0,0,0,.85),
              0 30px 60px -34px var(--lv);
  transition: transform .42s cubic-bezier(.2,.8,.2,1),
              box-shadow .42s cubic-bezier(.2,.8,.2,1),
              border-color .42s;
}
/* the accent rule along the top edge, present before any hover */
.level-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--lv), var(--lv-l));
  transform: scaleX(.38);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
/* a soft pool of the card's own colour, bottom-right */
.level-card::after {
  content: '';
  position: absolute; right: -90px; bottom: -110px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--lv), transparent 70%);
  opacity: .3;
  transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.level-card:hover {
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--lv) 45%, transparent);
  box-shadow: 0 2px 6px rgba(0,0,0,.45),
              0 28px 54px -20px rgba(0,0,0,.9),
              0 46px 88px -34px var(--lv);
}
.level-card:hover::before { transform: scaleX(1); }
.level-card:hover::after  { opacity: .5; transform: scale(1.12); }
@supports not (color: color-mix(in srgb, red 10%, blue)) {
  .level-card:hover { border-color: rgba(255,255,255,.32); }
}

/* teal → blue → violet, shallow to deep */
.level-card.diploma-card  { --lv: #16b8a6; --lv-l: #5eead4; --lv-d: #06403c; }
.level-card.bachelor-card { --lv: #5b53a5; --lv-l: #b5afe3; --lv-d: #241f52; }
.level-card.master-card   { --lv: #8b5cf6; --lv-l: #c4b5fd; --lv-d: #2a1259; }

/* floating ghost-icon watermark */
.level-card-watermark {
  position: absolute; bottom: -1.25rem; right: -1rem;
  font-size: 9rem; line-height: 1;
  color: var(--lv);
  opacity: .1;
  z-index: 0; pointer-events: none;
  animation: floatWatermark 7s ease-in-out infinite;
}
@keyframes floatWatermark {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-16px) rotate(8deg); }
}

/* diagonal shine sweep on hover */
.level-card-shine {
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg);
  transition: left .85s ease;
  z-index: 2; pointer-events: none;
}
.level-card:hover .level-card-shine { left: 125%; }

/* corner ribbon (e.g. "Most Popular") — gold stays reserved for this */
.level-card-badge {
  position: absolute; top: 1.15rem; right: -3rem;
  width: 11rem; padding: .35rem 0;
  background: linear-gradient(135deg,#f0b429,#ffd97a);
  color: #5c3d05; font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  z-index: 4;
}

/* the icon tile is filled in the level's colour rather than frosted white */
.level-card-icon {
  width: 68px; height: 68px; border-radius: 20px;
  background: linear-gradient(140deg, var(--lv), var(--lv-d));
  border: 1px solid color-mix(in srgb, var(--lv-l) 40%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff; margin: 0 auto 1.25rem;
  box-shadow: 0 10px 26px -8px var(--lv), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .42s cubic-bezier(.34,1.35,.5,1), box-shadow .42s;
  position: relative; z-index: 1;
}
@supports not (color: color-mix(in srgb, red 10%, blue)) {
  .level-card-icon { border-color: rgba(255,255,255,.25); }
}
.level-card-icon::before {
  content: '';
  position: absolute; inset: -8px;
  border: 2px solid var(--lv);
  border-radius: 26px;
  opacity: .5;
  animation: pulseRing 2.8s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(.92); opacity: .55; }
  80%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}
.level-card:hover .level-card-icon {
  transform: translateY(-3px) scale(1.08) rotate(-6deg);
  box-shadow: 0 16px 34px -8px var(--lv), inset 0 1px 0 rgba(255,255,255,.28);
}

.level-card h3 {
  color: #fff; font-size: 1.42rem; font-weight: 800;
  margin-bottom: .55rem; letter-spacing: -.015em;
  position: relative; z-index: 1;
}
.level-card p {
  color: rgba(255,255,255,.62); font-size: .875rem; line-height: 1.65;
  margin-bottom: 1.35rem; position: relative; z-index: 1;
}

.level-card-meta {
  display: flex; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.15rem; margin-top: auto;
  position: relative; z-index: 1;
}
.level-card-meta .meta-item { flex: 1; text-align: center; position: relative; }
.level-card-meta .meta-item:not(:last-child)::after {
  content: '';
  position: absolute; top: 2px; right: 0;
  width: 1px; height: calc(100% - 4px);
  background: rgba(255,255,255,.14);
}
/* the numbers take the level's colour — colour where it carries meaning */
.level-card-meta .meta-num {
  font-size: 1.45rem; font-weight: 800; line-height: 1.2;
  color: var(--lv-l);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px color-mix(in srgb, var(--lv) 45%, transparent);
}
@supports not (color: color-mix(in srgb, red 10%, blue)) {
  .level-card-meta .meta-num { text-shadow: none; }
}
.level-card-meta .meta-lbl {
  font-size: .64rem; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .2rem;
}

.level-card-link {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: var(--lv-d); font-weight: 700;
  padding: .68rem 1.5rem; border-radius: 100px;
  font-size: .86rem;
  margin-top: 1.35rem; position: relative; z-index: 1;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, background .32s, color .32s;
}
.level-card-link i { transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.level-card:hover .level-card-link {
  transform: translateY(-2px);
  background: linear-gradient(120deg, var(--lv), var(--lv-d));
  color: #fff;
  box-shadow: 0 14px 30px -10px var(--lv);
}
.level-card:hover .level-card-link i { transform: translateX(4px); }

/* the cards must reach the same height whatever the copy length */
.level-cards-section .row > [class*="col-"] { display: flex; }
.level-cards-section .row > [class*="col-"] > a { display: flex; width: 100%; }
.level-card { display: flex; flex-direction: column; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .level-card, .level-card::before, .level-card::after,
  .level-card-icon, .level-card-link, .level-card-link i { transition: none; }
  .level-card-watermark, .level-card-icon::before { animation: none; }
  .level-card:hover { transform: none; }
  .level-card:hover .level-card-shine { left: -75%; }
}

/* ── How It Works ────────────────────────────────────────── */
.how-it-works {
  background: var(--bg-light);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
/* soft colourful glow blobs in the corners */
.how-it-works::before,
.how-it-works::after {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .18;
  pointer-events: none;
}
.how-it-works::before { top: -160px; left: -140px; background: radial-gradient(circle, #4a3f96, transparent 70%); }
.how-it-works::after  { bottom: -180px; right: -140px; background: radial-gradient(circle, #8b5cf6, transparent 70%); }
.how-it-works .container { position: relative; }

/* brand navy-to-gold divider for this section */
.how-it-works .section-divider.centered {
  width: 64px; height: 5px; border-radius: 100px;
  background: linear-gradient(90deg, var(--primary), var(--gold));
}

/* steps share the brand navy; the gold number badge carries the sequence */
/* Each step owns a hue, warming across the row until it lands on the
   brand's gold at graduation. Four shades of one blue said "four of the
   same thing"; four hues say "four different moments". */
.how-it-works .row > div { --step-c1: #2b2560; --step-c2: #5b53a5; --step-soft: rgba(47,127,216,.14); }
.journey-row > div:nth-of-type(1) { --step-c1: #2b2560; --step-c2: #5b53a5; --step-soft: rgba(47,127,216,.14); }
.journey-row > div:nth-of-type(2) { --step-c1: #0c7f74; --step-c2: #16b8a6; --step-soft: rgba(22,184,166,.14); }
.journey-row > div:nth-of-type(3) { --step-c1: #6127c4; --step-c2: #8b5cf6; --step-soft: rgba(139,92,246,.14); }
.journey-row > div:nth-of-type(4) { --step-c1: #a87a12; --step-c2: #f0b429; --step-soft: rgba(245,158,11,.16); }

.step-item { position: relative; text-align: center; transition: var(--transition); }
.step-item:hover { transform: translateY(-4px); }


.step-circle {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, var(--step-c1), var(--step-c2));
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.72rem; color: #fff;
  margin: 0 auto 1.35rem; position: relative; z-index: 1;
  transition: var(--transition);
  box-shadow: 0 12px 28px -10px var(--step-c1), 0 0 0 6px #fff;
}
.step-circle i { display: inline-block; transition: transform .35s cubic-bezier(.4,0,.2,1); }
.step-item:hover .step-circle {
  transform: scale(1.1) rotate(-6deg);
  box-shadow: 0 18px 36px -10px var(--step-c1), 0 0 0 6px #fff;
}
.step-item:hover .step-circle i { transform: rotate(6deg) scale(1.1); }
.step-num {
  position: absolute; top: -4px; right: -4px; z-index: 2;
  width: 25px; height: 25px; border-radius: 50%;
  background: #fff; color: var(--step-c1);
  font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(15,23,42,.16), 0 0 0 2px var(--step-c2);
  border: 2px solid #fff;
  transition: transform .3s cubic-bezier(.34,1.4,.5,1);
}
.step-item:hover .step-num { transform: scale(1.14); }
.step-item h5 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; transition: color .25s; }
.step-item:hover h5 { color: var(--step-c1); }
.step-item p  { font-size: .84rem; color: var(--text-mid); }

/* ══════════════════════════════════════════════════════════════════
   THE JOURNEY TRACK
   Four static blobs joined by four static dashes describe a layout,
   not a process. The track below actually moves: the dashes drift
   forward and a pulse walks the gap, so the section reads left to
   right the way the student's path actually runs. On tablet and
   phone the same track turns vertical rather than collapsing into a
   grid, because a 2x2 arrangement destroys the ordering entirely.
   ══════════════════════════════════════════════════════════════════ */

.journey-row .step-item { --track: 2px; }

/* ── the route canvas ────────────────────────────────────────────
   Generated in pixel space by the section's script, so the curve and
   the comet stay true at any width. It sits behind the stops; the
   6px white ring on each circle is what makes the line appear to
   pass cleanly under them. */
.journey-row { position: relative; }
.journey-route {
  position: absolute;
  top: -20px; left: 0;
  width: 100%; height: 124px;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
.jr-track {
  fill: none;
  stroke: #c9d4e4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 11;
  opacity: .9;
}
.journey-row.is-live .jr-track { animation: routeDrift 1.4s linear infinite; }
@keyframes routeDrift { to { stroke-dashoffset: -12; } }

.jr-progress {
  fill: none;
  stroke: url(#eauRouteGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 3.2s cubic-bezier(.35,.05,.2,1);
  filter: drop-shadow(0 2px 6px rgba(47,127,216,.28));
}

/* ── the comet ───────────────────────────────────────────────────
   An HTML element, not an SVG circle, so it stays perfectly round no
   matter how the row is scaled. */
.jr-comet {
  position: absolute;
  top: -20px; left: 0;
  width: 0; height: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.jr-comet b {
  position: absolute;
  left: -7px; top: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9),
              0 0 14px 4px rgba(139,92,246,.55),
              0 0 30px 10px rgba(47,127,216,.35);
  animation: cometBeat 1.1s ease-in-out infinite;
}
@keyframes cometBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* The straight CSS dash track is the phone/tablet layout only - on
   desktop the SVG route replaces it entirely. */
@media (min-width: 992px) {
  .step-line { display: none !important; }
}
@media (max-width: 991.98px) {
  .journey-route, .jr-comet { display: none; }
}

/* ── arrival ─────────────────────────────────────────────────────
   The comet reaching a stop is the moment that stop "happens": the
   disc takes the hit, a ring goes out, and the glyph reacts. */
.step-item.is-hit .step-circle { animation: stopHit .85s cubic-bezier(.34,1.5,.5,1); }
@keyframes stopHit {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.22) rotate(-7deg); }
  55%  { transform: scale(.97) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
.step-item.is-hit .step-circle::after { animation: journeyRing 1.05s cubic-bezier(.2,.8,.2,1); }
.step-item.is-hit .step-num { animation: stopBadge .8s cubic-bezier(.34,1.5,.5,1); }
@keyframes stopBadge {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.step-item.is-hit h5 { animation: stopTitle .9s ease; }
@keyframes stopTitle {
  0%   { color: #1d1d1f; }
  30%  { color: var(--step-c1); }
  100% { color: #1d1d1f; }
}

.step-line {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.step-line i {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--step-c2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-c2) 22%, transparent);
  opacity: 0;
}
@supports not (color: color-mix(in srgb, red 10%, blue)) {
  .step-line i { box-shadow: 0 0 0 4px rgba(47,147,201,.22); }
}
.journey-row > div:last-child .step-line { display: none; }

/* The straight horizontal dash track was replaced by the SVG route;
   .step-line now serves the vertical tablet/phone timeline only. */

/* ── stops start dormant and are lit by the comet ────────────────
   The whole point of a route is that you are somewhere on it. Every
   stop begins muted; the one the comet has reached takes its hue,
   its halo and its glyph. By the end the row is fully lit - which is
   the story the section is trying to tell. */
.journey-row.js-ready .step-circle {
  background: linear-gradient(135deg, #c6cedb, #e4e1f4);
  box-shadow: 0 8px 20px -12px rgba(15,23,42,.30), 0 0 0 6px #fff;
  transition: background .55s ease, box-shadow .55s ease;
}
.journey-row.js-ready .step-num {
  color: #9aa4b2;
  box-shadow: 0 3px 8px rgba(15,23,42,.12), 0 0 0 2px #d3dae4;
  transition: color .5s ease, box-shadow .5s ease;
}
.journey-row.js-ready .step-item::before { opacity: 0; }
.journey-row.js-ready .step-item h5,
.journey-row.js-ready .step-item p { transition: color .5s ease; }
.journey-row.js-ready .step-item p { color: #9aa4b2; }

.journey-row .step-item.is-done .step-circle {
  background: linear-gradient(135deg, var(--step-c1), var(--step-c2));
  box-shadow: 0 12px 28px -10px var(--step-c1), 0 0 0 6px #fff;
}
.journey-row .step-item.is-done .step-num {
  color: var(--step-c1);
  box-shadow: 0 4px 10px rgba(15,23,42,.16), 0 0 0 2px var(--step-c2);
}
.journey-row .step-item.is-done::before { opacity: 1; }
.journey-row .step-item.is-done p { color: var(--text-mid); }

/* the expanding ring that marks arrival */
.step-circle::after {
  content: '';
  position: absolute; inset: -6px; z-index: 0;
  border-radius: 50%;
  border: 2px solid var(--step-c2);
  opacity: 0;
  pointer-events: none;
}
@keyframes journeyRing {
  0%   { opacity: .6; transform: scale(.9); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* ── each glyph acts out its own step, once that step is reached ── */
.journey-row > div:nth-of-type(1) .is-done .step-circle i { animation: glyphScan  2.8s ease-in-out .35s infinite; }
.journey-row > div:nth-of-type(2) .is-done .step-circle i { animation: glyphSend  2.8s ease-in-out .35s infinite; }
.journey-row > div:nth-of-type(3) .is-done .step-circle i { animation: glyphLive  2.6s ease-in-out .35s infinite; }
.journey-row > div:nth-of-type(4) .is-done .step-circle i { animation: glyphRaise 3.4s ease-in-out .35s infinite; }
/* searching: the lens sweeps the area */
@keyframes glyphScan {
  0%, 100% { transform: translate(0,0) rotate(0); }
  25%      { transform: translate(-3px,-2px) rotate(-12deg); }
  60%      { transform: translate(3px,2px) rotate(10deg); }
}
/* submitting: the document lifts away */
@keyframes glyphSend {
  0%, 100% { transform: translateY(0) rotate(0); }
  35%      { transform: translateY(-5px) rotate(-8deg); }
  55%      { transform: translateY(1px) rotate(2deg); }
}
/* studying: the screen wakes */
@keyframes glyphLive {
  0%, 100% { transform: scale(1); opacity: 1; }
  45%      { transform: scale(1.14); opacity: .82; }
}
/* graduating: the medal is held up */
@keyframes glyphRaise {
  0%, 100% { transform: translateY(0) rotate(0); }
  30%      { transform: translateY(-4px) rotate(-10deg); }
  50%      { transform: translateY(-4px) rotate(10deg); }
  70%      { transform: translateY(0) rotate(0); }
}
.step-item:hover .step-circle i { animation-play-state: paused; }

/* the finish keeps breathing - it is the payoff, not just the last item */
.journey-row > div:nth-of-type(4) .step-item.is-done::before {
  animation: finishBreath 3.2s ease-in-out 1s infinite;
}
@keyframes finishBreath {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: .75; }
}

/* ── vertical track (tablet and phone) ───────────────────────────
   A 2x2 grid of centred blobs reads as four unrelated items. Below
   992px the row becomes a proper timeline: circle on the rail, copy
   beside it, the same dashes running down between steps. */
@media (max-width: 991.98px) {
  .journey-row { max-width: 520px; margin-left: auto; margin-right: auto; }
  .journey-row > div { width: 100%; flex: 0 0 100%; max-width: 100%; }

  .journey-row .step-item {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 1.15rem;
    text-align: left;
    margin-bottom: 0;
    padding-bottom: 1.9rem;
  }
  .journey-row > div:last-child .step-item { padding-bottom: 0; }
  .journey-row .step-item:hover { transform: none; }

  .journey-row .step-circle { grid-row: 1 / span 2; margin: 0; }
  .journey-row .step-item h5 { align-self: center; margin-bottom: .3rem; padding-top: .55rem; }
  .journey-row .step-item p  { margin-bottom: 0; }

  .step-line {
    top: 92px; left: 41px;
    width: var(--track);
    height: calc(100% - 68px);   /* 92px below the disc, across the 24px gutter */
    background-image: repeating-linear-gradient(180deg,
      var(--step-c2) 0 7px, transparent 7px 15px);
    background-size: var(--track) 15px;
    background-repeat: repeat-y;
  }
  .journey-row.is-live .step-line {
    opacity: .45;
    animation: journeyDriftY 1.05s linear infinite;
  }
  .step-line i { left: 50%; top: 0; margin-left: -4.5px; }
  .journey-row.is-live .step-line i {
    animation: journeyPulseY 3.2s cubic-bezier(.55,.05,.45,.95) infinite;
  }
}
@keyframes journeyDriftY { to { background-position: 0 15px; } }
@keyframes journeyPulseY {
  0%   { top: 0;    opacity: 0; transform: scale(.5); }
  10%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  85%  { top: 100%; opacity: 0; transform: scale(.5); }
  100% { top: 100%; opacity: 0; transform: scale(.5); }
}

/* Anyone who asked for less motion gets the finished state, not a
   half-drawn one - the steps must still be readable. */
@media (prefers-reduced-motion: reduce) {
  .journey-row *, .journey-row *::before, .journey-row *::after {
    animation: none !important;
  }
  .journey-row.js-ready .step-circle {
    background: linear-gradient(135deg, var(--step-c1), var(--step-c2));
    box-shadow: 0 12px 28px -10px var(--step-c1), 0 0 0 6px #fff;
  }
  .journey-row.js-ready .step-num { color: var(--step-c1); box-shadow: 0 4px 10px rgba(15,23,42,.16), 0 0 0 2px var(--step-c2); }
  .journey-row.js-ready .step-item::before { opacity: 1; }
  .journey-row.js-ready .step-item p { color: var(--text-mid); }
  .jr-comet { display: none; }
  .jr-progress { transition: none; }
}

/* ── Why Online (Apple style) ────────────────────────────── */
.why-online {
  position: relative;
  /* was 6rem/6.5rem of near-empty page above and below three cards */
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, #eceafa 0%, #e8eef7 55%, #eceafa 100%);
  overflow: hidden;
}
/* the same colour blooms as the programs section, so the two read as
   one system rather than two unrelated grey bands */
.why-online::before,
.why-online::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .45;
  pointer-events: none;
}
.why-online::before { top: -240px; right: -150px; background: radial-gradient(circle, #5b53a5, transparent 70%); }
.why-online::after  { bottom: -260px; left: -150px; background: radial-gradient(circle, #f0b429, transparent 70%); }
.why-online .container { position: relative; z-index: 1; }

/* Editorial header: heading left, supporting copy right, sharing a
   baseline. Centred heading + centred rule + centred paragraph is the
   default every template ships with, and it forces the eye to reset
   three times before it reaches the cards. */
.why-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.why-head h2 { margin: .75rem 0 0; text-wrap: balance; }
.why-head-lede {
  font-size: clamp(.95rem, 1.1vw, 1.02rem);
  line-height: 1.7;
  color: #6b7280;
  max-width: 46ch;
  margin: 0;
  padding-bottom: .35rem;
}
@media (max-width: 991px) {
  .why-head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .why-head-lede { max-width: 60ch; }
}
.why-card-wrap { height: 100%; }
.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.6rem, 2.4vw, 2.05rem);
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  overflow: hidden;
  isolation: isolate;
  /* contact + ambient + a wash of the card's own accent, all at rest */
  box-shadow: 0 1px 2px rgba(15,23,42,.06),
              0 10px 22px -12px rgba(15,23,42,.22),
              0 26px 50px -30px var(--accent);
  transition: transform .38s cubic-bezier(.2,.8,.2,1),
              box-shadow .38s cubic-bezier(.2,.8,.2,1);
}
/* an accent rule along the top edge, present before any hover */
.why-card::after {
  content: '';
  position: absolute; top: 0; left: 0;
  height: 5px; width: 100%; z-index: 3;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  transform: scaleX(.34);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.why-card:hover::after { transform: scaleX(1); }

/* A wash anchored to the icon corner rather than a stripe down the edge -
   it ties the card to its accent without the accent-rail look. */
.why-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(115% 80% at 0% 0%, var(--accent) 0%, transparent 58%);
  opacity: .075;
  transition: opacity .38s;
}
.why-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 2px 6px rgba(15,23,42,.06),
              0 26px 50px -20px rgba(15,23,42,.32),
              0 40px 80px -30px var(--accent);
}
.why-card:hover::before { opacity: .11; }
.why-icon {
  width: 60px; height: 60px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.42rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-d, var(--accent)));
  border: none;
  box-shadow: 0 8px 20px -8px var(--accent), 0 0 0 5px #fff,
              inset 0 1px 0 rgba(255,255,255,.35);
  margin-bottom: 1.2rem;
  flex-shrink: 0;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s;
}
/* Older engines without color-mix fall back to the flat brand tint. */

.why-card:hover .why-icon {
  transform: translateY(-3px) scale(1.07) rotate(-4deg);
  box-shadow: 0 14px 30px -8px var(--accent), 0 0 0 5px #fff,
              inset 0 1px 0 rgba(255,255,255,.35);
}
.why-card h5 {
  font-size: 1.24rem; font-weight: 700; margin-bottom: .65rem;
  color: #1d1d1f; letter-spacing: -.01em;
  transition: color .4s;
}
.why-card p {
  margin-bottom: 0;
  font-size: .9rem; color: #535575;
  margin: 0 0 1.35rem;
  line-height: 1.75; font-weight: 400;
  transition: color .4s;
}
.why-more {
  display: inline-flex; align-items: center; gap: .45rem;
  width: fit-content;
  margin-top: auto;
  padding: .55rem 1.05rem;
  border-radius: 100px;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-d, var(--accent)));
  box-shadow: 0 6px 16px -8px var(--accent);
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.why-card:hover .why-more {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px var(--accent);
}
.why-more i { transition: transform .3s cubic-bezier(.2,.8,.2,1); font-size: .72rem; }
.why-card:hover .why-more i { transform: translateX(4px); }
.why-more i { transition: transform .3s; font-size: .7rem; }
.why-card:hover .why-more { opacity: 1; transform: translateY(0); }
.why-card:hover .why-more i { transform: translateX(3px); }

/* ── Programs section (with tabs) ───────────────────────── */
.programs-section { padding: 7rem 0; background: #fff; }
.level-tabs {
  display: flex; gap: .5rem; flex-wrap: wrap;
  background: #fff; padding: .5rem;
  border-radius: 14px; border: 1px solid var(--border);
  width: fit-content; margin-bottom: 3rem;
}
.level-tab {
  padding: .6rem 1.4rem; border-radius: 10px;
  font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
  border: none; background: transparent; color: var(--text-mid);
  display: flex; align-items: center; gap: .5rem;
}
.level-tab.active { background: var(--accent); color: #fff; }
.level-tab:not(.active):hover { background: var(--bg-light); color: var(--text-dark); }
.level-tab .tab-count {
  background: rgba(0,0,0,.08); color: inherit;
  font-size: .7rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: 100px;
  min-width: 22px; text-align: center;
}
.level-tab.active .tab-count { background: rgba(255,255,255,.25); }
.programs-tab-content { display: none; }
.programs-tab-content.active { display: block; }

/* ── Course card level variant ───────────────────────────── */
.course-level-bar {
  height: 4px;
  width: 100%;
}
.course-level-bar.diploma  { background: linear-gradient(90deg,#4a3f96,#5b53a5); }
.course-level-bar.bachelor { background: linear-gradient(90deg,#2b2560,#4a3f96); }
.course-level-bar.master   { background: linear-gradient(90deg,#1f1a48,#2b2560); }

/* ── Accreditation bar ───────────────────────────────────── */
.accreditation-bar {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0;
}
.accreditation-bar p {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-light); font-weight: 600; margin-bottom: 1.5rem;
}
.accreditation-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 2.5rem; }
.accreditation-logo {
  font-size: .9rem; font-weight: 700; color: var(--text-mid);
  padding: .5rem 1.25rem; border: 1.5px solid var(--border);
  border-radius: 10px; transition: var(--transition);
  display: flex; align-items: center; gap: .5rem;
}
.accreditation-logo:hover { border-color: var(--accent); color: var(--accent); }

/* ── Online badge floating ───────────────────────────────── */

/* ── Filter tabs on courses listing page ─────────────────── */
/* ══════════════════════════════════════════════════════════════════
   PROGRAMS FILTER RAIL
   Two stacked rows, 184px tall, stuck under a 74px navbar — a quarter
   of the screen given over to chrome for the whole visit. Now one
   compact row that wraps only when it has to.
   ══════════════════════════════════════════════════════════════════ */
.programs-filter-bar {
  position: sticky; top: 74px; z-index: 100;
  padding: .7rem 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #e4e1f4;
  box-shadow: 0 10px 26px -24px rgba(15,23,42,.9);
  margin-bottom: 0;
}
.pfb-inner {
  display: flex; align-items: center;
  gap: .7rem 1rem;
  flex-wrap: wrap;
}

/* search */
.pfb-search {
  position: relative;
  display: flex; align-items: center; gap: .45rem;
  flex: 0 1 320px; min-width: 210px;
}
.pfb-search > i {
  position: absolute; left: .85rem;
  font-size: .82rem; color: #97a3b4; pointer-events: none;
}
.pfb-search input {
  width: 100%;
  padding: .55rem 2.1rem .55rem 2.25rem;
  border: 1.5px solid #e4e1f4; border-radius: 100px;
  font-family: inherit; font-size: .85rem; color: #1f1a48;
  background: #fff;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.pfb-search input:focus {
  border-color: #5b53a5;
  box-shadow: 0 0 0 3px rgba(47,127,216,.16);
}
.pfb-clear {
  position: absolute; right: 5.2rem;
  border: 0; background: none; cursor: pointer;
  color: #97a3b4; font-size: .8rem; padding: .2rem;
}
.pfb-clear:hover { color: #1f1a48; }
.pfb-go {
  flex-shrink: 0;
  padding: .55rem 1.1rem; border: 0; border-radius: 100px;
  background: #2b2560; color: #fff;
  font-family: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer;
  transition: background .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.pfb-go:hover { background: #4a3f96; transform: translateY(-1px); }

/* level chips — each level keeps the colour it has everywhere else */
.filter-tabs {
  display: flex; gap: .4rem; flex-wrap: wrap;
  align-items: center; flex: 1 1 auto; min-width: 0;
}
.filter-tab {
  --ft: #64707f;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 100px;
  font-size: .82rem; font-weight: 650;
  border: 1.5px solid #e4e1f4; background: #fff;
  color: #4a5768; text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s, color .25s, background .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.filter-tab i { font-size: .76rem; color: var(--ft); transition: color .25s; }
.filter-tab .count {
  font-size: .7rem; font-weight: 700;
  padding: .05rem .38rem; border-radius: 100px;
  background: #eef2f7; color: #64707f;
  transition: background .25s, color .25s;
}
.filter-tab:hover { border-color: var(--ft); color: #1f1a48; transform: translateY(-1px); }
.filter-tab.active {
  background: var(--ft); border-color: var(--ft); color: #fff;
}
.filter-tab.active i { color: #fff; }
.filter-tab.active .count { background: rgba(255,255,255,.24); color: #fff; }

.filter-tab.is-open      { --ft: #059669; }
.filter-tab.lvl-diploma  { --ft: #0c7f74; }
.filter-tab.lvl-bachelor { --ft: #2b2560; }
.filter-tab.lvl-master   { --ft: #5b21b6; }

.ft-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  animation: pulse-dot 1.5s ease infinite;
}

/* the count, pushed to the far end */
.pfb-count {
  margin: 0 0 0 auto;
  font-size: .8rem; color: #535575;
  white-space: nowrap;
}
.pfb-count strong { color: #1f1a48; font-weight: 800; }

@media (max-width: 991.98px) {
  /* stacked it needs three rows, and a 152px bar pinned under the navbar
     eats a fifth of a phone screen for the whole visit — so it stops
     being sticky and simply heads the results */
  .programs-filter-bar { position: static; padding: .8rem 0 .7rem; }
  .pfb-inner { gap: .6rem; }
  .pfb-search { flex: 1 1 100%; }
  .pfb-clear { right: 5.4rem; }
  .filter-tabs {
    order: 2; width: 100%;
    overflow-x: auto; flex-wrap: nowrap;
    padding-bottom: .15rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .pfb-count { order: 3; margin: 0; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .filter-tab, .pfb-go { transition: none; }
  .filter-tab:hover, .pfb-go:hover { transform: none; }
  .ft-live { animation: none; }
}

/* ── E-learning hero specific overrides ──────────────────── */
.hero-program-pill {
  padding: .45rem 1rem; border-radius: 100px;
  font-size: .78rem; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85);
  text-decoration: none; transition: var(--transition);
}
.hero-program-pill:hover,
.hero-program-pill.active { background: #fff; color: var(--primary); border-color: #fff; }

/* ── Responsive additions ────────────────────────────────── */
@media (max-width: 991px) {
  .level-cards-section { margin-top: 0; padding: 2rem 0; }
  .step-connector { display: none; }
}
@media (max-width: 767px) {
  .level-card { margin-bottom: 1rem; }
  .level-tabs { width: 100%; }
  .level-tab { flex: 1; justify-content: center; }
  .stats-strip .stat-divider { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — split screen
   A hard vertical edge: message left on solid navy, media right and
   full-bleed. Nothing floats, so nothing can overlap anything else.
   ══════════════════════════════════════════════════════════════════ */
.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-rows: 1fr auto;
  /* was a hard 100svh: 960px of hero on a 700px screen meant the visitor
     scrolled a screen and a half before reaching anything else */
  min-height: clamp(560px, 84svh, 820px);
  background: var(--bg-dark);
  overflow: hidden;
}

/* ── left panel ── */
.hero-panel {
  display: flex;
  align-items: center;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(160deg, #2b2560 0%, #071c33 55%, #041020 100%);
  padding: clamp(5rem, 8vw, 6.5rem) clamp(1.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  z-index: 1;
}

.hero-panel-inner { width: 100%; max-width: 36rem; margin-left: auto; }

.hero-kicker {
  display: inline-block;
  font-size: clamp(.66rem, .9vw, .74rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(1.1rem, 2.5vw, 1.8rem);
  padding-left: 2.6rem;
  position: relative;
}
.hero-kicker::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2rem; height: 1px;
  background: var(--gold);
}

.hero-h1 {
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #fff;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  text-wrap: balance;
}
.hero-h1 em {
  display: block;
  font-style: normal;
  color: var(--gold);
}

.hero-lede {
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
  line-height: 1.65;
  color: rgba(255,255,255,.66);
  max-width: 32rem;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

.hero-cta-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.5rem; }

.hero-btn-solid,
.hero-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.hero-btn-solid {
  background: var(--gold);
  color: #10203a;
  border: 1px solid var(--gold);
}
.hero-btn-solid:hover { transform: translateY(-2px); background: #ffbc42; color: #10203a; }
.hero-btn-solid i { font-size: .78rem; }
.hero-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.28);
}
.hero-btn-ghost:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.hero-btn-solid:focus-visible,
.hero-btn-ghost:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }


.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-facts dt {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-facts dd {
  margin: .35rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* ── right panel ── */
.hero-media {
  position: relative;
  display: flex;
  align-items: stretch;
  /* Top padding clears the fixed navbar and drops the card to roughly where
     the headline starts on the left, so the two columns share a top edge.
     The card then fills everything down to the facts row. */
  padding: clamp(6rem, 8.4vw, 7.25rem) clamp(1rem, 2.2vw, 2.25rem)
           clamp(1.5rem, 3vw, 2.25rem)  clamp(0.5rem, 1.4vw, 1.5rem);
  background: linear-gradient(200deg, #08203a 0%, #051428 55%, #04101f 100%);
  z-index: 1;
}

/* The rounded card that actually holds the video. */
.hero-media-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 44svh, 460px);
  max-height: 60svh;
  border-radius: clamp(20px, 2.2vw, 32px);
  overflow: hidden;
  isolation: isolate;
  background: #041020;
  border: 1px solid rgba(255,255,255,.12);
  /* Layered rather than one big blur: a tight contact shadow, a mid lift, and
     a wide ambient pool warmed toward the brand gold so the card reads as
     sitting above the navy instead of pasted onto it. */
  box-shadow:
    0 2px 6px    rgba(0,0,0,.30),
    0 14px 30px -10px rgba(0,0,0,.50),
    0 52px 100px -28px rgba(3,10,20,.85),
    0 34px 120px -40px rgba(245,166,35,.20);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.hero-media-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 6px    rgba(0,0,0,.30),
    0 18px 38px -10px rgba(0,0,0,.55),
    0 64px 120px -28px rgba(3,10,20,.9),
    0 40px 140px -40px rgba(245,166,35,.30);
}
@media (prefers-reduced-motion: reduce) {
  .hero-media-card { transition: none; }
  .hero-media-card:hover { transform: none; }
}
.hero-media-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: #041020 center 35% / cover no-repeat;   /* favour the upper third: faces sit high in most photos */
  cursor: default;
  /* Stripped to greyscale so the tint below can recolour it cleanly. */
  filter: grayscale(1) contrast(1.06) brightness(.82);
}

/* Brand duotone. Greyscale underneath + a navy gradient blended in "color"
   mode means any still - a campus shot, a lecture, a stock photo - comes out
   in the EAU palette instead of reading as a raw screenshot pasted in. */
.hero-media-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(205deg, #1a5fa8 0%, #2b2560 45%, #04101f 100%);
  mix-blend-mode: color;
}
/* Vignette: pushes the edges down so the play button holds the eye and the
   seam against the navy panel stops being a hard line. */
.hero-media-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 62% 38%, transparent 26%, rgba(4,16,31,.62) 100%),
    linear-gradient(90deg, rgba(7,28,51,.75) 0%, transparent 22%);
}
button.hero-media-fill { cursor: pointer; }
button.hero-media-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(4,16,32,.30), rgba(4,16,32,.62));
  transition: background .35s;
}
button.hero-media-fill:hover::after { background: linear-gradient(200deg, rgba(4,16,32,.12), rgba(4,16,32,.45)); }
button.hero-media-fill:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; }

.hero-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(68px, 6vw, 92px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #10203a;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  padding-left: 5px;
  animation: heroVideoPulse 2.8s ease-out infinite;
  transition: transform .3s;
}
button.hero-media-fill:hover .hero-play { transform: translate(-50%, -50%) scale(1.07); }

.hero-play-label {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(52px, 4.4vw, 68px));
  transform: translateX(-50%);
  z-index: 3;
  white-space: nowrap;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.hero-media-frame { position: absolute; inset: 0; z-index: 4; background: #000; }
.hero-media-frame iframe,
.hero-media-frame video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* The card's height comes from flex-stretch, not a fixed aspect ratio, so
     it essentially never matches the source video's own ratio. cover scales
     and crops instead of stretching or letterboxing it. */
  object-fit: cover;
  object-position: center;
}
/* A soft brand-colored ring and bottom vignette over the live video, echoing
   the poster's duotone/vignette treatment without recoloring the footage
   itself -- so the player reads as part of the same card, not a bare
   rectangle dropped on top of it. Purely decorative: it never blocks clicks
   on the native video controls underneath. */
.hero-media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -70px 100px -45px rgba(4,16,31,.6);
  background: radial-gradient(120% 90% at 50% 100%, transparent 55%, rgba(4,16,31,.32) 100%);
}

.hero-online-tag {
  position: absolute;
  z-index: 5;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #6EE7B7;
  background: rgba(4,16,32,.72);
  border: 1px solid rgba(110,231,183,.35);
  backdrop-filter: blur(8px);
}
.hero-online-tag i { font-size: .68rem; }

/* ── stacked ── */
@media (max-width: 1199.98px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-media {
    order: -1;
    padding: clamp(6rem, 16vw, 7.5rem) clamp(1.25rem, 6vw, 3rem) 0;
  }
  .hero-media-card { aspect-ratio: 16 / 10; min-height: 0; }
  .hero-panel { padding: clamp(2.5rem, 8vw, 4rem) clamp(1.25rem, 6vw, 3rem) clamp(3rem, 8vw, 4rem); }
  .hero-panel-inner { margin-left: 0; max-width: none; }
}
@media (max-width: 575px) {
  .hero-media-card { aspect-ratio: 4 / 3; min-height: 0; }
  .hero-facts { gap: 1.5rem 2rem; }
  .hero-cta-row .hero-btn-solid,
  .hero-cta-row .hero-btn-ghost { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-play { animation: none; }
  .hero-btn-solid, .hero-btn-ghost, .hero-play,
  button.hero-media-fill::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO FRAME — EXPERIMENT
   Delete this whole block to go back to the edge-to-edge hero.
   Nothing else references it.
   ══════════════════════════════════════════════════════════════════ */
.hero-split {
  margin: clamp(.6rem, 1vw, 1.1rem);
  border: 1px solid rgba(245,166,35,.38);
  border-radius: clamp(18px, 2vw, 30px);
  overflow: hidden;
  /* keep the full-height feel now that there is a margin on both edges */
  min-height: calc(clamp(560px, 84svh, 820px) - clamp(1.2rem, 2vw, 2.2rem));
}
/* the page behind the frame */
body:has(.hero-split) { background: var(--bg-dark); }

@media (max-width: 991px) {
  .hero-split { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — angled split
   Desktop/laptop only (>=1200px, the same width the two columns exist
   at all -- see the "stacked" breakpoint above). The panel's right
   edge is cut on a diagonal instead of a hard vertical line; a gold
   seam (a drop-shadow, which -- unlike box-shadow -- is drawn against
   the CLIPPED silhouette, so it follows the cut exactly, no matter
   what --hero-seam ends up being at a given viewport width) traces
   the edge. The media panel's own background is pulled left under
   the cut by that same amount, so the reveal shows more of the media
   panel rather than plain page background.
   The video card itself never moves: its left padding grows by the
   same amount the panel's background is pulled left by, so it lands
   exactly where it always has and the video/play-button logic is
   untouched.
   Delete this whole block to go back to the hard-edge split.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* Bold enough to read as a deliberate angled split, not a hairline. */
  .hero-split { --hero-seam: clamp(6rem, 11vw, 12.5rem); }

  .hero-panel {
    z-index: 2;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--hero-seam)) 100%, 0 100%);
  }

  .hero-media {
    margin-left: calc(-1 * var(--hero-seam));
    /* Was a full card inset with generous padding on every side; that's
       right for a floating tile, not for a panel meant to read as video
       bleeding to the frame's edge. Padding drops to just enough to clear
       the outer frame's own rounded corner (see the "HERO FRAME" block
       above) -- the fixed navbar is transparent and z-index:1000, so it
       already sits on top of the video with no clearance needed. */
    padding: clamp(0.5rem, 1vw, 0.85rem)
             clamp(0.5rem, 1vw, 0.85rem)
             clamp(0.5rem, 1vw, 0.85rem)
             calc(var(--hero-seam) + clamp(0.5rem, 1vw, 0.85rem));
  }

  /* Smaller radius to match the tighter padding above -- a big rounded
     card reads wrong sitting this close to the frame's own edge. */
  .hero-media-card { border-radius: clamp(10px, 1.2vw, 18px); }

  /* The gold seam itself, as a solid painted strip -- not a drop-shadow.
     A shadow's glow washes out against a bright or busy video frame; a
     filled shape doesn't, whatever is playing behind it.
     It's a child of .hero-media (already position:relative), inset:0, so
     its own box is exactly .hero-media's box: no grid-row guesswork, no
     mismeasuring. Because .hero-media's own left edge already sits
     --hero-seam to the LEFT of the true column boundary (that's what the
     margin-left above does), the boundary is at x = var(--hero-seam) from
     THIS element's own left edge at the top, and x = 0 at the bottom --
     the same diagonal the panel's clip-path cuts, expressed in the other
     element's coordinate space. */
  .hero-seam {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
    box-shadow: 0 0 30px 4px rgba(240,180,41,.55);
    clip-path: polygon(
      calc(var(--hero-seam) - 1px) 0,
      calc(var(--hero-seam) + 6px) 0,
      6px 100%,
      -1px 100%
    );
  }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — tablet
   Two bands need their own treatment:
   992-1199px  still split, but each column is only ~500px wide, so the
               desktop type scale and padding no longer fit.
   576-991px   stacked. The card must not eat the whole screen before
               the headline is reached.
   ══════════════════════════════════════════════════════════════════ */

/* Landscape tablets are wide but short - 1180x820 and the like. Height, not
   width, is the constraint there, so cap the card against the viewport. */
@media (min-width: 992px) and (max-height: 860px) {
  .hero-panel      { padding-top: clamp(5rem, 7vw, 6rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
  .hero-media      { padding-top: clamp(5rem, 7vw, 6rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
  .hero-media-card { min-height: 0; max-height: none; }
}

/* ── portrait tablet: stacked, but the card must stay a banner ── */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .hero-media {
    padding: clamp(6rem, 12vw, 7rem) clamp(1.5rem, 4vw, 2.5rem) 0;
  }
  .hero-media-card {
    aspect-ratio: 16 / 9;
    max-height: 46vh;           /* leaves the headline visible on first paint */
    margin: 0 auto;
    max-width: 46rem;
  }
  .hero-panel {
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem) clamp(3.5rem, 7vw, 4.5rem);
  }
  .hero-panel-inner { max-width: 46rem; margin: 0 auto; }

  .hero-h1   { font-size: clamp(2.3rem, 5.4vw, 3.2rem); }
  .hero-lede { font-size: 1rem; max-width: 40rem; }
  .hero-facts dt { font-size: 1.75rem; }
}

/* ── portrait tablet (768-991px) ──────────────────────────────────
   Bootstrap drops to the md tier here. The footer's md widths total
   more than 12, so it wraps into ragged rows - even it out. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .site-footer .col-md-6,
  .site-footer .col-md-4 { margin-bottom: 2rem; }

}

/* ══════════════════════════════════════════════════════════════════
   TOUCH DEVICES — form fields
   iOS zooms the whole page in whenever a focused field is under 16px,
   and it does not zoom back out. Eleven fields across the site are set
   to 13-15px inline, so the inline value has to be overridden here.
   Desktop keeps its own sizes: this only applies at touch widths.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  /* keep the field height sane now that the text is larger */
  input:not([type="checkbox"]):not([type="radio"]),
  select { min-height: 44px; }        /* also the minimum comfortable tap target */
}

/* ══════════════════════════════════════════════════════════════════
   992-1199px IS A TABLET, NOT A SMALL DESKTOP
   This is why iPad looked wrong. Bootstrap starts its `lg` tier at
   992px, but .container does not reach 1140px until 1200px. So between
   those two numbers every layout designed for a 1140px desktop is being
   squeezed into a 960px container - three cards at ~300px, sidebars at
   ~230px, four steps at 240px. Nothing overflows, which is why the
   audit passed, but everything is about 16% too tight.
   The fix is to stop treating this band as desktop: fall back to the
   md layout, which is what these pages were designed to do on a tablet.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1199.98px) {

  /* pairs: let the md value win over lg */
  .col-lg-4.col-md-6,
  .col-lg-3.col-md-6            { width: 50%; }
  .col-lg-2.col-md-4,
  .col-lg-3.col-md-4,
  .col-lg-4.col-md-4            { width: 33.3333%; }

  /* no md fallback: sidebars and image/text splits go full width,
     exactly as they already do at 991px */
  .col-lg-4:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-5:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-6:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-7:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-8:not([class*="col-md-"]):not([class*="col-sm-"]),
  .col-lg-9:not([class*="col-md-"]):not([class*="col-sm-"]) { width: 100%; }

  /* a right-aligned action button under a full-width title reads as stray */
  .text-lg-end { text-align: left !important; }

}

@media (prefers-reduced-motion: reduce) {
  .why-card, .why-icon, .why-more i { transition: none; }
  .why-card:hover { transform: none; }
  .why-card:hover .why-icon { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   WHY-CHOOSE-US — composition
   Three identical white cards in a row is boring by construction; no
   amount of spacing fixes it. Three moves instead: one card carries the
   section, the glyph becomes scale, and hover fills rather than nudges.
   ══════════════════════════════════════════════════════════════════ */

/* 1. The icon repeated at scale, bled off the corner. Gives each card an
      individual silhouette instead of three interchangeable rectangles. */
.why-watermark {
  position: absolute;
  z-index: 1;
  right: -18px; bottom: -22px;
  font-size: 8.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: .045;
  transform: rotate(-12deg);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s;
  pointer-events: none;
}
.why-card:hover .why-watermark { transform: rotate(-6deg) scale(1.08); opacity: .085; }

/* The full-accent hover fill that used to live here is gone: it fought
   the new top rule and buried the icon tile and button, both of which
   now carry the colour at rest. Hover lifts and brightens instead. */
.why-card:hover .why-watermark { color: var(--accent); opacity: .10; }

@media (prefers-reduced-motion: reduce) {
  .why-watermark { transition: none; }
  .why-card:hover .why-watermark { transform: rotate(-12deg); }
  .why-card:hover { transform: none; }
}

/* Everything the reader actually looks at sits above both wash layers. */
.why-card > .why-icon,
.why-card > h5,
.why-card > p,
.why-card > .why-more { position: relative; z-index: 2; }
.why-card > .why-more { z-index: 2; }

/* ══════════════════════════════════════════════════════════════════
   PROGRAM CARDS  (.pc)
   The old card was a photo, a badge, a title, three grey numbers and
   an outline button - the default shape of every course listing on
   the internet. Four changes:
     1. The photo is duotoned to a per-faculty hue, so three unrelated
        stock shots read as one deliberate set, and hover restores the
        full-colour image as a reward for interest.
     2. The numbers - the most useful content on the card - stop being
        the smallest grey text and become a labelled spec strip.
     3. The redundant level band goes; the tab above already says it.
        The level moves onto the image as a small tag.
     4. The call to action spans the card and fills on hover, so the
        whole card reads as one clickable object.
   ══════════════════════════════════════════════════════════════════ */

/* equal-height cards - scoped to the card grids, NOT the section header */
.programs-tab-content .row > [class*="col-"] { display: flex; }

.pc {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  padding: .5rem;
  overflow: hidden;
  isolation: isolate;
  /* contact shadow + ambient + a wash of the card's own colour, all at
     rest - the accent should not wait for a hover to exist */
  box-shadow: 0 1px 2px rgba(15,23,42,.06),
              0 10px 22px -12px rgba(15,23,42,.22),
              0 26px 50px -30px var(--pc);
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              box-shadow .45s cubic-bezier(.2,.8,.2,1),
              border-color .45s;
}
/* the faculty hue as a rule across the top edge */
.pc::before {
  content: '';
  position: absolute; top: 0; left: 0;
  height: 5px; width: 100%; z-index: 4;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--pc), var(--pc-d));
  transform: scaleX(.34);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.pc:hover::before { transform: scaleX(1); }
.pc:hover {
  transform: translateY(-12px);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(15,23,42,.06),
              0 26px 50px -20px rgba(15,23,42,.32),
              0 40px 80px -30px var(--pc);
}

/* ── media ───────────────────────────────────────────────────────── */
.pc-media {
  position: relative;
  display: block;
  height: 202px;
  margin-bottom: .25rem;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: var(--pc-d);
  box-shadow: 0 6px 18px -10px var(--pc-d);
}
.pc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.22) brightness(1.16);
  transform: scale(1.02);
  transition: filter .65s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
/* the duotone itself */
.pc-tint {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, var(--pc) 0%, var(--pc-d) 100%);
  mix-blend-mode: multiply;
  opacity: .7;
  transition: opacity .6s ease;
  pointer-events: none;
}
/* a foot of shade so the pills stay legible over any photo */
.pc-shade {
  position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(180deg, rgba(6,16,32,.34) 0%, transparent 34%,
                                      transparent 58%, rgba(6,16,32,.55) 100%);
  pointer-events: none;
}
.pc:hover .pc-media img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.09); }
.pc:hover .pc-tint { opacity: .1; }

/* a light sweeps across the image on hover */
.pc-sheen {
  position: absolute; top: -60%; bottom: -60%; left: -35%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-160%) rotate(14deg);
  pointer-events: none;
}
.pc:hover .pc-sheen { animation: pcSheen 1.05s cubic-bezier(.3,.7,.4,1) .12s; }
@keyframes pcSheen { to { transform: translateX(420%) rotate(14deg); } }

/* ── pills on the image ──────────────────────────────────────────── */
.pc-level, .pc-status, .pc-faculty {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; line-height: 1;
  border-radius: 100px;
  white-space: nowrap;
}
.pc-level {
  top: .8rem; right: .8rem;
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  padding: .42rem .8rem;
  color: var(--pc-d);
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 8px rgba(6,16,32,.18);
}
.pc-status {
  top: .8rem; left: .8rem;
  font-size: .66rem;
  padding: .38rem .72rem;
  background: var(--sb); color: var(--sc);
  box-shadow: 0 2px 8px rgba(6,16,32,.16);
}
.pc-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  animation: pulse-dot 1.5s ease infinite;
}
.pc-faculty {
  bottom: .85rem; left: .85rem;
  font-size: .74rem; font-weight: 600;
  padding: .34rem .85rem;
  color: #fff;
  background: rgba(9,18,33,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
}

/* ── body ────────────────────────────────────────────────────────── */
.pc-body {
  display: flex; flex-direction: column;
  flex: 1;
  padding: 1.15rem .95rem .95rem;
}
.pc-title { font-size: 1.24rem; font-weight: 750; letter-spacing: -.012em; margin: 0 0 .45rem; }
.pc-title a { color: #1f1a48; transition: color .3s; }
.pc:hover .pc-title a { color: var(--pc-d); }
.pc-desc {
  font-size: .86rem; line-height: 1.65; color: #535575;
  margin: 0 0 1.1rem;
}

/* ── the spec strip ──────────────────────────────────────────────── */
.pc-specs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0 0 1rem;
  padding: .8rem 0;
  border-top: 1px solid #e4e1f4;
  border-bottom: 1px solid #e4e1f4;
}
.pc-specs > div { position: relative; padding: 0 .55rem; text-align: center; }
.pc-specs > div:first-child { text-align: left; padding-left: 0; }
.pc-specs > div:last-child  { text-align: right; padding-right: 0; }
.pc-specs > div + div::before {
  content: '';
  position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 1px; background: #e4e1f4;
}
.pc-specs dt {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8b8da6;
  margin-bottom: .22rem;
}
.pc-specs dd {
  margin: 0;
  font-size: 1.02rem; font-weight: 750; color: #1f1a48;
  font-variant-numeric: tabular-nums;
  transition: color .35s;
}
.pc:hover .pc-specs dd { color: var(--pc-d); }

/* ── intake line ─────────────────────────────────────────────────── */
.pc-intake {
  display: flex; flex-wrap: wrap; gap: .3rem .95rem;
  font-size: .76rem; color: #535575;
  margin-bottom: 1.05rem;
}
.pc-intake span { display: inline-flex; align-items: center; gap: .35rem; }
.pc-intake i { font-size: .72rem; color: var(--pc); }
.pc-intake strong { color: #1f1a48; font-weight: 700; }
.pc-intake .is-soon   { color: #a87a12; } .pc-intake .is-soon i   { color: #a87a12; }
.pc-intake .is-urgent { color: #b52a40; font-weight: 700; } .pc-intake .is-urgent i { color: #b52a40; }

/* ── call to action ──────────────────────────────────────────────── */
.pc-cta {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding: .78rem 1.15rem;
  border-radius: 12px;
  font-size: .87rem; font-weight: 700;
  color: var(--pc-d);
  background: var(--pc-s);
  overflow: hidden;
  isolation: isolate;
  transition: color .38s ease;
}
.pc-cta::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--pc), var(--pc-d));
  transform: translateX(-101%);
  transition: transform .48s cubic-bezier(.2,.8,.2,1);
}
.pc:hover .pc-cta { color: #fff; }
.pc:hover .pc-cta::before { transform: translateX(0); }
.pc-cta i { transition: transform .42s cubic-bezier(.2,.8,.2,1); font-size: .78rem; }
.pc:hover .pc-cta i { transform: translateX(4px); }

/* ── touch: no hover, so the cards must not depend on it ─────────── */
@media (hover: none) {
  .pc-media img { filter: grayscale(.25) contrast(1.02); }
  .pc-tint { opacity: .3; }
  .pc::before { transform: scaleX(1); }
  .pc-cta { color: #fff; }
  .pc-cta::before { transform: translateX(0); }
}

@media (max-width: 575.98px) {
  .pc-media { height: 176px; }
  .pc-body { padding: 1rem .8rem .8rem; }
  .pc-title { font-size: 1.08rem; }
  .pc-specs dd { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pc, .pc::before, .pc-media img, .pc-tint, .pc-cta, .pc-cta::before, .pc-cta i {
    transition: none;
  }
  .pc:hover { transform: none; }
  .pc:hover .pc-sheen { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LEVEL TABS — a segmented control with a sliding indicator
   The active tab used to be a hard gold block that jumped between
   positions. An ink bar that travels shows the relationship between
   the three levels instead of just marking one.
   ══════════════════════════════════════════════════════════════════ */
.programs-section {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  background: linear-gradient(180deg, #eceafa 0%, #e4e1f4 50%, #eceafa 100%);
  overflow: hidden;
}
/* faint colour blooms so the ground has depth rather than being flat grey */
.programs-section::before,
.programs-section::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .5;
  pointer-events: none;
}
.programs-section::before { top: -220px; left: -160px;  background: radial-gradient(circle, #5b53a5, transparent 70%); }
.programs-section::after  { bottom: -240px; right: -160px; background: radial-gradient(circle, #8b5cf6, transparent 70%); }
.programs-section .container { position: relative; z-index: 1; }

.level-tabs {
  position: relative;
  display: flex; gap: .25rem; flex-wrap: nowrap;
  background: #f4f6f9;
  padding: .38rem;
  border-radius: 100px;
  border: 1px solid #e8ecf2;
  width: fit-content; max-width: 100%;
  margin-bottom: 2.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.level-tabs::-webkit-scrollbar { display: none; }

.level-tab-ink {
  position: absolute;
  top: .38rem; left: 0;
  height: calc(100% - .76rem);
  border-radius: 100px;
  background: linear-gradient(120deg, #2b2560, #4a3f96);
  box-shadow: 0 6px 16px -6px rgba(11,63,126,.7);
  transition: transform .42s cubic-bezier(.34,1.2,.5,1), width .42s cubic-bezier(.34,1.2,.5,1);
  pointer-events: none;
  z-index: 0;
}
.level-tabs.is-ready .level-tab.active { background: transparent; }

.level-tab {
  position: relative; z-index: 1;
  padding: .62rem 1.35rem;
  border-radius: 100px;
  font-size: .875rem; font-weight: 650;
  cursor: pointer;
  border: none; background: transparent; color: #64707f;
  display: flex; align-items: center; gap: .5rem;
  white-space: nowrap;
  transition: color .32s ease;
}
.level-tab.active { color: #fff; }
.level-tab.active i { color: #fff !important; }
.level-tab:not(.active):hover { color: #1f1a48; }
.level-tab .tab-count {
  background: rgba(15,23,42,.08); color: inherit;
  font-size: .68rem; font-weight: 700;
  padding: .14rem .48rem; border-radius: 100px;
  min-width: 21px; text-align: center;
  transition: background .32s ease;
}
.level-tab.active .tab-count { background: rgba(255,255,255,.22); }

/* the panels cross-fade rather than snapping */
.programs-tab-content { display: none; }
.programs-tab-content.active { display: block; animation: pcPanel .45s cubic-bezier(.2,.8,.2,1); }
@keyframes pcPanel {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .level-tab-ink { transition: none; }
  .programs-tab-content.active { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   ADMISSIONS FAQ  (.fq)
   Trust is the barrier for an online degree, so the closing section
   answers the objection instead of asking for an email address. The
   questions carry the same per-item hue system as the cards above, and
   the way to reach a human sits beside the list rather than after it -
   nobody's question list is ever complete.
   ══════════════════════════════════════════════════════════════════ */
.fq {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(3rem, 6vw, 5rem);
  background: linear-gradient(180deg, #eceafa 0%, #e4e1f4 55%, #eceafa 100%);
  overflow: hidden;
}
.fq::before, .fq::after {
  content: '';
  position: absolute; width: 520px; height: 520px;
  border-radius: 50%; filter: blur(120px); opacity: .45;
  pointer-events: none;
}
.fq::before { top: -250px; right: -160px; background: radial-gradient(circle, #5b53a5, transparent 70%); }
.fq::after  { bottom: -260px; left: -160px; background: radial-gradient(circle, #059669, transparent 70%); }
.fq .container { position: relative; z-index: 1; }

.fq-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.fq-lede {
  margin: 0; padding-bottom: .35rem;
  font-size: clamp(.95rem, 1.1vw, 1.02rem);
  line-height: 1.7; color: #535575; max-width: 48ch;
}

.fq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

/* ── the questions ───────────────────────────────────────────────── */
.fq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.fq-item {
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.05),
              0 8px 18px -12px rgba(15,23,42,.2);
  transition: box-shadow .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1);
}
.fq-item.is-open {
  box-shadow: 0 2px 6px rgba(15,23,42,.06),
              0 18px 34px -18px rgba(15,23,42,.28),
              0 30px 60px -34px var(--fc);
}
.fq-item:hover { transform: translateY(-2px); }
.fq-q { margin: 0; font-size: inherit; font-weight: inherit; }
.fq-btn {
  width: 100%;
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem 1.2rem;
  background: none; border: 0;
  text-align: left; cursor: pointer;
  font-family: inherit;
  color: #1f1a48;
}
.fq-btn:focus-visible { outline: 2px solid var(--fc-d); outline-offset: -3px; border-radius: 18px; }

/* the number keeps the list feeling ordered without a bullet */
.fq-n {
  flex-shrink: 0;
  min-width: 2rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  color: var(--fc-d);
  background: var(--fc-s);
  padding: .3rem .5rem;
  border-radius: 8px;
  text-align: center;
  transition: background .35s, color .35s;
}
.fq-item.is-open .fq-n { background: var(--fc-d); color: #fff; }

.fq-t { flex: 1; font-size: 1rem; font-weight: 650; line-height: 1.4; letter-spacing: -.005em; }
.fq-item.is-open .fq-t { color: var(--fc-d); }

/* a plus that becomes a minus - two bars, one of which rotates away */
.fq-x {
  position: relative;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--fc-s);
  transition: background .35s, transform .45s cubic-bezier(.2,.8,.2,1);
}
.fq-x i {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px; border-radius: 2px;
  background: var(--fc-d);
  transform: translate(-50%, -50%);
  transition: transform .42s cubic-bezier(.2,.8,.2,1), background .35s;
}
.fq-x i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.fq-item.is-open .fq-x { background: var(--fc-d); transform: rotate(180deg); }
.fq-item.is-open .fq-x i { background: #fff; }
.fq-item.is-open .fq-x i:last-child { transform: translate(-50%, -50%) rotate(0deg); }

/* ── the answers ─────────────────────────────────────────────────── */
.fq-a { overflow: hidden; height: 0; transition: height .32s cubic-bezier(.3,.8,.35,1); }
.fq-a-in {
  padding: 0 1.2rem 1.15rem calc(2rem + 1.8rem);
  font-size: .9rem; line-height: 1.75; color: #535575;
}
.fq-a-in p:last-child { margin-bottom: 0; }
.fq-a-in a { color: var(--fc-d); font-weight: 600; text-decoration: underline; }

/* ── the human ───────────────────────────────────────────────────── */
.fq-aside {
  position: sticky; top: 6rem;
  padding: 1.6rem 1.4rem;
  border-radius: 20px;
  background: linear-gradient(150deg, #2b2560, #1f1a48);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.08),
              0 22px 44px -20px rgba(11,63,126,.75);
}
.fq-aside-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  margin-bottom: .95rem;
  font-size: 1.1rem; color: #2b2560;
  background: var(--gold, #f0b429);
  box-shadow: 0 8px 20px -8px rgba(245,158,11,.8);
}
.fq-aside h3 { font-size: 1.1rem; font-weight: 750; margin: 0 0 .45rem; color: #fff; }
.fq-aside p { font-size: .87rem; line-height: 1.65; color: rgba(255,255,255,.72); margin: 0 0 1.15rem; }
.fq-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .72rem 1.05rem;
  border-radius: 100px;
  font-size: .86rem; font-weight: 700;
  background: var(--gold, #f0b429); color: #2a1c04;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s;
}
.fq-cta i { font-size: .75rem; transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.fq-cta:hover { transform: translateY(-2px); color: #2a1c04; box-shadow: 0 10px 22px -10px rgba(245,158,11,.9); }
.fq-cta:hover i { transform: translateX(3px); }
.fq-cta-ghost {
  margin-top: .55rem;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}
.fq-cta-ghost:hover { background: rgba(255,255,255,.15); color: #fff; box-shadow: none; }

@media (max-width: 991.98px) {
  .fq-head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .fq-lede { max-width: 60ch; }
  .fq-grid { grid-template-columns: 1fr; }
  .fq-aside { position: static; }
}
@media (max-width: 575.98px) {
  .fq-btn { padding: .95rem 1rem; gap: .7rem; }
  .fq-t { font-size: .94rem; }
  .fq-a-in { padding-left: 1rem; padding-right: 1rem; }
  .fq-n { min-width: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-item, .fq-a, .fq-x, .fq-x i, .fq-cta, .fq-cta i { transition: none; }
  .fq-item:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL ACADEMIC NETWORK  (.pn)
   A continuous roll of partner universities. The track holds the list
   twice and travels exactly -50%, so the loop closes on itself with no
   visible seam and no JavaScript. Hover parks it so a name can be read.
   Where a partner has no logo file the tile draws a monogram in its
   region's colour - a mark, not a broken image.
   ══════════════════════════════════════════════════════════════════ */
.pn {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.75rem, 5vw, 4.25rem);
  background: linear-gradient(180deg, #eceafa 0%, #e4e1f4 55%, #eceafa 100%);
  overflow: hidden;
}
.pn::before, .pn::after {
  content: '';
  position: absolute; width: 520px; height: 520px;
  border-radius: 50%; filter: blur(120px); opacity: .45;
  pointer-events: none;
}
.pn::before { top: -250px; left: -160px;  background: radial-gradient(circle, #6366f1, transparent 70%); }
.pn::after  { bottom: -260px; right: -160px; background: radial-gradient(circle, #f0b429, transparent 70%); }
.pn .container { position: relative; z-index: 1; }

.pn-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.pn-lede {
  margin: 0; padding-bottom: .35rem;
  font-size: clamp(.95rem, 1.1vw, 1.02rem);
  line-height: 1.7; color: #535575; max-width: 50ch;
}

/* ── the roll ────────────────────────────────────────────────────── */
.pn-roll {
  position: relative;
  overflow: hidden;
  padding: .9rem 0 1.2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.pn-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: pnRoll 64s linear infinite;
  will-change: transform;
}
.pn-roll:hover .pn-track,
.pn-roll:focus-within .pn-track { animation-play-state: paused; }
@keyframes pnRoll {
  from { transform: translate3d(0, 0, 0); }
  /* the list is rendered twice; half a track is exactly one full pass */
  to   { transform: translate3d(-50%, 0, 0); }
}

.pn-item {
  display: flex; align-items: center; gap: .95rem;
  flex-shrink: 0;
  padding: .8rem 1.4rem .8rem .8rem;
  background: linear-gradient(160deg, #fff 0%, #fdfdfe 100%);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 100px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06),
              0 10px 20px -12px rgba(15,23,42,.3),
              0 22px 42px -24px var(--rc);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s;
}
.pn-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(15,23,42,.07),
              0 18px 32px -12px rgba(15,23,42,.34),
              0 34px 60px -26px var(--rc);
}

/* ── the disc ────────────────────────────────────────────────────
   A circle with a white cuff and a ring of the region's colour, so a
   logo on any background still reads as one badge. Real logos sit on
   white; partners without a file get a gradient monogram disc. */
.pn-logo {
  position: relative;
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rc), var(--rc-d));
  box-shadow: 0 0 0 3px #fff,
              0 0 0 4.5px var(--rc),
              0 8px 18px -6px var(--rc);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s;
}
.pn-logo.has-img { background: #fff; }
.pn-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 7px;
  border-radius: 50%;
  background: #fff;
}
.pn-item:hover .pn-logo {
  transform: scale(1.07);
  box-shadow: 0 0 0 3px #fff,
              0 0 0 5px var(--rc),
              0 12px 26px -6px var(--rc);
}
.pn-mono {
  color: #fff; font-size: .95rem; font-weight: 800; letter-spacing: .045em;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.pn-txt { display: flex; flex-direction: column; gap: .12rem; white-space: nowrap; }
.pn-name { font-size: .92rem; font-weight: 700; color: #1f1a48; line-height: 1.2; }
.pn-place { font-size: .75rem; color: #8492a4; }
.pn-place b { color: var(--rc-d); font-weight: 800; letter-spacing: .04em; margin-right: .1rem; }

@media (max-width: 991.98px) {
  .pn-head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .pn-lede { max-width: 60ch; }
}
@media (max-width: 575.98px) {
  .pn-stats > div { flex: 1 1 100%; }
  .pn-stats dd { font-size: 1.6rem; }
  .pn-roll {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
  }
}

/* Motion that never stops is the worst kind for anyone sensitive to it,
   so the roll becomes a plain scrollable row instead. */
@media (prefers-reduced-motion: reduce) {
  .pn-track { animation: none; }
  .pn-roll { overflow-x: auto; scrollbar-width: none; }
  .pn-roll::-webkit-scrollbar { display: none; }
  .pn-item { transition: none; }
  .pn-item:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   THE CONSTELLATION
   Region wedges sized by partner count, so the shape of the sky is the
   statistic. Threads draw outward from the hub on reveal; a node names
   itself on hover or keyboard focus. Below 860px the whole picture is
   dropped for the roll, because twenty labelled points on a phone is
   not a diagram, it is a mess.
   ══════════════════════════════════════════════════════════════════ */
.pn-sky {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1000 / 524;
}
.pn-web { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.pn-orbit {
  fill: none;
  stroke: #c6d2e2;
  stroke-width: 1;
  stroke-dasharray: 3 7;
  opacity: .75;
}
.pn-thread {
  stroke: var(--rc);
  stroke-width: 1.4;
  opacity: .34;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: pnThread .9s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d);
}
@keyframes pnThread { to { stroke-dashoffset: 0; } }

/* ── hub ─────────────────────────────────────────────────────────── */
.pn-hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  pointer-events: none;
}
.pn-hub-disc {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: linear-gradient(140deg, #2b2560, #1f1a48);
  color: #fff; font-weight: 800; font-size: 1.3rem; letter-spacing: .06em;
  box-shadow: 0 0 0 5px #fff,
              0 0 0 7px rgba(245,158,11,.85),
              0 14px 34px -10px rgba(11,63,126,.8),
              0 0 44px 8px rgba(245,158,11,.28);
  overflow: hidden;
  animation: pnHubBreath 4.4s ease-in-out 1.4s infinite;
}
.pn-hub-disc img { width: 74%; height: 74%; object-fit: contain; }
@keyframes pnHubBreath {
  0%, 100% { box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(245,158,11,.85),
                         0 14px 34px -10px rgba(11,63,126,.8), 0 0 44px 8px rgba(245,158,11,.28); }
  50%      { box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(245,158,11,1),
                         0 14px 34px -10px rgba(11,63,126,.8), 0 0 62px 14px rgba(245,158,11,.45); }
}
.pn-hub-name { margin-top: .7rem; font-size: .92rem; font-weight: 800; color: #1f1a48; }
.pn-hub-sub  { font-size: .74rem; color: #7c8797; }

/* ── nodes ───────────────────────────────────────────────────────── */
.pn-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: default;
  opacity: 0;
  animation: pnPop .5s cubic-bezier(.34,1.4,.5,1) forwards;
  animation-delay: calc(var(--d) + .55s);
}
@keyframes pnPop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.pn-dot {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rc), var(--rc-d));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--rc), 0 8px 18px -7px var(--rc);
  transition: transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s;
}
.pn-dot img { width: 100%; height: 100%; object-fit: contain; padding: 6px; background: #fff; border-radius: 50%; }
.pn-node:hover .pn-dot,
.pn-node:focus-visible .pn-dot {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rc), 0 14px 28px -6px var(--rc);
}
.pn-node:focus-visible { outline: none; }

/* the label appears only when wanted, so twenty of them never collide */
.pn-tip {
  position: absolute; top: 50%;
  transform: translateY(-50%) scale(.92);
  display: flex; flex-direction: column;
  padding: .5rem .8rem;
  border-radius: 12px;
  background: #101a29;
  box-shadow: 0 10px 26px -10px rgba(15,23,42,.8);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1);
  z-index: 5;
}
.pn-node.is-right .pn-tip { right: calc(100% + 12px); transform-origin: right center; }
.pn-node.is-left  .pn-tip { left:  calc(100% + 12px); transform-origin: left center; }
.pn-tip b { color: #fff; font-size: .82rem; font-weight: 700; }
.pn-tip i { color: var(--rc); font-size: .72rem; font-style: normal; font-weight: 600; }
.pn-node:hover .pn-tip,
.pn-node:focus-visible .pn-tip { opacity: 1; transform: translateY(-50%) scale(1); }
.pn-node:hover, .pn-node:focus-visible { z-index: 6; }

/* ── legend ──────────────────────────────────────────────────────── */
.pn-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem 1.5rem;
  margin-top: 1.1rem;
}
.pn-legend ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pn-legend li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .85rem;
  border-radius: 100px;
  background: #fff;
  font-size: .78rem; font-weight: 600; color: #4a5768;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 6px 14px -10px rgba(15,23,42,.4);
}
.pn-legend li b { color: var(--rc); font-weight: 800; }
.pn-key { width: 9px; height: 9px; border-radius: 50%; background: var(--rc); flex-shrink: 0; }
.pn-count { margin: 0; font-size: .82rem; color: #535575; }
.pn-count b { color: #1f1a48; font-weight: 800; }

/* A twenty-point diagram does not survive a phone screen. Below 860px
   the roll carries the whole section on its own. */
@media (max-width: 859.98px) {
  .pn-sky { display: none; }
  .pn-legend { justify-content: flex-start; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-thread { animation: none; stroke-dashoffset: 0; }
  .pn-node   { animation: none; opacity: 1; }
  .pn-hub-disc { animation: none; }
  .pn-dot, .pn-tip { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — the rail, the aurora, the brand panel
   Three additions to the split hero:
     · a slow-drifting mesh behind both panels, so the flat navy has
       depth without another image to load;
     · a glass rail across the foot of both columns carrying the level
       chooser and the proof numbers — the first screen now lets a
       visitor route themselves instead of scrolling to find levels;
     · a branded panel for when no poster image has been chosen, so the
       hero never falls back to scraping a video host's thumbnail.
   ══════════════════════════════════════════════════════════════════ */

/* ── aurora ──────────────────────────────────────────────────────── */
.hero-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.hero-aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle, rgba(37,99,235,.55), transparent 70%);
  animation: heroDrift1 26s ease-in-out infinite;
}
.hero-aurora span:nth-child(2) {
  width: 38vw; height: 38vw; right: -8vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(245,158,11,.32), transparent 70%);
  animation: heroDrift2 32s ease-in-out infinite;
}
.hero-aurora span:nth-child(3) {
  width: 30vw; height: 30vw; left: 42%; top: 30%;
  background: radial-gradient(circle, rgba(124,58,237,.30), transparent 70%);
  animation: heroDrift3 38s ease-in-out infinite;
}
@keyframes heroDrift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw,4vw,0) scale(1.14); } }
@keyframes heroDrift2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-5vw,-5vw,0) scale(1.2); } }
@keyframes heroDrift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-7vw,3vw,0) scale(.86); } }

/* ── kicker gets a live dot ──────────────────────────────────────── */
.hero-kicker { display: inline-flex; align-items: center; gap: .6rem; padding-left: 0; }
.hero-kicker::before { display: none; }
.hero-kicker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(245,158,11,.7);
  animation: heroDot 2.4s ease-out infinite;
}
@keyframes heroDot {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* ── branded panel when no poster has been chosen ────────────────── */
.hero-media-fill.is-brand {
  background:
    radial-gradient(circle at 30% 25%, rgba(37,99,235,.34), transparent 58%),
    radial-gradient(circle at 75% 80%, rgba(245,158,11,.20), transparent 55%),
    linear-gradient(150deg, #2b2560, #061627 60%, #040f1c);
}
.hero-media-fill.is-brand::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.hero-brandmark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .16;
  pointer-events: none;
}
.hero-brandmark img { width: min(46%, 240px); height: auto; filter: grayscale(1) brightness(3); }

/* ── the rail ────────────────────────────────────────────────────── */
.hero-rail {
  grid-column: 1 / -1;
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.1rem 2rem;
  margin: 0 clamp(1rem, 3vw, 2.5rem) clamp(1rem, 2.4vw, 1.75rem);
  padding: .9rem clamp(1rem, 2.2vw, 1.5rem);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}

.hero-pick { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; min-width: 0; }
.hero-pick-lab {
  font-size: .66rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  flex-shrink: 0;
}
.hero-pick-set { display: flex; gap: .5rem; flex-wrap: wrap; }
.hero-chip {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .95rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.04);
  transition: background .3s, border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.hero-chip b { font-size: .84rem; font-weight: 700; color: #fff; line-height: 1.2; }
.hero-chip i {
  font-style: normal; font-size: .68rem;
  color: rgba(255,255,255,.45); white-space: nowrap;
}
.hero-chip:hover, .hero-chip:focus-visible {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.5);
  transform: translateY(-2px);
}
.hero-chip:hover b, .hero-chip:focus-visible b { color: var(--gold); }

/* the three proof numbers, now sitting in the rail */
.hero-rail .hero-facts {
  display: flex; gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0; padding: 0; border: 0;
  flex-wrap: wrap;
}
.hero-rail .hero-facts > div { display: flex; flex-direction: column; }
.hero-rail .hero-facts dt {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-rail .hero-facts dd {
  margin: .25rem 0 0;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}

@media (max-width: 1199.98px) {
  .hero-rail { justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .hero-rail {
    margin: 0 1rem 1rem;
    padding: .85rem 1rem;
    gap: .9rem;
  }
  .hero-pick { width: 100%; }
  .hero-pick-set { width: 100%; }
  .hero-chip { flex: 1 1 auto; }
  .hero-rail .hero-facts { width: 100%; justify-content: space-between; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aurora span, .hero-kicker-dot { animation: none; }
  .hero-chip { transition: none; }
  .hero-chip:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — motion pass
   Four things, each doing a job rather than decorating:
     · the headline wipes up line by line, so the message arrives in
       the order you read it;
     · a light sweeps the gold line once, then never again — a flourish
       you notice but do not have to sit through;
     · the aurora and the card lean toward the pointer, which is what
       turns a flat gradient into depth;
     · the "100% Online" tag broadcasts, and a roll of the real campus
       cities runs beneath — the two halves of the same claim.
   ══════════════════════════════════════════════════════════════════ */

/* ── kinetic headline ────────────────────────────────────────────── */
.hero-line { display: block; overflow: hidden; }
.hero-line > span,
.hero-line > em {
  display: block;
  transform: translateY(105%);
  animation: heroLineUp .95s cubic-bezier(.16,.84,.28,1) forwards;
}
@keyframes heroLineUp { to { transform: translateY(0); } }

/* the sweep: one pass across the gold line, then gone */
.hero-line > em { position: relative; overflow: hidden; }
.hero-line > em::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: heroSweep 1.5s cubic-bezier(.3,.7,.4,1) 1.15s 1;
  pointer-events: none;
}
@keyframes heroSweep { to { left: 130%; } }

/* ── pointer parallax ────────────────────────────────────────────── */
.hero-split { --px: 0; --py: 0; }
.hero-aurora span { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hero-aurora span:nth-child(1) { translate: calc(var(--px) * 34px) calc(var(--py) * 26px); }
.hero-aurora span:nth-child(2) { translate: calc(var(--px) * -26px) calc(var(--py) * -20px); }
.hero-aurora span:nth-child(3) { translate: calc(var(--px) * 18px) calc(var(--py) * -14px); }
.hero-media-card {
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
  transform:
    perspective(1400px)
    rotateY(calc(var(--px) * 4deg))
    rotateX(calc(var(--py) * -3deg))
    translate3d(calc(var(--px) * -10px), calc(var(--py) * -8px), 0);
}

/* ── the online tag broadcasts ───────────────────────────────────── */
.hero-online-tag { position: relative; }
.hero-ping {
  position: absolute;
  left: .82rem; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: heroPing 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes heroPing {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(5.5); opacity: 0; }
  100% { transform: scale(5.5); opacity: 0; }
}

/* ── campus roll ─────────────────────────────────────────────────── */
.hero-campus {
  grid-column: 1 / -1;
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .9rem;
  margin: 0 clamp(1rem, 3vw, 2.5rem) clamp(1rem, 2.4vw, 1.75rem);
  padding-top: .1rem;
  min-width: 0;
}
.hero-campus-lab {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.36);
}
.hero-campus-lab i { color: var(--gold); font-size: .7rem; }
.hero-campus-roll {
  position: relative;
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%);
}
.hero-campus-track {
  display: flex; width: max-content;
  animation: heroCampusRoll 34s linear infinite;
}
.hero-campus-roll:hover .hero-campus-track { animation-play-state: paused; }
@keyframes heroCampusRoll { to { transform: translate3d(-50%, 0, 0); } }
.hero-campus-track span {
  display: inline-flex; align-items: center;
  padding: 0 1.1rem;
  font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
}
.hero-campus-track span::after {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(245,158,11,.55);
  margin-left: 1.1rem;
}

@media (max-width: 767.98px) {
  .hero-campus { margin: 0 1rem 1rem; gap: .6rem; }
  .hero-campus-lab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-line > span, .hero-line > em { transform: none; animation: none; }
  .hero-line > em::after { display: none; }
  .hero-media-card, .hero-aurora span { transition: none; transform: none; translate: none; }
  .hero-ping { animation: none; display: none; }
  .hero-campus-track { animation: none; }
  .hero-campus-roll { overflow-x: auto; }
}

/* ── programs: empty state + help strip ──────────────────────────── */
.pfb-searching {
  font-size: .85rem; color: #535575;
  margin: 0 0 1.25rem;
}
.pfb-searching strong { color: #1f1a48; }
.pfb-searching a { margin-left: .5rem; color: #2b2560; font-weight: 700; }

.courses-empty {
  max-width: 420px; margin: 2rem auto 1rem;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 30px -18px rgba(15,23,42,.3);
}
.ce-ic {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: linear-gradient(140deg, #2b2560, #1f1a48);
  color: #fff; font-size: 1.4rem;
  box-shadow: 0 10px 24px -10px rgba(11,63,126,.8);
}
.courses-empty h4 { font-size: 1.15rem; font-weight: 750; color: #1f1a48; margin-bottom: .4rem; }
.courses-empty p  { font-size: .88rem; color: #535575; margin-bottom: 1.25rem; }
.ce-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .62rem 1.3rem; border-radius: 100px;
  background: #2b2560; color: #fff;
  font-size: .85rem; font-weight: 700;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.ce-btn i { font-size: .75rem; }
.ce-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(11,63,126,.9); }

/* the help strip closes the page with a person, not a third Apply button */
.courses-help { padding: 0 0 clamp(2.5rem, 5vw, 4rem); background: var(--bg-light); }
.courses-help-inner {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border-radius: 22px;
  background: linear-gradient(140deg, #2b2560, #1f1a48);
  box-shadow: 0 2px 6px rgba(15,23,42,.08), 0 24px 48px -24px rgba(11,63,126,.85);
}
.ch-ic {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 15px;
  background: var(--gold); color: #21180a; font-size: 1.15rem;
  box-shadow: 0 10px 22px -8px rgba(245,158,11,.85);
}
.ch-txt { flex: 1; min-width: 220px; }
.ch-txt h3 { font-size: 1.16rem; font-weight: 750; color: #fff; margin: 0 0 .2rem; }
.ch-txt p  { font-size: .87rem; color: rgba(255,255,255,.68); margin: 0; }
.ch-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  flex-shrink: 0;
  padding: .7rem 1.4rem; border-radius: 100px;
  background: var(--gold); color: #21180a;
  font-size: .86rem; font-weight: 700;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.ch-btn i { font-size: .75rem; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.ch-btn:hover { color: #21180a; transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(245,158,11,.9); }
.ch-btn:hover i { transform: translateX(3px); }

@media (max-width: 575.98px) {
  .courses-help-inner { padding: 1.25rem; }
  .ch-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ce-btn, .ch-btn, .ch-btn i { transition: none; }
  .ce-btn:hover, .ch-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   APPLICATION TRACKER
   A read-only status check should not need a password. This is the
   front door for applicants who set one during the form weeks ago and
   have since lost it — there is no reset route for that guard.
   ══════════════════════════════════════════════════════════════════ */
.trk {
  position: relative;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, #eceafa 0%, #e4e1f4 55%, #eceafa 100%);
  overflow: hidden;
}
.trk::before {
  content: '';
  position: absolute; top: -240px; right: -150px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, #5b53a5, transparent 70%);
  filter: blur(120px); opacity: .4; pointer-events: none;
}
.trk .container { position: relative; z-index: 1; }

/* ── lookup form ─────────────────────────────────────────────────── */
.trk-form {
  display: flex; align-items: flex-end; gap: .9rem; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 16px 34px -20px rgba(15,23,42,.35);
}
.trk-field { flex: 1 1 220px; min-width: 0; }
.trk-field label {
  display: block; margin-bottom: .35rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #7c8797;
}
.trk-field input {
  width: 100%;
  padding: .68rem .95rem;
  border: 1.5px solid #e4e1f4; border-radius: 12px;
  font-family: inherit; font-size: .9rem; color: #1f1a48;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.trk-field input:focus { border-color: #5b53a5; box-shadow: 0 0 0 3px rgba(47,127,216,.16); }
.trk-go {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.4rem; border: 0; border-radius: 12px;
  background: #2b2560; color: #fff;
  font-family: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, background .28s;
}
.trk-go i { font-size: .75rem; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.trk-go:hover { background: #4a3f96; transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(11,63,126,.9); }
.trk-go:hover i { transform: translateX(3px); }

.trk-msg {
  max-width: 760px; margin: .9rem auto 0;
  font-size: .85rem; display: flex; align-items: center; gap: .5rem;
}
.trk-msg.is-bad { color: #b52a40; }
.trk-msg.is-good {
  align-items: flex-start;
  padding: .85rem 1.1rem; border-radius: 14px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
  margin-bottom: 1.25rem; line-height: 1.6;
}
.trk-msg.is-good i { margin-top: .15rem; }

.trk-alt {
  max-width: 760px; margin: .85rem auto 0;
  text-align: center;
  font-size: .82rem; color: #7c8797;
}
.trk-alt a { color: #2b2560; font-weight: 700; }
.trk-alt a:hover { color: #4a3f96; text-decoration: underline; }

/* ── result card ─────────────────────────────────────────────────── */
.trk-card, .trk-none {
  max-width: 760px; margin: 1.5rem auto 0;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 22px 44px -24px rgba(15,23,42,.4);
  overflow: hidden;
}
.trk-card { padding: 1.6rem clamp(1.25rem, 3vw, 1.9rem) 1.3rem; }

.trk-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid #e4e1f4;
}
.trk-eyebrow {
  margin: 0 0 .2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8b8da6;
  font-variant-numeric: tabular-nums;
}
.trk-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; color: #1f1a48; letter-spacing: -.015em; }
.trk-status {
  flex-shrink: 0;
  padding: .4rem .95rem; border-radius: 100px;
  font-size: .76rem; font-weight: 800;
  background: #eef2f7; color: #4a5768;
}
.trk-status.s-1 { background: #fef3c7; color: #92400e; }
.trk-status.s-2 { background: #e0f2fe; color: #075985; }
.trk-status.s-3 { background: #eceafa; color: #2b2560; }
.trk-status.s-4,
.trk-status.s-6 { background: #dcfce7; color: #166534; }
.trk-status.s-5 { background: #ffe4e6; color: #b52a40; }

.trk-facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0 0 1.4rem; }
.trk-facts dt {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8b8da6; margin-bottom: .2rem;
}
.trk-facts dd { margin: 0; font-size: .95rem; font-weight: 700; color: #1f1a48; }

/* ── progress ────────────────────────────────────────────────────── */
.trk-steps {
  position: relative;
  display: flex; justify-content: space-between;
  list-style: none; margin: 0 0 1.3rem; padding: 0;
  gap: .5rem;
}
/* the rail behind the dots */
.trk-steps::before {
  content: '';
  position: absolute; top: 21px; left: 8%; right: 8%;
  height: 2px; background: #e4e1f4;
}
.trk-steps li {
  position: relative; z-index: 1;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  text-align: center;
}
.trk-dot {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 2px solid #e4e1f4;
  color: #b3becd; font-size: .9rem;
  transition: all .3s;
}
.trk-label { font-size: .72rem; font-weight: 650; color: #8b8da6; line-height: 1.25; }
.trk-steps li.is-done .trk-dot { background: #059669; border-color: #059669; color: #fff; }
.trk-steps li.is-done .trk-label { color: #4a5768; }
.trk-steps li.is-now .trk-dot {
  background: #2b2560; border-color: #2b2560; color: #fff;
  box-shadow: 0 0 0 5px rgba(11,63,126,.14);
}
.trk-steps li.is-now .trk-label { color: #2b2560; font-weight: 800; }

.trk-reject {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.15rem; margin-bottom: 1.3rem;
  border-radius: 14px;
  background: #fff1f2; border: 1px solid #fecdd3;
}
.trk-reject i { color: #b52a40; font-size: 1rem; margin-top: .1rem; flex-shrink: 0; }
.trk-reject strong { display: block; color: #b52a40; font-size: .9rem; margin-bottom: .15rem; }
.trk-reject span { font-size: .85rem; color: #7c8797; line-height: 1.6; }

.trk-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
  padding-top: 1.1rem; border-top: 1px solid #e4e1f4;
}
.trk-foot p { margin: 0; font-size: .85rem; color: #7c8797; }
.trk-help {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 700; color: #2b2560;
}
.trk-help i { font-size: .72rem; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.trk-help:hover { color: #4a3f96; }
.trk-help:hover i { transform: translateX(3px); }

/* ── nothing found ───────────────────────────────────────────────── */
.trk-none { padding: 2.25rem 1.75rem; text-align: center; }
.trk-none-ic {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(140deg, #2b2560, #1f1a48);
  color: #fff; font-size: 1.3rem;
  box-shadow: 0 10px 24px -10px rgba(11,63,126,.8);
}
.trk-none h3 { font-size: 1.15rem; font-weight: 750; color: #1f1a48; margin-bottom: .4rem; }
.trk-none p { font-size: .88rem; color: #535575; line-height: 1.7; max-width: 46ch; margin: 0 auto 1.1rem; }

@media (max-width: 575.98px) {
  .trk-go { width: 100%; justify-content: center; }
  .trk-steps { gap: .25rem; }
  .trk-dot { width: 34px; height: 34px; font-size: .78rem; }
  .trk-steps::before { top: 17px; }
  .trk-label { font-size: .64rem; }
  .trk-head h2 { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .trk-go, .trk-go i, .trk-help i, .trk-dot { transition: none; }
  .trk-go:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SCHOLARSHIPS  (.sch-*)  +  REQUEST FORM  (.srq-*)
   The old cards led with a 90px empty band holding a faded icon, then
   buried the award under two badges. The money is the reason anyone
   reads the card, so it leads — and every card now ends in an action,
   because the page used to be entirely read-only.
   ══════════════════════════════════════════════════════════════════ */
.sch-card {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(43,37,96,.06),
              0 10px 22px -14px rgba(43,37,96,.3),
              0 24px 46px -30px var(--sc);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1);
}
.sch-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sc), var(--sc) 60%, transparent);
}
.sch-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 2px 6px rgba(43,37,96,.08),
              0 22px 40px -18px rgba(43,37,96,.34),
              0 40px 74px -34px var(--sc);
}

.sch-top {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: 1.1rem 1.25rem .35rem;
}
.sch-type, .sch-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  padding: .26rem .7rem; border-radius: 100px;
}
.sch-type   { background: var(--sc-bg); color: var(--sc); }
.sch-type i { font-size: .62rem; }
.sch-status { background: var(--st-bg); color: var(--st); }
.sch-dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: pulse-dot 1.5s ease infinite;
}

.sch-body { padding: .5rem 1.25rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
/* the number people came for */
.sch-amount {
  font-size: clamp(1.5rem, 3.4vw, 1.85rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  color: var(--sc);
  margin: 0 0 .2rem;
}
.sch-title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0 0 .7rem; }
.sch-title a { color: var(--text-dark); }
.sch-card:hover .sch-title a { color: var(--sc); }
.sch-who {
  font-size: .84rem; line-height: 1.6; color: var(--text-mid);
  margin: 0 0 .9rem;
}
.sch-who b {
  display: block;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-light);
  margin-bottom: .2rem;
}

.sch-facts {
  display: flex; flex-wrap: wrap; gap: .35rem 1.5rem;
  margin: auto 0 0; padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.sch-facts dt {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-light);
}
.sch-facts dd { margin: 0; font-size: .85rem; font-weight: 700; color: var(--text-dark); }

.sch-urgent {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: .8rem 0 0; padding: .35rem .7rem;
  border-radius: 8px;
  background: #FEF2F2; color: #b52a40;
  font-size: .76rem; font-weight: 800;
}
.sch-urgent i { font-size: .7rem; }

.sch-foot {
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1.25rem 1.25rem;
}
.sch-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .68rem 1rem; border-radius: 100px;
  background: var(--sc); color: #fff;
  font-size: .84rem; font-weight: 700;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, filter .28s;
}
.sch-btn i { font-size: .72rem; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.sch-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 22px -10px var(--sc); }
.sch-btn:hover i { transform: translateX(3px); }
.sch-btn.is-off {
  background: var(--bg-light); color: var(--text-light);
  cursor: default; font-weight: 700;
}
.sch-more {
  flex-shrink: 0;
  padding: .68rem .95rem; border-radius: 100px;
  border: 1.5px solid var(--border);
  font-size: .82rem; font-weight: 700; color: var(--text-mid);
  transition: border-color .28s, color .28s;
}
.sch-more:hover { border-color: var(--sc); color: var(--sc); }

@media (prefers-reduced-motion: reduce) {
  .sch-card, .sch-btn, .sch-btn i { transition: none; }
  .sch-card:hover, .sch-btn:hover { transform: none; }
}

/* ── request form ────────────────────────────────────────────────── */
.srq { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); background: var(--bg-light); }
.srq-form {
  max-width: 760px; margin: 0 auto;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(43,37,96,.05), 0 20px 44px -26px rgba(43,37,96,.45);
}
/* numbered steps, so a long form reads as three short ones */
.srq-step {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.6rem 0 .9rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dark);
}
.srq-step:first-of-type { margin-top: 0; }
.srq-step span {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(140deg, var(--primary), var(--accent));
  color: #fff; font-size: .72rem; font-weight: 800;
}
.srq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.srq-field { display: flex; flex-direction: column; }
.srq-field label { margin-bottom: .3rem; font-size: .78rem; font-weight: 700; color: var(--text-dark); }
.srq-field label b { color: var(--crimson); }
.srq-field input, .srq-field select, .srq-field textarea {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid var(--border); border-radius: 12px;
  font-family: inherit; font-size: .88rem; color: var(--text-dark);
  background: #fff; outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.srq-field textarea { resize: vertical; line-height: 1.6; }
.srq-field input:focus, .srq-field select:focus, .srq-field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,63,150,.14);
}
.srq-field small { margin-top: .3rem; font-size: .74rem; color: var(--text-light); }

.srq-errors {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .95rem 1.1rem; margin-bottom: 1.2rem;
  border-radius: 14px; background: #FEF2F2; border: 1px solid #f6c9d0;
}
.srq-errors i { color: var(--crimson); margin-top: .15rem; }
.srq-errors strong { display: block; color: #8f2033; font-size: .88rem; margin-bottom: .25rem; }
.srq-errors ul { margin: 0; padding-left: 1.1rem; }
.srq-errors li { font-size: .82rem; color: var(--text-mid); list-style: disc; }

.srq-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.srq-foot p { margin: 0; font-size: .78rem; color: var(--text-light); display: flex; align-items: center; gap: .4rem; }
.srq-submit {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.7rem; border: 0; border-radius: 100px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #3a2a05; font-family: inherit; font-size: .9rem; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(240,180,41,.9);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.srq-submit i { font-size: .78rem; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.srq-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(240,180,41,1); }
.srq-submit:hover i { transform: translateX(3px); }

@media (max-width: 640px) {
  .srq-grid { grid-template-columns: 1fr; }
  .srq-submit { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .srq-submit, .srq-submit i { transition: none; }
  .srq-submit:hover { transform: none; }
}


/* ============================================================
   CAMPUSES — regional grid
   No campus photographs exist yet, so the card leads with a
   colour plate carrying the city's initials instead of a grey
   placeholder. Colour is derived from the region in the blade,
   so a region always reads the same way across the site.
   ============================================================ */

.cmp-section {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(91,83,165,.10), transparent 60%),
    radial-gradient(760px 380px at 88% 108%, rgba(240,180,41,.12), transparent 62%),
    linear-gradient(180deg, #fbfaff 0%, #f4f2fd 100%);
  overflow: hidden;
}
.cmp-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(43,37,96,.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 45%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 45%);
}
.cmp-section > .container { position: relative; z-index: 1; }

/* ---- card shell ---- */
.cmp-card {
  --cc: #5b53a5; --cc-d: #2b2560; --cc-s: #eceafa;
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(31,26,72,.05);
  transition: transform .34s cubic-bezier(.2,.8,.2,1),
              box-shadow .34s cubic-bezier(.2,.8,.2,1),
              border-color .34s;
}
.cmp-card:hover,
.cmp-card:focus-within {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 26px 46px -22px rgba(31,26,72,.45);
  box-shadow: 0 26px 46px -22px color-mix(in srgb, var(--cc-d) 62%, transparent),
              0 0 0 1px color-mix(in srgb, var(--cc) 38%, transparent);
}

/* ---- the plate ---- */
.cmp-plate {
  position: relative;
  padding: 1.4rem 1.35rem 1.5rem;
  background: linear-gradient(135deg, var(--cc) 0%, var(--cc-d) 100%);
  overflow: hidden;
  isolation: isolate;
}
/* soft light sweep */
.cmp-plate::before {
  content: ""; position: absolute; z-index: 0;
  width: 240px; height: 240px; top: -130px; right: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.30), transparent 68%);
}
/* fine grid so the flat colour has texture */
.cmp-plate::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(200deg, rgba(0,0,0,.9), transparent 72%);
          mask-image: linear-gradient(200deg, rgba(0,0,0,.9), transparent 72%);
}
.cmp-plate > * { position: relative; z-index: 1; }

/* giant initials watermark */
.cmp-mark {
  position: absolute; z-index: 0;
  right: .55rem; bottom: -.85rem;
  font-size: 5.5rem; font-weight: 900; line-height: 1;
  letter-spacing: -.05em;
  color: rgba(255,255,255,.16);
  -webkit-text-stroke: 1px rgba(255,255,255,.22);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), color .4s;
  pointer-events: none; user-select: none;
}
.cmp-card:hover .cmp-mark { transform: translate(-4px, -6px) scale(1.06); color: rgba(255,255,255,.24); }

.cmp-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
  color: #fff; font-size: .82rem;
  margin-bottom: .7rem;
  transition: transform .34s cubic-bezier(.2,.8,.2,1);
}
.cmp-card:hover .cmp-pin { transform: translateY(-2px) rotate(-8deg); }

.cmp-region {
  display: block;
  font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em;
  color: rgba(255,255,255,.72);
  margin-bottom: .3rem;
}
.cmp-name { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.28; }
.cmp-name a {
  color: #fff; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .34s cubic-bezier(.2,.8,.2,1);
}
.cmp-card:hover .cmp-name a { background-size: 100% 1.5px; }
.cmp-name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.cmp-place {
  margin: .3rem 0 0;
  font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,.76);
}

/* ---- body ---- */
.cmp-body { flex: 1 1 auto; padding: 1.15rem 1.35rem 1.25rem; }
.cmp-desc {
  margin: 0 0 .9rem;
  font-size: .87rem; line-height: 1.68; color: var(--text-mid);
}
.cmp-fac {
  display: flex; flex-wrap: wrap; gap: .38rem;
  list-style: none; margin: 0; padding: 0;
}
.cmp-fac li {
  font-size: .71rem; font-weight: 700;
  padding: .26rem .62rem;
  border-radius: 100px;
  background: var(--cc-s);
  color: var(--cc-d);
  border: 1px solid transparent;
  border-color: color-mix(in srgb, var(--cc) 22%, transparent);
  white-space: nowrap;
}
.cmp-fac li.is-more {
  background: transparent;
  color: var(--text-light);
  border-color: var(--border);
}

/* ---- footer ---- */
.cmp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1.35rem 1rem;
  border-top: 1px solid var(--border);
}
.cmp-acts { display: flex; gap: .4rem; }
.cmp-acts a {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--cc-s);
  color: var(--cc-d);
  font-size: .74rem;
  text-decoration: none;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), background .24s, color .24s;
}
.cmp-acts a:hover {
  transform: translateY(-2px);
  background: var(--cc); color: #fff;
}
.cmp-go {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 800;
  color: var(--cc-d); text-decoration: none;
  padding: .38rem .2rem;
}
.cmp-go i { font-size: .7rem; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.cmp-card:hover .cmp-go i { transform: translateX(4px); }

@media (max-width: 575.98px) {
  .cmp-plate { padding: 1.2rem 1.1rem 1.3rem; }
  .cmp-mark  { font-size: 4.4rem; }
  .cmp-body  { padding: 1rem 1.1rem 1.1rem; }
  .cmp-foot  { padding: .75rem 1.1rem .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-card, .cmp-mark, .cmp-pin, .cmp-acts a, .cmp-go i, .cmp-name a { transition: none; }
  .cmp-card:hover, .cmp-card:focus-within { transform: none; }
  .cmp-card:hover .cmp-mark, .cmp-card:hover .cmp-pin,
  .cmp-card:hover .cmp-go i, .cmp-acts a:hover { transform: none; }
}


/* ---- CAMPUSES — flagship / main campus feature ---- */

.cmpx-section {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7f6fd 100%);
  overflow: hidden;
}
.cmpx-section::before {
  content: ""; position: absolute; pointer-events: none;
  width: 620px; height: 620px; top: -320px; left: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,63,150,.14), transparent 66%);
}
.cmpx-section > .container { position: relative; z-index: 1; }

.cmpx {
  --cc: #4a3f96; --cc-d: #2b2560; --cc-s: #eceafa;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 24px 52px -30px rgba(31,26,72,.5);
}

/* left plate */
.cmpx-plate {
  position: relative;
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(150deg, var(--cc) 0%, var(--cc-d) 78%);
  overflow: hidden;
}
.cmpx-plate img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.cmpx-plate::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(200deg, rgba(0,0,0,.95), transparent 78%);
          mask-image: linear-gradient(200deg, rgba(0,0,0,.95), transparent 78%);
}
.cmpx-plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 42%, rgba(20,16,52,.62) 100%);
}
.cmpx-plate > * { position: relative; z-index: 2; }

.cmpx-mark {
  position: absolute; z-index: 1;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-size: clamp(6rem, 16vw, 9.5rem); font-weight: 900; line-height: 1;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.14);
  -webkit-text-stroke: 2px rgba(255,255,255,.2);
  user-select: none; pointer-events: none;
}

.cmpx-badge {
  position: absolute; top: 1.25rem; left: 1.5rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .8rem;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #3a2a05;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  box-shadow: 0 8px 20px -10px rgba(240,180,41,.95);
}
.cmpx-badge i { font-size: .64rem; }

.cmpx-plate-foot {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-size: .88rem; font-weight: 700;
}
.cmpx-plate-foot i { color: var(--gold-light); font-size: .82rem; }

/* right body */
.cmpx-body { padding: clamp(1.5rem, 3vw, 2.4rem); }
.cmpx-eyebrow {
  display: inline-block;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--cc);
  margin-bottom: .5rem;
}
.cmpx-name {
  margin: 0 0 .7rem;
  font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 800;
  line-height: 1.2; color: var(--text-dark);
}
.cmpx-desc {
  margin: 0 0 1.25rem;
  font-size: .93rem; line-height: 1.78; color: var(--text-mid);
}

.cmpx-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: .6rem;
  margin-bottom: 1.25rem;
}
.cmpx-tile {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  min-width: 0;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), border-color .26s, background .26s;
}
.cmpx-tile:hover { transform: translateY(-2px); border-color: var(--cc); background: var(--cc-s); }
.cmpx-tile i {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cc-s); color: var(--cc-d); font-size: .78rem;
}
.cmpx-tile span { display: block; min-width: 0; }
.cmpx-tile small {
  display: block;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-light);
}
.cmpx-tile strong {
  display: block;
  font-size: .82rem; font-weight: 700; color: var(--text-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cmpx-fac { margin-bottom: 1.4rem; }
.cmpx-fac-label {
  display: block;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-light);
  margin-bottom: .55rem;
}
.cmpx-fac ul {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0; padding: 0;
}
.cmpx-fac li {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700;
  padding: .28rem .7rem;
  border-radius: 100px;
  background: var(--cc-s);
  color: var(--cc-d);
}
.cmpx-fac li i { font-size: .62rem; color: var(--cc); }

.cmpx-cta { margin-top: .25rem; }

@media (max-width: 991.98px) {
  .cmpx { grid-template-columns: 1fr; }
  .cmpx-plate { min-height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmpx-tile { transition: none; }
  .cmpx-tile:hover { transform: none; }
}

/* ── Faculty filter ─────────────────────────────────────────────────────
   Sits in the programme filter rail beside the level chips. A select, not
   chips: the faculty names run to five words and there are enough of them
   to push the bar onto a third line. */
.pfb-faculty {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.pfb-faculty-lab {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--accent);
  font-size: .9rem;
}
.pfb-faculty select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 17rem;
  padding: .5rem 2rem .5rem .8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234a3f96' d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 16px 16px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color .2s, box-shadow .2s;
}
.pfb-faculty select:hover   { border-color: var(--accent); }
.pfb-faculty select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74,63,150,.18);
}
.pfb-faculty select option[disabled] { color: var(--text-light); }

.pfb-in   { color: var(--text-mid); font-weight: 500; }
.pfb-drop {
  margin-left: .45rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}
.pfb-drop:hover { color: var(--accent-hover); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 991.98px) {
  .pfb-faculty { width: 100%; }
  .pfb-faculty select { max-width: none; flex: 1; }
}

/* ── Tables and lists inside admin-authored content ────────────────────
   Programme descriptions render into .detail-body and CMS pages into
   .block-body. The first had styles for headings, paragraphs, images and
   links but none for tables or lists; the second had no styles at all, so
   a pasted fee table or bulleted policy list came out unruled and, because
   the global reset removes list markers, without bullets. */
.detail-body table, .block-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 2rem;
  font-size: .92rem;
}
.detail-body table th, .detail-body table td, .block-body table th, .block-body table td {
  padding: .6rem .8rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.detail-body table th, .block-body table th {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
}
.detail-body table tbody tr:nth-child(even), .block-body table tbody tr:nth-child(even) { background: var(--bg-light); }
/* A row whose first cell is empty is a year/semester band, not a course. */
.detail-body table td[colspan], .block-body table td[colspan] {
  background: var(--bg-light);
  font-weight: 700;
  color: var(--text-dark);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.detail-body table td:last-child, .detail-body table th:last-child, .block-body table td:last-child, .block-body table th:last-child { text-align: center; width: 4.5rem; }

.detail-body ul, .detail-body ol, .block-body ul, .block-body ol { margin: 0 0 1.25rem 1.25rem; padding-left: 1rem; }
.detail-body ul, .block-body ul { list-style: disc; }
.detail-body ol, .block-body ol { list-style: decimal; }
.detail-body li, .block-body li { margin-bottom: .45rem; }

@media (max-width: 575.98px) {
  .detail-body table { font-size: .82rem; }
  .detail-body table th, .detail-body table td { padding: .45rem .5rem; }
}

/* ══════════════════════════════════════════════════════════════════
   HOME · INSIDE THE LEARNING PLATFORM  (.lp)
   Feature list on the left, an illustrative dashboard (laptop) and
   quiz (phone) on the right. On phones the features become a row of
   swipeable pills and only the phone mockup is shown.
   ══════════════════════════════════════════════════════════════════ */
.lp {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background:
    radial-gradient(700px 420px at 85% 20%, rgba(139,131,212,.28), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgba(240,180,41,.14), transparent 70%),
    linear-gradient(180deg, #f6f5fd, #efedfa);
  color: #1f1a48;
}
.lp .c1 { background: linear-gradient(135deg,#5b53a5,#2b2560); }
.lp .c2 { background: linear-gradient(135deg,#e03a52,#b52a40); }
.lp .c3 { background: linear-gradient(135deg,#14b8a6,#0f766e); }
.lp .c4 { background: linear-gradient(135deg,#f0b429,#d9930d); }
.lp .c5 { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.lp .c6 { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.lp-grid { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lp-eb {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid #e1def5; color: #4a3f96;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .55rem 1rem; border-radius: 99px;
  box-shadow: 0 6px 16px -10px rgba(43,37,96,.3);
}
.lp-h { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; margin: 1.3rem 0 1.1rem; color: #1f1a48; }
.lp-h em { font-style: normal; background: linear-gradient(90deg,#d9930d,#f0b429); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { font-size: 1.08rem; line-height: 1.65; color: #5c5a7a; margin: 0; }
.lp-tabs { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .35rem; }
.lp-tab {
  display: flex; gap: 1rem; align-items: flex-start; text-align: left;
  padding: .6rem 1.1rem; border-radius: 18px; border: 1px solid transparent;
  background: transparent; color: #1f1a48; cursor: pointer; font: inherit;
  transition: background .25s, box-shadow .25s, border-color .25s;
}
.lp-tab:hover { background: rgba(255,255,255,.6); }
.lp-ti { width: 38px; height: 38px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; transition: width .25s, height .25s; }
.lp-tt b { display: block; font-size: 1.02rem; font-weight: 700; line-height: 38px; }
.lp-tt span { display: none; font-size: .9rem; color: #5c5a7a; line-height: 1.5; margin-top: .1rem; }
.lp-tab.on { background: #fff; border-color: #e1def5; box-shadow: 0 18px 40px -22px rgba(43,37,96,.45); padding: 1rem 1.1rem; }
.lp-tab.on .lp-ti { width: 46px; height: 46px; font-size: 1.05rem; border-radius: 14px; }
.lp-tab.on .lp-tt b { line-height: 1.3; }
.lp-tab.on .lp-tt span { display: block; }
.lp-desc { display: none; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 700; font-size: .97rem; padding: 1rem 1.6rem; border-radius: 14px; transition: transform .25s, box-shadow .25s; }
.lp-btn i { font-size: .82rem; transition: transform .25s; }
.lp-btn-p { background: #2b2560; color: #fff; box-shadow: 0 14px 30px -12px rgba(43,37,96,.7); }
.lp-btn-p:hover { color: #fff; transform: translateY(-2px); }
.lp-btn-p:hover i { transform: translateX(3px); }
.lp-btn-g { background: #fff; border: 1px solid #dcd8f2; color: #2b2560; }
.lp-btn-g:hover { color: #2b2560; transform: translateY(-2px); }
.lp-checks { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin-top: 1.5rem; font-size: .9rem; color: #5c5a7a; }
.lp-checks i { color: #0fa38f; margin-right: .35rem; }

/* stage + mockups */
.lp-stage { position: relative; height: 600px; }
.lp-stage { width: 870px; max-width: none; justify-self: end; }
.lp-laptop { position: absolute; left: 0; top: 30px; width: 760px; }
.lp-screen { background: #0f0d2b; border-radius: 22px 22px 0 0; padding: 14px; box-shadow: 0 50px 90px -40px rgba(31,26,72,.6); }
.lp-base { height: 22px; margin: 0 -40px; position: relative; border-radius: 0 0 26px 26px; background: linear-gradient(180deg,#d9d7e8,#b8b5cc); }
.lp-base::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 130px; height: 8px; border-radius: 0 0 10px 10px; background: #a5a2bb; }
.lp-app { background: #f6f5fd; border-radius: 10px; height: 500px; display: grid; grid-template-columns: 170px 1fr; overflow: hidden; font-size: 12.5px; }
.lp-side { background: #2b2560; color: #cfcbf0; padding: 18px 12px; }
.lp-lg { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 20px; }
.lp-lg img { width: 28px; height: 28px; }
.lp-side > span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; margin-bottom: 2px; }
.lp-side > span i { width: 14px; font-size: 12px; text-align: center; }
.lp-side > span.on { background: rgba(255,255,255,.12); color: #fff; }
.lp-side em { margin-left: auto; font-style: normal; background: #e03a52; color: #fff; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }
.lp-main { padding: 18px 20px; display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto 1fr; gap: 12px; min-width: 0; }
.lp-hello { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.lp-hello b { font-size: 18px; } .lp-hello small { display: block; color: #5c5a7a; font-size: 12px; margin-top: 2px; }
.lp-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#f0b429,#e03a52); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.lp-box { background: #fff; border-radius: 14px; padding: 13px; box-shadow: 0 6px 18px -12px rgba(43,37,96,.35); min-width: 0; }
.lp-box h6 { font-size: 12px; color: #5c5a7a; font-weight: 600; margin: 0 0 10px; display: flex; justify-content: space-between; }
.lp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lp-vid { height: 160px; border-radius: 11px; position: relative; overflow: hidden; background: linear-gradient(135deg,#3a3179,#2b2560 50%,#1f1a48); }
.lp-vid::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 75% 35%, rgba(240,180,41,.35), transparent 45%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px); }
.lp-board { position: absolute; left: 16px; top: 16px; color: #fff; }
.lp-board small { font-size: 10px; opacity: .7; letter-spacing: .1em; text-transform: uppercase; }
.lp-board b { display: block; font-size: 16px; margin-top: 4px; max-width: 220px; line-height: 1.25; }
.lp-play { position: absolute; left: 80%; top: 58%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,255,255,.15); }
.lp-play::after { content: ''; border-left: 15px solid #2b2560; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.lp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.2); }
.lp-bar i { display: block; height: 100%; width: 62%; background: #f0b429; }
.lp-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: #5c5a7a; margin-top: 9px; }
.lp-meta b { color: #1f1a48; }
.lp-live { display: flex; gap: 10px; align-items: center; }
.lp-live > span { width: 38px; height: 38px; border-radius: 11px; background: #fde8eb; color: #e03a52; display: grid; place-items: center; flex: none; }
.lp-live b { font-size: 12.5px; display: block; } .lp-live small { font-size: 11px; color: #5c5a7a; }
.lp-join { margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 7px; background: #e03a52; color: #fff; font-size: 12px; font-weight: 700; padding: 8px; border-radius: 10px; }
.lp-ring { display: flex; align-items: center; gap: 12px; }
.lp-ring svg { width: 70px; height: 70px; flex: none; }
.lp-ring b { font-size: 12.5px; display: block; } .lp-ring small { font-size: 11px; color: #5c5a7a; }
.lp-tasks { grid-column: 1 / -1; }
.lp-t { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 7px 0; border-top: 1px solid #efeef7; }
.lp-t:first-of-type { border-top: 0; }
.lp-t > span:first-child { width: 26px; height: 26px; border-radius: 8px; flex: none; color: #fff; font-size: 11px; display: grid; place-items: center; }
.lp-t > span:nth-child(2) { flex: 1; }
.lp-t em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
.lp-t .due { background: #fff4dc; color: #a8700a; } .lp-t .ok { background: #dcf7ef; color: #0f766e; }
.lp-phone { position: absolute; right: -10px; top: 140px; width: 235px; background: #0f0d2b; border-radius: 40px; padding: 10px; box-shadow: 0 50px 90px -30px rgba(31,26,72,.7); z-index: 3; }
.lp-ps { background: #fff; border-radius: 31px; overflow: hidden; height: 480px; position: relative; }
.lp-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; border-radius: 14px; background: #0f0d2b; }
.lp-phd { background: linear-gradient(135deg,#3a3179,#2b2560); color: #fff; padding: 42px 16px 16px; }
.lp-phd small { font-size: 10px; opacity: .75; text-transform: uppercase; letter-spacing: .1em; }
.lp-phd b { display: block; font-size: 14px; margin-top: 4px; }
.lp-q { padding: 14px; }
.lp-q p { font-size: 12.5px; font-weight: 600; line-height: 1.45; margin: 0 0 10px; }
.lp-q span { border: 1.5px solid #e6e4f3; border-radius: 12px; padding: 9px 11px; font-size: 12px; margin-bottom: 7px; display: flex; gap: 9px; align-items: center; }
.lp-q span::before { content: ''; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #cfcbe6; flex: none; }
.lp-q span.sel { border-color: #0fa38f; background: #e9faf6; }
.lp-q span.sel::before { border-color: #0fa38f; background: radial-gradient(#0fa38f 40%, transparent 45%); }
.lp-sub { margin: 4px 14px; background: #2b2560; color: #fff; text-align: center; border-radius: 12px; padding: 10px; font-size: 12.5px; font-weight: 700; }
.lp-chip { position: absolute; z-index: 4; background: #fff; border-radius: 16px; padding: 11px 15px; display: flex; align-items: center; gap: 11px; box-shadow: 0 24px 50px -20px rgba(31,26,72,.45); }
.lp-chip > span { width: 36px; height: 36px; border-radius: 12px; color: #fff; display: grid; place-items: center; flex: none; }
.lp-chip b { display: block; font-size: 13.5px; color: #1f1a48; } .lp-chip small { color: #5c5a7a; font-size: 11.5px; }
.lp-ch1 { left: -30px; bottom: 30px; }
.lp-ch2 { right: 230px; top: 0; }

@media (min-width: 1400px) and (max-width: 1599.98px) { .lp-stage { zoom: .86; } }
@media (min-width: 1200px) and (max-width: 1399.98px) { .lp-stage { zoom: .74; } }
@media (max-width: 1199.98px) {
  .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-stage { height: 580px; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .lp-stage { zoom: .8; } }
@media (max-width: 767.98px) {
  .lp-tabs { flex-direction: row; overflow-x: auto; gap: .5rem; margin: 1.5rem -12px 0; padding: 0 12px 6px; scrollbar-width: none; }
  .lp-tabs::-webkit-scrollbar { display: none; }
  .lp-tab, .lp-tab.on { flex: none; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .45rem; border-radius: 99px; background: #fff; border-color: #e1def5; box-shadow: none; }
  .lp-ti, .lp-tab.on .lp-ti { width: 30px; height: 30px; border-radius: 50%; font-size: .75rem; }
  .lp-tt b, .lp-tab.on .lp-tt b { font-size: .88rem; line-height: 1.2; white-space: nowrap; }
  .lp-tab.on .lp-tt span { display: none; }
  .lp-tab.on { background: #2b2560; border-color: #2b2560; }
  .lp-tab.on .lp-tt b { color: #fff; }
  .lp-desc { display: block; background: #fff; border: 1px solid #e1def5; border-radius: 16px; padding: 1rem; margin: .75rem 0 0; font-size: .92rem; color: #5c5a7a; line-height: 1.55; }
  .lp-ctas { flex-direction: column; } .lp-btn { width: 100%; }
  .lp-stage { height: 540px; width: auto; }
  .lp-laptop { display: none; }
  .lp-phone { position: relative; right: auto; top: auto; margin: 10px auto 0; width: 250px; }
  .lp-ps { height: 500px; }
  .lp-ch2 { right: auto; left: 0; top: -14px; }
  .lp-ch1 { left: auto; right: 0; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-tab, .lp-ti, .lp-btn, .lp-btn i { transition: none; }
  .lp-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HOME · MESSAGE FROM THE RECTOR — "Editorial Letter"  (.rl)
   ══════════════════════════════════════════════════════════════════ */
.rl {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: radial-gradient(800px 400px at 90% 10%, rgba(240,180,41,.14), transparent 70%), #f7f3ea;
  color: #1f1a48;
}
.rl-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.rl-ph { position: relative; margin: 0; }
.rl-ph::before { content: ''; position: absolute; inset: 26px -26px -26px 26px; border: 2px solid #c99a2e; border-radius: 28px; }
.rl-photo { position: relative; display: block; width: 100%; height: 600px; object-fit: cover; object-position: 46% 30%; border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(31,26,72,.55); }
.rl-seal { position: absolute; right: -56px; bottom: 60px; width: 150px; height: 150px; border-radius: 50%; background: #2b2560; display: grid; place-items: center; box-shadow: 0 20px 40px -14px rgba(31,26,72,.6); }
.rl-seal svg { position: absolute; inset: 0; width: 150px; height: 150px; animation: rlSpin 30s linear infinite; }
.rl-seal text { fill: #f0b429; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 3.3px; }
.rl-seal img { position: relative; width: 62px; height: 62px; }
@keyframes rlSpin { to { transform: rotate(360deg); } }
.rl-eb { display: flex; align-items: center; gap: .75rem; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #a11d36; }
.rl-eb::before { content: ''; width: 34px; height: 2px; background: #a11d36; }
.rl-h { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: clamp(2.3rem, 4vw, 3.7rem); line-height: 1.05; letter-spacing: -.02em; margin: 1.2rem 0 .35rem; color: #1f1a48; }
.rl-sub { font-family: 'Lora', Georgia, serif; font-style: italic; font-size: clamp(1.25rem, 2vw, 1.7rem); color: #b07f12; margin: 0; }
.rl-body { margin-top: 1.8rem; font-size: 1.05rem; line-height: 1.8; color: #46445f; columns: 2; column-gap: 2.75rem; }
.rl-body p { margin: 0 0 1rem; break-inside: avoid-column; }
.rl-body p:first-child::first-letter { float: left; font-family: 'Lora', Georgia, serif; font-size: 4.2rem; line-height: .85; padding: .35rem .6rem 0 0; color: #2b2560; font-weight: 600; }
.rl-pull { margin: 1.6rem 0 0; border: 0; border-left: 4px solid #c99a2e; padding: .35rem 0 .35rem 1.6rem; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.38rem); line-height: 1.55; color: #2b2560; }
.rl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 2.1rem; padding-top: 1.75rem; border-top: 1px solid rgba(31,26,72,.14); }
.rl-sig b { display: block; white-space: nowrap; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1.85rem; font-weight: 500; color: #1f1a48; }
.rl-sig span { font-size: .9rem; color: #6b6985; }
.rl-btn { display: inline-flex; align-items: center; gap: .6rem; flex: none; background: #2b2560; color: #fff; font-weight: 700; font-size: .95rem; padding: 1rem 1.6rem; border-radius: 14px; box-shadow: 0 14px 30px -12px rgba(43,37,96,.6); transition: transform .25s, box-shadow .25s; }
.rl-btn i { font-size: .8rem; transition: transform .25s; }
.rl-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(43,37,96,.7); }
.rl-btn:hover i { transform: translateX(3px); }

@media (max-width: 1399.98px) {
  .rl-body { columns: 1; }
  .rl-photo { height: 560px; }
}
@media (max-width: 1199.98px) {
  .rl-grid { grid-template-columns: minmax(0, 1fr); }
  .rl-ph { max-width: 640px; }
  .rl-photo { height: 440px; }
}
@media (max-width: 767.98px) {
  .rl-ph::before { inset: 16px -12px -16px 12px; }
  .rl-photo { height: 340px; }
  .rl-seal { right: -6px; bottom: -30px; width: 110px; height: 110px; }
  .rl-seal svg { width: 110px; height: 110px; }
  .rl-seal img { width: 44px; height: 44px; }
  .rl-txt { margin-top: 1.5rem; }
  .rl-body { columns: 1; font-size: 1rem; }
  .rl-foot { flex-direction: column; align-items: flex-start; }
  .rl-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-seal svg { animation: none; }
  .rl-btn, .rl-btn i { transition: none; }
  .rl-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HOME · PROGRAMS BY FACULTY  (.hf)
   Same faculty identity as the /course explorer (.fe-fi): per-faculty
   hue (--h), tinted icon tile and a coloured accent edge.
   ══════════════════════════════════════════════════════════════════ */
.hf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.hf-card {
  --c: hsl(var(--h) 60% 45%);
  position: relative; display: flex; flex-direction: column;
  padding: 1.35rem 1.35rem 1.2rem; border-radius: 22px;
  background: #fff; border: 1px solid #e8e6f4; border-top: 5px solid var(--c);
  box-shadow: 0 12px 26px -16px rgba(34,28,92,.32);
  color: #15123a; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.hf-card::after { content: ''; position: absolute; right: -46px; top: -46px; width: 130px; height: 130px; border-radius: 50%; background: hsl(var(--h) 75% 95%); z-index: 0; transition: transform .35s; }
.hf-card > * { position: relative; z-index: 1; }
.hf-card:hover { color: #15123a; transform: translateY(-4px); box-shadow: 0 22px 38px -18px rgba(34,28,92,.45); }
.hf-card:hover::after { transform: scale(1.25); }
.hf-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.hf-ic { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; background: hsl(var(--h) 75% 94%); color: var(--c); font-size: 1.05rem; }
.hf-count { font-size: .78rem; font-weight: 600; color: #6b6890; background: #fff; border: 1px solid #ecebf6; padding: .3rem .65rem; border-radius: 99px; white-space: nowrap; }
.hf-count b { color: var(--c); font-weight: 800; }
.hf-name { font-size: 1.08rem; font-weight: 800; line-height: 1.3; margin: 1rem 0 .7rem; color: #15123a; }
.hf-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.hf-list li { position: relative; padding-left: 1rem; font-size: .86rem; color: #55537a; line-height: 1.4; margin-bottom: .4rem; }
.hf-list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); opacity: .7; }
.hf-go { margin-top: auto; display: flex; align-items: center; gap: .45rem; padding-top: .85rem; border-top: 1px dashed #e4e2f2; font-size: .86rem; font-weight: 700; color: var(--c); }
.hf-go i { font-size: .72rem; transition: transform .25s; }
.hf-card:hover .hf-go i { transform: translateX(4px); }
.hf-more { margin-right: auto; font-size: .76rem; font-weight: 600; color: #8b88a8; }
.hf-all { --h: 250; background: linear-gradient(145deg, #2f2780, #221c5c); color: #fff; border: 0; border-top: 5px solid #f2b43a; }
.hf-all::after { background: rgba(255,255,255,.07); }
.hf-all:hover { color: #fff; }
.hf-all .hf-ic { background: rgba(255,255,255,.14); color: #ffd27a; }
.hf-all .hf-name { color: #fff; margin-top: 1rem; }
.hf-all p { font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.75); margin: 0 0 1rem; }
.hf-all .hf-go { color: #ffd27a; border-top-color: rgba(255,255,255,.18); }

@media (max-width: 1199.98px) { .hf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .hf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .hf-grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .hf-card { padding: 1.15rem; }
  .hf-name { margin: .8rem 0 .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-card, .hf-card::after, .hf-go i { transition: none; }
  .hf-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   HOME REVIEW FIXES (2026-10-11)
   ══════════════════════════════════════════════════════════════════ */
/* Decorative pieces (crest watermarks, scroll rows) nudged the page
   ~4px wider than a phone screen, so it could wobble sideways. `clip`
   (unlike `hidden`) does not create a scroll container. */
html, body { overflow-x: clip; }

/* How It Works: steps that the comet has not reached yet were pale
   grey on lavender and read as disabled. They now show their own
   colour, softly; the comet still brings them to full strength. */
.journey-row.js-ready .step-circle {
  background: linear-gradient(135deg, var(--step-soft), #fff);
  box-shadow: 0 8px 20px -12px rgba(15,23,42,.25), 0 0 0 6px #fff, inset 0 0 0 2px var(--step-c2);
}
.journey-row.js-ready .step-circle i { color: var(--step-c1); }
.journey-row .step-item.is-done .step-circle i { color: #fff; }
.journey-row.js-ready .step-num { color: var(--step-c1); box-shadow: 0 3px 8px rgba(15,23,42,.12), 0 0 0 2px var(--step-c2); }
.journey-row.js-ready .step-item p { color: #5c5a7a; }

/* Partners: the constellation was removed; the section is now the
   heading, the region counts and the rolling logo strip. */
.pn { padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(2rem, 4vw, 3rem); }
.pn-legend { margin-top: 1.25rem; }