/* ============================================================
   A Factor — Brand Stylesheet
   Primary: #63989e (brand teal — main accent)
   Brand tints/shades:  #2a5e64 deep · #4ea8b0 bright · #b8dde0 light · #e3f0f1 wash
   Contrast accent:     #f48066 warm coral (sparingly, for energy moments)
   Highlight accent:    #ffc857 amber (very sparingly, for callouts)
   Neutrals:  #0a2540 ink · #424770 body · #8792a2 muted · #e6ebf1 line · #f6f9fc surface
   ============================================================ */

:root {
  /* Brand — variations of the same hue family */
  --brand:        #63989e;   /* primary */
  --brand-bright: #4ea8b0;   /* energetic version */
  --brand-deep:   #2a5e64;   /* deep, for emphasis */
  --brand-600:    #4f8389;
  --brand-700:    #3e6b71;
  --brand-200:    #b8dde0;   /* light tint */
  --brand-100:    #e3f0f1;
  --brand-50:     #f1f7f8;

  /* Contrast accents — used sparingly for energy */
  --accent:        #f48066;  /* warm coral — complementary to teal */
  --accent-deep:   #d6624a;
  --accent-light:  #ffd0c2;
  --highlight:     #ffc857;  /* amber — used only for tiny callouts */

  /* Neutrals */
  --ink: #0a2540;
  --body: #424770;
  --muted: #8792a2;
  --line: #e6ebf1;
  --surface: #f6f9fc;
  --cream:  #fffbf6;          /* warm-tinted off-white for variety */
  --white: #ffffff;

  /* Effects */
  --shadow-card:  0 4px 12px rgba(50,50,93,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-hover: 0 14px 30px rgba(50,50,93,.10), 0 6px 16px rgba(99,152,158,.10);
  --shadow-deep:  0 20px 50px rgba(42,94,100,.14), 0 8px 20px rgba(0,0,0,.06);
  --shadow-coral: 0 14px 30px rgba(244,128,102,.18);

  --grad-hero:   linear-gradient(135deg, #eaf5f6 0%, #fff5ef 60%, #ffe7d8 100%);
  --grad-brand:  linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 50%, var(--brand-bright) 100%);
  --grad-warm:   linear-gradient(135deg, #ff9a7a 0%, var(--accent) 100%);
  --grad-card-1: linear-gradient(135deg, #e3f0f1 0%, #f7fbfc 100%);
  --grad-card-2: linear-gradient(135deg, #ffe9dd 0%, #fff5ef 100%);
  --grad-card-3: linear-gradient(135deg, #f3edff 0%, #fbf8ff 100%);

  --radius: 12px;
  --radius-lg: 18px;
  --radius-sm: 8px;
  --maxw: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--body);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--brand); color: #fff; }

a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-700); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  line-height: 1.15;
}
h1 { font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -0.035em; line-height: 1.08; font-weight: 700; }
h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -0.025em; line-height: 1.15; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1rem; }
.h-hero { font-size: clamp(2.25rem, 4vw, 3.6rem); }

.h-grad {
  background: linear-gradient(120deg, var(--ink) 0%, var(--brand-deep) 55%, var(--brand) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h-accent { color: var(--accent-deep); }
.h-brand  { color: var(--brand-deep); }
p  { margin: 0 0 1em; font-weight: 300; }

.font-mono { font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .container { padding: 0 64px; } }

.section { padding: 80px 0; }
@media (min-width: 1024px) { .section { padding: 120px 0; } }
.section--sm { padding: 56px 0; }
.section--surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--cream { background: var(--cream); border-top: 1px solid #f3e7d6; border-bottom: 1px solid #f3e7d6; }
.section--brand-wash {
  background: linear-gradient(180deg, var(--brand-50) 0%, #fff 100%);
  position: relative;
}
.section--ink {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(78,168,176,.18), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(244,128,102,.15), transparent 45%),
    linear-gradient(180deg, #0b2944 0%, var(--ink) 100%);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .eyebrow { color: var(--brand-bright); }
.section--ink::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-bright), var(--accent), transparent);
  opacity: .6;
}

/* ---------- Navigation ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.95rem;
}
@media (min-width: 1024px) { .nav { padding: 24px 64px; } }
.nav__brand {
  color: var(--ink); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.045em;
}
.nav__brand:hover { color: var(--brand-deep); }
.footer__brand { color: var(--ink); }
.nav__group { display: flex; align-items: center; gap: 32px; }
.nav__links { display: none; gap: 28px; }
@media (min-width: 900px) { .nav__links { display: flex; } }
.nav__links a { color: var(--ink); font-weight: 500; }
.nav__links a:hover { color: var(--brand); }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__signin { display: none; color: var(--ink); font-weight: 500; }
@media (min-width: 900px) { .nav__signin { display: inline; } }
.nav__signin:hover { color: var(--brand); }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; color: var(--ink);
}
@media (min-width: 900px) { .nav__toggle { display: none; } }

/* mobile menu (no JS by default; pure :target trick) */
.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 100; background: rgba(10,37,64,.96);
  color: #fff; padding: 24px;
}
.mobile-menu:target { display: block; }
.mobile-menu__close { position: absolute; top: 18px; right: 18px; color: #fff; font-size: 28px; }
.mobile-menu__list { margin-top: 60px; display: flex; flex-direction: column; gap: 18px; font-size: 1.4rem; }
.mobile-menu__list a { color: #fff; font-weight: 500; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn--primary   { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px rgba(42,94,100,.30); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(42,94,100,.40); color: #fff; filter: brightness(1.05); }
.btn--accent    { background: var(--grad-warm); color: #fff; box-shadow: var(--shadow-coral); }
.btn--accent:hover { transform: translateY(-2px); box-shadow: 0 20px 36px rgba(244,128,102,.30); color: #fff; filter: brightness(1.05); }
.btn--ink       { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #061a31; transform: translateY(-2px); color: #fff; box-shadow: 0 14px 24px rgba(10,37,64,.30); }
.btn--ghost     { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: rgba(10,37,64,0.05); color: var(--ink); }
.btn--outline   { background: transparent; color: var(--brand-deep); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: #fff; }
.btn--lg        { padding: 16px 26px; font-size: 1rem; border-radius: 10px; }
.btn .arrow { transition: transform .18s ease; display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Pills / Tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-deep);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pill .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(244,128,102,.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.pill--coral { color: var(--accent-deep); border-color: var(--accent-light); }
.pill--coral .dot { background: var(--accent); }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244,128,102,.18); }
  50%      { box-shadow: 0 0 0 7px rgba(244,128,102,.08); }
}
.tag {
  font-family: 'Source Code Pro', monospace;
  font-size: 0.72rem;
  color: var(--ink);
  background: var(--surface);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 140px 0 110px;
  background: var(--grad-hero);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .hero { padding: 210px 0 170px; }
}

/* Decorative blobs */
.hero::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(78,168,176,.55), rgba(78,168,176,0) 70%);
  filter: blur(40px);
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -100px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 60%, rgba(244,128,102,.45), rgba(244,128,102,0) 70%);
  filter: blur(50px);
  z-index: -1;
}

.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: 80px; } }
.hero__eyebrow { margin-bottom: 24px; }
.hero__title { margin-bottom: 22px; }
.hero__title em { font-style: normal; color: var(--accent-deep); position: relative; }
.hero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 8px;
  background: var(--highlight); opacity: .45; z-index: -1; border-radius: 2px;
}
.hero__lede { font-size: 1.18rem; max-width: 540px; margin-bottom: 32px; color: var(--body); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
  aspect-ratio: 4/3.4;
  display: grid; place-items: center;
}
.hero__visual::before {
  content: "";
  position: absolute; inset: -10px;
  background: var(--grad-brand);
  border-radius: var(--radius-lg);
  z-index: 0; opacity: .12; filter: blur(30px);
}
.hero__visual-inner {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.6);
  padding: 28px;
  box-shadow: var(--shadow-deep);
  z-index: 1;
  background-image: linear-gradient(180deg, #fff 0%, var(--brand-50) 130%);
}
.hero__visual-inner::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-brand);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.hero__floater {
  position: absolute; right: -22px; bottom: 24px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 18px;
  box-shadow: var(--shadow-hover); z-index: 3;
  display: flex; align-items: center; gap: 12px;
  animation: floatUp 4s ease-in-out infinite;
}
.hero__floater__bar {
  width: 4px; height: 36px; border-radius: 2px;
  background: var(--grad-warm);
}
@keyframes floatUp {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@media (max-width: 720px) {
  .hero__floater { display: none; }
}

/* ---------- Marquee ---------- */
.marquee {
  background: #fff;
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.marquee::after  { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.marquee__label { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin: 0 0 18px; letter-spacing: 0.05em; text-transform: uppercase; }
.marquee__track {
  display: flex; gap: 56px; white-space: nowrap;
  font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em;
  color: var(--brand-deep); opacity: 0.65;
  animation: scrollMarquee 38s linear infinite;
}
.marquee__track span { display: inline-flex; align-items: center; gap: 56px; }
.marquee__track span::after {
  content: "•"; color: var(--accent); font-size: 1.4rem;
}
.marquee__track span:last-child::after { content: ""; }
@keyframes scrollMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 720px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--gap-lg { gap: 32px; }
}
.cols-split { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) {
  .cols-split { grid-template-columns: 5fr 7fr; gap: 64px; }
}
.cols-split__left .sticky { position: sticky; top: 120px; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: var(--brand-200); }
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
  opacity: 0; transition: opacity .25s ease;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.card:hover::before { opacity: 1; }

.card__icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-card-1);
  border: 1px solid var(--brand-100);
  color: var(--brand-deep);
  margin-bottom: 22px;
  font-size: 1.35rem;
  font-weight: 600;
}
.card__icon--coral {
  background: var(--grad-card-2);
  border-color: var(--accent-light);
  color: var(--accent-deep);
}
.card__icon--ink {
  background: linear-gradient(135deg, #11304d, var(--ink));
  border-color: var(--ink);
  color: var(--brand-bright);
}
.card__title { margin-bottom: 8px; }
.card__body { font-size: 0.96rem; flex-grow: 1; margin: 0; }
.card__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.card--feature { padding: 36px; }
.card--span2 { grid-column: 1 / -1; }
.card--coral { background: linear-gradient(180deg, #fff, var(--accent-light)); border-color: var(--accent-light); }
.card--brand { background: linear-gradient(180deg, #fff, var(--brand-100)); border-color: var(--brand-200); }
.card--ink   { background: var(--ink); color: #fff; }
.card--ink .card__title { color: #fff; }
.card--ink .card__body { color: #cfd6df; }
.card--ink .card__foot { border-top-color: rgba(255,255,255,.1); }
.card--floating { box-shadow: var(--shadow-deep); }

/* Numbered step cards */
.step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand-200); }
.step-card__num {
  position: absolute; top: 18px; right: 22px;
  font-family: 'Source Code Pro', monospace;
  font-size: 3.5rem; font-weight: 700;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.18;
  line-height: 1;
}
.step-card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #fff;
  margin-bottom: 22px;
  box-shadow: 0 8px 16px rgba(42,94,100,.20);
}
.step-card:nth-child(2) .step-card__icon { background: var(--grad-warm); box-shadow: var(--shadow-coral); }
.step-card:nth-child(4) .step-card__icon { background: linear-gradient(135deg, var(--brand-bright), var(--brand)); }
.step-card__title { color: var(--ink); font-weight: 600; font-size: 1.15rem; margin: 0 0 8px; }
.step-card__body { font-size: 0.95rem; color: var(--body); font-weight: 300; margin: 0; }

/* People / mentor card */
.person { }
.person__photo {
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grad-card-1);
  margin-bottom: 14px;
  display: grid; place-items: center;
  color: var(--brand-deep);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.04em;
  border: 1px solid var(--brand-100);
}
.person:nth-child(2n) .person__photo { background: var(--grad-card-2); color: var(--accent-deep); border-color: var(--accent-light); }
.person:nth-child(3n) .person__photo { background: linear-gradient(135deg, #e8f3f5, #f8fafb); }
.person:nth-child(4n) .person__photo { background: linear-gradient(135deg, var(--ink), #11304d); color: var(--brand-bright); border-color: var(--ink); }
.person__photo::before {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 32%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.4));
}
.person__name { color: var(--ink); font-weight: 600; font-size: 0.95rem; margin: 0 0 2px; }
.person__role { color: var(--body); font-size: 0.85rem; font-weight: 300; margin: 0; }

/* Programme cards (richer than person) */
.prog-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.prog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.prog-card__top {
  aspect-ratio: 16/10;
  display: grid; place-items: center;
  position: relative;
  color: #fff;
  text-align: center;
  padding: 24px;
}
.prog-card:nth-child(4n+1) .prog-card__top { background: var(--grad-brand); }
.prog-card:nth-child(4n+2) .prog-card__top { background: var(--grad-warm); }
.prog-card:nth-child(4n+3) .prog-card__top { background: linear-gradient(135deg, #11304d, var(--brand-deep)); }
.prog-card:nth-child(4n)   .prog-card__top { background: linear-gradient(135deg, var(--brand-bright), var(--brand-200)); color: var(--brand-deep); }
.prog-card__top::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 50%);
}
.prog-card__abbr {
  font-size: 3rem; font-weight: 800; letter-spacing: -0.05em;
  font-family: 'Source Code Pro', monospace; position: relative; z-index: 1;
}
.prog-card__chip {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
}
.prog-card:nth-child(4n) .prog-card__chip { color: var(--brand-deep); background: rgba(255,255,255,.6); border-color: rgba(42,94,100,.2); }
.prog-card__body { padding: 20px 22px 22px; }
.prog-card__title { color: var(--ink); font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
.prog-card__meta { color: var(--body); font-size: 0.85rem; font-weight: 400; margin: 0; }

/* ---------- Pre-footer CTA ---------- */
.cta-band {
  text-align: center;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(78,168,176,.25), transparent 45%),
    radial-gradient(ellipse at 80% 60%, rgba(244,128,102,.18), transparent 45%),
    linear-gradient(180deg, var(--brand-50) 0%, var(--cream) 100%);
  padding: 100px 0;
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cta-band p { max-width: 620px; margin: 0 auto 28px; font-size: 1.08rem; }
.cta-band--ink {
  background:
    radial-gradient(ellipse at 25% 30%, rgba(78,168,176,.25), transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(244,128,102,.20), transparent 50%),
    linear-gradient(135deg, #0b2944 0%, var(--ink) 100%);
  color: #fff;
}
.cta-band--ink h2 { color: #fff; }
.cta-band--ink p { color: #cfd6df; }

/* ---------- Footer ---------- */
.footer { background: #fff; padding: 64px 0 28px; border-top: 1px solid var(--line); }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-bottom: 56px; }
@media (min-width: 720px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer h5 { color: var(--ink); font-size: 0.95rem; font-weight: 500; margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: var(--body); font-size: 0.9rem; font-weight: 300; }
.footer ul a:hover { color: var(--brand); }
.footer__brand { color: var(--ink); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.04em; display: inline-block; margin-bottom: 12px; }
.footer__tag { color: var(--body); font-size: 0.85rem; font-weight: 300; max-width: 240px; }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 0.8rem; color: var(--muted); font-weight: 300;
}
@media (min-width: 720px) { .footer__bottom { flex-direction: row; justify-content: space-between; } }
.footer__bottom a { color: var(--muted); }
.footer__bottom a:hover { color: var(--ink); }

/* ---------- Sub-page hero ---------- */
.subhero {
  position: relative;
  padding: 140px 0 60px;
  background: linear-gradient(180deg, var(--surface) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .subhero { padding: 170px 0 80px; }
}
.subhero__crumbs { font-size: 0.82rem; color: var(--muted); margin-bottom: 14px; }
.subhero__crumbs a { color: var(--muted); }
.subhero__crumbs a:hover { color: var(--brand); }
.subhero__title { margin: 0 0 18px; font-size: clamp(2rem, 3.5vw, 3.2rem); }
.subhero__lede { font-size: 1.1rem; max-width: 720px; }

/* ---------- Generic content blocks ---------- */
.lead { font-size: 1.15rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.75rem; color: var(--brand-deep); font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 2px; background: var(--accent); border-radius: 2px;
}
.eyebrow--no-bar::before { display: none; }
.eyebrow--coral { color: var(--accent-deep); }
.eyebrow--coral::before { background: var(--brand); }

.stat {
  border-left: 3px solid var(--brand);
  padding: 4px 0 4px 18px;
  position: relative;
}
.stat__label { color: var(--brand-deep); font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 4px; font-family: 'Source Code Pro', monospace; }
.stat__num   { color: var(--ink); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.04em; display: block; line-height: 1.1; }
.stat__sub   { color: var(--muted); font-size: 0.82rem; }
.stat--accent { border-left-color: var(--accent); }
.stat--accent .stat__label { color: var(--accent-deep); }
.section--ink .stat { border-left-color: var(--brand-bright); }
.section--ink .stat__label { color: var(--brand-bright); }
.section--ink .stat__num { color: #fff; }
.section--ink .stat--accent { border-left-color: var(--accent); }
.section--ink .stat--accent .stat__label { color: var(--accent); }
.section--ink .stat__sub { color: #8792a2; font-size: 0.78rem; }

.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: 'Source Code Pro', monospace; font-size: 0.82rem; color: var(--body);
}
.check-list .icon-check {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--brand-100); color: var(--brand-deep);
  font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.check-list--coral .icon-check { background: var(--accent-light); color: var(--accent-deep); }

/* ---------- Tables / dashboards in dark sections ---------- */
.panel-dark {
  background: linear-gradient(180deg, #133a5c 0%, #11304d 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 30px 60px rgba(0,0,0,.30);
  position: relative; overflow: hidden;
}
.panel-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-bright) 0%, var(--accent) 100%);
}
.panel-dark::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(78,168,176,.25), transparent 70%);
  pointer-events: none;
}
.panel-dark__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; position: relative; z-index: 1; }
.panel-dark__head .label { color: var(--brand-bright); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.panel-dark__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 0.92rem;
  position: relative; z-index: 1;
}
.panel-dark__row:last-child { border-bottom: 0; }
.panel-dark__row .v { font-family: 'Source Code Pro', monospace; color: var(--brand-bright); font-size: 0.88rem; font-weight: 600; }
.panel-dark__row .v--coral { color: var(--accent); }
.panel-dark__row .k { color: #fff; font-weight: 300; }

/* ---------- Inline icon ---------- */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; fill: currentColor; }

/* ---------- Page-specific helpers ---------- */
.kicker { color: var(--brand); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.15em; }
.divider { height: 1px; background: var(--line); border: 0; margin: 56px 0; }

.timeline { display: flex; flex-direction: column; gap: 28px; }
.timeline__item { display: grid; grid-template-columns: 60px 1fr; gap: 20px; align-items: start; }
.timeline__step {
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center;
  font-family: 'Source Code Pro', monospace; font-weight: 600;
  border: 1px solid var(--brand);
}

.split-feature {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .split-feature { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split-feature--reverse > div:first-child { order: 2; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; max-width: 520px; }
.form label { font-size: 0.85rem; color: var(--ink); font-weight: 500; }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99,152,158,.18);
}
.form textarea { min-height: 130px; resize: vertical; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-12 { margin-bottom: 48px; }
.muted { color: var(--muted); }
.body-fade { color: var(--body); font-weight: 300; }

/* ---------- Accessibility focus ---------- */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 14px;
  z-index: 200; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ============================================================
   MATERIAL-MODERN OVERHAUL — interactivity layer
   ============================================================ */

/* ---------- Material elevation system ---------- */
.elev-1 { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(50,50,93,.06); }
.elev-2 { box-shadow: 0 4px 6px rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08); }
.elev-3 { box-shadow: 0 10px 20px rgba(50,50,93,.10), 0 3px 6px rgba(0,0,0,.05); }
.elev-4 { box-shadow: 0 16px 36px rgba(50,50,93,.14), 0 6px 12px rgba(0,0,0,.06); }
.elev-5 { box-shadow: 0 24px 48px rgba(50,50,93,.18), 0 10px 20px rgba(0,0,0,.08); }

/* ---------- Scroll-reveal motion ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Animated counter ---------- */
.counter { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- Hero refinements (smaller, more focused) ---------- */
.hero { padding: 120px 0 90px; }
@media (min-width: 1024px) {
  .hero { padding: 160px 0 130px; }
  .hero__grid { grid-template-columns: 1.1fr 1fr; }
}
.hero__title { font-size: clamp(2.25rem, 4vw, 3.6rem) !important; line-height: 1.06 !important; margin-bottom: 20px; }
.hero__lede  { font-size: 1.08rem; max-width: 510px; }

/* ---------- Role picker tabs (interactive widget) ---------- */
.role-picker {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 6px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  border: 1px solid var(--line);
  margin-top: 28px;
  box-shadow: var(--shadow-card);
}
.role-picker button {
  appearance: none;
  border: 0; background: transparent;
  padding: 9px 14px;
  border-radius: 10px;
  font: inherit; font-size: 0.85rem; font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.role-picker button:hover { background: var(--brand-50); color: var(--brand-deep); }
.role-picker button.is-active {
  background: var(--ink); color: #fff;
  box-shadow: 0 4px 10px rgba(10,37,64,.18);
}
.role-picker button.is-active .role-picker__dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(244,128,102,.25); }
.role-picker__dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--brand);
  transition: background .2s ease, box-shadow .2s ease;
}

/* Programme demo card (in hero visual) */
.demo-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 24px;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.demo-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.demo-card__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
.demo-card__title { display: flex; align-items: center; gap: 10px; }
.demo-card__title strong { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.demo-card__live {
  font-family: 'Source Code Pro', monospace;
  font-size: .72rem; font-weight: 600;
  color: var(--accent-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
.demo-card__live::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(244,128,102,.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

/* Demo content rows (replaced by JS based on selected role) */
.demo-row {
  display:flex; align-items:center; gap:14px;
  padding: 14px 16px; border:1px solid var(--line); border-radius: 12px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #fff 0%, var(--brand-50) 100%);
  transition: transform .25s ease;
}
.demo-row:hover { transform: translateX(3px); }
.demo-row__icon {
  width: 36px; height: 36px; border-radius: 10px; display:grid; place-items:center;
  font-family: 'Source Code Pro', monospace; font-weight: 700; font-size:.95rem;
  background: var(--grad-brand); color: #fff;
}
.demo-row--coral { background: linear-gradient(135deg, #fff, #fff5ef); }
.demo-row--coral .demo-row__icon { background: var(--grad-warm); }
.demo-row--ink { background: linear-gradient(135deg, #fff, #eef6f7); }
.demo-row--ink .demo-row__icon { background: linear-gradient(135deg, #11304d, var(--brand-deep)); color: var(--brand-bright); }
.demo-row__body { flex:1; }
.demo-row__body strong { display:block; color: var(--ink); font-weight:600; font-size:.95rem; }
.demo-row__body span   { color: var(--body); font-size:.82rem; font-weight: 400; }
.demo-row__meta { font-family:'Source Code Pro', monospace; font-size:.75rem; padding: 4px 10px; border-radius: 999px; background: var(--brand-100); color: var(--brand-deep); font-weight:600; }
.demo-row--coral .demo-row__meta { background: var(--accent-light); color: var(--accent-deep); }

/* Animated progress bar inside demo */
.bar {
  height: 5px; background: var(--brand-100); border-radius: 999px;
  position: relative; overflow: hidden; margin-top: 8px;
}
.bar__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--grad-brand);
  width: 0;
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(.2,.7,.2,1);
}
.bar--coral .bar__fill { background: var(--grad-warm); }

/* ---------- Bento grid ---------- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
}
.bento__cell {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.bento__cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand-200); }
.bento__cell--span3 { grid-column: span 3; }
.bento__cell--span2 { grid-column: span 2; }
.bento__cell--span4 { grid-column: span 4; }
.bento__cell--span6 { grid-column: 1 / -1; }
.bento__cell--tall  { min-height: 320px; }
.bento__cell--brand { background: linear-gradient(160deg, #fff 0%, var(--brand-100) 100%); border-color: var(--brand-200); }
.bento__cell--coral { background: linear-gradient(160deg, #fff 0%, var(--accent-light) 100%); border-color: var(--accent-light); }
.bento__cell--ink   { background: linear-gradient(160deg, #11304d 0%, var(--ink) 100%); color:#fff; border-color: rgba(255,255,255,.08); }
.bento__cell--ink h3 { color: #fff; }
.bento__cell--ink p  { color: #cfd6df; }
@media (max-width: 759px) {
  .bento__cell--span2,
  .bento__cell--span3,
  .bento__cell--span4 { grid-column: span 1; }
}

.bento__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-grid; place-items: center;
  margin-bottom: 18px;
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 8px 16px rgba(42,94,100,.20);
}
.bento__cell--coral .bento__icon { background: var(--grad-warm); box-shadow: var(--shadow-coral); }
.bento__cell--ink   .bento__icon { background: linear-gradient(135deg, var(--brand-bright), var(--brand)); color: #fff; box-shadow: 0 8px 16px rgba(78,168,176,.30); }

.bento__title { color: var(--ink); font-weight: 700; font-size: 1.1rem; margin: 0 0 8px; letter-spacing: -.02em; }
.bento__cell--ink .bento__title { color: #fff; }
.bento__body { color: var(--body); font-weight: 300; font-size: 0.95rem; margin: 0; }

/* Big stat in bento */
.big-stat__num {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.big-stat__num--coral {
  background: var(--grad-warm);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.big-stat__label { color: var(--muted); font-size: .82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 6px; display: block; }

/* Bento decorative graphic */
.bento__decor {
  position: absolute; right: -10px; bottom: -10px;
  width: 130px; height: 130px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(78,168,176,.25), rgba(78,168,176,0) 70%);
  pointer-events: none;
}
.bento__cell--coral .bento__decor { background: radial-gradient(circle, rgba(244,128,102,.30), rgba(244,128,102,0) 70%); }

/* ---------- Tab section (interactive 4-step model) ---------- */
.tab-section {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.tab-section__nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.tab-section__nav button {
  appearance: none; border: 0; background: transparent;
  padding: 24px 20px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--body);
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .2s ease, color .2s ease;
}
.tab-section__nav button:last-child { border-right: 0; }
.tab-section__nav button:hover { background: #fff; color: var(--ink); }
.tab-section__nav button.is-active {
  background: #fff; color: var(--ink);
}
.tab-section__nav button.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--grad-brand);
}
.tab-section__step {
  font-family: 'Source Code Pro', monospace; font-weight: 700;
  color: var(--accent-deep); font-size: .78rem; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 4px;
}
.tab-section__heading { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.tab-section__panels { padding: 40px; min-height: 260px; }
.tab-section__panel {
  display: none;
  animation: fadeUp .4s cubic-bezier(.2,.7,.2,1);
}
.tab-section__panel.is-active { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) {
  .tab-section__panel.is-active { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
.tab-section__panel h3 { font-size: 1.4rem; letter-spacing: -.02em; }
.tab-section__detail {
  background: var(--brand-50);
  border-radius: var(--radius);
  padding: 22px;
  font-size: .92rem;
  border-left: 3px solid var(--brand);
}
.tab-section__detail strong { color: var(--ink); display: block; margin-bottom: 6px; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 759px) {
  .tab-section__nav { grid-template-columns: 1fr 1fr; }
  .tab-section__nav button { padding: 16px; }
  .tab-section__panels { padding: 24px; }
}

/* ---------- Logo marquee with cards instead of plain text ---------- */
.logo-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-weight: 700; font-size: .95rem; color: var(--ink);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.logo-pill__icon {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--brand);
}
.logo-pill:nth-child(3n) .logo-pill__icon { background: var(--accent); }
.logo-pill:nth-child(5n) .logo-pill__icon { background: var(--brand-bright); }

.marquee__track--pills {
  gap: 16px;
  opacity: 1;
  color: var(--ink);
}
.marquee__track--pills span { gap: 16px; }
.marquee__track--pills span::after { content: ""; }

/* ---------- Mouse-tracking gradient on CTA ---------- */
.cta-cursor {
  position: relative; overflow: hidden; isolation: isolate;
}
.cta-cursor::before {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,128,102,.35), rgba(244,128,102,0) 60%);
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 0;
}
.cta-cursor > * { position: relative; z-index: 1; }

/* ---------- Stat counter card ---------- */
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.stat-card__num {
  font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.04em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; line-height: 1;
}
.stat-card__num--coral {
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card__label { color: var(--body); font-size: .92rem; margin-top: 8px; font-weight: 400; }
.stat-card__decor {
  position: absolute; right: -20px; top: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-100), transparent 70%);
}

/* ---------- Ripple effect on buttons (Material) ---------- */
.ripple {
  position: relative; overflow: hidden;
}
.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  pointer-events: none;
  animation: ripple-anim .6s ease-out;
}
@keyframes ripple-anim {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(2); opacity: 0; }
}

/* ---------- Floating accent badge ---------- */
.flo-badge {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow-hover);
  display: flex; align-items: center; gap: 12px;
  animation: floatUp 4s ease-in-out infinite;
  z-index: 3;
}
.flo-badge__bar {
  width: 4px; height: 36px; border-radius: 2px;
  background: var(--grad-warm);
}
.flo-badge__label { font-family:'Source Code Pro', monospace; font-size:.72rem; color: var(--muted); letter-spacing:.05em; text-transform: uppercase; }
.flo-badge__value { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.flo-badge__delta { color: var(--accent-deep); font-size: .85rem; font-weight: 600; }

/* Reduce hero floater conflict */
.hero__floater { display: none !important; }

/* ============================================================
   IIDE-direction additions
   ============================================================ */

/* ---------- Top announcement bar ---------- */
.annc {
  background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand) 60%, var(--brand-bright) 100%);
  color: #fff;
  font-size: .88rem;
  padding: 10px 24px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  text-align: center;
  flex-wrap: wrap;
  font-weight: 500;
}
.annc strong { font-weight: 700; }
.annc a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 600;
}
.annc__chip {
  background: rgba(255,255,255,.2);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* nav must sit below announcement */
body.has-annc .nav { top: 44px; }
@media (max-width: 720px) {
  .annc { font-size: .82rem; padding: 9px 14px; }
}

/* ---------- Full-bleed photo hero (IIDE style) ---------- */
.hero-photo {
  position: relative;
  min-height: 92vh;
  background: linear-gradient(120deg, #0b1f33 0%, #122c47 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  isolation: isolate;
}
.hero-photo::before {
  /* Photo placeholder — diagonal gradient + abstract grid */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(244,128,102,.35), transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(78,168,176,.45), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 60px),
    linear-gradient(135deg, #0b1f33 0%, #122c47 60%, #1d4665 100%);
  z-index: -2;
}
/* Decorative shapes evoking student photos */
.hero-photo::after {
  content: "";
  position: absolute;
  right: -10%; top: 10%;
  width: 60%; height: 80%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800'><defs><pattern id='dot' x='0' y='0' width='14' height='14' patternUnits='userSpaceOnUse'><circle cx='2' cy='2' r='1.2' fill='rgba(255,255,255,0.10)'/></pattern></defs><rect width='600' height='800' fill='url(%23dot)'/></svg>");
  z-index: -1;
  opacity: .85;
}
.hero-photo .container { width: 100%; position: relative; z-index: 1; }
.hero-photo__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent);
  font-family: 'Source Code Pro', monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-photo__eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--accent); border-radius: 2px;
}
.hero-photo h1 {
  color: #fff;
  font-size: clamp(1.85rem, 3.2vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 18px;
  max-width: 560px;
}
.hero-photo h1 em {
  font-style: normal;
  color: var(--accent);
  position: relative;
}
.hero-photo h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px;
  background: var(--accent);
  opacity: .45;
  border-radius: 4px;
}
.hero-photo__lede {
  color: #cdd9e6;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 640px;
  margin-bottom: 32px;
  font-weight: 400;
  line-height: 1.55;
}
.hero-photo__ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero-photo__link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}
.hero-photo__link:hover { color: var(--accent); }

.hero-photo__quick {
  display: flex;
  gap: 36px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.12);
  flex-wrap: wrap;
}
.hero-photo__quick .item {
  display: flex; align-items: center; gap: 14px;
}
.hero-photo__quick .item__num {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent);
  font-family: 'Source Code Pro', monospace;
  line-height: 1;
}
.hero-photo__quick .item__label {
  font-size: .85rem;
  color: #cdd9e6;
  line-height: 1.3;
  max-width: 150px;
}

/* ---------- Accreditation strip ---------- */
.accred {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.accred__inner {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  justify-content: center;
}
.accred__label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: 'Source Code Pro', monospace;
}
.accred__list {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
  justify-content: center;
}
.accred__badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.01em;
  opacity: .75;
  font-size: .9rem;
}
.accred__badge svg { width: 22px; height: 22px; color: var(--brand-deep); opacity: .9; }

/* ---------- Multi-platform rating bar ---------- */
.ratings {
  background: var(--surface);
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}
.ratings__title {
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
  font-family: 'Source Code Pro', monospace;
}
.ratings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 760px) {
  .ratings__grid { grid-template-columns: repeat(4, 1fr); }
}
.rating-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rating-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--brand-200); }
.rating-card__platform {
  font-weight: 700;
  color: var(--ink);
  font-size: .92rem;
  letter-spacing: -.01em;
}
.rating-card__score {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-deep);
  font-family: 'Source Code Pro', monospace;
  letter-spacing: -.04em;
  line-height: 1;
}
.rating-card__stars { color: #ffc857; font-size: .88rem; letter-spacing: 1px; }
.rating-card__meta { font-size: .72rem; color: var(--muted); }

/* ---------- Tab pills (programme filter) ---------- */
.tab-pills {
  display: inline-flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  flex-wrap: wrap;
}
.tab-pills button {
  appearance: none; border: 0; background: transparent;
  padding: 9px 18px;
  font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--body);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tab-pills button:hover { color: var(--ink); }
.tab-pills button.is-active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 14px rgba(10,37,64,.20);
}

/* ---------- Programme card (IIDE style) ---------- */
.iide-prog {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.iide-prog:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand-200); }
.iide-prog__media {
  aspect-ratio: 16/9;
  position: relative;
  display: grid; place-items: center;
  color: #fff;
  text-align: center;
  padding: 24px;
  background: var(--grad-brand);
  overflow: hidden;
}
.iide-prog__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 30px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%);
}
.iide-prog:nth-child(2n) .iide-prog__media { background: var(--grad-warm); }
.iide-prog:nth-child(3n) .iide-prog__media { background: linear-gradient(135deg, #11304d, var(--brand-deep)); }
.iide-prog:nth-child(4n) .iide-prog__media { background: linear-gradient(135deg, var(--brand-bright), var(--brand-200)); color: var(--brand-deep); }
.iide-prog__category {
  position: absolute; top: 14px; left: 14px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(6px);
  z-index: 1;
}
.iide-prog:nth-child(4n) .iide-prog__category { background: rgba(42,94,100,.18); color: var(--brand-deep); }
.iide-prog__media-title {
  font-family: 'Source Code Pro', monospace;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  position: relative; z-index: 1;
  text-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.iide-prog__body {
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  flex-grow: 1;
}
.iide-prog__title {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.3;
}
.iide-prog__meta {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  font-size: .85rem;
}
.iide-prog__meta dt {
  color: var(--muted);
  font-family: 'Source Code Pro', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: 2px;
}
.iide-prog__meta dd {
  color: var(--ink);
  margin: 0;
  font-weight: 500;
}
.iide-prog__deadline {
  background: var(--accent-light);
  color: var(--accent-deep);
  font-weight: 700;
  font-size: .78rem;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Source Code Pro', monospace;
  display: flex; align-items: center; gap: 8px;
}
.iide-prog__deadline::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(244,128,102,.20);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.iide-prog__foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px;
}
.iide-prog__cta {
  color: var(--brand-deep);
  font-weight: 700;
  font-size: .88rem;
  display: inline-flex; align-items: center; gap: 4px;
}
.iide-prog__seats { font-size: .78rem; color: var(--muted); font-family: 'Source Code Pro', monospace; }
.iide-prog__seats strong { color: var(--accent-deep); font-weight: 700; }

/* ---------- Vertical-video alumni reel ---------- */
.reel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}
@media (min-width: 760px) {
  .reel { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); grid-template-columns: none; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .reel > * { scroll-snap-align: start; }
  .reel::-webkit-scrollbar { height: 6px; }
  .reel::-webkit-scrollbar-thumb { background: var(--brand-200); border-radius: 999px; }
}
.reel-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(165deg, #0c2941 0%, #1c5274 100%);
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer;
  transition: transform .3s ease;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-card);
}
.reel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.reel-card:nth-child(4n+1) { background: linear-gradient(165deg, #0c2941, #2a5e64); }
.reel-card:nth-child(4n+2) { background: linear-gradient(165deg, #5b2e1f, var(--accent-deep)); }
.reel-card:nth-child(4n+3) { background: linear-gradient(165deg, #1c5274, var(--brand-bright)); }
.reel-card:nth-child(4n+4) { background: linear-gradient(165deg, var(--brand-deep), #11304d); }
.reel-card::before {
  /* Subtle face-frame illusion */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 70%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(0,0,0,.35), transparent 60%);
}
.reel-card::after {
  /* Play button */
  content: "▶";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 1rem; padding-left: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,.30);
  transition: transform .25s ease, background .25s ease;
}
.reel-card:hover::after { transform: translate(-50%,-50%) scale(1.08); background: var(--accent); color: #fff; }
.reel-card__caption {
  position: relative; z-index: 2;
  padding: 16px 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
}
.reel-card__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; margin: 0; }
.reel-card__role {
  font-size: .78rem; opacity: .85; margin: 4px 0 0;
  display: flex; align-items: center; gap: 6px;
}
.reel-card__company {
  background: rgba(255,255,255,.18);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: -.005em;
}

/* ---------- Faculty / trainer card ---------- */
.faculty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.faculty-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.faculty-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand-200); }
.faculty-card__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(165deg, var(--brand-100), var(--brand-50));
  display: grid; place-items: center;
  color: var(--brand-deep);
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: -.04em;
  position: relative;
}
.faculty-card:nth-child(2n) .faculty-card__photo { background: linear-gradient(165deg, var(--accent-light), #fff5ef); color: var(--accent-deep); }
.faculty-card:nth-child(3n) .faculty-card__photo { background: linear-gradient(165deg, #11304d, var(--brand-deep)); color: var(--brand-bright); }
.faculty-card:nth-child(4n) .faculty-card__photo { background: linear-gradient(165deg, #efeae0, #fffbf6); color: var(--ink); }
.faculty-card__photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.4));
}
.faculty-card__body { padding: 18px 18px 20px; }
.faculty-card__name {
  font-weight: 700; color: var(--ink);
  font-size: 1.02rem; margin: 0;
  letter-spacing: -.015em;
}
.faculty-card__role { color: var(--body); font-size: .85rem; margin: 4px 0 12px; font-weight: 400; }
.faculty-card__exco {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
}
.faculty-card__exco::before { content: "← "; color: var(--muted); }

/* ---------- Hiring partners wall ---------- */
.partner-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.partner-wall__cell {
  padding: 24px 18px;
  display: grid; place-items: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  color: var(--ink);
  font-size: 1.05rem;
  letter-spacing: -.025em;
  text-align: center;
  transition: background .25s ease, color .25s ease;
}
.partner-wall__cell:hover { background: var(--surface); color: var(--brand-deep); }
.partner-wall__cell--featured { color: var(--accent-deep); }
.partner-wall__cell--brand { color: var(--brand-deep); }

/* ---------- Featured-in media wall ---------- */
.media-wall {
  display: flex; flex-wrap: wrap; gap: 0; justify-content: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.media-wall__item {
  padding: 22px 32px;
  font-weight: 700;
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: -.01em;
  font-style: italic;
  font-family: 'Inter', serif;
  border-right: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.media-wall__item:last-child { border-right: 0; }
.media-wall__item:hover { color: var(--ink); }

/* ---------- Awards & recognition list ---------- */
.awards {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.award-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, padding .2s ease;
}
.award-row:hover { background: var(--surface); padding-left: 14px; padding-right: 14px; }
.award-row__year {
  font-family: 'Source Code Pro', monospace;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-deep);
  letter-spacing: -.02em;
}
.award-row__title {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  margin: 0 0 4px;
}
.award-row__body {
  color: var(--body);
  font-size: .9rem;
  font-weight: 400;
  margin: 0;
}
.award-row__category {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--brand-100);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ---------- Real brand projects ---------- */
.project-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand-200); }
.project-card__cover {
  aspect-ratio: 16 / 10;
  position: relative;
  background: linear-gradient(135deg, var(--ink), var(--brand-deep));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -.035em;
  overflow: hidden;
}
.project-card:nth-child(2n) .project-card__cover { background: linear-gradient(135deg, var(--accent-deep), #f4a08a); }
.project-card:nth-child(3n) .project-card__cover { background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep)); }
.project-card__cover::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 50%);
}
.project-card__brand {
  position: absolute; top: 16px; left: 16px;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(6px);
  border-radius: 6px;
}
.project-card__body {
  padding: 22px;
}
.project-card__title {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}
.project-card__outcome {
  color: var(--body);
  font-size: .9rem;
  margin: 0;
}
.project-card__outcome strong { color: var(--accent-deep); font-weight: 700; }

/* ---------- Masonry photo grid (life at) ---------- */
.life {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
  gap: 14px;
}
@media (max-width: 760px) {
  .life { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}
.life__cell {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 16px;
  color: #fff;
  background: linear-gradient(165deg, var(--ink), var(--brand-deep));
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.life__cell:hover { transform: scale(1.02); box-shadow: var(--shadow-hover); z-index: 1; }
.life__cell--a { grid-row: span 2; background: linear-gradient(165deg, #4ea8b0, #2a5e64); }
.life__cell--b { grid-row: span 1; background: linear-gradient(165deg, var(--accent-deep), #a64531); }
.life__cell--c { grid-row: span 3; grid-column: span 2; background: linear-gradient(165deg, #1c5274, #11304d); }
.life__cell--d { grid-row: span 1; background: linear-gradient(165deg, #efeae0, #fffbf6); color: var(--ink); }
.life__cell--e { grid-row: span 2; background: linear-gradient(165deg, var(--accent), #ffa48a); }
.life__cell--f { grid-row: span 1; background: linear-gradient(165deg, var(--brand-deep), var(--brand)); }
.life__cell--g { grid-row: span 2; background: linear-gradient(165deg, var(--ink), #1c5274); }
.life__cell--h { grid-row: span 1; background: linear-gradient(165deg, #b8dde0, #e3f0f1); color: var(--brand-deep); }
.life__cell::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45));
}
.life__cell--d::before, .life__cell--h::before {
  background:
    radial-gradient(circle at 30% 20%, rgba(0,0,0,.04), transparent 50%),
    linear-gradient(180deg, transparent 50%, rgba(255,255,255,.0));
}
.life__cell span {
  position: relative; z-index: 1;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: -.015em;
  line-height: 1.2;
}

/* ---------- Free masterclass card ---------- */
.master-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.master-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand-200); }
.master-card__top {
  background: linear-gradient(135deg, var(--ink), var(--brand-deep));
  color: #fff;
  padding: 26px 22px;
  position: relative;
}
.master-card:nth-child(2n) .master-card__top { background: linear-gradient(135deg, var(--accent-deep), #f4a08a); }
.master-card:nth-child(3n) .master-card__top { background: linear-gradient(135deg, var(--brand-deep), var(--brand-bright)); }
.master-card__tag {
  position: absolute; top: 14px; right: 14px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.master-card__date {
  font-family: 'Source Code Pro', monospace;
  font-size: .82rem;
  opacity: .85;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.master-card__title {
  font-weight: 700; font-size: 1.15rem; line-height: 1.25; letter-spacing: -.02em;
  margin: 0 0 14px;
}
.master-card__time {
  font-size: .82rem; opacity: .85;
  display: flex; align-items: center; gap: 8px;
}
.master-card__body { padding: 18px 22px 22px; }
.master-card__by { font-size: .85rem; color: var(--body); margin: 0 0 12px; }
.master-card__by strong { color: var(--ink); font-weight: 700; }
.master-card__enrolled {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem;
  color: var(--accent-deep);
  font-weight: 700;
  font-family: 'Source Code Pro', monospace;
}
.master-card__enrolled::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(244,128,102,.20);
}

/* ---------- Section header with see-all link ---------- */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  margin-bottom: 36px;
}
.sec-head__title { max-width: 680px; }
.sec-head__title h2 { margin: 0 0 8px; }
.sec-head__title p { margin: 0; }
.sec-head__action {
  font-weight: 700;
  color: var(--brand-deep);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .92rem;
}
.sec-head__action:hover { color: var(--accent-deep); }

/* ---------- Big closing CTA (form-feel) ---------- */
.enquire {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(244,128,102,.25), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(78,168,176,.25), transparent 50%),
    linear-gradient(135deg, #0a2540 0%, #133a5c 100%);
  color: #fff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.enquire h2 { color: #fff; }
.enquire__lede { color: #cdd9e6; font-size: 1.1rem; max-width: 580px; }
.enquire__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 760px) {
  .enquire__form { grid-template-columns: 1fr 1fr auto; }
}
.enquire__form input, .enquire__form select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  font: inherit; font-size: .95rem;
  transition: background .2s ease, border-color .2s ease;
}
.enquire__form input::placeholder { color: rgba(255,255,255,.55); }
.enquire__form input:focus, .enquire__form select:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.10); }
.enquire__form select option { color: var(--ink); }
.enquire__form button {
  appearance: none; border: 0; background: var(--grad-warm);
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  font: inherit; font-weight: 700; font-size: .95rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-coral);
}
.enquire__form button:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ---------- Counter strip ---------- */
.count-strip {
  background: var(--cream);
  padding: 56px 0;
  border-top: 1px solid #f3e7d6;
  border-bottom: 1px solid #f3e7d6;
}
.count-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media (min-width: 760px) {
  .count-strip__grid { grid-template-columns: repeat(4, 1fr); }
}
.count-item__num {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--accent-deep);
  font-family: 'Source Code Pro', monospace;
}
.count-item__label {
  font-size: .85rem;
  color: var(--body);
  margin-top: 8px;
  line-height: 1.4;
}

/* ---------- Heading utility for h2 inside hero-photo ---------- */
.section--white { background: #fff; }

/* ============================================================
   HEADER + COLOR REBALANCE
   Brand teal takes back lead. Coral only for scarcity/urgency.
   ============================================================ */

/* Nav on dark hero — text becomes white */
.has-annc .nav { top: 44px; }
@media (max-width: 720px) { .has-annc .nav { top: 60px; } }

.has-annc .nav__brand,
.has-annc .nav__links a,
.has-annc .nav__signin {
  color: #fff;
}
.has-annc .nav__brand:hover,
.has-annc .nav__links a:hover,
.has-annc .nav__signin:hover { color: var(--brand-bright); }
.has-annc .nav__toggle {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* When user has scrolled past the hero, switch back to dark text via JS-toggled class */
.nav.is-scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: 14px !important; padding-bottom: 14px !important;
  top: 0 !important;
  position: fixed !important;
  box-shadow: 0 4px 16px rgba(50,50,93,.06);
}
.nav.is-scrolled .nav__brand,
.nav.is-scrolled .nav__links a,
.nav.is-scrolled .nav__signin { color: var(--ink); }
.nav.is-scrolled .nav__brand:hover,
.nav.is-scrolled .nav__links a:hover,
.nav.is-scrolled .nav__signin:hover { color: var(--brand-deep); }
.nav.is-scrolled .nav__toggle { background: #fff; border-color: var(--line); color: var(--ink); }
.has-annc .annc { position: relative; z-index: 60; }
.nav.is-scrolled + .annc-spacer { display: none; }

/* ---------- Hero rebalance: brand-led, coral as accent ---------- */
.hero-photo::before {
  background:
    radial-gradient(ellipse at 25% 80%, rgba(99,152,158,.55), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(78,168,176,.55), transparent 55%),
    radial-gradient(ellipse at 60% 60%, rgba(244,128,102,.18), transparent 40%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 60px),
    linear-gradient(135deg, #0b1f33 0%, #133a5c 60%, #1e5663 100%);
}

.hero-photo h1 em { color: var(--brand-bright); }
.hero-photo h1 em::after { background: var(--brand-bright); opacity: .55; }
.hero-photo__eyebrow { color: var(--brand-bright); }
.hero-photo__eyebrow::before { background: var(--brand-bright); }
.hero-photo__quick .item__num { color: var(--brand-bright); }

/* Primary hero CTA: keep coral but pair with brand outline button */
.hero-photo .btn--accent { box-shadow: 0 8px 18px rgba(244,128,102,.30); }

/* Ratings score colour — switch from coral to brand */
.rating-card__score { color: var(--brand-deep); }
.rating-card__stars { color: var(--accent); }   /* keep stars warm */

/* Programme card deadline: switch to brand, keep dot coral for energy */
.iide-prog__deadline {
  background: var(--brand-100);
  color: var(--brand-deep);
}
.iide-prog__deadline::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(244,128,102,.20); }

/* Programme card seats: still coral (urgency) */
.iide-prog__seats strong { color: var(--accent-deep); }

/* Programme media — bring brand into rotation more */
.iide-prog__media { background: var(--grad-brand); }
.iide-prog:nth-child(2n) .iide-prog__media { background: linear-gradient(135deg, var(--brand-bright), var(--brand-200)); color: var(--brand-deep); }
.iide-prog:nth-child(3n) .iide-prog__media { background: linear-gradient(135deg, #11304d, var(--brand-deep)); }
.iide-prog:nth-child(4n) .iide-prog__media { background: var(--grad-warm); color: #fff; }
.iide-prog:nth-child(5n) .iide-prog__media { background: linear-gradient(135deg, var(--brand-deep), var(--brand)); }
.iide-prog:nth-child(6n) .iide-prog__media { background: linear-gradient(135deg, var(--ink), var(--brand-deep)); }
.iide-prog:nth-child(2n) .iide-prog__category { background: rgba(42,94,100,.18); color: var(--brand-deep); }

/* Counter strip — brand-deep for emphasis */
.count-item__num { color: var(--brand-deep); }
.count-strip { background: var(--brand-50); border-top: 1px solid var(--brand-100); border-bottom: 1px solid var(--brand-100); }

/* Reel cards: more brand variations */
.reel-card:nth-child(4n+1) { background: linear-gradient(165deg, #0c2941, var(--brand-deep)); }
.reel-card:nth-child(4n+2) { background: linear-gradient(165deg, var(--brand-deep), var(--brand)); }
.reel-card:nth-child(4n+3) { background: linear-gradient(165deg, #1c5274, var(--brand-bright)); }
.reel-card:nth-child(4n+4) { background: linear-gradient(165deg, #5b2e1f, var(--accent-deep)); }
.reel-card:hover::after { background: var(--brand-bright); }
.reel-card__company { background: rgba(255,255,255,.20); }

/* Faculty card rotation: brand-led */
.faculty-card:nth-child(1) .faculty-card__photo { background: linear-gradient(165deg, var(--brand-100), #fff); color: var(--brand-deep); }
.faculty-card:nth-child(2) .faculty-card__photo { background: linear-gradient(165deg, #11304d, var(--brand-deep)); color: var(--brand-bright); }
.faculty-card:nth-child(3) .faculty-card__photo { background: linear-gradient(165deg, var(--brand-bright), var(--brand-deep)); color: #fff; }
.faculty-card:nth-child(4) .faculty-card__photo { background: linear-gradient(165deg, var(--accent-light), #fff5ef); color: var(--accent-deep); }
.faculty-card:nth-child(5) .faculty-card__photo { background: linear-gradient(165deg, var(--brand-200), var(--brand-100)); color: var(--brand-deep); }
.faculty-card:nth-child(6) .faculty-card__photo { background: linear-gradient(165deg, var(--ink), var(--brand-deep)); color: var(--brand-bright); }
.faculty-card:nth-child(7) .faculty-card__photo { background: linear-gradient(165deg, var(--brand), var(--brand-bright)); color: #fff; }
.faculty-card:nth-child(8) .faculty-card__photo { background: linear-gradient(165deg, #11304d, #1c5274); color: var(--brand-bright); }

/* Project cards: brand-first */
.project-card__cover { background: var(--grad-brand); }
.project-card:nth-child(2n) .project-card__cover { background: linear-gradient(135deg, #11304d, var(--brand-deep)); }
.project-card:nth-child(3n) .project-card__cover { background: linear-gradient(135deg, var(--accent-deep), #f4a08a); }
.project-card__outcome strong { color: var(--brand-deep); }

/* Partner wall: occasional brand emphasis */
.partner-wall__cell--featured { color: var(--brand-deep); font-weight: 800; }
.partner-wall__cell--brand    { color: var(--brand-deep); font-weight: 800; }

/* Awards: brand-led */
.award-row__year      { color: var(--brand-deep); }
.award-row__category  { background: var(--brand-100); color: var(--brand-deep); }

/* Masterclass card top backgrounds: 50/50 brand vs coral */
.master-card:nth-child(1) .master-card__top { background: linear-gradient(135deg, var(--brand-deep), var(--brand-bright)); }
.master-card:nth-child(2) .master-card__top { background: linear-gradient(135deg, var(--ink), var(--brand-deep)); }
.master-card:nth-child(3) .master-card__top { background: linear-gradient(135deg, var(--accent-deep), #f4a08a); }
.master-card__enrolled { color: var(--brand-deep); }
.master-card__enrolled::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(99,152,158,.22); }

/* "Apply now" button stays coral (the one urgent action) */

/* Big sections accent — eyebrow lines */
.eyebrow::before { background: var(--brand); }
.eyebrow--coral::before { background: var(--accent); }

/* h2 accent words — brand-led */
.h-accent { color: var(--brand-deep); }
.h-brand  { color: var(--brand-deep); }

/* Hero photo bg image support */
.hero-photo[data-bg] {
  background-image: var(--bg-img), linear-gradient(135deg, rgba(11,31,51,.78), rgba(19,58,92,.85));
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply, normal;
}
.hero-photo[data-bg]::before { opacity: .55; }

/* Image-fill helpers for cards (when real images exist) */
.has-img .reel-card::before { display: none; }
.has-img .reel-card { background-size: cover !important; background-position: center !important; }
.has-img .faculty-card__photo { background-size: cover !important; background-position: center !important; color: transparent !important; }
.has-img .project-card__cover { background-size: cover !important; background-position: center !important; }
.has-img .life__cell {
  background-size: cover !important;
  background-position: center !important;
  color: #fff !important;
}
.has-img .life__cell--d span,
.has-img .life__cell--h span { color: #fff; }

/* When images are present, hide placeholder text overlays on covers */
.has-img .project-card__cover > span:not(.project-card__brand) { display: none; }
.has-img .project-card__cover { color: transparent; font-size: 0; }
.has-img .project-card__cover .project-card__brand { font-size: .68rem; color: #fff; }
.has-img .reel-card__caption { z-index: 3; }
/* Soften gradient over reel-card photo so face still reads */
.has-img .reel-card { background-blend-mode: normal; }
.has-img .life__cell::before { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.65)); }
/* Faculty initials hidden — text is already transparent inline; ensure children fit */
.has-img .faculty-card__photo { font-size: 0; }

/* ============================================================
   LIVE HIRING CHART (hero right-side widget)
   ============================================================ */
.hero-photo .container { width: 100%; max-width: var(--maxw); }
.hero-grid {
  display: grid; gap: 56px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 80px; } }
.hero-photo__lede { font-size: 1.02rem; }

/* Tighter quick stats */
.hero-photo__quick { margin-top: 36px; padding-top: 24px; gap: 28px; }
.hero-photo__quick .item__num { font-size: 1.55rem; }
.hero-photo__quick .item__label { font-size: .78rem; }

/* The live chart panel */
.live-chart {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 30px 60px rgba(0,0,0,.30);
  color: #fff;
  overflow: hidden;
}
.live-chart::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-bright), var(--accent), var(--brand-bright));
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
}
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } }

.live-chart__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.live-chart__title {
  font-size: .82rem; font-weight: 700; letter-spacing: -.01em;
  color: #fff;
}
.live-chart__title small { display:block; font-weight: 400; opacity: .65; font-size: .72rem; margin-top: 2px; }
.live-chart__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Source Code Pro', monospace;
  font-size: .68rem; font-weight: 700;
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.live-chart__live::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(244,128,102,.65);
  animation: pulse-live 1.4s ease-out infinite;
}
@keyframes pulse-live {
  0%   { box-shadow: 0 0 0 0   rgba(244,128,102,.65); }
  70%  { box-shadow: 0 0 0 10px rgba(244,128,102,0); }
  100% { box-shadow: 0 0 0 0   rgba(244,128,102,0); }
}

/* Role pill row inside chart */
.live-chart__roles {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 4px;
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  font-size: .72rem;
}
.live-chart__roles button {
  appearance: none; border: 0;
  background: transparent; color: rgba(255,255,255,.62);
  padding: 6px 11px;
  border-radius: 999px;
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.live-chart__roles button:hover { color: #fff; }
.live-chart__roles button.is-active {
  background: var(--brand-bright);
  color: #fff;
  box-shadow: 0 4px 12px rgba(78,168,176,.40);
}

/* Chart body */
.live-chart__body { animation: fade-up .5s cubic-bezier(.2,.7,.2,1); }
.live-chart__body.is-changing { animation: fade-out .25s ease-out forwards; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
.live-chart__role-name {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em;
  color: #fff; margin: 0 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.live-chart__role-name .pct {
  color: var(--brand-bright);
  font-family: 'Source Code Pro', monospace;
  font-size: .92rem;
  font-weight: 700;
}
.live-chart__role-name .pct--up::before { content: "▲ "; color: var(--brand-bright); }

/* Metric row with horizontal bar */
.live-metric { margin-bottom: 14px; }
.live-metric__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; margin-bottom: 6px;
  color: rgba(255,255,255,.78);
}
.live-metric__value {
  font-family: 'Source Code Pro', monospace;
  font-weight: 700; color: #fff;
  font-size: .85rem;
}
.live-metric__bar {
  height: 8px; background: rgba(255,255,255,.08);
  border-radius: 999px; overflow: hidden;
  position: relative;
}
.live-metric__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--brand-bright), var(--brand));
  border-radius: 999px;
  width: 0;
  transition: width 1s cubic-bezier(.2,.7,.2,1);
}
.live-metric__fill--coral {
  background: linear-gradient(90deg, var(--accent), #ff9a7a);
}

/* Hiring brand tags */
.live-brands {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 14px; margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.live-brands__label {
  font-family: 'Source Code Pro', monospace;
  font-size: .68rem; color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: .1em;
  width: 100%; margin-bottom: 4px;
}
.live-brand {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  font-size: .76rem;
  font-weight: 600;
  color: #fff;
  font-family: 'Inter', sans-serif;
  letter-spacing: -.01em;
  animation: slide-in .35s cubic-bezier(.2,.7,.2,1) backwards;
}
.live-brand:nth-child(2) { animation-delay: 60ms; }
.live-brand:nth-child(3) { animation-delay: 120ms; }
.live-brand:nth-child(4) { animation-delay: 180ms; }
.live-brand:nth-child(5) { animation-delay: 240ms; }
@keyframes slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tiny sparkline strip at bottom of chart */
.live-spark {
  display: flex; align-items: flex-end; gap: 3px;
  height: 36px; margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.live-spark__bar {
  flex: 1; min-width: 4px;
  background: linear-gradient(180deg, var(--brand-bright), rgba(78,168,176,.3));
  border-radius: 2px;
  transition: height .35s cubic-bezier(.2,.7,.2,1);
}
.live-spark__bar--coral { background: linear-gradient(180deg, var(--accent), rgba(244,128,102,.3)); }

/* Hero background photo — make it more visible */
.hero-photo[data-bg] {
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
}
.hero-photo[data-bg]::before {
  background:
    radial-gradient(ellipse at 30% 80%, rgba(99,152,158,.55), transparent 50%),
    radial-gradient(ellipse at 90% 20%, rgba(244,128,102,.25), transparent 45%),
    linear-gradient(120deg, rgba(11,31,51,.86) 0%, rgba(19,58,92,.72) 60%, rgba(30,86,99,.78) 100%);
  opacity: 1;
}

/* When programme images are present, hide the giant abbreviation text */
.has-img .iide-prog__media-title { display: none; }
.has-img .iide-prog__media::after { display: none; }
/* Keep category chip readable on photos */
.has-img .iide-prog__category {
  background: rgba(0,0,0,.45);
  color: #fff;
  backdrop-filter: blur(8px);
}
/* Slight overlay on hover */
.has-img .iide-prog:hover .iide-prog__media { filter: brightness(1.05); }

/* ============================================================
   CHART AMPLIFIED + MOUSE INTERACTIVITY LAYER
   ============================================================ */

/* Chart: ambient glow halo */
.live-chart {
  isolation: isolate;
  --cx: 50%; --cy: 50%;
}
.live-chart::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background:
    radial-gradient(circle at var(--cx) var(--cy), rgba(78,168,176,.22), transparent 45%),
    conic-gradient(from 0deg,
      rgba(78,168,176,.0) 0%,
      rgba(78,168,176,.45) 25%,
      rgba(244,128,102,.35) 50%,
      rgba(78,168,176,.45) 75%,
      rgba(78,168,176,.0) 100%);
  filter: blur(16px);
  z-index: -1;
  opacity: .85;
  animation: chart-rotate 11s linear infinite;
}
@keyframes chart-rotate { to { transform: rotate(360deg); } }
.live-chart:hover::after { animation-duration: 6s; }

/* Outer pulsing ring */
.live-chart-wrap { position: relative; }
.live-chart-wrap::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 22px;
  background: radial-gradient(circle, rgba(78,168,176,.25), transparent 60%);
  filter: blur(20px);
  z-index: 0;
  animation: chart-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chart-pulse {
  0%, 100% { opacity: .55; transform: scale(.98); }
  50%      { opacity: .85; transform: scale(1.02); }
}

/* Tags float up animation */
.live-brand { transition: transform .25s ease; }
.live-brand:hover { transform: translateY(-2px); background: var(--brand-bright); color: var(--ink); cursor: default; }

/* Title bigger / bolder */
.live-chart__title { font-size: .92rem; }

/* Role pills — single line, fits 5 nicely */
.live-chart__roles {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.live-chart__roles::-webkit-scrollbar { display: none; }
.live-chart__roles button { flex-shrink: 0; padding: 7px 12px; font-size: .76rem; }

/* Headline number ticks */
.live-chart__role-name .pct {
  font-size: 1rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(78,168,176,.15);
}

/* Cursor following gradient on hero photo */
.hero-photo { --hx: 50%; --hy: 50%; }
.hero-photo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 600px; height: 600px;
  left: var(--hx); top: var(--hy);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,128,102,.18), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  mix-blend-mode: screen;
  z-index: 0;
}
.hero-photo:hover::after { opacity: 1; }

/* Magnetic buttons: scale on hover, slight offset on mouse-move (via JS) */
.magnet {
  transition: transform .15s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* Cursor spotlight on dark sections (.cursor-spot) */
.cursor-spot { position: relative; overflow: hidden; isolation: isolate; }
.cursor-spot::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78,168,176,.25), transparent 60%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  transition: opacity .25s ease;
}
.cursor-spot > * { position: relative; z-index: 1; }

/* Reel cards 3D tilt */
.reel-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; will-change: transform; }

/* Cards lift hover state intensified */
.iide-prog,
.faculty-card,
.master-card,
.project-card,
.life__cell {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}

/* Section eyebrow line growing on view */
@keyframes line-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.in .eyebrow::before { animation: line-grow .6s cubic-bezier(.2,.7,.2,1) .15s backwards; }

/* Counter strip: animated number background */
.count-strip { position: relative; overflow: hidden; }
.count-strip::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(99,152,158,.12), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(244,128,102,.08), transparent 50%);
  pointer-events: none;
}
.count-strip > * { position: relative; }

/* Tilt cards now drop a subtle highlight */
.tilt { will-change: transform; }
.tilt:hover { box-shadow: 0 24px 48px rgba(50,50,93,.16), 0 8px 16px rgba(99,152,158,.10); }

/* Sparkline bars pulse on view */
.live-spark__bar { transition: height .6s cubic-bezier(.2,.7,.2,1), background .2s ease; }
.live-spark__bar:hover { background: linear-gradient(180deg, var(--accent), rgba(244,128,102,.4)) !important; }

/* ============================================================
   RICH SUBHERO + SECTION VARIETY FOR INTERNAL PAGES
   ============================================================ */

/* The new dark photo subhero — used by all sub-pages */
.subhero--photo {
  position: relative;
  background:
    linear-gradient(135deg, rgba(11,31,51,.88) 0%, rgba(19,58,92,.78) 60%, rgba(30,86,99,.72) 100%),
    var(--sub-bg, linear-gradient(135deg, #0b1f33, #1e5663));
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 150px 0 80px;
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) { .subhero--photo { padding: 180px 0 100px; } }

.subhero--photo::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 18% 80%, rgba(99,152,158,.45), transparent 50%),
    radial-gradient(ellipse at 86% 20%, rgba(244,128,102,.20), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.subhero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800'><defs><pattern id='d' x='0' y='0' width='14' height='14' patternUnits='userSpaceOnUse'><circle cx='2' cy='2' r='1.2' fill='rgba(255,255,255,0.08)'/></pattern></defs><rect width='600' height='800' fill='url(%23d)'/></svg>");
  z-index: 0;
  pointer-events: none;
  opacity: .35;
}

.subhero--photo .container { position: relative; z-index: 1; }
.subhero--photo .subhero__crumbs { color: rgba(255,255,255,.65); }
.subhero--photo .subhero__crumbs a { color: rgba(255,255,255,.85); }
.subhero--photo .subhero__crumbs a:hover { color: var(--brand-bright); }
.subhero--photo .eyebrow { color: var(--brand-bright); }
.subhero--photo .eyebrow::before { background: var(--accent); }
.subhero--photo .eyebrow--coral { color: var(--accent); }
.subhero--photo .eyebrow--coral::before { background: var(--brand-bright); }
.subhero--photo .subhero__title { color: #fff; font-size: clamp(2rem, 3.8vw, 3.4rem); letter-spacing: -.035em; font-weight: 700; line-height: 1.1; max-width: 880px; }
.subhero--photo .subhero__title em { font-style: normal; color: var(--brand-bright); position: relative; }
.subhero--photo .subhero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px;
  background: var(--brand-bright);
  opacity: .45; border-radius: 4px;
}
.subhero--photo .subhero__lede { color: #cdd9e6; font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 720px; }
.subhero--photo p.muted { color: rgba(255,255,255,.55) !important; }

/* Cursor spotlight on photo subheros */
.subhero--photo { --mx: 50%; --my: 50%; }
.subhero--photo::after {
  background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800'><defs><pattern id='d' x='0' y='0' width='14' height='14' patternUnits='userSpaceOnUse'><circle cx='2' cy='2' r='1.2' fill='rgba(255,255,255,0.08)'/></pattern></defs><rect width='600' height='800' fill='url(%23d)'/></svg>"),
    radial-gradient(circle 400px at var(--mx) var(--my), rgba(244,128,102,.20), transparent 70%);
}

/* When subhero is dark, treat it like a hero for nav color logic */
body.subhero-dark .nav__brand,
body.subhero-dark .nav__links a,
body.subhero-dark .nav__signin {
  color: #fff;
}
body.subhero-dark .nav__brand:hover,
body.subhero-dark .nav__links a:hover { color: var(--brand-bright); }
body.subhero-dark .nav__toggle {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* When scrolled, swap back to dark text on white nav (already handled by .is-scrolled) */

/* ============================================================
   SECTION ALTERNATION — keep internal pages varied, not white-on-white
   ============================================================ */

/* Apply alternating wash pattern to interior content sections */
.section + .section { border-top: 0; }
.section--brand-soft {
  background: linear-gradient(180deg, var(--brand-50) 0%, #fff 100%);
  border-top: 1px solid var(--brand-100);
  border-bottom: 1px solid var(--brand-100);
}
.section--coral-soft {
  background: linear-gradient(180deg, #fff5ef 0%, #fff 100%);
  border-top: 1px solid var(--accent-light);
  border-bottom: 1px solid var(--accent-light);
}

/* Subtle decorative gradient orbs in sections */
.section--surface,
.section--brand-soft,
.section--cream {
  position: relative;
  overflow: hidden;
}
.section--surface::before {
  content: "";
  position: absolute;
  right: -100px; top: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,152,158,.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section--surface > * { position: relative; }
.section--cream::before {
  content: "";
  position: absolute;
  left: -100px; bottom: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,128,102,.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section--cream > * { position: relative; }

/* Decorative dividers between sections — subtle brand-accent line */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-200), transparent);
  border: 0; margin: 0;
}

/* Card hover lifts everywhere */
.card:hover,
.iide-prog:hover,
.master-card:hover,
.project-card:hover,
.faculty-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Section eyebrow line — animate when revealed */
.eyebrow { transition: opacity .4s ease; }

/* Stat numbers — count-up emphasis */
.stat__num,
.count-item__num,
.big-stat__num {
  font-variant-numeric: tabular-nums;
}

/* Subhero "meta strip" — for adding metric chips to dark subheros */
.subhero__meta {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.subhero__meta .item {
  display: flex; flex-direction: column; gap: 4px;
}
.subhero__meta .item__num {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand-bright);
  font-family: 'Source Code Pro', monospace;
  line-height: 1;
}
.subhero__meta .item__label {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  line-height: 1.3;
}

/* Make sure all hr.divider remains visible on subhero sections */
hr.divider { background: var(--line); }

/* Add cursor pointer to .iide-prog__cta-area-ish */
.iide-prog { cursor: pointer; }

/* ============================================================
   IMAGE-LED BODY PATTERNS — for retrofitting every page
   ============================================================ */

/* Split: large image + content side-by-side */
.feature-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .feature-split { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .feature-split--reverse { grid-template-columns: 1fr 1.05fr; }
  .feature-split--reverse > :first-child { order: 2; }
}
.feature-split__img {
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-deep);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.feature-split__img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(99,152,158,.05), rgba(244,128,102,.05));
  pointer-events: none;
}
.feature-split__body { display: flex; flex-direction: column; gap: 14px; }
.feature-split__body h2 { margin: 0; }
.feature-split__body p { margin: 0; }

/* Image-led content card — used in 3-up grids on insights/publications/awards/etc */
.img-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.img-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand-200); }
.img-card__top {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  position: relative;
}
.img-card__top::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10,37,64,.10), rgba(10,37,64,.35));
}
.img-card__chip {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.92);
  color: var(--brand-deep);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.img-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.img-card__title { color: var(--ink); font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; margin: 0; line-height: 1.3; }
.img-card__meta { color: var(--muted); font-size: .82rem; font-family: 'Source Code Pro', monospace; margin: 0; }
.img-card__body p { font-size: .92rem; margin: 0; }

/* Stats band — dark, with animated bars next to copy */
.stats-band {
  background:
    radial-gradient(circle at 15% 15%, rgba(78,168,176,.18), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(244,128,102,.10), transparent 45%),
    linear-gradient(180deg, #0b2944 0%, var(--ink) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 48px;
  position: relative; overflow: hidden;
}
@media (max-width: 720px) { .stats-band { padding: 28px; } }
.stats-band h2 { color: #fff; }
.stats-band .eyebrow { color: var(--brand-bright); }
.stat-bars { display: flex; flex-direction: column; gap: 18px; }
.stat-bar__head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .92rem; }
.stat-bar__label { color: #cdd9e6; }
.stat-bar__value { color: var(--brand-bright); font-family: 'Source Code Pro', monospace; font-weight: 700; }
.stats-band .bar { background: rgba(255,255,255,.08); height: 10px; }
.stats-band .bar__fill { background: linear-gradient(90deg, var(--brand-bright), var(--brand)); }
.stats-band .bar--coral .bar__fill { background: linear-gradient(90deg, var(--accent), #ff9a7a); }

/* Fix img-card top height when aspect-ratio collapses inside flex */
.img-card__top {
  min-height: 200px;
  flex-shrink: 0;
}
.img-card { min-height: 380px; }

/* =============================================================
   MEGAMENU — appended (do not edit between markers)
   ============================================================= */

/* The links container is already display:flex on desktop. Items become
   relatively-positioned wrappers so the dropdown panel can anchor below. */
.nav__links .nav__item { position: relative; }

.nav__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit;
  font-weight: 500;
  padding: 4px 0;
  transition: color .15s ease;
}
.nav__caret {
  transition: transform .2s ease, opacity .2s ease;
  opacity: .75;
}
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.megamenu {
  position: absolute;
  top: 100%; left: -16px;
  min-width: 320px;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-deep);
  padding: 10px;
  margin-top: 14px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  z-index: 60;
}
/* Wide variant for menus with many items (About has 6 sub-pages) */
.megamenu--wide { min-width: 360px; max-width: 420px; }

.nav__item--has-menu:hover .megamenu,
.nav__item--has-menu:focus-within .megamenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}

/* Last item flush-right so it doesn't overflow the viewport edge */
.nav__links .nav__item:last-child .megamenu { left: auto; right: -16px; }

/* Items — override .nav__links a and .has-annc .nav__links a inheritance */
.megamenu__item {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink) !important;
  transition: background .15s ease, color .15s ease;
}
.megamenu__item:hover {
  background: var(--brand-50);
  color: var(--brand-deep) !important;
}
.megamenu__title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: inherit;
}
.megamenu__desc {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.megamenu__item:hover .megamenu__desc { color: var(--brand-700); }

/* "See all" footer link */
.megamenu__seeall {
  display: block;
  padding: 12px 14px 10px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-deep) !important;
  border-top: 1px solid var(--line);
  margin-top: 6px;
  border-radius: 0 0 8px 8px;
  transition: background .15s ease, color .15s ease;
}
.megamenu__seeall:hover {
  background: #fff5ef;
  color: var(--accent) !important;
}

/* Make sure the dropdown's white background isn't tinted by .has-annc rules */
.has-annc .megamenu,
.is-scrolled .megamenu { background: #fff; }

/* ───── Mobile menu accordion (uses <details>/<summary>) ────────── */
.mobile-menu__group {
  font-size: 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 12px;
}
.mobile-menu__group summary {
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-weight: 500;
}
.mobile-menu__group summary::-webkit-details-marker { display: none; }
.mobile-menu__group summary::after {
  content: "+";
  font-size: 1.4rem;
  opacity: .6;
  transition: transform .2s ease;
}
.mobile-menu__group[open] summary::after { content: "−"; opacity: 1; }
.mobile-menu__group a {
  display: block;
  padding: 8px 0 8px 20px;
  font-size: 1rem;
  color: rgba(255,255,255,.85);
  font-weight: 400;
}
.mobile-menu__group a:hover { color: #fff; }

.mobile-menu__cta {
  margin-top: 18px;
  padding: 14px 20px;
  background: var(--accent);
  color: #fff !important;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.05rem;
  display: inline-block;
  text-align: center;
}
.mobile-menu__cta:hover { background: var(--accent-deep); }

.mobile-menu__link {
  font-size: 1.4rem;
  color: #fff !important;
  font-weight: 500;
}

/* ============== END MEGAMENU ============== */