/* ==========================================================
   Orient Consultancy - main stylesheet
   ========================================================== */

/* ---------- 1. Variables (change colors here) ---------- */
:root {
  --primary: #139fd6;          /* blue buttons, eyebrow text */
  --navy: #14335a;             /* headings, dark section */
  --accent: #f59a1b;           /* orange highlight words */
  --text: #5b6b84;             /* body paragraphs */
  --dark-text: #333333;
  --page-bg: #f5f5f5;
  --white: #ffffff;
  --tint: #f8fbfd;             /* light blue-ish section background */
  --border: #e3edf5;
  --radius-sm: 14px;
  --radius-md: 28px;
  --radius-lg: 36px;
  --font-head: "Montserrat", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; cursor: pointer; }

/* ---------- 3. Header / navigation ---------- */

/* Sticky header: stays on top while scrolling, gets a soft shadow once you scroll */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 55px;
  min-height: 90px;
  background: rgba(245, 245, 245, .9);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  transition: min-height .3s ease, box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled {
  min-height: 72px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 0 rgba(20, 51, 90, .06), 0 12px 30px rgba(20, 51, 90, .07);
}
.logo img { width: 230px; height: auto; transition: width .3s ease; }
.site-header.is-scrolled .logo img { width: 190px; }

/* Menu links */
.main-nav a,
.dropdown-toggle {
  position: relative;
  z-index: 1;
  font-size: 17px;
  letter-spacing: .1px;
  color: #3a3a3a;
  background: none;
  border: 0;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .25s ease;
}
.dropdown-toggle svg { transition: transform .3s ease; }

/* Phone / tablet dropdown: simple show/hide (desktop version is further below) */
.main-nav .dropdown { display: none; }
.has-dropdown.open .dropdown { display: flex; }
.has-dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }
.main-nav a[aria-current="page"],
.has-dropdown.current > .dropdown-toggle { color: var(--navy); font-weight: 600; }

/* Dropdown links: small flag + text (layout copied from the original site) */
.dropdown a { display: flex; align-items: center; gap: 10px; }
.dropdown a span { flex: 1; }
.dd-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; background: #e6ebf0; flex: none; }

/* The hamburger button */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: #333; border-radius: 2px; }

/* ---------- Desktop-only navigation effects ---------- */
@media (min-width: 1024px) {
  .main-nav > ul {
    position: relative;           /* the sliding highlight is positioned inside this */
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* Sliding highlight (created by script.js): glides from item to item on hover */
  .nav-indicator {
    position: absolute;
    top: 50%; left: 0;
    height: 42px;
    margin-top: -21px;
    border-radius: 999px;
    background: rgba(20, 51, 90, .07);
    box-shadow: inset 0 0 0 1px rgba(20, 51, 90, .05);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.3, .8, .3, 1), width .4s cubic-bezier(.3, .8, .3, 1), opacity .25s ease;
  }

  .main-nav > ul > li > a:hover,
  .dropdown-toggle:hover,
  .has-dropdown:hover > .dropdown-toggle,
  .has-dropdown:focus-within > .dropdown-toggle { color: var(--navy); }

  /* Current page: dark text + small dot under the word */
  .main-nav > ul > li > a[aria-current="page"]::after,
  .has-dropdown.current > .dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 1px;
    width: 5px; height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--primary);
  }

  .has-dropdown:hover > .dropdown-toggle svg,
  .has-dropdown:focus-within > .dropdown-toggle svg { transform: rotate(180deg); }

  /* Dropdown card: single column like the original site; fades + slides in */
  .main-nav .dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(20, 51, 90, .16), 0 2px 6px rgba(20, 51, 90, .05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
  }
  /* invisible bridge so the card does not close when the mouse crosses the gap */
  .main-nav .dropdown::before {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0; height: 16px;
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown,
  .has-dropdown.open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* items appear one after another */
  .dropdown li { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
  .has-dropdown:hover .dropdown li,
  .has-dropdown:focus-within .dropdown li,
  .has-dropdown.open .dropdown li { opacity: 1; transform: none; }
  .dropdown li:nth-child(1) { transition-delay: .03s; }
  .dropdown li:nth-child(2) { transition-delay: .06s; }
  .dropdown li:nth-child(3) { transition-delay: .09s; }
  .dropdown li:nth-child(4) { transition-delay: .12s; }
  .dropdown li:nth-child(5) { transition-delay: .15s; }
  .dropdown li:nth-child(6) { transition-delay: .18s; }
  .dropdown li:nth-child(7) { transition-delay: .21s; }

  .dropdown a {
    justify-content: space-between;
    padding: 16px 20px;
    font-size: 17px;
    line-height: 1.6;
    color: #3a3a3a;
    overflow: hidden;
    transition: background .2s ease, color .2s ease, padding-left .25s ease;
  }
  .dropdown a::before { /* thin accent bar that grows on hover */
    content: "";
    position: absolute;
    left: 0; top: 20%;
    width: 3px; height: 60%;
    border-radius: 3px;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform .25s ease;
  }
  .dropdown a::after { /* small arrow that slides in on hover */
    content: "→";
    color: var(--primary);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .2s ease, transform .25s ease;
  }
  .dropdown a:hover { background: var(--tint); color: var(--navy); padding-left: 26px; }
  .dropdown a:hover::before { transform: scaleY(1); }
  .dropdown a:hover::after { opacity: 1; transform: none; }

  /* "Other European Countries" always shows a chevron, as on the original site */
  .dropdown a.dropdown-more::after { content: "›"; font-size: 22px; line-height: 1; color: #6f7f96; opacity: 1; transform: none; }
  .dropdown a.dropdown-more:hover::after { color: var(--primary); transform: translateX(3px); }
}

/* ---------- 4. Page wrapper ---------- */
.page {
  max-width: 1521px;
  margin: 40px auto 0;
  background: var(--white);
  padding: 58px 69px 70px;
}
.page-title {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 700;
  color: var(--dark-text);
  line-height: 1.2;
  margin: 0 0 35px 0;
  padding-left: 0;
}
.home { max-width: 1383px; margin: 0 auto; }

/* ---------- 5. Shared pieces ---------- */
.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a9cd0;
}
.eyebrow.center { text-align: center; }
.eyebrow.light { color: #5bc3ee; }

.accent { color: var(--accent); }

.section { padding: 70px 22px; }
.section-tint { background: var(--tint); }

.section-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.18;
  letter-spacing: -1.5px;
  color: var(--navy);
  text-align: center;
  margin-top: 14px;
}
.section-title.left { text-align: left; font-size: clamp(34px, 4vw, 54px); line-height: 1.1; }
.section-title.light { color: var(--white); }
.section-sub {
  text-align: center;
  font-size: 19px;
  margin-top: 18px;
  color: var(--text);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 18px;
  padding: 17px 27px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--primary); color: var(--white); box-shadow: 0 10px 22px rgba(19, 159, 214, .25); }
.btn-primary:hover { background: #0f8cbd; }
.btn-outline { background: var(--white); color: var(--navy); border-color: var(--border); }
.btn-outline:hover { border-color: var(--primary); }
.btn-white { background: var(--white); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 592px;
  gap: 40px;
  padding: 60px 22px 50px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, #c5e5f4 0, #c5e5f4 14%, transparent 14.5%),
    radial-gradient(circle at 0% 100%, #fcebd5 0, #fcebd5 12%, transparent 12.5%),
    linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
}
/* dotted pattern in the top-left */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(#d9e3ec 1px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(135deg, #000 0, transparent 55%);
          mask-image: linear-gradient(135deg, #000 0, transparent 55%);
}
.hero > * { position: relative; }

.hero-text { padding-top: 10px; }
.hero-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 1.08;
  letter-spacing: -3px;
  color: var(--navy);
  margin-top: 28px;
  max-width: 660px;
}
.hero-lead {
  font-size: 24px;
  line-height: 1.75;
  color: var(--text);
  margin-top: 28px;
  max-width: 640px;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 38px; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  max-width: 658px;
}
.hero-stats dt { font-family: var(--font-body); font-weight: 600; font-size: 34px; color: var(--navy); line-height: 1.2; }
.hero-stats dd { font-size: 15px; font-weight: 500; margin-top: 10px; color: var(--text); }

/* Map card */
.hero-visual { align-self: end; }
.map-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 48px;
  padding: 50px 22px 28px;
  box-shadow: 0 30px 60px rgba(20, 51, 90, .08);
}
.map { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.map svg { width: 100%; height: auto; }
.pill {
  position: absolute;
  background: var(--white);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 15px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 51, 90, .1);
  white-space: nowrap;
}
.pill-uk { left: 2%; top: 4%; }
.pill-japan { right: -4%; top: 38%; }
.pill-canada { left: -6%; top: 55%; }
.pill-aus { right: 0%; bottom: -12%; }
.map-caption {
  margin-top: 56px;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  color: var(--text);
}
.map-caption .dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 5px #d6ecf7;
  margin-right: 8px;
}

/* ---------- 7. Journey steps ---------- */
.journey { padding-bottom: 110px; }
.journey-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 70px;
}
.journey-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 90px 33px 36px;
  box-shadow: 0 20px 40px rgba(20, 51, 90, .06);
}
.journey-card:not(:last-child)::after { /* connector line between cards */
  content: "";
  position: absolute;
  top: 47px; right: -31px;
  width: 30px; height: 2px;
  background: #cfe0e8;
}
.step-badge {
  position: absolute;
  top: 3px; left: 36px;
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 28px;
  color: var(--white);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e8f0f6;
}
.step-badge.navy { background: var(--navy); }
.step-badge.orange { background: var(--accent); }
.journey-card { padding-top: 78px; }
.journey-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 25px; color: var(--navy); margin-top: -25px; }
.journey-card p { margin-top: 18px; font-size: 18px; line-height: 1.8; }

/* ---------- 8. Destination cards ---------- */
.destinations { padding-top: 70px; padding-bottom: 100px; }
.country-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 70px;
}
.country-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--tint) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 46px 28px 30px;
  min-height: 424px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.country-card::before { /* soft circle in the top-right corner */
  content: "";
  position: absolute;
  top: -26px; right: -26px;
  width: 112px; height: 112px;
  border-radius: 50%;
  background: #eef7fc;
}
.country-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(20, 51, 90, .12); border-color: #c9e3f1; }
.flag { width: 44px; height: 32px; object-fit: cover; border-radius: 5px; background: #eef2f6; position: relative; }
.card-arrow {
  position: absolute;
  top: 34px; right: 22px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #e3f2fa;
  color: var(--primary);
  display: grid; place-items: center;
  font-size: 16px;
}
.country-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.3;
  color: var(--navy);
  margin-top: 54px;
}
.country-card p { font-size: 16px; line-height: 1.7; margin-top: 12px; }
.intake { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: #6f7f96; }
.card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--primary);
  font-weight: 600;
  font-size: 17px;
}

/* ---------- 9. Dark services section ---------- */
.services-dark { background: var(--navy); padding: 100px 22px 90px; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 68px;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px 38px 40px;
}
.service-icon {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 22px;
}
.service-icon.blue { background: #eaf6fc; }
.service-icon.orange { background: #fdf0de; color: var(--accent); }
.service-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 29px; color: var(--navy); margin-top: 34px; }
.service-card p { font-size: 18px; line-height: 1.75; margin-top: 18px; }
.service-card p strong { color: #4c5d78; font-weight: 600; }
.service-card ul { margin-top: 20px; }
.service-card li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.5; margin-bottom: 10px; }
.service-card li::before {
  content: ""; position: absolute; left: 3px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: #8896ab;
}

/* ---------- 10. Why Orient ---------- */
.why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  padding: 135px 22px 140px;
}
.why-lead { font-size: 22px; line-height: 1.7; margin: 32px 0 6px; max-width: 560px; }
.why-list { display: grid; gap: 18px; }
.why-card {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 28px 26px;
  background: var(--white);
}
.why-num {
  flex: none;
  width: 58px; height: 58px;
  border-radius: 16px;
  background: #eef7fc;
  color: var(--primary);
  font-weight: 600;
  font-size: 20px;
  display: grid; place-items: center;
}
.why-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 23px; color: var(--navy); }
.why-card p { font-size: 18px; line-height: 1.7; margin-top: 8px; }

/* ---------- 11. FAQ accordion ---------- */
.faq { padding: 75px 22px 85px; }
.faq-list { max-width: 1124px; margin: 66px auto 0; display: grid; gap: 16px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
}
.faq-item h3 { font-size: inherit; }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  text-align: left;
  background: none;
  border: 0;
  padding: 30px 28px 32px;
  font-size: 19px;
  font-weight: 500;
  color: var(--navy);
}
.faq-icon { position: relative; flex: none; width: 16px; height: 16px; color: var(--primary); }
.faq-icon::before, .faq-icon::after { /* the "+" sign */
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform .25s;
}
.faq-icon::before { left: 0; top: 7px; width: 16px; height: 2.5px; }
.faq-icon::after { left: 6.7px; top: 0; width: 2.5px; height: 16px; }
.faq-question[aria-expanded="true"] .faq-icon::before { transform: rotate(45deg); }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: rotate(45deg); }
.faq-answer { padding: 0 28px 28px; }
.faq-answer p { font-size: 19px; line-height: 1.75; }
.faq-item:has(.faq-question[aria-expanded="true"]) .faq-question { padding-bottom: 20px; }

/* ---------- 12. CTA ---------- */
.cta {
  background: linear-gradient(135deg, #139fd6 0%, #0b7db5 40%, #0a5f94 70%, #14335a 100%);
  color: var(--white);
  padding: 100px 22px 56px;
  margin-top: 0;
}
.cta-top { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(40px, 5.2vw, 70px);
  line-height: 1.1;
  letter-spacing: -2px;
  max-width: 640px;
  margin-top: 18px;
}
.cta-text p:last-child { font-size: 22px; line-height: 1.8; margin-top: 12px; max-width: 800px; }
.cta-buttons { display: flex; gap: 15px; flex: none; }
.cta-contact {
  display: flex; flex-wrap: wrap; gap: 28px;
  margin-top: 70px; padding-top: 38px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: 16px;
  padding-bottom: 60px;
}
.cta-contact a:hover { text-decoration: underline; }

/* ---------- 13. Footer ---------- */
.site-footer { text-align: center; padding: 90px 20px 100px; font-size: 20px; color: #3a3a3a; }
.site-footer a { color: #2b8be6; }

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

/* Laptops */
@media (max-width: 1279px) {
  .page { padding: 40px 28px 50px; }
  .country-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { grid-template-columns: 1fr 460px; }
  .hero-lead { font-size: 21px; }
  .why { gap: 50px; }
  .cta-top { flex-direction: column; align-items: flex-start; }
}

/* Tablets */
@media (max-width: 1023px) {
  .site-header { padding: 10px 24px; }
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    box-shadow: 0 14px 30px rgba(20, 51, 90, .12);
    padding: 10px 24px 20px;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li > a, .dropdown-toggle { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .dropdown { position: static; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
  .has-dropdown:hover .dropdown { display: none; }          /* tap only on touch screens */
  .has-dropdown.open .dropdown { display: flex; }

  .page-title { font-size: 32px; }
  .hero { grid-template-columns: 1fr; padding: 40px 18px; }
  .hero-visual { max-width: 560px; margin: 30px auto 0; width: 100%; }
  .hero-title { letter-spacing: -2px; }
  .journey-steps { grid-template-columns: 1fr; gap: 50px; }
  .journey-card:not(:last-child)::after { display: none; }
  .service-grid { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; padding: 80px 18px; }
  .country-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobiles */
@media (max-width: 767px) {
  .logo img { width: 170px; }
  .page { padding: 28px 12px 40px; margin-top: 10px; }
  .page-title { font-size: 26px; margin-bottom: 22px; }
  .section, .services-dark, .faq { padding-left: 14px; padding-right: 14px; }
  .hero-title { font-size: 42px; letter-spacing: -1.5px; }
  .hero-lead { font-size: 18px; }
  .btn { font-size: 16px; padding: 15px 20px; }
  .hero-stats { gap: 24px; }
  .hero-stats dt { font-size: 26px; }
  .map-card { padding: 36px 12px 22px; border-radius: 32px; }
  .pill { font-size: 11px; padding: 9px 10px; }
  .pill-canada { left: -2%; }
  .pill-japan { right: -2%; }
  .section-sub { font-size: 16px; }
  .country-grid { grid-template-columns: 1fr; }
  .country-card { min-height: 0; }
  .intake { margin-top: 20px; }
  .why-lead { font-size: 18px; }
  .why-card { gap: 16px; padding: 20px; }
  .faq-question { font-size: 16px; padding: 22px 18px; }
  .faq-answer { padding: 0 18px 22px; }
  .faq-answer p { font-size: 16px; }
  .cta { padding: 60px 18px 30px; }
  .cta-buttons { flex-direction: column; width: 100%; }
  .cta-buttons .btn { justify-content: center; }
  .cta-text p:last-child { font-size: 17px; }
  .cta-contact { flex-direction: column; gap: 14px; margin-top: 40px; }
  .site-footer { font-size: 16px; padding: 50px 16px 60px; }
}


/* ==========================================================
   COUNTRY PAGES (south-korea.html and the others later)
   ========================================================== */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.country-hero {
  position: relative;
  overflow: hidden;
  padding: 50px 0 100px;
  background:
    radial-gradient(circle at 95% 5%, #cfe8f5 0, #cfe8f5 12%, transparent 12.4%),
    radial-gradient(circle at 0% 100%, #fcebd5 0, #fcebd5 10%, transparent 10.4%),
    linear-gradient(180deg, #ffffff 0%, #f3f9fd 100%);
}
.country-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text); }
.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb [aria-current="page"] { color: var(--navy); font-weight: 600; }
.country-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  color: var(--navy);
  margin-top: 26px;
}
.country-lead { font-size: 21px; line-height: 1.8; margin-top: 24px; max-width: 620px; }
.country-hero .hero-buttons { margin-top: 34px; }

/* Flag showcase */
.flag-stage { position: relative; padding: 30px; }
.flag-ring {
  position: absolute; inset: 0;
  border: 2px dashed #b9dcee;
  border-radius: 50%;
  animation: spin 40s linear infinite;
}
.flag-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 34px;
  padding: 14px;
  box-shadow: 0 40px 80px rgba(20, 51, 90, .14);
  transform: rotate(-2deg);
  transition: transform .5s ease;
}
.flag-stage:hover .flag-card { transform: rotate(0deg) scale(1.02); }
.flag-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; background: #f1f4f7; }
.float-chip {
  position: absolute;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(20, 51, 90, .15);
  animation: float 6s ease-in-out infinite;
}
.float-chip::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; background: var(--primary); }
.chip-one { top: 4%; right: 0; }
.chip-two { bottom: 6%; left: 0; animation-delay: -3s; }
.chip-two::before { background: var(--accent); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Generic section */
.country-section { padding: 100px 0; }
.country-section.tint { background: var(--tint); }

/* Visa cards */
.visa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 64px; }
.visa-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--tint) 100%);
  border: 1px solid var(--border);
  border-radius: 36px;
  padding: 44px 44px 48px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.visa-card::after { /* soft circle in the corner */
  content: "";
  position: absolute; top: -70px; right: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: #eef7fc;
  transition: transform .5s ease;
}
.visa-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(20, 51, 90, .12); border-color: #c9e3f1; }
.visa-card:hover::after { transform: scale(1.25); }
.visa-card > * { position: relative; z-index: 1; }
.visa-tag { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text); }
.visa-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(64px, 8vw, 104px); line-height: 1; letter-spacing: -3px; margin: 18px 0 20px; }
.visa-code.blue { color: var(--primary); }
.visa-code.orange { color: var(--accent); }
.visa-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 27px; color: var(--navy); }
.visa-card p:last-child { font-size: 19px; line-height: 1.7; margin-top: 10px; }

/* Reasons */
.reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 64px; }
.reason-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 34px 30px 38px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.reason-tile:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(20, 51, 90, .1); }
.reason-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: #e8f6fc; color: var(--primary);
  transition: background .3s, color .3s;
}
.reason-tile:hover .reason-icon { background: var(--primary); color: var(--white); }
.reason-tile p { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--navy); margin-top: 24px; }

/* Team band (dark) */
.team-band { background: var(--navy); padding: 100px 0 90px; }
.handle-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; counter-reset: none; }
.handle-steps li {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 26px;
  padding: 30px 28px;
  transition: background .3s, transform .3s;
}
.handle-steps li:hover { background: rgba(255, 255, 255, .11); transform: translateY(-5px); }
.handle-steps span { font-family: var(--font-head); font-weight: 800; font-size: 36px; color: var(--accent); }
.handle-steps p { color: var(--white); font-weight: 600; font-size: 20px; margin-top: 12px; }
.team-note { max-width: 860px; margin: 54px auto 0; text-align: center; color: #c8d6e8; font-size: 19px; line-height: 1.8; }

/* CTA on country pages */
.country-cta { padding: 90px 0 30px; }
.country-cta-box { border-radius: 40px; padding: 70px 56px; }

/* Scroll reveal (added by script.js) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .flag-ring, .float-chip { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1023px) {
  .country-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .flag-stage { max-width: 520px; margin: 0 auto; width: 100%; }
  .reason-grid, .handle-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .country-hero { padding: 30px 0 60px; }
  .country-lead { font-size: 18px; }
  .country-section { padding: 64px 0; }
  .visa-grid, .reason-grid, .handle-steps { grid-template-columns: 1fr; }
  .visa-card { padding: 32px 26px 36px; }
  .team-band { padding: 64px 0; }
  .team-note { font-size: 17px; }
  .country-cta-box { padding: 44px 22px; border-radius: 28px; }
  .flag-stage { padding: 16px; }
  .float-chip { font-size: 13px; padding: 9px 14px; }
}


/* ==========================================================
   COUNTRY PAGES (South Korea first; reuse for other countries)
   ========================================================== */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* scroll-reveal (only hidden when JavaScript is running) */
.js .reveal { transition: opacity .7s ease, transform .5s ease, box-shadow .3s, border-color .3s; }
.js .reveal:not(.in-view) { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.in-view) { opacity: 1; transform: none; }
  .js .reveal { transition: none; }
}

/* Hero */
.country-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  padding: 70px 0 130px;
  color: var(--white);
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(14, 34, 64, .94) 0%, rgba(14, 34, 64, .75) 55%, rgba(14, 34, 64, .4) 100%),
    url("../images/countries/south-korea/hero.jpg") center / cover no-repeat;
  background-color: var(--navy);
}
.country-hero::after { /* soft blue glow in the corner */
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 159, 214, .35), transparent 70%);
  pointer-events: none;
}
.country-hero .container { position: relative; z-index: 1; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; margin-bottom: 26px; color: rgba(255, 255, 255, .75); }
.breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.country-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 66px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  max-width: 820px;
  margin-top: 16px;
}
.country-lead { font-size: 21px; margin-top: 20px; color: rgba(255, 255, 255, .88); }
.country-hero .hero-buttons { margin-top: 32px; }

/* Quick facts card */
.quick-facts {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(20, 51, 90, .14);
}
.quick-facts div { padding: 28px 34px; }
.quick-facts div + div { border-left: 1px solid var(--border); }
.quick-facts dt { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); }
.quick-facts dd { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--navy); margin-top: 6px; }

/* Intro */
.country-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; padding-top: 100px; padding-bottom: 100px; }
.intro-lead { font-size: 21px; line-height: 1.7; margin-top: 24px; color: var(--navy); }
.intro-sub { margin-top: 26px; font-weight: 600; color: var(--navy); }
.route-chips { display: grid; gap: 14px; margin-top: 16px; }
.route-chips a {
  display: block;
  padding: 18px 22px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.route-chips a:hover { transform: translateX(6px); border-color: var(--primary); box-shadow: 0 14px 30px rgba(20, 51, 90, .08); }
.route-chips strong { display: block; color: var(--navy); font-size: 18px; }
.route-chips span { display: block; font-size: 16px; margin-top: 4px; }

.intro-visual { position: relative; padding-bottom: 60px; padding-left: 40px; }
.flag-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 36px;
  box-shadow: 0 30px 60px rgba(20, 51, 90, .1);
}
.flag-card img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.photo-card {
  position: absolute;
  left: 0; bottom: 0;
  width: 56%;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: 0 24px 50px rgba(20, 51, 90, .2);
  background: #dfe5ea;
}
.photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Visa routes (tabs) */
.visa-routes { background: var(--tint); padding: 90px 0 80px; }
.tab-list {
  display: flex; justify-content: center; gap: 6px;
  width: fit-content; margin: 44px auto 34px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.tab-btn {
  border: 0; background: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600; font-size: 16px;
  color: var(--text);
  transition: background .25s, color .25s;
}
.tab-btn:hover { color: var(--navy); }
.tab-btn[aria-selected="true"] { background: var(--navy); color: var(--white); box-shadow: 0 8px 18px rgba(20, 51, 90, .25); }

.visa-panel {
  max-width: 1040px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 40px;
  box-shadow: 0 24px 50px rgba(20, 51, 90, .07);
  animation: panelIn .45s ease;
}
.visa-panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.panel-head { display: flex; align-items: center; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.visa-code {
  flex: none; display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 26px;
  background: linear-gradient(135deg, var(--primary), var(--navy));
  color: var(--white);
  font-family: var(--font-head); font-weight: 800; font-size: 30px;
}
.panel-head h3 { font-family: var(--font-head); font-weight: 700; font-size: 28px; color: var(--navy); }
.panel-head p { font-size: 18px; margin-top: 6px; }
.panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.info-box { background: var(--tint); border-radius: 20px; padding: 24px; }
.info-box h4 { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); margin: 0 0 10px; }
.info-box p { font-size: 17px; line-height: 1.7; color: var(--navy); }
.panel-note { max-width: 1040px; margin: 22px auto 0; text-align: center; font-size: 15px; color: #6f7f96; }

/* Why South Korea */
.why-korea { padding-top: 100px; padding-bottom: 90px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.benefit {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 36px 28px 32px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.benefit:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(20, 51, 90, .1); border-color: #c9e3f1; }
.benefit-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 56px; line-height: 1; color: #e3f2fa; transition: color .3s; }
.benefit:hover .benefit-num { color: var(--accent); }
.benefit h3 { font-family: var(--font-head); font-weight: 700; font-size: 21px; color: var(--navy); margin-top: 22px; }
.benefit p { margin-top: 10px; font-size: 16px; line-height: 1.7; }

/* Gallery */
.gallery { padding-bottom: 100px; }
.gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 250px 250px;
  gap: 18px;
  margin-top: 50px;
}
.gallery-grid figure { position: relative; margin: 0; overflow: hidden; border-radius: 26px; background: #dfe5ea; }
.gallery-grid .g-big { grid-row: span 2; }
.gallery-grid .g-wide { grid-column: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.gallery-grid figure:hover img { transform: scale(1.06); }
.gallery-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 22px 18px;
  color: var(--white); font-weight: 600;
  background: linear-gradient(transparent, rgba(14, 34, 64, .8));
}

/* Process */
.process { background: var(--navy); padding: 95px 0; }
.process-lead { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 19px; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; counter-reset: step; }
.process-steps li {
  position: relative;
  padding: 30px 26px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  transition: background .3s, transform .3s;
}
.process-steps li:hover { background: rgba(255, 255, 255, .12); transform: translateY(-5px); }
.process-steps span { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--accent); letter-spacing: 2px; }
.process-steps h3 { font-family: var(--font-head); font-weight: 700; font-size: 21px; color: var(--white); margin-top: 14px; }

/* CTA on country pages */
.country-cta-wrap { padding-top: 90px; }
.country-page .cta { border-radius: 32px; padding: 70px 50px 20px; }

/* ---------- Country page: responsive ---------- */
@media (max-width: 1023px) {
  .country-hero { min-height: 460px; padding-bottom: 110px; }
  .quick-facts { grid-template-columns: 1fr; margin-top: -50px; }
  .quick-facts div + div { border-left: 0; border-top: 1px solid var(--border); }
  .country-intro { grid-template-columns: 1fr; gap: 50px; padding-top: 70px; padding-bottom: 70px; }
  .panel-grid { grid-template-columns: 1fr; }
  .benefit-grid, .process-steps { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px 240px; }
  .gallery-grid .g-big { grid-row: auto; }
  .gallery-grid .g-wide { grid-column: span 2; }
}
@media (max-width: 767px) {
  .container { padding: 0 16px; }
  .country-hero { padding: 40px 0 100px; }
  .country-lead { font-size: 18px; }
  .intro-lead { font-size: 18px; }
  .intro-visual { padding-left: 0; }
  .photo-card { width: 62%; }
  .tab-list { width: 100%; border-radius: 22px; flex-direction: column; }
  .visa-panel { padding: 24px 20px; border-radius: 24px; }
  .panel-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .panel-head h3 { font-size: 23px; }
  .benefit-grid, .process-steps { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
  .gallery-grid .g-wide { grid-column: auto; }
  .country-page .cta { padding: 50px 22px 10px; border-radius: 24px; }
}


/* ==========================================================
   COUNTRY PAGES  (country.html + js/country.js)
   ========================================================== */
.country-page { background: var(--white); }
.cx-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Scroll fade-in (script adds the "visible" class) */
.cx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.cx-reveal.cx-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cx-reveal { opacity: 1; transform: none; transition: none; } }

.btn-accent { background: var(--accent); color: var(--navy); box-shadow: 0 12px 26px rgba(245, 154, 27, .3); }
.btn-accent:hover { background: #ffab33; }
.btn-glass { background: rgba(255,255,255,.12); color: var(--white); border-color: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255,255,255,.2); }

/* ----- Hero ----- */
.c-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding: 70px 0 100px;
  background:
    linear-gradient(105deg, rgba(12, 32, 60, .96) 0%, rgba(20, 51, 90, .84) 48%, rgba(20, 51, 90, .45) 100%),
    var(--hero-img) center / cover no-repeat;
  background-color: var(--navy);
}
.c-hero::after { /* soft orange glow in the corner */
  content: ""; position: absolute; right: -120px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,154,27,.35), transparent 70%);
  pointer-events: none;
}
.c-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 340px; gap: 50px; align-items: end; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: #b9cbe0; margin-bottom: 50px; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); font-weight: 600; }
.c-hero-flag { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #8fd6f5; }
.c-hero-flag img { width: 34px; height: 24px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.c-hero h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 5vw, 64px); line-height: 1.1; letter-spacing: -1.5px; margin: 20px 0 24px; max-width: 760px; }
.c-hero-lead { font-size: 20px; line-height: 1.75; color: #dbe6f3; max-width: 640px; }
.c-hero .hero-buttons { margin-top: 36px; }

.glance { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 28px; padding: 30px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px rgba(0,0,0,.2); }
.glance h2 { font-family: var(--font-head); font-size: 20px; margin-bottom: 8px; }
.glance div { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.glance div:last-child { border-bottom: 0; padding-bottom: 0; }
.glance dt { font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: #9fd8f2; }
.glance dd { font-size: 18px; font-weight: 600; margin-top: 4px; }

/* ----- Intro with university photo ----- */
.intro-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; padding-block: 110px; }
.intro-photo { position: relative; margin: 0 24px 24px 0; }
.intro-photo::before { content: ""; position: absolute; inset: 24px -24px -24px 24px; border: 3px solid var(--accent); border-radius: 36px; }
.intro-photo > img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 36px; background: linear-gradient(160deg, #dcecf6, #fbe9d0); }
.intro-badge { position: absolute; left: -22px; bottom: 36px; display: flex; align-items: center; gap: 12px; background: var(--white); color: var(--navy); font-family: var(--font-head); font-weight: 700; padding: 12px 22px 12px 14px; border-radius: 999px; box-shadow: 0 16px 36px rgba(20,51,90,.18); }
.intro-badge img { width: 40px; height: 28px; object-fit: cover; border-radius: 4px; }
.intro-copy .section-title { margin-top: 14px; }
.intro-text { font-size: 19px; line-height: 1.85; margin-top: 22px; }

/* ----- Visa tabs ----- */
.cv-section { background: var(--tint); padding: 100px 0; }
.cv-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 50px 0 30px; }
.cv-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 230px; padding: 16px 30px; background: var(--white); color: var(--navy); border: 1px solid var(--border); border-radius: 20px; transition: all .25s ease; }
.cv-tab strong { font-family: var(--font-head); font-size: 24px; }
.cv-tab span { font-size: 14px; color: var(--text); }
.cv-tab:hover { border-color: var(--primary); transform: translateY(-2px); }
.cv-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: 0 16px 34px rgba(20,51,90,.25); }
.cv-tab[aria-selected="true"] span { color: #b9cbe0; }
.cv-panel:not([hidden]) { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; animation: panelIn .45s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cv-main { background: var(--white); border: 1px solid var(--border); border-radius: 32px; padding: 40px; }
.cv-code { display: inline-block; background: #e3f2fa; color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.cv-main h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; color: var(--navy); margin: 18px 0 14px; }
.cv-about { font-size: 18px; line-height: 1.8; }
.tick-list { margin-top: 22px; display: grid; gap: 12px; }
.tick-list li { position: relative; padding-left: 36px; font-size: 18px; color: #3c4a60; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: #e3f2fa; color: var(--primary); font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.cv-docs { background: linear-gradient(160deg, var(--navy), #0d2545); color: var(--white); border-radius: 32px; padding: 40px; }
.cv-docs h4 { font-family: var(--font-head); font-size: 22px; margin-bottom: 20px; }
.doc-list { display: grid; gap: 14px; }
.doc-list li { position: relative; padding: 0 0 14px 28px; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.14); color: #dbe6f3; }
.doc-list li:last-child { border-bottom: 0; }
.doc-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.cv-note { text-align: center; max-width: 760px; margin: 30px auto 0; font-size: 15px; color: #6f7f96; }

/* ----- Why band ----- */
.why-band { background: var(--navy); padding: 100px 0; }
.why-tiles { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 20px; margin-top: 56px; }
.why-tile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 28px; padding: 34px 28px; transition: transform .3s, background .3s; }
.why-tile:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); }
.why-tile-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: var(--navy); }
.why-tile h3 { font-family: var(--font-head); font-size: 18px; line-height: 1.4; color: var(--white); margin-top: 22px; }
.why-tile p { color: #c5d3e6; font-size: 16px; line-height: 1.7; margin-top: 10px; }

/* ----- Route (steps) ----- */
.route { padding-block: 110px; }
.route-steps { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 30px; margin-top: 64px; counter-reset: none; }
.route-step { position: relative; }
.route-step:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: 76px; right: -14px; height: 2px; background: repeating-linear-gradient(90deg, #b7d3e3 0 6px, transparent 6px 12px); }
.route-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 22px; box-shadow: 0 0 0 6px #eaf3f9; }
.route-step:last-child .route-num { background: var(--accent); }
.route-step h3 { font-family: var(--font-head); font-size: 18px; line-height: 1.4; color: var(--navy); margin-top: 24px; }
.route-step p { font-size: 16px; line-height: 1.7; margin-top: 10px; }

/* ----- Gallery ----- */
.cx-gallery { padding-bottom: 110px; }
.cx-gallery-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-auto-rows: 250px; gap: 16px; margin-top: 56px; }
.cx-gallery-item { margin: 0; overflow: hidden; border-radius: 28px; background: linear-gradient(160deg, #dcecf6, #fbe9d0); }
.cx-gallery-item:first-child { grid-row: span 2; }
.cx-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cx-gallery-item:hover img { transform: scale(1.06); }

/* ----- Other destinations + CTA ----- */
.other-dest { padding-bottom: 20px; }
.mini-title { font-family: var(--font-head); font-size: 24px; color: var(--navy); text-align: center; }
.dest-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.dest-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--navy); font-weight: 500; font-size: 15px; transition: all .2s ease; }
.dest-chip img { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; background: #e6ebf0; }
.dest-chip:hover { border-color: var(--primary); background: var(--tint); transform: translateY(-2px); }
.country-page .cta.cx-cta { border-radius: 36px; margin: 80px 0 0; padding: 80px 56px 20px; }

/* "Coming soon" + unknown country */
.soon { text-align: center; padding-block: 110px 50px; display: grid; justify-items: center; gap: 18px; }
.soon h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(36px, 5vw, 60px); color: var(--navy); letter-spacing: -1px; }
.soon p { font-size: 19px; max-width: 560px; }
.soon img { border-radius: 6px; }
.country-noscript { padding: 60px 24px; text-align: center; }

/* ----- Responsive ----- */
@media (max-width: 1023px) {
  .c-hero { padding: 40px 0 70px; }
  .c-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .crumbs { margin-bottom: 30px; }
  .intro-split { grid-template-columns: 1fr; gap: 60px; padding-block: 70px; }
  .intro-photo { max-width: 460px; }
  .cv-panel:not([hidden]) { grid-template-columns: 1fr; }
  .why-tiles { grid-template-columns: repeat(2, 1fr); }
  .route-steps { grid-template-columns: repeat(2, 1fr); gap: 44px 30px; }
  .route-step::after { display: none; }
  .cx-gallery-grid { grid-template-columns: 1fr 1fr; }
  .cx-gallery-item:first-child { grid-column: span 2; grid-row: span 1; }
  .country-page .cta.cx-cta { padding: 56px 28px 16px; }
}
@media (max-width: 767px) {
  .c-hero-lead { font-size: 17px; }
  .cv-section, .why-band { padding: 70px 0; }
  .cv-tab { min-width: 100%; }
  .cv-main, .cv-docs { padding: 28px 22px; border-radius: 26px; }
  .tick-list li, .cv-about { font-size: 16px; }
  .why-tiles, .route-steps { grid-template-columns: 1fr; }
  .cx-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .cx-gallery-item:first-child { grid-column: auto; }
  .route, .cx-gallery { padding-block: 70px; }
  .country-page .cta.cx-cta { margin-top: 50px; }
}

/* only one visa type: hide the tab buttons */
.cv-tabs.single { display: none; }
.cv-tabs.single + .cv-panels { margin-top: 44px; }

/* ----- extras for the real-content version ----- */
.cv-panel.solo:not([hidden]) { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; }
.fact-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fact-chips li { background: var(--tint); border: 1px solid var(--border); border-radius: 16px; padding: 12px 18px; font-weight: 600; color: var(--navy); }
.fact-chips li span { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #6f7f96; font-weight: 600; }
.intro-summary { font-weight: 600; color: var(--navy); }
.intro-btn { margin-top: 30px; }
.country-loading { padding: 80px 24px; text-align: center; color: #6f7f96; }

/* ----- "Other European Countries" side menu ----- */
.main-nav .submenu { display: none; padding-left: 16px; }
.has-sub.open > .submenu { display: flex; }
@media (min-width: 1024px) {
  .dropdown .has-sub { position: relative; }
  .main-nav .dropdown .submenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: -6px;
    right: 100%;                /* opens to the left so it never leaves the screen */
    margin-right: 6px;
    width: 290px;
    padding: 6px 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(20, 51, 90, .16), 0 2px 6px rgba(20, 51, 90, .05);
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .dropdown .has-sub::after { /* bridge so the side menu does not close in the gap */
    content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 8px;
  }
  .dropdown .has-sub:hover > .submenu,
  .dropdown .has-sub:focus-within > .submenu,
  .dropdown .has-sub.open > .submenu {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  /* the chevron of "Other European Countries" points left, where the side menu opens */
  .dropdown a.sub-toggle::after { content: "‹"; }
  .dropdown a.sub-toggle { flex-direction: row-reverse; }
}


/* ==========================================================
   COUNTRY PAGES - research sections, illustrations, photos
   ========================================================== */

/* Illustration shown in the hero until a real photo loads */
.c-art { position: absolute; right: 0; bottom: 0; width: min(62%, 780px); height: 100%; opacity: .55; pointer-events: none; }
.c-hero.has-photo .c-art { display: none; }

/* Country snapshot cards */
.cx-snapshot { margin-top: -50px; position: relative; z-index: 2; }
.snap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.snap-card { background: var(--white); border: 1px solid var(--border); border-radius: 24px; padding: 24px 24px 26px; box-shadow: 0 20px 44px rgba(20,51,90,.08); }
.snap-card span { display: block; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: #6f7f96; font-weight: 600; }
.snap-card strong { display: block; margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--navy); font-weight: 600; }

/* Intro photo fallback illustration */
.intro-photo { background: linear-gradient(160deg, var(--navy), #1d4f86); border-radius: 36px; }
.intro-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; border-radius: 36px; }
.intro-photo > img:not(.intro-art) { position: relative; }

/* Study options */
.cx-study { padding-block: 110px 20px; }
.study-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; margin-top: 56px; }
.study-card { background: var(--tint); border: 1px solid var(--border); border-radius: 32px; padding: 38px; }
.study-card.alt { background: linear-gradient(160deg, #fff, #fdf3e3); }
.study-card h3 { font-family: var(--font-head); font-size: 22px; color: var(--navy); margin-bottom: 20px; }
.uni-list { display: grid; gap: 12px; }
.uni-list li { position: relative; padding: 12px 16px 12px 44px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; color: #3c4a60; font-weight: 500; }
.uni-list li::before { content: "🎓"; position: absolute; left: 14px; top: 11px; font-size: 16px; }
.field-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.field-chips span { background: var(--white); border: 1px solid #f3d8a8; color: var(--navy); padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.study-note { margin-top: 24px; font-size: 15px; color: #6f7f96; }

/* Work & career */
.work-band { background: var(--tint); padding: 100px 0; margin-top: 90px; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.work-card { background: var(--white); border: 1px solid var(--border); border-radius: 28px; padding: 34px 30px; transition: transform .3s, box-shadow .3s; }
.work-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(20,51,90,.1); }
.work-num { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #e3f2fa; color: var(--primary); font-family: var(--font-head); font-weight: 700; }
.work-card h3 { font-family: var(--font-head); font-size: 20px; color: var(--navy); margin-top: 20px; }
.work-card p { margin-top: 10px; font-size: 16px; line-height: 1.75; }

/* Scholarships */
.schol { padding-block: 100px 10px; }
.schol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 50px; }
.schol-card { position: relative; background: var(--white); border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: 22px; padding: 28px 30px; box-shadow: 0 14px 34px rgba(20,51,90,.06); }
.schol-card h3 { font-family: var(--font-head); font-size: 19px; color: var(--navy); }
.schol-card p { margin-top: 10px; font-size: 16px; line-height: 1.7; }

/* Life gallery: photo on top, illustration underneath if the photo is missing */
.life { padding-bottom: 100px; }
.life-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-auto-rows: 260px; gap: 16px; margin-top: 56px; }
.life-item { position: relative; margin: 0; overflow: hidden; border-radius: 28px; background: linear-gradient(150deg, #14335a, #1f6fa5); }
.life-item.life-2 { background: linear-gradient(150deg, #1d4f86, #139fd6); }
.life-item.life-3 { background: linear-gradient(150deg, #8a4b08, #f59a1b); }
.life-item.life-1 { grid-row: span 2; }
.life-art { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; opacity: .55; }
.life-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.life-item:hover img { transform: scale(1.06); }
.life-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 24px 22px; color: var(--white); background: linear-gradient(transparent, rgba(10,28,52,.85)); }
.life-item figcaption strong { display: block; font-family: var(--font-head); font-size: 20px; }
.life-item figcaption span { display: block; margin-top: 4px; font-size: 15px; color: #dbe6f3; }

/* FAQ */
.faq-band { background: var(--tint); padding: 90px 0; }
.cx-faq-list { max-width: 900px; margin: 50px auto 0; display: grid; gap: 14px; }
.cx-faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 22px; }
.cx-faq-item h3 { font-size: inherit; margin: 0; }
.cx-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left; background: none; border: 0; padding: 24px 28px; font-size: 18px; font-weight: 600; color: var(--navy); }
.cx-faq-q span { position: relative; flex: none; width: 16px; height: 16px; color: var(--primary); }
.cx-faq-q span::before, .cx-faq-q span::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .25s; }
.cx-faq-q span::before { left: 0; top: 7px; width: 16px; height: 2.5px; }
.cx-faq-q span::after { left: 6.7px; top: 0; width: 2.5px; height: 16px; }
.cx-faq-q[aria-expanded="true"] span::before, .cx-faq-q[aria-expanded="true"] span::after { transform: rotate(45deg); }
.cx-faq-a { padding: 0 28px 26px; }
.cx-faq-a p { font-size: 17px; line-height: 1.8; }

.cx-disclaimer { max-width: 760px; margin: 34px auto 0; text-align: center; font-size: 14px; color: #6f7f96; }
.other-dest { padding-top: 90px; }

@media (max-width: 1023px) {
  .snap-grid { grid-template-columns: repeat(2, 1fr); }
  .study-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .life-grid { grid-template-columns: 1fr 1fr; }
  .life-item.life-1 { grid-column: span 2; grid-row: span 1; }
  .c-art { width: 90%; opacity: .35; }
}
@media (max-width: 767px) {
  .snap-grid { grid-template-columns: 1fr; }
  .cx-snapshot { margin-top: -30px; }
  .study-card { padding: 26px 20px; }
  .work-band { padding: 70px 0; margin-top: 60px; }
  .life-grid { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .life-item.life-1 { grid-column: auto; }
  .cx-faq-q { font-size: 16px; padding: 20px 18px; }
  .cx-faq-a { padding: 0 18px 22px; }
}

/* intro photo box keeps its size even when the photo file is missing */
.intro-photo { aspect-ratio: 4 / 5; }
.intro-photo > img:not(.intro-art):not([width]) { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.intro-photo .intro-art { z-index: 0; }
.intro-badge { z-index: 2; }


/* ==========================================================
   NEW PAGE: ABOUT (about.html)
   ========================================================== */

.about-page { background: var(--white); }

/* Shared width container for this page */
.ab-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Small label above headings */
.ab-kicker {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
}
.ab-kicker-light { color: #7fd0f3; }

/* ---------- 1. HERO ---------- */
.ab-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 80% 40%, rgba(19, 159, 214, .35), transparent 55%),
    linear-gradient(135deg, #14335a 0%, #0d2342 100%);
  padding: 80px 24px 170px;
}
.ab-hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 40px;
}
.ab-hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(54px, 9vw, 120px);
  line-height: 1;
  letter-spacing: -3px;
}
.ab-hero-sub {
  max-width: 460px;
  margin-top: 26px;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
}
.ab-compass { width: 100%; max-width: 420px; justify-self: end; }

/* Needle swings and settles on North (plays once on page load) */
.ab-needle {
  transform-origin: 200px 200px;
  animation: ab-needle-settle 2.6s cubic-bezier(.2, .9, .3, 1.15) .3s both;
}
@keyframes ab-needle-settle {
  from { transform: rotate(150deg); }
  to   { transform: rotate(0deg); }
}

/* ---------- 2. QUICK FACTS (card overlapping the hero) ---------- */
.ab-facts-wrap { position: relative; z-index: 2; margin-top: -92px; }
.ab-facts {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.2fr;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(20, 51, 90, .16);
  overflow: hidden;
}
.ab-facts > div { padding: 30px 34px; }
.ab-facts > div + div { border-left: 1px solid var(--border); }
.ab-facts dt { font-size: 15px; font-weight: 600; color: var(--primary); }
.ab-facts dd {
  margin-top: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.35;
  color: var(--navy);
}

/* ---------- 3. STORY + ROUTE ---------- */
.ab-story {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 80px;
  padding-top: 110px;
  padding-bottom: 40px;
  align-items: start;
}
.ab-story h2,
.ab-orient h2,
.ab-team h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  color: var(--navy);
  margin-top: 12px;
}
.ab-story h2 span,
.ab-orient h2 span,
.ab-team h2 span { color: var(--accent); }
.ab-lead {
  margin-top: 22px;
  font-size: 21px;
  font-weight: 500;
  color: var(--navy);
}
.ab-story-text p:not(.ab-kicker):not(.ab-lead) {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.8;
  max-width: 68ch;
}
.ab-story-text .btn { margin-top: 34px; }

/* Destination route: stops joined by a vertical line */
.ab-route {
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 36px 34px;
}
.ab-route h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 26px;
}
.ab-route ol { position: relative; }
.ab-route ol::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  border-left: 2px dashed #b9d9ea;
}
.ab-route li {
  position: relative;
  padding: 9px 0 9px 36px;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
}
.ab-route li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--primary);
}
.ab-route li:first-child::before { border-color: var(--accent); }

/* ---------- 4. STRENGTHS ---------- */
.ab-strengths {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 22px;
  padding-top: 70px;
  padding-bottom: 110px;
}
.ab-strength {
  padding: 34px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}
.ab-strength h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
  margin-top: 22px;
}
.ab-strength p { margin-top: 10px; font-size: 17px; line-height: 1.7; }
.ab-strength-icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--tint);
  color: var(--primary);
}
/* The first one is the main strength, so it stands out */
.ab-strength-main {
  background: var(--navy);
  border-color: var(--navy);
}
.ab-strength-main h3 { color: var(--white); font-size: 28px; }
.ab-strength-main p { color: rgba(255, 255, 255, .8); font-size: 18px; }
.ab-strength-main .ab-strength-icon { background: rgba(255, 255, 255, .1); color: var(--accent); }

/* ---------- 5. ORIENT LETTERS ---------- */
.ab-orient {
  background: linear-gradient(160deg, #14335a 0%, #0d2342 100%);
  padding: 110px 0;
  color: var(--white);
}
.ab-orient-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.ab-orient-intro { position: sticky; top: 120px; }   /* stays in view while the letters scroll */
.ab-orient h2 { color: var(--white); }
.ab-orient-sub { margin-top: 20px; font-size: 19px; line-height: 1.7; color: rgba(255, 255, 255, .75); max-width: 36ch; }

/* LEARN tiles */
.ab-tiles { display: flex; gap: 8px; margin-top: 36px; }
.ab-tiles span {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--navy);
  background: linear-gradient(145deg, #f7d9a6, #e8b66a);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.ab-tiles span:nth-child(odd) { transform: rotate(-3deg); }
.ab-tiles span:nth-child(even) { transform: rotate(2deg) translateY(2px); }

/* One row per letter: huge letter + meaning */
.ab-letters li {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 30px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.ab-letters li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ab-letter {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 104px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .35);
  transition: color .35s ease, -webkit-text-stroke-color .35s ease;
}
.ab-letters h3 { font-family: var(--font-head); font-weight: 700; font-size: 26px; }
.ab-letters p { margin-top: 6px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* The letter in the middle of the screen (or hovered) fills with orange.
   about.js adds the class "is-active". */
.ab-letters li.is-active .ab-letter,
.ab-letters li:hover .ab-letter {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}

/* ---------- 6. TEAM ---------- */
.ab-team { padding-top: 110px; }
.ab-team-head { text-align: center; }
.ab-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 50px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.ab-person {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--tint);
}
.ab-avatar {
  position: relative;
  flex: none;
  width: 120px; height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--navy));
  border: 4px solid var(--white);
  box-shadow: 0 10px 24px rgba(20, 51, 90, .18);
}
.ab-initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 34px;
  color: var(--white);
}
.ab-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-person h3 { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--navy); }
.ab-role { margin-top: 4px; font-size: 16px; color: var(--text); }
.ab-phone { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--primary); }
.ab-phone:hover { text-decoration: underline; }

/* ---------- 7. CTA ---------- */
.ab-cta-wrap { padding-top: 110px; }
.ab-cta {
  background: linear-gradient(135deg, #139fd6 0%, #0b7db5 40%, #0a5f94 70%, #14335a 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 70px 56px 20px;
}
.ab-cta-top { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.ab-cta h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.1;
  letter-spacing: -2px;
  margin-top: 14px;
}
.ab-cta-top p:last-child { margin-top: 14px; font-size: 20px; line-height: 1.7; max-width: 620px; }
.ab-cta-buttons { display: flex; gap: 14px; flex: none; }
.ab-cta-contact {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  margin-top: 56px; padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: 16px;
}
.ab-cta-contact a:hover { text-decoration: underline; }

/* Keyboard focus */
.ab-wrap a:focus-visible,
.ab-cta a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

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

/* Laptops and small desktops */
@media (max-width: 1100px) {
  .ab-story { gap: 50px; }
  .ab-orient-grid { gap: 50px; }
  .ab-cta-top { flex-direction: column; align-items: flex-start; }
}

/* Tablets */
@media (max-width: 1023px) {
  .ab-hero { padding: 60px 24px 150px; }
  .ab-hero-grid { grid-template-columns: 1fr; }
  .ab-compass { max-width: 260px; justify-self: start; order: -1; }
  .ab-facts { grid-template-columns: 1fr; }
  .ab-facts > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .ab-facts-wrap { margin-top: -80px; }
  .ab-story { grid-template-columns: 1fr; padding-top: 80px; }
  .ab-strengths { grid-template-columns: 1fr 1fr; padding-bottom: 80px; }
  .ab-strength-main { grid-column: 1 / -1; }
  .ab-orient { padding: 80px 0; }
  .ab-orient-grid { grid-template-columns: 1fr; }
  .ab-orient-intro { position: static; }   /* sticky is only useful side by side */
  .ab-team { padding-top: 80px; }
  .ab-team-grid { grid-template-columns: 1fr; max-width: 560px; }
  .ab-cta-wrap { padding-top: 80px; }
}

/* Phones */
@media (max-width: 767px) {
  .ab-hero { padding: 40px 20px 130px; }
  .ab-hero h1 { letter-spacing: -2px; }
  .ab-hero-sub { font-size: 18px; }
  .ab-compass { max-width: 190px; }
  .ab-wrap { padding: 0 18px; }
  .ab-facts > div { padding: 22px 24px; }
  .ab-facts dd { font-size: 19px; }
  .ab-lead { font-size: 19px; }
  .ab-story-text p:not(.ab-kicker):not(.ab-lead) { font-size: 17px; }
  .ab-strengths { grid-template-columns: 1fr; }
  .ab-letters li { grid-template-columns: 76px 1fr; gap: 16px; }
  .ab-letter { font-size: 68px; -webkit-text-stroke-width: 1.5px; }
  .ab-letters h3 { font-size: 22px; }
  .ab-letters p { font-size: 16px; }
  .ab-person { flex-direction: column; text-align: center; }
  .ab-cta { padding: 46px 22px 10px; border-radius: 26px; }
  .ab-cta-top p:last-child { font-size: 17px; }
  .ab-cta-buttons { flex-direction: column; width: 100%; }
  .ab-cta-buttons .btn { justify-content: center; }
  .ab-cta-contact { flex-direction: column; margin-top: 36px; }
}

/* Respect "reduce motion" settings */
@media (prefers-reduced-motion: reduce) {
  .ab-needle { animation: none; }
  .ab-letter { transition: none; }
}


/* ==========================================================
   NEW PAGE: CONTACT (contact.html)
   ========================================================== */

.contact-page { background: var(--white); }
.ct-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.ct-kicker { font-size: 15px; font-weight: 600; color: var(--primary); }
.ct-kicker-light { color: #7fd0f3; }

/* ---------- 1. HERO ---------- */
.ct-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 30%, rgba(19, 159, 214, .35), transparent 55%),
    linear-gradient(135deg, #14335a 0%, #0d2342 100%);
  padding: 90px 24px 190px;
}
.ct-hero-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.ct-hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(52px, 8.5vw, 112px);
  line-height: 1;
  letter-spacing: -3px;
  margin-top: 16px;
}
.ct-hero-sub { max-width: 500px; margin-top: 26px; font-size: 20px; line-height: 1.6; color: rgba(255, 255, 255, .8); }

/* Flight path: starts at Kathmandu (orange dot) and draws itself once */
.ct-flight { position: absolute; right: 0; top: 20px; width: min(900px, 80%); height: 80%; opacity: .9; }
.ct-flight-path { stroke-dashoffset: 0; animation: ct-fade-in 1.6s ease .2s both; }
.ct-flight-end { animation: ct-fade-in .6s ease 1.6s both; }
@keyframes ct-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 2. FORM + DETAILS ---------- */
.ct-main {
  position: relative;
  z-index: 2;
  margin-top: -110px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 70px;
  align-items: start;
}

/* Form card with an "airmail" striped edge (a letter on its way abroad) */
.ct-form-card {
  padding: 10px;
  border-radius: calc(var(--radius-md) + 6px);
  background: repeating-linear-gradient(-45deg, var(--primary) 0 16px, var(--white) 16px 28px, var(--accent) 28px 44px, var(--white) 44px 56px);
  box-shadow: 0 28px 70px rgba(20, 51, 90, .22);
}
.ct-form-inner {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 46px 44px 44px;
}
.ct-form-inner h2,
.ct-details h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--navy);
}
.ct-form-lead { margin-top: 10px; font-size: 18px; line-height: 1.6; }

.ct-form { margin-top: 30px; display: grid; gap: 22px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ct-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-field label,
.ct-field legend { display: block; padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--navy); }
.ct-optional { font-weight: 400; color: var(--text); }

.ct-field input[type="text"],
.ct-field input[type="tel"],
.ct-field input[type="email"],
.ct-field textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--dark-text);
  background: var(--tint);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ct-field textarea { resize: vertical; min-height: 120px; }
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: #9aa8bb; }
.ct-field input:focus,
.ct-field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(19, 159, 214, .15);
}

/* Destination chips (radio buttons that look like tags) */
.ct-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-chip { position: relative; margin: 0 !important; }
.ct-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.ct-chip span {
  display: inline-block;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  background: var(--tint);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s;
}
.ct-chip:hover span { border-color: var(--primary); }
.ct-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.ct-chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Errors */
.ct-error { min-height: 0; margin-top: 6px; font-size: 14px; font-weight: 500; color: #c0392b; }
.ct-error:empty { display: none; }
.ct-field.has-error input,
.ct-field.has-error textarea { border-color: #c0392b; background: #fff8f7; }

.ct-submit { justify-content: center; width: 100%; border: 0; cursor: pointer; margin-top: 4px; }

/* Success panel */
.ct-success { text-align: center; padding: 20px 0 6px; }
.ct-success[hidden] { display: none; }
.ct-success-icon {
  display: inline-grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(19, 159, 214, .12); color: var(--primary);
}
.ct-success h2 { margin-top: 22px; }
.ct-success h2 span { color: var(--accent); }
.ct-success p { margin: 12px auto 0; max-width: 42ch; font-size: 18px; line-height: 1.7; }
.ct-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* Contact details column */
.ct-details { padding-top: 130px; }
.ct-details h2 { margin-top: 10px; }
.ct-info { display: grid; gap: 26px; margin-top: 36px; }
.ct-info li { display: flex; gap: 18px; align-items: flex-start; }
.ct-icon {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--tint);
  border: 1px solid var(--border);
  color: var(--primary);
}
.ct-info h3 { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--navy); }
.ct-info a,
.ct-info p { display: block; margin-top: 4px; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.ct-info a:hover { color: var(--primary); text-decoration: underline; }

.ct-follow { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--border); }
.ct-follow h3 { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--navy); }
.ct-follow ul { display: flex; gap: 12px; margin-top: 16px; }
.ct-follow a {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--primary);
  background: var(--tint);
  border: 1px solid var(--border);
  transition: background .2s, color .2s, transform .2s;
}
.ct-follow a:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); }

/* ---------- 3. MAP ---------- */
.ct-map-wrap { padding-top: 100px; padding-bottom: 20px; }
.ct-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(20, 51, 90, .12);
}
.ct-map iframe { display: block; width: 100%; height: 460px; border: 0; }
.ct-map-card {
  position: absolute;
  left: 28px; bottom: 28px;
  max-width: 340px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .3);
}
.ct-map-card h2 { font-family: var(--font-head); font-weight: 800; font-size: 24px; }
.ct-map-card p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.ct-map-card .btn { margin-top: 18px; font-size: 16px; padding: 12px 22px; }

/* Keyboard focus */
.ct-wrap a:focus-visible,
.ct-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

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

@media (max-width: 1100px) {
  .ct-main { gap: 40px; }
}

/* Tablets */
@media (max-width: 1023px) {
  .ct-hero { padding: 60px 24px 160px; }
  .ct-main { grid-template-columns: 1fr; margin-top: -90px; }
  .ct-details { padding-top: 10px; }
  .ct-info { grid-template-columns: 1fr 1fr; }
  .ct-map-wrap { padding-top: 70px; }
}

/* Phones */
@media (max-width: 767px) {
  .ct-hero { padding: 40px 20px 140px; }
  .ct-hero h1 { letter-spacing: -2px; }
  .ct-hero-sub { font-size: 18px; }
  .ct-flight { opacity: .5; width: 100%; }
  .ct-wrap { padding: 0 16px; }
  .ct-form-card { padding: 7px; }
  .ct-form-inner { padding: 30px 20px 28px; }
  .ct-row { grid-template-columns: 1fr; }
  .ct-info { grid-template-columns: 1fr; }
  .ct-map iframe { height: 380px; }
  .ct-map-card { position: static; max-width: none; border-radius: 0; box-shadow: none; }
  .ct-success-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-flight-path, .ct-flight-end { animation: none; }
}


/* ==========================================================
   NEW PAGE: SERVICES (services.html)
   ========================================================== */

.svc-page { background: var(--white); }
.svc-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.svc-kicker { font-size: 15px; font-weight: 600; color: var(--primary); }
.svc-kicker-light { color: #7fd0f3; }

/* ---------- 1. HERO ---------- */
.svc-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 45%, rgba(19, 159, 214, .35), transparent 55%),
    linear-gradient(135deg, #14335a 0%, #0d2342 100%);
  padding: 80px 24px 100px;
}
.svc-hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 40px;
}
.svc-hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(52px, 8.5vw, 112px);
  line-height: 1.02;
  letter-spacing: -3px;
  margin-top: 16px;
}

/* The stamp: tilted, orange "ink", presses down once on load */
.svc-stamp {
  width: 100%;
  max-width: 300px;
  justify-self: center;
  transform: rotate(-12deg);
  opacity: .95;
  animation: svc-stamp-down .6s cubic-bezier(.3, 1.4, .5, 1) .3s both;
}
@keyframes svc-stamp-down {
  from { opacity: 0; transform: rotate(-12deg) scale(1.5); }
  to   { opacity: .95; transform: rotate(-12deg) scale(1); }
}

/* ---------- 2. INDEX + LIST ---------- */
.svc-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 60px;
  align-items: start;
  padding-top: 80px;
}

/* Sticky list of services (highlight is set by services.js) */
.svc-index { position: sticky; top: 110px; }
.svc-index-title { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--navy); margin-bottom: 16px; }
.svc-index ul { border-left: 2px solid var(--border); }
.svc-index a {
  display: block;
  margin-left: -2px;
  padding: 10px 0 10px 18px;
  border-left: 2px solid transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  transition: color .2s, border-color .2s;
}
.svc-index a:hover { color: var(--navy); }
.svc-index a[aria-current="true"] { color: var(--navy); font-weight: 700; border-left-color: var(--accent); }

.svc-list { display: grid; gap: 28px; }

/* ---------- 3. SERVICE CARD ---------- */
.svc-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
  scroll-margin-top: 110px;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.svc-card:hover { border-color: #c9deee; box-shadow: 0 22px 50px rgba(20, 51, 90, .1); }

/* Left panel: coloured block with a big icon. The photo covers it when it exists. */
.svc-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  background: linear-gradient(145deg, var(--tone-a), var(--tone-b));
  color: var(--tone-icon);
}
.svc-icon { width: 96px; height: 96px; }
.svc-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.svc-tone-navy   { --tone-a: #14335a; --tone-b: #1d4a7e; --tone-icon: var(--accent); }
.svc-tone-blue   { --tone-a: #139fd6; --tone-b: #0b7db5; --tone-icon: #ffffff; }
.svc-tone-orange { --tone-a: #fdf0de; --tone-b: #f9dcae; --tone-icon: #b8690a; }

.svc-body { padding: 36px 40px; }
.svc-body h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -.5px;
  color: var(--navy);
}
.svc-body p { margin-top: 14px; font-size: 18px; line-height: 1.85; color: #4b4f58; max-width: 62ch; }

/* Small tags taken from the service text (countries, exams...) */
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc-chips li {
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* ---------- 4. CTA ---------- */
.svc-cta-wrap { padding-top: 110px; }
.svc-cta {
  background: linear-gradient(135deg, #139fd6 0%, #0b7db5 40%, #0a5f94 70%, #14335a 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 70px 56px 20px;
}
.svc-cta-top { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.svc-cta h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.1;
  letter-spacing: -2px;
  margin-top: 14px;
}
.svc-cta-top p:last-child { margin-top: 14px; font-size: 20px; line-height: 1.7; max-width: 620px; }
.svc-cta-buttons { display: flex; gap: 14px; flex: none; }
.svc-cta-contact {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  margin-top: 56px; padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: 16px;
}
.svc-cta-contact a:hover { text-decoration: underline; }

/* Keyboard focus */
.svc-wrap a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

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

@media (max-width: 1100px) {
  .svc-layout { grid-template-columns: 220px 1fr; gap: 36px; }
  .svc-card { grid-template-columns: 220px 1fr; }
  .svc-body { padding: 30px 28px; }
  .svc-cta-top { flex-direction: column; align-items: flex-start; }
}

/* Tablets: the index becomes a row of scrollable tabs above the cards */
@media (max-width: 1023px) {
  .svc-hero { padding: 60px 24px 80px; }
  .svc-hero-grid { grid-template-columns: 1fr; }
  .svc-stamp { max-width: 200px; justify-self: start; order: -1; }
  .svc-layout { grid-template-columns: 1fr; gap: 28px; padding-top: 50px; }
  .svc-index { position: static; }
  .svc-index-title { display: none; }
  .svc-index ul { display: flex; gap: 8px; overflow-x: auto; border-left: 0; padding-bottom: 8px; }
  .svc-index a {
    margin: 0;
    white-space: nowrap;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--tint);
  }
  .svc-index a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
  .svc-card { grid-template-columns: 240px 1fr; }
  .svc-cta-wrap { padding-top: 80px; }
}

/* Phones */
@media (max-width: 767px) {
  .svc-hero { padding: 40px 20px 60px; }
  .svc-hero h1 { letter-spacing: -2px; }
  .svc-stamp { max-width: 150px; }
  .svc-wrap { padding: 0 16px; }
  .svc-card { grid-template-columns: 1fr; }
  .svc-visual { min-height: 0; aspect-ratio: 475 / 317; }
  .svc-icon { width: 80px; height: 80px; }
  .svc-body { padding: 26px 22px 28px; }
  .svc-body h2 { font-size: 24px; }
  .svc-body p { font-size: 16px; }
  .svc-cta { padding: 46px 22px 10px; border-radius: 26px; }
  .svc-cta-top p:last-child { font-size: 17px; }
  .svc-cta-buttons { flex-direction: column; width: 100%; }
  .svc-cta-buttons .btn { justify-content: center; }
  .svc-cta-contact { flex-direction: column; margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-stamp { animation: none; }
}


/* ==========================================================
   COUNTRY PAGE (country.html + country.js)
   Every class starts with "cn-". Colors come from style.css variables.
   ========================================================== */

.cn-page { background: var(--white); }
.cn-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.cn-message { padding: 80px 24px; text-align: center; color: #6f7f96; }

.cn-kicker { font-size: 15px; font-weight: 600; color: var(--primary); }
.cn-kicker-light { color: #7fd0f3; }

.cn-page main h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.14;
  letter-spacing: -1.2px;
  color: var(--navy);
  margin-top: 10px;
}

/* ---------- 1. HERO + BOARDING PASS ---------- */
.cn-hero {
  position: relative;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 20%, rgba(19, 159, 214, .35), transparent 55%),
    linear-gradient(135deg, #14335a 0%, #0d2342 100%);
  padding: 40px 24px 0;
}
.cn-hero-inner { max-width: 1240px; margin: 0 auto; }
.cn-hero-short { padding-bottom: 80px; }
.cn-hero-short .cn-hero-inner { padding-top: 40px; }

.cn-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .7); margin-bottom: 40px; }
.cn-breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.cn-breadcrumb [aria-current="page"] { color: var(--white); font-weight: 600; }

.cn-hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(46px, 8vw, 104px);
  line-height: 1.02;
  letter-spacing: -3px;
  margin-top: 14px;
}
.cn-hero h1 span { display: block; font-size: .36em; letter-spacing: -.5px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.cn-hero-sub { max-width: 560px; margin-top: 22px; font-size: 21px; line-height: 1.6; color: rgba(255, 255, 255, .82); }

/* The ticket overlaps the bottom of the hero */
.cn-ticket-wrap { margin-top: 56px; margin-bottom: -70px; position: relative; z-index: 3; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .28)); }
.cn-ticket {
  --stub: 270px;
  display: grid;
  grid-template-columns: 1fr var(--stub);
  background: var(--white);
  color: var(--navy);
  border-radius: 28px;
  /* two round "bites" at the tear line, like a real boarding pass */
  -webkit-mask:
    radial-gradient(circle 15px at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 15px at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle 15px at calc(100% - var(--stub)) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 15px at calc(100% - var(--stub)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.cn-ticket-main { padding: 34px 40px 30px; }
.cn-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.cn-route strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 4.4vw, 54px); line-height: 1; letter-spacing: -1px; }
.cn-route span { display: block; margin-top: 6px; font-size: 15px; color: var(--text); }
.cn-route-to { text-align: right; }
.cn-route-line { display: flex; align-items: center; gap: 12px; color: var(--primary); }
.cn-route-line i { flex: 1; border-top: 2px dashed #b9d9ea; }
.cn-route-line svg { transform: rotate(90deg); flex: none; }

.cn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 22px 28px; margin-top: 30px; padding-top: 26px; border-top: 1px dashed #c9deee; }
.cn-facts dt { font-size: 14px; font-weight: 600; color: var(--primary); }
.cn-facts dd { margin-top: 4px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--navy); }

.cn-ticket-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 28px 24px;
  text-align: center;
  background: var(--tint);
  border-left: 2px dashed #c9deee;
}
.cn-flag { object-fit: cover; border-radius: 4px; background: #e6ebf0; }
.cn-stub-flag { width: 64px; height: auto; aspect-ratio: 10 / 7; box-shadow: 0 6px 16px rgba(20, 51, 90, .2); }
.cn-ticket-stub p { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3; }
.cn-ticket-stub .btn { font-size: 16px; padding: 13px 20px; }

/* ---------- 2. STICKY SECTION MENU ---------- */
.cn-subnav {
  position: sticky;
  top: 72px;
  z-index: 50;
  margin-top: 70px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.cn-subnav ul { display: flex; gap: 6px; overflow-x: auto; padding-top: 6px; padding-bottom: 6px; scrollbar-width: none; }
.cn-subnav ul::-webkit-scrollbar { display: none; }
.cn-subnav a {
  display: block; white-space: nowrap;
  padding: 11px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--text);
  transition: background .2s, color .2s;
}
.cn-subnav a:hover { color: var(--navy); background: var(--tint); }
.cn-subnav a[aria-current="true"] { background: var(--navy); color: var(--white); }

/* Every section leaves room for the header + the menu when you jump to it */
.cn-page main section[id] { scroll-margin-top: 140px; }

/* ---------- 3. OVERVIEW ---------- */
.cn-overview { display: grid; grid-template-columns: 1.5fr .8fr; gap: 70px; align-items: start; padding-top: 90px; }
.cn-lead { margin-top: 24px; font-size: 22px; line-height: 1.7; font-weight: 500; color: var(--navy); max-width: 60ch; }
.cn-overview-text p:not(.cn-kicker):not(.cn-lead) { margin-top: 18px; font-size: 18px; line-height: 1.85; max-width: 64ch; }
.cn-talk {
  position: sticky; top: 150px;
  padding: 34px 30px;
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--white);
}
.cn-talk h3 { font-family: var(--font-head); font-weight: 800; font-size: 24px; }
.cn-talk p { margin: 10px 0 22px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.cn-talk .btn { width: 100%; justify-content: center; font-size: 17px; }
.cn-talk-link { display: block; margin-top: 16px; font-weight: 600; color: #7fd0f3; }
.cn-talk-link:hover { text-decoration: underline; }

/* ---------- 4. VISA ---------- */
.cn-visa-section { margin-top: 90px; padding: 90px 0; background: var(--tint); }
.cn-visa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-top: 36px; }
.cn-visa-grid.is-single { grid-template-columns: minmax(0, 760px); }
.cn-visa {
  padding: 34px 34px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cn-visa header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.cn-visa-code {
  font-family: var(--font-head); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -1px;
  color: var(--primary);
}
.cn-visa h3 { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--navy); }
.cn-visa-for { margin-top: 16px; font-size: 18px; line-height: 1.75; color: var(--navy); font-weight: 500; }
.cn-visa-about { margin-top: 12px; font-size: 17px; line-height: 1.75; }
.cn-visa-lists { display: grid; gap: 26px; margin-top: 26px; padding-top: 24px; border-top: 1px dashed #c9deee; }
.cn-visa h4 { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 12px; }
.cn-checks li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; font-size: 16px; line-height: 1.55; }
.cn-checks li svg { flex: none; margin-top: 4px; color: var(--accent); }
.cn-note { margin-top: 26px; font-size: 15px; line-height: 1.6; color: #6f7f96; max-width: 70ch; }

/* ---------- 5. WHY ---------- */
.cn-why { padding-top: 100px; }
.cn-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; margin-top: 36px; }
.cn-why-grid li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}
.cn-tick {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(19, 159, 214, .12); color: var(--primary);
}
.cn-why-grid h3 { font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.4; color: var(--navy); }
.cn-why-grid p { margin-top: 8px; font-size: 16px; line-height: 1.75; }

/* ---------- 6. HOW WE HELP ---------- */
.cn-help { margin-top: 100px; padding: 100px 0; color: var(--white); background: linear-gradient(160deg, #14335a 0%, #0d2342 100%); }
.cn-help-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.cn-page .cn-help h2 { color: var(--white); }
.cn-help-intro { position: sticky; top: 150px; }
.cn-help-intro p:last-child { margin-top: 18px; font-size: 19px; line-height: 1.7; color: rgba(255, 255, 255, .75); max-width: 36ch; }
.cn-steps { position: relative; }
.cn-steps::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; border-left: 2px dashed rgba(255, 255, 255, .28); }
.cn-steps li { position: relative; padding: 0 0 32px 48px; }
.cn-steps li:last-child { padding-bottom: 0; }
.cn-steps li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #0d2342; border: 5px solid var(--accent);
}
.cn-steps h3 { font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.35; }
.cn-steps p { margin-top: 6px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .72); }

/* ---------- 7. FAQ ---------- */
.cn-faq { padding-top: 100px; }
.cn-faq-list { max-width: 860px; margin-top: 32px; display: grid; gap: 12px; }
.cn-faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); transition: background .2s; }
.cn-faq details[open] { background: var(--tint); }
.cn-faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 22px 64px 22px 26px;
  font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--navy);
}
.cn-faq summary::-webkit-details-marker { display: none; }
.cn-faq summary::before, .cn-faq summary::after {
  content: ""; position: absolute; right: 26px; top: 50%;
  width: 16px; height: 2px; margin-top: -1px; background: var(--primary);
  transition: transform .25s ease;
}
.cn-faq summary::after { transform: rotate(90deg); }
.cn-faq details[open] summary::after { transform: rotate(0deg); }
.cn-faq details p { padding: 0 26px 24px; font-size: 17px; line-height: 1.8; max-width: 70ch; }

/* ---------- 8. OTHER DESTINATIONS ---------- */
.cn-others { padding-top: 100px; }
.cn-dest-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cn-dest {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px;
  font-size: 16px; font-weight: 600; color: var(--navy);
  background: var(--tint); border: 1.5px solid var(--border); border-radius: 999px;
  transition: border-color .2s, background .2s;
}
.cn-dest:hover { border-color: var(--primary); background: var(--white); }
.cn-dest-flag { width: 22px; height: 15px; }

/* ---------- 9. CTA ---------- */
.cn-cta-wrap { padding-top: 100px; }
.cn-cta {
  background: linear-gradient(135deg, #139fd6 0%, #0b7db5 40%, #0a5f94 70%, #14335a 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 70px 56px 20px;
}
.cn-cta-top { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cn-page .cn-cta h2 { color: var(--white); font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -2px; margin-top: 14px; }
.cn-cta-top p:last-child { margin-top: 14px; font-size: 20px; line-height: 1.7; max-width: 620px; }
.cn-cta-buttons { display: flex; gap: 14px; flex: none; }
.cn-cta-contact { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 56px; padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 16px; }
.cn-cta-contact a:hover { text-decoration: underline; }

/* ---------- 10. DESTINATION PICKER (country.html with no country) ---------- */
.cn-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 60px; }
.cn-pick-card {
  display: block; padding: 28px 28px 26px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.cn-pick-card:hover { border-color: var(--primary); box-shadow: 0 18px 40px rgba(20, 51, 90, .1); transform: translateY(-3px); }
.cn-pick-flag { width: 44px; height: auto; aspect-ratio: 10 / 7; box-shadow: 0 4px 12px rgba(20, 51, 90, .18); }
.cn-pick-card h2 { font-size: 24px !important; letter-spacing: -.5px !important; margin-top: 18px !important; }
.cn-pick-card p { margin-top: 8px; font-size: 16px; line-height: 1.65; }
.cn-pick-meta { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--primary); }

/* Keyboard focus */
.cn-page main a:focus-visible, .cn-page summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .cn-overview { gap: 40px; }
  .cn-help-grid { gap: 50px; }
  .cn-cta-top { flex-direction: column; align-items: flex-start; }
}

/* Tablets */
@media (max-width: 1023px) {
  .cn-subnav { top: 0; position: static; }   /* the sticky header already uses the top of the screen */
  .cn-ticket { --stub: 0px; grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .cn-ticket-stub { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; border-left: 0; border-top: 2px dashed #c9deee; }
  .cn-overview { grid-template-columns: 1fr; padding-top: 70px; }
  .cn-talk { position: static; }
  .cn-visa-section { padding: 70px 0; margin-top: 70px; }
  .cn-why, .cn-faq, .cn-others, .cn-cta-wrap { padding-top: 76px; }
  .cn-help { margin-top: 76px; padding: 76px 0; }
  .cn-help-grid { grid-template-columns: 1fr; }
  .cn-help-intro { position: static; }
  .cn-picker { grid-template-columns: repeat(2, 1fr); }
}

/* Phones */
@media (max-width: 767px) {
  .cn-hero { padding: 24px 18px 0; }
  .cn-hero h1 { letter-spacing: -2px; }
  .cn-hero-sub { font-size: 18px; }
  .cn-breadcrumb { margin-bottom: 28px; }
  .cn-wrap { padding: 0 16px; }
  .cn-ticket-wrap { margin-top: 36px; margin-bottom: -50px; }
  .cn-ticket-main { padding: 26px 22px; }
  .cn-route { gap: 12px; }
  .cn-route-line svg { width: 20px; height: 20px; }
  .cn-ticket-stub { flex-direction: column; text-align: center; }
  .cn-ticket-stub .btn { width: 100%; justify-content: center; }
  .cn-subnav { margin-top: 50px; }
  .cn-lead { font-size: 19px; }
  .cn-overview-text p:not(.cn-kicker):not(.cn-lead) { font-size: 17px; }
  .cn-visa-grid { grid-template-columns: 1fr; }
  .cn-visa { padding: 26px 22px; }
  .cn-why-grid { grid-template-columns: 1fr; }
  .cn-faq summary { font-size: 16px; padding: 18px 54px 18px 18px; }
  .cn-faq summary::before, .cn-faq summary::after { right: 18px; }
  .cn-faq details p { padding: 0 18px 20px; font-size: 16px; }
  .cn-steps h3 { font-size: 19px; }
  .cn-cta { padding: 46px 22px 10px; border-radius: 26px; }
  .cn-cta-top p:last-child { font-size: 17px; }
  .cn-cta-buttons { flex-direction: column; width: 100%; }
  .cn-cta-buttons .btn { justify-content: center; }
  .cn-cta-contact { flex-direction: column; margin-top: 36px; }
  .cn-picker { grid-template-columns: 1fr; }
}


/* ==========================================================
   COUNTRY REDESIGN (Korea, UK, Australia, USA, Japan)
   All classes start with "cd-" so they don't clash with old ones.
   ========================================================== */
.cd-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.cd-section { padding-top: 72px; padding-bottom: 8px; }
.cd-kicker { font-size: 15px; font-weight: 600; color: var(--primary); margin-bottom: 8px; }

/* ----- Hero ----- */
.cd-hero {
  background: linear-gradient(135deg, #14335a 0%, #1a5a8f 60%, #139fd6 100%);
  color: #fff;
  padding: 56px 0 120px;           /* extra bottom space: next section overlaps it */
  position: relative;
  overflow: hidden;
}
.cd-hero::after {                    /* soft decorative circle */
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.cd-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cd-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; opacity: 0.85; margin-bottom: 18px; }
.cd-breadcrumb a:hover { text-decoration: underline; }
.cd-hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.15;
  margin-bottom: 18px;
}
.cd-hero-intro { font-size: 18px; line-height: 1.7; color: #e6f1fa; max-width: 620px; }
.cd-hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.cd-flag-frame {
  margin: 0;
  background: #fff;
  padding: 12px;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
  transform: rotate(2deg);
  transition: transform 0.3s ease;
}
.cd-flag-frame:hover { transform: rotate(0deg) scale(1.02); }
.cd-flag-frame img { width: 100%; border-radius: 18px; aspect-ratio: 3 / 2; object-fit: cover; }

/* ----- Buttons ----- */
.cd-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.cd-btn:hover { transform: translateY(-2px); }
.cd-btn-orange { background: var(--accent); color: #fff; }
.cd-btn-orange:hover { background: #e08a0f; }
.cd-btn-white { background: #fff; color: var(--navy); }
.cd-btn-outline { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.cd-btn-outline:hover { background: #fff; color: var(--navy); }

/* ----- We assist with ----- */
.cd-section h2, .cd-why h2 {
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--navy);
  margin-bottom: 28px;
}
.cd-visa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.cd-visa-grid.is-single { grid-template-columns: minmax(0, 720px); }
.cd-visa {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 6px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 28px;
  box-shadow: 0 8px 24px rgba(20, 51, 90, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cd-visa:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 51, 90, 0.13); }
.cd-visa-code {
  display: inline-block;
  background: #e8f6fc;
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.cd-visa h3 { font-family: var(--font-head); font-size: 20px; color: var(--navy); margin-bottom: 8px; }
.cd-visa p { color: var(--text); line-height: 1.7; }

/* ----- Why choose ----- */
.cd-why { margin-top: 72px; padding: 72px 0; background: #fff; }
.cd-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cd-why-grid li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--page-bg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--dark-text);
  transition: transform 0.25s ease, background 0.25s ease;
}
.cd-why-grid li:hover { transform: translateX(6px); background: #e8f6fc; }
.cd-tick {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3fae5a;
  color: #fff;
}

/* ----- Closing text ----- */
.cd-closing {
  margin: 0;
  padding: 32px 36px;
  background: #fff;
  border-left: 6px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(20, 51, 90, 0.07);
  font-size: 18px;
  line-height: 1.8;
  color: var(--dark-text);
}

/* ----- CTA ----- */
.cd-cta-wrap { padding-top: 72px; padding-bottom: 72px; }
.cd-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #14335a, #139fd6);
  color: #fff;
  padding: 40px 44px;
  border-radius: var(--radius-md);
}
.cd-cta h2 { font-family: var(--font-head); font-size: clamp(22px, 3vw, 30px); margin-bottom: 6px; color: #fff; }
.cd-cta p { color: #dcecf7; }
.cd-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

/* ----- Tablet and mobile ----- */
@media (max-width: 900px) {
  .cd-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .cd-flag-frame { max-width: 460px; }
  .cd-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cd-hero { padding: 36px 0 90px; }
  .cd-hero-intro { font-size: 16px; }
  .cd-section { padding-top: 48px; }
  .cd-why { margin-top: 48px; padding: 48px 0; }
  .cd-closing { padding: 24px; font-size: 16px; }
  .cd-cta { padding: 28px 24px; }
  .cd-btn { width: 100%; text-align: center; }
  .cd-hero-buttons, .cd-cta-buttons { width: 100%; }
}

/* ==========================================================
   ADD-ON for Dubai & Finland (numbered reasons) and the
   Finland summary box. Paste at the very bottom of style.css,
   BELOW the earlier "COUNTRY REDESIGN" CSS.
   ========================================================== */
.cd-why-numbered { background: var(--tint); }
.cd-reason-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.cd-reason {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(20, 51, 90, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cd-reason:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 51, 90, 0.12); }
.cd-reason-num {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
}
.cd-reason:nth-child(3n) .cd-reason-num { background: var(--accent); }
.cd-reason h3 { font-family: var(--font-head); font-size: 19px; line-height: 1.35; color: var(--navy); margin-bottom: 8px; }
.cd-reason p { line-height: 1.75; }

.cd-closing p + p { margin-top: 10px; }
.cd-closing-arrow { font-weight: 600; color: var(--navy); }

@media (max-width: 900px) { .cd-reason-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cd-reason { padding: 20px; } }

/* ----------------------------------------------------------
   FIX: your country.html has the class "cn-page" on <body>, and
   style.css already has a rule ".cn-page main h2" that makes every
   <h2> navy and large. That made the heading inside the blue
   "Ready to study in ...?" box dark (hard to read). These lines
   win over it. This also fixes the five pages you already did.
   ---------------------------------------------------------- */
.cn-page main .cd-section h2,
.cn-page main .cd-why h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
  letter-spacing: normal;
  margin-top: 0;
  margin-bottom: 28px;
}
.cn-page main .cd-cta h2 {
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  letter-spacing: normal;
  margin: 0 0 6px;
}

/* ==========================================================
   HOME PAGE REDESIGN + MOBILE MENU FIXES
   New classes start with "hm-" so nothing old is touched.
   ========================================================== */
.hm-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.hm-section { padding: 90px 0; }
.hm-tint { background: var(--tint); }
.hm-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #1a9cd0; }
.hm-eyebrow.center { text-align: center; }
.hm-eyebrow.light { color: #5bc3ee; }
.hm-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.15; color: var(--navy); text-align: center; margin: 10px 0 14px; }
.hm-title.left { text-align: left; }
.hm-title.light { color: #fff; }
.hm-sub { text-align: center; font-size: 18px; color: var(--text); max-width: 640px; margin: 0 auto 48px; }
.hm-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

/* ----- Hero ----- */
.hm-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 130px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .10) 0, transparent 38%),
    radial-gradient(circle at 10% 90%, rgba(245, 154, 27, .18) 0, transparent 32%),
    linear-gradient(135deg, #0f2a4d 0%, #14335a 45%, #1a6fa3 100%);
}
.hm-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hm-hero h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 5vw, 60px); line-height: 1.1; margin: 14px 0 20px; }
.hm-hero-lead { font-size: 19px; line-height: 1.7; color: #dcecf7; max-width: 580px; margin-bottom: 32px; }

.hm-flag-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 32px; }
.hm-flag-stack li:nth-child(even) { transform: translateY(32px); }
.hm-flag-stack a {
  display: block;
  background: #fff;
  color: var(--navy);
  padding: 10px 10px 14px;
  border-radius: 20px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .28);
  transform: rotate(-2deg);
  transition: transform .3s ease;
}
.hm-flag-stack li:nth-child(even) a { transform: rotate(2deg); }
.hm-flag-stack a:hover { transform: rotate(0) scale(1.04); }
.hm-flag-stack .hm-flag { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: #e6ebf0; }
.hm-flag-stack strong { display: block; margin: 10px 6px 0; font-size: 16px; }
.hm-flag-stack span { display: block; margin: 2px 6px 0; font-size: 13px; color: var(--text); }

/* ----- Floating stats bar ----- */
.hm-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: -56px; position: relative; z-index: 2;
  background: #fff; border-radius: 24px; padding: 28px 12px;
  box-shadow: 0 24px 60px rgba(20, 51, 90, .14);
}
.hm-stats div { text-align: center; padding: 0 12px; }
.hm-stats div + div { border-left: 1px solid var(--border); }
.hm-stats dt { font-family: var(--font-head); font-weight: 800; font-size: 34px; color: var(--navy); }
.hm-stats dd { margin: 0; color: var(--text); font-size: 15px; }

/* ----- Journey (badge sits ABOVE the title, so nothing overlaps) ----- */
.hm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hm-step {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: 28px;
  padding: 32px; box-shadow: 0 14px 34px rgba(20, 51, 90, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hm-step:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(20, 51, 90, .13); }
.hm-step:not(:last-child)::after {           /* dashed line to the next card */
  content: ""; position: absolute; top: 60px; left: 100%;
  width: 32px; border-top: 2px dashed #b9d9ea;
}
.hm-badge {
  display: grid; place-items: center;
  width: 60px; height: 60px; margin-bottom: 20px;
  border-radius: 50%; background: var(--navy); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: 22px;
}
.hm-badge-orange { background: var(--accent); }
.hm-step h3 { font-family: var(--font-head); font-size: 22px; color: var(--navy); margin-bottom: 10px; }
.hm-step p { line-height: 1.7; }

/* ----- Destinations ----- */
.hm-dest-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.hm-dest {
  position: relative; display: flex; flex-direction: column;
  min-height: 290px; padding: 24px 22px 70px; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hm-dest::before {                           /* orange line grows on hover */
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.hm-dest:hover { transform: translateY(-6px); border-color: #bfe3f4; box-shadow: 0 20px 40px rgba(20, 51, 90, .12); }
.hm-dest:hover::before { transform: scaleX(1); }
.hm-dest .hm-flag { width: 52px; height: 36px; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); margin-bottom: 18px; background: #e6ebf0; }
.hm-dest h3 { font-family: var(--font-head); font-size: 18px; line-height: 1.3; color: var(--navy); margin-bottom: 8px; }
.hm-dest p { font-size: 15px; line-height: 1.55; }
.hm-intake { align-self: flex-start; margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; color: var(--primary); }
.hm-go {
  position: absolute; right: 18px; bottom: 18px;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: #e8f6fc; color: var(--primary); font-size: 18px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.hm-dest:hover .hm-go { background: var(--primary); color: #fff; transform: translateX(4px); }

/* ----- Services (dark) ----- */
.hm-dark { background: linear-gradient(160deg, #0f2a4d, #14335a); }
.hm-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.hm-service {
  padding: 32px; border-radius: 28px; color: #c9d9ea;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .25s ease, background .25s ease;
}
.hm-service:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .1); }
.hm-service-icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px;
  border-radius: 16px; background: rgba(19, 159, 214, .18); color: #5bc3ee;
  font-family: var(--font-head); font-weight: 800; font-size: 18px;
}
.hm-service h3 { font-family: var(--font-head); font-size: 22px; color: #fff; margin-bottom: 10px; }
.hm-service p { line-height: 1.7; }
.hm-service strong { color: #fff; }
.hm-service ul { margin-top: 16px; display: grid; gap: 8px; }
.hm-service li { padding-left: 26px; position: relative; }
.hm-service li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ----- Why Orient ----- */
.hm-why { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.hm-why-lead { font-size: 19px; line-height: 1.7; margin-bottom: 28px; }
.hm-why-list { display: grid; gap: 18px; }
.hm-why-list li {
  display: flex; gap: 22px; align-items: flex-start; padding: 26px;
  background: #fff; border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 10px 26px rgba(20, 51, 90, .06);
  transition: transform .25s ease;
}
.hm-why-list li:hover { transform: translateX(8px); }
.hm-why-num { font-family: var(--font-head); font-weight: 800; font-size: 34px; line-height: 1; color: var(--accent); }
.hm-why-list h3 { font-family: var(--font-head); font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.hm-why-list p { line-height: 1.65; }

/* ----- FAQ (native <details>: the + turns into x when open) ----- */
.hm-faq { max-width: 880px; margin: 44px auto 0; display: grid; gap: 14px; }
.hm-faq details { background: #fff; border: 1px solid var(--border); border-radius: 22px; transition: border-color .2s ease, box-shadow .2s ease; }
.hm-faq details[open] { border-color: #8fd0ec; box-shadow: 0 14px 34px rgba(19, 159, 214, .12); }
.hm-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 28px; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; color: var(--navy);
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #e8f6fc; color: var(--primary); font-size: 26px; line-height: 1;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.hm-faq details[open] summary::after { transform: rotate(45deg); background: var(--primary); color: #fff; }
.hm-faq summary:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: 22px; }
.hm-faq details p { padding: 0 28px 26px; font-size: 17px; line-height: 1.8; animation: hmFade .3s ease; }
@keyframes hmFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ----- CTA ----- */
.hm-cta-wrap { padding-bottom: 20px; }
.hm-cta { padding: 56px 48px 32px; border-radius: 36px; color: #fff; background: linear-gradient(135deg, #14335a 0%, #139fd6 100%); }
.hm-cta-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.hm-cta h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 4vw, 42px); margin: 8px 0 10px; }
.hm-cta p { color: #dcecf7; max-width: 520px; }
.hm-cta-contact { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .25); color: #e6f1fa; }
.hm-cta-contact a:hover { text-decoration: underline; }

/* ----- Hamburger turns into an X when the menu is open ----- */
.nav-toggle span { transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ----- Laptop ----- */
@media (max-width: 1279px) {
  .hm-dest-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Tablet and below ----- */
@media (max-width: 1023px) {
  /* long mobile menu scrolls instead of running off the screen */
  .main-nav { max-height: calc(100vh - 80px); overflow-y: auto; }
  .main-nav .submenu { padding-left: 16px; }

  .hm-section { padding: 70px 0; }
  .hm-hero { padding: 56px 0 110px; }
  .hm-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hm-flag-stack { max-width: 460px; margin: 0 auto; }
  .hm-steps { grid-template-columns: 1fr; gap: 20px; }
  .hm-step::after { display: none; }
  .hm-service-grid { grid-template-columns: 1fr; }
  .hm-why { grid-template-columns: 1fr; gap: 40px; }
  .hm-dest-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
  .hm-wrap { padding: 0 16px; }
  .hm-section { padding: 52px 0; }
  .hm-hero { padding: 40px 0 96px; }
  .hm-hero-lead { font-size: 17px; }
  .hm-sub { font-size: 16px; margin-bottom: 32px; }
  .hm-buttons .btn { width: 100%; justify-content: center; text-align: center; }
  .hm-stats { padding: 20px 4px; }
  .hm-stats dt { font-size: 24px; }
  .hm-stats dd { font-size: 13px; }
  .hm-dest-grid { grid-template-columns: 1fr; }
  .hm-dest { min-height: 0; }
  .hm-faq summary { font-size: 16px; padding: 18px; }
  .hm-faq details p { padding: 0 18px 20px; font-size: 16px; }
  .hm-cta { padding: 36px 22px 24px; border-radius: 28px; }
  .hm-why-list li { padding: 20px; gap: 16px; }
}

/* ==========================================================
   NAVBAR: keep the desktop design on tablets (768px - 1023px)
   and make the phone menu look like the desktop dropdown.
   ========================================================== */

/* ----- Tablet / small laptop: same horizontal navbar, slightly smaller ----- */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header { padding: 10px 20px; }
  .logo img { width: 170px; }
  .site-header.is-scrolled .logo img { width: 150px; }

  /* undo the "hamburger" rules */
  .nav-toggle { display: none; }
  .main-nav {
    display: block; position: static;
    padding: 0; background: none; box-shadow: none;
    max-height: none; overflow: visible;
  }
  .main-nav > ul { flex-direction: row; align-items: center; gap: 2px; }

  /* top-level links: same look, a little smaller so they fit */
  .main-nav > ul > li > a,
  .main-nav > ul > li > .dropdown-toggle {
    width: auto; justify-content: flex-start;
    padding: 10px 11px; font-size: 15px; border-bottom: 0;
  }
  .nav-indicator { height: 38px; margin-top: -19px; }

  /* dropdown card: hover to open, like the full-screen version */
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown,
  .has-dropdown.open .dropdown { display: flex; }

  .main-nav .dropdown li > a {
    width: 100%; justify-content: space-between;
    padding: 14px 18px; font-size: 16px; border-bottom: 0;
  }
  .main-nav .dropdown li > a:hover { padding-left: 24px; }
}

/* ----- Phone: hamburger menu, styled like the desktop dropdown ----- */
@media (max-width: 767px) {
  .main-nav { border-top: 1px solid var(--border); }
  .main-nav li > a, .dropdown-toggle { font-size: 17px; }

  /* the opened "Study destination" list sits in a soft tinted card */
  .main-nav .dropdown {
    margin: 6px 0 10px; padding: 4px 0 4px 12px;
    background: var(--tint); border-radius: 14px;
  }
  .main-nav .dropdown li > a { padding: 12px 14px; border-bottom: 0; font-size: 16px; }

  /* "Other European Countries" gets an arrow that turns when opened */
  .main-nav .sub-toggle::after {
    content: "›"; font-size: 22px; line-height: 1; color: #6f7f96;
    transition: transform .25s ease;
  }
  .main-nav .has-sub.open > .sub-toggle::after { transform: rotate(90deg); }
}

/* ==========================================================
   PHONE MENU (under 768px): same hover / colour effects as desktop
   ========================================================== */
@media (max-width: 767px) {

  /* ----- Top-level rows: rounded, with a soft pill on hover / tap ----- */
  .main-nav > ul { gap: 4px; padding-top: 8px; }
  .main-nav > ul > li > a,
  .main-nav > ul > li > .dropdown-toggle {
    padding: 14px 16px;
    border-bottom: 0;
    border-radius: 14px;
    transition: background .2s ease, color .2s ease;
  }
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li > a:focus-visible,
  .main-nav > ul > li > a:active,
  .main-nav > ul > li > .dropdown-toggle:hover,
  .main-nav > ul > li > .dropdown-toggle:focus-visible,
  .main-nav > ul > li > .dropdown-toggle:active,
  .has-dropdown.open > .dropdown-toggle {
    background: rgba(20, 51, 90, .07);   /* same pill colour as desktop */
    color: var(--navy);                  /* text turns navy */
  }

  /* Current page: navy text + small blue dot (like desktop) */
  .main-nav > ul > li > a[aria-current="page"]::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
  }

  /* ----- Dropdown items: accent bar + arrow, like the desktop dropdown ----- */
  .main-nav .dropdown li > a {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease, padding-left .25s ease;
  }
  .main-nav .dropdown li > a::before {          /* thin blue bar on the left */
    content: "";
    position: absolute;
    left: 0; top: 20%;
    width: 3px; height: 60%;
    border-radius: 3px;
    background: var(--primary);
    transform: scaleY(0);
    transition: transform .25s ease;
  }
  .main-nav .dropdown li > a::after {           /* arrow slides in */
    content: "→";
    color: var(--primary);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .2s ease, transform .25s ease;
  }
  .main-nav .dropdown li > a:hover,
  .main-nav .dropdown li > a:focus-visible,
  .main-nav .dropdown li > a:active {
    background: #fff;
    color: var(--navy);
    padding-left: 20px;
  }
  .main-nav .dropdown li > a:hover::before,
  .main-nav .dropdown li > a:focus-visible::before,
  .main-nav .dropdown li > a:active::before { transform: scaleY(1); }
  .main-nav .dropdown li > a:hover::after,
  .main-nav .dropdown li > a:focus-visible::after,
  .main-nav .dropdown li > a:active::after { opacity: 1; transform: none; }

  /* "Other European Countries": always shows a chevron that turns when open */
  .main-nav .dropdown li > a.sub-toggle::after {
    content: "›";
    font-size: 22px;
    line-height: 1;
    color: #6f7f96;
    opacity: 1;
    transform: none;
  }
  .main-nav .has-sub.open > .sub-toggle::after { transform: rotate(90deg); }
}

/* Hover for the right-hand flag cards (Japan, Australia).
   Same effect as Korea and UK: straighten up, grow a little, stronger shadow. */
.hm-flag-stack li:nth-child(even) a:hover {
  transform: rotate(0) scale(1.04);
}
.hm-flag-stack li a:hover {
  box-shadow: 0 30px 56px rgba(0, 0, 0, .38);
}

/* ==========================================================
   PHONE / TABLET FIXES: Services, About, Contact
   Must stay at the bottom of the file so it wins over earlier rules.
   ========================================================== */

/* ---------- SERVICES ---------- */
@media (max-width: 1023px) {
  /* Stops the grid from growing wider than the screen */
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-index, .svc-list { min-width: 0; }

  /* The chips wrap onto new lines instead of scrolling sideways */
  .svc-index ul { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }

  .svc-card { grid-template-columns: 240px minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .svc-hero h1 { font-size: clamp(40px, 13vw, 64px); letter-spacing: -1.5px; }
  .svc-layout { padding-top: 36px; }        /* space under the hero */
  .svc-index a { padding: 8px 14px; font-size: 14px; }

  .svc-card { grid-template-columns: minmax(0, 1fr); }
  .svc-visual { aspect-ratio: 16 / 9; }     /* image panel keeps its shape */
  .svc-body { padding: 24px 20px 26px; }

  .svc-cta-wrap { padding-top: 64px; padding-bottom: 8px; }
  .svc-cta-contact { overflow-wrap: anywhere; }
  .svc-cta-buttons .btn { width: 100%; }
}

/* ---------- ABOUT ---------- */
@media (max-width: 767px) {
  .ab-story { padding-top: 56px; padding-bottom: 24px; }   /* "Exceptional Service" */
  .ab-strengths { padding-top: 40px; padding-bottom: 56px; }
  .ab-team { padding-top: 64px; }                          /* "The people behind Orient" */
  .ab-cta-wrap { padding-top: 64px; }
  .ab-kicker { font-size: 14px; margin-bottom: 2px; }
}

/* ---------- CONTACT ---------- */
@media (max-width: 767px) {
  .ct-map-wrap { padding-top: 56px; padding-bottom: 16px; }
}

/* Social icons: same size and shape as the icons above them, perfectly centred */
.ct-follow ul { gap: 14px; }
.ct-follow li { display: flex; }
.ct-follow a { width: 52px; height: 52px; border-radius: 16px; }
.ct-follow svg { display: block; width: 22px; height: 22px; }


/* ==========================================================
   SERVICES HERO: passport page with service stamps
   Keep this at the very bottom of style.css.
   ========================================================== */
.svc-hero { position: relative; padding-bottom: 120px; }
.svc-hero::before {                       /* faint dotted pattern, like a map grid */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(100deg, #000 0, transparent 55%);
          mask-image: linear-gradient(100deg, #000 0, transparent 55%);
  pointer-events: none;
}
.svc-hero-grid { position: relative; grid-template-columns: 1.05fr .95fr; gap: 56px; }
.svc-hero h1 { font-size: clamp(46px, 7.2vw, 100px); white-space: nowrap; }
.svc-hero h1 .accent { color: var(--accent); }

/* ----- The passport page ----- */
.svc-passport {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 520px;
  padding: 30px 28px 84px 38px;     /* extra room at the bottom for the round seal */
  color: #14335a;
  background:
    repeating-linear-gradient(0deg, rgba(20, 51, 90, .035) 0 1px, transparent 1px 7px),
    #fbf3df;
  border-radius: 8px 26px 26px 8px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .38);
  transform: rotate(2deg);
}
.svc-passport::before {                   /* the spine of the booklet */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 16px;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, rgba(20, 51, 90, .22), transparent);
}
.svc-passport-title {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-head); font-weight: 800; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(20, 51, 90, .65);
}
.svc-passport-title::before,
.svc-passport-title::after { content: ""; flex: 1; border-top: 1.5px dashed rgba(20, 51, 90, .25); }

.svc-stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-stamps li:nth-child(1) { --i: 0; --r: -3deg; }
.svc-stamps li:nth-child(2) { --i: 1; --r: 2.5deg; }
.svc-stamps li:nth-child(3) { --i: 2; --r: 2deg; }
.svc-stamps li:nth-child(4) { --i: 3; --r: -2.5deg; }
.svc-stamps li:nth-child(5) { --i: 4; --r: -2deg; }
.svc-stamps li:nth-child(6) { --i: 5; --r: 3deg; }

/* ink colours */
.svc-ink-orange { --ink: #d9780a; }
.svc-ink-navy   { --ink: #14335a; }
.svc-ink-blue   { --ink: #0b7db5; }

/* One stamp: double border, ink colour, tilted. Each one "presses" onto the page. */
.svc-st {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 118px;
  padding: 16px 12px;
  text-align: center;
  color: var(--ink);
  border: 2.5px solid currentColor;
  border-radius: 14px;
  outline: 1.5px solid currentColor;
  outline-offset: -9px;
  transform: rotate(var(--r));
  opacity: .95;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  animation: svc-press .55s cubic-bezier(.3, 1.4, .5, 1) backwards;
  animation-delay: calc(.5s + var(--i) * .16s);
}
.svc-stamps li:nth-child(even) .svc-st { border-radius: 40px; }     /* alternate pill / box shapes */
.svc-st svg { width: 26px; height: 26px; }
.svc-st-no { font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: 2px; opacity: .75; }
.svc-st-name { font-family: var(--font-head); font-weight: 800; font-size: 12px; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; }
.svc-st:hover,
.svc-st:focus-visible { background: var(--ink); color: #fbf3df; transform: rotate(0deg) translateY(-4px) scale(1.04); opacity: 1; }
.svc-st:focus-visible { outline-color: #fbf3df; }
@keyframes svc-press {
  from { opacity: 0; transform: scale(1.7) rotate(var(--r)); }
  60%  { opacity: 1; }
  to   { opacity: .95; transform: scale(1) rotate(var(--r)); }
}

/* ----- Round seal on the corner ----- */
.svc-seal {
  position: absolute; right: -30px; bottom: -42px;
  width: 150px; height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
  animation: svc-seal-down .6s cubic-bezier(.3, 1.4, .5, 1) 1.7s backwards;
}
@keyframes svc-seal-down {
  from { opacity: 0; transform: rotate(-12deg) scale(1.6); }
  to   { opacity: 1; transform: rotate(-12deg) scale(1); }
}

/* ----- Tablet ----- */
@media (max-width: 1023px) {
  .svc-hero { padding-bottom: 110px; }
  .svc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .svc-passport { justify-self: start; }
}

/* ----- Phone ----- */
@media (max-width: 767px) {
  .svc-hero { padding: 40px 20px 100px; }
  .svc-passport { padding: 22px 16px 64px 26px; transform: rotate(1deg); }
  .svc-stamps { gap: 12px; }
  .svc-st { min-height: 104px; padding: 12px 8px; }
  .svc-st-name { font-size: 11px; letter-spacing: .6px; }
  .svc-seal { width: 96px; right: -10px; bottom: -34px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-st, .svc-seal { animation: none; }
}


/* Bigger "Services" label above the heading */
.svc-hero .svc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #7fd0f3;
}
.svc-hero .svc-kicker::before {          /* orange line in front of the word */
  content: "";
  width: clamp(36px, 5vw, 72px);
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
}
.svc-hero h1 { margin-top: 22px; }

@media (max-width: 767px) {
  .svc-hero .svc-kicker { font-size: 18px; letter-spacing: 3px; gap: 12px; }
  .svc-hero h1 { margin-top: 16px; }
}

/* Bigger labels above the headings on Home + Contact (same look as Services) */
.hm-hero .hm-eyebrow,
.ct-hero .ct-kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.4;
  color: #7fd0f3;
}
.hm-hero .hm-eyebrow::before,
.ct-hero .ct-kicker::before {            /* orange line in front of the words */
  content: "";
  flex: none;
  width: clamp(36px, 5vw, 72px);
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
}
.hm-hero .hm-eyebrow { font-size: clamp(15px, 1.5vw, 20px); letter-spacing: 3px; }
.ct-hero .ct-kicker  { font-size: clamp(20px, 2.2vw, 30px); letter-spacing: 5px; }
.hm-hero h1, .ct-hero h1 { margin-top: 22px; }

@media (max-width: 767px) {
  .hm-hero .hm-eyebrow { font-size: 14px; letter-spacing: 2px; gap: 12px; }
  .ct-hero .ct-kicker  { font-size: 18px; letter-spacing: 3px; gap: 12px; }
  .hm-hero h1, .ct-hero h1 { margin-top: 16px; }
}

/* Make the form really disappear after sending (hidden attribute was overridden by display: grid) */
.ct-form[hidden] { display: none; }

/* ==========================================================
   ABOUT: "Our Team" label + three team cards
   ========================================================== */

/* The blue label above "Our Team": bigger, capitals, orange lines on both sides */
.ab-team-head .ab-kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--primary);
}
.ab-team-head .ab-kicker::before,
.ab-team-head .ab-kicker::after {
  content: "";
  flex: none;
  width: clamp(24px, 4vw, 56px);
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
}

/* Three cards side by side on wide screens */
@media (min-width: 1100px) {
  .ab-team-grid { grid-template-columns: repeat(3, 1fr); max-width: none; gap: 22px; }
  .ab-person { gap: 20px; padding: 26px 24px; }
  .ab-avatar { width: 100px; height: 100px; }
  .ab-initials { font-size: 30px; }
  .ab-person h3 { font-size: 19px; }
}

/* Tablet: two cards on top, the third one centred underneath */
@media (min-width: 768px) and (max-width: 1099px) {
  .ab-team-grid { grid-template-columns: 1fr 1fr; max-width: 920px; }
  .ab-person:nth-child(3):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}

@media (max-width: 767px) {
  .ab-team-head .ab-kicker { font-size: 13px; letter-spacing: 2px; gap: 10px; }
  .ab-team-head .ab-kicker::before,
  .ab-team-head .ab-kicker::after { width: 20px; }
}

/* ==========================================================
   ABOUT HERO: a compass that keeps moving
   Keep this at the very bottom of style.css.
   ========================================================== */

/* 1) The needle first settles on North (as before), then keeps drifting
      a few degrees left and right, like a real compass needle. */
.ab-needle {
  transform-origin: 200px 200px;
  animation:
    ab-needle-settle 2.6s cubic-bezier(.2, .9, .3, 1.15) .3s both,
    ab-needle-drift 9s ease-in-out 3s infinite;
}
@keyframes ab-needle-drift {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(9deg); }
  32%  { transform: rotate(-6deg); }
  50%  { transform: rotate(4deg); }
  68%  { transform: rotate(-8deg); }
  85%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

/* 2) A ring of tiny marks turns slowly around the compass */
.ab-ring {
  transform-origin: 200px 200px;
  animation: ab-ring-turn 60s linear infinite;
}
@keyframes ab-ring-turn { to { transform: rotate(360deg); } }

/* 3) The orange "N" gently pulses */
.ab-north { animation: ab-north-pulse 2.6s ease-in-out infinite; }
@keyframes ab-north-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* 4) The whole compass lifts a little when you point at it */
.ab-compass { transition: transform .4s ease; }
.ab-compass:hover { transform: scale(1.04); }

/* People who turn off animations in their system get a still compass */
@media (prefers-reduced-motion: reduce) {
  .ab-needle, .ab-ring, .ab-north { animation: none; }
  .ab-compass { transition: none; }
} 


/* ==========================================================
   ABOUT: ORIENT letters stay hollow, orange only when touched
   Keep this at the very bottom of style.css.
   ========================================================== */

/* Switch off the old "letter in the middle of the screen" highlight */
.ab-letters li.is-active .ab-letter {
  color: transparent;
  -webkit-text-stroke-color: rgba(255, 255, 255, .35);
}

/* Orange while a finger is pressing the row (touch screens) */
.ab-letters li.is-touch .ab-letter {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}

/* Orange while the mouse is on the row (computers only, so it never "sticks" on phones) */
@media (hover: hover) and (pointer: fine) {
  .ab-letters li:hover .ab-letter {
    color: var(--accent);
    -webkit-text-stroke-color: var(--accent);
  }
}
/* On touch screens the old :hover rule must not leave a letter orange after a tap */
@media (hover: none) {
  .ab-letters li:hover:not(.is-touch) .ab-letter {
    color: transparent;
    -webkit-text-stroke-color: rgba(255, 255, 255, .35);
  }
}


/* ===== Bigger blue labels on every page ===== */
.hm-eyebrow { font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 3px; }
.svc-kicker, .ab-kicker, .ct-kicker, .cn-kicker, .cd-kicker {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: .3px;
}
.ab-facts dt { font-size: 18px; }

/* ===== Footer social icons ===== */
.footer-social { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; }
.site-footer .footer-social a {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
  color: var(--primary); background: var(--tint); border: 1px solid var(--border);
  transition: background .2s, color .2s, transform .2s;
}
.site-footer .footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.footer-social svg { display: block; width: 22px; height: 22px; }

/* ==========================================================
   MOBILE ANIMATION FIXES  (keep this block at the very bottom)
   ========================================================== */

/* 1. Header: no size change on scroll (it made the page jump on phones) */
.site-header { transition: box-shadow .3s ease, background .3s ease; }

@media (max-width: 1023px) {
  .site-header,
  .site-header.is-scrolled { min-height: 72px; }
}
@media (max-width: 767px) {
  .logo img,
  .site-header.is-scrolled .logo img { width: 170px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .logo img,
  .site-header.is-scrolled .logo img { width: 160px !important; }
}

/* 2. Hamburger menu: smooth open / close on phones */
@media (max-width: 767px) {
  .main-nav,
  .main-nav.open { display: block; }

  .main-nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    max-height: calc(100vh - 80px) !important;
    max-height: calc(100dvh - 80px) !important;
    transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .main-nav.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity .25s ease, transform .3s ease, visibility 0s;
  }
}

/* 3. Touch screens: no "stuck" hover effects, small press effect instead */
@media (hover: none) {
  .btn:hover { transform: none; }

  .hm-step:hover,
  .hm-dest:hover,
  .hm-service:hover,
  .hm-why-list li:hover { transform: none; }

  .hm-dest:hover::before { transform: scaleX(0); }
  .hm-dest:hover .hm-go { transform: none; background: #e8f6fc; color: var(--primary); }

  .hm-flag-stack a:hover,
  .hm-flag-stack li a:hover {
    transform: rotate(-2deg);
    box-shadow: 0 22px 44px rgba(0,0,0,.28);
  }
  .hm-flag-stack li:nth-child(even) a:hover { transform: rotate(2deg); }

  .svc-st:hover {
    background: transparent;
    color: var(--ink);
    transform: rotate(var(--r));
    opacity: .95;
  }

  .hm-step:active,
  .hm-dest:active,
  .hm-service:active,
  .hm-flag-stack a:active { transform: scale(.98); }

  a, button { -webkit-tap-highlight-color: transparent; }
}

/* 4. About page compass: rotate around the SVG's own centre on iPhone / Safari */
.ab-needle { transform-box: view-box; }