/* ==========================================================================
   MIBD — Mount Institute of Business Development
   Editorial design system. One stylesheet (the site is dependency-free and
   unbundled; splitting would add render-blocking requests, not clarity).

   LAYERS
   1. Fonts          8. Footer
   2. Tokens         9. Page hero
   3. Reset/base    10. Components
   4. Layout        11. Programme pages
   5. Typography    12. Forms
   6. Buttons       13. Lightbox
   7. Header/nav    14. Utilities      15. Motion
   ========================================================================== */

/* ==========================================================================
   1. FONTS — Museo Sans 500 for display, Open Sans for body.
   Both self-hosted and subset to Latin. Open Sans ships as a single variable
   file covering weights 300-800.
   ========================================================================== */
@font-face {
  font-family: "Museo Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/museo-sans-500.woff2") format("woff2");
}
/* One variable file carries every weight from 300 to 800. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans.woff2") format("woff2-variations"),
       url("../fonts/open-sans.woff2") format("woff2");
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */
:root {
  /* — Surface palette: neutral-dominant, brand accent used sparingly — */
  --bg-primary: #ffffff;
  --bg-warm: #f4f2ed;
  --bg-muted: #eae7e0;
  --bg-dark: #101010;
  --bg-deep: #080808;

  --text-primary: #111111;
  --text-secondary: #5d5952;
  /* The quietest tier still has to clear 4.5:1 on white — these tokens carry
     11px uppercase labels, not just decoration. */
  --text-muted: #75706a;
  --text-inverse: #ffffff;

  --border-dark: rgba(17, 17, 17, .14);
  --border-dark-strong: rgba(17, 17, 17, .3);
  --border-light: rgba(255, 255, 255, .16);
  --border-light-strong: rgba(255, 255, 255, .34);

  /* MIBD brand accent — inherited from the institute's identity, used rarely */
  --brand-accent: #c51532;
  --brand-deep: #9d0f27;
  --brand-light: #ff4d63;   /* the brand red, lifted to read on near-black */

  /* — Surface contract: every section sets these; components read them — */
  --s-bg: var(--bg-primary);
  --s-fg: var(--text-primary);
  --s-fg-soft: var(--text-secondary);
  --s-fg-mute: var(--text-muted);
  --s-line: var(--border-dark);
  --s-line-strong: var(--border-dark-strong);
  --s-accent: var(--brand-accent);
  --s-panel: rgba(17, 17, 17, .035);

  /* — Type —
     Display: Museo Sans 500 (one weight only — always ask for 500).
     Body: Open Sans, one variable file covering 300-800. Tracking stays at zero. */
  --font-display: "Museo Sans", "Open Sans", Helvetica, Arial, sans-serif;
  --font-body: "Open Sans", Helvetica, Arial, sans-serif;

  --text-display-xl: clamp(3rem, 7.4vw, 8.6rem);
  --text-display-lg: clamp(2.6rem, 5.7vw, 6.5rem);
  --text-h1: clamp(2.3rem, 4.9vw, 5.6rem);
  --text-h2: clamp(1.9rem, 3.7vw, 4.1rem);
  --text-h3: clamp(1.45rem, 2.1vw, 2.45rem);
  --text-h4: clamp(1.1rem, 1.4vw, 1.5rem);

  --text-body-lg: clamp(1rem, 1.08vw, 1.18rem);
  --text-body: .95rem;
  --text-small: .8rem;
  --text-label: .69rem;

  --lh-display: 1;
  --lh-heading: 1.1;
  --lh-body: 1.62;
  --ls-display: -.018em;
  --ls-body: 0em;
  --ls-label: .12em;

  /* — Space — */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px; --space-11: 160px; --space-12: 220px;

  --section-y: clamp(76px, 9.5vw, 178px);
  --section-y-tight: clamp(52px, 6vw, 104px);

  /* — Shell / grid — */
  --shell-max: 1720px;
  --shell-mid: 1280px;
  --shell-narrow: 940px;
  --gutter: clamp(20px, 4.6vw, 96px);
  --measure: 62ch;

  /* — Radius —
     Media and media-like surfaces share one rounded value site-wide. A literal
     `15%` stretches into an ellipse on wide elements (15% of a 1440px-wide video
     is a 216px corner), so this is a fixed value tuned to read as ~15% on the
     card sizes actually used. Change these two tokens to restyle every corner. */
  --radius-media: 18px;
  --radius-media-lg: 26px;
  --radius-panel: 14px;
  --radius-pill: 999px;
  --header-h: 78px;
  --header-h-scrolled: 68px;

  /* — Motion — */
  --ease-editorial: cubic-bezier(.16, 1, .3, 1);
  --ease-cinematic: cubic-bezier(.76, 0, .24, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --dur-micro: .22s;
  --dur-button: .36s;
  --dur-type: .85s;
  --dur-media: 1.15s;
  --dur-scene: 1.4s;

  /* — Depth — */
  --z-header: 100;
  --z-menu: 120;
  --z-lightbox: 300;
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, .06);
}

/* Surface themes — set on any .section / region, cascade into components */
.section--white, .surface-light { --s-bg: var(--bg-primary); }
.section--light, .surface-warm { --s-bg: var(--bg-warm); }
.surface-muted { --s-bg: var(--bg-muted); }
.section--white, .section--light, .surface-light, .surface-warm, .surface-muted {
  --s-fg: var(--text-primary);
  --s-fg-soft: var(--text-secondary);
  --s-fg-mute: var(--text-muted);
  --s-line: var(--border-dark);
  --s-line-strong: var(--border-dark-strong);
  --s-accent: var(--brand-accent);
  --s-panel: rgba(17, 17, 17, .035);
}
.section--dark, .surface-dark, .site-footer, .page-hero, .lightbox {
  --s-bg: var(--bg-dark);
  --s-fg: var(--text-inverse);
  --s-fg-soft: rgba(255, 255, 255, .72);
  --s-fg-mute: rgba(255, 255, 255, .5);
  --s-line: var(--border-light);
  --s-line-strong: var(--border-light-strong);
  --s-accent: var(--brand-light);
  --s-panel: rgba(255, 255, 255, .045);
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-x: hidden;
  overflow-wrap: break-word;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

button { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--s-line); margin: var(--space-7) 0; }

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

:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute; left: 16px; top: -70px; z-index: 400;
  padding: 14px 22px;
  font-size: var(--text-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none;
  background: var(--text-primary); color: #fff;
  border-radius: var(--radius-pill);
  transition: top var(--dur-button) var(--ease-editorial);
}
.skip-link:focus { top: 16px; color: #fff; }

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

svg.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }
/* Line-art variant — the global fill above would flood these outlines solid. */
svg.icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Email addresses, URLs and long phone strings are single unbreakable tokens.
   `anywhere` (not `break-word`) also shrinks min-content, so they can't widen
   a grid track and push the page into horizontal scroll. */
.help-card dd, .footer-list span, .contact-card, .aside-card,
.prose a, .breadcrumb, .team-member__creds { overflow-wrap: anywhere; }

/* ==========================================================================
   4. LAYOUT — editorial shell + 12/8/4 column grid
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--shell-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--mid { max-width: calc(var(--shell-mid) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--shell-narrow) + var(--gutter) * 2); }

.section {
  position: relative;
  /* flow-root, so a child's top margin can't collapse out through the section
     edge and expose the page background between two dark chapters. */
  display: flow-root;
  padding-block: var(--section-y);
  background: var(--s-bg);
  color: var(--s-fg);
}
.section--tight { padding-block: var(--section-y-tight); }
.section--flush { padding-block: 0; }

/* Chapter joins: consecutive same-surface sections read as one chapter */
.section--dark + .section--dark,
.section--light + .section--light,
.section--white + .section--white { padding-top: 0; }

/* Hairline between chapters of the same colour that must stay distinct */
.section--white + .section--white > .container::before,
.section--light + .section--light > .container::before {
  content: ""; display: block;
  border-top: 1px solid var(--s-line);
  margin-bottom: var(--section-y-tight);
}

.grid {
  display: grid;
  gap: clamp(28px, 3.2vw, 56px);
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
.grid--3 { --cols: 3; }
.grid--4 { --cols: 4; }
.grid--6 { --cols: 6; }

.split {
  display: grid;
  gap: clamp(32px, 5.5vw, 104px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.split--wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--center { align-items: center; }

.stack > * + * { margin-top: var(--stack, 22px); }
.stack--sm { --stack: 12px; }
.stack--lg { --stack: 36px; }

@media (max-width: 1100px) {
  .grid { --cols: 2; }
  .grid--6 { --cols: 3; }
  .split, .split--wide-right { grid-template-columns: 1fr; }
  /* The admissions layout carries its column ratio in a style attribute, which
     outranks the rule above and kept two columns on phones — squeezing the help
     card to ~110px. Only !important can collapse an inline declaration. */
  .split[style], .split--wide-right[style] { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  .grid, .grid--3, .grid--4 { --cols: 1; }
  .grid--6 { --cols: 2; }
}

/* ==========================================================================
   5. TYPOGRAPHY — scale carries the hierarchy, not weight
   ========================================================================== */
.display {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.h-xl { font-size: var(--text-h1); line-height: var(--lh-heading); font-weight: 500; }
.h-lg { font-size: var(--text-h2); line-height: 1.08; font-weight: 500; }
.h-md { font-size: var(--text-h3); font-weight: 500; line-height: 1.16; letter-spacing: -.015em; }
.h-sm { font-size: var(--text-h4); font-weight: 500; line-height: 1.28; letter-spacing: -.01em; }
.h-xs { font-size: 1rem; font-weight: 500; line-height: 1.38; letter-spacing: -.005em; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s-accent);
}

.lead {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--s-fg-soft);
  max-width: 54ch;
}

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.02em;
  max-width: 22ch;
}

.text-muted { color: var(--s-fg-soft); }
.text-brand { color: var(--s-accent); }
.text-center { text-align: center; }

.prose { font-size: var(--text-body); color: var(--s-fg-soft); max-width: var(--measure); }
.prose p { margin-bottom: 1.15em; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li { margin-top: .4em; }
.prose li::marker { color: var(--s-fg-mute); }
.prose strong { color: var(--s-fg); font-weight: 700; }
.prose a {
  color: var(--s-fg);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-button) var(--ease-editorial);
}
.prose a:hover { background-size: 0 1px; background-position: 100% 100%; }

/* The OTHM partner-university list is the most valuable outbound link on a
   programme page, and it sits buried in a paragraph of body copy. Marked in the
   brand red so it reads as a destination rather than as running text. The markup
   already wraps it in <strong>; the weight is restated so the rule also holds
   for any instance that does not. The underline inherits currentColor from
   `.prose a`, so it turns red along with the text.

   Must sit after `.prose a` and match its specificity, or the surface colour
   wins and the link stays plain white.

   --s-accent rather than a literal red: these paragraphs sit on .section--dark,
   where the deep #c51532 drops to roughly 3:1 against near-black and fails AA
   for body text. The token keeps the deep red on light surfaces and the lifted
   #ff4d63 on dark, which is the only variant that stays legible in running
   copy. */
a[href*="university-progression"],
.prose a[href*="university-progression"] {
  font-weight: 700;
  color: var(--s-accent);
}
a[href*="university-progression"] strong,
.prose a[href*="university-progression"] strong { color: inherit; }
/* A lot of the source copy is one paragraph whose items are separated by <br>.
   Giving those breaks room lets them read as a list without touching the markup
   or the words. */
.prose br { content: ""; display: block; margin-top: .5em; }

.section-head {
  max-width: 60ch;
  margin-bottom: clamp(44px, 5vw, 88px);
}
.section-head.text-center { margin-inline: auto; }
.section-head > * + * { margin-top: var(--space-5); }

/* ==========================================================================
   6. BUTTONS & LINKS — pill CTAs with a sliding fill, no shadows
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 54px;
  padding: 14px 28px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-button) var(--ease-editorial),
              border-color var(--dur-button) var(--ease-editorial);
}
/* One mechanism for every variant: a fill panel that slides in or out behind
   the label. Each variant declares the fill colour and the two text colours. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill, transparent);
  transform: scaleX(var(--fill, 0));
  transform-origin: var(--fill-origin, left) center;
  transition: transform var(--dur-button) var(--ease-editorial);
}
.btn .icon { font-size: .82em; transition: transform var(--dur-button) var(--ease-editorial); }
.btn:hover .icon { transform: translateX(5px); }
.btn:active { transform: translateY(1px); }

/* Filled → outline: the fill retreats to the right */
.btn--primary {
  --btn-fill: var(--brand-accent);
  --fill: 1;
  --fill-origin: right;
  border-color: var(--brand-accent);
  color: #fff;
}
.btn--primary:hover { --fill: 0; color: var(--brand-accent); }

.btn--deep {
  --btn-fill: var(--brand-deep);
  --fill: 1;
  --fill-origin: right;
  border-color: var(--brand-deep);
  color: #fff;
}
.btn--deep:hover { --fill: 0; color: var(--brand-deep); }

.btn--light {
  --btn-fill: #fff;
  --fill: 1;
  --fill-origin: right;
  border-color: #fff;
  color: var(--text-primary);
}
.btn--light:hover { --fill: 0; color: #fff; }

/* Outline → filled: the fill arrives from the left */
.btn--outline {
  --btn-fill: var(--s-fg);
  --fill: 0;
  --fill-origin: left;
  border-color: var(--s-line-strong);
  color: var(--s-fg);
}
.btn--outline:hover { --fill: 1; border-color: var(--s-fg); color: var(--s-bg); }

.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 11px 22px; font-size: .8rem; gap: 12px; }

/* Editorial text link — underline wipes out then back in */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  padding-bottom: 4px;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transition: transform var(--dur-button) var(--ease-editorial);
}
.text-link:hover::after { transform: scaleX(0); }
.text-link .icon { transition: transform var(--dur-button) var(--ease-editorial); }
.text-link:hover .icon { transform: translateX(5px); }

/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .45s var(--ease-editorial),
              color .45s var(--ease-editorial),
              border-color .45s var(--ease-editorial),
              transform .6s var(--ease-editorial),
              backdrop-filter .45s var(--ease-editorial);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 180%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent);
  opacity: 1;
  pointer-events: none;
  transition: opacity .45s var(--ease-editorial);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--border-dark);
  color: var(--text-primary);
}
.site-header.is-scrolled::before { opacity: 0; }

/* ---------- Pages that open on a light hero ----------
   The header defaults to white-over-a-dark-hero. On a page whose first section
   is light that renders white-on-white, so these pages carry .page-light-top
   and the header adopts its dark palette while still transparent. */
.page-light-top .site-header:not(.is-scrolled) { color: var(--text-primary); }
.page-light-top .site-header:not(.is-scrolled)::before { opacity: 0; }
body.page-light-top:not(.nav-open) .site-header:not(.is-scrolled) .brand img { filter: none; }
.page-light-top .site-header:not(.is-scrolled) .header-actions .btn--outline {
  --btn-fill: var(--text-primary);
  color: var(--text-primary);
  border-color: var(--border-dark-strong);
}
.page-light-top .site-header:not(.is-scrolled) .header-actions .btn--outline:hover {
  color: #fff;
  border-color: var(--text-primary);
}


/* Hide on scroll down, reveal on scroll up */
.site-header.is-hidden { transform: translateY(-102%); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-h);
  transition: min-height .45s var(--ease-editorial);
}
.is-scrolled .site-header__inner { min-height: var(--header-h-scrolled); }

.brand {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  z-index: 2;
}
.brand img {
  width: 104px;
  height: auto;
  transition: filter .45s var(--ease-editorial), width .45s var(--ease-editorial);
}
/* The brand mark is red on transparent — invert to white over the hero */
.site-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }
.is-scrolled .brand img { width: 94px; }

/* Desktop bar */
.nav { margin-left: auto; margin-right: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0; padding: 0;
  list-style: none;
}
.nav__item { position: relative; display: flex; align-items: center; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 15px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .005em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-micro) var(--ease-soft);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 6px;
  height: 2px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-button) var(--ease-editorial);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__item.is-current > .nav__link::after,
.nav__item.is-open > .nav__link::after { transform: scaleX(1); }
.nav__link:hover { color: inherit; }

.nav__link .icon {
  font-size: 8px;
  opacity: .55;
  transition: transform var(--dur-button) var(--ease-editorial);
}
.nav__item.is-open > .nav__link .icon,
.nav__item:hover > .nav__link .icon { transform: rotate(180deg); }

/* Dropdown panels */
.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 272px;
  margin: 0;
  padding: 14px;
  list-style: none;
  color: var(--text-primary);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-panel);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .12);
  transform: translate(-50%, 10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-editorial),
              transform .45s var(--ease-editorial),
              visibility .35s;
}
.nav__menu::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu,
.nav__item.is-open > .nav__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav__menu a {
  position: relative;
  display: block;
  padding: 10px 14px;
  font-size: .86rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-soft), padding-left var(--dur-button) var(--ease-editorial);
}
.nav__menu a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--brand-accent);
  transform: translateY(-50%);
  transition: width var(--dur-button) var(--ease-editorial);
}
.nav__menu a:hover, .nav__menu a[aria-current="page"] {
  color: var(--text-primary);
  padding-left: 26px;
}
.nav__menu a:hover::before, .nav__menu a[aria-current="page"]::before { width: 16px; }

/* Programmes mega panel — centred on the PAGE, not on its trigger. Anchoring it
   to the nav item pushes a 1140px panel off the left edge, since "Programmes"
   sits well left of centre. Making the item static re-anchors it to the header. */
.nav__item:has(> .nav__menu--mega) { position: static; }
.nav__menu--mega {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
  left: 50%;
  width: min(calc(100vw - var(--gutter) * 2), var(--shell-mid));
  padding: clamp(30px, 3vw, 46px);
}
/* Fallback for engines without :has() — keep the panel inside the viewport. */
@supports not selector(:has(*)) {
  .nav__menu--mega { width: min(94vw, var(--shell-mid)); }
}
.nav__menu--mega .mega__title {
  display: block;
  margin-bottom: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--brand-accent);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.nav__menu--mega ul { margin: 0; padding: 0; list-style: none; }
.nav__menu--mega a { padding: 7px 0; font-size: .84rem; }
.nav__menu--mega a:hover, .nav__menu--mega a[aria-current="page"] { padding-left: 22px; }

.header-actions { display: flex; gap: 10px; flex: none; align-items: center; }
.header-actions .btn { min-height: 42px; padding: 10px 20px; font-size: .78rem; gap: 10px; }
/* Over the hero both pills read on a dark photograph */
.site-header:not(.is-scrolled) .header-actions .btn--outline {
  --btn-fill: #fff;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.site-header:not(.is-scrolled) .header-actions .btn--outline:hover {
  border-color: #fff; color: var(--bg-dark);
}
.site-header.is-scrolled .header-actions .btn--outline {
  --btn-fill: var(--text-primary);
  color: var(--text-primary);
  border-color: var(--border-dark-strong);
}
.site-header.is-scrolled .header-actions .btn--outline:hover { color: #fff; border-color: var(--text-primary); }

/* Menu toggle — two rules that become a cross */
/* Bare rules, no ring. The outlined circle read as a third button next to Login
   and Apply Now; the mark alone is quieter and matches the hairline language
   used everywhere else. The 48px box stays for the tap target. */
.nav-toggle {
  display: none;
  position: relative;
  margin-left: auto;
  margin-right: -10px;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity var(--dur-button) var(--ease-soft);
}
.nav-toggle:hover { opacity: .7; }
.nav-toggle span:not(.sr-only) {
  display: block;
  width: 24px; height: 1.5px;
  margin: 4.5px 0 4.5px auto;
  background: currentColor;
  transition: transform .4s var(--ease-editorial), opacity .25s var(--ease-soft);
}
.nav-toggle span:first-of-type { margin-top: 0; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1280px) {
  .nav__link { padding-inline: 11px; font-size: .79rem; }
  .nav__link::after { left: 11px; right: 11px; }
  .header-actions .btn { padding-inline: 16px; }
}

/* ---------- Full-screen navigation layer ---------- */
@media (max-width: 1100px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    margin: 0;
    padding: calc(var(--header-h) + 28px) var(--gutter) clamp(48px, 10vh, 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #fff;
    background: var(--bg-deep);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .7s var(--ease-cinematic), visibility .7s;
  }
  .nav-open .nav { clip-path: inset(0); visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__item {
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    /* staggered entrance, driven by --i set in JS */
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease-editorial), transform .7s var(--ease-editorial);
    transition-delay: calc(var(--i, 0) * 45ms + 120ms);
  }
  .nav-open .nav__item { opacity: 1; transform: none; }

  .nav__link {
    justify-content: space-between;
    padding: 20px 2px;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6vw, 2.4rem);
    font-weight: 500;
    letter-spacing: -.03em;
  }
  .nav__link::after { display: none; }
  .nav__link .icon { font-size: 11px; opacity: .5; }

  .nav__menu, .nav__menu--mega {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    padding: 0 0 22px;
    color: #fff;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    grid-template-columns: 1fr;
  }
  /* The open/hover rules above are more specific than the block reset, so the
     desktop centring transform has to be cancelled on them explicitly. */
  .nav__item:hover > .nav__menu,
  .nav__item:focus-within > .nav__menu,
  .nav__item.is-open > .nav__menu { transform: none; opacity: 1; }
  .nav__item.is-open > .nav__menu { display: block; }
  .nav__item.is-open > .nav__menu--mega { display: grid; gap: var(--space-5); }

  .nav__menu--mega .mega__title {
    border-bottom-color: var(--brand-light);
    color: var(--brand-light);
  }
  .nav__menu a {
    padding: 9px 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, .74);
  }
  .nav__menu a:hover, .nav__menu a[aria-current="page"] { color: #fff; padding-left: 20px; }
  .nav__menu a::before { background: var(--brand-light); }

  .header-actions { display: none; }
  .nav .header-actions--mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: var(--space-8);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease-editorial) .45s, transform .7s var(--ease-editorial) .45s;
  }
  .nav-open .header-actions--mobile { opacity: 1; transform: none; }
  .header-actions--mobile .btn { min-height: 56px; justify-content: space-between; }
  /* The open menu is always dark, but the element carries .header-actions too,
     so a scrolled header's dark-on-light outline rule was still applying and
     painting Apply Now near-black on near-black. */
  .nav-open .header-actions--mobile .btn--outline {
    --btn-fill: #fff;
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
  }
  .nav-open .header-actions--mobile .btn--outline:hover { color: var(--bg-dark); border-color: #fff; }

  body.nav-open { overflow: hidden; }
  /* The menu layer is a DESCENDANT of the header, so the brand and the close
     control must be lifted above it inside the header's own stacking context. */
  .nav-open .brand, .nav-open .nav-toggle { z-index: calc(var(--z-menu) + 1); }
  .nav-open .site-header { color: #fff; background: transparent; backdrop-filter: none;
    -webkit-backdrop-filter: none; border-bottom-color: transparent; z-index: calc(var(--z-menu) + 1); }
  .nav-open .site-header::before { opacity: 0; }
  .nav-open .brand img { filter: brightness(0) invert(1); }
  .nav-open .site-header.is-hidden { transform: none; }
}
@media (min-width: 1101px) { .header-actions--mobile { display: none; } }

/* ==========================================================================
   8. FOOTER — the closing editorial chapter
   ========================================================================== */
.site-footer {
  /* The band above the divider was ~150px on top of the grid's own 64px, which
     read as a hole between the last section and the footer. */
  padding: clamp(40px, 4.4vw, 72px) 0 var(--space-8);
  background: var(--bg-deep);
  color: #fff;
  font-size: .84rem;
  line-height: 1.6;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .75fr 1fr 1fr 1fr;
  gap: clamp(36px, 3.4vw, 64px) clamp(28px, 2.6vw, 52px);
  padding-top: var(--space-7);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer-brand > * + * { margin-top: var(--space-5); }
/* The logo anchor is inline by default, so it takes no bottom margin — make it
   a block to open a gap before the social row. The value has to exceed the
   sibling's 24px top margin, since adjacent margins collapse to the larger. */
.footer-brand > a:first-child { display: inline-block; margin-bottom: var(--space-7); }
.footer-brand img.footer-logo { width: 132px; }

.site-footer h2 {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-light);
}

.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { display: flex; gap: 12px; align-items: flex-start; }
.footer-list li + li { margin-top: 13px; }
.footer-list .icon { margin-top: .42em; font-size: 11px; color: #fff; flex: none; }
.footer-list span { min-width: 0; }
.footer-list a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color var(--dur-micro) var(--ease-soft), background-size var(--dur-button) var(--ease-editorial);
}
.footer-list a:hover { color: #fff; background-size: 100% 1px; }

.app-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.app-badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-panel);
  background: transparent; color: #fff;
  text-decoration: none; line-height: 1.05;
  transition: border-color var(--dur-button) var(--ease-editorial), background var(--dur-button) var(--ease-editorial);
}
.app-badge img { height: 100%; width: auto; }
/* The App Store badge is a supplied raster with its own outline and corner
   radius baked into the artwork, which read differently from the Google Play
   badge beside it. It keeps the same shell as its sibling, and the artwork is
   scaled a little past the edge so the shell's border and radius are the ones
   you actually see — the baked frame is clipped away. */
.app-badge.app-badge--img { padding: 0; overflow: hidden; }
.app-badge--img img { transform: scale(1.07); }
.app-badge small { display: block; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.app-badge strong { display: block; font-size: .88rem; font-weight: 500; letter-spacing: -.01em; }
.app-badge svg { width: 18px; height: 20px; }
.app-badge:hover { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .05); }

.footer-bottom {
  margin-top: clamp(32px, 3.2vw, 56px);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-size: var(--text-small);
  letter-spacing: .01em;
  text-align: center;
}
/* Studio credit. It keeps its underline rather than revealing one on hover:
   it sits mid-sentence in text of the same colour, so without the rule there
   is nothing but the pointer to say it is a link. */
.footer-bottom a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color var(--dur-micro) var(--ease-soft);
}
.footer-bottom a:hover { color: #fff; }

@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* One column already separates the footer from what precedes it — the desktop
     lead-in of up to 150px plus another 64px above the rule was dead space. */
  .site-footer { padding-top: 40px; }
  .footer-grid { padding-top: var(--space-5); }
}

/* Social */
.social { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--s-line);
  border-radius: var(--radius-pill);
  color: var(--s-fg);
  transition: background var(--dur-button) var(--ease-editorial),
              color var(--dur-button) var(--ease-editorial),
              border-color var(--dur-button) var(--ease-editorial);
}
.social a:hover { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.social .icon { font-size: 15px; }
.site-footer .social a { border-color: rgba(255, 255, 255, .2); color: #fff; }
.site-footer .social a:hover { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.social--lg a { width: 64px; height: 64px; }
.social--lg .icon { font-size: 20px; }

/* ==========================================================================
   9. PAGE HERO — oversized title, deep negative space, cinematic media
   ========================================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 82svh, 840px);
  padding: calc(var(--header-h) + clamp(90px, 14vh, 180px)) 0 clamp(64px, 8vw, 124px);
  color: #fff;
  background-color: #0c0c0c;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
  overflow: hidden;
}
/* Background image is set per page inline so the path stays page-relative */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0; z-index: -1;
  background: rgba(8, 8, 8, var(--overlay, .5));
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(8, 8, 8, .5) 0%, transparent 34%),
    /* Every page hero is followed by a .section--dark, so the bottom edge lands
       solid on --bg-dark and the seam disappears. The falloff still carries far
       enough to hold the title legible over a bright frame. */
    linear-gradient(to top, #101010 0%, rgba(16, 16, 16, .86) 5%, rgba(16, 16, 16, .5) 18%, rgba(16, 16, 16, .2) 34%, transparent 52%);
}
.page-hero > .container { position: relative; width: 100%; }

/* Hero carrying a silent looping film instead of a still. The poster is also set
   as the section's background-image, so it stands in whenever the video is
   hidden, still loading or blocked. */
.page-hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__video { display: none; }
}

.page-hero__title {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
/* Programme pages read as a set, so their heroes are all the same height with
   the title on the same baseline. The measure is wide enough that the longest
   line still breaks to two, and two lines are reserved either way — otherwise a
   short title rides up and a long one pushes the whole section taller. */
.page-hero__title--wide {
  display: grid;
  align-content: end;
  max-width: 28ch;
  min-height: calc(2em * var(--lh-display));
  font-size: var(--text-h1);
}
.page-hero--short { min-height: clamp(420px, 62svh, 660px); }

/* Banner variant: no photograph, type carries it */
.page-hero--banner {
  min-height: 0;
  align-items: flex-end;
  padding: calc(var(--header-h) + clamp(96px, 16vh, 200px)) 0 clamp(64px, 8vw, 128px);
  background: var(--bg-deep);
}
.page-hero--banner::after { display: none; }
/* A banner carrying a film needs the height, and the bottom fade back: the flat
   banner drops both because it has nothing behind the type. */
.page-hero--banner.page-hero--video { min-height: clamp(520px, 82svh, 840px); }
.page-hero--banner.page-hero--video::after { display: block; }
.page-hero--banner .display { max-width: 18ch; }
.page-hero--banner .lead { color: rgba(255, 255, 255, .66); max-width: 52ch; }

/* A quiet scroll cue, drawn — not written */
.page-hero::after { pointer-events: none; }
.page-hero .container > * + * { margin-top: var(--space-6); }

/* Phones: the desktop hero ran to 82svh with ~180px of top padding, so a short
   title floated in a mostly empty frame. Roughly 40% shorter, and the title
   scales with the viewport instead of sitting on its clamp floor. */
@media (max-width: 600px) {
  .page-hero {
    min-height: 50svh;
    padding: calc(var(--header-h) + 28px) 0 40px;
  }
  .page-hero--banner { min-height: 0; padding: calc(var(--header-h) + 40px) 0 40px; }
  .page-hero--banner.page-hero--video { min-height: 50svh; }
  .page-hero__title {
    max-width: 14ch;
    font-size: clamp(2.9rem, 12vw, 4.4rem);
  }
  /* The reserved two-line block is a desktop concern — on a phone the titles
     are bottom-aligned anyway, and reserving space only adds dead height. */
  .page-hero__title--wide {
    min-height: 0;
    max-width: 20ch;
    font-size: clamp(2.1rem, 8.8vw, 3rem);
  }
  .page-hero--banner .display { max-width: 14ch; font-size: clamp(2.9rem, 12vw, 4.4rem); }
}

/* ==========================================================================
   10. COMPONENTS
   ========================================================================== */

/* ---------- Home: opening statement ---------- */
.home-intro {
  /* Deliberately NOT a stacking context: the film is lifted up behind this
     block, and the heading has to sit above the film. Giving .home-intro a
     z-index would trap .container inside its context and the film would cover
     the type. Static here, z-index on .container instead. */
  display: flex;
  align-items: flex-end;
  /* Exactly one screen. The film is lifted by this same 100svh, so the two
     cancel and the film's top edge lands on the intro's top edge rather than
     somewhere approximate. Any other unit here and the lift stops matching. */
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(72px, 12vh, 160px)) 0 clamp(72px, 10vh, 140px);
  background: var(--bg-deep);
  color: #fff;
}
.home-intro .container { position: relative; z-index: 3; width: 100%; }
.home-intro h1 {
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: -.05em;
  color: #fff;
}
.home-intro p {
  margin: var(--space-7) 0 0;
  font-family: var(--font-body);
  /* Larger than the shared --text-label eyebrow: this one sits under the biggest
     heading on the site, where the standard .69rem read as a caption. */
  font-size: clamp(.82rem, .66rem + .5vw, 1.06rem);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
/* The fold is one screen on every device, so the phone only needs its own
   padding and a taller headline — the desktop top padding would otherwise open
   a band of empty ground above a title already at its 3rem clamp floor.
   Placed after the base rules so it actually wins. */
@media (max-width: 600px) {
  .home-intro {
    padding: calc(var(--header-h) + 36px) 0 82px;
  }
  .home-intro h1 {
    max-width: 12ch;
    font-size: clamp(3.1rem, 13.5vw, 4.6rem);
  }
  .home-intro p { margin-top: var(--space-5); }
}

/* ---------- Home: campus film, full bleed ---------- */
/* The campus film is the one full-bleed asset that stays square-cornered: it has
   to butt against the dark sections above and below, and a rounded corner would
   cut a notch of page background into the frame. */
.hero-video {
  position: relative;
  z-index: 1;
  /* Full bleed. The film is lifted by exactly the height of .home-intro, so it
     fills the first screen and the heading sits on it rather than above it. It
     paints above the intro's dark ground (z-index 1) but below the heading
     (.home-intro .container is z-index 3). */
  margin-top: -100svh;
  width: 100%;
  height: 100svh;
  /* The poster sits on the box, not only on the <video>, so it covers the two
     cases the element's own poster attribute cannot: the first paint before
     the film has decoded, and reduced motion, where the film is removed
     outright and would otherwise leave a screen-high black rectangle. */
  background: #000 url("../img/heroes/hero-campus-poster.jpg") center / cover no-repeat;
  overflow: hidden;
  border-radius: 0;
  isolation: isolate;
}
/* The scrim. Two ramps on one layer, both in --bg-deep so they dissolve into
   the sections above and below rather than reading as grey haze.

   The heavy one runs from the bottom and is what makes the heading readable
   over whatever the footage happens to be doing: .96 at the very bottom edge,
   still .44 at mid-height, effectively clear by 85%. That weights the black
   into the lower half, where the type lives, and leaves the middle and top of
   the frame open.

   The light one runs from the top and only exists so the logo and the two
   header buttons never land on a bright frame.

   Eleven stops rather than three on the heavy ramp: across a full 100svh a
   three-stop gradient bands visibly on wide screens. */
.hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgb(8 8 8 / .96) 0%,
      rgb(8 8 8 / .92) 10%,
      rgb(8 8 8 / .85) 20%,
      rgb(8 8 8 / .74) 30%,
      rgb(8 8 8 / .60) 40%,
      rgb(8 8 8 / .44) 50%,
      rgb(8 8 8 / .29) 60%,
      rgb(8 8 8 / .17) 70%,
      rgb(8 8 8 / .08) 80%,
      rgb(8 8 8 / .025) 90%,
      rgb(8 8 8 / 0) 100%),
    linear-gradient(to bottom,
      rgb(8 8 8 / .55) 0%,
      rgb(8 8 8 / .32) 10%,
      rgb(8 8 8 / .16) 22%,
      rgb(8 8 8 / .06) 34%,
      rgb(8 8 8 / 0) 46%);
}
/* No edge treatment beyond the scrim: the film meets the section below on a
   clean line, dark against dark. */
/* Self-hosted like every other film on the site, so covering is object-fit's
   job rather than the over-sizing trick a cross-origin iframe forced on us.
   The slow settle from 1.06 to 1 is the only motion here. */
.hero-video__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform: scale(var(--film-scale, 1.06));
  transition: transform 2.2s var(--ease-cinematic);
}
.reveals-on .hero-video.is-visible .hero-video__film { --film-scale: 1; }
/* Decoration. Dropped outright under reduced motion — the poster stands in,
   and site.js removes the element so the file is never fetched. */
@media (prefers-reduced-motion: reduce) {
  .hero-video__film { display: none; }
}

/* ---------- Home: value strip — red icon over a label, no rules or numbering ---------- */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 44px);
  margin-top: clamp(56px, 7vw, 118px);
  padding: 0;
  list-style: none;
}
.feature-strip li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 0;
  font-size: .92rem;
  line-height: 1.32;
  letter-spacing: -.015em;
}
.feature-strip .icon {
  font-size: 26px;
  /* Deliberately the deep brand red, not the surface's lifted --s-accent: these
     sit near the eyebrows on the white sections and the two reds must match. */
  color: var(--brand-accent);
  transition: transform var(--dur-button) var(--ease-editorial);
}
.feature-strip li:hover .icon { transform: translateY(-3px); }
@media (max-width: 1100px) { .feature-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .feature-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Home: programme index ---------- */
.programme-list { margin: clamp(36px, 4vw, 64px) 0 0; padding: 0; list-style: none; }
.programme-list li { border-top: 1px solid var(--s-line); }
.programme-list li:last-child { border-bottom: 1px solid var(--s-line); }
.programme-list a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px var(--space-7);
  padding: clamp(22px, 2.2vw, 34px) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--dur-button) var(--ease-editorial);
}
.programme-list a::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: var(--s-panel);
  opacity: 0;
  transform: scaleY(.4);
  transform-origin: center;
  transition: opacity var(--dur-button) var(--ease-editorial), transform var(--dur-button) var(--ease-editorial);
}
.programme-list a:hover { padding-left: clamp(14px, 1.6vw, 28px); }
.programme-list a:hover::before { opacity: 1; transform: scaleY(1); }
.programme-list a > * { position: relative; }
/* Which levels the category is offered at, above the title */
.programme-list__level {
  grid-column: 1;
  margin-bottom: 2px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s-accent);
}
.programme-list h3 {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--s-fg);
}
.programme-list p {
  grid-column: 1;
  margin: 0;
  max-width: 62ch;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--s-fg-soft);
}
.programme-list .icon {
  /* three rows now: level label, title, description */
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
  font-size: 15px;
  color: var(--s-fg-mute);
  transition: transform var(--dur-button) var(--ease-editorial), color var(--dur-button) var(--ease-editorial);
}
.programme-list a:hover .icon { transform: translateX(7px); color: var(--s-accent); }
.programme-list a:hover h3 { color: var(--s-accent); }

/* ---------- Media frames ---------- */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--bg-muted);
}
/* Video as well as stills: Why Study in Dubai frames a silent campus film in
   the same plate the image pages use, and it has to crop identically. */
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame--tall { aspect-ratio: 4 / 5; }
@media (min-width: 1101px) { .media-frame--tall { aspect-ratio: 3 / 4; } }

/* ---------- Testimonials ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 18px);
  margin-top: clamp(48px, 5vw, 88px);
}
/* A plain four-column gallery: every card the same 4:5 portrait, no spans and
   no mosaic. Twelve cards divide into three full rows with no orphans.
   This replaced an earlier mosaic where the opening and closing pairs ran
   double-width at 16:10 — it read as masonry and made the set look uneven. */
@media (max-width: 1100px) {
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Stay two-up on a phone. One card per row turned twelve stories into an
   enormous scroll; a uniform pair reads as a set and costs half the height. */
@media (max-width: 600px) {
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.video-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-media);
  aspect-ratio: 4 / 5;
  background: #111;
  cursor: pointer;
}
.video-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-editorial), opacity var(--dur-button) var(--ease-soft);
}
.video-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, .55), transparent 55%);
  opacity: .8;
  transition: opacity var(--dur-button) var(--ease-soft);
}
.video-card:hover img { transform: scale(1.045); }
.video-card:hover::after { opacity: 1; }

.play-badge { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.play-badge span {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-button) var(--ease-editorial),
              transform var(--dur-button) var(--ease-editorial),
              border-color var(--dur-button) var(--ease-editorial);
}
.video-card:hover .play-badge span,
.video-embed:hover .play-badge span {
  background: #fff; color: var(--bg-dark); border-color: #fff; transform: scale(1.06);
}

/* Click-to-load video facade */
.video-embed {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background-color: #111;
  background-position: center;
  background-size: cover;
  cursor: pointer;
}
.video-embed .play-badge span { width: 84px; height: 84px; font-size: 19px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* While the silent preview is running the iframe must not swallow the click —
   the button underneath is what swaps in the real player. */
.video-embed.is-ambient iframe { pointer-events: none; }
.video-embed.is-ambient::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, .45), transparent 60%);
  pointer-events: none;
}
.video-embed.is-playing .play-badge { display: none; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  padding: clamp(28px, 3vw, 46px);
  border: 1px solid var(--s-line);
  border-radius: var(--radius-panel);
  background: transparent;
  color: var(--s-fg);
}
.card--dark { --s-bg: var(--bg-dark); --s-fg: #fff; background: var(--bg-dark); color: #fff; }
.card--line { border: 1px solid var(--s-line); background: transparent; }

/* "Why choose" style blocks — bordered editorial cells, not floating cards */
.icon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: clamp(30px, 3vw, 46px) clamp(24px, 2.2vw, 38px) clamp(36px, 3.4vw, 54px);
  border: 1px solid var(--s-line);
  border-radius: var(--radius-panel);
  background: transparent;
  text-align: left;
  overflow: hidden;
  transition: border-color var(--dur-button) var(--ease-editorial);
}
.icon-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  /* Deep brand red rather than the surface's lifted --s-accent, so the card
     accents match the red used everywhere else. */
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease-editorial);
}
.icon-card:hover { border-color: var(--s-line-strong); }
.icon-card:hover::before { transform: scaleX(1); }
.icon-card__icon {
  display: grid;
  place-items: start;
  border: 0;
  background: transparent;
  color: var(--brand-accent);
  font-size: 30px;
  transition: transform var(--dur-button) var(--ease-editorial);
}
.icon-card:hover .icon-card__icon { transform: translateY(-3px); }
.icon-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--s-fg);
}
.icon-card p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--s-fg-soft); }

/* ---------- Icon list ---------- */
.icon-list { margin: 0; padding: 0; list-style: none; }
.icon-list li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--s-line);
  color: var(--s-fg-soft);
}
.icon-list li:last-child { border-bottom: 1px solid var(--s-line); }
.icon-list .icon { margin-top: .42em; font-size: 11px; color: var(--s-accent); }
.icon-list strong { color: var(--s-fg); }
.icon-list--lg { font-size: var(--text-body-lg); }

/* ---------- Feature rows (About: Who We Are / Vision / Mission / Values) ---------- */
.feature-row .split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(28px, 5vw, 110px);
}
.feature-row__title {
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--space-7));
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--s-fg);
}
.feature-row__body {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--s-fg-soft);
  max-width: 58ch;
}
.feature-row__body > * + * { margin-top: var(--space-6); }
@media (max-width: 1100px) {
  .feature-row .split { grid-template-columns: 1fr; }
  .feature-row__title { position: static; }
}

/* Values — numbered editorial rows */
.values-list { margin: 0; padding: 0; list-style: none; counter-reset: value; }
/* Block, not grid: each item is "<strong>Label:</strong> description text", and
   under grid the bare text node became a third grid item — it dropped to the
   next row into the 3.2rem number column and broke mid-word. The number sits in
   a padding gutter instead, so the label and its description flow as one block
   across the full column width. */
.values-list li {
  counter-increment: value;
  position: relative;
  padding: var(--space-6) 0 var(--space-6) 3.6rem;
  border-top: 1px solid var(--s-line);
}
.values-list li:last-child { border-bottom: 1px solid var(--s-line); }
.values-list li::before {
  content: "0" counter(value);
  position: absolute;
  left: 0;
  top: calc(var(--space-6) + .55em);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  color: var(--s-accent);
}
.values-list strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--s-fg);
}

/* ---------- Accreditation marquee — monochrome until hovered ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  margin-top: clamp(48px, 5vw, 90px);
  padding-block: var(--space-6);
  border-top: 1px solid var(--s-line);
  border-bottom: 1px solid var(--s-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(30px, 3vw, 54px);
  width: max-content;
  animation: marquee 135s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Logos run in their own colours. The previous grayscale+contrast filter was
   also what tinted each logo's white JPEG backdrop into a visible grey box. */
.marquee img {
  width: clamp(76px, 6vw, 104px);
  height: clamp(76px, 6vw, 104px);
  object-fit: contain;
  transition: transform var(--dur-button) var(--ease-editorial);
}
.marquee img:hover { transform: scale(1.06); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Contact channels ---------- */
/* Each channel is its own rounded card — no dividing rules. */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
  margin-top: clamp(48px, 5vw, 88px);
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: clamp(26px, 2.4vw, 38px);
  border: 1px solid var(--s-line);
  border-radius: var(--radius-panel);
  background: var(--s-panel);
  color: var(--s-fg);
  transition: border-color var(--dur-button) var(--ease-editorial),
              transform var(--dur-button) var(--ease-editorial);
}
.contact-card:hover { border-color: var(--s-line-strong); transform: translateY(-3px); }
.contact-card__icon {
  display: grid;
  place-items: start;
  margin-bottom: var(--space-3);
  border: 0;
  background: transparent;
  font-size: 28px;
  color: var(--s-accent);
  transition: transform var(--dur-button) var(--ease-editorial);
}
.contact-card:hover .contact-card__icon { transform: translateY(-3px); }
.contact-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -.028em;
}
.contact-card p { margin: 0; color: var(--s-fg-soft); font-size: .88rem; }
.contact-card a {
  color: var(--s-fg);
  font-weight: 400;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-button) var(--ease-editorial);
}
.contact-card a:hover { background-size: 100% 1px; }
@media (max-width: 1100px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .contact-cards { grid-template-columns: 1fr; } }

.map-embed {
  display: block;
  width: 100%;
  height: clamp(380px, 58vh, 660px);
  border: 0;
  border-radius: var(--radius-media);
  filter: grayscale(1) contrast(1.05);
  transition: filter .8s var(--ease-editorial);
}
.map-embed:hover { filter: grayscale(0); }

.accent-rule { width: 40px; height: 1px; background: var(--s-accent); }

/* ---------- Help / notes panel ---------- */
.help-card {
  padding: clamp(30px, 3vw, 48px);
  border: 1px solid var(--s-line);
  border-radius: var(--radius-panel);
  background: transparent;
  color: var(--s-fg);
}
.help-card h2 {
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--s-fg);
}
.help-card dl { margin: 0 0 var(--space-6); }
.help-card dt {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s-fg-mute);
}
.help-card dd {
  margin: 6px 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--s-line);
  font-size: var(--text-body-lg);
  letter-spacing: -.015em;
}
.help-card dd:last-of-type { border-bottom: 0; }
.help-card dd a { text-decoration: none; }
.help-card dd a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Admissions steps — numbered timeline ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Tighter than it was: each step now carries its own padded box, so the old
     wide gutters were doing a job the containers do better. */
  gap: clamp(16px, 1.6vw, 26px);
  margin: clamp(56px, 6vw, 104px) 0 0;
  padding: 0;
  list-style: none;
}
/* No counter here: the step headings already carry their own "01."/"02." —
   a decorative numeral would print the number twice. */
.step {
  position: relative;
  padding: clamp(28px, 2.6vw, 40px) clamp(24px, 2.2vw, 34px) clamp(30px, 2.8vw, 42px);
  border: 1px solid var(--s-line);
  border-radius: var(--radius-panel);
  background: transparent;
}
.step__icon {
  display: grid;
  place-items: start;
  margin-bottom: var(--space-5);
  border: 0;
  background: transparent;
  color: var(--s-accent);
  font-size: 30px;
}
.step h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--s-fg);
}
.step p, .step li { color: var(--s-fg-soft); font-size: .92rem; line-height: 1.55; }
.step ul { margin: .6em 0 0; padding-left: 1.05em; }
/* Four-up variant. Admissions has three steps and fills the row; Why Study in
   Dubai has four, which in the three-column grid leaves a single orphan on its
   own line. Same boxes, one more column. */
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .steps { grid-template-columns: 1fr; }
  /* Four short labels still pair up comfortably at tablet width, where three
     long ones did not. */
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .steps--4 { grid-template-columns: 1fr; }
}

/* ---------- Info blocks (two-column text pages) ---------- */
.info-block > * + * { margin-top: var(--space-5); }
.info-block h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.032em;
  color: var(--s-fg);
}
.info-block h3 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -.026em;
  color: var(--s-fg);
}
.info-block .prose, .info-block .icon-list { font-size: var(--text-body); }

.note {
  padding: var(--space-5) var(--space-6);
  border: 0;
  border-left: 1px solid var(--s-accent);
  background: var(--s-panel);
  font-size: .92rem;
  color: var(--s-fg-soft);
}

/* ---------- Facilities — immersive alternating editorial rows ---------- */
.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px) clamp(20px, 2vw, 40px);
  margin-top: clamp(48px, 5vw, 90px);
}
/* Each facility is its own panel — a hairline outline rather than the single
   rule that used to sit above it. */
.facility {
  overflow: hidden;
  border: 1px solid var(--s-line);
  border-radius: var(--radius-panel);
  background: transparent;
  padding: clamp(14px, 1.1vw, 18px);
}
.facility img,
.facility__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-media);
  background: #111;
  transition: transform 1.1s var(--ease-editorial);
}
.facility:hover img,
.facility:hover .facility__media { transform: scale(1.035); }
.facility > a, .facility > figure { display: block; overflow: hidden; border-radius: var(--radius-media); }
.facility__body { padding: var(--space-5) var(--space-2) var(--space-2); }
.facility h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--s-fg);
}
.facility p, .facility li { font-size: .92rem; line-height: 1.55; color: var(--s-fg-soft); }
.facility ul { margin: 0; padding-left: 1.05em; }
.facility li::marker { color: var(--s-fg-mute); }
/* Every facility image is the same 4:3 crop so the headings below them line up
   across a row — mixed aspect ratios read as misalignment, not rhythm. */
@media (max-width: 1100px) { .facility-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .facility-grid { grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */
.gallery {
  columns: var(--gallery-cols, 3) 300px;
  column-gap: clamp(10px, 1.1vw, 20px);
  margin-top: clamp(40px, 4vw, 72px);
}
.gallery a {
  position: relative;
  display: block;
  margin-bottom: clamp(10px, 1.1vw, 20px);
  overflow: hidden;
  border-radius: var(--radius-media);
  break-inside: avoid;
  cursor: pointer;
  background: #111;
}
.gallery img {
  width: 100%;
  transition: transform 1.1s var(--ease-editorial), opacity var(--dur-button) var(--ease-soft);
}
.gallery a::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(8, 8, 8, .18);
  opacity: 0;
  transition: opacity var(--dur-button) var(--ease-soft);
}
.gallery a:hover img { transform: scale(1.04); }
.gallery a:hover::after { opacity: 1; }
.gallery--dense { --gallery-cols: 4; columns: 4 240px; }
/* The 240px/300px minimums collapse to a single column on a phone, which turns
   a long gallery into an endless scroll. Force two. */
@media (max-width: 600px) {
  .gallery, .gallery--dense { columns: 2 120px; column-gap: 8px; }
  .gallery a, .gallery__film { margin-bottom: 8px; }
}
/* Film tiles share the masonry flow with the photographs. They carry no
   lightbox — the clip simply plays in place, silent and looping. */
.gallery__film {
  display: block;
  width: 100%;
  margin-bottom: clamp(10px, 1.1vw, 20px);
  overflow: hidden;
  border-radius: var(--radius-media);
  break-inside: avoid;
  background: #111;
}
@media (prefers-reduced-motion: reduce) {
  .gallery__film { content-visibility: auto; }
}

/* ---------- Team ---------- */
.team-member .split {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.team-member__photo {
  overflow: hidden;
  /* A hairline so the plate always has an edge. Several portraits are cut out
     on white, and on a --white section those bleed into the page with no
     boundary at all — the frame simply disappears. --s-line rather than a
     literal colour so it reads as a dark hairline on the light sections and a
     light one on the dark sections, at the same weight either way. */
  border: 1px solid var(--s-line);
  border-radius: var(--radius-media);
  aspect-ratio: 4 / 5;
  background: var(--s-panel);
}
.team-member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  /* Black and white, permanently. The portraits arrive from a dozen different
     cameras, backdrops and white balances; desaturating them is what makes the
     page read as one set rather than a pile of submissions. There used to be a
     grayscale(0) on hover that returned each one to colour, which undid exactly
     that — so the filter no longer transitions, only the scale does. */
  filter: grayscale(1) contrast(1.02);
  transition: transform 1.2s var(--ease-editorial);
}
.team-member:hover .team-member__photo img { transform: scale(1.025); }
.team-member__photo--placeholder {
  display: grid; place-items: center;
  border: 1px solid var(--s-line);
  background: var(--s-panel);
  color: var(--s-fg-mute);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 6rem);
  font-weight: 500;
  letter-spacing: -.03em;
}
.team-member__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--s-fg);
}
.team-member__role {
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s-accent);
}
.team-member__creds {
  margin-top: var(--space-4);
  font-size: .88rem;
  color: var(--s-fg-soft);
}
.team-member__bio {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--s-line);
  font-size: .95rem;
  line-height: 1.62;
  color: var(--s-fg-soft);
  max-width: 68ch;
}
@media (max-width: 900px) {
  .team-member .split { grid-template-columns: 1fr; }
  .team-member__photo { max-width: 420px; }
}

/* ---------- FAQ accordion ---------- */
.faq-groups { display: grid; gap: clamp(48px, 5vw, 96px); }
.faq-group {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-6) clamp(32px, 5vw, 96px);
  padding: clamp(36px, 4vw, 64px) 0 0;
  border-top: 1px solid var(--s-line);
  border-radius: 0;
  background: transparent;
}
.faq-group h2 {
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--space-7));
  align-self: start;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--s-fg);
}
@media (max-width: 900px) {
  .faq-group { grid-template-columns: 1fr; }
  .faq-group h2 { position: static; }
}

.accordion details { border-bottom: 1px solid var(--s-line); }
.accordion details:first-child { border-top: 1px solid var(--s-line); }
.accordion summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--s-fg);
  transition: color var(--dur-micro) var(--ease-soft);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--s-fg); opacity: .72; }
.accordion summary::after {
  content: "";
  flex: none;
  position: relative;
  width: 13px; height: 13px;
  margin-top: .42em;
  color: var(--s-accent);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform .45s var(--ease-editorial);
}
.accordion details[open] summary::after { transform: rotate(135deg); }
.accordion .accordion__body {
  padding: 0 0 var(--space-6);
  max-width: 68ch;
  color: var(--s-fg-soft);
  font-size: .94rem;
  line-height: 1.62;
}
/* The answer always fades up; height only animates where the browser can
   actually interpolate to auto, so an unsupported engine still shows content. */
.accordion .accordion__body {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .45s var(--ease-editorial), transform .45s var(--ease-editorial);
}
.accordion details[open] .accordion__body { opacity: 1; transform: none; }

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .accordion details::details-content {
    height: 0;
    overflow: clip;
    transition: height .5s var(--ease-editorial), content-visibility .5s allow-discrete;
  }
  .accordion details[open]::details-content { height: auto; }
}

/* ==========================================================================
   11. PROGRAMME PAGES
   ========================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s-fg-mute);
}
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--s-accent); }
.breadcrumb a { color: inherit; text-decoration: none; transition: color var(--dur-micro) var(--ease-soft); }
.breadcrumb a:hover { color: var(--s-fg); }
.breadcrumb [aria-current="page"] { color: var(--s-fg-soft); }

.course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(36px, 6vw, 112px);
  align-items: start;
}
/* Grid items default to min-width:auto, which lets the sticky nav's scroller
   push the whole column — and the page — wider than the viewport. */
.course > * { min-width: 0; }
.course__title {
  margin-bottom: clamp(44px, 5vw, 88px);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--s-fg);
  max-width: 16ch;
}

/* Section rhythm: alternating layouts, identical semantic order */
.course__section {
  padding: clamp(44px, 5vw, 88px) 0;
  border-top: 1px solid var(--s-line);
  scroll-margin-top: calc(var(--header-h-scrolled) + 32px);
}
.course__section:first-of-type { border-top: 0; padding-top: 0; }
.course__section h2 {
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--s-fg);
}
.course__section .prose {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  letter-spacing: -.015em;
  max-width: 64ch;
}
.course__section .btn { margin-top: var(--space-6); }

/* Wide two-column treatment on the long-form sections, from the 3rd onward */
@media (min-width: 1200px) {
  .course__section:nth-of-type(n+3) {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(24px, 3vw, 72px);
    align-items: start;
  }
  .course__section:nth-of-type(n+3) > h2 {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--space-7));
    margin-bottom: 0;
  }
  .course__section:nth-of-type(n+3) > *:not(h2) { grid-column: 2; }
}

.course__figure {
  margin: var(--space-7) 0 0;
  overflow: hidden;
  border-radius: var(--radius-media);
}
.course__figure img { width: 100%; transition: transform 1.2s var(--ease-editorial); }
.course__figure:hover img { transform: scale(1.03); }

/* Sticky rail */
.course__aside {
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--space-6));
  display: grid;
  gap: var(--space-5);
}
.course-nav {
  padding: 0 0 var(--space-5);
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--s-line);
}
.course-nav ul { margin: 0; padding: 0; list-style: none; }
.course-nav a {
  position: relative;
  display: block;
  padding: 8px 0 8px 18px;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--s-fg-mute);
  text-decoration: none;
  transition: color var(--dur-button) var(--ease-editorial), padding-left var(--dur-button) var(--ease-editorial);
}
.course-nav a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: currentColor;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-button) var(--ease-editorial);
}
.course-nav a:hover { color: var(--s-fg-soft); }
.course-nav a.is-active { color: var(--s-accent); padding-left: 26px; }
.course-nav a.is-active::before { transform: translateY(-50%) scaleX(2); }

.aside-card {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--s-line);
  border-radius: 0;
  background: transparent;
  color: var(--s-fg);
  font-family: var(--font-body);
}
.aside-card h2 {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s-fg-mute);
}
.aside-card p { font-size: .86rem; line-height: 1.55; color: var(--s-fg-soft); }
.aside-card a {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: var(--space-3);
  font-size: .86rem;
  color: var(--s-fg);
  text-decoration: none;
  transition: opacity var(--dur-micro) var(--ease-soft);
}
.aside-card a:hover { opacity: .65; }
.aside-card .icon { color: var(--s-fg-mute); font-size: 12px; }
.aside-card--brand { border-top-color: var(--s-accent); }
.aside-card--brand h2 { color: var(--s-accent); }
.aside-card--brand p { color: var(--s-fg-soft); font-family: var(--font-body); }
.aside-card--brand a { display: inline; color: var(--s-fg); text-decoration: underline; text-underline-offset: 4px; }
.aside-card--brand .aside-card__mark { display: none; }

@media (max-width: 1200px) {
  .course { grid-template-columns: minmax(0, 1fr); }
  .course__aside { position: static; }
}

/* On-page nav becomes a sticky horizontal rail once JS relocates it (mobile) */
.course-nav.is-inline {
  position: sticky;
  /* Hard against the viewport top, not under the header's resting height: the
     header hides on scroll-down, and a 68px offset then left the rail sitting
     in mid-air with page content running above it. The header out-ranks it on
     z-index, so it simply slides over when it comes back. */
  top: 0;
  z-index: 20;
  /* Stays inside the container: a full-bleed negative margin here would push
     past the shell and give the page a horizontal scrollbar. */
  margin: 0 0 var(--space-7);
  padding: var(--space-3) 0;
  background: var(--s-bg);
  border-top: 1px solid var(--s-line);
  border-bottom: 1px solid var(--s-line);
}
.course-nav.is-inline ul {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.course-nav.is-inline ul::-webkit-scrollbar { display: none; }
.course-nav.is-inline li { flex: none; scroll-snap-align: start; }
.course-nav.is-inline a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  white-space: nowrap;
}
.course-nav.is-inline a::before { display: none; }
.course-nav.is-inline a.is-active { padding-left: 0; border-bottom: 1px solid currentColor; }

/* ==========================================================================
   12. FORMS — large type, hairline fields, generous spacing
   ========================================================================== */
/* The panel reads as a single card: hairline border, rounded, generously padded.
   color-scheme makes the native date picker and its calendar icon render dark
   instead of dropping a white widget into the form. */
/* A light island, whatever section it lands in.
   It used to inherit the section's surface, so on the dark pages it was a dark
   panel — which worked with our own labels, but MetForm ships its own near-black
   label colour and WordPress renders them unreadable against it. Re-declaring
   the light surface here fixes both at once: our labels keep following --s-fg,
   and MetForm's hard-coded dark text lands on the white it always assumed. */
.form-panel {
  --s-bg: #fff;
  --s-fg: var(--text-primary);
  --s-fg-soft: var(--text-secondary);
  --s-fg-mute: var(--text-muted);
  --s-line: var(--border-dark);
  --s-line-strong: var(--border-dark-strong);
  --s-accent: var(--brand-accent);
  --s-panel: rgba(17, 17, 17, .035);
  padding: clamp(26px, 3.2vw, 56px);
  border: 1px solid var(--s-line-strong);
  border-radius: var(--radius-panel);
  background: #fff;
  color: var(--s-fg);
  color-scheme: light;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 3vw, 46px) clamp(24px, 2.4vw, 44px);
}
.field { display: flex; flex-direction: column; gap: var(--space-3); grid-column: 1 / -1; }
.field--half, .field--third { grid-column: span 1; }
.form--files { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field > label, .field > legend {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s-fg);
}
/* Choice and consent labels are read as sentences, not as field names. */
.field label.choice, .choices label {
  font-size: .94rem;
  font-weight: 400;
  letter-spacing: var(--ls-body);
  text-transform: none;
  color: var(--s-fg);
}
.field .req { color: var(--s-accent); }
.field .hint {
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-fg-soft);
}

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field select, .field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--s-line);
  border-bottom-color: var(--s-line-strong);
  border-radius: calc(var(--radius-panel) - 6px);
  background: var(--s-panel);
  color: var(--s-fg);
  font: 400 var(--text-body-lg)/1.4 var(--font-body);
  letter-spacing: -.015em;
  transition: border-color var(--dur-button) var(--ease-editorial),
              background var(--dur-button) var(--ease-editorial);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--s-fg-mute); opacity: 1; }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--s-line-strong); }

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 22px center, right 16px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select option { color: var(--text-primary); background: #fff; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--s-fg);
  background: transparent;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 3px;
}

.field input[type="file"] {
  width: 100%;
  padding: var(--space-5);
  border: 1px dashed var(--s-line-strong);
  border-radius: calc(var(--radius-panel) - 6px);
  background: transparent;
  color: var(--s-fg-soft);
  font-size: .86rem;
  cursor: pointer;
  transition: border-color var(--dur-button) var(--ease-editorial);
}
.field input[type="file"]:hover { border-color: var(--s-fg); }
.field input[type="file"]::file-selector-button {
  margin-right: var(--space-4);
  padding: 10px 18px;
  border: 1px solid var(--s-accent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--s-fg);
  font: 500 .78rem var(--font-body);
  letter-spacing: .04em;
  cursor: pointer;
}

.field fieldset, fieldset.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 4px 0 0;
  font-size: .94rem;
  color: var(--s-fg);
  cursor: pointer;
}
/* Custom control so radios and checkboxes read on a dark panel — the native
   ones render as light chrome regardless of accent-color. */
.choice input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1px solid var(--s-line-strong);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-soft);
}
.choice input[type="checkbox"] { border-radius: 5px; }
.choice input::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: scale(0);
  background: var(--s-accent);
  transition: transform var(--dur-micro) var(--ease-editorial);
}
.choice input[type="checkbox"]::before { border-radius: 2px; }
.choice input:checked { border-color: var(--s-accent); }
.choice input:checked::before { transform: scale(1); }
.choice:hover input { border-color: var(--s-fg); }
.choice input:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 3px; }

/* --s-accent, not --brand-accent: the brand red is too dark to read as an
   error state against a near-black surface. */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea {
  border-color: var(--s-accent);
  background: rgba(255, 77, 99, .06);
}
.field.is-invalid input[type="file"] { border-color: var(--s-accent); }
.field__error { font-size: .78rem; color: var(--s-accent); }

.form__actions { grid-column: 1 / -1; margin-top: var(--space-5); }
.form__actions .btn { min-height: 58px; padding-inline: 34px; }
.form__status {
  grid-column: 1 / -1;
  padding: var(--space-5) var(--space-6);
  border: 1px solid currentColor;
  border-radius: calc(var(--radius-panel) - 6px);
  font-size: .92rem;
}
.form__status[data-state="success"] { color: #1c7a46; background: rgba(28, 122, 70, .07); }
.form__status[data-state="error"] { color: var(--brand-accent); background: rgba(197, 21, 50, .06); }
.form__status[data-state="pending"] { color: var(--s-fg-soft); background: var(--s-panel); }

.form-section-title {
  grid-column: 1 / -1;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--s-line);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s-accent);
}

@media (max-width: 700px) {
  .form, .form--files { grid-template-columns: 1fr; }
  .field--half, .field--third { grid-column: 1 / -1; }
  /* 16px minimum keeps iOS from zooming the viewport on focus */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* ==========================================================================
   13. LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: clamp(56px, 8vh, 88px) clamp(14px, 6vw, 90px);
  background: rgba(6, 6, 6, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease-editorial), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { max-width: 100%; max-height: 100%; }
.lightbox__stage img {
  max-width: min(1500px, 100%);
  max-height: calc(100svh - 150px);
  width: auto;
  margin: auto;
  border-radius: var(--radius-media);
  animation: lightbox-in .6s var(--ease-editorial) both;
}
.lightbox__stage iframe {
  width: min(1280px, 92vw);
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius-media);
}
@keyframes lightbox-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.lightbox button {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--dur-button) var(--ease-editorial),
              color var(--dur-button) var(--ease-editorial),
              border-color var(--dur-button) var(--ease-editorial);
}
.lightbox button:hover { background: #fff; color: #0a0a0a; border-color: #fff; }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .55);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
}
@media (max-width: 700px) {
  .lightbox { padding: 68px 12px 96px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
  .lightbox__count { bottom: 78px; }
}

/* ==========================================================================
   Carousel (accommodation)
   ========================================================================== */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: clamp(12px, 1.2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
  scroll-snap-align: start;
  border-radius: var(--radius-media);
  overflow: hidden;
}
.carousel__track img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ==========================================================================
   14. UTILITIES
   ========================================================================== */
.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: var(--space-5); }
.mt-md { margin-top: var(--space-6); }
.mt-lg { margin-top: var(--space-8); }
.maxw-sm { max-width: max(46ch, 30rem); }
/* `ch` resolves against the element's OWN font size, so 24ch is a good measure
   on a display heading but collapses to ~200px on a plain wrapper div that
   inherits body type — which was breaking "Accreditation" mid-word. The rem
   floor keeps containers readable while headings still get the tighter measure. */
.maxw-md { max-width: max(24ch, 44rem); }
.lead.maxw-md, p.maxw-md, .prose.maxw-md { max-width: 56ch; }
.center-x { margin-inline: auto; }
.rounded { border-radius: var(--radius-media); overflow: hidden; }
.white { color: #fff; }

/* ==========================================================================
   15. MOTION — one reveal family, applied sparingly

   Everything here is gated on `.reveals-on`, which site.js sets on <html>
   only when it has actually run AND motion is not reduced. Nothing is ever
   hidden by a stylesheet whose reveal script failed to load.
   ========================================================================== */
.reveals-on .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-type) var(--ease-editorial),
              transform var(--dur-type) var(--ease-editorial);
}
.reveals-on .reveal.is-visible { opacity: 1; transform: none; }

/* Major headings rise out of a mask. The padding/margin pair gives ascenders and
   descenders room, since tight display leading lets glyphs overflow the line box. */
.reveals-on .line-mask {
  display: block;
  overflow: hidden;
  padding: .14em 0 .18em;
  margin: -.14em 0 -.18em;
}
.reveals-on .line-mask > .line-mask__inner {
  display: block;
  transform: translateY(102%);
  transition: transform var(--dur-scene) var(--ease-cinematic);
}
.reveals-on .is-visible > .line-mask > .line-mask__inner,
.reveals-on .line-mask.is-visible > .line-mask__inner { transform: none; }

/* Images uncover, with a slow internal settle.
   The clip sits on the image, never the observed container — a clipped
   container reports zero intersection and could never trigger its own reveal. */
.reveals-on .media-reveal > img, .reveals-on .media-reveal > picture > img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
  transition: clip-path var(--dur-media) var(--ease-cinematic),
              transform 1.6s var(--ease-editorial);
}
.reveals-on .media-reveal.is-visible > img, .reveals-on .media-reveal.is-visible > picture > img {
  clip-path: inset(0);
  transform: none;
}

/* Grouped children arrive in sequence */
.reveals-on .reveal-group > * > .reveal,
.reveals-on .reveal-group .stagger-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-type) var(--ease-editorial),
              transform var(--dur-type) var(--ease-editorial);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.reveals-on .reveal-group.is-visible > * > .reveal,
.reveals-on .reveal-group.is-visible .stagger-item { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveals-on .reveal, .reveals-on .reveal-group .stagger-item, .reveals-on .reveal-group > * > .reveal {
    opacity: 1 !important; transform: none !important;
  }
  .reveals-on .media-reveal > img { clip-path: none !important; transform: none !important; }
  .reveals-on .line-mask > .line-mask__inner { transform: none !important; }
  .marquee__track { animation: none; }
  .site-header.is-hidden { transform: none; }
}