:root {
  /* Primary brand colours, Visual Identity V2 */
  --mint: #00C19F;
  --azure: #307FE2;
  --pumpkin: #EF6A00;
  --chocolate: #7D4016;

  /* Secondary / pastel neutrals */
  --sage: #D1E0D7;
  --lilac: #DDDAE8;
  --orchid: #F5DADF;
  --cloud: #F0EEE9;

  /* Digital surface shades */
  --surface-cloud-light: #F8F7F4;
  --surface-cloud: #F0EEE9;
  --surface-cloud-dark: #DFDBD4;
  --surface-chocolate-light: #C99468;
  --surface-chocolate: #7D4016;
  --surface-chocolate-dark: #3E1F0B;

  /* Ant Design derived scales (1 = lightest tint, 10 = deepest shade) */
  --mint-1: #E6FFF6;
  --mint-2: #9CF4D8;
  --mint-3: #6FE7C5;
  --mint-4: #46DBB5;
  --mint-5: #21CEA8;
  --mint-6: #00C19F;
  --mint-7: #009B84;
  --mint-8: #007467;
  --mint-9: #004E48;
  --mint-10: #002826;

  --azure-1: #F0F9FF;
  --azure-2: #D9EFFF;
  --azure-3: #B1DCFF;
  --azure-4: #86C3FB;
  --azure-5: #59A1EF;
  --azure-6: #307FE2;
  --azure-7: #1E60BC;
  --azure-8: #114496;
  --azure-9: #072B6F;
  --azure-10: #041A49;

  --pumpkin-1: #FFF5E6;
  --pumpkin-2: #FFD9A3;
  --pumpkin-3: #FFC37A;
  --pumpkin-4: #FFAB52;
  --pumpkin-5: #FC8E28;
  --pumpkin-6: #EF6A00;
  --pumpkin-7: #C95400;
  --pumpkin-8: #A23E00;
  --pumpkin-9: #7C2B00;
  --pumpkin-10: #561B00;

  /* Chocolate ramp is interpolated from the brand book's own
     Light / Base / Dark Chocolate shades - the Ant algorithm
     muddies tints and crushes shades on a base this dark. */
  --chocolate-1: #F2EBE3;
  --chocolate-2: #EBDBCD;
  --chocolate-3: #E0C6AE;
  --chocolate-4: #D4AC8A;
  --chocolate-5: #C99468;
  --chocolate-6: #A76E43;
  --chocolate-7: #7D4016;
  --chocolate-8: #643312;
  --chocolate-9: #50280E;
  --chocolate-10: #3E1F0B;

}

/* ==========================================================================
   SA Global Education - Visual Identity V2
   Type:   Barlow Condensed (display) · Lexend Deca (body)
   Colour: Ant Design scales derived from the V2 primaries
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--surface-cloud-light);
  color: var(--surface-chocolate-dark);
  font-family: "Lexend Deca", -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

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

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--surface-chocolate-dark); color: #fff;
  padding: .85rem 1.4rem; border-radius: 0 0 14px 0;
}
.skip-link:focus { left: 0; }

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3, h4, .display {
  font-family: "Barlow Condensed", "Lexend Deca", sans-serif;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1, .t-hero { font-size: clamp(3rem, 8.5vw, 6.75rem); }
h2, .t-1    { font-size: clamp(2.35rem, 5.4vw, 4.25rem); }
h3, .t-2    { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.02; }
h4, .t-3    { font-size: 1.25rem; line-height: 1.15; }

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

.eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.1rem;
  color: var(--azure-7);
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 2px;
  background: currentColor;
}

.lead {
  font-size: clamp(1.1rem, 1.55vw, 1.3rem);
  line-height: 1.55;
  font-weight: 350;
  max-width: 46ch;
}

/* Rhythm between an eyebrow, its heading and the body copy that follows.
   The eyebrow's own margin-bottom sets the eyebrow→heading gap; this rule
   sets an equal heading→body gap, so the two gaps read as one steady
   cadence rather than the heading and lead paragraph sitting flush. */
h1 + .lead, h2 + .lead, h3 + .lead, h4 + .lead { margin-top: 1.1rem; }

.muted { color: color-mix(in srgb, var(--surface-chocolate-dark) 68%, transparent); }

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, 82rem);
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2.5rem, 52rem); margin-inline: auto; }

section { position: relative; }
.band { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.band-tight { padding: clamp(3rem, 5vw, 4.5rem) 0; }

.band-cloud     { background: var(--surface-cloud); }
.band-sage      { background: var(--sage); }
.band-lilac     { background: var(--lilac); }
.band-orchid    { background: var(--orchid); }
.band-pumpkin   { background: var(--pumpkin); color: #fff; }
.band-azure     { background: var(--azure); color: #fff; }
.band-chocolate { background: var(--surface-chocolate-dark); color: var(--surface-cloud); }
.band-mint      { background: var(--mint); color: var(--surface-chocolate-dark); }

.band-pumpkin .eyebrow,
.band-azure .eyebrow,
.band-chocolate .eyebrow { color: currentColor; opacity: .75; }
.band-mint .eyebrow { color: var(--surface-chocolate); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }

.section-head { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.wide { max-width: 56rem; }

/* --- Brandmark motif ------------------------------------------------------
   The logo is built from squares with a single rounded corner. That shape
   is reused for imagery, cards and the decorative pattern below.
   -------------------------------------------------------------------------- */

.leaf   { border-radius: 0 clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 5vw, 4.5rem); overflow: hidden; }
.leaf-s { border-radius: 0 1.75rem 0 1.75rem; overflow: hidden; }
.leaf-r { border-radius: clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 5vw, 4.5rem) 0; overflow: hidden; }

.brandmark-bg {
  position: absolute;
  inset: auto 0 0 auto;
  width: clamp(8rem, 18vw, 16rem);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.brandmark-bg svg { display: block; width: 100%; height: auto; }

/* --- Brand panel: used wherever a real photograph isn't available or
   appropriate - a tinted surface with the actual logomark, in place of
   generic stock photography. --- */

.brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-cloud);
}
.brand-panel.bp-mint    { background: var(--mint-1); }
.brand-panel.bp-azure   { background: var(--azure-1); }
.brand-panel.bp-pumpkin { background: var(--pumpkin-1); }
.brand-panel.bp-sage    { background: var(--sage); }
.brand-panel.bp-lilac   { background: var(--lilac); }
.brand-panel svg { width: 46%; height: auto; position: relative; opacity: .55; }
.brand-panel.bp-mint svg    { color: var(--mint-7); }
.brand-panel.bp-azure svg   { color: var(--azure-7); }
.brand-panel.bp-pumpkin svg { color: var(--pumpkin-7); }
.brand-panel.bp-sage svg    { color: var(--chocolate); }
.brand-panel.bp-lilac svg   { color: var(--azure-7); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 0 1.25rem 0 1.25rem;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background .18s, color .18s, border-color .18s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn-primary { background: var(--azure); color: #fff; }
.btn-primary:hover { background: var(--azure-7); }

.btn-dark { background: var(--surface-chocolate-dark); color: var(--surface-cloud); }
.btn-dark:hover { background: var(--chocolate); }

.btn-mint { background: var(--mint); color: var(--surface-chocolate-dark); }
.btn-mint:hover { background: var(--mint-7); color: #fff; }

.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: currentColor; }
.band-chocolate .btn-ghost:hover,
.band-pumpkin  .btn-ghost:hover,
.band-azure    .btn-ghost:hover { color: var(--surface-chocolate-dark); }
.btn-ghost:hover span { color: var(--surface-cloud-light); }
.band-chocolate .btn-ghost:hover span,
.band-pumpkin  .btn-ghost:hover span,
.band-azure    .btn-ghost:hover span { color: inherit; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 1.05rem;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  color: var(--chocolate);
  border-bottom: 2px solid transparent;
  transition: border-color .18s, gap .18s;
}
.link-arrow:hover { border-color: currentColor; gap: .85rem; }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--surface-cloud-light) 96%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--surface-cloud-dark);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 1rem 0;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 2.15rem; width: auto; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .18s, color .18s;
}
.nav a:hover { border-color: var(--azure); }
.nav a[aria-current="page"] { color: var(--azure-7); border-color: var(--azure); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; color: inherit;
}
.nav-toggle svg { width: 1.6rem; height: 1.6rem; }

/* --- Hero ----------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; background: var(--surface-cloud-light); }
.hero-inner {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem);
}
.hero h1 { margin-bottom: 1.5rem; white-space: pre-line; }
.hero .lead { margin-bottom: 2.25rem; }

.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-cloud-dark);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 45%, color-mix(in srgb, var(--surface-chocolate-dark) 40%, transparent));
}

.hero-slide { display: none; }
.hero-slide.is-active { display: contents; }

.hero-dots {
  display: flex; gap: .6rem;
  margin-top: 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  justify-content: center;
}
.hero-dots button {
  width: 10px; height: 10px; border: 1.5px solid var(--surface-chocolate-dark);
  border-radius: 50%; padding: 0; cursor: pointer; background: transparent;
  opacity: .5;
  transition: background .2s, border-color .2s, opacity .2s, transform .2s;
}
.hero-dots button:hover { opacity: .85; }
.hero-dots button[aria-selected="true"] {
  background: var(--azure); border-color: var(--azure); opacity: 1;
  transform: scale(1.2);
}

/* --- Stats ---------------------------------------------------------------- */

.stat { padding: 2rem 0; border-top: 2px solid currentColor; }
.stat b {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3rem, 6vw, 4.75rem);
  font-weight: 700; line-height: .9;
  margin-bottom: .35rem;
}
.stat span { font-size: .95rem; letter-spacing: .04em; opacity: .8; }

/* --- Cards ---------------------------------------------------------------- */

.card {
  background: var(--surface-cloud-light);
  border: 1px solid var(--surface-cloud-dark);
  border-radius: 0 1.75rem 0 1.75rem;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, background .22s;
}
.card:hover { transform: translateY(-4px); border-color: var(--mint); }
.card h3 { text-wrap: balance; }
.card p { font-size: .98rem; }

.card-link { text-decoration: none; color: inherit; }

.icon {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 0 .9rem 0 .9rem;
  background: var(--mint);
  color: var(--surface-chocolate-dark);
  margin-bottom: .4rem;
  flex: none;
}
.icon svg { width: 1.45rem; height: 1.45rem; }
.icon-mint { background: var(--mint); color: var(--surface-chocolate-dark); }
.icon-azure { background: var(--azure); color: #fff; }
.icon-pumpkin { background: var(--pumpkin); color: #fff; }
.icon-chocolate { background: var(--chocolate); color: #fff; }

/* University logos on the Recommended cards: one fixed-height box so marks
   of very different shapes (Leicester's wide lockup, Sussex's tall stack)
   sit on a common baseline, left-aligned with the card text. */
.uni-logo {
  height: 4.25rem;
  margin-bottom: .75rem;
  display: flex; align-items: center;
  align-self: stretch;
}
.uni-logo img {
  height: 100%; width: auto;
  max-width: min(100%, 13rem);
  object-fit: contain; object-position: left center;
}
/* A wide horizontal lockup carries no internal whitespace, unlike the
   stacked crests, so it is held shorter to read at the same weight. */
.uni-logo--wide img { height: 66%; }

/* --- Steps ---------------------------------------------------------------- */

.step { position: relative; padding-top: 1.75rem; border-top: 2px solid currentColor; }
.step-n {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 700; line-height: .85;
  display: block; margin-bottom: .75rem;
  opacity: .28;
}
.step h3 { margin-bottom: .6rem; }

/* --- "How it works": horizontal scroll ------------------------------------
   Uses the same manual scroll-and-snap mechanism as the Destinations
   carousel below (a proven, robust pattern already on this site) rather
   than a scroll-timeline pin effect - that technique went through two
   rounds of hard-to-verify bugs (wrong timing, then wrong centring), and
   this environment has no way to visually test CSS scroll-timelines, so a
   mechanism that can be checked by reasoning about the code is the safer
   choice here. --------------------------------------------------------- */

/* Per-card scroll-linked entrance: each card slides in from its own side
   and settles into the normal static grid position. Previously this used
   CSS animation-timeline: view(), which turned out to be the real problem
   - that API isn't supported everywhere, and with no fallback animation
   at all, the whole effect simply didn't exist on an unsupporting browser
   ("completely gone" was literally true there, not just subtle). This now
   rides the same IntersectionObserver + CSS transition mechanism that
   already drives every plain .reveal fade-up on the site - universally
   supported, and already proven to work. The .slide-* classes only set a
   starting transform that's more specific than the base .reveal rule;
   .reveal.in (added by the existing JS the moment the element scrolls
   into view) resets it to transform:none, exactly like every other
   reveal. No new JS, no feature-detection, no distance maths to get
   wrong - the resting state is always the plain, already-correct layout. */
.reveal.slide-left  { transform: translateX(-3rem); }
.reveal.slide-right { transform: translateX(3rem); }
.reveal.slide-up    { transform: translateY(2.5rem); }
.reveal.slide-left.in, .reveal.slide-right.in, .reveal.slide-up.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  /* These are 2-class selectors, more specific than the site-wide
     ".reveal { transform:none }" reduced-motion reset below, so without
     this they'd win that fight and a not-yet-revealed element could sit
     offset indefinitely for a reduced-motion user. */
  .reveal.slide-left, .reveal.slide-right, .reveal.slide-up { transform: none !important; }
}

/* --- Destination tiles: horizontal scroll --------------------------------
   The one place on the site that scrolls sideways rather than down, so it
   reads as a deliberate change of pace rather than a broken grid. --------- */

.dest-scroll {
  position: relative;
  margin: 0 calc(-1 * (100vw - 100%) / 2) 0 0; /* let the row bleed to the viewport edge */
}
.dest-track {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: .25rem .25rem 1.5rem;
  margin: -.25rem -.25rem -1.5rem;
}
.dest-track::-webkit-scrollbar { display: none; }
.dest-track .dest {
  flex: 0 0 auto;
  width: clamp(15.5rem, 26vw, 19rem);
  scroll-snap-align: start;
}
.dest-nav {
  display: flex; gap: .6rem;
  margin-top: 1.5rem;
}
.dest-nav button {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--surface-cloud-dark);
  background: var(--surface-cloud-light);
  border-radius: 0 .8rem 0 .8rem;
  cursor: pointer;
  color: var(--chocolate);
  transition: background .18s, color .18s, border-color .18s;
}
.dest-nav button:hover { background: var(--azure); border-color: var(--azure); color: #fff; }
.dest-nav button svg { width: 1.1rem; height: 1.1rem; }
.dest-nav .prev svg { transform: rotate(180deg); }
.dest-nav button:disabled { opacity: .35; cursor: default; }
.dest-nav button:disabled:hover { background: var(--surface-cloud-light); color: var(--chocolate); border-color: var(--surface-cloud-dark); }

@media (max-width: 860px) {
  .dest-track .dest { width: 78vw; }
}

/* --- Destination tiles ---------------------------------------------------- */

.dest {
  position: relative; overflow: hidden;
  border-radius: 0 1.75rem 0 1.75rem;
  aspect-ratio: 3 / 4;
  text-decoration: none; color: #fff;
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.dest img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.dest::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--surface-chocolate-dark) 92%, transparent) 4%,
    color-mix(in srgb, var(--surface-chocolate-dark) 30%, transparent) 55%,
    transparent 85%);
}
.dest:hover img { transform: scale(1.06); }
.dest-body { padding: 1.6rem; }
.dest-body h3 { margin-bottom: .45rem; }
.dest-body p { font-size: .9rem; line-height: 1.5; opacity: .88; margin: 0; }

/* --- Scroll-driven zoom: the "Why SA Global" portrait --------------------
   Fixes the aspect-ratio/object-fit gap that was stretching this image, and
   zooms out to full size as the section scrolls into view. Previously this
   used animation-timeline: view(), same issue as the slide-ins above: no
   fallback, so on an unsupporting browser there was no zoom AND no way to
   tell anything was meant to happen there. The figure already carries
   .reveal (toggled by the same IntersectionObserver used everywhere else
   on the site), so the zoom now rides that instead - universally
   supported, same mechanism as the proven .reveal fade-ups. ------------- */

.why-figure { overflow: hidden; aspect-ratio: 4/5; }
/* Sticky only beside the text on wide screens; stacked on phones it would sit over the text. */
@media (min-width: 861px) { .why-figure { position: sticky; top: 7rem; } }
@media (max-width: 860px) { .why-figure { aspect-ratio: 4/3; } }
.why-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.18);
  transition: transform 1.1s cubic-bezier(.2,.8,.3,1);
}
.reveal.why-figure.in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .why-figure img { transform: scale(1) !important; transition: none !important; }
}

/* --- Lists ---------------------------------------------------------------- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ticks li { display: flex; gap: .85rem; align-items: flex-start; font-size: 1rem; }
.ticks li::before {
  content: ""; flex: none;
  width: .7rem; height: .7rem; margin-top: .55rem;
  background: var(--mint);
  border-radius: 0 .35rem 0 .35rem;
}
.ticks.on-dark li::before { background: var(--mint); }
.ticks.pumpkin li::before { background: var(--pumpkin); }
.ticks.azure li::before { background: var(--azure); }

/* --- Timeline ------------------------------------------------------------- */

.timeline { display: grid; gap: 0; }
.tl-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: 1.6rem 0;
  border-top: 1px solid var(--surface-cloud-dark);
  align-items: baseline;
}
.tl-row:last-child { border-bottom: 1px solid var(--surface-cloud-dark); }
.tl-year {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--azure);
}

/* --- Logo strip ----------------------------------------------------------- */

.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--surface-cloud-dark);
  border: 1px solid var(--surface-cloud-dark);
  border-radius: 0 1.75rem 0 1.75rem;
  overflow: hidden;
}
.logo-strip figure {
  margin: 0; padding: 1.75rem 1.25rem;
  background: var(--surface-cloud-light);
  display: grid; place-items: center; min-height: 7.5rem;
}
.logo-strip img {
  max-height: 3rem; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .25s, opacity .25s;
}
.logo-strip figure:hover img { filter: none; opacity: 1; }

/* --- Accordion (universities) --------------------------------------------- */

.region { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.region > h2 {
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--surface-chocolate-dark);
  margin-bottom: 1.5rem;
}

details.country {
  border: 1px solid var(--surface-cloud-dark);
  border-radius: 0 1.5rem 0 1.5rem;
  background: var(--surface-cloud-light);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: border-color .2s;
}
details.country[open] { border-color: var(--azure); }
details.country summary {
  cursor: pointer; list-style: none;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 1.25rem;
}
details.country summary::-webkit-details-marker { display: none; }
.country-flag {
  width: 2.75rem; height: auto; flex: none;
  border-radius: 0 .5rem 0 .5rem;
  border: 1px solid var(--surface-cloud-dark);
}
.country-title { flex: 1; }
.country-title h3 { margin-bottom: .25rem; }
.country-title p { font-size: .95rem; margin: 0; }
.country-chev {
  flex: none; width: 1.5rem; height: 1.5rem;
  transition: transform .25s;
  color: var(--azure);
}
details.country[open] .country-chev { transform: rotate(180deg); }
.country-body {
  padding: 0 clamp(1.25rem, 3vw, 2rem) 2rem;
  border-top: 1px solid var(--surface-cloud-dark);
  padding-top: 1.75rem;
}
.uni-list {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  columns: 3; column-gap: 2rem;
}
.uni-list li {
  break-inside: avoid;
  padding: .45rem 0 .45rem 1.1rem;
  font-size: .95rem;
  position: relative;
}
.uni-list li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: .4rem; height: .4rem; background: var(--azure);
  border-radius: 0 .2rem 0 .2rem;
}

/* --- Blog ----------------------------------------------------------------- */

.post-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--surface-cloud-light);
  border: 1px solid var(--surface-cloud-dark);
  border-radius: 0 1.75rem 0 1.75rem;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--mint); }
.post-card figure { margin: 0; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-cloud-dark); }
.post-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.post-card:hover figure img { transform: scale(1.05); }
.post-card-body { padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.post-meta {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  color: var(--azure);
}
.post-meta .sep { color: var(--surface-cloud-dark); }
.post-card p { font-size: .95rem; margin: 0; }

.prose { font-size: 1.1rem; line-height: 1.75; }
.prose h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  margin: 2.75rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 2px solid var(--surface-cloud-dark);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose ul { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .8rem; }
.prose ul li { display: flex; gap: .9rem; align-items: flex-start; }
.prose ul li::before {
  content: ""; flex: none; width: .65rem; height: .65rem; margin-top: .6rem;
  background: var(--azure); border-radius: 0 .3rem 0 .3rem;
}

/* --- Forms ---------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: inherit;
  padding: .85rem 1rem;
  background: var(--surface-cloud-light);
  border: 1px solid var(--surface-cloud-dark);
  border-radius: 0 .9rem 0 .9rem;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--azure);
  box-shadow: 0 0 0 3px var(--azure-2);
}
.field .err { font-size: .85rem; color: #B3261E; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #B3261E; }

.radio-row { display: flex; gap: 1.5rem; padding-top: .35rem; }
.radio-row label {
  display: flex; align-items: center; gap: .5rem;
  text-transform: none; letter-spacing: 0;
  font-family: inherit; font-weight: 400; font-size: 1rem;
  cursor: pointer;
}
.radio-row input { width: auto; padding: 0; accent-color: var(--azure); }

.form-note { font-size: .88rem; line-height: 1.55; }
.form-status {
  padding: 1.1rem 1.35rem;
  border-radius: 0 1rem 0 1rem;
  font-size: .98rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.ok { background: var(--mint-1); border: 1px solid var(--mint); }
.form-status.bad { background: var(--orchid); border: 1px solid #D48A95; }

/* --- Contact detail blocks ------------------------------------------------ */

.contact-card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.5rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.contact-card h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.contact-card a { text-decoration: none; border-bottom: 1px solid currentColor; }
.contact-card p { margin: 0; font-size: .98rem; }

/* --- Breadcrumb ----------------------------------------------------------- */

.crumbs {
  font-family: "Barlow Condensed", sans-serif;
  font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: .55rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--surface-cloud-dark);
}
.crumbs a { text-decoration: none; opacity: .65; }
.crumbs a:hover { opacity: 1; color: var(--azure-7); }
.crumbs span[aria-current] { color: var(--azure-7); }

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

.page-hero { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.page-hero h1 { margin-bottom: 1.25rem; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--surface-chocolate-dark);
  color: var(--surface-cloud);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 2rem;
  position: relative; overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 3.5rem;
}
.site-footer h4 {
  font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1.25rem; color: var(--mint);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.site-footer a { text-decoration: none; opacity: .82; transition: opacity .18s, color .18s; font-size: .98rem; }
.site-footer a:hover { opacity: 1; color: var(--mint); }
.footer-logo img { height: 2.4rem; width: auto; margin-bottom: 1.35rem; }
.footer-blurb { font-size: .95rem; opacity: .8; max-width: 30ch; }
.socials { display: flex; gap: .7rem; margin-top: 1.5rem; }
.socials a {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--surface-cloud) 30%, transparent);
  border-radius: 0 .7rem 0 .7rem;
  opacity: 1;
  transition: background .18s, color .18s, border-color .18s;
}
.socials a:hover { background: var(--mint); color: var(--surface-chocolate-dark); border-color: var(--mint); }
.socials svg { width: 1.1rem; height: 1.1rem; }
.footer-base {
  border-top: 1px solid color-mix(in srgb, var(--surface-cloud) 18%, transparent);
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .88rem; opacity: .7;
}
.footer-base ul { display: flex; gap: 1.5rem; }

/* --- Motion --------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

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

/* --- Responsive ----------------------------------------------------------- */

/* --- Network strip -------------------------------------------------------- */

.net-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--surface-cloud-dark);
  border: 1px solid var(--surface-cloud-dark);
  border-radius: 0 1.75rem 0 1.75rem;
  overflow: hidden;
}
.net-card {
  min-height: 6.5rem;
  padding: 1.5rem 1.25rem;
  background: var(--surface-cloud-light);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.net-card:hover { background: var(--azure); color: #fff; }
.net-card:hover .net-go { opacity: 1; transform: translateX(0); }
.net-name {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.3rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.net-go {
  width: 1.15rem; height: 1.15rem; flex: none;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
}

@media (max-width: 860px) {
  .net-strip { grid-template-columns: repeat(2, 1fr); }
}

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

.fee-table { display: grid; gap: 0; margin-top: .5rem; }
.fee-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: .7rem 0; align-items: baseline;
  border-top: 1px solid var(--surface-cloud-dark);
  font-size: .95rem;
}
.fee-row:first-child { border-top: 0; }
.fee-k {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  font-size: .9rem; opacity: .75;
}
.fee-v { text-align: right; font-weight: 500; }
.fee-row:last-child { border-top: 2px solid var(--mint); }
.fee-row:last-child .fee-v { font-size: .88rem; font-weight: 400; opacity: .8; }

/* --- Table of contents ---------------------------------------------------- */

.toc {
  background: var(--surface-cloud);
  border-radius: 0 1.5rem 0 1.5rem;
  padding: 1.75rem clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.toc ol {
  margin: 0; padding: 0; list-style: none;
  counter-reset: toc;
  columns: 2; column-gap: 2rem;
}
.toc li { counter-increment: toc; break-inside: avoid; padding: .3rem 0; }
.toc li::before {
  content: counter(toc, decimal-leading-zero) "  ";
  font-family: "Barlow Condensed", sans-serif;
  color: var(--mint-7); font-weight: 600;
}
.toc a { font-size: .95rem; text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { border-color: var(--mint-7); }

.prose strong { font-weight: 600; }

/* --- Cookie bar ----------------------------------------------------------- */

.cookie-bar {
  position: fixed; inset: auto 0 0 0; z-index: 120;
  background: var(--surface-chocolate-dark);
  color: var(--surface-cloud);
  border-top: 3px solid var(--mint);
  animation: cookie-in .4s cubic-bezier(.2,.8,.3,1);
}
.cookie-bar[hidden] { display: none; }
@keyframes cookie-in { from { transform: translateY(100%); } to { transform: none; } }
.cookie-inner {
  width: min(100% - 2.5rem, 82rem); margin-inline: auto;
  padding: 1.35rem 0;
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
  align-items: center; justify-content: space-between;
}
.cookie-inner p { margin: 0; font-size: .95rem; max-width: 62ch; line-height: 1.55; }
.cookie-inner a { color: var(--mint); }
.cookie-actions { display: flex; gap: .75rem; flex: none; }
.cookie-actions .btn { padding: .7rem 1.35rem; font-size: 1.05rem; }

@media (max-width: 560px) {
  .toc ol { columns: 1; }
  .cookie-actions { width: 100%; flex-direction: column; }
  .cookie-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 1080px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .uni-list { columns: 2; }
}

@media (max-width: 860px) {
  .nav {
    position: fixed; inset: 0 0 auto;
    top: 4.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface-cloud-light);
    border-bottom: 1px solid var(--surface-cloud-dark);
    padding: .5rem 1.25rem 1.5rem;
    transform: translateY(-120%);
    transition: transform .3s cubic-bezier(.2,.8,.3,1);
    box-shadow: 0 20px 40px -30px rgba(62,31,11,.5);
  }
  .nav.open { transform: none; }
  .nav a { padding: .9rem 0; border-bottom: 1px solid var(--surface-cloud-dark); font-size: 1.3rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: block; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 4/3; order: -1; }
  .split { grid-template-columns: 1fr; }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .uni-list { columns: 1; }
  .tl-row { grid-template-columns: 4.5rem 1fr; }
}

@media (max-width: 560px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; }
  .logo-strip { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .site-header, .site-footer, .btn, .hero-dots { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   Section contrast (after gostudyin.com): saturated and dark bands alternate
   with light ones, never two similar backgrounds adjacent, and each headline
   carries one highlighted phrase. All pairs below measured against WCAG 2.2.
   ========================================================================== */

/* Decorative brandmarks stay inside their own band (one spilled into the
   footer). `clip`, unlike `hidden`, doesn't break position: sticky. */
section.band, section.band-tight, section.page-hero, section.hs { overflow: clip; }

.band-azure-deep { background: var(--azure-7); color: #fff; }          /* white 6.1:1; brand Azure is 4.0:1 */
.band-azure-deep .eyebrow { color: currentColor; opacity: .8; }
.band-azure-deep .stat { border-top-color: rgba(255, 255, 255, .5); }

.band-chocolate .eyebrow { color: var(--mint); opacity: 1; }            /* 6.5:1 */
.band-chocolate .muted { color: color-mix(in srgb, var(--surface-cloud) 74%, transparent); }
.band-sage .eyebrow, .band-lilac .eyebrow { color: var(--azure-8); }    /* azure-7 is 4.4:1 here */

/* Two-tone headlines. Display sizes only (24px+), where 3:1 is the bar. */
.hl { color: var(--azure); }                                            /* 3.4-3.7:1 on the light surfaces */
.band-chocolate .hl { color: var(--mint); }                             /* 6.5:1 */
.band-sage .hl, .band-lilac .hl { color: var(--azure-7); }              /* 4.4:1; brand Azure would be 2.9:1 */
.band-mint .hl, .band-azure-deep .hl { color: inherit; }

/* Paired panels: one saturated, one pastel, inside a light band. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.pair-panel { padding: clamp(2rem, 4vw, 3.25rem); border-radius: 0 2.5rem 0 2.5rem; }
.pair-panel h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.pair-panel .muted { color: inherit; opacity: .85; }
.pair-panel--mint { background: var(--mint); color: var(--surface-chocolate-dark); }   /* 6.5:1 */
.pair-panel--mint .ticks li::before { background: var(--surface-chocolate-dark); }
.pair-panel--lilac { background: var(--lilac); color: var(--surface-chocolate-dark); } /* 10.9:1 */
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } }

/* Reach (dark band): keep the list legible and the network cards as the bright block. */
.reach .uni-list li::before { background: var(--mint); }
.reach .net-strip { border-color: transparent; background: rgba(240, 238, 233, .16); }

/* --- Offices ------------------------------------------------------------- */

.office-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.85rem, 1.6vw, 1.25rem); }
.office { grid-column: span 2; display: flex; flex-direction: column; gap: .55rem;
          min-height: 15rem; padding: clamp(1.5rem, 2.6vw, 2.1rem); border-radius: 0 1.75rem 0 1.75rem; }
.office--soon { grid-column: span 3; min-height: 11rem; }
.office--uk { background: var(--mint); color: var(--surface-chocolate-dark); }            /* 6.5:1 */
.office--pk { background: var(--surface-cloud); color: var(--surface-chocolate-dark); }   /* 12.9:1 */
.office--soon { background: transparent; color: var(--surface-cloud);
                border: 1.5px dashed color-mix(in srgb, var(--surface-cloud) 45%, transparent); }
.office-country { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 600;
                  font-size: .9rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.office-city { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.office address { font-style: normal; line-height: 1.5; font-size: 1rem; }
.office-soon { margin: 0; font-size: 1rem; opacity: .85; max-width: 34ch; }
.office-link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem;
               padding-top: .75rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
               font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
               border-bottom: 2px solid currentColor; }
.office-link svg { width: 1rem; height: 1rem; transition: transform .18s; }
.office-link:hover svg { transform: translateX(3px); }
.office--soon .office-link { color: var(--mint); }
/* Birmingham, the global headquarters, leads on a row of its own. */
.office--hq { grid-column: 1 / -1; min-height: 13rem; }
.office--hq ~ .office--pk { grid-column: span 3; }
.office-hq { margin: -.15rem 0 .35rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
             font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.1; }
@media (max-width: 960px) { .office, .office--soon { grid-column: span 3; } .office--uk { grid-column: 1 / -1; } }
@media (max-width: 560px) { .office-grid { grid-template-columns: 1fr; } .office, .office--soon, .office--uk, .office--hq ~ .office--pk { grid-column: auto; } }

.footer-offices a { display: block; line-height: 1.55; }
.footer-offices span { display: block; margin-bottom: .15rem; font-family: "Barlow Condensed", sans-serif;
                       font-weight: 600; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }

/* ==========================================================================
   Horizontal scroll sections (reverse-engineered from hokaido.webflow.io).
   Hokaido: a 100vh sticky "camera" with overflow hidden; scroll progress
   through a taller wrapper drives translateX; inner layers drift at their
   own rate (parallax); the position eases toward its target each frame.

   Default here (no JS, reduced motion, small screens) is a native
   swipeable row with scroll-snap, so nothing is ever stuck or hidden.
   site.js adds .is-pinned only where the pinned version works well.
   The track's start padding equals .wrap's left edge, so the first panel
   lines up with the heading above it at every viewport width.
   ========================================================================== */

.hs { position: relative; padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.hs-camera { position: relative; }
.hs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
           margin-bottom: clamp(2rem, 4vw, 3rem); }
.hs-head h2 { max-width: 18ch; }
.hs-progress { flex: none; display: flex; align-items: center; gap: 1rem; padding-bottom: .4rem;
               font-family: "Barlow Condensed", sans-serif; font-weight: 600; letter-spacing: .12em; }
.hs-count { font-size: 1rem; opacity: .75; }
.hs-count b { font-size: 1.6rem; font-weight: 700; opacity: 1; }
.hs-bar { position: relative; width: clamp(5rem, 10vw, 9rem); height: 3px; overflow: hidden;
          background: color-mix(in srgb, currentColor 20%, transparent); }
.hs-bar i { position: absolute; inset: 0; background: var(--azure); transform-origin: left center;
            transform: scaleX(var(--p, 0)); }
.band-chocolate .hs-bar i { background: var(--mint); }
.band-lilac .hs-bar i { background: var(--azure-7); }

.hs-track {
  --edge: max(1.25rem, calc((100% - 82rem) / 2));
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  padding: .25rem var(--edge) 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hs-track::-webkit-scrollbar { display: none; }
.hs-panel { flex: 0 0 auto; scroll-snap-align: start; }

.hs.is-pinned { padding: 0; }
.hs.is-pinned .hs-camera {
  position: sticky; top: var(--header-h, 0px);
  height: calc(100vh - var(--header-h, 0px));
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.hs.is-pinned .hs-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.hs-par { will-change: transform; }

/* Process panels: three saturated blocks on the dark band. */
.step-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
              width: min(80vw, 44rem); min-height: min(56vh, 30rem);
              padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: 0 2.5rem 0 2.5rem; }
.step-panel--mint    { background: var(--mint);    color: var(--surface-chocolate-dark); }  /* 6.5:1 */
.step-panel--azure   { background: var(--azure-7); color: #fff; }                           /* 6.1:1 */
.step-panel--pumpkin { background: var(--pumpkin); color: var(--surface-chocolate-dark); }  /* 4.8:1 */
.step-panel-n { position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(1rem, 3vw, 2.5rem);
                font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: .8;
                font-size: clamp(7rem, 15vw, 13rem); opacity: .2; }
.step-panel-body { position: relative; max-width: 34rem; }
.step-panel-k { margin: 0 0 .5rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
                font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; }
.step-panel h3 { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: .9rem; }
.step-panel p { font-size: 1.05rem; }
.step-panel ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid;
                 grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.5rem; font-size: .98rem; }
.step-panel li { display: flex; gap: .6rem; align-items: flex-start; }
.step-panel li::before { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .5rem;
                         background: currentColor; border-radius: 0 .25rem 0 .25rem; }

/* Destination panels: full-height photography with inner parallax. */
.dest-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
              width: min(74vw, 25rem); height: min(62vh, 34rem);
              border-radius: 0 2rem 0 2rem; color: #fff; text-decoration: none; }
.dest-panel-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.dest-panel-media img { width: 120%; max-width: none; height: 100%; margin-left: -10%; object-fit: cover; }
.dest-panel::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(62, 31, 11, .94) 6%, rgba(62, 31, 11, .38) 52%, rgba(62, 31, 11, 0) 80%); }
.dest-panel-n { position: absolute; top: 1.25rem; left: 1.5rem; font-family: "Barlow Condensed", sans-serif;
                font-weight: 700; font-size: 1.1rem; letter-spacing: .14em; }
.dest-panel-body { display: flex; flex-direction: column; gap: .55rem; padding: 1.75rem; }
.dest-panel-title { font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: .95;
                    font-size: clamp(2.1rem, 3.2vw, 2.7rem); }
.dest-panel-text { font-size: .95rem; line-height: 1.5; opacity: .92; }
.dest-panel-go { display: inline-flex; align-items: center; gap: .5rem; margin-top: .35rem;
                 font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1rem;
                 letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.dest-panel-go svg { width: 1rem; height: 1rem; transition: transform .18s; }
.dest-panel:hover .dest-panel-go svg, .dest-panel:focus-visible .dest-panel-go svg { transform: translateX(4px); }

/* About timeline: a continuous rail across the panels. */
.tl-track { gap: 0; }
.tl-panel { position: relative; width: min(72vw, 24rem); padding: 2.5rem 2.5rem 0 0;
            border-top: 2px solid var(--surface-chocolate-dark); }
.tl-panel-dot { position: absolute; top: -9px; left: 0; width: 16px; height: 16px;
                background: var(--azure-7); border-radius: 0 6px 0 6px; }
.tl-panel-year { display: block; margin-bottom: .75rem; font-family: "Barlow Condensed", sans-serif;
                 font-weight: 700; line-height: .9; font-size: clamp(4.5rem, 9vw, 7.5rem); color: var(--azure-7); }
.tl-panel p { max-width: 21rem; font-size: 1.05rem; }

@media (max-width: 860px) {
  .hs-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .step-panel { min-height: 26rem; }
  .step-panel ul { grid-template-columns: 1fr; }
  .dest-panel { height: 28rem; }
}
@media (prefers-reduced-motion: reduce) { .hs-par { transform: none !important; } }

/* Destinations without verified photography: a solid brand panel instead of
   a duplicated or mislabelled photo (Canada reused New Zealand's image and
   "Europe" reused the London image in the previous build). */
.dest-panel--brand { color: var(--surface-chocolate-dark); }
.dest-panel--brand::after { display: none; }
.dest-panel--mint { background: var(--mint); }                       /* text 6.5:1 */
.dest-panel--lilac { background: var(--lilac); }                     /* text 10.9:1 */
.dest-panel--brand .dest-panel-media { display: grid; place-items: start end; padding: 1.5rem; }
.dest-panel-mark { display: block; width: 62%; opacity: .16; }
.dest-panel-mark svg { display: block; width: 100%; height: auto; }
.dest-panel--brand .dest-panel-go { color: var(--surface-chocolate-dark); }

/* Pinned sections must fit one screen: size the panels from what's left
   after the header bar and the section heading. */
.hs-head h2 { max-width: 24ch; }
.hs.is-pinned .hs-head { margin-bottom: clamp(1.25rem, 3vh, 2.25rem); }
.hs.is-pinned .dest-panel { height: clamp(18rem, calc(100vh - var(--header-h, 0px) - 18rem), 34rem); }
.hs.is-pinned .step-panel { min-height: 0; height: clamp(20rem, calc(100vh - var(--header-h, 0px) - 18rem), 30rem); }
/* Keep the decorative numeral and logomark clear of the panel copy on short screens. */
.step-panel-n { font-size: clamp(5rem, min(15vw, 24vh), 13rem); }
.step-panel-body { max-width: min(34rem, 72%); }
.dest-panel-mark { width: 42%; }
@media (max-width: 860px) { .step-panel-body { max-width: none; } }
/* Offices sit on Sage so they don't merge into the dark footer below. */
.offices .office--pk { background: var(--surface-cloud-light); }                         /* 13.9:1 */
.offices .office--soon { color: var(--surface-chocolate-dark);
                         border-color: color-mix(in srgb, var(--surface-chocolate-dark) 40%, transparent); }
.offices .office--soon .office-link { color: var(--surface-chocolate-dark); }

/* Eyebrow labels are retired sitewide. What used to carry information is
   now plain text: a card's descriptor line, or a small heading over a list. */
.eyebrow::before { content: none; }
.card-meta { margin: -.35rem 0 0; font-size: .95rem; color: color-mix(in srgb, var(--surface-chocolate-dark) 72%, transparent); }
.list-head { margin: 0 0 1rem; font-size: 1.35rem; line-height: 1.15; }
.band-chocolate .list-head { color: var(--surface-cloud); }
details .list-head { margin-top: 1.5rem; }

/* ==========================================================================
   Hero: two funnels and the four-piece logomark.
   ========================================================================== */
.hero2 { position: relative; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem); }
.hero2-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero2 h1 { font-size: clamp(3rem, 6.6vw, 5.9rem); max-width: 12ch; margin-bottom: 1.4rem; }
.hero2 .lead { max-width: 44ch; margin-bottom: 2.25rem; }
.funnels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 42rem; }
.funnel { position: relative; display: flex; flex-direction: column; gap: .4rem;
          padding: 1.5rem 3.5rem 1.5rem 1.6rem; border-radius: 0 1.6rem 0 1.6rem;
          text-decoration: none; transition: transform .2s cubic-bezier(.2,.8,.3,1), background .2s; }
.funnel:hover { transform: translateY(-3px); }
.funnel--course  { background: var(--azure-7); color: #fff; }                          /* 6.1:1 */
.funnel--course:hover { background: var(--azure-8); }
.funnel--scholar { background: var(--mint); color: var(--surface-chocolate-dark); }     /* 6.5:1 */
.funnel--scholar:hover { background: var(--mint-5); }
.funnel-k { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1; }
.funnel-d { font-size: .95rem; line-height: 1.45; }
.funnel .arrow { position: absolute; top: 1.5rem; right: 1.3rem; width: 1.4rem; height: 1.4rem; transition: transform .2s; }
.funnel:hover .arrow { transform: translateX(4px); }
.hero2-alt { margin: 1.4rem 0 0; font-size: 1rem; }
.hero2-alt a { color: var(--chocolate); text-underline-offset: .2em; }

.hero2-mark { --m: clamp(13rem, 28vw, 25rem); width: var(--m); justify-self: center;
              display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--m) * .0398); }
.fly-slot { display: block; aspect-ratio: 1; }
.fly-slot svg { display: block; width: 100%; height: 100%; }

/* At-a-glance cards: where the logo pieces land. */
.usp-h { max-width: 22ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.usp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.usp-card { display: flex; flex-direction: column; gap: .55rem; padding: clamp(1.5rem, 2.4vw, 2rem);
            border-radius: 0 1.75rem 0 1.75rem; background: rgba(240, 238, 233, .06);
            border: 1px solid rgba(240, 238, 233, .16); }
.fly-end { width: 3.5rem; margin-bottom: 1.1rem; }
.usp-n { font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: .9;
         font-size: clamp(3rem, 5vw, 4.4rem); color: var(--surface-cloud); }
.usp-card h3 { font-size: 1.4rem; color: var(--mint); }                                /* 6.5:1 */
.usp-card p { margin: 0; font-size: .98rem; color: color-mix(in srgb, var(--surface-cloud) 82%, transparent); }

/* The flying pieces live in one layer over the page; the static copies hide while it runs. */
.fly-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 40; pointer-events: none; }
.fly-piece { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.fly-piece svg { display: block; width: 100%; height: 100%; }
html.fly-on .fly-slot svg { visibility: hidden; }

/* Funnel holding pages (/courses/, /scholarships/) until the finders launch. */
.funnel-page { padding: clamp(4rem, 9vw, 7rem) 0; }
.funnel-page-inner { max-width: 46rem; }
.funnel-page h1 { margin-bottom: 1.25rem; }
.funnel-page .lead { max-width: none; margin-bottom: 1rem; }
.funnel-page .btn-row { margin-top: 2rem; }

@media (max-width: 960px) {
  .hero2-grid { grid-template-columns: 1fr; }
  .hero2-mark { --m: clamp(11rem, 50vw, 16rem); justify-self: start; grid-row: 1; }
  .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .funnels, .usp-grid { grid-template-columns: 1fr; }
}

/* --- Round 7 fixes --------------------------------------------------------- */
/* Stage bullets: the list uses the full panel width so each item sits on one line. */
.step-panel-body { max-width: none; }
.step-panel-body > h3, .step-panel-body > p { max-width: 32rem; }
.step-panel ul { gap: .6rem 2rem; }
@media (min-width: 861px) { .step-panel li { white-space: nowrap; } }
/* Portal names were inheriting the light text colour of the dark band. */
.net-card { color: var(--surface-chocolate-dark); }                    /* 13.9:1 */
.net-card:hover { color: #fff; background: var(--azure-7); }           /* 6.1:1 */
/* Privacy TOC: fixed numeral column so wrapped titles stay aligned. */
.toc li { display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; }
.toc li::before { content: counter(toc, decimal-leading-zero); font-size: 1.05rem; }
/* Phones: the header already carries the logo, so the hero opens on the headline. */
@media (max-width: 960px) { .hero2-mark { display: none; } }

/* History finale: 2026 is highlighted, and in pinned mode it expands to fill
   the screen once the timeline has finished travelling. */
.tl-panel--finale { width: min(80vw, 27rem); margin-left: clamp(1rem, 2vw, 1.75rem); padding: 2.25rem 2.25rem 2.5rem;
                    background: var(--azure-7); color: #fff; border-top: 0; border-radius: 0 2rem 0 2rem; }   /* 6.1:1 */
.tl-panel--finale .tl-panel-dot { display: none; }
.tl-panel--finale .tl-panel-year { color: var(--mint); }                                                       /* 4.4:1, display size */
.tl-panel--finale h3 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: .6rem; }
.tl-finale-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; color: #fff;
                  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.1rem;
                  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
                  border-bottom: 2px solid var(--mint); padding-bottom: .15rem; }
.tl-finale-link svg { width: 1.05rem; height: 1.05rem; transition: transform .18s; }
.tl-finale-link:hover svg { transform: translateX(4px); }
.tl-fill { display: none; }
.hs.is-pinned .tl-fill { display: flex; align-items: center; position: absolute; inset: 0; z-index: 3;
                         background: var(--azure-7); color: #fff; visibility: hidden; pointer-events: none;
                         clip-path: inset(var(--ft, 0) var(--fr, 0) var(--fb, 0) var(--fl, 0) round var(--frad, 0)); }
.hs.is-pinned .tl-fill.is-on { visibility: visible; }
.hs.is-pinned .tl-fill.is-full { pointer-events: auto; }
.tl-fill-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem);
                 opacity: var(--fo, 0); transform: translateY(calc((1 - var(--fo, 0)) * 1.5rem)); }
.tl-fill-year { font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: .8; color: var(--mint);
                font-size: clamp(8rem, min(22vw, 38vh), 20rem); }
.tl-fill-text h3 { color: #fff; font-size: clamp(2.6rem, 5vw, 4.5rem); margin-bottom: 1rem; }
.tl-fill-text p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 30rem; }

/* Services: an editorial list. Each row opens to show what the service includes. */
:root { interpolate-size: allow-keywords; }
.svc-section { padding-top: clamp(1rem, 3vw, 2rem); }
.svc-list { max-width: 64rem; border-top: 2px solid var(--surface-chocolate-dark); }
.svc { border-bottom: 1px solid color-mix(in srgb, var(--surface-chocolate-dark) 22%, transparent); }
.svc summary { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 1rem;
               padding: clamp(1.25rem, 2.6vw, 1.9rem) 0; cursor: pointer; list-style: none; }
.svc summary::-webkit-details-marker { display: none; }
.svc summary:focus-visible { outline: 3px solid var(--azure-7); outline-offset: 4px; }
.svc-n { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.15rem;
         letter-spacing: .08em; color: var(--azure-7); }
.svc-t { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; transition: color .2s; }
.svc-arrow { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
             border: 1.5px solid currentColor; transition: background .2s, color .2s, transform .3s; }
.svc-arrow svg { width: 1.2rem; height: 1.2rem; }
.svc summary:hover .svc-t { color: var(--azure-7); }
.svc summary:hover .svc-arrow { background: var(--azure-7); border-color: var(--azure-7); color: #fff; }
.svc[open] .svc-arrow { transform: rotate(90deg); background: var(--mint); border-color: var(--mint);
                        color: var(--surface-chocolate-dark); }
.svc::details-content { block-size: 0; overflow: clip;
                        transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.svc[open]::details-content { block-size: auto; }
.svc-body { padding: 0 4.5rem clamp(1.75rem, 3vw, 2.5rem) 4.5rem; }
.svc-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 40rem; margin-bottom: 1.4rem; }
.svc-points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 2rem; }
.svc-points li { display: flex; gap: .7rem; align-items: baseline; }
.svc-points li::before { content: ""; flex: none; width: .55rem; height: .55rem; transform: translateY(-.1rem);
                         background: var(--mint-7); border-radius: 0 .25rem 0 .25rem; }
.svc-link { display: inline-flex; align-items: center; gap: .5rem; font-family: "Barlow Condensed", sans-serif;
            font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
            color: var(--azure-7); text-decoration: none; border-bottom: 2px solid var(--mint); padding-bottom: .15rem; }
.svc-link svg { width: 1.05rem; height: 1.05rem; transition: transform .18s; }
.svc-link:hover svg { transform: translateX(4px); }
@media (max-width: 700px) {
  .svc summary { grid-template-columns: 2.5rem 1fr auto; gap: .75rem; }
  .svc-arrow { width: 2.5rem; height: 2.5rem; }
  .svc-body { padding: 0 0 1.75rem 3.25rem; }
  .svc-points { grid-template-columns: 1fr; }
}
.svc { scroll-margin-top: 6rem; }
.svc-list { max-width: 48rem; }
.hs-bar { display: none; }

/* ==========================================================================
   Hero, editorial version (after lokalapps.com). Display type across the
   full measure, the logomark set as the headline's full stop, a hairline
   rule, then the lead and the two funnels. On load a curtain of brand
   columns lifts while the mark travels from the centre of the screen into
   the headline; on scroll its four pieces fly to the at-a-glance columns.
   ========================================================================== */
.hero3 { position: relative; padding: clamp(2.5rem, 5.5vw, 4.75rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
.hero3-h { font-size: clamp(3.1rem, 9.3vw, 9.25rem); line-height: .97; letter-spacing: -.012em;
           max-width: none; margin: 0 0 clamp(2rem, 3.6vw, 3rem); }
.hero3-l { display: block; }
.hero3-mark { display: inline-block; width: .7em; margin-left: .12em; }
.hero3-mark-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(.7em * .0398); }
.hero3-foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem);
              align-items: start; padding-top: clamp(1.5rem, 2.4vw, 2rem);
              border-top: 1px solid color-mix(in srgb, var(--surface-chocolate-dark) 24%, transparent); }
.hero3 .lead { margin: 0; max-width: 32rem; }
.hero3 .funnels { max-width: none; }
.hero3 .hero2-alt { margin-top: 1.15rem; }
@media (max-width: 900px) {
  .hero3-foot { grid-template-columns: 1fr; }
}

/* At a glance as editorial columns: hairline rules, no boxes. */
.usp-grid { gap: 0; }
.usp-card { background: none; border: 0; border-radius: 0; gap: .6rem;
            padding: .25rem clamp(1.25rem, 2.2vw, 2rem) .5rem;
            border-left: 1px solid rgba(240, 238, 233, .2); }
.usp-card:first-child { border-left: 0; padding-left: 0; }
.usp-card .fly-end { width: 3rem; margin-bottom: 1.75rem; }
.usp-n { font-size: clamp(3.6rem, 6.2vw, 5.75rem); }
@media (max-width: 960px) {
  .usp-grid { row-gap: 2.75rem; }
  .usp-card:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .usp-grid { row-gap: 0; }
  .usp-card, .usp-card:nth-child(odd) { border-left: 0; padding: 1.75rem 0; border-top: 1px solid rgba(240, 238, 233, .2); }
  .usp-card:first-child { border-top: 0; padding-top: 0; }
}

/* Intro curtain. The head script adds .intro-pending before first paint, so the
   page never flashes; site.js swaps in real columns and lifts them. If the
   script never runs, the failsafe hides the cover after four seconds. */
html.intro-pending body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background: linear-gradient(90deg, var(--mint) 0 16.67%, var(--mint-7) 0 33.34%, var(--azure) 0 50%,
              var(--azure-7) 0 66.67%, var(--azure-8) 0 83.34%, var(--surface-chocolate-dark) 0);
  animation: intro-failsafe 0s linear 4s forwards;
}
@keyframes intro-failsafe { to { visibility: hidden; } }
.intro { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-columns: repeat(6, 1fr);
         pointer-events: none; overflow: hidden; }
.intro span { display: block; transition: transform .9s cubic-bezier(.72, 0, .24, 1); }
.intro span:nth-child(1) { background: var(--mint); }
.intro span:nth-child(2) { background: var(--mint-7);  transition-delay: .07s; }
.intro span:nth-child(3) { background: var(--azure);   transition-delay: .14s; }
.intro span:nth-child(4) { background: var(--azure-7); transition-delay: .21s; }
.intro span:nth-child(5) { background: var(--azure-8); transition-delay: .28s; }
.intro span:nth-child(6) { background: var(--surface-chocolate-dark); transition-delay: .35s; }
.intro.is-lifting span { transform: translateY(-101%); }
html.intro-on .fly-layer { z-index: 151; }
.fly-piece path { transition: fill .7s ease; }
html.intro-white .fly-piece path { fill: #fff; }
/* Hero refinements: bigger display type; the mark's bottom edge sits on the
   baseline (overflow makes an inline-block align by its bottom edge); a hairline
   stroke in the fill colour hides the seam between each quadrant's two shapes. */
.hero3-h { font-size: clamp(3.1rem, 11.2vw, 11rem); }
.hero3-mark { overflow: hidden; vertical-align: baseline; }
.fly-slot path, .fly-piece path { stroke-width: .6; stroke-linejoin: round; }
.fly-slot path[fill="#0086F9"], .fly-piece path[fill="#0086F9"] { stroke: #0086F9; }
.fly-slot path[fill="#00C19F"], .fly-piece path[fill="#00C19F"] { stroke: #00C19F; }
.fly-piece path { transition: fill .7s ease, stroke .7s ease; }
html.intro-white .fly-piece path { fill: #fff; stroke: #fff; transition: none; }

/* ==========================================================================
   Glass navigation. At the top of the page the header is the full-width bar.
   Once the page scrolls it condenses into a floating pane of glass: frosted,
   translucent, with a specular top edge and (in Chromium) a light refraction
   of what passes underneath. The header keeps one fixed height in both
   states so the page never jumps, and the glass sits on a pseudo-element so
   the fixed mobile menu keeps working. Over dark sections the glass turns
   smoky and the links turn light.
   ========================================================================== */
.site-header { height: 4.7rem; display: flex; align-items: center;
               transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease; }
.header-inner { position: relative; isolation: isolate; height: 4.7rem; padding: 0;
                transition: width .6s cubic-bezier(.2, .8, .2, 1), height .6s cubic-bezier(.2, .8, .2, 1),
                            padding .6s cubic-bezier(.2, .8, .2, 1); }
.header-inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: 999px; opacity: 0; transform: scale(.97);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 46%),
    color-mix(in srgb, var(--surface-cloud-light) 64%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(62, 31, 11, .08),
              0 14px 34px -16px rgba(62, 31, 11, .45), 0 2px 6px -2px rgba(62, 31, 11, .12);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1), background .4s ease, border-color .4s ease;
}
html.glass-refract .header-inner::before {
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: url(#glass-refract) blur(10px) saturate(1.7);
}
.brand img { transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.nav a { transition: border-color .18s, color .3s; }

html.nav-glass .site-header { background-color: transparent; border-bottom-color: transparent;
                              -webkit-backdrop-filter: none; backdrop-filter: none; }
html.nav-glass .header-inner { width: min(100% - 1.5rem, 64rem); height: 3.6rem; padding: 0 .9rem 0 1.5rem; }
html.nav-glass .header-inner::before { opacity: 1; transform: none; }
html.nav-glass .brand img { height: 1.8rem; }
html.nav-glass .nav { gap: 1.6rem; }

/* Over dark sections: smoky glass, light links. */
html.nav-glass.nav-dark .header-inner::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 46%),
    rgba(30, 15, 5, .5);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 34px -16px rgba(0, 0, 0, .6);
}
html.nav-glass.nav-dark .nav a, html.nav-glass.nav-dark .nav-toggle { color: var(--surface-cloud); }
html.nav-glass.nav-dark .nav a[aria-current="page"] { color: var(--mint); border-color: var(--mint); }
html.nav-glass.nav-dark .nav a:hover { border-color: var(--mint); }

@media (max-width: 860px) {
  html.nav-glass .header-inner { width: min(100% - 1rem, 64rem); }
  .nav { top: 4.7rem; }
  html.nav-glass .nav { top: 4.6rem; left: .5rem; right: .5rem; border-radius: 1.25rem; border: 1px solid var(--surface-cloud-dark);
                        background: color-mix(in srgb, var(--surface-cloud-light) 94%, transparent); }
  html.nav-glass.nav-dark .nav a { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .header-inner, .header-inner::before, .brand img { transition-duration: .01s; }
}

/* ==========================================================================
   At a glance: flip cards. The front is the dark card the logo pieces land
   on (all blue, all facing the same way). Hover, keyboard focus or a tap
   turns the card over to its green side, the one green quarter of the logo,
   with a green outline and a link onward.
   ========================================================================== */
.usp-grid { gap: clamp(1rem, 2vw, 1.5rem); row-gap: clamp(1rem, 2vw, 1.5rem); }
.usp-card, .usp-card:first-child, .usp-card:nth-child(odd) {
  padding: 0; border: 0; background: none; perspective: 1400px;
  border-radius: 0 1.75rem 0 1.75rem;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color .45s ease, outline-offset .45s cubic-bezier(.2, .8, .2, 1);
}
.usp-inner { display: grid; height: 100%; transform-style: preserve-3d;
             transition: transform .8s cubic-bezier(.2, .75, .15, 1); }
.usp-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .55rem;
            padding: clamp(1.5rem, 2.4vw, 2rem); border-radius: 0 1.75rem 0 1.75rem;
            -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.usp-front { background: #4a2a16; border: 1px solid rgba(240, 238, 233, .16); }          /* cloud text 10.6:1 */
.usp-back { transform: rotateY(180deg); background: var(--mint); color: var(--surface-chocolate-dark);  /* 6.5:1 */
            border: 1px solid var(--mint-7); }
.usp-card .fly-end { width: 3.5rem; margin-bottom: 1.1rem; }
.usp-back-mark { display: block; width: 3.5rem; margin-bottom: 1.1rem; color: #fff; }
.usp-back-mark svg { display: block; width: 100%; height: 100%; }
.usp-back .usp-n { color: var(--surface-chocolate-dark); }
.usp-back-h { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.usp-link { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem;
            font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .06em;
            text-transform: uppercase; text-decoration: none; color: var(--surface-chocolate-dark);
            border-bottom: 2px solid var(--surface-chocolate-dark); }
.usp-go { width: 1.05rem; height: 1.05rem; transition: transform .18s; }
.usp-link:hover .usp-go { transform: translateX(4px); }
.usp-link:focus-visible { outline: 2px solid var(--surface-chocolate-dark); outline-offset: 4px; }

.usp-card:hover .usp-inner, .usp-card:focus-within .usp-inner, .usp-card.is-flipped .usp-inner { transform: rotateY(180deg); }
.usp-card:hover, .usp-card:focus-within, .usp-card.is-flipped { outline-color: var(--mint); outline-offset: 7px; }

/* The flying pieces turn blue on the way down and hand over to the card's own
   copy once they land, so the card can turn over with its piece on it. */
.fly-piece.is-blue path { fill: #0086F9; stroke: #0086F9; }
.fly-piece.is-landed { visibility: hidden; }
html.fly-on .fly-slot.fly-end.is-shown svg { visibility: visible; }

@media (max-width: 960px) {
  .usp-card, .usp-card:nth-child(odd) { padding: 0; border: 0; }
}
@media (max-width: 560px) {
  .usp-card, .usp-card:nth-child(odd), .usp-card:first-child { padding: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .usp-inner, .usp-card:hover .usp-inner, .usp-card:focus-within .usp-inner, .usp-card.is-flipped .usp-inner { transform: none; }
  .usp-back { transform: none; opacity: 0; transition: opacity .2s; }
  .usp-card:hover .usp-back, .usp-card:focus-within .usp-back, .usp-card.is-flipped .usp-back { opacity: 1; }
}
.usp-card .usp-back-h { font-size: 1.4rem; color: var(--surface-chocolate-dark); }

/* ==========================================================================
   Services: hover card and zoom. On desktop a brand-coloured card glides
   beside the row under the pointer; a click grows that card to fill the
   screen with the service in full (the same move as the About finale).
   On touch screens a tap grows the row itself. Without JavaScript the
   rows stay a plain open-and-close list.
   ========================================================================== */
.svc-hero h1 { max-width: 15ch; }
.svc-hero .lead { max-width: 40rem; }
.svc-layout { position: relative; }
.svc-layout .svc-list { position: relative; max-width: 48rem; }
html.svc-hover .svc-layout .svc-list { max-width: 64rem; }
html.svc-hover .svc summary { cursor: pointer; }
html.svc-enhanced .svc summary:hover .svc-arrow { transform: translateX(4px); }
html.svc-enhanced .svc[open] .svc-arrow { transform: none; }

/* Brand tones per service (text contrast noted). */
.tone-1 { --tone-bg: var(--azure-7); --tone-ink: #fff; }                                   /* 6.1:1 */
.tone-2 { --tone-bg: var(--mint); --tone-ink: var(--surface-chocolate-dark); }            /* 6.5:1 */
.tone-3 { --tone-bg: var(--surface-chocolate-dark); --tone-ink: var(--surface-cloud); }   /* 12.9:1 */
.tone-4 { --tone-bg: var(--lilac); --tone-ink: var(--surface-chocolate-dark); }           /* 10.9:1 */
.tone-5 { --tone-bg: var(--pumpkin); --tone-ink: var(--surface-chocolate-dark); }         /* 4.8:1 */
.tone-6 { --tone-bg: var(--sage); --tone-ink: var(--surface-chocolate-dark); }            /* 11:1 */

/* The preview card follows the cursor (positioned by site.js); clicks pass through to the row. */
.svc-preview { position: fixed; left: 0; top: 0; z-index: 120; width: 19rem; display: none; pointer-events: none; will-change: transform; }
html.svc-hover .svc-preview { display: block; }
.svc-card {
  position: relative; min-height: 17.5rem; overflow: hidden;
  display: flex; flex-direction: column; padding: 2rem 2rem 1.75rem;
  border-radius: 0 2.25rem 0 2.25rem; background: var(--tone-bg, var(--azure-7)); color: var(--tone-ink, #fff);
  box-shadow: 0 30px 60px -36px rgba(62, 31, 11, .6);
  opacity: 0; transform: scale(.82) rotate(-2deg); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, background-color .35s ease, color .35s ease;
}
.svc-card.is-left { transform-origin: 100% 50%; transform: scale(.82) rotate(2deg); }
.svc-card.is-on { opacity: 1; transform: none; }
.svc-card-mark { position: absolute; top: -2.25rem; right: -2.25rem; width: 10rem; opacity: .2; }
.svc-card-mark svg { display: block; width: 100%; height: auto; }
.svc-card-n { font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: .82; font-size: 4.75rem; }
.svc-card-t { margin-top: auto; font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: 1; font-size: 1.75rem; }
.svc-card-l { margin: .7rem 0 1.25rem; font-size: .95rem; line-height: 1.5; }
.svc-card-go { white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; font-family: "Barlow Condensed", sans-serif;
               font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.svc-card-go svg { width: 1rem; height: 1rem; transition: transform .18s; }
.svc-card:hover .svc-card-go svg { transform: translateX(4px); }
.svc-card > * { transition: opacity .25s ease; }
.svc-card.is-swapping > :not(.svc-card-mark) { opacity: 0; }

/* The zoomed view. */
html.svc-zoom-open { overflow: hidden; }
.svc-zoom {
  position: fixed; inset: 0; z-index: 160; overflow-y: auto; overscroll-behavior: contain;
  background: var(--tone-bg); color: var(--tone-ink);
  clip-path: inset(0px 0px 0px 0px round 0px);
  transition: clip-path .75s cubic-bezier(.7, 0, .2, 1);
}
.svc-zoom[hidden] { display: none; }
.svc-zoom-inner { min-height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                  gap: clamp(2rem, 6vw, 6rem); align-content: center; padding: clamp(5.5rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5rem);
                  opacity: 0; transform: translateY(1.5rem);
                  transition: opacity .2s ease, transform .3s ease; }
.svc-zoom.is-open .svc-zoom-inner { opacity: 1; transform: none;
                                     transition: opacity .45s ease .4s, transform .7s cubic-bezier(.2, .8, .2, 1) .35s; }
.svc-zoom-n { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: .8;
              font-size: clamp(7rem, 17vw, 15rem); }
.svc-zoom-t { margin: 1.25rem 0 0; color: inherit; font-size: clamp(2.6rem, 5vw, 4.75rem); line-height: .95; max-width: 12ch; }
.svc-zoom-body { align-self: end; }
.svc-zoom .svc-lead { font-size: clamp(1.2rem, 1.9vw, 1.5rem); max-width: 34rem; margin-bottom: 2rem; }
.svc-zoom .svc-points { gap: .9rem 2rem; margin-bottom: 2.25rem; font-size: 1.05rem; }
.svc-zoom .svc-points li { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding-top: .9rem; }
.svc-zoom .svc-points li::before { background: currentColor; }
.svc-zoom .svc-link { color: inherit; border-bottom-color: currentColor; font-size: 1.25rem; }
.svc-zoom-close { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 2; width: 3.25rem; height: 3.25rem; border-radius: 50%;
                  display: grid; place-items: center; cursor: pointer; color: inherit; background: transparent;
                  border: 1.5px solid currentColor; opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.svc-zoom.is-open .svc-zoom-close { opacity: 1; transition-delay: .45s; }
.svc-zoom-close:hover { transform: rotate(90deg); }
.svc-zoom-close:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.svc-zoom-close svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 860px) {
  .svc-zoom-inner { grid-template-columns: 1fr; align-content: start; }
  .svc-zoom .svc-points { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-zoom { transition: opacity .2s ease; clip-path: none !important; opacity: 0; }
  .svc-zoom.is-open { opacity: 1; }
  .svc-card { transition: opacity .2s ease; }
}
.svc-hero h1 { max-width: 21ch; }
.svc-card-mark { top: auto; bottom: -3.5rem; right: -3.5rem; width: 13rem; opacity: .13; }
@media (max-width: 860px) {
  html.nav-glass .nav { background: rgba(248, 247, 244, .9); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
}

/* Eight navigation items: tighter spacing, and the menu folds earlier. */
.nav { gap: 1.55rem; }
.nav a { font-size: 1.08rem; }
html.nav-glass .header-inner { width: min(100% - 1.5rem, 74rem); }
html.nav-glass .nav { gap: 1.35rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Course finder and scholarship finder
   ========================================================================== */
.finder-hero { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.finder-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.finder-hero h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: .9; margin-bottom: 1rem; }
.finder-hero .lead { max-width: 40rem; margin: 0; }
.finder-count { margin: 0; text-align: right; font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; line-height: 1.25;
                letter-spacing: .02em; color: var(--chocolate); }
.finder-count b { font-size: 2.6rem; font-weight: 700; color: var(--surface-chocolate-dark); margin-right: .2rem; }
.finder-body { padding-bottom: clamp(4rem, 8vw, 6rem); }

/* Eligibility strip */
.elig { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; flex-wrap: wrap;
        padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 0 2rem 0 2rem; margin-bottom: 2rem; }
.elig-empty { background: var(--azure-7); color: #fff; }                                   /* 6.1:1 */
.elig-set { background: var(--lilac); color: var(--surface-chocolate-dark); }              /* 10.9:1 */
.elig-copy { max-width: 46rem; }
.elig-h { margin: 0 0 .4rem; color: inherit; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; }
.elig p { margin: 0; }
.elig-empty .btn-primary { background: var(--mint); color: var(--surface-chocolate-dark); }
.elig-empty .btn-primary:hover { background: var(--mint-5); }
.elig-profile { font-size: .98rem; }
.elig-actions { display: flex; align-items: center; gap: 1rem; }
.link-quiet { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
              text-decoration: underline; text-underline-offset: .2em; }

/* Destination tabs */
.finder-tabs { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .1rem .6rem; margin-bottom: 1rem; scrollbar-width: thin; }
.finder-tabs [role="tab"] { flex: none; display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .65rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--surface-cloud-dark); background: var(--surface-cloud-light);
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .04em; color: var(--surface-chocolate-dark);
  min-height: 44px; transition: background .2s, border-color .2s, color .2s; }
.finder-tabs [role="tab"] b { font-weight: 600; font-size: .95rem; opacity: .7; }
.finder-tabs [role="tab"]:hover { border-color: var(--azure-7); }
.finder-tabs [role="tab"][aria-selected="true"] { background: var(--surface-chocolate-dark); border-color: var(--surface-chocolate-dark); color: var(--surface-cloud); }
.finder-tabs [role="tab"]:focus-visible { outline: 3px solid var(--azure-7); outline-offset: 2px; }

/* Filter bar */
.finder-bar { display: grid; grid-template-columns: minmax(16rem, 1.4fr) 3fr; gap: 1rem; align-items: end;
              padding: 1.1rem; border-radius: 0 1.5rem 0 1.5rem; background: var(--surface-cloud); }
.fb-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.fb { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; position: relative; }
.fb > span { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }
.fb select, .fb input, .ef-field input, .ef-field select, .ef-field textarea {
  width: 100%; min-height: 46px; padding: .6rem .8rem; border: 1.5px solid var(--surface-cloud-dark); border-radius: .5rem;
  background: var(--surface-cloud-light); font: inherit; font-size: .98rem; color: var(--surface-chocolate-dark); }
.fb select:focus-visible, .fb input:focus-visible, .ef-field :is(input, select, textarea):focus-visible { outline: 3px solid var(--azure-7); outline-offset: 1px; border-color: var(--azure-7); }
.fb-search svg { position: absolute; left: .85rem; bottom: .8rem; width: 1.15rem; height: 1.15rem; color: var(--chocolate); pointer-events: none; }
.fb-search input { padding-left: 2.6rem; }

.finder-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.1rem 0 .4rem; min-height: 44px; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem .35rem .8rem; min-height: 36px; border-radius: 999px;
        border: 0; background: var(--sage); color: var(--surface-chocolate-dark); font: inherit; font-size: .9rem; cursor: pointer; }
.chip svg { width: .9rem; height: .9rem; }
.chip:hover { background: var(--surface-cloud-dark); }
.chip-reset { background: none; border: 0; font: inherit; font-size: .9rem; color: var(--azure-7); text-decoration: underline; cursor: pointer; padding: .4rem; }
.finder-tools { display: flex; align-items: center; gap: 1.25rem; }
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .95rem; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--surface-cloud-dark); transition: background .2s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff;
                       box-shadow: 0 1px 3px rgba(62, 31, 11, .3); transition: transform .2s; }
.switch input:checked + .switch-track { background: var(--mint-7); }
.switch input:checked + .switch-track::after { transform: translateX(1.1rem); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--azure-7); outline-offset: 2px; }
.shortlist-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem 1rem; border-radius: 999px; cursor: pointer;
                 border: 1.5px solid var(--surface-chocolate-dark); background: none; font: inherit; font-size: .95rem; color: inherit; }
.shortlist-btn svg { width: 1.05rem; height: 1.05rem; }
.shortlist-btn b { min-width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-chocolate-dark); color: var(--surface-cloud); font-size: .8rem; }
.finder-showing { margin: .25rem 0 1rem; font-size: .92rem; color: var(--chocolate); }

/* Results */
.finder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.fc { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.4rem 1.25rem; border-radius: 0 1.6rem 0 1.6rem;
      background: #fff; border: 1px solid var(--surface-cloud-dark); transition: box-shadow .25s, transform .25s; }
.fc:hover { box-shadow: 0 18px 40px -28px rgba(62, 31, 11, .55); transform: translateY(-2px); }
.fc-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* Official university logos (finder cards, quick view, detail pages). */
.fc-logo { display: block; height: 3.25rem; width: auto; max-width: 11rem; object-fit: contain; object-position: left center; margin: .9rem 0 .2rem; }
.qv-logo { display: block; height: 3rem; width: auto; max-width: 13rem; object-fit: contain; object-position: left center; margin: .25rem 0 .9rem; }
.detail-logo { display: block; height: clamp(3rem, 5vw, 4rem); width: auto; max-width: 16rem; object-fit: contain; object-position: left center; margin: 0 0 1.25rem; }
.tag { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; background: var(--surface-cloud);
       font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: .88rem; letter-spacing: .05em; color: var(--surface-chocolate-dark); text-decoration: none; }
.tag-dest { background: var(--surface-chocolate-dark); color: var(--surface-cloud); }
.tag-quiet { background: transparent; border: 1px solid var(--surface-cloud-dark); }
.tag-sch { background: var(--lilac); }
.tag-sch:hover { background: var(--azure-2, #d7e6fb); }
.fc-save { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; cursor: pointer; color: var(--chocolate); }
.fc-save svg { width: 1.25rem; height: 1.25rem; }
.fc-save[aria-pressed="true"] { color: var(--azure-7); }
.fc-save[aria-pressed="true"] svg { fill: currentColor; }
.fc-save:hover { background: var(--surface-cloud); }
.fc-field { margin: .4rem 0 0; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .05em; color: var(--azure-7); }
.fc-title { margin: 0; font-size: 1.55rem; line-height: 1.05; }
.fc-title a { text-decoration: none; color: inherit; }
.fc-title a:hover { color: var(--azure-7); }
.fc-uni { margin: 0; font-size: .95rem; color: var(--chocolate); }
.fc-value { margin: .25rem 0 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.15; color: var(--surface-chocolate-dark); }
.fc-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--surface-cloud-dark); font-size: .92rem; }
.fc-facts div { display: contents; }
.fc-facts dt { font-weight: 500; color: var(--chocolate); }
.fc-facts dd { margin: 0; }
.fc-facts small, .qv-facts small, .facts-sub { display: block; font-size: .8rem; color: var(--chocolate); }
.fc-hi { margin: .25rem 0 0; padding: 0; list-style: none; font-size: .9rem; display: grid; gap: .25rem; }
.fc-hi li { display: flex; gap: .5rem; }
.fc-hi li::before { content: ""; flex: none; width: .45rem; height: .45rem; margin-top: .5rem; background: var(--mint-7); border-radius: 0 .2rem 0 .2rem; }
.fc-flags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 500; }
.badge svg { width: .95rem; height: .95rem; }
.badge-likely { background: var(--mint); color: var(--surface-chocolate-dark); }          /* 6.5:1 */
.badge-general { background: var(--sage); }
.fc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .4rem; }
.fc-btn { min-height: 44px; border-radius: .6rem; border: 1.5px solid var(--surface-chocolate-dark); background: none; cursor: pointer;
          font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--surface-chocolate-dark); }
.fc-btn:hover { background: var(--surface-cloud); }
.fc-btn-alt { background: var(--azure-7); border-color: var(--azure-7); color: #fff; }
.fc-btn-alt:hover { background: var(--azure-8); border-color: var(--azure-8); }
.fc-btn:focus-visible, .fc-save:focus-visible, .chip:focus-visible, .shortlist-btn:focus-visible { outline: 3px solid var(--azure-7); outline-offset: 2px; }
.fc-full { border-color: var(--mint-7); box-shadow: inset 0 3px 0 var(--mint); }

.finder-more { display: flex; justify-content: center; margin-top: 2rem; }
.finder-empty { padding: clamp(2rem, 5vw, 3.5rem); border-radius: 0 2rem 0 2rem; background: var(--surface-cloud); max-width: 46rem; }
.finder-empty-h { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.05; margin: 0 0 .75rem; }
.finder-note { margin: 2.5rem 0 0; max-width: 46rem; font-size: .9rem; color: var(--chocolate); }
.finder-cross { margin: 1rem 0 0; }

/* Dialogs (native <dialog>: focus is kept inside, Escape closes, the page behind is inert) */
.fd { width: min(100% - 1.5rem, 46rem); max-height: min(100% - 2rem, 54rem); padding: 0; border: 0; border-radius: 0 2rem 0 2rem;
      background: var(--surface-cloud-light); color: var(--surface-chocolate-dark); box-shadow: 0 40px 80px -30px rgba(62, 31, 11, .6); }
.fd::backdrop { background: rgba(30, 15, 5, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fd[open] { animation: fd-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes fd-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.fd-inner { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); }
.fd-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
            border: 1.5px solid currentColor; background: none; cursor: pointer; color: inherit; }
.fd-close svg { width: 1.1rem; height: 1.1rem; }
.fd-title, .qv-title { margin: 0 3rem .6rem 0; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; }
.fd-lead { margin: 0 0 1.25rem; }
.qv-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 3rem 1rem 0; }
.qv-uni { margin: 0 0 1.25rem; color: var(--chocolate); }
.qv-value { margin: 0 0 1.25rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.qv-facts { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .5rem 1.25rem; margin: 0 0 1.25rem; padding: 1rem 0; border-top: 1px solid var(--surface-cloud-dark); border-bottom: 1px solid var(--surface-cloud-dark); font-size: .95rem; }
.qv-facts div { display: contents; }
.qv-facts dt { font-weight: 500; color: var(--chocolate); }
.qv-facts dd { margin: 0; }
.qv-h { font-size: 1.35rem; margin: 1.5rem 0 .6rem; }
.qv-overview { margin: 1.25rem 0 0; }
.qv-small { font-size: .85rem; color: var(--chocolate); }
.qv-awards { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.qv-awards li { display: flex; flex-direction: column; padding: .6rem .8rem; border-radius: .5rem; background: var(--lilac); }
.qv-awards a { font-weight: 500; }
.qv-awards span { font-size: .88rem; }
.qv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.qv-check { padding: 1.1rem 1.25rem; border-radius: 0 1.25rem 0 1.25rem; background: var(--surface-cloud); margin: 0 0 .5rem; }
.qv-likely, .qv-general { background: color-mix(in srgb, var(--mint) 22%, var(--surface-cloud-light)); }
.qv-check-h { margin: 0 0 .6rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.3rem; }
.qv-check ul { margin: 0 0 .5rem; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .93rem; }
.ck { display: flex; gap: .55rem; align-items: flex-start; }
.ck svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
.ck-ok svg { color: var(--mint-7); }
.ck-no svg { color: var(--pumpkin-7, #b84f00); }
.ck-na svg { color: var(--chocolate); }
.qv-check-empty { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.qv-check-empty p { margin: 0; }

/* Forms inside dialogs */
.ef { display: grid; gap: 1.1rem; }
.ef fieldset { margin: 0; padding: 0 0 1.1rem; border: 0; border-bottom: 1px solid var(--surface-cloud-dark); display: grid; gap: .8rem; }
.ef legend { padding: 0; margin-bottom: .7rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.25rem; }
.ef-opt { font-weight: 400; font-size: .9rem; font-family: "Lexend Deca", sans-serif; color: var(--chocolate); }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
             border: 1.5px solid var(--surface-cloud-dark); background: #fff; font-size: .95rem; transition: background .15s, border-color .15s; }
.pill input:checked + span { background: var(--surface-chocolate-dark); border-color: var(--surface-chocolate-dark); color: var(--surface-cloud); }
.pill input:focus-visible + span { outline: 3px solid var(--azure-7); outline-offset: 2px; }
.ef-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; }
.ef-row[hidden], .ef-field[hidden] { display: none; }
.ef-field { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; font-weight: 500; }
.ef-help { margin: 0; font-size: .85rem; color: var(--chocolate); }
.ef-check { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.ef-check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--azure-7); flex: none; }
.ef-hp { position: absolute; left: -9999px; }
.ef-error { margin: 0; padding: .75rem 1rem; border-radius: .5rem; background: color-mix(in srgb, var(--pumpkin) 18%, #fff); font-size: .92rem; }
.ef-actions { display: flex; justify-content: flex-end; }
.sl { margin: 0 0 .5rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.sl li { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--surface-cloud-dark); }
.sl li span { grid-column: 1; font-size: .88rem; color: var(--chocolate); }
.sl li button { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: .88rem; }

/* Generated course and scholarship pages */
.detail-hero { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem); }
.detail-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: .92; max-width: 20ch; margin: .75rem 0 .6rem; }
.detail-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.detail-uni { margin: 0 0 1.5rem; font-size: 1.15rem; color: var(--chocolate); }
.detail-value { margin: -0.5rem 0 1.5rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.8rem; }
.detail-body { padding-top: clamp(2.5rem, 5vw, 4rem); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.detail-main h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 2rem 0 .75rem; }
.detail-main h2:first-child { margin-top: 0; }
.detail-main h3 { font-size: 1.3rem; margin: 1.5rem 0 .6rem; }
.detail-side { position: sticky; top: calc(var(--header-h, 75px) + 1.5rem); padding: 1.5rem; border-radius: 0 1.75rem 0 1.75rem; background: var(--surface-cloud); display: grid; gap: 1.1rem; }
.facts { display: grid; gap: .85rem; margin: 0; }
.facts div { display: grid; gap: .15rem; }
.facts dt { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--chocolate); }
.facts dd { margin: 0; }
.detail-main .facts { padding: 1rem 0; border-top: 1px solid var(--surface-cloud-dark); }
.detail-awards { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.detail-awards li { display: flex; flex-direction: column; padding: .85rem 1rem; border-radius: 0 1rem 0 1rem; background: var(--lilac); }
.detail-awards span { font-size: .9rem; }
.muted.small, .small { font-size: .88rem; }

@media (max-width: 1100px) { .finder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .finder-hero-inner { grid-template-columns: 1fr; }
  .finder-count { text-align: left; }
  .finder-bar { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}
@media (max-width: 620px) {
  .finder-grid { grid-template-columns: 1fr; }
  .fb-selects { grid-template-columns: 1fr 1fr; }
  .finder-meta { align-items: flex-start; }
  .fd { width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .fd[open] { animation: none; } .fc { transition: none; } }
.elig-note { margin-top: .5rem !important; font-size: .9rem; }

/* With eight items the full navigation needs about 1000px; below that the menu button takes over. */
.brand { flex: none; }
@media (max-width: 1000px) {
  .nav {
    position: fixed; inset: 0 0 auto; top: 4.7rem;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-cloud-light); border-bottom: 1px solid var(--surface-cloud-dark);
    padding: .5rem 1.25rem 1.5rem;
    transform: translateY(-120%); transition: transform .3s cubic-bezier(.2,.8,.3,1);
    box-shadow: 0 20px 40px -30px rgba(62,31,11,.5);
  }
  .nav.open { transform: none; }
  .nav a { padding: .9rem 0; border-bottom: 1px solid var(--surface-cloud-dark); font-size: 1.3rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: block; }
  html.nav-glass .nav { top: 4.6rem; left: .5rem; right: .5rem; border-radius: 1.25rem; border: 1px solid var(--surface-cloud-dark);
                        background: rgba(248, 247, 244, .9); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
  html.nav-glass.nav-dark .nav a { color: inherit; }
  html.nav-glass.nav-dark .nav a[aria-current="page"] { color: var(--azure-7); border-color: var(--surface-cloud-dark); }
  html.nav-glass .header-inner { width: min(100% - 1rem, 64rem); }
}

/* At a glance, back of the card: the dark card again, with the logo's green quarter.
   The flip mirrors the blue landing shape into the green one, as in the logo. */
.usp-back { background: #4a2a16; color: var(--surface-cloud); border: 2px solid var(--mint); }   /* cloud text 10.6:1 */
.usp-back .usp-n { color: var(--surface-cloud); }
.usp-card .usp-back-h { color: var(--mint); }                                                     /* 6.5:1 */
.usp-link { color: var(--mint); border-bottom-color: var(--mint); }
.usp-link:focus-visible { outline-color: var(--mint); }
.usp-back-mark { color: inherit; }
.usp-back-mark path { stroke: #00C19F; stroke-width: .6; stroke-linejoin: round; }
.usp-card:hover, .usp-card:focus-within, .usp-card.is-flipped { outline-color: transparent; }

/* --- At a glance: labels blue until hovered; the flipped box takes the green mark's shape --- */
.usp-front h3, .usp-card .usp-front h3 { color: var(--azure-5); }                          /* 4.75:1 on #4a2a16 */
.usp-back { border-radius: 1.75rem 0 1.75rem 0; }

/* --- Universities we recommend: cards stack over one another on scroll ------------------
   Each card sticks a little lower than the one before, so a sliver of every earlier card
   stays visible; site.js eases each covered card back slightly as the next slides over it. */
.uni-stack { max-width: 62rem; margin-inline: auto; }
.uni-card {
  position: sticky; top: calc(var(--header-h, 5.5rem) + 1.25rem + var(--i, 0) * 1.1rem);
  display: grid; grid-template-columns: 14rem minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  min-height: clamp(15rem, 30vh, 19rem); margin-bottom: 10vh;
  background: #fff; border: 1px solid var(--surface-cloud-dark);
  box-shadow: 0 -22px 48px -36px rgba(62, 31, 11, .55);
  transform-origin: 50% 0; will-change: transform;
}
.uni-card:last-child { margin-bottom: 0; }
.uni-card:hover { transform: none; }
.uni-card .uni-logo { margin: 0; height: 5.5rem; }
.uni-card .uni-logo img { max-width: 100%; }
.uni-card-body { display: flex; flex-direction: column; gap: .9rem; }
.uni-card h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0; }
@media (max-width: 700px) {
  .uni-card { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; min-height: 0; margin-bottom: 7vh;
              top: calc(var(--header-h, 5rem) + .75rem + var(--i, 0) * .7rem); }
  .uni-card .uni-logo { height: 4rem; }
}