/* ==========================================================================
   DocLearnings — global stylesheet
   Brand: Inter throughout, navy on warm off-white with an orange accent.
   Layout rule: every major section shares one container and one rhythm.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Brand */
  /* Orange is an ACCENT ONLY — buttons, icons, links, small tiles. It is never
     a large surface. Warm tints on big areas read as dull orange rather than
     as brand, so every ground and band below is a cool neutral instead. */
  --orange: #F4511E;
  /* Deepened from #D53F11, which sat at 4.38:1 as link text and just missed AA.
     This clears 4.5:1 on the ground, the tinted band and white. */
  --orange-dark: #C4380E;
  --orange-soft: #FFEADF;
  --navy: #0B2D4D;
  --navy-soft: #123C64;
  --ink: #24364B;
  /* Carries almost every paragraph on the site, so it is kept well above the
     AA floor: ~6.3:1 on the page ground. */
  --ink-muted: #4C5E73;
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  /* Alternating band / quiet card surface. */
  --tint: #ECF2F9;
  --border: #E3EAF2;
  --border-strong: #CBD6E2;
  --green: #169B62;

  /* A shade deeper than --tint so an icon tile still reads as a tile when it
     sits on a tinted section. */
  --sky-soft: #DDEAF8;
  --sky-ink: #17548A;

  /* Type — one family for the whole site, headings included. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* One size per heading level, used everywhere. Page titles are --h1, every
     section or block heading is --h2, and every card, panel or form heading is
     --h3. Headings never drift between the homepage, programme pages, articles
     and legal pages: set the size here, not on individual components. */
  --h1: clamp(34px, 4.2vw, 50px);
  --h2: clamp(27px, 2.9vw, 34px);
  --h3: 20px;

  /* Layout */
  --container: 1240px;
  --container-narrow: 780px;
  --gutter: 24px;
  --section-y: 64px;
  --gap: 28px;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation — deliberately restrained */
  --shadow-sm: 0 1px 2px rgba(11, 45, 77, .05);
  --shadow-md: 0 6px 20px rgba(11, 45, 77, .07);
  --shadow-lg: 0 18px 44px rgba(11, 45, 77, .10);

  --ring: 0 0 0 3px rgba(244, 81, 30, .32);
}

/* -------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute is the single source of truth for every toggled panel,
   drawer and dialog on this site, so it must beat any display rule below. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: overflow-x:hidden turns the body into a scroll container
     and stops position:sticky working inside it. clip suppresses the sideways
     overflow without creating one. hidden stays as the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--navy);
  /* Inter needs real weight and tighter tracking to carry a heading, where the
     previous display serif carried it on shape alone. */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin: 0 0 .5em;
  /* Avoids a single orphaned word on the last line of a display heading. */
  text-wrap: balance;
}

/* Baseline sizes so no heading can ever fall back to the browser default and
   drift out of the scale. Components override with --h1/--h2 as needed. */
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: 17px; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--orange); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

strong { font-weight: 600; }

button { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

/* Focus: always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top .16s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

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

.icon { flex: none; }

/* ------------------------------------------------------------ media boxes */

/* Every fixed-ratio image box on the site. The image is taken out of flow so
   that its own intrinsic ratio can never feed back and stretch the box — a
   portrait photograph in a 16:10 card must crop, not resize the card. This is
   also what keeps cards in a row exactly equal in height. */
.hero-bg,
.program-card-media,
.post-card-media,
.course-card-media,
.side-media,
.post-figure,
.story-item-media,
.alumni-media,
.video-frame {
  position: relative;
  overflow: hidden;
}

.hero-bg > img,
.program-card-media > img,
.post-card-media > img,
.course-card-media > img,
.side-media > img,
.post-figure > img,
.story-item-media > img,
.alumni-media > img,
.video-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card media must not flex-shrink or grow inside the column card layout. */
.program-card-media,
.post-card-media { flex: none; }

/* ------------------------------------------------------------------ layout */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section-alt { background: var(--tint); }
.center { text-align: center; }

.section-title {
  font-size: var(--h2);
  text-align: center;
  margin-bottom: 32px;
}
.section-title-left { text-align: left; }

.section-lead {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  color: var(--ink-muted);
}

.section-cta { display: flex; justify-content: center; margin-top: 32px; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

.block-title { font-size: var(--h2); margin-bottom: 18px; }
.block-note { font-size: 15px; color: var(--ink-muted); margin-top: 18px; }

.split-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}

.side-media {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.side-media img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------- buttons */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  min-height: 50px;
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-sm);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { --btn-bg: var(--orange); --btn-fg: #fff; --btn-bd: var(--orange); }
.btn-primary:hover { --btn-bg: var(--orange-dark); --btn-bd: var(--orange-dark); color: #fff; }

.btn-outline { --btn-bd: var(--border-strong); --btn-fg: var(--navy); --btn-bg: var(--surface); }
.btn-outline:hover { --btn-bd: var(--orange); --btn-fg: var(--orange-dark); }

.btn-ghost-light { --btn-bd: rgba(255,255,255,.45); --btn-fg: #fff; }
.btn-ghost-light:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; color: #fff; }

.btn-sm { padding: 10px 18px; min-height: 42px; font-size: 14.5px; }
.btn-block { width: 100%; }

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange-dark);
}
.status-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chip-row li { margin: 0; }
.chip {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.chip:hover { border-color: var(--orange); color: var(--orange-dark); }
.chip-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip-active:hover { color: #fff; background: var(--navy-soft); }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 76px;
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 42px; width: auto; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }
.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover { color: var(--orange-dark); background: var(--orange-soft); }
.nav-caret { transition: transform .16s ease; }
.nav-toggle-menu[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 268px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 20;
}
.nav-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 14.5px;
  text-decoration: none;
}
.nav-menu a:hover { background: var(--orange-soft); color: var(--orange-dark); }

.header-actions { display: flex; align-items: center; gap: 16px; flex: none; }

.header-advisor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.header-advisor:hover { color: var(--orange-dark); }
.header-advisor .icon { color: var(--orange); }

.header-phone { white-space: nowrap; }

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--navy);
  cursor: pointer;
}

/* Mobile drawer */
.drawer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  max-height: calc(100vh - 76px);
  overflow-y: auto;
}
.drawer-nav { padding: 18px var(--gutter) 28px; }
.drawer-list, .drawer-sub { list-style: none; margin: 0; padding: 0; }
.drawer-item { border-bottom: 1px solid var(--border); }
.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 15px 2px;
  border: 0;
  background: none;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.drawer-caret { transition: transform .18s ease; color: var(--ink-muted); }
.drawer-toggle[aria-expanded="true"] .drawer-caret { transform: rotate(180deg); }
.drawer-sub { padding: 0 2px 14px; }
.drawer-sub li { margin: 0; }
.drawer-sub a {
  display: block;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--border);
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}
.drawer-sub a:hover { border-left-color: var(--orange); color: var(--orange-dark); }
.drawer-actions { display: grid; gap: 12px; margin-top: 22px; }

/* -------------------------------------------------------------------- hero */

/* One full-bleed photograph behind the whole section. A gradient scrim keeps
   the copy side readable and lets the image show through on the other, so
   there is no hard seam between text and picture. */
.hero {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 38%;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(247, 249, 252, .98) 0%,
    rgba(247, 249, 252, .96) 30%,
    rgba(247, 249, 252, .78) 45%,
    rgba(247, 249, 252, .30) 60%,
    rgba(247, 249, 252, 0) 74%);
}

.hero > .container { position: relative; z-index: 1; }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  min-height: clamp(480px, 38vw, 620px);
  padding-block: 48px 52px;
}

.hero-visual { display: flex; justify-content: flex-end; align-items: center; }

.hero-title {
  font-size: var(--h1);
  line-height: 1.08;
  margin-bottom: 20px;
  max-width: 18ch;
}

.hero-body {
  font-size: 17.5px;
  color: var(--ink-muted);
  max-width: 52ch;
  margin-bottom: 30px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-actions-center { justify-content: center; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  list-style: none;
  margin: 38px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--border);
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  max-width: 16ch;
  line-height: 1.35;
}
.hero-proof .icon { color: var(--orange); }

/* Fact cards float over the photograph rather than over an image card. */
.hero-floats {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 208px;
}
.hero-float {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  line-height: 1.35;
}
.hero-float .icon { color: var(--orange); }
.hero-float span { display: flex; flex-direction: column; }
.hero-float strong { color: var(--navy); font-size: 13px; font-weight: 600; }
.hero-float span span { color: var(--ink-muted); }

/* --------------------------------------------------- dark hero (About page) */

.hero-dark {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}
.hero-dark-bg { position: absolute; inset: 0; z-index: 0; }
.hero-dark-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Navy scrim: dense on the left so the copy reads, thinner on the right so the
   photograph is still legible behind it. */
.hero-dark-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,45,77,.93) 0%, rgba(11,45,77,.82) 40%, rgba(11,45,77,.42) 66%, rgba(11,45,77,.22) 100%);
}

.hero-dark-inner { position: relative; z-index: 1; padding-block: 44px 52px; }
.hero-dark-title { color: #fff; font-size: var(--h1); max-width: 17ch; margin-bottom: 14px; }
.hero-dark-body { color: rgba(255,255,255,.82); font-size: 17px; max-width: 52ch; margin-bottom: 30px; }
.hero-dark .eyebrow { color: var(--orange); }

.breadcrumbs-light li { color: rgba(255,255,255,.86); }
.breadcrumbs-light a { color: rgba(255,255,255,.86); }
.breadcrumbs-light a:hover { color: #fff; }
.breadcrumbs-light li + li::before { color: rgba(255,255,255,.4); }

.hero-dark-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-dark-proof li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; color: #fff; }
.hero-dark-proof .icon { color: var(--orange); }

/* ------------------------------------------------- alternating feature split */

.feature-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}
.feature-split-reverse .feature-media { order: -1; }

.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
  margin-bottom: 20px;
}
/* --orange-soft and --peach are the same tint, so on a peach section the icon
   circle would vanish into the background. */
.section-alt .feature-icon { background: var(--surface); }

.feature-copy > p { color: var(--ink-muted); }
.feature-pull {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-top: 18px;
}

.feature-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 2;
  position: relative;
}
.feature-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- panel pair */

.panel-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.panel {
  display: flex;
  gap: 20px;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.panel-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 62px; height: 62px;
  border-radius: 50%;
}
.panel-icon-orange { background: var(--orange-soft); color: var(--orange); }
.panel-icon-navy { background: var(--sky-soft); color: var(--sky-ink); }
.panel-body { flex: 1; min-width: 0; }
.panel-body h3 { font-size: var(--h3); margin-bottom: 14px; }
.panel-body .tick-list { margin-bottom: 0; }
.panel-body .tick-list li { font-size: 15px; }

/* ------------------------------------------------------------- partner bar */

/* A continuously scrolling trust bar, and the only intentionally compact
   section on the page. The animation is pure CSS: the track holds two copies
   of the logo set and translates by exactly -50%, so the loop is seamless and
   there is no scroll position for JavaScript to manage. */
.trustbar {
  padding-block: 46px 50px;
  background: var(--surface);
  border-block: 1px solid var(--border);
}

/* Same size and treatment as every other section heading. */
.trustbar-title {
  font-size: var(--h2);
  text-align: center;
  margin-bottom: 28px;
}

.trust-marquee {
  position: relative;
  overflow: hidden;
  /* Logos fade out at both edges instead of being cut off mid-mark. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.tm-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* animation-duration is set inline per section, from the logo count. */
  animation: tm-scroll 45s linear infinite;
}

@keyframes tm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause for anyone reading it, with a mouse or with a keyboard. */
.trust-marquee:hover .tm-track,
.trust-marquee:focus-within .tm-track { animation-play-state: paused; }

/* Flush against each other: no padding, so the logos form one continuous
   running strip rather than a row of separated tiles. */
.tm-item {
  flex: 0 0 auto;
  width: 220px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 240;
  object-fit: contain;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
.tm-item:hover img { opacity: 1; filter: grayscale(0); transform: scale(1.04); }

/* --------------------------------------------------------------- programmes */

.listing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.listing-head .section-title { margin-bottom: 0; }

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

.program-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.program-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.program-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--tint);
  overflow: hidden;
}
.program-card-media img { width: 100%; height: 100%; object-fit: cover; }

.program-card-body { padding: 24px 24px 18px; flex: 1; display: flex; flex-direction: column; }

.program-card-title { font-size: var(--h3); line-height: 1.24; margin-bottom: 12px; }
.program-card-title a { color: var(--orange-dark); text-decoration: none; }
.program-card-title a:hover { text-decoration: underline; }

/* Fixed description area keeps every card footer on the same line. */
.program-card-summary {
  color: var(--ink-muted);
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.6em * 3);
}

.program-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: auto 0 0;
  padding: 0;
}
.program-meta li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.3;
}
.program-meta .icon { color: var(--orange); }
.program-meta span { display: flex; flex-direction: column; color: var(--ink-muted); }
.program-meta strong { color: var(--navy); font-weight: 600; font-size: 12.5px; }

.program-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
.program-card-arrow { color: var(--orange); display: inline-flex; transition: transform .18s ease; }
.program-card:hover .program-card-arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------- stats */

.section-stats { padding-block: 0; }

.stats-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.stat {
  margin: 0;
  padding: 34px 20px;
  text-align: center;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.stat:last-child { border-right: 0; }
.stat-icon { color: var(--orange); margin-bottom: 4px; }
.stat-value { font-family: var(--sans); font-size: clamp(26px, 2.6vw, 34px); color: var(--navy); line-height: 1.1; }
.stat-label { font-size: 14px; color: var(--ink-muted); }

/* -------------------------------------------------- learner success stories */

.story-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* exact 50/50 */
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.story-quote {
  background: var(--tint);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story-quote .section-title { margin-bottom: 20px; position: relative; }
.story-quote .section-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  background: var(--orange);
  border-radius: 2px;
  margin-top: 14px;
}
.quote-mark { color: var(--orange); opacity: .55; display: block; margin-bottom: 10px; }

.story-blockquote { margin: 0 0 26px; padding: 0; border: 0; }
.story-blockquote p { font-size: 17.5px; line-height: 1.68; color: var(--ink); }

.story-person { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.story-person img {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--surface);
  flex: none;
}
.story-person-text { display: flex; flex-direction: column; font-size: 14px; color: var(--ink-muted); line-height: 1.45; }
.story-person-text strong { font-size: 16px; color: var(--navy); font-weight: 600; }

.stars { display: inline-flex; gap: 3px; color: var(--orange); }

.story-video { display: flex; flex-direction: column; }
.video-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--navy); }
.video-frame img { width: 100%; height: 100%; object-fit: cover; }

.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--orange);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform .18s ease, background-color .18s ease;
}
.video-play:hover { transform: scale(1.07); background: #fff; color: var(--orange-dark); }

.video-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 15px 22px;
  background: var(--orange);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* ---------------------------------------------------------------- benefits */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.benefit-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Icon and title share the first row, body spans beneath: much shorter cards
   than stacking icon over title over body. */
.benefit-card {
  margin: 0;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
  row-gap: 9px;
}
.benefit-icon {
  grid-column: 1;
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: var(--orange-soft);
  color: var(--orange);
}
.benefit-icon .icon { width: 22px; height: 22px; }
.benefit-title { grid-column: 2; font-size: 17px; margin: 0; line-height: 1.3; }
.benefit-body { grid-column: 1 / -1; color: var(--ink-muted); font-size: 15px; margin: 0; }

/* ------------------------------------------------------------------ alumni */

.alumni-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* exact 50/50 */
  align-items: stretch;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.alumni-media { min-height: 0; aspect-ratio: 4 / 3; background: var(--navy); }
.alumni-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.alumni-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.alumni-body .section-title { margin-bottom: 16px; }
.alumni-text { color: var(--ink-muted); margin-bottom: 20px; }

.alumni-points {
  display: grid;
  gap: 11px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.alumni-points li { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 15px; color: var(--navy); }
.alumni-points .icon { color: var(--orange); }
.alumni-body .btn { align-self: flex-start; }

/* -------------------------------------------------------------- CTA banner */

.section-cta-banner { padding-block: 0 var(--section-y); }

.cta-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 54px 56px;
  background: var(--navy);
  border-radius: var(--r-xl);
  color: #fff;
}
.cta-motif {
  position: absolute;
  right: -110px;
  top: -140px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  opacity: .45;
  pointer-events: none;
}
.cta-motif::after {
  content: "";
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--orange);
  opacity: .6;
}
.cta-copy { position: relative; z-index: 1; max-width: 56ch; }
.cta-copy h2 { color: #fff; font-size: var(--h2); margin-bottom: 10px; }
.cta-copy p { color: rgba(255, 255, 255, .82); margin: 0; }
.cta-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--navy); color: rgba(255, 255, 255, .78); }

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-block: 60px 48px;
}

.footer-brand .brand-logo { height: 40px; margin-bottom: 20px; }
.footer-blurb { font-size: 14.5px; line-height: 1.65; margin-bottom: 22px; max-width: 30ch; }

.footer-socials { display: flex; gap: 10px; }
.social {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  transition: background-color .16s ease, border-color .16s ease;
}
.social:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

.footer-heading {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: rgba(255, 255, 255, .78); font-size: 14.5px; text-decoration: none; line-height: 1.5; display: inline-block; }
.footer-col a:hover { color: #fff; text-decoration: underline; }

.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.footer-contact .icon { color: var(--orange); margin-top: 2px; }

.footer-legal { border-top: 1px solid rgba(255, 255, 255, .14); }
.footer-legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
}
.footer-legal p { margin: 0; font-size: 13.5px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal-links a { color: rgba(255, 255, 255, .78); font-size: 13.5px; text-decoration: none; }
.footer-legal-links a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------- page hero */

.page-hero { background: var(--tint); padding-block: 56px 48px; border-bottom: 1px solid var(--border); }
.page-hero-tight { padding-block: 48px 40px; }
.page-hero-title { font-size: var(--h1); margin-bottom: 16px; max-width: 20ch; }
.center .page-hero-title { margin-inline: auto; }
.page-hero-body { font-size: 17.5px; color: var(--ink-muted); max-width: 62ch; margin: 0; }
.center .page-hero-body { margin-inline: auto; }
.center .page-hero-body + .hero-actions { margin-top: 28px; }

.breadcrumbs { margin-bottom: 20px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.breadcrumbs li { margin: 0; color: var(--ink-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--border-strong); }
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--orange-dark); text-decoration: underline; }

.success-badge {
  display: inline-grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(22, 155, 98, .12);
  color: var(--green);
  margin-bottom: 22px;
}

/* ------------------------------------------------------------------- prose */

.prose { font-size: 17px; }
.prose h2 { font-size: var(--h2); margin-top: 1.7em; margin-bottom: .55em; }
.prose h2:first-child, .prose .block-title:first-child { margin-top: 0; }
.prose h3 { font-size: var(--h3); margin-top: 1.5em; margin-bottom: .5em; }
.prose ul, .prose ol { margin-bottom: 1.3em; }
.prose li { margin-bottom: .55em; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 20px 26px;
  border-left: 3px solid var(--orange);
  background: var(--tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.prose blockquote p { font-size: 18px; margin: 0; }

.legal { font-size: 16.5px; }
.legal h2 { font-size: var(--h2); margin-top: 2em; }
.legal-updated { font-size: 14px; color: var(--ink-muted); margin: 0; }

.tick-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.tick-list li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; font-size: 15.5px; line-height: 1.55; }
.tick-list .icon { color: var(--green); margin-top: 4px; }
.tick-list-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }

/* ------------------------------------------------------------- accordion */

.accordion { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.accordion-item + .accordion-item { border-top: 1px solid var(--border); }
.accordion-heading { margin: 0; font-family: var(--sans); }

.accordion-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 19px 22px;
  border: 0;
  background: none;
  color: var(--navy);
  font-size: 16.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.accordion-trigger:hover { background: var(--bg); }
.accordion-trigger > span { text-align: left; }
/* Only the label fills the row. In the curriculum variant the module number
   sits before it and must keep its intrinsic width. */
.accordion-label { flex: 1; }
.accordion-caret { margin-left: auto; color: var(--orange); transition: transform .18s ease; }
.accordion-trigger[aria-expanded="true"] .accordion-caret { transform: rotate(180deg); }

.accordion-panel { padding: 0 22px 20px; color: var(--ink-muted); font-size: 16px; }
.accordion-panel p { margin: 0; }

.faq-group { margin-bottom: 36px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title { font-size: var(--h2); margin-bottom: 18px; }

/* --------------------------------------------------------- programme page */

.course-shell { padding-block: 28px var(--section-y); }

/* One 12-column grid for the whole page. The sidebar starts on row 1, level
   with the H1, and spans down past the body content, which is what lets the
   card stay sticky the whole way instead of being split into a hero image up
   top and a form somewhere below. */
.course-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 40px;
  align-items: start;
}
.course-hero-col { grid-column: 1 / 9; padding-bottom: 34px; }
.course-main     { grid-column: 1 / 9; }
.course-sidebar  { grid-area: 1 / 9 / span 2 / 13; align-self: stretch; }

.course-title { font-size: var(--h1); margin-bottom: 14px; }
.course-summary { font-size: 17.5px; color: var(--ink-muted); max-width: 56ch; margin-bottom: 26px; }

.gain-box {
  margin-top: 26px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.gain-title { font-size: var(--h3); margin-bottom: 14px; }
.gain-box .tick-list { margin-bottom: 0; }

/* ---- sticky enrolment card ---- */

.course-card {
  position: sticky;
  top: 96px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.course-card-media { aspect-ratio: 3 / 2; background: var(--tint); }
.course-card-body { padding: 22px; }

.course-card-fee {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 25px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.course-card-fee span { font-size: 13px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.course-card-status { margin-bottom: 16px; }
.course-card .btn { margin-bottom: 10px; }

.course-card-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 11px;
}
.course-card-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--navy); }
.course-card-list .icon { color: var(--orange); margin-top: 1px; }
.course-card-note { font-size: 12.5px; color: var(--ink-muted); margin-top: 14px; }

.fact-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 30px;
  padding: 22px 0 0;
  border-top: 1px solid var(--border-strong);
}
.fact-row li { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 14.5px; color: var(--navy); line-height: 1.4; }
.fact-row li > .icon { color: var(--orange); margin-top: 2px; }
.fact-row li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact-row strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.course-main > .prose-block + .prose-block { margin-top: 40px; }
.prose-block > p { color: var(--ink-muted); }
.prose-block .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.curriculum { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.curriculum-item { margin: 0; }
.curriculum-item + .curriculum-item { border-top: 1px solid var(--border); }
.curriculum-heading { margin: 0; font-family: var(--sans); }
.curriculum-num {
  font-family: var(--sans);
  font-size: 17px;
  color: var(--orange);
  min-width: 30px;
}
.curriculum-panel { padding-top: 4px; }
.curriculum-panel .tick-list { margin-bottom: 0; }
.curriculum-panel .tick-list li { font-size: 15px; margin-bottom: 9px; }

/* ---- course fee ---- */

.fee-band {
  text-align: center;
  padding: 26px 24px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 0;
}
.fee-amt {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.fee-gst { font-size: 15px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; margin-left: 8px; }
.fee-sub { font-size: 14.5px; color: var(--ink-muted); margin: 0; }

.fee-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.fee-plan-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--orange-soft);
  color: var(--orange);
}
.fee-plan-body { flex: 1; min-width: 220px; }
.fee-plan-body h3 { font-size: 17px; margin-bottom: 4px; }
.fee-plan-body p { font-size: 14.5px; color: var(--ink-muted); margin: 0; }

/* ---- certificate ---- */

.cert-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.cert-shot {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cert-shot:hover { border-color: var(--orange); box-shadow: var(--shadow-md); }
.cert-shot img { width: 100%; height: auto; display: block; }
.cert-card-body h3 { font-size: var(--h3); margin-bottom: 10px; }
.cert-card-body p { font-size: 15px; color: var(--ink-muted); }

/* ---- related programmes: a compact list, not a second catalogue ---- */

.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.related-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 12px 16px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.related-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.related-media {
  flex: none;
  width: 68px; height: 68px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--tint);
}
.related-media img { width: 100%; height: 100%; object-fit: cover; }
.related-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.related-title { font-size: 16px; font-weight: 600; color: var(--navy); text-decoration: none; line-height: 1.3; }
.related-title:hover { color: var(--orange-dark); text-decoration: underline; }
.related-meta { font-size: 13.5px; color: var(--ink-muted); }
.related-arrow { flex: none; color: var(--orange); display: inline-flex; transition: transform .18s ease; }
.related-item:hover .related-arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------- steps */

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step {
  margin: 0;
  padding: 28px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.step-num {
  display: block;
  font-family: var(--sans);
  font-size: 26px;
  color: var(--orange);
  margin-bottom: 12px;
}
.step h3 { font-size: var(--h3); margin-bottom: 8px; }
.step p { color: var(--ink-muted); font-size: 15px; margin: 0; }

.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.mini-steps li { display: flex; gap: 13px; margin: 0; font-size: 15px; line-height: 1.55; }
.mini-steps li > span:first-child {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ tables */

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.compare-table { min-width: 640px; font-size: 15.5px; }
.compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare-table thead th {
  background: var(--tint);
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.compare-table tbody th { font-weight: 600; color: var(--navy); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td { color: var(--ink-muted); }

/* -------------------------------------------------------- contact / forms */

.contact-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 52px; align-items: start; }
.apply-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: start; }

.contact-cards { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; }
.contact-card {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.contact-icon {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--orange-soft);
  color: var(--orange);
}
.contact-card h3 { font-size: var(--h3); margin-bottom: 4px; }
.contact-card p { margin: 0; font-size: 15.5px; }
.contact-note { font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; }

.info-panel {
  padding: 26px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.info-panel + .info-panel { margin-top: 20px; }
.info-panel-quiet { background: var(--surface); }
.info-panel h3 { font-size: var(--h3); margin-bottom: 12px; }
.info-panel p { font-size: 15px; color: var(--ink-muted); }
.info-panel .tick-list { margin-bottom: 0; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 34px;
  box-shadow: var(--shadow-md);
}
.form-card-compact { padding: 26px; }
.form-title { font-size: var(--h3); margin-bottom: 8px; }
.form-intro { font-size: 15px; color: var(--ink-muted); margin-bottom: 24px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.form-card-compact .form-grid { grid-template-columns: minmax(0, 1fr); }
.field-full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: 14px; font-weight: 600; color: var(--navy); }
.req { color: var(--orange); }
.opt { font-weight: 400; color: var(--ink-muted); font-size: 13px; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input::placeholder, .field textarea::placeholder { color: #9AA7B4; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: var(--ring);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #C62828;
}

.select-wrap { position: relative; display: block; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }

.field-check { flex-direction: row; align-items: flex-start; gap: 11px; flex-wrap: wrap; }
.field-check input { width: 19px; height: 19px; flex: none; margin-top: 3px; accent-color: var(--orange); }
.field-check label { font-size: 14px; font-weight: 400; color: var(--ink-muted); line-height: 1.5; flex: 1; min-width: 0; }
.field-check .field-error { flex-basis: 100%; }

.field-error { margin: 0; font-size: 13px; color: #C62828; font-weight: 500; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin: 16px 0 0; font-size: 15px; font-weight: 500; }
.form-status[data-state="error"] { color: #C62828; }
.form-status[data-state="success"] { color: var(--green); }

.form-fallback { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-muted); }

/* --------------------------------------------------------------- listings */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.post-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.post-card-media { aspect-ratio: 16 / 10; background: var(--tint); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 24px 24px 12px; flex: 1; }
.post-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.post-title { font-size: var(--h3); line-height: 1.3; margin-bottom: 10px; }
.post-title a { color: var(--navy); text-decoration: none; }
.post-title a:hover { color: var(--orange-dark); text-decoration: underline; }
.post-excerpt { color: var(--ink-muted); font-size: 15px; margin: 0; }
.post-meta {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-muted);
}

.link-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.link-card {
  margin: 0;
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.link-card h3 { font-size: var(--h3); margin-bottom: 8px; }
.link-card h3 a { color: var(--navy); text-decoration: none; }
.link-card h3 a:hover { color: var(--orange-dark); text-decoration: underline; }
.link-card p { color: var(--ink-muted); font-size: 15px; margin: 0; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.testimonial-card blockquote { margin: 16px 0 22px; padding: 0; border: 0; flex: 1; }
.testimonial-card blockquote p { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0; }
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.testimonial-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.testimonial-person span { display: flex; flex-direction: column; font-size: 13.5px; color: var(--ink-muted); }
.testimonial-person strong { font-size: 15px; color: var(--navy); font-weight: 600; }

/* Learner story list */
.story-list { display: grid; gap: 32px; }
.story-item {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  scroll-margin-top: 110px;
}
.story-item-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1 / 1; background: var(--tint); }
.story-item-media img { width: 100%; height: 100%; object-fit: cover; }
.story-item-title { font-size: var(--h2); margin-bottom: 8px; }
.story-item-person { font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.story-item-program { font-size: 14.5px; margin-bottom: 18px; }
.story-item blockquote { margin: 0 0 18px; padding: 16px 22px; border-left: 3px solid var(--orange); background: var(--tint); border-radius: 0 var(--r-md) var(--r-md) 0; }
.story-item blockquote p { font-size: 16.5px; margin: 0; }
.story-item > .story-item-body > p:last-child { color: var(--ink-muted); margin: 0; }

/* Webinars */
.webinar-group { margin-bottom: 44px; }
.webinar-group:last-child { margin-bottom: 0; }
.webinar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.webinar-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  margin: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.webinar-date {
  display: grid;
  place-items: center;
  padding: 14px 8px;
  background: var(--tint);
  border-radius: var(--r-md);
  text-align: center;
}
.webinar-day { font-family: var(--sans); font-size: 28px; color: var(--navy); line-height: 1; }
.webinar-month { font-size: 12.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.webinar-body h3 { font-size: var(--h3); margin-bottom: 6px; }
.webinar-body p { color: var(--ink-muted); font-size: 15px; margin-bottom: 10px; }
.webinar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; color: var(--ink-muted); margin: 0 !important; }
.webinar-meta .icon { color: var(--orange); }
.webinar-past { font-size: 13.5px; color: var(--ink-muted); }

/* Careers */
.career-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.career-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.career-body { flex: 1; min-width: 260px; }
.career-body h3 { font-size: var(--h3); margin-bottom: 8px; }
.career-body p:last-child { color: var(--ink-muted); font-size: 15px; margin: 0; }
.career-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--ink-muted); margin-bottom: 10px; }
.career-meta span { display: inline-flex; align-items: center; gap: 7px; }
.career-meta .icon { color: var(--orange); }

/* --------------------------------------------------------------- blog post */

.post-hero { background: var(--tint); padding-block: 48px 40px; border-bottom: 1px solid var(--border); }
.post-hero .page-hero-title { max-width: 24ch; }
.post-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14.5px; color: var(--ink-muted); margin: 0; }

.post-figure {
  margin: -40px 0 40px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  background: var(--surface);
}
.post-figure img { width: 100%; height: 100%; object-fit: cover; }

.post-body { padding-bottom: 44px; }
.post-lead { font-size: 19.5px; line-height: 1.62; color: var(--navy); margin-bottom: 1.4em; }

.post-aside {
  padding: 34px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin-bottom: var(--section-y);
}
.post-aside h2 { font-size: var(--h2); margin-bottom: 10px; }
.post-aside p { color: var(--ink-muted); margin-bottom: 22px; }

.post-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-grid-3 .post-card-body { padding-bottom: 24px; }

/* ------------------------------------------------------------- video modal */

.video-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 45, 77, .78); border: 0; }
.video-modal-dialog {
  position: relative;
  width: min(980px, 100%);
  background: var(--navy);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.video-modal-head h2 { color: #fff; font-size: 18px; margin: 0; }
.video-modal-close {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
}
.video-modal-close:hover { background: rgba(255,255,255,.14); }
.video-modal-frame { aspect-ratio: 16 / 9; background: #000; }
.video-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
body.modal-open { overflow: hidden; }

/* ---- generic dialog (programme enquiry) ---- */

.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11, 45, 77, .62); border: 0; }
.modal-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: var(--h3); margin: 0; }
.modal-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px; height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.modal-close:hover { border-color: var(--orange); color: var(--orange-dark); }
.modal-body { padding: 22px 24px 24px; overflow-y: auto; }

/* The form fills the dialog, so it drops its own card chrome. */
.form-card-flush { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.form-card-flush .form-grid { grid-template-columns: minmax(0, 1fr); }

/* ================================================================ responsive */

@media (max-width: 1180px) {
  .course-layout { column-gap: 28px; }
  .footer-inner { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
  .hero-floats { width: 188px; }
}

@media (max-width: 1024px) {
  :root { --section-y: 52px; --gap: 22px; }

  .main-nav, .header-actions { display: none; }
  .nav-burger { display: inline-flex; }
  .header-inner { justify-content: space-between; min-height: 68px; }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    min-height: 0;
    padding-block: 40px 44px;
  }
  .hero-title { max-width: 16ch; }

  /* One column, so the scrim runs top-to-bottom instead of left-to-right and
     the copy stays readable across the whole image. */
  .hero-bg img { object-position: 76% 30%; }
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(247, 249, 252, .96) 0%,
      rgba(247, 249, 252, .93) 55%,
      rgba(247, 249, 252, .88) 100%);
  }

  .hero-visual { justify-content: flex-start; }
  .hero-floats {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .hero-float { box-shadow: var(--shadow-sm); }

  .program-grid, .post-grid, .post-grid-3, .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-grid, .link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-right: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--border); }

  .story-split, .alumni-split { grid-template-columns: minmax(0, 1fr); }
  .story-quote { padding: 36px 28px; }
  .story-video { order: 2; }
  .video-frame { aspect-ratio: 16 / 9; }
  .alumni-media { aspect-ratio: 16 / 10; }
  .alumni-body { padding: 36px 28px; }

  .split-2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Image above copy in both directions, so the reading order stays consistent. */
  .feature-split-reverse .feature-media { order: 0; }
  .feature-split .feature-media { order: -1; }
  .panel-pair { grid-template-columns: minmax(0, 1fr); }
  .hero-dark-inner { padding-block: 36px 42px; }
  .hero-dark-bg::after {
    background: linear-gradient(180deg, rgba(11,45,77,.92) 0%, rgba(11,45,77,.86) 60%, rgba(11,45,77,.9) 100%);
  }
  .course-layout { grid-template-columns: minmax(0, 1fr); }
  .course-hero-col { grid-column: 1; order: 1; padding-bottom: 24px; }
  .course-sidebar { grid-area: auto / 1; align-self: auto; order: 2; margin-bottom: 32px; }
  .course-main { grid-column: 1; order: 3; }
  .course-card { position: static; top: auto; }
  .cert-card { grid-template-columns: minmax(0, 1fr); }
  .prose-block .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-split, .apply-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .steps, .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-item { grid-template-columns: 200px minmax(0, 1fr); gap: 26px; }
  .webinar-item { grid-template-columns: 80px minmax(0, 1fr); }
  .webinar-action { grid-column: 2; }

  .cta-banner { padding: 42px 34px; }
  .footer-inner { padding-block: 56px 44px; }
}

@media (max-width: 720px) {
  :root { --section-y: 44px; --gutter: 20px; }

  body { font-size: 16px; }

  /* Sizes come from the --h1/--h2 clamps, which already bottom out correctly
     on small screens. Only the rhythm and measure change here. */
  .section-title { margin-bottom: 26px; }
  .hero-title { max-width: none; }
  .hero-body, .page-hero-body { font-size: 16.5px; }

  .hero-actions { gap: 12px; }
  .hero-actions .btn { flex: 1 1 100%; }

  .hero-proof { gap: 14px; }
  .hero-proof li { flex: 1 1 100%; max-width: none; }

  .hero-floats { grid-template-columns: minmax(0, 1fr); }
  .hero-float { justify-content: flex-start; }

  .program-grid, .program-grid-2, .post-grid, .post-grid-3,
  .testimonial-grid, .benefit-grid, .benefit-grid-2, .link-cards,
  .steps, .steps-4, .tick-list-2 { grid-template-columns: minmax(0, 1fr); }
  .prose-block .benefit-grid { grid-template-columns: minmax(0, 1fr); }

  .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-right: 1px solid var(--border); padding: 26px 14px; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .stat:last-child { grid-column: 1 / -1; border-right: 0; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card { padding: 24px 20px; }

  .story-quote, .alumni-body { padding: 28px 22px; }
  .story-item { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .story-item-media { max-width: 220px; }

  .webinar-item { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .webinar-date { justify-self: start; padding: 10px 18px; display: flex; align-items: baseline; gap: 8px; }
  .webinar-action { grid-column: 1; }

  .cta-banner { padding: 34px 24px; flex-direction: column; align-items: flex-start; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 auto; }
  .cta-motif { right: -150px; top: -180px; }

  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 46px 36px; }
  .footer-blurb { max-width: none; }
  .footer-legal-inner { flex-direction: column; align-items: flex-start; }

  .tm-item { width: 168px; }
  .trustbar { padding-block: 36px 40px; }
  .post-figure { margin-top: -24px; }
  .post-lead { font-size: 17.5px; }
  .accordion-trigger { padding: 16px 18px; font-size: 15.5px; }
  .accordion-panel { padding: 0 18px 18px; font-size: 15.5px; }
  .fact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-play { width: 62px; height: 62px; }
  .container-narrow { max-width: none; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* No auto-scroll. The logo bar becomes a plain horizontally scrollable strip
     the visitor drives themselves, and the duplicate set is dropped so it is
     not read or scrolled through twice. */
  .tm-track { animation: none; width: auto; }
  .trust-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tm-item[aria-hidden="true"] { display: none; }
  .btn:hover, .program-card:hover, .post-card:hover, .video-play:hover { transform: none; }
}

/* ------------------------------------------------------------------- print */

@media print {
  .site-header, .site-footer, .section-cta-banner, .video-modal { display: none !important; }
  .tm-track { animation: none; }
  body { background: #fff; font-size: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}