/* ==========================================================================
   Bright International - design system
   Palette taken from the logo: charcoal card, white wordmark, bright yellow.
   ========================================================================== */

:root {
  /* brand - sampled straight from the logo: dark #171D1D, yellow #FCED38, white */
  --ink: #171d1d;
  --ink-2: #1f2828;
  --ink-3: #2c3636;
  --ink-4: #44504f;
  --yellow: #fced38;
  --yellow-2: #e4d21a;
  --yellow-3: #b9a900;
  --yellow-soft: #fffce0;
  --paper: #ffffff;
  --mist: #f4f6f6;
  --mist-2: #e7ecec;
  --line: #dfe5e4;
  --text: #161c1c;
  --muted: #5f6b6a;
  --muted-2: #8b9796;
  --success: #12875a;
  --danger: #d64545;

  /* type */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Outfit', var(--font);

  /* shape */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 2px 8px rgba(23, 29, 29, 0.06);
  --shadow: 0 12px 34px rgba(23, 29, 29, 0.1);
  --shadow-lg: 0 28px 70px rgba(23, 29, 29, 0.18);
  --glow: 0 16px 40px rgba(252, 237, 56, 0.5);
  --glow-dark: 0 18px 40px rgba(23, 29, 29, 0.34);

  /* layout */
  --container: 1240px;
  /* the design token: what the header is laid out to be */
  --header-h: 84px;
  /* what it actually measures out at, written by layout.js - this is what
     anything docking under the header should use. Kept separate from the token
     above so measuring it can never feed back into the height it measures. */
  --header-dock: var(--header-h);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip, never hidden: `overflow: hidden` turns the element into a scroll
     container, which silently kills `position: sticky` on everything inside it
     - the site header and the chapter bar included. `clip` crops the same
     stray horizontal pixels without creating that scroll container. */
  overflow-x: clip;
  /* where a `#anchor` comes to rest, so a jumped-to heading clears the sticky
     header. The chapter bar raises this to cover itself as well. */
  scroll-padding-top: var(--anchor-offset, calc(var(--header-dock) + 24px));
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* Sensible default for inline icons - any component rule overrides this.
   inline-block, not block: an icon written straight into a sentence
   (`${icon('alert')} Ranking positions move...`) has to sit on the line with
   the words, not break onto a line of its own. In a flex or grid parent the
   display is blockified anyway, so the components below are unaffected. */
svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.2em;
  max-width: 100%;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { color: var(--muted); }
::selection { background: var(--yellow); color: var(--ink); }

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

/* ---------------------------- utilities -------------------------------- */
.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.section { padding: clamp(60px, 8vw, 110px) 0; }
.section--tight { padding: clamp(46px, 5vw, 70px) 0; }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: rgba(255, 255, 255, 0.7); }

.text-center { text-align: center; }
.grid { display: grid; gap: 26px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.hide { display: none !important; }

/* ----------------------------- eyebrow --------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow-soft);
  border: 1px solid rgba(228, 210, 26, 0.55);
  padding: 7px 15px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(23, 29, 29, 0.12);
  flex-shrink: 0;
}

/* The dot is a stand-in for an icon. When the eyebrow already carries one -
   as every eyebrow on the country guides and university profiles does - the
   dot is a second marker crowding the first, so it steps aside. */
.eyebrow:has(svg)::before { display: none; }
.eyebrow svg {
  width: 15px;
  height: 15px;
  /* the 0.16em tracking would otherwise push the icon off its own gap */
  margin-right: -0.16em;
  vertical-align: middle;
}

/* An icon written inline at the head of a sentence or a heading sits on the
   line with the words. The space already in the markup does the spacing, so
   no margin here - that would double up inside the flex paragraphs
   (.fee-source, .form__note) that space their icon with `gap`. */
p > svg:first-child,
h3 > svg:first-child,
h4 > svg:first-child { vertical-align: -0.22em; }
h3 > svg:first-child,
h4 > svg:first-child { color: var(--yellow-3); }

.section--ink .eyebrow {
  background: rgba(252, 237, 56, 0.14);
  border-color: rgba(252, 237, 56, 0.32);
  color: var(--yellow);
}
.section--ink .eyebrow::before { background: var(--yellow); box-shadow: 0 0 0 4px rgba(252, 237, 56, 0.2); }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.05rem; margin-top: 14px; }

/* `isolation` keeps the yellow bar below inside this element's own stacking
   context. Without it the bar escapes to the nearest one - on a dark page hero
   that is the hero itself, whose tint overlay then paints straight over the
   bar and the marked word comes out as a ghost. */
.title-mark { color: var(--ink); position: relative; display: inline-block; isolation: isolate; }
.title-mark::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.34em;
  background: var(--yellow);
  z-index: -1;
  border-radius: 3px;
  opacity: 0.85;
}
.section--ink .title-mark,
.page-hero .title-mark { color: #fff; }

/* ----------------------------- buttons --------------------------------- */
.btn {
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.btn:active { transform: translateY(-1px); }

.btn--yellow { --btn-bg: var(--yellow); --btn-fg: var(--ink); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { box-shadow: var(--glow-dark); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); box-shadow: var(--shadow-sm); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow); }
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.btn--outline-light:hover { background: #fff; color: var(--ink); box-shadow: none; }
.btn--sm { padding: 10px 19px; font-size: 0.85rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform 0.3s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover svg { color: var(--yellow-3); }

/* ------------------------------ topbar --------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.83rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  flex-wrap: wrap;
}
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color 0.25s; }
.topbar a:hover { color: var(--yellow); }
.topbar svg { width: 15px; height: 15px; color: var(--yellow); }
.topbar__list { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar__list--compact { display: none; }
.topbar__social { display: flex; gap: 8px; }
.topbar__social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
}
.topbar__social a:hover { background: var(--yellow); color: var(--ink); }
.topbar__social svg { width: 14px; height: 14px; color: currentColor; }

/* ------------------------------ header --------------------------------- */
/* layout.js writes the header and footer into these two slots. The slots
   themselves have to vanish from the layout: a `position: sticky` element can
   only travel inside its own parent's box, and this wrapper is only as tall as
   the bar itself - so the header would unstick and scroll away the moment the
   wrapper did. `display: contents` hands its children straight to the body,
   which is the full height of the page, and the header stays put. */
#site-header, #site-footer { display: contents; }

.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.35s, border-color 0.35s;
}
.header.is-stuck { box-shadow: 0 6px 30px rgba(20, 23, 26, 0.09); border-color: var(--line); }

/* At full size the bar carries about 1,310px (wordmark, seven nav items and
   the CTA), more than the 1,240px page container, so it gets a wider track of
   its own. The CTA never shrinks: if space runs short the nav gives way, not
   the button. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: var(--header-h);
  width: min(100% - 40px, 1360px);
}
.header__actions { flex-shrink: 0; }
.nav { min-width: 0; }

/* The wordmark is a transparent PNG with no card behind it, so it needs no
   corner radius - rounding it only clipped the ascender on the "B". It is
   roughly 3:1, so height is what sets its footprint in the bar. */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo .mark__img { height: 62px; width: auto; display: block; }
/* the drawer keeps its own height at every width, so it has to outrank the
   breakpoints that shrink the one in the bar */
.logo.logo--drawer .mark__img { height: 48px; }
.logo__text { display: none; }

/* ------------------------------- the mark --------------------------------
   The wordmark is served as three layers on one canvas - the lettering with
   the "International" line, the sun, and the plane - so the sun can turn and
   the plane can fly in place of the whole logo swinging round with them.
   Both are stacked at inset 0 over the one <img> that sets the size, so
   there is no geometry here to keep in step with the artwork: the only
   numbers are the two points they move about, and layout.js passes those
   down from the layers themselves.

   Everything that is light rather than artwork - the beams, the trail, the
   sheen - is a box in the same frame, placed off those same two numbers, so
   there is still nothing here that has to be measured off the picture.

   .mark wraps the layers tight around the image (inline-block, no
   line-height), because everything else is positioned against it.

   Every movement runs on a layer of its own, and no two of them write to the
   same property on the same layer - that is the whole of what keeps them
   composable:

     mark-in     the lettering lands          opacity, translate   once
     mark-rise   the sun comes up behind it   opacity, scale       once
     mark-turn   and then keeps turning       rotate               forever
     mark-halo   the light it throws          filter               forever
     mark-rays   its light swings round       rotate               forever
     mark-light  and brightens and dims       opacity              forever
     mark-sheen  a band of light wipes over   background-position  once, hover
     hover/press lift and give                translate, scale     pointer

   `rotate` and `scale` are the standalone transform properties here rather
   than one `transform`, which is what lets the sun arrive and turn at the
   same time instead of one animation blanking the other. The wrapper keeps
   `translate` and `scale` for the pointer, and the sun keeps `rotate` and
   `filter` for itself, so every movement has a property nothing else wants. */
.mark {
  position: relative;
  display: inline-block;
  line-height: 0;
  --sun-o: 32.01% 14.66%;
  animation: mark-in 0.6s var(--ease) backwards;
  transition: translate 0.4s var(--ease), scale 0.4s var(--ease);
}
.mark__img { position: relative; z-index: 1; }

/* The mark gives under the pointer: up a couple of pixels to meet it, down
   into the press. Both are on the wrapper, so the sun carries on turning
   underneath rather than being snapped back to square by a new transform. */
.logo:hover .mark,
.footer__logo:hover .mark { translate: 0 -2px; }
.logo:active .mark { scale: 0.97; transition-duration: 0.12s; }

/* The sun turns for as long as the page is open - its rays are drawn as
   flames, so turning is the movement the artwork already implies - and
   carries a halo that follows the rays rather than boxing them in, which is
   why it is a drop-shadow and not a disc behind it.

   It arrives a beat after the lettering and slightly over full size before
   settling, so it reads as coming up behind the word rather than fading in
   on top of it. The halo breathes on its own clock - seven seconds against
   the turn's forty-eight, so the two never fall into step and the pairing
   does not start to look like a loop.

   The base `filter` is not decoration the keyframes repeat: it is what is
   left when the animations are switched off, which is the whole of what
   someone on reduced motion sees. */
.mark__sun {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: var(--sun-o);
  filter: drop-shadow(0 0 7px rgba(252, 237, 56, 0.5));
  animation:
    mark-turn 14s linear infinite,
    mark-halo 3.2s ease-in-out infinite,
    mark-rise 0.9s var(--ease) 0.15s backwards;
}

/* Hover swaps the halo's keyframes for a brighter pair. Only that one name
   in the list changes, so the turn at index 0 is left alone and carries on
   from wherever it had got to instead of snapping back to the top. */
.logo:hover .mark__sun,
.footer__logo:hover .mark__sun { animation-name: mark-turn, mark-halo-hot, mark-rise; }

/* ------------------------------ the sunlight -----------------------------
   The halo above is the light on the sun itself; this is the light it throws
   onto the word. A fan of beams struck from the sun's own centre - the same
   point it turns about, so the two can never drift apart - swinging round
   slower than the sun and brightening on a clock of its own.

   It is laid over the lettering rather than behind it, and composited with
   `screen`: light can only ever add. On the white header that leaves the
   paper exactly as white as it was and lands the beams on the black letters
   alone, which is what light actually does; in the footer, where the mark
   sits on --ink, the same beams warm the dark around it.

   The mask is an ellipse rather than a circle because the canvas is about
   three times as wide as it is tall, so a round pool of light has to be
   written 1 : 3 to come out round - 17% of the width and 51% of the height
   are the same number of pixels. Angles need no such correction: a conic
   gradient is painted in rendered pixels, so an 8deg beam is 8deg wide on
   screen whatever shape its box is. */
.mark__rays {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: var(--sun-o);
  opacity: 0.6;
  background: repeating-conic-gradient(
    from 0deg at var(--sun-o),
    rgba(255, 246, 160, 0) 0deg,
    rgba(255, 240, 90, 0.92) 4deg,
    rgba(255, 246, 160, 0) 8deg,
    rgba(255, 246, 160, 0) 30deg
  );
  -webkit-mask: radial-gradient(17% 51% at var(--sun-o), #000 10%, rgba(0, 0, 0, 0.75) 38%, transparent 85%);
  mask: radial-gradient(17% 51% at var(--sun-o), #000 10%, rgba(0, 0, 0, 0.75) 38%, transparent 85%);
  animation:
    mark-rays 40s linear infinite reverse,
    mark-light 4.6s ease-in-out infinite,
    mark-rise 1.1s var(--ease) 0.3s backwards;
}
/* same trick as the halo above: only the brightness keyframes are swapped,
   so the beams keep swinging from wherever they had got to */
.logo:hover .mark__rays,
.footer__logo:hover .mark__rays { animation-name: mark-rays, mark-light-hot, mark-rise; }

/* ------------------------------- the plane -------------------------------
   The plane rests where it is drawn, on the B. Once as the page opens, and
   again when the pointer arrives on the logo, it takes off, flies one loop
   round the r - over it, down its right side, under it - and lands back on
   the B facing the way it started. (It used to cross the whole word and lap
   every few seconds; the client asked for this loop instead.)

   Two layers: the wrapper carries the ground covered, in percent of the
   canvas so the loop scales with the logo, and the plane turns about its
   own centre to face along the path. layout.js adds is-loop and takes it off
   again on animationend, so a loop that starts always finishes. */
.mark__flight {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.mark__plane {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: var(--plane-x) var(--plane-y);
}
.mark__flight.is-loop { animation: mark-loop 3.4s linear; }
.mark__flight.is-loop .mark__plane { animation: mark-loop-turn 3.4s linear; }

/* A band of light wiped across the mark, masked by the mark itself so it
   only ever crosses the artwork and never the empty box around it. It runs
   once as the mark lands and again on hover; leaving cuts it rather than
   rewinding it, so the sweep never plays backwards. */
.mark__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* Without masking this would be a bar of light crossing the whole box, so
   everything it needs is gated on the mask being there at all. */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .mark__sheen {
    -webkit-mask: var(--mark) 0 0 / 100% 100% no-repeat;
    mask: var(--mark) 0 0 / 100% 100% no-repeat;
    /* white at the core, barely warm on the trailing edge. Saturated yellow
       here turns the black lettering olive rather than lighting it. */
    background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 46%,
      rgba(255, 255, 255, 0.5) 49.2%,
      rgba(255, 255, 255, 0.95) 50.6%,
      rgba(255, 252, 224, 0.42) 52.4%,
      rgba(255, 255, 255, 0) 56%
    );
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  /* the footer mark is white already, so white light does nothing to it -
     there the sweep is the brand yellow instead */
  .footer__logo .mark__sheen {
    background-image: linear-gradient(
      100deg,
      rgba(252, 237, 56, 0) 46%,
      rgba(252, 237, 56, 0.45) 49.2%,
      rgba(252, 237, 56, 0.95) 50.6%,
      rgba(252, 237, 56, 0.4) 52.4%,
      rgba(252, 237, 56, 0) 56%
    );
  }
  /* layout.js hangs is-lit on the image being decoded: until it is, the mask
     has nothing to cut the light to, and the sweep would cross a bare box. */
  .mark.is-lit .mark__sheen { animation: mark-sheen 1.3s var(--ease) 0.25s; }
  .logo:hover .mark__sheen,
  .footer__logo:hover .mark__sheen {
    background-position: 100% 0;
    transition: background-position 1s var(--ease);
  }
}

@keyframes mark-in {
  from { opacity: 0; translate: 0 -6px; }
}
/* up from nothing, a shade past full, then down onto its mark */
@keyframes mark-rise {
  0% { opacity: 0; scale: 0.4; }
  55% { opacity: 1; scale: 1.07; }
  100% { opacity: 1; scale: 1; }
}
@keyframes mark-turn {
  to { rotate: 360deg; }
}
@keyframes mark-halo {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(252, 237, 56, 0.45)); }
  50% { filter: drop-shadow(0 0 16px rgba(252, 237, 56, 0.95)) brightness(1.08); }
}
@keyframes mark-halo-hot {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(252, 237, 56, 0.85)); }
  50% { filter: drop-shadow(0 0 23px rgba(252, 237, 56, 1)); }
}
@keyframes mark-sheen {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
@keyframes mark-rays {
  to { rotate: 360deg; }
}
@keyframes mark-light {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}
@keyframes mark-light-hot {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
/* The loop round the r, generated from a closed spline through nine points
   on the 873 x 292 canvas, sampled at even distance and eased in and out, so
   the plane climbs away gently, keeps a steady speed round the letter and
   settles back onto the B. The nose follows the path and comes home one full
   turn later, which is where it started. */
@keyframes mark-loop {
  0% { translate: 0% 0%; }
  2.1% { translate: 0% -0.01%; }
  4.2% { translate: 0.01% -0.07%; }
  6.3% { translate: 0.02% -0.24%; }
  8.3% { translate: 0.06% -0.57%; }
  10.4% { translate: 0.12% -1.1%; }
  12.5% { translate: 0.23% -1.87%; }
  14.6% { translate: 0.41% -2.91%; }
  16.7% { translate: 0.69% -4.24%; }
  18.8% { translate: 1.09% -5.85%; }
  20.8% { translate: 1.64% -7.75%; }
  22.9% { translate: 2.36% -9.92%; }
  25% { translate: 3.28% -12.35%; }
  27.1% { translate: 4.43% -15.03%; }
  29.2% { translate: 5.81% -17.92%; }
  31.3% { translate: 7.48% -20.95%; }
  33.3% { translate: 9.48% -23.9%; }
  35.4% { translate: 11.85% -26.58%; }
  37.5% { translate: 14.6% -28.76%; }
  39.6% { translate: 17.75% -29.79%; }
  41.7% { translate: 21.25% -28.65%; }
  43.8% { translate: 24.9% -24.59%; }
  45.8% { translate: 27.93% -15.71%; }
  47.9% { translate: 29.67% -2.72%; }
  50% { translate: 29.79% 12.5%; }
  52.1% { translate: 28.12% 26.94%; }
  54.2% { translate: 25.18% 37.73%; }
  56.3% { translate: 21.38% 43.62%; }
  58.3% { translate: 17.56% 45.57%; }
  60.4% { translate: 14.13% 43.2%; }
  62.5% { translate: 11.25% 39.21%; }
  64.6% { translate: 8.77% 35.02%; }
  66.7% { translate: 6.72% 30.61%; }
  68.8% { translate: 5.06% 26.17%; }
  70.8% { translate: 3.74% 21.85%; }
  72.9% { translate: 2.67% 17.94%; }
  75% { translate: 1.77% 14.54%; }
  77.1% { translate: 1.06% 11.54%; }
  79.2% { translate: 0.54% 8.9%; }
  81.3% { translate: 0.2% 6.61%; }
  83.3% { translate: 0% 4.69%; }
  85.4% { translate: -0.08% 3.15%; }
  87.5% { translate: -0.09% 1.97%; }
  89.6% { translate: -0.07% 1.13%; }
  91.7% { translate: -0.04% 0.58%; }
  93.8% { translate: -0.02% 0.24%; }
  95.8% { translate: -0.01% 0.07%; }
  97.9% { translate: 0% 0.01%; }
  100% { translate: 0% 0%; }
}
@keyframes mark-loop-turn {
  0% { rotate: 0deg; }
  2.1% { rotate: -11.86deg; }
  4.2% { rotate: -23.67deg; }
  6.3% { rotate: -35.14deg; }
  8.3% { rotate: -46.11deg; }
  10.4% { rotate: -52.71deg; }
  12.5% { rotate: -48.87deg; }
  14.6% { rotate: -44.42deg; }
  16.7% { rotate: -39.8deg; }
  18.8% { rotate: -35.32deg; }
  20.8% { rotate: -31.16deg; }
  22.9% { rotate: -27.32deg; }
  25% { rotate: -23.84deg; }
  27.1% { rotate: -20.56deg; }
  29.2% { rotate: -17.21deg; }
  31.3% { rotate: -13.14deg; }
  33.3% { rotate: -7.56deg; }
  35.4% { rotate: -2.05deg; }
  37.5% { rotate: 4.65deg; }
  39.6% { rotate: 15.91deg; }
  41.7% { rotate: 28.46deg; }
  43.8% { rotate: 45.68deg; }
  45.8% { rotate: 74.45deg; }
  47.9% { rotate: 93.12deg; }
  50% { rotate: 116.48deg; }
  52.1% { rotate: 133.45deg; }
  54.2% { rotate: 159.03deg; }
  56.3% { rotate: 177.25deg; }
  58.3% { rotate: 198.53deg; }
  60.4% { rotate: 216.91deg; }
  62.5% { rotate: 223.69deg; }
  64.6% { rotate: 228.52deg; }
  66.7% { rotate: 234.85deg; }
  68.8% { rotate: 240.79deg; }
  70.8% { rotate: 246.61deg; }
  72.9% { rotate: 246.68deg; }
  75% { rotate: 249.01deg; }
  77.1% { rotate: 253.09deg; }
  79.2% { rotate: 258.65deg; }
  81.3% { rotate: 265.47deg; }
  83.3% { rotate: 273.11deg; }
  85.4% { rotate: 280.82deg; }
  87.5% { rotate: 287.7deg; }
  89.6% { rotate: 293.13deg; }
  91.7% { rotate: 307.05deg; }
  93.8% { rotate: 320.99deg; }
  95.8% { rotate: 334.27deg; }
  97.9% { rotate: 347.18deg; }
  100% { rotate: 360deg; }
}

/* Reduced motion: nothing turns, rises or sweeps. Every movement above is
   an animation on a property whose base value is the artwork as drawn - the
   sun rests at the angle it was cut at, full size, with the plain halo - so
   switching the animations off leaves the original logo exactly, with
   nothing half-applied and no rule here needing to undo anything. */
@media (prefers-reduced-motion: reduce) {
  .mark, .mark * { animation: none !important; }
  /* the one movement kept: the sun turning slowly with its glow. Nothing
     crosses the screen and nothing flashes, so it stays within what reduced
     motion asks for while the mark still reads as alive. */
  .mark .mark__sun { animation: mark-turn 60s linear infinite, mark-halo 7s ease-in-out infinite !important; }
  /* the sheen, the beams and the trail are light rather than artwork: with
     nothing moving they have nothing to describe, so they go rather than
     stand still */
  .mark__sheen, .mark__rays { display: none; }
  .logo:hover .mark,
  .footer__logo:hover .mark,
  .logo:active .mark { translate: none; scale: none; }
}

/* nav */
.nav { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 13px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  transition: background 0.25s, color 0.25s;
  white-space: nowrap;
}
.nav__link svg { width: 14px; height: 14px; opacity: 0.55; transition: transform 0.3s; }
.nav__link:hover, .nav__item:hover > .nav__link { background: var(--ink); color: #fff; }
.nav__link:hover svg, .nav__item:hover > .nav__link svg { opacity: 1; }
.nav__item:hover > .nav__link svg { transform: rotate(180deg); }
.nav__link.is-active { color: var(--ink); background: var(--yellow-soft); }
.nav__link.is-active:hover, .nav__item:hover > .nav__link.is-active { background: var(--ink); color: #fff; }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  /* wide enough that the flagship row keeps its label and its badge on one
     line - the longest entry in the menu */
  min-width: 292px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 9px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.28s var(--ease);
  z-index: 60;
}
.nav__item:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s, padding 0.25s;
}
.dropdown a:hover { background: var(--ink); color: #fff; padding-left: 18px; }
.dropdown a svg { width: 16px; height: 16px; color: var(--yellow-3); }

/* marks the one service we want read first, in both the dropdown and the
   mobile drawer - small enough not to shout, present enough to be seen */
/* the label is a flex child, so without this it shrinks and wraps rather than
   letting the menu use the width it already has */
.dropdown a > span { white-space: nowrap; }
.nav__badge {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.63rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.drawer__sub a .nav__badge { margin-left: 10px; }
.dropdown .dropdown { top: -9px; left: calc(100% + 6px); }
.dropdown__item { position: relative; }
.dropdown__item:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.header__actions { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  place-items: center;
}
.burger svg { width: 22px; height: 22px; }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(370px, 86vw);
  background: #fff;
  z-index: 400;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 22px;
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer__close { width: 42px; height: 42px; border-radius: 12px; background: var(--mist); display: grid; place-items: center; }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.drawer__nav a, .drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  font-weight: 600;
  width: 100%;
  text-align: left;
}
.drawer__nav a:hover, .drawer__toggle:hover { background: var(--mist); }
.drawer__toggle svg { width: 16px; height: 16px; transition: transform 0.3s; }
.drawer__sub { display: none; padding-left: 12px; border-left: 2px solid var(--yellow); margin: 2px 0 6px 14px; }
.drawer__sub.is-open { display: block; }
.drawer__toggle.is-open svg { transform: rotate(180deg); }
.drawer__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 21, 0.55);
  backdrop-filter: blur(3px);
  z-index: 350;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* ------------------------------- hero ---------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }

/* ---- slide transitions, chosen in Admin -> Site settings -> Hero banner ---- */
.hero[data-transition='slide'] .hero__slide {
  opacity: 1;
  transform: translateX(102%);
  transition: transform 1s var(--ease);
}
.hero[data-transition='slide'] .hero__slide.is-active { transform: none; }

.hero[data-transition='zoom'] .hero__slide {
  transform: scale(1.16);
  transition: opacity 1s var(--ease), transform 1.3s var(--ease);
}
.hero[data-transition='zoom'] .hero__slide.is-active { transform: scale(1); }

.hero[data-transition='flip'] .hero__slide {
  transform: perspective(1400px) rotateY(32deg) scale(1.04);
  transform-origin: left center;
  transition: opacity 0.85s var(--ease), transform 1s var(--ease);
}
.hero[data-transition='flip'] .hero__slide.is-active { transform: none; }

.hero[data-transition='blur'] .hero__slide {
  filter: blur(18px);
  transform: scale(1.06);
  transition: opacity 0.9s var(--ease), filter 1s var(--ease), transform 1.1s var(--ease);
}
.hero[data-transition='blur'] .hero__slide.is-active { filter: none; transform: none; }

/* no right-hand visual: let the copy use the full width */
.hero--no-art .hero__grid { grid-template-columns: 1fr; }
.hero--no-art .hero__content { max-width: 52rem; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 7.5s linear;
}
.hero__slide.is-active img { transform: scale(1); }
.hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18, 23, 23, 0.94) 6%, rgba(18, 23, 23, 0.76) 42%, rgba(18, 23, 23, 0.3) 100%);
}

/* oversized outline word sitting behind the hero content */
.hero__ghost {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4rem, 15vw, 14rem);
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.09);
  pointer-events: none;
  user-select: none;
}

.hero__grid {
  position: relative;
  z-index: 3;
  align-self: center;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
  padding: clamp(54px, 7vw, 88px) 0 clamp(86px, 9vw, 122px);
}

.hero__content { max-width: 40rem; text-align: left; }
.hero__content h1, .hero__content p, .hero__pane { text-align: left; }
.hero__cta { justify-content: flex-start; }

/* ------------------- hero artwork: globe + orbiting plane ---------------- */
.hero__art {
  position: relative;
  width: 100%;
  max-width: 470px;
  aspect-ratio: 1;
  margin-inline: auto;
  justify-self: end;
}
/* soft halo so the planet reads cleanly over the photograph behind it */
.hero__art::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(12, 16, 16, 0.78) 34%, rgba(12, 16, 16, 0.4) 55%, transparent 72%);
}
.globe {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: globe-float 7s ease-in-out infinite;
}
.globe__svg {
  width: 74%;
  height: auto;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.5));
}
/* the land mass strip slides to give the planet its spin */
.globe__land { animation: globe-spin 26s linear infinite; }

.orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.orbit--plane {
  inset: 4%;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  animation: orbit-spin 16s linear infinite;
}
/* the plane rides the ring, so it always points along its flight path */
.orbit__plane {
  position: absolute;
  top: -23px;
  left: 50%;
  margin-left: -23px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 10px 24px rgba(252, 237, 56, 0.45);
  transform: rotate(90deg);
}
.orbit__plane svg { width: 24px; height: 24px; }

.orbit--tilt {
  inset: 16% -7%;
  border: 1.5px dashed rgba(252, 237, 56, 0.28);
  transform: rotate(-16deg);
}
.orbit__dot {
  position: absolute;
  top: 50%;
  left: 3%;
  width: 11px;
  height: 11px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 6px rgba(252, 237, 56, 0.16);
  animation: pin-pulse 2.6s ease-in-out infinite;
}

.globe__pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18);
  animation: pin-pulse 3s ease-in-out infinite;
}
.globe__pin--1 { top: 27%; left: 28%; }
.globe__pin--2 { top: 46%; right: 26%; animation-delay: 0.7s; background: var(--yellow); box-shadow: 0 0 0 5px rgba(252, 237, 56, 0.2); }
.globe__pin--3 { bottom: 29%; left: 39%; animation-delay: 1.4s; }

@keyframes globe-spin { to { transform: translateX(-260px); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes globe-float {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(8px); }
}
@keyframes pin-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

/* ------------- hero image options (Admin -> Hero banner) --------------- */
.hero-art--3d-tilt,
.hero-art--float,
.hero-art--frame,
.hero-art--plain { aspect-ratio: auto; }
.hero-art--3d-tilt::before,
.hero-art--float::before,
.hero-art--frame::before,
.hero-art--plain::before,
.hero-art--cube::before { display: none; }

.hero-img {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.4;
}
.hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* 3D tilt - JS drives the angle from the pointer position */
.hero-art--3d-tilt { perspective: 1100px; }
.hero-art--3d-tilt .hero-img {
  transform: rotateY(-11deg) rotateX(5deg);
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease);
  box-shadow: -26px 30px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* gentle drift */
.hero-art--float .hero-img { animation: globe-float 7s ease-in-out infinite; }

/* offset brand frame */
.hero-art--frame { padding: 0 16px 16px 0; }
.hero-art--frame .hero-img { z-index: 1; }
.hero-art--frame::after {
  content: '';
  position: absolute;
  inset: 18px -14px -14px 18px;
  border: 3px solid var(--yellow);
  border-radius: var(--r-xl);
}

/* rotating 3D cube */
.hero-art--cube {
  --cube: clamp(150px, 20vw, 240px);
  perspective: 1200px;
  display: grid;
  place-items: center;
}
.cube {
  position: relative;
  width: var(--cube);
  height: var(--cube);
  transform-style: preserve-3d;
  animation: cube-spin 18s linear infinite;
}
.cube__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(252, 237, 56, 0.45);
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35) inset;
}
.cube__face img { width: 100%; height: 100%; object-fit: cover; }
.cube__face--front { transform: translateZ(calc(var(--cube) / 2)); }
.cube__face--back { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.cube__face--right { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.cube__face--left { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.cube__face--top { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }

@keyframes cube-spin {
  0% { transform: rotateX(-18deg) rotateY(0deg); }
  100% { transform: rotateX(-18deg) rotateY(360deg); }
}

/* the counselling card floating over the hero */
.hero__form {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--r-xl);
  border-top: 5px solid var(--yellow);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-lg);
}
.hero__form h2 { font-size: 1.3rem; letter-spacing: -0.02em; }
.hero__form > p { font-size: 0.88rem; margin: 7px 0 16px; }
.hero__form .form { gap: 10px; }
.hero__form .field input,
.hero__form .field select { padding: 11px 14px; border-radius: 11px; font-size: 0.9rem; }
.hero__form .btn { margin-top: 4px; }
.hero__form-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 6px;
}
.hero__form-note svg { width: 14px; height: 14px; color: var(--success); }
.hero__form .alert { margin-bottom: 0; font-size: 0.84rem; padding: 10px 13px; }

/* ---------------------- destination finder card ------------------------ */
.finder-wrap { position: relative; z-index: 20; margin-top: clamp(-70px, -6vw, -46px); }
.finder {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 22px clamp(20px, 3vw, 30px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px clamp(22px, 3vw, 40px);
  align-items: center;
}
.finder__label .eyebrow { margin-bottom: 8px; }
.finder__label strong {
  display: block;
  font-family: var(--display);
  font-size: 1.14rem;
  color: var(--ink);
  white-space: nowrap;
}
.finder__fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; }
.finder__fields select,
.finder__fields input { padding: 12px 14px; }
.finder__alert { grid-column: 1 / -1; }
.finder__alert:empty { display: none; }
.finder__alert .alert { margin-bottom: 0; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 210, 0, 0.14);
  border: 1px solid rgba(255, 210, 0, 0.32);
  color: var(--yellow);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--yellow); position: relative; }
.hero p { color: rgba(255, 255, 255, 0.76); font-size: 1.08rem; max-width: 36rem; margin-bottom: 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__dots {
  position: absolute;
  bottom: 104px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.hero__dots button {
  width: 30px;
  height: 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.28);
  transition: all 0.35s;
}
.hero__dots button.is-active { width: 54px; background: var(--yellow); }

.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  transform: translateY(-50%);
  transition: all 0.3s;
}
.hero__arrow:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow--prev { left: 22px; }
.hero__arrow--next { right: 22px; }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__badge { display: flex; align-items: center; gap: 12px; color: #fff; }
.hero__badge svg { width: 20px; height: 20px; color: var(--yellow); flex-shrink: 0; }
.hero__badge span { font-size: 0.92rem; font-weight: 600; }

/* page hero (inner pages) */
.page-hero {
  position: relative;
  background: var(--ink);
  padding: clamp(66px, 9vw, 118px) 0 clamp(56px, 7vw, 92px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.32;
}
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(900px 420px at 50% -10%, rgba(252, 237, 56, 0.2), transparent 70%),
    radial-gradient(700px 380px at 12% 110%, rgba(252, 237, 56, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(23, 29, 29, 0.85), rgba(23, 29, 29, 0.96));
}
.page-hero h1 { color: #fff; margin-bottom: 14px; }
.page-hero p { color: rgba(255, 255, 255, 0.75); max-width: 44rem; margin-inline: auto; font-size: 1.05rem; }

.crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 22px;
}
.crumbs a { color: var(--yellow); font-weight: 600; }
.crumbs svg { width: 13px; height: 13px; opacity: 0.6; }

/* ------------------------------ cards ---------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist-2); }
.card__media img { width: 100%; height: 100%; transition: transform 0.7s var(--ease); }
.card:hover .card__media img { transform: scale(1.07); }
.card__body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card__body h3 { transition: color 0.25s; }
.card:hover .card__body h3 { color: var(--ink-3); }
.card__body p { font-size: 0.95rem; }
.card__foot { margin-top: auto; padding-top: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--mist);
  color: var(--ink);
  border: 1px solid var(--line);
}
.chip--yellow { background: var(--yellow-soft); border-color: rgba(255, 190, 0, 0.4); }
.chip--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip--float {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* icon card (services) */
.icon-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.icon-card::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -70px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: 0;
  transition: opacity 0.45s, transform 0.5s var(--ease);
  transform: scale(0.6);
}
.icon-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.icon-card:hover::before { opacity: 0.18; transform: scale(1); }
.icon-card > * { position: relative; z-index: 1; }
.icon-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--yellow);
  transition: all 0.4s var(--ease);
  flex-shrink: 0;
}
.icon-card__icon svg { width: 27px; height: 27px; }
.icon-card:hover .icon-card__icon { background: var(--yellow); color: var(--ink); transform: rotate(-8deg) scale(1.06); }
.icon-card ul { display: grid; gap: 9px; margin-top: 4px; }
.icon-card li { display: flex; gap: 10px; font-size: 0.9rem; color: var(--muted); }
.icon-card li svg { width: 17px; height: 17px; color: var(--success); flex-shrink: 0; margin-top: 3px; }

/* destination card */
.dest-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
  background: var(--ink);
}
/* direct child only - keeps nested images (the flag) at their own size */
.dest-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  transition: transform 0.8s var(--ease);
}
.dest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 16, 19, 0.06) 25%, rgba(14, 16, 19, 0.88) 88%);
  transition: background 0.4s;
}
.dest-card:hover > img { transform: scale(1.09); }
.dest-card:hover::after { background: linear-gradient(180deg, rgba(14, 16, 19, 0.2) 10%, rgba(14, 16, 19, 0.93) 80%); }
.dest-card__body { padding: 26px; width: 100%; }
.dest-card__flag { display: inline-flex; line-height: 1; margin-bottom: 12px; }

/* country flags */
.flag {
  width: 40px;
  height: auto;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.flag--emoji { font-size: 2rem; width: auto; box-shadow: none; }
.country-title { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.country-title .flag { width: clamp(52px, 7vw, 84px); border-radius: 8px; }
.flag-wrap { display: inline-flex; }
.flag-wrap .flag { width: 48px; border-radius: 6px; }
.dest-card h3 { color: #fff; margin-bottom: 5px; }
.dest-card p { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; }
.dest-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.45s var(--ease);
}
.dest-card:hover .dest-card__meta { max-height: 90px; opacity: 1; }
.dest-card__meta strong { color: var(--yellow); display: block; font-size: 0.86rem; }

/* university card */
.uni-card { display: flex; flex-direction: column; height: 100%; }
.uni-card .card__media { aspect-ratio: 16 / 9; }
.uni-card__rank {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 100px;
}
.uni-card__meta { display: grid; gap: 7px; font-size: 0.86rem; color: var(--muted); }
.uni-card__meta div { display: flex; align-items: center; gap: 8px; }
.uni-card__meta svg { width: 15px; height: 15px; color: var(--yellow-3); flex-shrink: 0; }

/* testimonial */
.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.quote:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.quote__mark {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--display);
  font-size: 5rem;
  line-height: 1;
  color: var(--yellow);
  opacity: 0.22;
}
.stars { display: flex; gap: 3px; color: var(--yellow-2); }
.stars svg { width: 17px; height: 17px; }
.quote p { color: var(--text); font-size: 0.97rem; line-height: 1.75; flex: 1; }
.quote__person { display: flex; align-items: center; gap: 13px; padding-top: 6px; border-top: 1px solid var(--line); }
.quote__person img { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; margin-top: 16px; }
.quote__person .avatar { margin-top: 16px; }
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.quote__person div { margin-top: 16px; }
.quote__person strong { display: block; font-size: 0.95rem; color: var(--ink); }
.quote__person span { font-size: 0.82rem; color: var(--muted); }

/* faculty */
.person { text-align: center; }
.person__photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  margin-bottom: 18px;
  background: var(--mist-2);
}
/* top-anchored so a portrait never loses the face to the crop */
.person__photo img { width: 100%; height: 100%; object-position: top center; transition: transform 0.6s var(--ease); }
.person:hover .person__photo img { transform: scale(1.06); }
.person__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14, 16, 19, 0.8));
  opacity: 0;
  transition: opacity 0.4s;
}
.person:hover .person__photo::after { opacity: 1; }
.person__overlay {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(14px);
  transition: all 0.45s var(--ease);
}
.person:hover .person__overlay { opacity: 1; transform: none; }
/* ---------------------- leadership feature block ----------------------- */
.leader {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.leader:last-child { margin-bottom: 0; }
.leader--flip .leader__photo { order: 2; }

.leader__photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 3 / 3.6;
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  box-shadow: var(--shadow-lg);
}
.leader__photo::after {
  content: '';
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 55%;
  background: radial-gradient(60% 60% at 50% 100%, rgba(255, 210, 0, 0.35), transparent 70%);
}
.leader__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease);
}
.leader:hover .leader__photo img { transform: scale(1.03); }

.leader__body h3 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; }
.leader__role {
  display: inline-block;
  margin-top: 6px;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow-2);
}

.leader__bubble {
  position: relative;
  margin-top: 26px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  box-shadow: var(--shadow);
}
.leader__bubble p { color: inherit; font-size: 0.97rem; line-height: 1.8; }
.leader__bubble::after {
  content: '';
  position: absolute;
  left: 46px;
  bottom: -16px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top-color: var(--ink);
  border-bottom: 0;
}
.leader--flip .leader__bubble::after { left: auto; right: 46px; }

@media (max-width: 860px) {
  .leader { grid-template-columns: 1fr; gap: 24px; }
  .leader--flip .leader__photo { order: 0; }
  .leader__photo { max-width: 360px; margin-inline: auto; aspect-ratio: 3 / 3.4; }
  .leader__body { text-align: center; }
  .leader__bubble { text-align: left; }
  .leader__bubble::after, .leader--flip .leader__bubble::after { left: 50%; right: auto; transform: translateX(-50%); }
}

/* a leader with a wide feature poster: poster, then profile, then motto */
.leader-feature { margin-bottom: clamp(36px, 5vw, 64px); }
.leader-feature:last-child { margin-bottom: 0; }
.leader-feature__poster {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
}
.leader-feature__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.leader-feature__body {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(28px, 4vw, 48px);
}
.leader-feature__head h3 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -0.03em; margin-top: 8px; }
.leader-feature__photo {
  margin-top: 22px;
  width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
  border: 4px solid var(--yellow);
  box-shadow: var(--shadow);
}
.leader-feature__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.leader-feature__text {
  border-left: 3px solid var(--yellow);
  padding-left: clamp(18px, 3vw, 32px);
}
.leader-feature__text p { font-size: 1.02rem; line-height: 1.85; color: var(--text); }
.leader-feature__text p + p { margin-top: 14px; }

.leader-feature__motto {
  position: relative;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: clamp(22px, 3vw, 30px) clamp(24px, 4vw, 48px);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  text-align: center;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow);
}
.leader-feature__motto span {
  color: var(--yellow);
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.28em;
  margin: 0 0.12em;
}

@media (max-width: 860px) {
  .leader-feature__body { grid-template-columns: 1fr; }
  .leader-feature__head { text-align: center; }
  .leader-feature__photo { margin-inline: auto; }
  .leader-feature__text { border-left: 0; padding-left: 0; border-top: 3px solid var(--yellow); padding-top: 20px; }
}

.person h4 { font-size: 1.12rem; }
.person__role { color: var(--ink-3); font-weight: 700; font-size: 0.87rem; }
.person__qual { font-size: 0.84rem; color: var(--muted); margin-top: 4px; }
/* a trainer's teaching line - the profile card prints it, a photo tile shows it here */
.person__quote, .fac-card__quote { margin-top: 10px; font-size: 0.86rem; font-style: italic; color: var(--ink-4); line-height: 1.5; }

/* ---------------------- faculty profile cards -------------------------- */
/* Each trainer has a printed profile card: a 3:2 poster, portrait panel on the
   left, badges and expertise set in type on the right. The tile shows only that
   left panel - it is a finished portrait card in its own right - and the whole
   poster opens in the viewer below, where the type is large enough to read.

   The crop needs no per-image numbers. The poster goes in at full height, so
   the window shows as much of its width as the window is wide: a 7:12 tile
   against a 3:2 poster leaves exactly its leftmost 39% visible, which is the
   panel. Change --tile and the crop follows. */
.poster-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

.pcard { display: flex; flex-direction: column; }

.pcard__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--tile, 7 / 12);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  /* the posters are deep green, so the frame holds that colour while the image
     decodes rather than flashing a white box */
  background: linear-gradient(165deg, #10401f, #04180d);
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pcard__crop { position: absolute; inset: 0; display: block; }
.pcard__crop img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
}
.pcard__frame:hover { transform: translateY(-7px); box-shadow: 0 30px 62px rgba(6, 34, 18, 0.38); }
.pcard__frame:hover .pcard__crop img { transform: scale(1.06); }
.pcard__frame:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* the level badge off the poster - C1, A1 & A2 - restated in live type so it
   survives the crop and can be read out by a screen reader */
.pcard__level {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2b1e00;
  background: linear-gradient(135deg, #ffe694, #e3b23a);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
}

.pcard__peek {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: 100px;
  background: rgba(7, 28, 16, 0.76);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 226, 140, 0.45);
  color: #ffe9ab;
  font-size: 0.79rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.pcard__peek svg { width: 15px; height: 15px; }
.pcard__frame:hover .pcard__peek,
.pcard__frame:focus-visible .pcard__peek { opacity: 1; transform: none; }
/* nothing hovers on a touch screen, and the prompt is the only thing that says
   the tile opens - so there it simply stays on */
@media (hover: none) {
  .pcard__peek { opacity: 1; transform: none; }
}

.pcard__body { padding: 17px 2px 0; text-align: center; }
.pcard__body h3 { font-size: 1.08rem; letter-spacing: -0.02em; }
.pcard__role { color: var(--ink-3); font-weight: 700; font-size: 0.84rem; line-height: 1.5; margin-top: 4px; }
.pcard__exp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--yellow-3);
}
.pcard__exp svg { width: 15px; height: 15px; }
.pcard__body .chips { justify-content: center; margin-top: 13px; }
.pcard__body .chip { font-size: 0.71rem; padding: 5px 10px; }

/* on the cream home band the plain chips disappear into the background */
.section--cream .pcard__body .chip { background: #fff; }

/* the home page runs the same cards along a drag track instead of a grid */
.fac-track .pcard { flex: 0 0 calc((100% - 78px) / 4); scroll-snap-align: start; }

/* ------------------------- the franchise block -------------------------- */
/* A franchisee partner runs their own Bright International office, so they and
   their staff sit in a block of their own under the main team row rather than
   being mixed into it - headed by the partner's name, because that is how the
   office is known locally. */
#franchise-band {
  margin-top: clamp(50px, 6vw, 86px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
#franchise-band .section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
#franchise-band .section-head p strong { color: var(--yellow-3); }

/* the partner leads the block, so their tile carries a gold edge the rest of
   the office does not - the only thing that says which of these names is on
   the door */
#franchise .pcard:first-child .pcard__frame {
  box-shadow: 0 0 0 3px var(--yellow), var(--shadow);
}
#franchise .pcard:first-child .pcard__frame:hover {
  box-shadow: 0 0 0 3px var(--yellow), 0 30px 62px rgba(6, 34, 18, 0.38);
}

/* a one-person office would otherwise stretch a single card across the full
   width of a four-column grid */
#franchise { justify-content: center; }
#franchise .pcard { max-width: 320px; width: 100%; margin-inline: auto; }

/* ------------------------- the poster viewer --------------------------- */
.pview {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
}
.pview[hidden] { display: none; }
.pview__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 14, 9, 0.9);
  backdrop-filter: blur(7px);
  animation: fade-in 0.3s;
}
.pview__box {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: dialog-in 0.45s var(--ease);
}
/* the arrows live inside the figure so they centre on the poster itself,
   not on a column that also holds the name and the buttons */
.pview__fig { position: relative; display: grid; place-items: center; min-height: 0; }
.pview__fig img {
  max-width: 100%;
  max-height: min(74vh, 820px);
  width: auto;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  transition: opacity 0.25s;
}
.pview.is-swapping .pview__fig img { opacity: 0.3; }

.pview__close,
.pview__arrow {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.pview__close:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.pview__arrow:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.pview__close { top: -6px; right: -6px; width: 42px; height: 42px; }
.pview__close svg { width: 19px; height: 19px; }
.pview__arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.pview__arrow svg { width: 22px; height: 22px; }
.pview__arrow--prev { left: 10px; }
.pview__arrow--next { right: 10px; }
.pview.is-single .pview__arrow { display: none; }

.pview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  color: #fff;
}
.pview__who strong { display: block; font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.02em; }
.pview__who span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.64); }
.pview__acts { display: flex; gap: 10px; flex-wrap: wrap; }
/* on a phone the card fits the screen but reads small - this is the way to
   make it big, so the phone is the only place the line is shown */
.pview__tip { display: none; width: 100%; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }

@media (max-width: 1180px) {
  .poster-wall { grid-template-columns: repeat(3, 1fr); }
  .fac-track .pcard { flex: 0 0 calc((100% - 52px) / 3); }
}
@media (max-width: 860px) {
  .poster-wall { grid-template-columns: repeat(2, 1fr); }
  .fac-track .pcard { flex: 0 0 calc((100% - 26px) / 2); }
}
@media (max-width: 720px) {
  .pview__arrow { width: 40px; height: 40px; }
  .pview__arrow--prev { left: 6px; }
  .pview__arrow--next { right: 6px; }
  .pview__bar { justify-content: center; text-align: center; }
  .pview__acts { width: 100%; justify-content: center; }
  .pview__tip { display: block; text-align: center; }
}
@media (max-width: 480px) {
  .poster-wall { gap: 16px; }
  .pcard__body h3 { font-size: 1rem; }
  .pcard__role { font-size: 0.79rem; }
  .pcard__peek { font-size: 0.72rem; padding: 9px 8px; }
  .fac-track .pcard { flex: 0 0 calc((100% - 26px) / 2); }
}

/* ------------------------------ stats ---------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: var(--ink-2); padding: 34px 26px; text-align: center; }
.stat__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 210, 0, 0.14);
  color: var(--yellow);
}
.stat__icon svg { width: 21px; height: 21px; }
.stat__value {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.stat__value span { color: var(--yellow); }
.stat__label { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; margin-top: 8px; }

/* stats on light background */
.stats--light { background: var(--line); }
.stats--light .stat { background: #fff; }
.stats--light .stat__value { color: var(--ink); }
.stats--light .stat__label { color: var(--muted); }
.stats--light .stat__icon { background: var(--yellow-soft); color: var(--ink); }

/* ----------------------------- process --------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
  transition: all 0.4s var(--ease);
}
.step:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.step__num {
  font-family: var(--display);
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mist-2);
  transition: color 0.35s;
  position: absolute;
  top: 22px;
  right: 26px;
}
.step:hover .step__num { color: var(--yellow); opacity: 1; }
.step__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--yellow-soft);
  color: var(--ink);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.step__icon svg { width: 25px; height: 25px; }
.step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { font-size: 0.92rem; }

/* ---------------------------- accordion -------------------------------- */
.accordion { display: grid; gap: 12px; }
.acc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow 0.35s, border-color 0.35s;
}
.acc.is-open { box-shadow: var(--shadow); border-color: var(--yellow); }
.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  text-align: left;
  font-weight: 700;
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--ink);
}
.acc__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mist);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.35s var(--ease);
}
.acc__icon svg { width: 16px; height: 16px; }
.acc.is-open .acc__icon { background: var(--yellow); color: var(--ink); transform: rotate(45deg); }
.acc__body { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.acc__body > div { padding: 0 24px 22px; color: var(--muted); font-size: 0.96rem; }

/* --------------------------- student stories -------------------------- */
/* Two rows of photo-led cards, the top drifting left and the bottom right.
   Each track holds its cards twice, so sliding it half its width brings the
   copy exactly into the original's place and the loop never shows a seam. */
.stories {
  display: grid;
  gap: 26px;
  overflow: hidden;
  padding: 10px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.stories__track { display: flex; width: max-content; animation: stories-left var(--dur, 60s) linear infinite; }
.stories__row--right .stories__track { animation-name: stories-right; }
.stories__row:hover .stories__track { animation-play-state: paused; }
.stories__dup { display: contents; }
@keyframes stories-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes stories-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.story {
  position: relative;
  flex: 0 0 auto;
  width: 380px;
  margin-right: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 24px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.story:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.story__mark {
  position: absolute;
  top: 8px;
  right: 18px;
  font-family: var(--display);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--yellow);
  opacity: 0.35;
  pointer-events: none;
}
.story__who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  padding-right: 40px;
  border-bottom: 1px solid var(--line);
}
.story__photo {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
  border: 3px solid var(--yellow);
  box-shadow: var(--shadow-sm);
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.story__photo .avatar { width: 100%; height: 100%; border-radius: 0; font-size: 1.2rem; }
.story__id { display: grid; gap: 2px; min-width: 0; }
.story__id strong { font-family: var(--display); color: var(--ink); font-size: 1.02rem; line-height: 1.25; }
.story__id span { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.story__id .story__place {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  font-weight: 700;
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.story__place svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--yellow-3); }
.story p {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  .stories {
    gap: 16px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .story { width: min(82vw, 300px); margin-right: 14px; padding: 18px 18px 16px; gap: 12px; }
  .story__photo { flex-basis: 52px; width: 52px; height: 52px; }
  .story__mark { font-size: 3.4rem; right: 14px; }
  .story p { font-size: 0.86rem; -webkit-line-clamp: 6; }
}
@media (prefers-reduced-motion: reduce) {
  .stories { overflow-x: auto; }
  .stories__track { animation: none; }
  .stories__dup { display: none; }
}

/* ------------------------- smart match advisor ------------------------ */
.quiz-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding: 18px 22px;
  background: var(--yellow-soft);
  border: 1px dashed var(--yellow-3);
  border-radius: var(--r);
  color: var(--muted);
  font-size: 0.92rem;
}
.quiz-nudge strong { display: block; color: var(--ink); font-size: 1rem; }
.quiz-nudge .btn { flex-shrink: 0; }

.quiz {
  max-width: 940px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.quiz__progress { margin-bottom: clamp(22px, 3vw, 32px); }
.quiz__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.quiz__bar { height: 8px; border-radius: 99px; background: var(--mist-2); overflow: hidden; }
.quiz__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yellow-2), var(--yellow)); transition: width 0.5s var(--ease); }

.quiz__step { animation: quiz-in 0.45s var(--ease); }
@keyframes quiz-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.quiz__step h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.02em; }
.quiz__hint { color: var(--muted); font-size: 0.92rem; margin-top: 6px; }

.quiz__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
.quiz__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  font: inherit;
  background: var(--mist);
  border: 2px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.quiz__opt:hover { background: #fff; border-color: var(--yellow-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quiz__opt:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.quiz__opt.is-picked { background: var(--yellow-soft); border-color: var(--yellow-2); }
.quiz__icon {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: var(--yellow);
}
.quiz__icon svg { width: 21px; height: 21px; }
.quiz__label { display: grid; gap: 2px; }
.quiz__label strong { color: var(--ink); font-size: 0.98rem; line-height: 1.3; }
.quiz__label small { color: var(--muted); font-size: 0.8rem; }

.quiz__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.quiz__back svg { width: 16px; height: 16px; }
.quiz__back:hover { color: var(--ink); }

.quiz__match {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  background: var(--yellow-soft);
  border: 1px solid #f3e9a0;
  border-radius: var(--r-lg);
}
.quiz__flag { width: 56px; height: auto; border-radius: 6px; box-shadow: var(--shadow-sm); }
.quiz__flag--icon { display: grid; place-items: center; height: 56px; border-radius: 14px; background: var(--ink); color: var(--yellow); }
.quiz__flag--icon svg { width: 28px; height: 28px; }
@media (max-width: 760px) { .quiz__flag--icon { height: 44px; } }
.quiz__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 99px;
  background: var(--success);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
}
.quiz__badge svg { width: 13px; height: 13px; }
.quiz__match-name h3 { margin-top: 8px; }
.quiz__match-name p { color: var(--muted); font-size: 0.88rem; margin-top: 3px; }
.quiz__cost {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  max-width: 250px;
}
.quiz__cost small { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.quiz__cost strong { font-family: var(--display); color: var(--ink); font-size: 1rem; line-height: 1.3; }
.quiz__cost span { font-size: 0.78rem; color: var(--muted); }

.quiz__why { margin-top: 20px; color: var(--text); font-size: 0.95rem; line-height: 1.7; }
.quiz__picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.quiz__picked span { padding: 5px 12px; border-radius: 99px; background: var(--mist); border: 1px solid var(--line); font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.quiz__roadmap { margin-top: 18px; }
.quiz__roadmap h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.quiz__roadmap ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.quiz__roadmap li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.92rem; color: var(--text); }
.quiz__roadmap li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--success); margin-top: 2px; }
.quiz__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: 0.9rem; color: var(--ink); border-bottom: 2px solid var(--yellow); }
.quiz__more svg { width: 16px; height: 16px; }
.quiz__others { margin-top: 14px; font-size: 0.86rem; color: var(--muted); }

/* the universities that fit, under each matched country */
.quiz__unis-title { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.quiz__unis-title svg { width: 16px; height: 16px; }
.quiz__unis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.quiz__uni {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.quiz__uni:hover { background: #fff; border-color: var(--yellow-2); transform: translateY(-2px); }
.quiz__uni strong { font-size: 0.93rem; line-height: 1.3; }
.quiz__uni small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.78rem; }
.quiz__uni small svg { width: 13px; height: 13px; flex-shrink: 0; }
.quiz__uni-fee { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.quiz__uni-why { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.quiz__uni-why em { font-style: normal; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--yellow-soft); color: var(--ink); }

/* the second and third matches */
.quiz__alts { margin-top: 24px; display: grid; gap: 14px; }
.quiz__alts > h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.quiz__alt { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.quiz__alt-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.quiz__alt-head .quiz__flag { width: 40px; }
.quiz__alt-head .quiz__flag--icon { width: 40px; height: 40px; border-radius: 10px; }
.quiz__alt-head .quiz__flag--icon svg { width: 20px; height: 20px; }
.quiz__alt-head strong { display: block; font-family: var(--display); font-size: 1.02rem; color: var(--ink); }
.quiz__alt-head small { color: var(--muted); font-size: 0.8rem; }
.quiz__alt .quiz__unis { grid-template-columns: repeat(3, 1fr); }
.quiz__note { margin-top: 12px; font-size: 0.9rem; color: var(--text); line-height: 1.6; }
@media (max-width: 1000px) { .quiz__alt .quiz__unis { grid-template-columns: repeat(2, 1fr); } }

.quiz__lead { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.quiz__lead-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.quiz__lead-head h4 { font-size: 1.05rem; }
.quiz__lead-head span { font-size: 0.78rem; font-weight: 700; color: var(--success); }
.quiz__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.quiz__lead-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.quiz__lead-foot .quiz__back { margin-top: 0; }
.quiz__alert:not(:empty) { margin-top: 14px; }
.quiz__done { text-align: center; display: grid; justify-items: center; gap: 10px; }
.quiz__done-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #e7f8ef; color: var(--success); }
.quiz__done-icon svg { width: 28px; height: 28px; }
.quiz__done p { color: var(--muted); max-width: 440px; }

@media (max-width: 760px) {
  .quiz-nudge { flex-direction: column; align-items: flex-start; }
  .quiz__options { grid-template-columns: 1fr; gap: 10px; }
  .quiz__opt { padding: 13px 14px; }
  .quiz__icon { flex-basis: 38px; height: 38px; }
  .quiz__match { grid-template-columns: auto 1fr; padding: 16px; }
  .quiz__flag { width: 44px; align-self: start; }
  .quiz__cost { grid-column: 1 / -1; max-width: none; }
  .quiz__fields { grid-template-columns: 1fr; }
  .quiz__unis, .quiz__alt .quiz__unis { grid-template-columns: 1fr; }
  .quiz__alt-head { grid-template-columns: auto 1fr; }
  .quiz__alt-head .quiz__badge { grid-column: 1 / -1; justify-self: start; }
  .quiz__lead-foot { flex-direction: column-reverse; align-items: stretch; }
  .quiz__lead-foot .btn { width: 100%; justify-content: center; }
  .quiz__lead-foot .quiz__back { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .quiz__step { animation: none; } }

/* ------------------------------ marquee -------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 60px; width: max-content; animation: scroll-x 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--muted-2);
  white-space: nowrap;
  transition: color 0.3s;
}
.marquee__item:hover { color: var(--ink); }
.marquee__item span { font-size: 1.5rem; }

@keyframes scroll-x {
  to { transform: translateX(-50%); }
}

/* ribbon marquee (yellow strip) */
.ribbon { background: var(--yellow); padding: 15px 0; overflow: hidden; }
.ribbon .marquee__track { animation-duration: 26s; gap: 44px; }
.ribbon .marquee__item { color: var(--ink); font-size: 1rem; letter-spacing: -0.01em; }
.ribbon .marquee__item svg { width: 17px; height: 17px; }

/* ------------------------------- CTA ----------------------------------- */
.cta {
  position: relative;
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 68px);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 36px;
  align-items: center;
}
.cta::before {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 237, 56, 0.3), transparent 62%);
  right: -110px;
  top: -160px;
  z-index: -1;
}
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cta h2 { color: #fff; margin-bottom: 12px; }
.cta p { color: rgba(255, 255, 255, 0.72); }
.cta__actions { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------ forms ---------------------------------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 0.95rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(252, 237, 56, 0.45);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.form__note { font-size: 0.82rem; color: var(--muted); }

.alert {
  padding: 13px 17px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; }
.alert--ok { background: #e7f8ef; color: #056b39; }
.alert--err { background: #fdeaea; color: #a71d1d; }

/* ------------------------------ footer --------------------------------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, 0.66); padding-top: 76px; position: relative; overflow: hidden; }
.footer::before {
  content: '';
  position: absolute;
  top: -180px;
  left: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 237, 56, 0.16), transparent 65%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 44px;
  padding-bottom: 54px;
  position: relative;
}
.footer h5 {
  color: #fff;
  font-size: 1.02rem;
  margin-bottom: 20px;
  font-family: var(--display);
  position: relative;
  padding-bottom: 12px;
}
.footer h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--yellow);
}
.footer__logo { margin-bottom: 22px; }
.footer__logo .mark__img { height: 68px; width: auto; display: block; }
.footer p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.62); }
.footer .footer__tagline {
  margin: -8px 0 14px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.footer .footer__motto {
  margin-top: 14px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--yellow);
}
.footer__links { display: grid; gap: 11px; }
.footer__links a {
  font-size: 0.93rem;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color 0.25s, transform 0.25s;
}
.footer__links a::before { content: '›'; color: var(--yellow); font-size: 1.1rem; line-height: 1; }
.footer__links a:hover { color: #fff; transform: translateX(5px); }
.footer__contact { display: grid; gap: 16px; }
.footer__contact li { display: flex; gap: 13px; font-size: 0.92rem; align-items: flex-start; }
.footer__contact svg { width: 18px; height: 18px; color: var(--yellow); flex-shrink: 0; margin-top: 3px; }
.footer__contact a:hover { color: #fff; }
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease);
}
.footer__social a:hover { background: var(--yellow); color: var(--ink); transform: translateY(-4px); }
.footer__social svg { width: 17px; height: 17px; }
/* The addresses column can only carry the head office, so the rest get a strip
   of their own across the full width of the footer - every city named, each
   one a link into the branches page already pointed at that office. */
.footer__offices {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 26px 0 8px;
  display: grid;
  gap: 16px;
}
.footer__offices h5 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--font);
  font-weight: 800;
}
.footer__offices h5::after { content: none; }
.footer__offices h5 svg { width: 15px; height: 15px; color: var(--yellow); }

.footer__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__chips a {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.footer__chips a:hover { background: rgba(252, 237, 56, 0.12); border-color: var(--yellow); transform: translateY(-2px); }
.footer__chips strong { color: #fff; font-size: 0.9rem; font-weight: 700; }
.footer__chips span { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; }
.footer__chips .is-all {
  align-items: center;
  gap: 8px;
  color: var(--yellow);
  font-size: 0.86rem;
  font-weight: 800;
  background: transparent;
  border-color: rgba(252, 237, 56, 0.35);
}
.footer__chips .is-all svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .footer__chips a { padding: 8px 13px; }
  .footer__chips strong { font-size: 0.84rem; }
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.86rem;
}
.footer__bottom a:hover { color: var(--yellow); }
.footer__disclaimer { font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); padding-bottom: 20px; }

/* --------------------------- floating bits ------------------------------ */
.float-wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 250;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
  animation: pulse 2.6s infinite;
}
.float-wa svg { width: 29px; height: 29px; }

@keyframes pulse {
  0% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42), 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42), 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42), 0 0 0 0 rgba(37, 211, 102, 0); }
}

.to-top {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 250;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all 0.35s var(--ease);
  box-shadow: var(--shadow);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 19px; height: 19px; }

/* ----------------------------- reveal ---------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay='1'] { transition-delay: 0.08s; }
.reveal[data-delay='2'] { transition-delay: 0.16s; }
.reveal[data-delay='3'] { transition-delay: 0.24s; }
.reveal[data-delay='4'] { transition-delay: 0.32s; }
.reveal[data-delay='5'] { transition-delay: 0.4s; }

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

/* --------------------------- misc blocks -------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 66px); align-items: center; }
/* a grid column never shrinks below its widest content unless allowed to,
   which pushed the contact form past the edge of a 320px phone */
.split > * { min-width: 0; }
/* article + sidebar (blog post); stacks with every other .split below 980px */
.split--article { grid-template-columns: 1.6fr 1fr; align-items: start; }

.media-stack { position: relative; }
.media-stack__main { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 4.2; }
.media-stack__main img { width: 100%; height: 100%; }
.media-stack__sub {
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 47%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 7px solid #fff;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.media-stack__sub img { width: 100%; height: 100%; }
.media-stack__badge {
  position: absolute;
  left: -20px;
  top: 34px;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: var(--glow);
  text-align: center;
}
.media-stack__badge strong { font-family: var(--display); font-size: 1.85rem; display: block; line-height: 1; }
.media-stack__badge span { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

.tick-list { display: grid; gap: 13px; margin-top: 8px; }
.tick-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.96rem; color: var(--muted); }
.tick-list li strong { color: var(--ink); display: block; font-size: 0.98rem; }
.tick-list svg { width: 21px; height: 21px; color: var(--yellow-2); flex-shrink: 0; margin-top: 2px; }

.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.info-tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
}
.info-tile span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: var(--muted-2); }
.info-tile strong { display: block; font-family: var(--display); font-size: 1.03rem; color: var(--ink); margin-top: 5px; line-height: 1.4; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; justify-content: center; }
.filter {
  padding: 10px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
  transition: all 0.3s var(--ease);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.search-bar { position: relative; max-width: 420px; margin: 0 auto 28px; }
.search-bar input { padding-left: 46px; }
.search-bar svg {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted-2);
}

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
}
.grid > .empty { grid-column: 1 / -1; }

.skeleton {
  background: linear-gradient(100deg, var(--mist) 30%, var(--mist-2) 50%, var(--mist) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: var(--r-lg);
  min-height: 300px;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* comparison table */
.compare {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 0.92rem;
}
.compare th {
  text-align: left;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  padding: 16px 18px;
  white-space: nowrap;
}
.compare td { padding: 15px 18px; border-top: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.compare tbody tr:nth-child(even) { background: var(--mist); }
.compare tbody tr:hover { background: var(--yellow-soft); }
.compare td strong { color: var(--ink); font-family: var(--display); }
.compare a:hover strong { color: var(--ink-3); }

/* dark-section variants */
.section--ink .tick-list li { color: rgba(255, 255, 255, 0.72); }
.section--ink .tick-list li strong { color: #fff; }
.section--ink .info-tile { background: var(--ink-2); border-color: rgba(255, 255, 255, 0.12); }
.section--ink .info-tile strong { color: #fff; }
.section--ink .icon-card p { color: rgba(255, 255, 255, 0.66); }

/* anchor cards keep the card cursor + colour */
a.icon-card { color: inherit; }
a.icon-card h3 { transition: color 0.25s; }
a.icon-card:hover h3 { color: var(--ink-3); }

.prose { max-width: 46rem; }
.prose p { font-size: 1.02rem; line-height: 1.8; margin-bottom: 18px; color: var(--text); }
.prose h2, .prose h3 { margin: 32px 0 14px; }
.prose ul { display: grid; gap: 10px; margin-bottom: 18px; }
.prose ul li { display: flex; gap: 11px; color: var(--muted); }
.prose ul li::before { content: '\2713'; color: var(--yellow-3); font-weight: 800; }

/* blog articles - the marks markdown.js turns into these */
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.prose h3 { font-size: 1.2rem; }
.prose ol { counter-reset: step; display: grid; gap: 12px; margin-bottom: 18px; }
.prose ol li { counter-increment: step; display: flex; gap: 12px; color: var(--text); line-height: 1.7; }
.prose ol li::before {
  content: counter(step);
  flex: none;
  width: 27px;
  height: 27px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--yellow-soft);
  border: 1px solid rgba(228, 210, 26, 0.55);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.8rem;
  display: grid;
  place-items: center;
}
.prose blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 4px solid var(--yellow);
  background: var(--mist);
  border-radius: 0 var(--r) var(--r) 0;
}
.prose blockquote p { margin-bottom: 8px; font-size: 1.06rem; color: var(--ink); font-weight: 500; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose figure { margin: 30px 0; }
.prose figure img { width: 100%; border-radius: var(--r-lg); }
.prose figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--muted); text-align: center; }
.prose :is(p, li) a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow-3); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose :is(p, li) a:hover { background: var(--yellow-soft); }
.prose strong { color: var(--ink); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.post-meta span { display: inline-flex; align-items: center; gap: 7px; }
.post-meta svg { width: 16px; height: 16px; color: var(--yellow); }

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.share strong { font-family: var(--display); margin-right: 6px; }
.share a, .share button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.share a:hover, .share button:hover, .share button.is-done { background: var(--ink); border-color: var(--ink); color: #fff; }
.share svg { width: 18px; height: 18px; }

/* the newest article, leading the blog page */
.post-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  margin-bottom: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.post-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.post-feature__media { position: relative; min-height: 340px; background: var(--mist-2); overflow: hidden; }
.post-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.post-feature:hover .post-feature__media img { transform: scale(1.05); }
.post-feature__body { padding: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.post-feature__body h2 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); transition: color 0.25s; }
.post-feature:hover .post-feature__body h2 { color: var(--ink-3); }
@media (max-width: 860px) {
  .post-feature { grid-template-columns: 1fr; }
  .post-feature__media { min-height: 0; aspect-ratio: 16 / 9; }
}

.draft-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 16px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}
.draft-note svg { width: 18px; height: 18px; flex: none; }

.sticky-card {
  position: sticky;
  top: calc(var(--header-dock) + 22px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}

.tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.tab {
  padding: 13px 20px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all 0.3s;
}
.tab.is-active { color: var(--ink); border-color: var(--yellow); }

/* ----------------------------- responsive ------------------------------- */
/* Between the container's full width and the point the nav collapses, the bar
   is carrying a 185px wordmark, nine nav items and a CTA. Rather than let the
   last item slide under the button, everything in the bar tightens by a few
   pixels first - the logo included, which still reads larger here than the old
   mark did at any width. */
@media (max-width: 1420px) {
  .header__inner { gap: 16px; }
  .logo .mark__img { height: 54px; }
  .nav__link { padding: 11px 8px; font-size: 0.9rem; }
  .header__actions .btn { padding-inline: 16px; }
}

/* below 1,240px the nine nav items and the CTA no longer fit beside the
   wordmark even at the tighter sizes, so the menu moves into the drawer */
@media (max-width: 1239px) {
  .nav, .topbar__list--wide { display: none; }
  .topbar__list--compact { display: flex; }
  .burger { display: grid; }
}

@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .cta { grid-template-columns: 1fr; }
}

@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: clamp(70px, 8vw, 96px); }
  .hero__art { max-width: 320px; margin-inline: 0; justify-self: start; }
  .hero__ghost { top: 26%; font-size: clamp(3.4rem, 17vw, 9rem); }
  .finder { grid-template-columns: 1fr; }
  .finder__label strong { white-space: normal; }
  .finder__fields { grid-template-columns: 1fr 1fr; }
  .finder__fields .btn { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .media-stack { max-width: 520px; margin-inline: auto; }
  .sticky-card { position: static; }
}

@media (max-width: 640px) {
  :root { --header-h: 70px; }
  .container { width: min(100% - 32px, var(--container)); }
  .g-2, .g-3, .g-4, .steps, .form__row, .info-grid { grid-template-columns: 1fr; }
  /* sits 20px outside the photo, but the page margin here is only 16px */
  .media-stack__badge { left: -8px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .logo .mark__img { height: 44px; }
  /* the wordmark is three times as wide as the old square mark, so on a phone
     the header cannot carry both it and a text CTA - the burger was being
     pushed off the right edge. The drawer already opens with the same call to
     action, so the bar keeps the mark and the burger. */
  .header__actions .btn { display: none; }
  .hero { min-height: auto; }
  .hero__grid { padding: 48px 0 70px; gap: 26px; }
  .hero__badges { gap: 10px 18px; margin-top: 24px; padding-top: 20px; }
  .hero__badge span { font-size: 0.84rem; }
  .hero__ghost { display: none; }
  .hero__arrow { display: none; }
  .finder-wrap { margin-top: -38px; }
  .hero__dots { bottom: 84px; }
  .hero__art { max-width: 230px; }
  .finder__fields .btn { grid-column: auto; }
  .finder__fields { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .quote__mark { font-size: 3.4rem; }
  .media-stack__sub { right: 0; width: 42%; }
  .float-wa { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .to-top { right: 16px; bottom: 78px; }
}

/* ======================================================================
   Universities page - directory toolbar, shortlist tray, profile dialog,
   intake calendar and the application timeline.
   Also the country pill row reused by the home page band.
   ====================================================================== */

/* country shortcut pills (home band + anywhere a quick jump helps) */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-weight: 700;
  font-size: 0.87rem;
  color: var(--muted);
  transition: all 0.3s var(--ease);
}
.pill span {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--mist);
  color: var(--ink);
  font-size: 0.74rem;
  text-align: center;
}
.pill:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.pill:hover span { background: var(--yellow); }
.pill--solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill--solid:hover { color: var(--yellow); }
.pill--solid svg { width: 15px; height: 15px; }

/* facts under the page hero headline */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 22px;
}
.hero-facts span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 600;
}
.hero-facts svg { width: 17px; height: 17px; color: var(--yellow); }

/* search + sort row */
.uni-toolbar {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 14px;
  align-items: end;
  max-width: 760px;
  margin: 0 auto 26px;
}
.uni-toolbar .search-bar { max-width: none; margin: 0; }
.uni-sort { gap: 6px; }
.uni-sort label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-2); }

.filters--sub { margin-bottom: 20px; }
.filter--sm { padding: 7px 15px; font-size: 0.82rem; border-radius: 10px; }

.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 4px 18px;
  font-size: 0.92rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.result-bar strong { color: var(--ink); font-family: var(--display); }
.result-bar .link-arrow svg { width: 15px; height: 15px; }

/* the Show more button needs air above it, but only while there is one */
#more:not(:empty) { margin-top: clamp(28px, 4vw, 38px); }

/* shortlist toggle on a university card */
.uni-pick {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}
.uni-pick svg { width: 18px; height: 18px; }
.uni-pick:hover { background: var(--yellow); transform: scale(1.08); }
.uni-pick.is-on { background: var(--ink); color: var(--yellow); }
.uni-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* sticky shortlist tray */
.tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 240;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 -12px 40px rgba(23, 29, 29, 0.28);
  animation: tray-up 0.35s var(--ease);
}
@keyframes tray-up { from { transform: translateY(100%); } }
.tray__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  flex-wrap: wrap;
}
.tray__list { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tray__list > strong { font-family: var(--display); color: var(--yellow); font-size: 0.95rem; white-space: nowrap; }
.tray__list .chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  padding-right: 7px;
}
.tray__list .chip button { display: grid; place-items: center; opacity: 0.6; transition: opacity 0.25s; }
.tray__list .chip button:hover { opacity: 1; color: var(--yellow); }
.tray__list .chip svg { width: 13px; height: 13px; }
.tray__actions { display: flex; align-items: center; gap: 10px; }
.tray__actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.tray__actions .btn--ghost:hover { background: #fff; color: var(--ink); }
/* leave room so the tray never covers the last row of cards */
body.has-tray { padding-bottom: 78px; }
body.has-tray .float-wa { bottom: 94px; }
body.has-tray .to-top { bottom: 164px; }

/* university profile dialog */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(14, 16, 19, 0.66);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  animation: fade-in 0.25s ease;
}
.modal[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }
.modal__dialog {
  position: relative;
  width: min(100%, 780px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  animation: dialog-in 0.35s var(--ease);
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: all 0.25s;
}
.modal__close:hover { background: var(--yellow); }
.modal__close svg { width: 19px; height: 19px; }
.modal__media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--mist-2); }
.modal__media > img { width: 100%; height: 100%; }
.modal__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 16, 19, 0.1) 30%, rgba(14, 16, 19, 0.9));
}
.modal__title { position: absolute; left: 30px; right: 30px; bottom: 24px; z-index: 2; }
.modal__title h3 { color: #fff; margin: 10px 0 6px; }
.modal__where { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; }
.modal__where svg { width: 16px; height: 16px; color: var(--yellow); }
.modal__body { padding: 28px 30px 32px; display: grid; gap: 26px; }
.modal__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fact { display: flex; gap: 12px; align-items: flex-start; }
.fact__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--yellow-soft);
  color: var(--ink);
  flex-shrink: 0;
}
.fact__icon svg { width: 17px; height: 17px; }
.fact span { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800; color: var(--muted-2); }
.fact strong { display: block; font-family: var(--display); font-size: 0.95rem; color: var(--ink); line-height: 1.4; }
.modal__group h4 { margin-bottom: 12px; }
.modal__group p { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; }
.modal__group p svg { width: 18px; height: 18px; color: var(--yellow-3); flex-shrink: 0; margin-top: 3px; }
.modal__actions { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; }

/* intake calendar */
.intakes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.intake {
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.35s var(--ease);
}
.intake:hover { transform: translateY(-6px); border-color: var(--yellow); box-shadow: var(--shadow-lg); }
.intake__head { display: flex; align-items: center; gap: 12px; }
.intake__head strong { font-family: var(--display); color: #fff; font-size: 1.02rem; }
.intake__head .flag { width: 34px; }
.intake .chip--dark { background: rgba(252, 237, 56, 0.14); border-color: rgba(252, 237, 56, 0.3); color: var(--yellow); }
.intake__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  gap: 7px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}
.intake__foot span { display: flex; align-items: center; gap: 8px; }
.intake__foot svg { width: 15px; height: 15px; color: var(--yellow); }

/* application timeline */
.timeline { position: relative; display: grid; gap: 4px; max-width: 880px; margin-inline: auto; }
.timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--yellow), var(--mist-2));
}
.tl { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 14px 0; position: relative; }
.tl__dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--yellow);
  color: var(--ink);
  z-index: 1;
  transition: all 0.35s var(--ease);
}
.tl__dot svg { width: 22px; height: 22px; }
.tl:hover .tl__dot { background: var(--ink); color: var(--yellow); transform: scale(1.06); }
.tl__when {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow-3);
  margin-bottom: 4px;
}
.tl__body h3 { font-size: 1.14rem; margin-bottom: 6px; }
.tl__body p { font-size: 0.94rem; }

/* shortlist request panel */
.shortlist-panel {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 52px);
}
.shortlist-panel__form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
}
.shortlist-panel__picks:empty { display: none; }
.shortlist-panel__picks {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--yellow-soft);
  border: 1px solid rgba(255, 190, 0, 0.36);
}
.shortlist-panel__picks-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
}
.shortlist-panel__picks-label svg { width: 15px; height: 15px; }
.shortlist-panel .form__note { display: flex; align-items: center; gap: 8px; }
.shortlist-panel .form__note svg { width: 15px; height: 15px; color: var(--success); }

.note-line { margin-top: 18px; font-size: 0.84rem; color: var(--muted-2); text-align: center; }

@media (max-width: 1100px) {
  .intakes { grid-template-columns: repeat(3, 1fr); }
  .shortlist-panel { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .modal__facts { grid-template-columns: repeat(2, 1fr); }
  .intakes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .uni-toolbar { grid-template-columns: 1fr; }
  .intakes { grid-template-columns: 1fr; }
  .modal { padding: 0; }
  .modal__dialog { border-radius: 0; width: 100%; max-height: 100vh; min-height: 100vh; }
  .modal__body { padding: 22px 20px 30px; }
  .modal__title { left: 20px; right: 20px; }
  .modal__facts { grid-template-columns: 1fr; }
  .modal__actions .btn { width: 100%; justify-content: center; }
  .tray__inner { padding: 12px 0; gap: 10px; }
  /* the names live in the request form on a phone - the tray keeps the count */
  .tray__list .chip { display: none; }
  .tray__list > strong { width: 100%; }
  .tray__actions { width: 100%; }
  .tray__actions .btn { min-width: 0; padding-inline: 16px; }
  .tray__actions .btn--ghost { flex: 0 0 auto; }
  .tray__actions .btn:not(.btn--ghost) { flex: 1; justify-content: center; }
  body.has-tray { padding-bottom: 116px; }
  body.has-tray .float-wa { bottom: 128px; }
  body.has-tray .to-top { bottom: 190px; }
  .timeline::before { left: 21px; }
  .tl { grid-template-columns: 44px 1fr; gap: 14px; }
  .tl__dot { width: 44px; height: 44px; }
  .tl__dot svg { width: 18px; height: 18px; }
  .pill-row { gap: 8px; }
}

/* ------------------- faculty slider (home page band) -------------------- */
.fac-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 46px;
}
.fac-head .section-head { margin-bottom: 0; }

.fac-nav { display: flex; gap: 10px; flex-shrink: 0; padding-bottom: 6px; }
.fac-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s var(--ease);
}
.fac-arrow:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}
.fac-arrow svg { width: 20px; height: 20px; }

/* a short faculty list fits in one screen - no controls needed then */
.is-static .fac-nav,
.is-static .fac-dots { display: none; }

.fac-slider { position: relative; }
.fac-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 0 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.fac-track::-webkit-scrollbar { display: none; }
.fac-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}
.is-static .fac-track { justify-content: center; }
/* the continuous glide sets the position every frame itself - a smooth
   scroll-behavior or a snap point would fight it */
.is-marquee .fac-track { scroll-behavior: auto; scroll-snap-type: none; }

.fac-card {
  flex: 0 0 calc((100% - 52px) / 3);
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
}
.fac-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

/* the portraits are transparent cut-outs, so they get a branded backdrop and
   sit on the bottom edge - every trainer then lines up at the same height */
.fac-card__photo {
  position: relative;
  aspect-ratio: 4 / 4.3;
  overflow: hidden;
  background:
    radial-gradient(110% 76% at 50% 112%, rgba(252, 237, 56, 0.38), transparent 62%),
    linear-gradient(168deg, var(--ink-3) 0%, var(--ink) 72%);
}
.fac-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transition: transform 0.6s var(--ease);
}
.fac-card:hover .fac-card__photo img { transform: scale(1.05); }

.fac-card__exp {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 7px 13px;
  border-radius: 100px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.35s;
}
.fac-card__exp svg { width: 14px; height: 14px; }

/* the full profile slides up over the photo on hover */
.fac-card__bio {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  margin: 0;
  padding: 72px 22px 24px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  line-height: 1.6;
  background: linear-gradient(180deg, transparent, rgba(12, 16, 16, 0.86) 42%, rgba(12, 16, 16, 0.97));
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.45s var(--ease);
}
.fac-card:hover .fac-card__bio { opacity: 1; transform: none; }
.fac-card:hover .fac-card__exp { opacity: 0; }

.fac-card__body { padding: 22px 22px 24px; }
.fac-card__body h3 { font-size: 1.22rem; }
.fac-card__role {
  color: var(--ink-4);
  font-weight: 700;
  font-size: 0.86rem;
  margin-top: 5px;
}
.fac-card__qual {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}
.fac-card__qual svg { width: 15px; height: 15px; color: var(--yellow-3); margin-top: 3px; }
.fac-card__body .chips { margin-top: 16px; }
.fac-card__body .chip { background: var(--paper); }

.fac-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}
/* fixed size on purpose - growing the active dot would relayout the page on
   every slide, and a relayout re-snaps the track mid-scroll */
.fac-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mist-2);
  border: 1px solid var(--line);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.fac-dots button:hover { background: var(--yellow-2); }
.fac-dots button.is-active { background: var(--ink); border-color: var(--ink); transform: scale(1.35); }

@media (max-width: 1040px) {
  .fac-card { flex-basis: calc((100% - 26px) / 2); }
}

/* a touch screen has no hover, so the overlay would never open - the
   experience badge and the profile link carry the card there instead */
@media (hover: none) {
  .fac-card__bio { display: none; }
  .fac-card:hover .fac-card__exp { opacity: 1; }
}

@media (max-width: 860px) {
  .fac-head { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 34px; }
  .fac-nav { padding-bottom: 0; }
}

@media (max-width: 640px) {
  .fac-track { gap: 16px; }
  .fac-card { flex-basis: 84%; }
  .fac-arrow { width: 46px; height: 46px; }
}

/* ------------------ university profile: fees, EMI, shots ---------------- */
.fee-table {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fee-table table { width: 100%; border-collapse: collapse; }
.fee-table thead { background: var(--ink); }
.fee-table th {
  text-align: left;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  padding: 16px 20px;
}
.fee-table td { padding: 16px 20px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.fee-table tbody tr { transition: background 0.25s; }
.fee-table tbody tr:hover { background: var(--yellow-soft); }
.fee-table td strong { color: var(--ink); font-weight: 700; }
.fee-table__fee { font-weight: 800; color: var(--ink) !important; white-space: nowrap; }

.fee-extras {
  margin-top: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}
.fee-extras h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fee-extras h3 svg { width: 18px; height: 18px; color: var(--yellow-3); }

.fee-source {
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--muted-2);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.6;
}
.fee-source svg { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; }

/* ------------------------------- EMI ----------------------------------- */
.emi {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow);
}
.emi__controls { display: grid; gap: 26px; }
.emi__field label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.emi__field label span { color: var(--muted-2); font-weight: 600; font-size: 0.82rem; }

.emi__input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 16px;
  transition: border-color 0.25s, background 0.25s;
}
.emi__input:focus-within { border-color: var(--ink); background: var(--paper); }
.emi__input span { font-weight: 800; color: var(--muted-2); }
.emi__input input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 14px 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  outline: none;
}
/* the spinners fight the preset buttons for space */
.emi__input input::-webkit-outer-spin-button,
.emi__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.emi__input input[type='number'] { -moz-appearance: textfield; }

.emi__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.emi__preset {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 100px;
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: all 0.25s var(--ease);
}
.emi__preset:hover { background: var(--yellow); border-color: var(--yellow); }
.emi__hint { margin-top: 10px; font-size: 0.8rem; color: var(--muted-2); }

#emi-years-range { width: 100%; margin-top: 14px; accent-color: var(--ink); }

.emi__result {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  color: #fff;
}
.emi__headline { text-align: center; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.emi__headline span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); }
.emi__headline strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 8px 0 6px;
}
.emi__headline em { font-style: normal; font-size: 0.82rem; color: rgba(255, 255, 255, 0.62); }

.emi__split { display: grid; gap: 14px; padding: 22px 0; }
.emi__split div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.emi__split span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.66); }
.emi__split strong { font-family: var(--display); font-size: 1.02rem; font-weight: 700; }
.emi__result .btn { width: 100%; justify-content: center; }

.uni-shot { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); }
.uni-shot img { width: 100%; height: 100%; transition: transform 0.6s var(--ease); }
.uni-shot:hover img { transform: scale(1.05); }

@media (max-width: 980px) {
  /* `1fr` keeps an automatic min-content floor, so on a narrow phone the
     column stayed wider than the card and the panel spilled over its own edge.
     `minmax(0, …)` lets the track shrink to the card; the fields inside wrap. */
  .emi { grid-template-columns: minmax(0, 1fr); }
  .emi__controls { grid-template-columns: minmax(0, 1fr); }
  .emi__controls, .emi__result, .emi__field, .emi__presets { min-width: 0; }
  /* a long lender name on a preset chip is what sets the floor - let it wrap */
  .emi__preset { max-width: 100%; white-space: normal; text-align: left; }
}

/* the fee table turns into stacked cards rather than scrolling sideways */
@media (max-width: 760px) {
  .fee-table thead { display: none; }
  .fee-table table, .fee-table tbody, .fee-table tr, .fee-table td { display: block; width: 100%; }
  .fee-table tr { border-top: 1px solid var(--line); padding: 8px 0; }
  .fee-table tr:first-child { border-top: 0; }
  .fee-table td { border: 0; padding: 7px 18px; display: flex; justify-content: space-between; gap: 16px; }
  .fee-table td::before {
    content: attr(data-label);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
    flex-shrink: 0;
  }
  /* the stacked card has no column to protect, so let a long fee wrap */
  .fee-table__fee { text-align: right; white-space: normal; }
}

/* ==========================================================================
   Guide pages - the long country and university profiles
   Every block below is a different shape on purpose: a student scrolling a
   two thousand word page needs the rhythm to change, or it reads as one wall.
   ========================================================================== */

/* a third background tone, warmer than mist, so three bands can sit in a row */
.section--cream { background: linear-gradient(180deg, #fffdf0 0%, #fffef8 60%, var(--paper) 100%); }
.section--deep {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(252, 237, 56, 0.1), transparent 60%),
    linear-gradient(165deg, var(--ink-2) 0%, var(--ink) 100%);
  color: #fff;
}
.section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section--deep p { color: rgba(255, 255, 255, 0.72); }
.section--deep .eyebrow { background: rgba(255, 255, 255, 0.08); color: var(--yellow); border-color: rgba(252, 237, 56, 0.3); }
.section--deep .title-mark { color: var(--yellow); }

/* section head with the lead paragraph beside the title instead of under it */
.head-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.head-split .section-head { margin-bottom: 0; max-width: none; }
.head-split__aside p { font-size: 1.02rem; }
.head-split__aside .tick-list { margin-top: 18px; }

/* ------------------------------- jump nav ------------------------------- */
/* The chapter bar on the long guides. It docks under the site header and stays
   there for the whole page, so it needs the header's real measured height
   (layout.js measures it into --header-dock) rather than a guessed number.

   Fifteen chapters never fit one row at any sensible width, so the row scrolls
   sideways. What was missing was any sign that it does: the chips simply ran
   off the edge. The rail below adds the two things that fix that - arrows at
   each end, and a fade over the edge the chips disappear behind. */
.jump {
  position: sticky;
  top: var(--header-dock);
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.jump__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
}

/* the scrolling rail, between the two arrows */
.jump__rail {
  position: relative;
  flex: 1;
  min-width: 0;
}
.jump__track {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 2px 0;
}
.jump__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .jump__track { scroll-behavior: auto; }
}

/* the fade sits over whichever end still has chips behind it */
.jump__rail::before,
.jump__rail::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  z-index: 2;
}
.jump__rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--paper), rgba(255, 255, 255, 0));
}
.jump__rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--paper), rgba(255, 255, 255, 0));
}
.jump__rail.has-prev::before,
.jump__rail.has-next::after { opacity: 1; }

.jump__arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--line);
  transition: opacity 0.25s var(--ease), background 0.2s, color 0.2s;
}
.jump__arrow svg { width: 16px; height: 16px; }
.jump__arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* kept in the layout when it cannot go further, so the row never shifts */
.jump__arrow[disabled] { opacity: 0.25; pointer-events: none; }
/* nothing to scroll at all - both arrows go away and the chips take the width */
.jump.is-full .jump__arrow { display: none; }
.jump.is-full .jump__track { justify-content: center; }

.jump a {
  flex-shrink: 0;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.jump a:hover { background: var(--mist); color: var(--ink); }
.jump a.is-here { background: var(--ink); color: #fff; }
.jump a:focus-visible { outline: 2px solid var(--yellow-3); outline-offset: 2px; }

/* ------------------------------ fact bar -------------------------------- */
/* the overlapping strip of headline numbers directly under a page hero */
.factbar {
  position: relative;
  z-index: 5;
  margin-top: clamp(-64px, -5vw, -30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  overflow: hidden;
}
.factbar__item {
  padding: 24px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.factbar__item:last-child { border-right: 0; }
.factbar__ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--yellow-soft);
  color: var(--yellow-3);
  border: 1px solid rgba(252, 237, 56, 0.55);
}
.factbar__ico svg { width: 19px; height: 19px; }
/* the label span inside the text block, not .factbar__ico - which is a span
   too, and as a bare `.factbar__item span` this rule outranked it: the icon
   tile lost its centring grid and its icon came out body-grey in the corner
   instead of yellow in the middle */
.factbar__item > div span {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 3px;
}
.factbar__item strong {
  font-family: var(--display);
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--ink);
}

/* ------------------------------ why cards ------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why {
  position: relative;
  overflow: hidden;
  padding: 34px 28px 30px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.why::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--yellow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--ease);
}
.why:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.why:hover::before { transform: scaleY(1); }
.why__num {
  position: absolute;
  right: 16px;
  top: 6px;
  font-family: var(--display);
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mist-2);
  pointer-events: none;
  transition: color 0.4s;
}
.why:hover .why__num { color: var(--yellow); }
.why__ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--yellow);
  margin-bottom: 18px;
}
.why__ico svg { width: 21px; height: 21px; }
.why h3 { font-size: 1.1rem; margin-bottom: 9px; position: relative; }
.why p { font-size: 0.93rem; line-height: 1.72; position: relative; }
.section--deep .why { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.section--deep .why__num { color: rgba(255, 255, 255, 0.08); }
.section--deep .why__ico { background: var(--yellow); color: var(--ink); }

/* ---------------------------- study levels ------------------------------ */
.levels { display: flex; flex-direction: column; gap: 14px; }
.level {
  display: grid;
  grid-template-columns: 220px 150px 1fr;
  gap: 26px;
  align-items: center;
  padding: 22px 26px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.level:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); transform: translateX(5px); }
.level__name { display: flex; align-items: center; gap: 12px; }
.level__name svg { width: 20px; height: 20px; color: var(--yellow-3); }
.level__name strong { font-family: var(--display); font-size: 1.04rem; color: var(--ink); }
.level__when {
  justify-self: start;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--yellow-soft);
  border: 1px solid rgba(252, 237, 56, 0.6);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--yellow-3);
}
.level p { font-size: 0.93rem; margin: 0; }

/* ----------------------------- cost tabs -------------------------------- */
.cost { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cost__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--mist); }
.cost__tab {
  flex: 1;
  padding: 18px 20px;
  font-family: var(--display);
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: all 0.3s var(--ease);
}
.cost__tab svg { width: 18px; height: 18px; }
.cost__tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.cost__tab.is-active { color: var(--ink); background: var(--paper); border-bottom-color: var(--yellow); }
.cost__panel { display: none; padding: 8px 0 0; }
.cost__panel.is-active { display: block; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 15px 26px;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 16px 26px; border-bottom: 1px solid var(--mist-2); font-size: 0.94rem; color: var(--muted); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background 0.25s; }
.data-table tbody tr:hover { background: var(--yellow-soft); }
.data-table td:first-child { color: var(--ink); font-weight: 600; }
.data-table .num { font-family: var(--display); font-weight: 800; color: var(--ink); white-space: nowrap; }
/* The Ausbildung-vs-degree table holds sentences, not figures, so it does not
   borrow `.num` - that is for numbers and would hold every cell on one line.
   Equal thirds, wrapping allowed, and the Ausbildung column carries the weight
   because it is the one the page is arguing for. */
.compare-table th:first-child, .compare-table td:first-child { width: 28%; }
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { width: 36%; }
.compare-table td:not(:first-child) { white-space: normal; }
.compare-table__yes { color: var(--ink); font-weight: 700; }
.compare-table thead th:nth-child(2) { color: var(--yellow-3); }

.data-table tfoot td { padding: 16px 26px; background: var(--ink); color: #fff; font-weight: 700; }
.data-table tfoot .num { color: var(--yellow); }
.cost__note {
  display: flex;
  gap: 11px;
  padding: 16px 26px;
  background: var(--mist);
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--muted);
}
.cost__note svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--yellow-3); }

/* --------------------------- scholarships ------------------------------- */
.schol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.schol {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.schol::after {
  content: '';
  position: absolute;
  top: -42px;
  right: -42px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: 0.16;
  transition: transform 0.5s var(--ease);
}
.schol:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.schol:hover::after { transform: scale(1.7); }
.schol__amount {
  position: relative;
  display: inline-block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  background: linear-gradient(transparent 62%, var(--yellow) 62%);
  padding: 0 3px;
  margin-bottom: 14px;
}
.schol h3 { position: relative; font-size: 1.04rem; margin-bottom: 9px; }
.schol p { position: relative; font-size: 0.9rem; line-height: 1.7; }
.schol__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--yellow-3);
}
.schol__tag svg { width: 15px; height: 15px; }

/* ------------------------------- exams ---------------------------------- */
.exam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.exam {
  text-align: center;
  padding: 30px 20px 26px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
}
.exam:hover { transform: translateY(-6px); border-color: var(--yellow); box-shadow: var(--glow); }
.exam__name {
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.exam__score {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  margin: 6px 0 4px;
}
.exam__of { font-size: 0.78rem; font-weight: 700; color: var(--yellow-3); }
.exam__bar { height: 6px; border-radius: 999px; background: var(--mist-2); margin: 16px 0 14px; overflow: hidden; }
.exam__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--yellow-2), var(--yellow)); }
.exam p { font-size: 0.86rem; line-height: 1.65; }

/* -------------------------- document checklist -------------------------- */
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 30px; counter-reset: doc; }
.doc {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px dashed var(--line);
  transition: border-color 0.3s, background 0.3s;
}
.doc:hover { border-style: solid; border-color: var(--ink); background: var(--yellow-soft); }
.doc__n {
  counter-increment: doc;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
}
.doc__n::before { content: counter(doc, decimal-leading-zero); }
.doc strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.doc p { font-size: 0.88rem; line-height: 1.65; margin: 0; }

/* ----------------------------- visa panel ------------------------------- */
.visa-split { display: grid; grid-template-columns: 1fr 340px; gap: 46px; align-items: start; }
.visa-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-dock) + 70px); }
.visa-fee {
  padding: 28px 26px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
  text-align: center;
  box-shadow: var(--glow-dark);
}
.visa-fee span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.visa-fee strong { display: block; font-family: var(--display); font-size: 2.3rem; font-weight: 800; color: var(--yellow); margin: 6px 0 2px; }
.visa-fee em { font-style: normal; font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); }
.visa-docs { padding: 26px 24px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.visa-docs h4 { font-size: 0.95rem; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.visa-docs h4 svg { width: 18px; height: 18px; color: var(--yellow-3); }
.visa-docs li { display: flex; gap: 10px; font-size: 0.89rem; color: var(--muted); padding: 7px 0; }
.visa-docs li + li { border-top: 1px dashed var(--line); }
.visa-docs svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--success); }

/* ---------------------------- salary rows ------------------------------- */
.salary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* One track list for the header and every row. They are separate grids, so
     an `auto` column would size to its own content in each and the headings
     would drift off the figures they label.

     The role takes only the width it needs, the meter absorbs the slack, and
     the figure gets room for a full range. The old `1fr 190px 120px` left a
     cavern of empty space beside a short label like "Trainee, first year", and
     120px could not hold "€1,000 - €1,100 / month" - which simply spilled. */
  --salary-cols: minmax(170px, 22rem) minmax(110px, 1fr) minmax(0, 12rem);
}
.salary__row {
  display: grid;
  grid-template-columns: var(--salary-cols);
  gap: 22px;
  align-items: center;
  padding: 17px 24px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.salary__row:hover { transform: translateX(6px); box-shadow: var(--shadow-sm); }
.salary__role { display: flex; align-items: center; gap: 13px; font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 0.99rem; }
.salary__role svg { width: 18px; height: 18px; color: var(--muted-2); }
.salary__meter { height: 9px; border-radius: 999px; background: var(--mist-2); overflow: hidden; }
.salary__meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ink-4), var(--ink)); }
.salary__pay { text-align: right; font-family: var(--display); font-weight: 800; color: var(--ink); white-space: nowrap; }
.salary__head {
  display: grid;
  grid-template-columns: var(--salary-cols);
  gap: 22px;
  padding: 0 24px 6px;
  /* the rows carry a 1px border; without the same inline border here their
     flexible middle column resolves 2px narrower and the headings sit off the
     figures they label */
  border-inline: 1px solid transparent;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.salary__head span:last-child { text-align: right; }

/* --------------------------- German ladder ------------------------------ */
/* Six named CEFR rungs, with the two that gate the Ausbildung route raised out
   of the row. Deliberately not the exam-score cards: those draw a meter from
   the number in the score, which makes B2 a full bar and A1 nearly empty. */
.ladder {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: stretch;
  counter-reset: rung;
}
.ladder__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 20px 22px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ladder__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.ladder__level {
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  color: var(--muted-2);
}
.ladder__step p { font-size: 0.86rem; line-height: 1.55; }

/* the two rungs that decide whether the route is open */
.ladder__step.is-gate { background: var(--ink); border-color: var(--ink); }
.ladder__step.is-gate .ladder__level { color: var(--yellow); }
.ladder__step.is-gate p { color: rgba(255, 255, 255, 0.76); }
.ladder__flag {
  position: absolute;
  top: -10px;
  left: 20px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ladder__certs { margin-top: 30px; }
.ladder__certs h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin-bottom: 16px; }
.ladder__certs h3 svg { width: 18px; height: 18px; color: var(--yellow-3); }
.ladder__cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ladder__cert {
  padding: 18px 20px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
}
.ladder__cert strong { display: block; font-family: var(--display); font-size: 0.95rem; color: var(--ink); margin-bottom: 5px; }
.ladder__cert p { font-size: 0.85rem; line-height: 1.55; }

/* ------------------------------- cities --------------------------------- */
.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.city {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 3.6;
  background: var(--ink);
  isolation: isolate;
}
.city img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); z-index: 0; }
.city::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(23, 29, 29, 0.05) 30%, rgba(23, 29, 29, 0.9) 100%);
}
.city:hover img { transform: scale(1.09); }
.city__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 22px 20px; }
.city__body h3 { color: #fff; font-size: 1.14rem; margin-bottom: 6px; }
.city__cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.city__cost svg { width: 13px; height: 13px; }
.city__body p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.35s, margin-top 0.4s;
}
.city:hover .city__body p { max-height: 96px; opacity: 1; margin-top: 7px; }
/* nothing hovers on a touch screen, so the copy would never appear there */
@media (hover: none) {
  .city__body p { max-height: none; opacity: 1; margin-top: 7px; }
}

/* ----------------------------- trade cards ------------------------------ */
/* The Ausbildung trades. A city tile hides its text until hover, which is the
   wrong trade-off here - this is the grid a student picks a career out of, so
   the photograph sits above the card rather than behind the text, and the
   description stays on the page. */
.trade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trade {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.trade:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.trade__media { position: relative; aspect-ratio: 16 / 10; background: var(--ink); overflow: hidden; }
.trade__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.trade:hover .trade__media img { transform: scale(1.07); }
.trade__time {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.trade__time svg { width: 13px; height: 13px; }
.trade__body { padding: 18px 20px 22px; }
.trade__body h3 { font-size: 1.04rem; line-height: 1.3; }
.trade__de {
  display: block;
  margin: 4px 0 11px;
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--yellow-3);
  letter-spacing: 0.01em;
}
.trade__body p { font-size: 0.87rem; line-height: 1.65; color: var(--muted); }

/* -------------------------- programme areas ----------------------------- */
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.area {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 24px 22px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: box-shadow 0.35s, transform 0.35s var(--ease);
}
.area:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.area__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--mist); color: var(--ink); }
.area:hover .area__ico { background: var(--yellow); }
.area__ico svg { width: 20px; height: 20px; }
.area strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); margin-bottom: 5px; }
.area p { font-size: 0.88rem; line-height: 1.65; margin: 0; }

/* ----------------------------- ranking strip ---------------------------- */
.ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.rank {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.35s, transform 0.35s var(--ease);
}
.rank:hover { background: rgba(252, 237, 56, 0.12); transform: translateY(-5px); }
.rank strong { display: block; font-family: var(--display); font-size: 2.1rem; font-weight: 800; color: var(--yellow); line-height: 1.1; }
.rank span { display: block; font-size: 0.93rem; font-weight: 700; color: #fff; margin: 8px 0 4px; }
.rank em { font-style: normal; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }

/* ---------------------------- accommodation ----------------------------- */
.stay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.stay {
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--yellow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.stay:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.stay__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); color: var(--ink); margin-bottom: 15px; }
.stay__ico svg { width: 19px; height: 19px; }
.stay h3 { font-size: 1.02rem; margin-bottom: 6px; }
.stay__cost { font-family: var(--display); font-weight: 800; color: var(--yellow-3); font-size: 1.02rem; margin-bottom: 9px; }
.stay p { font-size: 0.88rem; line-height: 1.68; }

/* ----------------------------- campus life ------------------------------ */
.life-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.life {
  padding: 26px 22px;
  border-radius: var(--r-lg);
  background: var(--mist);
  border: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, transform 0.35s var(--ease);
}
.life:hover { background: var(--paper); border-color: var(--line); transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.life__ico { color: var(--yellow-3); margin-bottom: 14px; }
.life__ico svg { width: 24px; height: 24px; }
.life strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.life p { font-size: 0.87rem; line-height: 1.68; margin: 0; }
.life--wide { grid-column: span 2; }

/* ---------------------------- employer wall ----------------------------- */
.wall { display: flex; flex-wrap: wrap; gap: 12px; }
.wall span {
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  transition: all 0.3s var(--ease);
}
.wall span:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-3px); }
.section--deep .wall span { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.section--deep .wall span:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* --------------------------- course cards ------------------------------- */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.course {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 22px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: all 0.3s var(--ease);
}
.course:hover { border-color: var(--yellow); background: var(--yellow-soft); transform: translateY(-4px); }
.course__ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); flex-shrink: 0; }
.course__ico svg { width: 17px; height: 17px; }
.course strong { font-family: var(--display); font-size: 0.97rem; color: var(--ink); line-height: 1.35; }
/* scoped to the text block beside the icon: as a bare `.course span` this also
   caught .course__ico, which is a span too - flattening its centring grid and
   repainting its yellow icon in body grey on a near-black tile, so the icon
   disappeared into the corner of a dark square */
.course > div span { display: block; font-size: 0.8rem; color: var(--muted-2); font-weight: 600; }

/* ---------------------------- quote callout ----------------------------- */
.callout {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 22px;
  padding: 30px 32px;
  border-radius: var(--r-lg);
  background: var(--yellow-soft);
  border: 1px solid rgba(252, 237, 56, 0.6);
}
.callout__ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); }
.callout__ico svg { width: 24px; height: 24px; }
.callout h3 { font-size: 1.1rem; margin-bottom: 7px; }
.callout p { font-size: 0.94rem; line-height: 1.75; margin: 0; }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 1080px) {
  .head-split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .why-grid, .schol-grid, .area-grid, .course-grid { grid-template-columns: repeat(2, 1fr); }
  .exam-grid, .city-grid, .life-grid, .trade-grid { grid-template-columns: repeat(2, 1fr); }
  .visa-split { grid-template-columns: 1fr; gap: 30px; }
  .visa-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .visa-fee, .visa-docs { flex: 1 1 260px; }
  .level { grid-template-columns: 1fr; gap: 12px; }
  .level__when { justify-self: start; }
  /* six CEFR rungs in a row needs the full width - two rows of three below it */
  .ladder { grid-template-columns: repeat(3, 1fr); }
  .ladder__cert-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .why-grid, .schol-grid, .area-grid, .course-grid, .docs,
  .exam-grid, .city-grid, .life-grid, .stay-grid, .ranks, .trade-grid { grid-template-columns: 1fr; }
  .life--wide { grid-column: auto; }
  .factbar { margin-top: -26px; grid-template-columns: 1fr; }
  .factbar__item { border-right: 0; }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .ladder__cert-grid { grid-template-columns: 1fr; }
  .cost__tabs { flex-direction: column; }
  .cost__tab { border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
  .cost__tab.is-active { border-bottom-color: var(--line); border-left-color: var(--yellow); }
  .salary__row { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .salary__meter { grid-column: 1 / -1; }
  .salary__head { display: none; }
  .city { aspect-ratio: 3 / 2.4; }
  .city__body p { max-height: 96px; opacity: 1; margin-top: 7px; }
  .callout { grid-template-columns: 1fr; gap: 16px; padding: 24px 22px; }

  /* the chapter bar earns its space on a phone - these pages are long - so it
     stays, just tighter. The arrows go: a thumb already swipes the row, and
     two 34px targets would eat the width the chips need. The edge fades stay,
     because they are what says the row keeps going. */
  .jump__inner { padding: 7px 0; gap: 0; }
  .jump__arrow { display: none; }
  .jump a { padding: 7px 13px; font-size: 0.79rem; }
  .jump__rail::before, .jump__rail::after { width: 30px; }

}

/* The data tables stack into labelled rows here rather than at the phone
   breakpoint. A prose first column beside a `nowrap` figure needs close to
   1000px, so on a tablet the old 720px threshold left the table wider than its
   panel with the right-hand column cut clean off. */
@media (max-width: 980px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { border-top: 1px solid var(--line); padding: 14px 20px; }
  .data-table tr:first-child { border-top: 0; }
  .data-table td { border: 0; padding: 5px 0; }
  /* label on its own line, value under it - a figure that cannot wrap would
     otherwise run off the side of the screen */
  .data-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 800;
    color: var(--muted-2);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .data-table .num { white-space: normal; }
  .data-table tfoot { display: block; }
  .data-table tfoot tr { background: var(--ink); }
  .data-table tfoot td { color: #fff; }
  /* the comparison table's thirds go full width once the rows stack */
  .compare-table th:first-child, .compare-table td:first-child,
  .compare-table th:not(:first-child), .compare-table td:not(:first-child) { width: 100%; }
}

/* ========================== branch locator ===============================
   The closing band on the home page. The office list on the left and the map
   panel on the right are two grid items of one stretched row, so whichever
   column is taller sets the height and the other fills it: the map absorbs
   the slack through `flex: 1`, and the helper card is pushed to the foot of
   the list with `margin-top: auto`. Five offices or seven, the two columns
   still finish level.
   ========================================================================= */
.branches {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(20px, 2.6vw, 34px);
  align-items: stretch;
}

.branches__col { display: flex; flex-direction: column; gap: 18px; }
.branches__list { display: grid; gap: 11px; }

/* ------------------------------- the rows -------------------------------- */
.branch {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 15px 20px;
  text-align: left;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

/* the yellow rail that marks whichever office the map is showing */
.branch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--yellow);
  transform: scaleY(0);
  transition: transform 0.45s var(--ease);
}

.branch:hover { border-color: var(--ink-4); box-shadow: var(--shadow-sm); transform: translateX(3px); }
.branch.is-active {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--glow-dark);
  transform: none;
}
.branch.is-active::before { transform: scaleY(1); }

.branch__ix {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--mist);
  color: var(--muted-2);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.branch.is-active .branch__ix { background: var(--yellow); color: var(--ink); }

/* min-width: 0 so a long area name ellipsises instead of widening the row */
.branch__txt { min-width: 0; }
.branch strong {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.4s var(--ease);
}
.branch.is-active strong { color: #fff; }

.branch__tag {
  font-family: var(--font);
  font-style: normal;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
}

.branch__area {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.branch__area svg { width: 15px; height: 15px; color: var(--yellow-3); transition: color 0.4s var(--ease); }
.branch.is-active .branch__area { color: rgba(255, 255, 255, 0.66); }
.branch.is-active .branch__area svg { color: var(--yellow); }

.branch__go {
  display: grid;
  place-items: center;
  color: var(--muted-2);
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
}
.branch__go svg { width: 18px; height: 18px; }
.branch:hover .branch__go { color: var(--ink); transform: translateX(4px); }
.branch.is-active .branch__go { color: var(--yellow); transform: translateX(4px); }

/* the card that squares the list column off against the taller map panel */
.branch-help {
  margin-top: auto;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--yellow-soft);
  border: 1px solid rgba(252, 237, 56, 0.6);
}
.branch-help > svg { width: 24px; height: 24px; color: var(--yellow-3); }
.branch-help p { font-size: 0.89rem; line-height: 1.68; margin: 9px 0 13px; }

/* ------------------------------ the map panel ---------------------------- */
.branches__panel {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
}

.branches__map { position: relative; flex: 1 1 auto; min-height: 320px; background: var(--ink-2); }
.branches__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* a map is a photograph of a city dropped into a charcoal-and-yellow page -
     a touch of grey settles it into the band, and hovering hands it back at
     full strength to anyone actually reading street names off it */
  filter: grayscale(0.3) contrast(1.02);
  transition: filter 0.5s var(--ease), opacity 0.45s var(--ease);
}
.branches__map:hover iframe { filter: none; }

/* An embed paints white before it paints a map, which on a charcoal panel
   reads as something breaking rather than something loading. The frame waits
   out of sight over the panel's own dark ground, with the spinner borrowed
   from the hero orbit, until it says it is ready. */
.branches__map.is-loading iframe { opacity: 0; }
.branches__map::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--yellow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.branches__map.is-loading::after { opacity: 1; animation: orbit-spin 0.8s linear infinite; }

.branch-info { padding: clamp(22px, 2.6vw, 30px); color: #fff; }
.branch-info h3 {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  color: #fff;
}
.branch-info h3 span {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--yellow);
}
.branch-info__meta { display: grid; gap: 11px; margin: 16px 0 21px; }
.branch-info__meta li {
  display: flex;
  gap: 11px;
  font-size: 0.92rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.74);
}
.branch-info__meta svg { width: 18px; height: 18px; color: var(--yellow); margin-top: 2px; }
.branch-info__meta a:hover { color: var(--yellow); }
.branch-info__acts { display: flex; gap: 11px; flex-wrap: wrap; }

@media (max-width: 1040px) {
  .branches { grid-template-columns: 1fr; }
  /* stacked, the map has no column to match any more, so it takes a shape of
     its own rather than the leftover height of a row that no longer exists */
  .branches__map { min-height: 0; aspect-ratio: 16 / 9; }
  .branch-help { margin-top: 0; }
}

@media (max-width: 640px) {
  .branch { padding: 13px 15px; gap: 12px; }
  .branch__ix { width: 32px; height: 32px; border-radius: 10px; font-size: 0.74rem; }
  .branch strong { font-size: 1rem; }
  .branches__map { aspect-ratio: 4 / 3.2; }
  .branch-info__acts .btn { width: 100%; }
}

/* ---------------------------- office cards ------------------------------
   The branches page writes every address out underneath the locator. A map
   pin is how you get there; this is how you copy the address into a cab app,
   call the desk, or read it back to somebody over the phone - so it is live
   text on every card, never an image of one. */
.office-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
}

.office {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 26px);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.office:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--ink-4); }

.office__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.office__ix {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.86rem;
}
.office__head h3 { font-size: 1.22rem; letter-spacing: -0.02em; }
.office__area { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.office__tag {
  margin-left: auto;
  align-self: center;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--yellow-soft);
  color: var(--yellow-3);
  border: 1px solid rgba(255, 190, 0, 0.4);
}

.office__meta { display: grid; gap: 12px; margin-bottom: 20px; }
.office__meta li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9rem; line-height: 1.65; color: var(--muted); }
.office__meta svg { width: 17px; height: 17px; color: var(--yellow-3); flex-shrink: 0; margin-top: 3px; }
.office__meta a:hover { color: var(--ink); }

/* the buttons sit on the floor of the card, so a short address and a long one
   still line their actions up across the row */
.office__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }

@media (max-width: 1040px) {
  .office-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .office-grid { grid-template-columns: 1fr; }
  .office__acts .btn { flex: 1; justify-content: center; }
}

/* ------------------------- one office, one page ------------------------- */
/* The name, address and phone sit at the top in live text, in the order a
   visitor reads them off a shopfront. Everything here is selectable: an
   address you cannot copy into a cab app is an address you have to retype. */
.nap {
  display: grid;
  /* auto-fit, not a fixed count: an office with a named partner has four facts
     and one without has three, and a fixed three-column grid leaves the fourth
     stranded on a row of its own */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--shadow-sm);
}
.nap__item { display: flex; gap: 15px; align-items: flex-start; }
.nap__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--yellow-soft);
  color: var(--yellow-3);
  border: 1px solid rgba(255, 190, 0, 0.35);
}
.nap__icon svg { width: 20px; height: 20px; }
.nap__item h4 {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-family: var(--font);
  font-weight: 800;
  margin-bottom: 5px;
}
.nap__item p { font-size: 0.95rem; line-height: 1.6; color: var(--text); }
.nap__item a:hover { color: var(--yellow-3); }

/* the buttons take the full width under the three facts rather than squeezing
   into a fourth column that would be half the width of the address */
.nap__acts {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2vw, 24px);
}

/* On a page about one address the map is the subject, not a thumbnail beside
   a list, so it gets the full width and a shape wide enough to show the
   streets either side of the door. */
.branch-map-wide .branches__map {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  min-height: 0;
  box-shadow: var(--shadow);
}
.branch-map-wide .branches__map iframe { filter: none; }

/* the sibling offices use the branches-index card, with the index number
   replaced by a pin - they are a list of places, not a numbered sequence */
#others .office__ix { background: var(--yellow-soft); color: var(--yellow-3); border: 1px solid rgba(255, 190, 0, 0.35); }
#others .office__ix svg { width: 19px; height: 19px; }

/* the area under the city name in the hero */
.page-hero .hero-sub { color: var(--yellow); }

@media (max-width: 980px) {
  .branch-map-wide .branches__map { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .nap { grid-template-columns: 1fr; }
  .nap__acts .btn { width: 100%; justify-content: center; }
  .branch-map-wide .branches__map { aspect-ratio: 4 / 3.4; }
}

/* =========================== MBBS pathways ===============================
   The Study MBBS hub. Four groups, each a headed block of tiles, rather than
   one undifferentiated grid of twenty-one links: the grouping is the page's
   argument - abroad, India, afterwards, and the exams that gate all of it -
   so it has to survive being skimmed.
   ========================================================================= */
.mbbs-groups { display: grid; gap: clamp(34px, 4vw, 54px); }

.mbbs-group__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.mbbs-group__ix {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.9rem;
}
.mbbs-group__head h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.mbbs-group__head p { font-size: 0.92rem; margin-top: 4px; max-width: 70ch; }
.mbbs-group__count {
  align-self: start;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--yellow-soft);
  border: 1px solid rgba(252, 237, 56, 0.6);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yellow-3);
  white-space: nowrap;
}

.mbbs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.mbbs-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 17px 19px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.mbbs-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: transparent;
  background: var(--ink);
}

.mbbs-tile__ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--mist);
  color: var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.mbbs-tile__ico svg { width: 20px; height: 20px; }
/* the flag fills its tile rather than floating in the middle of it */
.mbbs-tile__ico .flag { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.mbbs-tile:hover .mbbs-tile__ico { background: var(--yellow); color: var(--ink); }

/* min-width: 0 so a long blurb wraps instead of stretching the column */
.mbbs-tile__txt { min-width: 0; }
.mbbs-tile__txt strong {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.35s var(--ease);
}
.mbbs-tile__txt span {
  display: block;
  margin-top: 3px;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.mbbs-tile:hover .mbbs-tile__txt strong { color: #fff; }
.mbbs-tile:hover .mbbs-tile__txt span { color: rgba(255, 255, 255, 0.68); }

.mbbs-tile__go { color: var(--muted-2); transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.mbbs-tile__go svg { width: 18px; height: 18px; }
.mbbs-tile:hover .mbbs-tile__go { color: var(--yellow); transform: translateX(4px); }

/* the badge sits over the top edge, so it reads as a label on the tile
   rather than another line of the tile's own text */
.mbbs-tile__note {
  position: absolute;
  top: -9px;
  right: 16px;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ------------------------- the four conditions -------------------------- */
.truth {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
}
.truth + .truth { margin-top: 12px; }
.truth__ix {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--yellow);
}
.truth__ix svg { width: 19px; height: 19px; }
.truth strong { display: block; font-family: var(--display); font-size: 1rem; color: var(--ink); margin-bottom: 5px; }
.truth p { font-size: 0.88rem; line-height: 1.68; margin: 0; }

@media (max-width: 1040px) {
  .mbbs-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .mbbs-tiles { grid-template-columns: 1fr; }
  .mbbs-group__head { grid-template-columns: auto 1fr; row-gap: 12px; }
  .mbbs-group__count { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   the global journey band
   Thirty-one flags over a drawn skyline. The reference layout for this block
   arrives in stock blue; here it is the logo palette - a warm yellow sky, white
   tiles, charcoal landmarks - so the band reads as ours rather than as a
   template. The skyline is SVG, so it costs nothing and never pixelates.
   ========================================================================== */
.journey {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* room under the tiles for the skyline to rise into */
  padding-bottom: clamp(150px, 19vw, 250px);
  background:
    radial-gradient(86% 62% at 50% -6%, rgba(252, 237, 56, 0.28), transparent 62%),
    linear-gradient(180deg, #fffdf0 0%, #fffef8 44%, var(--paper) 100%);
}

/* the faint grid the flags sit on - a world map in the abstract */
.journey::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: radial-gradient(rgba(23, 29, 29, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(74% 62% at 50% 26%, #000, transparent 74%);
  mask-image: radial-gradient(74% 62% at 50% 26%, #000, transparent 74%);
}

/* the dashed flight path across the top, with the plane at the end of it */
.journey__trail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(150px, 22vw, 260px);
  z-index: -2;
  pointer-events: none;
}
.journey__trail svg {
  width: 100%;
  height: 100%;
  display: block;
}
.journey__trail path {
  fill: none;
  stroke: var(--yellow-3);
  stroke-width: 2;
  stroke-dasharray: 7 11;
  stroke-linecap: round;
  opacity: 0.55;
}
.journey__plane {
  position: absolute;
  top: 16%;
  right: 3%;
  color: var(--ink);
  opacity: 0.85;
  animation: journey-float 5.5s var(--ease) infinite;
}
.journey__plane svg {
  width: clamp(26px, 3.4vw, 40px);
  height: auto;
  transform: rotate(38deg);
}

@keyframes journey-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-10px, -8px, 0); }
}

/* flex rather than grid: the last row of flags centres itself instead of
   leaving a lone tile stranded on the left */
.journey__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
}

/* 98px, so eleven tiles fit a full-width row and the thirty-one land as
   11 + 11 + 9 rather than leaving a single flag stranded on a row of its own */
.journey__tile {
  flex: 1 1 98px;
  max-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 13px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.journey__tile:hover {
  transform: translateY(-6px);
  background: var(--ink);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.journey__flag {
  display: block;
  line-height: 0;
}
.journey__flag .flag {
  width: 44px;
  border-radius: 4px;
  box-shadow: 0 2px 7px rgba(23, 29, 29, 0.22);
  transition: transform 0.35s var(--ease);
}
.journey__tile:hover .flag { transform: scale(1.08); }
.journey__flag .flag--emoji { font-size: 1.9rem; box-shadow: none; }

.journey__name {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.35s var(--ease);
}
.journey__tile:hover .journey__name { color: #fff; }

.journey__foot {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}

/* the skyline closes the band: back row faint, landmarks a shade stronger,
   both in the logo charcoal so the band ends on brand rather than on a photo */
.journey__skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: clamp(110px, 15vw, 196px);
  display: block;
  pointer-events: none;
}
.journey__skyline-back { fill: var(--ink); opacity: 0.1; }
.journey__skyline-front { fill: var(--ink); opacity: 0.2; }

/* ==========================================================================
   the MBBS band
   A banner rather than a section: a sky behind it, a doctor standing at each
   shoulder, the six promises on one white rail and the countries running as a
   slider under them. The reference layout for this arrives in stock blue on a
   blue sky; here the sky is the logo's warm grey-to-white with the yellow sun
   behind the headline, and every accent on it is the logo yellow.
   ========================================================================== */
.mbbs-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(66% 44% at 50% -2%, rgba(252, 237, 56, 0.34), transparent 66%),
    linear-gradient(180deg, var(--mist) 0%, #fbfcfc 44%, var(--paper) 100%);
}

/* the world the banner stands on */
.mbbs-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: radial-gradient(rgba(23, 29, 29, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(76% 58% at 50% 20%, #000, transparent 76%);
  mask-image: radial-gradient(76% 58% at 50% 20%, #000, transparent 76%);
}

/* a flight path over each shoulder, the same dashes the journey band flies */
.mbbs-band__sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(130px, 17vw, 210px);
  z-index: -2;
  pointer-events: none;
}
.mbbs-band__sky svg { width: 100%; height: 100%; display: block; }
.mbbs-band__sky path {
  fill: none;
  stroke: var(--yellow-3);
  stroke-width: 2;
  stroke-dasharray: 7 11;
  stroke-linecap: round;
  opacity: 0.5;
}
.mbbs-band__plane {
  position: absolute;
  top: 22%;
  color: var(--ink);
  opacity: 0.75;
  animation: journey-float 6s var(--ease) infinite;
}
.mbbs-band__plane svg { width: clamp(20px, 2.2vw, 28px); height: auto; }
.mbbs-band__plane--l { left: 33%; }
.mbbs-band__plane--l svg { transform: rotate(48deg); }
.mbbs-band__plane--r { right: 33%; animation-delay: 1.4s; }
.mbbs-band__plane--r svg { transform: rotate(-48deg); }

/* The figures. A photograph is a rectangle; the mask melts its edges into the
   sky so each one reads as somebody standing at the edge of the banner rather
   than as a picture pasted onto it. */
.mbbs-band__doc {
  position: absolute;
  top: 10px;
  z-index: -1;
  height: clamp(320px, 35vw, 470px);
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(64% 62% at 50% 44%, #000 56%, transparent 88%);
  mask-image: radial-gradient(64% 62% at 50% 44%, #000 56%, transparent 88%);
}
.mbbs-band__doc--l { left: max(0px, calc(50% - 760px)); }
.mbbs-band__doc--r { right: max(0px, calc(50% - 760px)); }

/* The band is built to be read; below this the figures start arriving at the
   headline's shoulder rather than beside it, so they step out. */
@media (max-width: 1320px) {
  .mbbs-band__doc { display: none; }
}

/* what the family is buying, on one white rail */
.mbbs-band__points {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px 18px;
  max-width: 1000px;
  margin: 0 auto 46px;
  padding: 16px 22px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
.mbbs-band__point { display: flex; align-items: center; gap: 11px; }
.mbbs-band__point-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--yellow-soft);
  border: 1px solid rgba(228, 210, 26, 0.5);
  color: var(--yellow-3);
  transition: background 0.3s, color 0.3s;
}
.mbbs-band__point:hover .mbbs-band__point-ico { background: var(--yellow); color: var(--ink); }
.mbbs-band__point-ico svg { width: 17px; height: 17px; }
.mbbs-band__point strong {
  display: block;
  font-family: var(--display);
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--ink);
}
.mbbs-band__point em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

/* the slider - same mechanics as the faculty band, its own skin */
.mbbs-band__slider { position: relative; }
.mbbs-band__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 0 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.mbbs-band__track::-webkit-scrollbar { display: none; }
.mbbs-band__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}
/* everything already fits - the controls take themselves out */
.mbbs-band__slider.is-static .mbbs-band__track { justify-content: center; }
.mbbs-band__slider.is-static .mbbs-band__arrow,
.mbbs-band__slider.is-static .mbbs-band__dots { display: none; }

.mbbs-band__arrow {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: background 0.3s, transform 0.3s var(--ease), border-color 0.3s;
}
.mbbs-band__arrow:hover { background: var(--yellow); border-color: var(--yellow); transform: scale(1.06); }
.mbbs-band__arrow svg { width: 20px; height: 20px; }
.mbbs-band__arrow--prev { left: -22px; }
.mbbs-band__arrow--next { right: -22px; }

.mbbs-band__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.mbbs-band__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(23, 29, 29, 0.18);
  transition: all 0.3s;
}
.mbbs-band__dots button.is-active { width: 26px; border-radius: 100px; background: var(--ink); }

.mbbs-card {
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.mbbs-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

/* the photograph is clipped by its own wrapper rather than by the shot, so the
   flag can hang over the bottom edge without having its lower half cut off */
.mbbs-card__shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
}
.mbbs-card__pic {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.mbbs-card__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.mbbs-card:hover .mbbs-card__pic img { transform: scale(1.07); }
.mbbs-card__pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 29, 29, 0) 52%, rgba(23, 29, 29, 0.42) 100%);
}

.mbbs-card__note {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* the flag sits on the seam between the photograph and the text */
.mbbs-card__flag {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(23, 29, 29, 0.22);
  transition: border-color 0.3s;
}
.mbbs-card:hover .mbbs-card__flag { border-color: var(--yellow); }
.mbbs-card__flag .flag {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  box-shadow: none;
}
.mbbs-card__flag .flag--emoji { font-size: 1.5rem; width: auto; height: auto; }

.mbbs-card__body {
  display: block;
  padding: 36px 18px 22px;
  text-align: center;
}
.mbbs-card__body strong {
  display: block;
  font-family: var(--display);
  font-size: 1.08rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.mbbs-card__body > span {
  display: block;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted);
}
.mbbs-card__go {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 14px;
  border-radius: 50%;
  background: var(--yellow-soft);
  color: var(--ink);
  transition: background 0.3s, transform 0.3s var(--ease);
}
.mbbs-card__go svg { width: 16px; height: 16px; }
.mbbs-card:hover .mbbs-card__go { background: var(--yellow); transform: translateX(3px); }

/* ----------------------------- responsive ------------------------------- */
@media (max-width: 1180px) {
  /* six across stops fitting well before the cards do - 3 + 3 beats 5 + 1 */
  .mbbs-band__points { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .mbbs-card { flex: 0 0 calc((100% - 40px) / 3); }
  .mbbs-band__arrow--prev { left: -8px; }
  .mbbs-band__arrow--next { right: -8px; }
}
@media (max-width: 860px) {
  .journey__tile { flex: 1 1 96px; padding: 13px 8px 11px; }
  .journey__flag .flag { width: 38px; }
  .journey__name { font-size: 0.72rem; }
  .mbbs-card { flex: 0 0 calc((100% - 20px) / 2); }
  .mbbs-band__points { gap: 12px; padding: 14px 16px; }
}
@media (max-width: 560px) {
  .journey { padding-bottom: clamp(120px, 30vw, 170px); }
  /* four across on a phone - thirty-one tiles three abreast is a long scroll */
  .journey__grid { gap: 9px; }
  .journey__tile { flex: 1 1 68px; max-width: 100px; padding: 12px 6px 10px; gap: 7px; }
  .journey__flag .flag { width: 30px; }
  .journey__name { font-size: 0.63rem; }
  .journey__foot .btn { width: 100%; justify-content: center; }
  .mbbs-card { flex: 0 0 78%; }
  .mbbs-band__arrow { display: none; }
  .mbbs-band__points { grid-template-columns: repeat(2, 1fr); }
  .mbbs-band__sky { height: 110px; }
}

/* ==========================================================================
   the franchisee partner band
   A partner runs an office rather than managing one, so the block is built
   like an introduction: the printed profile card on the left, who they are and
   where their desk is on the right. The gold edge is the only thing that says
   whose name is on that door, and it is the same gold the About page uses for
   the franchise block, so the two read as one idea.
   ========================================================================== */
.partner-band .section-head { max-width: 760px; }

.partner {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* the warm corner wash, so a white card on a cream band still has a shape */
.partner::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  right: -150px;
  top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 237, 56, 0.34), transparent 64%);
}

.partner__photo { position: relative; }
/* the gold edge that marks the partner, matching the About franchise block */
.partner__photo .pcard__frame {
  box-shadow: 0 0 0 3px var(--yellow), var(--shadow);
}
.partner__photo .pcard__frame:hover {
  box-shadow: 0 0 0 3px var(--yellow), 0 30px 62px rgba(6, 34, 18, 0.38);
}

.partner__badge {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 100px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: var(--glow);
}
.partner__badge svg { width: 15px; height: 15px; }

.partner__body h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 6px; }
.partner__role {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--yellow-3);
  margin-bottom: 14px;
}
.partner__bio { font-size: 1rem; line-height: 1.75; margin-bottom: 18px; }
.partner__body .chips { margin-bottom: 22px; }

/* the three lines a visitor actually needs: where, what number, what is taught */
.partner__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  padding: 20px 0;
  margin-bottom: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.partner__facts li { display: flex; align-items: center; gap: 12px; }
.partner__facts svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--yellow-soft);
  color: var(--ink);
}
.partner__facts strong {
  display: block;
  font-family: var(--display);
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.3;
}
.partner__facts span span,
.partner__facts li > span { display: block; }
.partner__facts li > span { font-size: 0.78rem; color: var(--muted); }
.partner__facts li > span strong + * { margin-top: 2px; }

.partner__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- two or more partners: a row rather than a feature block ---------- */
.pboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.pbox {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pbox:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.pbox .pcard__frame { box-shadow: 0 0 0 3px var(--yellow), var(--shadow-sm); }
.pbox__body { padding-top: 18px; }
.pbox__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--yellow);
  color: var(--ink);
  margin-bottom: 10px;
}
.pbox__badge svg { width: 13px; height: 13px; }
.pbox__body h3 { font-size: 1.2rem; margin-bottom: 4px; }
.pbox__office {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--yellow-3);
  margin-bottom: 10px;
}
.pbox__office svg { width: 15px; height: 15px; }
.pbox__body p { font-size: 0.88rem; line-height: 1.65; margin-bottom: 14px; }
.pbox__body p.pbox__role { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin: -2px 0 10px; }
.pbox__body p.pbox__office { margin-bottom: 4px; }
.pbox__body p.pbox__address { font-size: 0.78rem; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
/* four cards in a row: bios run to different lengths, so each stops at four
   lines and the rows of links underneath stay level */
.pbox__body p.pbox__bio {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pbox { display: flex; flex-direction: column; }
.pbox__body { display: flex; flex-direction: column; flex: 1; }
.pbox__links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pbox__phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.86rem; color: var(--ink); }
.pbox__phone svg { width: 15px; height: 15px; color: var(--yellow-3); }
.pbox__phone:hover { color: var(--yellow-3); }

/* a partner without a printed card has a plain portrait on white instead -
   shown whole and centred, not cropped to a poster's left panel */
.pcard__frame--photo { background: linear-gradient(180deg, #fffdf2, #f3efe0); }
.pcard__frame--photo .pcard__crop img {
  left: 50%;
  translate: -50% 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center;
}

/* what every franchise office teaches, under the band heading */
.pband__exams {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  margin-top: 22px;
  padding: 10px 22px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.pband__exams span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.pband__exams strong { font-size: 0.98rem; color: var(--ink); }
.pband__exams i { font-style: normal; color: var(--yellow-3); font-weight: 800; }
@media (max-width: 560px) {
  .pband__exams { border-radius: var(--r-lg); }
  .pband__exams span { width: 100%; text-align: center; margin: 0; }
}

@media (max-width: 860px) {
  .partner { grid-template-columns: 1fr; text-align: center; }
  /* a definite width, not max-width: an auto inline margin cancels the grid
     item's stretch, and the frame inside is sized in per cent - against a
     shrink-to-fit parent that resolves to nothing and the portrait vanishes */
  .partner__photo { width: min(290px, 100%); margin-inline: auto; }
  .partner__badge { bottom: -14px; }
  .partner__body { margin-top: 26px; }
  .partner__body .chips,
  .partner__cta { justify-content: center; }
  .partner__facts li { justify-content: center; text-align: left; }
}
@media (max-width: 560px) {
  .partner { padding: 22px 18px; }
  .partner__cta .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   the card over the map
   Google opens a white card naming the place over its embed, but only for the
   buildings it holds a listing for - so two of the five offices had one and
   three had a bare "Open in Maps" chip. This is that card, drawn by us for
   every office alike, sitting where Google would have put its own.
   It stays clear of the Google logo and the attribution along the bottom edge.
   ========================================================================== */
.map-card {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  width: min(290px, calc(100% - 28px));
  padding: 13px 15px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(23, 29, 29, 0.24);
  /* the embed sits under a slight grey until it is hovered; the card is type,
     not photography, so it stays at full strength either way */
  filter: none;
}

.map-card strong {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.map-card > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
}

.map-card__acts { display: flex; align-items: center; gap: 8px; margin-top: 11px; }

.map-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  justify-content: center;
  padding: 8px 13px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--yellow);
  transition: background 0.25s, transform 0.25s var(--ease);
}
.map-card__btn:hover { background: var(--yellow-2); transform: translateY(-1px); }
.map-card__btn svg { width: 14px; height: 14px; }

.map-card__go {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  transition: background 0.25s, transform 0.25s var(--ease);
}
.map-card__go:hover { background: var(--ink-3); transform: translateX(2px); }
.map-card__go svg { width: 16px; height: 16px; }

/* while the embed is still painting, the card would float on the dark panel
   with nothing behind it */
.branches__map.is-loading .map-card { opacity: 0; pointer-events: none; }
.map-card { transition: opacity 0.4s var(--ease); }

@media (max-width: 560px) {
  .map-card {
    top: 10px;
    left: 10px;
    width: min(250px, calc(100% - 20px));
    padding: 11px 13px 10px;
  }
  .map-card > span { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* credit line for licensed campus photographs */
.photo-credit { margin-top: 8px; font-size: .78rem; color: var(--muted, #6b7280); }
.photo-credit a { color: inherit; text-decoration: underline; }

/* ============================== education loan ============================ */
.loan-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.loan-fact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
}
.loan-fact__icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--yellow-soft);
  color: var(--ink);
  margin-bottom: 12px;
}
.loan-fact__icon svg { width: 20px; height: 20px; }
.loan-fact strong { display: block; font-family: var(--display); font-size: 1.45rem; color: var(--ink); line-height: 1.2; }
.loan-fact > span:last-child { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }

.loan-type .chip { margin-top: 8px; }
.loan-type__points { display: grid; gap: 8px; margin-top: 4px; }
.loan-type__points li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.loan-type__points svg { width: 17px; height: 17px; color: var(--yellow-3); flex-shrink: 0; }

@media (max-width: 960px) { .loan-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .loan-facts { grid-template-columns: 1fr; } }
.note-line svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.loan-facts--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .loan-facts--2 { grid-template-columns: 1fr; } }

/* study destinations - the country picker above the cards */
.dest-pick { max-width: 420px; margin: 0 auto 34px; }

/* country guide - the full university directory */
.dir__title { margin: 56px 0 22px; font-size: 1.35rem; }
.dir__bar { margin-bottom: 26px; }
.dir__bar .search-bar { margin-bottom: 18px; }
.dir__bar .filters { margin-bottom: 14px; }
.dir__count { text-align: center; font-size: 0.88rem; color: var(--muted); font-weight: 600; }
.dir__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dir-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.dir-card:hover { border-color: var(--ink-4); box-shadow: var(--shadow); transform: translateY(-3px); }
.dir-card[hidden], [data-dir-none][hidden], .dir .text-center[hidden] { display: none; }
.dir-card__head { display: flex; gap: 14px; align-items: flex-start; }
.dir-card__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.dir-card h3 { font-size: 1.04rem; line-height: 1.3; }
.dir-card__city { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 0.84rem; color: var(--muted); }
.dir-card__city svg, .dir-card__site svg { width: 15px; height: 15px; flex: none; }
.dir-card .chips .chip { font-size: 0.7rem; padding: 4px 10px; }
.dir-card p { font-size: 0.9rem; line-height: 1.6; }
.dir-card__site { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--ink-4); word-break: break-all; }
.dir-card__site:hover { color: var(--ink); text-decoration: underline; }
.dir-card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--mist-2); }
@media (max-width: 1080px) { .dir__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dir__grid { grid-template-columns: 1fr; } .dir__title { margin-top: 40px; } }

/* three-minute enquiry gate (gate.js) - covers the site until it is filled in */
html.is-gated, html.is-gated body { overflow: hidden; }
.gate { z-index: 1000; background: rgba(14, 16, 19, 0.82); backdrop-filter: blur(8px); }
.gate__dialog { width: min(100%, 560px); padding: 34px 32px 28px; }
.gate__head { margin-bottom: 22px; padding-right: 44px; }
.gate .gate__close { top: 18px; right: 18px; background: var(--mist); box-shadow: none; }
.gate .gate__close:hover { background: var(--ink); color: #fff; }
.gate__head h3 { margin: 10px 0 8px; }
.gate__head p { color: var(--muted); font-size: 0.95rem; }
.gate__form { gap: 14px; }
.gate__alert:empty { display: none; }
.gate__submit { width: 100%; justify-content: center; }
.gate .form__note a { color: var(--ink); font-weight: 700; text-decoration: underline; }
@media (max-width: 560px) {
  .gate { padding: 12px; }
  .gate__dialog { padding: 26px 20px 22px; max-height: calc(100vh - 24px); }
  .gate .form__row { grid-template-columns: 1fr; }
}

/* the gate's own dropdowns (gate.js) - they open inside the form, unlike a native <select> */
.gate-pick__box { position: relative; }
.gate-pick__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.gate-pick__btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.25s; }
.gate-pick.is-open .gate-pick__btn svg { transform: rotate(180deg); }
.gate-pick__btn:focus-visible,
.gate-pick.is-open .gate-pick__btn { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(252, 237, 56, 0.45); }
.gate-pick__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-pick__btn.is-empty .gate-pick__value { color: var(--muted-2); }
.gate-pick__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pick-in 0.18s ease;
}
.gate-pick__panel[hidden] { display: none; }
.gate-pick.is-up .gate-pick__panel { top: auto; bottom: calc(100% + 6px); }
@keyframes pick-in { from { opacity: 0; transform: translateY(-4px); } }
/* .gate-pick in front so these beat the form's own `.field input` rules */
.gate-pick__find { position: relative; flex-shrink: 0; padding: 8px; border-bottom: 1px solid var(--mist-2); }
.gate-pick__find svg {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}
.gate-pick .gate-pick__search {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1.5px solid transparent;
  border-radius: 9px;
  background: var(--mist);
  font-size: 0.9rem;
  box-shadow: none;
}
.gate-pick .gate-pick__search:focus { border-color: var(--ink); background: #fff; box-shadow: none; }
.gate-pick__panel ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.gate-pick__panel li { padding: 9px 12px; border-radius: 8px; font-size: 0.92rem; cursor: pointer; }
.gate-pick__panel li.is-active { background: var(--mist-2); }
.gate-pick__panel li[aria-selected="true"] { background: rgba(252, 237, 56, 0.55); font-weight: 700; }
.gate-pick__none { padding: 10px 18px 14px; font-size: 0.88rem; color: var(--muted); }