/* ==========================================================================
   Primo Academy — styles.css
   Source of truth: Primo Landing Design (Figma) + Primo design tokens
   Structure:
     1. Tokens (from tokens.json — do not edit values here; re-sync instead)
     2. Figma-measured values not yet in the token file (flagged)
     3. Base / reset
     4. Layout helpers
     5. Components (buttons, cards, eyebrow, gradient text)
     6. Header
     7. Footer
     8. Home page sections
     9. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — mirrors project/tokens.json (Primo design system)
   -------------------------------------------------------------------------- */
:root {
  /* Brand primitives (don't use directly in components) */
  --blue-primary: #051797;
  --blue-primary-light: #0A46BA;
  --blue-primary-dark: #010E68;
  --blue-alt-dark-1: #0D1D3F;
  --blue-alt-dark-2: #050E20;
  --blue-alt-light: #7979EE;
  --dark-primary: #1D1D1F;
  --dark-medium: #3F3F3F;
  --dark-light: #4A4A4E;
  --light-primary: #FFFFFF;
  --light-blue: #F0F8FF;
  --light-blue-grey-2: #F8F8F8;
  --light-grey: #E9EFF5;

  /* Semantic colour tokens (use these) */
  --text-primary: var(--dark-primary);
  --text-secondary: var(--dark-medium);
  --text-secondary-light: var(--dark-light);
  --surface-white: var(--light-primary);
  --surface-blue-grey: var(--light-blue);
  --surface-grey: var(--light-blue-grey-2);
  --stroke: var(--light-grey);
  --brand-primary: var(--blue-primary);
  --brand-mid: var(--blue-primary-light);
  --brand-primary-dark: var(--blue-primary-dark);
  --brand-alt-dark: var(--blue-alt-dark-1);
  --brand-dark: var(--blue-alt-dark-2);
  --brand-light: var(--blue-alt-light);

  /* Type families */
  --font-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: Lora, Georgia, "Times New Roman", serif;

  /* Type sizes */
  --font-hero: 52px;
  --font-section-title: 36px;
  --font-header-text: 26px;
  --font-medium-header: 18px;
  --font-body: 16px;
  --font-caption: 14px;
  --font-small: 12px;

  /* Spacing */
  --space-small: 16px;
  --space-large: 24px;

  /* Radius */
  --radius-small: 18px;
  --radius-medium: 24px;
  --radius-large: 32px;
  --radius-full: 999px;

  /* Padding */
  --padding-large-card: 34px;
  --padding-medium-card: 24px;
  --padding-small: 12px;
  --padding-badge-x: 16px;
  --padding-badge-y: 8px;
}

/* --------------------------------------------------------------------------
   2. FIGMA-MEASURED VALUES NOT IN tokens.json
   Measured from the Home frame. Each is a candidate to add to the Figma
   variables so the token file can carry it; see the "couldn't match" list.
   -------------------------------------------------------------------------- */
:root {
  /* Layout */
  --container-max: 1364px;        /* 1473px frame − 2 × 55px margins */
  --gutter: 16px;                 /* phone side gutter */
  --gutter-desktop: 55px;
  --section-gap: 96px;

  /* Display sizes used on the Home frame (larger than --font-hero 52px) */
  --font-display-xl: 60px;        /* hero headline */
  --font-display-lg: 42px;        /* section headlines ("Build the capability…") */
  --font-display-md: 40px;        /* alumni headline */
  --font-card-title-lg: 30px;     /* approach cards (Lora) */
  --font-card-title: 24px;        /* programme cards (Lora) */
  --font-lead: 20px;              /* "Every enterprise transformation…" */
  --font-intro: 18px;             /* section intros / card body */

  /* Line heights, weights (not synced in tokens) */
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Controls — Figma buttons are 60px tall with ~8px corners, not pills */
  --control-height: 60px;
  --radius-control: 8px;
  --radius-card-inner: 18px;

  /* Overlays & glass */
  --overlay-hero: rgba(5, 14, 32, 0.58);
  --overlay-card: rgba(5, 14, 32, 0.45);
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.45);
  --text-on-dark-soft: #C9C9F6;   /* second line of the approach headline */
  --footer-muted: rgba(255, 255, 255, 0.62);
  --footer-line: rgba(255, 255, 255, 0.14);

  /* Accents only seen on the Home frame (eyebrow dots) */
  --accent-amber: #F2B134;
  --accent-lime: #B3E641;

  /* Gradient text (brand-mid → brand-light) */
  --gradient-text: linear-gradient(90deg, var(--brand-mid) 0%, var(--brand-light) 100%);
  --gradient-text-full: linear-gradient(120deg, var(--text-primary) 0%, var(--brand-alt-dark) 24%, var(--brand-mid) 58%, var(--brand-light) 100%);
  --gradient-text-full-on-dark: linear-gradient(120deg, var(--light-primary) 0%, var(--text-on-dark-soft) 45%, var(--brand-light) 100%);
  --gradient-text-on-dark: linear-gradient(90deg, var(--text-on-dark-soft) 0%, var(--brand-light) 100%);
  --gradient-cta: linear-gradient(135deg, var(--blue-primary-dark) 0%, var(--blue-primary) 55%, var(--blue-primary-light) 100%);
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 3px; }

[hidden] { display: none !important; }

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

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  padding: var(--padding-badge-y) var(--padding-badge-x);
  background: var(--brand-primary); color: var(--light-primary);
  border-radius: var(--radius-control); z-index: 100;
}
.skip-link:focus { top: var(--space-small); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter-desktop));
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

.section { padding-block: var(--section-gap); }

.section__header { max-width: 1340px; margin-bottom: var(--space-large); }
.section__header--center { margin-inline: auto; text-align: center; }

.section__title {
  font-size: var(--font-display-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  color: var(--brand-alt-dark);
  letter-spacing: -0.01em;
}
.section__intro {
  margin-top: var(--space-small);
  font-size: var(--font-intro);
  color: var(--text-secondary);
}
.section__kicker {
  margin-top: 6px;
  font-size: var(--font-body);
  color: var(--text-secondary-light);
}

/* --------------------------------------------------------------------------
   5. COMPONENTS
   -------------------------------------------------------------------------- */

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-small);
  min-height: var(--control-height);
  padding: var(--padding-small) 28px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}
.btn__icon { width: 16px; height: 16px; flex: none; }

.btn--primary {
  background: var(--brand-primary);
  color: var(--light-primary);
  border-color: var(--brand-primary);
}

/* Secondary (outline) button — two colour variants, same states (see section 18):
   .btn--glass    light: #F0F8FF outline, white text and icon, for photos and dark sections
   .btn--outline  dark:  alt dark blue outline, text and icon, for white and light surfaces */

.btn--block { width: 100%; }

/* Eyebrow ------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 24px;
  font-size: var(--font-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow__dot { width: 14px; height: 14px; flex: none; color: var(--accent-amber); }
.eyebrow--serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-lead);
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow--serif .eyebrow__dot { color: var(--accent-lime); }
.eyebrow__dot--amber { color: var(--accent-amber) !important; }
.eyebrow--caps { text-transform: uppercase; font-style: normal; letter-spacing: 0.04em; }
.cta__title { max-width: 980px; margin-inline: auto; }

/* Gradient / accent text ----------------------------------------------------- */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient--on-dark { background-image: var(--gradient-text-on-dark); }
.text-brand { color: var(--brand-primary); }
.text-serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-regular); }
.text-serif { font-family: var(--font-serif); font-weight: var(--weight-regular); }

/* Placeholder slot — anything the content docs don't supply ------------------ */
.placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--padding-badge-y) var(--padding-badge-x);
  border: 1px dashed var(--brand-light);
  border-radius: var(--radius-control);
  color: var(--brand-mid);
  background: var(--surface-blue-grey);
  font-size: var(--font-caption);
  font-weight: var(--weight-medium);
}
.placeholder--block { display: flex; width: 100%; min-height: 72px; text-align: center; }

/* --------------------------------------------------------------------------
   6. HEADER — one component, two variants
      .site-header           glass (default): over photo heroes
      .site-header--white    white: individual program pages and form pages
   Spec: 1184px max width, 94px tall (62px on mobile), 0 24px padding,
   18px radius, rgba(255,255,255,.12) glass; logo 32px tall (24px mobile).
   -------------------------------------------------------------------------- */
:root {
  --header-width: 1184px;
  --header-height: 94px;
  --header-height-mobile: 62px;
  --header-top: 24px;
  --header-top-mobile: 12px;
  --header-logo-height: 32px;
  --header-logo-height-mobile: 24px;
  --header-glass-bg: rgba(255, 255, 255, 0.12);
  --header-radius: var(--radius-small);   /* 18px */
  --nav-backdrop: rgba(5, 14, 32, 0.55);
}

.site-header {
  position: absolute; inset: var(--header-top) 0 auto 0;
  z-index: 40;
  padding-inline: var(--gutter-desktop);
}
.site-header__bar {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; max-width: var(--header-width); height: var(--header-height);
  margin-inline: auto;
  padding: 0 var(--space-large);
  border-radius: var(--header-radius);
  background: var(--header-glass-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--light-primary);
}
.site-header__logo { display: inline-flex; align-items: center; flex: none; }
.site-header__logo img { height: var(--header-logo-height); width: auto; }
.site-header__logo .logo--dark { display: none; }

.site-nav { display: flex; align-items: center; gap: 40px; }
.site-nav__list { display: flex; align-items: center; gap: 36px; }
.site-nav__link {
  display: inline-block; padding: 8px 0;
  font-size: var(--font-body); font-weight: var(--weight-regular);
  opacity: 0.9;
}
.site-nav__link:hover { opacity: 1; }
/* Selected item: blue with a soft glow. Periwinkle on glass (deep blue is unreadable on dark photos), brand blue on white. */
.site-nav__link[aria-current="page"] {
  opacity: 1; font-weight: var(--weight-medium);
  color: var(--nav-active, var(--brand-light));
  text-shadow: 0 0 14px var(--nav-active-glow, rgba(121, 121, 238, 0.85));
}
.site-header--white { --nav-active: var(--brand-primary); --nav-active-glow: rgba(10, 70, 186, 0.45); }
.site-header__cta { min-width: 210px; min-height: 52px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  border-radius: var(--radius-control);
  color: inherit;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 35;
  background: var(--nav-backdrop);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body.nav-open { overflow: hidden; }

/* White variant */
.site-header--white .site-header__bar {
  background: var(--surface-white); color: var(--brand-alt-dark);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 8px 28px rgba(5, 14, 32, 0.12);
}
.site-header--white .logo--light { display: none; }
.site-header--white .logo--dark { display: block; }
.site-header--white .site-header__cta { --btn-line: var(--brand-alt-dark); --btn-ink: var(--brand-alt-dark); }   /* dark variant on the white bar */

/* Mobile: logo + hamburger. Opening the menu expands the bar itself (same glass or
   white background) to hold the links; the page behind is dimmed and tapping it closes. */
@media (max-width: 900px) {
  .site-header { inset: var(--header-top-mobile) 0 auto 0; }
  .site-header__bar {
    flex-wrap: wrap; height: auto; min-height: var(--header-height-mobile);
    padding: 9px var(--space-small);     /* 9 + 44px toggle + 9 = 62px row */
  }
  .site-header__logo img { height: var(--header-logo-height-mobile); }
  .nav-toggle { display: inline-flex; margin-right: -10px; }

  .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--space-small); padding: 8px 0 7px; }
  .site-header.is-open .site-nav { display: flex; }
  .site-header.is-open .site-header__bar { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .site-header--white .site-nav__list li + li { border-top-color: var(--stroke); }
  .site-nav__link { display: flex; align-items: center; min-height: 52px; padding: 0 4px; opacity: 1; font-size: var(--font-intro); }
  .site-header__cta { width: 100%; min-width: 0; }
}
@media (min-width: 901px) { .nav-backdrop { display: none !important; } }

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { padding: 0 0 var(--space-large); background: var(--surface-blue-grey); }
.site-footer__panel {
  position: relative; overflow: hidden;
  background: var(--brand-dark);
  color: var(--light-primary);
  border-radius: var(--radius-large);
  padding: 48px 68px 40px;
}
.site-footer__watermark {
  position: absolute; left: -24px; bottom: -40px; width: 420px; opacity: 0.04;
  pointer-events: none;
}
.site-footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.site-footer__brand img { width: 74px; }
.site-footer__brand-name {
  margin-top: 28px;
  font-size: var(--font-intro); font-weight: var(--weight-semibold);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.site-footer__tagline { margin-top: 24px; max-width: 300px; color: var(--footer-muted); }

.site-footer__heading {
  font-size: var(--font-intro); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.site-footer__links { display: grid; gap: 14px; color: var(--footer-muted); }
.site-footer__links a:hover { color: var(--light-primary); }
.site-footer__links address { max-width: 200px; }

.site-footer__bottom {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--footer-line);
  color: var(--footer-muted);
}
.site-footer__legal { display: flex; gap: 36px; }
.site-footer__legal a:hover { color: var(--light-primary); }
.site-footer__copyright { display: flex; align-items: center; gap: 16px; }
.site-footer__copyright img { width: 74px; }

/* --------------------------------------------------------------------------
   8. HOME PAGE
   -------------------------------------------------------------------------- */

/* 8.1 Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: 830px;
  padding: 170px 0 80px;
  color: var(--light-primary);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--overlay-hero); }

.hero__content { max-width: 1240px; }
.hero__title {
  margin-top: 28px; max-width: 1200px;
  font-size: var(--font-display-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}
.hero__text {
  margin-top: 40px; max-width: 1010px;
  font-size: var(--font-intro); line-height: 1.55;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-small); margin-top: 36px; }
.hero__actions .btn--primary { min-width: 252px; }
.hero__actions .btn--glass { min-width: 216px; }

/* 8.2 Starting points ------------------------------------------------------ */
.paths { padding-top: 92px; padding-bottom: 92px; }
.paths__grid {
  display: grid;
  grid-template-columns: 400fr 562fr 400fr;
  grid-template-rows: repeat(2, 276px);
  gap: 4px;
  margin-top: 40px;
}
.path-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  color: var(--light-primary);
  overflow: hidden; isolation: isolate;
}
.path-card:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.path-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.path-card:nth-child(3) { grid-column: 2; grid-row: 2; }
.path-card:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
.path-card__media { position: absolute; inset: 0; z-index: -1; }
.path-card__media img { width: 100%; height: 100%; object-fit: cover; }
.path-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 14, 32, 0.25) 0%, rgba(5, 14, 32, 0.72) 100%);
}
.path-card__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--font-header-text);
  line-height: 1.25;
  max-width: 340px;
}
.path-card .btn { margin-top: 18px; align-self: flex-start; min-width: 200px; }

/* 8.3 Story banner --------------------------------------------------------- */
.story {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 428px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 48px 32px;
  border-radius: var(--radius-medium);
  color: var(--light-primary);
}
.story__media { position: absolute; inset: 0; z-index: -1; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__media::after { content: ""; position: absolute; inset: 0; background: rgba(5, 14, 32, 0.35); }
.story__media .placeholder--block {
  position: absolute; inset: 0; height: 100%; border-radius: 0; align-items: flex-start; justify-content: flex-start;
  padding: var(--space-small); background: var(--brand-alt-dark); border-color: var(--brand-light); color: var(--brand-light); opacity: 0.9;
}
.story__title {
  margin-top: 28px; max-width: 920px;
  font-size: var(--font-hero); font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
}
.story .btn { margin-top: 36px; min-width: 206px; }

/* 8.4 Trusted by ----------------------------------------------------------- */
.story-section { padding-bottom: 34px; }
.trusted { padding-top: 0; text-align: center; }
.trusted__title {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--font-lead); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary-light);
}
.trusted__band { margin-top: 34px; background: var(--surface-white); }

/* Logo carousel — spec: 1280 × 104, padding 12px 100px, gap 32px, items centred */
.logo-marquee {
  --marquee-gap: 56px;
  --marquee-duration: 44s;
  display: flex; align-items: center;
  width: 100%; max-width: 1280px; height: 104px;
  margin-inline: auto;
  padding: 12px 100px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
}
.logo-marquee__track {
  display: flex; flex: none; width: max-content;
  margin-left: -100px;   /* start at the band's edge so 8 slots span the full 1280px */
  animation: marquee var(--marquee-duration) linear infinite;
}
.logo-marquee__group { display: flex; flex: none; align-items: center; }
/* 8 logos across the 1280px band: each logo sits centred in an equal slot, so the
   space between logos is at least --marquee-gap (56px). */
.logo-marquee__group li {
  --slot: calc(min(100vw, 1280px) / 8);
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--slot); height: 80px;
}
.logo-marquee__group img { max-width: calc(var(--slot) - var(--marquee-gap)); height: auto; }   /* width attribute sets the optical size */
@keyframes marquee { to { transform: translateX(-50%); } }

/* 8.5 Why Primo exists ----------------------------------------------------- */
.why {
  background: var(--surface-blue-grey);
  padding: 48px 0 56px;
  text-align: center;
}
.why__icon { width: 26px; height: 30px; margin: 0 auto 32px; color: var(--brand-light); }
.why__text {
  max-width: 1330px; margin-inline: auto;
  font-size: var(--font-lead); line-height: 1.4;
  color: var(--brand-alt-dark);
}

/* 8.6 Programmes ----------------------------------------------------------- */
.programmes { background: var(--surface-blue-grey); padding: 60px 0 96px; }
.programmes__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 90px;
  margin-top: 88px;
}
.programmes__grid--two { grid-template-columns: repeat(2, 395px); justify-content: center; margin-top: 72px; }
.programme-card {
  display: flex; flex-direction: column;
  background: var(--surface-white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-medium);
  overflow: hidden;
}
.programme-card__media { aspect-ratio: 395 / 240; }
.programme-card__media img { width: 100%; height: 100%; object-fit: cover; }
.programme-card__body { display: flex; flex-direction: column; flex: 1; padding: 36px 28px 28px; }
.programme-card__title {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--font-card-title); line-height: 1.3;
  color: var(--text-primary);
  min-height: 2.6em;
}
.programme-card__text {
  margin-top: 60px; margin-bottom: 24px; flex: 1;
  font-size: var(--font-intro); color: var(--text-secondary);
}
.programme-card .btn { justify-content: space-between; }
.programmes__more { max-width: 878px; margin: 72px auto 0; }
.programmes__more .btn { justify-content: center; }

/* 8.7 Approach --------------------------------------------------------------- */
.approach { background: var(--brand-primary-dark); color: var(--light-primary); padding: 96px 0 72px; }
.approach__title {
  max-width: 1200px; margin-inline: auto; text-align: center;
  font-size: var(--font-display-lg); font-weight: var(--weight-semibold); line-height: var(--lh-heading);
}
.approach__title .line-2 { color: var(--text-on-dark-soft); }
.approach__panel {
  max-width: 1240px; margin: 64px auto 0;
  padding: var(--space-large);
  background: var(--surface-white);
  border-radius: var(--radius-large);
}
.approach__grid { display: grid; grid-template-columns: 650fr 512fr; gap: 28px; }
.approach__grid--alt { grid-template-columns: 512fr 650fr; margin-top: 28px; }
.approach-card {
  min-height: 240px;
  padding: 32px 28px;
  background: var(--brand-alt-dark);
  border-radius: var(--radius-card-inner);
}
.approach-card__title {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--font-card-title-lg); line-height: 1.2;
}
.approach-card__text { margin-top: 20px; font-size: var(--font-intro); max-width: 600px; }
.approach__quote {
  margin-top: 76px; text-align: center;
  font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-regular);
  font-size: var(--font-card-title-lg);
}

/* 8.8 Backed by Bluechip ---------------------------------------------------- */
.backed {
  background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-blue-grey) 100%);
  padding: 96px 0;
}
.backed__grid { display: grid; grid-template-columns: 1fr 650px; gap: 96px; align-items: center; }
.backed__logo { width: 164px; }
.backed__title {
  margin-top: 36px;
  font-size: var(--font-display-lg); font-weight: var(--weight-semibold); line-height: 1.4;
  color: var(--brand-alt-dark);
}
.backed__title .text-serif { position: relative; display: inline-block; color: var(--brand-alt-dark); }
.backed__title .text-serif::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--brand-alt-dark); border-radius: var(--radius-full);
}
.backed__text { margin-top: 48px; max-width: 630px; font-size: var(--font-intro); color: var(--brand-alt-dark); }
.backed__media { border-radius: var(--radius-medium); overflow: hidden; aspect-ratio: 650 / 360; }
.backed__media img { width: 100%; height: 100%; object-fit: cover; }

/* 8.9 Alumni ------------------------------------------------------------------ */
.alumni { background: var(--brand-primary-dark); color: var(--light-primary); padding: 96px 0 108px; }
.alumni__title { text-align: center; font-size: var(--font-display-md); font-weight: var(--weight-semibold); }
.alumni__intro { max-width: 700px; margin: 24px auto 0; text-align: center; font-size: var(--font-intro); }
.alumni__controls { display: flex; justify-content: flex-end; gap: var(--space-small); margin-top: 48px; }
.alumni__arrow {
  width: 56px; height: 56px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--light-primary);
}
.alumni__arrow svg { width: 22px; height: 22px; }
.alumni__arrow--filled { background: var(--surface-white); color: var(--brand-primary-dark); }
.alumni__grid {
  display: grid; grid-template-columns: 383px 1fr; grid-template-rows: auto auto; gap: 30px;
  margin-top: 32px;
}
.testimonial {
  display: flex; flex-direction: column;
  padding: 36px;
  background: var(--surface-white); color: var(--text-primary);
  border-radius: var(--radius-medium);
}
.testimonial--tall { grid-row: span 2; }
.testimonial__mark { width: 48px; height: 40px; color: var(--dark-primary); }
.testimonial__quote { flex: 1; margin: 56px 0 0; font-size: var(--font-intro); color: var(--text-secondary); }
.testimonial--tall .testimonial__quote { margin-top: 160px; }
.testimonial__author {
  display: flex; align-items: center; gap: 18px; margin-top: 48px;
}
.testimonial__avatar, .testimonial__flag { width: 56px; height: 56px; border-radius: var(--radius-full); object-fit: cover; }
.testimonial__name { font-weight: var(--weight-semibold); font-size: var(--font-intro); }
.testimonial__role { color: var(--text-secondary-light); font-size: var(--font-body); }
.testimonial__flag { margin-left: auto; }

/* 8.10 Final CTA ------------------------------------------------------------- */
.cta { background: var(--surface-blue-grey); padding: 48px 0 24px; }
.cta__panel {
  position: relative; overflow: hidden;
  padding: 96px 32px;
  text-align: center; color: var(--light-primary);
  background: var(--gradient-cta);
  border-radius: var(--radius-large);
}
.cta__rings {
  position: absolute; right: -60px; bottom: -140px; width: 460px; height: 460px;
  color: var(--light-primary); opacity: 0.08; pointer-events: none;
}
.cta__title { position: relative; font-size: var(--font-display-lg); font-weight: var(--weight-semibold); line-height: var(--lh-heading); }
.cta__text { position: relative; max-width: 900px; margin: 36px auto 0; font-size: var(--font-intro); }
.cta__actions { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-small); margin-top: 44px; }
.cta__actions .btn--primary { min-width: 252px; }
.cta__actions .btn--glass { min-width: 194px; }

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --gutter-desktop: 32px; --font-display-xl: 56px; --font-display-lg: 38px; }
  .programmes__grid { gap: var(--space-large); }
  .programmes__grid--two { grid-template-columns: repeat(2, minmax(0, 395px)); gap: var(--space-large); }
  .backed__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .alumni__grid { grid-template-columns: 320px 1fr; }
  .site-footer__panel { padding: 40px; }
}

@media (max-width: 900px) {
  :root {
    --gutter-desktop: var(--gutter);
    --section-gap: 64px;
    --font-display-xl: 40px; --font-display-lg: 32px; --font-display-md: 32px;
    --font-hero: 36px; --font-card-title-lg: 26px; --font-lead: 18px; --font-intro: 16px;
  }


  /* hero */
  .hero { min-height: 0; padding: 140px 0 56px; }
  .hero__text { margin-top: 24px; }
  .hero__actions .btn { width: 100%; min-width: 0; }

  /* starting points */
  .paths { padding-block: 56px; }
  .paths__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 4px; }
  .path-card { min-height: 280px; padding: 20px; }
  .path-card:nth-child(n) { grid-column: auto; grid-row: auto; }
  .path-card .btn { width: 100%; }

  .story { min-height: 360px; padding: 64px 20px 40px; }
  .eyebrow { letter-spacing: 0.08em; }

  .logo-marquee__track { margin-left: 0; }
  .logo-marquee { --marquee-gap: 32px; --marquee-duration: 36s; height: 88px; padding: 8px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); }
  .logo-marquee__group li { --slot: calc(100vw / 3.2); height: 64px; }
  .logo-marquee__group img { zoom: 0.85; }

  .why { padding: 40px 0; }
  .programmes { padding: 40px 0 64px; }
  .programmes__grid, .programmes__grid--two { grid-template-columns: 1fr; margin-top: 40px; }
  .programme-card__text { margin-top: 24px; }
  .programme-card__title { min-height: 0; }
  .programmes__more { margin-top: 40px; }

  .approach { padding: 64px 0 48px; }
  .approach__panel { margin-top: 32px; padding: var(--space-small); }
  .approach__grid, .approach__grid--alt { grid-template-columns: 1fr; gap: var(--space-small); margin-top: var(--space-small); }
  .approach-card { min-height: 0; padding: 24px 20px; }
  .approach__quote { margin-top: 40px; font-size: 22px; }

  .backed { padding: 64px 0; }
  .backed__grid { grid-template-columns: 1fr; gap: 32px; }
  .backed__title { margin-top: 24px; }
  .backed__text { margin-top: 24px; }

  .alumni { padding: 64px 0; }
  .alumni__controls { margin-top: 24px; justify-content: center; }
  .alumni__grid { grid-template-columns: 1fr; gap: var(--space-small); }
  .testimonial { padding: 24px; }
  .testimonial--tall { grid-row: auto; }
  .testimonial--tall .testimonial__quote, .testimonial__quote { margin-top: 24px; }
  .testimonial__author { margin-top: 24px; }

  .cta__panel { padding: 56px 20px; }
  .cta__actions .btn { width: 100%; min-width: 0; }
  .cta__rings { width: 300px; height: 300px; right: -100px; bottom: -160px; }

  .site-footer__panel { padding: 32px 20px 24px; border-radius: var(--radius-medium); }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__legal { flex-wrap: wrap; gap: 16px 24px; }
}

/* --------------------------------------------------------------------------
   10. ABOUT PAGE
   -------------------------------------------------------------------------- */

/* 10.1 Hero (centred variant of .hero) */
.hero--center { text-align: center; min-height: 830px; }
.hero--center .hero__content { max-width: 1040px; margin-inline: auto; }
.hero--center .hero__title { max-width: none; }
.hero--center .hero__text { margin-inline: auto; margin-top: 32px; max-width: 1010px; }

/* 10.2 Problem banner + statement */
.problem { padding: 56px 0 0; }
.problem .story__title { max-width: 1080px; }
.problem__body { padding: 64px 0 56px; background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-blue-grey) 100%); }
.problem__text { font-size: var(--font-lead); line-height: 1.5; color: var(--brand-alt-dark); }
.problem__result {
  display: flex; align-items: flex-start; justify-content: flex-end; gap: 20px;
  margin-top: 56px; margin-left: auto; max-width: 1120px;
  text-align: right;
  font-size: var(--font-lead); font-style: italic; line-height: 1.5;
  color: var(--brand-mid);
}
.problem__result .eyebrow__dot { margin-top: 6px; color: var(--accent-lime); }

/* 10.3 The response — "So we built…" */
.response { padding: 112px 0 96px; background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-blue-grey) 100%); }
.response__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 48px; align-items: start; }
.response__title { font-size: var(--font-display-lg); font-weight: var(--weight-semibold); line-height: 1.4; color: var(--text-primary); max-width: 600px; }
.response__title .text-serif-italic { font-size: 1.1em; color: var(--brand-primary); }
.response__text { font-size: var(--font-intro); color: var(--text-secondary); padding-top: 12px; }
.response__media { border-radius: var(--radius-medium); overflow: hidden; aspect-ratio: 645 / 376; }
.response__media img { width: 100%; height: 100%; object-fit: cover; }
.response__cards { display: grid; gap: var(--space-large); }
.pair-card {
  display: flex; flex-direction: column; gap: 20px;
  padding: 28px 24px;
  background: var(--surface-white);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-small);
}
.pair-card--dark { background: var(--brand-alt-dark); color: var(--light-primary); border-color: var(--brand-alt-dark); }
.pair-card__label {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--font-body); text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--brand-primary);
}
.pair-card--dark .pair-card__label { color: var(--light-primary); }
.pair-card__label img, .pair-card__label svg { width: auto; height: 32px; }
.pair-card__text { font-family: var(--font-serif); font-size: var(--font-header-text); line-height: 1.3; }

/* 10.4 Faculty */
.faculty { background: var(--brand-alt-dark); color: var(--light-primary); padding: 64px 0 96px; text-align: center; }
.faculty__title { margin-top: 32px; font-size: var(--font-display-lg); font-weight: var(--weight-semibold); }
.faculty__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 90px; margin-top: 64px; text-align: left; }
.faculty__grid--two { grid-template-columns: repeat(2, 395px); justify-content: center; margin-top: 90px; }
.faculty-card {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 395 / 500;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  border-radius: var(--radius-medium);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, #E4E2F4 0%, var(--brand-primary) 100%);
}
.faculty-card__media { position: absolute; inset: 0; z-index: -1; }
.faculty-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.faculty-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 29, 63, 0) 45%, rgba(13, 29, 63, 0.9) 100%);
}
.faculty-card__name { font-family: var(--font-serif); font-weight: var(--weight-regular); font-size: var(--font-card-title); }
.faculty-card__dept { margin-top: 16px; font-size: var(--font-intro); }
.faculty__text { max-width: 1240px; margin: 72px auto 0; font-size: var(--font-intro); }

/* practitioners */
.practitioners { margin-top: 128px; }
.practitioners .why__icon { margin-bottom: 28px; }
.practitioners__title { font-size: var(--font-display-lg); font-weight: var(--weight-semibold); line-height: 1.4; }
.practitioners__title .line-2 { display: block; }
.practitioner-card {
  display: grid; grid-template-columns: 220px 1fr;
  max-width: 690px; min-height: 290px; margin: 72px auto 0;
  background: var(--surface-white); color: var(--text-primary);
  border-radius: var(--radius-medium); overflow: hidden; text-align: left;
}
.practitioner-card__body { display: flex; flex-direction: column; justify-content: space-between; padding: 28px 24px; }
.practitioner-card__name { font-family: var(--font-serif); font-weight: var(--weight-regular); font-size: var(--font-card-title); }
.practitioner-card__role { font-size: var(--font-body); color: var(--text-secondary); }
.practitioner-card__media { background: var(--surface-grey); }
.practitioner-card__media img { width: 100%; height: 100%; object-fit: cover; }
.practitioner-card__media .placeholder--block { height: 100%; border-radius: 0; }
.practitioners__text { max-width: 1240px; margin: 64px auto 0; font-size: var(--font-intro); }

/* 10.5 Built inside Bluechip + proof */
.inside { padding: 96px 0 80px; background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-blue-grey) 100%); }
.inside__logo { width: 164px; }
.inside__title { margin-top: 36px; font-size: var(--font-display-lg); font-weight: var(--weight-semibold); line-height: 1.3; color: var(--brand-alt-dark); }
.inside__text { margin-top: 28px; max-width: 1340px; font-size: var(--font-intro); color: var(--brand-alt-dark); }
.proof { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 28px; margin-top: 64px; }
.proof__step {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 330 / 356; display: flex; align-items: flex-end;
  padding: 24px 28px;
  border-radius: 28px;
  color: var(--light-primary);
  font-family: var(--font-serif); font-size: var(--font-lead); text-transform: uppercase; letter-spacing: 0.02em;
}
.proof__step img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.proof__step::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 29, 63, 0) 55%, rgba(13, 29, 63, 0.85) 100%); }
.proof__step--green { box-shadow: 0 0 28px rgba(40, 200, 60, 0.45); }
.proof__step--green::after { background: linear-gradient(180deg, rgba(5, 60, 20, 0) 55%, rgba(5, 60, 20, 0.85) 100%); }
.proof__arrow { width: 150px; height: auto; }

/* responsive */
@media (max-width: 1200px) {
  .faculty__grid { gap: var(--space-large); }
  .faculty__grid--two { grid-template-columns: repeat(2, minmax(0, 395px)); gap: var(--space-large); }
}
@media (max-width: 900px) {
  .hero--center { min-height: 0; text-align: left; }
  .problem__result { justify-content: flex-start; text-align: left; margin-top: 32px; }
  .response { padding: 64px 0; }
  .response__grid { grid-template-columns: 1fr; gap: var(--space-large); }
  .faculty { padding: 56px 0 64px; }
  .faculty__grid, .faculty__grid--two { grid-template-columns: 1fr; gap: var(--space-small); margin-top: 32px; }
  .faculty-card { aspect-ratio: 4 / 5; padding: 20px; }
  .faculty__text { margin-top: 40px; }
  .practitioners { margin-top: 64px; }
  .practitioner-card { grid-template-columns: 1fr; margin-top: 40px; }
  .practitioner-card__media { aspect-ratio: 4 / 3; }
  .practitioners__text { margin-top: 40px; }
  .inside { padding: 64px 0 48px; }
  .inside__title { margin-top: 24px; }
  .proof { grid-template-columns: 1fr; gap: var(--space-small); margin-top: 32px; }
  .proof__arrow { width: 72px; justify-self: center; transform: rotate(45deg); }
}

/* --------------------------------------------------------------------------
   11. PROGRAMS PAGE
   -------------------------------------------------------------------------- */

/* 11.1 Catalogue grid (12 cards, 3 per row) */
.programmes--catalogue { padding: 72px 0 112px; background: linear-gradient(180deg, var(--surface-blue-grey) 0%, var(--surface-white) 100%); }
.programmes--catalogue .programmes__grid { gap: 56px 90px; margin-top: 72px; }
.programme-card .btn { white-space: normal; text-align: left; }
.programme-card__badge {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--surface-blue-grey);
  color: var(--brand-alt-dark);
  font-size: var(--font-small); font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}
.programme-card__badge--open { background: var(--brand-primary); color: var(--light-primary); }
.programmes--catalogue .programme-card__text { margin-top: 24px; }
.programmes--catalogue .programme-card__title { min-height: 0; }

/* 11.2 Approach — serif statement variant */
.approach__title--serif {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--font-card-title-lg); line-height: 1.35;
}
.approach__title--serif .line-2 { display: block; }

/* 11.3 Programme detail dialog */
.programme-dialog {
  width: min(880px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  padding: 0; border: 0;
  border-radius: var(--radius-large);
  background: var(--surface-white); color: var(--text-primary);
  box-shadow: 0 24px 80px rgba(5, 14, 32, 0.35);
}
.programme-dialog::backdrop { background: rgba(5, 14, 32, 0.6); backdrop-filter: blur(4px); }
.programme-dialog__inner { position: relative; display: grid; gap: 32px; padding: 48px; }
.programme-dialog__close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-blue-grey); color: var(--brand-alt-dark);
}
.programme-dialog__close:hover { background: var(--stroke); }
.programme-dialog__close svg { width: 20px; height: 20px; }
.programme-dialog__header { display: flex; flex-direction: column; padding-right: 48px; }
.programme-dialog__header .programme-card__badge { margin-bottom: 18px; }
.programme-dialog__title {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--font-card-title-lg); line-height: 1.25; color: var(--brand-alt-dark);
  text-wrap: balance;
}
.programme-dialog__lead { margin-top: 14px; font-size: var(--font-intro); color: var(--text-secondary); }

.programme-dialog__format {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 0;
  padding: var(--padding-medium-card);
  border-radius: var(--radius-small);
  background: var(--surface-blue-grey);
}
.programme-dialog__format-wide { grid-column: 1 / -1; }
.programme-dialog__format dt {
  font-size: var(--font-small); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary-light);
}
.programme-dialog__format dd { margin: 6px 0 0; font-size: var(--font-body); color: var(--brand-alt-dark); }

.programme-dialog__section h3 {
  font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-regular);
  font-size: var(--font-medium-header); color: var(--brand-primary);
  margin-bottom: 12px;
}
.programme-dialog__section p { color: var(--text-secondary); }
.programme-dialog__section ul { display: grid; gap: 10px; }
.programme-dialog__section ul li {
  position: relative; padding-left: 22px; color: var(--text-secondary); font-size: var(--font-caption);
}
.programme-dialog__section ul li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
  background: var(--brand-light);
}
.programme-dialog__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.programme-dialog__curriculum { display: grid; gap: 10px; counter-reset: module; }
.programme-dialog__curriculum li {
  counter-increment: module;
  display: grid; grid-template-columns: 40px 1fr; align-items: baseline;
  padding: 12px 16px;
  border: 1px solid var(--stroke); border-radius: var(--radius-control);
  font-size: var(--font-caption); color: var(--text-primary);
}
.programme-dialog__curriculum li::before {
  content: counter(module, decimal-leading-zero);
  font-weight: var(--weight-semibold); color: var(--brand-mid);
  font-variant-numeric: tabular-nums;
}
.programme-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-small); }
body.has-dialog-open { overflow: hidden; }

@media (max-width: 1200px) {
  .programmes--catalogue .programmes__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-large); }
}
@media (max-width: 900px) {
  .programmes--catalogue { padding: 48px 0 64px; }
  .programmes--catalogue .programmes__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .approach__title--serif { font-size: 22px; }
  .programme-dialog { width: 100%; max-width: 100%; max-height: 100%; height: 100%; margin: 0; border-radius: 0; }
  .programme-dialog__inner { padding: 72px 20px 32px; gap: 24px; }
  .programme-dialog__header { padding-right: 0; }
  .programme-dialog__format, .programme-dialog__cols { grid-template-columns: 1fr; }
  .programme-dialog__actions .btn { width: 100%; }
}
.page-programs .hero__media::after { background: rgba(5, 14, 32, 0.42); }

/* --------------------------------------------------------------------------
   12. CORPORATE PAGE
   -------------------------------------------------------------------------- */
.hero__title--narrow { max-width: 920px; }
.page-corporate .hero__text { max-width: 1040px; }

/* 12.1 Technology vs skills */
.gap { padding: 112px 0 120px; background: var(--surface-white); }
.gap__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.gap__intro { display: flex; flex-direction: column; gap: 28px; }
.gap__intro .hero__actions { margin-top: 12px; }
.gap__title { font-size: var(--font-display-lg); font-weight: var(--weight-semibold); line-height: 1.5; color: var(--text-primary); }
.gap__title .text-serif-italic { font-size: 1.1em; }
.gap__text { font-size: var(--font-intro); color: var(--text-secondary); }
.gap__help-title { font-family: var(--font-serif); font-weight: var(--weight-regular); font-size: var(--font-card-title-lg); color: var(--brand-primary); }
.gap__help-text { margin-top: 12px; font-size: var(--font-intro); color: var(--text-secondary); }
.gap__help-label { margin-top: 28px; font-size: var(--font-intro); font-weight: var(--weight-medium); color: var(--brand-primary); }
.help-list { display: grid; gap: 14px; margin-top: 16px; }
.help-list__item {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 20px;
  border-radius: var(--radius-small);
  background: var(--surface-blue-grey);
  font-size: var(--font-body); color: var(--text-primary);
}
.help-list__item svg {
  flex: none; width: 36px; height: 36px; padding: 10px;
  border-radius: var(--radius-control);
  background: var(--surface-white); color: var(--brand-primary);
}

/* 12.2 Catalogue heading with hex marker */
.section__title--hex { display: flex; align-items: baseline; gap: 20px; }
.section__title--hex .eyebrow__dot { width: 28px; height: 28px; flex: none; transform: translateY(2px); }

/* 12.3 Built through application */
.application {
  padding: 96px 0 72px; text-align: center;
  background: radial-gradient(60% 70% at 50% 60%, var(--surface-white) 0%, var(--surface-blue-grey) 100%);
}
.application__title { font-size: var(--font-display-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.application__text { max-width: 1260px; margin: 24px auto 0; font-size: var(--font-intro); color: var(--text-secondary); }
.application__stack { display: grid; justify-items: center; gap: 24px; margin-top: 64px; }
.application__media { width: min(758px, 100%); aspect-ratio: 758 / 270; border-radius: var(--radius-medium); overflow: hidden; }
.application__media img { width: 100%; height: 100%; object-fit: cover; }
.benefit {
  width: min(466px, 100%);
  display: grid; justify-items: center; gap: 16px;
  padding: 28px 24px;
  border-radius: var(--radius-medium);
  background: var(--surface-white); color: var(--text-primary);
  border: 1px solid var(--stroke);
}
.benefit--dark { background: var(--brand-alt-dark); color: var(--light-primary); border-color: var(--brand-alt-dark); }
.benefit__label {
  display: flex; align-items: center; gap: 16px;
  font-size: var(--font-intro); text-transform: uppercase; color: var(--brand-primary);
}
.benefit--dark .benefit__label { color: var(--light-primary); }
.benefit__label img { height: 36px; width: auto; object-fit: cover; object-position: left; width: 36px; }
.benefit__value { font-family: var(--font-serif); font-size: var(--font-lead); }

@media (max-width: 900px) {
  .gap { padding: 56px 0 64px; }
  .gap__grid { grid-template-columns: 1fr; gap: 40px; }
  .gap__intro .hero__actions .btn { width: 100%; }
  .help-list__item { padding: 14px 16px; gap: 14px; font-size: var(--font-caption); }
  .section__title--hex { gap: 12px; }
  .section__title--hex .eyebrow__dot { width: 20px; height: 20px; }
  .application { padding: 56px 0 48px; }
  .application__stack { margin-top: 40px; gap: 16px; }
  .application__media { aspect-ratio: 16 / 9; }
  .benefit__label { font-size: var(--font-caption); }
}
/* Catalogue: centre an incomplete last row (Corporate has 11 programmes) */
.programmes--catalogue .programmes__grid { display: flex; flex-wrap: wrap; justify-content: center; }
.programmes--catalogue .programme-card { flex: 0 0 calc((100% - 2 * 90px) / 3); }
@media (max-width: 1200px) { .programmes--catalogue .programme-card { flex-basis: calc((100% - var(--space-large)) / 2); } }
@media (max-width: 900px) { .programmes--catalogue .programme-card { flex-basis: 100%; } }

/* Full gradient text: one continuous gradient across the whole element, dark (top-left)
   to light (bottom-right). Used for every two-tone heading and paragraph. */
.text-gradient-full {
  width: fit-content; max-width: 100%;
  background-image: var(--gradient-text-full);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.text-gradient-full span { color: transparent !important; -webkit-text-fill-color: transparent !important; }   /* nested words (serif accents) stay inside the gradient */
.text-gradient-full--on-dark { background-image: var(--gradient-text-full-on-dark); }
.why__text.text-gradient-full, .application__text.text-gradient-full { margin-inline: auto; }

/* --------------------------------------------------------------------------
   13. PROGRAM DETAIL PAGES (program-<slug>.html)
   -------------------------------------------------------------------------- */
:root {
  --accent-sand: #FDD57E;          /* Learning Format & Duration card (Figma, not in tokens) */
  --accent-sand-ink: #8A6224;      /* its calendar icons */
  --hero-inset: 16px;
}

/* 13.2 Hero: inset rounded card */
.program-hero { padding: var(--hero-inset) var(--hero-inset) 0; }
.program-hero__card {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 760px;
  display: flex; align-items: center;
  border-radius: var(--radius-medium);
  box-shadow: 0 18px 40px rgba(5, 14, 32, 0.18);
  color: var(--light-primary);
}
.program-hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.program-hero__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5, 14, 32, 0.62) 0%, rgba(5, 14, 32, 0.38) 55%, rgba(5, 14, 32, 0.15) 100%);
}
.program-hero__content { width: 100%; max-width: 1180px; padding: 150px 40px 72px; }
.eyebrow--program { font-size: var(--font-small); letter-spacing: 0.08em; gap: 16px; }
.eyebrow__dot--blue { color: var(--brand-mid); }
.program-hero__title {
  margin-top: 20px; max-width: 1060px;
  font-size: var(--font-hero); font-weight: var(--weight-semibold); line-height: 1.3;
  text-wrap: balance;
}
.program-hero__text { margin-top: 28px; max-width: 1000px; font-size: var(--font-body); }
.program-hero .hero__actions { margin-top: 32px; }
.program-hero .btn--primary { min-width: 250px; }
.program-hero .btn--glass { min-width: 210px; }

/* 13.3 Intro: headline + hover rows + large card image */
.program-intro { padding: 140px 0 120px; background: var(--surface-white); }
.program-intro__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.program-intro__hex { width: 22px; height: 26px; color: var(--brand-light); }
.program-intro__title {
  margin-top: 28px; max-width: 760px;
  font-size: var(--font-display-lg); font-weight: var(--weight-semibold); line-height: 1.45;
  background: var(--gradient-text-full);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.fold-list { margin-top: 72px; max-width: 690px; }
.fold-item {
  position: relative;
  padding: 28px 0 32px;
}
/* two stacked rules: grey base + a blue gradient that fades in */
.fold-item::before, .fold-item::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
}
.fold-item::before { background: var(--stroke); }
.fold-item::after {
  height: 2px; top: -0.5px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-mid) 55%, var(--stroke) 100%);
  opacity: 0; transition: opacity 0.45s ease;
}
.fold-item__title {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--font-card-title); line-height: 1.3;
  color: var(--text-secondary);
  transition: color 0.45s ease;
}
.fold-item__text { margin-top: 10px; font-size: var(--font-caption); color: var(--text-secondary-light); }
/* first row is blue at rest; on hover the blue moves to the row under the pointer */
.fold-list:not(:hover) .fold-item:first-child::after,
.fold-item:hover::after { opacity: 1; }
.fold-list:not(:hover) .fold-item:first-child .fold-item__title,
.fold-item:hover .fold-item__title { color: var(--brand-primary); }

.program-intro__figure { display: grid; gap: 28px; padding-top: 60px; }
.program-intro__figure img {
  width: 100%; aspect-ratio: 645 / 560; object-fit: cover;
  border-radius: var(--radius-medium);
  box-shadow: 0 18px 40px rgba(5, 14, 32, 0.12);
}
.program-intro__figure figcaption { text-align: right; font-size: var(--font-body); color: var(--text-secondary); }

/* 13.4 Program features */
.program-features { padding: 72px 0 88px; background: var(--brand-primary-dark); color: var(--light-primary); }
.program-features__eyebrow { display: flex; justify-content: center; font-size: var(--font-lead); color: var(--light-primary); }
.program-features__panel {
  display: grid; gap: 28px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-areas:
    "a a a a b b b y y y"
    "c c c d d d d y y y";
  max-width: 1240px; margin: 48px auto 0;
  padding: 28px;
  border-radius: var(--radius-large);
  background: var(--surface-white);
}
.feature-card { min-height: 270px; padding: 28px; border-radius: var(--radius-medium); background: var(--brand-alt-dark); }
.feature-card--a { grid-area: a; }
.feature-card--b { grid-area: b; }
.feature-card--c { grid-area: c; }
.feature-card--d { grid-area: d; }
.feature-card__title { font-family: var(--font-serif); font-weight: var(--weight-regular); font-size: var(--font-header-text); line-height: 1.3; }
.feature-card__text { margin-top: 12px; font-size: var(--font-caption); }
.format-card { grid-area: y; padding: 28px; border-radius: var(--radius-medium); background: var(--accent-sand); color: var(--text-primary); }
.format-card__title { font-family: var(--font-serif); font-weight: var(--weight-regular); font-size: var(--font-header-text); line-height: 1.3; }
.format-list { display: grid; gap: 26px; margin-top: 32px; }
.format-list li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; font-size: var(--font-caption); }
.format-list__icon { width: 24px; height: 24px; color: var(--accent-sand-ink); }

/* curriculum dialog kicker */
.programme-dialog__kicker { font-size: var(--font-small); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-mid); margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  .fold-item::after, .fold-item__title { transition: none; }
}

@media (max-width: 1200px) {
  .program-intro__grid { gap: 48px; }
  .program-features__panel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "c d" "y y";
  }
}
@media (max-width: 900px) {
  :root { --hero-inset: 8px; }
  .program-hero__card { min-height: 0; border-radius: var(--radius-small); }
  .program-hero__content { padding: 120px 20px 40px; }
  .program-hero__title { font-size: 32px; }
  .program-hero .btn { width: 100%; min-width: 0; }
  .program-intro { padding: 56px 0 64px; }
  .program-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .fold-list { margin-top: 32px; }
  .fold-item { padding: 20px 0 24px; }
  .fold-item__title { font-size: 21px; }
  .program-intro__figure { padding-top: 0; }
  .program-intro__figure figcaption { text-align: left; font-size: var(--font-caption); }
  .program-features { padding: 48px 0 56px; }
  .program-features__panel { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "y"; padding: 12px; gap: 12px; border-radius: var(--radius-medium); }
  .feature-card { min-height: 0; padding: 22px 20px; }
  .format-card { padding: 22px 20px; }
}
.program-features__eyebrow { font-style: normal; }

/* --------------------------------------------------------------------------
   14. FORM PAGES (apply.html, brochure.html, contact.html)
   -------------------------------------------------------------------------- */
:root {
  --state-error: #B42318;          /* 6.4:1 on white */
  --surface-pill: #EFF0F3;         /* Figma pill fill, not in tokens */
}

/* 14.1 Hero card with the two panels */
.form-hero { padding: var(--hero-inset) var(--hero-inset) 0; }
.form-hero__card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 120px 40px 72px;
  border-radius: var(--radius-large);
}
.form-hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.form-hero__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(5, 14, 32, 0.35); }
.form-hero__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--surface-white); color: var(--text-secondary);
  border: 1px solid var(--stroke);
}
.form-hero__back:hover { color: var(--brand-primary); }
.form-hero__back svg { width: 22px; height: 22px; }
.form-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr); gap: 32px; align-items: start;
  max-width: 1240px; margin: -12px auto 0;
}
.page-apply .info-card { margin-top: 60px; }

.info-card, .form-card, .form-success {
  background: var(--surface-white); color: var(--text-primary);
  border-radius: var(--radius-large);
  padding: 40px;
}
.pill {
  display: inline-flex; padding: var(--padding-badge-y) var(--padding-badge-x);
  border-radius: var(--radius-full); background: var(--surface-pill);
  font-size: var(--font-caption); font-weight: var(--weight-medium); color: var(--brand-primary-dark);
}
.page-brochure .info-card .pill { text-transform: uppercase; letter-spacing: 0.02em; }
.pill--outline { background: var(--surface-white); border: 1px solid var(--brand-primary); color: var(--brand-alt-dark); font-size: var(--font-small); }
.info-card__title { margin-top: 32px; font-size: var(--font-section-title); font-weight: var(--weight-semibold); line-height: 1.4; text-wrap: balance; }
.info-card__text { margin-top: 24px; color: var(--text-secondary); }
.info-card__hint { margin-top: 16px; font-size: var(--font-caption); color: var(--text-secondary-light); }
.info-list {
  display: grid; gap: 28px; margin-top: 32px;
  padding: 32px 24px; border-radius: var(--radius-medium);
  background: var(--brand-dark); color: var(--light-primary);
  font-size: var(--font-caption);
}
.info-list li { display: flex; align-items: center; gap: 16px; }
.info-list__icon { width: 20px; height: 20px; flex: none; color: var(--light-primary); }
.info-list__check { width: 24px; height: 24px; flex: none; }
.info-list--checks { gap: 20px; min-height: 230px; align-content: start; font-size: var(--font-body); }
.info-list--contact { gap: 20px; }
.info-list--contact li { display: grid; gap: 4px; }
.info-list__label { font-size: var(--font-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--footer-muted); }
.info-list--contact a:hover { text-decoration: underline; }

/* 14.2 Form card */
.form-card { display: flex; flex-direction: column; min-height: 100%; }
.form-card__title { padding-bottom: 14px; border-bottom: 1px solid var(--stroke); font-size: var(--font-header-text); font-weight: var(--weight-semibold); }
.form-card__kicker { display: flex; align-items: center; gap: 16px; font-size: var(--font-medium-header); color: var(--brand-mid); }
.form-card__kicker svg { width: 18px; height: 18px; color: var(--brand-light); }
.form-card__intro { margin-top: 20px; color: var(--text-secondary); }
.form-card__fields { display: grid; gap: 14px; margin-top: 24px; }
.form-card__footer { display: grid; gap: 14px; margin-top: auto; padding-top: 48px; }
.form-card__submit { justify-content: center; }
.page-apply .form-card__submit { margin-top: 28px; }
.form-card__note { text-align: center; font-size: var(--font-caption); color: var(--text-secondary-light); }

/* fields */
.field { position: relative; display: grid; gap: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--font-body); color: var(--text-primary);
  background: var(--surface-white);
  border: 1px solid var(--stroke); border-radius: var(--radius-small);
  outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-secondary-light); opacity: 0.75; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(10, 70, 186, 0.15); }
.field--plain input, .field--plain select { height: 56px; padding: 0 20px; }
/* floating: label rendered inside the box, above the value */
.field--floating label {
  position: absolute; left: 17px; top: 9px; z-index: 1;
  font-size: var(--font-small); color: var(--text-secondary-light); pointer-events: none;
}
.field--floating input, .field--floating select { height: 60px; padding: 24px 16px 6px; }
.field--select select { appearance: none; -webkit-appearance: none; padding-right: 52px; cursor: pointer; }
.field--select select:invalid { color: var(--text-secondary-light); }
.field__chevron { position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; color: var(--brand-alt-dark); pointer-events: none; }
.field--textarea label, .field--radios legend { font-size: var(--font-body); color: var(--text-secondary); }
.field--textarea textarea { min-height: 120px; padding: 16px 20px; resize: vertical; }
.field--radios { border: 0; margin: 4px 0 0; padding: 0; }
.radios { display: flex; gap: 48px; margin-top: 8px; }
.radios label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.radios input { width: 18px; height: 18px; accent-color: var(--brand-primary); }
.field-group { display: grid; gap: 14px; }

/* validation */
.field__error { font-size: var(--font-small); color: var(--state-error); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--state-error); }
.field.is-invalid label { color: var(--state-error); }

/* success */
.form-success { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 64px 40px; min-height: 100%; align-content: center; }
.form-success[hidden] { display: none; }
.form-success__icon { width: 56px; height: 56px; }
.form-success__title { font-size: var(--font-header-text); font-weight: var(--weight-semibold); }
.form-success__text { max-width: 420px; color: var(--text-secondary); }
.form-success .btn { margin-top: 12px; }

/* 14.3 Apply: what happens next */
.next-steps { padding: 96px 0; }
.next-steps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.next-steps__title { margin-top: 20px; max-width: 420px; font-size: var(--font-section-title); font-weight: var(--weight-semibold); line-height: 1.25; }
.next-steps__list { display: grid; gap: 24px; margin-top: 64px; max-width: 540px; }
.next-steps__list li {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: var(--radius-full);
  background: var(--surface-blue-grey); font-size: var(--font-caption);
}
.next-steps__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--accent-sand); color: var(--accent-sand-ink);
}
.next-steps__icon svg { width: 20px; height: 20px; }
.next-steps__figure { display: grid; gap: 24px; }
.next-steps__figure img { width: 100%; aspect-ratio: 483 / 372; object-fit: cover; border-radius: var(--radius-medium); }
.next-steps__figure figcaption { max-width: 380px; justify-self: center; text-align: center; font-size: var(--font-caption); color: var(--text-secondary); }

/* 14.4 Apply: career impact */
.impact { padding: 64px 0 0; background: var(--surface-white); }
.impact__inner { display: grid; justify-items: center; text-align: center; }
.impact__title { margin-top: 16px; max-width: 760px; font-size: var(--font-section-title); font-weight: var(--weight-semibold); line-height: 1.25; }
.impact__list { display: grid; gap: 12px; width: min(720px, 100%); margin-top: 32px; }
.impact__list li {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 24px; border: 1px solid var(--stroke); border-radius: var(--radius-small);
  font-weight: var(--weight-medium);
}
.impact__list svg { width: 22px; height: 22px; flex: none; }
.impact__image { width: min(720px, 100%); margin-top: 40px; border-radius: var(--radius-medium) var(--radius-medium) 0 0; aspect-ratio: 702 / 317; object-fit: cover; }

@media (max-width: 900px) {
  .form-hero__card { padding: 96px 16px 32px; border-radius: var(--radius-medium); }
  .form-hero__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .page-apply .info-card { margin-top: 0; }
  .info-card, .form-card, .form-success { padding: 28px 22px; border-radius: var(--radius-medium); }
  .info-card__title { margin-top: 24px; font-size: 28px; }
  .info-list { padding: 24px 20px; gap: 20px; }
  .info-list--checks { min-height: 0; }
  .form-card__footer { padding-top: 32px; }
  .radios { gap: 32px; }
  .next-steps { padding: 56px 0; }
  .next-steps__grid { grid-template-columns: 1fr; gap: 40px; }
  .next-steps__title { font-size: 28px; }
  .next-steps__list { margin-top: 32px; }
  .next-steps__list li { border-radius: var(--radius-small); }
  .impact__title { font-size: 26px; }
  .impact__list li { justify-content: flex-start; text-align: left; }
}
@media (max-width: 900px) {
  .page-form .info-card__text, .page-form .info-card__hint, .page-form .info-list { display: none; }
}
.page-brochure .site-footer, .page-contact .site-footer { padding-top: 48px; background: var(--surface-white); }
.field--radios.is-invalid .radios label { color: inherit; }
.field--radios.is-invalid legend { color: var(--state-error); }
/* clear the header (24px offset + 94px bar) on pages whose content starts at the top */
.program-hero__content { padding-top: 160px; }
.form-hero__card { padding-top: 140px; }
@media (max-width: 900px) {
  .program-hero__content { padding-top: 104px; }
  .form-hero__card { padding-top: 92px; }
}

/* --------------------------------------------------------------------------
   15. HERO FOLD — every hero fills the first screen and keeps its eyebrow,
   headline, supporting text and CTAs inside it, at any viewport size.
   Type and spacing scale with viewport height as well as width.
   -------------------------------------------------------------------------- */
:root {
  --hero-clear: calc(var(--header-top) + var(--header-height));            /* 118px */
  --hero-title-fluid: clamp(30px, min(4.3vw, 6.8vh), 64px);
  --hero-text-fluid: clamp(14px, min(1.3vw, 2.2vh), 18px);
  --hero-gap-s: clamp(10px, 2.2vh, 28px);
  --hero-gap-m: clamp(12px, 3vh, 40px);
}
@media (max-width: 900px) {
  :root {
    --hero-clear: calc(var(--header-top-mobile) + var(--header-height-mobile));   /* 74px */
    --hero-title-fluid: clamp(26px, min(8.4vw, 5.4vh), 44px);
    --hero-text-fluid: clamp(14px, min(4vw, 2.2vh), 16px);
    --hero-gap-s: clamp(8px, 1.8vh, 20px);
    --hero-gap-m: clamp(10px, 2.4vh, 28px);
  }
}

.hero, .hero--center {
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--hero-clear) + clamp(12px, 4vh, 56px)) 0 clamp(20px, 5vh, 64px);
}
.hero__title, .hero--center .hero__title { margin-top: var(--hero-gap-s); font-size: var(--hero-title-fluid); line-height: 1.25; text-wrap: balance; }
.hero__text, .hero--center .hero__text { margin-top: var(--hero-gap-m); font-size: var(--hero-text-fluid); }
.hero .hero__actions { margin-top: var(--hero-gap-m); }

.program-hero__card { min-height: calc(100vh - var(--hero-inset)); min-height: calc(100svh - var(--hero-inset)); }
.program-hero__content { padding-top: calc(var(--hero-clear) + clamp(12px, 4vh, 48px)); padding-bottom: clamp(20px, 5vh, 64px); }
.program-hero__title { margin-top: var(--hero-gap-s); font-size: var(--hero-title-fluid); line-height: 1.25; }
.program-hero__text { margin-top: var(--hero-gap-m); font-size: var(--hero-text-fluid); }
.program-hero .hero__actions { margin-top: var(--hero-gap-m); }

@media (max-width: 900px) {
  .hero, .hero--center { padding-top: calc(var(--hero-clear) + clamp(10px, 3vh, 32px)); }
  .hero__actions .btn, .program-hero .btn { min-height: 52px; }
  .hero__actions { gap: 10px; }
  .eyebrow { font-size: var(--font-small); gap: 14px; }
  .program-hero__content { padding-left: 20px; padding-right: 20px; }
}
/* very short landscape screens: tighten further */
@media (max-height: 560px) and (min-width: 600px) {
  :root { --hero-title-fluid: clamp(24px, 7vh, 40px); --hero-text-fluid: 14px; }
  .hero__actions .btn, .program-hero .btn { min-height: 46px; }
}

/* --------------------------------------------------------------------------
   16. PHOTO HERO — scroll effect (Home, About, Programs, Corporate)
   Over the first --hero-shrink-distance of scrolling the photo shrinks from
   full-bleed into a card inset 24px with 24px corners. The hero is not pinned,
   so no space is added between sections. js/main.js writes --hero-progress (0–1).
   -------------------------------------------------------------------------- */
.hero-pin { --hero-shrink-distance: 260px; --hero-progress: 0; }
.hero--pinned .hero__media {
  inset: calc(var(--hero-progress) * var(--space-large));
  border-radius: calc(var(--hero-progress) * var(--radius-medium));
  will-change: inset, border-radius;
}
.hero--pinned .hero__media img {
  transform: scale(calc(1.08 - var(--hero-progress) * 0.08));
  transform-origin: 50% 40%;
  will-change: transform;
}
@media (max-width: 900px) {
  .hero-pin { --hero-shrink-distance: 180px; }
  .hero--pinned .hero__media { inset: calc(var(--hero-progress) * 12px); border-radius: calc(var(--hero-progress) * var(--radius-small)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--pinned .hero__media img { transform: none; }
}

/* Left-aligned photo heroes (Home, Corporate): content sits low in the frame, as in the
   Figma, instead of floating mid-screen with empty photo below the CTAs. */
.hero:not(.hero--center) { align-items: flex-end; padding-bottom: clamp(28px, 6vh, 64px); }
/* After the Home photo shrinks into its 24px-inset card, keep the usual ~92px gap to the next section */
.page-home .paths { padding-top: calc(56px - var(--space-large)); }   /* 56px from the shrunk hero card to the heading */
/* Same compensation on About and Corporate, so their first section keeps its gap below the card */
.page-about .problem { padding-top: calc(56px - var(--space-large)); }
.page-corporate .gap { padding-top: calc(112px - var(--space-large)); }
@media (max-width: 900px) {
  .page-home .paths { padding-top: calc(40px - 12px); }
  .page-about .problem { padding-top: calc(56px - 12px); }
  .page-corporate .gap { padding-top: calc(56px - 12px); }
}

/* --------------------------------------------------------------------------
   17. BUTTONS — official Figma spec
   All buttons share the Figma metrics (padding 16px 22px, gap 18px, radius 6px)
   so primary and secondary buttons stay the same height side by side.
   Primary states:
     default  gradient 180deg periwinkle → brand blue, inner top highlight
     hover    adds a lime glow, then animates into the active state
     active   gradient turns to 267deg, glow turns white (also on press)
   -------------------------------------------------------------------------- */
@property --btn-angle { syntax: "<angle>"; inherits: false; initial-value: 180deg; }
:root {
  --btn-light: #7979EE;          /* Figma var(--Light) = brand-light */
  --btn-primary: #051797;        /* Figma var(--Primary) = brand-primary */
  --btn-glow-hover: #DAF36B;
  --btn-glow-active: #FFFFFF;
  --btn-inset: 0 4px 4px 0 rgba(255, 255, 255, 0.25) inset;
  --btn-radius: 6px;
}
.btn {
  min-height: 0;
  padding: 16px 22px;
  gap: 18px;
  border-radius: var(--btn-radius);
}
.btn.btn--primary {
  --btn-angle: 180deg;
  border: 1px solid var(--btn-light);
  background: linear-gradient(var(--btn-angle), var(--btn-light) 0%, var(--btn-primary) 100%);
  box-shadow: var(--btn-inset);
  color: var(--light-primary);
}
.btn.btn--primary:hover,
.btn.btn--primary:focus-visible {
  animation: btn-hover-to-active var(--dur-slow) var(--ease-out) forwards;
}
.btn.btn--primary:active {
  animation: none;
  --btn-angle: 267deg;
  background: linear-gradient(var(--btn-angle), var(--btn-light) 0%, var(--btn-primary) 99.28%);
  box-shadow: 0 0 31.3px 0 var(--btn-glow-active), var(--btn-inset);
}
@keyframes btn-hover-to-active {
  0%   { --btn-angle: 180deg; box-shadow: 0 0 0 0 transparent, var(--btn-inset); }
  30%  { --btn-angle: 180deg; box-shadow: 0 0 31.3px 0 var(--btn-glow-hover), var(--btn-inset); }
  100% { --btn-angle: 267deg; box-shadow: 0 0 31.3px 0 var(--btn-glow-active), var(--btn-inset); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn--primary:hover, .btn.btn--primary:focus-visible {
    animation: none; --btn-angle: 267deg;
    box-shadow: 0 0 31.3px 0 var(--btn-glow-active), var(--btn-inset);
  }
}

/* --------------------------------------------------------------------------
   18. SECONDARY / OUTLINE BUTTON — official Figma spec
   default  transparent, 1px outline
   hover    periwinkle glow, then animates into the active state
   active   teal sheen across the face (85deg, 33% at 28.91%) + glow (also on press)
   -------------------------------------------------------------------------- */
@property --btn-sheen { syntax: "<number>"; inherits: false; initial-value: 0; }
:root {
  --btn-glow-secondary: #7979EE;
  --btn-sheen-rgb: 18, 207, 191;
}
.btn.btn--glass  { --btn-line: var(--light-blue); --btn-ink: var(--light-primary); }
.btn.btn--outline { --btn-line: var(--brand-alt-dark); --btn-ink: var(--brand-alt-dark); }
.btn.btn--glass, .btn.btn--outline {
  --btn-sheen: 0;
  border: 1px solid var(--btn-line);
  color: var(--btn-ink);
  background: linear-gradient(85deg, rgba(255, 255, 255, 0) -6.66%, rgba(var(--btn-sheen-rgb), var(--btn-sheen)) 28.91%, rgba(255, 255, 255, 0) 72.04%), transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn.btn--glass:hover, .btn.btn--glass:focus-visible,
.btn.btn--outline:hover, .btn.btn--outline:focus-visible {
  animation: btn-secondary-hover-to-active var(--dur-slow) var(--ease-out) forwards;
}
.btn.btn--glass:active, .btn.btn--outline:active {
  animation: none;
  --btn-sheen: 0.33;
  box-shadow: 0 0 31.3px 0 var(--btn-glow-secondary);
}
@keyframes btn-secondary-hover-to-active {
  0%   { --btn-sheen: 0;    box-shadow: 0 0 0 0 transparent; }
  30%  { --btn-sheen: 0;    box-shadow: 0 0 31.3px 0 var(--btn-glow-secondary); }
  100% { --btn-sheen: 0.33; box-shadow: 0 0 31.3px 0 var(--btn-glow-secondary); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.btn--glass:hover, .btn.btn--glass:focus-visible,
  .btn.btn--outline:hover, .btn.btn--outline:focus-visible {
    animation: none; --btn-sheen: 0.33; box-shadow: 0 0 31.3px 0 var(--btn-glow-secondary);
  }
}

/* Home hero: when the photo has shrunk into its card, the space under the CTAs equals
   the space to the left of the text (both measured inside the card). The bottom padding
   tracks the text's left offset from the viewport edge at every width. */
.page-home .hero {
  --hero-content-left: calc(max(0px, (100vw - var(--container-max) - 2 * var(--gutter-desktop)) / 2) + var(--gutter-desktop));
  padding-bottom: var(--hero-content-left);
}
@media (max-width: 900px) {
  /* keep the text clear of the 12px card inset on phones: 16px inside the card */
  .page-home .hero .container { padding-inline: 28px; }
  .page-home .hero { --hero-content-left: 28px; }
}

/* --------------------------------------------------------------------------
   19. ALIGNMENT — the nav logo lines up with the page copy on every page.
   The bar follows the content grid (container + its 24px inner padding), so the
   logo, the hero copy and every section's text share one left edge.
   -------------------------------------------------------------------------- */
/* The bar's outer edges sit on the content edges: its left edge lines up with the copy,
   its right edge with the right edge of the content. */
.site-header { padding-inline: var(--gutter-desktop); }
.site-header__bar { max-width: var(--container-max); }
/* program pages: text inside the inset hero card follows the same edge */
.program-hero__content {
  max-width: none;
  padding-left: calc(max(0px, (100% - var(--container-max) - 2 * var(--gutter-desktop) + 2 * var(--hero-inset)) / 2) + var(--gutter-desktop) - var(--hero-inset));
  padding-right: calc(var(--gutter-desktop) - var(--hero-inset));
}
@media (max-width: 900px) {
  /* phones: bar edge at 16px, the same edge as the page copy */
  .site-header { padding-inline: var(--gutter); }
  .site-header__bar { padding-inline: 12px; }
  .hero .container { padding-inline: var(--gutter); }
  .page-home .hero .container { padding-inline: 28px; }   /* clears the 12px shrink inset */
  .program-hero__content { padding-left: calc(var(--gutter) - var(--hero-inset)); padding-right: calc(var(--gutter) - var(--hero-inset)); }
}

/* --------------------------------------------------------------------------
   20. Buttons use Poppins Medium everywhere
   -------------------------------------------------------------------------- */
.btn, .btn.btn--primary, .btn.btn--glass, .btn.btn--outline { font-family: var(--font-sans); font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   21. Home "different starting points" cards — Figma spec
   Text and button sit in a blurred panel at the bottom of each photo:
   padding 24px, gap 16px, content at the bottom, gradient rgba(5,5,63,0 → .5),
   backdrop blur 8.8px. Long (tall) cards' panel grows to fill more of the card;
   wide cards' panel hugs its content. Title: Poppins Medium 20px.
   -------------------------------------------------------------------------- */
.path-card { padding: 0; }
.path-card__media::after { content: none; }
.path-card__panel {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: var(--space-small);
  width: 100%;
  padding: var(--padding-medium-card);
  background: linear-gradient(180deg, rgba(5, 5, 63, 0) 0%, rgba(5, 5, 63, 0.5) 100%);
  -webkit-backdrop-filter: blur(8.8px); backdrop-filter: blur(8.8px);
}
.path-card:nth-child(1) .path-card__panel,
.path-card:nth-child(4) .path-card__panel { flex: 0 0 auto; min-height: 45%; }   /* long */
.path-card__title {
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-size: 20px; line-height: 1.4; max-width: 320px;
}
.path-card .btn { margin-top: 0; }
@media (max-width: 900px) {
  .path-card { padding: 0; }
  .path-card:nth-child(n) .path-card__panel { min-height: 0; padding: 20px; }
}

/* Starting-point cards: the panel fills the whole card and the blur is progressive.
   Two stacked blur layers fade in through masks, so the photo goes from sharp at the
   top to the full 8.8px blur at the bottom with no visible edge. */
.path-card__panel,
.path-card:nth-child(1) .path-card__panel,
.path-card:nth-child(4) .path-card__panel {
  position: relative; isolation: isolate;
  flex: 1 0 0; min-height: 100%;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.path-card__panel::before,
.path-card__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.path-card__panel::before {
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg, transparent 15%, #000 55%);
          mask-image: linear-gradient(180deg, transparent 15%, #000 55%);
}
.path-card__panel::after {
  -webkit-backdrop-filter: blur(8.8px); backdrop-filter: blur(8.8px);
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 85%);
          mask-image: linear-gradient(180deg, transparent 40%, #000 85%);
}
@media (max-width: 900px) {
  .path-card:nth-child(n) .path-card__panel { min-height: 100%; }
}

/* --------------------------------------------------------------------------
   22. FORM PAGES — column heights and submission flow
   Desktop: the form card is 777px tall. The left column (back button, 20px gap,
   info card) stretches to the same height, so both cards end on one line.
   -------------------------------------------------------------------------- */
.form-hero__grid { align-items: stretch; margin-top: 0; }
.form-hero__aside { display: flex; flex-direction: column; gap: 20px; }
.form-hero__aside .info-card { flex: 1; margin-top: 0; }
.page-apply .info-card { margin-top: 0; }
.form-slot { display: flex; }
.form-slot > .form-card { width: 100%; min-height: 777px; }
.pill--caps { text-transform: uppercase; letter-spacing: 0.02em; }
.info-card .info-list { margin-top: 28px; }
.info-list--reach { gap: 26px; }
.info-list--reach li { align-items: flex-start; }
.info-list--reach a:hover { text-decoration: underline; }
.info-list__icon--amber { width: 22px; height: 22px; color: var(--accent-amber); }

/* Submission panel */
.form-status { display: flex; flex-direction: column; }
.form-status[hidden] { display: none; }
.form-status__body { flex: 1; display: grid; place-items: center; padding: 32px 0; }
.form-status__view { display: none; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.form-status[data-state="loading"] .form-status__view--loading,
.form-status[data-state="success"] .form-status__view--success { display: flex; }
.form-status[data-state="loading"] .form-status__when-success,
.form-status[data-state="success"] .form-status__when-loading { display: none; }
.form-status__title { margin-top: 28px; font-size: var(--font-header-text); font-weight: var(--weight-semibold); color: var(--text-primary); outline: none; }
.form-status__text { max-width: 360px; color: var(--text-secondary); }
.form-status__text a { color: var(--brand-primary); text-decoration: underline; }
.form-status .btn[disabled] { cursor: progress; opacity: 1; animation: none; }

/* Loading: 8 dots on a lavender disc, chasing round */
.status-spinner {
  display: grid; place-items: center;
  width: 208px; height: 208px; border-radius: var(--radius-full);
  background: #F5F3FF;
}
.status-spinner__dots { position: relative; width: 104px; height: 104px; animation: status-spin 1s steps(8) infinite; }
.status-spinner__dots span {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: var(--radius-full); background: var(--brand-light);
}
.status-spinner__dots span:nth-child(1) { transform: rotate(0deg)   translateY(-45px); opacity: 1; }
.status-spinner__dots span:nth-child(2) { transform: rotate(45deg)  translateY(-45px); opacity: 0.2; }
.status-spinner__dots span:nth-child(3) { transform: rotate(90deg)  translateY(-45px); opacity: 0.25; }
.status-spinner__dots span:nth-child(4) { transform: rotate(135deg) translateY(-45px); opacity: 0.35; }
.status-spinner__dots span:nth-child(5) { transform: rotate(180deg) translateY(-45px); opacity: 0.45; }
.status-spinner__dots span:nth-child(6) { transform: rotate(225deg) translateY(-45px); opacity: 0.55; }
.status-spinner__dots span:nth-child(7) { transform: rotate(270deg) translateY(-45px); opacity: 0.7; }
.status-spinner__dots span:nth-child(8) { transform: rotate(315deg) translateY(-45px); opacity: 0.85; }
@keyframes status-spin { to { transform: rotate(360deg); } }

/* Success: document rises, lines draw, badge pops, tick draws, sparkles twinkle */
.status-art { width: 240px; height: 220px; overflow: visible; }
.status-art__bg { fill: #F5F3FF; }
.form-status[data-state="success"] .status-art__doc { animation: art-rise var(--dur-slow) var(--ease-out) both; transform-origin: 112px 110px; }
.form-status[data-state="success"] .status-art__line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: art-draw var(--dur-base) var(--ease-out) forwards; }
.form-status[data-state="success"] .status-art__line:nth-child(1) { animation-delay: 0.15s; }
.form-status[data-state="success"] .status-art__line:nth-child(2) { animation-delay: 0.22s; }
.form-status[data-state="success"] .status-art__line:nth-child(3) { animation-delay: 0.29s; }
.form-status[data-state="success"] .status-art__badge { transform-origin: 164px 142px; animation: art-pop var(--dur-slow) cubic-bezier(.2,1.4,.4,1) 0.25s both; }
.form-status[data-state="success"] .status-art__check { stroke-dasharray: 60; stroke-dashoffset: 60; animation: art-draw var(--dur-base) var(--ease-out) 0.5s forwards; }
.form-status[data-state="success"] .status-art__spark { transform-box: fill-box; transform-origin: center; animation: art-twinkle var(--dur-slow) var(--ease-out) 0.6s 2 alternate; }
.form-status[data-state="success"] .status-art__spark--b { animation-delay: 0.7s; }
.form-status[data-state="success"] .status-art__spark--c { animation-delay: 0.8s; }
@keyframes art-rise { from { opacity: 0; transform: translateY(18px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes art-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
@keyframes art-twinkle { from { opacity: 1; transform: scale(1); } to { opacity: 0.4; transform: scale(0.6); } }

@media (prefers-reduced-motion: reduce) {
  .status-spinner__dots { animation-duration: 2.4s; }
  .form-status[data-state="success"] .status-art *,
  .form-status[data-state="success"] .status-art__doc,
  .form-status[data-state="success"] .status-art__badge { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none; }
}

@media (max-width: 900px) {
  .form-slot > .form-card { min-height: 0; }
  .form-status { min-height: 620px; }
  .status-spinner { width: 168px; height: 168px; }
  .status-art { width: 200px; height: 184px; }
  .form-status__title { font-size: 22px; }
}
/* white nav bar: its CTA uses the dark outline variant (beats .btn.btn--glass) */
.site-header--white .btn.site-header__cta { --btn-line: var(--brand-alt-dark); --btn-ink: var(--brand-alt-dark); }
@media (max-width: 900px) {
  .site-header:not(.site-header--white).is-open .btn.site-header__cta { --btn-line: var(--light-blue); --btn-ink: var(--light-primary); }
}
/* Apply form fits the 777px card */
.page-apply .field--textarea textarea { min-height: 96px; }
.page-apply .form-card__fields { gap: 12px; }
.page-apply .form-card__fields { gap: 10px; }
.page-apply .form-card__intro { margin-top: 14px; }
.page-apply .field--radios .radios label { min-height: 40px; }


/* --------------------------------------------------------------------------
   23. MICRO-ANIMATIONS — every duration is 150–400ms with ease-out.
   The logo carousel and the form loading spinner are continuous loops by design.
   -------------------------------------------------------------------------- */
:root {
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scroll reveal: js/main.js adds .reveal to blocks below the fold, then .is-visible
   as each scrolls into view (IntersectionObserver). Without JS nothing is hidden. */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Links and nav */
.site-nav__link, .site-footer__links a, .site-footer__legal a, .form-status__text a {
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn__icon { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__icon { transform: translate(2px, -2px); }
.btn { transition: transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); }

/* Cards: gentle lift, image eases in */
.programme-card, .faculty-card, .testimonial, .approach-card, .feature-card,
.help-list__item, .next-steps__list li, .impact__list li, .benefit, .practitioner-card {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.programme-card:hover, .programme-card:focus-within { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(5, 14, 32, 0.12); border-color: var(--light-grey); }
.faculty-card:hover, .testimonial:hover, .approach-card:hover, .feature-card:hover, .practitioner-card:hover, .benefit:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(5, 14, 32, 0.18); }
.help-list__item:hover, .next-steps__list li:hover, .impact__list li:hover { transform: translateX(3px); }
.programme-card__media, .path-card__media, .faculty-card__media, .proof__step { overflow: hidden; }
.programme-card__media img, .path-card__media img, .faculty-card__media img, .proof__step img { transition: transform var(--dur-slow) var(--ease-out); }
.programme-card:hover .programme-card__media img,
.path-card:hover .path-card__media img,
.faculty-card:hover .faculty-card__media img,
.proof__step:hover img { transform: scale(1.04); }

/* Form fields: soft focus */
.field input, .field select, .field textarea {
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #D4DCF0; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand-light);
  box-shadow: 0 0 0 4px rgba(121, 121, 238, 0.16);
  background-color: #FCFCFF;
}
.field--floating label { transition: color var(--dur-base) var(--ease-out); }
.field--floating:focus-within label { color: var(--brand-mid); }
.radios input { transition: transform var(--dur-fast) var(--ease-out); }
.radios input:checked { transform: scale(1.08); }

/* Form submission: views cross-fade */
.form-status__view { animation: status-in var(--dur-base) var(--ease-out) both; }
.form-status { animation: status-in var(--dur-base) var(--ease-out) both; }
@keyframes status-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Programs filter */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.filter-chip {
  padding: 10px 18px; border-radius: var(--radius-full);
  border: 1px solid var(--stroke); background: var(--surface-white);
  font-size: var(--font-caption); font-weight: var(--weight-medium); color: var(--brand-alt-dark);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.filter-chip:hover { border-color: var(--brand-light); box-shadow: 0 0 0 3px rgba(121, 121, 238, 0.12); }
.filter-chip[aria-pressed="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--light-primary); }
.programmes--catalogue .programmes__grid { margin-top: 40px; }
.programme-card.is-filtering-out { opacity: 0; transform: scale(0.96); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); pointer-events: none; }
.programme-card.is-filtering-in { animation: card-in var(--dur-slow) var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Curriculum expand / collapse (program pages) */
.curriculum-toggle {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 8px 0; color: var(--light-primary);
  font-size: var(--font-caption); font-weight: var(--weight-medium);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.curriculum-toggle:hover { border-bottom-color: var(--light-primary); }
.curriculum-toggle svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }
.curriculum-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.curriculum-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.curriculum-toggle[aria-expanded="true"] + .curriculum-panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--dur-slow) var(--ease-out), visibility 0s;
}
.curriculum-panel__inner { overflow: hidden; }
.curriculum-list { display: grid; gap: 8px; padding-top: 14px; counter-reset: mod; }
.curriculum-list li {
  counter-increment: mod; display: grid; grid-template-columns: 28px 1fr; gap: 6px;
  font-size: var(--font-caption); color: rgba(255, 255, 255, 0.88);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.curriculum-list li::before { content: counter(mod, decimal-leading-zero); color: var(--brand-light); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.curriculum-toggle[aria-expanded="true"] + .curriculum-panel li { opacity: 1; transform: none; }
.curriculum-toggle[aria-expanded="true"] + .curriculum-panel li:nth-child(2) { transition-delay: 30ms; }
.curriculum-toggle[aria-expanded="true"] + .curriculum-panel li:nth-child(3) { transition-delay: 60ms; }
.curriculum-toggle[aria-expanded="true"] + .curriculum-panel li:nth-child(4) { transition-delay: 90ms; }
.curriculum-toggle[aria-expanded="true"] + .curriculum-panel li:nth-child(5) { transition-delay: 120ms; }
.curriculum-toggle[aria-expanded="true"] + .curriculum-panel li:nth-child(6) { transition-delay: 150ms; }

/* --------------------------------------------------------------------------
   24. REDUCED MOTION — animation and transitions off everywhere.
   Two functional exceptions stay on: the form loading spinner (it shows work is
   in progress) and the logo carousel (kept continuous, as requested earlier).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero--pinned .hero__media img { transform: none !important; }
  .status-spinner__dots { animation-duration: 1s !important; animation-iteration-count: infinite !important; }
  .logo-marquee__track { animation-duration: var(--marquee-duration) !important; animation-iteration-count: infinite !important; }
}
/* About "So we built…": the two comparison cards' statements at 20px */
.pair-card__text { font-size: 20px; line-height: 1.4; }

/* Program page rows: the active row (first at rest, hovered otherwise) gets the blue
   gradient on BOTH its top and bottom rule. Grey separators are plain borders. */
.fold-item { border-top: 1px solid var(--stroke); }
.fold-item:last-child { border-bottom: 1px solid var(--stroke); }
.fold-item::before, .fold-item::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-mid) 55%, var(--stroke) 100%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); z-index: 1;
}
.fold-item::before { top: -1.5px; }
.fold-item::after { top: auto; bottom: -1.5px; }
.fold-list:not(:hover) .fold-item:first-child::before,
.fold-list:not(:hover) .fold-item:first-child::after,
.fold-item:hover::before, .fold-item:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   25. COOKIE CONSENT BANNER (built by js/tracking.js)
   Floating card at the bottom of the screen until the visitor chooses.
   -------------------------------------------------------------------------- */
.consent-banner {
  position: fixed; left: 50%; bottom: 16px; z-index: 9999;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 2 * var(--gutter)));
  display: flex; align-items: center; gap: var(--space-large);
  padding: var(--padding-medium-card);
  background: var(--surface-white); color: var(--text-primary);
  border: 1px solid var(--stroke); border-radius: var(--radius-small);
  box-shadow: 0 12px 40px rgba(1, 14, 104, 0.16);
  font-family: var(--font-sans);
}
.consent-banner[hidden] { display: none; }
.consent-banner__text { margin: 0; font-size: var(--font-caption); line-height: 1.5; color: var(--text-secondary); }
.consent-banner__actions { display: flex; gap: var(--padding-small); flex-shrink: 0; }
@media (max-width: 640px) {
  .consent-banner { flex-direction: column; align-items: stretch; gap: var(--space-small); }
  .consent-banner__actions .btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------------------------------
   27. PAGE TRANSITIONS — dissolve
   Moving to another page cross-dissolves the old page into the new one
   (like Figma's "Dissolve"): no veil, no loader. Browsers with cross-document
   view transitions (Chrome, Edge, Safari 18.2+) do it natively from the rule
   below; elsewhere js/main.js fades the page out (.is-dissolving) and the next
   page fades in (.is-arriving). Forms never navigate, so their loading/success
   flow is untouched. Reduced motion: no transition at all.
   -------------------------------------------------------------------------- */
:root { --dur-dissolve: 400ms; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--dur-dissolve);
  animation-timing-function: ease-in-out;
}

/* fallback for browsers without view transitions */
body.is-dissolving { opacity: 0; transition: opacity calc(var(--dur-dissolve) * 0.6) ease-in-out; }
body.is-arriving { animation: page-in calc(var(--dur-dissolve) * 0.6) ease-in-out both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* Hero text softly appears on every page */
.hero__content > *, .program-hero__content > *, .info-card > * {
  animation: text-in var(--dur-slow) var(--ease-out) both;
}
.hero__content > :nth-child(2), .program-hero__content > :nth-child(2), .info-card > :nth-child(2) { animation-delay: 80ms; }
.hero__content > :nth-child(3), .program-hero__content > :nth-child(3), .info-card > :nth-child(3) { animation-delay: 160ms; }
.hero__content > :nth-child(n+4), .program-hero__content > :nth-child(n+4), .info-card > :nth-child(n+4) { animation-delay: 240ms; }
@keyframes text-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body, .hero__content > *, .program-hero__content > *, .info-card > * { animation: none !important; }
  body.is-dissolving { opacity: 1; }
}

/* --------------------------------------------------------------------------
   28. LAYOUT REFINEMENTS
   -------------------------------------------------------------------------- */
/* About: section headings centred under their eyebrow / icon (gradient text shrinks to fit, so it needs auto margins) */
.faculty__title, .practitioners__title { margin-inline: auto; text-align: center; }

/* Program cards: title turns blue and medium weight on hover */
.programme-card__title { transition: color var(--dur-base) var(--ease-out); }
.programme-card:hover .programme-card__title,
.programme-card:focus-within .programme-card__title { color: var(--brand-primary); font-weight: var(--weight-medium); }

/* Program pages: the image top lines up with the first rule of the list.
   The copy wrapper steps aside so icon, title, list and image share one grid. */
.program-intro__copy { display: contents; }
.program-intro__grid {
  gap: 0 72px;
  grid-template-areas: "hex ." "title ." "list figure";
}
.program-intro__hex { grid-area: hex; }
.program-intro__title { grid-area: title; }
.fold-list { grid-area: list; }
.program-intro__figure { grid-area: figure; margin-top: 72px; padding-top: 0; }

/* …and the intro pins while Program Features scrolls up over it.
   --pin-top comes from js/main.js; .program-pin limits the pin to these two sections. */
@media (min-width: 901px) {
  .program-pin .program-intro { position: sticky; top: var(--pin-top, 0px); z-index: 0; }
  .program-pin .program-features { position: relative; z-index: 1; box-shadow: 0 -24px 48px rgba(5, 14, 32, 0.10); }
}
@media (max-width: 1200px) { .program-intro__grid { column-gap: 48px; } }
@media (max-width: 900px) {
  .program-intro__grid { grid-template-columns: 1fr; grid-template-areas: "hex" "title" "list" "figure"; gap: 0; }
  .program-intro__figure { margin-top: 32px; }
}

/* About: one practitioner card that cross-fades between trainers (js/main.js).
   Slides share one grid cell; the outgoing and incoming slide fade linearly together. */
.practitioner-card--rotating { grid-template-columns: 1fr; }
.practitioner-slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: 220px 1fr;
  opacity: 0; visibility: hidden;
  transition: opacity 900ms linear, visibility 0s linear 900ms;
}
.practitioner-slide.is-active { opacity: 1; visibility: visible; transition: opacity 900ms linear, visibility 0s; }
.practitioner-card__initials {
  display: grid; place-items: center; height: 100%; min-height: 290px;
  background: linear-gradient(180deg, #E4E2F4 0%, var(--brand-primary) 100%);
  color: var(--light-primary); font-family: var(--font-serif); font-size: 64px; letter-spacing: 0.04em;
}
.practitioner-dots { display: flex; justify-content: center; gap: 4px; margin-top: 20px; }
.practitioner-dot {
  width: 24px; height: 24px; padding: 8px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.35); background-clip: content-box; border-radius: 999px;
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.practitioner-dot:hover { background-color: rgba(255, 255, 255, 0.6); }
.practitioner-dot[aria-current="true"] { width: 40px; background-color: var(--light-primary); }
.practitioner-dot:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 0; }
@media (max-width: 900px) {
  .practitioner-slide { grid-template-columns: 1fr; }
  .practitioner-card__initials { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Form pages (contact, apply, brochure): the dark info card fills the rest of the
   white card beside the form; its rows spread evenly */
.form-hero__aside .info-card { display: flex; flex-direction: column; align-items: flex-start; }
.form-hero__aside .info-card .info-list { flex: 1; align-self: stretch; align-content: space-evenly; }

/* --------------------------------------------------------------------------
   29. 404 PAGE (404.html / theme 404.php)
   Left: the message. Right: a code-editor card with the query that found nothing.
   -------------------------------------------------------------------------- */
.not-found {
  min-height: 100vh; display: flex; align-items: center;
  padding: 180px 0 120px;
  background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-blue-grey) 100%);
}
.not-found__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.not-found__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--font-small); font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-primary);
}
.not-found__eyebrow svg { width: 14px; height: 14px; color: var(--brand-light); }
.not-found__title { margin-top: 24px; font-size: var(--font-display-xl); font-weight: var(--weight-semibold); line-height: 1.1; }
.not-found__text { margin-top: 24px; max-width: 560px; font-size: var(--font-intro); line-height: 1.6; color: var(--text-secondary); }
.not-found__actions { margin-top: 40px; }
.not-found__help { margin-top: 28px; font-size: var(--font-caption); color: var(--text-secondary-light); }
.not-found__help a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.not-found__help a:hover { color: var(--brand-mid); }

.not-found__query {
  margin: 0; overflow: hidden;
  background: var(--brand-alt-dark); color: #E6E8FF;
  border-radius: var(--radius-medium);
  box-shadow: 0 24px 60px rgba(1, 14, 104, 0.22);
  font: 15px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.query-card__bar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: rgba(255, 255, 255, 0.06); }
.query-card__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.query-card__bar p { margin-left: 10px; font-size: 12px; color: rgba(230, 232, 255, 0.6); }
.query-card__code { margin: 0; padding: 24px 28px; white-space: pre-wrap; word-break: break-all; }
.query-card__code--hint { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.q-kw { color: var(--brand-light); font-weight: 600; }
.q-str { color: var(--accent-lime); }
.q-comment { color: rgba(230, 232, 255, 0.5); }
.query-card__result {
  display: flex; align-items: center; gap: 10px;
  margin: 0 28px 24px; padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06); border-radius: 10px;
  font-size: 13px; color: rgba(230, 232, 255, 0.75);
}
.query-card__result svg { width: 12px; height: 12px; color: #F5B547; flex: none; }
.query-card__result strong { color: #fff; font-weight: 600; }
.query-card__caret {
  display: inline-block; width: 8px; height: 1.1em; margin-left: 4px; vertical-align: text-bottom;
  background: var(--accent-lime); animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .not-found { min-height: 0; padding: 130px 0 72px; }
  .not-found__grid { grid-template-columns: 1fr; gap: 40px; }
  .not-found__title { font-size: 40px; }
  .not-found__query { font-size: 13px; }
  .query-card__code { padding: 20px; }
  .query-card__result { margin: 0 20px 20px; }
}