: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; }
.btn-ghost:hover span { color: var(--surface-cloud-light); }
/* on dark surfaces the ghost fills light with a dark label */
.band-chocolate .btn-ghost:hover,
.band-pumpkin  .btn-ghost:hover,
.band-azure    .btn-ghost:hover,
.sch-cta       .btn-ghost:hover,
.cookie-bar    .btn-ghost:hover,
.aware-pop     .btn-ghost:hover { background: var(--surface-cloud); border-color: var(--surface-cloud); color: var(--surface-chocolate-dark); }
.band-chocolate .btn-ghost:hover span,
.band-pumpkin  .btn-ghost:hover span,
.band-azure    .btn-ghost:hover span,
.sch-cta       .btn-ghost:hover span,
.cookie-bar    .btn-ghost:hover span,
.aware-pop     .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, section.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, .country-head {
  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);
  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 1080px; below that the menu button takes over. */
.brand { flex: none; }
.nav a { white-space: nowrap; }
@media (max-width: 1080px) {
  .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; }
}

/* --- Universities page: logo grids inside each collapsible country -------------------- */
.uni-grid { list-style: none; margin: 0 0 1.75rem; padding: 0;
            display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; }
.uni-tile { display: flex; flex-direction: column; gap: .7rem; padding: 1rem .9rem .9rem;
            background: #fff; border: 1px solid var(--surface-cloud-dark); border-radius: 0 1.1rem 0 1.1rem;
            transition: border-color .2s, transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s; }
.uni-tile:hover { border-color: var(--azure); transform: translateY(-2px); box-shadow: 0 14px 30px -24px rgba(62, 31, 11, .5); }
.uni-tile-logo { height: 4.25rem; display: flex; align-items: center; justify-content: center; }
.uni-tile-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.uni-tile-logo--dark { background: var(--tile); border-radius: 0 .7rem 0 .7rem; padding: .55rem .7rem; }
.uni-tile-logo--text { border-radius: 0 .7rem 0 .7rem; background: var(--surface-cloud); color: var(--surface-chocolate-dark);
                       font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: .08em; }
.uni-tile-name { font-size: .84rem; line-height: 1.3; text-align: center; color: var(--surface-chocolate-dark); text-wrap: balance; }
@media (max-width: 560px) {
  .uni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .uni-tile-logo { height: 3.5rem; }
}

/* --- Networks & application portals: each card in that organisation's own colours ------- */
.reach .net-strip, .net-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1rem);
                                background: none; border: 0; border-radius: 0; overflow: visible; }
.net-card, .net-card:hover { color: var(--ink, #fff); background: var(--b, var(--azure-7)); }
.net-card { position: relative; min-height: 0; padding: 1rem 1rem 1.15rem; border-radius: 0 1.35rem 0 1.35rem;
            display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .9rem;
            transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s; }
.net-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .7); }
.net-card:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.net-plate { height: 5.25rem; display: flex; align-items: center; justify-content: center; padding: .85rem 1rem;
             background: #fff; border-radius: 0 .9rem 0 .9rem; }
.net-plate--bare { background: transparent; padding-inline: 0; }
.net-plate img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.net-meta { display: flex; flex-direction: column; gap: .15rem; padding-right: 1.6rem; }
.net-card .net-name { font-size: 1.2rem; letter-spacing: .04em; line-height: 1.1; }
.net-kind { font-size: .82rem; opacity: .85; }
.net-card .net-go { position: absolute; right: 1rem; bottom: 1.2rem; opacity: .75; transform: none; }
.net-card:hover .net-go { opacity: 1; transform: translateX(3px); }
@media (max-width: 960px) { .reach .net-strip, .net-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .net-plate { height: 4.25rem; } }

/* --- Floating contact button ------------------------------------------------------------ */
.contact-fab { position: fixed; right: clamp(.9rem, 2.5vw, 1.75rem); bottom: calc(clamp(.9rem, 2.5vw, 1.75rem) + var(--cf-lift, 0px));
               z-index: 110; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; transition: bottom .3s ease; }
.cf-btn { width: 3.75rem; height: 3.75rem; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
          background: var(--azure-7); color: #fff; box-shadow: 0 16px 34px -14px rgba(14, 40, 90, .65); transition: transform .2s, background .2s; }
.cf-btn:hover { transform: translateY(-2px); background: var(--azure-8); }
.cf-btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.cf-ico { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .2s, transform .25s; }
.cf-ico svg { width: 1.6rem; height: 1.6rem; }
.cf-ico-close { opacity: 0; transform: rotate(-90deg); }
.contact-fab.is-open .cf-ico-open { opacity: 0; transform: rotate(90deg); }
.contact-fab.is-open .cf-ico-close { opacity: 1; transform: none; }
.cf-panel { width: min(19rem, calc(100vw - 2rem)); padding: .6rem; border-radius: 0 1.4rem 0 1.4rem;
            background: var(--surface-chocolate-dark); color: var(--surface-cloud); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .6);
            animation: cf-in .25s cubic-bezier(.2, .8, .3, 1); }
.cf-panel[hidden] { display: none; }
@keyframes cf-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.cf-h { margin: .35rem .6rem .5rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--mint); }
.cf-item { display: flex; align-items: center; gap: .8rem; padding: .65rem .7rem; border-radius: 0 .8rem 0 .8rem;
           color: var(--surface-cloud); text-decoration: none; font-size: .95rem; line-height: 1.25; transition: background .15s; }
.cf-item:hover, .cf-item:focus-visible { background: rgba(240, 238, 233, .1); outline: none; }
.cf-item svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--mint); }
.cf-item small { display: block; font-size: .8rem; opacity: .75; }
.cf-book { margin-top: .25rem; background: var(--mint); color: var(--surface-chocolate-dark); }
.cf-book svg { color: var(--surface-chocolate-dark); }
.cf-book:hover, .cf-book:focus-visible { background: var(--mint-4); }
@media print { .contact-fab { display: none; } }
@media (prefers-reduced-motion: reduce) { .cf-panel { animation: none; } .cf-ico { transition: none; } }

/* Service 07 and the Casita partner note */
.tone-7 { --tone-bg: var(--azure-8); --tone-ink: #fff; }                                   /* 9.6:1 */
.svc-partner { margin: 0 0 1.25rem; max-width: 46rem; font-size: .98rem; line-height: 1.55; }
.svc-actions { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; }

/* Networks: five across, with taller logo panels so every logo shows in full */
.reach .net-strip, .net-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.net-plate { height: 6.75rem; padding: .7rem .8rem; }
.net-plate--bare { padding-inline: .25rem; }
@media (max-width: 1180px) { .reach .net-strip, .net-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .reach .net-strip, .net-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .net-plate { height: 5.5rem; } }
.uni-tile-link { display: contents; color: inherit; text-decoration: none; }
.uni-tile:has(.uni-tile-link):hover .uni-tile-name { text-decoration: underline; }

/* --- Home hero: Russell Group badge and destination flags ------------------------------- */
.hero-badges { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.hero-badges-k { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.05rem;
                 letter-spacing: .08em; text-transform: uppercase; color: var(--surface-chocolate-dark); }
.hero-badges-row { display: grid; grid-template-columns: 1fr 1fr; width: max-content; max-width: 100%; gap: .45rem; } /* equal widths */
.hb { display: inline-flex; align-items: center; justify-content: center; padding: .32rem .75rem; border-radius: 0 .6rem 0 .6rem;
      font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
      text-decoration: none; transition: transform .2s; }
.hb:hover { transform: translateY(-2px); }
.hb-rg { background: var(--azure-7); color: #fff; }                                       /* 6.1:1 */
.hb-us { background: var(--surface-chocolate-dark); color: var(--surface-cloud); }
.hero-flags { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.hero-flags img { display: block; width: 2.5rem; height: 1.6rem; object-fit: cover; border-radius: 0 .35rem 0 .35rem;
                  box-shadow: 0 0 0 1px rgba(62, 31, 11, .15); }

/* --- Universities we recommend: each card carries its university's colour --------------- */
.uni-card .uni-logo { padding: .9rem; border-radius: 0 1rem 0 1rem; background: color-mix(in srgb, var(--u, var(--azure)) 7%, #fff); height: 7rem; }
.uni-card h3 { color: color-mix(in srgb, var(--u, var(--surface-chocolate-dark)) 72%, var(--surface-chocolate-dark)); }
.uni-card .card-meta { color: var(--u, inherit); font-weight: 600; }
@media (max-width: 700px) { .uni-card .uni-logo { height: 5.5rem; } }

/* --- Logo slider: two rows drifting in opposite directions, paused on hover ------------- */
.logo-slider { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.logo-marquee { position: relative; display: flex; overflow: hidden; gap: 1rem; padding: .5rem 0;
                -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lm-track { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex: none; min-width: max-content;
            animation: lm-scroll 70s linear infinite; }
.logo-marquee--rev .lm-track { animation-direction: reverse; animation-duration: 80s; }
.logo-marquee:hover .lm-track, .logo-marquee:focus-within .lm-track { animation-play-state: paused; }
.lm-track li { flex: none; width: 10.5rem; height: 5.25rem; padding: .7rem .9rem; display: flex; align-items: center; justify-content: center;
               background: #fff; border-radius: 0 1rem 0 1rem; }
.lm-track img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@keyframes lm-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 1rem)); } }
.logo-slider-more { margin: 1.25rem 0 0; }
.logo-slider-more a { color: var(--mint); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .lm-track { animation: none; }
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .lm-track[aria-hidden="true"] { display: none; }
}
@media (max-width: 560px) { .lm-track li { width: 8.5rem; height: 4.5rem; } }

/* --- Finders: bigger, readable logos; search on its own row above the filters ------------ */
.fc-logo { height: 4rem; max-width: 13rem; margin: 1rem 0 .3rem; }
.qv-logo { height: 4rem; max-width: 15rem; }
.finder-bar { grid-template-columns: 1fr; }
.fb-selects { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }

/* Universities page search */
.uni-search { margin: 0 0 1.5rem; max-width: 34rem; }
.uni-search .fb-search { position: relative; }
.uni-search input { width: 100%; }
.uni-search-n { margin: .6rem 0 0; font-size: .95rem; color: var(--surface-chocolate-dark); min-height: 1.4em; }
details.country[hidden], section.country[hidden] { display: none; }
@media (max-width: 760px) { .net-card .net-name { font-size: 1rem; overflow-wrap: anywhere; } .net-kind { font-size: .78rem; } }

/* --- Documents checklist -------------------------------------------------------------- */
.dc-wrap { max-width: 56rem; }
.dc-bar { position: sticky; top: calc(var(--header-h, 5rem) + .75rem); z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
          justify-content: space-between; gap: 1rem 2rem; padding: 1rem 1.25rem; margin-bottom: .9rem;
          background: var(--surface-cloud-light); border: 1px solid var(--surface-cloud-dark); border-radius: 0 1.25rem 0 1.25rem;
          box-shadow: 0 14px 30px -26px rgba(62, 31, 11, .5); }
.dc-progress { flex: 1 1 16rem; }
.dc-progress-t { margin: 0 0 .5rem; font-size: 1rem; }
.dc-meter { height: .55rem; border-radius: 999px; background: var(--surface-cloud-dark); overflow: hidden; }
.dc-meter span { display: block; height: 100%; width: 0; background: var(--mint); transition: width .35s ease; }
.dc-actions { display: flex; align-items: center; gap: 1rem; }
.dc-saved { font-size: .9rem; margin: 0 0 2rem; }
.dc-group { margin: 0 0 2.25rem; }
.dc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 3px solid var(--surface-chocolate-dark); padding-bottom: .5rem; }
.dc-head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.dc-count { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--azure-7); white-space: nowrap; }
.dc-intro { margin: .75rem 0 1rem; color: var(--surface-chocolate-dark); opacity: .85; }
.dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dc-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dc-item label { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 1rem; cursor: pointer; background: #fff;
                 border: 1px solid var(--surface-cloud-dark); border-radius: 0 1rem 0 1rem; transition: border-color .15s, background .15s; }
.dc-item label:hover { border-color: var(--azure); }
.dc-item input:focus-visible + label { outline: 3px solid var(--azure-7); outline-offset: 2px; }
.dc-box { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem; border: 2px solid var(--surface-chocolate-dark); border-radius: 0 .4rem 0 .4rem;
          display: grid; place-items: center; transition: background .15s, border-color .15s; }
.dc-item.is-done .dc-box { background: var(--mint); border-color: var(--mint); }
.dc-item.is-done .dc-box::after { content: ""; width: .4rem; height: .75rem; border: solid var(--surface-chocolate-dark); border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.dc-item.is-done label { background: color-mix(in srgb, var(--mint) 9%, #fff); border-color: color-mix(in srgb, var(--mint) 55%, #fff); }
.dc-item.is-done .dc-label { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--surface-chocolate-dark) 45%, transparent); }
.dc-text { display: flex; flex-direction: column; gap: .2rem; }
.dc-label { font-weight: 600; color: var(--surface-chocolate-dark); }
.dc-note { font-size: .9rem; color: var(--surface-chocolate-dark); opacity: .78; line-height: 1.45; }
.dc-note a { color: var(--azure-7); }
.dc-cta { margin-top: 2.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface-chocolate-dark); color: var(--surface-cloud); border-radius: 0 1.75rem 0 1.75rem; }
.dc-cta h2 { color: var(--surface-cloud); margin-bottom: .5rem; }
@media print {
  .dc-bar, .dc-saved, .dc-cta, .crumbs, .page-hero .lead { display: none !important; }
  .page-hero { padding: 0 !important; background: none !important; }
  .dc-group { break-inside: avoid; margin-bottom: 1rem; opacity: 1 !important; transform: none !important; }
  .dc-item label { border: 0; padding: .2rem 0; background: none !important; }
  .dc-box { border-color: #000; }
  .dc-note { font-size: .75rem; }
}
@media print {
  .site-header, .header-inner, .cookie-bar, .contact-fab, .site-footer, .skip-link { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .page-hero h1 { font-size: 2.2rem !important; margin: 0 0 .5rem !important; }
}
.dc-print-head { display: none; }
@media print {
  .dc-print-head { display: block; margin: 0 0 1rem; font-size: .8rem; }
  .dc-group { break-inside: auto; }
  .dc-head { break-after: avoid; }
  .dc-item { break-inside: avoid; }
}

/* --- Documents checklist calls to action ------------------------------------ */
.footer-cta { position: relative; display: flex; align-items: center; gap: 1.25rem 1.75rem; flex-wrap: wrap;
  margin-bottom: clamp(2.75rem, 5vw, 3.75rem); padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--surface-cloud) 18%, transparent);
  background: color-mix(in srgb, var(--surface-cloud) 5%, transparent); border-radius: 0 1.75rem 0 1.75rem; }
.footer-cta-ico { flex: none; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 0 1rem 0 1rem;
  background: var(--mint); color: var(--surface-chocolate-dark); }
.footer-cta-ico svg { width: 1.6rem; height: 1.6rem; }
.footer-cta-text { flex: 1 1 18rem; }
.footer-cta-text p { margin: 0; font-size: .97rem; opacity: .82; }
.footer-cta .footer-cta-h { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1.1; opacity: 1; margin-bottom: .3rem; }
.site-footer .footer-cta .btn { opacity: 1; font-size: 1.05rem; }
.site-footer .footer-cta .btn:hover { color: #fff; }
.footer-base ul { flex-wrap: wrap; gap: .6rem 1.5rem; }
@media (max-width: 600px) { .footer-cta .btn { width: 100%; justify-content: center; } }

.step-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: inherit; text-decoration: none;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid currentColor; padding-bottom: .15rem; transition: gap .18s; }
.step-link:hover { gap: .85rem; }
.step-link svg { width: 1.05em; height: 1.05em; }


.contact-card--dc .icon svg { width: 1.4rem; height: 1.4rem; }
.form-status a { color: inherit; }

.side-dc { padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--surface-chocolate-dark) 14%, transparent); }
.side-dc p { margin: 0 0 .75rem; font-size: .95rem; }
.side-dc .side-dc-h { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.3rem; margin-bottom: .3rem; }

@media print { .footer-cta { display: none !important; } }
.btn-row--link { align-items: center; gap: 1rem 1.75rem; }
.btn-row--link .step-link { margin-top: 0; }
.link-arrow svg { width: 1.05em; height: 1.05em; flex: none; }

/* --- Paper plane pointer ------------------------------------------------------------------ */
/* The plane is the pointer: its nose (23.5px, 3.6px into the box) sits on the click point and it turns about it.
   It is a manual popover so it stays in the top layer, above open dialogs. */
.plane-cursor { position: fixed; inset: auto; left: -23.5px; top: -3.6px; margin: 0; padding: 0; border: 0; background: none; overflow: visible;
  width: 26px; height: 26px; z-index: 300; pointer-events: none; transform-origin: 23.5px 3.6px;
  color: var(--azure); opacity: 0; transition: opacity .2s, color .3s; will-change: transform;
  filter: drop-shadow(0 3px 4px rgba(62, 31, 11, .22)); }
.plane-cursor.is-on { opacity: 1; }
.plane-cursor svg { display: block; width: 100%; height: 100%; }
/* site.js sets .plane-on once the plane is flying; text fields keep the system text cursor */
html.plane-on, html.plane-on *, html.plane-on ::backdrop { cursor: none !important; }
html.plane-on :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="color"], [type="file"], [type="image"]),
  textarea, select, [contenteditable]:not([contenteditable="false"])) { cursor: auto !important; }
@media print { .plane-cursor { display: none !important; } }

/* --- Ivy League and Russell Group pages -------------------------------------------------- */
.league-hero .lead { max-width: 44rem; }
.league-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.league-grid--rg { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.league-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.25rem 1.4rem; background: #fff;
  border: 1px solid color-mix(in srgb, var(--surface-chocolate-dark) 10%, transparent); border-radius: 0 1.5rem 0 1.5rem; }
.league-plate { height: 5.25rem; display: grid; place-items: center; margin-bottom: .8rem; }
.league-plate img { max-width: 100%; max-height: 4.4rem; width: auto; height: auto; object-fit: contain; }
.league-grid--rg .league-plate { height: 4.5rem; margin-bottom: .5rem; }
.league-grid--rg .league-plate img { max-height: 3.6rem; }
.league-card h3 { font-size: 1.35rem; line-height: 1.1; margin: 0; }
.league-grid--rg .league-card { padding: 1rem; text-align: center; }
.league-grid--rg .league-card h3 { font-size: 1.05rem; }
.league-place { margin: 0; font-size: .9rem; opacity: .72; }
.league-facts { list-style: none; margin: .9rem 0 0; padding: .9rem 0 0; display: grid; gap: .55rem; font-size: .88rem;
  border-top: 1px solid color-mix(in srgb, var(--surface-chocolate-dark) 10%, transparent); }
.league-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.league-facts span { opacity: .72; }
.league-facts b { font-weight: 600; text-align: right; }
@media (max-width: 1100px) { .league-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .league-grid--rg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .league-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .league-grid--rg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .league-grid { grid-template-columns: 1fr; } .league-grid--rg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Home: Russell Group and Ivy League doors ------------------------------------------- */
.groups-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.group-card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.75rem, 3.5vw, 2.75rem); color: #fff; text-decoration: none;
  border-radius: 0 2.5rem 0 2.5rem; transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.group-card:hover { transform: translateY(-4px); }
.group-card--rg { background: var(--azure-7); }
.group-card--ivy { background: var(--surface-chocolate-dark); color: var(--surface-cloud); }
.group-card h3 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin: 0; color: inherit; }
.group-card p { margin: 0; max-width: 34rem; opacity: .88; }
.group-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .5rem 0 .25rem; }
.group-logos span { height: 4.25rem; display: grid; place-items: center; padding: .6rem .8rem; background: #fff; border-radius: 0 .9rem 0 .9rem; }
.group-logos img { max-width: 100%; max-height: 2.6rem; width: auto; height: auto; object-fit: contain; }
.group-go { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
.group-go svg { width: 1.05em; height: 1.05em; transition: transform .2s; }
.group-card:hover .group-go svg { transform: translateX(4px); }
.group-card--ivy .group-go { color: var(--mint); }
@media (max-width: 860px) { .groups-grid { grid-template-columns: 1fr; } }

/* --- Countries page: open grids, jump bar, Malaysia fees ---------------------------------- */
.country { scroll-margin-top: 6.5rem; }
.country-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.country-jump a { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 0 .8rem 0 .8rem;
  background: #fff; border: 1px solid var(--surface-cloud-dark); color: var(--surface-chocolate-dark); text-decoration: none;
  font-size: .92rem; transition: border-color .18s, color .18s; }
.country-jump a:hover { border-color: var(--azure); color: var(--azure-7); }
.country-jump img { width: 1.35rem; height: auto; border-radius: 0 .2rem 0 .2rem; box-shadow: 0 0 0 1px rgba(62, 31, 11, .12); }
.country-jump b { font-weight: 600; font-size: .8rem; opacity: .6; }
.uni-tile { cursor: pointer; }
.uni-tile:focus-visible, .league-card:focus-visible { outline: 3px solid var(--azure-7); outline-offset: 3px; }
.league-card { cursor: pointer; transition: border-color .18s, transform .18s; }
.league-card:hover { border-color: var(--azure); transform: translateY(-2px); }
.my-fees { margin-top: 2rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 38rem; }
.data-table th, .data-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--surface-cloud-dark); vertical-align: top; }
.data-table thead th { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--chocolate); }
.data-table tbody th { font-weight: 500; }
.data-table td { white-space: nowrap; }
.data-table td:last-child { white-space: normal; }

/* --- Ask dialog: WhatsApp or enquiry --------------------------------------------------- */
dialog.ask { border: 0; padding: 0; background: transparent; max-width: min(100% - 2rem, 30rem); width: 100%; }
dialog.ask::backdrop { background: rgba(30, 15, 5, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ask-card { position: relative; background: var(--surface-cloud-light); border-radius: 0 2rem 0 2rem; padding: clamp(1.5rem, 4vw, 2.25rem); color: var(--surface-chocolate-dark); }
.ask-x { position: absolute; top: .9rem; right: .9rem; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: var(--surface-cloud); color: inherit; cursor: pointer; display: grid; place-items: center; }
.ask-x svg { width: 1.1rem; height: 1.1rem; }
.ask-logo { height: 4.5rem; display: flex; align-items: center; margin-bottom: 1rem; max-width: 14rem; }
.ask-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.ask-h { font-size: clamp(1.45rem, 3.4vw, 1.85rem); margin: 0 2.5rem .6rem 0; line-height: 1.1; text-wrap: balance; }
.ask-p { margin: 0 0 1.5rem; }
.ask-actions { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: 1.25rem; }
.ask-actions .btn { justify-content: space-between; padding-inline: 1.25rem; }
.ask-logo--plate { padding: .7rem 1rem; border-radius: 0 1rem 0 1rem; height: 4.75rem; }
.ask-logo--plate img { filter: none; }
.ask-actions .btn small { white-space: nowrap;  font-family: "Lexend Deca", sans-serif; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .85rem; opacity: .85; }

@media (max-width: 480px) { .ask-actions .btn { flex-direction: column; align-items: flex-start; gap: .15rem; } }

/* --- Checklist: level switch and SOP note ----------------------------------------------- */
.dc-group[hidden] { display: none; }
.dc-level { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 0 0 1rem; }
.dc-level span { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; margin-right: .3rem; }
.dc-level button { border: 1px solid var(--surface-chocolate-dark); background: transparent; color: var(--surface-chocolate-dark); cursor: pointer;
  padding: .55rem 1rem; border-radius: 0 .8rem 0 .8rem; font: inherit; font-weight: 500; }
.dc-level button[aria-pressed="true"] { background: var(--surface-chocolate-dark); color: var(--surface-cloud); }
.dc-note-box { margin-top: 2rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--pumpkin); color: var(--surface-chocolate-dark); border-radius: 0 1.5rem 0 1.5rem; }
.dc-note-box h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 .5rem; }
.dc-note-box p { margin: 0; max-width: 46rem; }
@media print { .dc-level { display: none; } .dc-note-box { background: none; border: 1px solid #000; } }
.moi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--surface-cloud-dark); }
.moi-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--surface-cloud-dark); }
.moi-list b { font-weight: 500; }
.moi-list span { font-size: .9rem; opacity: .75; text-align: right; }

/* --- Home: recent offers ---------------------------------------------------------------- */
.offers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.offer-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--surface-cloud-dark); border-radius: 0 1.75rem 0 1.75rem; overflow: hidden; }
.offer-thumb { position: relative; display: block; border: 0; padding: 0; margin: 0; cursor: zoom-in; background: var(--surface-cloud); aspect-ratio: 25 / 16; overflow: hidden; }
.offer-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .4s cubic-bezier(.2,.8,.3,1); }
.offer-thumb::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
.offer-thumb span { position: absolute; z-index: 1; left: 1.25rem; bottom: .9rem; padding: .35rem .7rem; background: var(--azure-7); color: #fff !important; border-radius: 0 .6rem 0 .6rem; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--azure-7); }
.offer-thumb:hover img { transform: scale(1.04); }
.offer-thumb:focus-visible { outline: 3px solid var(--azure-7); outline-offset: -3px; }
.offer-body { padding: 1rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; }
.offer-logo { height: 3.25rem; display: flex; align-items: center; margin-bottom: .5rem; }
.offer-logo img { max-height: 100%; max-width: 12rem; width: auto; object-fit: contain; }
.offer-logo--dark { background: #003478; padding: .45rem .7rem; border-radius: 0 .7rem 0 .7rem; align-self: flex-start; }
.offer-award { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1; color: var(--azure-7); }
.offer-card h3 { font-size: 1.25rem; margin: .2rem 0 0; }
.offer-course { margin: 0; font-size: .93rem; }
.offer-intake { margin: auto 0 0; padding-top: .5rem; font-size: .85rem; opacity: .7; }
@media (max-width: 1000px) { .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .offers-grid { grid-template-columns: 1fr; } }
dialog.offer-view { border: 0; padding: 0; background: #fff; max-width: min(100% - 1.5rem, 52rem); max-height: calc(100% - 1.5rem); border-radius: 0 1.5rem 0 1.5rem; overflow: auto; }
dialog.offer-view::backdrop { background: rgba(30, 15, 5, .65); }
dialog.offer-view img { display: block; width: 100%; height: auto; }
dialog.offer-view .ask-x { position: sticky; top: .75rem; float: right; margin: .75rem .75rem -3rem 0; z-index: 2; box-shadow: 0 4px 14px rgba(0,0,0,.15); }

/* --- Scholarships page: UK awards and public universities in Europe ------------------------ */
.sch-list b { font-weight: 600; white-space: nowrap; color: var(--azure-7); }
.sch-svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sch-svc li { padding: 1.25rem 1.25rem 1.4rem; background: #fff; border: 1px solid var(--surface-cloud-dark); border-radius: 0 1.25rem 0 1.25rem; }
.sch-svc h3 { font-size: 1.3rem; margin: 0 0 .35rem; }
.sch-svc p { margin: 0; font-size: .95rem; }
.sch-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface-chocolate-dark); color: var(--surface-cloud); border-radius: 0 2rem 0 2rem; }
.sch-cta h3 { color: inherit; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .3rem; }
.sch-cta p { margin: 0; opacity: .85; }
@media (max-width: 900px) { .sch-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sch-svc { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .group-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .group-logos span { height: 3.75rem; } }

/* --- Documents checklist download (course, university and scholarship views) ---------------- */
.dc-download { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding: .85rem 1rem; text-decoration: none; color: var(--surface-chocolate-dark);
  border: 1px solid var(--surface-cloud-dark); border-radius: 0 1rem 0 1rem; background: #fff; transition: border-color .18s; }
.dc-download:hover { border-color: var(--azure); }
.dc-download svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--azure-7); }
.dc-download span { font-weight: 500; font-size: .95rem; }
.dc-download small { display: block; font-weight: 400; font-size: .82rem; opacity: .75; }
.ask-logo--plate { box-shadow: 0 0 0 1px var(--surface-cloud-dark); }
.dc-print-head img { display: block; height: 2rem; width: auto; margin-bottom: .6rem; }

/* --- Countries: living costs ---------------------------------------------------------------- */
.living { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--surface-cloud-dark); }
.living-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; max-width: 40rem; }
.living-card { padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--surface-cloud-dark); border-radius: 0 1.25rem 0 1.25rem; }
.living-k { margin: 0; font-size: .9rem; opacity: .75; }
.living-v { margin: .2rem 0 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.05; color: var(--azure-7); }
.living-s { margin: .1rem 0 0; font-size: .88rem; }
.living-intro { max-width: 46rem; margin: 0 0 1rem; }
.living-rules { max-width: 52rem; }
@media (max-width: 560px) { .living-grid { grid-template-columns: 1fr; } }
.reach-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.reach-logos .reach-tile { padding: .6rem .8rem; background: #fff; border: 0; border-radius: 0 .9rem 0 .9rem; gap: 0; }
.reach-logos .uni-tile-logo { height: 3.25rem; }
@media (max-width: 560px) { .reach-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sch-list li { align-items: center; }
.sch-list .sch-uni { display: flex; align-items: center; gap: .9rem; font-size: 1rem; opacity: 1; text-align: left; min-width: 0; }
.sch-list .sch-logo { flex: none; width: 5.5rem; height: 2.6rem; display: grid; place-items: center; padding: .3rem .5rem; background: #fff; border: 1px solid var(--surface-cloud-dark); border-radius: 0 .6rem 0 .6rem; opacity: 1; }
.sch-list .sch-logo { overflow: hidden; }
.sch-list .sch-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sch-list .sch-logo--text { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--azure-7); letter-spacing: .04em; }
.sch-list .sch-name { opacity: 1; text-align: left; font-size: .98rem; }
@media (max-width: 560px) { .sch-list .sch-logo { width: 4.25rem; height: 2.2rem; } }
.sch-list .sch-logo { display: block; box-sizing: border-box; }
.sch-list .sch-logo--text { display: grid; place-items: center; }

/* --- Student rights, AQF and blog ------------------------------------------------------------ */
.prose a { color: var(--azure-7); text-underline-offset: .18em; }
.prose ol.steps { margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: st; display: grid; gap: .9rem; }
.prose ol.steps li { counter-increment: st; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; }
.prose ol.steps li::before { content: counter(st); font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--azure); }
.prose ul.sources { gap: .55rem; font-size: .95rem; }
.prose ul.sources li::before { background: var(--surface-cloud-dark); margin-top: .5rem; }
.post-meta { margin: 1.25rem 0 0; font-size: .95rem; opacity: .7; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.post-card a { display: flex; flex-direction: column; height: 100%; padding: 1.6rem 1.5rem 1.4rem; background: #fff; color: inherit; text-decoration: none;
  border: 1px solid var(--surface-cloud-dark); border-radius: 0 1.5rem 0 1.5rem; transition: border-color .2s, transform .2s; }
.post-card a:hover, .post-card a:focus-visible { border-color: var(--azure); transform: translateY(-2px); }
.post-card h2 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); margin: 0 0 .6rem; }
.post-card p { margin: 0 0 1.25rem; font-size: .98rem; opacity: .85; }
.post-card-meta { margin-top: auto; font-size: .85rem; opacity: .65; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }
.post-cta { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: clamp(1.4rem, 3vw, 2rem); background: var(--surface-cloud); border-radius: 0 1.75rem 0 1.75rem; }
.post-cta h3 { margin: 0 0 .25rem; font-size: 1.6rem; }
.post-cta p { margin: 0; }
.back-link { color: var(--azure-7); font-weight: 500; }


/* About timeline: the student awareness mission panel */
.tl-panel--mission { width: min(80vw, 25rem); padding: 1.75rem 1.75rem 2rem; background: var(--surface-chocolate-dark); color: var(--surface-cloud); border-top: 0; border-radius: 0 2rem 0 2rem; }
.tl-panel--mission .tl-panel-dot { display: none; }
.tl-panel--mission .tl-panel-year { color: var(--mint); }
.tl-panel--mission h3 { color: #fff; font-size: clamp(1.5rem, 2.3vw, 1.9rem); margin-bottom: .5rem; }

/* --- #StudentAwareness popup ----------------------------------------------------------------- */
html.aware-lock { overflow: hidden; }
dialog.aware-pop { position: fixed; inset: 0; margin: auto; width: min(31rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto;
  padding: clamp(1.6rem, 4vw, 2.25rem); border: 0; border-radius: 0 2rem 0 2rem;
  background: var(--surface-chocolate-dark); color: var(--surface-cloud); box-shadow: 0 30px 80px rgba(20, 10, 3, .45); }
dialog.aware-pop::backdrop { background: rgba(30, 15, 5, .62); backdrop-filter: blur(3px); }
dialog.aware-pop[open] { animation: aware-in .45s cubic-bezier(.2, .8, .2, 1); }
dialog.aware-pop[open]::backdrop { animation: aware-fade .45s ease; }
@keyframes aware-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aware-fade { from { opacity: 0; } to { opacity: 1; } }
/* the mark bleeds off the corner; clip it in its own layer so it never makes the dialog scroll */
.aware-pop-mark { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: var(--mint); opacity: .06; pointer-events: none; }
.aware-pop-mark svg { position: absolute; right: -2rem; bottom: -2rem; width: 10rem; height: auto; display: block; }
.aware-pop > *:not(.aware-pop-mark) { position: relative; }
.aware-pop .aware-x { position: absolute; top: .9rem; right: .9rem; z-index: 2; }
.aware-pop-tag { margin: 0 2.25rem .35rem 0; font-size: clamp(2.3rem, 7vw, 3.1rem); line-height: 1; color: #fff; letter-spacing: -.01em; overflow-wrap: anywhere; }
.aware-pop-tag span { color: var(--mint); }
.aware-pop-sub { margin: 0 0 1rem; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.35rem; color: var(--mint); }
.aware-pop-text { margin: 0 0 1.25rem; font-size: .98rem; line-height: 1.6; opacity: .92; }
.aware-pop-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.aware-pop-list li { display: flex; align-items: center; gap: .7rem; font-weight: 500; }
.aware-pop-list svg { flex: none; width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--mint); color: var(--surface-chocolate-dark); }
.aware-pop-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.aware-pop-actions .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 560px) {
  dialog.aware-pop { margin: auto auto 0; width: 100%; max-width: none; max-height: 92%; border-radius: 1.75rem 1.75rem 0 0; padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
  @keyframes aware-in { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { dialog.aware-pop[open], dialog.aware-pop[open]::backdrop { animation: none; } }
.aware-tag { display: inline-block; margin: 1.25rem 0 0; padding: .35rem .9rem; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.15rem;
  background: var(--surface-chocolate-dark); color: #fff; border-radius: 0 .8rem 0 .8rem; }
.aware-tag span { color: var(--mint); }
.aware-x { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; background: transparent; border: 0; color: inherit; border-radius: 50%; cursor: pointer; opacity: .8; }
.aware-x:hover, .aware-x:focus-visible { opacity: 1; background: rgba(255,255,255,.12); }
.aware-x svg { width: 1.15rem; height: 1.15rem; }
/* Recommended-universities stack: the spacing between cards is a grid gap rather than a
   bottom margin. A sticky card's margin box has to stay inside the stack, so the old 10vh
   margins pushed the stuck cards off before the last two could slide over them. The spacer
   after the last card gives it room to settle before the stack scrolls away together. */
.uni-stack { display: grid; row-gap: 10vh; }
.uni-stack .uni-card { margin-bottom: 0; }
.uni-stack::after { content: ""; height: 32vh; }
@media (max-width: 700px) { .uni-stack { row-gap: 7vh; } .uni-stack::after { height: 16vh; } }