/* ============================================
   STUDY HOUSE — Design System & Styles
   ============================================ */

/* Fonts are served from /fonts (no third-party request), as variable fonts split by
   script so a page only downloads the parts it needs:
     Inter             400-600         latin, latin-ext, cyrillic
     Playfair Display  400-700, italic latin, latin-ext, cyrillic
   `latin` includes the Uzbek turned comma (U+02BB) and apostrophe (U+02BC).
   Both families are licensed under the SIL Open Font License (fonts/LICENSE.md).
   Every page preloads the three latin files, so the fonts are normally there before
   the first paint and the text does not shift. Keep font-weight within these ranges. */

/* Inter normal cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter normal latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter normal latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display italic cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Playfair Display italic latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display italic latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display normal cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Playfair Display normal latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display normal latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- Fallback fonts ---------------------------------------------------------
   Until Inter and Playfair Display arrive, text is set in a system font. These
   @font-face rules resize that system font to the web font's measured width and
   line metrics, so nothing shifts when the real font loads (Chrome measurements:
   Inter is 100.95% of Arial's width, Playfair Display 86.3% of Georgia's). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 100.95%;
  ascent-override: 96%;
  descent-override: 23.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Playfair Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 86.3%;
  ascent-override: 125.4%;
  descent-override: 29.1%;
  line-gap-override: 0%;
}

/* --- CSS Custom Properties --- */
/* Brand colours are sampled from images/logo-mark.webp and images/logo-text.webp.
   The emblem's dominant navy is #002050; its navy runs #001840 -> #003068.
   The gold in the wordmark runs #885820 -> #C89850 -> #F8D098. */
:root {
  /* Navy */
  --color-navy: #002050;          /* main tone, matches the emblem */
  --navy-deep: #021F47;           /* darkest navy in the logo */
  --navy-light: #07336D;          /* lightest navy in the logo */
  --gradient-navy: linear-gradient(135deg, #021F47 0%, #07336D 100%);

  /* Champagne gold */
  --color-gold: #CC9855;          /* flat gold: borders, icons, decorative fills */
  --gold-deep: #916329;
  --gold-pale: #FBD49E;
  --gradient-gold: linear-gradient(135deg, #916329 0%, #CC9855 55%, #FBD49E 100%);
  /* The full gold gradient is too dark at one end and too light at the other to
     carry text at AA, so buttons use its lighter half with navy text (6.2:1+). */
  --gradient-gold-btn: linear-gradient(135deg, #CC9855 0%, #FBD49E 100%);
  /* Gold is too light for body text on white (#CC9855 is only 2.6:1), so text
     accents use one of these two instead — both pass WCAG AA. */
  --color-gold-ink: #916329;      /* gold text on white — 5.2:1 */
  --color-champagne: #E8BB7D;     /* gold text on navy  — 8.9:1 */

  /* Neutrals */
  --color-bg: #FFFFFF;
  --color-white: #FFFFFF;
  --color-surface: #F6F8FB;       /* very light neutral, for section separation only */
  --color-cream-dark: #F6F8FB;    /* alias kept so older rules keep working */
  --color-gray: #5B6472;
  --color-gray-light: #6A727D;   /* 4.9:1 on white — the old #8A919B was 3.2:1 */
  --color-border: #E3E8EF;

  --font-serif: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  --shadow-sm: 0 2px 8px rgba(2, 31, 71, 0.04);
  --shadow-md: 0 4px 20px rgba(2, 31, 71, 0.06);
  --shadow-lg: 0 8px 40px rgba(2, 31, 71, 0.08);
  --shadow-hover: 0 12px 48px rgba(2, 31, 71, 0.12);

  --container-max: 1280px;
  /* Fluid: 56px on a phone up to 120px on a desktop */
  --section-padding: clamp(56px, 9vw, 120px) 0;
  /* Side gutter: 16px on a phone up to 40px on a desktop */
  --gutter: clamp(16px, 4vw, 40px);
  /* Header height, used for anchor offsets and the mobile menu */
  --header-h: 80px;
  /* Page zoom on wide screens (see the last media queries). Viewport units such
     as dvh are NOT scaled by `zoom`, so anything sized in them divides by this. */
  --zoom: 1;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* stop iOS Safari and Android Chrome inflating text after a rotation */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* a link to #section lands below the sticky header, not under it */
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* hyphenate long words where the browser has a dictionary (Russian, English) */
  hyphens: auto;
  -webkit-hyphens: auto;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-gray);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  overflow-wrap: break-word;
  /* Playfair Display defaults to old-style figures ("01" looks like "o1"); use lining figures */
  font-variant-numeric: lining-nums;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  /* on a notched phone in landscape the content must stay clear of the notch */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* --- Utility --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

.eyebrow--white {
  color: rgba(255, 255, 255, 0.6);
}

.eyebrow--gold::before {
  background-color: var(--color-gold);
}

.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.section-heading em {
  font-style: italic;
  color: var(--color-gold-ink);
}

.section-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease, gap 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .section-link:hover {
    color: var(--color-gold-ink);
    gap: 10px;
  }
}

.section-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .section-link:hover svg {
    transform: translateX(2px);
  }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

.btn--primary {
  background: var(--gradient-navy);
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: linear-gradient(135deg, #07336D 0%, #0B4489 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* --- The consultation button ---------------------------------------------
   Every control that opens the booking form uses this one style: the same
   navy gradient as the footer, sampled from the logo, white text and a gold
   hover glow. On navy sections a filled navy button would disappear, so the
   --dark variant keeps the same shape with a thin champagne-gold border. */
.btn--consult {
  background: var(--gradient-navy);
  color: var(--color-white);
  border: 1.5px solid transparent;
}

.btn--consult:focus-visible {
  background: linear-gradient(135deg, #07336D 0%, #0B4489 100%);
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(204, 152, 85, 0.28), 0 10px 28px rgba(204, 152, 85, 0.34);
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  .btn--consult:hover {
    background: linear-gradient(135deg, #07336D 0%, #0B4489 100%);
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(204, 152, 85, 0.28), 0 10px 28px rgba(204, 152, 85, 0.34);
    transform: translateY(-1px);
  }
}

.btn--consult--dark {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-white);
  border: 1.5px solid var(--color-champagne);
}

.btn--consult--dark:focus-visible {
  background: rgba(232, 187, 125, 0.18);
  border-color: var(--gold-pale);
  box-shadow: 0 0 0 3px rgba(232, 187, 125, 0.24), 0 10px 28px rgba(232, 187, 125, 0.3);
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  .btn--consult--dark:hover {
    background: rgba(232, 187, 125, 0.18);
    border-color: var(--gold-pale);
    box-shadow: 0 0 0 3px rgba(232, 187, 125, 0.24), 0 10px 28px rgba(232, 187, 125, 0.3);
    transform: translateY(-1px);
  }
}

.btn--outline {
  border: 1.5px solid var(--color-border);
  color: var(--color-navy);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover {
    border-color: var(--color-navy);
    background-color: rgba(2, 31, 71, 0.03);
  }
}

.btn--gold {
  background: var(--gradient-gold-btn);
  color: var(--navy-deep);
}

@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover {
    background: linear-gradient(135deg, #B9823C 0%, #EFC182 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* --- Scroll Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(229, 225, 218, 0.5);
  transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(2, 31, 71, 0.06);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;                 /* never lets the logo touch the first menu item */
  height: var(--header-h);
}

.navbar__logo {
  /* One number drives the whole logo: the wordmark's height. It runs from 15px
     on a 320px phone to 30px at about 830px and up, and the emblem, the gap and
     the click area all follow it, so the pair never touches or overlaps the
     buttons beside it at any width. */
  --logo-h: clamp(15px, 3.6vw, 30px);
  display: inline-flex;
  align-items: center;
  gap: clamp(9px, 2.4vw, 20px);          /* emblem and wordmark stay clearly apart */
  min-height: 44px;                      /* a comfortable tap target */
  margin-left: -10px;                    /* nudges the whole group left, off the gutter */
  padding-right: 8px;
  text-decoration: none;
  flex-shrink: 1;
  min-width: 0;
  background: transparent;
}

.navbar__logo-mark-img {
  height: calc(var(--logo-h) * 1.75);
  width: auto;
  object-fit: contain;
  display: block;
  background: transparent;
  transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .navbar__logo:hover .navbar__logo-mark-img {
    transform: scale(1.04);
  }
}

.navbar__logo-text-img {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  display: block;
  background: transparent;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-left: clamp(24px, 3.2vw, 48px);
}

.navbar__link {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--color-gray);
  position: relative;
  padding: 5px 0;
  white-space: nowrap;
  transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .navbar__link:hover {
    color: var(--color-navy);
  }
}

.navbar__link--active {
  color: var(--color-navy);
}

.navbar__link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-gold);
  border-radius: 1px;
}

.navbar__cta .btn {
  padding: 10px 18px;
  font-size: 12px;
  white-space: nowrap;
}

/* --- Language switcher (UZ / RU / EN) --- */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  background: var(--color-cream-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.lang-switch__btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  padding: 7px 10px;
  color: var(--color-gray);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch__btn:hover {
    color: var(--color-navy);
  }
}

.lang-switch__btn--active {
  background: var(--gradient-navy);
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch__btn--active:hover {
    background: var(--gradient-navy);
    color: var(--color-white);
  }
}

.lang-switch__btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.navbar__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
}

/* The only flat navy left on the site: a gradient across a 2px bar would not
   render. Every panel, section, button and the footer use --gradient-navy. */
.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-navy);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.navbar__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Navbar breakpoints ---
   These sit after the base .navbar__hamburger / .mobile-nav rules on purpose:
   they have the same specificity, so the later block has to win. */
@media (max-width: 1300px) {
  html:not([lang="en"]) .navbar__cta {
    display: none;
  }
}

@media (max-width: 1220px) {
  .navbar__cta {
    display: none;
  }
}

/* Between the widest layout and the hamburger, tighten the row rather than
   letting it wrap or overflow. Spacing stays even. */
@media (max-width: 1200px) {
  .navbar__inner {
    gap: 20px;
  }

  .navbar__links {
    gap: 10px;
    margin-left: 20px;
  }
}

@media (max-width: 1100px) {
  /* With the menu collapsed the logo needs no reserved gap beside it.
     The menu / hamburger / mobile-nav switch itself lives further down, after
     the .mobile-nav base rule, so that it wins the cascade. */
  .navbar__inner {
    gap: 16px;
  }
}

@media (max-width: 420px) {
  .navbar__inner {
    gap: 10px;
  }

  .navbar__logo {
    margin-left: -4px;
    padding-right: 0;
  }
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  padding: 80px 0 48px;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero__content {
  padding-right: 20px;
}

.hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.hero__heading em {
  font-style: italic;
  color: var(--color-gold-ink);
}

.hero__subtext {
  font-size: 17px;
  color: var(--color-gray);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 460px;
}

.hero__buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hero__image-wrapper {
  position: relative;
}

.hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   TOP DESTINATIONS
   ============================================ */
.destinations {
  padding: var(--section-padding);
}

.destinations__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 20px;
}

.destinations__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.dest-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .dest-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
}

.dest-card__image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .dest-card:hover .dest-card__image {
    transform: scale(1.04);
  }
}

.dest-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 24px 24px;
  background: linear-gradient(to top, rgba(2, 31, 71, 0.9) 0%, rgba(2, 31, 71, 0) 100%);
}

.dest-card__name {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 4px;
}

.dest-card__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.dest-card__arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .dest-card:hover .dest-card__arrow {
    background: var(--color-gold);
    border-color: var(--color-gold);
  }
}

.dest-card__arrow svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   WHY CHOOSE US
   ============================================ */
.why {
  padding: var(--section-padding);
}

.why__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

.why__content {
  padding-right: 20px;
}

.why__text {
  font-size: 16px;
  color: var(--color-gray);
  line-height: 1.8;
  margin-top: 20px;
}

.why__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-ink);
  transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .feature-item:hover .feature-item__icon {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
  }
}

.feature-item__icon svg {
  width: 20px;
  height: 20px;
}

.feature-item__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
}

.feature-item__desc {
  font-size: 14px;
  color: var(--color-gray);
  line-height: 1.6;
}

.why__image {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ============================================
   HOW IT WORKS
   ============================================ */
.how {
  padding: var(--section-padding);
  background-color: var(--color-cream-dark);
}

.how__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  flex-wrap: wrap;
  gap: 20px;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.how__steps::before {
  content: '';
  position: absolute;
  top: 102px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border), var(--color-border), transparent);
}

.step {
  text-align: center;
  padding: 0 24px;
  position: relative;
}

/* The numerals used to be the border grey (1.16:1 on this background), so they
   all but disappeared. They are now the brand navy gradient (#021F47 to
   #07336D), which is 15:1 or better on this background.
   The solid navy colour is what shows everywhere; the gradient only replaces it
   where the browser can clip a background to text, so the numbers can never end
   up transparent. */
.step__number {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1;
  margin-bottom: 20px;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .step__number {
    background: var(--gradient-navy);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.step__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-ink);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .step:hover .step__icon {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 6px rgba(204, 152, 85, 0.1);
  }
}

.step__icon svg {
  width: 22px;
  height: 22px;
}

.step__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.step__desc {
  font-size: 14px;
  color: var(--color-gray);
  line-height: 1.6;
  max-width: 220px;
  margin: 0 auto;
}

/* ============================================
   FEATURED UNIVERSITIES
   ============================================ */
/* The logo strip sits directly under the hero buttons, so it keeps very
   little top padding of its own. */
.universities {
  padding: 8px 0 72px;
}

/* A quiet label above the logos, not a section headline: small and grey
   (#6A727D, 4.9:1 on white), so the logos are what the eye goes to. */
.universities__heading {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  color: var(--color-gray-light);
  text-align: center;
  margin-bottom: 4px;
}

/* --- Universities Logo Carousel --- */
.universities__carousel {
  position: relative;
  width: 100%;
  /* A scroll box: a finger swipe scrolls it natively and carousel.js drifts it
     slowly when nobody is touching it. The scrollbar is hidden, not removed. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 24px 0 28px;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.universities__carousel::before,
.universities__carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.universities__carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), rgba(255, 255, 255, 0));
}

.universities__carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), rgba(255, 255, 255, 0));
}

.universities__carousel::-webkit-scrollbar {
  display: none;
}

.universities__carousel:focus-visible {
  outline: 3px solid var(--navy-light);
  outline-offset: -3px;
  border-radius: 8px;
}

.universities__carousel-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
}

@media (prefers-reduced-motion: reduce) {
  /* nothing drifts; the logos sit still (one copy), centred and wrapped */
  .universities__carousel-track {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .universities__carousel {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.uni-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 8px;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .uni-logo-card:hover {
    transform: scale(1.08);
    background: transparent;
    box-shadow: none;
    border: none;
  }
}

/* Sized from the logo's own aspect ratio (--ar = width / height, set by
   carousel.js), not from the loaded image, so every slot has its final size
   before any image arrives. Otherwise the strip is measured as a fraction of its
   real length and the loop and drift speed come out wrong. The height is the
   smaller of the standard height and whatever keeps the width under the maximum. */
.uni-logo-card__img {
  --h: calc(56px * var(--logo-scale, 1));
  --maxw: calc(200px * var(--logo-scale, 1));
  height: min(var(--h), calc(var(--maxw) / var(--ar, 3)));
  width: auto;
  aspect-ratio: var(--ar, 3);
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .uni-logo-card:hover .uni-logo-card__img {
    transform: none;
  }
}


/* ============================================
   GPA CALCULATOR — homepage section
   ============================================ */
.gpa-home {
  padding: var(--section-padding);
}

.gpa-home__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}

.gpa-home__text {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--color-gray);
  margin: 20px 0 24px;
  max-width: 460px;
}

/* The thinking bear fills the empty space under the text while the calculator sits beside it.
   Once the columns stack there is no empty space, so it goes. */
.gpa-home__mascot {
  display: block;
  height: clamp(220px, 20vw, 290px);
  width: auto;
  aspect-ratio: 297 / 640;
  margin-top: 32px;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 1024px) {
  .gpa-home__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .gpa-home__mascot {
    display: none;
  }
}

/* ============================================
   FOOTER  (markup is built by site.js)
   ============================================ */
.footer {
  padding: 72px 0 28px;
  background: var(--gradient-navy);
  color: rgba(255, 255, 255, 0.72);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(232, 187, 125, 0.22);
}

.footer__brand {
  max-width: 320px;
}

.footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-champagne);
}

.footer__blurb {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

/* --- Link columns --- */
.footer__col-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 18px;
}

.footer__col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.25s ease;
}

.footer__link:focus-visible {
  color: var(--color-champagne);
}

@media (hover: hover) and (pointer: fine) {
  .footer__link:hover {
    color: var(--color-champagne);
  }
}

/* --- Contact column --- */
.footer__contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.footer__contact-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .footer__contact-list a:hover {
    color: var(--color-champagne);
  }
}

.footer__contact-empty {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 18px;
}

.footer__contact-btn {
  padding: 12px 24px;
  font-size: 13px;
}

/* --- Social --- */
.footer__social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.footer__social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(232, 187, 125, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer__social-icon:hover {
    border-color: var(--color-champagne);
    color: var(--color-champagne);
    background: rgba(232, 187, 125, 0.1);
  }
}

.footer__social-icon svg {
  width: 17px;
  height: 17px;
}

/* --- Bottom bar --- */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
}

.footer__copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.footer__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 560px;
}

@media (max-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer__brand {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .footer {
    padding: 52px 0 24px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   MOBILE NAV OVERLAY
   ============================================ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 999;
  /* solid, not blurred: a full-screen backdrop blur is expensive on low-end phones */
  background: #FFFFFF;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  /* the header stays visible above the menu, so start below it; keep clear of
     the notch and the home indicator */
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 12px)
           max(24px, env(safe-area-inset-left))
           calc(28px + env(safe-area-inset-bottom))
           max(24px, env(safe-area-inset-right));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Centre the items when they fit; scroll from the top when they do not (a phone
   held sideways). `margin: auto` on the first and last child does this without
   the clipping that `justify-content: center` causes on overflow. */
.mobile-nav > :first-child {
  margin-top: auto;
}

.mobile-nav > :last-child {
  margin-bottom: auto;
}

.mobile-nav.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-navy);
  transition: color 0.3s ease;
}

.mobile-nav .btn {
  align-self: center;
  margin-top: 12px;
}

/* On the narrowest phones the language switcher does not fit beside the logo,
   so it lives at the bottom of the menu instead. */
.mobile-nav__lang {
  display: none;
  align-self: center;
  margin-top: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav__link:hover {
    color: var(--color-gold-ink);
  }
}

/* ============================================
   RESPONSIVE — Tablet
   ============================================ */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero__content {
    padding-right: 0;
    text-align: center;
  }

  .hero__subtext {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__buttons {
    justify-content: center;
  }

  .hero__image-wrapper {
    max-width: 500px;
    margin: 0 auto;
  }


  .destinations__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dest-card__image {
    height: 320px;
  }

  .why__inner {
    grid-template-columns: 1fr 1fr;
  }

  .why__image {
    display: none;
  }

  .how__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .how__steps::before {
    display: none;
  }

  .universities__carousel-track {
    gap: 48px;
  }

  .uni-logo-card__img {
    --h: calc(48px * var(--logo-scale, 1));
    --maxw: calc(170px * var(--logo-scale, 1));
  }

}

/* Collapse to the hamburger well before the row could wrap.
   This sits after the .navbar__hamburger and .mobile-nav base rules so that it
   overrides their `display: none`. */
@media (max-width: 1100px) {
  .navbar__links {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  .mobile-nav {
    display: flex;
  }
}

/* ============================================
   RESPONSIVE — Mobile
   ============================================ */
@media (max-width: 420px) {
  .navbar__actions {
    gap: 6px;
  }

  .lang-switch__btn {
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 6px 8px;
  }

  .hero {
    padding: 40px 0 60px;
  }

  .hero__heading {
    font-size: 36px;
  }


  .hero__buttons {
    flex-direction: column;
    align-items: center;
  }

  .destinations__grid {
    grid-template-columns: 1fr;
  }

  .dest-card__image {
    height: 300px;
  }

  .destinations__header,
  .how__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .why__inner {
    grid-template-columns: 1fr;
  }

  .why__features {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .how__steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .universities__carousel-track {
    gap: 36px;
  }

  .uni-logo-card__img {
    --h: calc(40px * var(--logo-scale, 1));
    --maxw: calc(140px * var(--logo-scale, 1));
  }

  .section-heading {
    font-size: 28px;
  }

  .navbar__cta {
    display: none;
  }
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
  padding: 24px 0 0;
}

.breadcrumb__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

.breadcrumb__link {
  color: var(--color-gray-light);
  transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumb__link:hover {
    color: var(--color-navy);
  }
}

.breadcrumb__sep {
  display: flex;
  align-items: center;
  color: var(--color-border);
}

.breadcrumb__sep svg {
  width: 8px;
  height: 12px;
}

.breadcrumb__current {
  color: var(--color-navy);
  font-weight: 600;
}

/* ============================================
   PAGE HEADER (Sub-pages)
   ============================================ */
.page-header {
  padding: 60px 0 40px;
}

.page-header__content {
  max-width: 680px;
}

.page-header__heading {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.page-header__heading em {
  font-style: italic;
  color: var(--color-gold-ink);
}

.page-header__text {
  font-size: 17px;
  color: var(--color-gray);
  line-height: 1.7;
  max-width: 560px;
}

/* ============================================
   COUNTRY GRID (Sub-pages)
   ============================================ */
.country-grid-section {
  padding: 40px 0 100px;
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.country-grid .dest-card {
  display: block;
  text-decoration: none;
}

.country-grid .dest-card__image {
  height: 400px;
}

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
  padding: 0 0 100px;
}

.cta-banner__inner {
  background: var(--gradient-navy);
  border-radius: var(--radius-xl);
  padding: 60px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cta-banner__heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 12px;
}

.cta-banner__heading em {
  font-style: italic;
  color: var(--color-champagne);
}

.cta-banner__text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  max-width: 480px;
}

.cta-banner__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Country Grid Responsive (Tablet) --- */
@media (max-width: 1024px) {
  .country-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .country-grid .dest-card__image {
    height: 340px;
  }

  .cta-banner__inner {
    flex-direction: column;
    text-align: center;
    padding: 48px 40px;
  }

  .cta-banner__text {
    max-width: 100%;
  }
}

/* --- Country Grid Responsive (Mobile) --- */
@media (max-width: 640px) {
  .country-grid {
    grid-template-columns: 1fr;
  }

  .country-grid .dest-card__image {
    height: 300px;
  }

  .page-header {
    padding: 40px 0 20px;
  }

  .country-grid-section {
    padding: 24px 0 60px;
  }

  .cta-banner {
    padding: 0 0 60px;
  }

  .cta-banner__inner {
    padding: 40px 24px;
  }
}

/* ============================================
   COUNTRY PAGE — Hero
   ============================================ */
.country-hero {
  position: relative;
  height: 520px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.country-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.country-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(2, 31, 71, 0.85) 0%,
    rgba(2, 31, 71, 0.4) 50%,
    rgba(2, 31, 71, 0.15) 100%
  );
}

.country-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: 56px;
  max-width: 720px;
}

.country-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.country-hero__subtext {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 600px;
}

.country-hero__pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

.pill--active {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .pill:hover {
    background: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);
  }
}

/* ============================================
   COUNTRY PAGE — Stats Bar
   ============================================ */
.stats-bar {
  background: var(--gradient-navy);
  padding: 40px 0;
}

.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stat {
  text-align: center;
  position: relative;
}

.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.stat__value {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 600;
  color: var(--color-champagne);
  line-height: 1.2;
  margin-bottom: 8px;
}

.stat__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ============================================
   COUNTRY PAGE — Overview Section
   ============================================ */
.country-overview {
  padding: var(--section-padding);
}

.country-overview__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}

.country-overview__image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.country-overview__heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.country-overview__heading em {
  font-style: italic;
  color: var(--color-gold-ink);
}

.country-overview__body {
  font-size: 16px;
  color: var(--color-gray);
  line-height: 1.8;
}

/* ============================================
   COUNTRY PAGE — Approach (Dark)
   ============================================ */
.approach {
  padding: 100px 0;
  background: var(--gradient-navy);
}

.approach__header {
  text-align: center;
  margin-bottom: 56px;
}

.approach__header .eyebrow {
  justify-content: center;
  color: var(--color-champagne);
}

.approach__header .eyebrow::before {
  background-color: var(--color-gold);
}

.approach__heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.2;
  max-width: 640px;
  margin: 0 auto;
}

.approach__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.approach-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
  .approach-card:hover {
    border-color: rgba(204, 152, 85, 0.3);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
  }
}

.approach-card__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 14px;
}

.approach-card__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 12px;
  line-height: 1.3;
}

.approach-card__body {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
}

/* ============================================
   COUNTRY PAGE — Visa Pathway
   ============================================ */
.visa {
  padding: var(--section-padding);
}

.visa__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}

.visa__heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  margin-bottom: 16px;
}

.visa__body {
  font-size: 16px;
  color: var(--color-gray);
  line-height: 1.8;
  margin-bottom: 36px;
}

.visa__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.visa-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.visa-step:first-child {
  padding-top: 0;
}

.visa-step__number {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gold-ink);
  flex-shrink: 0;
  width: 28px;
}

.visa-step__text {
  font-size: 15px;
  color: var(--color-navy);
  line-height: 1.5;
  font-weight: 500;
}

/* Visa Spec Box */
.visa-spec {
  background: var(--gradient-navy);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: sticky;
  top: 110px;
}

.visa-spec__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 28px;
}

.visa-spec__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 16px;
}

.visa-spec__row:last-child {
  border-bottom: none;
}

.visa-spec__label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);          /* was 0.45, about 3:1 — now above 4.5:1 */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* it may shrink and wrap: a long translated label (Uzbek "Moliyaviy taʼminot
     hujjatlari") must not push the panel wider than the screen */
  min-width: 0;
}

.visa-spec__value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
  text-align: right;
  min-width: 0;
}

/* ============================================
   COUNTRY PAGE — Institutional Database
   ============================================ */
.inst-database {
  padding: var(--section-padding);
  background-color: var(--color-cream-dark);
}

.inst-database__header {
  text-align: center;
  margin-bottom: 48px;
}

.inst-database__header .eyebrow {
  justify-content: center;
}

.inst-database__heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.2;
  margin-bottom: 16px;
}

.inst-database__text {
  font-size: 16px;
  color: var(--color-gray);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 32px;
}

.inst-database__btn {
  display: inline-flex;
  margin: 0 auto;
}

.inst-database__header .btn {
  margin: 0 auto;
}

.inst-database__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.inst-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .inst-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
  }
}

.inst-card__photo {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #E8E4DC 0%, #D8D3CA 100%);   /* shows while the photo loads */
  overflow: hidden;
}

.inst-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inst-card__info {
  padding: 20px;
}

.inst-card__name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.inst-card__city {
  font-size: 13px;
  color: var(--color-gray);
}

/* ============================================
   COUNTRY PAGE — Closing CTA
   ============================================ */
.closing-cta {
  padding: 100px 0;
  background: var(--gradient-navy);
  text-align: center;
}

.closing-cta__heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.2;
  max-width: 700px;
  margin: 0 auto 16px;
}

.closing-cta__heading em {
  font-style: italic;
  color: var(--color-champagne);
}

.closing-cta__text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 36px;
}

/* ============================================
   COUNTRY PAGE — Responsive
   ============================================ */
@media (max-width: 1024px) {
  .country-hero {
    height: 440px;
  }

  .stats-bar__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .stat:nth-child(2)::after {
    display: none;
  }

  .country-overview__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .country-overview__image {
    height: 320px;
  }

  .approach__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .visa__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .visa-spec {
    position: static;
  }

  .inst-database__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .country-hero {
    height: 400px;
  }

  .country-hero__content {
    padding-bottom: 32px;
  }

  .stats-bar__inner {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .stat::after {
    display: none !important;
  }

  .approach {
    padding: 64px 0;
  }

  .approach-card {
    padding: 28px 24px;
  }

  .inst-database__grid {
    grid-template-columns: 1fr;
  }

  .closing-cta {
    padding: 64px 0;
  }
}


/* ============================================
   EXPERTISE PAGE
   ============================================ */

/* --- Expertise Hero / Header --- */
.expertise-hero {
  background: var(--gradient-navy);
  padding: 160px 0 100px 0;
}

.expertise-hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 64px;
}

.expertise-hero__left {
  flex: 1 1 60%;
  max-width: 760px;
}

.expertise-hero__right {
  flex: 0 1 380px;
  padding-bottom: 6px;
}

.expertise-hero .eyebrow {
  color: var(--color-champagne);
}

.expertise-hero__heading {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
}

.expertise-hero__subtext {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
}

/* --- Stage overview row: static, information only (no hover / click state) --- */
.stage-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 56px 0 72px;
  padding: 0;
}

.stage-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.stage-card__num {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-champagne);
}

.stage-card__label {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-white);
}

/* --- Stacked stage blocks --- */
.stage-block + .stage-block {
  margin-top: 72px;
}

.stage-block__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
}

.stage-block__num {
  color: var(--color-champagne);
}


/* --- Comparison Panels --- */
.expertise-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  box-shadow: var(--shadow-lg);
}

.expertise-panel__col {
  padding: 48px 40px 56px;
}

.expertise-panel__col--without {
  background-color: #122D4A;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-right: none;
}

.expertise-panel__col--with {
  background-color: #0A2139;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border: 1px solid rgba(204, 152, 85, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.expertise-panel__col-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.expertise-panel__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.expertise-panel__dot--red {
  background: #E85A5A;
  box-shadow: 0 0 6px rgba(232, 90, 90, 0.4);
}

.expertise-panel__dot--gold {
  background: var(--color-gold);
  box-shadow: 0 0 6px rgba(204, 152, 85, 0.4);
}

.expertise-panel__col-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.expertise-panel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.expertise-panel__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.65;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.expertise-panel__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.expertise-panel__item:first-child {
  padding-top: 0;
}

.expertise-panel__item--bad {
  color: rgba(255, 255, 255, 0.78);
}

.expertise-panel__item--good {
  color: rgba(255, 255, 255, 0.9);
}

.expertise-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 2px;
  flex-shrink: 0;
}

.expertise-panel__item--bad .expertise-panel__icon {
  background: rgba(232, 90, 90, 0.15);
  color: #E85A5A;
}

.expertise-panel__item--good .expertise-panel__icon {
  background: rgba(204, 152, 85, 0.18);
  color: var(--color-champagne);
}


/* --- Expertise Responsive --- */
@media (max-width: 1024px) {
  .expertise-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .expertise-hero__right {
    flex: none;
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  .expertise-hero {
    padding: 120px 0 60px 0;
  }

  .stage-row {
    grid-template-columns: repeat(2, 1fr);
    margin: 40px 0 56px;
  }

  .stage-block + .stage-block {
    margin-top: 56px;
  }

  .expertise-panel {
    grid-template-columns: 1fr;
  }

  .expertise-panel__col {
    padding: 32px 24px 40px;
  }

  .expertise-panel__col--without {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: none;
  }

  .expertise-panel__col--with {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-left: 1px solid rgba(204, 152, 85, 0.15);
  }
}

@media (max-width: 480px) {
  .expertise-hero {
    padding: 100px 0 48px 0;
  }

  .stage-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stage-card {
    padding: 16px 18px;
  }

  .expertise-hero__heading {
    font-size: 1.65rem;
  }

  .expertise-panel__col {
    padding: 24px 16px 32px;
  }

  .expertise-panel__item {
    font-size: 0.85rem;
    gap: 10px;
  }
}

/* Italic accents inside serif headings: the only italic loaded is Playfair Display 500 */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 500;
}

/* ============================================
   BOOKING MODAL (markup + logic in /booking.js)
   ============================================ */
.booking {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  padding: 24px;
  overflow-y: auto;
  background: rgba(2, 31, 71, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.booking[hidden] {
  display: none;
}

.booking--open {
  opacity: 1;
}

.booking__panel {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  width: 100%;
  max-width: 900px;
  margin: auto;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  transform: translateY(12px);
  transition: transform 0.25s ease;
  outline: none;
}

.booking--open .booking__panel {
  transform: none;
}

.booking__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  color: var(--color-navy);
  background: rgba(255, 255, 255, 0.85);
  transition: background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .booking__close:hover {
    background: var(--color-white);
  }
}

.booking__close:focus-visible,
.booking input:focus-visible,
.booking select:focus-visible,
.booking .btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* --- Mascot side (backdrop colour matches the character sheet's studio grey) --- */
.booking__mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 24px 16px 20px;
  background: #A8A6A7;
}

.booking__stage {
  width: 100%;
  max-width: 260px;
}

.booking__mascot-img {
  width: 100%;
  height: auto;
  transition: opacity 0.15s ease;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
                      linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
              linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}

.booking__mascot-img.is-fading {
  opacity: 0;
}

/* No mascot file yet: show the Study House emblem instead */
.booking__mascot--emblem .booking__mascot-img {
  width: 110px;
  height: auto;
  margin: 24px auto;
  padding: 16px;
  background: var(--color-bg);
  border-radius: 50%;
  -webkit-mask-image: none;
  mask-image: none;
}

.booking__bubble {
  order: -1;
  position: relative;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--color-navy);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.booking__bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--color-white);
  transform: translateX(-50%) rotate(45deg);
}

/* --- Form side --- */
.booking__main {
  padding: 44px 40px 36px;
}

.booking__title {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-navy);
}

.booking__intro {
  margin: 8px 0 24px;
  font-size: 0.95rem;
  color: var(--color-gray);
}

.booking__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.booking .field {
  margin-bottom: 14px;
}

.booking .field > label:not(.check) {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy);
}

.booking input[type="text"],
.booking input[type="tel"],
.booking select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 16px; /* 16px stops iOS zooming into the field */
  color: var(--color-navy);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking input[type="text"]:focus,
.booking input[type="tel"]:focus,
.booking select:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(204, 152, 85, 0.3);
}

.booking .field--invalid input,
.booking .field--invalid select {
  border-color: #B3261E;
}

.field__error {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #B3261E;
}

.booking__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.booking .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-gray);
  cursor: pointer;
}

.booking .check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-navy);
}

.booking__prefill {
  margin: -4px 0 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(204, 152, 85, 0.12);
  border: 1px solid rgba(204, 152, 85, 0.35);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-navy);
}

.booking__privacy {
  margin: 4px 0 18px;
  font-size: 0.8rem;
  color: var(--color-gray-light);
}

.booking__status {
  margin-bottom: 14px;
  padding: 12px 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #8A1F17;
  background: #FDECEA;
  border-radius: var(--radius-sm);
}

.booking__submit {
  width: 100%;
  justify-content: center;
}

.booking__submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

.booking__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  min-height: 240px;
  outline: none;
}

.booking__success[hidden],
#bk-formwrap[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .booking,
  .booking__panel,
  .booking__mascot-img {
    transition: none;
  }
}

@media (max-width: 768px) {
  .booking {
    padding: 16px;
  }

  .booking__panel {
    grid-template-columns: 1fr;
  }

  /* Mobile: small mascot strip above the form */
  .booking__mascot {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 12px 64px 0 16px;
    overflow: hidden;
  }

  .booking__stage {
    flex: 0 0 84px;
    width: 84px;
    align-self: flex-end;
  }

  .booking__bubble {
    order: 0;
    align-self: center;
    margin-bottom: 12px;
    text-align: left;
    font-size: 0.85rem;
  }

  .booking__bubble::after {
    left: -6px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .booking__mascot--emblem .booking__mascot-img {
    width: 64px;
    margin: 0 0 12px;
    padding: 8px;
  }

  .booking__main {
    padding: 28px 24px 28px;
  }

  .booking__title {
    font-size: 1.55rem;
  }
}

@media (max-width: 480px) {
  .booking {
    padding: 0;
  }

  .booking__panel {
    min-height: 100%;
    border-radius: 0;
  }

  .booking__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .booking__main {
    padding: 24px 20px 32px;
  }
}

/* ============================================
   COUNTRY PAGES: USA / AUSTRALIA / CHINA
   (key facts, compare universities, FAQ)
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-intro {
  max-width: 720px;
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-gray);
}

/* --- Key facts --- */
.facts {
  padding: var(--section-padding);
  background: var(--color-bg);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.fact-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.fact-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gold-ink);
}

.fact-card__value {
  margin: 10px 0 12px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-navy);
}

.fact-card__note {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-gray);
}

.fact-card__src {
  margin-top: auto;
  padding-top: 16px;
  font-size: 12.5px;
  color: var(--color-gray-light);
}

.fact-card__src a,
.cmp-foot a:not(.btn),
.cmp-sources a,
.source-line a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: rgba(204, 152, 85, 0.6);
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .fact-card__src a:hover,
  .cmp-foot a:not(.btn):hover,
  .cmp-sources a:hover,
  .source-line a:hover {
    color: var(--color-gold-ink);
  }
}

.source-line {
  margin-top: 28px;
  font-size: 13px;
  color: var(--color-gray-light);
}

/* --- Compare universities --- */
.compare {
  padding: var(--section-padding);
  background: var(--color-white);
}

.cmp-picker {
  margin-top: 40px;
}

.cmp-picker__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
}

.cmp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.cmp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cmp-chip__qs {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-gray-light);
}

@media (hover: hover) and (pointer: fine) {
  .cmp-chip:hover {
    border-color: var(--color-navy);
  }
}

.cmp-chip--on {
  color: var(--color-white);
  background: var(--gradient-navy);
  border-color: var(--color-navy);
}

.cmp-chip--on .cmp-chip__qs {
  color: var(--color-champagne);
}

.cmp-chip--off {
  opacity: 0.45;
  cursor: not-allowed;
}

.cmp-chip:focus-visible,
.cmp-sources summary:focus-visible,
.faq-item summary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.cmp-status {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-gray);
}

.cmp-output {
  margin-top: 28px;
}

.cmp-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--color-gray);
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.cmp-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cmp-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14.5px;
  line-height: 1.6;
}

.cmp-table th,
.cmp-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
  border-bottom: none;
}

.cmp-table tbody th {
  width: 190px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-gray);
  background: var(--color-bg);
}

.cmp-table tbody td {
  color: var(--color-navy);
  border-left: 1px solid var(--color-border);
}

.cmp-table__corner {
  width: 190px;
  background: var(--gradient-navy);
}

.cmp-table__uni {
  background: var(--gradient-navy);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: none;
}

.cmp-table__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-white);
}

.cmp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cmp-tag {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--color-navy);
  background: #E9D9B7;
  border-radius: var(--radius-pill);
}

.cmp-qs {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}

.cmp-qs small {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray);
}

.cmp-todo {
  display: inline-block;
  padding: 3px 10px;
  font-size: 13px;
  font-style: italic;
  color: #8A5A00;
  background: #FFF4DD;
  border: 1px dashed #D9A441;
  border-radius: var(--radius-sm);
}

.cmp-cards {
  display: none;
}

.cmp-card {
  padding: 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cmp-card + .cmp-card {
  margin-top: 16px;
}

.cmp-card__name {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-navy);
}

.cmp-card__list dt {
  margin-top: 16px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-gray-light);
}

.cmp-card__list dd {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-navy);
}

.cmp-foot {
  margin-top: 28px;
}

.cmp-foot__meta,
.cmp-foot__note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-gray);
}

.cmp-foot__note {
  margin-top: 6px;
  color: var(--color-gray-light);
}

.cmp-sources {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--color-gray);
}

.cmp-sources summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-navy);
}

.cmp-sources__list {
  margin-top: 12px;
  padding-left: 0;
  list-style: none;
}

.cmp-sources__list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.7;
}

.cmp-sources__list strong {
  display: block;
  color: var(--color-navy);
}

.cmp-cta {
  margin-top: 28px;
}

/* --- FAQ --- */
.faq {
  padding: var(--section-padding);
  background: var(--color-bg);
}

.faq__list {
  max-width: 860px;
  margin-top: 40px;
}

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.faq-item + .faq-item {
  margin-top: 12px;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-gold-ink);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding: 0 24px 22px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--color-gray);
}

.visa-spec__note a {
  color: var(--color-champagne);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.visa-spec__note {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-gray-light);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .facts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .facts__grid {
    gap: 16px;
    margin-top: 32px;
  }

  .fact-card {
    padding: 22px;
  }

  .cmp-scroll {
    display: none;
  }

  .cmp-cards {
    display: block;
  }

  .faq-item summary {
    padding: 18px 20px;
    font-size: 16.5px;
  }

  .faq-item p {
    padding: 0 20px 20px;
  }
}

@media (max-width: 640px) {
  .facts__grid {
    grid-template-columns: 1fr;
  }

  .cmp-chip {
    padding: 9px 14px;
    font-size: 13px;
  }
}


/* ============================================
   SERVICES & PROGRAMME PAGES
   ============================================ */
.programmes {
  padding: 8px 0 var(--section-padding);
}


/* --- Programme cards --- */
.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.prog-card {
  position: relative;
  display: flex;
  min-height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-md);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.prog-card[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .prog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
}

.prog-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .prog-card:hover .prog-card__img {
    transform: scale(1.06);
  }
}

.prog-card__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(2, 31, 71, 0.95) 0%, rgba(2, 31, 71, 0.78) 45%, rgba(7, 51, 109, 0.18) 100%);
}

.prog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  padding: 28px;
  width: 100%;
}

.prog-card__title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
}

.prog-card__blurb {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  max-width: 44ch;
}

.prog-card__btn {
  margin-top: 6px;
}

/* --- Logo badge --- */
.prog-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  min-width: 96px;
  max-width: 220px;
  padding: 10px 18px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.prog-badge__img {
  max-height: 40px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Shown until the owner adds the official logo file */
.prog-badge__text {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-navy);
  white-space: nowrap;
}

/* --- Programme page hero --- */












/* --- Sections --- */
.prog-section {
  padding: 80px 0;
}

.prog-section--tint {
  background: var(--color-surface);
}

.prog-intro {
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-gray);
  max-width: 68ch;
}

/* Programme pages show four quick facts, so they sit in one row */
.prog-section .facts__grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 40px;
}

@media (max-width: 1024px) {
  .prog-section .facts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .prog-section .facts__grid {
    grid-template-columns: 1fr;
  }
}

.prog-note,
.prog-disclaimer {
  margin-top: 28px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-gray-light);
  max-width: 76ch;
}

.prog-disclaimer {
  padding: 16px 20px;
  border-left: 3px solid var(--color-gold);
  background: var(--color-white);
  color: var(--color-gray);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Eligibility checklist --- */
.check-list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 36px;
  max-width: 80ch;
}

.check-item {
  position: relative;
  padding: 16px 20px 16px 52px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-navy);
}

.check-item::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 19px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gradient-gold-btn);
  box-shadow: inset 0 0 0 4px var(--color-white), 0 0 0 1px var(--color-gold);
}

/* --- How to apply timeline --- */
.tl {
  list-style: none;
  margin-top: 36px;
  padding-left: 26px;
  border-left: 2px solid var(--color-border);
  display: grid;
  gap: 26px;
  max-width: 80ch;
}

.tl-step {
  position: relative;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: baseline;
}

.tl-step::before {
  content: '';
  position: absolute;
  left: -33px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gradient-navy);
  box-shadow: 0 0 0 4px var(--color-bg);
}

.tl-step__when {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-gold-ink);
}

.tl-step__what {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-navy);
}

/* --- What we do --- */
.dowork {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.dowork__item {
  padding: 26px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dowork__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 10px;
}

.dowork__text {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-gray);
}

/* --- Sticky CTA on phones --- */


/* --- Responsive --- */
@media (max-width: 1024px) {
  .prog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dowork {
    grid-template-columns: 1fr;
  }
  .tl-step {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 768px) {
  
  .prog-section {
    padding: 56px 0;
  }
  
  
  /* Keep the footer clear of the sticky bar */
  
}

@media (max-width: 640px) {
  .prog-grid {
    grid-template-columns: 1fr;
  }
  .prog-card {
    min-height: 380px;
  }
  .prog-card__body {
    padding: 22px;
  }
}

/* ============================================
   GPA CALCULATOR  (3 steps, built by gpa.js)
   ============================================ */
.gpa-page {
  padding: 24px 0 var(--section-padding);
}

/* --- Progress --- */
.gpa__progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.gpa__steps {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  flex-wrap: wrap;
}

.gpa__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-gray-light);
  transition: color 0.25s ease;
}

.gpa__step--clickable {
  cursor: pointer;
}

.gpa__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  font-size: 12.5px;
  font-weight: 700;
  background: var(--color-white);
  transition: all 0.3s ease;
}

.gpa__step--on {
  color: var(--color-navy);
}

.gpa__step--on .gpa__step-num {
  background: var(--gradient-navy);
  border-color: transparent;
  color: var(--color-white);
}

.gpa__step--done {
  color: var(--color-gold-ink);
}

.gpa__step--done .gpa__step-num {
  background: var(--gradient-gold-btn);
  border-color: transparent;
  color: var(--navy-deep);
}

.gpa__bar-track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: var(--color-surface);
  overflow: hidden;
}

.gpa__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--gradient-gold);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gpa__reset {
  justify-self: end;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .gpa__reset:hover {
    color: var(--color-navy);
  }
}

/* --- Card --- */
.gpa__card {
  position: relative;
  background: var(--gradient-navy);
  border-radius: var(--radius-xl);
  padding: 32px;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-lg);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gpa__card--enter {
  opacity: 0;
  transform: translateY(14px);
}

.gpa__step-body {
  min-width: 0;
}

.gpa__head {
  margin-bottom: 22px;
}

.gpa__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  color: var(--color-white);
}

.gpa__sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.66);
}

/* --- Fields --- */
.gpa__field {
  margin-bottom: 22px;
}

.gpa__label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 9px;
}

.gpa__hint {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.gpa__error {
  margin: 4px 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: #FFB4B4;
}

.gpa__num,
.gpa__text,
.gpa__select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 14.5px;
}

.gpa__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
                    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.gpa__select option {
  color: var(--color-navy);
  background: var(--color-white);
}

.gpa__num::placeholder,
.gpa__text::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.gpa__num:focus,
.gpa__text:focus,
.gpa__select:focus {
  outline: none;
  border-color: var(--color-champagne);
  background: rgba(255, 255, 255, 0.13);
}

.gpa__num--wide {
  max-width: 220px;
}

/* --- Mode + chips --- */
.gpa__chips,
.gpa__tests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gpa__tests {
  flex-direction: column;
  gap: 10px;
}

.gpa__chip {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .gpa__chip:hover {
    border-color: var(--color-champagne);
  }
}

.gpa__chip--on {
  background: var(--gradient-gold-btn);
  border-color: transparent;
  color: var(--navy-deep);
  font-weight: 600;
}

/* --- Language tests --- */
.gpa__test {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gpa__test-toggle {
  flex: 0 0 auto;
  min-width: 190px;
  text-align: left;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.22s ease;
}

.gpa__test--on .gpa__test-toggle {
  background: rgba(232, 187, 125, 0.16);
  border-color: var(--color-champagne);
  color: var(--color-white);
  font-weight: 600;
}

.gpa__score {
  width: 110px;
  flex: 0 0 auto;
}

.gpa__test-range {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Navigation --- */
.gpa__next {
  margin-top: 4px;
}

.gpa__nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.gpa__back {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

@media (hover: hover) and (pointer: fine) {
  .gpa__back:hover {
    color: var(--color-champagne);
  }
}

/* --- Results --- */
.gpa__result-head {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.gpa__gauge {
  position: relative;
  width: 136px;
  height: 136px;
  flex-shrink: 0;
}

.gpa__gauge--none {
  display: flex;
  align-items: center;
  width: auto;
  max-width: 260px;
  height: auto;
}

.gpa__gauge-note {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.gpa__ring {
  width: 100%;
  height: 100%;
}

.gpa__ring-arc {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.gpa__gauge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gpa__gauge-num {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}

.gpa__gauge-of {
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.5);
}

.gpa__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  flex: 1 1 320px;
}

.gpa__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gpa__stat-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-champagne);
}

.gpa__stat-value {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-white);
}

.gpa__stat-note {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

.gpa__estimate {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}

.gpa__estimate strong {
  color: var(--color-champagne);
}

.gpa__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 16px;
}

.gpa__ghost {
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .gpa__ghost:hover {
    border-color: var(--color-champagne);
    background: rgba(232, 187, 125, 0.12);
  }
}

.gpa__flash {
  font-size: 12.5px;
  color: var(--color-champagne);
}

/* --- Ambitious / Realistic / Safe --- */
.gpa__lists {
  margin-top: 48px;
}

.gpa__lists-heading {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  color: var(--color-navy);
}

.gpa__lists-note,
.gpa__lists-missing {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-gray);
  max-width: 78ch;
}

.gpa__lists-missing {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 3px solid var(--color-gold);
  background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.gpa__groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
}

.gpa__group {
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
}

.gpa__group--realistic { border-top-color: var(--navy-light); }
.gpa__group--safe { border-top-color: #4C9A7A; }

.gpa__group-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
}

.gpa__group-why {
  margin: 8px 0 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-gray);
}

.gpa__group-empty {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-gray-light);
}

.gpa__group-list {
  list-style: none;
  display: grid;
  gap: 10px;
}

.gpa__uni {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: background 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .gpa__uni:hover {
    background: rgba(2, 31, 71, 0.06);
  }
}

.gpa__uni-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
}

.gpa__uni-meta {
  font-size: 11.5px;
  color: var(--color-gray-light);
}

.gpa__uni-note {
  display: block;
  margin-top: 4px;
  padding-left: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-gold-ink);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .gpa__groups {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .gpa__card {
    padding: 22px 18px;
  }
  .gpa__progress {
    grid-template-columns: 1fr;
  }
  .gpa__steps {
    gap: 14px;
    justify-content: space-between;
    width: 100%;
  }
  .gpa__step-label {
    display: none;
  }
  .gpa__step--on .gpa__step-label {
    display: inline;
  }
  .gpa__reset {
    justify-self: start;
  }
  .gpa__stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .gpa__test-toggle {
    min-width: 0;
    width: 100%;
  }
  .gpa__score {
    width: 100%;
  }
}

/* ============================================
   PROGRAMME MODAL  (built by services.js)
   ============================================ */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 31, 71, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.pmodal--open {
  opacity: 1;
}

.pmodal[hidden] {
  display: none;
}

.pmodal__panel {
  position: relative;
  width: min(880px, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 80px rgba(2, 31, 71, 0.35);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.pmodal--open .pmodal__panel {
  transform: none;
}

.pmodal__panel:focus {
  outline: none;
}

.pmodal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-navy);
  font-size: 26px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .pmodal__close:hover {
    background: var(--color-white);
    transform: rotate(90deg);
  }
}

/* --- Head --- */
.pmodal__head {
  position: relative;
  min-height: 230px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.pmodal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.pmodal__head-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(2, 31, 71, 0.95) 0%, rgba(2, 31, 71, 0.74) 50%, rgba(7, 51, 109, 0.3) 100%);
}

.pmodal__head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 32px;
  width: 100%;
}

.pmodal__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-white);
}

.pmodal__line {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
}

/* --- Body --- */
.pmodal__main {
  padding: 30px 32px 34px;
}

.pmodal__intro {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--color-gray);
  margin-bottom: 8px;
}

.pmodal__section {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--color-border);
}

.pmodal__h {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.pmodal__facts {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 10px 20px;
}

.pmodal__facts dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-gold-ink);
  padding-top: 3px;
}

.pmodal__facts dd {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-navy);
}

.check-list--modal {
  margin-top: 0;
}

.tl--modal {
  margin-top: 0;
}

.pmodal__work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pmodal__work-item {
  padding: 18px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.pmodal__work-title {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.pmodal__work-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-gray);
}

.pmodal__cta {
  margin-top: 26px;
}

@media (max-width: 768px) {
  .pmodal {
    padding: 0;
  }
  .pmodal__panel {
    width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }
  .pmodal__head {
    border-radius: 0;
    min-height: 190px;
  }
  .pmodal__head-text,
  .pmodal__main {
    padding-left: 20px;
    padding-right: 20px;
  }
  .pmodal__facts {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .pmodal__facts dd {
    margin-bottom: 12px;
  }
  .pmodal__work {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   RESPONSIVE FOUNDATION
   ============================================ */

/* --- Long words (Uzbek and Russian compounds) must wrap, never widen the page.
   `anywhere` also lowers the minimum width of flex and grid items, which is
   what stops a long word forcing a column wider than the screen. --- */
h1, h2, h3, h4, h5, h6, p, li, dt, dd, summary, figcaption, label, .btn {
  overflow-wrap: anywhere;
}

/* Media never outgrows its column */
img, svg, video, canvas {
  max-width: 100%;
}

/* --- Safe areas: notches, rounded corners and the iOS home indicator --- */
.navbar {
  padding-top: env(safe-area-inset-top);
}

.footer {
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

/* --- Dynamic viewport height: `100vh` is taller than the visible area on a
   phone while the browser bar is showing. The `vh` line is the fallback for
   browsers without `dvh`. --- */
.pmodal__panel {
  max-height: min(880px, calc(92vh / var(--zoom)));
  max-height: min(880px, calc(92dvh / var(--zoom)));
}

/* --- Focus: every interactive element shows where the keyboard (or a TV
   remote's D-pad) is. Navy on light surfaces, champagne on dark ones, both
   above 3:1. --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--navy-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.footer a:focus-visible,
.footer button:focus-visible,
.gpa__card :focus-visible,
.expertise-hero :focus-visible,
.closing-cta :focus-visible,
.stats-bar :focus-visible,
.approach :focus-visible,
.prog-card :focus-visible,
.pmodal__head :focus-visible,
.mobile-nav .btn:focus-visible,
.btn--consult:focus-visible,
.btn--consult--dark:focus-visible {
  outline-color: var(--color-champagne);
}

/* --- Reduced motion: no smooth scrolling, no reveal slides, no long
   transitions. Users who asked for less motion get none of the large ones. --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Wide screens and TVs -------------------------------------------------
   Between a laptop and a big monitor the container simply gets a little wider.
   From 1920px the whole page is scaled up (zoom), so text and controls stay a
   comfortable size at TV distance while the content stays centred at about
   1300-1600 CSS pixels instead of stretching edge to edge. Browsers without
   `zoom` just show the unscaled page, which is still centred. --- */
@media (min-width: 1500px) and (max-width: 1919px) {
  :root {
    --container-max: 1440px;
  }
}

@media (min-width: 1920px) {
  :root {
    --zoom: 1.25;
  }

  html {
    zoom: 1.25;
  }
}

@media (min-width: 2560px) {
  :root {
    --zoom: 1.6;
  }

  html {
    zoom: 1.6;
  }
}

@media (min-width: 3840px) {
  :root {
    --zoom: 2.4;
  }

  html {
    zoom: 2.4;
  }
}


/* ============================================
   HEADER — TOUCH SIZES AND NARROW PHONES
   ============================================ */

/* Touch: every part of the language switcher is a 44px target */
@media (pointer: coarse), (max-width: 1024px) {
  .lang-switch__btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }

  .lang-switch {
    padding: 2px;
  }
}

/* Below 400px the switcher moves from the header into the menu */
@media (max-width: 400px) {
  .navbar .lang-switch {
    display: none;
  }

  .mobile-nav__lang {
    display: block;
  }

  .navbar__actions {
    gap: 0;
  }
}

.lang-switch--menu .lang-switch__btn {
  min-width: 56px;
  min-height: 48px;
  font-size: 14px;
}

/* ============================================
   TOUCH TARGETS AND FORM CONTROLS
   ============================================ */

/* Text fields are at least 16px everywhere: iOS Safari zooms the page when a
   field smaller than that gets focus, and never zooms back out on its own. */
.gpa__num,
.gpa__text,
.gpa__select,
.booking input[type="text"],
.booking input[type="tel"],
.booking select {
  font-size: 16px;
}

/* On touch screens (and any narrow window) every control is at least 44px in
   both directions, with room between neighbours. Inline links inside a sentence
   are exempt, as in WCAG 2.5.8. */
@media (pointer: coarse), (max-width: 1024px) {
  button,
  .btn,
  select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 44px;
  }

  .btn {
    min-height: 48px;
  }

  .gpa__select,
  .gpa__num,
  .gpa__text,
  .booking input[type="text"],
  .booking input[type="tel"],
  .booking select {
    min-height: 48px;
  }

  .breadcrumb__link,
  .section-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  .breadcrumb__nav {
    align-items: center;
    flex-wrap: wrap;
  }

  /* footer links and the contact details */
  .footer__col-list {
    gap: 0;
  }

  .footer__link,
  .footer__contact-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;          /* a short word such as "Aloqa" is still a full-size target */
  }

  .footer__contact-list {
    gap: 4px;
  }

  /* chips, pills, filters and the calculator's buttons */
  .gpa__chip,
  .cmp-chip,
  .pill,
  .gpa__test-toggle,
  .gpa__reset,
  .gpa__back,
  .gpa__ghost,
  .gpa__step--clickable {
    min-height: 44px;
  }

  .gpa__reset,
  .gpa__back {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
  }

  .gpa__chips,
  .cmp-chips {
    gap: 8px;
  }

  /* the sources disclosure under the comparison table */
  .cmp-sources summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* the consent checkbox: the whole line is the target, not the 18px box */
  .booking .check {
    min-height: 44px;
    align-items: center;
  }

  .booking__close,
  .pmodal__close {
    width: 44px;
    height: 44px;
  }
}

/* On a phone the visa panel's rows read better stacked: label above value */
@media (max-width: 480px) {
  .visa-spec {
    padding: 28px 20px;
  }

  .visa-spec__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .visa-spec__value {
    text-align: left;
  }
}

/* ============================================
   MODALS ON PHONES: FULL-HEIGHT SHEETS
   ============================================ */

/* --- Booking form ---
   On a phone the panel is a fixed-height column: the mascot strip on top, then
   the form, which scrolls inside it. So the close button never scrolls away and
   the submit button is always in view. --vvh is the visible height as reported by
   the visual viewport, which shrinks when the on-screen keyboard opens; that
   keeps the last field and the button above the keyboard. */
@media (max-width: 768px) {
  .booking {
    padding: 0;
    overflow: hidden;
    align-items: stretch;
  }

  .booking__panel {
    display: flex;
    flex-direction: column;
    max-width: none;
    margin: 0;
    border-radius: 0;
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    height: var(--vvh, 100dvh);
  }

  .booking__mascot {
    flex: 0 0 auto;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .booking__close {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }

  .booking__main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* The submit button stays at the bottom of the visible form. The wide white
     shadow hides the fields scrolling underneath it. */
  .booking__submit {
    position: sticky;
    bottom: 0;
    z-index: 1;
    box-shadow: 0 0 0 14px var(--color-bg);
  }
}

/* A phone held sideways has very little height: the mascot goes, the form keeps
   all of it. */
@media (max-height: 520px) and (orientation: landscape) {
  .booking__mascot {
    display: none;
  }

  .booking__main {
    padding-top: 16px;
  }

  .booking__title {
    padding-right: 56px;          /* clear of the close button */
  }
}

/* --- Programme popups ---
   The panel scrolls, so the close button is sticky: it stays at the top-right of
   the visible area instead of scrolling away with the photo. */
.pmodal__close {
  position: sticky;
  top: max(12px, env(safe-area-inset-top));
  z-index: 3;
  display: block;
  margin: 12px 12px -56px auto;
}

@media (max-width: 768px) {
  .pmodal__panel {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .pmodal__head-text {
    padding-top: max(28px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}


/* ============================================
   COMPARISON TABLE: SCROLL CUE AND STICKY COLUMN
   ============================================ */
.cmp-tablewrap {
  position: relative;
}

/* The row labels stay put while the universities scroll past them, so you never
   lose which row you are reading. The backgrounds are opaque so nothing shows
   through. */
.cmp-table tbody th,
.cmp-table__corner {
  position: sticky;
  left: 0;
  z-index: 2;
}

.cmp-table tbody th {
  box-shadow: 1px 0 0 var(--color-border);
}

/* A soft shadow on the right edge says "there is more this way"; it goes away
   at the end of the scroll. */
.cmp-tablewrap::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 34px;
  width: 36px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: linear-gradient(to left, rgba(2, 31, 71, 0.16), rgba(2, 31, 71, 0));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cmp-tablewrap.is-scrollable:not(.at-end)::after {
  opacity: 1;
}

.cmp-hint {
  display: none;
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray);
}

.cmp-tablewrap.is-scrollable .cmp-hint {
  display: block;
}

.cmp-scroll:focus-visible {
  outline: 3px solid var(--navy-light);
  outline-offset: 2px;
}


/* ============================================
   CALCULATOR: RESERVE ITS SPACE (no layout shift)
   ============================================ */
/* The calculator is built by JavaScript after the page loads. Until then its
   mount point is empty, which used to let the sections below it jump down by
   the calculator's full height when it appeared. The empty mount reserves about
   that height and shows a faint card, and stops reserving once it has content. */
[data-gpa]:empty {
  min-height: 820px;
  border-radius: var(--radius-xl);
  background: var(--gradient-navy);
  opacity: 0.06;
}

@media (min-width: 401px) {
  [data-gpa]:empty {
    min-height: 700px;
  }
}

@media (min-width: 641px) {
  [data-gpa]:empty {
    min-height: 670px;
  }
}

@media (min-width: 1025px) {
  [data-gpa]:empty {
    min-height: 640px;
  }
}

/* ============================================
   PHONES: BODY COPY IS AT LEAST 16px
   ============================================ */
/* Paragraph-style text is 16px or larger on a phone (the tablet and desktop
   sizes stay as designed). Fine print — the copyright line, source lines, small
   notes and input hints — is not body copy and stays at 13px and above. */
@media (max-width: 640px) {
  .expertise-panel__item,
  .visa-step__text,
  .visa-spec__value,
  .dest-card__desc,
  .prog-card__blurb,
  .fact-card__note,
  .feature-item__desc,
  .step__desc,
  .approach-card__body,
  .dowork__text,
  .gpa__sub,
  .gpa-home__text,
  .cmp-picker__label,
  .cmp-foot__note,
  .prog-disclaimer,
  .footer__blurb,
  .footer__contact-list li,
  .footer__contact-list a,
  .footer__contact-empty,
  .section-intro,
  .inst-database__text,
  .country-overview__text,
  .page-header__text,
  .faq-item p,
  .pmodal__facts dd,
  .pmodal__work-text,
  .check-item,
  .tl-step__what,
  .cmp-card__list dd,
  dd {
    font-size: 16px;
  }

  /* fine print stays small but legible */
  .footer__copyright,
  .footer__note,
  .source-line,
  .visa-spec__note,
  .cmp-todo,
  .gpa__hint,
  .gpa__stat-note,
  .gpa__estimate {
    font-size: 13.5px;
  }
}

/* Taps on controls act at once: no double-tap-to-zoom wait on older mobile
   browsers, and a tap highlight in the brand colour instead of grey. */
a,
button,
summary,
select,
input,
label,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(2, 31, 71, 0.12);
}


/* A phone held sideways is only about 375px tall: an 80px header would take a
   fifth of the screen, so it is slimmer there. Everything that positions itself
   below the header (anchor offsets, the mobile menu) reads --header-h. */
@media (max-height: 480px) and (orientation: landscape) {
  :root {
    --header-h: 56px;
  }
}


/* Content in the first screen of a page is visible from the first paint. The
   scroll-reveal fade waits for JavaScript to run, which on a slow phone pushed
   the largest element on the page (the hero image, or a page's intro text) about
   2.5 seconds later than it needed to be. Sections further down still fade in. */
.hero .reveal,
.page-header .reveal,
.country-hero .reveal,
.expertise-hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}


/* The header is built by site.js, which runs after the first paint. This
   placeholder is exactly as tall as the finished header (its 80px row, the 1px
   border and any notch inset), so when the header replaces it nothing below moves.
   Without it the whole page jumped down 81px, the largest layout shift on the site. */
.site-header-slot {
  min-height: calc(var(--header-h) + 1px + env(safe-area-inset-top));
}



/* --- No flash of untranslated text ---
   A tiny inline script in each page's <head> adds .i18n-pending unless the visitor
   chose English; i18n.js removes it as soon as the text has been translated. Until
   then the page is invisible, so the English source text never shows and the layout
   never reflows from English to Uzbek or Russian. If the script fails for any reason
   the animation below shows the page anyway after 2 seconds. */
html.i18n-pending body {
  visibility: hidden;
  animation: sh-unhide 0.01s 2s forwards;
}

@keyframes sh-unhide {
  to {
    visibility: visible;
  }
}

/* ============================================
   SERVICES GRID: RESERVE ITS SPACE (no layout shift)
   ============================================ */
/* The six cards are built by services.js once data/programmes.json has loaded.
   Until then the grid is empty; it reserves the height the cards will take (six
   cards at 460px in two rows of three, three rows of two on a tablet, one column of
   six on a phone) so the footer below does not jump down when they appear. */
.prog-grid:empty {
  min-height: 944px;
}

@media (max-width: 1024px) {
  .prog-grid:empty {
    min-height: 1428px;          /* 3 rows of 2 */
  }
}

@media (max-width: 640px) {
  .prog-grid:empty {
    min-height: 2400px;          /* 6 cards of 380px and the gaps */
  }
}