/* ==========================================================================
   UniDovo — site.css
   Light, modern design system for a professional education consultancy.

   Load order: after custom.css, after Tailwind CDN (Tailwind preflight is a
   fine reset; this file owns the UniDovo look).

   Contents
     1.  Design tokens
     2.  Base & typography
     3.  Layout primitives
     4.  Buttons
     5.  Pills & badges
     6.  Cards
     7.  Forms
     8.  Header
     9.  Footer
     10. Hero
     11. Trust strip
     12. Services
     13. Steps
     14. Destinations
     15. Fields of study
     16. Why UniDovo
     17. Stats
     18. Video
     19. Testimonials
     20. Intakes
     21. Scholarships
     22. FAQ
     23. CTA band
     24. Reveal animation
     25. Accessibility & utilities
     26. Responsive
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */
:root {
  /* Brand — navy blue */
  --brand-50:  #EFF5FF;
  --brand-100: #DBE8FE;
  --brand-200: #BFD6FE;
  --brand-300: #93BAFD;
  --brand-400: #6096FA;
  --brand-500: #3B76F6;
  --brand-600: #2559E8;
  --brand-700: #1D4ED8;
  --brand-800: #1B3FAF;
  --brand-900: #1A3688;
  --brand-950: #132453;

  /* Accent — the LOGO RED, sampled straight from the brand mark (#FF171F).
     The palette is now strictly blue + white + this red. The old pink-leaning
     red tints (#FFE1E3 / #FFC7CA) are gone: they read as pink next to the
     logo, which is what made the homepage look off-brand. */
  --accent-50:  #FFF1F1;
  --accent-100: #FFDCDC;
  --accent-200: #FFBABC;
  --accent-500: #FF171F;
  --accent-600: #E30F17;
  --accent-700: #B80B12;
  --accent-ink: #FFFFFF;
  /* red marks that sit on a DARK blue band need lifting to stay legible */
  --accent-bright: #FF7A7E;

  /* Support — held inside the palette. "Success" is brand blue rather than
     green, so nothing on the site introduces a fourth hue. */
  --success-50:  #EFF5FF;
  --success-500: #2559E8;
  --success-700: #1B3FAF;
  --danger-50:   #FFF1F1;
  --danger-600:  #E30F17;

  /* Neutrals — all body copy passes WCAG AA on white */
  --ink:      #0F172A; /* headings             ~16.9:1 */
  --ink-2:    #1E293B;
  --body:     #475569; /* paragraphs            ~7.5:1 */
  --muted:    #5A6B80; /* small print           ~5.6:1 */
  --line:     #E2E8F0;
  --line-2:   #CBD5E1;
  --surface:  #FFFFFF;
  --surface-2:#F8FAFC;
  --surface-3:#F1F5F9;

  /* Type */
  /* Type system. Swap these stacks to restyle the whole site.
     Manrope = headings, Inter = body / UI, Caveat = handwritten accent. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-script: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  /* A serif exists for exactly one job: the founder's name (home.css §15),
     where the display sans reads as "another section heading" on a page that
     is all sans. Lora rather than a high-contrast display serif — it has real
     600/700 weights (the retired Instrument Serif had only 400) and sits
     quietly beside Inter. Keep in sync with base.html + tailwind.config.js. */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;

  /* the handwritten accent colour used for "Malaysia" and section tags.
     Exactly the logo red, so it matches --accent-500 rather than drifting. */
  --script: #FF171F;
  --fs-h1: clamp(2.25rem, 5.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem);
  --fs-h3: clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-lede: clamp(1.0625rem, 1.5vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Space */
  --wrap: 1180px;
  --gutter: 1.25rem;
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --gap: 1.5rem;

  /* Shape */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 16px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.11), 0 2px 8px rgba(15, 23, 42, 0.05);

  --header-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --header-h: 76px;
  }
}

/* ------------------------------------------------------------------ *
 * 2. Base & typography
 * ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Headings use Manrope. Instrument Serif's single 400 weight is gone, so
   headings are back to a true bold. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Handwritten accent: "Malaysia", section tags, small flourishes */
.script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--script);
  letter-spacing: 0;
}

h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1rem; }

p { margin: 0; }

a { color: var(--brand-700); text-decoration: none; }
a:hover { color: var(--brand-800); }

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

strong { color: var(--ink); font-weight: 700; }

.lede {
  font-size: var(--fs-lede);
  color: var(--body);
  line-height: 1.7;
}

.text-accent { color: var(--accent-600); }
.text-brand  { color: var(--brand-700); }

/* Soft brand underline used instead of neon gradient text */
.hl {
  position: relative;
  white-space: nowrap;
}
.hl::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.28em;
  border-radius: 3px;
  background: var(--accent-200);
  z-index: -1;
}

/* ------------------------------------------------------------------ *
 * 3. Layout primitives
 * ------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-2); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p {
  margin-top: 0.875rem;
  font-size: var(--fs-lede);
  color: var(--body);
}
.section-head--center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow i { color: var(--brand-600); font-size: 0.75rem; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: 0.5rem; }
.stack-3 { gap: 0.75rem; }
.stack-4 { gap: 1rem; }
.stack-6 { gap: 1.5rem; }

.row { display: flex; align-items: center; }
.row-gap-2 { gap: 0.5rem; }
.row-gap-3 { gap: 0.75rem; }
.row-gap-4 { gap: 1rem; }
.wrap-gap { flex-wrap: wrap; }

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * 4. Buttons
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), box-shadow 0.18s var(--ease),
              transform 0.18s var(--ease);
}
.btn i { font-size: 0.875em; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand-700);
  color: #fff;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.24);
}
.btn--primary:hover {
  background: var(--brand-800);
  color: #fff;
  box-shadow: 0 8px 22px rgba(29, 78, 216, 0.28);
}

.btn--accent {
  background: var(--accent-500);
  color: var(--accent-ink);
}
.btn--accent:hover {
  background: var(--accent-600);
  color: var(--accent-ink);
  box-shadow: 0 8px 22px rgba(217, 119, 6, 0.26);
}

.btn--outline {
  border-color: var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
}
.btn--outline:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-800);
}

.btn--ghost {
  padding-inline: 0.75rem;
  color: var(--brand-700);
}
.btn--ghost:hover { background: var(--brand-50); }

.btn--white {
  background: #fff;
  color: var(--brand-800);
}
.btn--white:hover { background: var(--brand-50); color: var(--brand-900); }

.btn--lg {
  padding: 1rem 1.75rem;
  font-size: var(--fs-body);
  border-radius: 12px;
}
.btn--block { width: 100%; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand-700);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.btn-link i { transition: transform 0.18s var(--ease); }
.btn-link:hover i { transform: translateX(3px); }

/* ------------------------------------------------------------------ *
 * 5. Pills & badges
 * ------------------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill--brand {
  border-color: var(--brand-100);
  background: var(--brand-50);
  color: var(--brand-800);
}
.pill--accent {
  border-color: var(--accent-200);
  background: var(--accent-50);
  color: var(--accent-700);
}
.pill--success {
  border-color: #A7F3D0;
  background: var(--success-50);
  color: var(--success-700);
}
.pill--muted {
  border-color: var(--line);
  background: var(--surface-3);
  color: var(--muted);
}
.pill--solid {
  border-color: transparent;
  background: var(--brand-700);
  color: #fff;
}

.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success-500);
  flex: none;
}

.stars { display: inline-flex; gap: 2px; color: var(--accent-500); font-size: 0.8125rem; }

/* ------------------------------------------------------------------ *
 * 6. Cards
 * ------------------------------------------------------------------ */
.card {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.card--pad-lg { padding: clamp(1.5rem, 3vw, 2.25rem); }
.card--flat { box-shadow: none; }

.card--link:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.card__title { margin-bottom: 0.5rem; }
.card__text { font-size: var(--fs-sm); color: var(--body); }

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 1.125rem;
}
.icon-tile--accent {
  border-color: var(--accent-200);
  background: var(--accent-50);
  color: var(--accent-600);
}
.icon-tile--success {
  border-color: #A7F3D0;
  background: var(--success-50);
  color: var(--success-700);
}

.list-check {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-check li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-sm);
  color: var(--body);
}
.list-check li::before {
  content: '\f00c';
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.5625rem;
}
.list-check--accent li::before {
  background: var(--accent-100);
  color: var(--accent-700);
}

/* ------------------------------------------------------------------ *
 * 7. Forms
 * ------------------------------------------------------------------ */
.field-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.field,
.select,
.textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field::placeholder,
.textarea::placeholder { color: #94A3B8; }

.field:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
}

.select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}

.textarea { min-height: 7rem; resize: vertical; }

.field-hint {
  margin-top: 0.375rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.form-grid {
  display: grid;
  gap: 1.125rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .span-2 { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ *
 * 8. Header
 * ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
}

.topbar {
  display: none;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
}
@media (min-width: 768px) {
  .topbar { display: block; }
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
}
.topbar__group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--body);
  font-weight: 600;
  transition: color 0.18s var(--ease);
}
.topbar a:hover { color: var(--brand-700); }
.topbar i { color: var(--brand-600); font-size: 0.8125rem; }
.topbar .socials { display: flex; gap: 0.25rem; }
.topbar .socials a {
  width: 26px;
  height: 26px;
  justify-content: center;
  border-radius: 7px;
  color: var(--muted);
}
.topbar .socials a:hover { background: var(--surface-3); color: var(--brand-700); }

.nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 1px 16px rgba(15, 23, 42, 0.07);
}
/* main.js toggles Tailwind's shadow utilities on #main-nav — map them onto the
   light elevation scale instead of Tailwind's defaults. */
.nav.shadow-sm { box-shadow: none; }
.nav.shadow-lg { box-shadow: 0 1px 16px rgba(15, 23, 42, 0.07); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  flex: none;
}
/* NB: `.brand__mark` (the blue cap tile) and the `.brand img` rule were
deleted with the footer logo — the footer names the brand as type now. */
.brand__name {
  display: block;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.brand__sub {
  display: block;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 0.125rem;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.8125rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.nav__link:hover { background: var(--surface-3); color: var(--brand-800); }
.nav__link.is-active { background: var(--brand-50); color: var(--brand-800); }
.nav__link i.fa-chevron-down { font-size: 0.5625rem; opacity: 0.6; }

.nav__drop { position: relative; }
.nav__drop > .nav__link { cursor: default; }
.nav__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 15rem;
  padding: 0.375rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
              visibility 0.18s;
}
.nav__drop:hover .nav__menu,
.nav__drop:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.6875rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.nav__menu a:hover { background: var(--surface-2); color: var(--brand-800); }
.nav__menu i { width: 1.125rem; text-align: center; color: var(--brand-600); }
.nav__menu small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.nav__actions {
  display: none;
  align-items: center;
  gap: 0.625rem;
  flex: none;
}

.nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

.nav__panel {
  display: block;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 0.75rem var(--gutter) 1.25rem;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
.nav__panel.hidden { display: none; }
.nav__panel a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8125rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.nav__panel a:hover { background: var(--surface-2); color: var(--brand-800); }
.nav__panel i { width: 1.25rem; text-align: center; color: var(--brand-600); }
.nav__panel .nav__panel-sub { padding-left: 2rem; }
.nav__panel .nav__panel-sub a { font-size: var(--fs-xs); font-weight: 500; }
.nav__panel .nav__panel-foot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}

/* the masthead is one row now, so the spacer is exactly the header */
.header-spacer { height: var(--header-h); }

@media (min-width: 1024px) {
  .nav__links,
  .nav__actions { display: flex; }
  .nav__burger { display: none; }
  .nav__panel { display: none !important; }
}

/* ------------------------------------------------------------------ *
 * 9. Footer
 *
 * Three bands, no more: brand · three link columns · one legal bar.
 * Structure notes (and why the buttons moved out) live in
 * components/footer.html; the old markup is in
 * _archive/templates/components/footer-legacy-light.html.
 * ------------------------------------------------------------------ */
.site-footer {
  position: relative;
  /* white, to match the page: the whole site is one sheet now */
  background: var(--surface);
  padding-top: clamp(2.25rem, 4vw, 3rem);
}
/* The one place the two brand colours meet. A 3px gradient hairline says
   "new band" without the weight of a coloured footer — which is what keeps
   the page a single white sheet all the way to the bottom edge. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,
    var(--brand-600) 0%,
    var(--brand-500) 45%,
    var(--accent-500) 100%);
}

.site-footer__main {
  display: grid;
  /* stacked on a phone, so the gap only has to separate blocks, not columns */
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
.site-footer__brand { min-width: 0; }

/* column labels ----------------------------------------------------- */
.site-footer h4,
.site-footer__head {
  margin: 0 0 0.625rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* brand ------------------------------------------------------------- */
.site-footer__tagline {
  max-width: 30rem;
  margin-top: 1rem;
  color: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--body);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.18s var(--ease);
}
.site-footer__socials a:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
  transform: translateY(-2px);
}

/* link columns ------------------------------------------------------ */
.site-footer__links {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__links a {
  /* WCAG 2.5.8: a 32px hit area instead of the 23px a bare line of text gives */
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  width: fit-content;
  color: var(--body);
  font-size: var(--fs-sm);
  transition: color 0.16s var(--ease);
}
/* the masthead's underline, reused so the site has ONE link-hover language
   rather than a fade here and a slide there */
.site-footer__links a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--brand-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.site-footer__links a:hover { color: var(--brand-700); }
.site-footer__links a:hover::after { transform: scaleX(1); }

/* contact rows ------------------------------------------------------ */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-height: 32px;
  color: var(--body);
  font-size: var(--fs-sm);
}
.site-footer__contact i {
  flex: none;
  width: 1.125rem;
  padding-top: 0.375rem;
  color: var(--brand-600);
  font-size: 0.8125rem;
  text-align: center;
}
.site-footer__contact a { color: var(--body); }
.site-footer__contact a:hover { color: var(--brand-700); }

/* legal bar --------------------------------------------------------- */
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: 1.125rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.site-footer__copy { margin: 0; }
/* legal + the agent opener share the right end; the copy keeps the left. The
   agent action is brand-blue and bold, so it reads as an action next to the
   muted legal links rather than as a fourth one. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-left: auto;
}
.site-footer__bar a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--muted);
}
.site-footer__bar a:hover { color: var(--brand-700); }
/* the agent opener — kept for parity with the mobile menu, but as a text
   action rather than the third button on the page */
.site-footer__agent {
  min-height: 28px;
  font-size: var(--fs-xs);
  cursor: pointer;
}

@media (min-width: 640px) {
  .site-footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2.5rem;
  }
  /* the brand owns its own row until there is width to spare */
  .site-footer__brand { grid-column: 1 / -1; }
}
/* On a phone the legal bar becomes one left-aligned stack. Left as a wrapped
   flex row it pushed the legal links to the right edge with `margin-left:
   auto`, so the footer ended on three different left edges. */
@media (max-width: 639px) {
  /* TWO columns, not one. Stacked, the brand plus the three groups ran to
     ~560px of footer at the bottom of every page — the tallest block on the
     site, and most of it single words in a half-empty row. In two columns
     Explore and Services pair off beside each other. "Get in touch" keeps
     the full width: its street address wraps to three lines in half a
     phone, and it is the column a visitor on a phone is most likely to
     want. */
  .site-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
  }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__group--contact { grid-column: 1 / -1; }

  .site-footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding-block: 1rem;
  }
  .site-footer__legal { margin-left: 0; }
}
@media (min-width: 1024px) {
  /* 1fr for Explore and Services is enough for their longest label
     ("International pathways"); the brand needs ~300px to keep the tagline
     at three lines, and "Get in touch" needs more than that or the street
     address wraps to three. */
  .site-footer__main {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.75rem;
  }
  .site-footer__brand { grid-column: auto; }
}

/* ------------------------------------------------------------------ *
 * 10. Hero
 *
 * Hero styles live in masthead.css. The block that used to sit here leaked
 * padding and a tinted background onto the new banner hero, so it was
 * removed rather than overridden.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 11. Trust strip
 * ------------------------------------------------------------------ */
.trust {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.trust__grid {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}
.trust__item { display: flex; gap: 0.75rem; }
.trust__item i {
  flex: none;
  margin-top: 0.15rem;
  color: var(--brand-600);
  font-size: 1rem;
}
.trust__item strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.trust__item span { font-size: var(--fs-xs); color: var(--muted); }

@media (min-width: 900px) {
  .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * 12. Services
 * ------------------------------------------------------------------ */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.375rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.service-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.service-card h3 { margin-bottom: 0.5rem; }
.service-card p { flex: 1; font-size: var(--fs-sm); }
.service-card .btn-link { margin-top: 1.125rem; }

/* ------------------------------------------------------------------ *
 * 13. Steps
 * ------------------------------------------------------------------ */
.steps {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  counter-reset: step;
}
.step { position: relative; padding-left: 3.25rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--brand-100);
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 0.8125rem;
  font-weight: 800;
}
.step h3 { margin-bottom: 0.375rem; font-size: 1.0625rem; }
.step p { font-size: var(--fs-sm); }
.step__note {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
}
.step__note i { color: var(--accent-500); }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem; }
}

/* ------------------------------------------------------------------ *
 * 14. Destinations
 * ------------------------------------------------------------------ */
.dest-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  scrollbar-width: thin;
}
.dest-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5625rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.dest-tab:hover { border-color: var(--brand-300); color: var(--brand-800); }
.dest-tab[aria-selected='true'] {
  border-color: var(--brand-700);
  background: var(--brand-700);
  color: #fff;
  box-shadow: 0 2px 10px rgba(29, 78, 216, 0.22);
}
.dest-tab__flag { font-size: 1rem; line-height: 1; }

.dest-panel { display: none; }
.dest-panel.is-active {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  animation: fade-in 0.35s var(--ease);
}
.dest-panel__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.dest-panel__title .flag { font-size: 1.75rem; line-height: 1; }
.dest-panel__tagline {
  margin-bottom: 0.875rem;
  color: var(--accent-700);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dest-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.125rem 0;
  border-block: 1px solid var(--line);
}
.dest-panel__stat strong {
  display: block;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dest-panel__stat span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.dest-panel__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-3);
  aspect-ratio: 16 / 11;
}
.dest-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.dest-panel__chip {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-800);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 900px) {
  .dest-panel.is-active { grid-template-columns: 1fr 1.05fr; }
}

/* ------------------------------------------------------------------ *
 * 15. Fields of study
 * ------------------------------------------------------------------ */
.field-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.field-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.field-card i { color: var(--brand-700); font-size: 1.125rem; }
.field-card strong { color: var(--ink); font-size: var(--fs-sm); }
.field-card .btn-link { margin-left: auto; }

/* ------------------------------------------------------------------ *
 * 16. Why UniDovo
 * ------------------------------------------------------------------ */
.why-card { height: 100%; }
.why-card h3 { margin-bottom: 0.5rem; font-size: 1.0625rem; }
.why-card p { font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ *
 * 17. Stats
 * ------------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
}
.stat {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  text-align: center;
}
.stat__num {
  display: block;
  color: var(--ink);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.stat__label {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}
@media (min-width: 800px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * 18. Video
 * ------------------------------------------------------------------ */
.video-rail {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.video-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.video-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-3);
}
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--line-2);
  font-size: 1.5rem;
  background: var(--surface-3);
}
.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(15, 23, 42, 0.28);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.video-card__play:hover { background: rgba(15, 23, 42, 0.45); }
.video-card__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-800);
  box-shadow: var(--shadow);
  padding-left: 3px;
}
.video-card__body { padding: 0.875rem 1rem 1rem; }
.video-card__body h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card__body p {
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.video-card__badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-800);
  font-size: 0.75rem;
  box-shadow: var(--shadow-xs);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
}
.modal.hidden { display: none; }
.modal__box {
  width: 100%;
  max-width: 54rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.modal__box--sm { max-width: 44rem; }
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.375rem;
  border-bottom: 1px solid var(--line);
}
.modal__head h3,
.modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}
.modal__head p { margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--muted); }
.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  color: var(--body);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.modal__close:hover { background: var(--surface-2); color: var(--ink); }
.modal__body { padding: 1.375rem; }
.modal__foot {
  padding: 0 1.375rem 1.375rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}

.video-modal__body {
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-modal__body iframe,
.video-modal__body video { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------ *
 * 19. Testimonials
 *     The homepage prints these as the `.pax` cards on the journey tape
 *     (home.css §9h). The old `.quote-card` block grid was retired with the
 *     section that used it, and no template references it any more.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 20. Intakes
 * ------------------------------------------------------------------ */
.intake-group + .intake-group { margin-top: 2rem; }
.intake-group__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-800);
}
.intake {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.intake + .intake { margin-top: 0.625rem; }
.intake__body { flex: 1; min-width: 0; }
.intake__body strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.intake__body span { font-size: var(--fs-xs); color: var(--muted); }

/* ------------------------------------------------------------------ *
 * 21. Scholarships
 * ------------------------------------------------------------------ */
.schol {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.schol:hover { border-color: var(--brand-200); box-shadow: var(--shadow-xs); }
.schol i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-50);
  border: 1px solid var(--accent-200);
  color: var(--accent-600);
}
.schol strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.schol span { font-size: var(--fs-xs); color: var(--muted); }

.exam-wrap { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.exam {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.exam strong { color: var(--ink); font-size: var(--fs-sm); letter-spacing: -0.01em; }
.exam span { font-size: 0.6875rem; color: var(--muted); }
.exam i { color: var(--brand-600); }

/* ------------------------------------------------------------------ *
 * 22. FAQ
 * ------------------------------------------------------------------ */
.faq { display: flex; flex-direction: column; gap: 0.625rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.faq details[open] {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-xs);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.0625rem 1.25rem;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '\f067';
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.5625rem;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.faq details[open] summary::after {
  content: '\f068';
  background: var(--brand-700);
  color: #fff;
}
.faq summary:focus-visible { outline: 3px solid rgba(29, 78, 216, 0.35); outline-offset: -3px; }
.faq__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--body);
}

/* ------------------------------------------------------------------ *
 * 23. CTA band
 * ------------------------------------------------------------------ */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-950) 100%);
  color: #fff;
  padding: clamp(2.25rem, 5vw, 3.75rem);
}
.cta-band::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -12%;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 23, 31, 0.22), transparent 68%);
  pointer-events: none;
}
.cta-band h2 { color: #fff; max-width: 30rem; }
.cta-band__accent { color: var(--accent-bright); }
.cta-band p {
  margin-top: 0.875rem;
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-lede);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  position: relative;
  z-index: 1;
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
.cta-band__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cta-band__list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-sm);
}
.cta-band__list i { color: var(--accent-200); }

@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
}

/* ------------------------------------------------------------------ *
 * 24. Reveal animation (subtle only)
 *
 * main.js watches .reveal elements and adds .active when they scroll into
 * view. The hidden state only applies once the inline script in base.html
 * has flagged that JS is running, so content is never trapped invisible if
 * scripting fails.
 * ------------------------------------------------------------------ */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.js-reveal .reveal.active {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 * 25. Accessibility & utilities
 * ------------------------------------------------------------------ */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--brand-700);
  color: #fff;
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(29, 78, 216, 0.4);
  outline-offset: 2px;
  border-radius: 6px;
}

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mx-auto { margin-inline: auto; }
.text-center { text-align: center; }
.full { width: 100%; }

@media print {
  .site-header, .site-footer, .cta-band__actions, .whatsapp-widget { display: none; }
}

/* ------------------------------------------------------------------ *
 * 25b. Legacy overrides for custom.css
 *
 * custom.css still carries the old dark theme (selection colour, purple
 * scrollbar, gradient components) because several older templates depend on
 * its classes. These rules neutralise the global bits; site.css loads after
 * custom.css so they win on source order.
 * ------------------------------------------------------------------ */
html { background: #ffffff; }

::selection {
  background-color: var(--brand-100);
  color: var(--brand-950);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 999px;
  border: 2px solid var(--surface-2);
}
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ------------------------------------------------------------------ *
 * 26. Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 899px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .hero__badge { left: 0; bottom: -1rem; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Respect the OS "reduce motion" preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal.active { transition: none; }
}

/* ------------------------------------------------------------------ *
 * 27. Inner-page helpers
 *
 * Shared pieces the inner pages (about, universities, contact, apply,
 * services, legal) build on, so they stop each inventing their own.
 * ------------------------------------------------------------------ */

/* Long-form content (legal pages, service detail bodies). The markup is
   usually injected with |safe from the admin, so these rules must style
   bare headings and paragraphs rather than a class-per-element. */
.legal-shell { max-width: 52rem; margin-inline: auto; }

.prose-page { color: var(--body); line-height: 1.75; }
.prose-page > * + * { margin-top: 1rem; }
.prose-page h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.625rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  color: var(--ink);
}
.prose-page h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  color: var(--ink);
}
.prose-page h2:first-child,
.prose-page h3:first-child { margin-top: 0; }
.prose-page p { color: var(--body); }
.prose-page ul,
.prose-page ol { margin-left: 1.375rem; }
.prose-page li { margin-bottom: 0.375rem; }
.prose-page a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
.prose-page a:hover { color: var(--brand-800); }
.prose-page strong { color: var(--ink); }
.prose-page hr { margin-block: 2rem; }

/* Icon + copy row — the workhorse for feature and benefit lists. */
.media-row { display: flex; align-items: flex-start; gap: 1rem; }
.media-row .icon-tile { margin-bottom: 0; flex: none; }
.media-row__body { min-width: 0; }
.media-row h3,
.media-row h4 { margin-bottom: 0.25rem; }
.media-row p { font-size: var(--fs-sm); color: var(--body); }

/* A card that is entirely a link target. */
.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.card-link:hover { text-decoration: none; }

/* Numbered "stat" blocks used on service pages. */
.stat-plate {
  padding: 1.25rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-align: center;
}
.stat-plate__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-700);
}
.stat-plate__label {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Numbered step chip (01, 02 …) used beside headings. */
.step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-800);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  flex: none;
}

/* Touch-target helper: guarantees the 44px minimum without changing looks. */
.tap-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* A framed image that fills its box whatever the source aspect is. Use for
   editorial photography so a page needs no bespoke image CSS. */
.media-frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.media-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.media-frame--tall img { aspect-ratio: 4 / 5; }
.media-frame--wide img { aspect-ratio: 16 / 9; }

/* Eyebrow with no trailing space, for use inside a flex row. */
.eyebrow--flush { margin-bottom: 0; }

/* Small label sitting beside a heading in a wrapping row. */
.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Large round avatar for team members; falls back to initials when there is
   no photo. */
.avatar-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--brand-100);
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-800);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ *
 * 28. University listing (/universities)
 * ------------------------------------------------------------------ */

/* Filter chips + search row. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--body);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.filter-chip:hover { border-color: var(--brand-300); color: var(--brand-700); }
.filter-chip.active {
  border-color: transparent;
  background: var(--brand-700);
  color: #fff;
}
.filter-search { position: relative; flex: 1 1 14rem; }
.filter-search i {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.8125rem;
  pointer-events: none;
}
.filter-search .field { width: 100%; padding-left: 2.5rem; }
.filter-count { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }

/* A university row. */
.uni-card { display: flex; flex-direction: column; }
/* .uni-card sets display:flex, which would beat Tailwind's [hidden] reset —
   restore it so the filter can actually hide rows. */
.uni-card[hidden] { display: none; }
.uni-card__head { display: flex; align-items: flex-start; gap: 1.25rem; }
.uni-logo {
  position: relative;
  flex: none;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.uni-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain;
  background: #fff;
}
.uni-logo__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--uni-accent, var(--brand-700));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
}
/* .uni-logo__fallback sets display:flex, which would beat Tailwind's [hidden]
   reset — so it has to be restored explicitly. */
.uni-logo__fallback[hidden] { display: none; }
.uni-card__body { flex: 1 1 auto; min-width: 0; }
.uni-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-bottom: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.uni-meta i { color: var(--brand-600); }
.uni-programs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.uni-card__actions {
  display: flex;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.uni-card__actions .btn { flex: 1 1 0; }

/* ------------------------------------------------------------------ *
 * 29. FAQs, social links, contact rows
 * ------------------------------------------------------------------ */

/* FAQ disclosure list. Native <details> so keyboard and screen-reader
   support comes for free and no JS is needed for the +/- toggle. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 46rem;
  margin-inline: auto;
}
.faq-item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.faq-item[open] { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.faq-item[open] .faq-item__q::after { content: '\2212'; }
.faq-item__a {
  padding: 0 1.25rem 1.25rem;
  color: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* Social icon row. */
.social-links { display: flex; gap: 0.5rem; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--body);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.social-links a:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
}

/* A tappable contact row (WhatsApp / email / phone / office). */
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
a.contact-row:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); text-decoration: none; }
.contact-row__label { font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.contact-row__value { color: var(--brand-700); font-size: var(--fs-sm); font-weight: 600; }
.contact-row__note { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }