/* ═══════════════════════════════════════════════════════════════
   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 {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  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; }
  /* Justify running prose only. Table cells are excluded on purpose: a phone
     column is ~110px wide, so justifying a two-word line ("EUR 300") stretches
     it edge-to-edge and leaves a huge gap. */
  p, li, dd, blockquote { text-align: justify; }

  /* 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 {
  position: fixed; 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));
  transform: translate(-2px, -2px);
  will-change: left, top, 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);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  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;
}
.fs-menu.open {
  pointer-events: all;
  visibility: visible;
  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));
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    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;
  }
}

/* ── 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);
}