/* Self-hosted brand fonts (downloaded once; nothing is loaded from another website) */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/plus-jakarta-sans.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Display face for headings: Bricolage Grotesque (SIL Open Font License), Latin + Latin Extended (for names such as Vākśravaṇa) */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/bricolage-grotesque.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/bricolage-grotesque-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ==========================================================================
   01 — Design tokens, reset, typography, buttons, utilities
   Look (September 2026 redesign): modern and bold. Big display headings in
   Bricolage Grotesque, deep midnight sections, the MVM logo crimson (#920023)
   for actions, and a warm gold accent for highlights on dark backgrounds.
   ========================================================================== */

:root {
  /* Brand — the MVM logo crimson */
  --brand: #920023;          /* buttons, links, highlights (9.4:1 on white) */
  --brand-dark: #6a0019;     /* hover / pressed */
  --brand-bright: #d11a3c;   /* partner for crimson gradients */
  --brand-50: #fff2f4;       /* soft tint behind icons and badges */
  --brand-100: #fde1e7;
  --brand-200: #f7bfcb;      /* crimson accent readable on dark backgrounds */

  /* Accent — warm gold, used on dark surfaces and for small highlights */
  --gold: #f6b61e;           /* on midnight: 10:1 */
  --gold-soft: #fff4d6;
  --gold-ink: #7a4f00;       /* gold text on white (7:1) */

  /* Neutrals */
  --night: #0b0e18;          /* dark sections, footer, top bar */
  --night-2: #141a2b;
  --night-3: #1f2740;
  --ink: #0d1020;            /* headings */
  --ink-2: #1d2233;
  --text: #3b4152;           /* body text (9.6:1 on white) */
  --muted: #5d6477;          /* secondary text (5.9:1 on white) */
  --line: #e4e6ee;
  --bg: #ffffff;
  --surface: #f4f5f9;        /* light section background */
  --surface-2: #e9ebf2;
  --star: #f2a516;
  --success: #0f6e38;
  --success-bg: #e3f6ea;

  /* Type */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Bricolage Grotesque", var(--font-body);
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lead: clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-h3: clamp(1.15rem, 1.04rem + 0.45vw, 1.42rem);
  --fs-h2: clamp(2.1rem, 1.45rem + 2.6vw, 3.9rem);
  --fs-h1: clamp(2.7rem, 1.6rem + 4.8vw, 6.2rem);

  /* Shape & depth */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;
  --shadow-sm: 0 1px 2px rgb(11 14 24 / 0.06), 0 4px 12px rgb(11 14 24 / 0.05);
  --shadow: 0 18px 40px -18px rgb(11 14 24 / 0.28);
  --shadow-lg: 0 40px 80px -30px rgb(11 14 24 / 0.4);
  --shadow-brand: 0 18px 36px -14px rgb(146 0 35 / 0.6);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 36px);
  --section: clamp(72px, 9vw, 136px);
  --header-h: 78px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-wrap: break-word;   /* a word too long for its line (an e-mail address, "Electrophysiological") breaks instead of running off a phone screen */
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.032em; line-height: 1.04; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; }
h5, h6 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }
strong { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
::selection { background: var(--gold); color: var(--night); }

:focus-visible { outline: 3px solid var(--brand-bright); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ---------- accessibility helpers ---------- */
.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: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--night); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- containers ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--content { max-width: 960px; }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 52px; padding: 0.8em 1.6em;
  border: 2px solid transparent; border-radius: 999px;
  font: 700 0.97rem/1.2 var(--font-body); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { transition: transform 0.25s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn--primary { background: linear-gradient(135deg, var(--brand-bright), var(--brand) 60%); color: #fff; box-shadow: var(--shadow-brand); }
.btn--primary:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 22px 40px -14px rgb(146 0 35 / 0.7); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5); }
.btn--light:hover { background: var(--gold); color: var(--night); }
.btn--ghost { border-color: rgb(255 255 255 / 0.45); color: #fff; background: rgb(255 255 255 / 0.06); }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--night); }

/* ---------- small utilities ---------- */
/* An eyebrow is a short uppercase label with a crimson bar — no pill. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75em;
  margin: 0 0 1.1rem;
  font: 800 0.76rem/1.2 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before { content: ""; width: 34px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--gold)); }
.lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.6; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
/* On the narrowest phones a kept-together word such as "Speech-Language" is wider than the screen in a large title. */
@media (max-width: 340px) { .nowrap { white-space: normal; } }
.text-right { text-align: right; }
.stack > * + * { margin-top: 1rem; }
.badge { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.36em 0.85em; border-radius: 999px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--brand { background: var(--brand-50); color: var(--brand); }
.rounded-media img { border-radius: var(--radius-lg); margin-bottom: 1.5rem; }

@media (max-width: 640px) {
  .hide-sm { display: none !important; }
}

/* ---------- sections rise into view as they scroll in (only when the script is running) ---------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(36px); }
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   02 — Top bar, header & navigation, footer, floating actions, enquiry pop-up
   ========================================================================== */

/* ---------- top bar (midnight, with gold details) ---------- */
.topbar { background: var(--night); color: rgb(255 255 255 / 0.78); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar ul { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.topbar a { display: inline-flex; align-items: center; gap: 0.5em; color: inherit; text-decoration: none; font-weight: 600; transition: color 0.2s; }
.topbar a:hover { color: var(--gold); }
.topbar .icon { color: var(--gold); }
.topbar__contact span { word-spacing: 0.12em; }
.topbar__social { gap: 0.15rem !important; display: flex; }
.topbar__social a { width: 30px; height: 30px; justify-content: center; border-radius: 50%; }
.topbar__social a:hover { background: rgb(255 255 255 / 0.1); }
.topbar__social .icon { color: #fff; width: 15px; height: 15px; }

/* One line, always. Two phone numbers, the e-mail, the group link, the prospectus and five icons need
   about 1,050px (825px on the group site, which has no group link). On tablets they wrapped onto three
   lines and pushed the page sideways. Below the width each set needs, drop the least useful item first:
   icons, then e-mail, then prospectus. If it is still tight, the group's name shortens with "…". */
.topbar { overflow-x: clip; }
.topbar a { white-space: nowrap; }
.topbar__contact a, .topbar__links li:not(.topbar__social) > a { min-height: 40px; }   /* as tall as the bar, so the phone number is easy to tap */
.topbar__contact { flex: none; }
.topbar__links, .topbar__links li, .topbar__links span { min-width: 0; }
.topbar__links a { max-width: 100%; }
.topbar__links li.topbar__social, .topbar__links li.topbar__prospectus { flex: none; }
.topbar__links span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1130px) { .topbar--sub .topbar__social { display: none !important; } }
@media (max-width: 950px) { .topbar--sub .topbar__mail { display: none; } }
@media (max-width: 910px) { .topbar__social { display: none !important; } }
@media (max-width: 705px) { .topbar__mail, .topbar--sub .topbar__prospectus { display: none; } }
@media (max-width: 760px) {
  .topbar__links span { max-width: 44vw; }
}

/* ---------- header ---------- */
/* No backdrop-filter here: it would make the fixed mobile menu position itself inside the header. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 0.98);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s, border-color 0.3s;
}
/* a crimson-to-gold hairline appears once the page scrolls */
.site-header::after { content: ""; position: absolute; inset: auto 0 -1px; height: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-bright) 55%, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 18px 40px -26px rgb(11 14 24 / 0.45); border-color: transparent; }
.site-header.is-scrolled::after { transform: scaleX(1); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
/* A phone held sideways has very little height: the header scrolls away with the page instead of covering a fifth of it. */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 950px) { .site-header { position: static; } }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; text-decoration: none; }
.brand__logo { height: 54px; width: auto; max-width: 250px; object-fit: contain; }
.brand__text { font: 800 1.1rem/1.2 var(--font-head); color: var(--ink); }

.brand__lockup { display: inline-flex; align-items: center; gap: 0.45rem; }
.brand__emblem { width: 62px; height: 62px; object-fit: contain; }
.brand__name { max-width: 190px; font: 800 1.04rem/1.12 var(--font-head); letter-spacing: -0.02em; color: var(--brand); }

/* Logos with white lettering sit on a crimson tile inside the white header. */
.site-header--dark .brand { padding: 7px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-bright), var(--brand) 60%); box-shadow: var(--shadow-brand); }
.site-header--dark .brand__logo { height: 44px; }
.site-header--dark .brand__name { color: #fff; }

/* With the ☰ menu the logo gives way to the button. A wide logo or a long name (Nursing, Law,
   Physiotherapy) pushed the ☰ button past the right edge of a small phone; the logo now takes the
   room that is left beside the button. */
@media (max-width: 1160px) {
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand__lockup, .brand__name { min-width: 0; }
  .brand__logo { min-width: 0; max-width: min(250px, 100%); }
  .brand__emblem, .nav-toggle { flex: none; }
}
/* the same ☰ menu when the menu does not fit (main.js → html.nav-compact) */
html.nav-compact .brand { flex: 0 1 auto; min-width: 0; }html.nav-compact .brand__lockup, html.nav-compact .brand__name { min-width: 0; }html.nav-compact .brand__logo { min-width: 0; max-width: min(250px, 100%); }html.nav-compact .brand__emblem, html.nav-compact .nav-toggle { flex: none; }



/* hamburger */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--night); cursor: pointer;
}
.nav-toggle__icon { display: grid; gap: 5px; width: 20px; }
.nav-toggle__icon span { height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] { background: var(--brand); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* nav list (desktop) */
.site-nav { display: flex; align-items: center; gap: 1rem; }
.nav-list, .submenu { margin: 0; padding: 0; list-style: none; }
.nav-list { display: flex; align-items: center; gap: 0.1rem; }
.nav-item { position: relative; }
.nav-item__row { display: flex; align-items: center; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.6rem 0.72rem; border: 0; border-radius: 10px; background: none;
  font: 700 0.9rem/1.3 var(--font-body); color: var(--ink);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color 0.2s;
}
.nav-link .icon { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
/* desktop: an underline that grows from the left */
@media (min-width: 1161px) {html:not(.nav-compact) .nav-list > .nav-item > .nav-item__row > .nav-link::after { content: ""; position: absolute; left: 0.72rem; right: 0.72rem; bottom: 0.25rem; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }html:not(.nav-compact) .nav-list > .nav-item:hover > .nav-item__row > .nav-link::after, html:not(.nav-compact) .nav-list > .nav-item > .nav-item__row > .nav-link[aria-current="page"]::after, html:not(.nav-compact) .nav-list > .nav-item.is-active > .nav-item__row > .nav-link::after { transform: scaleX(1); }html:not(.nav-compact) .nav-list > .nav-item:hover > .nav-item__row > .nav-link .icon { transform: rotate(180deg); }
}
.nav-link:hover, .nav-item:hover > .nav-item__row > .nav-link { color: var(--brand); }
.nav-link[aria-current="page"], .nav-item.is-active > .nav-item__row > .nav-link { color: var(--brand); }
.submenu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 32px; margin-left: -8px; padding: 0;
  border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.submenu-toggle .icon { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }

.submenu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 10;
  min-width: 280px; padding: 0.55rem;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.2s, transform 0.3s var(--ease), visibility 0.2s;
}
.submenu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.submenu .nav-link { display: flex; width: 100%; justify-content: space-between; white-space: normal; font-weight: 600; padding: 0.6rem 0.85rem; border-radius: 10px; transition: background-color 0.2s, color 0.2s, padding 0.25s var(--ease); }
.submenu .nav-link:hover { background: var(--brand-50); padding-left: 1.1rem; }
.submenu .submenu { top: -0.55rem; left: 100%; margin-left: 6px; border-radius: var(--radius); border-top-width: 1px; border-left: 3px solid var(--brand); }
.submenu .submenu::before { inset: 0 auto 0 -10px; width: 10px; height: auto; }
.submenu .nav-link--button .icon { transform: rotate(-90deg); }
.nav-item.is-wide > .submenu { min-width: 560px; column-count: 2; column-gap: 0.25rem; }
.nav-item.is-wide > .submenu > .nav-item { break-inside: avoid; }

@media (min-width: 1161px) {html:not(.nav-compact) .nav-item:hover > .submenu, html:not(.nav-compact) .nav-item:focus-within > .submenu, html:not(.nav-compact) .nav-item.is-open > .submenu { opacity: 1; visibility: visible; transform: none; }html:not(.nav-compact) .nav-list > .nav-item:nth-last-child(-n + 2) > .submenu { left: auto; right: 0; }html:not(.nav-compact) .nav-list > .nav-item:nth-last-child(-n + 3) .submenu .submenu { left: auto; right: 100%; margin: 0 6px 0 0; border-left-width: 1px; border-right: 3px solid var(--brand); }
}

.nav-cta { min-height: 46px; padding-inline: 1.35em; flex: none; white-space: nowrap; }   /* never on two lines: if it does not fit, the menu becomes the ☰ button */
/* a drop-down that would reach past the right edge of the screen opens towards the left (main.js) */
.nav-list > .nav-item > .submenu.submenu--flip { left: auto; right: 0; }
.submenu .submenu.submenu--flip { left: auto; right: 100%; margin: 0 6px 0 0; border-left-width: 1px; border-right: 3px solid var(--brand); }

/* nav (mobile): a full-screen midnight panel */
@media (max-width: 1160px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: var(--nav-top, 120px) 0 0 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 1.25rem;
    padding: 1rem var(--gutter) 2.5rem;
    background: var(--night); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0.25s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-item { border-bottom: 1px solid rgb(255 255 255 / 0.1); }
  .nav-item__row { justify-content: space-between; }
  .nav-link { width: 100%; padding: 1rem 0.25rem; font: 700 1.15rem/1.3 var(--font-head); letter-spacing: -0.01em; justify-content: space-between; white-space: normal; border-radius: 0; color: #fff; }
  .nav-link:hover, .nav-item:hover > .nav-item__row > .nav-link, .nav-link[aria-current="page"], .nav-item.is-active > .nav-item__row > .nav-link { background: none; color: var(--gold); }
  .submenu-toggle { width: 44px; height: 44px; margin: 0; color: rgb(255 255 255 / 0.7); }
  .submenu, .submenu .submenu {
    position: static; display: none; min-width: 0; margin: 0 0 0.9rem; padding: 0 0 0 1rem;
    background: none; border: 0; border-left: 2px solid var(--brand-bright); border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; column-count: auto !important;
  }
  .nav-item.is-open > .submenu { display: block; }
  .nav-item.is-open > .nav-item__row .icon { transform: rotate(180deg); }
  .submenu .nav-item { border-bottom: 0; }
  .submenu .nav-link { padding: 0.6rem 0.25rem; font: 600 0.98rem/1.35 var(--font-body); color: rgb(255 255 255 / 0.82); }
  .submenu .nav-link:hover { background: none; padding-left: 0.25rem; }
  .submenu .nav-link--button .icon { transform: none; }
  .nav-cta { width: 100%; }
  body.nav-open { overflow: hidden; }
}
/* the same ☰ menu when the menu does not fit (main.js → html.nav-compact) */
html.nav-compact .nav-toggle { display: inline-flex; }html.nav-compact .site-nav {
    position: fixed; inset: var(--nav-top, 120px) 0 0 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 1.25rem;
    padding: 1rem var(--gutter) 2.5rem;
    background: var(--night); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0.25s;
  }html.nav-compact .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }html.nav-compact .nav-list { flex-direction: column; align-items: stretch; }html.nav-compact .nav-item { border-bottom: 1px solid rgb(255 255 255 / 0.1); }html.nav-compact .nav-item__row { justify-content: space-between; }html.nav-compact .nav-link { width: 100%; padding: 1rem 0.25rem; font: 700 1.15rem/1.3 var(--font-head); letter-spacing: -0.01em; justify-content: space-between; white-space: normal; border-radius: 0; color: #fff; }html.nav-compact .nav-link:hover, html.nav-compact .nav-item:hover > .nav-item__row > .nav-link, html.nav-compact .nav-link[aria-current="page"], html.nav-compact .nav-item.is-active > .nav-item__row > .nav-link { background: none; color: var(--gold); }html.nav-compact .submenu-toggle { width: 44px; height: 44px; margin: 0; color: rgb(255 255 255 / 0.7); }html.nav-compact .submenu, html.nav-compact .submenu .submenu {
    position: static; display: none; min-width: 0; margin: 0 0 0.9rem; padding: 0 0 0 1rem;
    background: none; border: 0; border-left: 2px solid var(--brand-bright); border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; column-count: auto !important;
  }html.nav-compact .nav-item.is-open > .submenu { display: block; }html.nav-compact .nav-item.is-open > .nav-item__row .icon { transform: rotate(180deg); }html.nav-compact .submenu .nav-item { border-bottom: 0; }html.nav-compact .submenu .nav-link { padding: 0.6rem 0.25rem; font: 600 0.98rem/1.35 var(--font-body); color: rgb(255 255 255 / 0.82); }html.nav-compact .submenu .nav-link:hover { background: none; padding-left: 0.25rem; }html.nav-compact .submenu .nav-link--button .icon { transform: none; }html.nav-compact .nav-cta { width: 100%; }html.nav-compact body.nav-open { overflow: hidden; }



/* ---------- footer: midnight, with a giant wordmark ---------- */
.site-footer { position: relative; isolation: isolate; background: var(--night); color: rgb(255 255 255 / 0.66); font-size: 0.93rem; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; z-index: -1; inset: -30% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(146 0 35 / 0.45), transparent 62%); }
.footer-wordmark {
  position: absolute; z-index: -1; left: 50%; bottom: -0.2em; transform: translateX(-50%); margin: 0;
  font: 800 clamp(9rem, 30vw, 26rem)/0.8 var(--font-head); letter-spacing: -0.07em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / 0.07); pointer-events: none; user-select: none;
}
.footer-grid { display: grid; grid-template-columns: 1.55fr 1.5fr 0.95fr 1.2fr; gap: clamp(28px, 4vw, 56px); padding-block: clamp(64px, 8vw, 104px) clamp(48px, 6vw, 80px); }
.footer-brand__logo { display: inline-block; margin-bottom: 1rem; padding: 12px 16px; background: #fff; border-radius: var(--radius); }
.footer-brand__logo img { height: 48px; width: auto; }
.footer-brand__logo--dark { background: linear-gradient(135deg, var(--brand-bright), var(--brand) 60%); }
.footer-brand__logo .brand__emblem { width: 52px; height: 52px; }
.footer-brand__name { margin: 1.2rem 0 0.5rem; font: 800 1.45rem/1.15 var(--font-head); letter-spacing: -0.03em; color: #fff; }
.footer-brand__text { margin: 0 0 1.5rem; font-size: 0.92rem; line-height: 1.65; color: rgb(255 255 255 / 0.6); }
.footer-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.7rem; }
.footer-actions .btn { min-height: 46px; padding: 0.6em 1.3em; font-size: 0.88rem; }
/* buttons keep their own colours inside the dark footer */
.site-footer .btn:hover { text-decoration: none; }
.site-footer .btn--light { color: var(--night); }
.site-footer .btn--light:hover { color: var(--night); }
.site-footer .btn--ghost { color: #fff; }
.site-footer .btn--ghost:hover { color: var(--night); }
.footer-social { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.footer-social__label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.footer-title { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.25rem; font: 800 0.76rem/1.2 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.footer-title::before { content: ""; width: 20px; height: 3px; border-radius: 3px; background: var(--gold); }
.footer-links, .footer-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
/* two columns that flow down and across, so wrapped names leave no gaps */
.footer-links--two { display: block; columns: 2; column-gap: 1.5rem; }
.footer-links--two li { break-inside: avoid; margin-bottom: 0.65rem; }
.footer-links a { display: inline-block; transition: transform 0.25s var(--ease), color 0.2s; }
.footer-links a:hover { transform: translateX(4px); }
.site-footer a { color: rgb(255 255 255 / 0.82); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.footer-contact li { display: flex; gap: 0.75rem; align-items: flex-start; }
.footer-contact .icon { margin-top: 0.3em; color: var(--gold); }
.social-links { display: flex; gap: 0.5rem; }
.social-links a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.16); transition: background-color 0.2s, border-color 0.2s, transform 0.25s var(--ease); }
.social-links a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-3px); }
.footer-bottom { position: relative; border-top: 1px solid rgb(255 255 255 / 0.1); font-size: 0.84rem; background: rgb(11 14 24 / 0.6); }
.footer-bottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.35rem; }
.footer-bottom p { margin: 0; }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 0 0.4rem; align-items: center; }
.footer-bottom__links a { display: inline-block; padding-block: 0.3rem; }
.footer-bottom__links a.footer-top-link { display: inline-flex; align-items: center; gap: 0.3rem; }
.footer-top-link .icon { width: 14px; height: 14px; transform: rotate(180deg); }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; max-width: 620px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-links--two { columns: 1; }
}

/* ---------- floating actions (tablets & desktops) ---------- */
.floating-actions { position: fixed; right: 20px; bottom: 24px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  box-shadow: 0 18px 34px -14px rgb(11 14 24 / 0.6);
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.fab:hover { transform: translateY(-3px); }
.fab--enquire { padding: 0.9rem 1.35rem; background: var(--night); color: #fff; font: 700 0.9rem/1 var(--font-body); }
.fab--enquire .icon { color: var(--gold); }
.fab--enquire:hover { background: var(--brand); }
.fab--enquire:hover .icon { color: #fff; }
.fab--whatsapp { width: 58px; height: 58px; background: #25d366; color: #fff; }
.fab--whatsapp .icon { width: 28px; height: 28px; }
.fab--whatsapp:hover { color: #fff; }

/* ---------- action bar (phones): call, WhatsApp, enquire, apply always one tap away ---------- */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .floating-actions { display: none; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .mobile-bar {
    position: fixed; inset: auto 0 0; z-index: 45;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--night); border-top: 1px solid rgb(255 255 255 / 0.08);
    box-shadow: 0 -14px 30px -20px rgb(11 14 24 / 0.7);
  }
  .mobile-bar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 4px; border: 0; border-radius: 14px; background: none;
    font: 700 0.75rem/1.2 var(--font-body); color: rgb(255 255 255 / 0.85); text-decoration: none; cursor: pointer;
  }
  .mobile-bar__item .icon { width: 22px; height: 22px; color: var(--gold); }
  .mobile-bar__item:hover { color: #fff; background: rgb(255 255 255 / 0.06); }
  .mobile-bar__item--primary { background: linear-gradient(135deg, var(--brand-bright), var(--brand) 60%); color: #fff; }
  .mobile-bar__item--primary .icon { color: #fff; }
  .mobile-bar__item--primary:hover { background: var(--brand-dark); color: #fff; }
  body.nav-open .mobile-bar { display: none; }
}

/* ---------- enquiry pop-up ---------- */
.enquiry-dialog {
  width: min(620px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}
.enquiry-dialog[open] { animation: dialog-in 0.4s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
.enquiry-dialog::backdrop { background: rgb(11 14 24 / 0.72); }
.enquiry-dialog .enquiry-card { border: 0; box-shadow: none; border-radius: 0; }
.enquiry-dialog .enquiry-card__title { padding-right: 3rem; }
.enquiry-dialog__close {
  position: sticky; top: 12px; float: right; z-index: 1; margin: 12px 12px 0 0;
  display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--night); color: #fff; cursor: pointer; transition: background-color 0.2s;
}
.enquiry-dialog__close:hover { background: var(--brand); }

/* ==========================================================================
   03 — Home page sections
   ========================================================================== */

.section { padding-block: var(--section); }
.section--tint { background: var(--surface); }
.section--dark {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(146 0 35 / 0.6), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgb(246 182 30 / 0.12), transparent 70%),
    var(--night);
  color: rgb(255 255 255 / 0.76);
}
/* a faint grid, painted by the browser */
.section--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); }
.section--dark .section-title, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--gold); }
.section--dark .section-lead { color: rgb(255 255 255 / 0.72); }

.section-heading { max-width: 860px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center .eyebrow { justify-content: center; }
.section-heading--left { margin-bottom: 1.5rem; }
.section-title { margin: 0; }
.section-lead { margin: 1.1rem 0 0; font-size: var(--fs-lead); color: var(--text); line-height: 1.6; }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head-row .section-heading { margin: 0; }

/* two-column media + text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.split--single { grid-template-columns: minmax(0, 820px); justify-content: center; }
.split--form { align-items: start; grid-template-columns: 1.05fr 0.95fr; }
.split--profile { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .split, .split--form, .split--profile { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- hero: full-bleed, giant type ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(92vh, 880px);
  overflow: hidden; isolation: isolate;
  color: #fff; background: var(--night);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__image, .hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__image { animation: hero-zoom 18s ease-out both; }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__video { position: absolute; inset: 0; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgb(11 14 24 / 0.92) 0%, rgb(11 14 24 / 0.62) 45%, rgb(11 14 24 / 0.1) 80%),
    linear-gradient(0deg, rgb(11 14 24 / 0.85) 0%, transparent 50%),
    radial-gradient(50% 60% at 0% 100%, rgb(146 0 35 / 0.55), transparent 70%);
}
.hero__content { position: relative; padding-block: clamp(96px, 13vw, 170px) clamp(48px, 6vw, 80px); max-width: var(--container); }
.hero__content > * { max-width: 900px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em; margin-bottom: 1.6rem;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  animation: rise 0.9s var(--ease) both;
}
.hero__eyebrow::before { content: ""; width: 40px; height: 3px; border-radius: 3px; background: var(--gold); }
.hero__title { color: #fff; font-size: var(--fs-h1); margin-bottom: 1.5rem; animation: rise 1s 0.08s var(--ease) both; }
.hero__text { font-size: var(--fs-lead); color: rgb(255 255 255 / 0.84); margin-bottom: 2.4rem; max-width: 640px; animation: rise 1s 0.16s var(--ease) both; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; animation: rise 1s 0.24s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
.hero .btn--light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.5); box-shadow: none; }
.hero .btn--light:hover { background: #fff; color: var(--night); border-color: #fff; }

/* key figures: big numbers along the foot of the banner */
.hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  margin: clamp(48px, 6vw, 88px) 0 0; max-width: none !important;
  border-top: 1px solid rgb(255 255 255 / 0.2);
  animation: rise 1s 0.32s var(--ease) both;
}
.hero-stat { display: grid; gap: 0.15rem; padding: 1.3rem 1.5rem 0 0; }
.hero-stat + .hero-stat { padding-left: 1.5rem; border-left: 1px solid rgb(255 255 255 / 0.2); }
.hero-stat dd { margin: 0; font: 800 clamp(2rem, 1.3rem + 2.6vw, 3.6rem)/1 var(--font-head); letter-spacing: -0.045em; color: #fff; }
.hero-stat dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero__media::after { background: linear-gradient(180deg, rgb(11 14 24 / 0.55) 0%, rgb(11 14 24 / 0.9) 100%); }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stat, .hero-stat + .hero-stat { padding: 1rem 0.5rem 0 0; border-left: 0; }
}

/* ---------- ticker: the colleges' names, scrolling (group home) ---------- */
.ticker { overflow: hidden; background: linear-gradient(90deg, var(--brand-dark), var(--brand) 40%, var(--brand-bright)); color: #fff; }
.ticker__track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__list { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker__list li { display: flex; align-items: center; gap: 1.6rem; padding: 1.05rem 0 1.05rem 1.6rem; font: 700 clamp(1rem, 0.9rem + 0.5vw, 1.3rem)/1 var(--font-head); letter-spacing: -0.01em; white-space: nowrap; }
.ticker__list li::after { content: "✦"; font-size: 0.8em; color: var(--gold); }
.ticker__list a { margin-block: -1.05rem; padding-block: 1.05rem; color: inherit; text-decoration: none; }   /* the whole height of the strip can be tapped */
.ticker__list a:hover { color: var(--gold); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; flex-wrap: wrap; width: auto; } .ticker__list { flex-wrap: wrap; } .ticker__list li { padding-block: 0.6rem; white-space: normal; } .ticker__list a { margin-block: -0.6rem; padding-block: 0.6rem; } .ticker__list:last-child { display: none; } }

/* ---------- student shortcuts (group home): six tiles ---------- */
.quick-links { position: relative; z-index: 3; padding-top: clamp(40px, 5vw, 64px); }
.quick-links__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem;
  margin: 0; padding: 0; list-style: none;
}
.quick-link {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; height: 100%; padding: 1.3rem 1.2rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  color: var(--ink); text-decoration: none; transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.3s, color 0.3s;
}
.quick-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, var(--brand-bright), var(--brand) 60%, var(--brand-dark)); transform: translateY(101%); transition: transform 0.45s var(--ease); }
.quick-link:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; color: #fff; }
.quick-link:hover::before { transform: none; }
.quick-link__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--brand-50); color: var(--brand); transition: background-color 0.3s, color 0.3s; }
.quick-link:hover .quick-link__icon { background: rgb(255 255 255 / 0.16); color: var(--gold); }
.quick-link__icon .icon { width: 24px; height: 24px; }
.quick-link__text { display: grid; gap: 0.15rem; line-height: 1.3; }
.quick-link__text strong { font: 800 1.08rem/1.2 var(--font-head); letter-spacing: -0.02em; color: inherit; }
.quick-link__text small { font-size: 0.8rem; color: var(--muted); transition: color 0.3s; }
.quick-link:hover .quick-link__text small { color: rgb(255 255 255 / 0.8); }
@media (max-width: 1100px) { .quick-links__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .quick-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .quick-link { padding: 1rem; gap: 0.8rem; }
}

/* ---------- approved & affiliated: one large card per body ---------- */
.approvals { background: var(--surface); }
/* approvals: small cards, five across on a wide screen, so ten bodies fit in two rows */
.approval-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 230px)); justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.approval-grid:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.approval-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  padding: 1.2rem 0.9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.3s;
}
.approval-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--gold)); transform: scaleX(0); transition: transform 0.5s var(--ease); }
.approval-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.approval-card:hover::after { transform: scaleX(1); }
.approval-card__logo { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 0.7rem; }
.approval-card__logo:empty { display: none; }
.approval-card__logo img { width: 100%; height: 100%; object-fit: contain; }
/* official logos that include the name (AICTE, Bengaluru City University) are wide: give them the card's width */
.approval-card__logo--wide { width: min(100%, 160px); }
.approval-card__name { margin: 0 0 0.25rem; font-size: 1rem; }
.approval-card__full { margin: 0 0 0.6rem; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
.approval-card__name:last-child, .approval-card__full:last-child { margin-bottom: 0; }
.approval-card .badge { margin-top: auto; }
.badge--approved { background: var(--success-bg); color: var(--success); }
.badge--affiliated { background: var(--brand-50); color: var(--brand); }
.badge--recognised { background: var(--gold-soft); color: var(--gold-ink); }
/* eleven or more bodies (main home page): six across, the shorter last row centred */
@media (min-width: 1101px) {
  .approval-grid:has(> :nth-child(11)) { display: flex; flex-wrap: wrap; justify-content: center; }
  .approval-grid:has(> :nth-child(11)) .approval-card { flex: 0 0 calc((100% - 70px) / 6); }
}
/* a college's own two to four bodies: larger cards that fill the row (the main home page, with ten, keeps the small ones) */
@media (min-width: 901px) {
  .approval-grid:not(:has(> :nth-child(5))) { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .approval-grid:not(:has(> :nth-child(5))) .approval-card { flex: 1 1 240px; max-width: 400px; padding: 2.2rem 1.6rem 2rem; }
  /* only two bodies: wider still, so the pair spans most of the row */
  .approval-grid:not(:has(> :nth-child(3))) .approval-card { max-width: 520px; }
  .approval-grid:not(:has(> :nth-child(5))) .approval-card__logo { width: 112px; height: 112px; margin-bottom: 1.1rem; }
  .approval-grid:not(:has(> :nth-child(5))) .approval-card__logo--wide { width: min(100%, 230px); }
  .approval-grid:not(:has(> :nth-child(5))) .approval-card__name { font-size: 1.3rem; margin-bottom: 0.4rem; }
  .approval-grid:not(:has(> :nth-child(5))) .approval-card__full { font-size: 0.95rem; margin-bottom: 1rem; }
  .approval-grid:not(:has(> :nth-child(5))) .badge { font-size: 0.9rem; padding: 0.45rem 0.95rem; }
}
@media (max-width: 900px) {
  .approval-grid:not(:has(> :nth-child(5))) .approval-card__logo { width: 88px; height: 88px; }
  .approval-grid:not(:has(> :nth-child(5))) .approval-card__name { font-size: 1.08rem; }
  .approval-grid:not(:has(> :nth-child(5))) .approval-card__full { font-size: 0.84rem; }
}
@media (max-width: 1100px) { .approval-grid:has(> :nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .approval-grid, .approval-grid:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .approval-grid, .approval-grid:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .approval-card { padding: 1rem 0.6rem; } }

/* ---------- about ---------- */
.about__media { position: relative; }
.about__media img { box-shadow: none; }
.about { overflow-x: clip; }
.about__link { margin-top: 1.7rem; }
.about__badge {
  position: absolute; right: -14px; bottom: 28px; margin: 0;
  display: grid; padding: 1.2rem 1.5rem; border-radius: 22px;
  background: var(--night); color: #fff; box-shadow: var(--shadow-lg);
  line-height: 1;
}
.about__badge small { margin-bottom: 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.about__badge strong { color: #fff; font: 800 2.6rem/1 var(--font-head); letter-spacing: -0.05em; }
@media (max-width: 640px) { .about__badge { right: 12px; bottom: 12px; padding: 0.8rem 1.1rem; } .about__badge strong { font-size: 1.8rem; } }

/* ---------- colleges: a bento grid ---------- */
.colleges { background: #fff; }
.college-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.5rem; }
.college-card__link {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  color: inherit; text-decoration: none; transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.3s;
}
.college-card__link:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; color: inherit; }
.college-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.college-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.college-card__media::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgb(11 14 24 / 0.9)); }
.college-card__link:hover .college-card__media img { transform: scale(1.08); }
.college-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.4rem 1.4rem; flex: 1; }
/* the college's name sits on its photograph */
.college-card__title { position: absolute; z-index: 1; inset: auto 1.1rem 1rem; font: 800 1.2rem/1.15 var(--font-head); letter-spacing: -0.025em; color: #fff; }
/* a card whose name sits under the photo (department and service cards) keeps it in the text column */
.college-card__body > .college-card__title { position: static; color: var(--ink); }
.college-card__text { font-size: 0.88rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.college-card__more { margin-top: auto; padding-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.45em; font-weight: 800; font-size: 0.86rem; color: var(--brand); }
.college-card__more .icon { transition: transform 0.3s var(--ease); }
.college-card__link:hover .college-card__more .icon { transform: translateX(5px); }

/* group home, wide screens: a bento layout — the first college gets a big tile, photos fill every tile,
   and the name, summary and link sit together at the foot of the photo */
@media (min-width: 1100px) {
  .colleges .college-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 1rem; }
  .colleges .college-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .colleges .college-card:nth-child(2) { grid-column: span 2; }
  /* ten colleges: the last two tiles are wide, so the grid ends flush */
  .colleges .college-card:nth-child(9):nth-last-child(2), .colleges .college-card:nth-child(10):last-child { grid-column: span 2; }
  .colleges .college-card__link { border: 0; background: var(--night); }
  .colleges .college-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .colleges .college-card__media::after { inset: 0; background: linear-gradient(180deg, rgb(11 14 24 / 0) 25%, rgb(11 14 24 / 0.94)); }
  .colleges .college-card__body { position: absolute; z-index: 2; inset: auto 0 0; gap: 0.35rem; padding: 0 1.3rem 1.15rem; flex: none; }
  .colleges .college-card__body > .college-card__title { color: #fff; font-size: 1.25rem; }
  .colleges .college-card:nth-child(1) .college-card__title { font-size: clamp(1.9rem, 1.2rem + 1.5vw, 2.8rem); max-width: 14ch; }
  .colleges .college-card__text { display: none; }
  .colleges .college-card:nth-child(1) .college-card__text { display: -webkit-box; -webkit-line-clamp: 2; max-width: 50ch; color: rgb(255 255 255 / 0.8); font-size: 0.95rem; }
  .colleges .college-card__more { color: var(--gold); padding-top: 0.25rem; }
  .colleges .college-card:nth-child(1) .college-card__body { padding: 0 1.8rem 1.7rem; }
}

/* ---------- carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 3rem) / 3));
  gap: 1.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem; scrollbar-width: thin;
}
.carousel__track > * { scroll-snap-align: start; }
.carousel__controls { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.4rem; }
.carousel__btn { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease); }
.carousel__btn:hover { background: var(--ink); color: #fff; transform: scale(1.06); }
@media (max-width: 900px) { .carousel__track { grid-auto-columns: minmax(240px, 78%); } }

.course-slide { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--night); aspect-ratio: 4 / 5; }
.course-slide > a, .course-slide { color: #fff; text-decoration: none; }
.course-slide > a { display: block; height: 100%; }
.course-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.course-slide:hover img { transform: scale(1.08); }
.course-slide__body { position: absolute; inset: auto 0 0; display: grid; gap: 0.55rem; padding: 5rem 1.4rem 1.4rem; background: linear-gradient(transparent, rgb(11 14 24 / 0.94)); }
.course-slide--plain .course-slide__body { inset: 0; align-content: end; background: linear-gradient(150deg, var(--brand-bright), var(--brand) 55%, var(--brand-dark)); }
.course-slide__title { font: 800 1.35rem/1.15 var(--font-head); letter-spacing: -0.025em; }
.course-slide__text { font-size: 0.86rem; line-height: 1.5; color: rgb(255 255 255 / 0.85); }
.course-slide__text--badge { justify-self: start; padding: 0.35em 0.85em; border-radius: 999px; background: var(--gold); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--night); }

/* ---------- programmes: bold rows ---------- */
/* sections alternate white / grey down the group home page */
.programmes { background: var(--surface); }
.home--group .courses, .programmes + .courses { background: #fff; }
.programme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.programme-grid.is-collapsed:not(.is-searching) .programme:nth-child(n + 13) { display: none; }
.programme[hidden] { display: none; }
.programme__inner {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 0.95rem; height: 100%;
  padding: 0.95rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.35;
  transition: color 0.3s, border-color 0.3s, transform 0.35s var(--ease);
}
a.programme__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--night); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
a.programme__inner:hover { color: #fff; border-color: var(--night); transform: translateY(-2px); }
a.programme__inner:hover::before { transform: none; }
.programme__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--brand-50); color: var(--brand); transition: background-color 0.3s, color 0.3s; }
a.programme__inner:hover .programme__icon { background: rgb(255 255 255 / 0.1); color: var(--gold); }
.programme__icon img { width: 28px; height: 28px; object-fit: contain; }
.programme__title { flex: 1; font-size: 0.95rem; }
.programme__inner > .icon { color: var(--muted); transition: transform 0.3s var(--ease), color 0.3s; }
a.programme__inner:hover > .icon { color: var(--gold); transform: translateX(4px); }
.programmes__more { margin-top: 2.2rem; text-align: center; }
.programmes__more .icon { transition: transform 0.25s; }
.programmes__more [aria-expanded="true"] .icon { transform: rotate(180deg); }

.programme-search { position: relative; max-width: 700px; margin: 0 auto clamp(28px, 3.5vw, 44px); }
.programme-search > .icon { position: absolute; left: 1.4rem; top: 32px; transform: translateY(-50%); width: 22px; height: 22px; color: var(--brand); pointer-events: none; }
.programme-search input {
  width: 100%; min-height: 64px; padding: 0.9rem 1.4rem 0.9rem 3.6rem;
  border: 2px solid var(--ink); border-radius: 999px; background: #fff;
  font: 600 1.05rem/1.3 var(--font-body); color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.programme-search input::placeholder { color: var(--muted); font-weight: 500; }
.programme-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-100); }
.programme-search__empty { margin: 1rem 0 0; text-align: center; color: var(--text); }

/* ---------- programmes offered (college homes, from the site menu) ---------- */
.offered__group + .offered__group { margin-top: 2.6rem; }
.offered__heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; font-size: 1.35rem; }
.offered__heading::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--line), transparent); }
.offered__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.offered__item {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 0.9rem; height: 100%; padding: 0.95rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-weight: 700; font-size: 0.95rem; line-height: 1.35; text-decoration: none;
  transition: color 0.3s, transform 0.35s var(--ease), border-color 0.3s;
}
.offered__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--night); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.offered__item > span { flex: 1; }
.offered__item > .icon:first-child { box-sizing: content-box; padding: 10px; border-radius: 12px; background: var(--brand-50); color: var(--brand); transition: background-color 0.3s, color 0.3s; }
.offered__item > .icon:last-child { color: var(--muted); transition: transform 0.3s var(--ease), color 0.3s; }
.offered__item:hover { color: #fff; transform: translateY(-2px); border-color: var(--night); }
.offered__item:hover::before { transform: none; }
.offered__item:hover > .icon:first-child { background: rgb(255 255 255 / 0.1); color: var(--gold); }
.offered__item:hover > .icon:last-child { transform: translateX(4px); color: var(--gold); }

/* ---------- why choose us (dark, oversized numbers) ---------- */
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.feature-list li { display: grid; gap: 0.6rem; align-content: start; padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--radius); background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.1); color: #fff; font-weight: 600; line-height: 1.45; transition: background-color 0.3s, border-color 0.3s, transform 0.35s var(--ease); }
.feature-list li:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(246 182 30 / 0.5); transform: translateY(-4px); }
.feature-list__num { font: 800 2.6rem/1 var(--font-head); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
.features__media img { box-shadow: none; border-radius: 0; object-fit: contain; max-height: 640px; }
@media (max-width: 600px) { .feature-list { grid-template-columns: 1fr; } }

/* ---------- campus tour ---------- */
.tour { background: #fff; }
.tour__inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.tour__points { display: grid; gap: 0.75rem; margin: 1.3rem 0 2rem; padding: 0; list-style: none; }
.tour__points li { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--ink); }
.tour__points .icon { display: inline-block; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--night); color: var(--gold); }
.tour__player { position: relative; isolation: isolate; }
.tour__player::before { content: ""; position: absolute; inset: -16px 16% 16% -16px; z-index: -1; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--gold), var(--brand) 60%); }
.tour__player video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--night); box-shadow: var(--shadow-lg); object-fit: cover; }
@media (max-width: 900px) {
  .tour__inner { grid-template-columns: 1fr; }
  .tour__player::before { inset: -8px 18% 18% -8px; }
}

/* ---------- testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
.testimonial { position: relative; margin: 0; padding: 2.2rem 1.9rem 1.7rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; transition: box-shadow 0.35s, transform 0.4s var(--ease); }
.testimonial:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.testimonial__quote { display: block; margin-bottom: 0.4rem; color: var(--brand); }
.testimonial__quote .icon { width: 44px; height: 44px; }
.testimonial__title { margin: 0 0 0.2rem; font: 800 1.25rem/1.2 var(--font-head); letter-spacing: -0.025em; color: var(--ink); }
.testimonial blockquote { margin: 0.7rem 0 1.4rem; flex: 1; font-size: 1.02rem; color: var(--ink-2); }
.testimonial figcaption { display: flex; align-items: center; gap: 0.85rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.testimonial figcaption > span:last-child { display: grid; line-height: 1.35; }
.testimonial figcaption > span:last-child > span { font-size: 0.84rem; color: var(--muted); }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--night); color: var(--gold); font: 800 0.95rem/1 var(--font-head); letter-spacing: 0.02em; }
.stars { display: flex; gap: 2px; margin: 0.3rem 0 0; color: #d9dbe0; }
.stars .is-on { color: var(--star); }
.stars .icon { width: 16px; height: 16px; }

/* ---------- placements ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.logo-wall li { display: grid; place-items: center; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: box-shadow 0.3s, transform 0.35s var(--ease); }
.logo-wall li:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.logo-wall img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s; }
.logo-wall li:hover img { filter: none; opacity: 1; }

/* ---------- news ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; }
.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow 0.35s, transform 0.4s var(--ease); }
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.news-card__media { display: block; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.07); }
.news-card__placeholder { display: grid; place-items: center; height: 100%; background: linear-gradient(135deg, var(--brand-bright), var(--brand) 60%, var(--night)); color: #fff; }
.news-card__placeholder .icon { width: 56px; height: 56px; opacity: 0.9; }
.news-card__body { padding: 1.35rem 1.45rem 1.55rem; }
.news-card__meta { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.news-card__meta .icon { color: var(--brand); }
.news-card__title { margin: 0 0 0.5rem; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.025em; }
.news-card__title a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat; transition: background-size 0.4s var(--ease), color 0.2s; }
.news-card__title a:hover { color: var(--brand); background-size: 100% 2px; }
.news-card__excerpt { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }

/* ---------- call to action: a large crimson panel ---------- */
.cta-band { padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 104px); background: #fff; }
.cta-band__inner {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem;
  padding: clamp(44px, 6vw, 88px) clamp(28px, 6vw, 80px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(246 182 30 / 0.28), transparent 60%),
    linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 45%, var(--brand-bright) 100%);
  color: rgb(255 255 255 / 0.88); box-shadow: var(--shadow-brand);
}
/* concentric rings in the corner, painted by the browser */
.cta-band__inner::after { content: ""; position: absolute; z-index: -1; right: -12%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 34px, rgb(255 255 255 / 0.12) 34px 35.5px); -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%); }
.cta-band__inner > div:first-child { max-width: 720px; }
.cta-band__title { color: #fff; margin-bottom: 0.6rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); }
.cta-band p { margin: 0; font-size: var(--fs-lead); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* ---------- "Why choose us" as a full-width card grid (many points, or no photo) ---------- */
.features--grid .section-heading { margin-inline: auto; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.feature-card { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 1rem; padding: 1.6rem 1.5rem 1.7rem; border-radius: var(--radius-lg); background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02)); border: 1px solid rgb(255 255 255 / 0.1); overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s; }
.feature-card:hover { transform: translateY(-6px); border-color: rgb(246 182 30 / 0.55); background: linear-gradient(160deg, rgb(255 255 255 / 0.11), rgb(255 255 255 / 0.03)); }
.feature-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgb(246 182 30 / 0.14); color: var(--gold); }
.feature-card__icon .icon { width: 24px; height: 24px; }
.feature-card__num { position: absolute; top: 1.1rem; right: 1.3rem; font: 800 1.9rem/1 var(--font-head); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / 0.22); }
.feature-card__text { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.45; color: #fff; }
@media (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } .feature-card { grid-template-columns: auto 1fr; grid-template-rows: none; align-items: center; padding: 1.1rem 1.2rem; } .feature-card__num { display: none; } }

/* ---------- "Latest from campus": one featured story and two beside it ---------- */
.news-grid--featured { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.news-grid--featured .news-card--featured { grid-row: span 2; }
.news-card--featured .news-card__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
.news-card--featured .news-card__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.news-grid--featured .news-card:not(.news-card--featured) { flex-direction: row; }
.news-grid--featured .news-card:not(.news-card--featured) .news-card__media { flex: 0 0 42%; aspect-ratio: auto; }
.news-grid--featured .news-card:not(.news-card--featured) .news-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) {
  .news-grid--featured { grid-template-columns: 1fr; }
  .news-grid--featured .news-card--featured { grid-row: auto; }
  .news-card--featured .news-card__media { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 560px) {
  .news-grid--featured .news-card:not(.news-card--featured) { flex-direction: column; }
  .news-grid--featured .news-card:not(.news-card--featured) .news-card__media { aspect-ratio: 16 / 10; }
}
/* ==========================================================================
   04 — Inner pages: page header, structured layouts, forms, map, team, site map
   ========================================================================== */

/* ---------- page header ----------
   A midnight band with the title set very large, a crimson glow and a faint grid. Everything is painted
   by the browser — no photograph to wait for — so the top of every page appears the moment the HTML lands.
   A news post, which has a photograph of its own, gets the two-column variant. */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(55% 120% at 100% 0%, rgb(146 0 35 / 0.7), transparent 65%),
    radial-gradient(35% 90% at 0% 120%, rgb(246 182 30 / 0.14), transparent 70%),
    var(--night);
  color: rgb(255 255 255 / 0.8);
}
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 70%); mask-image: linear-gradient(100deg, transparent 20%, #000 70%); }
/* a page's own photograph behind the title, darkened so the text stays readable */
.page-hero__backdrop { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.page-hero--backdrop { background: var(--night); }
.page-hero--backdrop::before { z-index: -1; background-image: linear-gradient(90deg, rgb(11 13 26 / 0.94) 0%, rgb(11 13 26 / 0.78) 45%, rgb(60 4 20 / 0.5) 100%); -webkit-mask-image: none; mask-image: none; background-size: auto; }
.page-hero--backdrop::after { display: none; }
@media (max-width: 800px) { .page-hero--backdrop::before { background-image: linear-gradient(rgb(11 13 26 / 0.86), rgb(11 13 26 / 0.8)); } }
/* a large outlined ring bleeding off the right edge */
.page-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -8%; top: -70%; width: min(42rem, 55%); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgb(246 182 30 / 0.25); box-shadow: 0 0 0 60px rgb(255 255 255 / 0.02), 0 0 0 120px rgb(255 255 255 / 0.015);
}
.page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 104px); }
.page-hero--plain .page-hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: clamp(52px, 7vw, 112px) clamp(44px, 6vw, 88px); }
.page-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.7em; margin: 0 0 1rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.page-hero__eyebrow::before { content: ""; width: 34px; height: 3px; border-radius: 3px; background: currentColor; }
.page-hero__title { max-width: 20ch; margin: 0; color: #fff; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 5rem); letter-spacing: -0.045em; line-height: 1; text-wrap: balance; animation: rise 0.9s var(--ease) both; }
.page-hero--plain .page-hero__title { max-width: 22ch; }
/* A very long word in a title is hyphenated on a phone where the browser can limit that to long words; elsewhere it simply breaks. */
@supports (hyphenate-limit-chars: 12 5 5) { .page-hero__title { hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
.page-hero__meta { display: flex; align-items: center; gap: 0.45rem; margin: 1.2rem 0 0; font-weight: 700; color: rgb(255 255 255 / 0.75); }
.page-hero__meta .icon { color: var(--gold); }
.page-hero__media { position: relative; isolation: isolate; }
.page-hero__media::before { content: ""; position: absolute; inset: -14px 14% 14% -14px; z-index: -1; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--gold), var(--brand) 60%); }
.page-hero__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); background: var(--night-2); box-shadow: var(--shadow-lg); }
@media (max-width: 800px) {
  .page-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .page-hero__media::before { inset: -8px 14% 14% -8px; }
  .page-hero__image { aspect-ratio: 16 / 9; }
  .page-hero::after { top: -30%; right: -40%; width: 26rem; }
}

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.4rem; margin: 0 0 1.1rem; padding: 0; list-style: none; font-size: 0.84rem; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; padding-block: 0.3rem; color: rgb(255 255 255 / 0.6); }
.breadcrumbs li + li::before { content: "/"; opacity: 0.5; }
/* the padding makes each link a comfortable target for a thumb */
.breadcrumbs a { margin-block: -0.3rem; padding-block: 0.3rem; color: rgb(255 255 255 / 0.85); font-weight: 600; text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--gold); font-weight: 700; }

.section--page { padding-block: clamp(52px, 7vw, 104px); }

/* ---------- about layout ---------- */
.prose--center { max-width: 780px; margin: 0 auto 2.8rem; text-align: center; }
.image-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.image-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow 0.35s, transform 0.4s var(--ease); }
.image-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.image-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.image-card img[src$=".svg"] { width: 66px; height: 66px; aspect-ratio: auto; margin: 1.6rem 1.5rem 0; padding: 12px; border-radius: 18px; background: var(--night); object-fit: contain; }
.image-card__body { padding: 1.35rem 1.5rem 1.6rem; }
.image-card__body h3 { margin-bottom: 0.4rem; }
.image-card__body p { margin: 0; font-size: 0.95rem; }

.icon-row { display: flex; gap: 1.15rem; align-items: flex-start; padding: 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.3s, transform 0.35s var(--ease); }
.icon-row:hover { border-color: var(--brand-200); transform: translateX(4px); }
.icon-row__icon { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 16px; background: var(--brand-50); }
.icon-row__icon img { width: 32px; height: 32px; object-fit: contain; }
.icon-row h3 { margin-bottom: 0.3rem; font-size: 1.2rem; }
.icon-row p:last-child, .icon-row .prose > :last-child { margin-bottom: 0; }

.profile__photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }

/* ---------- organisational chart ---------- */
.org-chart { display: grid; gap: 1.4rem; justify-items: center; text-align: center; }
.org-level { position: relative; display: flex; justify-content: center; width: 100%; }
.org-level + .org-level::before { content: ""; position: absolute; top: -1.4rem; left: 50%; height: 1.4rem; border-left: 2px dashed var(--brand-200); }
.org-level--row, .org-level--grid { display: grid; gap: 1rem; }
.org-level--row { grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); justify-content: center; }
.org-level--grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.org-node { padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: 800 1rem/1.3 var(--font-head); letter-spacing: -0.01em; color: var(--ink); box-shadow: var(--shadow-sm); }
.org-node--root { background: var(--night); color: #fff; border-color: var(--night); font-size: 1.2rem; }
.org-node--lead { background: linear-gradient(135deg, var(--brand-bright), var(--brand) 60%); color: #fff; border-color: var(--brand); min-width: 240px; }
.org-node--link { display: grid; gap: 0.3rem; text-decoration: none; transition: border-color 0.2s, transform 0.35s var(--ease), box-shadow 0.3s; }
.org-node--link:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow); color: var(--brand); }
.org-node small { font: 500 0.78rem/1.4 var(--font-body); color: var(--muted); }

/* ---------- admission status ---------- */
.status-list { display: grid; gap: 0.7rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.status-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color 0.3s, transform 0.35s var(--ease); }
.status-list__item:hover { border-color: var(--brand); transform: translateX(4px); }
.status-list__name { font-weight: 800; color: var(--ink); }
.status-list__name a { color: inherit; text-decoration: none; }
.status-list__name a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- contact ---------- */
.contact-list { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.contact-list__item { display: flex; align-items: center; gap: 1rem; font-weight: 700; color: var(--ink); }
/* the e-mail address may break, or it pushed the page sideways on a small phone */
.contact-list__item > span:not(.contact-list__icon) { min-width: 0; overflow-wrap: anywhere; }
.contact-list__item a { display: inline-block; padding-block: 0.3rem; color: inherit; text-decoration: none; }
.contact-list__item a:hover { color: var(--brand); }
.contact-list__icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--night); color: var(--gold); }

/* ---------- enquiry form ---------- */
.enquiry-card { position: relative; padding: clamp(24px, 3.2vw, 40px); background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--brand); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.enquiry-card__title { margin-bottom: 0.45rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.enquiry-card__text { margin-bottom: 1.5rem; font-size: 0.95rem; color: var(--muted); }
.enquiry-card__alt { margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }

.enquiry-form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.field label span { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 0.75rem 1rem;
  border: 2px solid var(--line); border-radius: 14px; background: var(--surface);
  font: 500 1rem/1.4 var(--font-body); color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; padding-right: 2.6rem; cursor: pointer; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23920023' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 18px no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cfd3de; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background-color: #fff; box-shadow: 0 0 0 5px var(--brand-100); }
.field input:user-invalid, .field select:user-invalid { border-color: #c0392b; }
.field-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.85rem; line-height: 1.5; color: var(--text); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 0.1rem 0 0; flex: none; accent-color: var(--brand); cursor: pointer; }
.enquiry-form__submit { width: 100%; margin-top: 0.3rem; min-height: 56px; font-size: 1.02rem; }
.enquiry-form__submit:disabled { opacity: 0.65; cursor: progress; }
.enquiry-form__status { margin: 0; font-size: 0.92rem; font-weight: 700; }
.enquiry-form__status:empty { display: none; }
.enquiry-form__status.is-busy { color: var(--muted); }
.enquiry-form__status.is-ok { padding: 0.9rem 1rem; border-radius: 12px; background: var(--success-bg); color: var(--success); }
.enquiry-form__status.is-error { padding: 0.9rem 1rem; border-radius: 12px; background: #fdecea; color: #a4221a; }

/* ---------- campus map (local image, link opens directions) ---------- */
.map-card { margin: 1.6rem 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.map-card__image { position: relative; display: block; overflow: hidden; }
.map-card__image img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; transition: transform 0.9s var(--ease); }
.map-card__image:hover img { transform: scale(1.04); }
.map-card__cta {
  position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1.15rem; border-radius: 999px; background: var(--night); color: #fff;
  font-weight: 800; font-size: 0.88rem; box-shadow: var(--shadow);
  transition: background-color 0.2s;
}
.map-card__cta .icon { color: var(--gold); }
.map-card__image:hover .map-card__cta { background: var(--brand); }
.map-card__image:hover .map-card__cta .icon { color: #fff; }
.map-card__caption { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; padding: 1rem 1.2rem; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.map-card__caption .icon { margin-top: 0.2em; color: var(--brand); }
.map-card__caption small { grid-column: 2; font-size: 0.75rem; font-weight: 500; color: var(--muted); }

/* ---------- team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.5rem; }
.team-card { padding: 0.8rem 0.8rem 1.4rem; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: box-shadow 0.35s, transform 0.4s var(--ease); }
.team-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.team-card img, .team-card__placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: var(--radius); margin-bottom: 1rem; background: var(--surface); }
.team-card__placeholder { display: grid; place-items: center; color: var(--muted); }
.team-card__placeholder .icon { width: 56px; height: 56px; }
.team-card h3 { margin-bottom: 0.2rem; font-size: 1.15rem; }
.team-card p { margin: 0; font-size: 0.86rem; color: var(--muted); }

/* ---------- site map ---------- */
.sitemap__intro { margin-bottom: 2rem; }
.sitemap { columns: 3 320px; column-gap: 1.5rem; }
.sitemap__site { break-inside: avoid; margin: 0 0 1.5rem; padding: 1.45rem 1.55rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.sitemap__title { display: flex; gap: 0.6rem; align-items: baseline; margin: 0 0 0.9rem; font-size: 1.2rem; }
.sitemap__title::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 3px; background: linear-gradient(135deg, var(--brand), var(--gold)); transform: translateY(-2px); }
.sitemap__title a { color: var(--ink); text-decoration: none; }
.sitemap__title a:hover { color: var(--brand); }
.sitemap__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; font-size: 0.92rem; }
.sitemap__list a { display: inline-block; padding-block: 0.2rem; color: var(--text); text-decoration: none; }
.sitemap__list a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- news & misc ---------- */
.back-link { margin-top: 2.6rem; }
.not-found { text-align: center; }
.not-found .section-title { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.5rem); }
.not-found .eyebrow { justify-content: center; }
.not-found .footer-links { margin-top: 2.6rem; text-align: left; }
.footer-links--columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.6rem 2rem; padding: 0; list-style: none; }

/* ---------- course pages: one structure for every programme ---------- */
.page-hero__lead { max-width: 62ch; margin: 1.3rem 0 0; font-size: var(--fs-lead); color: rgb(255 255 255 / 0.82); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.page-hero .btn--outline { border-color: rgb(255 255 255 / 0.5); color: #fff; }
.page-hero .btn--outline:hover { background: #fff; border-color: #fff; color: var(--night); }
.btn--whatsapp { background: #128c4a; color: #fff; box-shadow: 0 16px 32px -14px rgb(18 140 74 / 0.65); }
.btn--whatsapp:hover { background: #0e7a3f; color: #fff; }

.course-facts { background: var(--night-2); color: #fff; }
.course-facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0; margin: 0; }
.course-fact { padding: clamp(20px, 2.4vw, 30px) clamp(14px, 1.8vw, 26px); border-left: 1px solid rgb(255 255 255 / 0.1); }
.course-fact:first-child { border-left: 0; padding-left: 0; }
.course-fact dt { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.course-fact dd { margin: 0; font: 700 1.1rem/1.3 var(--font-head); letter-spacing: -0.015em; color: #fff; }
.course-fact small { display: block; margin-top: 0.2rem; font: 500 0.84rem/1.4 var(--font-body); color: rgb(255 255 255 / 0.7); }

.section--course { padding-top: clamp(36px, 4.5vw, 64px); }
.course { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.course__aside { position: sticky; top: 100px; }
.course-toc ul, .prose .course-toc ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.2rem; padding: 0; list-style: none; }
.course-toc li { margin: 0; padding: 0; }
.course-toc li::before { content: none; }
.course-toc a { display: inline-block; padding: 0.45rem 0.95rem; border: 2px solid var(--line); border-radius: 999px; font-size: 0.86rem; font-weight: 700; color: var(--ink); text-decoration: none; background: #fff; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.course-toc a:hover { border-color: var(--night); background: var(--night); color: #fff; }
.course-block { scroll-margin-top: 110px; padding-bottom: clamp(22px, 2.8vw, 36px); margin-bottom: clamp(22px, 2.8vw, 36px); border-bottom: 1px solid var(--line); }
.course-block:last-child { border-bottom: 0; }
.course-block > h2 { margin-top: 0; }
.course-quote { margin: 0 0 1rem; padding: 1.2rem 1.4rem; border-left: 5px solid var(--gold); border-radius: var(--radius-sm); background: var(--surface); }
.course-quote p { margin: 0 0 0.5rem; }
.course-quote footer { font-weight: 800; color: var(--ink); }
.course-location .map-card { margin: 0; }

@media (max-width: 960px) {
  .course { grid-template-columns: 1fr; }
  .course__aside { position: static; }
  .course-fact { border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.1); padding-left: 0; }
  .course-fact:first-child { border-top: 0; }
}

/* ==========================================================================
   Standard pages: text beside a side panel ("On this page", section pages, admissions)
   ========================================================================== */
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.page-layout__main { min-width: 0; max-width: 820px; }
/* photo-heavy pages have no side column: their boxes use the whole content width */
.container--content > .page-layout__main { max-width: none; }
.page-aside { position: sticky; top: calc(var(--header-h, 84px) + 24px); display: grid; gap: 1rem; }
.page-aside__box { padding: 1.35rem 1.4rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.page-aside__title { margin: 0 0 0.75rem; font: 800 0.74rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); }
.page-toc ol, .page-related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.page-toc a, .page-related a, .page-related [aria-current] { display: block; padding: 0.42rem 0.6rem; margin-inline: -0.6rem; border-radius: 8px; font-size: 0.92rem; font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.page-toc a:hover, .page-related a:hover { background: #fff; color: var(--brand); }
.page-related [aria-current] { background: var(--night); color: #fff; }
.page-toc ol { counter-reset: toc; }
.page-toc li { counter-increment: toc; }
.page-toc a::before { content: counter(toc, decimal-leading-zero); margin-right: 0.6rem; font-weight: 800; color: var(--gold-ink); }
.page-aside__cta { background: var(--night); border-color: var(--night); color: rgb(255 255 255 / 0.8); }
.page-aside__cta .page-aside__title { color: var(--gold); }
.page-aside__cta p { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.5; }
.page-aside__cta .btn { width: 100%; justify-content: center; margin-top: 0.55rem; }
.page-aside__cta .btn--outline { border-color: rgb(255 255 255 / 0.35); color: #fff; background: transparent; }
.page-aside__cta .btn--outline:hover { background: #fff; color: var(--night); }
@media (max-width: 1080px) {
  .page-layout { grid-template-columns: 1fr; }
  .page-layout__main { max-width: none; }
  .page-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .page-toc { display: none; }
}

/* section titles: a short gold rule above h2, a brand bar beside h3 */
.page-layout__main .prose h2, .container--content > .page-layout__main .prose h2 { position: relative; padding-top: 1.1rem; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); scroll-margin-top: 110px; }
.page-layout__main .prose h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--gold)); }
/* a centred heading has its accent bar centred under it too (it sat at the left, out of line) */
.page-layout__main .prose h2.text-center::before, .page-layout__main .prose .text-center > h2::before { left: 50%; transform: translateX(-50%); }
/* boxes side by side (Duration | Eligibility …) read from the left, so their headings and lists line up;
   headings in a box are a size smaller than the page's own section headings */
.page-layout__main .prose .cols:not(.cols--cards) > .panel .text-center { text-align: left; }
.page-layout__main .prose .cols:not(.cols--cards) > .panel h2.text-center::before { left: 0; transform: none; }
.page-layout__main .prose .panel h2 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem); }
.page-layout__main .prose h3 { position: relative; padding-left: 0.95rem; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); scroll-margin-top: 110px; }
.page-layout__main .prose h3::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 4px; border-radius: 4px; background: var(--brand); }
.page-layout__main .prose .info-card h3, .page-layout__main .prose .panel h3, .page-layout__main .prose .media-text h3 { padding-left: 0; }
.page-layout__main .prose .info-card h3::before, .page-layout__main .prose .panel h3::before, .page-layout__main .prose .media-text h3::before { content: none; }
.page-layout__main .prose > p:first-child { font-size: 1.14rem; line-height: 1.65; color: var(--ink); }

/* long lists of short items: columns of small cards */
.prose ul.list-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.6rem; padding-left: 0; list-style: none; }
.prose ul.list-columns li { margin: 0; padding: 0.75rem 0.95rem 0.75rem 2.6rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 0.95rem; line-height: 1.4; }
.prose ul.list-columns.check-list li::before { left: 0.75rem; top: 0.72rem; width: 1.25rem; height: 1.25rem; border-radius: 6px; }
.prose ul.list-columns:not(.check-list) li { position: relative; }
.prose ul.list-columns:not(.check-list) li::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
/* ==========================================================================
   Messages from a principal, dean or chairman
   ========================================================================== */
.message__grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.message__profile { position: sticky; top: calc(var(--header-h) + 24px); }
.message__photo { position: relative; isolation: isolate; }
.message__photo::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; z-index: -1; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--gold), var(--brand) 65%); }
.message__photo img { width: 100%; max-width: 400px; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.message__card { position: relative; margin: -2.2rem 1.2rem 0; padding: 1.2rem 1.3rem 1.3rem; border-radius: var(--radius); background: var(--night); color: #fff; box-shadow: var(--shadow-lg); }
.message__name { margin: 0; font: 800 1.3rem/1.2 var(--font-head); letter-spacing: -0.02em; }
.message__qual { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--gold); font-weight: 700; }
.message__role { margin: 0.45rem 0 0; font-size: 0.9rem; line-height: 1.4; color: rgb(255 255 255 / 0.75); }
.message__body { position: relative; max-width: 780px; }
.message__mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.2rem; border-radius: 18px; background: var(--brand-50); color: var(--brand); }
.message__mark .icon { width: 30px; height: 30px; }
.message__heading { margin: 0 0 1.4rem; font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.8rem); }
.message__body .prose > p:first-child { font-size: 1.2rem; line-height: 1.65; color: var(--ink); }
.message__sign { margin: 2.2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); line-height: 1.6; }
.message__sign strong { font: 800 1.15rem/1.3 var(--font-head); color: var(--ink); }
.message__sign span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) {
  .message__grid { grid-template-columns: 1fr; }
  .message__profile { position: static; max-width: 380px; }
}
/* ==========================================================================
   People (trustees): one card each; initials stand in until a photo arrives
   ========================================================================== */
.people-grid { display: grid; gap: clamp(22px, 3vw, 36px); max-width: 1080px; margin-inline: auto; }
.person-card { display: grid; grid-template-columns: clamp(220px, 26vw, 300px) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; padding: clamp(20px, 2.6vw, 34px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.person-card__photo { align-self: start; }
.person-card__photo img, .person-card__initials { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); object-fit: cover; object-position: center top; background: #f3f5f8; }
.person-card__initials { display: grid; place-items: center; background: linear-gradient(145deg, var(--night), var(--brand)); font: 800 3.4rem/1 var(--font-head); letter-spacing: -0.04em; color: var(--gold); }
.person-card__role { margin: 0 0 0.4rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); }
.person-card__name { margin: 0; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.95rem); line-height: 1.15; text-wrap: balance; }
.person-card__qual { margin: 0.45rem 0 0; font-size: 0.95rem; font-weight: 700; color: var(--gold-ink); }
.person-card .prose { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.7; }
.person-card .prose p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .person-card { grid-template-columns: 1fr; } .person-card__photo { width: 100%; max-width: 300px; margin-inline: auto; } .person-card__role, .person-card__name, .person-card__qual { text-align: center; } }
/* ==========================================================================
   "Part of MVM Educational Institutions": the trust and the Chairman on each college's About page
   ========================================================================== */
.trust-block__inner { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.trust-block__chairman { position: relative; }
.trust-block__photo img { width: 100%; max-width: 440px; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.trust-block__quote { position: relative; margin: -3rem 0 0 1.5rem; max-width: 400px; padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--night); color: #fff; box-shadow: var(--shadow-lg); }
.trust-block__quote p { margin: 0 0 0.9rem; font: 600 1rem/1.55 var(--font-head); letter-spacing: -0.01em; }
.trust-block__quote footer { display: grid; gap: 0.15rem; font-size: 0.82rem; color: rgb(255 255 255 / 0.72); }
.trust-block__quote footer strong { font-size: 1rem; color: var(--gold); }
.trust-block__body > p { font-size: 1.05rem; line-height: 1.7; }
.trust-block__vision { margin: 1.4rem 0; padding: 1.2rem 1.4rem; border-left: 4px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; background: #fff; }
.trust-block__vision p { margin: 0; }
.trust-block__label { margin-bottom: 0.4rem !important; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); }
@media (max-width: 900px) { .trust-block__inner { grid-template-columns: 1fr; } .trust-block__quote { margin-left: 0.8rem; } }/* ==========================================================================
   Careers: areas of work, campus photos and the profile form
   ========================================================================== */
.careers-intro .prose { font-size: 1.08rem; line-height: 1.75; }
.career-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); margin: 0; padding: 0; list-style: none; }
.career-card { padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: transform 0.35s var(--ease), box-shadow 0.3s, border-color 0.3s; }
.career-card:hover { transform: translateY(-4px); border-color: var(--brand-100); box-shadow: var(--shadow); }
.career-card__icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1rem; border-radius: 14px; background: var(--brand-100); color: var(--brand); }
.career-card__icon .icon { width: 24px; height: 24px; }
.career-card__title { margin: 0 0 0.4rem; font-size: 1.12rem; line-height: 1.25; }
.career-card__text { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--muted); }
.career-life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.career-life__photo { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.career-life__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.careers-apply { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.careers-apply__text { position: sticky; top: 130px; }
.careers-apply__text p { font-size: 1.05rem; line-height: 1.7; color: rgb(255 255 255 / 0.8); }
.careers-apply__text .careers-apply__note { margin-top: 1.6rem; padding-left: 1.1rem; border-left: 3px solid var(--gold); font-size: 0.9rem; color: rgb(255 255 255 / 0.66); }
.section--dark .enquiry-card { color: var(--text); }
.field__hint { font-size: 0.8rem; color: var(--muted); }
.field input[type="file"] { padding: 0.7rem 0.8rem; font-size: 0.92rem; cursor: pointer; }
.field input[type="file"]::file-selector-button { margin-right: 0.9rem; padding: 0.5rem 0.9rem; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 0.85rem/1 var(--font-body, inherit); cursor: pointer; }
.career-notice { padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-lg); border: 1px solid #f0dfb4; border-left: 5px solid var(--gold); background: #fffaf0; text-align: left; }
.career-notice__title { margin: 0 0 0.5rem; font-size: 1.25rem; color: var(--gold-ink); }
.career-notice p { margin: 0; font-size: 0.97rem; line-height: 1.65; }
@media (max-width: 1100px) { .career-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .careers-apply { grid-template-columns: 1fr; } .careers-apply__text { position: static; } .career-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .career-grid, .career-life { grid-template-columns: 1fr; } }

/* ==========================================================================
   05 — Migrated page content (.prose) and its small class vocabulary
   (.cols .col .media-text .panel .info-card .card-grid .gallery .table-wrap
    .btn-row .check-list .file-link details)
   ========================================================================== */

.prose { color: var(--text); overflow-wrap: break-word; font-size: 1.04rem; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin: 2.8rem 0 1rem; font-size: clamp(1.8rem, 1.35rem + 1.6vw, 2.8rem); }
.prose h3 { margin: 2.1rem 0 0.8rem; }
.prose h4, .prose h5, .prose h6 { margin: 1.7rem 0 0.6rem; }
.prose h4 { color: var(--brand); }
.prose ul, .prose ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--brand); font-weight: 800; }
.prose figure { margin: 1.9rem 0; }
.prose img { border-radius: var(--radius); }
.prose figure img { margin-inline: auto; }
.prose figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); text-align: center; }
.prose blockquote { position: relative; margin: 2.2rem 0; padding: 1.6rem 1.8rem 1.6rem 2rem; border-radius: var(--radius); background: var(--night); font: 600 1.15rem/1.55 var(--font-head); letter-spacing: -0.01em; color: #fff; }
.prose blockquote::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 5px; border-radius: 5px; background: var(--gold); }
.prose blockquote p:last-child { margin: 0; }
.prose blockquote strong { color: var(--gold); }

/* columns */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0 0 1.75rem; align-items: start; }
.col > :last-child { margin-bottom: 0; }
.col--aside { padding: 1.6rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 900px) {
  .cols:has(> .col--aside) { grid-template-columns: minmax(240px, 0.4fr) 1fr; }
}
/* boxes side by side are the same height */
.cols:has(> .panel), .cols:has(> .col--aside) { align-items: stretch; }
.cols > .panel { margin-bottom: 0; }

/* rows of cards with a picture on top (pages.js → cardRows): one grid, equal boxes, pictures of one shape */
.cols--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(16px, 2.2vw, 26px); align-items: stretch; }
.cols--cards > .col { display: flex; flex-direction: column; min-width: 0; }
.cols--cards > .col > :first-child { margin: 0 0 1rem; }
.cols--cards > .col > :first-child img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.cols--portrait { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.cols--portrait > .col > :first-child img { aspect-ratio: 4 / 5; object-position: 50% 15%; }
.cols--logos > .col > :first-child img { aspect-ratio: auto; height: 120px; object-fit: contain; border-radius: 0; }
/* an icon on top of a block of text: icon size, and columns wide enough to read (they were 220px, with the icon cropped to a photo) */
.cols--icons { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cols--icons > .col > :first-child img { display: inline-block; width: 64px; height: 64px; margin: 0; aspect-ratio: auto; object-fit: contain; border-radius: 0; }   /* inline: lines up with the text, left or centred */
.cols--cards > .col > h3, .cols--cards > .col > h4 { margin-top: 0; }

/* image beside text */
.media-text { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(22px, 4.5vw, 56px); align-items: center; margin: 0 0 2.6rem; }
.media-text--right .media-text__media { order: 2; }
.media-text__media { position: relative; isolation: isolate; }
.media-text__media::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--brand-100), var(--gold-soft)); }
.media-text--right .media-text__media::before { inset: 14px 14px -14px -14px; }
.media-text__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.media-text__content > :last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .media-text { grid-template-columns: 1fr; }
  .media-text--right .media-text__media { order: 0; }
  .media-text__media::before, .media-text--right .media-text__media::before { inset: 10px -8px -8px 10px; }
}

/* boxes & cards */
.panel { padding: clamp(20px, 3vw, 32px); margin: 0 0 1.6rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.panel > :last-child { margin-bottom: 0; }
.syllabus-note { margin-top: 2.2rem; background: var(--gold-soft); border-color: #f5dc9b; }
.prose .syllabus-note h3 { margin: 0 0 0.4rem; font-size: 1.2rem; color: var(--gold-ink); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.25rem; margin: 0 0 1.75rem; }
.info-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 0.3s, box-shadow 0.35s, transform 0.4s var(--ease); }
.info-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.info-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.info-card:hover::after { transform: scaleX(1); }
.info-card h2, .info-card h3, .info-card h4 { margin: 0.25rem 0 0.2rem; font-size: 1.22rem; color: var(--ink); }
.info-card p { margin: 0; font-size: 0.95rem; }
.info-card__icon { width: 54px; height: 54px; object-fit: contain; }
img.info-card__icon { padding: 9px; border-radius: 16px; background: var(--brand-50); }
div.info-card__icon { display: grid; place-items: center; border-radius: 16px; background: var(--night); color: var(--gold); }
div.info-card__icon svg { width: 28px; height: 28px; fill: currentColor; }
a > .info-card, .prose a:has(> .info-card) { color: inherit; text-decoration: none; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.85rem; margin: 1.6rem 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); cursor: zoom-in; transition: transform 0.5s var(--ease), box-shadow 0.35s, filter 0.35s; }
.gallery img:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); }
.gallery--large { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; margin: 0; }
/* logos and seals (pages.js): shown whole on a white tile, never cropped to the photo shape or enlarged */
.gallery--logos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.gallery--logos img { height: 120px; padding: 0.9rem; aspect-ratio: auto; object-fit: scale-down; background: #fff; border: 1px solid var(--line); }

/* tables */
.table-wrap { margin: 1.8rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.prose table:not(.table-wrap table) { display: block; overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.prose th, .prose td { padding: 0.85rem 1.05rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th, .prose tr:first-child th { background: var(--night); color: #fff; font-weight: 800; }
.prose tbody tr:nth-child(even) { background: var(--surface); }
.prose tr:last-child td { border-bottom: 0; }

/* buttons & lists */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.3rem 0; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { justify-content: center; }
}
.prose .btn { text-decoration: none; }
.prose .btn:not(.btn--outline):not(.btn--whatsapp) { background: linear-gradient(135deg, var(--brand-bright), var(--brand) 60%); color: #fff; }
.prose .btn:not(.btn--outline):not(.btn--whatsapp):hover { background: var(--brand-dark); }
.check-list { list-style: none; padding-left: 0 !important; }
.check-list li { position: relative; padding-left: 2.1rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.25em;
  width: 1.4rem; height: 1.4rem; border-radius: 8px;
  background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6b61e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.col--aside .check-list a { color: var(--ink); text-decoration: none; font-weight: 700; }
.col--aside .check-list a:hover { color: var(--brand); }

.file-link a {
  display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.25rem;
  border: 2px solid var(--ink); border-radius: var(--radius); background: #fff;
  font-weight: 800; color: var(--ink); text-decoration: none; transition: background-color 0.25s, color 0.25s, transform 0.3s var(--ease);
}
.file-link a::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--brand); transition: background-color 0.25s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 15h6M9 18h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 15h6M9 18h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.file-link a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.file-link a:hover::before { background: var(--gold); }

/* accordion */
.prose details { margin: 0 0 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: box-shadow 0.3s, border-color 0.3s; }
.prose details[open] { box-shadow: var(--shadow); border-color: transparent; }
.prose summary { padding: 1.1rem 1.3rem; font: 700 1.08rem/1.35 var(--font-head); letter-spacing: -0.01em; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--night); font: 700 1.2rem/1 var(--font-body); color: var(--gold); transition: transform 0.3s var(--ease), background-color 0.2s; }
.prose details[open] summary::after { content: "–"; background: var(--brand); color: #fff; transform: rotate(180deg); }
.prose details > :not(summary) { padding-inline: 1.3rem; }
.prose details > :last-child { padding-bottom: 1.1rem; }

/* embedded forms & maps */
.prose .enquiry-card, .prose .map-card { margin: 1.9rem 0; }
.prose .map-card img, .prose .enquiry-card img { border-radius: 0; }

/* image lightbox */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.lightbox[open] { animation: dialog-in 0.35s var(--ease); }
.lightbox::backdrop { background: rgb(11 14 24 / 0.92); }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius); }
.lightbox button { position: fixed; top: 16px; right: 16px; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--gold); color: var(--night); cursor: pointer; font-size: 1.4rem; }

/* Speech & Hearing motto: SPEAK as a wide banner, HEAR and COMMUNICATE side by side, never cropped */
.prose .motto { margin: 1.5rem 0 2rem; }
.prose .motto figure { margin: 0 0 1.2rem; }
.prose .motto img { width: 100%; height: auto; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
/* the row of two is not a row of photo cards: two wide columns, pictures whole */
.prose .motto .cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.prose .motto .cols > .col > :first-child img { aspect-ratio: auto; object-fit: contain; border-radius: var(--radius-lg); }/* Head of department in a department page's side column: every photo the same square size */
.hod-photo { margin: 0 auto 1rem; max-width: 220px; }
.hod-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; border-radius: var(--radius); }
th strong, th b { color: inherit; }
.gallery--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .gallery--pairs { grid-template-columns: 1fr; } }

/* =====================================================================
   Phone layout (Oct 2026)
   A tighter, app-like layout for screens up to 760px wide: shorter
   pages, full-width buttons, swipeable rows instead of very long
   stacks, compact cards and a lighter footer. Desktop is unchanged.
   ===================================================================== */
@media (max-width: 760px) {
  :root {
    --section: 56px;
    --fs-h1: clamp(2.05rem, 1.55rem + 2.6vw, 2.6rem);
    --fs-h2: clamp(1.7rem, 1.4rem + 1.6vw, 2.1rem);
    --fs-lead: 1.04rem;
    --radius-lg: 22px;
    --radius-xl: 26px;
  }
  body { line-height: 1.65; -webkit-tap-highlight-color: rgb(146 0 35 / 0.12); }

  /* The phone number and links in the top strip are in the bottom bar and the menu */
  .topbar { display: none; }
  .site-header__inner { min-height: 64px; gap: 0.75rem; }
  .brand__emblem { width: 48px; height: 48px; }
  .brand__logo { height: 44px; }
  .brand__name { font-size: 0.95rem; max-width: 210px; }

  /* Section rhythm */
  .section-heading, .section-head-row { margin-bottom: 26px; }
  .section-lead { margin-top: 0.7rem; }
  .section--page { padding-block: 36px 44px; }
  .eyebrow { margin-bottom: 0.7rem; font-size: 0.72rem; }

  /* Home and college heroes */
  .hero__content { padding-block: 64px 32px; }
  .hero__eyebrow { margin-bottom: 1rem; font-size: 0.72rem; }
  .hero__eyebrow::before { width: 26px; }
  .hero__title { margin-bottom: 1rem; }
  .hero__text { margin-bottom: 1.6rem; font-size: 1.02rem; line-height: 1.6; }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
  .hero__actions .btn { width: 100%; min-height: 50px; }
  .hero__actions .btn--primary { order: -1; }
  .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
  .hero-stat, .hero-stat + .hero-stat { padding: 0.9rem 0.4rem 0 0; border-left: 0; }
  .hero-stat dd { font-size: clamp(1.08rem, 4.6vw, 1.5rem); letter-spacing: -0.035em; white-space: nowrap; }
  .hero-stat dt { font-size: 0.62rem; letter-spacing: 0.08em; line-height: 1.35; }

  /* Inner page headers */
  .page-hero--plain .page-hero__inner { padding-block: 30px 30px; }
  .page-hero__inner { padding-block: 32px; gap: 1.4rem; }
  .page-hero__title, .page-hero--plain .page-hero__title { font-size: clamp(1.85rem, 1.5rem + 2vw, 2.3rem); line-height: 1.05; letter-spacing: -0.035em; }
  .page-hero__eyebrow { margin-bottom: 0.7rem; font-size: 0.72rem; letter-spacing: 0.14em; }
  .page-hero__eyebrow::before { width: 22px; }
  .breadcrumbs { font-size: 0.8rem; }
  .breadcrumbs ol { row-gap: 0.15rem; }
  .page-hero__actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-top: 1.3rem; }
  .page-hero__actions .btn { width: 100%; }

  /* Buttons */
  .btn { min-height: 48px; padding: 0.75em 1.35em; }
  .btn-row { gap: 0.6rem; }

  /* Quick links: icon beside the label, three short rows */
  .quick-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .quick-link { flex-direction: row; align-items: center; gap: 0.7rem; padding: 0.8rem 0.85rem; border-radius: 16px; }
  .quick-link__icon { width: 40px; height: 40px; border-radius: 12px; }
  .quick-link__icon .icon { width: 20px; height: 20px; }
  .quick-link__text strong { font-size: 0.95rem; }
  .quick-link__text small { font-size: 0.74rem; }

  /* Swipeable rows: approvals (five or more), testimonials, campus news */
  .approval-grid:has(> :nth-child(5)),
  .testimonial-grid,
  .section.news .news-grid {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .approval-grid:has(> :nth-child(5))::-webkit-scrollbar, .testimonial-grid::-webkit-scrollbar, .section.news .news-grid::-webkit-scrollbar { display: none; }
  .approval-grid:has(> :nth-child(5)) > *, .testimonial-grid > *, .section.news .news-grid > * { flex: 0 0 auto; scroll-snap-align: start; }
  .approval-grid.approval-grid:has(> :nth-child(5)) > * { flex: 0 0 44%; min-width: 148px; }
  .testimonial-grid > * { width: 84%; }
  .section.news .news-grid > * { width: 82%; }
  .section.news .news-grid--featured .news-card { flex-direction: column; }
  .section.news .news-grid--featured .news-card .news-card__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }

  /* Approval cards */
  .approval-card { padding: 1rem 0.7rem 0.9rem; }
  .approval-card__logo { width: 60px; height: 60px; margin-bottom: 0.55rem; }
  .approval-card__name { font-size: 0.95rem; }
  .approval-card__full { font-size: 0.82rem; line-height: 1.4; }

  /* College cards: a compact list with a thumbnail */
  .college-grid { grid-template-columns: 1fr; gap: 10px; }
  .college-card__link { flex-direction: row; align-items: stretch; border-radius: 18px; }
  .college-card__media { flex: 0 0 104px; aspect-ratio: auto; min-height: 104px; }
  .college-card__media::after { display: none; }
  .college-card__body { justify-content: center; gap: 0.25rem; padding: 0.85rem 0.95rem; }
  .college-card__title { font-size: 1.02rem; line-height: 1.22; }
  .college-card__text { font-size: 0.8rem; line-height: 1.45; -webkit-line-clamp: 2; }
  .college-card__more { padding-top: 0.15rem; font-size: 0.8rem; }

  /* Testimonials and news cards */
  .testimonial { padding: 1.5rem 1.3rem 1.25rem; }
  .testimonial__quote .icon { width: 34px; height: 34px; }
  .testimonial blockquote { font-size: 0.97rem; margin: 0.5rem 0 1rem; }
  .news-card__body { padding: 1.05rem 1.1rem 1.2rem; }
  .news-card__title { font-size: 1.1rem; }

  /* Programme carousels: swipe on a phone, so the arrow buttons can go */
  .carousel__track { grid-auto-columns: 80%; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .carousel__track::-webkit-scrollbar { display: none; }
  .carousel__controls { display: none !important; }
  .course-slide { aspect-ratio: 4 / 4.6; }

  /* Programme list: short rows, eight before Show all */
  .programme-grid { gap: 0.5rem; }
  .programme__inner { gap: 0.8rem; padding: 0.7rem 0.9rem; }
  .programme__icon { width: 40px; height: 40px; border-radius: 12px; }
  .programme__icon img { width: 24px; height: 24px; }
  .programme-grid.is-collapsed:not(.is-searching) .programme:nth-child(n + 9) { display: none; }

  /* Feature tiles and lists */
  .feature-list { gap: 0.6rem; margin-top: 1.3rem; }
  .feature-list li { padding: 1rem 1.1rem; }
  .feature-list__num { font-size: 1.9rem; }
  .feature-grid { gap: 8px; margin-top: 1.6rem; }
  .feature-card { gap: 0.85rem; padding: 0.85rem 1rem; }
  .feature-card__icon { width: 42px; height: 42px; border-radius: 12px; }
  .feature-card__icon .icon { width: 20px; height: 20px; }

  /* Course facts strip: two facts per row */
  .course-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
  .course-fact, .course-fact:first-child { padding: 0.95rem 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.1); }
  .course-fact:nth-child(-n + 2) { border-top: 0; }
  .course-fact dd { font-size: 1rem; }

  /* Content pages */
  .page-layout { gap: 28px; }
  .page-layout__main .prose h2 { font-size: 1.55rem; }
  .page-layout__main .prose h3 { font-size: 1.18rem; }
  .page-layout__main .prose > p:first-child { font-size: 1.06rem; }
  .media-text { gap: 1.6rem; }
  /* tall portrait photos would fill the whole screen */
  .media-text__media img { max-height: 360px; object-fit: cover; }
  .card-grid { gap: 0.8rem; }
  .info-card { padding: 1.2rem; }
  .panel { padding: 1.2rem 1.15rem; }
  .gallery:not(.gallery--pairs):not(.gallery--logos) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .gallery img { border-radius: 12px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .team-card { padding: 0.55rem 0.55rem 1rem; }
  .team-card h3 { font-size: 1rem; }
  .team-card p { font-size: 0.84rem; }
  /* the admissions box beside the content repeats the band below it and the bottom bar */
  .page-aside__cta { display: none; }
  .page-aside { gap: 0.8rem; }
  .sitemap__title a { display: inline-block; padding-block: 0.3rem; }

  /* Admissions band */
  .cta-band { padding-block: 8px 44px; }
  .cta-band__inner { gap: 1.3rem; padding: 30px 22px; border-radius: 24px; }
  .cta-band__title { font-size: 1.7rem; }
  .cta-band p { font-size: 0.98rem; }
  .cta-band__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; width: 100%; }
  .cta-band__actions .btn { width: 100%; min-height: 46px; padding: 0.65em 0.6em; font-size: 0.9rem; }
  /* first button full width; with an even count the last one too, so no button sits alone */
  .cta-band__actions .btn:first-child, .cta-band__actions .btn:last-child:nth-child(even) { grid-column: 1 / -1; }
  /* a phone number does not fit half a row */
  .cta-band__actions:has(> .btn[href^="tel:"]) { grid-template-columns: 1fr; }

  /* Trust block (chairman) */
  .trust-block__quote { margin: -2rem 0 0 0.6rem; padding: 1.05rem 1.15rem; }

  /* Footer: shorter, two columns of links */
  .footer-wordmark { display: none; }
  .footer-grid { gap: 30px; padding-block: 44px 30px; }
  .footer-links, .footer-links--two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1rem; columns: auto; }
  .footer-links--two li { margin-bottom: 0; }
  .footer-links a { font-size: 0.9rem; }
  .footer-title { margin-bottom: 0.85rem; }
  .footer-actions .btn { flex: 1 1 auto; white-space: nowrap; }
  .footer-bottom__inner { padding-block: 1rem; font-size: 0.8rem; }
}

@media (max-width: 340px) { .cta-band__actions { grid-template-columns: 1fr; } }
@media (max-width: 380px) {
  .quick-link__text small { display: none; }
  .college-card__media { flex-basis: 88px; }
}

/* Touch screens: no hover lifts, which stick after a tap */
@media (hover: none) {
  .btn:hover, .quick-link:hover, .approval-card:hover, .college-card__link:hover, .testimonial:hover, .news-card:hover, .info-card:hover, .feature-list li:hover, .feature-card:hover, .team-card:hover, .carousel__btn:hover { transform: none; }
  .quick-link:hover { color: var(--ink); box-shadow: none; border-color: var(--line); }
  .quick-link:hover::before { transform: translateY(101%); }
  .quick-link:hover .quick-link__icon { background: var(--brand-50); color: var(--brand); }
  .quick-link:hover .quick-link__text small { color: var(--muted); }
  .college-card__link:hover .college-card__media img, .news-card:hover .news-card__media img { transform: none; }
  a.programme__inner:hover { color: var(--ink); border-color: var(--line); transform: none; }
  a.programme__inner:hover::before { transform: scaleX(0); }
  a.programme__inner:hover .programme__icon { background: var(--brand-50); color: var(--brand); }
}

/* =====================================================================
   College pages (Nov 2026)
   1. A clear way back to the MVM group site from every college and
      hospital page (the "MVM Educational Institutions" top-bar link).
   2. College homepages: quick-link tiles under the banner, a banner
      that shows its photo on phones, tidier approval cards.
   ===================================================================== */
.topbar__home a { gap: 0.45rem; padding: 0 0.85rem; margin-block: 5px; min-height: 30px !important; border-radius: 999px; background: rgb(255 255 255 / 0.12); color: #fff; font-weight: 700; }
.topbar__home a:hover { background: var(--brand); color: #fff; }
.topbar__home .icon { display: none; }
.topbar__home a::before { content: "\2190"; font-weight: 400; color: var(--gold); }
.topbar__home a:hover::before { color: #fff; }

.home--college .quick-links { padding-top: clamp(28px, 4vw, 52px); }
.home--college .quick-links + .section { padding-top: clamp(48px, 6vw, 88px); }

@media (max-width: 760px) {
  /* phones: the top strip comes back with only the link to the group site */
  .topbar:has(.topbar__home) { display: block; }
  .topbar:has(.topbar__home) .topbar__inner { min-height: 38px; justify-content: flex-start; }
  .topbar:has(.topbar__home) .topbar__contact,
  .topbar:has(.topbar__home) .topbar__links > li:not(.topbar__home) { display: none !important; }
  .topbar__home.topbar__home { display: list-item !important; }
  .topbar__home a { min-height: 28px !important; margin-block: 5px; padding: 0 0.8rem; font-size: 0.78rem; }
  .topbar__home span { max-width: none !important; }

  /* college banner: the photo shows at the top, text on a dark fade below */
  .home--college .hero__content { padding-block: 168px 30px; }
  .home--college .hero__media::after { background: linear-gradient(180deg, rgb(11 14 24 / 0.08) 0%, rgb(11 14 24 / 0.35) 26%, rgb(11 14 24 / 0.9) 52%, rgb(11 14 24 / 0.97) 100%); }
  .home--college .hero__text { font-size: 0.98rem; }

  /* quick links: two columns, three short rows */
  .home--college .quick-links { padding-top: 18px; }
  .home--college .quick-links + .section { padding-top: 40px; }

  /* three approval cards side by side instead of two plus a gap */
  .approval-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .approval-grid:has(> :nth-child(3):last-child) .approval-card { padding: 0.85rem 0.4rem 0.8rem; }
  .approval-grid:has(> :nth-child(3):last-child) .approval-card__logo { width: 50px; height: 50px; }
  .approval-grid:has(> :nth-child(3):last-child) .approval-card__name { font-size: 0.84rem; line-height: 1.25; }
  .approval-grid:has(> :nth-child(3):last-child) .approval-card__full { display: none; }
  .approval-grid:has(> :nth-child(3):last-child) .badge { font-size: 0.68rem; padding: 0.2rem 0.5rem; }

  /* the about photo: a wide crop instead of a near-square block */
  .home--college .about__media img { max-height: 260px; object-fit: cover; }

  /* group home banner: Apply Now and Contact Admissions side by side, Explore Courses below */
  .home--group .hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
  .home--group .hero__actions .btn { padding-inline: 0.5em; gap: 0.4em; font-size: 0.92rem; white-space: nowrap; }
  .home--group .hero__actions .btn[href="#programmes"] { order: 1; grid-column: 1 / -1; }
  .home--group .hero__actions .btn[href="contact-us/"] .icon { display: none; }
}
@media (max-width: 379px) { .home--group .hero__actions .btn { font-size: 0.86rem; } }
@media (max-width: 339px) { .home--group .hero__actions .btn { font-size: 0.78rem; } .home--group .hero__actions .btn .icon { display: none; } }