/* =========================================================================
   HELP Academy — website stylesheet
   Layout concept: floating pill navigation over light, image-led sections;
   white / pale-blue rhythm, navy type, blue calls to action, violet & cyan
   used sparingly as accents. Palette below is the project's chosen website
   palette (not an official brand guideline).
   ========================================================================= */

:root {
  /* Colour */
  --blue: #3F86B5;          /* primary blue: accents, icons, focus */
  --blue-cta: #1C6A8C;      /* button fill (AA contrast with white text) */
  --blue-cta-hover: #175A78;
  --blue-ink: #175A78;      /* link text on white (AA) */
  --navy: #142C5C;
  --purple: #1A3A6E;
  --violet: #6FA3D6;
  --light-blue: #BFD8EE;
  --cyan: #BFD8EE;
  --lavender: #3F86B5;
  --pale: #E6EEF6;
  --pale-2: #F3F4F6;
  --white: #FFFFFF;
  --text: #142C5C;
  --muted: #48586B;
  --line: rgba(20,44,92, 0.10);
  --line-strong: rgba(20,44,92, 0.18);
  --danger: #C62340;
  --danger-bg: #FFF1F3;
  --success: #0F7A4E;
  --success-bg: #EAF8F1;
  --warn-bg: #FFF7E6;
  --warn: #8A5300;

  --grad-hero: linear-gradient(135deg, #3F86B5 0%, #6FA3D6 55%, #1A3A6E 100%);
  --grad-soft: linear-gradient(135deg, #E6EEF6 0%, #BFD8EE 100%);
  --grad-cta: linear-gradient(120deg, #1C6A8C 0%, #1C6A8C 60%, #1A3A6E 100%);

  /* Type */
  --font: "Inter", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-2xl: clamp(2.375rem, 1.4rem + 3.4vw, 3.75rem);

  /* Shape & depth */
  --r-card: 24px;
  --r-img: 28px;
  --r-sm: 20px;
  --r-input: 14px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20,44,92, 0.06), 0 2px 8px rgba(20,44,92, 0.04);
  --shadow: 0 10px 30px -12px rgba(20,44,92, 0.18), 0 2px 6px rgba(20,44,92, 0.05);
  --shadow-lg: 0 30px 60px -25px rgba(20,44,92, 0.35);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 88px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html[data-lang="zh"] body { line-height: 1.8; letter-spacing: 0.01em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-underline-offset: 3px; }
a:hover { color: var(--purple); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; text-wrap: balance; letter-spacing: -0.02em; }
html[data-lang="zh"] h1, html[data-lang="zh"] h2, html[data-lang="zh"] h3 { line-height: 1.3; letter-spacing: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* Language visibility: duplicated EN / 中文 content */
html:not([data-lang="zh"]) [data-lang="zh"],
html:not([data-lang="ms"]) [data-lang="ms"],
html[data-lang="zh"] [data-lang="en"],
html[data-lang="ms"] [data-lang="en"] { display: none !important; }

.sr-only { 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: 16px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--r-pill); text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--blue-cta); color: #fff; box-shadow: 0 8px 20px -10px rgba(28,106,140, .8); }
.btn-primary:hover { background: var(--blue-cta-hover); color: #fff; transform: translateY(-1px); }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue-ink); transform: translateY(-1px); }
.btn-soft { background: var(--pale); color: var(--navy); }
.btn-soft:hover { background: #D6E4F0; color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--cyan); color: var(--navy); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: var(--fs-xs); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; color: var(--blue-ink); min-height: 44px; }
.text-link:hover { color: var(--purple); }
.text-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Pills & badges ---------- */
.intake-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px; border-radius: 22px; line-height: 1.35;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: var(--fs-xs); font-weight: 700; color: var(--navy);
}
.intake-pill > span:not(.dot) { min-width: 0; }
.intake-pill .dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: rgba(63,134,181,.14); flex: none; }
.intake-pill .dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--blue); }
.intake-pill.is-past .dot { background: rgba(20,44,92,.08); }
.intake-pill.is-past .dot::after { background: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .intake-pill:not(.is-past) .dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(63,134,181,.35); animation: ping 2s var(--ease) infinite; }
}
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .02em;
  background: var(--pale); color: var(--purple);
}
.tag-violet { background: rgba(111,163,214,.12); color: #175A78; }
.tag-cyan { background: var(--cyan); color: var(--navy); }
.tag-outline { background: #fff; border: 1px solid var(--line); color: var(--navy); }
.tag-planned { background: #E6F0F8; color: #175A78; border: 1px dashed rgba(111,163,214,.5); }

.eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 12px; }
html[data-lang="zh"] .eyebrow { letter-spacing: .12em; }

/* ---------- Header / navigation ---------- */
.site-header { position: sticky; top: 12px; z-index: 100; padding-inline: var(--gutter); margin-top: 12px; }
.nav-shell {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px 8px 8px 22px;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm); transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled .nav-shell { box-shadow: var(--shadow); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; min-height: 44px; }
.logo-mark { width: 34px; height: 34px; border-radius: 11px; background: var(--grad-hero); display: grid; place-items: center; color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: .02em; flex: none; }
.logo b { font-weight: 700; }
.logo span.light { font-weight: 400; color: var(--muted); }

.main-nav { margin-inline: auto; }
.main-nav > ul { list-style: none; display: flex; align-items: center; gap: 2px; }
.main-nav a, .dd-toggle {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: var(--r-pill); text-decoration: none; color: var(--navy); font-size: var(--fs-sm); white-space: nowrap;
  background: none; border: 0; cursor: pointer; transition: background .2s, color .2s;
}
.main-nav a:hover, .dd-toggle:hover { background: var(--pale-2); color: var(--navy); }
.main-nav a[aria-current="page"] { background: var(--pale); font-weight: 700; }
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd > a { padding-right: 6px; }
.dd-toggle { padding: 8px 10px 8px 4px; }
.dd-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.dd-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 240px;
  list-style: none; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s, transform .18s, visibility .18s;
}
.dd-menu a { display: flex; width: 100%; border-radius: 12px; }
.nav-dd.is-open .dd-menu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1321px) {
  .nav-dd:hover .dd-menu { opacity: 1; visibility: visible; transform: none; }
}

.nav-actions { display: flex; align-items: center; gap: 8px; }
.lang-switch { display: inline-flex; align-items: center; padding: 3px; border-radius: var(--r-pill); background: var(--pale-2); border: 1px solid var(--line); }
.lang-switch button {
  min-height: 38px; min-width: 44px; padding: 6px 10px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
}
.lang-switch .sep { color: var(--light-blue); font-size: var(--fs-xs); padding-inline: 1px; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

.menu-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }

.mobile-panel {
  display: none; max-width: var(--container); margin: 10px auto 0; padding: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-panel ul { list-style: none; display: grid; gap: 2px; }
.mobile-panel a { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: 14px; text-decoration: none; color: var(--navy); font-weight: 700; }
.mobile-panel a:hover { background: var(--pale-2); }
.mobile-panel a[aria-current="page"] { background: var(--pale); }
.mobile-panel .sub a { font-weight: 400; padding-left: 30px; color: var(--muted); }
.mobile-panel .panel-foot { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mobile-panel .panel-foot .lang-switch { justify-self: start; }

@media (max-width: 1320px) {
  .main-nav, .nav-actions .nav-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-actions { margin-left: auto; }
  .site-header.menu-open .mobile-panel { display: block; }
}
@media (max-width: 520px) {
  .nav-actions .lang-switch button { min-width: 40px; padding-inline: 8px; }
  .nav-shell { gap: 8px; }
}
@media (max-width: 340px) {
  .nav-actions .lang-switch { display: none; }
}

/* ---------- Sections ---------- */
main { display: block; }
.section { padding-block: clamp(64px, 8vw, 112px); }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }
.section-alt { background: var(--pale-2); }
.section-pale { background: var(--pale); }
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head h2 { font-size: var(--fs-xl); }
.section-head .lead { font-size: var(--fs-md); color: var(--muted); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(32px, 4vw, 52px); }
.head-row .section-head { margin-bottom: 0; }

/* Page hero (inner pages) */
.page-hero { padding-block: clamp(40px, 6vw, 72px) clamp(40px, 6vw, 64px); }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.page-hero h1 { font-size: clamp(2.125rem, 1.3rem + 3.2vw, 3.5rem); margin-bottom: 18px; }
.page-hero .lead { font-size: var(--fs-md); color: var(--muted); max-width: 560px; }
.page-hero .btn-row { margin-top: 28px; }
.page-hero .intake-pill { margin-bottom: 20px; }
.crumbs { display: flex; gap: 8px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }

/* ---------- Media ---------- */
.media { position: relative; border-radius: var(--r-img); overflow: hidden; background: var(--grad-soft); isolation: isolate; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.ratio-4x3 { aspect-ratio: 4 / 3; }
.media.ratio-3x2 { aspect-ratio: 3 / 2; }
.media.ratio-16x10 { aspect-ratio: 16 / 10; }
.media.ratio-1x1 { aspect-ratio: 1 / 1; }
.media.ratio-4x5 { aspect-ratio: 4 / 5; }
.img-note {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(20,44,92,.62); color: #fff; font-size: 0.6875rem; font-weight: 400; letter-spacing: .02em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Fallback when a photo cannot load */
.img-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.35) 0 18%, transparent 19%),
    radial-gradient(circle at 85% 80%, rgba(191,216,238,.5) 0 22%, transparent 23%),
    var(--grad-hero);
  color: #fff; font-weight: 700; font-size: var(--fs-sm);
}
.img-fallback small { display: block; font-weight: 400; opacity: .85; margin-top: 4px; font-size: var(--fs-xs); }

/* ---------- Home hero ---------- */
.hero { position: relative; padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; z-index: -1;
  background: radial-gradient(closest-side, rgba(191,216,238,.9), rgba(230,238,246,.6) 50%, transparent 72%);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: var(--fs-2xl); margin-block: 22px 22px; }
.hero h1 .line { display: block; }
.hero h1 .grad { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--muted); max-width: 520px; }
.hero .btn-row { margin-top: 32px; }
.hero-visual { position: relative; }
.hero-visual .media { aspect-ratio: 4 / 4.6; box-shadow: var(--shadow-lg); }
.hero-card {
  position: absolute; z-index: 3; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow);
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
}
.hero-card .big { font-size: 1.75rem; font-weight: 700; line-height: 1; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-card small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.hero-card strong { display: block; font-size: var(--fs-sm); line-height: 1.3; }
.hero-card.c1 { left: -28px; bottom: 56px; }
.hero-visual .img-note { top: 14px; bottom: auto; }
.hero-card.c2 { right: -18px; top: 36px; }
.hero-card .icon { width: 40px; height: 40px; border-radius: 12px; background: var(--pale); display: grid; place-items: center; color: var(--blue); flex: none; }
.hero-card .icon svg { width: 20px; height: 20px; }

/* ---------- Fact strip ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fact { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; display: grid; gap: 6px; align-content: start; }
.fact .label { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
html[data-lang="zh"] .fact .label { letter-spacing: .08em; }
.fact .value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.fact .note { font-size: var(--fs-sm); color: var(--muted); }
.fact .icon { width: 44px; height: 44px; border-radius: 14px; background: var(--pale); color: var(--blue); display: grid; place-items: center; margin-bottom: 8px; }
.fact .icon svg { width: 22px; height: 22px; }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }

.prog-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.prog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.prog-card .media { border-radius: 0; aspect-ratio: 16 / 10; }
.prog-card .body { padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.prog-card h3 { font-size: var(--fs-lg); }
.prog-card .desc { color: var(--muted); }
.prog-card .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.prog-card .actions { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.reverse > :first-child { order: 2; }
.split h2 { font-size: var(--fs-xl); margin-bottom: 16px; }
.split .lead { color: var(--muted); font-size: var(--fs-md); }
.split .btn-row { margin-top: 28px; }

.check-list { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.check-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.check-list .ck { width: 28px; height: 28px; border-radius: 50%; background: var(--pale); color: var(--blue); display: grid; place-items: center; }
.check-list .ck svg { width: 15px; height: 15px; }

.loc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.loc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: var(--fs-sm); }
.loc-chip svg { width: 18px; height: 18px; color: var(--blue); flex: none; }

.mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.mosaic .media:first-child { grid-row: span 2; }
.mosaic .media { min-height: 180px; }

/* Facility cards */
.facility { overflow: hidden; display: flex; flex-direction: column; }
.facility .media { border-radius: 0; aspect-ratio: 4 / 3; }
.facility .body { padding: 20px 22px 24px; display: grid; gap: 6px; }
.facility h3 { font-size: var(--fs-md); }
.facility p { color: var(--muted); font-size: var(--fs-sm); }

/* Diploma (planned) cards */
.diploma { overflow: hidden; display: flex; flex-direction: column; border-style: dashed; border-color: rgba(111,163,214,.35); }
.diploma .media { border-radius: 0; aspect-ratio: 16 / 10; }
.diploma .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.diploma h3 { font-size: var(--fs-md); }
.diploma p { color: var(--muted); font-size: var(--fs-sm); }
.diploma .text-link { margin-top: auto; }
.disclaimer { font-size: var(--fs-xs); color: var(--muted); margin-top: 22px; max-width: 780px; }

/* International students band */
.intl-band { position: relative; border-radius: calc(var(--r-card) + 8px); overflow: hidden; background: var(--navy); color: #fff; display: grid; grid-template-columns: 1fr 1fr; }
.intl-band .content { padding: clamp(32px, 5vw, 64px); display: grid; gap: 16px; align-content: center; }
.intl-band h2 { font-size: var(--fs-xl); }
.intl-band p { color: #D3DEEA; }
.intl-band .eyebrow { color: var(--cyan); }
.intl-band .media { border-radius: 0; min-height: 320px; }
.intl-band .check-list .ck { background: rgba(255,255,255,.12); color: var(--cyan); }
.intl-band .check-list li { color: #E9EEF4; }

/* Orientation teaser */
.orient { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--r-card) + 4px); background: var(--grad-soft); border: 1px solid var(--line); }
.date-block { width: 132px; border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow); overflow: hidden; text-align: center; }
.date-block .m { background: var(--grad-hero); color: #fff; font-weight: 700; font-size: var(--fs-xs); letter-spacing: .12em; padding: 8px 0; }
.date-block .d { font-size: 3rem; font-weight: 700; line-height: 1; padding: 14px 0 4px; }
.date-block .y { font-size: var(--fs-sm); color: var(--muted); padding-bottom: 14px; }
.orient h2 { font-size: var(--fs-lg); margin-bottom: 8px; }
.orient p { color: var(--muted); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: calc(var(--r-card) + 8px); padding: clamp(36px, 6vw, 72px); background: var(--grad-cta); color: #fff; display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center; }
.cta-band::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(191,216,238,.35), transparent); pointer-events: none; }
.cta-band h2 { font-size: var(--fs-xl); margin-bottom: 10px; }
.cta-band p { color: #E1EAF3; max-width: 560px; }
.cta-band .btn-row { position: relative; z-index: 1; }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.news-card { overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.news-card .media { border-radius: 0; aspect-ratio: 16 / 9; }
.news-card .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.news-card h3 { font-size: var(--fs-md); }
.news-card p { color: var(--muted); font-size: var(--fs-sm); }
.news-card .text-link { margin-top: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-btn { min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: #fff; color: var(--navy); font-size: var(--fs-sm); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.filter-btn .count { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.filter-btn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.filter-btn[aria-pressed="true"] .count { color: var(--light-blue); }
.empty-state { padding: 40px 28px; text-align: center; border-radius: var(--r-card); border: 1px dashed var(--line-strong); color: var(--muted); background: #fff; }
.empty-state strong { display: block; color: var(--navy); font-size: var(--fs-md); margin-bottom: 6px; }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); margin-top: 28px; scroll-margin-top: calc(var(--header-h) + 16px); }
.article:target, .article.is-target { box-shadow: 0 0 0 3px rgba(63,134,181,.35), var(--shadow); }
.article h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem); margin-block: 12px 18px; }
.article .prose { display: grid; gap: 14px; color: var(--muted); max-width: 66ch; }
.article .prose strong { color: var(--navy); }
.article .media { aspect-ratio: 4 / 3; }
.article aside { display: grid; gap: 16px; align-content: start; }
.detail-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-top: 6px; }
.detail-list div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.detail-list div:first-child { border-top: 0; }
.detail-list dt { font-weight: 700; color: var(--navy); }
.detail-list dd { margin: 0; color: var(--muted); }
.article .btn-row { margin-top: 8px; }

/* ---------- Programme detail ---------- */
.prog-anchor-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.prog-detail { display: grid; gap: clamp(28px, 4vw, 44px); }
.prog-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.prog-top h2 { font-size: var(--fs-xl); margin-block: 12px 16px; }
.prog-top .lead { color: var(--muted); font-size: var(--fs-md); }
.prog-top .btn-row { margin-top: 26px; }
.key-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.key-facts .kf { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px; display: grid; gap: 4px; align-content: start; }
.key-facts .kf > span { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.key-facts .kf strong { font-size: var(--fs-md); line-height: 1.3; }
.key-facts .kf small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.info-card { padding: 26px; display: grid; gap: 12px; align-content: start; }
.info-card h3 { font-size: var(--fs-md); }
.info-card p, .info-card li { color: var(--muted); font-size: var(--fs-sm); }
.info-card ul { list-style: none; display: grid; gap: 8px; }
.info-card ul li { position: relative; padding-left: 18px; }
.info-card ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.info-card .icon { width: 44px; height: 44px; border-radius: 14px; background: var(--pale); color: var(--blue); display: grid; place-items: center; }
.info-card .icon svg { width: 22px; height: 22px; }
.info-card .fine { font-size: var(--fs-xs); }
.fee-card { background: var(--navy); color: #fff; border-color: transparent; }
.fee-card h3 { color: #fff; }
.fee-card .fee { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(90deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fee-card p { color: #D3DEEA; }
.fee-card .icon { background: rgba(255,255,255,.12); color: var(--cyan); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .2s; }
.faq details[open] { border-color: var(--light-blue); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; min-height: 56px; font-weight: 700; border-radius: var(--r-sm); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 32px; height: 32px; border-radius: 50%; background: var(--pale); color: var(--blue); display: grid; place-items: center; flex: none; transition: transform .2s var(--ease); }
.faq summary .chev svg { width: 16px; height: 16px; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .answer { padding: 0 22px 20px; color: var(--muted); }

/* Compare table */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: var(--fs-sm); }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--pale-2); font-size: var(--fs-sm); }
.compare tbody th { font-weight: 700; color: var(--navy); width: 22%; background: #fff; position: sticky; left: 0; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare td { color: var(--muted); }
.scroll-hint { display: none; font-size: var(--fs-xs); color: var(--muted); margin-top: 10px; }

/* Steps (application process) */
.steps { list-style: none; display: grid; gap: 14px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.steps li::before { content: counter(step); width: 44px; height: 44px; border-radius: 50%; background: var(--pale); color: var(--blue-ink); font-weight: 700; display: grid; place-items: center; }
.steps strong { display: block; }
.steps p { color: var(--muted); font-size: var(--fs-sm); }

/* Map */
.map-card { overflow: hidden; }
.map-frame { position: relative; aspect-ratio: 16 / 10; background: var(--grad-soft); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-card .body { padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.map-card address { font-style: normal; font-weight: 700; }
.map-card address small { display: block; font-weight: 400; color: var(--muted); }

/* Careers */
.role-cat { padding: 28px; display: grid; gap: 12px; align-content: start; }
.role-cat .icon { width: 52px; height: 52px; border-radius: 16px; background: var(--grad-soft); color: var(--purple); display: grid; place-items: center; }
.role-cat .icon svg { width: 24px; height: 24px; }
.role-cat h3 { font-size: var(--fs-md); }
.role-cat p { color: var(--muted); font-size: var(--fs-sm); }
.vacancy { padding: 26px; display: grid; gap: 12px; }

/* ---------- Forms ---------- */
.form-card { padding: clamp(22px, 4vw, 40px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field > label, .field > .label, fieldset legend { font-weight: 700; font-size: var(--fs-sm); color: var(--navy); }
.req { color: var(--danger); margin-left: 2px; }
.opt { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); margin-left: 4px; }
.input, select.input, textarea.input {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-input);
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--navy);
  transition: border-color .2s, box-shadow .2s;
}
textarea.input { min-height: 120px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300023D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.input:hover { border-color: var(--light-blue); }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(63,134,181,.18); }
.input[readonly] { background: var(--pale-2); border-style: dashed; font-weight: 700; }
.input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-bg); }
.field-hint { font-size: var(--fs-xs); color: var(--muted); }
.field-error { font-size: var(--fs-xs); color: var(--danger); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.field-error:empty { display: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: 8px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer; font-size: var(--fs-sm); transition: all .2s; }
.choice label::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--light-blue); flex: none; transition: all .2s; }
.choice input:checked + label { border-color: var(--blue); background: var(--pale-2); font-weight: 700; }
.choice input:checked + label::before { border: 5px solid var(--blue); }
.choice input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: var(--fs-sm); color: var(--muted); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue-cta); cursor: pointer; }
.check label { cursor: pointer; }
.privacy-box { padding: 16px 18px; border-radius: var(--r-input); background: var(--pale-2); border: 1px solid var(--line); display: grid; gap: 12px; }
.privacy-box p { font-size: var(--fs-xs); color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.form-actions .btn { min-width: 220px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.alert { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 18px; border-radius: var(--r-input); font-size: var(--fs-sm); align-items: start; }
.alert svg { width: 20px; height: 20px; margin-top: 2px; }
.alert strong { display: block; color: inherit; }
.alert-info { background: var(--pale-2); border: 1px solid var(--light-blue); color: var(--navy); }
.alert-info svg { color: var(--blue); }
.alert-demo { background: #F0F5FA; border: 1px dashed rgba(111,163,214,.55); color: #1A3A6E; }
.alert-warn { background: var(--warn-bg); border: 1px solid #F2D9A6; color: var(--warn); }
.alert-error { background: var(--danger-bg); border: 1px solid #F5C2CB; color: var(--danger); }
.alert-success { background: var(--success-bg); border: 1px solid #BFE6D3; color: var(--success); }
.alert a { color: inherit; font-weight: 700; }
.error-summary ul { list-style: disc; padding-left: 18px; margin-top: 6px; }
.error-summary a { color: var(--danger); }

.result-panel { display: grid; gap: 16px; }
.result-panel h3 { font-size: var(--fs-lg); }
.result-panel .btn-row { margin-top: 4px; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.side-stack { display: grid; gap: 20px; }
.side-card { padding: 26px; display: grid; gap: 14px; }
.side-card h3 { font-size: var(--fs-md); }
.side-card p { color: var(--muted); font-size: var(--fs-sm); }
.kv { display: grid; gap: 10px; }
.kv div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.kv div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv > div > span { color: var(--muted); }
.kv strong { text-align: right; }

/* ---------- Dialog ---------- */
.modal {
  width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 28px;
  background: #fff; color: var(--navy); box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal::backdrop { background: rgba(20,44,92, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modalIn .28s var(--ease); }
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal-scroll { overflow-y: auto; overscroll-behavior: contain; padding: clamp(22px, 4vw, 36px); -webkit-overflow-scrolling: touch; }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.modal-close:hover { background: var(--pale-2); }
.modal-close svg { width: 20px; height: 20px; }
.modal-head { display: grid; gap: 10px; padding-right: 48px; margin-bottom: 20px; }
.modal-head h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); }
.modal-head p { color: var(--muted); font-size: var(--fs-sm); }
.modal .alert { margin-bottom: 16px; }
.choice-cards { display: grid; gap: 12px; }
.choice-card { display: grid; grid-template-columns: 76px 1fr 24px; gap: 16px; align-items: center; text-align: left; width: 100%; padding: 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.choice-card:hover { border-color: var(--blue); background: var(--pale-2); }
.choice-card img, .choice-card .thumb { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; background: var(--grad-soft); }
.choice-card strong { display: block; font-size: var(--fs-sm); }
.choice-card small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.choice-card svg { width: 20px; height: 20px; color: var(--blue); }
.prog-badge { display: inline-flex; align-items: center; gap: 8px; align-self: start; justify-self: start; padding: 6px 12px; border-radius: var(--r-pill); background: var(--grad-soft); font-size: var(--fs-xs); font-weight: 700; color: var(--purple); }
.prog-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.modal .form-grid { gap: 16px; }
body.modal-open { overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #D3DEEA; margin-top: clamp(64px, 8vw, 112px); padding-block: clamp(48px, 6vw, 72px) 28px; }
.site-footer.no-gap { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px; }
.site-footer .logo { color: #fff; }
.site-footer .logo span.light { color: #AFC3D8; }
.site-footer h3 { font-size: var(--fs-sm); color: #fff; margin-bottom: 14px; letter-spacing: .02em; }
.site-footer ul { list-style: none; display: grid; gap: 4px; }
.site-footer a { color: #D3DEEA; text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer p { font-size: var(--fs-sm); }
.footer-about p { margin-top: 14px; max-width: 320px; }
.footer-loc address { font-style: normal; color: #fff; font-weight: 700; font-size: var(--fs-sm); }
.footer-loc ul { margin-top: 12px; gap: 8px; }
.footer-loc li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: var(--fs-sm); }
.footer-loc li svg { width: 18px; height: 18px; color: var(--cyan); margin-top: 3px; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: var(--fs-xs); color: #AFC3D8; }
.footer-bottom .lang-switch { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.footer-bottom .lang-switch button { color: #AFC3D8; }
.footer-bottom .lang-switch button[aria-pressed="true"] { background: #fff; color: var(--navy); }

/* ---------- Reveal: see "Motion" section at the end ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .key-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .hero-grid, .page-hero-grid, .split, .prog-top, .contact-layout, .article { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .hero-visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .hero-visual .media { aspect-ratio: 4 / 3.6; }
  .hero-card.c1 { left: 12px; bottom: 16px; }
  .hero-card.c2 { right: 12px; top: 16px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intl-band { grid-template-columns: 1fr; }
  .intl-band .media { min-height: 260px; order: -1; }
  .orient { grid-template-columns: auto 1fr; }
  .orient .btn-row { grid-column: 1 / -1; }
  .cta-band { grid-template-columns: 1fr; }
  .article aside { grid-row: 1; }
}
@media (max-width: 640px) {
  :root { --header-h: 80px; }
  .grid-2, .grid-3, .info-grid, .form-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fact { padding: 18px; }
  .fact .value { font-size: 1.25rem; }
  .fact .note { font-size: var(--fs-xs); }
  .key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mosaic .media:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; }
  .mosaic .media { min-height: 0; aspect-ratio: 1 / 1; }
  .orient { grid-template-columns: 1fr; text-align: left; }
  .date-block { width: 112px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-card { padding: 10px 14px; }
  .hero-card .big { font-size: 1.375rem; }
  .hero-card.c2 { display: none; }
  .btn-row .btn { flex: 1 1 100%; }
  .form-actions .btn { width: 100%; }
  .detail-list div { grid-template-columns: 1fr; gap: 2px; }
  .scroll-hint { display: block; }
  .nav-shell { padding-left: 16px; }
  .choice-card { grid-template-columns: 60px 1fr 20px; }
  .choice-card img, .choice-card .thumb { width: 60px; height: 60px; }
}
@media (max-width: 380px) {
  .logo span.light { display: none; }
  .key-facts { grid-template-columns: 1fr; }
}

/* ---------- Additional components ---------- */
.h-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); overflow: hidden; margin-top: clamp(20px, 3vw, 32px); }
.h-card .media { border-radius: 0; min-height: 260px; height: 100%; }
.h-card .body { padding: clamp(24px, 4vw, 44px); display: grid; gap: 14px; align-content: center; }
.h-card h3 { font-size: var(--fs-lg); }
.h-card p { color: var(--muted); }
.footer-link-btn { background: none; border: 0; padding: 0; color: #D3DEEA; cursor: pointer; min-height: 36px; text-align: left; font-size: inherit; }
.footer-link-btn:hover { color: #fff; text-decoration: underline; }
.goal { font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--navy); }
.goal::before { content: ""; display: block; width: 56px; height: 6px; border-radius: 6px; background: var(--grad-hero); margin-bottom: 22px; }
html[data-lang="zh"] .goal { line-height: 1.6; letter-spacing: 0; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gallery figure { margin: 0; display: grid; gap: 10px; }
.gallery figcaption { font-size: var(--fs-sm); font-weight: 700; }
.gallery figcaption span.sub { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.key-dates { padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; }
.key-dates h2 { font-size: var(--fs-md); }
.note-inline { font-size: var(--fs-xs); color: var(--muted); }
.zh-note { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
@media (max-width: 960px) {
  .h-card { grid-template-columns: 1fr; }
  .h-card .media { min-height: 0; aspect-ratio: 16 / 9; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .btn-row.prog-anchor-nav .btn { flex: 0 1 auto; }
  .key-facts .kf:last-child { grid-column: 1 / -1; }
}

/* =========================================================================
   Motion
   Everything here runs only when <html> has .motion-ok (set in <head> when the
   visitor has not asked for reduced motion). Content is visible at rest:
   animations start from a hidden state only while they play ("backwards" fill).
   ========================================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Page transitions between pages (supported browsers) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vtOut .22s ease both; }
::view-transition-new(root) { animation: vtIn .4s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* Scroll progress */
.scroll-progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 160; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--grad-hero); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Sliding nav indicator */
.main-nav { position: relative; }
.main-nav > ul { position: relative; z-index: 1; }
.nav-indicator { position: absolute; top: 0; left: 0; width: 0; height: 44px; border-radius: var(--r-pill); background: var(--pale); opacity: 0; pointer-events: none; z-index: 0;
  transition: transform .4s var(--ease-out), width .4s var(--ease-out), opacity .25s ease; }
.main-nav.has-indicator > ul > li > a { background: transparent !important; }

/* Hero intro */
.hero { isolation: isolate; }
.hero::after {
  content: ""; position: absolute; z-index: -1; left: -12vw; bottom: -18vw; width: 48vw; height: 48vw; max-width: 640px; max-height: 640px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(111,163,214,.16), rgba(63,134,181,.08) 55%, transparent 72%);
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .line > span { display: inline-block; }
.motion-ok .hero::before { animation: drift1 26s ease-in-out infinite alternate; }
.motion-ok .hero::after { animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(-6vw, 4vw, 0) scale(1.08); } }
@keyframes drift2 { to { transform: translate3d(8vw, -5vw, 0) scale(1.15); } }
.motion-ok .hero [data-anim] { animation: introUp .9s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
.motion-ok .hero h1 .line > span { animation: lineUp 1.05s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
.motion-ok .hero-visual .media { animation: heroReveal 1.5s var(--ease-out) .2s backwards; }
.motion-ok .hero-visual .media img { animation: heroZoom 2.4s var(--ease-out) .2s backwards; }
.motion-ok .hero-card { animation: pop .8s var(--ease-spring) var(--d, 1s) backwards, float 7s ease-in-out calc(var(--d, 1s) + .8s) infinite; }
@keyframes introUp { from { opacity: 0; transform: translateY(22px); } }
@keyframes lineUp { from { transform: translateY(108%); } }
@keyframes heroReveal { from { clip-path: inset(14% 10% 14% 10% round 48px); opacity: 0; } to { clip-path: inset(0 round 28px); opacity: 1; } }
@keyframes heroZoom { from { transform: scale(1.22); } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes float { 50% { transform: translateY(-7px); } }

/* Scroll reveals */
.motion-ok .reveal.in { animation: rise .85s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.motion-ok .media.reveal-media.in { animation: clipIn 1.15s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes clipIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.motion-ok .section-head.in .eyebrow { animation: eyebrowIn .8s var(--ease-out) backwards; }
@keyframes eyebrowIn { from { opacity: 0; letter-spacing: .3em; } }

/* Parallax photos */
.media.parallax img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }

/* 3D tilt + glare on cards (fine pointers only) */
.tilt { position: relative; transform-style: preserve-3d; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.38), transparent 42%); }
.tilt.is-tilting { transition: transform .08s linear, box-shadow .35s; box-shadow: var(--shadow-lg); }
.tilt.is-tilting::after { opacity: 1; }

/* Button sheen */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-light::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-130%); }
.motion-ok .btn-primary:hover::after, .motion-ok .btn-light:hover::after { transform: translateX(130%); transition: transform .8s var(--ease-out); }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg:last-child { transform: translateX(3px); }

/* CTA spotlight */
.cta-band > * { position: relative; z-index: 1; }
.cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(191,216,238,.30), transparent 45%); }
.cta-band.lit::before { opacity: 1; }

/* Marquee */
.marquee { position: relative; overflow: hidden; padding-block: clamp(18px, 2.5vw, 28px); background: #fff; border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; }
.motion-ok .marquee-track { animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track, .marquee.is-paused .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); flex: none; }
.marquee-item { font-size: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; color: var(--navy); }
.marquee-item.alt { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marquee-sep { color: var(--lavender); display: inline-flex; }
.marquee-sep svg { width: 22px; height: 22px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: none; place-items: center; cursor: pointer; z-index: 2; box-shadow: var(--shadow-sm); }
.motion-ok .marquee-toggle { display: grid; }
.marquee-toggle svg { width: 16px; height: 16px; }
.marquee-toggle .i-play { display: none; }
.marquee.is-paused .marquee-toggle .i-play { display: inline-flex; }
.marquee.is-paused .marquee-toggle .i-pause { display: none; }
@media (max-width: 640px) { .marquee-toggle { width: 44px; height: 44px; right: 6px; } }

/* Countdown */
.countdown { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 12px; padding: 6px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.countdown .cd-num { font-size: 1.25rem; font-variant-numeric: tabular-nums; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.key-dates .countdown { margin-top: 0; justify-self: start; background: var(--pale-2); }

/* ---------- Video ---------- */
.video-grid { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; gap: clamp(16px, 2.4vw, 28px); }
.video-grid .video-feature { grid-row: span 2; }
.video-card { overflow: hidden; display: flex; flex-direction: column; }
.video-card .media { border-radius: 0; }
.video-feature .media { aspect-ratio: auto; flex: 1; min-height: 320px; }
.video-card .body { padding: 20px 24px 24px; display: grid; gap: 8px; }
.video-card .tag svg { width: 14px; height: 14px; }
.video-card h3 { font-size: var(--fs-md); }
.video-feature h3 { font-size: var(--fs-lg); }
.video-card p { color: var(--muted); font-size: var(--fs-sm); }
.video-play {
  position: absolute; inset: 0; margin: auto; z-index: 4; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--blue-cta); display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(20,44,92,.45);
  transition: transform .35s var(--ease-spring), background .2s;
}
.video-play svg { width: 30px; height: 30px; margin-left: 4px; position: relative; z-index: 1; }
.video-play:hover { transform: scale(1.08); background: #fff; }
.video-play .ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.motion-ok .video-play .ring { animation: ring 2.4s var(--ease-out) infinite; }
@keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.video-card.has-video .media, .mosaic .media.has-video { cursor: pointer; }
.has-video img { transition: transform .9s var(--ease-out); }
.video-soon { position: absolute; z-index: 4; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.92); color: var(--navy); font-size: var(--fs-xs); font-weight: 700; box-shadow: var(--shadow-sm); }
.video-soon svg { width: 16px; height: 16px; color: var(--violet); }
.video-duration { position: absolute; z-index: 4; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(20,44,92,.7); color: #fff; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }

.modal-video { width: min(1100px, calc(100vw - 24px)); background: var(--navy); color: #fff; }
.modal-video .modal-close { z-index: 5; background: rgba(20,44,92,.78); border-color: rgba(255,255,255,.35); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-video .modal-close:hover { background: var(--navy); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-frame .alert { position: absolute; inset: auto 16px 16px 16px; }
.video-meta { padding: 18px 24px 22px; display: grid; gap: 4px; }
.video-meta h2 { font-size: var(--fs-md); color: #fff; }
.video-meta p { color: #C9D7E6; font-size: var(--fs-sm); }

/* Optional hero background video */
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; z-index: 1; }
.hero-bg-video.is-playing { opacity: 1; }
.video-toggle { position: absolute; z-index: 5; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.video-toggle svg { width: 18px; height: 18px; }

@media (max-width: 960px) {
  .video-grid { grid-template-columns: 1fr 1fr; }
  .video-grid .video-feature { grid-column: 1 / -1; grid-row: auto; }
  .video-feature .media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-play { width: 64px; height: 64px; }
}

/* Opening animation for inner pages (runs from first paint, CSS only) */
.motion-ok .page-hero .container > *:not(.page-hero-grid),
.motion-ok .page-hero-grid > div:first-child > * { animation: introUp .9s var(--ease-out) backwards; }
.motion-ok .page-hero .container > *:nth-child(1), .motion-ok .page-hero-grid > div:first-child > *:nth-child(1) { animation-delay: .05s; }
.motion-ok .page-hero .container > *:nth-child(2), .motion-ok .page-hero-grid > div:first-child > *:nth-child(2) { animation-delay: .14s; }
.motion-ok .page-hero .container > *:nth-child(3), .motion-ok .page-hero-grid > div:first-child > *:nth-child(3) { animation-delay: .3s; }
.motion-ok .page-hero .container > *:nth-child(4), .motion-ok .page-hero-grid > div:first-child > *:nth-child(4) { animation-delay: .42s; }
.motion-ok .page-hero .container > *:nth-child(5), .motion-ok .page-hero-grid > div:first-child > *:nth-child(5) { animation-delay: .54s; }
.motion-ok .page-hero h1 { animation-name: titleIn !important; animation-duration: 1.1s !important; }
@keyframes titleIn { from { opacity: 0; transform: translateY(34px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(-10% -5% -10% -5%); } }
.motion-ok .page-hero-grid > .media { animation: heroReveal 1.5s var(--ease-out) .2s backwards; }
.motion-ok .page-hero-grid > .media img { animation: heroZoom 2.4s var(--ease-out) .2s backwards; }
.motion-ok .page-hero-grid > .card { animation: pop .9s var(--ease-spring) .45s backwards; }
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; z-index: -1; right: -10vw; top: -20vw; width: 55vw; height: 55vw; max-width: 760px; max-height: 760px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191,216,238,.75), rgba(230,238,246,.45) 50%, transparent 72%); }
.motion-ok .page-hero::before { animation: drift1 26s ease-in-out infinite alternate; }

/* ---------- Dark sections ---------- */
.section-dark { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #fff; }
.section-dark::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 70% at 88% 0%, rgba(111,163,214,.2), transparent 70%),
              radial-gradient(50% 60% at 0% 100%, rgba(63,134,181,.30), transparent 70%); }
.section-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: none;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.motion-ok .section-dark::before { animation: darkGlow 18s ease-in-out infinite alternate; }
@keyframes darkGlow { to { transform: translate3d(-3%, 4%, 0) scale(1.06); } }
.section-dark .eyebrow { color: var(--cyan); }
.section-dark .section-head h2, .section-dark .goal, .section-dark h3:not(.card h3) { color: #fff; }
.section-dark .lead:not(.card .lead), .section-dark .disclaimer, .section-dark .note-inline:not(.card .note-inline) { color: #C9D7E6; }
.section-dark .card { color: var(--text); }
.section-dark .goal::before { background: var(--grad-warm); }
.section-dark .check-list:not(.card .check-list) .ck { background: rgba(255,255,255,.1); color: var(--cyan); }
.section-dark .check-list:not(.card .check-list) li { color: #E3EAF2; }
.section-dark .text-link:not(.card .text-link) { color: var(--cyan); }
.section-dark .btn-secondary:not(.card .btn-secondary) { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.section-dark .btn-secondary:not(.card .btn-secondary):hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.section-dark :focus-visible { outline-color: var(--cyan); }
/* glass cards on dark */
.section-dark .fact, .section-dark .video-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: #fff; box-shadow: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.section-dark .fact .label, .section-dark .fact .note { color: #AFC3D8; }
.section-dark .fact .icon, .section-dark .video-card .tag { background: rgba(255,255,255,.08); color: var(--cyan); }
.section-dark .video-card h3 { color: #fff; }
.section-dark .video-card p { color: #C9D7E6; }
.section-dark .video-card.tilt::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(191,216,238,.16), transparent 42%); }
.section-dark .diploma { border-color: rgba(191,216,238,.35); }
.section-dark .article { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.section-dark .map-card { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }

/* ---------- Pricing ---------- */
.price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price .was { font-size: .6em; font-weight: 400; color: var(--muted); text-decoration-line: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(198,35,64,.75); }
.section-dark .price .was, .fee-card .price .was { color: #AFC3D8; text-decoration-color: rgba(255,170,190,.9); }
.price .now { font-weight: 700; }
.section-dark .fact .price .now { background: linear-gradient(90deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo-tag { display: inline-flex; align-items: center; justify-self: start; align-self: start; width: max-content; max-width: 100%; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--grad-warm); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; }
.fee-price { display: block; }
.fee-card .price .fee { font-size: 2rem; }
.key-facts .kf strong .price .was { font-size: .8em; }
.hero-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 22px; padding: 10px 16px 10px 10px; width: max-content; max-width: 100%;
  border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: var(--fs-sm); }
.hero-promo .promo-tag { margin: 0; }
.price-inline s { color: var(--muted); text-decoration-color: rgba(198,35,64,.75); text-decoration-thickness: 2px; margin-right: 4px; }
.price-inline strong { font-size: 1.25rem; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-promo-note { color: var(--muted); font-size: var(--fs-xs); }
.compare s { color: var(--muted); text-decoration-color: rgba(198,35,64,.75); }

/* Three-language switch on small phones: hide the logo tile, keep the name */
@media (max-width: 430px) {
  .site-header .logo-mark { display: none; }
  .nav-actions .lang-switch button { min-width: 36px; padding-inline: 6px; }
}
html[data-lang="ms"] .eyebrow { letter-spacing: .06em; }
.diploma .tag, .video-card .tag, .prog-card .tag { align-self: flex-start; justify-self: start; }
/* Long translated strings must wrap instead of widening grid columns */
.hero-grid > *, .page-hero-grid > *, .split > *, .prog-top > *, .contact-layout > *, .footer-grid > * { min-width: 0; }
.intake-pill { max-width: 100%; }
.fee-card .price .was { font-size: 1.125rem; }

/* ---------- Future of Technology ---------- */
.page-hero.section-dark { padding-block: clamp(48px, 7vw, 96px); }
.page-hero.section-dark::before { inset: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; right: 0; top: 0; }
.section-dark h1 { color: #fff; }
.tech-card { overflow: hidden; display: flex; flex-direction: column; }
.tech-card .media { border-radius: 0; }
.tech-card .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tech-card h3 { font-size: var(--fs-md); }
.tech-card p { color: var(--muted); font-size: var(--fs-sm); }
.tech-stat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tech-stat strong { font-size: 2rem; line-height: 1; letter-spacing: -0.02em; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tech-stat span { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.tech-card .tech-stat span { color: var(--muted); }
.tech-src { font-size: .75rem !important; color: var(--muted); margin-top: auto; }
a.src { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.section-dark a.src { color: var(--cyan); }
.programme-2027 { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 48px); padding: clamp(28px, 5vw, 56px); border-radius: calc(var(--r-card) + 8px);
  background: linear-gradient(135deg, rgba(63,134,181,.18), rgba(111,163,214,.22)); border: 1px solid rgba(191,216,238,.22); }
.p27-main { display: grid; gap: 16px; align-content: start; }
.p27-main h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); color: #fff; }
.p27-main p { color: #D3DEEA; }
.p27-lead { font-size: var(--fs-md); color: #fff !important; }
.tag-2027 { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 14px; border-radius: var(--r-pill); background: #fff; color: var(--purple); font-size: var(--fs-xs); font-weight: 700; }
.tag-2027 svg { width: 16px; height: 16px; color: var(--violet); }
.p27-side { padding: 24px; border-radius: var(--r-card); background: rgba(20,44,92,.45); border: 1px solid rgba(255,255,255,.14); display: grid; gap: 12px; align-content: start; }
.p27-side h3 { color: #fff !important; font-size: var(--fs-md); }
.tba-list { list-style: none; display: grid; gap: 10px; }
.tba-list li { display: flex; gap: 10px; align-items: baseline; color: #E3EAF2; font-size: var(--fs-sm); }
.tba-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cyan); transform: translateY(-1px); }
.p27-note { font-size: var(--fs-xs); color: #AFC3D8; }
.sources { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); }
.sources h3 { font-size: var(--fs-sm); margin-bottom: 10px; }
.sources ul { list-style: none; display: grid; gap: 6px; font-size: var(--fs-xs); }
.home-2027 { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-bottom: clamp(28px, 4vw, 44px); padding: 20px 24px; border-radius: var(--r-card);
  background: linear-gradient(120deg, rgba(63,134,181,.2), rgba(111,163,214,.25)); border: 1px solid rgba(191,216,238,.25); }
.home-2027 h3 { color: #fff; font-size: var(--fs-md); margin-bottom: 4px; }
.home-2027 p { color: #D3DEEA; font-size: var(--fs-sm); }

/* ---------- Blog ---------- */
.posts { display: grid; gap: clamp(48px, 6vw, 80px); }
.post { max-width: 820px; margin-inline: auto; width: 100%; display: grid; gap: 24px; scroll-margin-top: calc(var(--header-h) + 16px); padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.post:last-child { border-bottom: 0; padding-bottom: 0; }
.post.is-target .post-head h2 { background: linear-gradient(transparent 62%, rgba(191,216,238,.9) 62%); }
.post-head { display: grid; gap: 12px; }
.post-head .meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.post-head h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.post-head .lead { color: var(--muted); font-size: var(--fs-md); }
.post-body { display: grid; gap: 16px; font-size: 1.0625rem; line-height: 1.75; max-width: 68ch; }
html[data-lang="zh"] .post-body { line-height: 1.9; }
.post-body h3 { font-size: var(--fs-lg); margin-top: 12px; }
.post-body ul { list-style: none; display: grid; gap: 10px; }
.post-body li { position: relative; padding-left: 26px; color: var(--text); }
.post-body li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-hero); }
.post-body p { color: #1D3A66; }
.post-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
#blog-grid .news-card .meta span:not(.tag) { color: var(--muted); }
@media (max-width: 960px) {
  .programme-2027 { grid-template-columns: 1fr; }
  .home-2027 { grid-template-columns: 1fr; }
}
.main-nav.has-indicator > ul > li.is-parent-current > a { font-weight: 700; }
.main-nav:not(.has-indicator) li.is-parent-current > a { background: var(--pale); font-weight: 700; }

/* Seven-item desktop menu: tighter spacing on narrower desktops */
@media (min-width: 1321px) and (max-width: 1480px) {
  .main-nav a, .dd-toggle { padding-inline: 10px; font-size: .875rem; }
  .dd-toggle { padding-inline: 2px 8px; }
  .nav-shell { gap: 8px; padding-left: 18px; }
}
.p27-side { align-self: start; }

/* =========================================================================
   Dark opening section on every page
   The first section runs up behind the floating navigation pill.
   ========================================================================= */
:root { --nav-pull: 76px; }
main > section.section-dark:first-child { margin-top: calc(-1 * var(--nav-pull)); }
main > section.hero.section-dark:first-child { padding-top: calc(var(--nav-pull) + clamp(40px, 5vw, 72px)); }
main > section.page-hero.section-dark:first-child { padding-top: calc(var(--nav-pull) + clamp(44px, 6vw, 80px)); padding-bottom: clamp(48px, 6vw, 80px); }

/* Home hero: replace the light glows with the dark-section glows + dot grid */
.hero.section-dark::before { inset: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; z-index: -2;
  background: radial-gradient(55% 70% at 85% 10%, rgba(111,163,214,.22), transparent 70%),
              radial-gradient(45% 60% at 0% 100%, rgba(63,134,181,.34), transparent 70%); }
.hero.section-dark::after { inset: 0; left: 0; bottom: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; z-index: -1;
  background: none;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.motion-ok .hero.section-dark::before { animation: darkGlow 18s ease-in-out infinite alternate; }
.motion-ok .hero.section-dark::after { animation: none; }

/* Text and controls on the dark opening sections */
.section-dark .grad { background: linear-gradient(100deg, #8DB8DE 0%, #BFD8EE 40%, #6FA3D6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero.section-dark .lead, .page-hero.section-dark .lead { color: #C9D7E6; }
.section-dark .btn-soft:not(.card .btn-soft) { background: rgba(255,255,255,.12); color: #fff; }
.section-dark .btn-soft:not(.card .btn-soft):hover { background: rgba(255,255,255,.2); color: #fff; }
.section-dark .intake-pill { border-color: rgba(255,255,255,.2); box-shadow: 0 8px 24px -12px rgba(0,0,0,.5); }
.section-dark .hero-visual .media, .page-hero.section-dark .page-hero-grid > .media { box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.section-dark .hero-card { box-shadow: 0 16px 40px -16px rgba(0,0,0,.55); }
.section-dark .hero-promo { border-color: rgba(255,255,255,.2); }
.page-hero.section-dark .key-dates { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.section-dark .empty-state { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.25); color: #C9D7E6; }
.section-dark .empty-state strong { color: #fff; }
.section-dark .empty-state p { color: #C9D7E6; }

/* Navigation pill stays crisp over the dark opening section */
.site-header .nav-shell { background: rgba(255,255,255,.94); }
@media (max-width: 1320px) { :root { --nav-pull: 78px; } }
/* White elements inside dark sections keep dark text */
.hero-card, .hero-promo, .intake-pill, .key-dates { color: var(--text); }
.section-dark h1 .grad, .hero.section-dark h1 .grad { background: linear-gradient(100deg, #8DB8DE 0%, #BFD8EE 45%, #CBE0F1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-dark .card .price .was { color: var(--muted); text-decoration-color: rgba(198,35,64,.75); }

/* =========================================================================
   Dark navigation bar + white logo
   ========================================================================= */
.site-header .nav-shell {
  background: rgba(20,44,92, .9); border-color: rgba(191,216,238, .22);
  box-shadow: 0 10px 30px -12px rgba(20,44,92, .55);
}
.site-header.is-scrolled .nav-shell { background: rgba(15,35,73, .96); box-shadow: 0 16px 40px -14px rgba(20,44,92, .65); }
.site-header .logo, .site-header .logo b, .site-header .logo span.light { color: #fff; }
.site-header .logo span.light { font-weight: 400; }
.site-header .logo-mark { box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.main-nav a, .dd-toggle { color: #DAE4EF; }
.main-nav a:hover, .dd-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }
.main-nav a[aria-current="page"], .main-nav li.is-parent-current > a { color: #fff; font-weight: 700; }
.main-nav:not(.has-indicator) a[aria-current="page"], .main-nav:not(.has-indicator) li.is-parent-current > a { background: rgba(255,255,255,.14); }
.nav-indicator { background: rgba(255,255,255,.14); }
.dd-menu { background: #142C5C; border-color: rgba(191,216,238,.2); box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); }
.dd-menu a { color: #DAE4EF; }
.dd-menu a:hover, .dd-menu a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
.site-header .lang-switch { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.site-header .lang-switch button { color: #AFC3D8; }
.site-header .lang-switch button:hover { color: #fff; }
.site-header .lang-switch button[aria-pressed="true"] { background: #fff; color: var(--navy); }
.site-header .lang-switch .sep { color: rgba(255,255,255,.28); }
.menu-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.menu-toggle:hover { background: rgba(255,255,255,.16); }
.mobile-panel { background: #142C5C; border-color: rgba(191,216,238,.2); box-shadow: 0 24px 48px -20px rgba(0,0,0,.7); }
.mobile-panel a { color: #fff; }
.mobile-panel a:hover, .mobile-panel a[aria-current="page"] { background: rgba(255,255,255,.1); }
.mobile-panel .sub a { color: #AFC3D8; }
.mobile-panel .panel-foot { border-top-color: rgba(255,255,255,.14); }
.site-header :focus-visible { outline-color: var(--cyan); }

/* =========================================================================
   Accent colours for boxes
   Card groups rotate through four palette accents; each card gets a soft tint,
   a tinted border and a matching icon colour.
   ========================================================================= */
:root {
  --acc-blue: #175A78;   --tint-blue: #E9F1F7;   --line-blue: rgba(63,134,181,.28);
  --acc-violet: #175A78; --tint-violet: #E6F0F8; --line-violet: rgba(111,163,214,.28);
  --acc-teal: #175A78;   --tint-teal: #EDF2F6;   --line-teal: rgba(111,163,214,.45);
  --acc-lav: #142C5C;    --tint-lav: #EEF2F7;    --line-lav: rgba(20,44,92,.22);
}
:is(.grid-2, .grid-3, .info-grid, .facts, .key-facts, .side-stack, .gallery) > :nth-child(4n+1) { --acc: var(--acc-blue); --tint: var(--tint-blue); --line-acc: var(--line-blue); }
:is(.grid-2, .grid-3, .info-grid, .facts, .key-facts, .side-stack, .gallery) > :nth-child(4n+2) { --acc: var(--acc-violet); --tint: var(--tint-violet); --line-acc: var(--line-violet); }
:is(.grid-2, .grid-3, .info-grid, .facts, .key-facts, .side-stack, .gallery) > :nth-child(4n+3) { --acc: var(--acc-teal); --tint: var(--tint-teal); --line-acc: var(--line-teal); }
:is(.grid-2, .grid-3, .info-grid, .facts, .key-facts, .side-stack, .gallery) > :nth-child(4n+4) { --acc: var(--acc-lav); --tint: var(--tint-lav); --line-acc: var(--line-lav); }
/* News & blog cards: colour by category */
[data-category="admissions"], [data-category="guides"] { --acc: var(--acc-blue); --tint: var(--tint-blue); --line-acc: var(--line-blue); }
[data-category="events"], [data-category="programmes"] { --acc: var(--acc-violet); --tint: var(--tint-violet); --line-acc: var(--line-violet); }
[data-category="campus"] { --acc: var(--acc-teal); --tint: var(--tint-teal); --line-acc: var(--line-teal); }
[data-category="technology"] { --acc: var(--acc-lav); --tint: var(--tint-lav); --line-acc: var(--line-lav); }

/* Whole-box tint: text boxes */
.card.info-card:not(.fee-card), .card.role-cat, .facts > .fact, .key-facts > .kf, .side-stack > .side-card, .card.vacancy {
  background: linear-gradient(160deg, #fff 0%, var(--tint, #fff) 55%); border-color: var(--line-acc, var(--line));
}
.card.info-card:not(.fee-card) .icon, .card.role-cat .icon, .facts > .fact .icon { background: #fff; color: var(--acc, var(--blue)); box-shadow: 0 6px 16px -8px var(--line-acc, rgba(20,44,92,.2)); }
.facts > .fact .label, .key-facts > .kf > span { color: var(--acc, var(--muted)); }
.card.info-card:not(.fee-card) ul li::before { background: var(--acc, var(--blue)); }
.card.info-card .text-link, .card.role-cat .text-link { color: var(--acc, var(--blue-ink)); }

/* Image boxes: tinted body under the photo */
.prog-card, .facility, .diploma, .news-card, .tech-card { border-color: var(--line-acc, var(--line)); }
.prog-card .body, .facility .body, .diploma .body, .news-card .body, .tech-card .body {
  background: linear-gradient(180deg, var(--tint, #fff) 0%, #fff 100%);
}
:is(.prog-card, .facility, .news-card, .tech-card) .body h3 { position: relative; }
.prog-card .tag:not(.tag-cyan):not(.tag-outline), .news-card .meta .tag:first-child { background: #fff; color: var(--acc, var(--purple)); box-shadow: inset 0 0 0 1px var(--line-acc, transparent); }
.tech-card .tech-stat strong { background: linear-gradient(90deg, var(--acc, #1C6A8C), #142C5C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tech-card a.src, .news-card .text-link, .diploma .text-link, .prog-card .text-link { color: var(--acc, var(--blue-ink)); }
.facility h3::before, .tech-card h3::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 4px; background: var(--acc, var(--blue)); margin-bottom: 10px; }

/* Dark sections keep their glass/white treatments */
.section-dark .video-card .body { background: none; }
.section-dark .diploma .body { background: linear-gradient(180deg, var(--tint, #fff), #fff); }

/* Gallery captions pick up the accent */
.gallery figcaption { border-left: 3px solid var(--acc, var(--blue)); padding-left: 10px; }

/* Check-list ticks rotate colours on light backgrounds */
.check-list li:nth-child(4n+2) .ck { color: var(--acc-violet); background: var(--tint-violet); }
.check-list li:nth-child(4n+3) .ck { color: var(--acc-teal); background: var(--tint-teal); }
.check-list li:nth-child(4n+4) .ck { color: var(--acc-lav); background: var(--tint-lav); }
.section-dark .check-list:not(.card .check-list) li .ck, .intl-band .check-list li .ck { background: rgba(255,255,255,.1); color: var(--cyan); }

/* Application steps: colourful numbers */
.steps li:nth-child(1)::before { background: var(--tint-blue); color: var(--acc-blue); }
.steps li:nth-child(2)::before { background: var(--tint-violet); color: var(--acc-violet); }
.steps li:nth-child(3)::before { background: var(--tint-teal); color: var(--acc-teal); }
.steps li:nth-child(4)::before { background: var(--tint-lav); color: var(--acc-lav); }

/* Light alternating sections get a soft blue-to-cyan wash */
.section-alt { background: linear-gradient(180deg, #F3F4F6 0%, #E9F1F7 100%); }
.section-pale { background: linear-gradient(180deg, #E6EEF6 0%, #DFE8F2 100%); }

/* FAQ: accent when open */
.faq details[open] { border-color: var(--line-violet); background: linear-gradient(160deg, #fff, var(--tint-violet)); }
.faq details[open] summary .chev { background: var(--acc-violet); color: #fff; }

/* Compare table header tint */
.compare thead th:nth-child(2) { background: var(--tint-blue); color: var(--acc-blue); }
.compare thead th:nth-child(3) { background: var(--tint-violet); color: var(--acc-violet); }
/* Stronger tints */
:root { --tint-blue: #E6EEF6; --tint-violet: #E6F0F8; --tint-teal: #EDF2F6; --tint-lav: #EEF2F7; }
.card.info-card:not(.fee-card), .card.role-cat, .facts > .fact, .key-facts > .kf, .side-stack > .side-card, .card.vacancy {
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%), var(--tint, #fff);
}
.prog-card .body, .facility .body, .diploma .body, .news-card .body, .tech-card .body {
  background: linear-gradient(180deg, var(--tint, #fff) 0%, var(--tint, #fff) 55%, #fff 100%);
}
.section-dark .diploma .body { background: linear-gradient(180deg, var(--tint, #fff) 0%, #fff 100%); }

/* =========================================================================
   Advanced UX: search palette, breadcrumbs, section nav, finder quiz,
   back-to-top, mobile quick actions, toasts, form progress
   ========================================================================= */

/* ---- Header search button ---- */
.search-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px;
  border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08);
  color: #DAE4EF; cursor: pointer; font: inherit; font-size: .8125rem;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.search-btn:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }
.search-btn .i { display: inline-grid; }
.search-btn svg { width: 18px; height: 18px; }
.search-btn kbd {
  font: inherit; font-size: .6875rem; letter-spacing: .02em; padding: 3px 7px; border-radius: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: #AFC3D8;
}
@media (max-width: 1679px) { .search-btn kbd { display: none; } }
@media (max-width: 1320px) { .search-btn { width: 44px; height: 44px; padding: 0; justify-content: center; } .search-btn kbd { display: none; } }
@media (max-width: 400px) { .nav-actions .search-btn { display: none; } }
.panel-search { justify-content: flex-start; gap: 10px; background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.16) !important; }
.panel-search svg { width: 18px; height: 18px; }

/* ---- Search dialog ---- */
.modal-search { width: min(640px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 48px)); margin-top: min(12vh, 110px); border-radius: 24px; }
.modal-search[open] { display: flex; flex-direction: column; }
.search-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); }
.search-icon { display: grid; color: var(--blue); flex: none; }
.search-icon svg { width: 22px; height: 22px; }
.search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 1.0625rem; color: var(--navy); padding: 10px 0; }
.search-input::placeholder { color: #7F93A8; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close { flex: none; font: inherit; font-size: .75rem; font-weight: 700; color: var(--muted); background: var(--pale-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.search-close:hover { color: var(--navy); background: var(--pale); }
.search-body { overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 12px; flex: 1; }
.search-group-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 6px; margin: 0; }
.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.search-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background .15s var(--ease); }
.search-item[aria-selected="true"] { background: linear-gradient(90deg, var(--tint-blue), #F3F4F6); box-shadow: inset 3px 0 0 var(--blue); }
.si-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-blue); color: var(--acc-blue); }
.si-icon svg { width: 18px; height: 18px; }
.si-programme, .si-fees { background: var(--tint-violet); color: var(--acc-violet); }
.si-section, .si-tool { background: var(--tint-teal); color: var(--acc-teal); }
.si-article, .si-news { background: var(--tint-lav); color: var(--acc-lav); }
.si-action { background: var(--blue); color: #fff; }
.si-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.si-text strong { font-size: .9375rem; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-text small { font-size: .8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-text mark { background: rgba(111,163,214,.16); color: inherit; border-radius: 4px; padding: 0 2px; }
.si-cat { flex: none; font-size: .6875rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; }
.search-item[aria-selected="true"] .si-cat { border-color: var(--line-acc, var(--line)); color: var(--acc-blue); background: #fff; }
.search-empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.search-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 20px; border-top: 1px solid var(--line); background: var(--pale-2); font-size: .75rem; color: var(--muted); }
.search-foot kbd { font: inherit; font-size: .6875rem; font-weight: 700; background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; margin-right: 3px; color: var(--navy); }
@media (max-width: 600px) {
  .modal-search { margin-top: 12px; max-height: calc(100dvh - 24px); }
  .search-foot { display: none; }
  .si-cat { display: none; }
}

/* ---- Breadcrumbs ---- */
.crumbs { margin-bottom: 18px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .8125rem; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .5; }
.crumbs a { color: var(--muted); text-decoration: none; border-radius: 6px; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--navy); font-weight: 700; }
.section-dark .crumbs, .page-hero.section-dark .crumbs { color: #AFC3D8; }
.section-dark .crumbs a { color: #AFC3D8; }
.section-dark .crumbs a:hover { color: #fff; }
.section-dark .crumbs [aria-current] { color: #fff; }

/* ---- Sticky section nav (programmes) ---- */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 76px); }
.subnav { position: sticky; top: 86px; z-index: 40; padding: 10px 0; pointer-events: none; }
.subnav .container { pointer-events: none; }
.subnav ul {
  pointer-events: auto; list-style: none; margin: 0 auto; padding: 5px; display: flex; gap: 4px; width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; border-radius: var(--r-pill);
  background: rgba(255,255,255,.88); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav.is-stuck ul { box-shadow: 0 12px 30px -14px rgba(20,44,92,.35); background: rgba(255,255,255,.95); }
.subnav a { display: block; white-space: nowrap; padding: 8px 16px; border-radius: var(--r-pill); font-size: .875rem; color: var(--muted); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.subnav a:hover { color: var(--navy); background: var(--pale-2); }
.subnav a[aria-current="true"] { background: var(--navy); color: #fff; font-weight: 700; }
@media (max-width: 760px) { .subnav { top: 84px; } .subnav ul { width: auto; } .subnav a { padding: 8px 13px; font-size: .8125rem; } }

/* ---- Programme finder quiz ---- */
.quiz {
  position: relative; overflow: hidden; padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(191,216,238,.65) 0%, rgba(191,216,238,0) 55%),
              radial-gradient(80% 100% at 0% 100%, rgba(111,163,214,.1) 0%, rgba(111,163,214,0) 60%), #fff;
  border-color: var(--line-violet, var(--line));
}
.quiz-head { display: grid; gap: 8px; max-width: 640px; }
.quiz-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
.quiz-head p { color: var(--muted); }
.quiz-progress { height: 6px; border-radius: 99px; background: var(--pale); overflow: hidden; }
.qp-bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad-warm); transition: width .45s var(--ease-out, var(--ease)); }
.quiz-step { margin: -8px 0 0; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.quiz.done .quiz-step { visibility: hidden; }
.quiz-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-q legend { font-size: 1.125rem; font-weight: 700; margin-bottom: 14px; padding: 0; }
.quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.quiz-opt {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; min-height: 72px;
  border-radius: 18px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: .9375rem; cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.quiz-opt svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--tint-blue); color: var(--acc-blue); transition: background .2s var(--ease), color .2s var(--ease); }
.quiz-opts .quiz-opt:nth-child(2) svg { background: var(--tint-violet); color: var(--acc-violet); }
.quiz-opts .quiz-opt:nth-child(3) svg { background: var(--tint-teal); color: var(--acc-teal); }
.quiz-opt:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.quiz-opt.picked { border-color: var(--blue); background: var(--tint-blue); }
.quiz-opt.picked svg { background: var(--blue); color: #fff; }
.quiz-result { display: grid; gap: 14px; outline: none; }
.quiz-result > div:not([hidden]) {
  display: grid; gap: 10px; padding: clamp(20px, 3vw, 30px); border-radius: 20px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(111,163,214,.28) 0%, rgba(111,163,214,0) 55%), linear-gradient(135deg, #142C5C, #1A3A6E);
}
.quiz-result h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); color: #fff; }
.quiz-result p { color: #C9D7E6; }
.quiz-result .tag { justify-self: start; background: rgba(191,216,238,.16); color: var(--cyan); border: 1px solid rgba(191,216,238,.3); }
.quiz-result .btn-secondary { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
.quiz-result .btn-secondary:hover { background: rgba(255,255,255,.2); }
.quiz-restart { justify-self: start; background: none; border: 0; cursor: pointer; font: inherit; padding: 4px 0; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ok .quiz-q:not([hidden]) { animation: quizIn .4s var(--ease-out, var(--ease)); }
  .motion-ok .quiz-result:not([hidden]) > div:not([hidden]) { animation: quizIn .5s var(--ease-out, var(--ease)); }
}
@keyframes quizIn { from { opacity: 0; transform: translateY(10px); } }

/* ---- Bursary save chip ---- */
.save-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 700; color: #0B6E4F; background: #DDF7EC; border: 1px solid #A6E6CB; white-space: nowrap; vertical-align: middle;
}
.save-chip[hidden] { display: none; }
.fee-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hero-promo .save-chip { margin-left: 6px; }

/* ---- Back to top with scroll-progress ring ---- */
.to-top {
  position: fixed; right: clamp(14px, 2.5vw, 28px); bottom: clamp(14px, 2.5vw, 28px); z-index: 70;
  width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(20,44,92,.92); color: #fff; display: grid; place-items: center;
  box-shadow: 0 14px 30px -12px rgba(20,44,92,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .25s var(--ease), bottom .3s var(--ease), background .2s var(--ease);
}
.to-top[hidden] { display: none; }
.to-top:hover { transform: translateY(-3px); background: var(--blue); }
.to-top .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top .ring circle { fill: none; stroke-width: 3; }
.to-top .ring .track { stroke: rgba(255,255,255,.14); }
.to-top .ring .bar { stroke: var(--cyan); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.to-top .arrow { display: grid; position: relative; }
.to-top .arrow svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) { .motion-ok .to-top:not([hidden]) { animation: popIn .3s var(--ease-out, var(--ease)); } }
@keyframes popIn { from { opacity: 0; transform: scale(.7); } }

/* ---- Mobile quick-action bar ---- */
.action-bar { display: none; }
@media (max-width: 760px) {
  .action-bar {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 75;
    display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 4px; padding: 6px;
    border-radius: 22px; background: rgba(20,44,92,.94); border: 1px solid rgba(191,216,238,.18);
    box-shadow: 0 18px 40px -14px rgba(20,44,92,.7); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .35s var(--ease-out, var(--ease)), visibility 0s .35s;
  }
  .action-bar.show { transform: none; visibility: visible; transition: transform .35s var(--ease-out, var(--ease)), visibility 0s; }
  .ab-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px;
    border-radius: 16px; border: 0; background: none; color: #DAE4EF; font: inherit; font-size: .6875rem; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.15;
  }
  .ab-item svg { width: 20px; height: 20px; }
  .ab-item:hover, .ab-item:active { background: rgba(255,255,255,.1); color: #fff; }
  .ab-primary { background: var(--blue); color: #fff; font-weight: 700; }
  .ab-primary:hover, .ab-primary:active { background: #1A6BE8; }
  body.has-action-bar { padding-bottom: 84px; }
  body.has-action-bar .to-top { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Toasts ---- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: grid; gap: 10px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
body.has-action-bar .toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 16px; border-radius: 16px;
  background: #142C5C; color: #fff; border: 1px solid rgba(191,216,238,.2); box-shadow: 0 18px 40px -14px rgba(20,44,92,.7); font-size: .875rem;
}
.toast-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(191,216,238,.18); }
.toast-msg { flex: 1; min-width: 0; }
.toast-action { flex: none; font: inherit; font-weight: 700; font-size: .8125rem; color: var(--cyan); background: rgba(191,216,238,.12); border: 0; border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; }
.toast-action:hover { background: rgba(191,216,238,.22); }
.toast-close { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: #AFC3D8; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.toast-close:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toastIn .3s var(--ease-out, var(--ease)); }
  .toast.out { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
}
.toast.out { opacity: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* ---- Enquiry form progress ---- */
.form-meter { display: grid; gap: 8px; margin: 4px 0 2px; }
.fm-track { height: 6px; border-radius: 99px; background: var(--pale); overflow: hidden; }
.fm-bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad-warm); transition: width .35s var(--ease); }
.form-meter.complete .fm-bar { background: linear-gradient(90deg, #12A272, #2BC48F); }
.fm-text { margin: 0; font-size: .8125rem; color: var(--muted); }
.form-meter.complete .fm-text { color: #0B6E4F; font-weight: 700; }

/* ---- Focus polish for new controls ---- */
.quiz-opt:focus-visible, .subnav a:focus-visible, .search-item:focus-visible, .ab-item:focus-visible, .to-top:focus-visible, .toast button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.action-bar .ab-item:focus-visible, .to-top:focus-visible { outline-color: var(--cyan); }

/* Header fit with the search button */
.nav-actions .nav-cta, .site-header .lang-switch button { white-space: nowrap; }
.si-text mark { padding: 0; border-radius: 3px; }
@media (min-width: 1321px) and (max-width: 1679px) {
  .search-btn { width: 40px; padding: 0; justify-content: center; }
  .nav-actions { gap: 6px; }
  .nav-actions .lang-switch button { min-width: 34px; padding-inline: 7px; }
  .nav-actions .nav-cta { padding-inline: 16px; }
  .main-nav a, .dd-toggle { padding-inline: 9px; }
}
@media (min-width: 1321px) { .nav-shell { max-width: 1320px; } }
@media (min-width: 1680px) { .nav-shell { max-width: 1440px; } }

/* =========================================================================
   Programme details: features, tabs and panels
   ========================================================================= */
.feat-wrap { display: grid; gap: 16px; }
.feat-title { font-size: var(--fs-lg, 1.25rem); }
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.feat { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.feat > svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--tint-blue); color: var(--acc-blue); }
.feat:nth-child(4n+2) > svg { background: var(--tint-violet); color: var(--acc-violet); }
.feat:nth-child(4n+3) > svg { background: var(--tint-teal); color: var(--acc-teal); }
.feat:nth-child(4n+4) > svg { background: var(--tint-lav); color: var(--acc-lav); }
.feat strong { display: block; font-size: .9375rem; margin-bottom: 3px; }
.feat span { font-size: .875rem; color: var(--muted); line-height: 1.5; }

.pd { position: relative; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.pd-tablist {
  position: relative; display: flex; gap: 4px; padding: 8px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(135deg, #142C5C 0%, #1A3A6E 60%, #1A3A6E 100%);
}
.pd-tablist::-webkit-scrollbar { display: none; }
.pd-tab {
  position: relative; z-index: 1; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 18px; background: none; color: #B9C9DB;
  font: inherit; font-size: .9375rem; white-space: nowrap; cursor: pointer; transition: color .2s var(--ease);
}
.pd-tab svg { width: 18px; height: 18px; flex: none; }
.pd-tab:hover { color: #fff; }
.pd-tab[aria-selected="true"] { color: var(--navy); font-weight: 700; }
.pd-tab:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.pd-ink { position: absolute; z-index: 0; left: 0; top: 8px; bottom: 8px; width: 0; border-radius: 18px; background: #fff; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); opacity: 0; }
.pd.has-ink .pd-ink { opacity: 1; }
.motion-ok .pd.has-ink .pd-ink { transition: transform .4s var(--ease-out, var(--ease)), width .4s var(--ease-out, var(--ease)), height .4s var(--ease-out, var(--ease)); }
.pd:not(.has-ink) .pd-tab[aria-selected="true"] { background: #fff; }
.pd-panel { padding: clamp(22px, 3.5vw, 40px); display: grid; gap: 22px; outline: none; }
.pd-panel:focus-visible { box-shadow: inset 0 0 0 3px var(--blue); }
.pd-panel-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .motion-ok .pd-panel:not([hidden]) { animation: quizIn .4s var(--ease-out, var(--ease)); } }
.pd-lead { font-weight: 700; }
.pd h4 { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin-bottom: 10px; }
.pd h4 > svg { width: 20px; height: 20px; color: var(--acc, var(--blue)); flex: none; }

/* Structure */
.pd-intro { display: grid; gap: 12px; }
.sem-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.sem-track li { height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .8125rem; font-weight: 700; color: #fff; }
.sem-track .y1 { background: var(--blue); }
.sem-track .y2 { background: var(--violet); }
.sem-track .y3 { background: #1C6A8C; }
.sem-track .last { background: repeating-linear-gradient(135deg, #1C6A8C 0 8px, #12A272 8px 16px); }
.sem-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8125rem; color: var(--muted); }
.sem-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sem-legend i { width: 12px; height: 12px; border-radius: 4px; }
.sem-legend .y1 { background: var(--blue); } .sem-legend .y2 { background: var(--violet); } .sem-legend .y3 { background: #1C6A8C; }
.sem-legend .intern { background: repeating-linear-gradient(135deg, #1C6A8C 0 3px, #12A272 3px 6px); }
.years { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.year-card { border-radius: 20px; padding: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--tint-blue), #fff 40%); }
.year-card:nth-child(2) { background: linear-gradient(180deg, var(--tint-violet), #fff 40%); }
.year-card:nth-child(3) { background: linear-gradient(180deg, var(--tint-teal), #fff 40%); }
.year-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.year-head h4 { margin: 0; }
.year-head small { color: var(--muted); font-size: .75rem; }
.year-no { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--blue); flex: none; }
.year-card:nth-child(2) .year-no { background: var(--violet); }
.year-card:nth-child(3) .year-no { background: #1C6A8C; }
.mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mod { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .875rem; line-height: 1.4; }
.mod-parts { justify-self: start; font-size: .6875rem; font-weight: 700; color: var(--acc-violet); background: var(--tint-violet); border-radius: var(--r-pill); padding: 2px 8px; }
.mod-option { padding: 10px; border-radius: 14px; border: 1.5px dashed var(--line-violet, var(--violet)); background: rgba(111,163,214,.04); display: grid; gap: 8px; }
.opt-label { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--acc-violet); }
.opt-label svg { width: 14px; height: 14px; }
.pd-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pd-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pd-box { padding: 18px 20px; border-radius: 20px; background: var(--pale-2, #F3F4F6); border: 1px solid var(--line); }
.pd-box-wide { grid-column: span 1; }
.pd-box-accent { background: linear-gradient(160deg, #fff, var(--tint-blue)); border-color: var(--line-blue, var(--line)); }
.pd-box-accent2 { background: linear-gradient(160deg, #fff, var(--tint-teal)); --acc: var(--acc-teal); }
.pd-box-dark { background: linear-gradient(140deg, #142C5C, #1A3A6E); color: #fff; border-color: transparent; --acc: var(--cyan); }
.pd-box-dark li { color: #DAE4EF; }
.pd-box-dark .fine { color: #AFC3D8; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .875rem; }
.plain li { position: relative; padding-left: 18px; }
.plain li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc, var(--blue)); }
.mpu-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: .875rem; }
.mpu-list li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.mpu-list small { color: var(--muted); font-size: .75rem; }

/* Fees */
.fee-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }
.fee-hero {
  display: grid; gap: 10px; align-content: center; padding: clamp(20px, 3vw, 32px); border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(111,163,214,.26) 0%, rgba(111,163,214,0) 55%), linear-gradient(135deg, #142C5C, #1A3A6E);
}
.fee-hero .fee-price .price .now { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); background: linear-gradient(90deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fee-hero .price .was { color: #AFC3D8; font-size: 1.125rem; text-decoration-color: rgba(255,170,190,.9); }
.fee-hero p { color: #C9D7E6; font-size: .875rem; }
.fee-table { margin: 0; display: grid; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.fee-table > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.fee-table > div:last-child { border-bottom: 0; }
.fee-table > div[hidden] { display: none; }
.fee-table dt { color: var(--muted); font-size: .875rem; }
.fee-table dd { margin: 0; font-weight: 700; text-align: right; }
.fee-table dd.hl { color: var(--acc-blue); font-size: 1.125rem; }
.pd-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--tint-lav); color: var(--navy); font-size: .875rem; }
.pd-note > svg { flex: none; width: 20px; height: 20px; color: var(--acc-lav); margin-top: 2px; }

/* Entry requirements */
.req-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.req-table th, .req-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.req-table thead th { background: var(--tint-blue); color: var(--acc-blue); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; }
.req-table tbody th { font-weight: 700; width: 42%; }
.req-table tbody tr:nth-child(even) { background: #F7F9FB; }
.req-table tbody tr:last-child th, .req-table tbody tr:last-child td { border-bottom: 0; }
.kv-mini { margin: 0; display: grid; gap: 10px; }
.kv-mini div { display: grid; gap: 2px; }
.kv-mini dt { font-size: .8125rem; color: var(--muted); }
.kv-mini dd { margin: 0; font-weight: 700; }

/* Careers */
.roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.role { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: .9375rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.role:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue); }
.role > svg { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--tint-blue); color: var(--acc-blue); }
.role:nth-child(4n+2) > svg { background: var(--tint-violet); color: var(--acc-violet); }
.role:nth-child(4n+3) > svg { background: var(--tint-teal); color: var(--acc-teal); }
.role:nth-child(4n+4) > svg { background: var(--tint-lav); color: var(--acc-lav); }
.exempt-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 10px; }
.exempt-row > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); min-width: 190px; }
.exempt-row strong { grid-row: span 2; font-size: 2.25rem; line-height: 1; background: linear-gradient(135deg, var(--blue), #142C5C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.exempt-row span { font-weight: 700; }
.exempt-row small { color: var(--muted); font-size: .75rem; }

/* Additional information */
.info-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.info-dl > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info-dl dt { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); }
.info-dl dt svg { width: 16px; height: 16px; color: var(--acc-blue); }
.info-dl dd { margin: 0; font-weight: 700; }
.info-dl code { font-family: inherit; font-size: .9375rem; }
.dd-note { display: block; font-weight: 400; font-size: .8125rem; color: var(--acc-blue); margin-top: 2px; }
.dd-note[hidden] { display: none; }
.pd-sources { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .8125rem; color: var(--muted); }
.pd-sources a { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); }
.pd-sources svg { width: 13px; height: 13px; }

@media (max-width: 980px) {
  .years, .pd-grid-3 { grid-template-columns: 1fr; }
  .fee-panel { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pd { border-radius: 22px; }
  .pd-tab { flex: 0 0 auto; padding: 0 14px; font-size: .875rem; }
  .pd-grid-2, .info-dl { grid-template-columns: 1fr; }
  .sem-track { gap: 3px; } .sem-track li { height: 28px; font-size: .75rem; border-radius: 8px; }
  .req-table th, .req-table td { padding: 11px 14px; font-size: .875rem; }
  .req-table tbody th { width: 46%; }
  .exempt-row > div { flex: 1; min-width: 0; }
  .fee-table > div { flex-direction: column; gap: 2px; }
  .fee-table dd { text-align: left; }
}
.section-alt .pd-box:not(.pd-box-dark):not(.pd-box-accent):not(.pd-box-accent2) { background: #F3F4F6; }
.pd-extras { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.pd-extras .pd-box-wide { grid-column: 2; grid-row: 1 / span 2; }
.pd-extras .mpu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-box .fine { font-size: .8125rem; }
@media (max-width: 980px) { .pd-extras { grid-template-columns: 1fr; } .pd-extras .pd-box-wide { grid-column: auto; grid-row: auto; } }
@media (max-width: 560px) { .pd-extras .mpu-list { grid-template-columns: 1fr; } }
.pd-panel:target:focus-visible { box-shadow: none; }

/* =========================================================================
   Responsive & touch polish (phones, tablets, desktops)
   ========================================================================= */

/* Readable line lengths for long notes on wide screens */
.disclaimer, .note-inline, .p27-note, .pd-panel > .fine, .pd-intro > p, .empty-state > p { max-width: 72ch; }

/* Small labels: never below 12px */
.img-note, .mod-parts, .exempt-row small, .search-foot, .si-cat { font-size: .75rem; }

/* Header hides while scrolling down on phones/tablets, returns on scroll up */
.site-header { transition: transform .35s var(--ease-out, var(--ease)); }
html.nav-hidden .site-header { transform: translateY(calc(-100% - 20px)); }
.subnav { transition: top .35s var(--ease-out, var(--ease)); }
html.nav-hidden .subnav { top: 6px; }
@media (prefers-reduced-motion: reduce) { .site-header, .subnav { transition: none; } }

/* Edge fades on horizontally scrollable strips */
.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.table-wrap.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), rgba(0,0,0,.35)); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), rgba(0,0,0,.35)); }
.table-wrap.fade-l:not(.fade-r) { -webkit-mask-image: none; mask-image: none; }

/* Programme detail tabs: grid on tablets, wrapping pills on phones (no hidden tabs) */
.pd-ink { top: 0; bottom: auto; height: 48px; }
@media (max-width: 980px) {
  .pd-tablist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; }
  .pd-tab { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 6px; white-space: normal; text-align: center; font-size: .8125rem; line-height: 1.2; border-radius: 16px; }
  .pd-ink { border-radius: 16px; }
}
@media (max-width: 600px) {
  .pd-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px; }
  .pd-tab { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 46px; padding: 6px 12px; font-size: .8125rem; }
  .pd-tab:last-of-type { grid-column: 1 / -1; justify-content: center; }
  .pd-tab svg { width: 16px; height: 16px; }
}

/* Modules by year: swipeable cards on phones and tablets */
.swipe-hint { display: none; }
@media (max-width: 980px) {
  .years { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc(50% - 7px)); overflow-x: auto;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .year-card { scroll-snap-align: start; }
  .years:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 20px; }
  .swipe-hint { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -10px; font-size: .8125rem; font-weight: 700; color: var(--acc-violet); }
  .swipe-hint svg { width: 16px; height: 16px; }
}
@media (max-width: 600px) { .years { grid-auto-columns: 86%; } }

/* Long programme page on tablets/phones: drop the decorative image in the brochure side card */
@media (max-width: 980px) {
  .prog-detail .split .info-card .media { display: none; }
  .prog-detail .split .info-card[style*="sticky"] { position: static !important; }
}

/* Phones: full-width stacked buttons, tighter type */
@media (max-width: 560px) {
  .btn-row:not(.prog-anchor-nav) { flex-direction: column; align-items: stretch; }
  .btn-row:not(.prog-anchor-nav) > .btn { width: 100%; flex: 0 0 auto; padding-inline: 18px; }
  .form-actions .btn { width: 100%; min-width: 0; }
  .hero .btn-row { flex-direction: column; }
}
@media (max-width: 400px) {
  :root { --fs-xl: clamp(1.5rem, 1.15rem + 2vw, 1.75rem); --fs-2xl: clamp(2.125rem, 1.4rem + 3.4vw, 2.5rem); --fs-lg: 1.25rem; }

}

/* Touch screens: comfortable tap targets (44px) */
@media (pointer: coarse) {
  .site-footer ul { gap: 0; }
  .site-footer a, .footer-link-btn { min-height: 44px; }
  .lang-switch button { min-height: 40px; }
  .subnav a { min-height: 44px; display: flex; align-items: center; }
  .crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 32px; padding-block: 6px; margin-block: -6px; }
  .card h3 > a, .news-card h3 > a, .post h2 > a, .post h3 > a { display: inline-block; padding-block: 6px; margin-block: -6px; }
  .privacy-box .check input, .check input[type="checkbox"] { width: 24px; height: 24px; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .faq summary { min-height: 56px; }
}
/* No sticky-hover effects on touch devices */
@media (hover: none) {
  .prog-card:hover, .news-card:hover, .role:hover, .quiz-opt:hover, .to-top:hover { transform: none; }
}

/* Short landscape screens (phones turned sideways) */
@media (max-height: 560px) and (orientation: landscape) {
  .subnav { position: static; padding: 8px 0; }
  html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 8px); }
  main > section.hero.section-dark:first-child { padding-top: calc(var(--nav-pull) + 24px); }
  main > section.page-hero.section-dark:first-child { padding-top: calc(var(--nav-pull) + 24px); padding-bottom: 36px; }
  .modal { max-height: calc(100dvh - 16px); }
  .modal-search { margin-top: 8px; }
  .mobile-panel { max-height: calc(100dvh - 96px); overflow-y: auto; }
  .to-top { width: 44px; height: 44px; }
}

/* Tablets: balanced grids */
@media (min-width: 600px) and (max-width: 980px) {
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Large desktops: keep content comfortably centred */
@media (min-width: 1680px) { :root { --container: 1280px; } }
/* Hero bursary box: tidy 2-row layout at every width */
.hero-promo { display: grid; grid-template-columns: auto auto; justify-content: start; justify-items: start; gap: 10px 8px; padding: 12px 16px 12px 12px; }
.hero-promo .save-chip { margin-left: 0; }
.hero-promo .price-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-left: 4px; }

/* =========================================================================
   Programme page: information on demand
   ========================================================================= */
/* Programmes dropdown with the two degrees */
.dd-menu a.dd-prog { flex-direction: column; align-items: flex-start; gap: 2px; padding-block: 10px; white-space: normal; }
.dd-menu a.dd-prog small { font-size: .75rem; font-weight: 400; color: #8FA8C2; }
#dd-programmes { min-width: 320px; }
#dd-programmes li:last-child { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.12); }

/* Programme features: collapsed by default */
.feat-wrap { display: block; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.feat-wrap > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 64px; cursor: pointer; }
.feat-wrap > summary::-webkit-details-marker { display: none; }
.feat-sum-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), #142C5C); color: #fff; }
.feat-sum-icon svg { width: 20px; height: 20px; }
.feat-sum-text { flex: 1; display: grid; gap: 2px; }
.feat-sum-text strong { font-size: 1.0625rem; }
.feat-sum-text small { font-size: .8125rem; color: var(--muted); }
.feat-wrap .chev { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pale); color: var(--blue); transition: transform .25s var(--ease); }
.feat-wrap .chev svg { width: 18px; height: 18px; }
.feat-wrap[open] .chev { transform: rotate(180deg); background: var(--blue); color: #fff; }
.feat-wrap > summary:hover .feat-sum-text strong { color: var(--blue); }
.feat-wrap > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 20px; }
.feat-wrap .feats { padding: 4px 18px 18px; }
.feat-wrap .feat { box-shadow: none; background: #F3F4F6; }
@media (prefers-reduced-motion: no-preference) { .motion-ok .feat-wrap[open] .feats { animation: quizIn .35s var(--ease-out, var(--ease)); } }

/* Topics: closed until clicked */
.pd { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; display: grid; gap: 12px; }
.pd-prompt { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); }
.pd-prompt svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
.pd.has-open .pd-prompt { visibility: hidden; height: 0; margin: -6px 0 0; }
.pd-body { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-topic {
  order: 0; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 76px;
  border-radius: 18px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.pd-topic-icon { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--tint-blue); color: var(--acc-blue); transition: background .2s, color .2s; }
.pd-topic:nth-of-type(5n+2) .pd-topic-icon { background: var(--tint-violet); color: var(--acc-violet); }
.pd-topic:nth-of-type(5n+3) .pd-topic-icon { background: var(--tint-teal); color: var(--acc-teal); }
.pd-topic:nth-of-type(5n+4) .pd-topic-icon { background: var(--tint-lav); color: var(--acc-lav); }
.pd-topic-icon svg { width: 20px; height: 20px; }
.pd-topic-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pd-topic-text strong { font-size: .9375rem; line-height: 1.25; }
.pd-topic-text small { font-size: .75rem; color: var(--muted); line-height: 1.3; }
.pd-topic-chev { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: transform .25s var(--ease), background .2s, color .2s; }
.pd-topic-chev svg { width: 16px; height: 16px; }
@media (hover: hover) { .pd-topic:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); } }
.pd-topic:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.pd-topic[aria-expanded="true"] { background: linear-gradient(135deg, #142C5C, #1A3A6E); border-color: transparent; color: #fff; box-shadow: 0 16px 30px -16px rgba(26,58,110,.7); }
.pd-topic[aria-expanded="true"] .pd-topic-icon { background: rgba(255,255,255,.14); color: var(--cyan); }
.pd-topic[aria-expanded="true"] small { color: #B9C9DB; }
.pd-topic[aria-expanded="true"] .pd-topic-chev { transform: rotate(180deg); background: rgba(255,255,255,.14); color: #fff; }
.pd-body > .pd-panel {
  order: 10; flex: 0 0 100%; min-width: 0; position: relative; margin-top: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
}
.pd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pd-panel-head h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); }
.pd-panel-head h3 svg { width: 22px; height: 22px; color: var(--blue); }
.pd-close { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--pale-2, #F3F4F6); color: var(--navy); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.pd-close svg { width: 14px; height: 14px; }
.pd-close:hover { background: var(--pale); }
@media (prefers-reduced-motion: no-preference) { .motion-ok .pd-body > .pd-panel:not([hidden]) { animation: quizIn .4s var(--ease-out, var(--ease)); } }

/* Tablets: 3 + 2 topic cards */
@media (max-width: 1100px) { .pd-topic { flex: 1 1 calc(33.333% - 7px); } }
/* Phones: a simple list; each topic opens directly underneath itself */
@media (max-width: 640px) {
  .pd-topic { flex: 0 0 100%; order: calc(var(--i) * 2); min-height: 64px; padding: 12px; }
  .pd-body > .pd-panel { order: calc(var(--i) * 2 + 1); margin-top: -4px; border-radius: 20px; padding: 18px 16px; }
  .pd-panel-head h3 { font-size: 1.125rem; }
  .pd-close { padding: 0 12px; }
}

/* Compare table: show more */
.compare-more-row { display: flex; justify-content: center; margin-top: 14px; }
.compare-toggle .when-open { display: none; }
.compare-toggle[aria-expanded="true"] .when-open { display: inline; }
.compare-toggle[aria-expanded="true"] .when-closed { display: none; }
.compare-toggle svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.compare-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-menu a.dd-prog > span { font-weight: 700; color: #fff; }
/* Wider screens: icon + arrow on top, label underneath, so labels never squeeze */
@media (min-width: 641px) {
  .pd-topic { flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 10px; padding: 16px; min-height: 128px; }
  .pd-topic-text { order: 3; flex: 0 0 100%; }
  .pd-topic-chev { margin-left: auto; }
}

/* =========================================================================
   Programmes: choose a degree → separate programme pages
   ========================================================================= */
.choose-hero .container { display: grid; gap: clamp(28px, 4vw, 44px); }
.choose-hero .lead { max-width: 640px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.prog-choice {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff; color: var(--navy);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); transition: transform .3s var(--ease-out, var(--ease)), box-shadow .3s var(--ease);
}
.prog-choice .cc-media .media { border-radius: 0; aspect-ratio: 16 / 9; margin: 0; }
.prog-choice .cc-media img { transition: transform .6s var(--ease-out, var(--ease)); }
.cc-body { display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 30px); flex: 1; align-content: start; }
.cc-body h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); color: var(--navy); }
.cc-body p { color: var(--muted); }
.cc-link { color: inherit; text-decoration: none; }
.cc-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.cc-link:focus-visible { outline: none; }
.prog-choice:has(.cc-link:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 4px; }
.cc-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: .9375rem; }
.cc-facts li { display: flex; align-items: center; gap: 10px; }
.cc-facts li [hidden] { display: none; }
.cc-facts svg { flex: none; width: 18px; height: 18px; color: var(--acc-blue); }
.prog-choice:nth-child(2) .cc-facts svg { color: var(--acc-violet); }
.cc-cta { justify-self: start; margin-top: 8px; pointer-events: none; }
.prog-choice:nth-child(2) .cc-cta { background: var(--violet); }
@media (hover: hover) {
  .prog-choice:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -30px rgba(0,0,0,.8); }
  .prog-choice:hover .cc-media img { transform: scale(1.04); }
  .prog-choice:hover .cc-cta svg { transform: translateX(4px); }
}
.cc-cta svg { transition: transform .25s var(--ease); }
@media (max-width: 760px) { .choice-grid { grid-template-columns: 1fr; } .prog-choice { border-radius: 22px; } }

.help-choose { padding-top: clamp(40px, 6vw, 72px); }
.help-choose .container { display: grid; gap: 12px; }
.help-title { font-size: var(--fs-lg); margin-bottom: 4px; }
.help-item .help-body { padding: 4px 18px 22px; display: grid; gap: 14px; }
.help-item .quiz { box-shadow: none; border: 0; padding: 8px 0 0; background: none; }
.help-item .quiz-head h2 { font-size: var(--fs-lg); }
.help-item .quiz-head .eyebrow { display: none; }
.help-item .table-wrap { margin-top: 4px; }
@media (max-width: 640px) { .help-item .help-body { padding: 4px 12px 18px; } }

/* Dedicated programme page */
.prog-hero .meta { margin: 14px 0 4px; }
.prog-hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }
.prog-detail { display: grid; gap: 22px; }
.brochure-side { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 980px) { .brochure-side { position: static; } .brochure-side .media { display: none; } }

.other-prog {
  position: relative; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 16px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--navy); text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.op-media { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; }
.op-media img { width: 100%; height: 100%; object-fit: cover; }
.op-body { display: grid; gap: 6px; padding-right: 12px; }
.op-body .eyebrow { margin: 0; }
.op-body strong { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); }
.op-desc { color: var(--muted); font-size: .9375rem; }
.op-links { margin-top: 4px; }
.op-compare { margin-top: 12px; text-align: center; }
@media (hover: hover) { .other-prog:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue); } }
.other-prog:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 640px) { .other-prog { grid-template-columns: 1fr; gap: 14px; padding: 12px; } .op-body { padding: 0 6px 6px; } }
.cc-media { display: block; }
.cc-media .media { display: block; width: 100%; height: auto; }
.cc-media .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-media .media { position: relative; }
.choose-hero .container { gap: 28px; }
.help-choose { padding-bottom: 8px; }
.prog-choice > .cc-media { width: 100%; align-self: stretch; flex: none; }
.prog-choice .cc-media .media { aspect-ratio: 2 / 1; }

/* =========================================================================
   Programme information bar: one dark rounded container, five topics
   ========================================================================= */
.pd-bar {
  display: flex; align-items: stretch; padding: 8px; gap: 0;
  border-radius: 28px; background: linear-gradient(120deg, #142C5C 0%, #18366B 55%, #1A3A6E 100%);
  border: 1px solid rgba(191,216,238,.18); box-shadow: 0 22px 44px -26px rgba(20,44,92,.65);
}
.pd-bar .pd-topic {
  position: relative; flex: 1 1 0; min-width: 0; order: 0; flex-wrap: nowrap; align-items: center; align-content: center; gap: 12px;
  min-height: 76px; padding: 12px 16px; margin: 0;
  border: 0; border-radius: 20px; background: transparent; box-shadow: none; color: #fff; transform: none; text-align: left;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pd-bar .pd-topic + .pd-topic::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: rgba(255,255,255,.14); transition: opacity .2s; }
.pd-bar .pd-topic[aria-expanded="true"]::before, .pd-bar .pd-topic[aria-expanded="true"] + .pd-topic::before { opacity: 0; }
.pd-bar .pd-topic-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.1); color: var(--cyan); }
.pd-bar .pd-topic:nth-of-type(n) .pd-topic-icon { background: rgba(255,255,255,.1); color: var(--cyan); }
.pd-bar .pd-topic-text { order: 0; flex: 1 1 auto; }
.pd-bar .pd-topic-text strong { font-size: .9375rem; color: inherit; }
.pd-bar .pd-topic-text small { font-size: .75rem; color: #AFC3D8; }
.pd-bar .pd-topic-chev { display: none; }
@media (hover: hover) { .pd-bar .pd-topic:hover { background: rgba(255,255,255,.07); transform: none; box-shadow: none; } }
.pd-bar .pd-topic:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.pd-bar .pd-topic[aria-expanded="true"] { background: #E6EEF6; color: #175A78; box-shadow: none; }
.pd-bar .pd-topic[aria-expanded="true"] .pd-topic-icon { background: #fff; color: var(--blue); }
.pd-bar .pd-topic[aria-expanded="true"] small { color: #3D5BA8; }

/* Shared details panel beneath the bar */
.pd-panels > .pd-panel { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
@media (prefers-reduced-motion: no-preference) { .motion-ok .pd-panels > .pd-panel:not([hidden]) { animation: quizIn .4s var(--ease-out, var(--ease)); } }

/* Tablets: icon above text, still five even columns */
@media (min-width: 761px) and (max-width: 1100px) {
  .pd-bar .pd-topic { flex-direction: column; justify-content: center; text-align: center; gap: 8px; min-height: 108px; padding: 14px 8px; }
  .pd-bar .pd-topic-text strong { font-size: .875rem; }
}
/* Phones: one rounded container that scrolls sideways */
@media (max-width: 760px) {
  .pd-bar { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; border-radius: 24px; padding: 6px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .pd-bar::-webkit-scrollbar { display: none; }
  .pd-bar .pd-topic { flex: 0 0 auto; width: auto; min-width: 190px; min-height: 66px; padding: 10px 14px; scroll-snap-align: center; }
  .pd-bar .pd-topic + .pd-topic::before { top: 14px; bottom: 14px; }
  .pd-panels > .pd-panel { margin-top: 12px; border-radius: 20px; padding: 18px 16px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .pd-bar .pd-topic { justify-content: flex-start; padding-top: 16px; }
  .pd-bar .pd-topic-text { align-content: start; flex: 0 0 auto; gap: 3px; }
}

/* =========================================================================
   Head of Department
   ========================================================================= */
.hod-card {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "main side" "msg side" "pending pending";
  gap: 22px 36px; padding: clamp(22px, 3.5vw, 40px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.hod-main { grid-area: main; display: flex; align-items: center; gap: 20px; }
.hod-photo {
  position: relative; flex: none; width: 112px; height: 112px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(135deg, var(--blue), #1C6A8C 60%, #142C5C); box-shadow: 0 16px 30px -16px rgba(26,58,110,.6);
}
.hod-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hod-photo img[hidden] { display: none; }
.hod-initials { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 2.25rem; letter-spacing: .02em; }
.hod-initials svg { width: 44px; height: 44px; opacity: .9; }
.hod-photo-sm { width: 56px; height: 56px; border-radius: 16px; }
.hod-photo-sm .hod-initials { font-size: 1.125rem; }
.hod-photo-sm .hod-initials svg { width: 24px; height: 24px; }
.hod-id { display: grid; gap: 6px; min-width: 0; }
.hod-role { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--acc-blue); }
.hod-name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.hod-tbc { color: var(--muted); font-weight: 700; }
.hod-quals { color: var(--muted); font-size: .9375rem; }
.hod-message { grid-area: msg; position: relative; margin: 0; padding: 22px 24px 20px 56px; border-radius: 20px; background: linear-gradient(160deg, #F3F4F6, var(--tint-violet)); }
.hod-message::before { content: "“"; position: absolute; left: 18px; top: 4px; font-size: 4rem; line-height: 1; font-weight: 700; color: var(--violet); opacity: .5; }
.hod-message p { font-size: 1.0625rem; line-height: 1.65; color: var(--navy); }
.hod-message footer { margin-top: 10px; font-size: .875rem; font-weight: 700; color: var(--acc-violet); }
.hod-side { grid-area: side; display: grid; align-content: start; gap: 14px; padding: 22px; border-radius: 22px; background: linear-gradient(140deg, #142C5C, #1A3A6E); color: #fff; }
.hod-side-title { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cyan); }
.hod-progs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hod-progs a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font-weight: 700; font-size: .9375rem; transition: background .2s var(--ease); }
.hod-progs a:hover { background: rgba(255,255,255,.16); }
.hod-progs a span { flex: 1; }
.hod-progs svg { flex: none; width: 18px; height: 18px; color: var(--cyan); }
.hod-side .btn { justify-self: start; }
.hod-pending { grid-area: pending; display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); }
.hod-pending svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
[data-hod]:not(.is-pending) .hod-pending { display: none; }
@media (max-width: 900px) {
  .hod-card { grid-template-columns: 1fr; grid-template-areas: "main" "msg" "side" "pending"; }
}
@media (max-width: 520px) {
  .hod-main { flex-direction: column; align-items: flex-start; }
  .hod-photo { width: 88px; height: 88px; border-radius: 22px; }
  .hod-message { padding: 18px 18px 16px 44px; }
  .hod-message::before { left: 12px; font-size: 3rem; }
}

/* Compact card on programme pages */
.hod-mini { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: #F3F4F6; color: var(--navy); text-decoration: none; transition: border-color .2s var(--ease), background .2s var(--ease); }
.hod-mini:hover { border-color: var(--blue); background: #fff; }
.hod-mini-text { display: grid; gap: 2px; min-width: 0; }
.hod-mini-text small { font-size: .75rem; color: var(--muted); }
.hod-mini-text strong { font-size: 1rem; }
.hod-mini-text .text-link { min-height: 0; font-size: .8125rem; margin-top: 2px; }

/* =========================================================================
   Study routes (3+0 / 2+1) and Key Programme Features
   ========================================================================= */
.routes { display: grid; gap: 16px; margin-top: 8px; }
.routes-title { font-size: var(--fs-lg); }
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.route-card { display: grid; gap: 16px; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.rt-head { display: flex; align-items: center; gap: 14px; }
.rt-head strong { display: block; font-size: 1.0625rem; }
.rt-head small { color: var(--muted); font-size: .875rem; }
.rt-badge { flex: none; display: grid; place-items: center; min-width: 72px; height: 56px; padding: 0 12px; border-radius: 16px; font-weight: 700; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--blue), #175A78); }
.route-uk .rt-badge { background: linear-gradient(135deg, var(--violet), #1A3A6E); }
.rt-years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rt-year { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--tint-blue); }
.rt-year.uk { background: linear-gradient(135deg, #E6F0F8, #E6EEF6); box-shadow: inset 0 0 0 1.5px var(--violet); }
.rt-n { font-size: .75rem; font-weight: 700; color: var(--acc-blue); text-transform: uppercase; letter-spacing: .04em; }
.rt-year.uk .rt-n { color: var(--acc-violet); }
.rt-where { font-size: .875rem; font-weight: 700; color: var(--navy); }
.routes-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--tint-lav); font-size: .875rem; color: var(--navy); }
.routes-note > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--acc-lav); }
.routes-note .text-link { display: inline-flex; margin-left: 6px; min-height: 0; }
@media (max-width: 760px) { .route-grid { grid-template-columns: 1fr; } .rt-badge { min-width: 60px; height: 48px; font-size: 1.25rem; } }

.kpf { display: grid; gap: 28px; }
.kpf-title { position: relative; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); padding-bottom: 20px; }
.kpf-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 5px; border-radius: 3px; background: var(--acc-teal, #1C6A8C); }
.kpf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.kpf-card {
  position: relative; display: grid; align-content: start; gap: 14px; min-height: 210px; padding: 24px 26px 26px 34px;
  border-radius: 28px; background: #F5F7FA; border: 1px solid #E6EBF3;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.kpf-card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 6px; border-radius: 3px; background: var(--kpf, var(--blue)); }
.kpf-card:nth-child(3n+1) { --kpf: #175A78; }
.kpf-card:nth-child(3n+2) { --kpf: #1C6A8C; }
.kpf-card:nth-child(3n+3) { --kpf: #175A78; }
.kpf-card h3 { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); color: var(--navy); line-height: 1.3; }
.kpf-card p { color: #34495E; font-size: .9375rem; line-height: 1.6; }
.section-alt .kpf-card { background: #fff; }
@media (hover: hover) { .kpf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } }
@media (max-width: 1000px) { .kpf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpf-grid { grid-template-columns: 1fr; gap: 14px; } .kpf-card { min-height: 0; padding: 20px 20px 22px 28px; border-radius: 22px; } }
.hod-dept { font-size: .9375rem; color: var(--muted); order: 3; }
.hod-id { display: flex; flex-direction: column; }
.hod-id .hod-role { order: 1; } .hod-id .hod-name { order: 2; } .hod-id .hod-quals { order: 4; }

/* =========================================================================
   UWE Bristol: home band and final-year page
   ========================================================================= */
.uk-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; overflow: hidden; border-radius: 28px; text-decoration: none; color: #fff;
  background: linear-gradient(130deg, #142C5C, #1A3A6E); box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) { .uk-band:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } }
.uk-band-media .media { border-radius: 0; height: 100%; min-height: 260px; }
.uk-band-media .media img { height: 100%; }
.uk-band-body { display: grid; gap: 12px; align-content: center; padding: clamp(24px, 4vw, 44px); }
.uk-band-body .eyebrow { color: var(--cyan); margin: 0; }
.uk-band-body strong { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; }
.uk-band-body > span:not(.eyebrow):not(.text-link) { color: #C9D7E6; }
.uk-band-body .text-link { color: #fff; }
@media (max-width: 760px) { .uk-band { grid-template-columns: 1fr; } .uk-band-media .media { min-height: 200px; aspect-ratio: 16 / 10; } }

.uwe-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.uwe-step { position: relative; display: grid; gap: 12px; padding: 22px; border-radius: 22px; background: #F5F7FA; border: 1px solid #E6EBF3; }
.uwe-step .n { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--blue); }
.uwe-step:nth-child(3) .n, .uwe-step:nth-child(4) .n { background: var(--violet); }
.uwe-step h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.uwe-step p { font-size: .9375rem; color: var(--muted); }
@media (max-width: 1000px) { .uwe-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uwe-steps { grid-template-columns: 1fr; } }

.uwe-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.uwe-stat { display: grid; gap: 6px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(191,216,238,.18); }
.uwe-stat svg { width: 26px; height: 26px; color: var(--cyan); }
.uwe-stat strong { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); color: #fff; line-height: 1.1; }
.uwe-stat span { color: #C9D7E6; font-size: .9375rem; }
@media (max-width: 900px) { .uwe-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.uwe-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.uwe-offer { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.uwe-offer .icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--tint-blue); color: var(--acc-blue); }
.uwe-offer:nth-child(3n+2) .icon { background: var(--tint-violet); color: var(--acc-violet); }
.uwe-offer:nth-child(3n+3) .icon { background: var(--tint-teal); color: var(--acc-teal); }
.uwe-offer .icon svg { width: 22px; height: 22px; }
.uwe-offer h3 { font-size: 1.125rem; }
@media (max-width: 1000px) { .uwe-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .uwe-offers { grid-template-columns: 1fr; } }

.uwe-city { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.uwe-city-card { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 22px; background: linear-gradient(160deg, #fff, var(--tint-violet)); border: 1px solid var(--line); }
.uwe-city-card svg { width: 24px; height: 24px; color: var(--acc-violet); }
.uwe-city-card h3 { font-size: 1.0625rem; }
.uwe-city-card p { font-size: .9375rem; color: var(--muted); }
@media (max-width: 900px) { .uwe-city { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .uwe-city { grid-template-columns: 1fr; } }
.uwe-sources { margin-top: 28px; display: grid; gap: 8px; font-size: .8125rem; color: var(--muted); }
.uwe-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.uwe-sources a { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); }
.uwe-sources svg { width: 12px; height: 12px; }
.routes-note .text-link + .text-link { margin-left: 14px; }

/* =====================================================================
   Revision (Oct 2026): landing hero, bursary bar, why section,
   diploma cards, programmes page tables, footer legal block
   ===================================================================== */

/* Logo slots: official file if present, text fallback otherwise */
.logo-slot { display: inline-flex; align-items: center; }
.logo-slot .logo-img { display: block; height: auto; max-height: 56px; width: auto; }
.logo-slot.has-logo .logo-fallback { display: none; }
.footer-logo .logo-slot .logo-img { max-height: 52px; max-width: 220px; }
.footer-logo .logo-fallback { display: inline-flex; align-items: center; gap: 10px; }

/* Hero v2 */
.hero-v2 { padding-block: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 48px); }
.hero-v2 .hero-grid { grid-template-columns: 1.22fr .78fr; align-items: center; }
.hero-v2 .hero-copy { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; }
.hero-v2 .hero-copy > :not(.hero-uwe):not(.btn-row) { grid-column: 1 / -1; }
.hero-v2 .hero-copy .hero-uwe, .hero-v2 .hero-copy .btn-row { margin-top: 26px; }
.hero-v2 .hero-copy .btn-row { flex-wrap: wrap; }
.hero-eyebrow { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin: 0; }
.hero-eyebrow .x { color: var(--light-blue); margin-inline: .35em; font-weight: 400; }
.hero-v2 h1.hero-display { font-size: clamp(2.375rem, 1.2rem + 3vw, 3.625rem); line-height: .98; text-wrap: balance; letter-spacing: -.02em; text-transform: uppercase; margin-block: 18px 22px; color: #fff; }
.hero-v2 h1.hero-display [lang="zh-Hans"] { text-transform: none; letter-spacing: 0; line-height: 1.12; }
.hero-v2 h1.hero-display .grad { background: linear-gradient(90deg, #BFD8EE 0%, var(--cyan) 45%, #6FA3D6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-v2 .lead { color: #C9D7E6; max-width: 560px; }
.hero-v2 .btn-row { margin-top: 26px; }
.hero-uwe { margin-top: 24px; }
@media (max-width: 1240px) { .hero-v2 .hero-copy { grid-template-columns: 1fr; } .hero-v2 .hero-copy .btn-row { margin-top: 22px; } }
.uwe-badge { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 18px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.uwe-badge small { grid-column: 1 / -1; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #AFC3D8; }
.uwe-badge strong { font-size: 1.375rem; line-height: 1.1; }
.uwe-badge > span { font-size: .8125rem; color: #C9D7E6; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.25); line-height: 1.25; max-width: 13ch; }
.hero-uwe .logo-slot .logo-img { max-height: 64px; background: #fff; padding: 8px 12px; border-radius: 12px; }

.hero-visual-v2 { position: relative; padding: 0 0 48px 40px; }
.hero-visual-v2 .media.hero-main { aspect-ratio: 4 / 4.4; border-radius: 28px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); position: relative; z-index: 1; }
.hero-visual-v2 .hero-inset { position: absolute; left: 0; bottom: 0; width: 46%; z-index: 2; }
.hero-visual-v2 .hero-inset .media { aspect-ratio: 4 / 3.2; border-radius: 20px; border: 4px solid #fff; box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); }
.hero-visual-v2 .hero-inset .img-note { top: auto; bottom: 8px; left: 8px; font-size: .6875rem; }
.hero-visual-v2 .hero-card.c2 { right: -14px; top: 28px; }
.hero-slash { position: absolute; z-index: 0; pointer-events: none; border-radius: 6px; transform: skewX(-24deg); }
.hero-slash.s1 { width: 70px; top: -30px; bottom: 30%; right: 18%; background: linear-gradient(180deg, rgba(63,134,181,.0), rgba(63,134,181,.55)); }
.hero-slash.s2 { width: 26px; top: 20%; bottom: -40px; right: 4%; background: linear-gradient(180deg, rgba(111,163,214,.65), rgba(111,163,214,0)); }

/* Bursary bar */
.bursary-bar { margin-top: clamp(28px, 4vw, 48px); border-radius: 28px; padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 44px); background: var(--grad-hero); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 8px 28px; align-items: center; position: relative; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(63,134,181,.6); }
.bursary-bar::after { content: ""; position: absolute; width: 360px; height: 360px; right: -80px; top: -180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(191,216,238,.35), transparent); pointer-events: none; }
.bursary-bar[hidden] { display: none; }
.bb-main { display: grid; gap: 2px; position: relative; z-index: 1; }
.bb-main p { margin: 0; }
.bb-label { font-size: clamp(.9375rem, .85rem + .3vw, 1.125rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bb-label [lang="zh-Hans"] { letter-spacing: .04em; }
.bb-price { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bb-ast { color: inherit; text-decoration: none; font-size: .45em; vertical-align: super; margin-left: 2px; }
.bb-save { display: inline-block; justify-self: start; margin-top: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: #fff; color: var(--purple); font-weight: 700; font-size: var(--fs-sm); }
.bb-btn { position: relative; z-index: 1; }
.bb-note { grid-column: 1 / -1; margin: 10px 0 0; font-size: var(--fs-xs); color: rgba(255,255,255,.85); max-width: 880px; position: relative; z-index: 1; }

/* Programme cards (home) */
.prog-tagline { font-weight: 700; color: var(--blue-ink); font-size: var(--fs-md); margin: -4px 0 0; }
.grid-2 > .prog-card:nth-child(2) .prog-tagline { color: var(--violet); }

/* Key facts v2 */
.facts-v2 .fact-card { gap: 8px; text-decoration: none; color: var(--text); position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.facts-v2 .fact-card h3 { font-size: var(--fs-md); margin: 0; }
.facts-v2 .fact-card p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.facts-v2 a.fact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--light-blue); }
.facts-v2 .fact-go { position: absolute; right: 20px; top: 24px; color: var(--blue); }
.facts-v2 .fact-go svg { width: 18px; height: 18px; }

/* Why HELP Academy */
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(32px, 4vw, 56px); }
.why-item { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.why-item + .why-item::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(clamp(32px, 4vw, 56px) / -2); width: 1px; background: var(--line); }
.why-num { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 700; line-height: 1; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-item h3 { font-size: var(--fs-lg); margin: 0; }
.why-item p { color: var(--muted); margin: 0; }
.why-item .media { margin-top: auto !important; aspect-ratio: 16 / 11; border-radius: 20px; }

/* Diplomas: "Tomorrow is taking shape." */
.dip-section .head-row { align-items: end; }
.dip-section h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); letter-spacing: -.02em; }
.text-link-light, .section-dark .text-link-light { color: #fff; border-bottom: 1px solid rgba(255,255,255,.55); min-height: 40px; }
.text-link-light:hover { color: var(--cyan); }
.dip-card { position: relative; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; background: #142C5C; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.dip-card .media { aspect-ratio: 16 / 10; border-radius: 0; margin: 0; }
.dip-panel { position: relative; margin-top: -44px; z-index: 2; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; color: #fff;
  background: linear-gradient(135deg, rgba(63,134,181,.97) 0%, rgba(28,106,140,.97) 60%, rgba(26,58,110,.98) 100%); clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); padding-top: 44px; }
.dip-card:nth-child(2) .dip-panel { background: linear-gradient(135deg, rgba(111,163,214,.97) 0%, rgba(28,106,140,.97) 55%, rgba(26,58,110,.98) 100%); }
.dip-card:nth-child(3) .dip-panel { background: linear-gradient(135deg, rgba(28,106,140,.97) 0%, rgba(28,106,140,.97) 50%, rgba(20,44,92,.98) 100%); }
.section-dark .dip-panel h3, .dip-panel h3 { color: #fff; font-size: var(--fs-lg); line-height: 1.2; margin: 0; }
.dip-panel h3 small { display: block; font-size: var(--fs-sm); font-weight: 400; color: #DCE6F0; margin-bottom: 2px; }
.dip-status { margin: 0; font-size: var(--fs-sm); color: #DCE6F0; }
.dip-cta { margin-top: auto; justify-content: center; width: 100%; }
.dip-cta svg { width: 16px; height: 16px; }
.dip-card .img-note { top: 12px; bottom: auto; }

/* Footer: logo, legal details, disclaimer */
.footer-legal { margin: 18px 0 0; display: grid; gap: 10px; max-width: 360px; }
.footer-legal div { display: grid; gap: 1px; }
.footer-legal dt { font-size: var(--fs-xs); color: #AFC3D8; }
.footer-legal dd { margin: 0; font-size: var(--fs-sm); color: #fff; font-weight: 700; word-break: break-word; }
.footer-loc address { font-weight: 400; color: #D3DEEA; line-height: 1.6; }
.footer-loc address strong { color: #fff; }
.footer-disclaimer { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-xs) !important; color: #AFC3D8; }

/* Programmes page: route chips, choice cards, tables, fee card */
.route-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.route-chips .rc-item { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #E3EAF2; font-size: var(--fs-sm); text-decoration: none; line-height: 1.35; }
.route-chips a.rc-item:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
.route-chips a.rc-item svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }
.rc-code { flex: none; display: inline-grid; place-items: center; min-width: 52px; height: 36px; padding: 0 10px; border-radius: var(--r-pill); background: #fff; color: var(--navy); font-weight: 700; }
.route-chips li:nth-child(2) .rc-code { background: var(--cyan); }
.cc-kicker { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); }
.prog-choice:nth-child(2) .cc-kicker { color: var(--violet); }
.cc-facts li { align-items: flex-start; }
.cc-facts li svg { margin-top: 3px; }
.cc-facts strong { color: var(--navy); }
.cc-cta-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; color: var(--blue-ink); }
.prog-choice:nth-child(2) .cc-cta-link { color: var(--violet); }
.cc-cta-link svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.prog-choice:hover .cc-cta-link svg { transform: translateX(4px); }
.compare-v2 thead th a { color: inherit; text-decoration: none; }
.compare-v2 thead th a:hover { text-decoration: underline; }
.compare-v2 tbody th { width: 24%; }
.compare-v2 td { color: var(--text); }
.cell-empty { color: var(--muted); }
.both-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
.both-grid h2 { font-size: var(--fs-xl); margin-bottom: 18px; }
.both-grid > * { min-width: 0; }
.both-table { min-width: 0; }
.both-table thead th:nth-child(2) { background: var(--pale-2); color: var(--navy); }
.fees-card { border-radius: 28px; padding: clamp(24px, 3vw, 36px); background: var(--grad-cta); color: #fff; position: relative; overflow: hidden; }
.fees-card h2 { font-size: var(--fs-lg); color: #fff; margin-bottom: 18px; }
.fees-card dl { margin: 0; display: grid; gap: 14px; }
.fees-card dl > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.fees-card dt { font-size: var(--fs-sm); color: #DCE6F0; }
.fees-card dd { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.fees-card .fees-basis { margin: 14px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: #DCE6F0; }
.fees-card .btn-row { margin-top: 20px; }
#compare, #both { scroll-margin-top: 0px; }
#fees { scroll-margin-top: 110px; }

@media (max-width: 1100px) {
  .hero-v2 .hero-grid { grid-template-columns: 1fr; }
  .hero-visual-v2 { max-width: 620px; width: 100%; margin-inline: auto; }
  .hero-visual-v2 .media.hero-main { aspect-ratio: 16 / 11; }
  .both-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-item + .why-item { border-top: 1px solid var(--line); padding-top: 24px; }
  .why-item + .why-item::before { display: none; }
  .why-item .media { aspect-ratio: 16 / 9; }
  .facts-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bursary-bar { grid-template-columns: 1fr; }
  .bb-btn { justify-self: start; }
  .hero-visual-v2 { padding: 0 0 36px 20px; }
  .hero-visual-v2 .hero-inset { width: 52%; }
  .hero-visual-v2 .hero-card.c2 { right: 8px; top: 12px; }
  .facts-v2 { grid-template-columns: 1fr; }
  .route-chips .rc-item { border-radius: 20px; }
  .uwe-badge strong { font-size: 1.2rem; }
}

/* Hero with full-bleed student photo (Unsplash) */
.hero-photo { min-height: min(880px, calc(100svh - 20px)); display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(96px, 12vw, 150px); }
.hero-photo::before { display: none; }
.hero-photo .hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--navy); }
.hero-photo .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero-photo .hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,44,92,.95) 0%, rgba(20,44,92,.88) 38%, rgba(20,44,92,.6) 58%, rgba(20,44,92,.22) 100%),
    linear-gradient(180deg, rgba(20,44,92,.55) 0%, rgba(20,44,92,0) 22%, rgba(20,44,92,0) 55%, rgba(20,44,92,.85) 100%); }
.hero-photo .hero-bg .img-note { position: absolute; z-index: 2; right: 24px; top: 96px; bottom: auto; left: auto; }
.hero-photo .hero-grid { grid-template-columns: minmax(0, 760px); }
.hero-photo .hero-copy { text-shadow: 0 2px 24px rgba(20,44,92,.45); }
.hero-photo .lead { color: #E1EAF3; }
.hero-photo .uwe-badge { background: rgba(20,44,92,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-photo .btn-outline-light { background: rgba(20,44,92,.3); }
.hero-photo .bursary-bar { box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
@media (max-width: 1240px) { .hero-photo .hero-copy { grid-template-columns: auto 1fr; } }
@media (max-width: 720px) {
  .hero-photo { min-height: 0; padding-top: 72px; }
  .hero-photo .hero-copy { grid-template-columns: 1fr; }
  .hero-photo .hero-bg img { object-position: 70% 30%; }
  .hero-photo .hero-bg::after { background: linear-gradient(180deg, rgba(20,44,92,.7) 0%, rgba(20,44,92,.82) 45%, rgba(20,44,92,.94) 100%); }
  .hero-photo .hero-bg .img-note { top: 84px; bottom: auto; right: 12px; }
}

/* =====================================================================
   Home layout following the reference (Oct 2026 #2): photo hero, pill
   eyebrows, split headings, notched feature cards, "who we are" layout
   ===================================================================== */
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; color: var(--navy); margin-bottom: 16px; box-shadow: 0 4px 14px -8px rgba(20,44,92,.25); }
.eyebrow-pill svg { width: 14px; height: 14px; color: var(--blue); }
.ref-section h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: -.015em; line-height: 1.12; }
.ref-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.ref-head h2 { margin: 0; max-width: 620px; }
.ref-head-side p { color: var(--muted); margin: 0 0 6px; }

/* Split pill button with a round arrow chip */
.btn.btn-split { padding: 6px 6px 6px 24px; gap: 14px; }
.btn.btn-split svg { width: 40px; height: 40px; padding: 11px; border-radius: 50%; background: #fff; color: var(--blue-cta); flex: none; transition: transform .25s var(--ease); }
.btn.btn-split:hover svg { transform: translateX(3px) rotate(-8deg); }

/* Hero (reference) */
.hero-ref { min-height: min(820px, calc(100svh - 10px)); justify-content: center; padding-block: clamp(120px, 13vw, 170px) clamp(110px, 10vw, 150px); }
.hero-ref .hero-bg img { object-position: 70% 35%; }
.hero-ref .hero-bg::after { background:
    linear-gradient(90deg, rgba(20,44,92,.96) 0%, rgba(20,44,92,.9) 32%, rgba(20,44,92,.55) 55%, rgba(20,44,92,.1) 80%, rgba(20,44,92,0) 100%),
    linear-gradient(180deg, rgba(20,44,92,.6) 0%, rgba(20,44,92,0) 20%); }
.hero-ref .hero-grid { grid-template-columns: minmax(0, 700px); }
.hero-ref .hero-copy { display: block; }
.hero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-pill svg { width: 16px; height: 16px; color: var(--cyan); }
.hero-pill .x { color: var(--light-blue); margin-inline: .3em; font-weight: 400; }
.hero-ref h1.hero-display { font-size: clamp(2.375rem, 1.1rem + 3.6vw, 4rem); line-height: 1.02; margin-block: 22px 18px; }
.hero-ref h1 .hl { font-style: normal; color: var(--light-blue); background: linear-gradient(90deg, #BFD8EE, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-ref .lead { max-width: 540px; font-size: var(--fs-md); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
.hero-actions .hero-uwe { margin: 0; }
.uwe-inline { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.ui-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; flex: none; box-shadow: 0 0 0 6px rgba(63,134,181,.22); }
.ui-icon svg { width: 22px; height: 22px; color: #fff; }
.uwe-inline small { display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #AFC3D8; }
.uwe-inline strong { display: block; font-size: 1.25rem; line-height: 1.2; }
.hero-ref .hero-uwe .logo-slot .logo-img { max-height: 52px; }

/* Bursary bar straddling the hero edge */
.bursary-wrap { position: relative; z-index: 3; margin-top: calc(-1 * clamp(70px, 7vw, 100px)); }
.bursary-wrap .bursary-bar { margin-top: 0; }

/* Key facts strip */
.ref-facts { padding-top: clamp(40px, 5vw, 64px); }

/* Notched feature cards */
.why.section-alt { --sec: #F3F4F6; background: var(--sec); }
.feat-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.feat-card { --r: 22px; position: relative; border-radius: 26px; padding: clamp(26px, 2.6vw, 34px) clamp(24px, 2.4vw, 32px) 92px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; isolation: isolate; min-height: 340px; }
.feat-card.fc-light { background: #fff; color: var(--navy); }
.feat-card.fc-accent { background: var(--light-blue); color: var(--navy); }
.feat-card.fc-dark { background: var(--navy); color: #fff; }
.feat-card.fc-accent::before { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; right: -40px; bottom: -40px; border-radius: 50%; background: rgba(255,255,255,.28); }
.fc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.fc-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; border: 1.5px solid currentColor; }
.fc-icon svg { width: 26px; height: 26px; }
.fc-light .fc-icon { color: var(--blue); }
.fc-dark .fc-icon { color: var(--cyan); border-color: rgba(191,216,238,.5); }
.fc-num { font-size: 2rem; font-weight: 700; line-height: 1; opacity: .25; }
.feat-card h3 { font-size: var(--fs-lg); line-height: 1.25; margin: 0; color: inherit; }
.section-dark .feat-card h3, .fc-dark h3 { color: #fff; }
.feat-card p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.fc-accent p { color: #1A3A6E; }
.fc-dark p { color: #C9D7E6; }
.fc-tab { position: absolute; left: 0; bottom: 0; background: var(--sec, #fff); padding: 12px 14px 0 0; border-top-right-radius: var(--r); }
.fc-tab::before, .fc-tab::after { content: ""; position: absolute; width: var(--r); height: var(--r); background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--sec, #fff) var(--r)); }
.fc-tab::before { left: 0; top: calc(-1 * var(--r)); }
.fc-tab::after { right: calc(-1 * var(--r)); bottom: 0; }
.fc-more { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; text-decoration: none; min-height: 40px; transition: transform .2s var(--ease), box-shadow .2s; }
.fc-more svg { width: 14px; height: 14px; }
.fc-light .fc-more { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.fc-accent .fc-more { background: var(--light-blue); color: var(--navy); }
.fc-dark .fc-more { background: var(--navy); color: #fff; }
.fc-more:hover { transform: translateX(2px); box-shadow: 0 8px 18px -10px rgba(20,44,92,.5); }

/* "Who we are" style campus block */
.about-ref > *, .ar-collage > * { min-width: 0; }
.about-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ar-collage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.ar-main { grid-column: 1 / -1; }
.ar-main .media { aspect-ratio: 16 / 9.6; border-radius: 22px; }
.ar-side { display: flex; }
.ar-side .media { flex: 1; width: 100%; aspect-ratio: auto; min-height: 190px; border-radius: 22px; }
.ar-side .media img { position: absolute; inset: 0; }
.ar-stat { border-radius: 22px; background: var(--light-blue); color: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 22px 16px; }
.ar-check { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.ar-check svg { width: 16px; height: 16px; }
.ar-stat strong { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1; }
.ar-stat > span:last-child { font-size: var(--fs-sm); font-weight: 700; max-width: 18ch; }
.ar-body .lead { color: var(--muted); }
.ar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.ar-person { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); min-height: 44px; }
.ar-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--pale); color: var(--blue); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 6px 16px -8px rgba(20,44,92,.4); }
.ar-avatar svg { width: 20px; height: 20px; }
.ar-person strong { display: block; font-size: var(--fs-sm); }
.ar-person small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.ar-person:hover strong { color: var(--blue-ink); }
.ar-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.ar-card { background: var(--pale-2); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.ar-card-kicker { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.ar-big { font-size: 1.75rem; line-height: 1.1; color: var(--navy); }
.ar-small { font-size: var(--fs-xs); color: var(--muted); }
.ar-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ar-tags li { padding: 4px 10px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.about-ref > .h-card { grid-column: 1 / -1; }

@media (max-width: 1024px) {
  .feat-cards { grid-template-columns: 1fr; }
  .feat-card { min-height: 0; }
  .about-ref { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) { .ref-head { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 720px) {
  .hero-ref { min-height: 0; padding-block: 104px 110px; }
  .hero-ref .hero-bg::after { background: linear-gradient(180deg, rgba(20,44,92,.72) 0%, rgba(20,44,92,.86) 45%, rgba(20,44,92,.96) 100%); }
  .hero-actions .btn-split { width: 100%; justify-content: space-between; }
  .ar-cards { grid-template-columns: 1fr; }
}

/* Home: calmer type scale (Oct 2026 #3) */
.hero-ref h1.hero-display { font-size: clamp(2rem, 1.1rem + 2.4vw, 3rem); line-height: 1.05; margin-block: 0 14px; }
.hero-ref .lead { font-size: var(--fs-base); max-width: 460px; }
.hero-ref { min-height: min(700px, calc(100svh - 10px)); }
.bb-price { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.bb-label { font-size: var(--fs-sm); }
.bursary-bar { padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 36px); }
[data-page="home"] .ref-section h2, [data-page="home"] .dip-section h2 { font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.25rem); }
[data-page="home"] .ref-head-side p, [data-page="home"] .ar-body .lead { font-size: var(--fs-sm); }
[data-page="home"] .prog-card h3 { font-size: var(--fs-md); }
[data-page="home"] .prog-tagline { font-size: var(--fs-base); }
[data-page="home"] .prog-card .desc { font-size: var(--fs-sm); }
[data-page="home"] .facts-v2 .fact-card h3 { font-size: var(--fs-base); }
[data-page="home"] .feat-card { min-height: 280px; padding-bottom: 84px; }
[data-page="home"] .feat-card h3 { font-size: var(--fs-md); }
[data-page="home"] .fc-icon { width: 48px; height: 48px; border-radius: 14px; }
[data-page="home"] .fc-icon svg { width: 22px; height: 22px; }
[data-page="home"] .fc-num { font-size: 1.5rem; }
[data-page="home"] .fc-top { margin-bottom: 8px; }
[data-page="home"] .ar-stat strong { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); }
[data-page="home"] .ar-big { font-size: 1.375rem; }
[data-page="home"] .intl-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
[data-page="home"] .uk-band strong { font-size: clamp(1.25rem, 1rem + .8vw, 1.5rem); }
[data-page="home"] .orient h2 { font-size: var(--fs-lg); }
[data-page="home"] .cta-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }

/* Home: News & Events panels */
.ne-section { --ne-line: rgba(20,44,92,.12); }
.ne-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; }
.ne-panel { background: #fff; border-radius: 20px; padding: clamp(20px, 2.4vw, 30px); box-shadow: 0 10px 30px -22px rgba(20,44,92,.35); border: 1px solid var(--line); display: flex; flex-direction: column; }
.ne-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ne-line); }
.ne-head h2 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lg) !important; margin: 0; color: var(--navy); }
.ne-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--pale); color: var(--blue); display: grid; place-items: center; flex: none; }
.ne-icon svg { width: 18px; height: 18px; }
.ne-all { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); text-decoration: none; min-height: 40px; white-space: nowrap; }
.ne-all svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.ne-all:hover svg { transform: translateX(3px); }
.ne-news { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.ne-news li { display: flex; flex-direction: column; gap: 6px; }
.ne-news a { color: var(--navy); font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; text-decoration: none; }
.ne-news a svg { display: inline-block; vertical-align: -2px; margin-left: 2px; color: var(--blue); transition: transform .2s var(--ease); }
.ne-news a:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.ne-news a:hover svg { transform: translateX(3px); }
.ne-meta { font-size: var(--fs-xs); color: var(--muted); }
.ne-events { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.ne-event { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; }
.ne-event[hidden] { display: none; }
.ne-date { display: grid; border-radius: 10px; overflow: hidden; text-align: center; box-shadow: 0 0 0 1px var(--line); }
.ne-date .d { font-size: 1.375rem; font-weight: 700; color: var(--navy); background: var(--pale-2); padding: 8px 0 6px; line-height: 1; font-variant-numeric: tabular-nums; }
.ne-date .m { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--navy); padding: 4px 0; }
.ne-ev-title { display: inline-block; color: var(--navy); font-weight: 700; font-size: var(--fs-sm); line-height: 1.35; text-decoration: none; margin-bottom: 4px; }
.ne-ev-title svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 2px; color: var(--blue); transition: transform .2s var(--ease); }
.ne-ev-title:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.ne-ev-title:hover svg { transform: translateX(3px); }
.ne-ev-meta { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.ne-empty { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.ne-panel .countdown { margin-top: 20px; align-self: flex-start; background: var(--pale-2); font-size: var(--fs-xs); }
.ne-panel .countdown .cd-num { font-size: 1rem; }
@media (max-width: 960px) { .ne-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .ne-news, .ne-events { grid-template-columns: minmax(0, 1fr); } }

/* UWE Bristol page: photo hero + photo bentos */
.uwe-hero-photo .hero-bg.media { border-radius: 0; isolation: auto; }
.uwe-hero-photo .hero-bg img { object-position: 50% 60%; }
.uwe-hero-photo .hero-bg::after { background: linear-gradient(90deg, rgba(20,44,92,.94) 0%, rgba(20,44,92,.8) 40%, rgba(20,44,92,.35) 75%, rgba(20,44,92,.25) 100%), linear-gradient(180deg, rgba(20,44,92,.5) 0%, rgba(20,44,92,0) 25%); }
.uwe-hero-photo { min-height: 0; display: block; }
.uwe-hero-photo .page-hero-grid { position: relative; z-index: 1; }
.uwe-hero-card .media { box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); border: 4px solid rgba(255,255,255,.9); }
.photo-bento { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; height: clamp(360px, 42vw, 540px); margin-bottom: 28px; }
.photo-bento .media { border-radius: 22px; height: 100%; width: 100%; }
.photo-bento .media img { position: absolute; inset: 0; }
.photo-bento .pb-a { grid-row: 1 / span 2; }
.photo-bento .img-note { top: 12px; bottom: auto; }
.ph-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 18px 16px; color: #fff; font-weight: 700; font-size: var(--fs-md); background: linear-gradient(180deg, transparent, rgba(20,44,92,.82)); }
.pb-city { grid-template-columns: 1fr 1.4fr; }
.pb-city .pb-a { grid-column: 2; grid-row: 1 / span 2; }
.pb-city .pb-b { grid-column: 1; grid-row: 1; }
.pb-city .pb-c { grid-column: 1; grid-row: 2; }
@media (max-width: 720px) {
  .photo-bento, .pb-city { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .photo-bento .pb-a, .pb-city .pb-a { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 11; height: auto; }
  .photo-bento .pb-b, .photo-bento .pb-c, .pb-city .pb-b, .pb-city .pb-c { grid-column: auto; grid-row: 2; aspect-ratio: 1; height: auto; }
  .ph-cap { font-size: var(--fs-sm); padding: 28px 12px 10px; }
}

/* Head of Department: portrait photo layout */
.hod-card-v2 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "photo main side" "photo msg side" "pending pending pending"; align-items: start; }
.hod-portrait { grid-area: photo; position: relative; margin: 0; width: 100%; min-width: 0; border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, var(--blue), #1C6A8C 55%, #142C5C); box-shadow: 0 30px 50px -28px rgba(26,58,110,.7); align-self: stretch; min-height: 340px; }
.hod-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; z-index: 1; }
.hod-portrait img[hidden] { display: none; }
.hod-portrait-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; }
.hod-portrait-ph::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -58%); background: rgba(255,255,255,.1); }
.hod-initials-lg { position: relative; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 700; letter-spacing: .02em; line-height: 1; }
.hod-initials-lg svg { width: 64px; height: 64px; }
.hod-ph-note { position: absolute; left: 14px; bottom: 14px; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(20,44,92,.55); font-size: var(--fs-xs); font-weight: 700; }
.hod-card-v2 .hod-main { align-self: end; }
.hod-card-v2 .hod-side { align-self: stretch; }
@media (max-width: 1100px) {
  .hod-card-v2 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); grid-template-areas: "photo main" "photo msg" "side side" "pending pending"; }
}
@media (max-width: 720px) {
  .hod-card-v2 { grid-template-columns: 1fr; grid-template-areas: "photo" "main" "msg" "side" "pending"; }
  .hod-portrait { aspect-ratio: 4 / 3.4; min-height: 0; }
}

/* Home hero: natural photo (no dark gradient); copy sits on a light glass panel */
.hero-ref { background: #E6EEF6; }
.hero-ref::before, .hero-ref::after { display: none !important; }
.hero-ref .hero-bg { background: #E6EEF6; }
.hero-ref .hero-bg::after { background: none !important; }
.hero-ref .hero-copy { background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.7); border-radius: 28px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 30px 60px -30px rgba(20,44,92,.45); text-shadow: none; max-width: 640px; }
.hero-ref .hero-copy h1.hero-display { color: var(--navy); }
.hero-ref h1 .hl { background: linear-gradient(90deg, var(--blue-cta), var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-ref .hero-copy .lead { color: var(--muted) !important; }
.hero-ref .hero-pill { background: var(--pale); border-color: rgba(63,134,181,.2); color: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-ref .hero-pill svg { color: var(--blue); }
.hero-ref .hero-pill .x { color: var(--blue); }
.hero-ref .uwe-inline { color: var(--navy); }
.hero-ref .uwe-inline small { color: var(--muted); }
.hero-ref .hero-bg .img-note { background: rgba(20,44,92,.6); color: #fff; }
.hero-ref .hero-copy :focus-visible { outline-color: var(--blue); }
@media (max-width: 720px) {
  .hero-ref { padding-block: 92px 104px; }
  .hero-ref .hero-copy { padding: 22px 20px; background: rgba(255,255,255,.92); }
}

/* Programme page: "At a glance" panel */
.glance { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 24px 50px -36px rgba(20,44,92,.45); }
.gl-fee { position: relative; display: flex; flex-direction: column; gap: 6px; padding: clamp(24px, 3vw, 36px); background: var(--grad-cta); color: #fff; overflow: hidden; }
.gl-fee::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -110px; border-radius: 50%; background: rgba(255,255,255,.08); }
.gl-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.gl-fee-label { font-size: var(--fs-sm); color: #DCE6F0; }
.gl-price .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gl-price .was { color: #AFC3D8; font-size: var(--fs-md); text-decoration-color: rgba(255,170,190,.9); }
.gl-price .now, .gl-price .price > .tabular { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 700; color: #fff; line-height: 1.05; }
.gl-fee small { color: #DCE6F0; font-size: var(--fs-xs); }
.gl-fee .btn { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; }
.gl-fee > small + .btn { margin-top: 18px; }
.gl-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-row { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.gl-row:nth-child(odd) { border-right: 1px solid var(--line); }
.gl-row:nth-last-child(-n+2) { border-bottom: 0; }
.gl-row > svg { grid-row: 1 / span 2; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--pale); color: var(--blue); }
.gl-row:nth-child(4n+2) > svg, .gl-row:nth-child(4n+3) > svg { background: var(--tint-violet, #E6F0F8); color: var(--violet); }
.gl-k { font-size: var(--fs-xs); color: var(--muted); }
.gl-v { font-size: var(--fs-sm); color: var(--navy); line-height: 1.35; }

/* Study routes: photo cards with a journey */
.routes-v2 { margin-top: clamp(32px, 4vw, 48px); }
.routes-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.routes-head p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.routes-v2 .route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.route-photo { position: relative; border-radius: 26px; overflow: hidden; min-height: 360px; display: flex; isolation: isolate; color: #fff; box-shadow: 0 30px 60px -34px rgba(20,44,92,.6); }
.rp-bg { position: absolute; inset: 0; z-index: -2; }
.rp-bg .media { position: absolute; inset: 0; border-radius: 0; height: 100%; }
.rp-bg .media img { position: absolute; inset: 0; }
.rp-bg .img-note { top: 14px; right: 14px; left: auto; bottom: auto; }
.route-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,44,92,.15) 0%, rgba(20,44,92,.55) 40%, rgba(20,44,92,.94) 100%); }
.route-uk::before { background: linear-gradient(180deg, rgba(26,58,110,.15) 0%, rgba(26,58,110,.55) 40%, rgba(20,44,92,.95) 100%); }
.rp-body { margin-top: auto; width: 100%; padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 8px; }
.rp-badge { align-self: flex-start; padding: 6px 14px; border-radius: 12px; background: var(--blue-cta); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.route-uk .rp-badge { background: var(--violet); }
.rp-body h3 { color: #fff; font-size: var(--fs-lg); margin: 4px 0 0; }
.rp-body > p { color: #DCE6F0; margin: 0; font-size: var(--fs-sm); }
.journey { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.journey::before { content: ""; position: absolute; left: 16px; right: 16px; top: 16px; border-top: 2px dashed rgba(255,255,255,.45); }
.jr-stop { position: relative; display: flex; flex-direction: column; gap: 2px; }
.jr-dot { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--blue-cta); display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 0 0 5px rgba(255,255,255,.18); }
.jr-dot svg { width: 16px; height: 16px; }
.jr-stop.uk .jr-dot { background: var(--cyan); color: var(--purple); }
.jr-year { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.jr-where { font-size: var(--fs-sm); font-weight: 700; color: #fff; line-height: 1.3; }
.rp-fee { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: #DCE6F0; }
.rp-fee svg { width: 16px; height: 16px; color: var(--cyan); }
.rp-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: #fff; text-decoration: none; min-height: 40px; }
.rp-link svg { width: 16px; height: 16px; }
.rp-link:hover { color: var(--cyan); }
@media (max-width: 960px) {
  .glance { grid-template-columns: 1fr; }
  .routes-v2 .route-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gl-rows { grid-template-columns: 1fr; }
  .gl-row:nth-child(odd) { border-right: 0; }
  .gl-row:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .route-photo { min-height: 400px; }
  .jr-where { font-size: var(--fs-xs); }
}

/* Programme Structure: year-by-year steps */
.ys-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.ys-summary > div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--pale-2); border: 1px solid var(--line); }
.ys-summary strong { flex: none; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--blue-cta); font-size: 1.25rem; box-shadow: 0 4px 12px -8px rgba(20,44,92,.4); }
.ys-summary strong svg { width: 20px; height: 20px; }
.ys-summary span { font-size: var(--fs-sm); color: var(--navy); font-weight: 700; line-height: 1.3; }
.year-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.ys-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.ys-row:first-child { border-top: 0; padding-top: 4px; }
.ys-side { display: flex; gap: 16px; align-items: flex-start; }
.ys-no { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.25rem; background: var(--blue-cta); }
.ys-row.y2 .ys-no { background: var(--violet); }
.ys-row.y3 .ys-no { background: var(--purple); }
.ys-side h4 { font-size: var(--fs-lg); margin: 2px 0 2px; color: var(--navy); }
.ys-side h4 small { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
.ys-theme { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--blue-ink); font-weight: 700; }
.ys-row.y2 .ys-theme { color: var(--violet); }
.ys-row.y3 .ys-theme { color: var(--purple); }
.ys-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ys-meta li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.ys-meta svg { flex: none; width: 15px; height: 15px; color: var(--blue); margin-top: 1px; }
.ys-flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; border-radius: var(--r-pill); background: #E9F8F0; color: #0F7A4E; font-size: var(--fs-xs); font-weight: 700; }
.ys-flag svg { width: 14px; height: 14px; }
.ys-count { margin: 0 0 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ys-mods > .mod-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.ys-mods .mod { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue-cta); font-size: var(--fs-sm); color: var(--navy); line-height: 1.35; }
.ys-row.y2 .ys-mods .mod { border-left-color: var(--violet); }
.ys-row.y3 .ys-mods .mod { border-left-color: var(--purple); }
.ys-mods .mod-parts { flex: none; padding: 2px 8px; border-radius: var(--r-pill); background: var(--pale-2); color: var(--muted); font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.ys-mods .mod-option { grid-column: 1 / -1; padding: 12px; border-radius: 12px; border: 1px dashed var(--line-strong); }
.ys-mods .mod-option .mod-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ys-also { margin-top: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.ys-also-title { font-size: var(--fs-md); margin: 0 0 14px; color: var(--navy); }
.ys-also-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; }
.ys-also-grid h5 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); margin: 0 0 10px; color: var(--navy); }
.ys-also-grid h5 svg { width: 18px; height: 18px; color: var(--blue); }
.ys-also-grid .mpu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ys-also-grid { grid-template-columns: 1fr 1fr; } .ys-also-grid .pd-box-wide { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .ys-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ys-row { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .ys-mods > .mod-list, .ys-mods .mod-option .mod-list, .ys-also-grid, .ys-also-grid .mpu-list { grid-template-columns: 1fr; }
  .ys-summary { grid-template-columns: 1fr; }
}

/* Blog list: dark cards */
.blog-dark .filter-btn { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.2); }
.blog-dark .filter-btn .count { color: #AFC3D8; }
.blog-dark .filter-btn[aria-pressed="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.blog-dark .filter-btn[aria-pressed="true"] .count { color: var(--blue-ink); }
#blog-grid .news-card { background: #142C5C; border-color: rgba(255,255,255,.12); box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); }
#blog-grid .news-card .body { background: linear-gradient(180deg, #18366B 0%, #142C5C 100%); }
#blog-grid .news-card h3, #blog-grid .news-card h3 a { color: #fff !important; }
#blog-grid .news-card p { color: #C9D7E6; }
#blog-grid .news-card .meta span:not(.tag) { color: #AFC3D8; }
#blog-grid .news-card .meta .tag:first-child { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
#blog-grid .news-card .text-link { color: var(--cyan); }
#blog-grid .news-card .text-link:hover { color: #fff; }
.blog-dark .empty-state { background: rgba(255,255,255,.06); color: #fff; }

/* Home hero: no panel — text directly on the photo (photo dimmed evenly for legibility, no gradient) */
.hero-ref .hero-copy { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); }
.hero-ref .hero-bg img { filter: brightness(.62) saturate(1.05); }
.hero-ref .hero-copy h1.hero-display { color: #fff; }
.hero-ref h1 .hl { background: none; -webkit-text-fill-color: currentColor; color: var(--light-blue); }
.hero-ref .hero-copy .lead { color: #F3F4F6 !important; }
.hero-ref .hero-pill { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; text-shadow: none; }
.hero-ref .hero-pill svg, .hero-ref .hero-pill .x { color: var(--cyan); }
.hero-ref .uwe-inline { color: #fff; }
.hero-ref .uwe-inline small { color: #E1EAF3; }
.hero-ref .btn { text-shadow: none; }
@media (max-width: 720px) { .hero-ref .hero-bg img { filter: brightness(.55); } }

/* Bursary: seamless line inside the hero (replaces the gradient box) */
.hero-ref { padding-bottom: clamp(28px, 4vw, 44px); justify-content: flex-end; }
.hero-ref .hero-grid { margin-bottom: clamp(16px, 3vw, 40px); }
.bursary-bar.bursary-seamless { margin: 0; padding: 22px 0 0; background: none; box-shadow: none; border-radius: 0; border-top: 1px solid rgba(255,255,255,.28); overflow: visible;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.bursary-seamless::after { display: none; }
.bursary-seamless p { margin: 0; }
.bs-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.bs-label svg { width: 16px; height: 16px; }
.bs-price { display: inline-flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.bs-now { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bursary-seamless .bb-ast { font-size: .9rem; vertical-align: super; color: #fff; text-decoration: none; margin-left: -11px; margin-right: 2px; }
.bs-was { font-size: var(--fs-sm); color: #C9D7E6; text-decoration-color: rgba(255,170,190,.9); }
.bs-save { padding: 5px 12px; border-radius: var(--r-pill); background: var(--light-blue); color: var(--navy); font-size: var(--fs-xs); font-weight: 700; text-shadow: none; }
.bs-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.55); }
.bs-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.bs-link:hover { color: var(--cyan); border-color: var(--cyan); }
.bs-link:hover svg { transform: translateX(3px); }
.bs-note { flex-basis: 100%; font-size: .75rem; color: #DCE6F0; }
@media (max-width: 720px) {
  .hero-ref { padding-block: 92px 28px; }
  .bursary-bar.bursary-seamless { gap: 8px 14px; }
  .bs-label { flex-basis: 100%; }
  .bs-link { margin-left: 0; }
}

/* Home key facts: open feature row (no boxes) */
.ref-facts { padding-block: 0 clamp(48px, 6vw, 80px); }
.facts-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-strip > .fact.fact-card { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 30px 28px 32px; min-height: 0; position: relative; gap: 8px; }
.facts-strip > .fact.fact-card + .fact.fact-card { border-left: 1px solid var(--line) !important; }
.facts-strip > .fact.fact-card:first-child { padding-left: 0; }
.facts-strip > .fact.fact-card:last-child { padding-right: 0; }
.facts-strip .fact-card .icon { width: auto; height: auto; background: none !important; box-shadow: none !important; border-radius: 0; margin: 0 0 10px; color: var(--acc, var(--blue)); display: block; }
.facts-strip .fact-card .icon svg { width: 30px; height: 30px; stroke-width: 1.6; }
.facts-strip .fact-card h3 { font-size: var(--fs-md) !important; color: var(--navy); }
.facts-strip .fact-card p { font-size: var(--fs-sm); color: var(--muted); }
.facts-strip .fact-card::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; border-radius: 2px; background: var(--acc, var(--blue)); }
.facts-strip .fact-card + .fact-card::after { left: 28px; }
.fact-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--blue-ink); text-decoration: none; min-height: 32px; }
.fact-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.fact-more:hover svg { transform: translateX(3px); }
@media (max-width: 960px) {
  .facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-strip > .fact.fact-card { padding: 26px 22px; }
  .facts-strip > .fact.fact-card:nth-child(odd) { padding-left: 0; border-left: 0 !important; }
  .facts-strip > .fact.fact-card:nth-child(even) { padding-right: 0; }
  .facts-strip > .fact.fact-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .facts-strip .fact-card:nth-child(odd)::after { left: 0; }
  .facts-strip .fact-card:nth-child(even)::after { left: 22px; }
}
@media (max-width: 560px) {
  .facts-strip { grid-template-columns: 1fr; }
  .facts-strip > .fact.fact-card { padding: 22px 0 !important; border-left: 0 !important; }
  .facts-strip > .fact.fact-card + .fact.fact-card { border-top: 1px solid var(--line); }
  .facts-strip .fact-card::after { left: 0 !important; }
}
@media (max-width: 960px) { .facts-strip > .fact.fact-card.fact-card:nth-child(odd) { border-left: 0 !important; } }
@media (max-width: 560px) { .facts-strip > .fact.fact-card.fact-card.fact-card { border-left: 0 !important; } }

/* Home: 2+1 UWE Bristol teaser (open split with photos + journey) */
.uk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.uk-copy h2 { font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.25rem); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 12px; }
.uk-copy .lead { color: var(--muted); font-size: var(--fs-base); margin: 0; }
.uk-stats { list-style: none; margin: 26px 0 28px; padding: 18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uk-stats li { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
.uk-stats li:first-child { padding-left: 0; }
.uk-stats li + li { border-left: 1px solid var(--line); }
.uk-stats strong { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.1; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uk-stats span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.uk-visual { position: relative; display: grid; grid-template-columns: 1fr .62fr; grid-template-rows: 1fr auto; gap: 14px; }
.uk-ph-main { grid-row: 1 / span 2; }
.uk-ph-main .media { aspect-ratio: 4 / 4.4; border-radius: 26px; }
.uk-ph-small { align-self: start; }
.uk-ph-small .media { aspect-ratio: 1; border-radius: 22px; }
.uk-visual .img-note { top: 12px; bottom: auto; }
.uk-journey { list-style: none; margin: 0; padding: 18px 16px; align-self: end; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -28px rgba(20,44,92,.45); border: 1px solid var(--line); display: grid; gap: 12px; position: relative; }
.uk-journey::before { content: ""; position: absolute; left: 31px; top: 34px; bottom: 34px; border-left: 2px dashed var(--light-blue); }
.uk-journey li { position: relative; display: flex; align-items: center; gap: 12px; }
.uj-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-cta); color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; }
.uj-uk .uj-dot { background: var(--violet); }
.uk-journey li > span:last-child { display: flex; flex-direction: column; font-size: var(--fs-sm); font-weight: 700; color: var(--navy); line-height: 1.25; }
.uk-journey small { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 960px) { .uk-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .uk-visual { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .uk-ph-main { grid-row: auto; grid-column: 1 / -1; }
  .uk-ph-main .media { aspect-ratio: 16 / 11; }
  .uk-stats li { padding: 0 10px; }
}

/* Route cards: no background images */
.route-photo { min-height: 0; background: linear-gradient(140deg, #1A3A6E 0%, #142C5C 100%); }
.route-photo.route-uk { background: linear-gradient(140deg, #3F86B5 0%, #1C6A8C 55%, #142C5C 100%); }
.route-photo::before { content: attr(data-mark); inset: auto -6px -34px auto; background: none !important; font-size: clamp(7rem, 5rem + 6vw, 11rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: rgba(255,255,255,.06); }
.rp-body { margin-top: 0; }


/* =====================================================================
   Colour palette (Oct 2026): #F3F4F6 · #6FA3D6 · #142C5C · #BFD8EE · #3F86B5 · #6FA3D6
   Darker shades of the palette blue/orange/yellow are used only where text needs AA contrast.
   ===================================================================== */
:root {
  --navy: #142C5C; --text: #142C5C; --purple: #1A3A6E;
  --blue: #3F86B5; --blue-cta: #1C6A8C; --blue-cta-hover: #175A78; --blue-ink: #175A78;
  --light-blue: #BFD8EE; --cyan: #BFD8EE; --lavender: #3F86B5;
  --orange: #6FA3D6; --orange-hover: #5B92C8; --yellow: #6FA3D6;
  --violet: #175A78;
  --pale: #E6EEF6; --pale-2: #F3F4F6; --muted: #48586B;
  --line: rgba(20,44,92,.10); --line-strong: rgba(20,44,92,.18);
  --grad-hero: linear-gradient(135deg, #3F86B5 0%, #1C6A8C 55%, #142C5C 100%);
  --grad-soft: linear-gradient(135deg, #F3F4F6 0%, #DEE7F1 100%);
  --grad-cta: linear-gradient(120deg, #142C5C 0%, #1A3A6E 55%, #1C6A8C 100%);
  --grad-warm: linear-gradient(120deg, #6FA3D6 0%, #6FA3D6 100%);
}
body { background: #fff; color: var(--text); }
.section-alt { background: #F3F4F6 !important; }
.why.section-alt { --sec: #F3F4F6; }

/* Primary actions: palette orange with navy text (AA contrast) */
.btn-primary, .btn.btn-primary { background: var(--orange); color: var(--navy); box-shadow: 0 10px 22px -12px rgba(111,163,214,.9); }
.btn-primary:hover, .btn.btn-primary:hover { background: var(--orange-hover); color: var(--navy); }
.btn.btn-split svg { color: var(--orange); }
.nav-actions .btn-primary, .panel-foot .btn-primary { color: var(--navy); }

/* Dark sections: yellow eyebrows, light-blue links */
.section-dark .eyebrow, .hero-ref .bs-label, .gl-eyebrow, .rp-badge + h3 ~ .journey .jr-year { color: var(--yellow); }
.section-dark .text-link:not(.card .text-link) { color: var(--light-blue); }

/* Highlights */
.hero-ref h1 .hl { color: var(--yellow) !important; }
.bs-save { background: var(--yellow); color: var(--navy); }
.eyebrow-pill svg, .bs-label svg { color: var(--orange); }
.why-num, .uk-stats strong, .countdown .cd-num, .tech-stat strong { background: var(--grad-warm) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.save-chip, .promo-tag { background: var(--yellow); color: var(--navy); }
.fc-accent { background: var(--light-blue) !important; }
.feat-card.fc-dark .fc-icon { color: var(--yellow); border-color: rgba(111,163,214,.5); }
.ar-stat { background: var(--yellow); }
.rp-badge { background: var(--orange); color: var(--navy); }
.route-uk .rp-badge { background: var(--yellow); color: var(--navy); }
.jr-stop.uk .jr-dot { background: var(--yellow); color: var(--navy); }
.uj-uk .uj-dot { background: var(--orange); color: var(--navy); }
.ys-row.y2 .ys-no { background: var(--orange); color: var(--navy); }
.ys-row.y3 .ys-no { background: var(--navy); }
.ys-row.y2 .ys-theme { color: var(--violet); }
.ys-row.y2 .ys-mods .mod { border-left-color: var(--orange); }
.ys-row.y3 .ys-mods .mod { border-left-color: var(--navy); }
.ne-date .m { background: var(--orange); color: var(--navy); }
.cta-band::after { background: radial-gradient(closest-side, rgba(111,163,214,.28), transparent); }
.hero-card .big, .hero h1 .grad { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Palette contrast fixes */
.compare thead th:nth-child(3), .compare-v2 thead th:nth-child(3) { color: #124A64; }
.uwe-step .n { background: var(--blue-cta); }
.uwe-sources a, a.src { color: var(--blue-ink); }
.section-dark .disclaimer a, .section-dark p a:not(.btn):not(.text-link) { color: var(--light-blue); }

/* At a glance: headline + small fee note */
.gl-title { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.2; color: #fff; margin: 0; }
.gl-sub { margin: 0; font-size: var(--fs-sm); color: #DCE6F0; }
.gl-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); font-size: var(--fs-xs); line-height: 1.5; color: #DCE6F0; position: relative; z-index: 1; }
.gl-note svg { flex: none; width: 16px; height: 16px; color: var(--yellow); margin-top: 1px; }
.gl-fee .btn { margin-top: 18px; }
.pd-sources a { color: var(--blue-ink); }

/* Programme highlights: open numbered list (no boxes) */
.feat-open { margin-bottom: clamp(36px, 5vw, 56px); }
.feat-open-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 8px; }
.feat-open-head h3 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); margin: 0; color: var(--navy); }
.feat-open-head p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.feat-open .feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); }
.feat-open .feat { display: grid; grid-template-columns: auto 26px 1fr; gap: 14px; align-items: start; padding: 20px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.feat-open .feat-n { font-size: var(--fs-xs); font-weight: 700; color: var(--violet); letter-spacing: .04em; padding-top: 3px; min-width: 22px; }
.feat-open .feat > svg { width: 22px; height: 22px; color: var(--blue); margin-top: 1px; background: none; padding: 0; }
.feat-open .feat strong { display: block; font-size: var(--fs-base); color: var(--navy); margin-bottom: 4px; line-height: 1.35; }
.feat-open .feat span:not(.feat-n) { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
@media (max-width: 720px) { .feat-open .feats { grid-template-columns: 1fr; } }

/* Programme details: underline tabs (no dark bar) */
.pd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin-bottom: 6px; }
.pd-head h3 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); margin: 0; color: var(--navy); }
.pd-head .pd-prompt { margin: 0; color: var(--muted); font-size: var(--fs-sm); display: block; }
.pd .pd-bar { background: none !important; border: 0 !important; border-bottom: 1px solid var(--line-strong) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 0; }
.pd .pd-topic { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--muted); padding: 16px 14px 18px; position: relative; text-align: left; }
.pd .pd-topic::before { display: none !important; }
.pd .pd-topic::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .2s var(--ease); }
.pd .pd-topic strong { color: var(--navy); }
.pd .pd-topic small { color: var(--muted); }
.pd .pd-topic-icon { background: var(--pale) !important; color: var(--blue-ink) !important; }
.pd .pd-topic:hover::after { background: var(--light-blue); }
.pd .pd-topic[aria-expanded="true"]::after { background: var(--orange); }
.pd .pd-topic[aria-expanded="true"] .pd-topic-icon { background: var(--orange) !important; color: var(--navy) !important; }
.pd .pd-topic[aria-expanded="true"] small { color: var(--muted); }
.pd .pd-topic + .pd-topic { border-left: 0 !important; }
.pd .pd-panels .pd-panel { border-radius: 0 0 24px 24px; }
@media (max-width: 900px) { .pd .pd-bar { overflow-x: auto; scrollbar-width: none; } .pd .pd-topic { flex: 0 0 auto; } }

/* =====================================================================
   Colour palette (Oct 2026, v2): Berkeley Blue #142C5C · California Gold #6FA3D6 · Metallic Gold #B6B4AE
   Tints/shades of these are used for backgrounds and for text that needs AA contrast.
   ===================================================================== */
:root {
  --navy: #142C5C; --text: #142C5C; --purple: #1A3A6E;
  --blue: #3F86B5; --blue-cta: #1C6A8C; --blue-cta-hover: #175A78; --blue-ink: #175A78;
  --light-blue: #BFD8EE; --cyan: #BFD8EE; --lavender: #3F86B5;
  --gold: #6FA3D6; --gold-hover: #5B92C8; --metal: #B6B4AE; --gold-ink: #175A78;
  --orange: var(--gold); --orange-hover: var(--gold-hover); --yellow: var(--gold);
  --violet: var(--gold-ink);
  --pale: #E6EEF6; --pale-2: #F3F4F6; --muted: #4A5868;
  --line: rgba(20,44,92,.11); --line-strong: rgba(20,44,92,.2);
  --grad-hero: linear-gradient(135deg, #1C6A8C 0%, #1A3A6E 55%, #142C5C 100%);
  --grad-soft: linear-gradient(135deg, #F3F4F6 0%, #E6EEF6 100%);
  --grad-cta: linear-gradient(120deg, #0F2349 0%, #142C5C 55%, #1C6A8C 100%);
  --grad-warm: linear-gradient(120deg, #6FA3D6 0%, #B6B4AE 100%);
}
.section-alt { background: #F3F4F6 !important; }
.why.section-alt { --sec: #F3F4F6; }
/* Metallic gold for fine accents */
.eyebrow-pill svg, .bs-label svg, .facts-strip .fact-card:nth-child(4n+2)::after { color: var(--metal); }
.feat-open .feat-n, .gl-eyebrow, .ys-row.y2 .ys-theme { color: var(--gold-ink); }
.section-dark .eyebrow, .gl-eyebrow, .jr-year { color: var(--gold); }
.uk-stats strong, .why-num, .countdown .cd-num { background: var(--grad-warm) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.uk-stats strong { background: linear-gradient(120deg, #1C6A8C, #142C5C) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.footer-legal dd, .footer-loc address strong { color: #fff; }
.site-footer h3 { color: var(--gold); }

/* Home: About HELP Academy */
.ha-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ha-media { position: relative; padding: 0 12% 12% 0; }
.ha-ph-a .media { aspect-ratio: 4 / 4.6; border-radius: 26px; }
.ha-ph-b { position: absolute; right: 0; bottom: 0; width: 46%; }
.ha-ph-b .media { aspect-ratio: 5 / 4; border-radius: 20px; border: 5px solid #fff; box-shadow: 0 24px 50px -24px rgba(20,44,92,.5); }
.ha-ph-b .img-note { display: none; }
.ha-media::before { content: ""; position: absolute; left: -18px; top: -18px; width: 120px; height: 120px; border-radius: 26px; background: var(--grad-warm); opacity: .9; z-index: -1; }
.ha-copy h2 { font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.25rem); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 14px; }
.ha-copy .lead { color: var(--muted); font-size: var(--fs-base); margin: 0; }
.ha-points { list-style: none; margin: 26px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ha-points li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.ha-points li > svg { width: 24px; height: 24px; color: var(--blue-cta); margin-top: 1px; }
.ha-points li:nth-child(even) > svg { color: var(--metal); }
.ha-points strong { display: block; font-size: var(--fs-sm); color: var(--navy); margin-bottom: 2px; }
.ha-points span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
/* Programmes: more compact on home */
[data-page="home"] .home-progs .prog-card .media { aspect-ratio: 16 / 7.5; }
[data-page="home"] .home-progs .prog-card .body { padding: 20px 24px 22px; gap: 10px; }
/* Why: department row */
.why { --sec: #fff; }
.why-people { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(28px, 4vw, 40px); padding-top: 24px; border-top: 1px solid var(--line); }
.why-people-label { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.why-people .hod-mini { margin-top: 0; flex: 0 1 460px; background: #fff; }
@media (max-width: 960px) { .ha-grid { grid-template-columns: minmax(0, 1fr); } .ha-media { max-width: 560px; } }
@media (max-width: 520px) { .ha-points { grid-template-columns: 1fr; } .ha-media::before { left: -8px; top: -8px; width: 80px; height: 80px; } }

/* =====================================================================
   Colour palette (Oct 2026, v3 — classic navy & ocean blue, from the client's reference)
   Navy #142C5C · Ocean #1C6A8C · Sky #6FA3D6 · Mist #DCE6F0 · Paper #F3F4F6 · White
   ===================================================================== */
:root {
  --navy: #142C5C; --text: #142C5C; --purple: #1A3A6E;
  --ocean: #1C6A8C; --ocean-hover: #175A78; --sky: #6FA3D6; --sky-light: #A9CBEA; --mist: #DCE6F0; --paper: #F3F4F6; --stone: #B6B4AE;
  --blue: #3F86B5; --blue-cta: #1C6A8C; --blue-cta-hover: #175A78; --blue-ink: #175A78;
  --light-blue: #BFD8EE; --cyan: #BFD8EE; --lavender: #6FA3D6;
  --gold: var(--sky); --gold-hover: #5B92C8; --metal: var(--sky); --gold-ink: #175A78;
  --orange: var(--ocean); --orange-hover: var(--ocean-hover); --yellow: var(--sky); --violet: #175A78;
  --pale: #E6EEF6; --pale-2: #F3F4F6; --muted: #4A5868;
  --line: rgba(20,44,92,.11); --line-strong: rgba(20,44,92,.2);
  --grad-hero: linear-gradient(135deg, #1C6A8C 0%, #18366B 60%, #142C5C 100%);
  --grad-soft: linear-gradient(135deg, #F3F4F6 0%, #DCE6F0 100%);
  --grad-cta: linear-gradient(120deg, #142C5C 0%, #18366B 55%, #1C6A8C 100%);
  --grad-warm: linear-gradient(120deg, #1C6A8C 0%, #6FA3D6 100%);
}
.section-alt { background: var(--paper) !important; }
.why.section-alt { --sec: var(--paper); }
/* Buttons: ocean blue with white text */
.btn-primary, .btn.btn-primary { background: var(--ocean); color: #fff; box-shadow: 0 10px 22px -12px rgba(28,106,140,.9); }
.btn-primary:hover, .btn.btn-primary:hover { background: var(--ocean-hover); color: #fff; }
.nav-actions .btn-primary, .panel-foot .btn-primary { color: #fff; }
.btn.btn-split svg { color: var(--ocean); }
/* Highlights on dark: sky blue */
.hero-ref h1 .hl { color: var(--sky-light) !important; }
.section-dark .eyebrow, .gl-eyebrow, .jr-year, .site-footer h3 { color: var(--sky-light); }
.bs-save, .save-chip, .promo-tag { background: var(--sky-light); color: var(--navy); }
.uk-stats strong, .why-num, .countdown .cd-num, .tech-stat strong { background: linear-gradient(120deg, #1C6A8C, #142C5C) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
/* Solid colour tiles (like the reference's ocean/sky blocks) */
.ar-stat { background: var(--sky); color: var(--navy); }
.rp-badge { background: var(--sky-light); color: var(--navy); }
.route-uk .rp-badge { background: #fff; color: var(--navy); }
.jr-stop.uk .jr-dot { background: var(--sky-light); color: var(--navy); }
.uj-uk .uj-dot { background: var(--ocean); color: #fff; }
.ys-row.y2 .ys-no { background: var(--ocean); color: #fff; }
.ys-row.y2 .ys-mods .mod { border-left-color: var(--ocean); }
.ne-date .m { background: var(--ocean); color: #fff; }
.pd .pd-topic[aria-expanded="true"]::after { background: var(--ocean); }
.pd .pd-topic[aria-expanded="true"] .pd-topic-icon { background: var(--ocean) !important; color: #fff !important; }
.fc-accent { background: var(--mist) !important; }
.feat-card.fc-dark .fc-icon { color: var(--sky-light); border-color: rgba(169,203,234,.5); }
.ha-media::before { background: linear-gradient(135deg, var(--ocean), var(--sky)); }
.ha-points li:nth-child(even) > svg, .eyebrow-pill svg, .bs-label svg { color: var(--ocean); }
.cta-band { background: linear-gradient(120deg, #142C5C 0%, #142C5C 62%, #1C6A8C 62%, #1C6A8C 100%); }
.cta-band::after { background: radial-gradient(closest-side, rgba(111,163,214,.25), transparent); }
.feat-open .feat-n, .why-people-label { color: var(--ocean); }
.ys-flag { background: #E6F0F8; color: var(--ocean-hover); }

/* Official HELP Academy logo (white artwork) */
.brand-logo { display: block; height: 40px; width: auto; }
.site-header .logo { gap: 0; }
.site-footer .brand-logo { height: 56px; }
@media (max-width: 720px) { .site-header .brand-logo { height: 32px; } }

/* Footer social icons */
.footer-social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 10px; }
.footer-social .soc { width: 42px; height: 42px; min-height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; transition: background .2s var(--ease), transform .2s var(--ease); --soc-ink: #142C5C; }
.footer-social .soc svg { width: 19px; height: 19px; }
.footer-social a.soc:hover { background: #fff; color: var(--navy); transform: translateY(-2px); --soc-ink: #fff; }
.footer-social .soc.is-pending { opacity: .55; cursor: default; }
.site-footer ul.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.site-header .brand-logo { height: 46px; }
@media (max-width: 720px) { .site-header .brand-logo { height: 38px; } }

/* Programme details: dark panel behind the topic tabs */
.pd { background: linear-gradient(135deg, #142C5C 0%, #18366B 60%, #1C6A8C 140%); border-radius: 28px; padding: clamp(24px, 3vw, 40px); color: #fff; box-shadow: 0 30px 60px -36px rgba(20,44,92,.7); }
.pd .pd-head h3 { color: #fff; }
.pd .pd-head .pd-prompt { color: #C9D7E6; }
.pd .pd-bar { border-bottom-color: rgba(255,255,255,.18) !important; }
.pd .pd-topic strong { color: #fff; }
.pd .pd-topic small { color: #AFC3D8; }
.pd .pd-topic-icon { background: rgba(255,255,255,.1) !important; color: #A9CBEA !important; }
.pd .pd-topic:hover::after { background: rgba(169,203,234,.6); }
.pd .pd-topic[aria-expanded="true"]::after { background: #A9CBEA; }
.pd .pd-topic[aria-expanded="true"] .pd-topic-icon { background: #A9CBEA !important; color: #142C5C !important; }
.pd .pd-topic[aria-expanded="true"] small { color: #C9D7E6; }
.pd .pd-topic:focus-visible { outline-color: #A9CBEA; }
.pd .pd-panels .pd-panel { margin-top: 20px; border-radius: 22px; background: #fff; color: var(--text); }

/* =====================================================================
   OPEN LAYOUT SYSTEM (Oct 2026)
   Content sits on the page; structure comes from alignment, whitespace
   and hairline rules. Boxes are kept only where content needs a frame:
   forms, the at-a-glance summary, the programme-details panel, maps.
   ===================================================================== */
:root { --rule: 1px solid rgba(20,44,92,.14); --rule-dark: 1px solid rgba(255,255,255,.16); }

/* Labels: sentence case, no tracking */
.eyebrow { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 700; }
.hero-eyebrow, .bs-label, .gl-eyebrow, .ys-count, .why-people-label, .jr-year, .uj-year, .ar-tags li, .cc-kicker, .ne-all { text-transform: none !important; letter-spacing: 0 !important; }

/* ---- Generic text cards → open columns with a top rule ---- */
.card.info-card:not(.brochure-side), .card.role-cat, .uwe-offer, .uwe-city-card {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-top: var(--rule) !important; padding: 22px 0 0 !important;
}
.section-dark .card.info-card, .section-dark .uwe-city-card, .section-dark .uwe-offer { border-top: var(--rule-dark) !important; color: #fff; }
.section-dark .card.info-card h3 { color: #fff; }
.section-dark .card.info-card p { color: #C9D7E6; }
.section-dark .card.info-card .text-link { color: var(--sky-light, #A9CBEA); }
.card.info-card .icon, .card.role-cat .icon, .uwe-offer .icon { background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; margin-bottom: 4px; color: var(--ocean, #1C6A8C) !important; display: block; }
.section-dark .card.info-card .icon { color: var(--sky-light, #A9CBEA) !important; }
.card.info-card .icon svg, .card.role-cat .icon svg, .uwe-offer .icon svg { width: 28px; height: 28px; stroke-width: 1.6; }
:is(.grid-2, .grid-3, .uwe-offers, .uwe-city) { column-gap: clamp(28px, 4vw, 56px) !important; row-gap: 36px !important; }

/* ---- Photo cards → image + caption, no frame ---- */
.facility.card, .tech-card.card, .news-card.card, .video-card.card, .prog-card.card {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible;
}
.facility .media, .tech-card .media, .news-card .media, .video-card .media, .prog-card .media { border-radius: 18px !important; overflow: hidden; }
.facility .body, .tech-card .body, .news-card .body, .video-card .body, .prog-card .body { background: none !important; padding: 16px 0 0 !important; }
.prog-card:hover, .news-card:hover { transform: none; box-shadow: none !important; }
.prog-card .actions { padding-top: 4px; }
.section-dark .video-card, .section-dark .video-card h3 { color: #fff; }
#blog-grid .news-card { background: none !important; box-shadow: none !important; }
#blog-grid .news-card .body { background: none !important; }

/* ---- Home: "Why HELP Academy" as a ruled list ---- */
.feat-cards { display: block; border-top: var(--rule); }
.feat-cards .feat-card { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px 28px; align-items: center; min-height: 0 !important;
  padding: 26px 0 !important; border-radius: 0 !important; background: none !important; color: var(--navy) !important; border-bottom: var(--rule); overflow: visible; }
.feat-cards .feat-card::before { display: none !important; }
.feat-cards .fc-top { margin: 0; }
.feat-cards .fc-num { display: none; }
.feat-cards .fc-icon { width: 48px; height: 48px; border-radius: 14px; border: 0 !important; background: var(--mist, #DCE6F0); color: var(--ocean, #1C6A8C) !important; }
.feat-cards h3 { color: var(--navy) !important; font-size: var(--fs-md) !important; }
.feat-cards p { color: var(--muted) !important; }
.feat-cards .fc-tab { position: static; background: none; padding: 0; }
.feat-cards .fc-tab::before, .feat-cards .fc-tab::after { display: none; }
.feat-cards .fc-more { background: none !important; color: var(--blue-ink) !important; padding: 8px 0 !important; box-shadow: none !important; font-size: var(--fs-sm); }
@media (max-width: 860px) { .feat-cards .feat-card { grid-template-columns: 44px minmax(0, 1fr); } .feat-cards .feat-card p, .feat-cards .fc-tab { grid-column: 2; } }

/* ---- Home: campus mini-cards, news & events → open ---- */
.ar-card { background: none !important; border-radius: 0 !important; padding: 16px 0 0 !important; border-top: var(--rule); }
.ne-panel { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
.ne-grid { column-gap: clamp(32px, 5vw, 72px); }
.ne-grid > .ne-panel + .ne-panel { border-left: var(--rule) !important; padding-left: clamp(32px, 5vw, 72px) !important; }
@media (max-width: 960px) { .ne-grid > .ne-panel + .ne-panel { border-left: 0 !important; padding-left: 0 !important; border-top: var(--rule) !important; padding-top: 28px !important; } }
.ne-head { border-bottom-color: rgba(20,44,92,.14); }

/* ---- Full-bleed bands instead of floating boxes ---- */
.intl-band, .cta-band { border-radius: 0 !important; margin-inline: calc(50% - 50vw); box-shadow: none !important; }
.intl-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.intl-band .content { padding-left: max(24px, calc(50vw - 600px)) !important; padding-block: clamp(48px, 6vw, 88px) !important; }
.intl-band .media { min-height: 420px; }
.cta-band { padding-inline: max(24px, calc(50vw - 600px)) !important; padding-block: clamp(44px, 5vw, 72px) !important; }
section:has(> .container > .cta-band) { padding-bottom: 0 !important; }
section:has(> .container > .intl-band) { padding-block: 0 !important; }
.site-footer { margin-top: 0 !important; }
@media (max-width: 860px) { .intl-band { grid-template-columns: 1fr; } .intl-band .content { padding-inline: 20px !important; } .cta-band { padding-inline: 20px !important; } }

/* ---- Programme pages ---- */
.prog-collab { margin: -6px 0 14px; font-size: var(--fs-sm); color: var(--sky-light, #A9CBEA); font-weight: 700; }
.po-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.po-side { position: sticky; top: calc(var(--header-h, 80px) + 20px); }
.po-side .glance { grid-template-columns: 1fr; }
.po-side .gl-rows { grid-template-columns: 1fr; }
.po-side .gl-row { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 14px 22px; }
.po-side .gl-row:last-child { border-bottom: 0 !important; }
.po-main .feat-open { margin-bottom: clamp(40px, 5vw, 56px); }
.po-main .feat-open .feats { grid-template-columns: 1fr; }
.po-main .feat-open .feat { grid-template-columns: 28px 1fr; }
.po-main .feat-open-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }
@media (max-width: 960px) { .po-grid { grid-template-columns: 1fr; } .po-side { position: static; } }

/* study routes: open, side by side with a divider */
.routes-v2 .route-grid { gap: 0; border-top: var(--rule); border-bottom: var(--rule); }
.route-photo { background: none !important; color: var(--navy) !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0 !important; }
.route-photo::before { content: none !important; }
.route-photo + .route-photo { border-left: var(--rule); }
.route-photo .rp-body { padding: 24px 0 24px 0; }
.route-photo + .route-photo .rp-body { padding-left: clamp(20px, 3vw, 36px); }
.route-photo:first-child .rp-body { padding-right: clamp(20px, 3vw, 36px); }
.route-photo h3 { color: var(--navy) !important; font-size: var(--fs-md) !important; }
.route-photo .rp-body > p { color: var(--muted) !important; }
.rp-badge { background: var(--navy) !important; color: #fff !important; }
.route-uk .rp-badge { background: var(--ocean, #1C6A8C) !important; color: #fff !important; }
.journey::before { border-top-color: rgba(20,44,92,.25) !important; }
.jr-dot { background: var(--mist, #DCE6F0) !important; color: var(--navy) !important; box-shadow: none !important; }
.jr-stop.uk .jr-dot { background: var(--ocean, #1C6A8C) !important; color: #fff !important; }
.jr-year { color: var(--ocean, #1C6A8C) !important; }
.jr-where { color: var(--navy) !important; }
.rp-fee { color: var(--muted) !important; }
.rp-fee svg { color: var(--ocean, #1C6A8C) !important; }
.rp-link { color: var(--blue-ink) !important; }
@media (max-width: 960px) { .route-photo + .route-photo { border-left: 0; border-top: var(--rule); } .route-photo + .route-photo .rp-body, .route-photo:first-child .rp-body { padding-inline: 0; } }

/* highlights: two-column ruled list */
.hl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; }
.hl-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }
.hl-head p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
.hl-item { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 22px 0; border-top: var(--rule); }
.hl-item > svg { width: 26px; height: 26px; color: var(--ocean, #1C6A8C); stroke-width: 1.6; }
.hl-item h3 { font-size: var(--fs-base); margin: 2px 0 4px; color: var(--navy); }
.hl-item p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 720px) { .hl-list { grid-template-columns: 1fr; } }

/* FAQ: ruled accordion */
.faq { gap: 0; border-top: var(--rule); }
.faq details { background: none !important; border: 0 !important; border-bottom: var(--rule) !important; border-radius: 0 !important; }
.faq summary { padding: 18px 0; }
.faq .answer { padding: 0 0 20px; }
.brochure-side.card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.brochure-side .media { border-radius: 18px; }
.other-prog { background: none !important; border: 0 !important; box-shadow: none !important; border-top: var(--rule) !important; border-bottom: var(--rule) !important; border-radius: 0 !important; padding-inline: 0 !important; }

/* ---- UWE page ---- */
.uwe-steps { gap: 0 !important; position: relative; }
.uwe-step { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 20px 0 0 !important; position: relative; display: block !important; }
.uwe-step::after { content: ""; position: absolute; left: 52px; right: 0; top: 22px; border-top: 2px dashed rgba(20,44,92,.2); }
.uwe-step:last-child::after { display: none; }
.uwe-step .n { margin-bottom: 14px; position: relative; z-index: 1; }
.uwe-stats { gap: 0 !important; border-top: var(--rule-dark); border-bottom: var(--rule-dark); }
.uwe-stat { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 24px 20px !important; }
.uwe-stat + .uwe-stat { border-left: var(--rule-dark) !important; }
.uwe-offer ul li::before { background: var(--ocean, #1C6A8C); }
@media (max-width: 900px) { .uwe-step::after { display: none; } .uwe-steps { row-gap: 28px !important; } .uwe-stat:nth-child(odd) { border-left: 0 !important; } }

/* ---- About: Head of Department open layout ---- */
.hod-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.hod-card .hod-message { background: none !important; padding: 4px 0 0 28px !important; border-left: 3px solid var(--ocean, #1C6A8C); border-radius: 0 !important; }
.hod-card .hod-message::before { display: none; }

/* ---- Contact ---- */
.side-card.card { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; border-top: var(--rule) !important; padding: 22px 0 0 !important; }
.map-card.card { background: none !important; border: 0 !important; box-shadow: none !important; }
.map-card .map-frame { border-radius: 20px; overflow: hidden; }
.map-card .body { padding-inline: 0 !important; }

/* ---- Careers vacancies note ---- */
.card.vacancy, .empty-state { background: none !important; border: 0 !important; border-top: var(--rule-dark) !important; border-bottom: var(--rule-dark) !important; border-radius: 0 !important; box-shadow: none !important; }

/* ---- News articles: open, separated by rules ---- */
.card.article { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; border-top: var(--rule-dark) !important; padding: 40px 0 !important; color: #fff; }
.section-dark .card.article h2 { color: #fff; }
.section-dark .card.article .prose, .section-dark .card.article .prose p { color: #DCE6F0; }
.section-dark .card.article .detail-list div { border-color: rgba(255,255,255,.14); }
.section-dark .card.article .detail-list dt { color: #AFC3D8; }
.section-dark .card.article .detail-list dd { color: #fff; }
.section-dark .card.article .text-link { color: #A9CBEA; }
.card.article.is-target { box-shadow: none !important; outline: 0; }
.card.article.is-target h2 { text-decoration: underline; text-decoration-color: #A9CBEA; text-underline-offset: 6px; }
.section-dark .card.article strong, .section-dark .card.article b { color: #fff; }
.section-dark .map-card address { color: #fff; }
.section-dark .map-card address small { color: #C9D7E6; }
.card.h-card { background: none !important; border: 0 !important; box-shadow: none !important; border-top: var(--rule) !important; border-bottom: var(--rule) !important; border-radius: 0 !important; padding-block: 28px; gap: clamp(24px, 4vw, 48px); }
.card.h-card .media { border-radius: 18px !important; }
.card.h-card .body { padding: 0 !important; }
.cta-band { background: linear-gradient(110deg, #1C6A8C 0%, #18366B 70%, #142C5C 100%) !important; }
.cta-band::after { display: none; }

/* =====================================================================
   ACCENT COLOURS (Oct 2026) — added around the navy / ocean core
   Teal #1E9E8F · Amber #F2A93B · Coral #E8735A · Sky #6FA3D6
   Each has a soft tint (backgrounds/icon chips) and a deep "ink" for text.
   ===================================================================== */
:root {
  --teal: #1E9E8F;  --teal-tint: #E3F4F1;  --teal-ink: #11695F;
  --amber: #F2A93B; --amber-tint: #FDF1DD; --amber-ink: #8A5600;
  --coral: #E8735A; --coral-tint: #FCE9E4; --coral-ink: #A9412A;
  --skyc: #6FA3D6;  --sky-tint: #E6EFF9;   --sky-ink: #175A78;
}

/* Cycling accent per item: icon chip + colour */
:is(.hl-list, .feats, .ha-points, .feat-cards, .grid-2, .grid-3, .uwe-offers, .uwe-city, .ys-also-grid, .gl-rows, .uk-stats, .uwe-stats) > :nth-child(4n+1) { --ac: var(--ocean, #1C6A8C); --ac-tint: var(--sky-tint); --ac-ink: var(--sky-ink); }
:is(.hl-list, .feats, .ha-points, .feat-cards, .grid-2, .grid-3, .uwe-offers, .uwe-city, .ys-also-grid, .gl-rows, .uk-stats, .uwe-stats) > :nth-child(4n+2) { --ac: var(--teal); --ac-tint: var(--teal-tint); --ac-ink: var(--teal-ink); }
:is(.hl-list, .feats, .ha-points, .feat-cards, .grid-2, .grid-3, .uwe-offers, .uwe-city, .ys-also-grid, .gl-rows, .uk-stats, .uwe-stats) > :nth-child(4n+3) { --ac: var(--amber); --ac-tint: var(--amber-tint); --ac-ink: var(--amber-ink); }
:is(.hl-list, .feats, .ha-points, .feat-cards, .grid-2, .grid-3, .uwe-offers, .uwe-city, .ys-also-grid, .gl-rows, .uk-stats, .uwe-stats) > :nth-child(4n+4) { --ac: var(--coral); --ac-tint: var(--coral-tint); --ac-ink: var(--coral-ink); }

.hl-item > svg, .feat-open .feat > svg, .ha-points li > svg, .uwe-offer .icon svg, .card.info-card:not(.brochure-side) .icon svg, .card.role-cat .icon svg {
  box-sizing: content-box; padding: 9px; border-radius: 12px; background: var(--ac-tint, var(--sky-tint)); color: var(--ac, var(--ocean)) !important; }
.hl-item, .feat-open .feat { grid-template-columns: 44px 1fr !important; }
.ha-points li { grid-template-columns: 42px 1fr; }
.feat-cards .fc-icon { background: var(--ac-tint) !important; color: var(--ac) !important; }
.feat-cards .fc-more { color: var(--ac-ink) !important; }
.card.info-card:not(.brochure-side), .card.role-cat, .uwe-offer, .uwe-city-card { border-top: 3px solid var(--ac, var(--ocean)) !important; }
.section-dark .card.info-card:not(.brochure-side) .icon svg { background: rgba(255,255,255,.08); color: var(--ac-tint) !important; }
.gl-row > svg { background: var(--ac-tint) !important; color: var(--ac) !important; }
.uwe-offer ul li::before { background: var(--ac); }

/* Big numbers in accent colours */
.uk-stats li strong, .uwe-stat strong { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ac-ink) !important; }
.uwe-stat strong { color: var(--ac-tint) !important; }
.uwe-stat > svg { color: var(--ac) !important; }

/* Tinted section backgrounds for rhythm */
#why-help { background: var(--teal-tint); --sec: var(--teal-tint); }
#why-help .feat-cards, #why-help .feat-cards .feat-card { border-color: rgba(17,105,95,.18) !important; }
.uk-split { background: var(--amber-tint); }
.uk-split .uk-stats { border-color: rgba(138,86,0,.18); }
.uk-split .uk-stats li + li { border-color: rgba(138,86,0,.18); }
section:has(> .container > .hl) { background: var(--sky-tint) !important; }
section:has(> .container > .hl) .hl-item { border-top-color: rgba(23,90,120,.16); }
#campus.section-alt { background: linear-gradient(180deg, #F3F4F6 0%, var(--coral-tint) 140%) !important; }

/* Accent touches */
.hero-ref h1 .hl { color: var(--amber) !important; }
.eyebrow-pill svg { color: var(--coral) !important; }
.eyebrow-pill { border-color: rgba(232,115,90,.25); }
.prog-collab { color: var(--amber) !important; }
.home-progs .prog-card:nth-child(2) .prog-tagline { color: var(--coral-ink) !important; }
.home-progs .prog-card:nth-child(1) .prog-tagline { color: var(--teal-ink) !important; }
.ne-date .m { background: var(--coral) !important; color: #fff !important; }
.ne-icon { background: var(--amber-tint) !important; color: var(--amber-ink) !important; }
.ne-panel + .ne-panel .ne-icon { background: var(--teal-tint) !important; color: var(--teal-ink) !important; }
.ar-stat { background: var(--amber) !important; color: var(--navy) !important; }
.ar-check { background: var(--navy); }
.ar-tags li { border-color: rgba(30,158,143,.35); color: var(--teal-ink); background: #fff; }
.uj-uk .uj-dot, .jr-stop.uk .jr-dot { background: var(--coral) !important; color: #fff !important; }
.route-uk .rp-badge { background: var(--coral-ink) !important; }
.rp-badge { background: var(--teal-ink) !important; }
.ys-row.y1 .ys-no { background: var(--ocean); } .ys-row.y2 .ys-no { background: var(--teal); color: #fff; } .ys-row.y3 .ys-no { background: var(--coral-ink); }
.ys-row.y1 .ys-mods .mod { border-left-color: var(--ocean); } .ys-row.y2 .ys-mods .mod { border-left-color: var(--teal); } .ys-row.y3 .ys-mods .mod { border-left-color: var(--coral); }
.ys-row.y2 .ys-theme { color: var(--teal-ink) !important; } .ys-row.y3 .ys-theme { color: var(--coral-ink) !important; }
.pd .pd-topic[aria-expanded="true"]::after { background: var(--amber) !important; }
.pd .pd-topic[aria-expanded="true"] .pd-topic-icon { background: var(--amber) !important; color: var(--navy) !important; }
.pd { background: radial-gradient(60% 120% at 100% 0%, rgba(30,158,143,.35), transparent 60%), linear-gradient(135deg, #142C5C 0%, #18366B 60%, #1C6A8C 140%) !important; }
.section-dark::before { background: radial-gradient(55% 70% at 90% 0%, rgba(30,158,143,.28), transparent 70%), radial-gradient(45% 60% at 0% 100%, rgba(242,169,59,.16), transparent 70%) !important; }
.cta-band { background: linear-gradient(110deg, #1E9E8F 0%, #1C6A8C 45%, #142C5C 100%) !important; }
.dip-card:nth-child(1) .dip-panel { background: linear-gradient(135deg, rgba(28,106,140,.97), rgba(20,44,92,.98)) !important; }
.dip-card:nth-child(2) .dip-panel { background: linear-gradient(135deg, rgba(17,105,95,.97), rgba(20,44,92,.98)) !important; }
.dip-card:nth-child(3) .dip-panel { background: linear-gradient(135deg, rgba(169,65,42,.95), rgba(20,44,92,.98)) !important; }
.facts-strip .fact-card::after, .facility .body h3::before { background: var(--ac, var(--ocean)); }
.gl-fee { background: linear-gradient(150deg, #142C5C 0%, #18366B 55%, #11695F 130%) !important; }
.gl-note svg { color: var(--amber) !important; }
.compare thead th:nth-child(2) { background: var(--teal-tint) !important; color: var(--teal-ink) !important; }
.compare thead th:nth-child(3) { background: var(--coral-tint) !important; color: var(--coral-ink) !important; }
.bs-save, .save-chip, .promo-tag { background: var(--amber) !important; color: var(--navy) !important; }
.hl-item h3, .feat-open .feat strong { color: var(--navy); }
.feat-open-head h2::after, .hl-head h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin-top: 12px; background: linear-gradient(90deg, var(--teal), var(--amber), var(--coral)); }
.footer-social a.soc:hover { background: var(--amber); color: var(--navy); }
.ne-date .m, .uj-uk .uj-dot, .jr-stop.uk .jr-dot { background: var(--coral-ink) !important; color: #fff !important; }

/* Certificate in Business Management */
.cert-band { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; text-decoration: none; color: var(--navy); padding-block: 24px; border-top: var(--rule); border-bottom: var(--rule); }
.cb-media { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; }
.cb-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cert-band:hover .cb-media img { transform: scale(1.03); }
.cb-body { display: flex; flex-direction: column; gap: 8px; }
.cb-kicker { font-size: var(--fs-sm); font-weight: 700; color: var(--amber-ink, #8A5600); }
.cb-body strong { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.2; }
.cb-desc { color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; }
.cb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cb-tags span { padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--amber-tint, #FDF1DD); color: var(--amber-ink, #8A5600); }
.cb-tags span:nth-child(2) { background: var(--teal-tint, #E3F4F1); color: var(--teal-ink, #11695F); }
.cb-tags span:nth-child(3) { background: var(--sky-tint, #E6EFF9); color: var(--sky-ink, #175A78); }
.cert-band .text-link { min-height: 36px; }
.cert-band:focus-visible { outline: 3px solid var(--ocean); outline-offset: 4px; }
.home-cert { margin-top: clamp(32px, 4vw, 48px); }
.cert-section { padding-block: clamp(40px, 5vw, 64px) 0; }
.cert-prose p { color: var(--muted); max-width: 68ch; }
.cert-prose p + p { margin-top: 12px; }
.cert-why { margin-top: 6px; }
.cert-entry-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cert-entry-grid h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 10px; }
.cert-entry-grid .lead { color: var(--muted); margin-bottom: 20px; }
.cert-entry-list { grid-template-columns: 1fr !important; }
.cert-entry { margin: 0; font-size: var(--fs-base); color: var(--navy); font-weight: 700; }
.cert-entry-list .hl-item > svg { background: var(--teal-tint) !important; color: var(--teal) !important; }
@media (max-width: 860px) { .cert-band, .cert-entry-grid { grid-template-columns: 1fr; } }

/* About: 2026 → 2027 timeline */
.timeline { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 36px); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 62px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #A9CBEA 0%, #1E9E8F 35%, #F2A93B 70%, rgba(255,255,255,.25) 100%); }
.tl-stop { position: relative; display: flex; flex-direction: column; gap: 8px; }
.tl-year { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 700; line-height: 1; color: #fff; letter-spacing: -.02em; height: 44px; display: flex; align-items: flex-end; }
.tl-dot { width: 20px; height: 20px; border-radius: 50%; background: #142C5C; border: 3px solid #A9CBEA; margin: 8px 0 10px; position: relative; z-index: 1; }
.tl-stop:nth-child(2) .tl-dot { border-color: #1E9E8F; }
.tl-stop:nth-child(3) .tl-dot { border-color: #F2A93B; }
.tl-stop.is-planned .tl-dot { border-style: dashed; border-color: rgba(255,255,255,.6); }
.tl-stop.is-now .tl-dot { background: #A9CBEA; box-shadow: 0 0 0 6px rgba(169,203,234,.22); }
.tl-tag { align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,.1); color: #DCE6F0; }
.tl-stop.is-now .tl-tag { background: #A9CBEA; color: #142C5C; }
.tl-stop h3 { color: #fff !important; font-size: var(--fs-md); margin: 6px 0 0; }
.tl-stop p { color: #C9D7E6; font-size: var(--fs-sm); margin: 0; }
.tl-stop .text-link { color: #A9CBEA !important; margin-top: auto; }
.tl-stop.is-planned h3, .tl-stop.is-planned p { opacity: .85; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: 0; padding-left: 34px; }
  .timeline::before { left: 9px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; background: linear-gradient(180deg, #A9CBEA 0%, #1E9E8F 35%, #F2A93B 70%, rgba(255,255,255,.25) 100%); }
  .tl-stop { padding-bottom: 32px; }
  .tl-dot { position: absolute; left: -34px; top: 6px; margin: 0; }
  .tl-year { height: auto; font-size: 1.75rem; }
}

/* Blog article pages */
.post-hero .post-hero-inner { max-width: 820px; display: grid; gap: 14px; }
.post-hero h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); line-height: 1.12; }
.post-hero .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: var(--fs-sm); color: #C9D7E6; }
.post-hero .meta .tag { background: rgba(255,255,255,.12); color: #fff; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.post-main { display: grid; gap: 28px; min-width: 0; }
.post-main > .media { border-radius: 22px; }
.post-main .post-body { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; display: grid; gap: 16px; }
.post-main .post-body h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-top: 14px; color: var(--navy); }
.post-main .post-body ul { padding-left: 1.2em; display: grid; gap: 6px; }
.post-main .post-body li::marker { color: var(--teal, #1E9E8F); }
.post-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 22px; border-top: var(--rule); }
.post-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 22px; border-top: var(--rule); }
.pn-link { display: grid; gap: 4px; text-decoration: none; color: var(--navy); padding: 4px 0; }
.pn-link small { font-size: var(--fs-xs); font-weight: 700; color: var(--ocean); }
.pn-link strong { font-size: var(--fs-base); line-height: 1.35; }
.pn-link:hover strong { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.pn-next { text-align: right; justify-self: end; }
.pn-prev small::before { content: "← "; } .pn-next small::after { content: " →"; }
.post-aside { position: sticky; top: calc(var(--header-h, 80px) + 20px); display: grid; gap: 18px; }
.post-back { min-height: 32px; }
.post-back svg { transform: rotate(180deg); }
.ma-title { font-size: var(--fs-md); margin: 0; padding-top: 14px; border-top: var(--rule); }
.more-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.more-articles a { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--navy); }
.ma-media { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.ma-media img { width: 100%; height: 100%; object-fit: cover; }
.ma-text { display: grid; gap: 2px; }
.ma-text small { font-size: var(--fs-xs); color: var(--teal-ink, #11695F); font-weight: 700; }
.ma-text strong { font-size: var(--fs-sm); line-height: 1.35; }
.more-articles a:hover strong { color: var(--blue-ink); }
.post-cta { padding: 20px; border-radius: 18px; background: var(--sky-tint, #E6EFF9); display: grid; gap: 8px; }
.post-cta p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.post-cta .btn { justify-self: start; }
@media (max-width: 960px) { .post-layout { grid-template-columns: 1fr; } .post-aside { position: static; } }
@media (max-width: 560px) { .post-pn { grid-template-columns: 1fr; } .pn-next { text-align: left; justify-self: start; } }

/* Mobile menu: dropdown groups */
.mobile-panel .mob-row { display: flex; align-items: center; gap: 4px; }
.mobile-panel .mob-row > a { flex: 1; }
.mobile-panel .mob-toggle { flex: none; width: 48px; height: 48px; border-radius: 14px; border: 0; background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mobile-panel .mob-toggle svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.mobile-panel .mob-toggle[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.mobile-panel .mob-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-panel .mob-toggle:focus-visible { outline: 2px solid #A9CBEA; outline-offset: 2px; }
.mobile-panel .mob-sub { margin: 2px 0 8px 14px; padding-left: 10px; border-left: 2px solid rgba(169,203,234,.35); }
.mobile-panel .mob-sub[hidden] { display: none; }
.mobile-panel .mob-sub .sub a { padding-left: 14px; min-height: 44px; font-size: var(--fs-sm); }
.mobile-panel .mob-group.is-open > .mob-row > a { color: #A9CBEA; }

/* ===== Contrast fixes: light "mist" sections for Future Tech 2027 + About timeline ===== */
.section-mist { background: #DCE6F0; }
/* Future Tech — Advanced Technology Diplomas: navy card on mist, white side panel */
#china-programme .programme-2027 { background: linear-gradient(135deg, #142C5C 0%, #1C3F72 60%, #1C6A8C 130%) !important; border: 0 !important; box-shadow: 0 24px 48px -28px rgba(20,44,92,.55) !important; }
#china-programme .programme-2027::before, #china-programme .programme-2027::after { display: none !important; }
#china-programme .p27-side { background: #fff !important; border: 0 !important; box-shadow: 0 10px 30px -18px rgba(0,0,0,.45); }
#china-programme .p27-side h3 { color: #142C5C !important; }
#china-programme .tba-list li { color: #142C5C; }
#china-programme .tba-list li::before { border-color: #1C6A8C; }
#china-programme .p27-note { color: #4A5B73; }
.p27-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.p27-fields li { padding: 6px 14px; border-radius: var(--r-pill); background: rgba(169,203,234,.16); border: 1px solid rgba(169,203,234,.35); color: #fff; font-size: var(--fs-sm); font-weight: 700; }
/* About — timeline on mist */
#direction { color: #142C5C; }
#direction .eyebrow { color: #1C6A8C !important; }
#direction h2 { color: #142C5C !important; }
#direction .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#direction .timeline::before { background: linear-gradient(90deg, #1C6A8C 0%, #1E9E8F 50%, #F2A93B 100%) !important; opacity: 1; }
#direction .tl-year { color: #142C5C; }
#direction .tl-dot { background: #DCE6F0; border-color: #1C6A8C; }
#direction .tl-stop:nth-child(2) .tl-dot { border-color: #1E9E8F; }
#direction .tl-stop:nth-child(3) .tl-dot { border-color: #F2A93B; border-style: dashed; }
#direction .tl-stop.is-now .tl-dot { background: #1C6A8C; box-shadow: 0 0 0 6px rgba(28,106,140,.18); }
#direction .tl-tag { background: #fff; color: #142C5C; }
#direction .tl-stop.is-now .tl-tag { background: #1C6A8C; color: #fff; }
#direction .tl-stop:nth-child(2) .tl-tag { background: #E3F4F1; color: #11695F; }
#direction .tl-stop:nth-child(3) .tl-tag { background: #FDF1DD; color: #8A5600; }
#direction .tl-stop h3 { color: #142C5C !important; }
#direction .tl-stop p { color: #34465F; }
#direction .tl-stop .text-link { color: #1C6A8C !important; }
#direction .tl-stop.is-planned h3, #direction .tl-stop.is-planned p { opacity: 1; }
@media (max-width: 860px) {
  #direction .timeline { grid-template-columns: 1fr; }
  #direction .timeline::before { background: linear-gradient(180deg, #1C6A8C 0%, #1E9E8F 50%, #F2A93B 100%) !important; }
}

/* ===== News — full announcements: alternating navy / mist panels with "View more" ===== */
.ann-section { background: #fff; }
.ann-section .section-head h2 { color: #142C5C; }
.card.article.ann, .article.ann { border-top: 0 !important; margin-top: 24px; padding: clamp(24px, 4vw, 48px) !important; border-radius: 28px !important; box-shadow: none !important; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.ann-dark { background: linear-gradient(135deg, #142C5C 0%, #1C3F72 70%, #1C6A8C 140%) !important; color: #fff; }
.ann-light { background: #DCE6F0 !important; color: #142C5C; }
.ann-main { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ann h2 { margin: 0 !important; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.ann .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); }
.ann .prose { display: grid; gap: 12px; max-width: 64ch; }
.ann-dark h2 { color: #fff !important; }
.ann-dark .prose, .ann-dark .prose p { color: #DCE6F0 !important; }
.ann-dark .prose strong { color: #fff !important; }
.ann-light h2 { color: #142C5C !important; }
.ann-light .prose, .ann-light .prose p { color: #34465F !important; }
.ann-light .prose strong { color: #142C5C !important; }
.ann .btn-row { margin-top: 4px; }
.ann-more { border-top: 1px solid rgba(20,44,92,.16); border-bottom: 1px solid rgba(20,44,92,.16); }
.ann-dark .ann-more { border-color: rgba(255,255,255,.18); }
.ann-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; font-weight: 700; color: #1C6A8C; min-height: 44px; }
.ann-dark .ann-more > summary { color: #A9CBEA; }
.ann-more > summary::-webkit-details-marker { display: none; }
.ann-more > summary svg { transform: rotate(90deg); transition: transform .25s ease; }
.ann-more[open] > summary svg { transform: rotate(-90deg); }
.ann-more .when-open { display: none; }
.ann-more[open] .when-open { display: inline; }
.ann-more[open] .when-closed { display: none; }
.ann-more > summary:focus-visible { outline: 3px solid #6FA3D6; outline-offset: 4px; border-radius: 6px; }
.ann-more > .prose { padding: 4px 0 18px; }
.ann-dark .detail-list div { border-color: rgba(255,255,255,.16) !important; }
.ann-dark .detail-list dt { color: #AFC3D8 !important; }
.ann-dark .detail-list dd { color: #fff !important; }
.ann-light .detail-list div { border-color: rgba(20,44,92,.16) !important; }
.ann-light .detail-list dt { color: #4A5B73 !important; }
.ann-light .detail-list dd { color: #142C5C !important; }
.ann aside { display: grid; gap: 14px; align-content: start; }
.ann .media { aspect-ratio: 4 / 3; border-radius: 20px; }
.ann-light .btn-soft { background: #fff; }
.ann.is-target h2 { text-decoration: none !important; }
.ann.is-target { box-shadow: 0 0 0 3px #6FA3D6 !important; }
@media (max-width: 860px) { .card.article.ann, .article.ann { grid-template-columns: 1fr; } .ann aside { grid-row: 1; } }

/* ===== Contact — location on mist (contrasts with navy footer) ===== */
#location.section-mist .section-head h2, #location.section-mist h2 { color: #142C5C !important; }
#location.section-mist .eyebrow { color: #1C6A8C !important; }
#location.section-mist .lead, #location.section-mist .section-head p { color: #34465F !important; }
#location.section-mist .map-card .body address, #location.section-mist .map-card address { color: #142C5C !important; }
#location.section-mist .map-card address small { color: #4A5B73 !important; }
#location.section-mist .map-card .btn-secondary { background: #1C6A8C; color: #fff; border-color: #1C6A8C; }

/* ===== Home — Advanced Technology Diplomas on a soft light background ===== */
#future-diplomas { background: linear-gradient(180deg, #EEF3F9 0%, #DCE6F0 100%); color: #142C5C; }
#future-diplomas h2 { color: #142C5C !important; }
#future-diplomas .eyebrow, #future-diplomas .eyebrow-light { color: #1C6A8C !important; }
#future-diplomas .lead { color: #34465F !important; }
#future-diplomas .text-link-light, #future-diplomas .head-row .text-link { color: #1C6A8C !important; border-color: rgba(28,106,140,.4) !important; }
#future-diplomas .dip-card { background: #fff; box-shadow: 0 18px 40px -26px rgba(20,44,92,.45); border: 1px solid rgba(20,44,92,.08); }
#future-diplomas .dip-card .dip-panel { background: #fff !important; color: #142C5C; clip-path: none !important; margin-top: 0; padding: 22px 24px 24px; border-top: 4px solid var(--dip-ac, #1C6A8C); }
#future-diplomas .dip-card:nth-child(1) { --dip-ac: #1C6A8C; --dip-tint: #E4EEF7; --dip-ink: #164F6A; }
#future-diplomas .dip-card:nth-child(2) { --dip-ac: #1E9E8F; --dip-tint: #E3F4F1; --dip-ink: #11695F; }
#future-diplomas .dip-card:nth-child(3) { --dip-ac: #E8735A; --dip-tint: #FCE9E4; --dip-ink: #A9412A; }
#future-diplomas .dip-panel h3 { color: #142C5C !important; }
#future-diplomas .dip-panel h3 small { color: var(--dip-ink); font-weight: 700; }
#future-diplomas .dip-status { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--dip-tint); color: var(--dip-ink); font-size: var(--fs-xs); font-weight: 700; }
#future-diplomas .dip-cta { background: #1C6A8C !important; color: #fff !important; border-color: #1C6A8C !important; }
#future-diplomas .dip-cta:hover { background: #142C5C !important; border-color: #142C5C !important; }

/* ===== Home — Why HELP Academy: three feature cards (white / sky / navy) with notched "Explore more" tab ===== */
#why-help { background: #EEF3F9 !important; --sec: #EEF3F9; }
#why-help .feat-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); border-top: 0 !important; margin-top: clamp(24px, 3vw, 36px); }
#why-help .feat-cards .feat-card { --r: 22px; display: flex !important; flex-direction: column; gap: 10px; position: relative; overflow: visible; isolation: isolate;
  min-height: 300px !important; padding: 30px 28px 92px !important; border: 0 !important; border-radius: 26px !important; box-shadow: none !important; }
#why-help .feat-cards .feat-card.fc-light { background: #fff !important; }
#why-help .feat-cards .feat-card.fc-accent { background: #A9CBEA !important; overflow: hidden; }
#why-help .feat-cards .feat-card.fc-dark { background: #142C5C !important; }
#why-help .feat-cards .feat-card.fc-accent::before { content: "" !important; display: block !important; position: absolute; z-index: -1; right: -70px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28) 0 38%, transparent 39% 52%, rgba(255,255,255,.18) 53% 100%); }
#why-help .feat-cards .fc-top { margin: 0 0 22px; }
#why-help .feat-cards .fc-icon { width: auto !important; height: auto !important; background: none !important; border: 0 !important; border-radius: 0; place-items: start; }
#why-help .feat-cards .fc-icon svg { width: 36px; height: 36px; stroke-width: 1.6; }
#why-help .fc-light .fc-icon { color: #142C5C !important; }
#why-help .fc-accent .fc-icon { color: #142C5C !important; }
#why-help .fc-dark .fc-icon { color: #A9CBEA !important; }
#why-help .feat-cards h3 { font-size: var(--fs-md) !important; line-height: 1.3; }
#why-help .fc-light h3, #why-help .fc-accent h3 { color: #142C5C !important; }
#why-help .fc-dark h3 { color: #fff !important; }
#why-help .fc-light p { color: #4A5B73 !important; }
#why-help .fc-accent p { color: #1A3358 !important; }
#why-help .fc-dark p { color: #C9D7E6 !important; }
#why-help .feat-cards .fc-tab { position: absolute !important; left: 0; bottom: 0; background: var(--sec) !important; padding: 12px 14px 0 0 !important; border-top-right-radius: var(--r); z-index: 1; }
#why-help .feat-cards .fc-tab::before, #why-help .feat-cards .fc-tab::after { display: block !important; content: ""; position: absolute; width: var(--r); height: var(--r);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--sec) var(--r)); }
#why-help .feat-cards .fc-tab::before { left: 0; top: calc(-1 * var(--r)); }
#why-help .feat-cards .fc-tab::after { right: calc(-1 * var(--r)); bottom: 0; }
#why-help .feat-cards .fc-more { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px !important; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
#why-help .fc-light .fc-more { background: #fff !important; color: #142C5C !important; box-shadow: inset 0 0 0 1px rgba(20,44,92,.14) !important; }
#why-help .fc-accent .fc-more { background: #A9CBEA !important; color: #142C5C !important; box-shadow: none !important; }
#why-help .fc-dark .fc-more { background: #142C5C !important; color: #fff !important; box-shadow: none !important; }
#why-help .fc-more:hover { transform: translateX(2px); }
#why-help .why-people { border-top-color: rgba(20,44,92,.12); }
@media (max-width: 860px) {
  #why-help .feat-cards { grid-template-columns: 1fr; }
  #why-help .feat-cards .feat-card { min-height: 0 !important; }
}
#why-help .feat-cards .feat-card { text-align: left !important; align-items: stretch; }
#why-help .feat-cards .fc-top { display: flex !important; justify-content: flex-start !important; width: 100%; }
#why-help .feat-cards .feat-card > * { grid-column: auto !important; justify-self: start; }
.route-chips-below { margin-top: clamp(20px, 2.5vw, 28px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 36px); }
.route-chips-below .rc-item { width: 100%; height: 100%; }
@media (max-width: 860px) { .route-chips-below { grid-template-columns: 1fr; } }

/* ===== Blog list: white background, each card its own colour ===== */
#blog-list.blog-light { background: #fff; }
.blog-light .filter-btn { background: #fff; color: #142C5C; border-color: rgba(20,44,92,.18); }
.blog-light .filter-btn .count { color: #4A5B73; }
.blog-light .filter-btn[aria-pressed="true"] { background: #142C5C; color: #fff; border-color: #142C5C; }
.blog-light .filter-btn[aria-pressed="true"] .count { color: #A9CBEA; }
#blog-grid { gap: clamp(18px, 2vw, 28px); }
#blog-grid .news-card { --bc: #DCE6F0; --bc-ink: #164F6A; --bc-line: #1C6A8C;
  background: var(--bc) !important; border: 0 !important; border-radius: 26px !important; overflow: hidden; padding: 12px; box-shadow: none !important; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
#blog-grid .news-card:nth-child(4n+2) { --bc: #E3F4F1; --bc-ink: #11695F; --bc-line: #1E9E8F; }
#blog-grid .news-card:nth-child(4n+3) { --bc: #FDF1DD; --bc-ink: #8A5600; --bc-line: #F2A93B; }
#blog-grid .news-card:nth-child(4n+4) { --bc: #FCE9E4; --bc-ink: #A9412A; --bc-line: #E8735A; }
#blog-grid .news-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(20,44,92,.45) !important; }
#blog-grid .news-card .media { border-radius: 18px !important; }
#blog-grid .news-card .body { background: none !important; padding: 18px 12px 12px !important; flex: 1; display: flex; flex-direction: column; gap: 10px; }
#blog-grid .news-card h3, #blog-grid .news-card h3 a { color: #142C5C !important; }
#blog-grid .news-card p { color: #34465F !important; }
#blog-grid .news-card .meta span:not(.tag) { color: #4A5B73 !important; }
#blog-grid .news-card .meta .tag:first-child { background: #fff !important; color: var(--bc-ink) !important; box-shadow: none !important; }
#blog-grid .news-card .text-link { color: var(--bc-ink) !important; margin-top: auto; }
#blog-grid .news-card .text-link:hover { color: #142C5C !important; }
.blog-light .empty-state { background: #F3F4F6; color: #142C5C; }

/* ===== Contact — "How to apply" as a vertical step timeline ===== */
#application-process .steps { position: relative; gap: 0; margin: 18px 0 22px; padding: 0; }
#application-process .steps li { --st: #1C6A8C; --st-tint: #E4EEF7; --st-ink: #164F6A;
  position: relative; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
#application-process .steps li:nth-child(2) { --st: #1E9E8F; --st-tint: #E3F4F1; --st-ink: #11695F; }
#application-process .steps li:nth-child(3) { --st: #F2A93B; --st-tint: #FDF1DD; --st-ink: #8A5600; }
#application-process .steps li:nth-child(4) { --st: #E8735A; --st-tint: #FCE9E4; --st-ink: #A9412A; padding-bottom: 0; }
/* connector line between nodes */
#application-process .steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--st), rgba(20,44,92,.12)); }
#application-process .steps li::before { width: 44px; height: 44px; border-radius: 50%; background: #fff !important; color: var(--st-ink) !important;
  border: 2px solid var(--st); box-shadow: 0 0 0 5px var(--st-tint); font-size: var(--fs-md); position: relative; z-index: 1; }
#application-process .steps li:last-child::before { background: var(--st) !important; color: #fff !important; }
#application-process .steps li > div { padding: 6px 16px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,44,92,.08); }
#application-process .steps li > div::before { content: "Step " counter(step); display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--st-ink); margin: 6px 0 2px; }
html[lang^="zh"] #application-process .steps li > div::before { content: "第 " counter(step) " 步"; }
html[lang="ms"] #application-process .steps li > div::before { content: "Langkah " counter(step); }
#application-process .steps strong { color: #142C5C; font-size: var(--fs-base, 1rem); }
#application-process .steps p { margin: 4px 0 0; }
#application-process .steps li:last-child::before { background: var(--st-ink) !important; border-color: var(--st-ink); }

/* ===== Careers — vacancies on white with a soft panel ===== */
#vacancies.vac-light { background: #fff; }
#vacancies .section-head h2 { color: #142C5C !important; }
#vacancies .eyebrow { color: #1C6A8C !important; }
#vacancies #vacancy-list { border: 0 !important; }
#vacancies .empty-state { grid-column: 1 / -1; display: grid; justify-items: start; gap: 8px; text-align: left !important;
  padding: clamp(24px, 4vw, 40px) !important; border-radius: 26px; border: 0 !important; background: linear-gradient(135deg, #DCE6F0 0%, #E3F4F1 100%) !important; color: #142C5C; }
#vacancies .empty-state strong { color: #142C5C !important; font-size: var(--fs-md); }
#vacancies .empty-state p { color: #34465F !important; margin: 0; max-width: 60ch; }
#vacancies .empty-state .btn-row { margin-top: 12px; justify-content: flex-start; }
#vacancies .disclaimer { color: #4A5B73 !important; border-color: rgba(20,44,92,.12) !important; }
#vacancies .disclaimer a { color: #1C6A8C !important; }
#vacancies .empty-state { border-radius: 26px !important; }

/* ===== Floating WhatsApp button (all pages) ===== */
.wa-float { position: fixed; z-index: 71; right: clamp(14px, 2.5vw, 28px); bottom: calc(clamp(14px, 2.5vw, 28px) + 66px);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 14px 30px -10px rgba(20,44,92,.55); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 3px #fff, 0 18px 34px -10px rgba(20,44,92,.6); }
.wa-float:focus-visible { outline: 3px solid #142C5C; outline-offset: 4px; }
.wa-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 7px 12px; border-radius: 999px;
  background: #142C5C; color: #fff; font-size: var(--fs-xs); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: no-preference) { .motion-ok .wa-float::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #25D366; animation: waPulse 2.6s ease-out infinite; } }
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (max-width: 860px) { .wa-float { width: 50px; height: 50px; bottom: calc(clamp(14px, 2.5vw, 28px) + 56px); } }
@media (max-width: 860px) { body.has-action-bar .wa-float { bottom: calc(86px + 56px + env(safe-area-inset-bottom, 0px)); } }
@media print { .wa-float { display: none; } }

/* ===== Home — 2+1 section: teal tint instead of beige ===== */
.uk-split { background: #E3F4F1 !important; }

/* ===== Certificate — career opportunities ===== */
#cert-careers .hl-head h2 { color: #142C5C; }
.cert-careers-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(20px, 3vw, 32px); }
.cc-sub { font-size: var(--fs-md); color: #142C5C; margin: 0 0 14px; }
.cc-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cc-item { --ac: #1C6A8C; --ac-tint: #E4EEF7; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: var(--ac-tint); }
.cc-item:nth-child(4n+2) { --ac: #11695F; --ac-tint: #E3F4F1; }
.cc-item:nth-child(4n+3) { --ac: #8A5600; --ac-tint: #FDF1DD; }
.cc-item:nth-child(4n+4) { --ac: #A9412A; --ac-tint: #FCE9E4; }
.cc-item > svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #fff; color: var(--ac); }
.cc-item h3 { font-size: var(--fs-sm); color: #142C5C; margin: 0 0 4px; line-height: 1.3; }
.cc-item p { font-size: var(--fs-xs); color: #34465F; margin: 0; }
.cc-from { font-weight: 700; color: var(--ac); }
.cc-next { position: sticky; top: calc(var(--header-h, 80px) + 24px); padding: clamp(24px, 3vw, 32px); border-radius: 26px; color: #fff;
  background: linear-gradient(135deg, #142C5C 0%, #1C3F72 60%, #1C6A8C 130%); display: grid; gap: 12px; justify-items: start; }
.cc-next h3 { color: #fff !important; font-size: var(--fs-lg); margin: 0; }
.cc-next p { color: #DCE6F0; margin: 0; font-size: var(--fs-sm); }
.cc-next-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(169,203,234,.18); color: #A9CBEA; }
.cc-next-icon svg { width: 26px; height: 26px; }
@media (max-width: 960px) { .cert-careers-grid { grid-template-columns: 1fr; } .cc-next { position: static; } }
@media (max-width: 560px) { .cc-list { grid-template-columns: 1fr; } }

/* ===== Programmes — grouped degrees and certificate ===== */
.prog-group-label { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: clamp(28px, 4vw, 40px) 0 14px; }
.prog-group-label span { font-weight: 700; font-size: var(--fs-md); color: #fff; }
.prog-group-label small { font-size: var(--fs-xs); font-weight: 700; color: #A9CBEA; padding: 3px 10px; border-radius: 999px; background: rgba(169,203,234,.14); }
.prog-choice.cert-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.prog-choice.cert-choice .cc-media { height: 100%; }
.prog-choice.cert-choice .cc-media .media { height: 100%; aspect-ratio: auto; min-height: 280px; }
.prog-choice.cert-choice .cc-kicker { color: #11695F !important; }
@media (max-width: 860px) { .prog-choice.cert-choice { grid-template-columns: 1fr; } .prog-choice.cert-choice .cc-media .media { min-height: 0; aspect-ratio: 16 / 10; } }
.all-table th a { color: #142C5C; }

/* ===== Footer — admissions contact ===== */
.footer-contact { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; }
.footer-contact svg { width: 18px; height: 18px; flex: none; color: #A9CBEA; }
.footer-contact a { color: #fff; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

/* =========================================================================
   Header v2 — full-width navy bar with contact strip (replaces floating pill)
   ========================================================================= */
:root { --header-h: 110px; --nav-pull: 0px; }
.site-header { position: sticky; top: 0; margin-top: 0 !important; padding-inline: 0 !important; background: #142C5C; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.site-header.is-scrolled { box-shadow: 0 12px 30px -16px rgba(10,24,52,.7); }
.top-strip { background: #0F2249; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .8125rem; }
.ts-inner { max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter); min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ts-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.ts-contacts a, .ts-apply { display: inline-flex; align-items: center; gap: 7px; color: #C9D7E6; text-decoration: none; padding: 6px 0; }
.ts-contacts a:hover { color: #fff; }
.ts-contacts svg { width: 15px; height: 15px; color: #A9CBEA; flex: none; }
.ts-apply { color: #fff; font-weight: 700; }
.ts-apply svg { width: 14px; height: 14px; transition: transform .2s ease; }
.ts-apply:hover svg { transform: translateX(3px); }
.site-header .nav-shell { max-width: var(--container) !important; margin-inline: auto; min-height: 72px; padding: 0 var(--gutter) !important; gap: 20px;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.site-header.is-scrolled .nav-shell { background: none !important; box-shadow: none !important; }
.site-header .brand-logo { height: 44px; }
.main-nav { margin-inline: auto; }
.main-nav > ul { gap: 2px; }
.nav-indicator { display: none !important; }
.main-nav > ul > li > a, .main-nav .dd-toggle { position: relative; background: none !important; border-radius: 0 !important; color: #DAE4EF; font-size: .9375rem; }
.main-nav > ul > li > a { padding: 24px 10px !important; }
.main-nav .dd-toggle { padding: 24px 4px !important; margin-left: -6px; }
.main-nav > ul > li > a:hover, .main-nav .dd-toggle:hover { color: #fff; }
.main-nav > ul > li > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 14px; height: 2px; border-radius: 2px; background: #6FA3D6; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.main-nav > ul > li > a:hover::after { transform: scaleX(1); }
.main-nav > ul > li > a[aria-current="page"]::after, .main-nav > ul > li.is-parent-current > a::after { transform: scaleX(1); background: #A9CBEA; height: 3px; }
.main-nav > ul > li > a[aria-current="page"], .main-nav > ul > li.is-parent-current > a { color: #fff; font-weight: 700; }
/* language switch: plain text */
.site-header .nav-actions .lang-switch { background: none !important; border: 0 !important; padding: 0; gap: 2px; }
.site-header .nav-actions .lang-switch button { background: none !important; color: #AFC3D8; padding: 6px 7px; border-radius: 6px; font-size: .8125rem; }
.site-header .nav-actions .lang-switch button[aria-pressed="true"] { color: #fff !important; box-shadow: inset 0 -2px 0 #A9CBEA; border-radius: 0; }
.site-header .nav-actions .lang-switch .sep { color: rgba(255,255,255,.25); }
.site-header .nav-cta { border-radius: 999px; padding-inline: 20px; }
main > section.hero.section-dark:first-child, main > section.page-hero.section-dark:first-child { margin-top: 0 !important; }
@media (max-width: 1320px) {
  :root { --nav-pull: 0px; }
  .main-nav > ul > li > a { padding-inline: 8px !important; font-size: .875rem; }
  .main-nav > ul > li > a::after { left: 8px; right: 8px; }
}
@media (max-width: 1100px) { .ts-contacts li:nth-child(3) { display: none; } }
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .top-strip { display: none; }
  .site-header .nav-shell { min-height: 64px; }
}
.site-header .logo { flex: none; }
.site-header .brand-logo { width: auto; max-width: none; }
/* Full menu stays visible down to 1240px now that the bar is less crowded */
@media (min-width: 1241px) and (max-width: 1320px) {
  .site-header .main-nav { display: block; }
  .site-header .nav-actions .nav-cta { display: inline-flex; }
  .site-header .menu-toggle { display: none; }
  .site-header .nav-actions { margin-left: 0; }
  .site-header .nav-cta { padding-inline: 16px; }
}
.site-header .nav-shell { max-width: 1440px !important; }
html[data-lang="ms"] .main-nav > ul > li > a { font-size: .875rem; padding-inline: 7px !important; }
html[data-lang="ms"] .main-nav > ul > li > a::after { left: 7px; right: 7px; }
@media (min-width: 1241px) and (max-width: 1420px) {
  html[data-lang="ms"] .site-header .main-nav, html[data-lang="ms"] .site-header .nav-actions .nav-cta { display: none; }
  html[data-lang="ms"] .site-header .menu-toggle { display: inline-flex; }
  html[data-lang="ms"] .site-header .nav-actions { margin-left: auto; }
}

/* =========================================================================
   Home — About HELP Academy, more outstanding
   ========================================================================= */
#about-help { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #F3F7FB 100%); }
#about-help::before { content: ""; position: absolute; z-index: 0; right: -10%; top: -20%; width: 55%; height: 80%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(111,163,214,.18), transparent); pointer-events: none; }
#about-help > .container { position: relative; z-index: 1; }
#about-help .ha-copy h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.025em; margin-bottom: 18px; }
#about-help .ha-hl { font-style: normal; background: linear-gradient(100deg, #1C6A8C 0%, #1E9E8F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#about-help .ha-copy .lead { font-size: var(--fs-md); color: #34465F; }
/* photo collage */
#about-help .ha-media { padding: 0 14% 10% 0; }
#about-help .ha-media::before { left: -22px; top: -22px; width: 150px; height: 150px; border-radius: 32px; background: linear-gradient(135deg, #1C6A8C, #6FA3D6); opacity: 1; }
#about-help .ha-ph-a .media { border-radius: 32px; box-shadow: 0 40px 70px -40px rgba(20,44,92,.6); }
.ha-badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; border-radius: 18px; box-shadow: 0 22px 44px -22px rgba(20,44,92,.6); }
.ha-badge strong { display: block; line-height: 1.1; }
.ha-badge small { display: block; font-size: var(--fs-xs); }
.ha-badge-uk { left: -14px; top: 54%; background: #fff; padding: 12px 18px 12px 12px; color: #142C5C; }
.ha-badge-uk .hb-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #E4EEF7; color: #1C6A8C; }
.ha-badge-uk .hb-icon svg { width: 22px; height: 22px; }
.ha-badge-uk strong { font-size: var(--fs-md); }
.ha-badge-uk small { color: #4A5B73; }
.ha-badge-route { right: 6%; top: 8%; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; background: #142C5C; color: #fff; }
.ha-badge-route strong { font-size: 1.6rem; }
.ha-badge-route small { color: #A9CBEA; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ok .ha-badge-uk { animation: haFloat 6s ease-in-out infinite; }
  .motion-ok .ha-badge-route { animation: haFloat 6s ease-in-out 1.5s infinite; }
}
@keyframes haFloat { 50% { transform: translateY(-8px); } }
/* points as tinted tiles */
#about-help .ha-points { gap: 12px; margin: 26px 0 26px; }
#about-help .ha-points li { border-top: 0 !important; padding: 16px; border-radius: 18px; background: var(--ac-tint, #E4EEF7); grid-template-columns: 42px 1fr; }
#about-help .ha-points li > svg { background: #fff !important; }
#about-help .ha-points strong { color: #142C5C; font-size: var(--fs-sm); }
#about-help .ha-points span { color: #34465F; }
.ha-actions { margin-top: 4px; }
/* key figures band */
.ha-stats { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 40px); border-radius: 28px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(16px, 3vw, 40px);
  background: linear-gradient(120deg, #142C5C 0%, #1C3F72 55%, #1C6A8C 120%); color: #fff; box-shadow: 0 30px 60px -36px rgba(20,44,92,.7); }
.ha-stats li { display: grid; gap: 6px; align-content: start; position: relative; }
.ha-stats li + li::before { content: ""; position: absolute; left: calc(-1 * clamp(8px, 1.5vw, 20px)); top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,.16); }
.ha-stats strong { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; }
.ha-stats strong em { font-style: normal; color: #6FA3D6; font-weight: 400; }
.ha-stats li:nth-child(1) strong { color: #A9CBEA; }
.ha-stats li:nth-child(2) strong { color: #fff; }
.ha-stats li:nth-child(3) strong { color: #8FD9CC; }
.ha-stats li:nth-child(4) strong { color: #F7C978; }
.ha-stats span { font-size: var(--fs-sm); color: #DCE6F0; line-height: 1.45; }
@media (max-width: 960px) { .ha-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ha-stats li:nth-child(3)::before { display: none; } }
@media (max-width: 520px) {
  .ha-stats { grid-template-columns: 1fr; } .ha-stats li + li::before { display: none; }
  .ha-badge-uk { left: 8px; top: auto; bottom: 18%; } .ha-badge-route { right: 8px; }
}

/* ===== HELP in numbers (home About section + About page) ===== */
.help-stats { margin-top: clamp(40px, 6vw, 72px); padding: clamp(26px, 3.5vw, 40px) clamp(20px, 4vw, 48px); border-radius: 28px; color: #fff;
  background: linear-gradient(120deg, #142C5C 0%, #1C3F72 55%, #1C6A8C 120%); box-shadow: 0 30px 60px -36px rgba(20,44,92,.7); }
.hs-kicker { margin: 0 0 18px; font-size: var(--fs-xs); font-weight: 700; color: #A9CBEA; letter-spacing: .02em; text-align: center; }
.help-stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(16px, 3vw, 40px); }
.help-stats li { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; }
.help-stats li + li::before { content: ""; position: absolute; left: calc(-1 * clamp(8px, 1.5vw, 20px)); top: 10%; bottom: 10%; width: 1px; background: rgba(255,255,255,.16); }
.hs-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(169,203,234,.3); }
.hs-icon svg { width: 30px; height: 30px; }
.help-stats li:nth-child(1) .hs-icon { color: #A9CBEA; }
.help-stats li:nth-child(2) .hs-icon { color: #8FD9CC; }
.help-stats li:nth-child(3) .hs-icon { color: #F7C978; }
.help-stats strong { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -.02em; color: #fff; }
.hs-label { font-size: var(--fs-sm); color: #DCE6F0; max-width: 22ch; }
.hs-about-sec { background: #fff; }
.hs-about { margin-top: 0; }
@media (max-width: 640px) { .help-stats ul { grid-template-columns: 1fr; } .help-stats li + li::before { display: none; } .help-stats li + li { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); } }
.help-stats ul { align-items: start; } .help-stats li { align-content: start; }
.help-stats ul { align-items: start; } .help-stats li { align-content: start; }
/* HoD card without the programmes side panel */
.hod-card-v2 { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) !important; grid-template-areas: "photo main" "photo msg" "pending pending" !important; }
@media (max-width: 640px) { .hod-card-v2 { grid-template-columns: 1fr !important; grid-template-areas: "photo" "main" "msg" "pending" !important; } }

/* Home campus "3+0" card: ocean blue instead of amber */
.ar-stat { background: linear-gradient(140deg, #1C6A8C 0%, #142C5C 100%) !important; color: #fff !important; box-shadow: 0 24px 44px -26px rgba(20,44,92,.6); }
.ar-stat strong, .ar-stat > span:last-child { color: #fff !important; }
.ar-stat .ar-check { background: #fff !important; color: #1C6A8C !important; }
#our-goal .check-list .text-link { display: inline-flex; padding: 0 !important; min-height: 0; margin-left: 6px; vertical-align: baseline; line-height: inherit; }

/* ===== About — Our goal + What we offer ===== */
#our-goal .goal-head { max-width: 900px; }
#our-goal .goal { margin-top: 12px; }
.offer-title { font-size: var(--fs-lg); color: #142C5C; margin: clamp(32px, 5vw, 56px) 0 18px; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.offer-card { --oc: #1C6A8C; --oc-tint: #E4EEF7; --oc-ink: #164F6A; position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: 24px; background: #fff; border-top: 4px solid var(--oc); box-shadow: 0 18px 40px -30px rgba(20,44,92,.5); }
.oc-cert { --oc: #1E9E8F; --oc-tint: #E3F4F1; --oc-ink: #11695F; }
.oc-tech { --oc: #F2A93B; --oc-tint: #FDF1DD; --oc-ink: #8A5600; }
.oc-top { display: flex; align-items: center; gap: 10px; }
.oc-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--oc-tint); color: var(--oc-ink); }
.oc-icon svg { width: 22px; height: 22px; }
.oc-kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--oc-ink); }
.offer-card h4 { margin: 0; font-size: var(--fs-md); color: #142C5C; line-height: 1.3; }
.offer-card p { margin: 0; color: #34465F; font-size: var(--fs-sm); }
.oc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.oc-list li { position: relative; padding-left: 16px; color: #142C5C; font-size: var(--fs-sm); font-weight: 700; }
.oc-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--oc); }
.oc-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.oc-tags li { padding: 4px 10px; border-radius: 999px; background: var(--oc-tint); color: var(--oc-ink); font-size: var(--fs-xs); font-weight: 700; }
.oc-link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--oc-ink); text-decoration: none; }
.oc-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.offer-card:hover .oc-link svg { transform: translateX(3px); }
.offer-support { list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: 18px 0 0; border-top: 1px solid rgba(20,44,92,.12);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(16px, 3vw, 32px); }
.offer-support li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.offer-support svg { width: 22px; height: 22px; color: #1C6A8C; margin-top: 2px; }
.offer-support strong { display: block; color: #142C5C; font-size: var(--fs-sm); }
.offer-support span { color: #4A5B73; font-size: var(--fs-sm); }
@media (max-width: 960px) { .offer-grid, .offer-support { grid-template-columns: 1fr; } }

/* ===== About hero: longer intro + credentials ===== */
.about-lead { font-size: var(--fs-md); color: #fff !important; }
.about-sub { margin: 12px 0 0; color: #C9D7E6; max-width: 62ch; }
.cred-chips { list-style: none; margin: 18px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cred-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(169,203,234,.3); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.cred-chips svg { width: 16px; height: 16px; color: #A9CBEA; flex: none; }

/* ===== Programmes page — "View more" dropdown inside programme cards ===== */
.cc-more { position: relative; z-index: 4; border-top: 1px solid rgba(20,44,92,.12); border-bottom: 1px solid rgba(20,44,92,.12); margin: 4px 0; }
.cc-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; min-height: 44px; font-weight: 700; font-size: var(--fs-sm); color: #1C6A8C; }
.cc-more > summary::-webkit-details-marker { display: none; }
.cc-more > summary svg { width: 16px; height: 16px; transition: transform .25s ease; }
.cc-more[open] > summary svg { transform: rotate(180deg); }
.cc-more .when-open { display: none; }
.cc-more[open] .when-open { display: inline; }
.cc-more[open] .when-closed { display: none; }
.cc-more > summary:focus-visible { outline: 3px solid #6FA3D6; outline-offset: 3px; border-radius: 6px; }
.cc-more-body { display: grid; gap: 12px; padding: 0 0 16px; }
.cc-more-body p { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .cc-more[open] .cc-more-body { animation: ccOpen .3s ease; } }
@keyframes ccOpen { from { opacity: 0; transform: translateY(-4px); } }
.choice-grid { align-items: start; }
.choice-grid { align-items: start; }

/* ===== About — Our story ===== */
.our-story { background: #fff; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.story-copy h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.12; letter-spacing: -.02em; color: #142C5C; margin: 10px 0 22px; }
.story-copy p { color: #34465F; font-size: var(--fs-base); line-height: 1.75; margin: 0 0 16px; max-width: 64ch; }
.story-copy p:first-of-type { font-size: var(--fs-md); color: #142C5C; }
.story-rail { list-style: none; margin: 0; padding: 26px; border-radius: 28px; background: #EEF3F9; position: relative; display: grid; gap: 0; }
.story-rail li { --sr: #1C6A8C; --sr-tint: #E4EEF7; position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.story-rail li:last-child { padding-bottom: 0; }
.story-rail li:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--sr), rgba(20,44,92,.1)); }
.story-rail .sr-twin { --sr: #1E9E8F; }
.story-rail .sr-2005 { --sr: #F2A93B; }
.story-rail .sr-today { --sr: #142C5C; }
.sr-year { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #142C5C; font-weight: 700; font-size: .95rem; box-shadow: inset 0 0 0 3px var(--sr); }
.sr-year svg { width: 24px; height: 24px; color: var(--sr); }
.sr-today .sr-year { background: #142C5C; color: #fff; font-size: .8rem; }
.story-rail h3 { margin: 8px 0 4px; font-size: var(--fs-md); color: #142C5C; }
.story-rail p { margin: 0; color: #4A5B73; font-size: var(--fs-sm); }
@media (max-width: 960px) { .story-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .story-rail { padding: 18px; } .story-rail li { grid-template-columns: 52px minmax(0, 1fr); } .sr-year { width: 52px; height: 52px; font-size: .8rem; } .story-rail li:not(:last-child)::after { left: 25px; top: 52px; } }

/* ===== UWE Bristol logo in place of the cap icons ===== */
.uwe-logo-mark { display: block; height: 100%; width: auto; max-width: none; }
.uwe-inline .ui-icon.ui-logo { width: auto !important; height: 46px !important; padding: 0 !important; background: none !important; border-radius: 6px !important; overflow: hidden; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.ha-badge-uk .hb-icon.hb-logo { width: auto !important; height: 42px; padding: 0; background: none; border-radius: 8px; overflow: hidden; }
@media (max-width: 520px) { .uwe-inline .ui-icon.ui-logo { height: 38px !important; } .ha-badge-uk .hb-icon.hb-logo { height: 36px; } }
.uwe-inline .ui-logo .uwe-logo-mark { height: 46px !important; width: auto !important; max-width: none !important; }
.ha-badge-uk .hb-logo .uwe-logo-mark { height: 42px !important; width: auto !important; max-width: none !important; }
@media (max-width: 520px) { .uwe-inline .ui-logo .uwe-logo-mark { height: 38px !important; } .ha-badge-uk .hb-logo .uwe-logo-mark { height: 36px !important; } }

/* ===== Certificate — programme structure as dropdowns ===== */
.ys-accordion { display: grid; gap: 12px; margin-top: clamp(18px, 3vw, 28px); }
.ys-acc { --ys: #1C6A8C; --ys-tint: #E4EEF7; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,44,92,.1); overflow: hidden; }
.ys-acc.y2 { --ys: #1E9E8F; --ys-tint: #E3F4F1; }
.ys-acc[open] { box-shadow: inset 0 0 0 2px var(--ys), 0 18px 40px -30px rgba(20,44,92,.5); }
.ys-acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 36px; align-items: center; gap: 16px; padding: 16px 20px; }
.ys-acc > summary::-webkit-details-marker { display: none; }
.ys-acc > summary:hover { background: #F7F9FC; }
.ys-acc > summary:focus-visible { outline: 3px solid #6FA3D6; outline-offset: -3px; border-radius: 22px; }
.ys-acc .ys-no { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--ys); color: #fff; font-weight: 700; font-size: 1.25rem; margin: 0; }
.ys-acc-head { display: grid; gap: 2px; }
.ys-acc-year { font-size: var(--fs-md); color: #142C5C; }
.ys-acc .ys-theme { font-size: var(--fs-sm); font-weight: 700; color: var(--ys); margin: 0; }
.ys-acc-count { padding: 5px 12px; border-radius: 999px; background: var(--ys-tint); color: #142C5C; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.ys-acc-chev { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ys-tint); color: var(--ys); transition: transform .25s ease; }
.ys-acc-chev svg { width: 18px; height: 18px; }
.ys-acc[open] .ys-acc-chev { transform: rotate(180deg); }
.ys-acc-body { padding: 4px 20px 20px; }
.ys-acc-body .mod-list { margin: 0; }
.ys-acc-body .mod { border-left-color: var(--ys) !important; }
@media (prefers-reduced-motion: no-preference) { .ys-acc[open] .ys-acc-body { animation: ccOpen .3s ease; } }
@media (max-width: 560px) {
  .ys-acc > summary { grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 12px; padding: 14px; }
  .ys-acc .ys-no { width: 44px; height: 44px; }
  .ys-acc-count { grid-column: 2; grid-row: 2; justify-self: start; }
  .ys-acc-chev { grid-column: 3; grid-row: 1; width: 32px; height: 32px; }
  .ys-acc-body { padding: 4px 14px 16px; }
}
.ys-acc.y2 .ys-theme { color: #11695F; }
.ys-acc-body .mod-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.ys-acc-body .mod { display: flex; align-items: center; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(20,44,92,.12); border-left: 3px solid var(--ys) !important; font-size: var(--fs-sm); color: #142C5C; }
@media (max-width: 640px) { .ys-acc-body .mod-list { grid-template-columns: 1fr; } }
#cert-structure .ys-accordion + .fine { margin-top: 16px; }
/* UWE page hero: official logo on the route card */
.uwe-hero-card { position: relative; }
.uwe-card-logo { position: absolute; z-index: 4; left: 22px; top: 22px; padding: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6), 0 0 0 3px #fff; line-height: 0; }
.uwe-card-logo img { height: 56px !important; width: auto !important; max-width: none !important; display: block; }
@media (max-width: 560px) { .uwe-card-logo { left: 14px; top: 14px; } .uwe-card-logo img { height: 42px !important; } }
.prog-hero-media { position: relative; min-width: 0; } .prog-hero-media .uwe-card-logo { z-index: 4; }

/* ===== Degree programme structure as dropdowns (reuses .ys-acc) ===== */
.ys-acc.y3 { --ys: #A9412A; --ys-tint: #FCE9E4; }
.ys-acc.ys-deg.y2 .ys-theme { color: #11695F; }
.ys-acc-year small { font-weight: 400; color: #4A5B73; font-size: var(--fs-sm); }
.ys-acc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: var(--fs-xs); color: #4A5B73; }
.ys-acc-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ys-acc-meta svg { width: 14px; height: 14px; color: var(--ys); }
.ys-deg .ys-acc-body { display: grid; gap: 12px; }
.ys-deg .ys-acc-body .ys-flag { justify-self: start; }
.ys-deg .ys-acc-body .mod-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ys-deg .ys-acc-body .mod { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-left: 3px solid var(--ys) !important; }
.ys-deg .ys-acc-body .mod-option { grid-column: 1 / -1; }
.ys-deg .ys-acc-body .mod-option .mod-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ys-deg .ys-acc-body .mod-list, .ys-deg .ys-acc-body .mod-option .mod-list { grid-template-columns: 1fr; } }

/* ===== Entry requirements as dropdowns ===== */
.req-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 14px 0 18px; align-items: start; }
.req-acc { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,44,92,.12); overflow: hidden; }
.req-acc[open] { box-shadow: inset 0 0 0 2px #1C6A8C; }
.req-acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 12px 14px; min-height: 52px; }
.req-acc > summary::-webkit-details-marker { display: none; }
.req-acc > summary:hover { background: #F5F8FC; }
.req-acc > summary:focus-visible { outline: 3px solid #6FA3D6; outline-offset: -3px; border-radius: 14px; }
.req-q { font-weight: 700; color: #142C5C; font-size: var(--fs-sm); line-height: 1.35; }
.req-chev { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E4EEF7; color: #1C6A8C; transition: transform .25s ease; }
.req-chev svg { width: 16px; height: 16px; }
.req-acc[open] .req-chev { transform: rotate(180deg); }
.req-a { padding: 0 14px 14px; }
.req-a-label { display: block; font-size: var(--fs-xs); font-weight: 700; color: #1C6A8C; margin-bottom: 2px; }
.req-a p { margin: 0; color: #34465F; font-size: var(--fs-sm); }
@media (prefers-reduced-motion: no-preference) { .req-acc[open] .req-a { animation: ccOpen .25s ease; } }
@media (max-width: 760px) { .req-list { grid-template-columns: 1fr; } }

/* ===== UWE page — About UWE Bristol accolades ===== */
.au-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(22px, 3vw, 32px); }
.au-head h2 { color: #142C5C; max-width: 22ch; margin: 8px 0 0; }
.au-logo { height: 64px !important; width: auto !important; max-width: none !important; border-radius: 10px; flex: none; box-shadow: 0 12px 26px -16px rgba(20,44,92,.5); }
.au-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
.au-grid li { --au: #1C6A8C; --au-tint: #E4EEF7; display: grid; gap: 6px; align-content: start; padding: 24px 22px; border-radius: 22px; background: #fff; border-top: 4px solid var(--au); box-shadow: 0 18px 40px -30px rgba(20,44,92,.5); }
.au-grid .au-2 { --au: #1E9E8F; } .au-grid .au-3 { --au: #F2A93B; } .au-grid .au-4 { --au: #E8735A; }
.au-grid strong { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: -.02em; color: #142C5C; }
.au-grid strong span[aria-hidden] { color: #F2A93B; margin-left: 2px; }
.au-what { font-weight: 700; color: #142C5C; font-size: var(--fs-md); }
.au-src { color: #4A5B73; font-size: var(--fs-sm); }
.au-note { margin-top: 16px; }
#about-uwe .eyebrow { color: #1C6A8C !important; }
@media (max-width: 960px) { .au-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .au-head { flex-direction: column; align-items: flex-start; } .au-logo { height: 48px !important; } .au-grid { grid-template-columns: 1fr; } }

/* ===== About UWE Bristol — split layout v2 ===== */
#about-uwe { background: linear-gradient(180deg, #EEF3F9 0%, #DCE6F0 100%); }
.au-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.au-intro { display: grid; gap: 12px; justify-items: start; }
.au-intro .au-logo { height: 84px !important; margin-bottom: 10px; }
.au-intro h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em; color: #142C5C; max-width: 16ch; margin: 0; }
.au-lead { margin: 4px 0 0; color: #34465F; font-size: var(--fs-md); max-width: 44ch; }
.au-intro .au-note { margin: 4px 0 0; color: #4A5B73; }
.au-split .au-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.au-split .au-grid li { position: relative; border-top: 0; border-radius: 24px; padding: 26px 24px 24px; gap: 6px; box-shadow: 0 22px 44px -32px rgba(20,44,92,.55); overflow: hidden; }
.au-split .au-grid li::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--au-tint, #E4EEF7); opacity: .7; z-index: 0; }
.au-split .au-grid li > * { position: relative; z-index: 1; }
.au-split .au-2 { --au-tint: #E3F4F1; } .au-split .au-3 { --au-tint: #FDF1DD; } .au-split .au-4 { --au-tint: #FCE9E4; }
.au-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--au-tint, #E4EEF7); color: var(--au); margin-bottom: 10px; }
.au-ic svg { width: 22px; height: 22px; }
.au-split .au-grid strong { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); }
.au-split .au-what { font-size: var(--fs-base); }
.au-star { color: #F2A93B; margin-left: 2px; }
/* featured tile */
.au-split .au-grid .au-1 { background: linear-gradient(140deg, #142C5C 0%, #1C3F72 60%, #1C6A8C 130%); }
.au-split .au-1::after { background: rgba(169,203,234,.14); opacity: 1; }
.au-split .au-1 .au-ic { background: rgba(255,255,255,.1); color: #A9CBEA; }
.au-split .au-1 strong, .au-split .au-1 .au-what { color: #fff; }
.au-split .au-1 .au-src { color: #C9D7E6; }
.au-split .au-3 .au-ic { color: #8A5600; } .au-split .au-4 .au-ic { color: #A9412A; } .au-split .au-2 .au-ic { color: #11695F; }
@media (max-width: 960px) { .au-split { grid-template-columns: 1fr; } .au-intro h2 { max-width: 22ch; } }
@media (max-width: 520px) { .au-split .au-grid { grid-template-columns: 1fr; } .au-intro .au-logo { height: 60px !important; } }
.au-split .au-grid .au-1::after { background: rgba(169,203,234,.12) !important; opacity: 1 !important; }

/* =========================================================================
   Programmes page — shorter navy hero + light "picks" section, colour-coded
   ========================================================================= */
.choose-hero { padding-bottom: clamp(44px, 6vw, 72px) !important; }
.prog-jump { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.prog-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(169,203,234,.3); color: #fff; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; transition: background .2s ease; }
.prog-jump a:hover { background: rgba(255,255,255,.16); }
.prog-jump svg { width: 18px; height: 18px; color: #A9CBEA; }
.prog-picks { background: linear-gradient(180deg, #F3F7FB 0%, #fff 60%); }
.prog-picks .prog-group-label { margin-top: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.prog-picks .prog-group-label + .choice-grid { margin-top: 4px; }
.prog-picks .prog-group-label span { color: #142C5C; font-size: var(--fs-lg); }
.prog-picks .prog-group-label small { background: #E4EEF7; color: #164F6A; }
.prog-picks #certificate, .prog-picks .prog-group-label:not(#uwe-degrees) { scroll-margin-top: calc(var(--header-h) + 16px); }
.prog-picks .prog-group-label:not(#uwe-degrees) { margin-top: clamp(40px, 5vw, 64px); }
.prog-picks .prog-group-label:not(#uwe-degrees) small { background: #FDF1DD; color: #8A5600; }
/* cards: white, colour-coded top band + kicker */
.prog-picks .prog-choice { --pc: #1C6A8C; --pc-ink: #164F6A; --pc-tint: #E4EEF7; background: #fff !important; border: 0 !important; border-top: 5px solid var(--pc) !important; box-shadow: 0 26px 50px -34px rgba(20,44,92,.55) !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) { --pc: #1E9E8F; --pc-ink: #11695F; --pc-tint: #E3F4F1; }
.prog-picks .prog-choice.cert-choice { --pc: #F2A93B; --pc-ink: #8A5600; --pc-tint: #FDF1DD; }
.prog-picks .prog-choice .cc-kicker { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--pc-tint); color: var(--pc-ink) !important; }
.prog-picks .prog-choice h2 { color: #142C5C; }
.prog-picks .cc-more > summary, .prog-picks .cc-cta-link { color: var(--pc-ink) !important; }
.prog-picks .cc-facts svg { color: var(--pc) !important; }
.prog-picks .prog-choice:hover { box-shadow: 0 34px 60px -34px rgba(20,44,92,.6) !important; }
/* route tiles on light */
.prog-picks .route-chips-below .rc-item { background: #fff !important; border: 0 !important; box-shadow: inset 0 0 0 1px rgba(20,44,92,.12) !important; color: #142C5C !important; border-radius: 18px !important; padding: 14px 18px 14px 14px; }
.prog-picks .route-chips-below .rc-item span { color: #34465F; }
.prog-picks .route-chips-below .rc-code { background: #1C6A8C !important; color: #fff !important; }
.prog-picks .route-chips-below li:nth-child(2) .rc-code { background: #1E9E8F !important; color: #fff !important; }
.prog-picks .route-chips-below a.rc-item:hover { box-shadow: inset 0 0 0 2px #1E9E8F !important; }
.prog-picks .route-chips-below a.rc-item svg { color: #1E9E8F; }
.prog-picks .prog-choice .cc-kicker { width: fit-content; justify-self: start; align-self: flex-start; }
.prog-picks .prog-group-label small { font-size: .8125rem !important; font-weight: 700; padding: 4px 12px; }

/* ===== Home — programme cards as boxes ===== */
.home-progs .card.prog-card { --pc: #1C6A8C; background: #fff !important; border: 0 !important; border-top: 5px solid var(--pc) !important; border-radius: 26px !important;
  box-shadow: 0 26px 50px -34px rgba(20,44,92,.55) !important; padding: 0 !important; overflow: hidden; }
.home-progs .card.prog-card:nth-child(2) { --pc: #1E9E8F; }
.home-progs .card.prog-card .media { border-radius: 0 !important; margin: 0 !important; }
.home-progs .card.prog-card .body { padding: 22px 24px 24px !important; }
.home-progs .card.prog-card:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(20,44,92,.6) !important; }
.home-progs .card.prog-card .prog-tagline { color: #142C5C; }
.home-progs .card.prog-card:nth-child(1) .prog-tagline { color: #164F6A !important; }
.home-progs .card.prog-card:nth-child(2) .prog-tagline { color: #11695F !important; }
@media (max-width: 560px) { .home-progs .card.prog-card .body { padding: 18px 18px 20px !important; } }
/* certificate band as a box too */
.home-progs .cert-band { background: #fff !important; border-radius: 26px !important; border-top: 5px solid #F2A93B !important; box-shadow: 0 26px 50px -34px rgba(20,44,92,.55) !important; padding: 14px !important; }

/* ===== Contact — January 2027 intake box: three programmes ===== */
.key-dates .kd-sub { margin: 18px 0 8px; font-size: var(--fs-xs); font-weight: 700; color: #1C6A8C; letter-spacing: .02em; }
.kd-progs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.kd-progs > li { --kc: #1C6A8C; --kc-tint: #E4EEF7; --kc-ink: #164F6A; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--kc-tint); border-left: 4px solid var(--kc); }
.kd-progs > li.kd-cert { --kc: #F2A93B; --kc-tint: #FDF1DD; --kc-ink: #8A5600; }
.kd-progs > li > div:first-child { display: grid; gap: 2px; }
.kd-progs strong { color: #142C5C; font-size: var(--fs-sm); }
.kd-progs > li > div:first-child span { font-size: var(--fs-xs); color: #4A5B73; }
.kd-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1; }
.kd-tags li { padding: 3px 9px; border-radius: 999px; background: #fff; color: var(--kc-ink); font-size: .75rem; font-weight: 700; }
.kd-fee { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
.kd-fee strong { font-size: var(--fs-md); }
@media (max-width: 420px) { .kd-progs > li { grid-template-columns: 1fr; } .kd-fee { grid-column: 1; grid-row: auto; text-align: left; } }

/* ===== Programme features as dropdowns ===== */
.feats .feat.feat-acc-item { display: block !important; padding: 0 !important; border: 0 !important; }
.feats { display: grid; gap: 10px; border-top: 0 !important; }
.feat-acc { --ac: var(--ocean, #1C6A8C); border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,44,92,.12); overflow: hidden; }
.feats > :nth-child(4n+2) .feat-acc { --ac: #11695F; } .feats > :nth-child(4n+3) .feat-acc { --ac: #8A5600; } .feats > :nth-child(4n+4) .feat-acc { --ac: #A9412A; }
.feat-acc[open] { box-shadow: inset 0 0 0 2px var(--ac); }
.feat-acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) 30px; gap: 14px; align-items: center; padding: 12px 14px; min-height: 64px; }
.feat-acc > summary::-webkit-details-marker { display: none; }
.feat-acc > summary:hover { background: #F7F9FC; }
.feat-acc > summary:focus-visible { outline: 3px solid #6FA3D6; outline-offset: -3px; border-radius: 18px; }
.feat-acc > summary > svg:first-child { box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border-radius: 12px; background: var(--ac-tint, #E4EEF7); color: var(--ac) !important; }
.feats > :nth-child(4n+1) .feat-acc > summary > svg:first-child { background: #E4EEF7; } .feats > :nth-child(4n+2) .feat-acc > summary > svg:first-child { background: #E3F4F1; }
.feats > :nth-child(4n+3) .feat-acc > summary > svg:first-child { background: #FDF1DD; } .feats > :nth-child(4n+4) .feat-acc > summary > svg:first-child { background: #FCE9E4; }
.feat-acc strong { color: #142C5C; font-size: var(--fs-base); line-height: 1.3; }
.feat-chev { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #F1F5FA; color: var(--ac); transition: transform .25s ease; }
.feat-chev svg { width: 16px; height: 16px; }
.feat-acc[open] .feat-chev { transform: rotate(180deg); }
.feat-desc { margin: 0; padding: 0 16px 16px 68px; color: #34465F; font-size: var(--fs-sm); line-height: 1.65; }
@media (prefers-reduced-motion: no-preference) { .feat-acc[open] .feat-desc { animation: ccOpen .25s ease; } }
@media (max-width: 520px) { .feat-desc { padding-left: 16px; } }

/* ===== At a glance: no icons ===== */
.gl-row > svg, .gl-note > svg { display: none !important; }
.gl-row { display: grid !important; grid-template-columns: 1fr !important; gap: 2px !important; }
.gl-row .gl-k, .gl-row .gl-v { grid-column: 1 !important; }

/* ===== Study routes as dropdowns ===== */
.routes-v2 .route-grid { align-items: start; gap: 12px !important; border: 0 !important; }
.route-acc { --rc: #11695F; --rc-tint: #E3F4F1; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: inset 0 0 0 1px rgba(20,44,92,.12) !important; overflow: hidden; padding: 0 !important; }
.route-acc.route-uk { --rc: #A9412A; --rc-tint: #FCE9E4; }
.route-acc[open] { box-shadow: inset 0 0 0 2px var(--rc) !important; }
.route-acc::before, .route-acc::after { display: none !important; }
.route-acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; gap: 14px; align-items: center; padding: 16px 18px; }
.route-acc > summary::-webkit-details-marker { display: none; }
.route-acc > summary:hover { background: #F7F9FC; }
.route-acc > summary:focus-visible { outline: 3px solid #6FA3D6; outline-offset: -3px; border-radius: 20px; }
.route-acc .rp-badge { margin: 0 !important; background: var(--rc) !important; color: #fff !important; }
.route-acc .rp-title { font-weight: 700; color: #142C5C; font-size: var(--fs-md); line-height: 1.3; }
.rp-chev { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rc-tint); color: var(--rc); transition: transform .25s ease; }
.rp-chev svg { width: 16px; height: 16px; }
.route-acc[open] .rp-chev { transform: rotate(180deg); }
.route-acc .rp-body { padding: 0 18px 18px !important; border: 0 !important; }
.route-acc .rp-body > p:first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .route-acc[open] .rp-body { animation: ccOpen .3s ease; } }
.route-acc { display: block !important; min-height: 0 !important; }
.route-acc > .rp-body { display: grid !important; gap: 12px; position: static !important; width: auto !important; }
.route-acc > .rp-body .journey { margin: 4px 0 0; }

/* ===== "Also part of your studies" as dropdowns ===== */
.also-acc-list { display: grid; gap: 10px; }
.also-acc { --ac: #1C6A8C; --ac-tint: #E4EEF7; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,44,92,.12); overflow: hidden; }
.also-acc:nth-child(2) { --ac: #11695F; --ac-tint: #E3F4F1; } .also-acc:nth-child(3) { --ac: #8A5600; --ac-tint: #FDF1DD; }
.also-acc[open] { box-shadow: inset 0 0 0 2px var(--ac); }
.also-acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 30px; gap: 12px; align-items: center; padding: 12px 14px; min-height: 60px; }
.also-acc > summary::-webkit-details-marker { display: none; }
.also-acc > summary:hover { background: #F7F9FC; }
.also-acc > summary:focus-visible { outline: 3px solid #6FA3D6; outline-offset: -3px; border-radius: 18px; }
.also-acc > summary > svg:first-child { box-sizing: content-box; width: 20px; height: 20px; padding: 10px; border-radius: 12px; background: var(--ac-tint); color: var(--ac); }
.also-acc strong { color: #142C5C; font-size: var(--fs-base); }
.also-count { min-width: 28px; padding: 3px 9px; border-radius: 999px; background: var(--ac-tint); color: var(--ac); font-size: .75rem; font-weight: 700; text-align: center; }
.also-acc .feat-chev { color: var(--ac); }
.also-acc[open] .feat-chev { transform: rotate(180deg); }
.also-body { padding: 0 16px 16px 66px; margin: 0; }
.also-acc ul.also-body li { color: #142C5C; }
.also-acc .also-body .mpu-list { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) { .also-acc[open] .also-body { animation: ccOpen .25s ease; } }
@media (max-width: 560px) { .also-body { padding-left: 16px; } .also-acc > summary { grid-template-columns: 40px minmax(0, 1fr) 30px; } .also-count { display: none; } }
@media (min-width: 761px) { .also-acc .also-body .mpu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* Home hero highlight: sky blue instead of amber */
.hero h1 em.hl, .hero h1 .hl, .hero-ref h1 em, .hero-ref h1 .hl { color: #A9CBEA !important; background: none !important; -webkit-text-fill-color: #A9CBEA !important; }
/* Home hero: new students photo — slightly darker for text contrast */
.hero-ref .hero-bg img { filter: brightness(.5) saturate(1.05) !important; object-position: 60% 35%; }
@media (max-width: 720px) { .hero-ref .hero-bg img { filter: brightness(.45) !important; object-position: 62% 30%; } }
.hero-ref .hero-bg::after { content: "" !important; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15,34,73,.72) 0%, rgba(15,34,73,.45) 45%, rgba(15,34,73,0) 75%) !important; }
@media (max-width: 720px) { .hero-ref .hero-bg::after { background: linear-gradient(180deg, rgba(15,34,73,.2) 0%, rgba(15,34,73,.6) 100%) !important; } }
.hero-ref .hero-bg .img-note { z-index: 2; }

/* ===== Home programme boxes: navy / light blue / white ===== */
/* 1 — Accounting and Finance: dark navy */
.home-progs .card.prog-card:nth-child(1) { background: linear-gradient(160deg, #142C5C 0%, #1C3F72 100%) !important; border-top-color: #6FA3D6 !important; }
.home-progs .card.prog-card:nth-child(1) h3 { color: #fff !important; }
.home-progs .card.prog-card:nth-child(1) .prog-tagline { color: #A9CBEA !important; }
.home-progs .card.prog-card:nth-child(1) .desc { color: #DCE6F0 !important; }
.home-progs .card.prog-card:nth-child(1) .meta .tag { background: rgba(255,255,255,.1) !important; color: #fff !important; border-color: rgba(169,203,234,.35) !important; box-shadow: none !important; }
.home-progs .card.prog-card:nth-child(1) .btn-primary { background: #fff !important; color: #142C5C !important; box-shadow: none !important; }
.home-progs .card.prog-card:nth-child(1) .btn-secondary { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.55) !important; box-shadow: none !important; }
/* 2 — International Business Management: light sky blue */
.home-progs .card.prog-card:nth-child(2) { background: #A9CBEA !important; border-top-color: #1C6A8C !important; }
.home-progs .card.prog-card:nth-child(2) h3 { color: #142C5C !important; }
.home-progs .card.prog-card:nth-child(2) .prog-tagline { color: #0F4A63 !important; }
.home-progs .card.prog-card:nth-child(2) .desc { color: #1A3358 !important; }
.home-progs .card.prog-card:nth-child(2) .meta .tag { background: rgba(255,255,255,.7) !important; color: #142C5C !important; border-color: transparent !important; box-shadow: none !important; }
.home-progs .card.prog-card:nth-child(2) .btn-primary { background: #142C5C !important; color: #fff !important; }
.home-progs .card.prog-card:nth-child(2) .btn-secondary { background: #fff !important; color: #142C5C !important; border-color: #fff !important; }
/* 3 — Certificate: white */
.home-progs .cert-band { background: #fff !important; border-top-color: #F2A93B !important; }

/* ===== Programmes — All programmes at a glance: cards ===== */
.glance-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); align-items: stretch; }
.glance-card { --gc: #1C6A8C; --gc-tint: #E4EEF7; --gc-ink: #164F6A; display: flex; flex-direction: column; border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 22px 44px -32px rgba(20,44,92,.55); }
.glance-card.gc-ibm { --gc: #1E9E8F; --gc-tint: #E3F4F1; --gc-ink: #11695F; }
.glance-card.gc-cert { --gc: #F2A93B; --gc-tint: #FDF1DD; --gc-ink: #8A5600; }
.glance-card header { padding: 20px 22px 18px; background: var(--gc-tint); border-top: 5px solid var(--gc); display: grid; gap: 6px; }
.gc-kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--gc-ink); }
.glance-card h3 { margin: 0; font-size: var(--fs-md); line-height: 1.3; }
.glance-card h3 a { color: #142C5C; text-decoration: none; }
.glance-card h3 a:hover { text-decoration: underline; }
.glance-card dl { margin: 0; padding: 6px 22px; flex: 1; }
.gc-row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(20,44,92,.1); }
.gc-row:last-child { border-bottom: 0; }
.gc-row dt { font-size: var(--fs-xs); color: #4A5B73; }
.gc-row dd { margin: 0; font-weight: 700; color: #142C5C; font-size: var(--fs-sm); line-height: 1.45; }
.gc-row.gc-fee dd { font-size: var(--fs-md); color: var(--gc-ink); }
.gc-link { display: inline-flex; align-items: center; gap: 8px; margin: 4px 22px 22px; font-weight: 700; color: var(--gc-ink); text-decoration: none; }
.gc-link svg { width: 16px; height: 16px; }
@media (max-width: 960px) { .glance-cards { grid-template-columns: 1fr; } .gc-row { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; } }
@media (max-width: 420px) { .gc-row { grid-template-columns: 1fr; gap: 2px; } }

/* ===== Header contact strip: light background ===== */
.top-strip { background: #E4ECF5 !important; border-bottom: 1px solid rgba(20,44,92,.1) !important; }
.ts-contacts a, .ts-apply { color: #142C5C !important; }
.ts-contacts a:hover { color: #1C6A8C !important; }
.ts-contacts svg { color: #1C6A8C !important; }
.ts-apply { color: #1C6A8C !important; }
.ann-dark .text-link { color: #A9CBEA !important; } .ann-dark .text-link:hover { color: #fff !important; } .ann-light .text-link { color: #1C6A8C !important; }
/* Certificate card: two CTAs */
.cert-band .cb-title { color: inherit; text-decoration: none; }
.cert-band .cb-title:hover { text-decoration: underline; }
.cb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cb-actions .btn { min-height: 44px; }
.cb-actions .btn-primary { background: #8A5600 !important; border-color: #8A5600 !important; color: #fff !important; }
.cb-actions .btn-primary:hover { background: #142C5C !important; border-color: #142C5C !important; }
@media (max-width: 520px) { .cb-actions .btn { width: 100%; justify-content: center; } }

/* ===== Certificate careers — seamless open list ===== */
.cc-list { gap: 0 clamp(24px, 4vw, 48px) !important; border-top: 1px solid rgba(20,44,92,.12); margin-bottom: 18px !important; }
.cc-item { background: none !important; border-radius: 0 !important; padding: 18px 0 !important; border-bottom: 1px solid rgba(20,44,92,.12); grid-template-columns: 28px minmax(0, 1fr) !important; gap: 14px !important; }
.cc-item > svg { width: 24px !important; height: 24px !important; padding: 0 !important; background: none !important; border-radius: 0 !important; color: var(--ac) !important; margin-top: 2px; }
.cc-item h3 { font-size: var(--fs-base) !important; margin: 0 0 4px !important; }
.cc-item p { font-size: var(--fs-sm) !important; color: #4A5B73 !important; line-height: 1.55; }
.cc-from { display: block; font-size: var(--fs-xs); text-transform: none; margin-bottom: 1px; color: var(--ac) !important; }
.cc-item:nth-child(4n+1) { --ac: #1C6A8C; } .cc-item:nth-child(4n+2) { --ac: #11695F; } .cc-item:nth-child(4n+3) { --ac: #8A5600; } .cc-item:nth-child(4n+4) { --ac: #A9412A; }
#cert-careers .cert-careers-grid .fine { font-size: var(--fs-xs) !important; color: #4A5B73 !important; }

/* ===== Degree pages — Programme highlights, seamless list ===== */
.hl > .hl-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px) !important; border-top: 1px solid rgba(20,44,92,.14) !important; margin-top: clamp(18px, 3vw, 28px); }
.hl > .hl-list > .hl-item { display: grid !important; grid-template-columns: 28px minmax(0, 1fr) !important; gap: 14px !important; align-items: start; padding: 18px 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid rgba(20,44,92,.14) !important; border-radius: 0 !important; box-shadow: none !important; }
.hl > .hl-list > .hl-item > svg { box-sizing: border-box !important; width: 24px !important; height: 24px !important; padding: 0 !important; background: none !important; border-radius: 0 !important; margin-top: 2px; color: var(--ac, #1C6A8C) !important; }
.hl > .hl-list > .hl-item:nth-child(4n+1) { --ac: #1C6A8C; } .hl > .hl-list > .hl-item:nth-child(4n+2) { --ac: #11695F; }
.hl > .hl-list > .hl-item:nth-child(4n+3) { --ac: #8A5600; } .hl > .hl-list > .hl-item:nth-child(4n+4) { --ac: #A9412A; }
.hl > .hl-list > .hl-item h3 { font-size: var(--fs-base) !important; line-height: 1.35; margin: 0 0 4px !important; color: #142C5C !important; }
.hl > .hl-list > .hl-item p { font-size: var(--fs-sm) !important; color: #4A5B73 !important; line-height: 1.55; margin: 0; }
.hl > .hl-list > .hl-item .hl-tag, .hl > .hl-list > .hl-item small { font-size: var(--fs-xs); }
@media (max-width: 760px) { .hl > .hl-list { grid-template-columns: 1fr; } }

/* ===== Programmes page cards: navy / light blue / white ===== */
.prog-picks .choice-grid .prog-choice:nth-child(1) { background: linear-gradient(160deg, #142C5C 0%, #1C3F72 100%) !important; border-top-color: #6FA3D6 !important; }
.prog-picks .choice-grid .prog-choice:nth-child(1) .cc-body { background: none !important; }
.prog-picks .choice-grid .prog-choice:nth-child(1) .cc-kicker { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.prog-picks .choice-grid .prog-choice:nth-child(1) h2, .prog-picks .choice-grid .prog-choice:nth-child(1) h2 a { color: #fff !important; }
.prog-picks .choice-grid .prog-choice:nth-child(1) .cc-more { border-color: rgba(255,255,255,.18) !important; }
.prog-picks .choice-grid .prog-choice:nth-child(1) .cc-more > summary, .prog-picks .choice-grid .prog-choice:nth-child(1) .cc-cta-link { color: #A9CBEA !important; }
.prog-picks .choice-grid .prog-choice:nth-child(1) .cc-more-body p { color: #DCE6F0 !important; }
.prog-picks .choice-grid .prog-choice:nth-child(1) .cc-facts li, .prog-picks .choice-grid .prog-choice:nth-child(1) .cc-facts strong { color: #fff !important; }
.prog-picks .choice-grid .prog-choice:nth-child(1) .cc-facts svg { color: #A9CBEA !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) { background: #A9CBEA !important; border-top-color: #1C6A8C !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) .cc-body { background: none !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) .cc-kicker { background: rgba(255,255,255,.7) !important; color: #142C5C !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) h2, .prog-picks .choice-grid .prog-choice:nth-child(2) h2 a { color: #142C5C !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) .cc-more { border-color: rgba(20,44,92,.2) !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) .cc-more > summary, .prog-picks .choice-grid .prog-choice:nth-child(2) .cc-cta-link { color: #0F3550 !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) .cc-more-body p, .prog-picks .choice-grid .prog-choice:nth-child(2) .cc-facts li { color: #1A3358 !important; }
.prog-picks .choice-grid .prog-choice:nth-child(2) .cc-facts svg { color: #142C5C !important; }
.prog-picks .prog-choice.cert-choice { background: #fff !important; }
.prog-picks .route-chips-below li:nth-child(2) .rc-code { background: #11695F !important; }

/* ===== Certificate accents: teal instead of amber/gold ===== */
.home-progs .cert-band { border-top-color: #1E9E8F !important; }
.cert-band .cb-kicker { color: #11695F !important; }
.cert-band .cb-tags span { background: #E3F4F1 !important; color: #11695F !important; box-shadow: none !important; border: 0 !important; }
.cb-actions .btn-primary { background: #11695F !important; border-color: #11695F !important; }
.cb-actions .btn-primary:hover { background: #142C5C !important; border-color: #142C5C !important; }
.prog-picks .prog-choice.cert-choice { --pc: #1E9E8F; --pc-ink: #11695F; --pc-tint: #E3F4F1; border-top-color: #1E9E8F !important; }
.prog-picks .prog-group-label:not(#uwe-degrees) small { background: #E3F4F1 !important; color: #11695F !important; }
.glance-card.gc-ibm { --gc: #6FA3D6; --gc-tint: #DCE6F0; --gc-ink: #1F4E79; }
.glance-card.gc-cert { --gc: #1E9E8F; --gc-tint: #E3F4F1; --gc-ink: #11695F; }
.kd-progs > li.kd-cert { --kc: #1E9E8F; --kc-tint: #E3F4F1; --kc-ink: #11695F; }
.glance-card.gc-af header { background: linear-gradient(160deg, #142C5C 0%, #1C3F72 100%); border-top-color: #6FA3D6; }
.glance-card.gc-af header .gc-kicker { color: #A9CBEA; }
.glance-card.gc-af header h3 a { color: #fff; }
.glance-card.gc-ibm header { background: #A9CBEA; border-top-color: #1C6A8C; }
.glance-card.gc-ibm header .gc-kicker { color: #142C5C; }

/* ===== Home About — four points in one clean panel ===== */
#about-help .ha-points { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 !important; margin: 26px 0 26px !important; padding: 6px 22px !important;
  background: #fff; border-radius: 24px; box-shadow: 0 22px 44px -32px rgba(20,44,92,.5), inset 0 0 0 1px rgba(20,44,92,.06); }
#about-help .ha-points li { background: none !important; border-radius: 0 !important; padding: 18px 0 !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; gap: 14px !important; align-items: start;
  border-bottom: 1px solid rgba(20,44,92,.1) !important; }
#about-help .ha-points li:nth-child(odd) { padding-right: 18px !important; border-right: 1px solid rgba(20,44,92,.1) !important; }
#about-help .ha-points li:nth-child(even) { padding-left: 18px !important; }
#about-help .ha-points li:nth-last-child(-n+2) { border-bottom: 0 !important; }
#about-help .ha-points li > svg { box-sizing: border-box !important; width: 44px !important; height: 44px !important; padding: 11px !important; border-radius: 50% !important; background: #142C5C !important; color: #fff !important; box-shadow: none !important; }
#about-help .ha-points li:nth-child(2) > svg { background: #1C6A8C !important; }
#about-help .ha-points li:nth-child(3) > svg { background: #11695F !important; }
#about-help .ha-points li:nth-child(4) > svg { background: #6FA3D6 !important; color: #142C5C !important; }
#about-help .ha-points strong { font-size: var(--fs-base) !important; color: #142C5C !important; margin: 2px 0 2px; }
#about-help .ha-points span { font-size: var(--fs-sm) !important; color: #4A5B73 !important; line-height: 1.5; }
@media (max-width: 640px) {
  #about-help .ha-points { grid-template-columns: 1fr; padding: 4px 18px !important; }
  #about-help .ha-points li, #about-help .ha-points li:nth-child(odd), #about-help .ha-points li:nth-child(even) { padding: 16px 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(20,44,92,.1) !important; }
  #about-help .ha-points li:last-child { border-bottom: 0 !important; }
}

/* ===== Lean home page ===== */
#about-help .why-merged { margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 3.5vw, 40px); border-radius: 28px; }
#about-help .why-merged .ref-head { margin-bottom: 0; }
.why-merged-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1.15; color: #142C5C; margin: 10px 0 0; max-width: 22ch; }
#about-help .help-stats { margin-top: clamp(28px, 4vw, 44px); }
.home-routes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: clamp(20px, 3vw, 28px) 0 0; padding: 16px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,44,92,.1); color: #34465F; font-size: var(--fs-sm); }
.home-routes > svg { width: 22px; height: 22px; color: #1C6A8C; flex: none; }
.home-routes > span { flex: 1 1 320px; }
.home-routes strong { color: #142C5C; }
.home-routes .text-link { color: #1C6A8C; font-weight: 700; white-space: nowrap; }
.home-tech-strip { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 14px; padding: 16px 20px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(120deg, #142C5C 0%, #1C3F72 60%, #1C6A8C 130%); color: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.home-tech-strip:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(20,44,92,.7); }
.hts-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(169,203,234,.16); color: #A9CBEA; }
.hts-icon svg { width: 24px; height: 24px; }
.hts-text { display: grid; gap: 2px; }
.hts-text strong { font-size: var(--fs-base); }
.hts-text small { color: #C9D7E6; font-size: var(--fs-xs); line-height: 1.45; }
.hts-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #A9CBEA; white-space: nowrap; font-size: var(--fs-sm); }
.hts-cta svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .home-tech-strip { grid-template-columns: 44px minmax(0, 1fr); } .hts-cta { grid-column: 2; } .hts-icon { width: 44px; height: 44px; } }
.ar-intl { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; color: #34465F; font-size: var(--fs-sm); }
.ar-intl svg { width: 20px; height: 20px; color: #1C6A8C; flex: none; margin-top: 2px; }
.ar-intl a { color: #1C6A8C; font-weight: 700; }
a.home-tech-strip#future-diplomas { background: linear-gradient(120deg, #142C5C 0%, #1C3F72 60%, #1C6A8C 130%) !important; color: #fff !important; padding: 16px 20px !important; opacity: 1 !important; }
a.home-tech-strip#future-diplomas .hts-text strong { color: #fff !important; }
a.home-tech-strip#future-diplomas .hts-text small { color: #C9D7E6 !important; }
a.home-tech-strip#future-diplomas .hts-cta { color: #A9CBEA !important; }

/* ===== Brochure form: compact, three fields ===== */
#brochure-dialog .field:has(#bf-programme) { display: none; }
#brochure-dialog .modal-head p#bf-intro { font-size: var(--fs-sm); margin-top: 4px; }
#brochure-dialog .alert { padding: 10px 12px; font-size: var(--fs-xs); gap: 8px; margin-bottom: 12px; }
#brochure-dialog .alert svg { width: 16px; height: 16px; }
#brochure-dialog .alert strong { font-size: var(--fs-xs); }
#brochure-dialog .privacy-box { font-size: var(--fs-xs); }
#brochure-dialog .form-actions .btn { width: 100%; justify-content: center; }

/* Campus photo in place of the map */
.map-frame.map-photo { aspect-ratio: 1024 / 662; max-height: 560px; background: #DCE6F0; }
.map-frame.map-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-frame.map-photo { aspect-ratio: auto !important; max-height: none !important; width: 100%; height: clamp(240px, 40vw, 520px); }

/* ===== Certificate careers: dropdowns ===== */
.cc-item.cc-acc-item { display: block !important; padding: 0 !important; }
.cc-acc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 24px minmax(0, 1fr) 30px; gap: 14px; align-items: center; padding: 16px 0; min-height: 56px; }
.cc-acc > summary::-webkit-details-marker { display: none; }
.cc-acc > summary:focus-visible { outline: 3px solid #6FA3D6; outline-offset: 2px; border-radius: 8px; }
.cc-acc > summary > svg:first-child { width: 24px; height: 24px; color: var(--ac); }
.cc-acc h3 { margin: 0 !important; font-size: var(--fs-base) !important; color: #142C5C; line-height: 1.35; }
.cc-acc .feat-chev { color: var(--ac); }
.cc-acc[open] .feat-chev { transform: rotate(180deg); }
.cc-acc > p { margin: 0; padding: 0 0 16px 38px; font-size: var(--fs-sm) !important; color: #4A5B73 !important; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) { .cc-acc[open] > p { animation: ccOpen .25s ease; } }
.cc-list { align-items: start; }

/* =========================================================================
   Degree pages — overview column redesign (features + routes as calm panels)
   ========================================================================= */
.po-main .feat-open-head { display: block !important; margin-bottom: 18px !important; }
.po-main .feat-open-head h2 { margin: 0 0 10px !important; }
.po-main .feat-open-head p { margin: 12px 0 0 !important; max-width: 60ch; color: #4A5B73; font-size: var(--fs-base); text-align: left !important; }
/* features: one panel */
.po-main .feats { gap: 0 !important; padding: 4px 22px !important; border-radius: 24px; background: #fff;
  box-shadow: 0 22px 44px -34px rgba(20,44,92,.5), inset 0 0 0 1px rgba(20,44,92,.08); }
.po-main .feats > .feat-acc-item + .feat-acc-item { border-top: 1px solid rgba(20,44,92,.1) !important; }
.po-main .feat-acc { background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.po-main .feat-acc[open] { box-shadow: none !important; }
.po-main .feat-acc > summary { padding: 16px 0 !important; min-height: 60px; grid-template-columns: 26px minmax(0, 1fr) 30px !important; }
.po-main .feat-acc > summary:hover { background: none !important; }
.po-main .feat-acc > summary:hover strong { color: #1C6A8C; }
.po-main .feat-acc > summary > svg:first-child { box-sizing: border-box !important; width: 24px !important; height: 24px !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
.po-main .feat-acc strong { font-size: var(--fs-base); color: #142C5C; transition: color .2s ease; }
.po-main .feat-acc[open] strong { color: var(--ac); }
.po-main .feat-desc { padding: 0 44px 18px 40px !important; }
.po-main .feat-chev { background: #F1F5FA !important; }
/* routes: matching panel */
.po-main .routes-v2 { margin-top: clamp(36px, 5vw, 56px) !important; }
.po-main .routes-v2 .routes-head { margin-bottom: 18px; }
.po-main .routes-v2 .routes-head p { color: #4A5B73; margin: 8px 0 0; }
.po-main .routes-v2 .route-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; padding: 4px 22px !important; border-radius: 24px; background: #fff;
  box-shadow: 0 22px 44px -34px rgba(20,44,92,.5), inset 0 0 0 1px rgba(20,44,92,.08); }
.po-main .route-acc { background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.po-main .route-acc + .route-acc { border-top: 1px solid rgba(20,44,92,.1) !important; }
.po-main .route-acc[open] { box-shadow: none !important; }
.po-main .route-acc > summary { padding: 16px 0 !important; }
.po-main .route-acc > summary:hover { background: none !important; }
.po-main .route-acc .rp-badge { min-width: 58px; justify-content: center; text-align: center; font-size: var(--fs-base) !important; padding: 6px 10px !important; }
.po-main .route-acc.route-kl .rp-badge { background: #11695F !important; }
.po-main .route-acc .rp-title { font-size: var(--fs-base) !important; }
.po-main .route-acc .rp-body { padding: 0 0 18px 72px !important; }
.po-main .routes-note { margin-top: 14px !important; background: none !important; padding: 0 4px !important; font-size: var(--fs-sm); color: #4A5B73; }
@media (max-width: 560px) {
  .po-main .feats, .po-main .routes-v2 .route-grid { padding: 2px 16px !important; }
  .po-main .feat-desc { padding: 0 0 16px 40px !important; }
  .po-main .route-acc .rp-body { padding: 0 0 16px !important; }
}

/* ===== Head of Department — redesign ===== */
#head-of-department .hod-card-v2 { grid-template-columns: minmax(0, 280px) minmax(0, 1fr) !important; grid-template-areas: "photo main" "photo msg" "photo actions" "pending pending" !important;
  gap: 18px clamp(24px, 4vw, 48px) !important; align-items: start; padding: clamp(22px, 3vw, 36px) !important; border-radius: 28px !important; background: #fff !important;
  box-shadow: 0 26px 50px -36px rgba(20,44,92,.5), inset 0 0 0 1px rgba(20,44,92,.07) !important; border: 0 !important; }
#head-of-department .hod-portrait { grid-area: photo; width: 100%; aspect-ratio: 4 / 5; max-height: 340px; border-radius: 22px; overflow: hidden; margin: 0; }
#head-of-department .hod-main { grid-area: main; align-self: start !important; }
#head-of-department .hod-name { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem) !important; margin: 4px 0 2px; }
#head-of-department .hod-message { grid-area: msg; position: relative; margin: 0; padding: 22px 24px 20px 24px !important; border: 0 !important; border-radius: 20px;
  background: linear-gradient(140deg, #EEF3F9 0%, #E3F4F1 120%) !important; }
.hod-quote-mark { position: absolute; top: -6px; right: 18px; font-size: 6rem; line-height: 1; font-weight: 700; color: rgba(28,106,140,.18); font-family: Georgia, serif; pointer-events: none; }
#head-of-department .hod-message [data-hod-default] { display: grid; gap: 12px; position: relative; }
#head-of-department .hod-message p { margin: 0; font-size: var(--fs-base); line-height: 1.7; color: #24364F; font-style: normal; }
#head-of-department .hod-message p:first-child { font-size: var(--fs-md); font-weight: 700; color: #142C5C; }
#head-of-department .hod-message .hod-msg-close { font-weight: 700; color: #11695F; }
#head-of-department .hod-message footer { margin-top: 14px; font-size: var(--fs-sm); font-weight: 700; color: #1C6A8C; }
.hod-actions { grid-area: actions; display: grid; gap: 10px; justify-items: start; }
.hod-actions-label { font-size: var(--fs-xs); font-weight: 700; color: #4A5B73; }
.hod-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hod-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; color: #142C5C; background: #E4EEF7; }
.hod-chips a:nth-child(2) { background: #DCE6F0; }
.hod-chips a:nth-child(3) { background: #E3F4F1; color: #11695F; }
.hod-chips a:hover { box-shadow: inset 0 0 0 2px currentColor; }
.hod-chips svg { width: 14px; height: 14px; }
.hod-actions .btn { margin-top: 4px; }
@media (max-width: 760px) {
  #head-of-department .hod-card-v2 { grid-template-columns: 112px minmax(0, 1fr) !important; grid-template-areas: "photo main" "msg msg" "actions actions" "pending pending" !important; align-items: center; }
  #head-of-department .hod-portrait { aspect-ratio: 1; max-height: none; border-radius: 18px; }
  #head-of-department .hod-portrait .hod-ph-note { font-size: .625rem; padding: 3px 7px; left: 6px; bottom: 6px; }
  #head-of-department .hod-message { padding: 18px !important; }
  .hod-quote-mark { font-size: 4.5rem; }
}
@media (max-width: 760px) { #head-of-department .hod-portrait .hod-ph-note { display: none; } }

/* HoD empty photo placeholder (silhouette) */
#head-of-department .hod-portrait-ph { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(160deg, #DCE6F0 0%, #C9D7E6 100%) !important; }
#head-of-department .hod-portrait-ph::before, #head-of-department .hod-portrait-ph::after { display: none !important; }
.hod-silhouette { width: 78%; height: auto; fill: #A9BCD2; display: block; }
#head-of-department .hod-initials-lg { display: none !important; }
#head-of-department .hod-ph-note { background: rgba(20,44,92,.85) !important; color: #fff !important; }
#head-of-department .hod-portrait { position: relative; }
#head-of-department .hod-portrait-ph { position: absolute !important; inset: 0; }
.hod-silhouette { position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 82%; }

/* Dual programme fee: local + international */
.price-dual { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; }
.price-dual .px-item { display: inline-flex; flex-direction: column; gap: 2px; }
.price-dual .px-lbl { font-size: .8125rem; font-weight: 400; line-height: 1.3; color: var(--muted); }
.fee-hero .price-dual .px-lbl { color: #DCE6F0; }
.fee-hero .price-dual .now { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.1; }
.kd-fee .price-dual { justify-content: flex-end; gap: 6px 18px; }
.kd-fee .price-dual .px-item { align-items: flex-end; }
.kd-fee .price-dual .now { font-size: var(--fs-md); }
@media (max-width: 420px) { .kd-fee .price-dual { justify-content: flex-start; } .kd-fee .price-dual .px-item { align-items: flex-start; } }
.gl-prices { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; position: relative; z-index: 1; }
.gl-pr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.gl-pr-k { font-size: var(--fs-sm); color: #DCE6F0; }
.gl-pr-v { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 700; color: #fff; line-height: 1.1; }
.fee-hero .price-dual { gap: 16px 36px; }
.fee-hero .price-dual .px-lbl { font-size: .875rem; }
.kd-fee .price-dual { flex-direction: column; align-items: flex-end; gap: 8px; }
.kd-fee .price-dual .px-lbl { font-size: .75rem; }
@media (max-width: 420px) { .kd-fee .price-dual { flex-direction: row; align-items: flex-end; gap: 6px 20px; } }
/* UWE: featured 2027 ranking card (full width, dark); Top 10 card becomes light */
.au-split .au-grid .au-0 { grid-column: 1 / -1; background: linear-gradient(140deg, #142C5C 0%, #1C3F72 60%, #1C6A8C 130%); }
.au-split .au-grid .au-0::after { background: rgba(169,203,234,.14); opacity: 1; }
.au-split .au-0 .au-ic { background: rgba(255,255,255,.1); color: #A9CBEA; }
.au-split .au-0 strong, .au-split .au-0 .au-what { color: #fff; }
.au-split .au-0 .au-src { color: #C9D7E6; }
.au-split .au-grid .au-1 { background: #fff; }
.au-split .au-1::after { background: #E4EEF7; opacity: .7; }
.au-split .au-1 .au-ic { background: #E4EEF7; color: #1C6A8C; }
.au-split .au-1 strong { color: #142C5C; } .au-split .au-1 .au-what { color: #142C5C; }
.au-split .au-1 .au-src { color: #4A5B73; }
.au-grid .au-0 { grid-column: 1 / -1; }
.ne-date.ne-range .d { font-size: .9375rem; letter-spacing: -.02em; padding: 11px 2px 8px; }
/* Event registration */
.reg-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
@media (max-width: 900px) { .reg-layout { grid-template-columns: 1fr; } }
.ev-field { border: 0; padding: 0; margin: 0; }
.ev-field legend { font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) { .ev-grid { grid-template-columns: 1fr; } }
.ev-choice { position: relative; }
.ev-choice[hidden] { display: none; }
.ev-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ev-choice label { display: grid; gap: 3px; height: 100%; padding: 14px 16px 14px 44px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; position: relative; transition: border-color .15s, background .15s; }
.ev-choice label::before { content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #8796AE; background: #fff; }
.ev-choice label strong { color: var(--navy); font-size: 1rem; line-height: 1.3; }
.ev-choice label span { color: var(--muted); font-size: .875rem; line-height: 1.4; }
.ev-choice input:checked + label { border-color: var(--blue); background: var(--pale-2); }
.ev-choice input:checked + label::before { border: 6px solid var(--blue); }
.ev-choice input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.ev-choice input[aria-invalid="true"] + label { border-color: #C62340; }
.ev-none { margin: 8px 0 0; }
.key-dates .kv strong small { font-weight: 400; color: inherit; opacity: .8; font-size: .8em; }
.ne-register { margin-top: 14px; display: inline-flex; }
[data-guests][hidden] { display: none; }
/* Home: Open Day band */
.od-band { padding: clamp(28px, 4vw, 48px) 0 clamp(8px, 2vw, 16px); background: #fff; }
.od-band[hidden] { display: none; }
.od-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 4vw, 48px); border-radius: 32px; color: #fff;
  background: radial-gradient(110% 120% at 100% 0%, rgba(111,163,214,.30) 0%, rgba(111,163,214,0) 55%), linear-gradient(130deg, #142C5C 0%, #1A3A6E 55%, #1C6A8C 120%); }
.od-card::after { content: ""; position: absolute; width: 320px; height: 320px; left: -120px; bottom: -170px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.od-main, .od-offer { position: relative; z-index: 1; }
.od-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #BFD8EE; }
.od-eyebrow svg { width: 16px; height: 16px; }
.od-main h2 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.08; margin: 10px 0 8px; letter-spacing: -.02em; }
.od-meta { color: #DCE6F0; margin: 0 0 16px; }
.od-points { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.od-points li { display: flex; gap: 10px; align-items: flex-start; color: #EAF1F8; }
.od-points svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #8FE0D3; }
.od-actions { gap: 10px; }
.od-offer { background: #fff; color: var(--navy); border-radius: 24px; padding: clamp(18px, 2.4vw, 26px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.55); display: grid; gap: 12px; }
.od-offer-head strong { display: block; font-size: 1.0625rem; }
.od-offer-head span { font-size: var(--fs-sm); color: var(--muted); }
.od-price { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 16px; background: var(--pale); }
.od-who { font-size: var(--fs-sm); color: var(--muted); }
.od-now { grid-row: 1 / span 2; grid-column: 2; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 700; color: var(--navy); align-self: center; }
.od-was { font-size: .8125rem; color: var(--muted); } .od-was s { text-decoration-thickness: 2px; text-decoration-color: rgba(198,35,64,.75); }
.od-tc { margin: 0; font-size: .8125rem; color: var(--muted); }
.od-count { margin: 0; display: inline-flex; align-self: start; justify-self: start; padding: 6px 12px; border-radius: 999px; background: #E3F4F1; color: #11695F; font-size: var(--fs-sm); font-weight: 700; }
.od-count b { font-variant-numeric: tabular-nums; }
.od-also { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 12px; margin-top: 14px; }
.od-also[hidden] { display: none; }
.od-also-k { align-self: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.od-ev { flex: 1 1 260px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--navy); transition: border-color .15s, box-shadow .15s; }
.od-ev[hidden] { display: none; }
.od-ev:hover { border-color: #3F86B5; box-shadow: 0 10px 24px -18px rgba(20,44,92,.6); }
.od-ev strong { font-size: .9375rem; } .od-ev span { grid-column: 1; font-size: .8125rem; color: var(--muted); }
.od-ev em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; font-size: var(--fs-sm); color: #1C6A8C; display: inline-flex; gap: 6px; align-items: center; }
.od-ev em svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .od-card { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .od-actions .btn { flex: 1 1 100%; justify-content: center; } .od-card { border-radius: 24px; } }
.od-main h2 .nw { white-space: nowrap; display: inline-block; }
@media (max-width: 520px) {
  .od-price { grid-template-columns: 1fr; }
  .od-now { grid-row: auto; grid-column: 1; font-size: 1.75rem; margin: 2px 0; }
  .od-main h2 .nw { display: block; }
}
/* Site-wide Open Day bar */
.od-bar { background: linear-gradient(90deg, #142C5C, #1A3A6E 60%, #1C6A8C); color: #fff; font-size: .875rem; }
.od-bar[hidden] { display: none; }
.od-bar-in { max-width: var(--container); margin-inline: auto; padding: 8px var(--gutter); display: flex; align-items: center; gap: 12px; }
.od-bar p { margin: 0; flex: 1; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; color: #DCE6F0; line-height: 1.4; }
.od-bar strong { color: #fff; }
.od-bar-short { display: none; }
.od-bar-cta { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #142C5C; font-weight: 700; text-decoration: none; font-size: .8125rem; }
.od-bar-cta svg { width: 14px; height: 14px; }
.od-bar-cta:hover { background: #E6EEF6; }
.od-bar-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: #DCE6F0; cursor: pointer; }
.od-bar-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.od-bar-x:focus-visible, .od-bar-cta:focus-visible { outline: 3px solid #BFD8EE; outline-offset: 2px; }
@media (max-width: 640px) { .od-bar-offer { display: none; } .od-bar-short { display: inline; } .od-bar { font-size: .8125rem; } }
/* Open Day notes on programme pages */
.gl-od { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: var(--fs-xs); line-height: 1.5; color: #EAF1F8; position: relative; z-index: 1; }
.gl-od svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #BFD8EE; }
.gl-od strong { color: #fff; } .gl-od a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.gl-od[hidden], .pd-od[hidden], .fees-od[hidden], [data-od-until][hidden] { display: none !important; }
.pd-od { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding: 16px 20px; border-radius: 20px; background: #E3F4F1; border: 1px solid #BFE5DE; }
.pd-od strong { color: #11695F; } .pd-od p { margin: 4px 0 0; color: var(--navy); font-size: var(--fs-sm); max-width: 60ch; }
.fees-od { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: #fff; color: var(--navy); font-size: var(--fs-sm); line-height: 1.5; }
.fees-od svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #1C6A8C; }
.key-dates .kv a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Home: compact Open Day card */
.od-band { padding: clamp(18px, 3vw, 32px) 0 8px; }
.odc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto; gap: 14px 28px; align-items: center; padding: 18px 24px; border-radius: 24px; color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, rgba(111,163,214,.28) 0%, rgba(111,163,214,0) 60%), linear-gradient(120deg, #142C5C 0%, #1A3A6E 60%, #1C6A8C 130%); }
.odc-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #BFD8EE; }
.odc-eyebrow svg { width: 14px; height: 14px; }
.odc-head h2 { color: #fff; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); line-height: 1.15; margin: 2px 0 2px; }
.odc-meta { margin: 0; font-size: .8125rem; color: #DCE6F0; }
.odc-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.odc-label { grid-column: 1 / -1; font-size: .75rem; color: #BFD8EE; }
.odc-p { display: grid; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.odc-p span { font-size: .75rem; color: #DCE6F0; }
.odc-p strong { font-size: 1.125rem; color: #fff; line-height: 1.2; }
.odc-p s { font-size: .75rem; color: #AFC3D8; text-decoration-color: rgba(255,170,190,.9); }
.odc-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.odc-wa { font-size: .8125rem; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.odc-count { margin: 0; font-size: .75rem; font-weight: 700; color: #8FE0D3; }
.odc-count[hidden] { display: none; }
.od-band .od-also { margin-top: 10px; }
.od-band .od-ev { padding: 8px 14px; }
@media (max-width: 900px) {
  .odc { grid-template-columns: 1fr; padding: 16px 18px; gap: 12px; border-radius: 20px; }
  .odc-cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
}
@media (max-width: 600px) {
  .od-band .od-also { gap: 6px; }
  .od-band .od-also-k { font-size: .6875rem; width: 100%; }
  .od-band .od-ev { flex-basis: 100%; padding: 8px 12px; border-radius: 12px; }
  .od-band .od-ev strong { font-size: .8125rem; line-height: 1.35; }
  .od-band .od-ev span { font-size: .75rem; }
  .od-band .od-ev em { font-size: .8125rem; }
  .odc-meta { font-size: .78rem; }
}
/* Why HELP Academy: stat-led cards */
.fc-stat { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(20,44,92,.12); }
.fc-stat .fc-stat-n { font-size: clamp(2.25rem, 1.7rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.02em; color: var(--navy); font-weight: 700; }
.fc-stat .fc-stat-c { font-size: .8125rem; font-weight: 600; color: #1C6A8C; line-height: 1.4; }
.fc-accent .fc-stat .fc-stat-c { color: #1A3A6E; }
.fc-dark .fc-stat { border-bottom-color: rgba(255,255,255,.18); }
.fc-dark .fc-stat .fc-stat-n { color: #fff; }
.fc-dark .fc-stat .fc-stat-c { color: #BFD8EE; }
.feat-card.has-stat h3 { margin-top: 2px; }
.fc-note { font-size: .75rem !important; opacity: .85; margin-top: -4px !important; }

/* Programme structure: detailed year panels (IBM) */
.ys-mods .ys-desc { margin: 0 0 16px; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); max-width: 70ch; }
.ys-mods .ys-sub { margin: 18px 0 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.ys-mods .ys-sub:first-of-type { margin-top: 0; }
.ys-or { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.ys-or .mod-list { grid-template-columns: 1fr !important; }
.ys-or-word { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ys-support { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.ys-support li { padding: 10px 14px; border-radius: 12px; background: var(--pale-2); font-size: var(--fs-sm); color: var(--navy); line-height: 1.4; }
.ys-industrial { margin-top: 18px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #E9F8F0; color: #0F5E3D; }
.ys-industrial svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.ys-industrial strong { display: block; font-size: var(--fs-sm); margin-bottom: 4px; }
.ys-industrial p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 720px) { .ys-support { grid-template-columns: 1fr; } .ys-or { grid-template-columns: 1fr; } .ys-or-word { text-align: center; } }

/* Open Day: on-the-spot fee waiver highlight */
.odc-label { display: flex; flex-direction: column; gap: 4px; }
.odc-hot { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); background: #FFE8A3; color: #142C5C; font-size: .75rem; font-weight: 800; letter-spacing: .01em; }
.odc-hot svg { width: 14px; height: 14px; color: #E8735A; }
.odc-tc { font-size: .6875rem; color: #BFD8EE; }
.od-spot { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 6px; padding: 10px 12px; border-radius: 12px; background: #FFF4CF; color: #142C5C; font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; }
.od-spot svg { width: 18px; height: 18px; flex: none; color: #E8735A; margin-top: 1px; }

/* Register: weekly webinar date picker */
.wdate-field { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--pale-2, #E6EEF6); display: grid; gap: 8px; }
.wdate-field[hidden] { display: none; }
.wdate-field label { font-weight: 700; color: var(--navy); }
.wdate-ok { font-weight: 700; }