/* ═══════════════════════════════════════════════════════════════
   MyStudy — Shared Design System  v4.0
   ─────────────────────────────────────────────────────────────
   Import on every page BEFORE page-specific <style> blocks:
     <link rel="stylesheet" href="shared.css" />
═══════════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter keeps the scrollbar's space reserved at all times, so
   toggling body.nav-open-lock (overflow:hidden, below) when the mobile menu
   opens never changes the page's available width — without it, the
   scrollbar disappearing shifts every centred element (navbar, hero photo)
   sideways by half its width. */
/* text-size-adjust stops iOS Safari from silently inflating body text it judges
   too small for the layout. Without it the phone renders type larger than the
   sizes set here, which narrows every table column on the real device and
   forces word breaks that never reproduce on desktop. 100% (not none) keeps
   pinch-zoom working. */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  /* Brand Colours */
  --orange:         #E8521C;
  --orange-light:   #F47B4A;
  --orange-pale:    #FDF0EA;
  --yellow:         #FFB800;
  --yellow-light:   #FFD466;
  --yellow-pale:    #FFFBEE;
  --navy:           #1B2B5E;
  --navy-mid:       #2F4080;
  --navy-deep:      #0C1B3E;
  --navy-darkest:   #060F24;
  --slate:          #6B7A99;
  --light:          #F5F6FA;
  --white:          #FFFFFF;
  --text-dark:      #111827;
  --text-body:      #4A5068;
  --border:         #E8EAF0;
  --green:          #16A34A;
  --green-pale:     #D1FAE5;

  /* Pastels (kept for compatibility) */
  --rose:           #F2D9DC;
  --rose-light:     #FEF7F8;
  --sage:           #D9F2D8;
  --sage-light:     #F4FBF4;

  /* Typography — Manrope replaces Poppins */
  --font-display:   'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-ui:        'Manrope', -apple-system, sans-serif;
  --font-body:      'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-24: 96px;

  /* Border radii — sharper system */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-3xl: 28px; --r-pill: 100px;

  /* Elevation shadows (navy-tint) */
  --shadow-xs: 0 1px 4px rgba(27,43,94,.06);
  --shadow-sm: 0 2px 12px rgba(27,43,94,.08);
  --shadow-md: 0 4px 24px rgba(27,43,94,.12);
  --shadow-lg: 0 8px 40px rgba(27,43,94,.16);
  --shadow-xl: 0 16px 56px rgba(27,43,94,.2);

  /* Transitions */
  --ease:     cubic-bezier(.25,.46,.45,.94);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--text-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
a, button, [role="button"], summary, input, select, textarea, label {
  -webkit-tap-highlight-color: rgba(232, 82, 28, 0.12);
}
@media (pointer: coarse) {
  a:active, button:active, [role="button"]:active, summary:active {
    opacity: 0.75;
    transition: opacity 0.08s ease-out;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Touch: card press-in feedback
   pointer: coarse = touch device. Gives the physical "press"
   sensation that :hover can't provide on touch.
   - touch-action: manipulation removes the 300ms tap delay.
   - :active transition snaps in fast (60ms) so the response feels
     immediate; the card's own base transition handles spring-back.
═══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {

  /* Remove 300ms tap delay on interactive cards and pills */
  .hero-dest-tile,
  .dest-mag-card,
  .testi-card,
  .country-card,
  .career-card,
  .timeline-card,
  .filter-pill,
  .dest-pill,
  .gc-cat-head,
  .gc-course-row,
  .course-pill-link,
  .course-pill-merged,
  .card-whatsapp-full,
  .pss-card,
  .prog-card,
  .result-card,
  .adv-card {
    touch-action: manipulation;
  }

  /* Press-in scale: snap to compressed state on tap, spring back on release */
  .hero-dest-tile:active,
  .dest-mag-card:active,
  .testi-card:active,
  .country-card:active,
  .career-card:active,
  .timeline-card:active,
  .gc-cat-head:active,
  .gc-course-row:active,
  .course-pill-link:active,
  .course-pill-merged:active,
  .card-whatsapp-full:active,
  .prog-card:active,
  .result-card:active,
  .adv-card:active {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(27, 43, 94, 0.06) !important;
    opacity: 0.88;
    transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, opacity 0.06s ease-out !important;
  }

  /* Pills: slightly more compression since they are smaller targets */
  .filter-pill:active,
  .dest-pill:active {
    transform: scale(0.93) !important;
    opacity: 0.78;
    transition: transform 0.06s ease-out, opacity 0.06s ease-out !important;
  }

  /* pss-card is a draggable pan/zoom canvas — skip scale to avoid
     fighting the gesture; opacity-only is enough to confirm the tap */
  .pss-card:active {
    opacity: 0.82;
    transition: opacity 0.06s ease-out;
  }
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ── Layout ───────────────────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Section Label (editorial line + text) ─────────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 14px;
}
.section-label::before {
  content: ''; display: block; width: 24px; height: 2px;
  background: currentColor; flex-shrink: 0; border-radius: 1px;
}
.section-label.navy { color: var(--navy); }
.section-label.white { color: white; }
.section-label.white::before { background: white; }
.section-label.yellow { color: var(--yellow); }
.section-label.yellow::before { background: var(--yellow); }

/* ── Section Pills (kept for compatibility) ────────────────── */
.section-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--orange-pale); color: var(--orange);
  border-radius: var(--r-sm); padding: 5px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-family: var(--font-ui);
}
.section-pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.section-pill.navy-pill   { background: #EEF1F9; color: var(--navy); }
.section-pill.green-pill  { background: var(--green-pale); color: var(--green); }
.section-pill.yellow-pill {
  background: var(--yellow-pale); color: #9A6800;
  border: 1px solid rgba(255,184,0,.25);
}
.section-pill.glass {
  background: rgba(255,255,255,.15); color: white;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-sm);
}
.section-pill.glass::before { background: white; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  cursor: pointer; border: none; text-decoration: none; line-height: 1;
  letter-spacing: .01em;
  transition:
    transform .22s var(--ease-out),
    box-shadow .22s var(--ease-out),
    background .15s,
    border-color .15s,
    color .15s;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.btn-primary {
  background: var(--orange); color: white;
  box-shadow: 0 4px 16px rgba(232,82,28,.28), 0 1px 4px rgba(232,82,28,.18);
}
.btn-primary:hover {
  background: var(--orange-light);
  box-shadow: 0 8px 32px rgba(232,82,28,.42), 0 2px 8px rgba(232,82,28,.28);
}

.btn-secondary {
  background: var(--navy); color: white;
  box-shadow: 0 4px 14px rgba(27,43,94,.2);
}
.btn-secondary:hover {
  background: var(--navy-mid);
  box-shadow: 0 8px 28px rgba(27,43,94,.32);
}

.btn-accent {
  background: var(--yellow); color: var(--navy);
  box-shadow: 0 4px 16px rgba(255,184,0,.3);
}
.btn-accent:hover { box-shadow: 0 8px 28px rgba(255,184,0,.45); }

.btn-outline {
  background: transparent; color: var(--orange);
  border: 2px solid var(--orange);
}
.btn-outline:hover { background: var(--orange-pale); }

.btn-white {
  background: white; color: var(--orange);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.btn-white:hover { box-shadow: 0 8px 32px rgba(0,0,0,.2); }

.btn-ghost-white {
  background: transparent; color: white;
  border: 1.5px solid rgba(255,255,255,.35);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.65);
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  /* No backdrop-filter here on purpose. This bar is fixed, full-width and
     permanently on screen, so a backdrop-filter made the browser re-blur and
     re-saturate the strip behind it on every single scroll frame, on every
     page. The fill is 96% opaque, so barely 4% of that result was ever
     visible — a full-width blur per frame for an effect you cannot see.
     The 4% translucency is kept; only the blur is gone. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s var(--ease), background .35s var(--ease), border-color .35s, transform .35s cubic-bezier(.4,0,.2,1);
}
.navbar.scrolled {
  box-shadow: 0 2px 24px rgba(27,43,94,.08);
  background: rgba(255,255,255,.99);
}

/* Transparent navbar for dark hero pages */
.navbar.navbar-over-dark {
  background: transparent;
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: none;
}
.navbar.navbar-over-dark .nav-links a { color: rgba(255,255,255,.8); }
.navbar.navbar-over-dark .nav-links a:hover { color: white; background: rgba(255,255,255,.1); }
.navbar.navbar-over-dark .nav-links a.active { color: white; background: rgba(255,255,255,.12); font-weight: 600; }
.navbar.navbar-over-dark .nav-dropdown-btn { color: rgba(255,255,255,.8); }
.navbar.navbar-over-dark .nav-dropdown-btn:hover,
.navbar.navbar-over-dark .nav-dropdown.open > .nav-dropdown-btn { color: white; background: rgba(255,255,255,.1); }
.navbar.navbar-over-dark .nav-logo img { filter: brightness(0) invert(1); transition: filter .3s; }
.navbar.navbar-over-dark .hamburger span { background: white; }

.navbar.navbar-over-dark.scrolled {
  background: rgba(255,255,255,.98);
  border-bottom-color: var(--border);
}
.navbar.navbar-over-dark.scrolled .nav-links a { color: var(--text-body); }
.navbar.navbar-over-dark.scrolled .nav-links a:hover { color: var(--orange); background: var(--orange-pale); }
.navbar.navbar-over-dark.scrolled .nav-links a.active { color: var(--orange); background: var(--orange-pale); font-weight: 600; }
.navbar.navbar-over-dark.scrolled .nav-dropdown-btn { color: var(--text-body); }
.navbar.navbar-over-dark.scrolled .nav-dropdown-btn:hover { color: var(--orange); background: var(--orange-pale); }
.navbar.navbar-over-dark.scrolled .nav-logo img { filter: none; }
.navbar.navbar-over-dark.scrolled .hamburger span { background: var(--navy); }

/* ── Language switcher — white on dark hero, restored when scrolled ── */
.navbar.navbar-over-dark .ms-lang-desk .ms-lang-btn { color: rgba(255,255,255,.8); }
.navbar.navbar-over-dark .ms-lang-desk .ms-lang-btn:hover { color: white; background: rgba(255,255,255,.1); }
.navbar.navbar-over-dark .ms-lang-desk .ms-lang-btn.ms-lang-active { color: white; background: rgba(255,255,255,.15); }
.navbar.navbar-over-dark .ms-lang-desk .ms-lang-sep { color: rgba(255,255,255,.25); }
.navbar.navbar-over-dark.scrolled .ms-lang-desk .ms-lang-btn { color: var(--text-body); }
.navbar.navbar-over-dark.scrolled .ms-lang-desk .ms-lang-btn:hover { color: var(--orange); background: var(--orange-pale); }
.navbar.navbar-over-dark.scrolled .ms-lang-desk .ms-lang-btn.ms-lang-active { color: var(--navy); background: rgba(27,43,94,.07); }
.navbar.navbar-over-dark.scrolled .ms-lang-desk .ms-lang-sep { color: var(--border); }

/* ── Book Consultation (btn-secondary) — ghost on dark hero, navy when scrolled ── */
.navbar.navbar-over-dark .nav-cta .btn-secondary {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255,255,255,.45);
  box-shadow: none;
}
.navbar.navbar-over-dark .nav-cta .btn-secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.8);
  box-shadow: none;
}
.navbar.navbar-over-dark.scrolled .nav-cta .btn-secondary {
  background: var(--navy);
  color: white;
  border: none;
  box-shadow: 0 4px 14px rgba(27,43,94,.2);
}
.navbar.navbar-over-dark.scrolled .nav-cta .btn-secondary:hover {
  background: var(--navy-mid);
  box-shadow: 0 8px 28px rgba(27,43,94,.32);
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 8px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
  transition: transform .22s var(--ease-out);
}
.nav-logo:hover { transform: scale(1.04); }
.nav-logo img { height: 36px; width: auto; }
.nav-links {
  display: flex; gap: 2px; list-style: none;
  flex-wrap: nowrap; align-items: center;
}
.nav-links a {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--text-body); text-decoration: none;
  padding: 7px 11px; border-radius: var(--r-md);
  transition: color .15s, background .15s; white-space: nowrap;
  display: inline-flex; align-items: center; line-height: 1;
}
.nav-links a:hover { color: var(--orange); background: var(--orange-pale); }
.nav-links a.active { color: var(--orange); font-weight: 600; background: var(--orange-pale); }
.nav-cta { flex-shrink: 0; display: flex; gap: 8px; }
.nav-cta .btn { padding: 10px 20px; font-size: 13px; }
.nav-mobile-cta { display: none; list-style: none; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 10px; background: none; border: none; flex-shrink: 0;
  min-width: 44px; min-height: 44px; justify-content: center; align-items: center;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--text-body); background: none; border: none; cursor: pointer;
  padding: 7px 11px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s, background .15s; white-space: nowrap;
  line-height: 1; -webkit-appearance: none; appearance: none;
}
.nav-dropdown-btn:hover,
.nav-dropdown.open > .nav-dropdown-btn { color: var(--orange); background: var(--orange-pale); }
.nav-dropdown-btn.active { color: var(--orange); font-weight: 600; background: var(--orange-pale); }
.nav-dropdown-chevron {
  width: 10px; height: 10px; flex-shrink: 0; transition: transform .2s var(--ease);
}
.nav-dropdown.open .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none; position: absolute;
  top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  list-style: none; min-width: 220px; padding: 6px; z-index: 1001;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  color: var(--text-body); text-decoration: none;
  transition: color .15s, background .15s; white-space: nowrap;
}
.nav-dropdown-menu a:hover { color: var(--orange); background: var(--orange-pale); }
.nav-dropdown-menu a.active { color: var(--orange); font-weight: 600; background: var(--orange-pale); }
.nav-dropdown-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate);
  padding: 8px 14px 3px; font-family: var(--font-ui);
}
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 4px 6px; }

@media (max-width: 768px) {
  .nav-links.nav-open .nav-dropdown { flex-direction: column; align-items: stretch; }
  .nav-links.nav-open .nav-dropdown-menu {
    position: static; transform: none; box-shadow: none; border: none;
    background: transparent; border-radius: 0;
    margin: 0 0 4px; padding: 2px 0 4px 12px;
    border-left: 2px solid var(--border);
  }
  .nav-links.nav-open .nav-dropdown-menu a { font-size: 14px; white-space: normal; padding: 9px 12px; }
  .nav-links.nav-open .nav-dropdown-btn {
    width: 100%; justify-content: space-between; border-radius: var(--r-lg);
    font-size: 15px; padding: 13px 16px; min-height: 44px;
  }
}

/* ── Floating WhatsApp ──────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  z-index: 9000;
  display: flex; align-items: center; gap: 10px;
  background: #25D366; color: white;
  border-radius: var(--r-pill); padding: 14px 22px 14px 18px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.32);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease);
  animation: wa-ring-pulse 2.8s var(--ease-out) 1.5s infinite;
}
.wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(37,211,102,.48);
  animation: none;
}
.wa-float:active { transform: translateY(0); }
@keyframes wa-ring-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.32), 0 0 0 0 rgba(37,211,102,.38); }
  60%       { box-shadow: 0 4px 20px rgba(37,211,102,.32), 0 0 0 16px rgba(37,211,102,0); }
}
.wa-float svg   { width: 20px; height: 20px; flex-shrink: 0; }
.wa-float-label { white-space: nowrap; }

/* ── Scroll-Reveal v4 ─────────────────────────────────── */
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.reveal.visible { opacity: 1 !important; transform: translate(0,0) scale(1) !important; filter: blur(0) !important; }

.js-reveal-ready .reveal-up    { transform: translateY(36px); }
.js-reveal-ready .reveal-left  { transform: translateX(-28px); opacity: 0; transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.js-reveal-ready .reveal-right { transform: translateX(28px);  opacity: 0; transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.js-reveal-ready .reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }

/* Line reveal: content slides up through an overflow-hidden wrapper */
.reveal-line-wrap { overflow: hidden; }
.js-reveal-ready .reveal-line {
  transform: translateY(110%);
  transition: transform .85s var(--ease-out);
}
.reveal-line.visible { transform: translateY(0) !important; opacity: 1 !important; }

.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .40s; }
.reveal-d6 { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal,
  .js-reveal-ready .reveal-up,
  .js-reveal-ready .reveal-left,
  .js-reveal-ready .reveal-right,
  .js-reveal-ready .reveal-scale,
  .js-reveal-ready .reveal-line {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .reveal-d1,.reveal-d2,.reveal-d3,.reveal-d4,.reveal-d5,.reveal-d6 { transition-delay: 0s; }
}

/* ── Shared Keyframes ─────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .3; transform: scale(.82); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── CTA Banner ───────────────────────────────────────── */
.cta-banner {
  padding: 96px 0;
  background: linear-gradient(135deg, #C03A0E 0%, var(--orange) 50%, #D94A18 100%);
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.cta-banner::after {
  content: ''; position: absolute; bottom: -80px; left: 20%;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,184,0,.08); pointer-events: none;
}
.cta-inner             { position: relative; z-index: 1; text-align: center; }
.cta-inner h2          { font-family: var(--font-display); font-size: clamp(32px,4.5vw,52px); font-weight: 800; color: white; letter-spacing: -.025em; margin-bottom: 16px; line-height: 1.1; }
.cta-inner h2 span     { color: var(--yellow); }
.cta-inner p           { font-size: 17px; color: rgba(255,255,255,.82); margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.68; }
.cta-actions           { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-actions .btn      { font-size: 15px; padding: 16px 38px; }
.cta-hashtag           { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.65); margin-top: 32px; }
.cta-hashtag strong    { color: var(--yellow); }

/* ── Footer ──────────────────────────────────────────── */
footer { background: var(--navy-deep); padding: 64px 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 56px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; text-decoration: none; }
.footer-logo img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.footer-desc { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.72; margin-bottom: 24px; max-width: 280px; }
.footer-socials { display: flex; gap: 10px; }
.social-btn {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65); text-decoration: none;
  transition: background .15s, transform .22s var(--ease-out), color .15s;
}
.social-btn:hover { background: var(--orange); transform: translateY(-2px) rotate(6deg); color: white; }
.social-btn svg { width: 16px; height: 16px; }
.footer-col-title {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.9); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 18px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 14px; color: rgba(255,255,255,.75); text-decoration: none;
  transition: color .15s, padding-left .2s var(--ease-out);
}
.footer-links a:hover { color: var(--orange-light); padding-left: 4px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.footer-contact-icon { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; color: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
.footer-contact-text { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.5; }
.footer-contact-text[href] { color: rgba(255,255,255,.75); cursor: pointer; transition: color .2s; text-decoration: none; }
.footer-contact-text[href]:hover { color: var(--orange-light); text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-copy    { font-size: 12px; color: rgba(255,255,255,.65); }
.footer-hashtag { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--yellow); }

/* ── Responsive Shared ───────────────────────────────── */
/* Body scroll lock when mobile nav is open */
body.nav-open-lock { overflow: hidden; }

/* ── Tablet Nav (769px–1024px): hamburger + visible CTA ─ */
@media (min-width: 769px) and (max-width: 850px) {
  .nav-cta .btn { padding: 9px 14px; font-size: 12px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-links.nav-open {
    display: flex; flex-direction: column;
    position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
    background: white; padding: 12px 20px 20px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(27,43,94,.16);
    gap: 2px; z-index: 999;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links.nav-open li { list-style: none; }
  .nav-links.nav-open a:not(.btn) { padding: 13px 16px; font-size: 15px; border-radius: var(--r-lg); display: flex; align-items: center; color: var(--text-body); min-height: 44px; }
  .nav-links.nav-open a:not(.btn):hover { color: var(--orange); background: var(--orange-pale); }
  .nav-links.nav-open a.active:not(.btn) { color: var(--orange); background: var(--orange-pale); font-weight: 600; }
  .nav-links.nav-open .nav-dropdown { flex-direction: column; align-items: stretch; }
  .nav-links.nav-open .nav-dropdown-menu {
    position: static; transform: none; box-shadow: none; border: none;
    background: transparent; border-radius: 0;
    margin: 0 0 4px; padding: 2px 0 4px 12px;
    border-left: 2px solid var(--border);
  }
  .nav-links.nav-open .nav-dropdown-menu a { font-size: 14px; white-space: normal; padding: 9px 12px; }
  .nav-links.nav-open .nav-dropdown-btn { width: 100%; justify-content: space-between; border-radius: var(--r-lg); font-size: 15px; padding: 13px 16px; min-height: 44px; }
  /* CTA buttons are visible outside the drawer on tablet — hide them inside */
  .nav-links.nav-open .nav-mobile-cta { display: none; }
}

@media (max-width: 768px) {
  /* iOS Safari treats backdrop-filter ancestors as containing blocks for position:fixed children,
     which collapses the mobile drawer to zero height. Remove it on mobile — the navbar is
     opaque enough that the blur effect isn't meaningful on small screens anyway. */
  .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .navbar.nav-hidden { transform: translateY(-100%); }
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .nav-links.nav-open {
    display: flex; flex-direction: column;
    position: fixed; top: 72px; left: 0; right: 0;
    bottom: 0;
    background: white; padding: 12px 20px 20px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(27,43,94,.16);
    gap: 2px; z-index: 999;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links.nav-open li { list-style: none; }
  .nav-links.nav-open a:not(.btn) { padding: 13px 16px; font-size: 15px; border-radius: var(--r-lg); display: flex; align-items: center; color: var(--text-body); min-height: 44px; }
  .nav-links.nav-open a:not(.btn):hover { color: var(--orange); background: var(--orange-pale); }
  .nav-links.nav-open a.active:not(.btn) { color: var(--orange); background: var(--orange-pale); font-weight: 600; }
  .nav-links.nav-open .nav-mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
  .nav-links.nav-open .nav-mobile-cta .btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 20px; font-size: 15px; text-decoration: none; min-height: 50px; border-radius: var(--r-pill); }
  .nav-links.nav-open .nav-mobile-cta a.btn-primary { background: var(--orange); color: white; box-shadow: 0 4px 16px rgba(232,82,28,.28); }
  .nav-links.nav-open .nav-mobile-cta a.btn-secondary { background: var(--navy); color: white; box-shadow: 0 4px 14px rgba(27,43,94,.2); }

  /* `body .container` (0,1,1) rather than `.container` (0,1,0) on purpose:
     25 pages redefine `.container { padding: 0 24px }` in their own inline
     <style>, which loads after this file. At equal specificity the later rule
     wins, so a plain `.container` here silently loses on every one of them.
     The extra `body` outranks them without resorting to !important. */
  body .container { padding: 0 16px; }

  /* Never split a word across two lines — no hyphenation, anywhere.
     This is load-bearing for tables, not just cosmetic: hyphenation points
     count as soft-wrap opportunities, which lowers an element's min-content
     width. An auto-layout table then sizes the column to the hyphenated
     fragment ("Ap-") instead of the whole word, so "Appointment" gets split
     across three lines. With hyphens off, min-content is the full word and
     each column is sized to hold its longest word intact. */
  * { -webkit-hyphens: none; hyphens: none; }

  .cta-banner  { padding: 64px 0; }
  .cta-inner h2   { font-size: 28px; }
  .cta-inner p    { font-size: 15px; }
  .cta-actions    { flex-direction: column; align-items: center; }

  .footer-grid    { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom  { flex-direction: column; gap: 8px; text-align: center; }
  .footer-bottom  { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

  .wa-float-label { display: none; }
  .wa-float       { padding: 14px; border-radius: 50%; }

  /* Prevent iOS zoom on form inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  select,
  textarea { font-size: 16px !important; }

  /* ── Mobile content reduction ──────────────────────────────
     Hide non-essential text on mobile to streamline the
     hook → trust → CTA funnel and reduce scroll fatigue. */
  .mobile-hide { display: none !important; }
  .section-header p { display: none; }
  .cta-hashtag { display: none; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col-title {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
    padding: 6px 0;
  }
  .footer-col-title::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid rgba(255,255,255,.45);
    border-bottom: 2px solid rgba(255,255,255,.45);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform .25s var(--ease);
  }
  .footer-col-title.open::after { transform: rotate(-135deg); }
  .footer-col-body { max-height: 0; overflow: hidden; padding-top: 0; transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1), padding-top .3s ease; }
  .footer-col-body.open { max-height: 300px; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .social-btn:hover, .wa-float:hover { transform: none; }
  .wa-float { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   SITE MEDIA SLOTS  (admin-managed permanent media — site-media.js)
   A .media-slot is hidden by default and only revealed once
   site-media.js fills it from the `site_media` table, so empty slots
   have zero layout impact and the static design renders untouched.
   ════════════════════════════════════════════════════════════════ */
.media-slot { display: block; margin: 0; }
.media-slot[hidden] { display: none; }
.media-slot .ms-media-img,
.media-slot .ms-media-frame {
  display: block; width: 100%;
  border-radius: var(--r-lg); overflow: hidden;
}
.media-slot .ms-media-img { height: auto; object-fit: cover; }
.media-slot .ms-media-frame {
  position: relative; aspect-ratio: 16 / 9; background: #000;
}
.media-slot .ms-media-frame iframe,
.media-slot .ms-media-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; object-fit: cover;
}
.media-slot .ms-media-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 32px 44px;
}
.media-slot .ms-logo img {
  height: 38px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .65;
  transition: filter .2s ease, opacity .2s ease;
}
.media-slot .ms-logo img:hover { filter: none; opacity: 1; }

/* Wrapper for slots that add a whole new section (e.g. partner logos,
   about-page story photo). Collapses to zero height while empty. */
.media-section { padding: 0; }
.media-section:has(.media-slot.is-filled) { padding: 64px 0; }
.media-section .ms-media-img { aspect-ratio: 16 / 9; }

@media (max-width: 768px) {
  .media-slot .ms-media-logos { gap: 20px 28px; }
  .media-slot .ms-logo img { height: 30px; }
  .media-section:has(.media-slot.is-filled) { padding: 40px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Text Reveal Animation
═══════════════════════════════════════════════════════════════ */
.rw { overflow: hidden; display: block; }
.rl { display: block; transform: translateY(108%); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.rl.in { transform: translateY(0); }
.fi { opacity: 0; transform: translateY(22px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
.fi.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rl  { transform: none !important; transition: none !important; }
  .rl.in { transform: none !important; }
  .fi  { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Chameleon Cursor
   Only runs on devices with a genuine fine/hover-capable pointer —
   chameleon-cursor.js skips its own setup entirely on touch (pointer:
   coarse), so this native-cursor hide is scoped to match. Otherwise a
   touch-primary device that happens to also report hover: hover (rare
   hybrid hardware) would be left with no visible cursor at all: no
   native one (hidden here) and no chameleon one (JS never ran).
═══════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
  /* Native select dropdowns inherit cursor from the <select> element — restore
     the system cursor while focused so the popup is usable. The chameleon JS
     hides itself on focusin so neither cursor shows on the trigger at the same time. */
  select:focus { cursor: default !important; }
}
#chameleon-cursor {
  /* Positioned via transform from chameleon-cursor.js, not left/top. Those are
     layout properties, so moving the cursor with them re-ran layout on every
     mousemove — and this element carries two stacked drop-shadows, so each of
     those also forced a re-raster of a filtered layer. The -2px nudge that
     used to live here is folded into that transform.
     will-change named left and top, which cannot be optimised for and merely
     pinned a layer; transform can be, and is what actually moves now. */
  position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none;
  width: 48px; height: 48px;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.7)) drop-shadow(0 0 6px rgba(0,0,0,.8));
  will-change: transform, filter;
  transition: filter 0.6s ease-out;
}
@media (pointer: coarse) {
  #chameleon-cursor { display: none !important; }
}
#chameleon-cursor.hidden { opacity: 0; }
#chameleon-cursor img { width: 100%; height: 100%; transition: opacity 0.15s; }
#chameleon-cursor .cc-default { position: absolute; inset: 0; }
#chameleon-cursor .cc-pointer { position: absolute; inset: 0; opacity: 0; }
#chameleon-cursor.pointer .cc-default { opacity: 0; }
#chameleon-cursor.pointer .cc-pointer { opacity: 1; }

/* ── Touch: neutralize hover-only transform effects ────────────
   Touch never fires a true mouseleave, so a translateY/scale/rotate
   triggered by :hover can visually "stick" after a tap until the user
   taps elsewhere. Only resetting the transform-based effects here —
   those read as visibly broken when stuck (an element frozen off its
   resting position); a lingering color/background tint is comparatively
   harmless and left alone. */
@media (pointer: coarse) {
  .btn:hover,
  .nav-logo:hover,
  .wa-float:hover,
  .social-btn:hover,
  .hero-dest-tile:hover,
  .dest-mag-card:hover,
  .testi-card:hover,
  .country-card:hover,
  .career-card:hover,
  .timeline-card:hover,
  .prog-card:hover,
  .result-card:hover,
  .adv-card:hover,
  .gc-course-row:hover,
  .course-pill-link:hover,
  .course-pill-merged:hover {
    transform: none;
  }
  .wa-float { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Hamburger Navbar — full-screen overlay menu
═══════════════════════════════════════════════════════════════ */
.hamburger { display: none !important; }
.nav-links { display: none !important; }
.nav-dropdown { display: none !important; }

.menu-toggle {
  width: 42px; height: 42px;
  border: 1px solid rgba(27,43,94,.18);
  border-radius: var(--r-md);
  background: rgba(27,43,94,.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  padding: 0; transition: background .2s, border-color .2s;
  position: relative; z-index: 1002; flex-shrink: 0;
}
.menu-toggle:hover { background: rgba(27,43,94,.12); border-color: rgba(27,43,94,.3); }
.menu-toggle .bar {
  width: 18px; height: 1.5px; background: var(--navy);
  border-radius: 2px; transform-origin: center; display: block;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s, background .25s;
}
.menu-toggle.open .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.open .bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.navbar-over-dark .menu-toggle { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.navbar-over-dark .menu-toggle .bar { background: white; }
.navbar-over-dark .menu-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.navbar-over-dark.scrolled .menu-toggle { border-color: rgba(27,43,94,.18); background: rgba(27,43,94,.06); }
.navbar-over-dark.scrolled .menu-toggle .bar { background: var(--navy); }

.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-inner .nav-logo { flex: 1; }
.nav-inner .nav-cta { order: 2; }
.nav-inner .menu-toggle { order: 3; }

.fs-menu {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(255,255,255,.99);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  display: flex; flex-direction: column; align-items: center; overflow-y: auto;
  pointer-events: none;
  visibility: hidden;
  transition: clip-path 0.5s cubic-bezier(0.7, 0, 1, 1), visibility 0s 0.5s;
}
/* backdrop-filter belongs ONLY on the open state. An element carrying one
   establishes a backdrop root: the browser has to keep the content behind it
   available as a separate composited texture and re-blur it whenever anything
   moves. This menu is fixed, full-viewport and z-index 999, so while it sat
   permanently in the tree it taxed every scroll frame on every page that has
   it — visibility:hidden stops the element painting but does not retire the
   backdrop root. It is also barely visible work: the panel is 99% opaque, so
   almost nothing of the blurred backdrop shows through even when open. */
.fs-menu.open {
  pointer-events: all;
  visibility: visible;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: clip-path 0.65s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
}
/* margin: auto on a column flex item absorbs free vertical space — centers when there's room,
   scrolls from the top when there isn't (safe centering pattern). */
/* padding-top must exceed the 73px navbar (z-index 1000) that overlays the menu */
.fs-menu-inner { text-align: center; padding: 88px 24px 60px; margin: auto; }
.fs-menu-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(27,43,94,.35); margin-bottom: 40px;
  opacity: 0; transform: translateY(20px);
}
.fs-menu-link {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* min(6vw, 7.5vh) makes links shrink on short viewports, not just narrow ones */
  font-size: clamp(22px, min(4.5vw, 6vh), 60px); font-weight: 900; color: var(--navy);
  text-decoration: none; letter-spacing: -.03em; line-height: 1.25;
  transition: color .2s; opacity: 0; transform: translateY(30px);
  touch-action: manipulation;
}
.fs-menu-link:hover { color: var(--orange); }
.fs-menu-link.active { color: var(--orange); }
.fs-menu-footer {
  margin-top: 52px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 400; color: rgba(27,43,94,.35); letter-spacing: .04em;
  opacity: 0; transform: translateY(20px);
}
@media (max-height: 800px) {
  .fs-menu-label { margin-bottom: 24px; }
  .fs-menu-footer { margin-top: 32px; }
}
@media (max-height: 600px) {
  /* Only reduce bottom padding — top must stay above the 73px navbar */
  .fs-menu-inner { padding-bottom: 32px; }
  .fs-menu-label { margin-bottom: 16px; }
  .fs-menu-footer { margin-top: 20px; }
}
/* On mobile phones, restore a readable tap-friendly size for menu links */
@media (max-width: 640px) {
  .fs-menu-link { font-size: clamp(30px, 9vw, 42px); }
}

/* If a dark transparent navbar variant is ever reintroduced, keep the
   overlay dark to match it rather than the default light glass above. */
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu {
  background: var(--navy-darkest);
}
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu .fs-menu-label,
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu .fs-menu-footer { color: rgba(255,255,255,.25); }
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu .fs-menu-link { color: white; }
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu .fs-menu-link:hover,
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu .fs-menu-link.active { color: var(--orange); }
body.menu-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   Mobile Info Accordion
   Wraps a content block in a native <details open> so mobile can
   present dense page content (country pages: life/cost/university/
   pathway info) as collapsed, tappable cards instead of hiding it
   outright via display:none.

   Markup always ships with the open attribute present — a closed
   <details> hides its children via the UA stylesheet's
   content-visibility: hidden, which author CSS cannot reliably
   override (confirmed: display:block !important on the child was not
   enough, computed styles showed "visible" yet layout still collapsed
   to zero height). Starting open sidesteps that fight entirely: the
   body just renders like normal content. mobile-accordion.js removes
   the open attribute on mobile at load, using the same
   window.innerWidth <= 768 check already used elsewhere on this site,
   so mobile starts collapsed while desktop needs zero CSS override.
═══════════════════════════════════════════════════════════════ */
.mobile-accordion { border: none; }
.mobile-accordion > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text-dark);
  padding: 16px 18px; min-height: 44px; user-select: none;
  background: white; border: 1px solid var(--border); border-radius: var(--r-lg);
}
.mobile-accordion > summary::-webkit-details-marker { display: none; }
.mobile-accordion > summary::marker { display: none; }
.ma-chevron { flex-shrink: 0; color: var(--orange); transition: transform .22s ease; }
.mobile-accordion[open] > summary { border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none; }
.mobile-accordion[open] .ma-chevron { transform: rotate(180deg); }
.mobile-accordion .ma-body {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 20px 18px; background: white;
}
.mobile-accordion + .mobile-accordion { margin-top: 12px; }

@media (max-width: 768px) {
  section:has(.mobile-accordion:not([open])) {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    transition: padding .25s ease;
  }
  section:has(.mobile-accordion[open]) {
    transition: padding .25s ease;
  }
}

@media (min-width: 769px) {
  .mobile-accordion > summary { display: none; }
  .mobile-accordion .ma-body { border: none; padding: 0; background: none; border-radius: 0; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE CTA BAR  — sticky bottom bar on country subpages.
   Hidden on desktop; slides in/out via .cta-bar-hidden on <body>.
   ════════════════════════════════════════════════════════════════ */
.mobile-cta-bar { display: none; }

@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 8999;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    /* 97% opaque, fixed to the bottom of the viewport for the whole session:
       a backdrop-filter here re-blurred the strip behind it every scroll frame
       on mobile, for ~3% visible effect. Fill kept, blur dropped. */
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--border);
    transform: translateY(0);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .cta-bar-hidden .mobile-cta-bar {
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
  }
  .bar-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 13px 8px;
    border-radius: var(--r-pill);
    font-family: var(--font-ui); font-size: 14px; font-weight: 600;
    text-decoration: none; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .bar-btn:active { transform: scale(.96); }
  .bar-btn-book { background: var(--navy); color: white; }
  .bar-btn-apply {
    background: var(--orange); color: white;
    box-shadow: 0 4px 14px rgba(232,82,28,.28);
  }
  /* Lift WA float above the bar; drops back when bar hides */
  .wa-float {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    transition: bottom .32s cubic-bezier(.4,0,.2,1), transform .25s var(--ease-out) !important;
  }
  .cta-bar-hidden .wa-float {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hamburger open: get the floating chrome out of the way. .fs-menu is
     z-index 999 but the bar is 8999 and the WA float 9000, so both were
     sitting on top of the open menu. Reusing the transforms each element
     already transitions means this is the same slide as the scroll-away
     rather than a second, different motion. body.menu-open is set by
     hamburger-navbar.js. */
  .menu-open .mobile-cta-bar {
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
  }
  /* The float already animates `bottom` on the bar's exact curve and duration,
     so driving it past the bottom edge keeps the two moving in step. Needs
     !important only to outrank the .cta-bar-hidden rule above, which sets
     `bottom` the same way. */
  .menu-open .wa-float {
    bottom: -80px !important;
    pointer-events: none;
  }
}

/* ── Mobile audit fixes (July 2026) ──────────────────── */
@media (max-width: 768px) {
  /* Nav CTA buttons are replaced by the sticky bottom CTA bar on mobile.
     Kept at the end of this file so it wins over the unscoped
     .nav-cta { display: flex; } rule above regardless of whether a page
     links shared.css before or after its own <style> block. */
  .nav-cta { display: none; }

  /* Reserve clearance so the last content isn't hidden under the CTA bar */
  body:has(.mobile-cta-bar) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  /* Breadcrumb links: vertical padding on inline links extends the tap
     area toward 44px without changing the line box or layout */
  .hero-breadcrumb a, .page-hero-breadcrumb a { padding: 14px 4px; margin: 0 -4px; }
}

/* ── Language switcher ───────────────────────────────── */
.ms-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ms-lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-body);
  padding: 4px 6px;
  border-radius: 4px;
  transition: color .15s, background .15s;
  line-height: 1;
}
.ms-lang-btn:hover { color: var(--orange); }
.ms-lang-btn.ms-lang-active {
  color: var(--navy);
  background: rgba(27,43,94,.07);
}
.ms-lang-sep {
  color: var(--border);
  font-size: 11px;
  user-select: none;
}

/* Desktop switcher sits in the nav bar (hidden on mobile — nav-cta area is already hidden) */
.ms-lang-desk {
  margin-right: 8px;
}
@media (max-width: 768px) {
  .ms-lang-desk { display: none; }
}

/* Mobile switcher inside fullscreen nav overlay */
.ms-lang-mob {
  margin-top: 28px;
  justify-content: center;
}
.ms-lang-mob .ms-lang-btn {
  font-size: 14px;
  padding: 6px 10px;
}
.ms-lang-mob .ms-lang-btn.ms-lang-active {
  color: var(--orange);
  background: rgba(232,82,28,.08);
}

/* Dark-overlay context (nav is over dark background before scroll) */
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu .ms-lang-mob .ms-lang-btn {
  color: rgba(255,255,255,.6);
}
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu .ms-lang-mob .ms-lang-btn.ms-lang-active {
  color: var(--orange);
  background: rgba(232,82,28,.15);
}
.navbar.navbar-over-dark:not(.scrolled) ~ .fs-menu .ms-lang-mob .ms-lang-sep {
  color: rgba(255,255,255,.2);
}

/* ═══════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER  (markup injected by cookie-consent.js)
   Lives here rather than in the script so the banner needs no
   inline <style>, which every page's CSP would have to allow.
═══════════════════════════════════════════════════════════════ */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--white);
  border-top: 1.5px solid var(--border);
  box-shadow: 0 -8px 40px rgba(27,43,94,.14);
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.cc-banner.cc-in { transform: translateY(0); }
.cc-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
}
.cc-text { flex: 1; min-width: 0; }
.cc-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  color: var(--navy); letter-spacing: -.01em; margin-bottom: 6px;
}
.cc-body { font-size: 13.5px; line-height: 1.65; color: var(--text-body); }
.cc-more {
  display: inline-block; margin-top: 8px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  color: var(--orange); text-decoration: none;
}
.cc-more:hover { text-decoration: underline; }
.cc-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cc-btn {
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700;
  padding: 12px 22px; border-radius: 10px; cursor: pointer;
  white-space: nowrap; transition: background .18s, border-color .18s, color .18s;
}
.cc-btn-solid { background: var(--navy); color: var(--white); border: 1.5px solid var(--navy); }
.cc-btn-solid:hover { background: var(--navy-mid); border-color: var(--navy-mid); }
.cc-btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--border); }
.cc-btn-ghost:hover { border-color: var(--navy); background: var(--light); }
.cc-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (max-width: 720px) {
  .cc-banner { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .cc-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cc-actions { flex-direction: column-reverse; }
  .cc-btn { width: 100%; padding: 14px 22px; }
}
/* The mobile sticky CTA bar is fixed to the same edge. The banner is appended
   at the end of <body>, so it is never a preceding sibling of the bar — the
   body class is what hides it, not a sibling selector. */
body.cc-open .mobile-cta-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-banner { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES  (privacy, cookies, terms, pdpa-notice, disclaimer)
═══════════════════════════════════════════════════════════════ */
.legal-hero { background: var(--navy); padding: 128px 24px 56px; color: var(--white); }
.legal-hero-inner { max-width: 820px; margin: 0 auto; }
.legal-eyebrow {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px;
}
.legal-hero h1 {
  font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em; margin-bottom: 14px;
}
.legal-sub { font-size: 15.5px; color: rgba(255,255,255,.72); line-height: 1.7; }
.legal-updated {
  font-family: var(--font-ui); font-size: 13px; color: rgba(255,255,255,.55); margin-top: 18px;
}

.legal-body { max-width: 820px; margin: 0 auto; padding: 56px 24px 88px; }
.legal-body h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  color: var(--navy); letter-spacing: -.02em; margin: 44px 0 14px; scroll-margin-top: 96px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 700;
  color: var(--navy); margin: 28px 0 10px;
}
.legal-body p { font-size: 15px; line-height: 1.78; color: var(--text-body); margin-bottom: 16px; }
.legal-body ul, .legal-body ol { margin: 0 0 18px 22px; }
.legal-body li { font-size: 15px; line-height: 1.78; color: var(--text-body); margin-bottom: 9px; }
.legal-body a { color: var(--orange); font-weight: 600; }
.legal-body strong { color: var(--text-dark); font-weight: 700; }

.legal-toc {
  background: var(--light); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 24px 28px; margin-bottom: 44px;
}
.legal-toc-title {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--slate); margin-bottom: 14px;
}
.legal-toc ol { margin: 0 0 0 18px; }
.legal-toc li { font-size: 14px; margin-bottom: 7px; }
.legal-toc a { color: var(--navy); font-weight: 600; text-decoration: none; }
.legal-toc a:hover { color: var(--orange); text-decoration: underline; }

/* Data-handling summary table */
.legal-table-wrap { overflow-x: auto; margin-bottom: 24px; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.legal-table th, .legal-table td {
  text-align: left; padding: 13px 16px; font-size: 14px; line-height: 1.6;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.legal-table th {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--slate);
  background: var(--light); white-space: nowrap;
}
.legal-table td { color: var(--text-body); }

.legal-callout {
  border-left: 3px solid var(--orange); background: var(--orange-pale);
  border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 0 0 24px;
}
.legal-callout p { margin-bottom: 0; color: var(--text-dark); font-size: 14.5px; }
.legal-callout p + p { margin-top: 10px; }

.legal-contact {
  border: 1.5px solid var(--border); border-radius: 16px;
  padding: 24px 28px; margin-top: 12px;
}
.legal-contact p { margin-bottom: 8px; font-size: 14.5px; }
.legal-contact p:last-child { margin-bottom: 0; }

.legal-lang-switch { display: flex; gap: 8px; margin-bottom: 36px; }
.legal-lang-btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  padding: 9px 18px; border-radius: 9px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--white); color: var(--navy);
}
.legal-lang-btn[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

@media (max-width: 768px) {
  .legal-hero { padding: 100px 16px 44px; }
  .legal-body { padding: 40px 16px 64px; }
  .legal-body h2 { font-size: 20px; margin-top: 36px; }
  .legal-toc { padding: 20px 20px; }
}

/* ── Footer legal row ─────────────────────────────────────────
   Sits inside .footer-bottom as a full-width row above the copyright
   line, so the two share the one divider already drawn there. */
.footer-bottom { flex-wrap: wrap; }
.footer-legal {
  flex-basis: 100%; order: -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding-bottom: 14px;
}
.footer-legal a, .footer-legal button {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  color: rgba(255,255,255,.55); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--white); }

@media (max-width: 768px) {
  .footer-legal { justify-content: center; }
}

/* ── Canonical orange CTA banner ──────────────────────────
   The design of record for the orange section above the footer is the one on
   blog.html, which uses nothing but the plain .cta-banner rules further up
   this file. Twenty-five pages had since grown their own .cta-banner /
   .cta-inner / .btn-white overrides inside their <style> blocks, and because
   those load after shared.css they each rendered a slightly different banner.

   This block restates the blog values at a specificity page-local rules can't
   reach (the doubled .cta-banner is there purely to buy specificity, not to
   change what is selected). Deleting the page-local rules instead would be
   tidier, but .btn-white and .btn-ghost-white are also used by hero sections on
   several of those pages, so removing them would change more than the banner.

   Consequence worth knowing: a page-local .cta-banner or .btn-white rule will
   no longer affect this banner. Edit it here. */
.cta-banner.cta-banner {
  padding: 96px 0;
  background: linear-gradient(135deg, #C03A0E 0%, var(--orange) 50%, #D94A18 100%);
  position: relative;
  overflow: hidden;
}
.cta-banner.cta-banner::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.cta-banner.cta-banner::after {
  content: ''; position: absolute; bottom: -80px; left: 20%;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,184,0,.08); pointer-events: none;
}
.cta-banner.cta-banner .cta-inner      { position: relative; z-index: 1; text-align: center; }
.cta-banner.cta-banner .cta-inner h2   { font-family: var(--font-display); font-size: clamp(32px,4.5vw,52px); font-weight: 800; color: white; letter-spacing: -.025em; margin-bottom: 16px; line-height: 1.1; }
.cta-banner.cta-banner .cta-inner h2 span { color: var(--yellow); }
.cta-banner.cta-banner .cta-inner p    { font-size: 17px; color: rgba(255,255,255,.82); margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.68; }
.cta-banner.cta-banner .cta-actions    { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-banner.cta-banner .cta-actions .btn { font-size: 15px; padding: 16px 38px; }
.cta-banner.cta-banner .cta-actions .btn-white {
  background: white; color: var(--orange);
  border: none; box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.cta-banner.cta-banner .cta-actions .btn-white:hover { box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.cta-banner.cta-banner .cta-actions .btn-ghost-white {
  background: transparent; color: white;
  border: 1.5px solid rgba(255,255,255,.35);
}
.cta-banner.cta-banner .cta-actions .btn-ghost-white:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.65);
}

@media (max-width: 768px) {
  .cta-banner.cta-banner              { padding: 64px 0; }
  .cta-banner.cta-banner .cta-inner h2 { font-size: 28px; }
  .cta-banner.cta-banner .cta-inner p  { font-size: 15px; }
  .cta-banner.cta-banner .cta-actions  { flex-direction: column; align-items: center; }
}