/* =====================================================================
   Quantum Leaps – public site styles
   Mobile-first. Brand tokens live in :root; components below.
   ===================================================================== */
/* Metric-matched fallbacks: text keeps its size while web fonts swap in (prevents layout shift) */
@font-face { font-family: 'Poppins Fallback'; src: local('Arial'); ascent-override: 92.33%; descent-override: 30.78%; line-gap-override: 8.79%; size-adjust: 113.73%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

:root {
  --primary: #2B3A9F;
  --primary-600: #23308a;
  --navy: #10173F;
  --gold: #E3A92B;
  --gold-600: #c98e12;
  --gold-soft: #F8E4B0;
  --bg: #F8F9FD;
  --teal: #14B8A6;
  --coral: #FF6B6B;
  --violet: #7C5CFF;
  --sky: #38BDF8;

  --text: #1d2340;
  --muted: #5a6180;          /* 6.1:1 on white */
  --line: #e4e7f2;
  --white: #fff;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 23, 63, .06), 0 2px 8px rgba(16, 23, 63, .04);
  --shadow: 0 10px 30px -12px rgba(16, 23, 63, .18), 0 2px 6px rgba(16, 23, 63, .04);
  --shadow-lg: 0 24px 60px -20px rgba(43, 58, 159, .35);
  --gradient: linear-gradient(120deg, #2B3A9F 0%, #4b45c9 55%, #7C5CFF 100%);

  --font-head: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --container: 1200px;
  --header-h: 72px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-600); }
ul, ol { padding-left: 1.2rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--gold-soft); color: var(--navy); }

[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 12px; color: #fff; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.section { padding: 64px 0; }
.section--alt { background: var(--bg); }
.section--tight { padding: 40px 0; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.icon-sm { width: 1em; height: 1em; flex-shrink: 0; }
.icon-lg { width: 28px; height: 28px; flex-shrink: 0; }

@media (min-width: 768px) {
  .container { padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
  .section { padding: 88px 0; }
}

/* ---------- Grid helpers ---------- */
.grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: 24px; }
}

/* ---------- Section heading + gold layered divider ---------- */
.section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.ql-divider { display: flex; flex-direction: column; gap: 4px; margin: 14px auto 18px; width: 72px; }
.section-head--left .ql-divider { margin-left: 0; }
.ql-divider i { display: block; height: 4px; border-radius: 4px; background: var(--gold); }
.ql-divider i:nth-child(2) { width: 72%; background: #ecc15f; }
.ql-divider i:nth-child(3) { width: 44%; background: var(--gold-soft); }
.section-split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.section-split .section-head { margin: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent; font-family: var(--font-head); font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 8px 20px -8px rgba(227, 169, 43, .7); }
.btn-gold:hover { background: #ebb43c; color: var(--navy); box-shadow: 0 12px 24px -8px rgba(227, 169, 43, .8); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-600); color: #fff; }
.btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-light { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-light:hover { background: #fff; color: var(--primary); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .875rem; }
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; font-family: var(--font-head); font-size: .95rem; }.link-arrow .icon { transition: transform .2s; }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- Announcement bar ---------- */
.announce { background: var(--navy); color: #fff; font-size: .875rem; text-align: center; padding: 8px 16px; }
/* Inline padding enlarges the tap area to ~44px without changing the bar's height */
.announce a { color: var(--gold); font-weight: 600; margin-left: 6px; padding: 14px 4px; }

/* ---------- Header / navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
/* The frosted glass lives on a pseudo-element: backdrop-filter on the header itself would make it the
   containing block for the fixed mobile menu, collapsing the menu to the header's height */
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); }
.site-header.is-scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand picture { display: block; }
.brand img { height: 46px; width: auto; }
@media (min-width: 768px) { .brand img { height: 56px; } }
.header-cta { display: none; margin-left: auto; }
.nav-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--bg); color: var(--navy); cursor: pointer; }
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-open { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

/* --nav-top is set by app.js to the header's bottom edge (it moves while the announcement bar is in view) */
.main-nav { position: fixed; inset: var(--nav-top, var(--header-h)) 0 0 0; background: #fff; padding: 16px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .2s ease, opacity .2s ease, visibility .2s; }
.nav-open .main-nav { transform: none; opacity: 1; visibility: visible; }
.nav-open { overflow: hidden; }
.main-nav > ul { list-style: none; margin: 0; padding: 0; }
.main-nav li { border-bottom: 1px solid var(--line); }
.nav-item { display: flex; align-items: center; justify-content: space-between; }
.main-nav a.nav-link { display: block; flex: 1; padding: 14px 4px; font-family: var(--font-head); font-weight: 500; color: var(--navy); text-decoration: none; }
.main-nav a.nav-link[aria-current="page"], .main-nav a.nav-link.is-active { color: var(--primary); }
.dropdown-toggle { width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.dropdown-toggle .icon { transition: transform .2s; }
.dropdown-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.dropdown { display: none; padding: 4px 0 16px; }
.dropdown.is-open { display: block; }
.dropdown ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dropdown li { border: 0; }
.dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .95rem; }
.dropdown a:hover, .dropdown a:focus-visible { background: var(--bg); color: var(--primary); }
.dropdown .flag { width: 28px; height: 19px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.nav-mobile-cta { margin-top: 20px; }

@media (min-width: 1180px) {
  .nav-toggle, .nav-mobile-cta { display: none; }
  .header-cta { display: inline-flex; margin-left: 8px; }
  .main-nav { position: static; transform: none; opacity: 1; visibility: visible; padding: 0; overflow: visible; background: transparent; margin-left: auto; }
  .main-nav > ul { display: flex; align-items: center; gap: 4px; }
  .main-nav li { border: 0; position: relative; }
  .main-nav a.nav-link { padding: 10px 12px; font-size: .95rem; border-radius: 10px; }
  .main-nav a.nav-link:hover { color: var(--primary); background: var(--bg); }
  .main-nav a.nav-link.is-active { color: var(--primary); }
  .nav-item .dropdown-toggle { width: 28px; height: 36px; margin-left: -8px; }
  .dropdown { position: absolute; top: 100%; left: -8px; min-width: 240px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; border: 1px solid var(--line); }
  .dropdown--wide { min-width: 460px; }
  .dropdown--wide ul { grid-template-columns: 1fr 1fr; }
  /* Hover for pointers; keyboard users open menus with the chevron button (disclosure pattern, Escape closes) */
  .has-dropdown:hover > .dropdown { display: block; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--gradient); color: #fff; overflow: hidden; padding: 48px 0 64px; }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 520px; height: 520px; right: -180px; top: -200px; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%); }
.hero::after { width: 360px; height: 360px; left: -160px; bottom: -200px; background: radial-gradient(circle, rgba(227, 169, 43, .28), transparent 70%); }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 .accent { color: var(--gold); }
.hero-sub { font-size: 1.1rem; color: rgba(255, 255, 255, .9); max-width: 560px; margin-bottom: 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .95rem; color: rgba(255, 255, 255, .92); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points .icon { color: var(--gold); }
.hero-card { background: #fff; color: var(--text); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 24px; }
.hero-card h2 { font-size: 1.35rem; margin-bottom: 4px; }
.hero-card .muted { font-size: .92rem; margin-bottom: 16px; }
@media (min-width: 960px) {
  .hero { padding: 80px 0 104px; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .hero-card { padding: 32px; }
}

/* Inner page hero */
.page-hero { position: relative; background: var(--gradient); color: #fff; padding: 40px 0 48px; overflow: hidden; }
.page-hero::after { content: ''; position: absolute; width: 420px; height: 420px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .15), transparent 70%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-bottom: 10px; }
.page-hero p { color: rgba(255, 255, 255, .9); font-size: 1.08rem; max-width: 680px; margin: 0; }
.page-hero .hero-ctas { margin: 24px 0 0; }
.page-hero-flag { width: 64px; height: 43px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); margin-bottom: 16px; }
@media (min-width: 768px) { .page-hero { padding: 56px 0 64px; } }
.breadcrumbs { font-size: .85rem; margin-bottom: 14px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); }
.breadcrumbs li + li::before { content: '/'; opacity: .6; }
/* Vertical padding offset by negative margin: a taller tap area without changing the line height */
.breadcrumbs a { color: #fff; text-decoration: none; display: inline-block; padding: 12px 2px; margin: -12px -2px; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Stats strip ---------- */
.stats-strip { position: relative; z-index: 2; margin-top: -40px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.stat { padding: 22px 16px; text-align: center; border-bottom: 1px solid var(--line); }
.stat:nth-child(odd) { border-right: 1px solid var(--line); }
.stat-num { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.1; color: var(--primary); }
.stat:nth-child(2) .stat-num { color: var(--violet); }
.stat:nth-child(3) .stat-num { color: #0e9384; }
.stat:nth-child(4) .stat-num { color: var(--gold-600); }
.stat-label { font-size: .9rem; color: var(--muted); }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; border-right: 1px solid var(--line); padding: 28px 16px; }
  .stat:last-child { border-right: 0; }
}

/* ---------- Cards ---------- */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.card-body > :last-child { margin-bottom: 0; }
.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; }
.card-link { position: relative; }
.card-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--bg); color: var(--primary); line-height: 1.4; }
.badge--gold { background: var(--gold-soft); color: #7a5300; }
.badge--teal { background: #d7f5f1; color: #0b6b60; }
.badge--coral { background: #ffe3e3; color: #a12727; }
.badge--violet { background: #ece7ff; color: #4b2fc4; }
.badge--muted { background: #eef0f6; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Destination tiles */
.dest-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .dest-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .dest-grid { grid-template-columns: repeat(5, 1fr); } }
.dest-tile { --accent: var(--primary); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--text); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
.dest-tile::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.dest-tile::after { content: ''; position: absolute; width: 140px; height: 140px; right: -60px; bottom: -60px; border-radius: 50%; background: var(--accent); opacity: .08; transition: transform .3s; }
.dest-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; color: var(--text); }
.dest-tile:hover::after { transform: scale(1.4); }
.dest-flag { width: 52px; height: 35px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.dest-name { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--navy); }
.dest-meta { font-size: .85rem; color: var(--muted); line-height: 1.45; }
.dest-go { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--primary); margin-top: auto; }
/* Phones: two tiles side by side leave ~100px for text, so each destination becomes a compact row
   (accent bar on the left, flag · name + intake · arrow) */
@media (max-width: 479px) {
  .dest-grid { grid-template-columns: 1fr; gap: 10px; }
  .dest-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px 14px 20px; }
  .dest-tile::before { inset: 0 auto 0 0; width: 4px; height: auto; }
  .dest-tile::after { width: 100px; height: 100px; right: -50px; bottom: -50px; }
  .dest-flag { grid-row: 1 / span 2; width: 42px; height: 28px; }
  .dest-name { font-size: 1rem; line-height: 1.3; }
  .dest-meta { grid-column: 2; font-size: .8rem; }
  .dest-go { grid-column: 3; grid-row: 1 / span 2; margin: 0; width: 32px; height: 32px; justify-content: center; border-radius: 50%; background: var(--bg); }
  .dest-go-label { display: none; }
}

/* Destination listing cards (larger) */
.dest-card .card-top { --accent: var(--primary); position: relative; padding: 22px 22px 0; display: flex; align-items: center; gap: 14px; }
.dest-card .card-top::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--accent); }
.facts { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: .9rem; }
.facts li { display: flex; gap: 10px; align-items: flex-start; }
.facts .icon { color: var(--primary); margin-top: 3px; }
.facts strong { color: var(--navy); font-weight: 600; }

/* Services */
.service-card { --accent: var(--primary); }
.service-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; color: var(--accent); background: var(--bg); background: color-mix(in srgb, var(--accent) 12%, #fff); }
.service-icon .icon { width: 28px; height: 28px; }
.service-card h3 { margin-bottom: 8px; }
.service-card p { color: var(--muted); font-size: .95rem; }

/* How it works timeline */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: step; }
.step { position: relative; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); padding: 22px 22px 22px 84px; box-shadow: var(--shadow-sm); }
.step-num { position: absolute; left: 20px; top: 22px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--c, var(--primary)); font-family: var(--font-head); font-weight: 700; }
.step h3 { margin-bottom: 4px; font-size: 1.08rem; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
  .steps::before { content: ''; position: absolute; top: 46px; left: 10%; right: 10%; height: 3px; background: repeating-linear-gradient(90deg, var(--gold) 0 14px, transparent 14px 24px); }
  .step { padding: 24px 20px; text-align: center; background: transparent; border: 0; box-shadow: none; }
  .step-num { position: relative; left: auto; top: auto; margin: 0 auto 16px; width: 56px; height: 56px; box-shadow: 0 0 0 8px #fff; }
}

/* Partner logo marquee */
.logo-marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; gap: 16px; width: max-content; animation: marquee 45s linear infinite; }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track, .logo-marquee.is-offscreen .logo-track { animation-play-state: paused; }
.logo-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; min-width: 240px; text-decoration: none; color: var(--navy); }
.logo-item img { width: 44px; height: 44px; object-fit: contain; }
.logo-mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .95rem; flex-shrink: 0; }
.logo-mark { color: #fff !important; }
.logo-item strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9rem; line-height: 1.25; }
.logo-item > span:last-child > span { font-size: .78rem; color: var(--muted); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 599px) { .logo-item { max-width: 280px; } }

/* Carousel (scroll-snap) */
.carousel { position: relative; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding: 6px 2px 18px; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
/* Snapping is enabled on first interaction: snap-at-load scrolls the track and stops Chrome measuring LCP */
.carousel.is-ready .carousel-track { scroll-snap-type: x mandatory; }
.carousel-track > * { scroll-snap-align: start; }
@media (min-width: 640px) { .carousel-track { grid-auto-columns: calc(50% - 10px); } }
@media (min-width: 1024px) { .carousel-track { grid-auto-columns: calc(33.333% - 14px); } }
.carousel-nav { display: flex; gap: 10px; }
.carousel-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.carousel-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Story card */
.story-card { height: 100%; }
.story-card .card-body { gap: 14px; }
.story-quote { color: var(--text); font-size: .98rem; margin: 0; }
.story-quote::before { content: '\201C'; display: block; font-family: Georgia, serif; font-size: 3rem; line-height: .6; color: var(--gold); margin-bottom: 8px; }
.stars { display: flex; gap: 2px; color: var(--gold); }
.stars .icon { width: 16px; height: 16px; fill: currentColor; }
.person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.person strong { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--navy); line-height: 1.3; }
.person > div > span { display: block; font-size: .82rem; color: var(--muted); }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 600; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 96px; height: 96px; font-size: 1.6rem; }

/* Promo banners */
.promo-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .promo-grid { grid-template-columns: 1fr 1fr; } }
.promo { --accent: var(--violet); position: relative; overflow: hidden; border-radius: 20px; padding: 32px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--navy)); background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--navy))); }
.promo::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(255, 255, 255, .12); }
.promo h3 { color: #fff; font-size: 1.4rem; max-width: 420px; }
.promo p { color: rgba(255, 255, 255, .92); max-width: 460px; }
.promo .chips { margin: 16px 0 22px; }
.promo .badge { background: rgba(255, 255, 255, .18); color: #fff; }

/* Blog cards */
.post-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--gradient); overflow: hidden; display: grid; place-items: center; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-thumb-art { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255, 255, 255, .9); }
.post-thumb-art .icon { width: 48px; height: 48px; opacity: .85; }
.post-thumb .badge { position: absolute; left: 14px; top: 14px; background: #fff; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
.post-meta span { display: inline-flex; align-items: center; gap: 5px; }
.post-card h3 { font-size: 1.1rem; }
.post-card p { color: var(--muted); font-size: .94rem; }

/* Event cards */
.event-card { display: flex; flex-direction: row; gap: 16px; padding: 18px; align-items: flex-start; }
.event-date { flex-shrink: 0; width: 64px; border-radius: 14px; overflow: hidden; text-align: center; background: var(--bg); border: 1px solid var(--line); }
.event-date .m { display: block; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 4px 0; }
.event-date .d { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--navy); padding: 4px 0 6px; }
.event-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.event-card .post-meta { margin-bottom: 0; }
.event-list { display: grid; gap: 14px; }

/* FAQ accordion */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: box-shadow .2s, border-color .2s; }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: #d5d9ec; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; position: relative; font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--primary); display: grid; place-items: center; font-size: 1.2rem; font-weight: 500; transition: transform .2s, background .2s; }
.faq-item[open] summary::after { content: '\2212'; background: var(--gold-soft); color: var(--navy); }
.faq-answer { padding: 0 20px 20px; color: var(--muted); }
.faq-answer p:last-child { margin: 0; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: 24px; background: var(--gradient); color: #fff; padding: 40px 24px; display: grid; gap: 24px; align-items: center; }
.cta-band::before { content: ''; position: absolute; left: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 169, 43, .35), transparent 70%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 1.05rem; }
.cta-band .hero-ctas { margin: 0; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr auto; padding: 56px; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 14px; }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: span 2; } }
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: .88rem; font-weight: 600; color: var(--navy); }
.field .req { color: #b42318; }
.input, .select, .textarea, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #d4d8e8; border-radius: 12px; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310173F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(43, 58, 159, .15); }
.field input::placeholder, .field textarea::placeholder { color: #8a90a8; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #d92d20; }
.field-error { font-size: .82rem; color: #b42318; }
.form-note { font-size: .8rem; color: var(--muted); margin: 0; }
.form-note a { color: inherit; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; font-size: .95rem; margin-bottom: 16px; border: 1px solid; }
.alert .icon { margin-top: 2px; }
.alert-success { background: #ecfdf3; border-color: #abefc6; color: #05603a; }
.alert-error { background: #fef3f2; border-color: #fecdca; color: #912018; }
.alert-info { background: #eef2ff; border-color: #c7d2fe; color: #2b3a9f; }

/* Option cards (eligibility checker) */
.options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 0; padding: 0; margin: 0; }
.options legend { font-family: var(--font-head); font-weight: 600; color: var(--navy); margin-bottom: 10px; font-size: 1.05rem; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.option span { display: flex; align-items: center; min-height: 54px; padding: 12px 14px; border: 1.5px solid #d4d8e8; border-radius: 12px; font-weight: 500; font-size: .94rem; transition: border-color .15s, background .15s; }
.option input:checked + span { border-color: var(--primary); background: #eef0fb; color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.option input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.wizard-progress { height: 8px; background: var(--bg); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.wizard-progress span { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--gold), var(--violet)); border-radius: 8px; transition: width .3s; }
.wizard-step + .wizard-step { margin-top: 28px; }
.js .wizard-step { display: none; }
.js .wizard-step.is-active { display: block; margin-top: 0; }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.result-card { --accent: var(--primary); border-top: 5px solid var(--accent); }
.score-ring { --p: 70; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg) 0); flex-shrink: 0; }
.score-ring span { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: var(--navy); }

/* ---------- Detail pages ---------- */
.detail-grid { display: grid; gap: 32px; }
.detail-grid > *, .listing > *, .hero-grid > * { min-width: 0; }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; } .detail-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.detail-section { margin-bottom: 48px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-section h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); display: flex; align-items: center; gap: 12px; }
.detail-section h2 .h-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.prose { color: var(--text); overflow-wrap: break-word; }
.prose a { overflow-wrap: anywhere; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.5rem 0; font-size: .93rem; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--bg); font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.prose pre { overflow-x: auto; }
.prose h2 { font-size: 1.45rem; margin-top: 2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose img { border-radius: 12px; margin: 1.5rem 0; }
.prose blockquote { margin: 1.5rem 0; padding: 12px 20px; border-left: 4px solid var(--gold); background: var(--bg); border-radius: 0 12px 12px 0; }
.prose li { margin-bottom: .4rem; }
.prose a { font-weight: 500; }
.prose iframe { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 12px; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #d7f5f1; color: #0b6b60; flex-shrink: 0; margin-top: 1px; }
.checklist .tick .icon { width: 15px; height: 15px; }
@media (min-width: 768px) { .checklist--2 { grid-template-columns: 1fr 1fr; } }
.info-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.info-tile { --c: var(--primary); padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); }
.info-tile .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.info-tile .value { font-family: var(--font-head); font-weight: 600; color: var(--navy); margin-top: 6px; line-height: 1.35; }
.visa-steps { list-style: none; padding: 0; margin: 0; counter-reset: v; display: grid; gap: 0; }
.visa-steps li { counter-increment: v; position: relative; padding: 0 0 22px 56px; }
.visa-steps li::before { content: counter(v); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: .9rem; }
.visa-steps li::after { content: ''; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: var(--line); }
.visa-steps li:last-child::after { display: none; }
.visa-steps li:last-child { padding-bottom: 0; }
.aside-card { background: #fff; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 24px; }
.aside-card h2, .aside-card h3 { font-size: 1.2rem; }
.toc { list-style: none; padding: 0; margin: 0 0 24px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.toc a { display: inline-block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--bg); color: var(--navy); text-decoration: none; font-size: .88rem; font-weight: 500; }
.toc a:hover { background: var(--gold-soft); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 560px; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { background: var(--bg); font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: .85rem; }
.table tr:last-child td { border-bottom: 0; }

/* ---------- Listing / filters ---------- */
.listing { display: grid; gap: 28px; }
@media (min-width: 1024px) { .listing { grid-template-columns: 280px minmax(0, 1fr); gap: 36px; align-items: start; } .filters { position: sticky; top: calc(var(--header-h) + 20px); } }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.filters h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.filters .form { gap: 12px; }
.filters-more > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid #d4d8e8; border-radius: 12px; cursor: pointer; list-style: none; font-weight: 600; font-size: .92rem; color: var(--navy); }
.filters-more > summary::-webkit-details-marker { display: none; }
.filters-more > summary::after { content: ''; width: 9px; height: 9px; margin-left: auto; border: solid var(--navy); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.filters-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.filters-more-body { display: grid; gap: 12px; padding-top: 12px; }
/* Desktop sidebar: the dropdowns are always shown, so the toggle is redundant while open */
@media (min-width: 1024px) { .filters-more[open] > summary { display: none; } .filters-more-body { padding-top: 0; } }
.filter-bar { display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 28px; box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .filter-bar { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; } }
.results-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; color: var(--muted); font-size: .92rem; }
.results-meta .field { min-width: 200px; }
.empty { text-align: center; padding: 48px 24px; background: var(--bg); border-radius: var(--radius); }
.empty .icon { width: 40px; height: 40px; color: var(--primary); margin: 0 auto 12px; }
.course-card .card-body { gap: 4px; }
.course-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.course-uni { font-size: .88rem; color: var(--muted); margin-bottom: 12px; }
.course-uni img { display: inline-block; vertical-align: -2px; margin-right: 6px; width: 22px; height: 15px; border-radius: 3px; object-fit: cover; }
.course-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: .85rem; margin: 6px 0 4px; padding: 12px; background: var(--bg); border-radius: 12px; }
.course-facts dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.course-facts dd { margin: 0; font-weight: 600; color: var(--navy); }
.uni-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; list-style: none; padding: 0; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; color: var(--navy); font-weight: 500; background: #fff; }
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination [aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .disabled { opacity: .45; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tabs a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--navy); font-size: .9rem; font-weight: 500; background: #fff; }
.tabs a:hover { border-color: var(--primary); }
.tabs a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Test prep */
.test-card { --accent: var(--primary); border-top: 5px solid var(--accent); }
.test-card .test-name { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1; }
.batch-table td:first-child { font-weight: 600; color: var(--navy); }

/* Team */
.team-card { text-align: center; }
.team-card .avatar { margin: 0 auto 14px; }
.team-card h3 { margin-bottom: 2px; font-size: 1.05rem; }
.team-card .role { color: var(--primary); font-size: .88rem; font-weight: 600; margin-bottom: 10px; }
.team-card p { font-size: .9rem; color: var(--muted); }
.value-card { padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.value-card .service-icon { margin-bottom: 14px; }
.mv-card { padding: 32px; border-radius: 20px; color: #fff; }
.mv-card h2 { color: #fff; font-size: 1.4rem; display: flex; gap: 10px; align-items: center; }
.mv-card p { color: rgba(255, 255, 255, .92); margin: 0; font-size: 1.05rem; }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .ci { width: 44px; height: 44px; border-radius: 12px; background: var(--bg); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.contact-list strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: .92rem; }
.contact-list a { color: var(--text); text-decoration: none; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: var(--bg); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* Thank you / errors */
.center-card { max-width: 640px; margin: 0 auto; text-align: center; }
.big-icon { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 20px; background: #d7f5f1; color: #0b6b60; }
.big-icon .icon { width: 40px; height: 40px; }
.error-code { font-family: var(--font-head); font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; line-height: 1; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .78); padding: 64px 0 0; font-size: .93rem; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer .btn-gold, .site-footer .btn-gold:hover { color: var(--navy); }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; } }
.logo-chip { display: inline-block; background: #fff; border-radius: 14px; padding: 10px 14px; line-height: 0; margin-bottom: 18px; }
.footer-brand .logo-chip img { height: 52px; width: auto; }
.site-footer h2 { color: #fff; font-size: 1rem; margin-bottom: 18px; letter-spacing: .02em; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { color: var(--gold); margin-top: 3px; }
.social-links { display: flex; gap: 10px; margin-top: 20px; }
.social-links a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, color .2s; }
.social-links a:hover { background: var(--gold); color: var(--navy); }
.footer-bottom { margin-top: 48px; padding: 20px 0 calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.footer-divider { display: flex; flex-direction: column; gap: 3px; width: 56px; margin-bottom: 16px; }
.footer-divider i { height: 3px; border-radius: 3px; background: var(--gold); }
.footer-divider i:nth-child(2) { width: 65%; opacity: .7; }

/* Floating WhatsApp */
.wa-float { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .35); transition: transform .25s ease, opacity .25s ease, visibility .25s; }
.wa-float:hover { transform: scale(1.07); color: #fff; }
.wa-float.is-tucked { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8); }
@media (max-width: 767px) {
  .wa-float { width: 54px; height: 54px; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
  /* While typing (on-screen keyboard open) the button would sit over fields and submit buttons */
  body:has(input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus) .wa-float { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8); }
}
.wa-float .icon { width: 30px; height: 30px; }
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Scroll reveal (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-delay-1 { transition-delay: .08s; } .js .reveal-delay-2 { transition-delay: .16s; } .js .reveal-delay-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  /* No auto-scroll: one swipeable row, without the duplicate copy that only exists for the seamless loop */
  .logo-marquee { overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; mask-image: none; -webkit-mask-image: none; }
  .logo-track { animation: none; padding: 0 16px; }
  .logo-item[aria-hidden="true"] { display: none; }
}

@media print {
  .site-header, .site-footer, .wa-float, .announce, .hero-card, .cta-band { display: none !important; }
}

/* Keep menu labels on one line next to the full-size logo */
.main-nav a.nav-link { white-space: nowrap; }
@media (min-width: 1180px) and (max-width: 1279px) {
  .brand img { height: 46px; }
  .main-nav a.nav-link { padding: 10px 8px; font-size: .9rem; }
  .header-cta { padding: 10px 16px; }
}

/* Three-up stats strip (home + about) */
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stats--3 .stat { border-bottom: 0; border-right: 1px solid var(--line); padding: 20px 8px; }
.stats--3 .stat:last-child { border-right: 0; }
.stats--3 .stat-label { font-size: .82rem; line-height: 1.35; display: block; }
@media (min-width: 768px) { .stats--3 .stat { padding: 28px 16px; } .stats--3 .stat-label { font-size: .9rem; } }
@media (min-width: 1024px) {
  .stats--stack { grid-template-columns: 1fr; }
  .stats--stack .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats--stack .stat:last-child { border-bottom: 0; }
}

/* Hero image (replaces the callback card) */
.hero-media { margin: 0; position: relative; }
.hero-media { border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(16, 23, 63, .55); border: 4px solid rgba(255, 255, 255, .9); background: #fff; line-height: 0; }
.hero-media picture, .hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } }
/* Hero headline: two clean lines – "Your Leap to" / "World-Class Education" */
.hero h1 { font-size: clamp(1.9rem, 6.4vw, 2.3rem); line-height: 1.18; letter-spacing: -.015em; }
.hero h1 .accent { display: block; }
.nowrap { white-space: nowrap; }
@media (min-width: 768px) { .hero h1 { font-size: clamp(2.3rem, 3.4vw, 2.85rem); } }

/* Header spans the full width so the logo sits at the far left */
.site-header .header-inner { max-width: none; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
@media (max-width: 400px) { .site-header .header-inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }
/* 40px gutters only from 1440px: at 1280–1439px the full menu + CTA needs the room (it overflowed at 1280) */
@media (min-width: 1440px) { .site-header .header-inner { padding-left: max(40px, env(safe-area-inset-left)); padding-right: max(40px, env(safe-area-inset-right)); } }
@media (min-width: 768px) and (max-width: 1179px) {
  .header-cta { display: inline-flex; margin-left: auto; }
  .nav-toggle { margin-left: 8px; }
}

/* Decorative landmark stickers in the side gutters (wide screens only) */
.has-sticker { position: relative; overflow: hidden; }
.sticker { display: none; position: absolute; z-index: 0; pointer-events: none; will-change: transform; transform-origin: 50% 100%; }
.sticker img { display: block; width: auto; height: 100%; filter: drop-shadow(0 14px 20px rgba(16, 23, 63, .18)); }
.has-sticker > .container { position: relative; z-index: 1; }
@media (min-width: 1600px) {
  /* gutter = (viewport - 1200px container) / 2; sticker sits centred in it */
  .sticker { display: block; }
  .sticker--left { height: 280px; top: 120px; left: calc((100vw - 1200px) / 4 - 58px); }
}
@media (min-width: 1700px) { .sticker--left { height: 320px; } }

/* Right-gutter sticker: sized by the gutter width so it never touches the cards */
.sticker--right { --w: clamp(104px, calc((100vw - 1200px) / 2 - 40px), 230px); width: var(--w); bottom: 70px; right: calc(((100vw - 1200px) / 2 - var(--w)) / 2); }
.sticker--right img { width: 100%; height: auto; }

/* Larger hero image: wider hero container + image gets the bigger column */
@media (min-width: 960px) {
  .hero .container { max-width: 1360px; }
  .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); gap: 44px; }
  .hero h1 { font-size: clamp(2.2rem, 3vw, 2.7rem); }
  .hero-sub { font-size: 1.05rem; }
  .hero-media { border-radius: 24px; }
}
@media (min-width: 1500px) {
  .hero .container { max-width: 1440px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; }
  .hero h1 { font-size: 2.75rem; }
}

/* =====================================================================
   Services "window" slider
   Default (mobile / no JS / reduced motion): a simple stacked list.
   .is-enhanced (desktop + JS): the section pins and slides change one by
   one inside a window frame as the visitor scrolls.
   ===================================================================== */
.svc-scroll { padding: 56px 0; }
.svc-nav { margin-bottom: 28px; }
.svc-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0; }
.svc-nav .ql-divider { margin-left: 0; }
.svc-steps, .svc-hint, .svc-window-bar { display: none; }
.svc-slides { display: grid; gap: 20px; }
.svc-slide { --accent: var(--primary); display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.svc-visual { position: relative; display: grid; place-items: center; min-height: 220px; background: radial-gradient(circle at 50% 45%, #fff 0%, var(--bg) 70%); overflow: hidden; }
.svc-visual::before { content: ''; position: absolute; inset: 0; background: var(--accent); opacity: .08; }
.svc-visual picture { position: relative; display: block; }
.svc-visual--sticker img { width: min(78%, 320px); height: auto; margin: 0 auto; filter: drop-shadow(0 18px 24px rgba(16, 23, 63, .18)); }
.svc-visual--photo picture { position: absolute; inset: 0; }
.svc-visual--photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-visual-icon { position: relative; width: 120px; height: 120px; border-radius: 32px; display: grid; place-items: center; color: var(--accent); background: #fff; box-shadow: var(--shadow); }
.svc-visual-icon .icon { width: 56px; height: 56px; }
.svc-copy { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
/* Accent deepened towards navy so small numerals stay ≥ 4.5:1 on white (raw teal/coral/gold are ~2.5–2.9:1) */
.svc-num { font-family: var(--font-head); font-weight: 700; font-size: .85rem; letter-spacing: .1em; color: var(--navy); color: color-mix(in srgb, var(--accent) 62%, var(--navy)); margin-bottom: 6px; }
.svc-copy h3 { font-size: 1.35rem; margin-bottom: 8px; }
.svc-copy h3 a { color: inherit; text-decoration: none; }
.svc-copy p { color: var(--muted); }
.svc-feats { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 8px; }
.svc-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; }
.svc-feats .icon-sm { color: var(--accent); margin-top: 4px; }
@media (min-width: 720px) { .svc-slide { grid-template-columns: 1fr 1fr; } .svc-visual { min-height: 300px; } }
.svc-swipe-hint { display: none; }
/* Phones: one service per swipe (like the desktop window slider) instead of a ~7,000px stack.
   scroll-padding matches the padding so the first card already sits on its snap point at load. */
@media (max-width: 719px) {
  .svc-slides { grid-auto-flow: column; grid-auto-columns: 86%; align-items: start; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 12px; scrollbar-width: none; }
  .svc-slides::-webkit-scrollbar { display: none; }
  /* position: relative keeps the links' absolutely-positioned .sr-only text inside the scroller
     (otherwise it escapes to the page and widens it) */
  .svc-slide { position: relative; scroll-snap-align: start; grid-template-rows: auto 1fr; }
  .svc-visual { min-height: 190px; }
  .svc-copy { padding: 20px; }
  .svc-swipe-hint { display: flex; align-items: center; gap: 6px; margin: -12px 0 14px; }
}

/* ---------- Enhanced: pinned window slider ---------- */
.svc-scroll.is-enhanced { padding: 0; height: calc(var(--count) * 75vh + 25vh); position: relative; }
.is-enhanced .svc-sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; align-items: center; overflow: hidden; }
.is-enhanced .svc-stage { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: center; }
.is-enhanced .svc-nav { margin: 0; }
.is-enhanced .svc-steps { display: grid; gap: 4px; list-style: none; padding: 0; margin: 22px 0 18px; }
.svc-steps button { width: 100%; display: flex; gap: 14px; align-items: center; text-align: left; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; font-family: var(--font-head); font-weight: 500; font-size: .95rem; transition: background .4s, color .4s; }
.svc-steps .n { font-weight: 700; font-size: .8rem; letter-spacing: .08em; min-width: 22px; } /* no opacity: dimmed numerals fell to 3:1 contrast */
.svc-steps button:hover { color: var(--navy); background: var(--bg); }
.svc-steps button[aria-current="step"] { background: var(--navy); color: #fff; }
.svc-steps button[aria-current="step"] .n { color: var(--gold); opacity: 1; }
.is-enhanced .svc-hint { display: flex; align-items: center; gap: 6px; margin: 0; }
.svc-hint .icon-sm { animation: svcHint 1.8s ease-in-out infinite; }
@keyframes svcHint { 50% { transform: translateY(4px); } }

.is-enhanced .svc-window { position: relative; height: min(560px, calc(100vh - var(--header-h) - 90px)); background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 70px -30px rgba(16, 23, 63, .35); overflow: hidden; display: flex; flex-direction: column; }
.is-enhanced .svc-window-bar { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #fbfbfe; flex-shrink: 0; }
.svc-window-bar .dots { display: flex; gap: 7px; }
.svc-window-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff6b6b; }
.svc-window-bar .dots i:nth-child(2) { background: var(--gold); }
.svc-window-bar .dots i:nth-child(3) { background: #14B8A6; }
.svc-count { font-family: var(--font-head); font-size: .85rem; color: var(--muted); }
.svc-count b { color: var(--navy); }
.svc-progress { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.svc-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--violet)); transition: width .9s cubic-bezier(.65, 0, .35, 1); }

.is-enhanced .svc-slides { position: relative; flex: 1; display: block; }
.is-enhanced .svc-slide { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: 1.05fr 1fr;
  transform: translate3d(0, 100%, 0); visibility: hidden;
  transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), visibility 0s linear 1.1s; }
.is-enhanced .svc-slide.is-past { transform: translate3d(0, -100%, 0); }
.is-enhanced .svc-slide.is-active { transform: none; visibility: visible; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), visibility 0s; }
.is-enhanced .svc-visual { min-height: 0; height: 100%; }
.is-enhanced .svc-visual--sticker img { width: min(82%, 380px); }
.is-enhanced .svc-copy { justify-content: center; padding: 32px 40px; }
/* Copy fades in slightly after the slide arrives */
.is-enhanced .svc-copy > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.is-enhanced .svc-slide.is-active .svc-copy > * { opacity: 1; transform: none; transition-delay: .45s; }
.is-enhanced .svc-slide.is-active .svc-copy > :nth-child(2) { transition-delay: .52s; }
.is-enhanced .svc-slide.is-active .svc-copy > :nth-child(3) { transition-delay: .59s; }
.is-enhanced .svc-slide.is-active .svc-copy > :nth-child(4) { transition-delay: .66s; }
.is-enhanced .svc-slide.is-active .svc-copy > :nth-child(5) { transition-delay: .73s; }
@media (min-width: 1280px) { .is-enhanced .svc-stage { grid-template-columns: 340px minmax(0, 1fr); gap: 72px; } }

/* Home-page variant of the services slider: grey band + wider stage */
.svc-scroll--alt { background: var(--bg); }
.svc-scroll--alt .svc-sticky { background: var(--bg); }
.svc-scroll--alt.is-enhanced { padding: 0; }
@media (min-width: 1024px) {
  .svc-scroll--wide .svc-stage { max-width: 1360px; }
  .svc-scroll--wide.is-enhanced .svc-window { height: min(600px, calc(100vh - var(--header-h) - 80px)); }
}
@media (min-width: 1500px) {
  .svc-scroll--wide .svc-stage { max-width: 1440px; }
  .svc-scroll--wide.is-enhanced .svc-stage { grid-template-columns: 360px minmax(0, 1fr); gap: 80px; }
}

/* =====================================================================
   Hero eligibility widget (country card + 3-step popup)
   ===================================================================== */
.elig-card { background: #fff; color: var(--text); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-lg); max-width: 520px; margin-top: 8px; }
.elig-card .alert { margin-bottom: 12px; }
.elig-q { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--navy); line-height: 1.35; margin: 0 0 14px; }
.elig-diamond { flex-shrink: 0; width: 11px; height: 11px; margin-top: .42em; background: var(--primary); transform: rotate(45deg); border-radius: 2px; box-shadow: 3px 3px 0 var(--gold); }
.elig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.elig-tile { position: relative; display: block; cursor: pointer; padding: 0; border: 0; background: none; text-align: left; font: inherit; }
.elig-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.elig-tile-box { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 66px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.elig-tile:hover .elig-tile-box { border-color: #c9cdea; }
.elig-tile input:checked + .elig-tile-box { border-color: var(--primary); background: #f1f2fc; box-shadow: inset 0 0 0 1px var(--primary); }
.elig-tile input:focus-visible + .elig-tile-box, .elig-more:focus-visible .elig-tile-box { outline: 3px solid var(--gold); outline-offset: 2px; }
.elig-tile-name { font-size: .9rem; font-weight: 500; color: var(--navy); line-height: 1.25; }
.elig-flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(16, 23, 63, .12); flex-shrink: 0; }
.elig-flag-sm { width: 18px; height: 18px; margin-left: -6px; border: 2px solid #fff; box-shadow: none; }
.elig-flag-sm:first-child { margin-left: 0; }
.elig-stack { display: flex; }
.elig-more .elig-tile-box { align-items: center; justify-content: center; text-align: center; }
.elig-check { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border: 1.5px solid #b9bed6; border-radius: 4px; background: #fff; transition: background-color .2s, border-color .2s; }
input:checked + .elig-tile-box .elig-check, input:checked + .elig-row-box .elig-check { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; border-color: var(--primary); }
.elig-continue { margin-top: 16px; }
.elig-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.elig-foot .icon-sm { color: #0e9384; }
.elig-error { margin: 10px 0 0; font-size: .85rem; color: #b42318; }
.elig-card.is-shake { animation: eligShake .4s; }
@keyframes eligShake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

/* ---------- Popup ---------- */
.elig-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.elig-modal[hidden] { display: none; }
.elig-backdrop { position: absolute; inset: 0; background: rgba(16, 23, 63, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
.elig-dialog { position: relative; width: min(480px, 100%); max-height: min(720px, calc(100vh - 32px)); display: flex; flex-direction: column; background: #fff; border-radius: 22px; box-shadow: 0 40px 80px -24px rgba(16, 23, 63, .5); overflow: hidden; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.elig-modal.is-open .elig-backdrop { opacity: 1; }
.elig-modal.is-open .elig-dialog { opacity: 1; transform: none; }
html.elig-lock { overflow: hidden; }
.elig-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.elig-icon-btn { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; }
.elig-icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.elig-icon-btn .icon { width: 18px; height: 18px; }
.elig-icon-btn[data-elig-back][disabled] { visibility: hidden; }
.elig-steps { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.elig-steps li { display: flex; align-items: center; gap: 6px; }
.elig-steps li + li::before { content: ''; width: 14px; height: 1.5px; background: var(--line); }
.elig-steps button, .elig-steps span { border: 0; font: 600 .74rem var(--font-head); padding: 5px 10px; border-radius: 999px; background: #eef0f6; color: #8a90a8; white-space: nowrap; }
.elig-steps button { cursor: pointer; }
.elig-steps button:disabled { cursor: default; }
.elig-steps .is-done button { background: #e6e8fb; color: var(--primary); }
.elig-steps .is-current button, .elig-steps .is-current span { background: var(--primary); color: #fff; }
.elig-last { flex: 1; margin: 0; font-size: 1.05rem; }
.elig-body { flex: 1; overflow-y: auto; padding: 6px 20px 16px; overscroll-behavior: contain; }
.elig-step .elig-q { margin-top: 10px; }
.elig-step .elig-q ~ .elig-q { margin-top: 22px; }
.elig-input, .elig-select select, .elig-input-icon input, .elig-phone input { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; color: var(--text); background: #fff; }
.elig-input:focus, .elig-select select:focus, .elig-input-icon input:focus, .elig-phone:focus-within { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(43, 58, 159, .13); }
.elig-label { margin: 18px 0 10px; font: 600 .72rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: #8a90a8; }
.elig-grid--modal .elig-tile-box { min-height: 62px; }
.elig-list { display: grid; gap: 8px; }
.elig-row { position: relative; display: block; cursor: pointer; }
.elig-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.elig-row-box { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 44px 0 14px; border: 1.5px solid var(--line); border-radius: 12px; font-weight: 500; color: var(--navy); transition: border-color .2s, background-color .2s; }
.elig-row-box .elig-check { top: 50%; right: 14px; transform: translateY(-50%); width: 20px; height: 20px; }
.elig-row input:checked + .elig-row-box { border-color: var(--primary); background: #f1f2fc; }
.elig-row input:focus-visible + .elig-row-box { outline: 3px solid var(--gold); outline-offset: 2px; }
.elig-empty { font-size: .88rem; color: var(--muted); margin: 6px 0; }
.elig-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.elig-chip { position: relative; cursor: pointer; }
.elig-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.elig-chip > span { position: relative; display: grid; place-items: center; min-height: 48px; padding: 8px 6px; text-align: center; border: 1.5px solid var(--line); border-radius: 12px; font-size: .9rem; font-weight: 500; color: var(--navy); transition: border-color .2s, background-color .2s; }
.elig-chip input:checked + span { border-color: var(--primary); background: #f1f2fc; color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.elig-chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.elig-reco { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: #dcfae6; color: #067647; font-style: normal; font-size: .64rem; font-weight: 600; white-space: nowrap; }
.elig-reco .icon-sm { width: 10px; height: 10px; }
.elig-select { position: relative; }
.elig-select > .icon-sm { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8a90a8; pointer-events: none; }
.elig-select select { padding-left: 38px; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
/* Course interest type-ahead (eligibility popup step 2) */
.elig-combo { position: relative; }
.elig-combo-field input { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px 0 38px; font: inherit; color: var(--text); background: #fff; }
.elig-combo-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(43, 58, 159, .13); }
.elig-combo-field input::placeholder { color: #8a90a8; }
.elig-combo-list { list-style: none; margin: 6px 0 0; padding: 6px; max-height: 220px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 14px 30px -18px rgba(16, 23, 63, .45); }
.elig-combo-list li { padding: 9px 12px; border-radius: 8px; font-size: .92rem; line-height: 1.35; color: var(--navy); cursor: pointer; }
.elig-combo-list li[aria-selected="true"], .elig-combo-list li:hover { background: #f1f2fc; color: var(--primary); }
.elig-combo-list mark { background: none; color: inherit; font-weight: 700; }
.elig-combo-name { display: block; }
.elig-combo-uni { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); }
.elig-combo-list li[aria-selected="true"] .elig-combo-uni, .elig-combo-list li:hover .elig-combo-uni { color: #5a63a8; }
.elig-combo-list .elig-combo-none { cursor: default; color: var(--muted); font-size: .85rem; }
.elig-combo-list .elig-combo-none:hover { background: none; color: var(--muted); }
.elig-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 18px; }
.elig-pill { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 10px; border-radius: 10px; background: var(--bg); font-size: .85rem; font-weight: 600; color: var(--navy); text-align: center; }
.elig-pill .icon-sm { color: var(--primary); }
.elig-pill--wide { grid-column: 1 / -1; flex-wrap: wrap; }
.elig-pill .elig-flag { width: 16px; height: 16px; }
.elig-field { display: grid; gap: 8px; margin-bottom: 16px; }
.elig-field label { font-size: .9rem; font-weight: 600; color: var(--navy); }
.elig-input-icon { position: relative; }
.elig-input-icon .icon-sm { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8a90a8; }
.elig-input-icon input { padding-left: 40px; }
.elig-phone { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.elig-phone span { padding: 0 12px 0 14px; font-weight: 500; color: var(--navy); border-right: 1px solid var(--line); line-height: 24px; }
.elig-phone input { border: 0; min-height: 46px; letter-spacing: .04em; }
.elig-phone input:focus { outline: none; box-shadow: none; }
.elig-field.is-invalid input, .elig-field.is-invalid .elig-phone { border-color: #d92d20; }
.elig-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; font-size: .78rem; color: #8a90a8; }
.elig-foot-bar { padding: 14px 20px 18px; border-top: 1px solid var(--line); background: #fff; }
.elig-foot-bar .elig-error { margin: 0 0 10px; text-align: center; }
.elig-foot-bar .btn[disabled] { background: #e3e6ef; color: #8a90a8; box-shadow: none; opacity: 1; }
@media (max-width: 520px) {
  .elig-modal { padding: 0; place-items: end center; }
  /* dvh tracks the visible area (browser bars, on-screen keyboard) so the Continue button stays reachable */
  .elig-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; transform: translateY(40px); }
  .elig-foot-bar { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .elig-steps button, .elig-steps span { padding: 5px 8px; font-size: .7rem; }
  .elig-steps li + li::before { width: 8px; }
}
@media (max-width: 400px) { .elig-card { padding: 16px; } .elig-grid { gap: 8px; } .elig-tile-box { padding: 9px 10px; } .elig-tile-name { font-size: .84rem; } }
@media (min-width: 960px) { .hero-copy .elig-card { margin-top: 18px; } }

/* ---------- Offer popup (home) ---------- */
/* The frame is sized from the poster (--pw = real pixel width, --ratio = width / height): the poster fills it edge to edge,
   is never upscaled past its own pixels and never taller than the screen. The form column takes the poster's height
   (it does not stretch the frame) and scrolls only if it must. Wide posters stack above the form below 1100px. */
.offer-modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; }
.offer-modal[hidden] { display: none; }
.offer-backdrop { position: absolute; inset: 0; background: rgba(16, 23, 63, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.offer-dialog { --offer-h: min(900px, calc(100vh - 32px)); --panel-w: 300px; position: relative; display: flex; max-width: 100%; background: #fff; border-radius: 20px; box-shadow: 0 40px 80px -24px rgba(16, 23, 63, .55); overflow: hidden; outline: none; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
@supports (height: 100dvh) { .offer-dialog { --offer-h: min(900px, calc(100dvh - 32px)); } }
.offer-modal.is-open .offer-backdrop { opacity: 1; }
.offer-modal.is-open .offer-dialog { opacity: 1; transform: none; }
html.offer-lock { overflow: hidden; }
.offer-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--navy); box-shadow: 0 2px 10px rgba(16, 23, 63, .2); cursor: pointer; }
.offer-close:hover { background: #fff; color: var(--primary); }
.offer-close .icon { width: 18px; height: 18px; }
.offer-poster { flex: none; background: #fff; }
.offer-poster > a, .offer-poster picture { display: block; }
.offer-img { display: block; width: min(calc(var(--pw) * 1px), calc(100vw - 32px - var(--panel-w)), calc(var(--offer-h) * var(--ratio))); max-width: none; height: auto; }
.offer-panel { flex: 0 0 var(--panel-w); position: relative; }
.offer-panel-inner { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 14px; }
.offer-panel-body { margin: auto 0; }
.offer-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding-right: 40px; font: 600 .7rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.offer-eyebrow::before { content: ''; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--gold); }
.offer-title { margin: 6px 0 4px; font-size: 1.25rem; }
.offer-sub { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.offer-panel .form { margin-top: 10px; }
.offer-panel .form-grid { grid-template-columns: 1fr; gap: 8px; }
.offer-panel .form-grid .span-2 { grid-column: auto; }
.offer-panel .field { gap: 3px; }
.offer-panel .field label { font-size: .8rem; }
.offer-panel .field input:not([type=checkbox]):not([type=radio]), .offer-panel .field select { min-height: 42px; padding: 8px 12px; border-radius: 10px; }
.offer-panel .btn { margin-top: 12px; min-height: 46px; padding-top: 10px; padding-bottom: 10px; font-size: 1rem; }
.offer-panel .form-note { margin: 8px 0 0; font-size: .7rem; line-height: 1.4; }
.offer-preview-note { display: flex; align-items: center; gap: 6px; margin: 0 40px 10px 0; padding: 6px 10px; border-radius: 8px; background: var(--gold-soft); font-size: .76rem; font-weight: 600; color: var(--navy); }
/* Stacked: poster on top at full frame width, form below, whole frame scrolls */
@media (max-width: 720px) {
  .offer-modal { padding: 12px; }
  .offer-dialog { flex-direction: column; width: min(100%, 460px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .offer-img { width: min(100%, calc(var(--pw) * 1px)); margin: 0 auto; }
  .offer-panel { flex: none; }
  .offer-panel-inner { position: static; overflow: visible; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  .offer-eyebrow { padding-right: 0; }
}
@media (max-width: 1100px) {
  .offer-modal { padding: 12px; }
  .offer-dialog--wide { flex-direction: column; width: min(100%, 640px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .offer-dialog--wide .offer-img { width: min(100%, calc(var(--pw) * 1px)); margin: 0 auto; }
  .offer-dialog--wide .offer-panel { flex: none; }
  .offer-dialog--wide .offer-panel-inner { position: static; overflow: visible; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); }
  .offer-dialog--wide .offer-eyebrow { padding-right: 0; }
}
@media (min-width: 560px) and (max-width: 1100px) { .offer-dialog--wide .form-grid { grid-template-columns: 1fr 1fr; } }

/* Centred section title above the services slider */
.svc-head { text-align: center; margin-bottom: 28px; }
.svc-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.svc-head .ql-divider { margin: 14px auto 0; }
.is-enhanced .svc-sticky.has-head { flex-direction: column; justify-content: center; gap: 24px; }
.is-enhanced .svc-sticky.has-head .svc-head { margin: 0; }
.is-enhanced .svc-sticky.has-head > .svc-stage { width: 100%; }
.is-enhanced .has-head .svc-window { height: min(560px, calc(100vh - var(--header-h) - 200px)); }
.svc-scroll--wide.is-enhanced .has-head .svc-window { height: min(580px, calc(100vh - var(--header-h) - 200px)); }
/* Short laptop screens: the centred title already names the section, so the
   left column drops its own heading and the list tightens to keep everything in view */
@media (max-height: 860px) {
  .is-enhanced .has-head .svc-nav > .eyebrow,
  .is-enhanced .has-head .svc-title,
  .is-enhanced .has-head .svc-nav > .ql-divider { display: none; }
  .is-enhanced .has-head .svc-steps { margin-top: 0; }
  .is-enhanced .has-head .svc-steps button { padding: 8px 14px; }
  .is-enhanced .svc-sticky.has-head { gap: 18px; }
  .is-enhanced .has-head .svc-head h2 { font-size: 2rem; }
}

/* ---------- Coaching page ---------- */
.coach-hero { position: relative; overflow: hidden; color: #fff; padding: 40px 0 72px; background: radial-gradient(circle at 85% 20%, rgba(212, 33, 143, .45), transparent 45%), radial-gradient(circle at 10% 90%, rgba(227, 169, 43, .25), transparent 40%), linear-gradient(125deg, #10173F 0%, #2B3A9F 55%, #6a2bb8 100%); }
.coach-hero::after { content: ''; position: absolute; inset: auto -10% -60px -10%; height: 120px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.coach-hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
.coach-hero-grid > * { min-width: 0; }
.coach-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); font-family: var(--font-head); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--gold-soft); margin-bottom: 18px; }
.coach-hero h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.5rem); margin-bottom: 16px; }
.coach-hero h1 span { display: block; background: linear-gradient(90deg, #ffd36b, #ff7ac6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.coach-lead { color: rgba(255, 255, 255, .9); font-size: 1.08rem; max-width: 600px; }
.coach-points { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; font-size: .93rem; }
.coach-points li { display: flex; align-items: center; gap: 8px; color: #fff; }
.coach-points .icon { color: var(--gold); }
.coach-hero .hero-ctas { margin: 0; }
.coach-poster { position: relative; margin: 0 auto; max-width: 380px; transform: rotate(2.5deg); }
.coach-poster picture { display: block; }
.coach-poster img { width: 100%; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .12); }
.coach-sticker { position: absolute; left: -18px; bottom: 26px; transform: rotate(-10deg); width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: #E5484D; color: #fff; font-family: var(--font-head); font-size: .78rem; font-weight: 600; text-transform: uppercase; line-height: 1.1; box-shadow: 0 10px 24px -8px rgba(229, 72, 77, .7), 0 0 0 4px #fff; }
.coach-sticker strong { display: block; font-size: .95rem; }
@media (min-width: 960px) {
  .coach-hero { padding: 56px 0 110px; }
  .coach-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; }
}
@media (max-width: 420px) { .coach-points { grid-template-columns: 1fr; } }
/* Phones: inset the poster so the "Affordable price" sticker (offset to the left) isn't cut off by the screen edge */
@media (max-width: 479px) {
  .coach-poster { width: calc(100% - 24px); margin-right: 0; }
  .coach-sticker { left: -14px; width: 92px; height: 92px; font-size: .72rem; }
}

.coach-modes-wrap { position: relative; z-index: 2; margin-top: -48px; }
.coach-mode { display: flex; gap: 18px; align-items: flex-start; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.coach-mode h2 { font-size: 1.3rem; margin: 6px 0; }
.coach-mode p { font-size: .95rem; }
.coach-mode-icon { width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: var(--gradient); }
.coach-mode--offline .coach-mode-icon { background: linear-gradient(135deg, #E5484D, #c2187a); }
.coach-mode--offline { border-top: 4px solid var(--gold); }

.coach-group { margin-top: 48px; }
.coach-group:first-of-type { margin-top: 0; }
.coach-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px dashed var(--line); }
.coach-group-head h3 { margin: 0; font-size: 1.3rem; }
.coach-card { --accent: var(--primary); position: relative; display: flex; flex-direction: column; padding: 24px 22px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.coach-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.coach-card::after { content: ''; position: absolute; width: 150px; height: 150px; right: -70px; top: -70px; border-radius: 50%; background: var(--accent); opacity: .07; transition: transform .3s; }
.coach-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.coach-card:hover::after { transform: scale(1.5); }
.coach-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.coach-mark { position: relative; z-index: 1; height: 64px; min-width: 0; flex: 1; display: flex; align-items: center; }
.coach-logo { display: block; width: auto; height: auto; max-width: min(150px, 100%); max-height: 46px; }
.coach-logo.is-flag { height: 38px; max-height: none; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.coach-modes { position: relative; z-index: 1; flex-shrink: 0; }
.coach-logo-row { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.coach-logo-row li { height: 40px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.coach-logo-sm { display: block; width: auto; height: 100%; max-width: 84px; }
.coach-logo-sm.is-flag { height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.coach-modes { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.coach-card h4 { font-size: 1.12rem; margin-bottom: 6px; }
.coach-card .facts { margin: 4px 0 18px; font-size: .88rem; }
.coach-card .facts .icon-sm { color: var(--accent); margin-top: 5px; }
.coach-card-cta { margin-top: auto; min-height: 44px; color: var(--navy); color: color-mix(in srgb, var(--accent) 62%, var(--navy)); font-size: .9rem; }
.coach-card-cta:hover { color: var(--navy); }

.coach-late { position: relative; overflow: hidden; display: grid; gap: 22px; align-items: center; padding: 32px 24px; border-radius: 24px; color: #fff; background: linear-gradient(120deg, #10173F 0%, #1e2b8f 60%, #2B3A9F 100%); }
.coach-late::before { content: ''; position: absolute; right: -80px; top: -100px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 169, 43, .35), transparent 70%); }
.coach-late > * { position: relative; }
.coach-late .eyebrow { color: var(--gold); margin-bottom: 6px; }
.coach-late h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 6px; }
.coach-late p { margin: 0; color: rgba(255, 255, 255, .88); }
.coach-late-clock { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); box-shadow: 0 0 0 8px rgba(227, 169, 43, .2); }
.coach-late-clock .icon { width: 32px; height: 32px; }
.coach-late-time { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; line-height: 1; color: #fff; white-space: nowrap; }
.coach-late-time small { font-size: .9rem; color: var(--gold); margin-left: 3px; }
.coach-late-time span { font-size: .85rem; font-weight: 500; opacity: .7; margin: 0 10px; }
@media (min-width: 1000px) {
  .coach-late { grid-template-columns: auto 1fr auto auto; gap: 32px; padding: 40px 48px; }
}
.coach-modes-wrap .grid > *, .coach-mode > div { min-width: 0; }
@media (max-width: 520px) { .coach-mode { flex-direction: column; padding: 22px; } }

/* ---------- University logo tiles (official SVG logos) ---------- */
.uni-logo { flex-shrink: 0; width: 112px; height: 56px; padding: 6px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.uni-logo picture { display: contents; }
.uni-logo img { width: auto; height: auto; max-width: 96px; max-height: 42px; object-fit: contain; }
.uni-logo--sm { width: 92px; height: 48px; padding: 5px 7px; border-radius: 10px; }
.uni-logo--sm img { max-width: 78px; max-height: 36px; }
.logo-item .uni-logo { border: 0; padding: 0 4px; }
.page-hero-marks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-hero-marks .page-hero-flag { margin-bottom: 0; }
.uni-logo--hero { width: auto; min-width: 140px; max-width: 220px; height: 72px; padding: 10px 16px; border: 0; border-radius: 14px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); }
.uni-logo--hero img { max-width: 188px; max-height: 52px; }

/* ---------- Touch screens: standalone links/buttons get a ≥44px tall tap area ----------
   Kept last so it wins over the component rules above; desktop (fine pointer) sizing is unchanged.
   Negative margins offset the padding where the visual spacing should stay the same. */
@media (pointer: coarse) {
  .btn-sm, .link-arrow, a.badge { min-height: 44px; }
  .toc a { padding-top: 12px; padding-bottom: 12px; }
  .footer-links { gap: 0; }
  .footer-links a { display: inline-block; padding: 10px 0; }
  .footer-contact a, .contact-list a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .footer-bottom a { display: inline-block; padding: 14px 0; margin: -14px 0; }
}

/* =====================================================================
   Home hero – banner layout (scoped to .hero--banner), built from the reference banner.
   ≥1200px: the background (students on the left, navy centre, campus right) spans the hero,
   anchored bottom-left like the reference; columns are % of the viewport:
     headline 31.9% · country card 54.8–79.25% · highlights from 82.25% · stats pill 33–78%.
   Spacing/type use vw (1vw = 20px on the 2000px reference) with min/max clamps for legibility.
   <1200px: stacked – headline, card, highlights, then a photo band with the stats pill.
   ===================================================================== */
.hero--banner { --hb-gold: #F7B500; --hb-navy: #014C6B; --hb-ink: #0B2347; --band: 330px;
  background: var(--hb-navy); padding: 32px 0 28px; isolation: isolate; } /* solid: matches the band fade, no seam */
.hero--banner::before, .hero--banner::after { display: none; }
.hero--banner .hero-bg { position: absolute; left: 0; right: 0; bottom: 0; height: var(--band); z-index: 0; }
.hero--banner .hero-bg picture, .hero--banner .hero-bg img { display: block; width: 100%; height: 100%; }
.hero--banner .hero-bg img { object-fit: cover; object-position: left 30%; }
.hero--banner .hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--hb-navy) 0%, rgba(1, 76, 107, 0) 28%, rgba(1, 76, 107, 0) 62%, rgba(1, 76, 107, .55) 100%); }

.hero--banner .hero-banner { position: relative; z-index: 2; display: grid; gap: 22px; max-width: 640px; margin: 0 auto; padding: 0 16px;
  grid-template-areas: "copy" "form" "feat" "stats"; }
.hero--banner .hero-copy { grid-area: copy; }
.hero--banner .hero-form { grid-area: form; }
.hero--banner .hero-features { grid-area: feat; }
.hero--banner .hero-stats { grid-area: stats; margin-top: calc(var(--band) - 120px); }

.hero--banner .eyebrow { color: #fff; font-weight: 500; letter-spacing: .02em; margin-bottom: 10px; }
.hero--banner h1 { line-height: 1.07; letter-spacing: -.01em; margin: 0; }
.hero--banner h1 .accent { color: var(--hb-gold); }
.hero--banner h1::after { content: ""; display: block; width: 70%; max-width: 340px; aspect-ratio: 340 / 30; margin-top: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 30'%3E%3Cpath d='M2 27C90 14 210 6 338 4 220 12 110 20 6 29Z' fill='%23F7B500'/%3E%3C/svg%3E") left center / 100% 100% no-repeat; }

.hero--banner .elig-card { margin: 0; max-width: none; box-shadow: 0 24px 50px -24px rgba(0, 20, 35, .7); }
.hero--banner .elig-continue { background: linear-gradient(180deg, #FFC21A, #F5AE00); color: var(--hb-ink); font-weight: 700; }

.hero--banner .hero-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hero--banner .hero-features li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; line-height: 1.25; color: #fff; }
.hero--banner .hero-feature-icon { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: var(--hb-gold); }
.hero--banner .hero-feature-icon .icon { width: 46%; height: 46%; }

.hero--banner .stats { background: #fff; border-radius: 18px; box-shadow: 0 20px 40px -18px rgba(0, 20, 35, .6); }
.hero--banner .stat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 0; }
.hero--banner .stat + .stat { border-left: 1.5px solid #d3dae5; }
.hero--banner .stat-icon { color: var(--hb-ink); line-height: 0; }
.hero--banner .stat-icon .icon { width: 26px; height: 26px; }
.hero--banner .stat-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero--banner .stat-num, .hero--banner .stat:nth-child(n) .stat-num { color: var(--hb-ink); font-size: 1.45rem; }
.hero--banner .stat-label { color: #1b2a44; font-weight: 500; }

@media (max-width: 419px) { .hero--banner h1 { font-size: min(1.9rem, 7.7vw); } }
@media (min-width: 600px) and (max-width: 1199px) {
  .hero--banner { --band: 420px; padding: 44px 0 32px; }
  .hero--banner .hero-banner { padding: 0 32px; gap: 26px; }
  .hero--banner .hero-features li { font-size: .95rem; }
  .hero--banner .hero-feature-icon { width: 60px; height: 60px; }
  .hero--banner .hero-stats { margin-top: calc(var(--band) - 110px); }
  .hero--banner .stat { flex-direction: row; justify-content: center; gap: 12px; }
  .hero--banner .stat-text { align-items: flex-start; text-align: left; }
  .hero--banner .stats { border-radius: 999px; }
}

@media (min-width: 1200px) {
  .hero--banner { padding: 0; background: var(--hb-navy); }
  .hero--banner .hero-bg { top: 0; height: auto; }
  .hero--banner .hero-bg img { object-position: left center; }
  .hero--banner .hero-bg::after { display: none; }
  .hero--banner .hero-banner { max-width: none; margin: 0; min-height: calc(100vw * 725 / 2170); align-items: start; align-content: center; /* hero = the banner image proportions (3:1), so the whole background shows; content centred vertically */
    grid-template-columns: 31.9% 21.5% 1.4% 24.45% 3% minmax(0, 1fr);
    grid-template-areas: ". copy . form . feat" ". stats stats stats . .";
    grid-template-rows: auto auto; row-gap: clamp(18px, 1.35vw, 30px); column-gap: 0;
    padding: clamp(20px, 2vw, 48px) 0; } /* no side padding: column %s are of the full width */

  .hero--banner .hero-copy { padding-top: 1.5vw; }
  .hero--banner .eyebrow { font-size: clamp(.66rem, .78vw, .98rem); margin-bottom: 1.2vw; white-space: nowrap; } /* one line, as in the reference */
  .hero--banner h1 { font-size: clamp(2.3rem, 3.3vw, 4.2rem); }
  .hero--banner h1::after { width: 16.9vw; max-width: none; margin-top: .9vw; }

  .hero--banner .elig-card { padding: clamp(12px, .95vw, 22px) clamp(14px, 1.15vw, 24px); border-radius: clamp(14px, 1.1vw, 22px); }
  .hero--banner .elig-q { font-size: clamp(.78rem, 1vw, 1.25rem); font-weight: 700; margin-bottom: clamp(6px, .55vw, 12px); }
  .hero--banner .elig-grid { gap: clamp(6px, .5vw, 10px); }
  .hero--banner .elig-tile-box { min-height: clamp(40px, 2.4vw, 52px); padding: clamp(4px, .3vw, 7px) clamp(8px, .6vw, 12px); gap: 2px; border-radius: 10px; }
  .hero--banner .elig-tile-name { font-size: clamp(.74rem, .8vw, 1rem); }
  .hero--banner .elig-flag { width: clamp(16px, 1.1vw, 22px); height: clamp(16px, 1.1vw, 22px); }
  .hero--banner .elig-check { top: clamp(6px, .45vw, 10px); right: clamp(6px, .45vw, 10px); }
  .hero--banner .elig-continue { margin-top: clamp(10px, .8vw, 16px); min-height: clamp(40px, 2.3vw, 50px); padding-top: 0; padding-bottom: 0; font-size: clamp(.95rem, 1.05vw, 1.25rem); }
  .hero--banner .elig-foot { margin-top: clamp(8px, .55vw, 12px); font-size: clamp(.74rem, .8vw, .95rem); }

  .hero--banner .hero-features { align-self: center; grid-template-columns: 1fr; gap: clamp(8px, .55vw, 14px); }
  .hero--banner .hero-features li { flex-direction: row; text-align: left; gap: clamp(10px, 1vw, 22px); font-size: clamp(.92rem, 1.2vw, 1.5rem); }
  .hero--banner .hero-features li > span:last-child { max-width: 9em; }
  .hero--banner .hero-feature-icon { width: clamp(46px, 4vw, 84px); height: clamp(46px, 4vw, 84px); }

  .hero--banner .hero-stats { margin: 0 1.2vw 0 1.1vw; }
  .hero--banner .stats { border-radius: 999px; padding: clamp(8px, .55vw, 12px) clamp(14px, 1.5vw, 32px); }
  .hero--banner .stat { flex-direction: row; justify-content: center; gap: clamp(10px, 1vw, 22px); padding: clamp(6px, .55vw, 12px) 8px; }
  .hero--banner .stat + .stat { border-left-color: #c6cfdc; }
  .hero--banner .stat-text { align-items: flex-start; text-align: left; }
  .hero--banner .stat-icon .icon { width: clamp(28px, 2.4vw, 50px); height: clamp(28px, 2.4vw, 50px); }
  .hero--banner .stat-num, .hero--banner .stat:nth-child(n) .stat-num { font-size: clamp(1.4rem, 1.75vw, 2.25rem); line-height: 1.05; }
  .hero--banner .stat-label { font-size: clamp(.78rem, .92vw, 1.15rem); }
}
.hero--banner .hero-feature-icon .icon, .hero--banner .stat-icon .icon { stroke-width: 2.25; }
@media (min-width: 1200px) and (max-width: 1279px) { .hero--banner .eyebrow { white-space: normal; } }
.course-enquire-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
/* Course picked in the home eligibility popup: shown first on /courses and highlighted */
.course-card.is-picked { border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(227, 169, 43, .18), var(--shadow); }
.badge--pick { display: inline-flex; align-items: center; gap: 4px; background: var(--gold); color: var(--navy); font-weight: 700; }
.badge--pick .icon-sm { width: 12px; height: 12px; }
#elig-thanks { scroll-margin-top: 110px; }