/* ==========================================================================
   SuccessBeacon Overseas — shared stylesheet
   Single source of truth for every page. Brand teal preserved from the
   original site (--brand: #326b6d).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — exact values preserved, do not change. */
  --brand: #326b6d;
  --brand-dark: #24504f;
  --brand-darker: #16302f;
  --brand-light: #4e9a9d;
  --brand-tint: #e8f2f2;
  --accent: #f0a500;
  --accent-dark: #c98800;
  --accent-tint: #fff4de;
  --step-blue: #2f6fed;
  --step-blue-tint: #e8f0fe;
  --step-coral: #e2574c;
  --step-coral-tint: #fdeae8;

  --ink: #14211f;
  --ink-soft: #2b3937;
  --body: #4a5a58;
  --muted: #7d8c8a;
  --muted-contrast: #5a6b69; /* AA-compliant (4.5:1+) alternative to --muted for small body text on light backgrounds */
  --line: #e2e8e7;
  --line-soft: #ecf1f0;
  --surface: #ffffff;
  --surface-alt: #f6faf9;
  --surface-sand: #faf7f0;
  --hairline-gold: linear-gradient(90deg, transparent, rgba(240, 165, 0, .55), transparent);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* Layered, low-contrast shadows read as "premium" rather than the harsher
     single-layer default; the tint keeps them warm instead of flat grey. */
  --shadow-sm: 0 1px 2px rgba(20, 33, 31, .05), 0 3px 8px rgba(20, 33, 31, .045);
  --shadow: 0 6px 16px rgba(20, 33, 31, .06), 0 18px 40px rgba(20, 33, 31, .07);
  --shadow-lg: 0 12px 28px rgba(16, 30, 28, .1), 0 32px 64px rgba(16, 30, 28, .16);
  --shadow-gold: 0 10px 28px rgba(240, 165, 0, .22);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 76px;
  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 4.8vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.65rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 2px;
  border-radius: 4px;
}

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

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

.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--alt { background: var(--surface-alt); }
.section--sand { background: var(--surface-sand); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .75rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.section-head--center .eyebrow::before { display: none; }

.lede {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--body);
  margin-top: 1rem;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  padding: .65rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: top .2s;
}
.skip-link:focus { top: 1rem; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  border: 2px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .18s ease,
    color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(160deg, var(--brand-light) -40%, var(--brand) 45%, var(--brand-dark) 130%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: linear-gradient(160deg, var(--brand-light) -20%, var(--brand-dark) 120%); color: #fff; box-shadow: var(--shadow); }

.btn--ghost { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn--ghost:hover { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }

.btn--light { background: #fff; color: var(--brand-darker); box-shadow: var(--shadow-sm); }
.btn--light:hover { background: var(--brand-tint); color: var(--brand-darker); box-shadow: var(--shadow); }

.btn--outline-light { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255,255,255,.75); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1rem; }

/* Gold accent button — reserved for the single highest-priority action on a
   page (currently unused by default markup; available for the redesign). */
.btn--accent { background: linear-gradient(160deg, #ffc84a -20%, var(--accent) 55%, var(--accent-dark) 130%); color: var(--brand-darker); box-shadow: var(--shadow-gold); }
.btn--accent:hover { box-shadow: 0 14px 34px rgba(240, 165, 0, .32); }

/* ---------- 5. Header / navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 var(--line), 0 12px 28px rgba(20, 33, 31, .06);
  border-bottom-color: transparent;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--nav-h);
}

/* flex-shrink:0 — without it the logo is squashed once the links run out of room. */
.nav__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.nav__logo img { height: 46px; width: auto; flex: 0 0 auto; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
}

/* Every top-level item is a flex row of the same height, so the links, the
   chevron item and the buttons all share one baseline. */
.nav__menu > li { display: flex; align-items: center; }

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 .7rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: .93rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: background .18s, color .18s;
}
.nav__link:hover,
.nav__link[aria-current="page"] { background: var(--brand-tint); color: var(--brand-dark); }
/* Small underline cue on the active page, echoed in the mega-menu trigger too. */
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.nav__item { position: relative; }

.nav__toggle-sub {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: 100%;
}
.nav__toggle-sub .chev {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.nav__item.is-open > .nav__toggle-sub .chev { transform: rotate(-135deg) translate(-3px, -3px); }

.nav__submenu {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0;
  min-width: 236px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .5rem;
  display: none;
}
.nav__item.is-open > .nav__submenu { display: block; }

.nav__submenu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: .93rem;
}
.nav__submenu a:hover { background: var(--brand-tint); color: var(--brand-dark); }
.nav__submenu .flag { font-size: 1.05rem; line-height: 1; }

.nav__cta { margin-left: .4rem; }
.nav__cta .btn {
  height: 40px;
  padding: 0 1.15rem;
  font-size: .9rem;
}

.nav__burger {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.nav__burger span,
.nav__burger span::before,
.nav__burger span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.nav__burger span::before { transform: translateY(-6px); }
.nav__burger span::after { transform: translateY(4px); }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: rotate(45deg) translateY(0); }
.nav__burger[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(-2px); }

@media (max-width: 1080px) {
  .nav__burger { display: flex; }
  /* Anchored to the header, not the viewport: the announcement bar sits above
     the header when the page is unscrolled, so a fixed top of --nav-h left the
     panel overlapping the bar. */
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    margin-left: 0;
    padding: 1rem var(--gutter) 1.75rem;
    /* --header-b is the header's real bottom edge, measured in main.js. It
       varies: the announcement bar wraps to two lines on narrow phones, and
       collapses out of view once the page is scrolled. */
    max-height: calc(100dvh - var(--header-b, 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }
  /* 48px is the minimum comfortable touch target. */
  .nav__link { height: 48px; padding: 0 .5rem; font-size: 1rem; }
  .nav__submenu {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 .5rem .75rem;
  }
  .nav__menu > li { display: block; }
  .nav__cta { margin: .6rem 0 0; }
  .nav__cta .btn { width: 100%; height: 48px; font-size: .95rem; }
  .nav__submenu a { min-height: 44px; }
}

/* ---------- 6. Announcement bar ---------- */
.announce {
  background: linear-gradient(90deg, var(--brand-darker), #1c3a38 55%, var(--brand-darker));
  color: #d9ecec;
  font-size: .85rem;
  letter-spacing: .01em;
  text-align: center;
  padding: .6rem 1rem;
  border-bottom: 1px solid rgba(240, 165, 0, .18);
}
.announce strong { color: #fff; }
.announce a { color: var(--accent); font-weight: 600; }
.announce a:hover { color: #ffcf6b; }

/* ---------- 7. Hero (home) ---------- */
.hero {
  position: relative;
  /* Static background: a fixed, centred, full-bleed photo (background-size:
     cover scales it to always fill the box on any screen size with no gaps
     and no distortion) under the brand gradient. Previously this panned and
     zoomed via an animated background-position/background-size, which read
     as the photo "moving" and could crop it oddly on some screens. */
  background:
    linear-gradient(115deg, rgba(12, 38, 37, .94) 0%, rgba(20, 61, 60, .88) 45%, rgba(50, 107, 109, .8) 100%),
    url("../../Images/WEBbg1.jpeg") center / cover no-repeat;
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  left: -120px; bottom: -150px;
  background: radial-gradient(circle, rgba(240, 165, 0, .28), transparent 70%);
  pointer-events: none;
  animation: heroBlobDrift1 15s ease-in-out infinite;
}
.hero::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  right: -160px; top: -180px;
  background: radial-gradient(circle, rgba(78, 154, 157, .45), transparent 68%);
  pointer-events: none;
  animation: heroBlobDrift2 13s ease-in-out infinite;
}
@keyframes heroBlobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -25px) scale(1.12); }
}
@keyframes heroBlobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 25px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--accent); font-style: italic; }

.hero__text p {
  color: #cfe3e2;
  font-size: clamp(1rem, 1.45vw, 1.15rem);
  margin-top: 1.15rem;
  max-width: 34rem;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .95rem .4rem .55rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #eaf5f4;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.badge-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(240, 165, 0, .25);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.85rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero__stats .num {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
}
.hero__stats .lbl {
  font-size: .82rem;
  color: #b8d2d1;
  line-height: 1.4;
}

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

/* ---------- 8. Lead form card ---------- */
.lead-card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  overflow: hidden;
}
.lead-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-light), var(--accent) 55%, var(--brand-light));
}
.lead-card h2 {
  font-size: 1.5rem;
  margin-bottom: .35rem;
}
.lead-card h2 span { color: var(--brand); font-style: italic; }
.lead-card > p {
  font-size: .9rem;
  color: var(--muted-contrast);
  margin-bottom: 1.25rem;
}

.field { margin-bottom: .85rem; }
.field label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .3rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(50, 107, 109, .15);
}
.field textarea { resize: vertical; min-height: 92px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.form-note {
  font-size: .78rem;
  color: var(--muted-contrast);
  text-align: center;
  margin-top: .8rem;
}

.form-status {
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  font-size: .88rem;
  margin-bottom: .9rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: #e7f6ee; color: #17663f; border: 1px solid #b7e4cd; }
.form-status--err { background: #fdecec; color: #9b2226; border: 1px solid #f5c2c2; }

/* honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- 9. Logo marquee ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  align-items: center;
  animation: marquee 12s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img {
  height: 58px;
  width: auto;
  object-fit: contain;
  opacity: .9;
  transition: opacity .25s;
}
.marquee img:hover { opacity: 1; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- 10. Destination cards ---------- */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.35rem;
}

.dest-card {
  position: relative;
  display: block;
  min-height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  isolation: isolate;
}
.dest-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); color: #fff; }

.dest-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .5s ease;
  z-index: -2;
}
.dest-card:hover .dest-card__img { transform: scale(1.07); }

.dest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 32, 31, .1) 0%, rgba(11, 32, 31, .55) 52%, rgba(11, 32, 31, .9) 100%);
}

.dest-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.35rem;
}
.dest-card__flag {
  position: absolute;
  top: 1.1rem;
  left: 1.35rem;
  z-index: 1;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-sm);
  padding: .25rem .5rem;
  line-height: 1.2;
  backdrop-filter: blur(6px);
}
.dest-card__body h3 { color: #fff; font-size: 1.3rem; }
.dest-card__body p { color: #d3e4e3; font-size: .88rem; margin-top: .25rem; }

.dest-card__meta {
  display: flex;
  gap: 1.15rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.dest-card__meta div { font-size: .74rem; color: #b6cecd; }
.dest-card__meta strong { display: block; font-size: .95rem; color: #fff; }

.dest-card__go {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- 11. Numbered process steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 1.25rem;
  counter-reset: step;
}
.step {
  background: linear-gradient(180deg, var(--brand-tint), #fff 65%);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.step:nth-child(2) { border-top-color: var(--accent); background: linear-gradient(180deg, var(--accent-tint), #fff 65%); }
.step:nth-child(2) .step__num { background: #fff; color: var(--accent); }
.step:nth-child(3) { border-top-color: var(--step-blue); background: linear-gradient(180deg, var(--step-blue-tint), #fff 65%); }
.step:nth-child(3) .step__num { background: #fff; color: var(--step-blue); }
.step:nth-child(4) { border-top-color: var(--step-coral); background: linear-gradient(180deg, var(--step-coral-tint), #fff 65%); }
.step:nth-child(4) .step__num { background: #fff; color: var(--step-coral); }
.step h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.step p { font-size: .92rem; }

/* ---------- 12. Journey timeline ---------- */
.journey { position: relative; padding-left: 2.25rem; }
.journey::before {
  content: "";
  position: absolute;
  left: 11px; top: .5rem; bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-tint));
}
.journey__item { position: relative; padding-bottom: 1.9rem; }
.journey__item:last-child { padding-bottom: 0; }
.journey__item::before {
  content: "";
  position: absolute;
  left: -2.25rem; top: .3rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
}
.journey__item h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.journey__item p { font-size: .92rem; }

/* ---------- 13. Stat band ---------- */
.stat-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 420px at 12% -15%, rgba(240, 165, 0, .22), transparent 60%),
    radial-gradient(900px 460px at 92% 115%, rgba(78, 154, 157, .35), transparent 60%),
    linear-gradient(120deg, var(--brand-darker), var(--brand));
}
.stat-band .wrap { position: relative; z-index: 1; }
.stat-band h2 { color: #fff; }
.stat-band h2 .accent-word { color: var(--accent); font-style: italic; }
.stat-band .lede { color: #c9e0df; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.stat {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.stat .num {
  display: block;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
}
.stat .lbl { font-size: .85rem; color: #e3f1f0; }

/* ---------- 14. Feature / why cards ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.feature {
  background: linear-gradient(180deg, var(--brand-tint), #fff 60%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  transition: transform .25s, box-shadow .25s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature:nth-child(4n+2) { border-top-color: var(--accent); background: linear-gradient(180deg, var(--accent-tint), #fff 60%); }
.feature:nth-child(4n+3) { border-top-color: var(--step-blue); background: linear-gradient(180deg, var(--step-blue-tint), #fff 60%); }
.feature:nth-child(4n) { border-top-color: var(--step-coral); background: linear-gradient(180deg, var(--step-coral-tint), #fff 60%); }
.feature img {
  width: 46px; height: 46px; object-fit: contain; margin-bottom: 1rem;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 2px 8px rgba(20, 33, 31, .1);
}
.feature h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.feature p { font-size: .92rem; }

/* checklist */
.checklist { display: grid; gap: .85rem; }
.checklist li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .96rem;
}
.checklist li::before {
  content: "";
  flex: 0 0 22px;
  width: 22px; height: 22px;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23326b6d'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checklist strong { color: var(--ink); }

/* ---------- 15. Testimonials ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
}
.quote {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quote::before {
  content: "\201C";
  position: absolute;
  top: .35rem; right: 1.1rem;
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--brand-tint);
  z-index: 0;
}
.quote > * { position: relative; z-index: 1; }
.quote__stars { color: var(--accent); letter-spacing: .1em; font-size: .95rem; }
.quote blockquote { font-size: .97rem; color: var(--body); flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: .8rem; }
.quote__avatar {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.quote__who { font-weight: 600; color: var(--ink); font-size: .95rem; line-height: 1.3; }
.quote__meta { font-size: .82rem; color: var(--muted-contrast); }

/* ---------- 16. Accordion / FAQ ---------- */
.accordion { max-width: 52rem; margin-inline: auto; }
.acc-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: .75rem;
  overflow: hidden;
}
.acc-item.is-open { border-color: var(--brand-light); box-shadow: var(--shadow-sm); }

.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.1rem 1.25rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.acc-btn:hover { color: var(--brand); }
.acc-btn .ico {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform .25s, background .25s, color .25s;
}
.acc-item.is-open .acc-btn .ico {
  transform: rotate(45deg);
  background: var(--brand);
  color: #fff;
}

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p,
.acc-panel ul { padding: 0 1.25rem 1.15rem; font-size: .95rem; }
.acc-panel ul { display: grid; gap: .4rem; }
.acc-panel ul li { padding-left: 1.1rem; position: relative; }
.acc-panel ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-light);
}

/* ---------- 16b. Student portal band ---------- */
.portal-band {
  background: linear-gradient(125deg, var(--brand-darker) 0%, var(--brand-dark) 55%, var(--brand) 100%);
  color: #cfe3e2;
}
.portal-band h2 { color: #fff; }
.portal-band .lede { color: #c9e0df; }
.portal-band .eyebrow { color: var(--accent); }

.portal-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .portal-band__grid { grid-template-columns: 1fr; } }

.portal-features { display: grid; gap: 1rem; }
.portal-features li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  transition: background .25s, transform .25s;
}
.portal-features li:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }

.portal-features__ico {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(240, 165, 0, .18);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.portal-features__ico svg { width: 20px; height: 20px; }

.portal-features strong { display: block; color: #fff; font-size: .98rem; margin-bottom: .2rem; }
.portal-features span { font-size: .89rem; color: #b8d2d1; }

/* ---------- 17. CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--brand-darker), var(--brand-dark) 60%, var(--brand));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 2rem;
  align-items: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c9e0df; margin-top: .75rem; }
.cta-band__actions { display: flex; flex-direction: column; gap: .75rem; }
@media (max-width: 780px) {
  .cta-band { grid-template-columns: 1fr; }
}

/* ---------- 18. Page hero (inner pages) ---------- */
/* The image itself is set inline on the element (see tools/build.py) so its URL
   resolves against the page, not against this stylesheet. */
.page-hero {
  position: relative;
  color: #fff;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background-color: var(--brand-dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-hero h1 { color: #fff; max-width: 22ch; }
.page-hero p { color: #cfe3e2; max-width: 46rem; margin-top: 1rem; }
.page-hero .btn { margin-top: 1.75rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .85rem;
  color: #a9c8c7;
  margin-bottom: 1rem;
}
.crumbs a { color: #d5e8e7; }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: #7fa6a5; }
.crumbs ol, .crumbs { list-style: none; }

.country-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.country-facts .lbl { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #a9c8c7; }
.country-facts .val { font-size: 1.15rem; font-weight: 700; color: #fff; }

/* ---------- 19. Long-form content (country pages) ---------- */
.prose { max-width: 68rem; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  margin-top: 2.75rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--brand-tint);
}
.prose h3 { font-size: 1.2rem; margin-top: 2rem; }
.prose ul { display: grid; gap: .7rem; }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .97rem;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-light);
}
.prose ol { counter-reset: n; display: grid; gap: .7rem; }
.prose ol li { counter-increment: n; position: relative; padding-left: 2.1rem; }
.prose ol li::before {
  content: counter(n);
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: .8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.prose strong { color: var(--ink); }

/* Tables — scroll on small screens instead of blowing out the layout */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.table-scroll table { min-width: 640px; font-size: .92rem; }
.table-scroll thead th {
  background: var(--brand);
  color: #fff;
  text-align: left;
  font-weight: 600;
  padding: .85rem 1rem;
  white-space: nowrap;
}
.table-scroll tbody td {
  padding: .8rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.table-scroll tbody tr:nth-child(even) { background: var(--surface-alt); }
.table-scroll tbody tr:hover { background: var(--brand-tint); }

/* ---------- 20. Contact page ---------- */
/* minmax(0, …) rather than plain fr: the email address is a long unbreakable
   token, and an auto minimum lets it force the column wider than the screen. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.contact-info {
  display: grid;
  gap: 1rem;
}
.info-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.info-row .ico {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.info-row:nth-child(2) .ico { background: var(--accent-tint); color: var(--accent); }
.info-row:nth-child(3) .ico { background: var(--step-blue-tint); color: var(--step-blue); }
.info-row:nth-child(4) .ico { background: var(--step-coral-tint); color: var(--step-coral); }
.info-row > div { min-width: 0; }
.info-row h3 { font-size: .95rem; margin-bottom: .2rem; }
.info-row p, .info-row a {
  font-size: .95rem;
  color: var(--body);
  overflow-wrap: anywhere;
}
.info-row a:hover { color: var(--brand); }

.map-embed {
  border: 0;
  width: 100%;
  height: 320px;
  border-radius: var(--radius);
  display: block;
}

/* ---------- 21. Footer ---------- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--brand-darker), #101f1e);
  color: #b9d1d0;
  padding-block: clamp(2.75rem, 5vw, 4rem) 0;
  margin-top: 0;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--hairline-gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h3 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer ul { display: grid; gap: .6rem; }
.site-footer a { color: #b9d1d0; font-size: .93rem; overflow-wrap: anywhere; transition: color .18s; }
.site-footer a:hover { color: var(--accent); }
.site-footer p { font-size: .9rem; }

.footer-logo { height: 54px; width: auto; margin-bottom: 1rem; }

.social {
  display: flex;
  gap: .6rem;
  margin: 1.15rem 0;
}
.social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
  color: #e0eeed;
  transition: background .2s, transform .2s;
}
.social a:hover { background: var(--brand); transform: translateY(-2px); color: #fff; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem;
}

/* ---------- 22. Floating actions ---------- */
.float-wa {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 90;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .4);
  transition: transform .2s;
}
.float-wa:hover { transform: scale(1.08); }
.float-wa svg { width: 28px; height: 28px; fill: #fff; }

.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s, visibility .25s, transform .25s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-dark); color: #fff; }
.to-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* ---------- 23. Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 24. Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  place-items: center;
  padding: 1rem;
  background: rgba(12, 32, 31, .62);
  backdrop-filter: blur(3px);
}
.modal.is-open { display: grid; }
.modal.is-open .modal__box { animation: modalIn .28s var(--ease); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .modal.is-open .modal__box { animation: none; } }
.modal__box {
  position: relative;
  width: min(520px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}
.modal__close {
  position: absolute;
  top: .85rem; right: .85rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.modal__close:hover { background: var(--brand-tint); color: var(--brand); }

/* ---------- 25. Legal pages ---------- */
.legal { max-width: 52rem; }
.legal h2 { font-size: 1.35rem; margin-top: 2.25rem; }
.legal p, .legal li { font-size: .97rem; }
/* Inline links in body copy must not rely on color alone (WCAG 1.4.1). */
.legal p a, .legal li a { text-decoration: underline; text-underline-offset: .15em; }
.legal ul { display: grid; gap: .55rem; margin-top: .75rem; }
.legal ul li { padding-left: 1.4rem; position: relative; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-light);
}

/* ---------- 26. Print ---------- */
@media print {
  .site-header, .site-footer, .float-wa, .to-top, .announce, .modal { display: none !important; }
  body { color: #000; }
  .reveal { opacity: 1; transform: none; }
}