:root {
  --ink: #13252f;
  --muted: #5e6d75;
  --navy: #0b2b43;
  --deep: #071922;
  --teal: #0d7a78;
  --teal-dark: #07585a;
  --aqua: #dff5f1;
  --blue-soft: #dfefff;
  --gold: #c7924a;
  --coral: #e26d5a;
  --sage: #72866e;
  --paper: #ffffff;
  --ivory: #fbf8f0;
  --mist: #f1f6f7;
  --line: rgba(19, 37, 47, 0.12);
  --shadow: 0 24px 70px rgba(7, 25, 34, 0.14);
  --shadow-soft: 0 14px 34px rgba(7, 25, 34, 0.1);
  --radius: 8px;
  --container: 1280px;
  --container-edge: 1408px;
  --header-offset: 112px;
  /* Single brand gold for ALL animated/gold text across the entire site — home
     hero, country pages, eyebrows, headings, etc. Warm gold matching the deployed
     home hero. Everything below resolves to this one gradient. */
  --hero-gold-gradient: linear-gradient(105deg, #a9791d 0%, #d9a83a 28%, #f7da82 50%, #d9a020 72%, #a9791d 100%);
  --animated-text-gradient: var(--hero-gold-gradient);
  --animated-text-size: 220% 100%;
  --animated-text-duration: 8s;
  --theme-highlight-gradient: var(--animated-text-gradient);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, #fffdf8 0%, #f7fbfb 32%, #fffaf2 58%, #eef7f8 78%, #071922 100%);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.nav-open,
body.student-hub-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid rgba(226, 109, 90, 0.65);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 1000;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 14px;
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease;
}

.skip-link:not(:focus):not(:focus-visible) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  padding: 0;
  white-space: nowrap;
  box-shadow: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  transform: none;
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin: 0 auto;
}

.wide-container {
  width: min(calc(100% - 28px), 1340px);
}

.edge-container {
  width: min(calc(100% - 24px), var(--container-edge));
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 220ms ease, background 220ms ease;
}

.site-header.is-scrolled .nav-shell {
  min-height: 60px;
  background: rgba(255, 255, 255, 0.94);
  /* Layered shadow: inset top bevel + stacked ambient shadows so the bar reads
     as a card lifted off the page (3D float) once scrolled. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 4px 10px rgba(7, 25, 34, 0.08),
    0 12px 24px rgba(7, 25, 34, 0.12),
    0 24px 48px rgba(7, 25, 34, 0.14);
  backdrop-filter: blur(20px);
}

.notice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px; /* explicit height (no vertical padding) so the collapse animates exactly */
  padding: 0 16px 0 136px; /* left pad reserves the absolute social-icon zone (3 icons) */
  background: var(--teal-dark);
  color: #f7fffb;
  font-size: 0.82rem;
  font-weight: 700;
  overflow: hidden;
  transition: height 340ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* On scroll the headers gain .is-scrolled — collapse the blue notice bar
   smoothly and leave only the white nav pinned at the top. The bar stays solid
   blue while it slides up (no opacity fade), so the hero never flashes through
   a transparent-but-still-tall gap during the transition. */
.site-header.is-scrolled .notice,
.stripe-site-header.is-scrolled .notice {
  height: 0;
  pointer-events: none;
}

/* ── Scrolling announcement marquee ──────────────────────────────────── */
.notice-marquee {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 28px; /* breathing room from the social icons (left) and WhatsApp (right) */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.notice-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Duration (scroll speed) is set inline from the CMS via --marquee-duration. */
  animation: notice-marquee var(--marquee-duration, 14s) linear infinite;
}

/* Pause on hover / keyboard focus so readers can click a banner. */
.notice-marquee:hover .notice-marquee-track,
.notice-marquee-track:focus-within {
  animation-play-state: paused;
}

/* Each group is one full set of items; several identical groups sit in the
   track and the keyframe shifts by exactly one group (--marquee-shift, set
   inline as -100%/copies) for a seamless loop. The trailing padding equals the
   inter-item gap so the join is invisible. */
.notice-marquee-group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex: 0 0 auto;
}

.notice-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: #f7fffb;
  text-decoration: none;
  border-bottom: 0;
  white-space: nowrap;
  transition: color 160ms ease, opacity 160ms ease;
}

.notice-marquee-item:hover,
.notice-marquee-item:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Items with no link configured in the CMS: plain, non-clickable text. */
.notice-marquee-item--static {
  cursor: default;
}

.notice-marquee-item--static:hover {
  color: #f7fffb;
  text-decoration: none;
}

.notice-marquee-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

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

/* ── WhatsApp number, pinned right ───────────────────────────────────── */
.notice-whatsapp {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 3px 11px;
  border-radius: 999px;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #f7fffb;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.notice-whatsapp-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.notice-whatsapp:hover,
.notice-whatsapp:focus-visible {
  background: #25d366; /* WhatsApp green */
  color: #052e16;
  transform: translateY(-1px);
}

/* Respect reduced-motion: stop the scroll, show one set, allow manual scroll. */
@media (prefers-reduced-motion: reduce) {
  .notice-marquee-track {
    animation: none;
    transform: none;
  }

  .notice-marquee-group:not(:first-child) {
    display: none;
  }

  .notice-marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .notice-marquee::-webkit-scrollbar {
    display: none;
  }
}

.nav-shell {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 0 max(22px, calc((100vw - var(--container)) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  backdrop-filter: blur(14px);
  transition: min-height 300ms cubic-bezier(0.4, 0, 0.2, 1), background 220ms ease, box-shadow 220ms ease;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: block;
  height: 38px;
  width: auto;
  flex: 0 0 auto;
}

.brand strong,
.brand small {
  display: block;
  white-space: nowrap;
}

.brand strong {
  font-family: "Jost", "Manrope", system-ui, sans-serif;
  font-size: 1.12rem;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--navy);
}

.brand small {
  font-family: "Outfit", "Manrope", system-ui, sans-serif;
  margin-top: 3px;
  color: var(--coral);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.36em;
}

/* Nudge the wordmark text down slightly so it sits parallel with the logo mark */
.brand > span {
  position: relative;
  top: 3px;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nav-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 14px;
  color: #243945;
  font-size: 0.9rem;
  font-weight: 800;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--coral);
  transition: transform 180ms ease;
}

.nav-menu a:hover::after,
.nav-menu a.is-active::after {
  transform: scaleX(1);
}

.students-hub-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: #243945;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  transition: color 180ms ease;
}

.students-hub-trigger::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--coral);
  transition: transform 180ms ease;
}

.students-hub-trigger > * {
  position: relative;
  z-index: 1;
}

.students-hub-trigger svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  color: currentColor;
}

.students-hub-trigger:hover,
.students-hub-trigger:focus-visible {
  color: #243945;
}

.students-hub-trigger:hover::after,
.students-hub-trigger:focus-visible::after {
  transform: scaleX(1);
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 0 8px 0 14px;
  border: 0;
  background: transparent;
  color: #243945;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  border-radius: 999px;
}

.nav-trigger-chevron {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.nav-trigger svg {
  width: 14px;
  height: 14px;
}

.nav-item.is-open .nav-trigger-chevron,
.nav-item.is-open .nav-trigger svg {
  transform: rotate(180deg);
}

.nav-trigger::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 22px;
  bottom: 7px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--coral);
  transition: transform 180ms ease;
}

.nav-item.is-open .nav-trigger::after,
.nav-item.has-active .nav-trigger::after,
.nav-trigger:hover::after {
  transform: scaleX(1);
}

.nav-item.has-active .nav-trigger {
  color: var(--teal-dark);
}

/* Advisory tracks dropdown — single/few items, larger card layout */
.nav-dropdown-grid--tracks {
  grid-template-columns: 1fr !important;
  gap: 8px;
}

.dest-card.track-card {
  min-height: 64px;
  padding: 12px 28px 12px 14px;
  gap: 14px;
}

.dest-card.track-card .track-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 122, 120, 0.14) 0%, rgba(199, 146, 74, 0.12) 100%);
  color: var(--teal-dark);
  flex: 0 0 auto;
  transition: background 160ms ease, color 160ms ease;
}

.dest-card.track-card .track-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.9;
}

.dest-card.track-card .dest-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dest-card.track-card .dest-meta strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}

.dest-card.track-card .dest-meta small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.dest-card.track-card:hover .track-icon,
.dest-card.track-card.is-active .track-icon {
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
  color: #fff;
}

.dest-card.track-card.is-active {
  background: rgba(13, 122, 120, 0.06);
  border-color: rgba(13, 122, 120, 0.25);
}

.dest-card.track-card.is-active .dest-meta strong {
  color: var(--teal-dark);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(940px, calc(100vw - 32px));
  padding: 0;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(19, 37, 47, 0.1);
  box-shadow:
    0 28px 70px rgba(7, 25, 34, 0.16),
    0 10px 24px rgba(7, 25, 34, 0.08);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 200ms;
  z-index: 80;
}

.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: inherit;
  border-top: 1px solid rgba(19, 37, 47, 0.1);
  border-left: 1px solid rgba(19, 37, 47, 0.1);
  transform: translateX(-50%) rotate(45deg);
  border-top-left-radius: 2px;
}

.nav-dropdown::after {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
}

.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}

.nav-dropdown-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}

/* Compact variant: no feature aside — single column, narrower panel */
.nav-dropdown--compact {
  width: min(360px, calc(100vw - 32px));
}

.nav-dropdown--compact .nav-dropdown-shell {
  grid-template-columns: 1fr;
}

/* Courses variant: scoped menu cards, separate from page course cards */
.nav-dropdown--courses {
  width: min(560px, calc(100vw - 32px));
}

/* Services dropdown: stack the 3 items vertically */
.nav-dropdown--services {
  width: min(340px, calc(100vw - 32px));
}

.nav-dropdown--services .course-menu-grid {
  grid-template-columns: 1fr;
}

.nav-dropdown--courses .nav-dropdown-shell {
  grid-template-columns: 1fr;
  background:
    linear-gradient(180deg, #ffffff 0%, #f9fcfb 100%);
}

.nav-dropdown--courses .nav-dropdown-main {
  border-right: 0;
}

.nav-dropdown--courses .course-menu {
  padding: 16px;
}

.nav-dropdown--courses .course-menu-topline {
  margin-bottom: 10px;
  padding: 0 2px;
}

.course-menu-count {
  color: #637884;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.course-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 68px;
  gap: 8px;
}

.nav-menu .course-menu-card {
  position: relative;
  display: grid;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(19, 37, 47, 0.09);
  border-radius: 8px;
  color: var(--ink);
  text-align: left;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.nav-menu .course-menu-card::after {
  display: none;
}

.nav-menu .course-menu-card {
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 11px 10px;
  background: rgba(255, 255, 255, 0.82);
}

/* A <button> used as a course/service card (e.g. Students Hub dialog trigger) */
.nav-menu button.course-menu-card {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

/* ---------- Nested "Study Abroad" flyout submenu ---------- */
/* Let the flyout escape the dropdown's rounded-corner clipping */
.nav-dropdown--services .nav-dropdown-shell,
.nav-dropdown--services .nav-dropdown-main,
.nav-dropdown--services .course-menu-grid {
  overflow: visible;
}

.submenu-wrap {
  position: relative;
}

.course-submenu {
  position: absolute;
  top: -12px;
  left: calc(100% + 14px);
  z-index: 6;
  display: grid;
  gap: 8px;
  width: 256px;
  padding: 12px;
  border: 1px solid var(--theme-border, rgba(19, 37, 47, 0.1));
  border-radius: 10px;
  background: var(--theme-surface-solid, #ffffff);
  box-shadow: 0 28px 70px rgba(7, 25, 34, 0.18), 0 10px 24px rgba(7, 25, 34, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 200ms ease, visibility 0s linear 180ms;
}

/* Invisible bridge across the gap so the hover path stays continuous */
.course-submenu::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 18px;
}

.submenu-wrap:hover .course-submenu,
.submenu-wrap:focus-within .course-submenu,
.submenu-wrap.is-open .course-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition: opacity 160ms ease, transform 200ms ease, visibility 0s;
}

.course-menu-card.has-submenu .course-menu-arrow {
  transition: transform 180ms ease;
}

.submenu-wrap:hover .course-menu-card.has-submenu .course-menu-arrow,
.submenu-wrap.is-open .course-menu-card.has-submenu .course-menu-arrow {
  transform: translateX(3px);
}

/* On mobile / narrow nav, expand the submenu inline (accordion) instead */
@media (max-width: 960px) {
  .course-submenu {
    position: static;
    width: auto;
    left: auto;
    top: auto;
    margin: 8px 0 0 14px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    transform: none;
    display: none;
  }

  .course-submenu::after {
    display: none;
  }

  .submenu-wrap.is-open .course-submenu {
    display: grid;
  }
}

.nav-menu .course-menu-card--mbbs {
  overflow: hidden;
  border-color: rgba(199, 146, 74, 0.52);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(135deg, #fff7d8 0%, #f5d98c 48%, #efbd58 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(124, 83, 25, 0.14);
}

.nav-menu .course-menu-card--mbbs::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.42) 0%, transparent 32%, rgba(171, 105, 20, 0.12) 100%);
}

.nav-menu .course-menu-card--mbbs > * {
  position: relative;
  z-index: 1;
}

.nav-menu .course-menu-card--mbbs .course-icon--mbbs {
  --ci-bg: rgba(255, 255, 255, 0.66);
  --ci-fg: #8b560f;
  border-color: rgba(139, 86, 15, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.nav-menu .course-menu-card--mbbs .course-menu-copy strong {
  color: #6e4210;
}

.nav-menu .course-menu-card--mbbs .course-menu-copy small {
  color: #8b631f;
}

.nav-menu .course-menu-card--mbbs .course-menu-arrow {
  color: #8b560f;
  background: rgba(255, 255, 255, 0.34);
}

.course-menu-copy {
  display: block;
  min-width: 0;
  line-height: 1.1;
}

.course-menu-copy strong {
  display: block;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-menu-copy small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
}

.course-menu-arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  justify-self: end;
  border-radius: 50%;
  color: var(--teal-dark);
  background: transparent;
  opacity: 0.72;
  transition: background 180ms ease, color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.course-menu-arrow svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.nav-menu .course-menu-card:hover {
  border-color: rgba(13, 122, 120, 0.24);
  background: #f5fbfa;
  color: var(--teal-dark);
  box-shadow: 0 12px 24px rgba(7, 25, 34, 0.08);
  transform: translateY(-1px);
}

.nav-menu .course-menu-card--mbbs:hover {
  border-color: rgba(199, 146, 74, 0.52);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, #fff0b8 0%, #f0c969 48%, #dda03a 100%);
  color: #7c5319;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 14px 28px rgba(124, 83, 25, 0.18);
}

.course-menu-card:hover .course-menu-copy strong {
  color: var(--teal-dark);
}

.nav-menu .course-menu-card--mbbs:hover .course-menu-copy strong {
  color: #5f380b;
}

.nav-menu .course-menu-card--mbbs:hover .course-menu-copy small {
  color: #744f17;
}

.course-menu-card:hover .course-menu-arrow {
  opacity: 1;
  color: #ffffff;
  background: var(--teal-dark);
  transform: translateX(2px);
}

.nav-menu .course-menu-card--mbbs:hover .course-menu-arrow {
  background: #8b560f;
  color: #ffffff;
}

.course-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--ci-bg, #f1f6f7);
  color: var(--ci-fg, var(--teal-dark));
  border: 1px solid rgba(19, 37, 47, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.course-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
}

.course-menu-card:hover .course-icon {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(7, 25, 34, 0.1);
}

.course-icon--ug       { --ci-bg: #edf2ff; --ci-fg: #3b5bdb; }
.course-icon--pg       { --ci-bg: #f5f3ff; --ci-fg: #7048e8; }
.course-icon--mbbs     { --ci-bg: #fff0ec; --ci-fg: #e8590c; }
.course-icon--llb      { --ci-bg: #eefaf4; --ci-fg: #0d7a78; }
.course-icon--mba      { --ci-bg: #fff7e8; --ci-fg: #c7924a; }
.course-icon--doctoral { --ci-bg: #edf8ef; --ci-fg: #2f9e44; }

.nav-dropdown--compact .nav-dropdown-main {
  border-right: 0;
}

.nav-dropdown-main {
  min-width: 0;
  padding: 20px;
  border-right: 1px solid rgba(19, 37, 47, 0.08);
}

.nav-dropdown-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.nav-dropdown-topline--mbbs {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(19, 37, 47, 0.08);
}

.nav-dropdown-eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--teal-dark);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.nav-dropdown-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  background: #f6f9fc;
  color: #44606d;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.nav-dropdown-badge--v2 {
  background: rgba(13, 122, 120, 0.12);
  color: var(--teal-dark);
}

.nav-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  gap: 5px;
}

.nav-dropdown-grid--stack {
  grid-template-columns: 1fr;
}

.dest-card {
  --flag-bg: #f1f6f7;
  --flag-ring: rgba(19, 37, 47, 0.08);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: 7px 28px 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.dest-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px) rotate(-45deg);
  transition: opacity 160ms ease, transform 160ms ease;
}

.dest-card:hover {
  background: #f6f9fc;
  border-color: rgba(19, 37, 47, 0.08);
  color: var(--teal-dark);
}

.dest-card:hover::after {
  opacity: 0.48;
  transform: translateY(-50%) translateX(0) rotate(-45deg);
}

.dest-card:hover .dest-meta strong {
  color: var(--teal-dark);
}

.dest-card:nth-child(1) {
  --flag-bg: #edf2ff;
}

.dest-card:nth-child(2) {
  --flag-bg: #fff1f0;
}

.dest-card:nth-child(3) {
  --flag-bg: #edf8ef;
}

.dest-card:nth-child(4) {
  --flag-bg: #eef7ff;
}

.dest-card:nth-child(5) {
  --flag-bg: #f5f3ff;
}

.dest-card:nth-child(6) {
  --flag-bg: #fff7e8;
}

.dest-card:nth-child(7) {
  --flag-bg: #eef4ff;
}

.dest-card:nth-child(8) {
  --flag-bg: #eaf0ff;
}

.dest-card:nth-child(9) {
  --flag-bg: #fff0ec;
}

.dest-card:nth-child(10) {
  --flag-bg: #edf7ff;
}

.dest-card:nth-child(11) {
  --flag-bg: #fff5f4;
}

.dest-card:nth-child(12) {
  --flag-bg: #eefaf4;
}

.dest-card:nth-child(13) {
  --flag-bg: #eff7ff;
}

.dest-card:nth-child(14) {
  --flag-bg: #f5fbff;
}

.dest-card:nth-child(15) {
  --flag-bg: #f0f8ff;
}

.dest-card:nth-child(16) {
  --flag-bg: #fff2ee;
}

.dest-card:nth-child(17) {
  --flag-bg: #fff7e8;
}

.dest-card:nth-child(18) {
  --flag-bg: #fff1f4;
}

.dest-card:nth-child(19) {
  --flag-bg: #edf8ef;
}

.dest-flag {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--flag-bg);
  border: 1px solid var(--flag-ring);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  font-size: 1.16rem;
  line-height: 1;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.dest-card:hover .dest-flag {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    0 7px 16px rgba(7, 25, 34, 0.1);
  transform: translateY(-1px);
}

.dest-flag img {
  width: 24px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(7, 25, 34, 0.16);
}

.dest-flag-eu {
  padding: 0;
  background: #eaf0ff;
}

.dest-flag-eu svg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.dest-meta {
  display: block;
  min-width: 0;
  line-height: 1.1;
}

.dest-meta strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dest-meta small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.15;
}

.nav-dropdown-feature {
  position: relative;
  min-width: 0;
  padding: 22px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(140deg, #0b2b43 0%, #0d7a78 58%, #e26d5a 130%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-dropdown-feature::before {
  content: none;
}

.nav-dropdown-feature .nav-dropdown-eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.feature-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.nav-dropdown-feature h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.48rem;
  line-height: 1.05;
  color: #ffffff;
}

.nav-dropdown-feature p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.83rem;
  line-height: 1.45;
}

.nav-dropdown-feature--v2 {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(145deg, #071922 0%, #0d5756 58%, #c7924a 128%);
}

.feature-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  min-height: 46px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffcf5a 0%, #ff7a59 100%);
  color: #071922;
  font-size: 0.86rem;
  font-weight: 900;
  max-width: 100%;
  box-shadow: 0 14px 30px rgba(7, 25, 34, 0.24);
  transition: box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}

.feature-cta > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-cta::after {
  display: none;
}

.feature-cta:hover {
  box-shadow: 0 18px 36px rgba(7, 25, 34, 0.3);
  filter: saturate(1.05);
  transform: translateY(-1px);
}

.feature-cta-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
}

.feature-cta-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

.nav-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.nav-cta {
  background: var(--ink);
  color: white;
  box-shadow: 0 14px 30px rgba(7, 25, 34, 0.18);
}

.nav-cta:hover,
.btn:hover {
  transform: translateY(-2px);
}

.nav-cta svg,
.btn svg {
  width: 18px;
  height: 18px;
}

.nav-toggle {
  display: none;
  position: relative;
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 130;
}

.students-hub-overlay[hidden] {
  display: none;
}

.students-hub-overlay {
  --students-hub-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.students-hub-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.students-hub-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(6, 6, 8, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 220ms ease;
}

.students-hub-overlay.is-open .students-hub-backdrop {
  opacity: 1;
}

.students-hub-dialog {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  width: min(500px, 100%);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 10px;
  padding: 40px 36px 36px;
  background: #131119;
  color: #ffffff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition:
    opacity 180ms ease,
    transform 260ms var(--students-hub-ease);
}

.students-hub-overlay.is-open .students-hub-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.students-hub-dialog::before,
.students-hub-dialog::after {
  display: none;
}

.students-hub-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transition: background 180ms ease, transform 180ms ease;
}

.students-hub-close:hover,
.students-hub-close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.students-hub-close svg {
  width: 18px;
  height: 18px;
}

.students-hub-copy {
  min-width: 0;
  text-align: center;
}

.students-hub-ai-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.06);
}

.students-hub-ai-mark::before,
.students-hub-ai-mark::after {
  display: none;
}

.students-hub-chip {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #d4af37;
  box-shadow: none;
}

.students-hub-chip svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.9;
}

.students-hub-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #d4af37;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.students-hub-kicker svg {
  width: 15px;
  height: 15px;
}

.students-hub-dialog h2 {
  margin: 0 auto 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.05rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.06;
  color: #ffffff;
}

.students-hub-dialog p {
  max-width: 440px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.98rem;
  line-height: 1.65;
}

.students-hub-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 26px;
}

.students-hub-features span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid rgba(212, 175, 55, 0.16);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 700;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.students-hub-overlay.is-open .students-hub-features span {
  animation: none;
}

.students-hub-features svg {
  width: 17px;
  height: 17px;
  color: #d4af37;
  stroke-width: 2.2;
}

@media (prefers-reduced-motion: reduce) {
  .students-hub-overlay,
  .students-hub-backdrop,
  .students-hub-dialog,
  .students-hub-features span {
    transition: none !important;
  }

  .students-hub-dialog {
    transform: none;
  }
}

@media (min-width: 921px) and (max-width: 1120px) {
  .nav-shell {
    gap: 12px;
  }

  .brand small {
    display: none;
  }

  .nav-menu {
    gap: 2px;
  }

  .nav-menu a,
  .nav-trigger,
  .students-hub-trigger {
    font-size: 0.84rem;
  }

  .nav-menu a {
    padding: 0 10px;
  }

  .nav-trigger {
    padding: 0 6px 0 10px;
  }

  .students-hub-trigger {
    padding: 0 10px;
  }

  .nav-cta {
    padding: 0 14px;
  }
}

@media (max-width: 760px) {
  .students-hub-dialog {
    max-height: calc(100svh - 32px);
    overflow-y: auto;
  }
}

@media (max-width: 620px) {
  .students-hub-overlay {
    align-items: end;
    padding: 14px;
  }

  .students-hub-dialog {
    padding: 28px 22px 24px;
  }

  .students-hub-dialog h2 {
    margin-right: 34px;
    font-size: 1.96rem;
  }

  .students-hub-ai-mark {
    width: 76px;
    height: 76px;
    min-height: 76px;
  }

  .students-hub-chip {
    width: 42px;
    height: 42px;
  }

}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 78svh;
  overflow: hidden;
  contain: paint;
  color: white;
  isolation: isolate;
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media {
  background-image: url("https://images.unsplash.com/photo-1562774053-701939374585?auto=format&fit=crop&w=2200&q=88");
  background-position: center;
  background-size: cover;
  transform: scale(1.08);
  filter: brightness(1.18) saturate(1.08) contrast(1.02);
  animation: heroDrift 22s ease-in-out infinite alternate;
}

.hero-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 25, 34, 0.78) 0%, rgba(11, 43, 67, 0.5) 46%, rgba(13, 122, 120, 0.12) 100%),
    linear-gradient(180deg, rgba(7, 25, 34, 0.22) 0%, rgba(7, 25, 34, 0.04) 58%, rgba(7, 25, 34, 0.72) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(290px, 0.52fr);
  align-items: end;
  gap: 56px;
  padding: 112px 0 92px;
}

.hero-copy {
  max-width: 760px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero .eyebrow,
.contact-card .eyebrow {
  color: #a9eee4;
}

.hero .eyebrow {
  background-image: var(--animated-text-gradient);
  background-size: var(--animated-text-size);
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  letter-spacing: 0.14em;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
  animation: goldShimmer var(--animated-text-duration) ease-in-out infinite;
}

.hero .eyebrow::before {
  background: var(--animated-text-gradient);
  -webkit-text-fill-color: initial;
          color: initial;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: 0.98;
}

h1 {
  margin: 18px 0 20px;
  max-width: 760px;
  font-size: 5.1rem;
}

h2 {
  margin: 10px 0 18px;
  font-size: 3.25rem;
}

h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.hero-copy p {
  max-width: 650px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.13rem;
}

.hero-headline {
  margin: 22px 0 28px;
  max-width: 880px;
  font-size: 5.4rem;
  letter-spacing: -0.012em;
  line-height: 1.02;
  text-wrap: balance;
}

.gold-text {
  position: relative;
  background-image: var(--animated-text-gradient);
  background-size: var(--animated-text-size);
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  font-style: italic;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18)) drop-shadow(0 6px 22px rgba(212, 161, 53, 0.22));
  animation: goldShimmer var(--animated-text-duration) ease-in-out infinite;
}

@keyframes goldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 32px;
  perspective: 720px;
}

.hero-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform-style: preserve-3d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 8px 18px rgba(0, 0, 0, 0.18);
  transition:
    transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 380ms ease;
  will-change: transform;
}

.hero-track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 100%);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.hero-track:hover,
.hero-track:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-4px) rotateX(14deg) rotateY(-6deg) scale(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.36) inset,
    0 18px 32px rgba(0, 0, 0, 0.32);
}

.hero-track:hover::before,
.hero-track:focus-visible::before {
  opacity: 1;
}

.hero-track:active {
  transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(0.97);
  transition-duration: 140ms;
}

.hero-track.is-disabled {
  cursor: default;
  user-select: none;
  /* Hover still fires for the 3D tilt — the element just has no href. */
}

.hero-track.is-active {
  background: linear-gradient(135deg, #ff8a3d 0%, #ff6a1a 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.36) inset,
    0 10px 22px rgba(255, 106, 26, 0.38);
}

.hero-track.is-active:hover,
.hero-track.is-active:focus-visible {
  background: linear-gradient(135deg, #ff9b56 0%, #ff7530 100%);
  border-color: #ffffff;
  transform: translateY(-4px) rotateX(14deg) rotateY(-6deg) scale(1.05);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 20px 36px rgba(255, 106, 26, 0.48);
}

@media (prefers-reduced-motion: reduce) {
  .hero-track,
  .hero-track:hover,
  .hero-track:focus-visible,
  .hero-track.is-active:hover,
  .hero-track.is-active:focus-visible {
    transform: none;
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  }
}

/* Hero buttons stack into one or more responsive rows (set via the CMS). */
.hero-actions-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-primary {
  background: var(--coral);
  color: white;
  box-shadow: 0 18px 36px rgba(226, 109, 90, 0.26);
}

.btn-primary:hover {
  background: #d65f4d;
  box-shadow: 0 22px 44px rgba(226, 109, 90, 0.32);
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.12);
  color: white;
  backdrop-filter: blur(10px);
}

/* Brand orange CTA (logo accent #ff5e32) — consistent across all themes */
.btn-orange {
  background: #ff5e32;
  color: #ffffff;
  box-shadow: 0 18px 36px rgba(255, 94, 50, 0.3);
}

.btn-orange:hover {
  background: #ec4a1f;
  box-shadow: 0 22px 44px rgba(255, 94, 50, 0.36);
}

/* Greyed-out, non-clickable button (hero secondary actions) */
.btn-disabled {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-disabled i,
.btn-disabled svg {
  opacity: 0.6;
}

.btn-secondary {
  background: var(--teal);
  color: white;
  box-shadow: 0 16px 32px rgba(13, 122, 120, 0.22);
}

.hero-consult {
  --hc-border: rgba(255, 255, 255, 0.28);
  --hc-border-focus: #a9eee4;
  --hc-text: #ffffff;
  --hc-muted: rgba(255, 255, 255, 0.7);
  --hc-input-bg: rgba(255, 255, 255, 0.08);
  --hc-input-bg-focus: rgba(255, 255, 255, 0.14);
  position: relative;
  z-index: 10;
  align-self: center;
  display: grid;
  gap: 12px;
  padding: 28px 26px 26px;
  width: 100%;
  max-width: 380px;
  justify-self: end;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 60%, rgba(7, 25, 34, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(7, 25, 34, 0.38), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--hc-text);
  overflow: visible;
}

.hero-consult-title {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
}

.hc-field {
  position: relative;
  display: block;
  overflow: visible;
}

.hc-field:has(.cbx.is-open) {
  z-index: 100;
}

.hc-field input,
.hc-field select {
  width: 100%;
  height: 50px;
  padding: 16px 14px 14px;
  font: inherit;
  color: var(--hc-text);
  background: var(--hc-input-bg);
  border: 1px solid var(--hc-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
}

.hc-field input::placeholder { color: transparent; }

.hc-field input:focus,
.hc-field select:focus {
  border-color: var(--hc-border-focus);
  background: var(--hc-input-bg-focus);
  box-shadow: 0 0 0 3px rgba(169, 238, 228, 0.18);
}

.hc-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 6px;
  background: transparent;
  color: var(--hc-muted);
  font-size: 0.92rem;
  pointer-events: none;
  transition: top 0.22s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s ease, background 0.22s ease;
  white-space: nowrap;
  z-index: 2;
}

.hc-label em {
  color: #ffb4a4;
  font-style: normal;
  margin-left: 2px;
}

.hc-field input:focus + .hc-label,
.hc-field input:not(:placeholder-shown) + .hc-label,
.hc-select select:focus ~ .hc-label,
.hc-select select:valid ~ .hc-label {
  top: -2px;
  font-size: 0.72rem;
  color: #a9eee4;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0.92), rgba(7, 25, 34, 0.92));
  border-radius: 4px;
  padding: 0 8px;
  box-shadow: 0 0 0 1px rgba(169, 238, 228, 0.15);
}

.hc-select.is-enhanced.is-filled > .hc-label,
.hc-select.is-enhanced.is-focused > .hc-label,
.hc-select.is-enhanced:focus-within > .hc-label,
.hc-select.is-enhanced:has(.cbx.is-open) > .hc-label {
  top: -2px;
  font-size: 0.72rem;
  color: #a9eee4;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0.92), rgba(7, 25, 34, 0.92));
  border-radius: 4px;
  padding: 0 8px;
  box-shadow: 0 0 0 1px rgba(169, 238, 228, 0.15);
}

.hc-select { position: relative; }

.hc-select select {
  padding-right: 38px;
  cursor: pointer;
  color: var(--hc-text);
}

.hc-select select option {
  color: var(--ink);
  background: #ffffff;
}

.hc-select select:invalid { color: transparent; }

.hc-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--hc-muted);
  pointer-events: none;
}

.hc-phone {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px;
  position: relative;
  z-index: 10;
}

.hc-phone-country {
  position: relative;
  height: 50px;
  z-index: 1;
}

.hc-phone:has(.cbx.is-open),
.contact-phone-fields:has(.cbx.is-open) {
  position: relative;
  z-index: 1000;
}

.hc-phone input {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Custom searchable combobox */
.cbx {
  position: relative;
  width: 100%;
  height: 100%;
}

.cbx-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  padding: 0 34px 0 12px;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--hc-text);
  background: var(--hc-input-bg);
  border: 1px solid var(--hc-border);
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
}

.cbx-field:hover { border-color: rgba(169, 238, 228, 0.4); }

.cbx.is-disabled .cbx-field {
  cursor: not-allowed;
  opacity: 0.62;
}

.cbx.is-disabled .cbx-field:hover {
  border-color: var(--hc-border);
}

.cbx.is-open .cbx-field,
.cbx-field:focus-visible,
.cbx-field:focus-within {
  border-color: var(--hc-border-focus);
  background: var(--hc-input-bg-focus);
  box-shadow: 0 0 0 3px rgba(169, 238, 228, 0.18);
}

.cbx-flag {
  width: 22px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.cbx-value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}

.cbx.is-open .cbx-value {
  opacity: 0;
  transform: translateY(-4px);
}

.cbx-field .cbx-name {
  display: block;
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.25;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.cbx-field .cbx-dial {
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 700;
}

.cbx-placeholder {
  display: block;
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.25;
  color: var(--hc-muted);
  font-weight: 500;
}

.cbx-field .cbx-input {
  position: absolute;
  inset: 0 36px 0 12px;
  z-index: 2;
  width: auto;
  height: 100%;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background: transparent;
  border: 0;
  outline: none;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  min-width: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  letter-spacing: 0;
}

.cbx-field .cbx-input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cbx-field .cbx-input::placeholder {
  color: rgba(255, 255, 255, 0.52);
  font-weight: 500;
}

.cbx.is-open .cbx-field .cbx-input {
  opacity: 1;
  pointer-events: auto;
}

.cbx-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--hc-muted);
  pointer-events: none;
  transition: transform 0.22s ease, color 0.22s ease;
}

.cbx.is-open .cbx-chevron {
  transform: translateY(-50%) rotate(180deg);
  color: #a9eee4;
}

.cbx-panel {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(420px, calc(100vw - 28px));
  background: linear-gradient(180deg, #0f2730 0%, #0a1f27 100%);
  border: 1px solid rgba(169, 238, 228, 0.24);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(169, 238, 228, 0.1);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.cbx.is-open .cbx-panel,
.cbx-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(169, 238, 228, 0.3);
}

.cbx-list {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(169, 238, 228, 0.35) transparent;
}

.cbx-list::-webkit-scrollbar { width: 8px; }
.cbx-list::-webkit-scrollbar-thumb {
  background: rgba(169, 238, 228, 0.28);
  border-radius: 8px;
}

.cbx-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.92rem;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
}

.cbx-option:hover,
.cbx-option.is-active {
  background: rgba(169, 238, 228, 0.12);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.cbx-option.is-selected {
  background: rgba(169, 238, 228, 0.2);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.cbx-option.is-selected::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a9eee4;
  flex-shrink: 0;
  margin-left: -4px;
  margin-right: 2px;
  animation: cbx-dot-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cbx-option .cbx-name {
  display: block;
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.cbx-option .cbx-dial {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.hero-consult .cbx-panel,
.hero-consult .cbx-panel *,
.hero-consult .cbx-value,
.hero-consult .cbx-value * {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.cbx-empty {
  padding: 14px 12px;
  text-align: center;
  font-size: 0.88rem;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* Enhanced state/city: hide native select, keep combobox on top */
.hc-select.is-enhanced { position: relative; }

.hc-select.is-enhanced > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.hc-select.is-enhanced > .hc-chevron { display: none; }

.hc-select.is-enhanced > .cbx {
  position: relative;
  z-index: 1;
}

.hc-select.is-enhanced > .cbx .cbx-field {
  padding: 16px 38px 14px 14px;
}

.hc-select.is-enhanced .cbx-value {
  min-height: 20px;
  line-height: 1.25;
}

.hc-select.is-enhanced .cbx-field .cbx-input {
  inset: 0 38px 0 14px;
  padding: 16px 0 14px;
  height: 100%;
  line-height: 1.25;
}

.hc-select.is-enhanced > .hc-label {
  z-index: 2;
}

.hc-select.is-enhanced .cbx-panel {
  width: 100%;
  max-width: 100%;
}

.hc-select.is-enhanced.is-filled > .hc-label,
.hc-select.is-enhanced.is-focused > .hc-label,
.hc-select.is-enhanced:focus-within > .hc-label,
.hc-select.is-enhanced:has(.cbx.is-open) > .hc-label {
  top: -2px;
  font-size: 0.72rem;
  color: #a9eee4;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0.92), rgba(7, 25, 34, 0.92));
  border-radius: 4px;
  padding: 0 8px;
  box-shadow: 0 0 0 1px rgba(169, 238, 228, 0.15);
}

.hc-select.is-required-alert > .hc-label {
  color: #ff8a8a;
  background: linear-gradient(180deg, rgba(39, 13, 17, 0.95), rgba(39, 13, 17, 0.95));
  box-shadow: 0 0 0 1px rgba(255, 92, 92, 0.28);
}

.hc-select.is-required-alert > .cbx .cbx-field {
  border-color: #ff5c5c !important;
  background: rgba(255, 92, 92, 0.14) !important;
  box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.24) !important;
  animation: state-required-pulse 0.6s ease;
}

.hc-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 2px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(7, 25, 34, 0.45);
}

.hc-consent > span {
  color: #ffffff;
  flex: 1;
  padding-top: 0;
}

.hc-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex-shrink: 0;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  top: 3px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hc-consent input[type="checkbox"]:hover {
  border-color: #d4a259;
  transform: scale(1.08);
}

.hc-consent input[type="checkbox"]:checked {
  background: #d4a259;
  border-color: #d4a259;
  animation: hc-consent-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hc-consent input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 3.5px;
  height: 7px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hc-consent input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  transition-delay: 0.08s;
}

@keyframes hc-consent-pop {
  0%   { transform: scale(1) translateY(0); }
  45%  { transform: scale(1.22) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

.hc-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid #d4a259;
  outline-offset: 2px;
}

.hc-consent a {
  color: #d4a259;
  text-decoration: underline;
  text-decoration-color: rgba(212, 162, 89, 0.6);
  text-underline-offset: 2px;
  font-weight: 700;
}

.hc-consent a:hover {
  color: #e8b96e;
  text-decoration-color: #e8b96e;
}

.hc-submit {
  margin-top: 6px;
  height: 48px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #5fb39c 0%, #4f9d87 100%);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(13, 122, 120, 0.28);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.hc-submit:hover {
  background: linear-gradient(180deg, #54a691 0%, #408b77 100%);
  box-shadow: 0 16px 30px rgba(13, 122, 120, 0.34);
}

.hc-submit:active { transform: translateY(1px); }

.pathfinder {
  position: relative;
  z-index: 5;
  padding: 0 0 74px;
  background:
    linear-gradient(180deg, rgba(7, 25, 34, 0.95) 0%, rgba(14, 55, 66, 0.96) 42%, rgba(250, 252, 248, 0) 100%);
  margin-top: -1px;
}

.pathfinder-shell {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  align-items: center;
  gap: 24px;
  margin-top: -36px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  padding: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.pathfinder h2 {
  margin-bottom: 0;
  font-size: 2.25rem;
}

.finder-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

label span {
  display: block;
  margin-bottom: 7px;
  color: #344650;
  font-size: 0.8rem;
  font-weight: 900;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(19, 37, 47, 0.14);
  border-radius: var(--radius);
  background: #fbfefd;
  color: var(--ink);
  padding: 13px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

select {
  min-height: 50px;
}

textarea {
  resize: vertical;
  min-height: 130px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(13, 122, 120, 0.62);
  box-shadow: 0 0 0 4px rgba(13, 122, 120, 0.11);
  outline: none;
}

.finder-note {
  grid-column: 2;
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.signal-strip {
  padding: 4px 0 78px;
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.signal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 232px;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 252, 0.88));
  box-shadow: 0 12px 34px rgba(7, 25, 34, 0.06);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.signal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), color-mix(in srgb, var(--teal) 40%, transparent));
  opacity: 0;
  transition: opacity 0.28s ease;
}

.signal:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--teal) 32%, transparent);
  box-shadow: 0 22px 48px rgba(7, 25, 34, 0.12);
}

.signal:hover::before {
  opacity: 1;
}

.signal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: #e8f7f3;
  color: var(--teal-dark);
  transition: transform 0.28s ease, background 0.28s ease;
}

.signal-icon i,
.signal-icon svg {
  width: 24px;
  height: 24px;
}

.signal:hover .signal-icon {
  transform: scale(1.06) rotate(-3deg);
  background: color-mix(in srgb, var(--teal) 18%, #e8f7f3);
}

.signal strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.signal p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.audience-section {
  padding: 92px 0;
  background:
    linear-gradient(180deg, rgba(225, 245, 248, 0.75), rgba(255, 255, 255, 0.74)),
    linear-gradient(90deg, rgba(199, 146, 74, 0.08), rgba(13, 122, 120, 0.1));
}

.section-lead {
  margin-bottom: 36px;
}

.section-lead p {
  color: var(--muted);
  font-size: 1rem;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.58fr);
  gap: 48px;
  align-items: end;
}

.centered {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.centered .eyebrow {
  justify-content: center;
}

.audience-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
}

.audience-card {
  position: relative;
  display: grid;
  flex: 0 1 252px;
  grid-template-rows: 190px 1fr auto;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(19, 37, 47, 0.08);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.audience-card:hover,
.audience-card:focus-within {
  transform: translateY(-8px);
  border-color: rgba(13, 122, 120, 0.28);
  box-shadow: 0 28px 70px rgba(7, 25, 34, 0.16);
}

.audience-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.3s ease;
}

.audience-card:hover img,
.audience-card:focus-within img {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.04);
}

.audience-card div {
  padding: 22px 22px 10px;
}

.audience-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.audience-card h3 {
  transition: color 0.22s ease;
}

.audience-card:hover h3,
.audience-card:focus-within h3 {
  color: var(--teal-dark);
}

.audience-card a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 22px 22px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.audience-card a svg {
  width: 18px;
  height: 18px;
}

.audience-card:hover a,
.audience-card:focus-within a {
  transform: translateX(4px);
  background: var(--teal);
  box-shadow: 0 12px 26px rgba(13, 122, 120, 0.24);
}

.audience-card-mbbs {
  cursor: pointer;
}

.audience-card-mbbs.is-routes-open {
  border-color: rgba(13, 122, 120, 0.3);
  box-shadow: 0 28px 70px rgba(7, 25, 34, 0.14);
  transform: translateY(-8px);
}

.audience-card-mbbs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(7, 25, 34, 0.16) 100%),
    radial-gradient(circle at 18% 12%, rgba(169, 238, 228, 0.22), transparent 34%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.audience-card-mbbs.is-routes-open::before {
  opacity: 1;
}

.audience-card .mbbs-routes-panel {
  position: absolute;
  inset: 10px;
  z-index: 4;
  display: block;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius);
  padding: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(247, 253, 252, 0.06) 46%, rgba(255, 250, 241, 0.09) 100%);
  box-shadow:
    0 22px 46px rgba(7, 25, 34, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 -1px 0 rgba(13, 122, 120, 0.05);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.98);
  transition: opacity 190ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.audience-card .mbbs-routes-panel::before {
  content: "";
  position: absolute;
  inset: -40% -24%;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, 0.28) 40%, transparent 52%),
    linear-gradient(292deg, transparent 0 38%, rgba(169, 238, 228, 0.08) 49%, transparent 62%),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 26%),
    radial-gradient(circle at 82% 76%, rgba(199, 146, 74, 0.08), transparent 30%);
  opacity: 0.54;
  transform: translateX(-8%) rotate(-3deg);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.audience-card .mbbs-routes-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: calc(var(--radius) - 1px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 34%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.34), transparent 28%);
  pointer-events: none;
}

.audience-card-mbbs.is-routes-open .mbbs-routes-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.audience-card-mbbs.is-routes-open .mbbs-routes-panel::before {
  transform: translateX(4%) rotate(-3deg);
}

.audience-card .mbbs-routes-head {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
}

.mbbs-routes-head span {
  color: #f7fffb;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(7, 25, 34, 0.52);
}

.mbbs-routes-close {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mbbs-routes-close svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.7;
}

.audience-card .mbbs-routes-grid {
  position: absolute;
  inset: 54px 8px 10px;
  z-index: 2;
  display: block;
  padding: 0;
}

.mbbs-routes-grid span {
  position: absolute;
  left: var(--chip-left);
  top: var(--chip-top);
  display: inline-flex;
  align-items: center;
  max-width: min(128px, 58%);
  min-height: 34px;
  overflow: visible;
  border: 1px solid rgba(13, 122, 120, 0.12);
  border-radius: 999px;
  padding: 0 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(244, 252, 251, 1)),
    linear-gradient(135deg, rgba(13, 122, 120, 0.08), rgba(199, 146, 74, 0.08));
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow:
    0 12px 26px rgba(7, 25, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(10px) rotate(var(--chip-rotate));
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 160ms ease;
}

.mbbs-routes-grid span::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(13, 122, 120, 0.1);
}

.audience-card-mbbs.is-routes-open .mbbs-routes-grid span {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) rotate(var(--chip-rotate));
}

.mbbs-routes-grid span:nth-child(1) { --chip-left: 28%; --chip-top: 22%; --chip-rotate: -2deg; }
.mbbs-routes-grid span:nth-child(2) { --chip-left: 63%; --chip-top: 17%; --chip-rotate: 2deg; }
.mbbs-routes-grid span:nth-child(3) { --chip-left: 74%; --chip-top: 43%; --chip-rotate: -1deg; }
.mbbs-routes-grid span:nth-child(4) { --chip-left: 32%; --chip-top: 48%; --chip-rotate: 1.5deg; }
.mbbs-routes-grid span:nth-child(5) { --chip-left: 59%; --chip-top: 70%; --chip-rotate: -2deg; }
.mbbs-routes-grid span:nth-child(6) { --chip-left: 25%; --chip-top: 78%; --chip-rotate: 2deg; }

.audience-card-mbbs.is-routes-open .mbbs-routes-grid span:nth-child(1) { transition-delay: 20ms; }
.audience-card-mbbs.is-routes-open .mbbs-routes-grid span:nth-child(2) { transition-delay: 60ms; }
.audience-card-mbbs.is-routes-open .mbbs-routes-grid span:nth-child(3) { transition-delay: 100ms; }
.audience-card-mbbs.is-routes-open .mbbs-routes-grid span:nth-child(4) { transition-delay: 140ms; }
.audience-card-mbbs.is-routes-open .mbbs-routes-grid span:nth-child(5) { transition-delay: 180ms; }
.audience-card-mbbs.is-routes-open .mbbs-routes-grid span:nth-child(6) { transition-delay: 220ms; }

.mbbs-routes-grid span:hover {
  border-color: rgba(13, 122, 120, 0.34);
  background:
    linear-gradient(135deg, #ffffff, #f4fcfb),
    linear-gradient(135deg, rgba(13, 122, 120, 0.1), rgba(199, 146, 74, 0.1));
}

.method-section {
  padding: 104px 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(251, 248, 240, 0.84) 48%, rgba(241, 246, 247, 0.92) 100%);
}

.method-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) 1fr;
  gap: 70px;
  align-items: center;
}

.sticky-lead {
  align-self: center;
  margin-bottom: 0;
}

.sticky-lead p {
  max-width: 440px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-dark);
  font-weight: 900;
}

.text-link svg {
  width: 18px;
  height: 18px;
}

.journey-steps {
  display: grid;
  gap: 18px;
  counter-reset: journey;
}

.journey-step {
  position: relative;
  min-height: 210px;
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 28px 30px 28px 34px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 38px rgba(7, 25, 34, 0.08);
}

.journey-step::after {
  content: "";
  position: absolute;
  left: -11px;
  top: 32px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 7px rgba(226, 109, 90, 0.15);
}

.journey-step span {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 900;
}

.journey-step h3 {
  font-size: 1.3rem;
}

.journey-step p {
  max-width: 640px;
  margin-bottom: 0;
  color: var(--muted);
}

.solutions-section {
  position: relative;
  padding: 112px 0 104px;
  background:
    linear-gradient(180deg, rgba(236, 246, 246, 0.92) 0%, rgba(248, 252, 252, 0.96) 34%, rgba(255, 250, 241, 0.96) 100%);
}

.solutions-section::before,
.destinations-section::before,
.outcomes-section::before,
.about-section::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 130px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0));
}

.solution-cta {
  margin-top: 10px;
}

.solution-ecosystem {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 680px;
  margin: 38px auto 56px;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0 18%, rgba(209, 232, 255, 0.62) 19% 28%, transparent 29%),
    radial-gradient(circle at 50% 58%, rgba(13, 122, 120, 0.13) 0 24%, transparent 25%),
    linear-gradient(135deg, #f3f6ff 0%, #f6fbfd 44%, #fff4df 100%);
  box-shadow: inset 0 0 0 1px rgba(19, 37, 47, 0.06), var(--shadow-soft);
}

.orbit {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  border: 2px solid rgba(30, 113, 225, 0.16);
  transform: rotate(-8deg);
  pointer-events: none;
}

.orbit-one {
  width: min(920px, 82%);
  height: 390px;
}

.orbit-two {
  width: min(720px, 64%);
  height: 300px;
  border-color: rgba(13, 122, 120, 0.16);
  transform: rotate(12deg);
}

.orbit-three {
  width: min(1080px, 92%);
  height: 470px;
  border-color: rgba(199, 146, 74, 0.18);
  transform: rotate(4deg);
}

.solution-person {
  position: relative;
  z-index: 2;
  width: min(500px, 52vw);
  height: 410px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(23, 60, 76, 0.22);
}

.solution-person::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(7, 25, 34, 0.4));
}

.solution-person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  border: 1px solid rgba(30, 113, 225, 0.14);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(7, 25, 34, 0.09);
  font-size: 0.86rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
  animation: chipFloat 7s ease-in-out infinite;
}

.solution-chip svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
}

.chip-a { top: 12%; left: 18%; }
.chip-b { top: 22%; left: 8%; animation-delay: -1s; }
.chip-c { top: 41%; left: 5%; animation-delay: -2s; }
.chip-d { bottom: 18%; left: 15%; animation-delay: -3s; }
.chip-e { bottom: 10%; left: 38%; animation-delay: -4s; }
.chip-f { bottom: 10%; right: 28%; animation-delay: -5s; }
.chip-g { bottom: 21%; right: 10%; animation-delay: -2.4s; }
.chip-h { top: 44%; right: 4%; animation-delay: -3.4s; }
.chip-i { top: 24%; right: 9%; animation-delay: -4.4s; }
.chip-j { top: 13%; right: 24%; animation-delay: -5.4s; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-card {
  min-height: 250px;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  padding: 28px;
  background: white;
  box-shadow: 0 12px 32px rgba(7, 25, 34, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.service-card > svg {
  width: 36px;
  height: 36px;
  margin-bottom: 26px;
  color: var(--gold);
  stroke-width: 1.7;
}

.service-card h3 {
  color: var(--navy);
  font-size: 1.17rem;
}

.service-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.whyus-section {
  padding: 84px 0;
}

.whyus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 76px;
}

.whyus-card {
  position: relative;
  text-align: center;
  padding: 50px 28px 30px;
  margin-top: 36px;
  border: 1px solid rgba(19, 37, 47, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(7, 25, 34, 0.05);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.whyus-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(7, 25, 34, 0.09);
}

/* Icon badge straddles the top edge of the card */
.whyus-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 10px 22px rgba(7, 25, 34, 0.16);
}

.whyus-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
}

/* Navy icon badges, two shades (3 cards each) */
.whyus-card:nth-child(odd) .whyus-icon {
  background: linear-gradient(135deg, #173d5c 0%, var(--navy) 100%);
}

.whyus-card:nth-child(even) .whyus-icon {
  background: linear-gradient(135deg, var(--navy) 0%, #061b2c 100%);
}

.whyus-card h3 {
  color: var(--teal-dark);
  font-size: 1.12rem;
  margin-bottom: 10px;
}

.whyus-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

@media (max-width: 880px) {
  .whyus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.destinations-section {
  position: relative;
  padding: 108px 0;
  background:
    linear-gradient(180deg, rgba(255, 250, 241, 0.96) 0%, rgba(242, 250, 248, 0.98) 46%, rgba(233, 245, 248, 0.96) 100%);
}

.destination-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.destination-controls button {
  min-height: 42px;
  border: 1px solid rgba(13, 122, 120, 0.18);
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--teal-dark);
  font-size: 0.85rem;
  font-weight: 900;
}

.destination-controls button.is-active {
  background: var(--teal);
  color: white;
}

.destination-layout {
  display: grid;
  grid-template-columns: minmax(420px, 0.98fr) minmax(560px, 1fr);
  gap: 24px;
  align-items: stretch;
}

.world-map-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 720px;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 38% 38%, rgba(169, 238, 228, 0.14), transparent 25%),
    linear-gradient(135deg, rgba(7, 25, 34, 0.96), rgba(8, 58, 70, 0.94)),
    url("https://images.unsplash.com/photo-1467269204594-9661b134dd2b?auto=format&fit=crop&w=1500&q=84");
  background-position: center;
  background-size: cover;
  color: white;
  box-shadow: var(--shadow);
}

.world-map-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.14), transparent 18%),
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  pointer-events: none;
}

.map-topline,
.world-map,
.map-insight {
  position: relative;
  z-index: 2;
}

.map-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 28px 0;
}

.map-topline h3 {
  margin: 8px 0 0;
  color: white;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.05rem;
  line-height: 1.04;
}

.map-topline strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #a9eee4;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.world-map {
  min-height: 410px;
  margin: 14px 18px 0;
}

.world-map svg {
  width: 100%;
  height: 100%;
  min-height: 410px;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.28));
}

.map-land {
  fill: rgba(209, 238, 235, 0.19);
  stroke: rgba(169, 238, 228, 0.22);
  stroke-width: 1.5;
  transition: fill 180ms ease, stroke 180ms ease;
}

.world-map-panel:hover .map-land {
  fill: rgba(209, 238, 235, 0.24);
}

.map-pin {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: white;
  box-shadow: 0 0 0 9px rgba(169, 238, 228, 0.08), 0 18px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.map-pin::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(169, 238, 228, 0.22);
  border-radius: 50%;
  animation: mapPulse 2.8s ease-out infinite;
}

.map-pin span {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 900;
}

.map-pin:hover,
.map-pin.is-active {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--coral);
  box-shadow: 0 0 0 11px rgba(226, 109, 90, 0.14), 0 20px 40px rgba(0, 0, 0, 0.3);
}

.pin-canada { left: 24%; top: 30%; }
.pin-usa { left: 30%; top: 43%; }
.pin-uk { left: 49%; top: 34%; }
.pin-ireland { left: 46%; top: 32%; }
.pin-germany { left: 52%; top: 37%; }
.pin-australia { left: 79%; top: 70%; }

.map-insight {
  margin: 0 28px 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 22px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
}

.map-insight span {
  display: block;
  margin-bottom: 8px;
  color: #a9eee4;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.map-insight h3 {
  margin-bottom: 8px;
  color: white;
  font-size: 1.35rem;
}

.map-insight p {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.82);
}

.map-insight strong {
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
}

.destination-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.destination-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 206px;
  overflow: hidden;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 32px rgba(7, 25, 34, 0.06);
}

.destination-card.is-hidden {
  display: none;
}

.destination-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destination-card div {
  padding: 22px;
}

.destination-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--coral);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.destination-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.outcomes-section {
  position: relative;
  padding: 100px 0;
  background:
    linear-gradient(180deg, rgba(233, 245, 248, 0.96) 0%, rgba(255, 255, 255, 0.96) 48%, rgba(255, 250, 241, 0.96) 100%);
}

.outcome-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  color: white;
  box-shadow: var(--shadow);
}

.outcome-band div {
  min-height: 150px;
  padding: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.outcome-band div:last-child {
  border-right: 0;
}

.outcome-band strong,
.outcome-band span {
  display: block;
}

.outcome-band strong {
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.outcome-band span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
}

.testimonial-shell {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  align-items: center;
  gap: 18px;
  max-width: 920px;
  margin: 46px auto 0;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(19, 37, 47, 0.12);
  border-radius: 50%;
  background: white;
  color: var(--ink);
  box-shadow: 0 12px 28px rgba(7, 25, 34, 0.08);
}

.carousel-btn svg {
  width: 18px;
  height: 18px;
}

.testimonial-track {
  position: relative;
  min-height: 262px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.testimonial-track.is-dragging {
  cursor: grabbing;
}

/* Stacked deck: the front card sits on top while the rest peek out beneath
   it, so the set reads as a deck of more stories. Each card's depth is set
   from data-pos (0 = front), assigned in script.js. */
.testimonial {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 22px;
  padding: 42px 50px;
  border: 1px solid rgba(19, 37, 47, 0.08);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform-origin: center top;
  transform: translateY(40px) scale(0.92);
  pointer-events: none;
  z-index: 1;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 420ms ease;
  will-change: transform, opacity;
}

/* No-JS / pre-hydration fallback: show the first card. data-pos rules below
   share specificity and come later, so they win once script.js runs. */
.testimonial.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 4;
}

.testimonial[data-pos="0"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 4;
}

.testimonial[data-pos="1"] {
  opacity: 0.65;
  transform: translateY(26px) scale(0.955);
  z-index: 3;
}

.testimonial[data-pos="2"] {
  opacity: 0.4;
  transform: translateY(50px) scale(0.91);
  z-index: 2;
}

/* The card being advanced flies clear of the deck (sideways + fade) rather
   than shrinking back through the stack, which read as a janky morph. Once it
   has exited, script.js snaps it to the back with transitions off (no sweep).
   These come after the data-pos rules so they win at equal specificity. */
.testimonial.is-exiting-left {
  opacity: 0;
  transform: translateX(-60%) translateY(-8px) rotate(-7deg) scale(0.96);
  z-index: 5;
  pointer-events: none;
}

.testimonial.is-exiting-right {
  opacity: 0;
  transform: translateX(60%) translateY(-8px) rotate(7deg) scale(0.96);
  z-index: 5;
  pointer-events: none;
}

/* Live finger/mouse drag: the front card tracks the pointer 1:1 (no lag). */
.testimonial-track.is-dragging .testimonial[data-pos="0"] {
  transition: none;
}

.testimonial p {
  margin-bottom: 0;
  color: #263b45;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.16;
}

.testimonial strong,
.testimonial span {
  display: block;
}

.testimonial span {
  color: var(--muted);
  font-size: 0.9rem;
}

.about-section {
  position: relative;
  padding: 104px 0;
  background:
    linear-gradient(180deg, rgba(255, 250, 241, 0.96) 0%, rgba(248, 252, 252, 0.96) 100%);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr);
  gap: 74px;
  align-items: center;
}

.about-media {
  position: relative;
  min-height: 560px;
}

.about-media img {
  width: 82%;
  height: 480px;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow);
}

.badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  font-size: 0.82rem;
  font-weight: 900;
}

.badge-one {
  left: 8%;
  top: 26px;
}

.badge-two {
  right: 1%;
  top: 180px;
}

.badge-three {
  left: 18%;
  bottom: 54px;
}

.about-copy p {
  color: var(--muted);
}

.about-points {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.about-points span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.about-points svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
}

.insights-section {
  position: relative;
  overflow: hidden;
  padding: 112px 0;
  background:
    linear-gradient(180deg, rgba(248, 252, 252, 0.96) 0%, rgba(255, 250, 241, 0.96) 100%);
  color: var(--ink);
}

.insights-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(13, 122, 120, 0.08) 0%, transparent 34%),
    linear-gradient(300deg, rgba(199, 146, 74, 0.1) 0%, transparent 28%);
  pointer-events: none;
}

.insights-section > .container {
  position: relative;
}

.insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.insights-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--teal-dark);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.insights-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.insights-title {
  max-width: 760px;
  margin: 0 0 8px;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.45rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0;
}

.insights-intro {
  max-width: 650px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.insights-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid rgba(19, 37, 47, 0.12);
  border-radius: 999px;
  padding: 0 26px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(7, 25, 34, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.insights-button:hover {
  border-color: rgba(13, 122, 120, 0.28);
  background: var(--teal-dark);
  color: white;
  transform: translateY(-2px);
}

.insights-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

.insight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px rgba(7, 25, 34, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.insight-card:hover {
  border-color: rgba(13, 122, 120, 0.22);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}

.insight-card-media {
  position: relative;
  height: 200px;
  background-position: center;
  background-size: cover;
}

.insight-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 25, 34, 0.02) 0%, rgba(7, 25, 34, 0.22) 100%);
}

.insight-card-tag {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 18px;
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--gold);
  color: var(--deep);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(7, 25, 34, 0.18);
}

.insight-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 26px 28px;
}

.insight-card-meta {
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.insight-card-body h3 {
  margin: 10px 0 12px;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.36rem;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0;
}

.insight-card-body p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.insight-card-body a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--teal-dark);
  border-bottom: 1px solid rgba(199, 146, 74, 0.65);
  padding-bottom: 3px;
  font-size: 0.85rem;
  font-weight: 900;
}

.insight-card-body a::after {
  display: none;
}

.insight-card-body a svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.8;
  transition: transform 180ms ease;
}

.insight-card-body a:hover svg {
  transform: translateX(3px);
}

.insight-card-feature {
  grid-row: span 2;
}

.insight-card-feature .insight-card-media {
  height: 320px;
}

.insight-card-feature .insight-card-body h3 {
  font-size: 1.72rem;
}

/* "Read More" CTA card — links to the blog index */
.insight-card-more {
  gap: 12px;
  padding: 30px 28px;
  text-decoration: none;
  border-color: transparent;
  background: linear-gradient(150deg, var(--navy) 0%, var(--coral) 135%);
  color: #ffffff;
}

.insight-card-more:hover {
  border-color: transparent;
  box-shadow: var(--shadow);
}

.insight-card-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.insight-card-more-icon svg {
  width: 22px;
  height: 22px;
}

.insight-card-more-meta {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.insight-card-more-title {
  color: #ffffff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.16;
}

.insight-card-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 900;
  color: #ffffff;
}

.insight-card-more-link svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.8;
  transition: transform 180ms ease;
}

.insight-card-more:hover .insight-card-more-link svg {
  transform: translateX(4px);
}

.contact-section {
  padding: 104px 0;
  background:
    linear-gradient(180deg, rgba(248, 252, 252, 0.96) 0%, rgba(222, 242, 240, 0.96) 58%, rgba(7, 25, 34, 0.98) 100%);
}

/* On the home page the contact section flows straight into the logo
   marquee — trim its bottom padding so there isn't a big empty band. */
.contact-section:has(+ .footer-marquee) {
  padding-bottom: 44px;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(290px, 0.68fr) 1fr;
  gap: 22px;
  align-items: stretch;
}

.contact-card {
  display: grid;
  align-content: start;
  min-height: 620px;
  border-radius: var(--radius);
  padding: 40px;
  background:
    linear-gradient(135deg, rgba(7, 25, 34, 0.92), rgba(12, 62, 68, 0.94)),
    url("https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=1050&q=84");
  background-position: center;
  background-size: cover;
  color: white;
  box-shadow: var(--shadow);
}

.contact-card h2 {
  color: white;
  font-size: 2.8rem;
}

.contact-card p {
  color: rgba(255, 255, 255, 0.78);
}

.contact-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.contact-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: rgba(255, 255, 255, 0.9);
}

.contact-list svg {
  width: 20px;
  height: 20px;
  color: #a9eee4;
  flex: 0 0 auto;
}

.consult-form {
  --hc-border: rgba(19, 37, 47, 0.14);
  --hc-border-focus: rgba(13, 122, 120, 0.62);
  --hc-text: var(--ink);
  --hc-muted: var(--muted);
  --hc-input-bg: #fbfefd;
  --hc-input-bg-focus: #ffffff;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(19, 37, 47, 0.08);
  border-radius: var(--radius);
  padding: 34px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-soft);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-phone {
  display: grid;
  gap: 7px;
}

.contact-phone-label {
  color: #344650;
  font-size: 0.8rem;
  font-weight: 900;
}

.contact-phone-fields {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px;
}

.contact-phone-country {
  position: relative;
  min-width: 0;
  height: 50px;
}

.contact-phone .cbx-field {
  background: #fbfefd;
}

.contact-phone .cbx-field .cbx-dial,
.contact-phone .cbx-value {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
}

.consent span {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.form-status {
  min-height: 24px;
  margin: -4px 0 0;
  color: var(--teal-dark);
  font-weight: 900;
}

/* Server-side validation / send failures flag the status line in red. */
.form-status--error,
html[data-color-theme] .form-status--error {
  color: #c0392b;
}

/* ───────────── Form result popup (Contact + Careers submissions) ─────────────
   A branded confirmation dialog shown after a successful (or failed) form
   submit, in place of the inline status line. Markup is injected by script.js. */
.oda-popup {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.oda-popup[hidden] { display: none; }

.oda-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 24, 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: oda-popup-fade 0.25s ease both;
}

.oda-popup__card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  padding: 42px 34px 32px;
  text-align: center;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(20, 8, 60, 0.32);
  animation: oda-popup-pop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

@keyframes oda-popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes oda-popup-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.oda-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f3f1f9;
  color: #6f6792;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.oda-popup__close:hover {
  background: #e9e6f4;
  color: #1a0088;
}

.oda-popup__icon {
  width: 84px;
  height: 84px;
  margin: 2px auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.oda-popup__icon--success { background: rgba(30, 166, 114, 0.14); }
.oda-popup__icon--error   { background: rgba(214, 69, 53, 0.12); }

.oda-popup__check { width: 56px; height: 56px; }

.oda-popup__check-circle {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: oda-popup-draw 0.5s ease forwards;
}

.oda-popup__check-mark {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: oda-popup-draw 0.34s 0.42s ease forwards;
}

.oda-popup__icon--success .oda-popup__check-circle,
.oda-popup__icon--success .oda-popup__check-mark { stroke: #1ea672; }
.oda-popup__icon--error .oda-popup__check-circle,
.oda-popup__icon--error .oda-popup__check-mark { stroke: #d64535; }

@keyframes oda-popup-draw {
  to { stroke-dashoffset: 0; }
}

.oda-popup__eyebrow {
  display: block;
  margin: 0 0 12px;
  font-family: "Jost", "Manrope", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal-dark, #d8431d);
}

.oda-popup__title {
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.85rem, 1.5rem + 1.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink, #181134);
  text-wrap: balance;
}

.oda-popup__message {
  max-width: 34ch;
  margin: 0 auto 28px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--muted, #5f5a85);
  text-wrap: pretty;
}

.oda-popup__action {
  width: 100%;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

html.oda-popup-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .oda-popup__backdrop,
  .oda-popup__card,
  .oda-popup__check-circle,
  .oda-popup__check-mark { animation: none; }
  .oda-popup__check-circle,
  .oda-popup__check-mark { stroke-dashoffset: 0; }
}

.contact-page-main {
  background:
    linear-gradient(180deg, #fffdf8 0%, #f7fbfb 48%, #eef7f8 82%, #071922 100%);
}

.contact-page {
  position: relative;
  overflow: hidden;
  padding: 104px 0 120px;
}

.contact-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 12%, rgba(199, 146, 74, 0.16) 0%, transparent 34%),
    radial-gradient(circle at 10% 78%, rgba(13, 122, 120, 0.14) 0%, transparent 35%);
}

.contact-page > .container {
  position: relative;
}

.contact-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  gap: 54px;
  align-items: end;
  margin: 0 0 58px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(19, 37, 47, 0.12);
}

.contact-page-head-copy {
  min-width: 0;
}

.contact-page-title {
  margin: 0;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.1rem, 6.8vw, 6.4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0;
}

.contact-page-kicker {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.85rem, 3.2vw, 3.15rem);
  font-weight: 700;
  line-height: 1.04;
}

.contact-page-kicker em {
  color: var(--gold);
  font-style: italic;
}

.contact-page-head-aside {
  display: grid;
  gap: 22px;
  justify-items: start;
  min-width: 0;
}

.contact-page-head-aside p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.72;
}

.contact-page-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.contact-head-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid rgba(19, 37, 47, 0.14);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(7, 25, 34, 0.06);
}

.contact-head-phone svg {
  width: 17px;
  height: 17px;
  color: var(--teal-dark);
}

.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
  overflow: hidden;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.contact-info-panel {
  position: relative;
  overflow: hidden;
  padding: 48px 44px;
  background:
    linear-gradient(155deg, rgba(7, 25, 34, 0.96), rgba(8, 44, 55, 0.97)),
    url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=900&q=78") center / cover;
  color: white;
}

.contact-info-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 100%, rgba(199, 146, 74, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(7, 25, 34, 0.08), rgba(7, 25, 34, 0.72));
}

.contact-info-panel > * {
  position: relative;
}

.contact-info-panel h2,
.contact-form-panel h2 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.72rem;
  font-weight: 700;
  line-height: 1.08;
}

.contact-info-panel p {
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.74);
}

.contact-info-list {
  display: grid;
  gap: 20px;
  margin-bottom: 34px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-info-item > svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  color: #e8c46a;
}

.contact-info-item strong,
.contact-mini-title,
.contact-response-card strong {
  display: block;
  margin-bottom: 5px;
  color: #f0d49a;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-info-item a,
.contact-info-item span {
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.58;
}

.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.contact-socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.contact-socials a:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--deep);
  transform: translateY(-2px);
}

.contact-socials svg {
  width: 17px;
  height: 17px;
}

.contact-response-card {
  margin-top: 34px;
  border: 1px solid rgba(199, 146, 74, 0.26);
  border-radius: var(--radius);
  padding: 20px;
  background: rgba(199, 146, 74, 0.1);
}

.contact-response-card span {
  display: block;
  color: white;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
}

.contact-response-card p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86rem;
}

.contact-form-panel {
  padding: 38px 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 248, 240, 0.94) 100%);
}

.contact-form-panel h2 {
  color: var(--navy);
  margin-bottom: 20px;
}

.contact-form-panel form,
.contact-form {
  display: grid;
  gap: 14px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-field {
  display: grid;
  gap: 8px;
  color: var(--ink);
}

.contact-field span {
  color: #344650;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  border: 1px solid rgba(19, 37, 47, 0.14);
  border-radius: var(--radius);
  background: #fbfefd;
  color: var(--ink);
  padding: 11px 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: rgba(13, 122, 120, 0.62);
  background: white;
  box-shadow: 0 0 0 4px rgba(13, 122, 120, 0.12);
}

.contact-field textarea {
  min-height: 88px;
  resize: vertical;
}

.contact-field-full {
  grid-column: 1 / -1;
}

.contact-consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.55;
}

.contact-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
}

.contact-form-panel .btn {
  width: 100%;
}

.contact-privacy {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.contact-privacy a {
  border-bottom: 1px solid rgba(199, 146, 74, 0.72);
  color: var(--teal-dark);
  font-weight: 900;
}

.contact-map {
  overflow: hidden;
  margin-top: 48px;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow-soft);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  filter: grayscale(24%) contrast(1.04) saturate(0.94);
}

.site-footer .footer-contact-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid rgba(199, 146, 74, 0.35);
  border-radius: 999px;
  margin: 14px 0 4px;
  padding: 0 16px;
  background: var(--gold);
  color: var(--deep);
  font-size: 0.88rem;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.site-footer .footer-contact-button:hover {
  background: #e8c46a;
  color: var(--deep);
}

.footer-contact-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

.insights-page-main {
  background: linear-gradient(180deg, #fffdf8 0%, #f5fbfb 36%, #fffaf2 70%, #071922 100%);
}

.insights-page-hero {
  position: relative;
  overflow: hidden;
  padding: 108px 0 86px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 253, 248, 0.94) 58%, #f3faf9 100%),
    url("https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=1800&q=82") center / cover no-repeat;
  color: var(--ink);
}

.insights-page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 88px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 250, 249, 0) 0%, #f3faf9 100%);
}

.insights-page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
  gap: 52px;
  align-items: center;
}

.insights-page-copy h1 {
  max-width: 820px;
  margin: 0;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 5.35rem;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0;
}

.insights-page-copy p {
  max-width: 660px;
  margin: 24px 0 0;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.72;
}

.insights-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.insights-page-actions .btn-ghost {
  border-color: rgba(19, 37, 47, 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
}

.insights-hero-panel {
  overflow: hidden;
  border: 1px solid rgba(19, 37, 47, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.insights-hero-image {
  min-height: 270px;
  background-position: center;
  background-size: cover;
}

.insights-hero-note {
  padding: 26px;
}

.insights-hero-note span,
.insights-meta,
.insights-eyebrow {
  display: inline-flex;
  color: var(--teal-dark);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.insights-hero-note ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.insights-hero-note li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
}

.insights-hero-note svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  stroke-width: 3;
}

.insights-directory {
  border-top: 1px solid rgba(19, 37, 47, 0.08);
  border-bottom: 1px solid rgba(19, 37, 47, 0.08);
  background: #f3faf9;
}

.insights-directory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-right: 1px solid rgba(19, 37, 47, 0.08);
  border-left: 1px solid rgba(19, 37, 47, 0.08);
}

.insights-directory-item {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font-weight: 900;
}

.insights-directory span {
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
}

.insights-feature-section {
  padding: 82px 0 92px;
  background: linear-gradient(180deg, #f3faf9 0%, #fffaf2 100%);
}

.insights-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.78fr);
  overflow: hidden;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.insights-feature-media {
  position: relative;
  min-height: 440px;
  background-position: center;
  background-size: cover;
}

.insights-feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0.02), rgba(7, 25, 34, 0.36));
}

.insights-feature-media span {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 22px;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--gold);
  color: var(--deep);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.insights-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px;
}

.insights-feature-copy h2,
.insights-section-head h2,
.insights-decision-copy h2,
.insights-cta-panel h2 {
  margin: 10px 0 14px;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.insights-feature-copy h2 {
  font-size: 3.25rem;
}

.insights-feature-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.insights-feature-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.insights-feature-points span {
  border: 1px solid rgba(19, 37, 47, 0.12);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.insights-feature-copy a,
.insights-article-body a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 26px;
  color: var(--teal-dark);
  font-weight: 900;
}

.insights-feature-copy a svg,
.insights-article-body a svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.8;
}

.insights-page-section {
  padding: 88px 0 102px;
  background: #fffaf2;
}

.insights-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.42fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 34px;
}

.insights-section-head h2 {
  font-size: 4rem;
}

.insights-section-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.insights-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.insights-article-card {
  display: flex;
  min-height: 100%;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px rgba(7, 25, 34, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.insights-article-card:hover {
  border-color: rgba(13, 122, 120, 0.22);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}

.insights-article-media {
  min-height: 220px;
  background-position: center;
  background-size: cover;
}

.insights-article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
}

.insights-article-body h3 {
  margin: 10px 0 12px;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.1;
}

.insights-article-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.62;
}

.insights-article-body a {
  margin-top: auto;
  padding-top: 18px;
}

.insights-decision-band {
  position: relative;
  overflow: hidden;
  padding: 104px 0 112px;
  background: linear-gradient(180deg, #102f3f 0%, #071922 100%);
  color: white;
}

.insights-decision-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 78px;
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.2) 0%, rgba(255, 250, 242, 0) 100%);
  pointer-events: none;
}

.insights-decision-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.12fr);
  gap: 48px;
  align-items: start;
}

.insights-decision-copy h2 {
  color: white;
  font-size: 3.65rem;
}

.insights-decision-copy p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.75;
}

.insights-decision-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.insights-decision-list article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  min-height: 168px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 22px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
}

.insights-decision-list span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--deep);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.insights-decision-list h3 {
  margin: 0 0 6px;
  color: white;
  font-size: 1.05rem;
}

.insights-decision-list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.55;
}

.insights-planning-section {
  padding: 128px 0 90px;
  background: linear-gradient(180deg, #071922 0%, #eef8f7 18%, #fffaf2 100%);
}

.insights-planning-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.insights-planning-grid article {
  min-height: 264px;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  padding: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(7, 25, 34, 0.06);
}

.insights-planning-grid svg {
  width: 26px;
  height: 26px;
  margin-bottom: 20px;
  color: var(--teal-dark);
  stroke-width: 2.4;
}

.insights-planning-grid h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.36rem;
  line-height: 1.08;
}

.insights-planning-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
}

.insights-cta-section {
  padding: 78px 0 126px;
  background: linear-gradient(180deg, #fffaf2 0%, #eff8f7 34%, #071922 100%);
}

.insights-cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  padding: 36px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.insights-cta-panel h2 {
  max-width: 760px;
  margin: 8px 0 0;
  font-size: 3rem;
}

.insights-cta-panel .btn {
  flex: 0 0 auto;
}

.footer-marquee {
  position: relative;
  overflow: hidden;
  padding: 24px 0 24px;
  margin-top: -1px;
  background:
    linear-gradient(180deg, rgba(7, 25, 34, 0.98) 0%, #071922 68%, #071922 100%);
}

.footer-marquee::before,
.footer-marquee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.footer-marquee::before {
  top: 0;
  height: 42px;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0.98), rgba(7, 25, 34, 0));
}

.footer-marquee::after {
  bottom: 0;
  height: 64px;
  background: linear-gradient(0deg, #071922, rgba(7, 25, 34, 0));
}

.footer-marquee-viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  padding: 18px 0 4px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.footer-marquee-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: footer-marquee-scroll 56s linear infinite;
  will-change: transform;
}

.footer-marquee-group {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  overflow: visible;
}

.footer-marquee img {
  position: relative;
  z-index: 1;
  width: clamp(196px, 18vw, 290px);
  height: clamp(108px, 10vw, 154px);
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  filter: saturate(0.96) contrast(1.02);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.footer-marquee:has(img:hover) .footer-marquee-track {
  animation-play-state: paused;
}

.footer-marquee img:hover {
  z-index: 20;
  border-color: rgba(169, 238, 228, 0.42);
  box-shadow: 0 28px 62px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(169, 238, 228, 0.18);
  filter: saturate(1.1) contrast(1.06);
  animation: footer-image-pick-left 0.48s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.footer-marquee img:nth-child(3n + 2):hover {
  animation-name: footer-image-pick-right;
}

.footer-marquee img:nth-child(3n):hover {
  animation-name: footer-image-pick-straight;
}

.site-footer {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 48px 0 28px;
  background:
    linear-gradient(180deg, #071922 0%, #082331 54%, #051923 100%);
  color: rgba(255, 255, 255, 0.76);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 25, 34, 0.86) 0%, rgba(7, 25, 34, 0.58) 42%, rgba(7, 25, 34, 0.8) 100%),
    linear-gradient(180deg, rgba(7, 25, 34, 0.94) 0%, rgba(7, 25, 34, 0.5) 46%, rgba(7, 25, 34, 0.7) 100%);
}

.footer-skyline {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100vw;
  height: clamp(250px, 30vw, 390px);
  opacity: 0.9;
  pointer-events: none;
  transform: translateX(-50%);
  background: url("https://publicassets.leverageedu.com/homepage/homepageV4/footer/footerBgWeb.webp") center bottom / 100% auto no-repeat;
}

.footer-skyline::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #071922 0%, rgba(7, 25, 34, 0) 26%),
    linear-gradient(0deg, rgba(7, 25, 34, 0.8) 0%, rgba(7, 25, 34, 0.08) 44%, rgba(7, 25, 34, 0) 100%);
}

.footer-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(300px, 1.4fr) repeat(3, minmax(160px, 0.6fr));
  gap: 42px;
}


.brand-footer {
  color: white;
}

.brand-footer small {
  color: rgba(255, 255, 255, 0.58);
}

.footer-brand p {
  max-width: 440px;
  margin: 22px 0 0;
}

.site-footer h2 {
  margin: 0 0 14px;
  color: white;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
}

.site-footer a {
  display: flex;
  width: fit-content;
  margin: 9px 0;
}

.site-footer a:hover {
  color: white;
}

.footer-address {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 260px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86rem;
  line-height: 1.55;
  text-decoration: none;
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 24 24' fill='%23ffd479' stroke='%23071922' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13S4 17 4 10a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3' fill='%23071922'/></svg>") 6 30,
    pointer;
  transition: color 0.22s ease, transform 0.22s ease;
}

.footer-address:hover,
.footer-address:focus-visible {
  color: #ffffff;
}

.footer-address i,
.footer-address svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--mbbs-gold-soft, #ffd479);
  transition: transform 0.22s ease;
}

.footer-address:hover i,
.footer-address:hover svg {
  transform: translateY(-2px) scale(1.08);
}

.socials {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  margin: 0;
}

.socials svg {
  width: 18px;
  height: 18px;
}

/* =============================================================
   .site-socials — shared animated social icon row
   Used in: footer Connect column, contact page aside
   ============================================================= */
.site-socials {
  display: flex;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  perspective: 700px;
}

.site-socials li {
  list-style: none;
  margin: 0;
}

.site-social {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 18px rgba(0, 0, 0, 0.24);
  transition:
    transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 240ms ease,
    border-color 240ms ease,
    box-shadow 360ms ease;
  animation: site-social-breathe 4.8s ease-in-out infinite;
  will-change: transform;
}

.site-socials li:nth-child(2) .site-social { animation-delay: 0.8s; }

@keyframes site-social-breathe {
  0%, 100% { box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 6px 14px rgba(0, 0, 0, 0.22); }
  50%      { box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 0 14px rgba(255, 255, 255, 0.08) inset,
    0 6px 14px rgba(0, 0, 0, 0.22); }
}

.site-social svg {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.28));
  transition:
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 240ms ease;
  will-change: transform;
}

.site-social-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 320ms ease,
    transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

/* Brand-coloured glow fills on hover */
.site-social--instagram .site-social-glow {
  background:
    radial-gradient(circle at 25% 110%, #515bd4 0%, #8134af 18%, #dd2a7b 40%, #feda77 70%, #f58529 100%);
}

.site-social--linkedin .site-social-glow {
  background: linear-gradient(135deg, #0a66c2 0%, #1d8eed 100%);
}

.site-social--whatsapp .site-social-glow {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}

.site-social:hover,
.site-social:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-4px) rotateX(14deg) rotateY(-8deg) scale(1.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34) inset,
    0 16px 30px rgba(0, 0, 0, 0.34);
  animation-play-state: paused;
}

.site-social:hover .site-social-glow,
.site-social:focus-visible .site-social-glow {
  opacity: 1;
  transform: scale(1);
}

.site-social:hover svg,
.site-social:focus-visible svg {
  transform: translateZ(6px) scale(1.18) rotate(-6deg);
}

.site-social:active {
  transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(0.96);
  transition-duration: 140ms;
}

.site-social:active .site-social-glow {
  transform: scale(0.92);
}

/* Variant: footer brand column — bold, with a Follow us hint
   (the previous rendering looked washed out on the dark band). */
.site-socials--brand {
  margin-top: 28px;
  gap: 14px;
}

.site-socials--brand .site-social {
  width: 54px;
  height: 54px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 230, 163, 0.34);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 22px rgba(0, 0, 0, 0.32);
}

.site-socials--brand .site-social svg {
  width: 26px;
  height: 26px;
}

/* Variant: top notice bar — compact icons sized to the slim band */
.site-socials--notice {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  gap: 8px;
}

.site-socials--notice .site-social {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: none;
  border-color: transparent;
  box-shadow: none;
  animation: none;
}

.site-socials--notice .site-social svg {
  width: 20px;
  height: 20px;
  filter: none;
}

.site-socials--notice .site-social-glow {
  display: none;
}

.site-socials--notice .site-social:hover,
.site-socials--notice .site-social:focus-visible {
  border-color: transparent;
  box-shadow: none;
  color: #ffffff;
}

/* Variant: contact aside (dark blue panel), pinned to the right edge */
.contact-aside-socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-aside-socials-label {
  margin-right: auto;
  color: #f0d49a;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-socials--aside {
  margin: 0;
  gap: 12px;
}

.site-socials--aside .site-social {
  width: 48px;
  height: 48px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(240, 212, 154, 0.36);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 8px 18px rgba(0, 0, 0, 0.30);
}

.site-socials--aside .site-social svg {
  width: 22px;
  height: 22px;
}

/* Theme-aware contrast: under data-color-theme, the surfaces are lighter,
   so darken the resting icon colour for legibility while keeping the
   brand glow on hover. */
html[data-color-theme] .site-socials .site-social {
  color: rgba(255, 255, 255, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .site-social,
  .site-social svg,
  .site-social-glow {
    animation: none !important;
    transition: opacity 200ms ease, color 200ms ease;
  }

  .site-social:hover,
  .site-social:focus-visible {
    transform: none;
  }

  .site-social:hover svg,
  .site-social:focus-visible svg {
    transform: none;
  }
}

.footer-locations {
  position: relative;
  z-index: 2;
  margin-top: 46px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-locations h2 {
  margin: 0 0 16px;
  color: rgba(255, 230, 163, 0.92);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-locations ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-locations a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer-locations a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 230, 163, 0.34);
  transform: translateY(-1px);
}

.footer-locations a img {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 22px;
  font-size: 0.86rem;
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.js .reveal.is-visible,
.reveal {
  opacity: 1;
  transform: translateY(0);
}

@keyframes heroDrift {
  0% {
    transform: scale(1.08) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.14) translate3d(-18px, -10px, 0);
  }
}

@keyframes chipFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@keyframes mapPulse {
  0% {
    opacity: 0.72;
    transform: scale(0.72);
  }
  100% {
    opacity: 0;
    transform: scale(1.38);
  }
}

@media (max-width: 1120px) {
  h1 {
    font-size: 4.2rem;
  }

  h2 {
    font-size: 2.8rem;
  }

  .hero-grid,
  .method-layout,
  .about-grid,
  .contact-page-grid,
  .contact-grid,
  .destination-layout {
    gap: 36px;
  }

  .contact-page-grid {
    grid-template-columns: 1fr;
  }

  .contact-page-head {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .contact-page-head-aside p {
    max-width: 760px;
  }

  .insights-page-hero-grid,
  .insights-feature-card,
  .insights-decision-grid,
  .insights-section-head {
    grid-template-columns: 1fr;
  }

  .insights-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .insights-feature-media {
    min-height: 360px;
  }

  .insights-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insights-planning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal-grid,
  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience-card {
    flex-basis: calc(50% - 9px);
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insights-grid {
    grid-template-columns: 1fr 1fr;
  }

  .insight-card-feature {
    grid-row: auto;
  }

  .insight-card-feature .insight-card-media {
    height: 240px;
  }

  .destination-layout {
    grid-template-columns: 1fr;
  }

  .world-map-panel {
    min-height: 420px;
  }
}

@media (max-width: 920px) {
  :root {
    --header-offset: 92px;
  }

  .notice {
    gap: 12px;
    padding-left: 136px;
  }

  .nav-shell {
    grid-template-columns: 1fr auto auto;
    min-height: 68px;
    padding: 0 20px;
    gap: 10px;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .nav-menu {
    position: fixed;
    top: 106px;
    right: 14px;
    left: 14px;
    display: grid;
    justify-content: stretch;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 120;
  }

  .nav-open .nav-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu a,
  .students-hub-trigger {
    justify-content: space-between;
    border-radius: var(--radius);
    min-height: 48px;
  }

  .students-hub-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
  }

  .nav-menu a::after,
  .students-hub-trigger::after {
    display: none;
  }

  .nav-item {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .nav-trigger {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius);
    padding: 0 12px;
  }

  .nav-trigger::after {
    display: none;
  }

  .nav-dropdown {
    position: static;
    transform: none;
    width: auto;
    max-width: 100%;
    margin-top: 6px;
    padding: 0;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid var(--line);
    background: #ffffff;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
  }

  .nav-dropdown::before,
  .nav-dropdown::after {
    display: none;
  }

  .nav-item.is-open .nav-dropdown {
    max-height: min(70vh, calc(100svh - 300px));
    overflow-y: auto;
    transform: none;
  }

  .nav-dropdown-shell {
    grid-template-columns: 1fr;
    border-radius: 8px;
  }

  .nav-dropdown-main {
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(19, 37, 47, 0.1);
  }

  .nav-dropdown-topline {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  .nav-dropdown-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .nav-dropdown--courses .nav-dropdown-main {
    border-bottom: 0;
  }

  .nav-dropdown--courses .course-menu {
    padding: 12px;
  }

  .course-menu-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 58px;
    gap: 6px;
  }

  .nav-menu .course-menu-card {
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    padding: 9px;
  }

  .course-icon {
    width: 36px;
    height: 36px;
  }

  .dest-card {
    justify-content: flex-start;
    min-height: 44px;
    padding: 7px 8px;
  }

  .nav-menu .dest-card {
    justify-content: flex-start;
  }

  .dest-card::after {
    display: none;
  }

  .dest-flag {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }

  .dest-meta strong {
    font-size: 0.85rem;
  }

  .nav-dropdown-feature {
    padding: 16px;
  }

  .feature-icon {
    width: 34px;
    height: 34px;
  }

  .nav-dropdown-feature h3 {
    font-size: 1.18rem;
  }

  .feature-cta {
    margin-top: 6px;
  }

  .nav-cta {
    display: none;
  }

  .hero {
    min-height: 74svh;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 84px 0 76px;
  }

  .contact-page {
    padding: 76px 0 96px;
  }

  .contact-page-head {
    margin-bottom: 36px;
    padding-bottom: 26px;
  }

  .contact-page-title {
    font-size: clamp(2.9rem, 16vw, 4.5rem);
  }

  .contact-page-kicker {
    font-size: clamp(1.65rem, 9vw, 2.55rem);
  }

  .contact-page-head-actions,
  .contact-page-head-actions .btn,
  .contact-head-phone {
    width: 100%;
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: 34px 22px;
  }

  .contact-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .contact-map iframe {
    height: 300px;
  }

  .contact-field span {
    font-size: 0.7rem;
  }

  .insights-page-hero {
    padding: 72px 0 58px;
  }

  .insights-page-copy h1 {
    font-size: 3.25rem;
  }

  .insights-page-copy p {
    font-size: 1rem;
  }

  .insights-feature-copy,
  .insights-article-body {
    padding: 22px;
  }

  .insights-directory-grid {
    grid-template-columns: 1fr;
  }

  .insights-directory-item {
    min-height: 58px;
  }

  .insights-feature-section {
    padding: 54px 0 62px;
  }

  .insights-feature-media {
    min-height: 250px;
  }

  .insights-feature-copy h2,
  .insights-section-head h2,
  .insights-decision-copy h2,
  .insights-cta-panel h2 {
    font-size: 2.45rem;
  }

  .insights-page-section,
  .insights-planning-section,
  .insights-decision-band {
    padding: 64px 0;
  }

  .insights-article-grid,
  .insights-planning-grid {
    grid-template-columns: 1fr;
  }

  .insights-decision-list {
    grid-template-columns: 1fr;
  }

  .insights-decision-list article {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .insights-cta-panel {
    align-items: stretch;
    flex-direction: column;
    padding: 26px;
  }

  .insights-cta-panel .btn {
    width: 100%;
  }

  .pathfinder-shell,
  .method-layout,
  .about-grid,
  .contact-grid,
  .split {
    grid-template-columns: 1fr;
  }

  .finder-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finder-form .btn {
    grid-column: span 2;
  }

  .finder-note {
    grid-column: 1;
  }

  .sticky-lead {
    position: static;
  }

  .testimonial-shell {
    display: block;
  }

  .carousel-btn {
    display: none;
  }

  .testimonial-track {
    min-height: 300px;
  }

  .site-footer {
    min-height: 520px;
    padding-top: 78px;
  }

  .footer-marquee {
    padding: 48px 0 38px;
  }

  .footer-marquee-track,
  .footer-marquee-group {
    gap: 12px;
  }

  .footer-skyline {
    width: 100vw;
    height: 330px;
    opacity: 0.82;
    background-size: auto 100%;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid > .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .insights-page-copy h1 {
    font-size: 2.8rem;
  }

  .insights-feature-copy h2,
  .insights-section-head h2,
  .insights-decision-copy h2,
  .insights-cta-panel h2 {
    font-size: 2.18rem;
  }

  .nav-dropdown-badge {
    display: none;
  }

  .nav-dropdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }

  .nav-menu .dest-card {
    gap: 7px;
    min-height: 42px;
    padding: 6px;
  }

  .dest-flag {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .dest-flag img {
    width: 22px;
    height: 16px;
  }

  .dest-meta strong {
    font-size: 0.78rem;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 15px;
  }

  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .insights-section {
    padding: 92px 0;
  }

  .insights-section .container {
    width: min(calc(100% - 28px), 1240px);
  }

  .insights-head {
    gap: 20px;
    margin-bottom: 34px;
  }

  .insights-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .insight-card-feature .insight-card-media,
  .insight-card-media {
    height: 220px;
  }

  .insight-card-body {
    padding: 22px 20px 24px;
  }

  .insight-card-feature .insight-card-body h3 {
    font-size: 1.42rem;
  }

  .notice {
    height: 38px;
    font-size: 0.74rem;
  }

  .brand strong {
    font-size: 0.9rem;
  }

  .brand small {
    display: none;
  }

  .brand-mark {
    height: 32px;
    width: auto;
  }

  h1 {
    font-size: 3.35rem;
  }

  h2 {
    font-size: 2.32rem;
  }

  .hero-copy p {
    font-size: 1rem;
  }

  .hero-headline {
    font-size: 3.1rem;
    margin: 16px 0 22px;
  }

  .hero-tracks {
    width: 100%;
    flex-direction: column;
    padding: 4px;
    border-radius: 18px;
  }

  .hero-track {
    width: 100%;
    padding: 10px 18px;
    font-size: 0.84rem;
  }

  .hero-actions,
  .btn {
    width: 100%;
  }

  .btn {
    min-height: 50px;
  }

  .signal-grid,
  .audience-grid,
  .service-grid,
  .destination-grid,
  .outcome-band,
  .form-row,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding-top: 70px;
    padding-bottom: 30px;
  }

  .footer-marquee {
    padding: 42px 0 32px;
  }

  .footer-marquee-viewport {
    mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  }

  .footer-marquee img {
    width: 198px;
    height: 116px;
    border-radius: 5px;
  }

  .footer-skyline {
    width: 100vw;
    height: 300px;
    background-size: auto 100%;
  }

  .hero-consult {
    justify-self: stretch;
    max-width: 100%;
    padding: 22px 18px 20px;
  }

  .hero-consult-title {
    font-size: 1.5rem;
  }

  .pathfinder-shell {
    margin-top: -20px;
    padding: 18px;
  }

  .finder-form {
    grid-template-columns: 1fr;
  }

  .finder-form .btn {
    grid-column: auto;
  }

  .signal {
    min-height: auto;
  }

  .audience-card {
    flex-basis: 100%;
    grid-template-columns: 126px 1fr auto;
    grid-template-rows: auto;
    min-height: 168px;
  }

  .audience-card img {
    height: 100%;
  }

  .audience-card div {
    padding: 18px 14px;
  }

  .audience-card-mbbs.is-routes-open {
    min-height: 300px;
  }

  .audience-card .mbbs-routes-panel {
    inset: 10px;
    padding: 0;
  }

  .mbbs-routes-grid span {
    min-height: 34px;
    font-size: 0.74rem;
  }

  .audience-card a {
    align-self: end;
    margin: 0 14px 18px 0;
  }

  .journey-step {
    min-height: auto;
    padding: 24px 22px 24px 28px;
  }

  .solution-ecosystem {
    display: block;
    min-height: 0;
    padding: 16px;
  }

  .orbit {
    display: none;
  }

  .solution-person {
    width: 100%;
    height: 260px;
    margin-bottom: 12px;
    border-width: 6px;
  }

  .solution-chip {
    position: static;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    border-radius: var(--radius);
  }

  .world-map-panel {
    min-height: 0;
  }

  .map-topline {
    display: grid;
    justify-items: start;
    padding: 22px 18px 0;
  }

  .map-topline strong {
    max-width: 100%;
  }

  .map-topline h3 {
    font-size: 1.65rem;
  }

  .world-map {
    min-height: 300px;
    margin: 10px 8px 0;
  }

  .world-map svg {
    min-height: 300px;
  }

  .map-pin {
    width: 38px;
    height: 38px;
  }

  .map-insight {
    margin: 0 18px 18px;
    padding: 18px;
  }

  .destination-card {
    grid-template-columns: 112px 1fr;
  }

  .outcome-band div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .outcome-band div:last-child {
    border-bottom: 0;
  }

  .testimonial {
    padding: 30px 24px;
  }

  .testimonial p {
    font-size: 1.42rem;
  }

  .about-media {
    min-height: 430px;
  }

  .about-media img {
    width: 100%;
    height: 380px;
  }

  .badge {
    position: static;
    margin: 10px 8px 0 0;
  }

  .contact-card,
  .consult-form {
    padding: 26px;
  }

  .contact-card {
    min-height: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 460px) {
  /* Reclaim the social-icon zone on the smallest screens; keep the
     scrolling marquee and the WhatsApp number, which are the priority. */
  .notice .site-socials--notice {
    display: none;
  }

  .notice {
    gap: 10px;
    padding-left: 14px;
    padding-right: 12px;
  }

  .notice-marquee {
    margin: 0 12px;
  }

  h1 {
    font-size: 2.72rem;
  }

  h2 {
    font-size: 2.05rem;
  }

  .hero {
    min-height: 72svh;
  }

  .hero-grid {
    padding-top: 70px;
  }

  .audience-card {
    grid-template-columns: 1fr;
  }

  .audience-card-mbbs.is-routes-open {
    min-height: 440px;
  }

  .audience-card img {
    height: 180px;
  }

  .audience-card a {
    margin-left: 18px;
  }

  .destination-card {
    grid-template-columns: 1fr;
  }

  .destination-card img {
    height: 170px;
  }

  .hc-phone,
  .contact-phone-fields {
    grid-template-columns: 118px 1fr;
  }
}

@keyframes cbx-dot-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes state-required-pulse {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  55%      { transform: translateX(2px); }
  80%      { transform: translateX(-1px); }
}

@keyframes footer-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 7px)); }
}

@keyframes footer-image-pick-left {
  0%   { transform: translate(0, 0) rotate(0deg); }
  55%  { transform: translate(-6px, -18px) rotate(-2deg); }
  100% { transform: translate(-4px, -14px) rotate(-1.4deg); }
}

@keyframes footer-image-pick-right {
  0%   { transform: translate(0, 0) rotate(0deg); }
  55%  { transform: translate(6px, -18px) rotate(2deg); }
  100% { transform: translate(4px, -14px) rotate(1.4deg); }
}

@keyframes footer-image-pick-straight {
  0%   { transform: translateY(0) rotate(0deg); }
  55%  { transform: translateY(-18px) rotate(0.4deg); }
  100% { transform: translateY(-14px) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .footer-marquee-track {
    transform: translateX(0);
  }
}

/* ===== Country pages ===== */
.country-main {
  padding-top: 0;
}

.country-hero {
  position: relative;
  padding: 140px 0 90px;
  background-color: #07252e;
  background-image: var(--country-hero-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  color: white;
}

.country-hero--australia { --country-hero-img: url("assets/heroes/australia.webp"); }
.country-hero--belgium { --country-hero-img: url("assets/heroes/belgium.webp"); }
.country-hero--canada { --country-hero-img: url("assets/heroes/canada.webp"); }
.country-hero--dubai { --country-hero-img: url("assets/heroes/dubai.webp"); }
.country-hero--europe { --country-hero-img: url("assets/heroes/europe.webp"); }
.country-hero--finland { --country-hero-img: url("assets/heroes/finland.webp"); }
.country-hero--france { --country-hero-img: url("assets/heroes/france.webp"); }
.country-hero--georgia { --country-hero-img: url("assets/heroes/georgia.webp"); }
.country-hero--germany { --country-hero-img: url("assets/heroes/germany.webp"); }
.country-hero--ireland { --country-hero-img: url("assets/heroes/ireland.webp"); }
.country-hero--italy { --country-hero-img: url("assets/heroes/italy.webp"); }
.country-hero--kazakhstan { --country-hero-img: url("assets/heroes/kazakhstan.webp"); }
.country-hero--malta { --country-hero-img: url("assets/heroes/malta.webp"); }
.country-hero--netherlands { --country-hero-img: url("assets/heroes/netherlands.webp"); }
.country-hero--new-zealand { --country-hero-img: url("assets/heroes/new-zealand.webp"); }
.country-hero--poland { --country-hero-img: url("assets/heroes/poland.webp"); }
.country-hero--spain { --country-hero-img: url("assets/heroes/spain.webp"); }
.country-hero--uk { --country-hero-img: url("assets/heroes/uk.webp"); }
.country-hero--usa { --country-hero-img: url("assets/heroes/usa.webp"); }

.country-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(7, 25, 34, 0.55) 0%, rgba(7, 25, 34, 0.32) 50%, rgba(13, 122, 120, 0.18) 100%),
    linear-gradient(180deg, rgba(7, 25, 34, 0.22) 0%, rgba(7, 25, 34, 0.08) 50%, rgba(7, 25, 34, 0.5) 100%);
  z-index: 0;
}

.country-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 146, 74, 0.16) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.country-hero-grid {
  display: block;
  position: relative;
  z-index: 1;
}

/* Back link + flag/eyebrow header styled to match the MBBS country hero:
   a rounded "pill" back link and a flag-beside-eyebrow crest row. */
.country-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 230, 163, 0.18);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.country-back:hover {
  color: #ffd0bf;
  border-color: rgba(255, 230, 163, 0.38);
  background: rgba(255, 230, 163, 0.1);
}

.country-back i {
  width: 14px;
  height: 14px;
}

.country-hero .eyebrow {
  color: #a9eee4;
}

.country-hero__crest {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.country-hero__crestmeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.country-hero__route {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.74);
  letter-spacing: 0.04em;
}

.country-flag-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 230, 163, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  flex-shrink: 0;
}

.country-flag-lg img,
.country-flag-lg svg {
  width: 44px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.country-hero h1 {
  margin: 8px 0 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.42);
}

.country-hero h1 .gold-text {
  background-image: var(--animated-text-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.country-hero p.country-lede {
  max-width: 580px;
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.06rem;
  line-height: 1.65;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.country-hero .btn-ghost {
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.country-hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

.country-hero .btn-primary {
  background: var(--gold);
  color: var(--deep);
}

.country-hero .btn-primary:hover {
  background: #f0c569;
}

.country-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.country-snapshot {
  --rail-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rail-duration: 520ms;
  --rail-tab: 40px;
  position: absolute;
  right: 0;
  left: auto;
  top: 50%;
  z-index: 3;
  display: grid;
  grid-template-columns: var(--rail-tab) minmax(0, 1fr);
  align-items: stretch;
  width: min(430px, calc(100vw - 24px));
  min-height: 348px;
  max-height: min(580px, calc(100vh - 96px));
  overflow: hidden auto;
  padding: 0;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(160deg, rgba(13, 122, 120, 0.62) 0%, rgba(11, 43, 67, 0.66) 100%);
  border: 1px solid rgba(255, 138, 92, 0.32);
  border-right: 0;
  box-shadow:
    0 18px 44px rgba(16, 2, 88, 0.34),
    0 6px 18px rgba(255, 94, 50, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transform: translate3d(calc(100% - var(--rail-tab)), -50%, 0);
  transition:
    transform var(--rail-duration) var(--rail-ease),
    opacity 180ms ease,
    box-shadow var(--rail-duration) var(--rail-ease),
    background var(--rail-duration) var(--rail-ease),
    border-color var(--rail-duration) var(--rail-ease);
  will-change: transform;
  cursor: pointer;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 94, 50, 0.5) transparent;
}

body.nav-open .country-snapshot {
  opacity: 0;
  pointer-events: none;
}

.country-snapshot:hover,
.country-snapshot:focus-within,
.country-snapshot.is-open {
  transform: translate3d(0, -50%, 0);
  background: linear-gradient(160deg, rgba(13, 122, 120, 0.7) 0%, rgba(11, 43, 67, 0.74) 100%);
  border-color: rgba(255, 94, 50, 0.5);
  box-shadow:
    0 30px 72px rgba(16, 2, 88, 0.48),
    0 8px 26px rgba(255, 94, 50, 0.2);
  cursor: default;
}

.country-snapshot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 18px 0 0 0;
  background: linear-gradient(90deg, #ff5e32 0%, #ff8a5c 55%, #ffd0bf 100%);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity var(--rail-duration) var(--rail-ease);
}

.country-snapshot:hover::before,
.country-snapshot:focus-within::before,
.country-snapshot.is-open::before {
  opacity: 1;
}

.country-snapshot h2 {
  display: grid;
  place-items: center;
  min-height: 320px;
  margin: 0;
  padding: 18px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff5e32;
  text-shadow: none;
  writing-mode: vertical-rl;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 94, 50, 0.16) 0%, rgba(255, 94, 50, 0.04) 48%, rgba(7, 25, 34, 0.18) 100%);
  border-right: 1px solid rgba(255, 138, 92, 0.2);
  transition:
    letter-spacing var(--rail-duration) var(--rail-ease),
    color var(--rail-duration) var(--rail-ease);
}

.country-snapshot:hover h2,
.country-snapshot:focus-within h2,
.country-snapshot.is-open h2 {
  letter-spacing: 0.18em;
  color: #ff8a5c;
}

.country-snapshot dl {
  margin: 0;
  padding: 22px 22px 22px 6px;
  display: grid;
  gap: 12px;
  opacity: 0;
  transform: translateX(16px);
  filter: blur(2px);
  transition:
    opacity 180ms ease,
    transform 240ms ease,
    filter 180ms ease;
}

.country-snapshot:hover dl,
.country-snapshot:focus-within dl,
.country-snapshot.is-open dl {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  transition:
    opacity 280ms ease 120ms,
    transform 420ms var(--rail-ease) 70ms,
    filter 280ms ease 120ms;
}

.country-snapshot dl > div {
  opacity: 0;
  transform: translateX(10px);
  transition:
    opacity 160ms ease,
    transform 200ms ease;
}

.country-snapshot:hover dl > div,
.country-snapshot:focus-within dl > div,
.country-snapshot.is-open dl > div {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 300ms ease,
    transform 420ms var(--rail-ease);
}

.country-snapshot:hover dl > div:nth-child(1),
.country-snapshot:focus-within dl > div:nth-child(1),
.country-snapshot.is-open dl > div:nth-child(1) { transition-delay: 140ms; }
.country-snapshot:hover dl > div:nth-child(2),
.country-snapshot:focus-within dl > div:nth-child(2),
.country-snapshot.is-open dl > div:nth-child(2) { transition-delay: 175ms; }
.country-snapshot:hover dl > div:nth-child(3),
.country-snapshot:focus-within dl > div:nth-child(3),
.country-snapshot.is-open dl > div:nth-child(3) { transition-delay: 210ms; }
.country-snapshot:hover dl > div:nth-child(4),
.country-snapshot:focus-within dl > div:nth-child(4),
.country-snapshot.is-open dl > div:nth-child(4) { transition-delay: 245ms; }
.country-snapshot:hover dl > div:nth-child(5),
.country-snapshot:focus-within dl > div:nth-child(5),
.country-snapshot.is-open dl > div:nth-child(5) { transition-delay: 280ms; }
.country-snapshot:hover dl > div:nth-child(6),
.country-snapshot:focus-within dl > div:nth-child(6),
.country-snapshot.is-open dl > div:nth-child(6) { transition-delay: 315ms; }
.country-snapshot:hover dl > div:nth-child(7),
.country-snapshot:focus-within dl > div:nth-child(7),
.country-snapshot.is-open dl > div:nth-child(7) { transition-delay: 350ms; }
.country-snapshot:hover dl > div:nth-child(8),
.country-snapshot:focus-within dl > div:nth-child(8),
.country-snapshot.is-open dl > div:nth-child(8) { transition-delay: 385ms; }

@media (prefers-reduced-motion: reduce) {
  .country-snapshot,
  .country-snapshot::before,
  .country-snapshot h2,
  .country-snapshot dl,
  .country-snapshot dl > div {
    transition: none !important;
  }
}

/* Dynamic contrast: when rail sits over a light section, swap to an opaque dark palette */
.country-snapshot.on-light {
  background: linear-gradient(160deg, rgba(7, 25, 34, 0.94) 0%, rgba(13, 122, 120, 0.92) 100%);
  border-color: rgba(7, 25, 34, 0.18);
  box-shadow: 0 14px 36px rgba(7, 25, 34, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.country-snapshot.on-light h2 {
  color: #ff5e32;
  text-shadow: none;
}

.country-snapshot.on-light:hover,
.country-snapshot.on-light:focus-within,
.country-snapshot.on-light.is-open {
  background: linear-gradient(135deg, rgba(7, 25, 34, 0.96) 0%, rgba(13, 122, 120, 0.92) 100%);
  border-color: rgba(255, 94, 50, 0.5);
  box-shadow: 0 28px 70px rgba(16, 2, 88, 0.55);
}

.country-snapshot.on-light dl dt {
  color: #ffd0bf;
}

.country-snapshot.on-light dl dd {
  color: #ffffff;
}

.country-snapshot dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.country-snapshot dl > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.country-snapshot dt {
  color: #ffd0bf;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(7, 25, 34, 0.55);
}

.country-snapshot dd {
  margin: 0;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 800;
  text-align: right;
  text-shadow: 0 1px 3px rgba(7, 25, 34, 0.6);
}

/* Each "/"-separated figure stays whole; values only wrap at the slash. */
.country-snapshot .snapshot-figure {
  white-space: nowrap;
}

.country-section {
  padding: 80px 0;
}

.country-section.alt {
  background:
    linear-gradient(180deg, rgba(241, 246, 247, 0.6) 0%, rgba(251, 248, 240, 0.4) 100%);
}

.country-section .section-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.country-section .section-head .eyebrow {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--teal-dark);
}

.country-section .section-head h2 {
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  color: var(--navy);
}

.country-section .section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.reason-card {
  position: relative;
  padding: 26px 24px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 14px 34px rgba(7, 25, 34, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.reason-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(7, 25, 34, 0.1);
}

.reason-card .reason-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 122, 120, 0.16) 0%, rgba(199, 146, 74, 0.12) 100%);
  color: var(--teal-dark);
}

.reason-card .reason-icon svg {
  width: 22px;
  height: 22px;
}

.reason-card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
}

.reason-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.university-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.university-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.university-card:hover {
  border-color: rgba(13, 122, 120, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(7, 25, 34, 0.08);
}

.university-card .uni-rank {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: white;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.university-card .uni-info h3 {
  margin: 2px 0 4px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--navy);
}

.university-card .uni-info p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.program-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.14);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  transition: background 200ms ease, transform 200ms ease;
}

.program-chip:hover {
  background: linear-gradient(135deg, rgba(13, 122, 120, 0.06) 0%, rgba(199, 146, 74, 0.06) 100%);
  transform: translateY(-2px);
}

.program-chip i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(13, 122, 120, 0.12);
  color: var(--teal-dark);
}

.program-chip svg {
  width: 16px;
  height: 16px;
}

.cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.cost-card {
  padding: 24px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
}

.cost-card .cost-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cost-card .cost-value {
  display: block;
  margin-bottom: 6px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

.cost-card .cost-note {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.split-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.info-card {
  padding: 30px;
  border-radius: 16px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.14);
  box-shadow: 0 14px 34px rgba(7, 25, 34, 0.05);
}

.info-card h3 {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  color: var(--navy);
}

.info-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.info-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.55;
}

.info-card ul li i {
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(13, 122, 120, 0.14);
  color: var(--teal-dark);
}

.info-card ul li svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.timeline-list {
  display: grid;
  gap: 14px;
  counter-reset: timeline;
}

.timeline-item {
  position: relative;
  padding: 18px 22px 18px 60px;
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  counter-increment: timeline;
}

.timeline-item::before {
  content: counter(timeline, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  font-family: "Cormorant Garamond", serif;
  font-size: 0.9rem;
  font-weight: 700;
}

.timeline-item h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}

.timeline-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.country-cta {
  position: relative;
  padding: 84px 0 112px;
  background:
    linear-gradient(180deg, rgba(7, 25, 34, 0) 0%, rgba(7, 25, 34, 0.52) 68%, #071922 100%),
    radial-gradient(circle at 80% 24%, rgba(199, 146, 74, 0.18) 0%, transparent 58%),
    linear-gradient(135deg, var(--navy) 0%, #082331 58%, #071922 100%);
  color: white;
  overflow: hidden;
}

.country-cta::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0) 0%, #071922 76%, #071922 100%);
}

.country-cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.country-cta h2 {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.15;
}

.country-cta p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.6;
}

.country-cta .btn-primary {
  background: var(--gold);
  color: var(--deep);
}

.country-cta .btn-primary:hover {
  background: #e8c46a;
}

.country-cta .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
}

.country-cta-card {
  padding: 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
}

.country-cta-card h3 {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  color: white;
}

.country-cta-card p {
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
}

.country-cta-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.country-cta-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
}

.country-cta-card li i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--deep);
}

.country-cta-card li svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

@media (max-width: 960px) {
  .country-hero {
    padding: 96px 0 64px;
  }

  .country-hero-grid,
  .split-info,
  .country-cta-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .country-section {
    padding: 60px 0;
  }

  .country-snapshot {
    --rail-tab: 36px;
    width: min(380px, calc(100vw - 20px));
    min-height: 300px;
    max-height: min(520px, calc(100vh - 88px));
  }

  .country-snapshot h2 {
    min-height: 272px;
  }
}

@media (max-width: 520px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

/* ====== Redesigned country page additions (LeverageEdu-style) ====== */

/* Stat strip beneath hero */
.country-stat-strip {
  padding: 36px 0;
  background: linear-gradient(180deg, #fffdf8 0%, #f7fbfb 100%);
  border-top: 1px solid rgba(13, 122, 120, 0.08);
  border-bottom: 1px solid rgba(13, 122, 120, 0.08);
}

.stat-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.stat-strip-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 12px 28px rgba(7, 25, 34, 0.05);
}

.stat-strip-item .stat-icon {
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 122, 120, 0.16) 0%, rgba(199, 146, 74, 0.12) 100%);
  color: var(--teal-dark);
}

.stat-strip-item .stat-icon svg {
  width: 22px;
  height: 22px;
}

.stat-strip-item .stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-strip-item .stat-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

.stat-strip-item .stat-label {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Education system / academic structure */
.edu-system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.edu-level-card {
  position: relative;
  padding: 24px 22px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 12px 26px rgba(7, 25, 34, 0.05);
  overflow: hidden;
}

.edu-level-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
}

.edu-level-card .edu-level-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.12);
  color: var(--teal-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.edu-level-card h3 {
  margin: 4px 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}

.edu-level-card .edu-level-meta {
  margin: 0 0 10px;
  color: var(--teal-dark);
  font-size: 0.84rem;
  font-weight: 800;
}

.edu-level-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Intake calendar (table style) */
.intake-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 14px 32px rgba(7, 25, 34, 0.05);
}

.intake-table thead th {
  text-align: left;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: white;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intake-table tbody td {
  padding: 14px 18px;
  border-top: 1px solid rgba(13, 122, 120, 0.1);
  color: var(--ink);
  font-size: 0.92rem;
  vertical-align: top;
}

.intake-table tbody tr:nth-child(even) td {
  background: rgba(241, 246, 247, 0.4);
}

.intake-table .pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(199, 146, 74, 0.18);
  color: #8a5b1d;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intake-table .pill.secondary {
  background: rgba(13, 122, 120, 0.16);
  color: var(--teal-dark);
}

/* Work / PR pathway cards */
.work-pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.work-pr-card {
  position: relative;
  padding: 24px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 12px 28px rgba(7, 25, 34, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.work-pr-card .work-pr-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 122, 120, 0.16) 0%, rgba(199, 146, 74, 0.14) 100%);
  color: var(--teal-dark);
}

.work-pr-card .work-pr-icon svg {
  width: 20px;
  height: 20px;
}

.work-pr-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}

.work-pr-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.work-pr-card .work-pr-tag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.1);
  color: var(--teal-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Student life cards */
.life-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.life-card {
  padding: 24px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 12px 26px rgba(7, 25, 34, 0.05);
}

.life-card .life-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(199, 146, 74, 0.2) 0%, rgba(13, 122, 120, 0.14) 100%);
  color: var(--gold);
}

.life-card .life-icon svg {
  width: 20px;
  height: 20px;
}

.life-card h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--navy);
}

.life-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Pros / cons grid */
.pros-cons-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.pc-card {
  padding: 26px;
  border-radius: 16px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 14px 32px rgba(7, 25, 34, 0.05);
}

.pc-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  color: var(--navy);
}

.pc-card.pros h3 i {
  color: #2b9a6d;
}

.pc-card.cons h3 i {
  color: #c1652c;
}

.pc-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.pc-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.pc-card ul li i {
  flex: 0 0 18px;
  margin-top: 4px;
}

.pc-card.pros ul li i {
  color: #2b9a6d;
}

.pc-card.cons ul li i {
  color: #c1652c;
}

.pc-card svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

/* FAQ accordion */
.faq-list {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 10px 22px rgba(7, 25, 34, 0.04);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--navy);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--teal-dark);
  transition: transform 200ms ease;
}

.faq-item[open] summary::after {
  content: "\2013";
}

.faq-item .faq-answer {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Country page section nav (anchor pills) */
.country-nav {
  position: sticky;
  top: 70px;
  z-index: 5;
  padding: 12px 0;
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 122, 120, 0.1);
}

.country-nav-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.country-nav-track::-webkit-scrollbar { display: none; }

.country-nav-track a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.16);
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.country-nav-track a:hover {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: white;
  border-color: transparent;
}

@media (max-width: 960px) {
  .pros-cons-grid {
    grid-template-columns: 1fr;
  }
  .intake-table {
    font-size: 0.86rem;
  }
  .intake-table thead th,
  .intake-table tbody td {
    padding: 10px 12px;
  }
}

/* ===== LeverageEdu-style image cards & richer sections ===== */

/* University cards with images (grid version) */
.uni-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.uni-img-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 14px 30px rgba(7, 25, 34, 0.06);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.uni-img-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(7, 25, 34, 0.12);
}

.uni-img-card .uni-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0d3a48, #0a2832);
  overflow: hidden;
}

.uni-img-card .uni-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.uni-img-card:hover .uni-photo img {
  transform: scale(1.06);
}

.uni-img-card .uni-rank-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7, 25, 34, 0.78);
  color: #f3c97a;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}

.uni-img-card .uni-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.uni-img-card .uni-body h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

.uni-img-card .uni-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.uni-img-card .uni-loc svg {
  width: 14px;
  height: 14px;
}

.uni-img-card .uni-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.uni-img-card .uni-meta span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.1);
  color: var(--teal-dark);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Top courses cards */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.course-card {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 12px 28px rgba(7, 25, 34, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(7, 25, 34, 0.1);
}

.course-card .course-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(199, 146, 74, 0.16);
  color: #8a5b1d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.course-card h3 {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
}

.course-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.course-card .course-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(13, 122, 120, 0.18);
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 700;
}

.course-card .course-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.course-card .course-foot svg {
  width: 14px;
  height: 14px;
}

/* Popular cities grid (with images) */
.city-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #0d3a48, #0a2832);
  box-shadow: 0 14px 32px rgba(7, 25, 34, 0.1);
  isolation: isolate;
}

.city-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}

.city-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0) 35%, rgba(7, 25, 34, 0.86) 100%);
  z-index: 1;
}

.city-card:hover img {
  transform: scale(1.08);
}

.city-card .city-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 18px 18px;
  color: white;
  z-index: 2;
}

.city-card .city-info h3 {
  margin: 0 0 4px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.city-card .city-info p {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

/* Visa process: stat widgets + numbered steps */
.visa-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

.visa-stat {
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0d3a48 0%, #0a2832 100%);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(7, 25, 34, 0.18);
}

.visa-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
}

.visa-stat .visa-stat-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: #f3c97a;
}

.visa-stat .visa-stat-label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 700;
}

.visa-stat .visa-stat-note {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

.visa-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  counter-reset: visa;
}

.visa-step {
  position: relative;
  padding: 24px 22px 22px 70px;
  border-radius: 14px;
  background: white;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 12px 26px rgba(7, 25, 34, 0.06);
  counter-increment: visa;
}

.visa-step::before {
  content: counter(visa, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 22px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: white;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.visa-step h4 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--navy);
}

.visa-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Country-nav: keep visible on dark image hero by sitting below the hero */
.country-nav { top: 64px; }

@media (max-width: 720px) {
  .country-hero { padding: 120px 0 70px; }
  .country-hero h1 { font-size: 2.2rem; }
}

/* Country page — section variety
   Variants: .dark, .paper, .full-bleed, .section-head--left, .country-band, .cities-mosaic */

.country-section.paper {
  background: linear-gradient(180deg, #fbf6ea 0%, #fdf9ef 100%);
}

.country-section.dark {
  position: relative;
  background: linear-gradient(135deg, #07252e 0%, #0a3a44 55%, #0d5253 100%);
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

.country-section.dark::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 146, 74, 0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.country-section.dark::after {
  content: "";
  position: absolute;
  inset: -20% auto auto -10%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 122, 120, 0.32) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.country-section.dark .section-head h2,
.country-section.dark h3,
.country-section.dark h4 {
  color: #ffffff;
}

.country-section.dark .section-head .eyebrow { color: #f3c97a; }
.country-section.dark .section-head p { color: rgba(255, 255, 255, 0.84); }

.country-section.dark .info-card,
.country-section.dark .reason-card,
.country-section.dark .cost-card,
.country-section.dark .life-card,
.country-section.dark .work-pr-card,
.country-section.dark .timeline-item,
.country-section.dark .edu-level-card,
.country-section.dark .course-card,
.country-section.dark .visa-step {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.country-section.dark .info-card h3,
.country-section.dark .info-card li,
.country-section.dark .info-card li strong,
.country-section.dark .reason-card h3,
.country-section.dark .reason-card p,
.country-section.dark .life-card h3,
.country-section.dark .life-card p,
.country-section.dark .work-pr-card h3,
.country-section.dark .work-pr-card p,
.country-section.dark .cost-card .cost-label,
.country-section.dark .cost-card .cost-value,
.country-section.dark .cost-card .cost-note,
.country-section.dark .timeline-item h4,
.country-section.dark .timeline-item p,
.country-section.dark .visa-step h4,
.country-section.dark .visa-step p {
  color: rgba(255, 255, 255, 0.92);
}

.country-section.dark .info-card li i,
.country-section.dark .info-card li svg,
.country-section.dark .reason-card .reason-icon,
.country-section.dark .work-pr-card .work-pr-icon,
.country-section.dark .life-card .life-icon {
  color: #f3c97a;
  background: rgba(243, 201, 122, 0.12);
}

.country-section.dark .pill {
  background: rgba(255, 255, 255, 0.14);
  color: #ffe6a3;
}

.country-section.full-bleed {
  padding: 0;
}

.country-section.full-bleed > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.section-head--left {
  text-align: left;
  margin: 0 0 36px;
  max-width: 760px;
}

/* Full-bleed image banner */
.country-band {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 110px 24px;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

.country-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.country-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(7, 25, 34, 0.72) 0%, rgba(13, 82, 83, 0.58) 100%),
    linear-gradient(180deg, rgba(7, 25, 34, 0.18) 0%, rgba(7, 25, 34, 0.42) 100%);
}

.country-band .band-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.country-band .eyebrow { color: #ffe6a3; }

.country-band h2 {
  margin: 8px 0 14px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  color: #ffffff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
}

.country-band p {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1.04rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
}

.country-band .band-stats {
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 820px;
}

.country-band .band-stat strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2rem;
  line-height: 1;
  color: #ffe6a3;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.country-band .band-stat span {
  display: inline-block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Asymmetric city mosaic */
.cities-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
}

.cities-mosaic .city-card { aspect-ratio: auto; }
.cities-mosaic .city-card.span-2 { grid-column: span 2; }
.cities-mosaic .city-card.row-2 { grid-row: span 2; }

@media (max-width: 900px) {
  .cities-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .cities-mosaic .city-card.row-2 { grid-row: span 1; }
  .cities-mosaic .city-card.span-2 { grid-column: span 2; }
}

@media (max-width: 900px) {
  .country-band { padding: 70px 20px; }
}

.contact-fab {
  --contact-fab-size: 56px;
  --contact-fab-expanded: 56px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: var(--contact-fab-size);
  width: var(--contact-fab-size);
  padding: 0;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 36px rgba(7, 25, 34, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  will-change: width, transform;
  transition: width 520ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.contact-fab:hover,
.contact-fab:focus-visible {
  background: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(7, 25, 34, 0.34);
  outline: none;
}

.contact-fab:focus-visible {
  box-shadow: 0 22px 44px rgba(7, 25, 34, 0.34), 0 0 0 3px rgba(13, 122, 120, 0.35);
}

.contact-fab__icon {
  flex: 0 0 var(--contact-fab-size);
  width: var(--contact-fab-size);
  height: var(--contact-fab-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-fab__icon i,
.contact-fab__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.contact-fab__label {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-right: 22px;
  padding-left: 4px;
  opacity: 0;
  transition: opacity 200ms ease;
}

.contact-fab.is-expanded,
.contact-fab:hover,
.contact-fab:focus-visible {
  width: var(--contact-fab-expanded);
}

.contact-fab.is-expanded .contact-fab__label,
.contact-fab:hover .contact-fab__label,
.contact-fab:focus-visible .contact-fab__label {
  opacity: 1;
  transition: opacity 260ms ease 220ms;
}

@media (max-width: 600px) {
  .contact-fab {
    --contact-fab-size: 52px;
    right: 16px;
    bottom: 16px;
    font-size: 0.9rem;
  }
  .contact-fab__icon i,
  .contact-fab__icon svg {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-fab,
  .contact-fab__label {
    transition: none;
  }
}

/* =========================================================
   About page — shares Insights palette; adds polished card
   layouts for stats, team portraits, and principles grid.
   ========================================================= */

.about-stats-band {
  padding: 64px 0;
  background: #f3faf9;
  border-bottom: 1px solid rgba(19, 37, 47, 0.08);
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-stat {
  position: relative;
  padding: 28px 28px 26px;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.about-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 36px;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 3px 3px;
}

.about-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.about-stat-num {
  display: block;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.about-stat-num small {
  margin-left: 4px;
  color: var(--gold);
  font-size: 1.5rem;
}

.about-stat-label {
  display: block;
  margin-top: 12px;
  color: var(--teal-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-team-section {
  padding: 110px 0;
  background: #fffdf8;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.about-team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.about-team-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-position: center top;
  background-size: cover;
  background-color: var(--mist);
}

.about-team-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px 28px;
}

.about-team-body h3 {
  margin: 0;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.about-team-role {
  color: var(--teal-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-team-body p {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

.about-team-desk {
  display: inline-flex;
  margin-top: auto;
  padding: 6px 12px;
  border: 1px solid rgba(199, 146, 74, 0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: max-content;
}

.about-principles-section {
  padding: 110px 0;
  background: #f3faf9;
  border-top: 1px solid rgba(19, 37, 47, 0.06);
}

.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.about-principle-card {
  position: relative;
  padding: 40px 32px 36px;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-principle-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  width: 56px;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 3px 3px;
}

.about-principle-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.about-principle-num {
  display: block;
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.about-principle-card h3 {
  margin: 16px 0 12px;
  color: var(--navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.about-principle-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .about-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .about-principles-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 640px) {
  .about-stats-band,
  .about-team-section,
  .about-principles-section {
    padding: 64px 0;
  }
  .about-stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .about-stat-num {
    font-size: 2.8rem;
  }
  .about-team-grid {
    grid-template-columns: 1fr;
  }
  .about-principle-card {
    padding: 32px 24px 28px;
  }
}

.origin-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0 110px;
  background: linear-gradient(180deg, #fffaf2 0%, #f6efe1 100%);
}

.origin-section::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -180px;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(13, 122, 120, 0.12), transparent 70%);
  pointer-events: none;
}

.origin-section::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(199, 146, 74, 0.14), transparent 70%);
  pointer-events: none;
}

.origin-shell {
  position: relative;
  z-index: 1;
}

.origin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  margin-bottom: 56px;
  border-bottom: 1px solid rgba(19, 37, 47, 0.14);
}

.origin-eyebrow {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.origin-meta {
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.origin-lede {
  position: relative;
  max-width: 920px;
  margin: 0 auto 64px;
  padding: 0 16px;
  text-align: center;
}

.origin-quote-mark {
  display: block;
  margin: 0 0 -22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 7.5rem;
  font-weight: 700;
  line-height: 0.6;
  color: var(--gold);
}

.origin-lede h2 {
  margin: 0 0 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.85rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy);
}

.origin-signature {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.origin-body {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 48px;
  max-width: 980px;
  margin: 0 auto 72px;
  align-items: start;
}

.origin-body::before {
  content: "";
  grid-column: 2;
  align-self: stretch;
  background: rgba(19, 37, 47, 0.14);
}

.origin-body-col p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--ink);
}

.origin-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 52px;
}

.origin-pillar {
  position: relative;
  padding: 34px 28px 30px;
  border: 1px solid rgba(19, 37, 47, 0.1);
  border-radius: var(--radius);
  background: var(--paper);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.origin-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 146, 74, 0.45);
  box-shadow: var(--shadow-soft);
}

.origin-pillar-num {
  display: block;
  margin-bottom: 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}

.origin-pillar h3 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

.origin-pillar p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--muted);
}

.origin-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.origin-cta:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
}

.origin-cta i,
.origin-cta svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.6;
}

@media (max-width: 960px) {
  .origin-pillars {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .origin-section {
    padding: 74px 0 86px;
  }
  .origin-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .origin-lede {
    margin-bottom: 48px;
  }
  .origin-quote-mark {
    font-size: 5.6rem;
    margin-bottom: -14px;
  }
  .origin-lede h2 {
    font-size: 1.95rem;
  }
  .origin-body {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 52px;
  }
  .origin-body::before {
    display: none;
  }
  .origin-pillar {
    padding: 28px 22px 26px;
  }
}

/* ============================================================
   MBBS Student page — Forest-green premium theme
   ============================================================ */
.mbbs-page {
  --mbbs-forest:     #143a26;
  --mbbs-deep:       #1f4d33;
  --mbbs-green:      #2d6a4f;
  --mbbs-leaf:       #40916c;
  --mbbs-mint:       #52b788;
  --mbbs-sage:       #95d5b2;
  --mbbs-paper:      #f3f6ee;
  --mbbs-paper-warm: #eaf0e0;
  background: var(--mbbs-paper);
  color: var(--mbbs-forest);
}

.mbbs-hero {
  position: relative;
  padding: 132px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(82, 183, 136, 0.16), transparent 55%),
    radial-gradient(circle at 6% 92%, rgba(64, 145, 108, 0.10), transparent 55%),
    linear-gradient(180deg, #f1f5ea 0%, #e3ecd6 100%);
}

.mbbs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
  gap: 56px;
  align-items: center;
}

.mbbs-hero-copy {
  position: relative;
  max-width: 520px;
}

/* dotted world map column */
.mbbs-hero-map {
  position: relative;
  margin: 0;
  aspect-ratio: 2000 / 780;
  width: 100%;
}

.mbbs-hero-map-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mbbs-pin-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.mbbs-pin-layer .mbbs-pin {
  pointer-events: auto;
}

.mbbs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(45, 106, 79, 0.42);
  border-radius: 999px;
  background: rgba(82, 183, 136, 0.14);
  color: var(--mbbs-deep);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mbbs-eyebrow i,
.mbbs-eyebrow svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.mbbs-hero-copy h1 {
  margin: 22px 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--mbbs-forest);
}

.mbbs-hero-copy h1 .gold-text {
  font-style: italic;
  color: var(--mbbs-green);
}

.mbbs-hero-lede {
  margin: 0 0 28px;
  color: rgba(20, 58, 38, 0.72);
  font-size: 1.05rem;
  line-height: 1.72;
}

.mbbs-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(45, 106, 79, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(20, 58, 38, 0.08);
}

.mbbs-hero-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mbbs-hero-stats strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--mbbs-forest);
}

.mbbs-hero-stats strong small {
  font-size: 0.85rem;
  color: var(--mbbs-green);
  margin-left: 2px;
  font-weight: 800;
}

.mbbs-hero-stats span {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 58, 38, 0.65);
}

.mbbs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.mbbs-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mbbs-deep);
}

.mbbs-hero-badge i,
.mbbs-hero-badge svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.mbbs-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  font-family: inherit;
}

.mbbs-pin-dot {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b7e4c7 0%, #52b788 50%, #1b4332 100%);
  box-shadow:
    0 0 0 2px rgba(243, 246, 238, 0.95),
    0 0 0 3px rgba(20, 58, 38, 0.85),
    0 4px 10px rgba(20, 58, 38, 0.45);
  z-index: 2;
  transition: transform 220ms ease;
}

.mbbs-pin-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(82, 183, 136, 0.55);
  animation: mbbsPinPulse 2.6s ease-out infinite;
  animation-delay: var(--pin-delay, 0s);
  z-index: 1;
}

.mbbs-pin-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(149, 213, 178, 0.65);
  animation: mbbsPinPulse 2.6s ease-out infinite;
  animation-delay: calc(var(--pin-delay, 0s) + 0.8s);
}

@keyframes mbbsPinPulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.mbbs-pin-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  white-space: nowrap;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(19, 37, 47, 0.14);
  box-shadow: 0 16px 34px rgba(7, 25, 34, 0.22);
  transform: translate(-50%, 6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, transform 220ms ease, visibility 0s linear 200ms;
}

.mbbs-pin-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid rgba(19, 37, 47, 0.14);
  border-bottom: 1px solid rgba(19, 37, 47, 0.14);
  transform: translateX(-50%) rotate(45deg);
}

/* directional variants for the hover-cards */
.mbbs-pin[data-card-dir="down"] .mbbs-pin-card {
  bottom: auto;
  top: calc(100% + 14px);
  transform: translate(-50%, -6px);
}
.mbbs-pin[data-card-dir="down"] .mbbs-pin-card::after {
  bottom: auto;
  top: -6px;
  border: 0;
  border-left: 1px solid rgba(19, 37, 47, 0.14);
  border-top: 1px solid rgba(19, 37, 47, 0.14);
}

.mbbs-pin[data-card-dir="left"] .mbbs-pin-card {
  bottom: auto;
  left: auto;
  right: calc(100% + 14px);
  top: 50%;
  transform: translate(6px, -50%);
}
.mbbs-pin[data-card-dir="left"] .mbbs-pin-card::after {
  bottom: auto;
  left: auto;
  right: -6px;
  top: 50%;
  border: 0;
  border-right: 1px solid rgba(19, 37, 47, 0.14);
  border-top: 1px solid rgba(19, 37, 47, 0.14);
  transform: translateY(-50%) rotate(45deg);
}

.mbbs-pin[data-card-dir="right"] .mbbs-pin-card {
  bottom: auto;
  left: calc(100% + 14px);
  top: 50%;
  transform: translate(-6px, -50%);
}
.mbbs-pin[data-card-dir="right"] .mbbs-pin-card::after {
  bottom: auto;
  left: -6px;
  top: 50%;
  border: 0;
  border-left: 1px solid rgba(19, 37, 47, 0.14);
  border-bottom: 1px solid rgba(19, 37, 47, 0.14);
  transform: translateY(-50%) rotate(45deg);
}

.mbbs-pin[data-card-dir="down"]:hover .mbbs-pin-card,
.mbbs-pin[data-card-dir="down"]:focus-visible .mbbs-pin-card {
  transform: translate(-50%, 0);
}
.mbbs-pin[data-card-dir="left"]:hover .mbbs-pin-card,
.mbbs-pin[data-card-dir="left"]:focus-visible .mbbs-pin-card {
  transform: translate(0, -50%);
}
.mbbs-pin[data-card-dir="right"]:hover .mbbs-pin-card,
.mbbs-pin[data-card-dir="right"]:focus-visible .mbbs-pin-card {
  transform: translate(0, -50%);
}

.mbbs-pin-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fffaf2;
  border: 1px solid rgba(19, 37, 47, 0.12);
  overflow: hidden;
}

.mbbs-pin-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mbbs-pin-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mbbs-pin-meta strong {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--mbbs-forest);
}

.mbbs-pin-meta small {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mbbs-green);
}

.mbbs-pin:hover .mbbs-pin-dot,
.mbbs-pin:focus-visible .mbbs-pin-dot {
  transform: scale(1.2);
}

.mbbs-pin:hover .mbbs-pin-card,
.mbbs-pin:focus-visible .mbbs-pin-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 200ms ease, transform 220ms ease, visibility 0s linear 0s;
}

/* ---------- Strip ---------- */
.mbbs-strip {
  padding: 70px 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(82, 183, 136, 0.16), transparent 55%),
    linear-gradient(180deg, #143a26 0%, #0f2e1d 100%);
  color: #fff;
}

.mbbs-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}

.mbbs-strip-grid > div {
  position: relative;
  padding-top: 14px;
  border-top: 1px solid rgba(149, 213, 178, 0.3);
}

.mbbs-strip-num {
  display: inline-block;
  margin-bottom: 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--mbbs-mint);
  line-height: 1;
}

.mbbs-strip-grid h3 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.mbbs-strip-grid p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Country grid ---------- */
.mbbs-corridor {
  padding: 92px 0 100px;
  background: linear-gradient(180deg, #f3f6ee 0%, #e7eedb 100%);
}

.mbbs-country-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.mbbs-country-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  background: var(--paper);
  border: 1px solid rgba(45, 106, 79, 0.18);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(20, 58, 38, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mbbs-country-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  background: linear-gradient(90deg, var(--mbbs-mint), var(--mbbs-deep));
  border-radius: 0 0 4px 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mbbs-country-card:hover {
  transform: translateY(-4px);
  border-color: rgba(82, 183, 136, 0.55);
  box-shadow: 0 18px 38px rgba(20, 58, 38, 0.14);
}

.mbbs-country-card:hover::before {
  opacity: 1;
}

.mbbs-country-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.mbbs-country-flag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f3f6ee;
  border: 1px solid rgba(45, 106, 79, 0.2);
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #fff;
}

.mbbs-country-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mbbs-country-index {
  display: inline-block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mbbs-green);
}

.mbbs-country-head h3 {
  margin: 2px 0 4px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mbbs-forest);
}

.mbbs-country-head p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mbbs-green);
}

.mbbs-country-note {
  margin: 0 0 18px;
  color: rgba(20, 58, 38, 0.7);
  font-size: 0.94rem;
  line-height: 1.65;
}

.mbbs-country-grid-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0 0 22px;
  padding: 16px 0 0;
  border-top: 1px dashed rgba(45, 106, 79, 0.22);
}

.mbbs-country-grid-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mbbs-country-grid-meta dt {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 58, 38, 0.6);
}

.mbbs-country-grid-meta dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--mbbs-forest);
}

.mbbs-country-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mbbs-deep);
  font-weight: 900;
  font-size: 0.92rem;
  text-decoration: none;
}

.mbbs-country-cta i,
.mbbs-country-cta svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.8;
}

/* ---------- Journey ---------- */
.mbbs-journey {
  padding: 92px 0 100px;
  background: var(--mbbs-paper);
}

.mbbs-journey-rail {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  counter-reset: mbbsStep;
}

.mbbs-journey-rail li {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--paper);
  border: 1px solid rgba(45, 106, 79, 0.18);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(20, 58, 38, 0.06);
}

.mbbs-journey-rail li::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  background: var(--mbbs-mint);
}

.mbbs-step-num {
  display: block;
  margin-bottom: 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--mbbs-green);
}

.mbbs-journey-rail h3 {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mbbs-forest);
  line-height: 1.2;
}

.mbbs-journey-rail p {
  margin: 0;
  color: rgba(20, 58, 38, 0.7);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* ---------- Exam band ---------- */
.mbbs-exam-band {
  padding: 92px 0 100px;
  background: linear-gradient(180deg, #e7eedb 0%, #f3f6ee 100%);
}

.mbbs-exam-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}

.mbbs-exam-grid h2 {
  margin: 10px 0 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.12;
  color: var(--mbbs-forest);
}

.mbbs-exam-grid p {
  color: rgba(20, 58, 38, 0.72);
  line-height: 1.72;
}

.mbbs-exam-checks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.mbbs-exam-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--mbbs-forest);
}

.mbbs-exam-checks i,
.mbbs-exam-checks svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(82, 183, 136, 0.22);
  color: var(--mbbs-deep);
  stroke-width: 3;
}

.mbbs-exam-card {
  position: relative;
  padding: 36px 32px 32px;
  background:
    radial-gradient(circle at 80% 10%, rgba(82, 183, 136, 0.28), transparent 55%),
    linear-gradient(165deg, #143a26 0%, #0d2818 100%);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 50px rgba(20, 58, 38, 0.28);
  overflow: hidden;
}

.mbbs-exam-card::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(149, 213, 178, 0.45), transparent 70%);
  pointer-events: none;
}

.mbbs-exam-card-eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mbbs-sage);
}

.mbbs-exam-card p {
  position: relative;
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.32;
  color: #fff;
}

.mbbs-exam-card-sign {
  position: relative;
  display: block;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .mbbs-hero {
    padding: 116px 0 80px;
  }
  .mbbs-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mbbs-hero-copy {
    max-width: 100%;
  }
  .mbbs-country-grid,
  .mbbs-journey-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mbbs-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .mbbs-exam-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 720px) {
  .mbbs-hero {
    padding: 100px 0 70px;
  }
  .mbbs-hero-copy h1 {
    font-size: 2.3rem;
  }
  .mbbs-hero-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mbbs-pin {
    width: 14px;
    height: 14px;
  }
  .mbbs-country-grid,
  .mbbs-journey-rail,
  .mbbs-strip-grid {
    grid-template-columns: 1fr;
  }
  .mbbs-exam-grid h2 {
    font-size: 2rem;
  }
  .mbbs-exam-card p {
    font-size: 1.2rem;
  }
}

/* ============================================================
   MBBS Student page refresh - CodePen map + Vidysea-inspired depth
   ============================================================ */
.mbbs-page {
  --mbbs-ink: #10262a;
  --mbbs-text: #23383c;
  --mbbs-muted: #65777a;
  --mbbs-forest: #153d2f;
  --mbbs-teal: #0f7a78;
  --mbbs-sea: #2f8f8a;
  --mbbs-gold: #bd8a3a;
  --mbbs-coral: #d96f55;
  --mbbs-paper: #fbf8f0;
  --mbbs-mist: #eef6f4;
  --mbbs-cream: #fffdf7;
  --mbbs-line: rgba(16, 38, 42, 0.12);
  --mbbs-shadow: 0 24px 70px rgba(16, 38, 42, 0.13);
  background:
    linear-gradient(180deg, #fbf8f0 0%, #eef6f4 38%, #fffdf7 68%, #f3f7f2 100%);
  color: var(--mbbs-text);
}

.mbbs-page .insights-eyebrow {
  color: var(--mbbs-teal);
  letter-spacing: 0.14em;
}

.mbbs-hero {
  padding: 126px 0 86px;
  background:
    linear-gradient(135deg, #fffdf7 0%, #eef6f4 48%, #fff3e8 100%);
}

.mbbs-hero-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  gap: 54px;
  min-width: 0;
}

.mbbs-hero-grid > * {
  min-width: 0;
}

.mbbs-hero-copy {
  max-width: 590px;
  min-width: 0;
}

.mbbs-eyebrow {
  border-color: rgba(15, 122, 120, 0.24);
  background: rgba(255, 255, 255, 0.74);
  color: var(--mbbs-teal);
  box-shadow: 0 10px 24px rgba(16, 38, 42, 0.06);
}

.mbbs-hero-copy h1 {
  margin: 22px 0 20px;
  max-width: 620px;
  color: var(--mbbs-ink);
  font-size: 3.72rem;
  line-height: 1.02;
  letter-spacing: 0;
}

.mbbs-hero-lede {
  color: rgba(16, 38, 42, 0.74);
  font-size: 1.05rem;
}

.mbbs-hero-stats {
  max-width: 560px;
  border-radius: 8px;
  border-color: rgba(16, 38, 42, 0.1);
  background: rgba(255, 253, 247, 0.82);
  box-shadow: 0 18px 38px rgba(16, 38, 42, 0.08);
}

.mbbs-hero-stats strong {
  color: var(--mbbs-ink);
}

.mbbs-hero-stats strong small {
  color: var(--mbbs-coral);
}

.mbbs-hero-stats span {
  color: rgba(16, 38, 42, 0.62);
  letter-spacing: 0.08em;
}

.mbbs-hero-badge {
  color: var(--mbbs-forest);
}

.mbbs-hero .btn-ghost {
  border-color: rgba(16, 38, 42, 0.18);
  background: rgba(255, 255, 255, 0.66);
  color: var(--mbbs-ink);
}

.mbbs-hero-map {
  width: 100%;
  margin: 0;
  aspect-ratio: auto;
  min-width: 0;
  max-width: 100%;
}

.mbbs-map-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 360px;
  aspect-ratio: 845.2 / 458;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #000;
  box-shadow:
    0 30px 80px rgba(16, 38, 42, 0.26),
    0 0 0 1px rgba(16, 38, 42, 0.2);
  isolation: isolate;
}

.mbbs-map-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(180deg, rgba(15, 122, 120, 0.12) 0%, rgba(0, 0, 0, 0) 46%, rgba(189, 138, 58, 0.12) 100%);
  pointer-events: none;
}

.mbbs-map-topline {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 32px);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  backdrop-filter: blur(10px);
}

.mbbs-map-topline span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mbbs-map-topline strong {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.25;
}

.mbbs-codepen-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #000;
  overflow: hidden;
}

.mbbs-codepen-map > svg {
  display: block;
  width: 94%;
  height: auto;
}

.mbbs-codepen-map circle {
  fill: #fff;
}

.mbbs-codepen-map .banaan {
  fill: #fff;
  transition: all 2s ease;
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse {
  to {
    r: 5;
  }
}

.mbbs-codepen-projection {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 94%;
  aspect-ratio: 845.2 / 458;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mbbs-codepen-projection .mbbs-pin {
  left: var(--pin-x);
  top: var(--pin-y);
  width: 20px;
  height: 20px;
  pointer-events: auto;
}

.mbbs-codepen-projection .mbbs-pin-dot {
  inset: 4px;
  background: radial-gradient(circle at 34% 30%, #fff4c4 0%, #f1b654 44%, #d96f55 100%);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.92),
    0 0 0 4px rgba(255, 255, 255, 0.78),
    0 8px 20px rgba(217, 111, 85, 0.5);
}

.mbbs-codepen-projection .mbbs-pin-pulse,
.mbbs-codepen-projection .mbbs-pin-pulse::after {
  background: rgba(217, 111, 85, 0.44);
}

.mbbs-codepen-projection .mbbs-pin-card {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.18);
  background: #fffdf7;
}

.mbbs-codepen-projection .mbbs-pin-card::after {
  background: #fffdf7;
}

.mbbs-codepen-projection .mbbs-pin[data-card-dir="down"] .mbbs-pin-card {
  bottom: auto;
  top: calc(100% + 14px);
  transform: translate(-50%, -6px);
}

.mbbs-codepen-projection .mbbs-pin[data-card-dir="left"] .mbbs-pin-card {
  bottom: auto;
  left: auto;
  right: calc(100% + 14px);
  top: 50%;
  transform: translate(6px, -50%);
}

.mbbs-codepen-projection .mbbs-pin[data-card-dir="right"] .mbbs-pin-card {
  bottom: auto;
  left: calc(100% + 14px);
  top: 50%;
  transform: translate(-6px, -50%);
}

.mbbs-codepen-projection .mbbs-pin[data-card-dir="down"]:hover .mbbs-pin-card,
.mbbs-codepen-projection .mbbs-pin[data-card-dir="down"]:focus-visible .mbbs-pin-card {
  transform: translate(-50%, 0);
}

.mbbs-codepen-projection .mbbs-pin[data-card-dir="left"]:hover .mbbs-pin-card,
.mbbs-codepen-projection .mbbs-pin[data-card-dir="left"]:focus-visible .mbbs-pin-card,
.mbbs-codepen-projection .mbbs-pin[data-card-dir="right"]:hover .mbbs-pin-card,
.mbbs-codepen-projection .mbbs-pin[data-card-dir="right"]:focus-visible .mbbs-pin-card {
  transform: translate(0, -50%);
}

.mbbs-map-caption {
  margin-top: 12px;
  color: rgba(16, 38, 42, 0.66);
  font-size: 0.78rem;
  line-height: 1.55;
}

.mbbs-section-head {
  max-width: 860px;
  margin: 0 0 28px;
}

.mbbs-section-head h2,
.mbbs-universities h2,
.mbbs-neet h2,
.mbbs-parents h2 {
  margin: 10px 0 14px;
  color: var(--mbbs-ink);
  font-size: 2.75rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.mbbs-section-head p,
.mbbs-universities p,
.mbbs-neet p,
.mbbs-parents p {
  max-width: 760px;
  margin: 0;
  color: var(--mbbs-muted);
  font-size: 1rem;
  line-height: 1.74;
}

.mbbs-paths,
.mbbs-practice,
.mbbs-neet,
.mbbs-finance,
.mbbs-faq {
  padding: 88px 0;
  background: var(--mbbs-cream);
}

.mbbs-corridor,
.mbbs-career,
.mbbs-parents {
  padding: 92px 0;
  background: linear-gradient(180deg, #eef6f4 0%, #fbf8f0 100%);
}

.mbbs-universities,
.mbbs-compare,
.mbbs-timeline {
  padding: 92px 0;
  background: #f7f2e8;
}

.mbbs-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.mbbs-path-card {
  position: relative;
  padding: 26px;
  border: 1px solid var(--mbbs-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(16, 38, 42, 0.08);
}

.mbbs-path-card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--mbbs-teal), var(--mbbs-gold), var(--mbbs-coral));
}

.mbbs-path-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.mbbs-path-card-head span {
  color: var(--mbbs-teal);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mbbs-path-card-head strong {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f7f2e8;
  color: var(--mbbs-ink);
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.mbbs-path-card ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pathStep;
}

.mbbs-path-card li {
  position: relative;
  min-height: 86px;
  padding: 34px 12px 12px;
  border: 1px solid rgba(16, 38, 42, 0.1);
  border-radius: 8px;
  background: #fbf8f0;
  color: var(--mbbs-text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.mbbs-path-card li::before {
  counter-increment: pathStep;
  content: "0" counter(pathStep);
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--mbbs-gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.mbbs-country-grid {
  gap: 20px;
}

.mbbs-country-card {
  border-radius: 8px;
  border-color: rgba(16, 38, 42, 0.1);
  background: #fffdf7;
  box-shadow: 0 14px 32px rgba(16, 38, 42, 0.07);
}

.mbbs-country-card::before {
  background: linear-gradient(90deg, var(--mbbs-teal), var(--mbbs-gold));
}

.mbbs-country-card:hover {
  border-color: rgba(15, 122, 120, 0.34);
  box-shadow: 0 22px 44px rgba(16, 38, 42, 0.12);
}

.mbbs-country-flag {
  border-radius: 8px;
  background: #f7f2e8;
}

.mbbs-country-index,
.mbbs-country-head p,
.mbbs-country-cta {
  color: var(--mbbs-teal);
}

.mbbs-country-head h3,
.mbbs-country-grid-meta dd {
  color: var(--mbbs-ink);
}

.mbbs-country-note,
.mbbs-country-grid-meta dt {
  color: rgba(16, 38, 42, 0.66);
}

.mbbs-universities-grid,
.mbbs-neet-grid,
.mbbs-parents-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 44px;
  align-items: start;
}

.mbbs-university-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mbbs-university-board article,
.mbbs-check-card,
.mbbs-finance-card,
.mbbs-faq-grid article {
  border: 1px solid var(--mbbs-line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 12px 30px rgba(16, 38, 42, 0.06);
}

.mbbs-university-board article {
  padding: 20px;
}

.mbbs-university-board h3 {
  margin: 0 0 12px;
  color: var(--mbbs-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.42rem;
  line-height: 1.16;
}

.mbbs-university-board ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mbbs-university-board li {
  position: relative;
  padding-left: 16px;
  color: rgba(16, 38, 42, 0.74);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.mbbs-university-board li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mbbs-gold);
}

.mbbs-check-grid,
.mbbs-finance-grid,
.mbbs-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mbbs-check-card,
.mbbs-finance-card,
.mbbs-faq-grid article {
  padding: 24px;
}

.mbbs-check-card i,
.mbbs-check-card svg,
.mbbs-finance-card i,
.mbbs-finance-card svg {
  width: 22px;
  height: 22px;
  margin-bottom: 16px;
  color: var(--mbbs-coral);
  stroke-width: 2.4;
}

.mbbs-check-card h3,
.mbbs-finance-card h3,
.mbbs-faq-grid h3 {
  margin: 0 0 10px;
  color: var(--mbbs-ink);
  font-size: 1.02rem;
  line-height: 1.28;
}

.mbbs-check-card p,
.mbbs-finance-card p,
.mbbs-faq-grid p {
  margin: 0;
  color: var(--mbbs-muted);
  font-size: 0.92rem;
  line-height: 1.66;
}

.mbbs-career-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mbbs-career-rail li {
  position: relative;
  min-height: 210px;
  padding: 24px 20px;
  border: 1px solid var(--mbbs-line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 12px 30px rgba(16, 38, 42, 0.06);
}

.mbbs-career-rail li::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--mbbs-teal), var(--mbbs-gold));
}

.mbbs-career-rail span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 16px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef6f4;
  color: var(--mbbs-teal);
  font-size: 0.74rem;
  font-weight: 900;
}

.mbbs-career-rail h3 {
  margin: 0 0 10px;
  color: var(--mbbs-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.42rem;
  line-height: 1.15;
}

.mbbs-career-rail p {
  margin: 0;
  color: var(--mbbs-muted);
  font-size: 0.9rem;
  line-height: 1.62;
}

.mbbs-neet-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mbbs-neet-panel article {
  min-height: 150px;
  padding: 24px;
  border: 1px solid var(--mbbs-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #10262a 0%, #153d2f 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(16, 38, 42, 0.16);
}

.mbbs-neet-panel strong {
  display: block;
  margin-bottom: 10px;
  color: #f1c36d;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.45rem;
  line-height: 1;
}

.mbbs-neet-panel span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  line-height: 1.55;
}

.mbbs-compare-table {
  overflow: hidden;
  border: 1px solid var(--mbbs-line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 18px 44px rgba(16, 38, 42, 0.08);
}

.mbbs-compare-row {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  min-height: 70px;
  border-top: 1px solid rgba(16, 38, 42, 0.09);
}

.mbbs-compare-row:first-child {
  border-top: 0;
}

.mbbs-compare-row > * {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 16px 18px;
  border-left: 1px solid rgba(16, 38, 42, 0.09);
  color: var(--mbbs-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.mbbs-compare-row > *:first-child {
  border-left: 0;
}

.mbbs-compare-row strong {
  color: var(--mbbs-ink);
}

.mbbs-compare-header {
  min-height: 52px;
  background: #10262a;
}

.mbbs-compare-header span {
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mbbs-parent-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mbbs-parent-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--mbbs-line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--mbbs-text);
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.55;
  box-shadow: 0 10px 24px rgba(16, 38, 42, 0.05);
}

.mbbs-parent-list i,
.mbbs-parent-list svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--mbbs-teal);
  stroke-width: 2.5;
}

.mbbs-timeline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.mbbs-timeline-grid article {
  padding: 28px;
  border: 1px solid var(--mbbs-line);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 18px 42px rgba(16, 38, 42, 0.08);
}

.mbbs-timeline-grid h3 {
  margin: 0 0 20px;
  color: var(--mbbs-ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  line-height: 1.15;
}

.mbbs-timeline-grid ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: timelineStep;
}

.mbbs-timeline-grid li {
  position: relative;
  min-height: 50px;
  padding: 13px 14px 13px 48px;
  border: 1px solid rgba(16, 38, 42, 0.08);
  border-radius: 8px;
  background: #fbf8f0;
  color: var(--mbbs-text);
  font-weight: 800;
}

.mbbs-timeline-grid li::before {
  counter-increment: timelineStep;
  content: counter(timelineStep);
  position: absolute;
  left: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mbbs-teal);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  transform: translateY(-50%);
}

.mbbs-final-cta {
  background: linear-gradient(180deg, #f7f2e8 0%, #eef6f4 100%);
}

.mbbs-final-cta .insights-cta-panel {
  border-radius: 8px;
}

@media (max-width: 1120px) {
  .mbbs-hero-grid,
  .mbbs-universities-grid,
  .mbbs-neet-grid,
  .mbbs-parents-grid {
    grid-template-columns: 1fr;
  }

  .mbbs-hero-copy {
    max-width: 760px;
  }

  .mbbs-map-shell {
    max-width: 920px;
  }

  .mbbs-country-grid,
  .mbbs-check-grid,
  .mbbs-finance-grid,
  .mbbs-faq-grid,
  .mbbs-career-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mbbs-path-card ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .mbbs-hero {
    padding: 96px 0 62px;
  }

  .mbbs-hero-copy h1,
  .mbbs-section-head h2,
  .mbbs-universities h2,
  .mbbs-neet h2,
  .mbbs-parents h2 {
    font-size: 2.2rem;
  }

  .mbbs-hero-stats,
  .mbbs-path-grid,
  .mbbs-country-grid,
  .mbbs-check-grid,
  .mbbs-finance-grid,
  .mbbs-faq-grid,
  .mbbs-career-rail,
  .mbbs-university-board,
  .mbbs-neet-panel,
  .mbbs-timeline-grid {
    grid-template-columns: 1fr;
  }

  .mbbs-map-shell {
    min-height: 260px;
  }

  .mbbs-map-topline {
    top: 10px;
    left: 10px;
    padding: 8px 10px;
  }

  .mbbs-map-topline strong {
    font-size: 0.76rem;
  }

  .mbbs-codepen-projection .mbbs-pin {
    width: 16px;
    height: 16px;
  }

  .mbbs-codepen-projection .mbbs-pin-card {
    display: none;
  }

  .mbbs-path-card ol {
    grid-template-columns: 1fr;
  }

  .mbbs-path-card li {
    min-height: 58px;
  }

  .mbbs-compare-table {
    display: grid;
    gap: 12px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .mbbs-compare-row,
  .mbbs-compare-header {
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
    border: 1px solid var(--mbbs-line);
    border-radius: 8px;
    background: #fffdf7;
    overflow: hidden;
  }

  .mbbs-compare-header {
    display: none;
  }

  .mbbs-compare-row > * {
    border-left: 0;
    border-top: 1px solid rgba(16, 38, 42, 0.08);
    padding: 13px 16px;
  }

  .mbbs-compare-row > *:first-child {
    border-top: 0;
    background: #10262a;
    color: #fff;
  }
}

@media (max-width: 520px) {
  .mbbs-hero-actions .btn {
    width: 100%;
  }

  .mbbs-hero-copy h1,
  .mbbs-section-head h2,
  .mbbs-universities h2,
  .mbbs-neet h2,
  .mbbs-parents h2 {
    font-size: 1.95rem;
  }

  .mbbs-path-card,
  .mbbs-country-card,
  .mbbs-check-card,
  .mbbs-finance-card,
  .mbbs-faq-grid article,
  .mbbs-timeline-grid article,
  .mbbs-university-board article {
    padding: 20px;
  }

  .mbbs-map-shell {
    min-height: 220px;
  }
}

/* ============================================================
   MBBS hero - clean redesign
   - Map sits in the background full-bleed on every breakpoint
   - Copy column anchored left with calm chips + serif headline
   ============================================================ */
.mbbs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 88vh;
  padding: 88px 0 72px;
  display: flex;
  align-items: flex-start;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(189, 138, 58, 0.10) 0%, transparent 55%),
    linear-gradient(135deg, #fffdf7 0%, #eef6f4 52%, #fff3e8 100%);
}

/* hero container breaks out of the global 1280px to sit closer to the left edge */
.mbbs-hero .container {
  width: 100%;
  max-width: none;
  padding-left: clamp(24px, 5vw, 88px);
  padding-right: clamp(24px, 5vw, 88px);
  margin: 0;
}

/* readability scrim so the copy sits cleanly over the dotted map */
.mbbs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(255, 253, 247, 0.96) 0%,
      rgba(255, 253, 247, 0.88) 28%,
      rgba(255, 253, 247, 0.55) 46%,
      rgba(255, 253, 247, 0.18) 62%,
      rgba(255, 253, 247, 0) 78%
    );
  pointer-events: none;
}

/* map - always behind, never reflowed below the copy
   container aspect locked to the SVG so the pin overlay (using % coords)
   always lines up exactly with the dot art at every breakpoint */
.mbbs-hero-bg-map {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: min(78%, 1480px);
  aspect-ratio: 845.2 / 458;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 92%, transparent 100%);
}

.mbbs-hero-bg-map > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mbbs-hero-bg-map svg circle {
  fill: rgba(16, 38, 42, 0.30);
}

.mbbs-hero-bg-map svg .banaan {
  fill: rgba(15, 122, 120, 0.62);
}

.mbbs-hero-bg-map .mbbs-codepen-projection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  pointer-events: none;
}

.mbbs-hero-bg-map .mbbs-pin {
  pointer-events: auto;
}

/* container + grid */
.mbbs-hero .container {
  position: relative;
  z-index: 2;
}

.mbbs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.mbbs-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 580px;
}

/* chips row */
.mbbs-hero-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}

.mbbs-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(16, 38, 42, 0.10);
  border-radius: 999px;
  background: #ffffff;
  color: var(--mbbs-ink, #10262a);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(16, 38, 42, 0.05);
}

.mbbs-chip i,
.mbbs-chip svg {
  width: 15px;
  height: 15px;
  color: var(--mbbs-teal, #0f7a78);
  stroke-width: 2.4;
}

.mbbs-chip-warm i,
.mbbs-chip-warm svg {
  color: var(--mbbs-coral, #d96f55);
}

/* headline */
.mbbs-hero .mbbs-hero-copy h1 {
  margin: 0 0 22px;
  max-width: 100%;
  color: var(--mbbs-ink, #10262a);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.005em;
}

.mbbs-hero .mbbs-hero-copy h1 .mbbs-hero-sub {
  display: block;
  font-style: normal;
  color: var(--mbbs-ink, #10262a);
}

/* gold MBBS treatment */
.mbbs-gold {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-weight: 700;
  background: var(--animated-text-gradient);
  background-size: var(--animated-text-size);
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(16, 2, 88, 0.18));
  animation: goldShimmer var(--animated-text-duration) ease-in-out infinite;
}

.mbbs-gold::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--animated-text-gradient);
  background-size: var(--animated-text-size);
  background-position: 0% 50%;
  animation: goldShimmer var(--animated-text-duration) ease-in-out infinite;
  opacity: 0.9;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mbbs-gold,
  .mbbs-gold::after {
    animation: none;
  }
  .mbbs-gold {
    background-position: 50% 0;
  }
}

/* lede */
.mbbs-hero .mbbs-hero-lede {
  margin: 0 0 32px;
  max-width: 520px;
  color: rgba(16, 38, 42, 0.72);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* CTAs */
.mbbs-hero .mbbs-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 28px;
}

.mbbs-hero .mbbs-hero-actions .btn.mbbs-hero-cta {
  min-height: 52px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  background: var(--mbbs-coral, #d96f55);
  color: #fff;
  border: 0;
  box-shadow: 0 16px 32px rgba(217, 111, 85, 0.28);
}

.mbbs-hero .mbbs-hero-actions .btn.mbbs-hero-cta:hover,
.mbbs-hero .mbbs-hero-actions .btn.mbbs-hero-cta:focus-visible {
  background: #c6604a;
  transform: translateY(-1px);
}

.mbbs-hero .mbbs-hero-actions .btn.mbbs-hero-cta i,
.mbbs-hero .mbbs-hero-actions .btn.mbbs-hero-cta svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

.mbbs-hero-quietlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(16, 38, 42, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: var(--mbbs-ink, #10262a);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(16, 38, 42, 0.05);
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.mbbs-hero-quietlink:hover,
.mbbs-hero-quietlink:focus-visible {
  border-color: rgba(217, 111, 85, 0.45);
  color: var(--mbbs-coral, #d96f55);
  transform: translateY(-1px);
}

.mbbs-hero-quietlink i,
.mbbs-hero-quietlink svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* trust cards */
.mbbs-hero .mbbs-hero-trust {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mbbs-hero .mbbs-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(16, 38, 42, 0.10);
  border-radius: 10px;
  background: #ffffff;
  color: var(--mbbs-ink, #10262a);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgba(16, 38, 42, 0.05);
}

.mbbs-hero .mbbs-hero-trust .mbbs-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(15, 122, 120, 0.10);
  color: var(--mbbs-teal, #0f7a78);
}

.mbbs-hero .mbbs-hero-trust .mbbs-trust-icon i,
.mbbs-hero .mbbs-hero-trust .mbbs-trust-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

/* ----- responsive: tablet ----- */
@media (max-width: 1120px) {
  .mbbs-hero {
    min-height: 0;
    padding: 88px 0 56px;
  }

  .mbbs-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(255, 253, 247, 0.92) 0%,
        rgba(255, 253, 247, 0.72) 38%,
        rgba(255, 253, 247, 0.42) 70%,
        rgba(255, 253, 247, 0.20) 100%
      );
  }

  .mbbs-hero-bg-map {
    width: 100%;
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
  }

  .mbbs-hero-copy {
    max-width: 100%;
  }
}

/* ----- responsive: mobile ----- */
@media (max-width: 780px) {
  .mbbs-hero {
    padding: 80px 0 48px;
  }

  .mbbs-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(255, 253, 247, 0.88) 0%,
        rgba(255, 253, 247, 0.62) 50%,
        rgba(255, 253, 247, 0.36) 100%
      );
  }

  .mbbs-hero-bg-map {
    /* stays as the section background on mobile - never moves below content */
    width: 100%;
    opacity: 0.65;
  }

  .mbbs-hero-bg-map svg circle {
    fill: rgba(16, 38, 42, 0.45);
  }

  .mbbs-hero-chips {
    gap: 8px;
    margin-bottom: 22px;
  }

  .mbbs-chip {
    height: 32px;
    padding: 0 12px;
    font-size: 0.66rem;
    letter-spacing: 0.09em;
  }

  .mbbs-chip i,
  .mbbs-chip svg {
    width: 13px;
    height: 13px;
  }

  .mbbs-hero .mbbs-hero-lede {
    font-size: 0.96rem;
    margin-bottom: 26px;
  }

  .mbbs-hero .mbbs-hero-actions .btn.mbbs-hero-cta,
  .mbbs-hero-quietlink {
    min-height: 48px;
    padding: 0 18px;
    font-size: 0.9rem;
  }

  .mbbs-hero .mbbs-hero-trust li {
    padding: 9px 13px;
    font-size: 0.78rem;
  }

  .mbbs-hero-bg-map .mbbs-codepen-projection {
    display: none;
  }

  .mbbs-hero-bg-map svg .banaan {
    fill: rgba(16, 38, 42, 0.45);
    animation: none;
  }
}

@media (max-width: 560px) {
  .mbbs-hero {
    padding: 72px 0 40px;
  }

  .mbbs-hero .mbbs-hero-actions {
    width: 100%;
  }

  .mbbs-hero .mbbs-hero-actions .btn.mbbs-hero-cta,
  .mbbs-hero-quietlink {
    width: 100%;
  }

  .mbbs-hero .mbbs-hero-trust {
    gap: 8px;
  }

  .mbbs-hero .mbbs-hero-trust li {
    flex: 1 1 calc(50% - 4px);
    justify-content: flex-start;
  }
}

/* ============================================================
   MBBS comparison page v2
   Separate route/view; scoped so the original MBBS page remains intact.
   ============================================================ */
.mbbs-v2-page {
  background: #fffdf7;
}

.mbbs-v2-hero {
  position: relative;
  overflow: hidden;
  padding: 112px 0 86px;
  background:
    radial-gradient(72% 64% at 92% 12%, rgba(217, 111, 85, 0.10) 0%, transparent 58%),
    radial-gradient(52% 44% at 8% 82%, rgba(189, 138, 58, 0.09) 0%, transparent 54%),
    linear-gradient(180deg, #fffdf7 0%, #fffaf0 100%),
    #fffdf7;
}

.mbbs-v2-hero .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(20px, 3vw, 54px);
  padding-right: clamp(20px, 2.4vw, 42px);
}

.mbbs-v2-hero-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: clamp(30px, 3.4vw, 54px);
  align-items: start;
}

.mbbs-v2-hero-copy {
  max-width: 420px;
  padding-top: clamp(10px, 3vw, 34px);
}

.mbbs-v2-hero-copy h1 {
  margin: 0 0 20px;
  max-width: 420px;
  color: var(--mbbs-ink, #10262a);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.5rem, 3.9vw, 3.9rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
}

.mbbs-v2-lede {
  max-width: 402px;
  margin: 0 0 30px;
  color: rgba(16, 38, 42, 0.74);
  font-size: 1.08rem;
  line-height: 1.72;
}

.mbbs-v2-country-panel {
  min-width: 0;
  padding-top: 0;
}

.mbbs-v2-country-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.mbbs-v2-page .mbbs-v2-country-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(16, 38, 42, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 18px 42px rgba(16, 38, 42, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mbbs-v2-page .mbbs-v2-country-card::before {
  height: 3px;
  background: linear-gradient(90deg, var(--mbbs-teal, #0f7a78), var(--mbbs-gold, #bd8a3a), var(--mbbs-coral, #d96f55));
  opacity: 1;
}

.mbbs-v2-page .mbbs-v2-country-card:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 122, 120, 0.28);
  box-shadow: 0 24px 50px rgba(16, 38, 42, 0.14);
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-head {
  gap: 11px;
  margin-bottom: 10px;
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-flag {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #fffaf0;
  border-color: rgba(189, 138, 58, 0.22);
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-head h3 {
  font-size: 1.28rem;
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-head p {
  color: var(--mbbs-teal, #0f7a78);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-note {
  display: -webkit-box;
  min-height: 4.35em;
  margin-bottom: 11px;
  overflow: hidden;
  color: rgba(16, 38, 42, 0.70);
  font-size: 0.80rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-grid-meta {
  gap: 8px 11px;
  margin-bottom: 12px;
  padding-top: 11px;
  border-top-color: rgba(16, 38, 42, 0.12);
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-grid-meta dt {
  color: rgba(16, 38, 42, 0.54);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-grid-meta dd {
  color: var(--mbbs-ink, #10262a);
  font-size: 0.78rem;
  line-height: 1.34;
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta {
  position: relative;
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 0 5px;
  background: none;
  color: var(--mbbs-teal, #0f7a78);
  font-size: 0.84rem;
  transition: color 0.25s ease, gap 0.25s ease;
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta:hover,
.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta:focus-visible {
  gap: 12px;
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta:hover::after,
.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta:focus-visible::after {
  transform: scaleX(1);
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta i,
.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta svg {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta:hover i,
.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta:hover svg,
.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta:focus-visible i,
.mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta:focus-visible svg {
  transform: translate(3px, -3px);
}

.mbbs-v2-page .mbbs-v2-country-more-card {
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 13px;
  min-height: 238px;
  overflow: hidden;
  color: var(--mbbs-ink, #10262a);
  text-align: left;
  text-decoration: none;
  border-color: rgba(15, 122, 120, 0.18);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(15, 122, 120, 0.07) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 251, 249, 0.9) 100%);
  box-shadow: 0 12px 28px rgba(16, 38, 42, 0.07);
}

.mbbs-v2-page .mbbs-v2-country-more-card::before {
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mbbs-teal, #0f7a78), transparent);
  opacity: 1;
}

/* faint compass-ring watermark, top-right */
.mbbs-v2-page .mbbs-v2-country-more-card::after {
  content: "";
  position: absolute;
  inset: -42px -42px auto auto;
  width: 150px;
  height: 150px;
  border: 1.5px dashed rgba(15, 122, 120, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.mbbs-v2-page .mbbs-v2-country-more-card:hover,
.mbbs-v2-page .mbbs-v2-country-more-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(15, 122, 120, 0.34);
  box-shadow: 0 18px 38px rgba(16, 38, 42, 0.10);
}

.mbbs-v2-more-card__index {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  color: rgba(16, 38, 42, 0.36);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mbbs-v2-more-card__mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(15, 122, 120, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(15, 122, 120, 0.16) 0%, rgba(15, 122, 120, 0.06) 100%);
  color: var(--mbbs-teal, #0f7a78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 14px rgba(15, 122, 120, 0.12);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mbbs-v2-page .mbbs-v2-country-more-card:hover .mbbs-v2-more-card__mark,
.mbbs-v2-page .mbbs-v2-country-more-card:focus-visible .mbbs-v2-more-card__mark {
  transform: rotate(18deg);
}

.mbbs-v2-more-card__mark i,
.mbbs-v2-more-card__mark svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.2;
}

.mbbs-v2-more-card__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mbbs-v2-more-card__eyebrow {
  color: rgba(16, 38, 42, 0.56);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mbbs-v2-page .mbbs-v2-country-more-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--mbbs-ink, #10262a);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.05;
}

.mbbs-v2-page .mbbs-v2-country-more-card p {
  position: relative;
  z-index: 1;
  max-width: 230px;
  margin: 0;
  color: rgba(16, 38, 42, 0.62);
  font-size: 0.8rem;
  line-height: 1.45;
}

.mbbs-v2-more-card__chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.mbbs-v2-more-card__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(16, 38, 42, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(16, 38, 42, 0.68);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.mbbs-v2-more-card__chips .mbbs-v2-more-card__chip-extra {
  border-color: rgba(15, 122, 120, 0.28);
  background: rgba(15, 122, 120, 0.1);
  color: var(--mbbs-teal, #0f7a78);
}

.mbbs-v2-more-card__action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--mbbs-teal, #0f7a78);
  font-size: 0.84rem;
  font-weight: 900;
}

.mbbs-v2-more-card__action i,
.mbbs-v2-more-card__action svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.8;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mbbs-v2-page .mbbs-v2-country-more-card:hover .mbbs-v2-more-card__action i,
.mbbs-v2-page .mbbs-v2-country-more-card:hover .mbbs-v2-more-card__action svg,
.mbbs-v2-page .mbbs-v2-country-more-card:focus-visible .mbbs-v2-more-card__action i,
.mbbs-v2-page .mbbs-v2-country-more-card:focus-visible .mbbs-v2-more-card__action svg {
  transform: translate(3px, -3px);
}

.mbbs-v2-services {
  position: relative;
  overflow: hidden;
  padding: 104px 0 112px;
  background:
    linear-gradient(180deg, #fffaf0 0%, #f1f8f6 48%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(16, 38, 42, 0.08);
}

.mbbs-v2-services .container {
  position: relative;
}

.mbbs-v2-services-head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.mbbs-v2-services-head h2 {
  margin: 8px 0 14px;
  color: var(--mbbs-ink, #10262a);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.6rem, 4.4vw, 4.1rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0;
}

.mbbs-v2-services-head p {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(16, 38, 42, 0.70);
  font-size: 1.02rem;
  line-height: 1.72;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.mbbs-v2-services-grid {
  counter-reset: mbbs-service;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.mbbs-v2-service-card {
  position: relative;
  counter-increment: mbbs-service;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 258px;
  padding: 30px 18px 26px;
  border: 1px solid rgba(16, 38, 42, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  text-align: center;
  box-shadow: 0 18px 42px rgba(16, 38, 42, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.mbbs-v2-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--mbbs-teal, #0f7a78), var(--mbbs-gold, #bd8a3a), var(--mbbs-coral, #d96f55));
}

.mbbs-v2-service-card::after {
  content: counter(mbbs-service, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 16px;
  color: rgba(15, 122, 120, 0.18);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.mbbs-v2-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(15, 122, 120, 0.30);
  background: #ffffff;
  box-shadow: 0 26px 58px rgba(16, 38, 42, 0.13);
}

.mbbs-v2-service-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  border: 1px solid rgba(15, 122, 120, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 122, 120, 0.12) 0%, rgba(189, 138, 58, 0.10) 100%),
    #ffffff;
  color: var(--mbbs-teal, #0f7a78);
  box-shadow: 0 14px 28px rgba(16, 38, 42, 0.08);
}

.mbbs-v2-service-icon i,
.mbbs-v2-service-icon svg {
  width: 27px;
  height: 27px;
  stroke-width: 2.1;
}

.mbbs-v2-service-card h3 {
  margin: 0 0 14px;
  color: var(--mbbs-ink, #10262a);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mbbs-v2-service-card p {
  max-width: 24ch;
  margin: 0 auto;
  color: rgba(16, 38, 42, 0.68);
  font-size: 0.86rem;
  line-height: 1.68;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@media (max-width: 1280px) {
  .mbbs-v2-hero-layout {
    grid-template-columns: minmax(286px, 370px) minmax(0, 1fr);
    gap: 28px;
  }

  .mbbs-v2-hero-copy,
  .mbbs-v2-hero-copy h1,
  .mbbs-v2-lede {
    max-width: 370px;
  }

  .mbbs-v2-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .mbbs-v2-hero-layout {
    grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
    gap: 24px;
  }

  .mbbs-v2-hero-copy,
  .mbbs-v2-hero-copy h1,
  .mbbs-v2-lede {
    max-width: 340px;
  }

  .mbbs-v2-hero-copy h1 {
    font-size: clamp(2.28rem, 3.6vw, 3.15rem);
  }

  .mbbs-v2-country-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 4px 2px 18px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 122, 120, 0.42) rgba(16, 38, 42, 0.08);
    -webkit-overflow-scrolling: touch;
  }

  .mbbs-v2-page .mbbs-v2-country-card {
    flex: 0 0 clamp(260px, 42vw, 360px);
    scroll-snap-align: start;
  }
}

@media (max-width: 860px) {
  .mbbs-v2-hero-layout {
    grid-template-columns: 1fr;
  }

  .mbbs-v2-hero-copy,
  .mbbs-v2-hero-copy h1,
  .mbbs-v2-lede {
    max-width: 760px;
  }

  .mbbs-v2-hero-copy {
    padding-top: 0;
  }

  .mbbs-v2-page .mbbs-v2-country-card {
    flex-basis: clamp(280px, 78vw, 390px);
  }
}

@media (max-width: 720px) {
  .mbbs-v2-hero {
    padding: 88px 0 62px;
  }

  .mbbs-v2-hero .container {
    width: min(calc(100% - 28px), 1440px);
  }

  .mbbs-v2-hero-copy h1 {
    font-size: clamp(2.05rem, 10vw, 2.7rem);
  }

  .mbbs-v2-services {
    padding: 66px 0 72px;
  }

  .mbbs-v2-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .mbbs-v2-services-head {
    margin-bottom: 32px;
  }

  .mbbs-v2-services-head p {
    max-width: 30ch;
    font-size: 0.96rem;
  }

  .mbbs-v2-services-grid {
    grid-template-columns: 1fr;
  }

  .mbbs-v2-service-card {
    padding: 28px 20px 24px;
    min-height: 210px;
  }

  .mbbs-v2-service-card p {
    max-width: 28ch;
  }
}

/* ==============================================================
   About page — vidysea-inspired redesign (prefix: .va-)
   Modular sections: hero collage, vision/mission, who/why/what
   pillars, global impact stats, founders + advisors + management,
   final CTA. Uses existing brand tokens (navy/teal/gold).
   ============================================================== */

.va-about-page {
  --va-ink: #0f2230;
  --va-muted: #5d6e76;
  --va-line: rgba(15, 34, 48, 0.10);
  --va-line-strong: rgba(15, 34, 48, 0.16);
  --va-paper: #ffffff;
  --va-cream: #fbf6ec;
  --va-mist: #f1f8f7;
  --va-aqua: #e6f4f2;
  --va-radius: 14px;
  --va-radius-lg: 22px;
  background: linear-gradient(180deg, #fdfaf2 0%, #f4f9f8 38%, #fffaf2 70%, #eaf3f3 100%);
  color: var(--va-ink);
}

.va-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(13, 122, 120, 0.32);
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.08);
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.va-eyebrow--light {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ───────────────────────── HERO ───────────────────────── */
.va-hero {
  position: relative;
  padding: 96px 0 100px;
  overflow: hidden;
}

.va-hero::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -180px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 122, 120, 0.14), transparent 70%);
  pointer-events: none;
}

.va-hero::after {
  content: "";
  position: absolute;
  bottom: -180px;
  left: -120px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 146, 74, 0.13), transparent 70%);
  pointer-events: none;
}

.va-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
  z-index: 1;
}

.va-hero-copy h1 {
  margin: 22px 0 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.55rem;
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-weight: 700;
  color: var(--navy);
}

.va-hero-copy h1 em {
  font-style: italic;
  color: var(--teal-dark);
}

.va-hero-num {
  display: inline-block;
  padding: 0 4px;
  background: linear-gradient(180deg, transparent 62%, rgba(199, 146, 74, 0.32) 62%, rgba(199, 146, 74, 0.32) 92%, transparent 92%);
  color: var(--gold);
  font-style: italic;
}

.va-hero-lede {
  margin: 0 0 32px;
  max-width: 560px;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.78;
}

.va-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

/* The About hero sits on a LIGHT background, so the default white ghost button
   (built for dark heroes) is invisible. Give it dark ink + a subtle outline.
   Scoped to .va-hero so the dark CTA ghost (.va-cta-ghost) is unaffected. */
html[data-color-theme] .va-hero .btn-ghost,
.va-hero .btn-ghost {
  color: var(--navy);
  border: 1px solid rgba(13, 35, 60, 0.2);
  background: rgba(13, 35, 60, 0.045);
  backdrop-filter: none;
}
html[data-color-theme] .va-hero .btn-ghost:hover,
.va-hero .btn-ghost:hover {
  color: var(--teal-dark);
  border-color: var(--teal-dark);
  background: rgba(13, 122, 120, 0.09);
}
.va-hero .btn-ghost svg { opacity: 0.85; }

.va-hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--va-line);
  border-radius: var(--va-radius);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(7, 25, 34, 0.06);
  max-width: 560px;
}

.va-hero-trust > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.va-hero-trust strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.va-hero-trust span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.va-hero-collage {
  position: relative;
  aspect-ratio: 5 / 6;
  min-height: 520px;
}

.va-hero-photo {
  position: absolute;
  background-size: cover;
  background-position: center;
  border-radius: var(--va-radius-lg);
  box-shadow: 0 24px 60px rgba(7, 25, 34, 0.18);
  border: 6px solid #fff;
}

.va-hero-photo--lg {
  top: 0;
  right: 0;
  width: 78%;
  height: 80%;
}

.va-hero-photo--sm {
  bottom: 0;
  left: 0;
  width: 56%;
  height: 48%;
  border-color: var(--gold);
  border-width: 5px;
}

.va-hero-badge {
  position: absolute;
  bottom: 26%;
  right: -14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(7, 25, 34, 0.14);
  border: 1px solid var(--va-line);
  z-index: 2;
}

.va-hero-badge i,
.va-hero-badge svg {
  width: 22px;
  height: 22px;
  color: var(--gold);
  stroke-width: 2.2;
}

.va-hero-badge div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.va-hero-badge strong {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 800;
}

.va-hero-badge span {
  font-size: 0.74rem;
  color: var(--muted);
}

/* ─────────────────── VISION & MISSION ─────────────────── */
.va-vm {
  position: relative;
  padding: 96px 0;
  background: #ffffff;
  border-top: 1px solid var(--va-line);
  border-bottom: 1px solid var(--va-line);
}

.va-vm-head {
  text-align: center;
  margin-bottom: 56px;
}

.va-vm-head h2 {
  margin: 18px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.55rem;
  line-height: 1.18;
  letter-spacing: -0.008em;
  font-weight: 700;
  color: var(--navy);
}

.va-vm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.va-vm-card {
  position: relative;
  padding: 44px 38px 40px;
  border-radius: var(--va-radius-lg);
  border: 1px solid var(--va-line);
  background: var(--va-paper);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.va-vm-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  opacity: 0.6;
}

.va-vm-card--vision::before {
  background: radial-gradient(circle, rgba(13, 122, 120, 0.20), transparent 70%);
}

.va-vm-card--mission::before {
  background: radial-gradient(circle, rgba(199, 146, 74, 0.22), transparent 70%);
}

.va-vm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(7, 25, 34, 0.12);
  border-color: rgba(13, 122, 120, 0.3);
}

.va-vm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
  color: #fff;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 24px rgba(13, 122, 120, 0.32);
}

.va-vm-card--mission .va-vm-icon {
  background: linear-gradient(135deg, var(--gold) 0%, #b07832 100%);
}

.va-vm-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 1.8;
  color: #fff;
}

.va-vm-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 12px;
}

.va-vm-card--mission .va-vm-tag {
  color: var(--gold);
}

.va-vm-card h3 {
  margin: 0 0 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--navy);
  position: relative;
  z-index: 1;
}

.va-vm-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
  position: relative;
  z-index: 1;
}

/* ─────────────────── PILLARS (WHO/WHY/WHAT) ─────────────────── */
.va-pillars {
  padding: 110px 0 30px;
}

.va-pillar {
  margin-bottom: 96px;
}

.va-pillar:last-child {
  margin-bottom: 0;
}

.va-pillar--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.va-pillar--reverse .va-pillar-copy {
  order: 2;
}

.va-pillar--reverse .va-pillar-media {
  order: 1;
}

.va-pillar-copy h2 {
  margin: 18px 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1.18;
  letter-spacing: -0.008em;
  font-weight: 700;
  color: var(--navy);
}

.va-pillar-copy p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.78;
}

.va-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.va-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(199, 146, 74, 0.36);
  background: rgba(199, 146, 74, 0.08);
  color: #8b6326;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.va-chips svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--gold);
  stroke-width: 2.2;
  flex: 0 0 auto;
}

.va-pillar-media {
  position: relative;
  margin: 0;
  border-radius: var(--va-radius-lg);
  overflow: hidden;
  box-shadow: 0 28px 56px rgba(7, 25, 34, 0.16);
}

.va-pillar-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.va-pillar-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(7, 25, 34, 0.78);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.va-pillar-tag svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--gold);
  stroke-width: 2.2;
  flex: 0 0 auto;
}

.va-hero-badge svg,
.va-hero-actions svg,
.va-cta-actions svg,
.va-cta-tags svg,
.va-team-social svg,
.va-team-expand svg {
  flex: 0 0 auto;
}

/* ─────────────────── GLOBAL IMPACT ─────────────────── */
.va-impact {
  position: relative;
  padding: 110px 0 120px;
  background:
    radial-gradient(circle at 18% 20%, rgba(13, 122, 120, 0.25), transparent 50%),
    radial-gradient(circle at 88% 80%, rgba(199, 146, 74, 0.18), transparent 50%),
    linear-gradient(135deg, #0b2b43 0%, #07585a 100%);
  color: #fff;
}

.va-impact-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.va-impact-head h2 {
  margin: 18px 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.008em;
  color: #fff;
}

.va-impact-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.72;
}

.va-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.va-impact-card {
  position: relative;
  padding: 38px 28px 32px;
  border-radius: var(--va-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  text-align: left;
  overflow: hidden;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.va-impact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

.va-impact-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(199, 146, 74, 0.45);
}

/* Icon: thin gold-outline circle sitting top-right as an accent */
.va-impact-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(199, 146, 74, 0.55);
  background: rgba(199, 146, 74, 0.12);
  color: var(--gold);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.va-impact-card:hover .va-impact-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}

.va-impact-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2;
  display: block;
}

.va-impact-card strong {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.va-impact-card strong small {
  color: var(--gold);
  font-size: 1.4rem;
  margin-left: 2px;
  font-weight: 700;
  font-style: italic;
}

.va-impact-card span:not(.va-impact-icon) {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 92%;
}

/* ─────────────────── TEAM (FOUNDERS / ADVISORS / MGMT) ─────────────────── */
.va-team {
  padding: 110px 0;
  background: #fff;
}

.va-team--alt {
  background: #f8fbfb;
}

.va-team-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.va-team-head h2 {
  margin: 18px 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.45rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--navy);
}

.va-team-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.72;
}

.va-team-grid {
  display: grid;
  gap: 28px;
}

.va-team-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.va-team-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.va-team-grid--compact {
  gap: 22px;
}

.va-team-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--va-radius-lg);
  border: 1px solid var(--va-line);
  background: #fff;
  box-shadow: 0 14px 36px rgba(7, 25, 34, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.va-team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(7, 25, 34, 0.14);
  border-color: rgba(13, 122, 120, 0.3);
}

.va-team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-position: center top;
  background-size: cover;
  background-color: var(--va-mist);
}

.va-team-card--compact .va-team-photo {
  aspect-ratio: 1 / 1;
}

.va-team-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px 26px;
}

.va-team-card--compact .va-team-body {
  padding: 18px 20px 20px;
}

.va-team-body h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
}

.va-team-card--compact .va-team-body h3 {
  font-size: 1.25rem;
}

.va-team-role {
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.va-team-body p {
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.68;
}

.va-team-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.va-team-desk {
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid rgba(199, 146, 74, 0.4);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.va-team-social {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--va-mist);
  color: var(--teal-dark);
  border: 1px solid var(--va-line);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.va-team-social:hover {
  background: var(--teal-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* Hover help text on the founder hand icon (set per-member in the About CMS). */
.va-team-social[data-tip] {
  position: relative;
}
.va-team-social[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 220px;
  padding: 7px 11px;
  background: #14253e;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(8, 20, 40, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 6;
}
.va-team-social[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #14253e;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 6;
}
.va-team-social[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.va-team-social[data-tip]:hover::before {
  opacity: 1;
}

.va-team-social i,
.va-team-social svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

/* Friendly "hi 👋 / high-five" wave on the founder cards.
   The hand waves when you hover the card or the circle itself. */
.va-team-social svg {
  transform-origin: 72% 88%; /* pivot near the wrist for a natural wave */
}
.va-team-card:hover .va-team-social svg,
.va-team-social:hover svg {
  animation: va-hi-wave 0.9s ease-in-out;
}
@keyframes va-hi-wave {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10%      { transform: rotate(-12deg) scale(1.06); }
  25%      { transform: rotate(16deg) scale(1.12); }
  40%      { transform: rotate(-10deg) scale(1.10); }
  55%      { transform: rotate(14deg) scale(1.12); }
  70%      { transform: rotate(-6deg) scale(1.06); }
  85%      { transform: rotate(8deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .va-team-card:hover .va-team-social svg,
  .va-team-social:hover svg { animation: none; }
}

.va-team-expand {
  position: absolute;
  top: -22px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--gold);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(199, 146, 74, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}

.va-team-expand:hover {
  background: var(--navy);
  transform: scale(1.08);
}

.va-team-expand i,
.va-team-expand svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}

/* ─────────────────── FINAL CTA ─────────────────── */
.va-cta {
  position: relative;
  padding: 110px 0 180px;
  background:
    radial-gradient(circle at 12% 12%, rgba(13, 122, 120, 0.28), transparent 55%),
    radial-gradient(circle at 86% 86%, rgba(199, 146, 74, 0.18), transparent 55%),
    linear-gradient(180deg, #07585a 0%, #0a3f4f 42%, #082836 76%, #071c26 100%);
  color: #fff;
  overflow: hidden;
}

.va-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 140px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 25, 34, 0) 0%, rgba(7, 25, 34, 0.55) 40%, #071922 100%);
  z-index: 1;
}

.va-cta .container {
  position: relative;
  z-index: 2;
}

.va-about-page + .site-footer {
  margin-top: 0;
}

/* (was a -60px overlap + transparent→dark fade band; under the current theme
   that stacked into a hard dark block at the footer top) */
.va-about-page + .site-footer::after {
  content: none;
}

.va-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}

.va-cta-copy h2 {
  margin: 18px 0 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.8rem;
  line-height: 1.14;
  letter-spacing: -0.008em;
  font-weight: 700;
  color: #fff;
}

.va-cta-copy p {
  margin: 0 0 30px;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.78;
}

.va-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.va-cta-ghost {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

.va-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--gold) !important;
}

.va-cta-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.va-cta-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.va-cta-tags i,
.va-cta-tags svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  stroke-width: 2.2;
}

.va-cta-media {
  position: relative;
  margin: 0;
  border-radius: var(--va-radius-lg);
  overflow: visible;
}

.va-cta-media img {
  width: 100%;
  border-radius: var(--va-radius-lg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.va-cta-card {
  position: absolute;
  left: -28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  border-radius: 14px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
  min-width: 220px;
  border-top: 4px solid var(--gold);
}

.va-cta-card-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}

.va-cta-card-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
  line-height: 1.4;
}

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width: 1100px) {
  .va-team-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .va-team-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .va-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .va-hero {
    padding: 64px 0 80px;
  }
  .va-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .va-hero-copy h1 {
    font-size: 2.6rem;
  }
  .va-hero-collage {
    min-height: 460px;
  }
  .va-vm {
    padding: 72px 0;
  }
  .va-vm-grid {
    grid-template-columns: 1fr;
  }
  .va-pillars {
    padding: 80px 0 16px;
  }
  .va-pillar {
    margin-bottom: 72px;
  }
  .va-pillar--row {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .va-pillar--reverse .va-pillar-copy {
    order: 1;
  }
  .va-pillar--reverse .va-pillar-media {
    order: 2;
  }
  .va-pillar-copy h2 {
    font-size: 1.95rem;
  }
  .va-impact {
    padding: 80px 0 90px;
  }
  .va-impact-head h2,
  .va-team-head h2,
  .va-vm-head h2 {
    font-size: 2rem;
  }
  .va-team {
    padding: 80px 0;
  }
  .va-cta {
    padding: 80px 0 100px;
  }
  .va-cta-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .va-cta-copy h2 {
    font-size: 2.1rem;
  }
  .va-cta-card {
    left: 16px;
    bottom: 16px;
  }
}

@media (max-width: 640px) {
  .va-hero-copy h1 {
    font-size: 2.1rem;
  }
  .va-hero-trust {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .va-hero-collage {
    min-height: 380px;
  }
  .va-hero-badge {
    right: 8px;
    bottom: 22%;
    padding: 10px 14px;
  }
  .va-vm-card {
    padding: 32px 26px 28px;
  }
  .va-team-grid--3,
  .va-team-grid--4 {
    grid-template-columns: 1fr;
  }
  .va-impact-grid {
    grid-template-columns: 1fr;
  }
  .va-impact-card strong,
  .va-cta-card-num {
    font-size: 2.4rem;
  }
  .va-impact-icon {
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
  }
}

/* ==============================================================
   Careers page — Sattva-inspired hiring process + form
   Prefix: .cr-  (Hero stays on existing .insights-page-hero)
   ============================================================== */

.careers-page {
  background:
    linear-gradient(180deg, #fffaf2 0%, #f4f9f8 32%, #fff9f0 64%, #eaf3f3 100%);
  color: var(--ink);
}

/* ───────── Life at One Degree ───────── */
.cr-life {
  padding: 110px 0 80px;
}

.cr-life-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
}

.cr-life-copy h2 {
  margin: 18px 0 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.55rem;
  line-height: 1.16;
  letter-spacing: -0.008em;
  font-weight: 700;
  color: var(--navy);
}

.cr-life-copy p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.78;
}

.cr-life-points {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  gap: 16px;
}

.cr-life-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--va-line, rgba(15, 34, 48, 0.10));
  box-shadow: 0 8px 22px rgba(7, 25, 34, 0.06);
}

.cr-life-points svg {
  flex: 0 0 auto;
  width: 22px !important;
  height: 22px !important;
  color: var(--teal-dark);
  stroke-width: 2;
  margin-top: 2px;
}

.cr-life-points strong {
  display: block;
  color: var(--navy);
  font-weight: 800;
  margin-bottom: 2px;
}

.cr-life-points span {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

.cr-life-media {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: visible;
}

.cr-life-media img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 28px 60px rgba(7, 25, 34, 0.18);
  aspect-ratio: 5 / 6;
  object-fit: cover;
  display: block;
}

.cr-life-badge {
  position: absolute;
  left: -22px;
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--va-line, rgba(15, 34, 48, 0.10));
  box-shadow: 0 18px 40px rgba(7, 25, 34, 0.14);
  border-left: 4px solid var(--gold);
}

.cr-life-badge svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--gold);
  stroke-width: 2.2;
  flex: 0 0 auto;
}

.cr-life-badge strong {
  display: block;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
}

.cr-life-badge span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

/* ───────── Hiring Process (compact horizontal rail) ───────── */
.cr-rail {
  position: relative;
  padding: 96px 0 100px;
  background:
    radial-gradient(circle at 92% 8%, rgba(199, 146, 74, 0.10), transparent 55%),
    radial-gradient(circle at 6% 92%, rgba(13, 122, 120, 0.08), transparent 55%),
    #ffffff;
  border-top: 1px solid var(--va-line, rgba(15, 34, 48, 0.08));
  border-bottom: 1px solid var(--va-line, rgba(15, 34, 48, 0.08));
}

.cr-rail-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 56px;
}

.cr-rail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(13, 122, 120, 0.32);
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.08);
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cr-rail-eyebrow svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.4;
  flex: 0 0 auto;
}

.cr-rail-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1.14;
  letter-spacing: -0.008em;
  font-weight: 700;
  color: var(--navy);
}

.cr-rail-head h2 em {
  font-style: italic;
  color: var(--teal-dark);
}

.cr-rail-head > p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.cr-rail-head strong {
  color: var(--teal-dark);
  font-weight: 800;
}

/* Track: 6 columns; rail line passes through the NUMBER row at the top,
   then icon nodes and labels stack cleanly below. */
.cr-rail-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 8px;
  padding: 20px 0 8px;
  --rail-num-size: 38px;
  --rail-line-top: 19px;
}

/* The continuous track sits behind the number badges. We use two layered
   lines: a static dashed track + a solid progress fill that animates. */
.cr-rail-line {
  position: absolute;
  top: var(--rail-line-top);
  left: calc((100% / 6) / 2);
  right: calc((100% / 6) / 2);
  height: 2px;
  z-index: 0;
  background-image: linear-gradient(
    to right,
    rgba(15, 34, 48, 0.22) 0,
    rgba(15, 34, 48, 0.22) 6px,
    transparent 6px,
    transparent 12px
  );
  background-size: 12px 2px;
  background-repeat: repeat-x;
}

.cr-rail-line-fill {
  display: block;
  position: absolute;
  inset: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal-dark) 0%, var(--gold) 100%);
  border-radius: 2px;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(199, 146, 74, 0.35);
}

.cr-rail-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.25s ease;
}

.cr-rail-step:hover {
  transform: translateY(-2px);
}

/* Number badge sits ON the line — looks like a bead on a string */
.cr-rail-step-num {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-num-size);
  height: var(--rail-num-size);
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(15, 34, 48, 0.18);
  color: rgba(15, 34, 48, 0.55);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 6px #ffffff,
              0 4px 10px rgba(7, 25, 34, 0.06);
  transition: background 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Vertical drop-line from the bead to the icon below */
.cr-rail-step-num::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 14px;
  border-left: 1.5px dashed rgba(15, 34, 48, 0.22);
  transform: translateX(-50%);
  transition: border-color 0.3s ease;
}

/* Icon node — floats below the bead, no line crosses it */
.cr-rail-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-top: -2px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(15, 34, 48, 0.12);
  color: rgba(15, 34, 48, 0.55);
  box-shadow: 0 8px 22px rgba(7, 25, 34, 0.08);
  transition: background 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.cr-rail-node svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.9;
}

.cr-rail-label {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(15, 34, 48, 0.58);
  max-width: 130px;
  transition: color 0.25s ease;
}

/* ── States ─────────────────────────────────────────── */
.cr-rail-step.is-passed .cr-rail-step-num {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}

.cr-rail-step.is-passed .cr-rail-step-num::after {
  border-left-color: rgba(13, 122, 120, 0.55);
}

.cr-rail-step.is-passed .cr-rail-node {
  border-color: rgba(13, 122, 120, 0.4);
  background: rgba(13, 122, 120, 0.06);
  color: var(--teal-dark);
}

.cr-rail-step.is-active .cr-rail-step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 0 6px #ffffff,
              0 8px 18px rgba(199, 146, 74, 0.4);
}

.cr-rail-step.is-active .cr-rail-step-num::after {
  border-left-color: rgba(199, 146, 74, 0.6);
}

.cr-rail-step.is-active .cr-rail-node {
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 100%);
  border-color: var(--gold);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 14px 30px rgba(13, 122, 120, 0.32),
              0 0 0 4px rgba(199, 146, 74, 0.18);
}

.cr-rail-step.is-active .cr-rail-label {
  color: var(--navy);
  font-weight: 800;
}

.cr-rail-step:focus-visible {
  outline: none;
}

.cr-rail-step:focus-visible .cr-rail-step-num {
  box-shadow: 0 0 0 4px rgba(199, 146, 74, 0.4);
}

/* Panel: split into side meta + main body */
.cr-rail-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 0;
  margin-top: 48px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--va-line, rgba(15, 34, 48, 0.10));
  box-shadow: 0 22px 50px rgba(7, 25, 34, 0.10);
}

.cr-rail-panel-side {
  position: relative;
  padding: 32px 32px 30px;
  background: linear-gradient(155deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: #fff;
  overflow: hidden;
}

.cr-rail-panel-side::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 146, 74, 0.25), transparent 70%);
  pointer-events: none;
}

.cr-rail-panel-stage {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.cr-rail-panel-title {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1.16;
  color: #fff;
}

.cr-rail-panel-meta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(199, 146, 74, 0.2);
  border: 1px solid rgba(199, 146, 74, 0.42);
  color: #ffe2b8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.cr-rail-panel-meta svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.2;
  flex: 0 0 auto;
}

.cr-rail-panel-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 36px 24px;
  background: #ffffff;
}

.cr-rail-panel-body {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.74;
}

.cr-rail-panel-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cr-rail-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--va-line, rgba(15, 34, 48, 0.14));
  color: var(--teal-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cr-rail-nav:hover:not(:disabled) {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
  transform: translateY(-2px);
}

.cr-rail-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cr-rail-nav svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.2;
}


/* ───────── Application form ───────── */
.cr-apply {
  position: relative;
  padding: 110px 0 130px;
  background:
    radial-gradient(circle at 14% 18%, rgba(13, 122, 120, 0.18), transparent 55%),
    radial-gradient(circle at 88% 84%, rgba(199, 146, 74, 0.16), transparent 55%),
    linear-gradient(180deg, #07585a 0%, #0a3f4f 42%, #082836 76%, #071c26 100%);
  color: #fff;
  overflow: hidden;
}

.cr-apply::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0) 0%, rgba(7, 25, 34, 0.55) 40%, #071922 100%);
  z-index: 1;
}

.cr-apply .container {
  position: relative;
  z-index: 2;
}

.careers-page + .site-footer {
  margin-top: 0;
}

/* (was a -60px overlap + transparent→dark fade band; under the current theme
   that stacked into a hard dark block at the footer top) */
.careers-page + .site-footer::after {
  content: none;
}

.cr-apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: 24px;
}

.cr-apply-aside h2 {
  margin: 16px 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  line-height: 1.18;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.008em;
}

.cr-apply-aside p {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.02rem;
  line-height: 1.75;
}

.cr-apply-points {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 12px;
}

.cr-apply-points li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 700;
  width: max-content;
}

.cr-apply-points svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--gold);
  stroke-width: 2.2;
  flex: 0 0 auto;
}

.cr-apply-quote {
  position: relative;
  padding: 26px 28px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
}

.cr-apply-quote-mark {
  position: absolute;
  top: -14px;
  left: 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
}

.cr-apply-quote p {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #fff;
}

.cr-apply-quote-sig {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.cr-apply-form-card {
  padding: 38px 36px 34px;
  background: #ffffff;
  color: var(--ink);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
  border-top: 4px solid var(--gold);
}

.cr-apply-form {
  display: grid;
  gap: 18px;
}

.cr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.cr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cr-field > span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

.cr-field input,
.cr-field select,
.cr-field textarea {
  padding: 12px 14px;
  background: #fbfbfa;
  border: 1px solid rgba(15, 34, 48, 0.16);
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.4;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cr-field input:focus,
.cr-field select:focus,
.cr-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(13, 122, 120, 0.16);
}

.cr-field textarea {
  resize: vertical;
  min-height: 110px;
}

.cr-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--teal-dark) 50%),
    linear-gradient(135deg, var(--teal-dark) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* ── Resume drag-and-drop uploader (careers form) ── */
.cr-dropzone {
  position: relative;
  display: grid;
  place-items: center;
  padding: 22px 18px;
  text-align: center;
  background: #fbfbfa;
  border: 1.5px dashed rgba(15, 34, 48, 0.28);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.cr-dropzone:hover {
  border-color: var(--teal);
  background: #fff;
}

.cr-dropzone.is-dragover {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 7%, #fff);
  box-shadow: 0 0 0 4px rgba(13, 122, 120, 0.14);
}

/* Native input stays in the form (so it submits and can be opened
   programmatically) but is visually hidden behind the styled zone. */
.cr-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cr-dropzone__prompt {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.cr-dropzone__prompt svg {
  width: 30px;
  height: 30px;
  color: var(--teal-dark);
  stroke-width: 1.8;
}

.cr-dropzone__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.cr-dropzone__browse {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cr-dropzone__hint {
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.cr-dropzone__file {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 4px 4px 6px;
}

.cr-dropzone__file svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--teal-dark);
}

.cr-dropzone__filename {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-dropzone__remove {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 34, 48, 0.06);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cr-dropzone__remove:hover {
  background: rgba(226, 109, 90, 0.16);
  color: var(--coral);
}

.cr-dropzone__remove svg {
  width: 16px;
  height: 16px;
}

.cr-dropzone.has-file {
  cursor: default;
  padding: 14px;
}

.cr-dropzone.has-file .cr-dropzone__prompt {
  display: none;
}

.cr-dropzone__error {
  margin: 8px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #c0392b;
}

.cr-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}

.cr-checkbox input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--teal-dark);
}

.cr-apply-submit {
  width: max-content;
  margin-top: 4px;
}

/* ───────── Careers responsive ───────── */
@media (max-width: 960px) {
  .cr-life {
    padding: 72px 0 60px;
  }
  .cr-life-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cr-life-copy h2,
  .cr-rail-head h2,
  .cr-apply-aside h2 {
    font-size: 1.95rem;
  }
  .cr-rail {
    padding: 72px 0 80px;
  }
  .cr-rail-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 40px;
    align-items: start;
  }
  .cr-rail-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 32px;
    column-gap: 14px;
    padding-top: 12px;
  }
  .cr-rail-line {
    display: none;
  }
  .cr-rail-step-num::after {
    height: 10px;
  }
  .cr-rail-node {
    width: 58px;
    height: 58px;
  }
  .cr-rail-node svg {
    width: 22px !important;
    height: 22px !important;
  }
  .cr-rail-label {
    font-size: 0.82rem;
  }
  .cr-rail-panel {
    grid-template-columns: 1fr;
  }
  .cr-rail-panel-side {
    padding: 26px 26px 24px;
  }
  .cr-rail-panel-main {
    padding: 26px 26px 22px;
  }
  .cr-rail-panel-title {
    font-size: 1.65rem;
  }
  .cr-apply {
    padding: 80px 0 110px;
  }
  .cr-apply-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .cr-apply-form-card {
    padding: 30px 26px 28px;
  }
}

@media (max-width: 640px) {
  .cr-life-badge {
    left: 16px;
    bottom: 16px;
  }
  .cr-rail-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
    column-gap: 10px;
  }
  .cr-rail-node {
    width: 54px;
    height: 54px;
  }
  .cr-rail-node svg {
    width: 20px !important;
    height: 20px !important;
  }
  .cr-rail-step-num {
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
  }
  .cr-form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ============================================================
   Theme utilities
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cream theme: F4F1EC paper, blue #1A0088, orange #FF5E32 */
html[data-color-theme="cream"] {
  color-scheme: light;
  --ink: #181134;
  --muted: #5f5a85;
  --navy: #1a0088;
  --deep: #100258;
  --teal: #ff5e32;
  --teal-dark: #d8431d;
  --aqua: color-mix(in srgb, #1a0088 7%, #f4f1ec);
  --blue-soft: color-mix(in srgb, #1a0088 5%, #ffffff);
  --gold: #ff8a5c;
  --coral: #ff5e32;
  --sage: color-mix(in srgb, #1a0088 36%, #8a8579);
  --paper: #ffffff;
  --ivory: #f4f1ec;
  --mist: #efebe2;
  --line: rgba(26, 0, 136, 0.16);
  --shadow: 0 24px 70px rgba(40, 33, 22, 0.18);
  --shadow-soft: 0 14px 34px rgba(40, 33, 22, 0.12);
  --theme-body-bg: #f4f1ec;
  --theme-band-bg: #f4f1ec;
  --theme-band-alt: #ece7df;
  --theme-band-deep: linear-gradient(180deg, #2a16a0 0%, #1a0088 56%, #100258 100%);
  --theme-nav-bg: rgba(244, 241, 236, 0.92);
  --theme-notice-bg: #1a0088;
  --theme-surface: rgba(255, 255, 255, 0.96);
  --theme-surface-solid: #ffffff;
  --theme-field-bg: #faf8f3;
  --theme-field-border: rgba(26, 0, 136, 0.18);
  --theme-border: rgba(26, 0, 136, 0.14);
  --theme-border-soft: rgba(40, 33, 22, 0.08);
  --theme-card-shadow: 0 16px 38px rgba(40, 33, 22, 0.12);
  --theme-focus-ring: rgba(255, 94, 50, 0.32);
  --theme-accent-hover: #d8431d;
  --theme-brand-gradient: linear-gradient(135deg, #1a0088 0%, #2a16a0 50%, #ff5e32 100%);
  --theme-highlight-gradient: var(--animated-text-gradient);
  --theme-hero-overlay:
    linear-gradient(90deg, rgba(16, 2, 88, 0.92) 0%, rgba(26, 0, 136, 0.7) 50%, rgba(255, 94, 50, 0.18) 100%),
    linear-gradient(180deg, rgba(16, 2, 88, 0.36) 0%, rgba(16, 2, 88, 0.06) 52%, rgba(16, 2, 88, 0.84) 100%);
  --theme-glass-bg: linear-gradient(155deg, rgba(26, 0, 136, 0.32), rgba(16, 2, 88, 0.22) 62%, rgba(255, 94, 50, 0.16));
  --theme-glass-border: rgba(255, 255, 255, 0.32);
  --theme-form-bg: linear-gradient(155deg, rgba(26, 0, 136, 0.32), rgba(16, 2, 88, 0.28) 60%, rgba(255, 94, 50, 0.16));
  --theme-form-focus: #ff5e32;
  --theme-dark-text: rgba(255, 255, 255, 0.88);
  --theme-dark-muted: rgba(255, 255, 255, 0.7);
  --theme-home-ground: #f4f1ec;
  --theme-home-ground-alt: #ece7df;
  --theme-home-dark: #1a0088;
}

html[data-color-theme] body {
  color: var(--ink);
  background: var(--theme-body-bg);
}

html[data-color-theme] :focus-visible {
  outline-color: var(--theme-focus-ring);
}

html[data-color-theme] .notice {
  background: var(--theme-notice-bg);
}

html[data-color-theme] .nav-shell,
html[data-color-theme] .site-header.is-scrolled .nav-shell {
  background: var(--theme-nav-bg);
  border-bottom-color: var(--theme-border-soft);
  box-shadow: 0 18px 50px rgba(47, 10, 88, 0.1);
}

/* Themed: stronger layered 3D float once scrolled. */
html[data-color-theme] .site-header.is-scrolled .nav-shell {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 4px 10px rgba(26, 0, 136, 0.08),
    0 12px 24px rgba(26, 0, 136, 0.12),
    0 24px 48px rgba(47, 10, 88, 0.16);
}

html[data-color-theme] .brand strong {
  color: var(--navy);
}

html[data-color-theme] .brand small {
  color: var(--coral);
}

/* Footer brand sits on the dark footer — main wordmark white (not navy),
   sub-line keeps the orange accent (same Jost/Outfit lockup as the nav). */
html[data-color-theme] .brand-footer strong {
  color: #ffffff;
}

html[data-color-theme] .nav-menu a,
html[data-color-theme] .nav-trigger,
html[data-color-theme] .students-hub-trigger {
  color: var(--navy);
}

html[data-color-theme] .nav-dropdown {
  border-color: var(--theme-border);
  background: var(--theme-surface-solid);
  box-shadow: var(--shadow);
}

html[data-color-theme] .nav-dropdown::before {
  border-color: var(--theme-border);
}

html[data-color-theme] .nav-dropdown--courses .nav-dropdown-shell {
  background:
    linear-gradient(180deg, var(--theme-surface-solid) 0%, color-mix(in srgb, var(--aqua) 18%, var(--theme-surface-solid)) 100%);
}

html[data-color-theme] .nav-menu .course-menu-card {
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--theme-surface-solid) 86%, transparent);
}

html[data-color-theme] .nav-menu .course-menu-card--mbbs {
  border-color: rgba(199, 146, 74, 0.58);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(135deg, #fff7d8 0%, #f5d98c 48%, #efbd58 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(124, 83, 25, 0.14);
}

html[data-color-theme] .nav-menu .course-menu-card:hover {
  border-color: color-mix(in srgb, var(--teal) 32%, transparent);
  background: var(--aqua);
}

html[data-color-theme] .nav-menu .course-menu-card--mbbs:hover {
  border-color: rgba(199, 146, 74, 0.68);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, #fff0b8 0%, #f0c969 48%, #dda03a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 14px 28px rgba(124, 83, 25, 0.18);
}

html[data-color-theme] .nav-dropdown-badge,
html[data-color-theme] .dest-card:hover {
  background: var(--aqua);
}

html[data-color-theme] .nav-dropdown-feature,
html[data-color-theme] .world-map-panel,
html[data-color-theme] .contact-card,
html[data-color-theme] .contact-info-panel,
html[data-color-theme] .insights-decision-band,
html[data-color-theme] .country-section.dark,
html[data-color-theme] .mbbs-neet-panel article {
  background: var(--theme-band-deep);
  color: #ffffff;
}

html[data-color-theme] .feature-icon,
html[data-color-theme] .feature-cta,
html[data-color-theme] .text-link,
html[data-color-theme] .insights-feature-copy a,
html[data-color-theme] .insights-article-body a,
html[data-color-theme] .contact-head-phone svg,
html[data-color-theme] .contact-list svg,
html[data-color-theme] .form-status {
  color: var(--teal-dark);
}

html[data-color-theme] .hero .eyebrow,
html[data-color-theme] .gold-text,
html[data-color-theme] .country-hero h1 .gold-text {
  background-image: var(--animated-text-gradient);
}

/* Home hero — "Global Admissions" eyebrow + "one degree" share the golden
   gradient defined in :root as --hero-gold-gradient. */
html[data-color-theme] .home-page .hero .eyebrow,
.home-page .hero .eyebrow,
html[data-color-theme] .home-page .hero .hero-headline .gold-text,
.home-page .hero .hero-headline .gold-text {
  background-image: var(--hero-gold-gradient);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* slow, subtle golden sheen sweeping across the text */
  animation: goldShimmer 7s ease-in-out infinite;
  filter: drop-shadow(0 1px 6px rgba(16, 4, 70, 0.30));
}

@media (prefers-reduced-motion: reduce) {
  html[data-color-theme] .home-page .hero .eyebrow,
  .home-page .hero .eyebrow,
  html[data-color-theme] .home-page .hero .hero-headline .gold-text,
  .home-page .hero .hero-headline .gold-text {
    animation: none;
    background-position: 50% 50%;
  }
}

/* Italic text painted with background-clip:text is filled only inside the
   element's box. The italic slant on the final letter (the "e" in "one degree")
   overshoots that box on the right and loses its gradient fill, so it looks
   clipped. A hair of right padding extends the paint area to cover the slant;
   the matching negative margin keeps the layout unchanged. */
.home-page .hero .hero-headline .gold-text {
  padding-right: 0.12em;
  margin-right: -0.12em;
}

/* The eyebrow's little leading line picks up the same gold. */
html[data-color-theme] .home-page .hero .eyebrow::before,
.home-page .hero .eyebrow::before {
  background: var(--hero-gold-gradient);
}

html[data-color-theme] .hero .eyebrow::before {
  background: var(--animated-text-gradient);
}

html[data-color-theme] .home-page .hero [data-he-style-part].he-text-solid,
.home-page .hero [data-he-style-part].he-text-solid {
  background: none !important;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: var(--he-text-color) !important;
          color: var(--he-text-color) !important;
  animation: none;
}

html[data-color-theme] .home-page .hero [data-he-style-part].he-text-gradient,
.home-page .hero [data-he-style-part].he-text-gradient {
  background-image: linear-gradient(105deg, var(--he-grad-a), var(--he-grad-b), var(--he-grad-a)) !important;
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: goldShimmer 7s ease-in-out infinite;
}

html[data-color-theme] .home-page .hero .eyebrow.he-text-solid::before,
.home-page .hero .eyebrow.he-text-solid::before {
  background: var(--he-text-color);
}

html[data-color-theme] .home-page .hero .eyebrow.he-text-gradient::before,
.home-page .hero .eyebrow.he-text-gradient::before {
  background: linear-gradient(105deg, var(--he-grad-a), var(--he-grad-b));
}

.home-page .hero [data-he-style-part].he-anim-none {
  animation: none !important;
  background-position: 50% 50%;
}

.home-page .hero [data-he-style-part].he-anim-shimmer {
  animation: goldShimmer 7s ease-in-out infinite !important;
  background-size: 220% 100%;
}

.home-page .hero [data-he-style-part].he-anim-pulse {
  animation: heHeroTextPulse 2.8s ease-in-out infinite !important;
}

.home-page .hero [data-he-style-part].he-anim-lift {
  animation: heHeroTextLift 4s ease-in-out infinite !important;
  will-change: transform;
}

.home-page .hero .eyebrow.he-anim-lift {
  display: inline-flex;
}

.home-page .hero .gold-text.he-anim-lift,
.home-page .hero .he-heading-text.he-anim-lift {
  display: inline-block;
}

@keyframes heHeroTextPulse {
  0%, 100% {
    filter: drop-shadow(0 1px 6px rgba(16, 4, 70, 0.22));
    opacity: 1;
  }
  50% {
    filter: drop-shadow(0 1px 12px rgba(255, 214, 122, 0.56));
    opacity: 0.82;
  }
}

@keyframes heHeroTextLift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero [data-he-style-part].he-anim-shimmer,
  .home-page .hero [data-he-style-part].he-anim-pulse,
  .home-page .hero [data-he-style-part].he-anim-lift {
    animation: none !important;
  }
}

/* Destination page gold text (hero name, "Indian students" band highlight, etc.)
   uses the multi-colour animated gradient, matching the deployed site. */
html[data-color-theme] .country-hero h1 .gold-text,
html[data-color-theme] .country-main--dynamic .gold-text,
.country-hero h1 .gold-text,
.country-main--dynamic .gold-text {
  background-image: var(--animated-text-gradient);
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: goldShimmer 7s ease-in-out infinite;
  filter: drop-shadow(0 1px 6px rgba(16, 4, 70, 0.30));
}

@media (prefers-reduced-motion: reduce) {
  html[data-color-theme] .country-hero h1 .gold-text,
  html[data-color-theme] .country-main--dynamic .gold-text,
  .country-hero h1 .gold-text,
  .country-main--dynamic .gold-text {
    animation: none;
    background-position: 50% 50%;
  }
}

html[data-color-theme] .btn-ghost,
html[data-color-theme] .country-hero .btn-ghost {
  border-color: var(--theme-glass-border);
  background: rgba(255, 255, 255, 0.13);
}

html[data-color-theme] .btn-primary,
html[data-color-theme] .nav-cta,
html[data-color-theme] .hc-submit,
html[data-color-theme] .site-footer .footer-contact-button,
html[data-color-theme] .mbbs-hero .btn.mbbs-hero-cta {
  background: var(--coral);
  color: #ffffff;
  box-shadow: 0 18px 36px var(--theme-focus-ring);
}

html[data-color-theme] .btn-primary:hover,
html[data-color-theme] .nav-cta:hover,
html[data-color-theme] .hc-submit:hover,
html[data-color-theme] .site-footer .footer-contact-button:hover {
  background: var(--theme-accent-hover);
}

html[data-color-theme] .btn-secondary,
html[data-color-theme] .contact-fab,
html[data-color-theme] .destination-controls button.is-active {
  background: var(--teal);
  color: #ffffff;
}

html[data-color-theme] .contact-fab:hover,
html[data-color-theme] .contact-fab:focus-visible {
  background: var(--teal-dark);
}

html[data-color-theme] .hero-consult {
  --hc-border: var(--theme-glass-border);
  --hc-border-focus: var(--theme-form-focus);
  --hc-input-bg: rgba(255, 255, 255, 0.09);
  --hc-input-bg-focus: rgba(255, 255, 255, 0.16);
  background: var(--theme-form-bg);
  border-color: var(--theme-glass-border);
}

html[data-color-theme] .hc-field input:focus,
html[data-color-theme] .hc-field select:focus,
html[data-color-theme] .cbx.is-open .cbx-field,
html[data-color-theme] .cbx-field:focus-visible,
html[data-color-theme] .cbx-field:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-form-focus) 28%, transparent);
}

html[data-color-theme] .hc-field input:focus + .hc-label,
html[data-color-theme] .hc-field input:not(:placeholder-shown) + .hc-label,
html[data-color-theme] .hc-select select:focus ~ .hc-label,
html[data-color-theme] .hc-select select:valid ~ .hc-label,
html[data-color-theme] .hc-select.is-enhanced.is-filled > .hc-label,
html[data-color-theme] .hc-select.is-enhanced.is-focused > .hc-label,
html[data-color-theme] .hc-select.is-enhanced:focus-within > .hc-label,
html[data-color-theme] .hc-select.is-enhanced:has(.cbx.is-open) > .hc-label,
html[data-color-theme] .cbx.is-open .cbx-chevron {
  color: var(--theme-form-focus);
}

html[data-color-theme] .hc-field input:focus + .hc-label,
html[data-color-theme] .hc-field input:not(:placeholder-shown) + .hc-label,
html[data-color-theme] .hc-select select:focus ~ .hc-label,
html[data-color-theme] .hc-select select:valid ~ .hc-label,
html[data-color-theme] .hc-select.is-enhanced.is-filled > .hc-label,
html[data-color-theme] .hc-select.is-enhanced.is-focused > .hc-label,
html[data-color-theme] .hc-select.is-enhanced:focus-within > .hc-label,
html[data-color-theme] .hc-select.is-enhanced:has(.cbx.is-open) > .hc-label {
  background: color-mix(in srgb, var(--deep) 92%, transparent);
}

html[data-color-theme] .pathfinder {
  background:
    linear-gradient(
      180deg,
      rgba(7, 25, 34, 0.9) 0%,
      rgba(7, 25, 34, 0.48) 34%,
      var(--theme-home-ground) 100%
    );
}

html[data-color-theme] .audience-section,
html[data-color-theme] .method-section,
html[data-color-theme] .solutions-section,
html[data-color-theme] .destinations-section,
html[data-color-theme] .outcomes-section,
html[data-color-theme] .insights-section,
html[data-color-theme] .about-section,
html[data-color-theme] .contact-section,
html[data-color-theme] .insights-page-hero,
html[data-color-theme] .insights-feature-section,
html[data-color-theme] .insights-page-section,
html[data-color-theme] .insights-planning-section,
html[data-color-theme] .contact-page-main,
html[data-color-theme] .country-section.alt,
html[data-color-theme] .country-section.paper,
html[data-color-theme] .mbbs-hero,
html[data-color-theme] .mbbs-paths,
html[data-color-theme] .mbbs-practice,
html[data-color-theme] .mbbs-neet,
html[data-color-theme] .mbbs-finance,
html[data-color-theme] .mbbs-faq {
  background: var(--theme-band-bg);
}

html[data-color-theme] .signal-strip,
html[data-color-theme] .insights-directory,
html[data-color-theme] .about-stats-band,
html[data-color-theme] .mbbs-corridor,
html[data-color-theme] .mbbs-career,
html[data-color-theme] .mbbs-parents,
html[data-color-theme] .mbbs-universities,
html[data-color-theme] .mbbs-compare,
html[data-color-theme] .mbbs-timeline {
  background: var(--theme-band-alt);
}

html[data-color-theme] .insights-page-main,
html[data-color-theme] .country-main,
html[data-color-theme] .mbbs-page {
  background: var(--theme-body-bg);
}

html[data-color-theme] .contact-section,
html[data-color-theme] .insights-cta-section {
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-surface-solid) 88%, var(--aqua)) 0%, var(--aqua) 54%, var(--deep) 100%);
}

html[data-color-theme] .insights-page-hero::after,
html[data-color-theme] .solutions-section::before,
html[data-color-theme] .destinations-section::before,
html[data-color-theme] .outcomes-section::before,
html[data-color-theme] .about-section::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--theme-surface-solid));
}

html[data-color-theme] .solutions-section::before,
html[data-color-theme] .destinations-section::before,
html[data-color-theme] .outcomes-section::before,
html[data-color-theme] .about-section::before {
  display: none;
}

html[data-color-theme] .signal-strip {
  background: linear-gradient(180deg, var(--theme-home-ground) 0%, var(--theme-home-ground-alt) 100%);
}

html[data-color-theme] .audience-section,
html[data-color-theme] .method-section {
  background: linear-gradient(180deg, var(--theme-home-ground-alt) 0%, var(--theme-home-ground) 100%);
}

html[data-color-theme] .solutions-section {
  background: linear-gradient(180deg, var(--theme-home-ground) 0%, color-mix(in srgb, var(--theme-home-ground) 70%, var(--theme-home-ground-alt)) 100%);
}

html[data-color-theme] .destinations-section {
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-home-ground) 78%, var(--theme-home-ground-alt)) 0%, var(--theme-home-ground-alt) 100%);
}

html[data-color-theme] .outcomes-section,
html[data-color-theme] .about-section,
html[data-color-theme] .insights-section {
  background: linear-gradient(180deg, var(--theme-home-ground-alt) 0%, var(--theme-home-ground) 100%);
}

html[data-color-theme] .contact-section {
  background:
    linear-gradient(
      180deg,
      var(--theme-home-ground) 0%,
      var(--theme-home-ground-alt) 44%,
      color-mix(in srgb, var(--theme-home-dark) 82%, var(--theme-home-ground-alt)) 74%,
      var(--theme-home-dark) 100%
    );
}

html[data-color-theme] :is(
  .pathfinder-shell,
  .signal,
  .audience-card,
  .journey-step,
  .service-card,
  .destination-card,
  .testimonial,
  .insight-card,
  .insights-hero-panel,
  .insights-feature-card,
  .insights-article-card,
  .insights-planning-grid article,
  .insights-cta-panel,
  .about-stat,
  .about-team-card,
  .origin-pillar,
  .origin-shell,
  .consult-form,
  .contact-page-grid,
  .contact-form-panel,
  .contact-response-card,
  .contact-head-phone,
  .uni-img-card,
  .course-card,
  .edu-level-card,
  .reason-card,
  .info-card,
  .cost-card,
  .life-card,
  .work-pr-card,
  .timeline-item,
  .mbbs-path-card,
  .mbbs-country-card,
  .mbbs-university-board article,
  .mbbs-check-card,
  .mbbs-finance-card,
  .mbbs-faq-grid article,
  .mbbs-career-rail li,
  .mbbs-parent-list li,
  .mbbs-compare-table,
  .mbbs-timeline-grid article
) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: var(--theme-card-shadow);
}

/* Read More CTA card keeps its brand gradient (not the themed white surface).
   Two classes so it outranks the themed :is() surface rule (which is (0,2,2)). */
html[data-color-theme] .insight-card.insight-card-more {
  background: linear-gradient(150deg, var(--navy) 0%, var(--coral) 130%);
  border-color: transparent;
  box-shadow: var(--theme-card-shadow);
}

html[data-color-theme] :is(.pathfinder-shell, .signal, .audience-card, .journey-step, .service-card, .destination-card, .testimonial, .insights-article-card, .about-stat, .about-team-card, .origin-pillar):hover {
  border-color: color-mix(in srgb, var(--teal) 34%, transparent);
}

html[data-color-theme] label span,
html[data-color-theme] .contact-phone-label,
html[data-color-theme] .section-lead p,
html[data-color-theme] .signal p,
html[data-color-theme] .audience-card p,
html[data-color-theme] .journey-step p,
html[data-color-theme] .service-card p,
html[data-color-theme] .destination-card p,
html[data-color-theme] .insights-feature-copy p,
html[data-color-theme] .insights-section-head p,
html[data-color-theme] .insights-article-body p,
html[data-color-theme] .insights-planning-grid p,
html[data-color-theme] .contact-page-head-aside p,
html[data-color-theme] .course-card p,
html[data-color-theme] .uni-img-card .uni-loc,
html[data-color-theme] .mbbs-section-head p,
html[data-color-theme] .mbbs-country-note,
html[data-color-theme] .mbbs-country-grid-meta dt,
html[data-color-theme] .mbbs-check-card p,
html[data-color-theme] .mbbs-finance-card p,
html[data-color-theme] .mbbs-faq-grid p,
html[data-color-theme] .mbbs-career-rail p,
html[data-color-theme] .mbbs-parent-list li {
  color: var(--muted);
}

html[data-color-theme] .insights-page-copy h1,
html[data-color-theme] .insights-feature-copy h2,
html[data-color-theme] .insights-section-head h2,
html[data-color-theme] .insights-article-body h3,
html[data-color-theme] .contact-page-title,
html[data-color-theme] .contact-page-kicker,
html[data-color-theme] .country-section .section-head h2,
html[data-color-theme] .uni-img-card .uni-body h3,
html[data-color-theme] .course-card h3,
html[data-color-theme] .mbbs-section-head h2,
html[data-color-theme] .mbbs-universities h2,
html[data-color-theme] .mbbs-neet h2,
html[data-color-theme] .mbbs-parents h2,
html[data-color-theme] .mbbs-country-head h3,
html[data-color-theme] .mbbs-country-grid-meta dd {
  color: var(--navy);
}

html[data-color-theme] input,
html[data-color-theme] select,
html[data-color-theme] textarea,
html[data-color-theme] .contact-phone .cbx-field {
  border-color: var(--theme-field-border);
  background: var(--theme-field-bg);
  color: var(--ink);
}

html[data-color-theme] input:focus,
html[data-color-theme] select:focus,
html[data-color-theme] textarea:focus {
  border-color: color-mix(in srgb, var(--teal) 68%, transparent);
  box-shadow: 0 0 0 4px var(--theme-focus-ring);
}

html[data-color-theme] .finder-note,
html[data-color-theme] .consent span,
html[data-color-theme] .contact-privacy {
  color: var(--muted);
}

html[data-color-theme] .site-footer .footer-address {
  color: rgba(255, 255, 255, 0.72);
}

html[data-color-theme] .contact-response-card {
  border-color: var(--theme-border);
}

html[data-color-theme] .contact-response-card strong {
  color: var(--teal-dark);
}

html[data-color-theme] .contact-response-card span {
  color: var(--navy);
}

html[data-color-theme] .contact-response-card p {
  color: var(--muted);
}

html[data-color-theme] .signal span,
html[data-color-theme] .destination-controls button,
html[data-color-theme] .insights-feature-points span,
html[data-color-theme] .uni-img-card .uni-meta span,
html[data-color-theme] .mbbs-career-rail span {
  background: var(--aqua);
  border-color: var(--theme-border);
  color: var(--teal-dark);
}

html[data-color-theme] .journey-step::after,
html[data-color-theme] .mbbs-routes-grid span::before {
  background: var(--coral);
  box-shadow: 0 0 0 7px var(--theme-focus-ring);
}

html[data-color-theme] .country-hero {
  background-color: var(--deep);
}

/* Base hero overlay ends on a teal-green corner wash; re-tint that stop to the
   active theme so it matches the rest of the site. */
html[data-color-theme] .country-hero::before {
  background:
    linear-gradient(120deg, rgba(7, 25, 34, 0.55) 0%, rgba(7, 25, 34, 0.32) 50%, color-mix(in srgb, var(--teal) 18%, transparent) 100%),
    linear-gradient(180deg, rgba(7, 25, 34, 0.22) 0%, rgba(7, 25, 34, 0.08) 50%, rgba(7, 25, 34, 0.5) 100%);
}

/* One simple, flat deep-indigo wash over the photo (matches the theme; no
   multi-stop gradient). Calm and even, not fancy. */
html[data-color-theme] .country-band::before {
  background: rgba(16, 2, 88, 0.32);
}

/* "At a glance" snapshot rail shipped a teal-green glass gradient; re-tint it
   (and its hover/open state) to the active theme so no green leaks through. */
html[data-color-theme] .country-snapshot {
  background:
    radial-gradient(135% 90% at 100% 0%, color-mix(in srgb, var(--coral) 26%, transparent) 0%, transparent 52%),
    linear-gradient(160deg, color-mix(in srgb, var(--navy) 52%, transparent) 0%, color-mix(in srgb, var(--deep) 62%, transparent) 100%);
}

html[data-color-theme] .country-snapshot:hover,
html[data-color-theme] .country-snapshot:focus-within,
html[data-color-theme] .country-snapshot.is-open {
  background:
    radial-gradient(135% 90% at 100% 0%, color-mix(in srgb, var(--coral) 34%, transparent) 0%, transparent 54%),
    linear-gradient(160deg, color-mix(in srgb, var(--navy) 62%, transparent) 0%, color-mix(in srgb, var(--deep) 70%, transparent) 100%);
}

html[data-color-theme] .country-hero .eyebrow,
html[data-color-theme] .country-section.dark .section-head .eyebrow,
html[data-color-theme] .country-band .eyebrow {
  color: var(--theme-form-focus);
}

/* ── Eyebrow chip (image band only) ──
   On the Indian-students banner the eyebrow sits over a photo, where the brand
   orange blended into the sky and was hard to read. Only there do we wrap it in
   a frosted-glass chip so it has its own contrasting surface. Other sections
   keep their normal eyebrow style. */
.country-band .eyebrow {
  position: relative;
  align-self: flex-start;
  width: fit-content;
  gap: 9px;
  margin-bottom: 6px;
  padding: 8px 15px;
  border-radius: 10px;
  /* Orange→blue gradient text. The glass panel lives on ::after so this
     background can be clipped to the letters without losing the frost. */
  background-image: linear-gradient(100deg, #ff5e32 0%, #ff9166 38%, #a7c6f2 72%, #c2d8f7 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Frosted-glass panel behind the text — dark navy tint for contrast, a white
   sheen on top, real blur, inner highlight + edge (like the band-stat cards). */
.country-band .eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%),
    rgba(7, 25, 34, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
          backdrop-filter: blur(14px) saturate(125%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 30px rgba(7, 25, 34, 0.32);
}

/* Leading dash: tighten it and give it the orange end of the gradient
   (currentColor is transparent now that the text fill is clipped). */
.country-band .eyebrow::before {
  width: 16px;
  background: #ff5e32;
}

html[data-color-theme] .country-hero .btn-primary,
html[data-color-theme] .country-cta .btn-primary {
  background: var(--coral);
  color: #ffffff;
}

html[data-color-theme] .origin-section {
  background:
    linear-gradient(
      180deg,
      var(--theme-home-ground-alt) 0%,
      color-mix(in srgb, var(--theme-home-ground) 72%, var(--theme-home-ground-alt)) 100%
    );
}

html[data-color-theme] .origin-section::before {
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%);
}

html[data-color-theme] .origin-section::after {
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--coral) 16%, transparent), transparent 70%);
}

html[data-color-theme] .origin-shell {
  background: color-mix(in srgb, var(--theme-surface-solid) 82%, var(--theme-home-ground-alt));
}

html[data-color-theme] .origin-head {
  border-bottom-color: var(--theme-border);
}

html[data-color-theme] .country-nav {
  background: color-mix(in srgb, var(--theme-surface-solid) 92%, transparent);
  border-bottom-color: var(--theme-border-soft);
}

html[data-color-theme] .country-nav-track a {
  background: var(--theme-surface-solid);
  border-color: var(--theme-border);
  color: var(--teal-dark);
}

html[data-color-theme] .country-nav-track a:hover {
  background: var(--theme-brand-gradient);
  color: #ffffff;
}

html[data-color-theme] .country-cta {
  background: var(--theme-band-deep);
}

html[data-color-theme] .country-section.dark .section-head h2,
html[data-color-theme] .country-section.dark h3,
html[data-color-theme] .country-section.dark h4,
html[data-color-theme] .country-cta h2,
html[data-color-theme] .country-cta-card h3,
html[data-color-theme] .country-cta-card li {
  color: #ffffff;
}

html[data-color-theme] .country-section.dark .section-head p,
html[data-color-theme] .country-cta p,
html[data-color-theme] .country-cta-card p {
  color: var(--theme-dark-text);
}

html[data-color-theme] .country-section.dark :is(.info-card, .reason-card, .cost-card, .life-card, .work-pr-card, .timeline-item, .edu-level-card, .course-card, .visa-step),
html[data-color-theme] .country-cta-card {
  background: color-mix(in srgb, #ffffff 10%, transparent);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: 0 20px 44px color-mix(in srgb, #000000 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-color-theme] .country-section.dark :is(.info-card li, .info-card li strong, .reason-card p, .life-card p, .work-pr-card p, .cost-card .cost-label, .cost-card .cost-value, .cost-card .cost-note, .timeline-item p, .visa-step p) {
  color: var(--theme-dark-text);
}

html[data-color-theme] .country-section.dark :is(.info-card h3, .reason-card h3, .life-card h3, .work-pr-card h3, .timeline-item h4, .visa-step h4) {
  color: #ffffff;
}

html[data-color-theme] .country-cta::after {
  background: linear-gradient(180deg, rgba(7, 25, 34, 0) 0%, var(--deep) 76%, var(--deep) 100%);
}

html[data-color-theme] .site-footer,
html[data-color-theme] .footer-marquee {
  background: var(--theme-band-deep);
}

html[data-color-theme] .footer-marquee {
  background:
    linear-gradient(
      180deg,
      var(--theme-home-dark) 0%,
      color-mix(in srgb, var(--theme-home-dark) 88%, #000 12%) 100%
    );
}

html[data-color-theme] .footer-marquee::before {
  background: linear-gradient(180deg, var(--theme-home-dark), rgba(7, 25, 34, 0));
}

html[data-color-theme] .footer-marquee::after {
  background: linear-gradient(0deg, var(--theme-home-dark), rgba(7, 25, 34, 0));
}

html[data-color-theme] .site-footer::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--deep) 88%, transparent) 0%, color-mix(in srgb, var(--deep) 58%, transparent) 42%, color-mix(in srgb, var(--deep) 84%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--deep) 94%, transparent) 0%, color-mix(in srgb, var(--deep) 52%, transparent) 46%, color-mix(in srgb, var(--deep) 72%, transparent) 100%);
}

html[data-color-theme] .footer-skyline::after {
  background:
    linear-gradient(180deg, var(--deep) 0%, rgba(7, 25, 34, 0) 26%),
    linear-gradient(0deg, color-mix(in srgb, var(--deep) 80%, transparent) 0%, rgba(7, 25, 34, 0.08) 44%, rgba(7, 25, 34, 0) 100%);
}

html[data-color-theme] .mbbs-v2-page {
  background: var(--theme-body-bg);
  color: var(--ink);
}

html[data-color-theme] .mbbs-v2-hero {
  background: var(--theme-band-bg);
}

html[data-color-theme] .mbbs-v2-services {
  background: var(--theme-band-alt);
}

html[data-color-theme] .mbbs-v2-hero-copy h1,
html[data-color-theme] .mbbs-v2-services-head h2,
html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-card .mbbs-country-head h3,
html[data-color-theme] .mbbs-v2-service-card h3 {
  color: var(--navy);
}

html[data-color-theme] .mbbs-v2-lede,
html[data-color-theme] .mbbs-v2-services-head p,
html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-card .mbbs-country-head p,
html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-card .mbbs-country-note,
html[data-color-theme] .mbbs-v2-service-card p {
  color: var(--muted);
}

html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-card,
html[data-color-theme] .mbbs-v2-service-card {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-card-shadow);
}

/* The country panel is just a layout wrapper — no surface/shadow, so the cards
   float on the page instead of sitting inside an outer panel. */
html[data-color-theme] .mbbs-v2-country-panel {
  background: transparent;
  box-shadow: none;
}

html[data-color-theme] .mbbs-v2-service-icon,
html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-card .mbbs-country-flag {
  background: color-mix(in srgb, var(--teal) 13%, var(--theme-surface-solid));
  color: var(--teal-dark);
}

html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-card .mbbs-country-cta {
  background: none;
  color: var(--teal-dark);
}

html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-more-card {
  background: linear-gradient(180deg, var(--theme-surface) 0%, color-mix(in srgb, var(--theme-band-alt) 42%, var(--theme-surface-solid)) 100%);
  border-color: color-mix(in srgb, var(--teal) 18%, var(--theme-border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--navy) 8%, transparent);
}

html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-more-card::before {
  background: linear-gradient(90deg, var(--teal), transparent);
}

html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-more-card::after {
  border-color: color-mix(in srgb, var(--teal) 14%, transparent);
}

html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-more-card:hover,
html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-more-card:focus-visible {
  border-color: color-mix(in srgb, var(--teal) 34%, var(--theme-border));
  box-shadow: 0 18px 38px color-mix(in srgb, var(--navy) 11%, transparent);
}

html[data-color-theme] .mbbs-v2-more-card__mark {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--teal) 18%, var(--theme-surface-solid)) 0%,
      color-mix(in srgb, var(--teal) 7%, var(--theme-surface-solid)) 100%);
  border-color: color-mix(in srgb, var(--teal) 22%, var(--theme-border));
  color: var(--teal-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 14px color-mix(in srgb, var(--teal) 16%, transparent);
}

html[data-color-theme] .mbbs-v2-more-card__action {
  color: var(--teal-dark);
}

html[data-color-theme] .mbbs-v2-more-card__chips .mbbs-v2-more-card__chip-extra {
  border-color: color-mix(in srgb, var(--teal) 32%, var(--theme-border));
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal-dark);
}

html[data-color-theme] .mbbs-v2-more-card__index,
html[data-color-theme] .mbbs-v2-more-card__eyebrow,
html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-more-card p,
html[data-color-theme] .mbbs-v2-more-card__chips span {
  color: var(--muted);
}

html[data-color-theme] .mbbs-v2-page .mbbs-v2-country-more-card h3 {
  color: var(--navy);
}

html[data-color-theme] .mbbs-v2-more-card__chips span {
  background: color-mix(in srgb, var(--theme-surface-solid) 76%, transparent);
  border-color: var(--theme-border);
}

/* ============================================================
   Signature Theme Page Overrides
   Applies when the permanent signature theme is active.
   ============================================================ */

/* ---------- Section transition flattening ----------
   The base site has many sections with their own backgrounds.
   The signature theme unifies them through theme tokens so the page
   reads as one continuous palette instead of color-jumping. */
html[data-color-theme] :is(
  .home-hero,
  .home-second,
  .home-band,
  .home-band--alt,
  .home-ground,
  .home-ground--alt,
  .insights-page,
  .insights-page-hero,
  .insights-feature,
  .insights-section,
  .insights-planning,
  .contact-page,
  .contact-page-hero,
  .contact-page-form,
  .mbbs-page,
  .mbbs-hero,
  .mbbs-section,
  .country-section,
  .country-band,
  .country-band-alt,
  .country-bg-soft,
  .country-bg-warm
) {
  background: var(--theme-band-bg);
}

html[data-color-theme] :is(
  .home-band--alt,
  .home-ground--alt,
  .insights-feature--alt,
  .country-band-alt,
  .mbbs-section--alt
) {
  background: var(--theme-band-alt);
}

/* Dark sections always use band-deep on themes */
html[data-color-theme] :is(
  .country-section.dark,
  .home-dark,
  .insights-dark
) {
  background: var(--theme-band-deep);
  color: #ffffff;
}

/* ---------- COUNTRY CTA CARD — readability fix ---------- */
html[data-color-theme] .country-cta-card {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

html[data-color-theme] .country-cta-card h3 {
  color: #ffffff;
}

html[data-color-theme] .country-cta-card p {
  color: var(--theme-dark-text);
}

html[data-color-theme] .country-cta-card li {
  color: #ffffff;
}

html[data-color-theme] .country-cta-card li span {
  color: #ffffff;
}

html[data-color-theme] .country-cta-card li i,
html[data-color-theme] .country-cta-card li svg {
  background: var(--gold);
  color: var(--deep);
}

/* ============================================================
   ABOUT PAGE (.va-*) — theme overrides
   ============================================================ */
html[data-color-theme] .va-about-page {
  --va-ink: var(--ink);
  --va-muted: var(--muted);
  --va-line: var(--theme-border);
  --va-line-strong: var(--theme-border);
  --va-paper: var(--theme-surface-solid);
  --va-cream: var(--ivory);
  --va-mist: var(--mist);
  --va-aqua: var(--aqua);
  background: var(--theme-body-bg);
  color: var(--ink);
}

html[data-color-theme] .va-eyebrow {
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal-dark);
}

html[data-color-theme] .va-hero::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%);
}

html[data-color-theme] .va-hero::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%);
}

html[data-color-theme] .va-hero-copy h1 {
  color: var(--navy);
}

html[data-color-theme] .va-hero-copy h1 em,
html[data-color-theme] .va-hero-num {
  color: var(--teal-dark);
}

html[data-color-theme] .va-hero-lede {
  color: var(--muted);
}

html[data-color-theme] .va-hero-trust {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-card-shadow);
  color: var(--ink);
}

html[data-color-theme] .va-hero-badge {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-card-shadow);
  color: var(--ink);
}

html[data-color-theme] .va-hero-trust strong {
  color: var(--navy);
}

html[data-color-theme] .va-hero-trust span,
html[data-color-theme] .va-hero-badge span {
  color: var(--muted);
}

html[data-color-theme] .va-hero-badge strong {
  color: var(--navy);
}

html[data-color-theme] .va-hero-badge i,
html[data-color-theme] .va-hero-badge svg {
  color: var(--teal);
}

html[data-color-theme] .va-pillar-copy h2 {
  color: var(--navy);
}

html[data-color-theme] .va-pillar-copy p {
  color: var(--muted);
}

html[data-color-theme] .va-pillar-tag {
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  border-color: color-mix(in srgb, var(--teal) 28%, transparent);
  color: var(--teal-dark);
}

/* IMPACT — keep dark, but use theme tones */
html[data-color-theme] .va-impact {
  background:
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--teal) 36%, transparent), transparent 50%),
    radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 50%),
    var(--theme-band-deep);
  color: #ffffff;
}

html[data-color-theme] .va-impact-head h2 {
  color: #ffffff;
}

html[data-color-theme] .va-impact-head p {
  color: var(--theme-dark-text);
}

html[data-color-theme] .va-impact-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

html[data-color-theme] .va-impact-icon {
  background: color-mix(in srgb, var(--gold) 24%, transparent);
  color: var(--gold);
}

html[data-color-theme] .va-impact-card strong {
  color: #ffffff;
}

html[data-color-theme] .va-impact-card strong small,
html[data-color-theme] .va-impact-card span {
  color: var(--theme-dark-text);
}

/* TEAM */
html[data-color-theme] .va-team {
  background: var(--theme-band-bg);
}

html[data-color-theme] .va-team--alt {
  background: var(--theme-band-alt);
}

html[data-color-theme] .va-team-head h2 {
  color: var(--navy);
}

html[data-color-theme] .va-team-head p {
  color: var(--muted);
}

html[data-color-theme] .va-team-card {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-card-shadow);
  color: var(--ink);
}

html[data-color-theme] .va-team-body h3 {
  color: var(--navy);
}

html[data-color-theme] .va-team-role {
  color: var(--teal-dark);
}

html[data-color-theme] .va-team-body p {
  color: var(--muted);
}

html[data-color-theme] .va-team-desk {
  color: var(--muted);
}

html[data-color-theme] .va-team-social {
  border-color: var(--theme-border);
  color: var(--teal-dark);
}

html[data-color-theme] .va-team-social:hover {
  background: var(--teal);
  color: #ffffff;
  border-color: var(--teal);
}

html[data-color-theme] .va-team-expand {
  border-color: var(--theme-border);
  color: var(--ink);
}

html[data-color-theme] .va-team-expand:hover {
  background: var(--teal);
  color: #ffffff;
  border-color: var(--teal);
}

/* CTA section — dark */
html[data-color-theme] .va-cta {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--teal) 36%, transparent), transparent 55%),
    radial-gradient(circle at 86% 86%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 55%),
    var(--theme-band-deep);
  color: #ffffff;
}

html[data-color-theme] .va-cta-copy h2 {
  color: #ffffff;
}

html[data-color-theme] .va-cta-copy p {
  color: var(--theme-dark-text);
}

html[data-color-theme] .va-cta-tags li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

html[data-color-theme] .va-cta-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

html[data-color-theme] .va-cta-card-num {
  color: var(--gold);
}

html[data-color-theme] .va-cta-card-label {
  color: var(--theme-dark-text);
}

html[data-color-theme] .va-cta-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

html[data-color-theme] .va-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Smooth themed transition from the About CTA into the footer
   (default theme fades to teal-black #071922; themed modes must fade to
   the theme's own deep color so it blends instead of banding) */
html[data-color-theme] .va-cta::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--theme-home-dark) 55%, transparent) 45%,
    var(--theme-home-dark) 100%
  );
}

html[data-color-theme] .va-about-page + .site-footer {
  background: linear-gradient(
    180deg,
    var(--theme-home-dark) 0%,
    color-mix(in srgb, var(--theme-home-dark) 82%, #000 18%) 100%
  );
}

html[data-color-theme] .va-about-page + .site-footer::after {
  background: linear-gradient(180deg, transparent 0%, var(--theme-home-dark) 100%);
}

/* Footer tagline ("Global education strategy") was inheriting var(--muted),
   which is too dark on the dark footer — restore legible light tone */
html[data-color-theme] .site-footer .brand-footer small {
  color: rgba(255, 255, 255, 0.62);
}

/* ============================================================
   CAREERS PAGE (.cr-*) — theme overrides
   ============================================================ */

/* LIFE AT ONEDEGREE */
html[data-color-theme] .cr-life {
  background: var(--theme-band-bg);
  color: var(--ink);
}

html[data-color-theme] .cr-life-copy h2 {
  color: var(--navy);
}

html[data-color-theme] .cr-life-copy p {
  color: var(--muted);
}

html[data-color-theme] .cr-life-points li {
  color: var(--ink);
}

html[data-color-theme] .cr-life-points strong {
  color: var(--navy);
}

html[data-color-theme] .cr-life-points span {
  color: var(--muted);
}

html[data-color-theme] .cr-life-points svg,
html[data-color-theme] .cr-life-points i {
  color: var(--teal);
}

html[data-color-theme] .cr-life-badge {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-card-shadow);
  color: var(--ink);
}

html[data-color-theme] .cr-life-badge svg,
html[data-color-theme] .cr-life-badge i {
  color: var(--coral);
}

html[data-color-theme] .cr-life-badge strong {
  color: var(--navy);
}

html[data-color-theme] .cr-life-badge span {
  color: var(--muted);
}

/* HIRING RAIL */
html[data-color-theme] .cr-rail {
  background: var(--theme-band-alt);
  color: var(--ink);
}

html[data-color-theme] .cr-rail-eyebrow {
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal-dark);
}

html[data-color-theme] .cr-rail-head h2 {
  color: var(--navy);
}

html[data-color-theme] .cr-rail-head h2 em {
  color: var(--teal-dark);
}

html[data-color-theme] .cr-rail-head > p {
  color: var(--muted);
}

html[data-color-theme] .cr-rail-head strong {
  color: var(--navy);
}

html[data-color-theme] .cr-rail-line {
  background: var(--theme-border);
}

html[data-color-theme] .cr-rail-line-fill {
  background: var(--teal);
}

html[data-color-theme] .cr-rail-step-num {
  background: var(--theme-surface-solid);
  border-color: var(--theme-border);
  color: var(--muted);
}

html[data-color-theme] .cr-rail-node {
  background: var(--theme-surface-solid);
  border-color: var(--theme-border);
  color: var(--teal);
}

html[data-color-theme] .cr-rail-label {
  color: var(--muted);
}

html[data-color-theme] .cr-rail-step.is-passed .cr-rail-step-num,
html[data-color-theme] .cr-rail-step.is-active .cr-rail-step-num {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
}

html[data-color-theme] .cr-rail-step.is-passed .cr-rail-node,
html[data-color-theme] .cr-rail-step.is-active .cr-rail-node {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
}

html[data-color-theme] .cr-rail-step.is-active .cr-rail-label {
  color: var(--navy);
}

html[data-color-theme] .cr-rail-panel {
  position: relative;
  grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 248, 255, 0.96) 100%);
  border-color: var(--theme-border);
  box-shadow:
    0 26px 70px rgba(16, 4, 70, 0.14),
    0 8px 24px rgba(255, 94, 50, 0.08);
  color: var(--ink);
}

html[data-color-theme] .cr-rail-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(60% 140% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
  z-index: 1;
}

html[data-color-theme] .cr-rail-panel-side,
html[data-color-theme] .cr-rail-panel-main {
  position: relative;
  z-index: 2;
}

html[data-color-theme] .cr-rail-panel-side {
  padding: 34px 34px 32px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 230, 163, 0.22), transparent 44%),
    linear-gradient(140deg, #14005d 0%, #4b1677 48%, #ff5e32 130%);
}

html[data-color-theme] .cr-rail-panel-side::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #ffe3a1 0%, #ff5e32 100%);
}

html[data-color-theme] .cr-rail-panel-side::after {
  width: 230px;
  height: 230px;
  background:
    radial-gradient(circle, rgba(255, 230, 163, 0.22), transparent 68%);
}

html[data-color-theme] .cr-rail-panel-stage {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 230, 163, 0.34);
  color: #ffe3a1;
}

html[data-color-theme] .cr-rail-panel-title {
  max-width: 320px;
  color: #ffffff;
  text-shadow: 0 8px 26px rgba(16, 2, 88, 0.28);
}

html[data-color-theme] .cr-rail-panel-meta {
  background: rgba(255, 230, 163, 0.14);
  border-color: rgba(255, 230, 163, 0.34);
  color: #ffe3a1;
}

html[data-color-theme] .cr-rail-panel-meta svg,
html[data-color-theme] .cr-rail-panel-meta i {
  color: #ffe3a1;
}

html[data-color-theme] .cr-rail-panel-main {
  padding: 34px 38px 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 246, 255, 0.94) 100%);
}

html[data-color-theme] .cr-rail-panel-main::before {
  content: "What to expect";
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--aqua) 72%, #ffffff 28%);
  color: var(--teal-dark);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-color-theme] .cr-rail-panel-body {
  color: var(--ink);
  max-width: 720px;
  font-size: 1.03rem;
  line-height: 1.82;
}

html[data-color-theme] .cr-rail-panel-foot {
  align-items: center;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--theme-border-soft);
}

html[data-color-theme] .cr-rail-nav {
  background: var(--theme-surface-solid);
  border-color: var(--theme-border);
  color: var(--teal-dark);
  box-shadow: 0 8px 18px rgba(16, 4, 70, 0.08);
}

html[data-color-theme] .cr-rail-nav:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--coral) 0%, #ff7a4d 100%);
  color: #ffffff;
  border-color: var(--coral);
}

@media (max-width: 960px) {
  html[data-color-theme] .cr-rail-panel {
    grid-template-columns: 1fr;
    margin-top: 38px;
    border-radius: 20px;
  }

  html[data-color-theme] .cr-rail-panel-side {
    padding: 28px 28px 26px;
  }

  html[data-color-theme] .cr-rail-panel-side::before {
    top: 20px;
    bottom: 20px;
  }

  html[data-color-theme] .cr-rail-panel-main {
    padding: 28px 28px 24px;
  }
}

@media (max-width: 640px) {
  html[data-color-theme] .cr-rail-panel {
    margin-top: 32px;
    border-radius: 18px;
  }

  html[data-color-theme] .cr-rail-panel-side,
  html[data-color-theme] .cr-rail-panel-main {
    padding: 24px 22px 22px;
  }

  html[data-color-theme] .cr-rail-panel-title {
    max-width: 100%;
  }

  html[data-color-theme] .cr-rail-panel-foot {
    justify-content: space-between;
  }
}

/* APPLICATION FORM SECTION */
/* Section stays light; the grid below becomes a blue gradient panel that
   holds both the content and the form. */
html[data-color-theme] .cr-apply {
  background: var(--theme-band-bg);
  color: var(--ink);
}

html[data-color-theme] .cr-apply::after {
  background: none;
}

/* Blue gradient panel (theme colours) wrapping the aside + form. */
html[data-color-theme] .cr-apply-grid {
  background: var(--theme-band-deep);
  box-shadow: var(--shadow);
}

/* Eyebrow → light pill on the blue panel. */
html[data-color-theme] .cr-apply-aside .va-eyebrow {
  border-color: rgba(255, 255, 255, 0.40);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

html[data-color-theme] .cr-apply-aside h2 {
  color: #ffffff;
}

html[data-color-theme] .cr-apply-aside p {
  color: var(--theme-dark-text);
}

html[data-color-theme] .cr-apply-points li {
  color: #ffffff;
}

html[data-color-theme] .cr-apply-points svg,
html[data-color-theme] .cr-apply-points i {
  color: var(--gold);
}

html[data-color-theme] .cr-apply-quote {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

html[data-color-theme] .cr-apply-quote-mark {
  color: var(--gold);
}

html[data-color-theme] .cr-apply-quote p {
  color: #ffffff;
}

html[data-color-theme] .cr-apply-quote-sig {
  color: var(--theme-dark-text);
}

html[data-color-theme] .cr-apply-form-card {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-card-shadow);
  color: var(--ink);
}

html[data-color-theme] .cr-apply-form label,
html[data-color-theme] .cr-apply-form .cr-field > span {
  color: var(--ink);
}

html[data-color-theme] .cr-apply-form input,
html[data-color-theme] .cr-apply-form textarea,
html[data-color-theme] .cr-apply-form select {
  background: var(--theme-field-bg);
  border-color: var(--theme-field-border);
  color: var(--ink);
}

html[data-color-theme] .cr-apply-form input:focus,
html[data-color-theme] .cr-apply-form textarea:focus,
html[data-color-theme] .cr-apply-form select:focus {
  border-color: color-mix(in srgb, var(--teal) 68%, transparent);
  box-shadow: 0 0 0 4px var(--theme-focus-ring);
}

html[data-color-theme] .cr-checkbox {
  color: var(--ink);
}

html[data-color-theme] .cr-apply-submit {
  background: var(--theme-brand-gradient);
  color: #ffffff;
  border-color: transparent;
}

html[data-color-theme] .cr-apply-submit:hover {
  background: var(--theme-accent-hover);
}

/* The .cr-field-full class is referenced but has no base style
   — make sure full-width fields span the form row */
.cr-field-full,
html[data-color-theme] .cr-field-full {
  grid-column: 1 / -1;
}

/* Dynamic country pages: workbook-driven content with premium country styling */
.country-main--dynamic .country-stat-strip {
  padding: 24px 0;
  background: linear-gradient(180deg, #fffdf8 0%, #f3faf9 100%);
}

.country-main--dynamic .stat-strip-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.country-main--dynamic .stat-strip-item {
  align-items: flex-start;
  min-height: 118px;
  padding: 16px;
  border-radius: 12px;
}

.country-main--dynamic .stat-strip-item .stat-icon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 10px;
}

.country-main--dynamic .stat-strip-item .stat-value {
  font-size: clamp(1.1rem, 1.25vw, 1.35rem);
  line-height: 1.08;
}

.country-main--dynamic .stat-strip-item .stat-label {
  max-width: 16ch;
  line-height: 1.35;
}

.country-main--dynamic .country-band {
  min-height: 520px;
}

/* ============================================================
   Indian-students banner (wide variant) — v2
   ============================================================ */
.country-band--wide {
  padding: 110px 32px 100px;
}

.country-band--wide .band-inner {
  width: 100%;
  max-width: 1280px;
}

.country-band--wide h2 {
  max-width: 980px;
  margin: 10px auto 18px;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  letter-spacing: -0.012em;
}

.country-band--wide > p,
.country-band--wide .band-inner > p {
  max-width: 760px;
  font-size: 1.06rem;
}

.country-band--wide .band-stats {
  margin: 56px auto 0;
  max-width: 1280px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 230, 163, 0.22);
  border-bottom: 1px solid rgba(255, 230, 163, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(6px);
}

.country-band--wide .band-stat {
  position: relative;
  padding: 28px 26px 26px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.country-band--wide .band-stat + .band-stat {
  border-left: 1px solid rgba(255, 230, 163, 0.16);
}

.country-band--wide .band-stat__index {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 230, 163, 0.6);
}

.country-band--wide .band-stat strong {
  display: block;
  margin: 2px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.1rem, 3.2vw, 2.85rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #ffe6a3;
  font-weight: 700;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}

.country-band--wide .band-stat__rule {
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 230, 163, 0.7) 0%, rgba(255, 230, 163, 0) 100%);
  transition: width 0.4s ease;
}

.country-band--wide .band-stat__label {
  display: block;
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.86);
}

.country-band--wide .band-stat::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 230, 163, 0.9) 0%, rgba(255, 230, 163, 0) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s ease;
}

.country-band--wide .band-stat:hover::after {
  transform: scaleX(1);
}

.country-band--wide .band-stat:hover .band-stat__rule {
  width: 100%;
}

@media (max-width: 980px) {
  .country-band--wide {
    padding: 84px 24px 76px;
  }

  .country-band--wide .band-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .country-band--wide .band-stat:nth-child(odd) {
    border-left: 0;
  }

  .country-band--wide .band-stat:nth-child(n+3) {
    border-top: 1px solid rgba(255, 230, 163, 0.16);
  }
}

@media (max-width: 560px) {
  .country-band--wide .band-stats {
    grid-template-columns: 1fr;
  }

  .country-band--wide .band-stat {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 230, 163, 0.16);
  }

  .country-band--wide .band-stat:first-child {
    border-top: 0;
  }
}

.dynamic-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.dynamic-cost-panel {
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(13, 122, 120, 0.12);
  box-shadow: 0 18px 44px rgba(7, 25, 34, 0.08);
}

.dynamic-cost-panel-head {
  padding: 22px 24px 18px;
  background:
    linear-gradient(135deg, rgba(13, 122, 120, 0.1) 0%, rgba(199, 146, 74, 0.12) 100%),
    #ffffff;
  border-bottom: 1px solid rgba(13, 122, 120, 0.1);
}

.dynamic-cost-panel-head .cost-label {
  display: inline-flex;
  margin: 0 0 8px;
  color: var(--teal-dark);
}

.dynamic-cost-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.dynamic-cost-rows {
  display: grid;
}

.dynamic-cost-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 24px;
  border-top: 1px solid rgba(13, 122, 120, 0.08);
}

.dynamic-cost-row:first-child {
  border-top: 0;
}

.dynamic-cost-row:nth-child(even) {
  background: rgba(241, 246, 247, 0.42);
}

.dynamic-cost-row span {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 750;
}

.dynamic-cost-row strong {
  color: var(--navy);
  font-size: 0.96rem;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .country-main--dynamic .stat-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .country-main--dynamic .stat-strip-grid,
  .dynamic-cost-grid {
    grid-template-columns: 1fr;
  }

  .country-main--dynamic .stat-strip-item {
    min-height: auto;
  }

  .dynamic-cost-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .dynamic-cost-row strong {
    text-align: left;
    white-space: normal;
  }
}

.country-main--dynamic .dynamic-section {
  position: relative;
  overflow: hidden;
}

.country-main--dynamic .dynamic-section--why {
  background:
    linear-gradient(180deg, #fffdf8 0%, #f8fbfb 58%, #ffffff 100%);
}

.dynamic-why-grid {
  /* Flex (not grid) so an incomplete last row — odd counts like 4 or 5 cards —
     centers instead of hugging the left with an empty gap. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  max-width: 1180px;
  margin: 46px auto 0;
}

.dynamic-why-card {
  position: relative;
  flex: 0 1 calc((100% - 48px) / 3); /* 3 per row (two 24px gaps) */
  display: flex;
  flex-direction: column;
  min-height: 252px;
  padding: 28px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 251, 0.98) 100%);
  border: 1px solid rgba(13, 122, 120, 0.14);
  box-shadow: 0 22px 54px rgba(7, 25, 34, 0.08);
  isolation: isolate;
}

.dynamic-why-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
  opacity: 0.86;
  z-index: -1;
}

.dynamic-card-topline,
.dynamic-scholarship-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.dynamic-card-index {
  color: rgba(11, 43, 67, 0.18);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

.dynamic-why-card .reason-icon,
.dynamic-scholarship-card .reason-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13, 122, 120, 0.16) 0%, rgba(199, 146, 74, 0.12) 100%);
  color: var(--teal-dark);
}

.dynamic-why-card .reason-icon svg,
.dynamic-scholarship-card .reason-icon svg {
  width: 21px;
  height: 21px;
}

.dynamic-why-card h3 {
  min-height: 2.65em;
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 1.18rem;
  font-weight: 850;
  line-height: 1.18;
}

.dynamic-why-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.62;
}

.dynamic-section--universities {
  background:
    linear-gradient(180deg, #fffaf1 0%, #f8fbfb 100%);
}

.dynamic-section--carousel {
  padding-bottom: 88px;
}

.dynamic-carousel-frame {
  width: 100vw;
  margin: 46px 0 0 calc(50% - 50vw);
  overflow: hidden;
  padding: 8px 0 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.dynamic-carousel-track {
  display: flex;
  width: max-content;
  gap: 24px;
  padding-left: max(28px, calc((100vw - 1180px) / 2));
  animation: dynamic-carousel-marquee 38s linear infinite;
  will-change: transform;
}

.dynamic-carousel-track--slow {
  animation-duration: 46s;
}

.dynamic-carousel-frame:hover .dynamic-carousel-track {
  animation-play-state: paused;
}

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

.dynamic-uni-slide {
  position: relative;
  flex: 0 0 min(390px, 82vw);
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(13, 122, 120, 0.14);
  box-shadow: 0 26px 62px rgba(7, 25, 34, 0.12);
}

.dynamic-uni-slide-media {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--teal-dark));
}

.dynamic-uni-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 25, 34, 0.08) 0%, rgba(7, 25, 34, 0.48) 100%);
}

.dynamic-uni-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.dynamic-uni-slide:hover .dynamic-uni-slide-media img {
  transform: scale(1.06);
}

.dynamic-uni-slide-media .uni-rank-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(7, 25, 34, 0.8);
  color: #f3c97a;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}

.dynamic-uni-slide-body {
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 24px;
}

.dynamic-uni-slide-body > span {
  color: rgba(11, 43, 67, 0.2);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1;
}

.dynamic-uni-slide h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.13rem;
  font-weight: 850;
  line-height: 1.2;
}

.dynamic-uni-slide p {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.dynamic-uni-slide p svg {
  width: 15px;
  height: 15px;
}

.dynamic-uni-slide .uni-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.dynamic-uni-slide .uni-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.1);
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

.dynamic-uni-slide .uni-meta a {
  color: inherit;
}

.dynamic-section--courses {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 7vw, 108px) 0;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 52%, #fff8ea 100%);
}

.dynamic-courses-bleed {
  width: 100%;
  overflow: hidden;
}

.dynamic-courses-head {
  width: min(100%, 1640px);
  max-width: none;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 72px);
  text-align: center;
}

.dynamic-courses-head .eyebrow,
.dynamic-courses-head h2,
.dynamic-courses-head p {
  margin-inline: auto;
}

.dynamic-course-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.1);
  color: #0b6664;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Manual scroll controls — revealed only once JS marks the carousel scroll-ready
   (without JS the CSS marquee runs and the buttons would be inert). */
.dynamic-course-controls {
  display: none;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.dynamic-courses-bleed:has(.dynamic-course-carousel.is-scroll-ready) .dynamic-course-controls {
  display: flex;
}

.dynamic-course-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 94, 50, 0.28);
  background: var(--theme-surface-solid, #ffffff);
  color: var(--teal-dark, #d8431d);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(7, 25, 34, 0.12);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.dynamic-course-nav:hover {
  transform: translateY(-2px);
  background: var(--teal, #ff5e32);
  border-color: var(--teal, #ff5e32);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(255, 94, 50, 0.3);
}

.dynamic-course-nav:active {
  transform: translateY(0);
}

.dynamic-course-nav:focus-visible {
  outline: 2px solid var(--teal, #ff5e32);
  outline-offset: 3px;
}

.dynamic-course-nav i,
.dynamic-course-nav svg {
  width: 20px;
  height: 20px;
}

.dynamic-course-carousel {
  width: min(100%, 1280px);
  box-sizing: border-box;
  margin: 48px auto 0;
  padding-inline: clamp(18px, 3vw, 36px);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.dynamic-course-carousel.is-scroll-ready {
  cursor: grab;
  overscroll-behavior: contain;
}

.dynamic-course-carousel.is-dragging {
  cursor: grabbing;
}

.dynamic-course-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: dynamic-course-marquee 38s linear infinite;
}

.dynamic-course-carousel.is-scroll-ready .dynamic-course-track {
  animation: none;
}

.dynamic-course-carousel.is-dragging .dynamic-course-card {
  user-select: none;
}

.dynamic-course-carousel.is-dragging .dynamic-course-link {
  pointer-events: none;
}

.dynamic-course-carousel:has(.dynamic-course-card:hover) .dynamic-course-track {
  animation-play-state: paused;
}

.dynamic-course-set {
  box-sizing: border-box;
  display: grid;
  flex: 0 0 clamp(900px, 86vw, 1208px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  padding-right: 18px;
}

/* Course-count layouts — keep the carousel set tidy when topCourses
   isn't a multiple of 3 (blade caps to 6). */
.dynamic-course-set--count-1 {
  flex-basis: clamp(320px, 48vw, 480px);
  grid-template-columns: minmax(0, 1fr);
}

.dynamic-course-set--count-2 {
  flex-basis: clamp(640px, 68vw, 840px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-course-set--count-4 {
  flex-basis: clamp(640px, 68vw, 880px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dynamic-course-set--count-5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dynamic-course-set--count-5 > .dynamic-course-card {
  grid-column: span 2;
}

.dynamic-course-set--count-5 > .dynamic-course-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.dynamic-course-set--count-5 > .dynamic-course-card:nth-child(5) {
  grid-column: 4 / span 2;
}

@keyframes dynamic-course-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* Track holds three identical sets; shift exactly one set for a seamless loop. */
    transform: translate3d(calc(-100% / 3), 0, 0);
  }
}

.country-main--dynamic .dynamic-course-card {
  min-height: 224px;
  padding: 18px;
  border: 1px solid rgba(13, 122, 120, 0.12);
  border-left: 0;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 253, 253, 0.98) 100%);
  box-shadow: 0 22px 58px rgba(7, 25, 34, 0.08);
  isolation: isolate;
  overflow: hidden;
}

.dynamic-course-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(13, 122, 120, 0.12) 0%, transparent 42%),
    radial-gradient(70% 70% at 95% 0%, rgba(199, 146, 74, 0.14) 0%, transparent 60%);
  opacity: 0.72;
  transition: opacity 220ms ease, transform 220ms ease;
}

.dynamic-course-card:hover::before {
  opacity: 1;
  transform: scale(1.02);
}

.dynamic-course-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.dynamic-course-rank {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.18rem;
  line-height: 1;
  font-weight: 700;
  color: rgba(13, 82, 83, 0.62);
}

.dynamic-course-card .course-tag {
  padding: 4px 9px;
  background: rgba(199, 146, 74, 0.16);
  color: #81551d;
  border: 1px solid rgba(199, 146, 74, 0.18);
}

.dynamic-course-card h3 {
  margin-top: 6px;
  font-size: clamp(0.98rem, 0.95vw, 1.08rem);
  line-height: 1.22;
}

.dynamic-course-university {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 40px;
  padding-bottom: 4px;
  color: rgba(7, 25, 34, 0.68);
  font-size: 0.84rem;
  font-weight: 700;
}

.dynamic-course-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: space-between;
  align-self: stretch;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(13, 122, 120, 0.12);
  color: #0b6664;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.dynamic-course-card .course-foot {
  border-top: 0;
  padding-top: 0;
  gap: 8px;
}

.dynamic-course-card .course-foot span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.08);
  font-size: 0.78rem;
}

.dynamic-course-link svg {
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-course-track {
    animation: none;
  }

  .dynamic-course-carousel {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.dynamic-section--scholarships {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
}

.dynamic-scholarship-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.dynamic-scholarship-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 236px;
  padding: 22px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(13, 122, 120, 0.13);
  box-shadow: 0 18px 44px rgba(7, 25, 34, 0.07);
}

.dynamic-scholarship-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 146, 74, 0.14), transparent 70%);
  pointer-events: none;
}

.dynamic-scholarship-top {
  margin-bottom: 20px;
}

.dynamic-scholarship-top > span:last-child {
  color: rgba(11, 43, 67, 0.22);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  font-weight: 700;
}

.dynamic-scholarship-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.24;
}

.dynamic-scholarship-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.56;
}

.dynamic-section--intakes {
  background:
    linear-gradient(180deg, #f7fbfb 0%, #fffaf1 100%);
}

.dynamic-intake-board {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  max-width: 1120px;
  margin: 44px auto 0;
}

.dynamic-intake-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 338px;
  padding: 30px;
  border-radius: 20px;
  color: #ffffff;
  /* Original layered backdrop, re-tinted blue instead of teal-green (the dimmed
     photo below blends with it for the original depth/fancy look). */
  background: linear-gradient(150deg, rgba(7, 25, 34, 0.84) 0%, rgba(26, 0, 136, 0.72) 70%, rgba(199, 146, 74, 0.55) 142%);
  box-shadow: 0 28px 68px rgba(7, 25, 34, 0.18);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.dynamic-intake-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 80px rgba(7, 25, 34, 0.26);
}

.dynamic-intake-feature__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.06);
  transition: transform 0.7s ease, opacity 0.4s ease;
  /* Dimmed so the layered blue backdrop blends through, for the original depth. */
  opacity: 0.42;
}

.dynamic-intake-feature:hover .dynamic-intake-feature__image {
  transform: scale(1.12);
  opacity: 0.55;
}

.dynamic-intake-feature__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 18% 22%, rgba(199, 146, 74, 0.30) 0%, transparent 60%),
    linear-gradient(150deg, rgba(7, 25, 34, 0.86) 0%, rgba(13, 82, 83, 0.74) 60%, rgba(7, 25, 34, 0.88) 100%);
  pointer-events: none;
}

.dynamic-intake-feature__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dynamic-intake-feature .eyebrow {
  color: #ffe6a3;
}

.dynamic-intake-feature h3 {
  margin: 10px 0 12px;
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.1rem, 3vw, 2.8rem);
  line-height: 1;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
}

.dynamic-intake-feature p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.62;
}

.dynamic-intake-feature__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 230, 163, 0.14);
  border: 1px solid rgba(255, 230, 163, 0.32);
  width: fit-content;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffe6a3;
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.dynamic-intake-feature:hover .dynamic-intake-feature__hint {
  background: rgba(255, 230, 163, 0.22);
  border-color: rgba(255, 230, 163, 0.48);
}

.dynamic-intake-feature__hint i {
  width: 14px;
  height: 14px;
}

.dynamic-intake-cards {
  display: grid;
  gap: 14px;
}

.dynamic-intake-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 102px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(13, 122, 120, 0.13);
  box-shadow: 0 16px 38px rgba(7, 25, 34, 0.07);
  overflow: hidden;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--card-index, 0) * 100ms);
}

.dynamic-intake-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(199, 146, 74, 0.0) 0%, rgba(199, 146, 74, 0.18) 50%, rgba(199, 146, 74, 0) 100%);
  transform: translateX(-110%);
  transition: transform 0.6s ease;
  transition-delay: calc(var(--card-index, 0) * 100ms);
  pointer-events: none;
}

.dynamic-intake-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(199, 146, 74, 0) 80%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease;
  transition-delay: calc(var(--card-index, 0) * 100ms);
}

/* Staggered highlight wave when hovering the feature card */
.dynamic-intake-feature:hover ~ .dynamic-intake-cards .dynamic-intake-card,
.dynamic-intake-card:hover {
  transform: translateX(6px);
  border-color: rgba(199, 146, 74, 0.45);
  box-shadow: 0 24px 52px rgba(7, 25, 34, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #fefbf3 100%);
}

.dynamic-intake-feature:hover ~ .dynamic-intake-cards .dynamic-intake-card::before,
.dynamic-intake-card:hover::before {
  transform: translateX(110%);
}

.dynamic-intake-feature:hover ~ .dynamic-intake-cards .dynamic-intake-card::after,
.dynamic-intake-card:hover::after {
  transform: scaleX(1);
}

.dynamic-intake-feature:hover ~ .dynamic-intake-cards .dynamic-intake-number,
.dynamic-intake-card:hover .dynamic-intake-number {
  color: var(--gold);
}

.dynamic-intake-number {
  color: rgba(11, 43, 67, 0.18);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1;
  transition: color 0.4s ease;
  transition-delay: calc(var(--card-index, 0) * 100ms);
}

.dynamic-intake-status {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(199, 146, 74, 0.16);
  color: #8a5b1d;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dynamic-intake-card h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 1.07rem;
  font-weight: 850;
}

.dynamic-intake-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.dynamic-section--city-carousel {
  background:
    linear-gradient(180deg, #071922 0%, #0a3036 52%, #fffaf1 100%);
  color: #ffffff;
}

.dynamic-section--city-carousel .section-head h2 {
  color: #ffffff;
}

.dynamic-section--city-carousel .section-head p {
  color: rgba(255, 255, 255, 0.76);
}

.dynamic-section--city-carousel .section-head .eyebrow {
  color: #ffe6a3;
}

.dynamic-city-carousel {
  padding-top: 10px;
  padding-bottom: 76px;
}

.dynamic-city-slide {
  position: relative;
  flex: 0 0 min(360px, 80vw);
  height: 430px;
  overflow: hidden;
  border-radius: 22px;
  color: #ffffff;
  background: #071922;
  border: 1px solid rgba(255, 230, 163, 0.22);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.28);
  transform: rotate(var(--tilt));
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.dynamic-city-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(7, 25, 34, 0.02) 0%, rgba(7, 25, 34, 0.8) 100%),
    radial-gradient(circle at 24% 18%, rgba(255, 230, 163, 0.22), transparent 38%);
}

.dynamic-city-slide:hover {
  border-color: rgba(255, 230, 163, 0.5);
  box-shadow: 0 38px 86px rgba(0, 0, 0, 0.36);
  transform: translateY(-16px) rotate(calc(var(--tilt) * -0.35));
}

.dynamic-city-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease, filter 260ms ease;
}

.dynamic-city-slide:hover img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.07);
}

.dynamic-city-slide-info {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 26px;
}

.dynamic-city-slide-info span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 230, 163, 0.82);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
}

.dynamic-city-slide-info h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  line-height: 1;
}

.dynamic-city-slide-info p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 750;
}

.dynamic-visa-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 980px;
  margin: 42px auto 0;
  counter-reset: visa-step;
}

.dynamic-visa-steps::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 44px;
  width: 2px;
  background: linear-gradient(180deg, var(--teal) 0%, rgba(199, 146, 74, 0.82) 100%);
  opacity: 0.55;
}

.dynamic-visa-steps .visa-step {
  position: relative;
  min-height: auto;
  padding: 24px 28px 24px 96px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 251, 0.98) 100%);
  border: 1px solid rgba(13, 122, 120, 0.13);
  box-shadow: 0 16px 42px rgba(7, 25, 34, 0.07);
}

.dynamic-visa-steps .visa-step:nth-child(even) {
  margin-left: 72px;
  background:
    linear-gradient(135deg, rgba(255, 251, 242, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.dynamic-visa-steps .visa-step::before {
  counter-increment: visa-step;
  content: counter(visa-step, decimal-leading-zero);
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: rgba(13, 122, 120, 0.24);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1;
  color: #ffe6a3;
}

.dynamic-section--faq {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
}

.dynamic-faq-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  max-width: 1120px;
  margin: 44px auto 0;
}

.dynamic-faq-panel {
  position: sticky;
  top: 112px;
  padding: 28px;
  border-radius: 20px;
  color: #ffffff;
  background:
    linear-gradient(150deg, rgba(7, 25, 34, 0.98) 0%, rgba(13, 82, 83, 0.94) 100%);
  box-shadow: 0 26px 62px rgba(7, 25, 34, 0.14);
}

.dynamic-faq-panel .eyebrow {
  color: #ffe6a3;
}

.dynamic-faq-panel h3 {
  margin: 12px 0 10px;
  color: #ffffff;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.55rem;
  line-height: 1;
}

.dynamic-faq-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.62;
}

.dynamic-faq-list {
  gap: 12px;
  max-width: none;
  margin: 0;
}

.dynamic-faq-item {
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(7, 25, 34, 0.06);
}

.dynamic-faq-item summary {
  gap: 14px;
  justify-content: flex-start;
}

.dynamic-faq-item summary::after {
  margin-left: auto;
}

.dynamic-faq-item summary span {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(13, 122, 120, 0.1);
  color: var(--teal-dark);
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
}

html[data-color-theme] .country-main--dynamic {
  background: var(--theme-body-bg);
  color: var(--ink);
}

/* Alternating section bands: why / intakes use the lighter --theme-band-bg,
   courses / costs use the darker --theme-band-alt, so the four stacked content
   sections read as A-B-A-B instead of two same-shade sections in a row. */
html[data-color-theme] .country-main--dynamic .country-stat-strip,
html[data-color-theme] .country-main--dynamic .dynamic-section--why,
html[data-color-theme] .country-main--dynamic .dynamic-section--intakes,
html[data-color-theme] .country-main--dynamic .dynamic-section--scholarships,
html[data-color-theme] .country-main--dynamic .dynamic-section--faq {
  background: var(--theme-band-bg);
}

html[data-color-theme] .country-main--dynamic .dynamic-section--courses,
html[data-color-theme] .country-main--dynamic .dynamic-section--costs {
  background: var(--theme-band-alt);
}

html[data-color-theme] .country-main--dynamic .dynamic-section--city-carousel {
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--gold) 32%, transparent), transparent 46%),
    radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--coral) 22%, transparent), transparent 52%),
    var(--theme-band-deep);
  color: #ffffff;
}

html[data-color-theme] .country-main--dynamic .dynamic-section--city-carousel .section-head h2 {
  color: #ffffff;
}

html[data-color-theme] .country-main--dynamic .dynamic-section--city-carousel .section-head p {
  color: rgba(255, 255, 255, 0.82);
}

html[data-color-theme] .country-main--dynamic :is(
  .stat-strip-item,
  .dynamic-cost-panel,
  .dynamic-why-card,
  .dynamic-uni-slide,
  .dynamic-course-card,
  .dynamic-scholarship-card,
  .dynamic-intake-card,
  .dynamic-visa-steps .visa-step,
  .dynamic-faq-item
) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-card-shadow);
}

html[data-color-theme] .country-main--dynamic :is(
  .dynamic-cost-panel-head,
  .dynamic-why-card .reason-icon,
  .dynamic-scholarship-card .reason-icon,
  .dynamic-course-card .course-foot span,
  .dynamic-faq-item summary span,
  .dynamic-uni-slide .uni-meta span,
  .dynamic-course-count
) {
  background: color-mix(in srgb, var(--teal) 12%, var(--theme-surface-solid));
  color: var(--teal-dark);
}

html[data-color-theme] .country-main--dynamic :is(
  .dynamic-cost-row,
  .dynamic-course-link,
  .dynamic-course-card .course-tag,
  .dynamic-intake-card,
  .dynamic-faq-item
) {
  border-color: var(--theme-border);
}

html[data-color-theme] .country-main--dynamic :is(
  .dynamic-card-index,
  .dynamic-course-rank,
  .dynamic-intake-number,
  .dynamic-scholarship-top > span:last-child,
  .dynamic-uni-slide-body > span
) {
  color: color-mix(in srgb, var(--navy) 18%, transparent);
}

html[data-color-theme] .country-main--dynamic :is(
  .dynamic-course-link,
  .dynamic-cost-panel-head .cost-label,
  .dynamic-why-card .reason-icon,
  .dynamic-scholarship-card .reason-icon
) {
  color: var(--teal-dark);
}

html[data-color-theme] .country-main--dynamic :is(
  .dynamic-course-card .course-tag,
  .dynamic-intake-status
) {
  background: color-mix(in srgb, var(--gold) 18%, var(--theme-surface-solid));
  border-color: color-mix(in srgb, var(--gold) 28%, transparent);
  color: var(--gold);
}

html[data-color-theme] .country-main--dynamic :is(
  .dynamic-intake-feature,
  .dynamic-faq-panel
) {
  background: var(--theme-band-deep);
  box-shadow: var(--shadow);
}

html[data-color-theme] .country-main--dynamic :is(
  .country-band--wide .band-stat strong,
  .country-band--wide .band-stat__index,
  .dynamic-intake-feature .eyebrow,
  .dynamic-intake-feature__hint,
  .dynamic-faq-panel .eyebrow,
  .dynamic-section--city-carousel .section-head .eyebrow,
  .dynamic-city-slide-info span
) {
  color: var(--theme-form-focus);
}

html[data-color-theme] .country-main--dynamic .dynamic-city-slide {
  border-color: color-mix(in srgb, var(--gold) 36%, transparent);
}

/* Decorative washes the base rules hardcode in teal-green — re-tint them to the
   active theme so no green leaks through on the destination cards. */
html[data-color-theme] .country-main--dynamic .dynamic-course-card::before {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, transparent) 0%, transparent 42%),
    radial-gradient(70% 70% at 95% 0%, color-mix(in srgb, var(--gold) 14%, transparent) 0%, transparent 60%);
}

/* Original layered veil (radial gold + diagonal wash), re-tinted blue instead of
   the old teal-green. */
html[data-color-theme] .country-main--dynamic .dynamic-intake-feature__veil {
  background:
    radial-gradient(60% 80% at 18% 22%, color-mix(in srgb, var(--gold) 30%, transparent) 0%, transparent 60%),
    linear-gradient(150deg, rgba(7, 25, 34, 0.78) 0%, rgba(26, 0, 136, 0.64) 60%, rgba(7, 25, 34, 0.80) 100%);
}

html[data-color-theme] .country-main--dynamic .dynamic-cost-panel-head {
  border-bottom-color: var(--theme-border);
}

@media (max-width: 1100px) {
  .dynamic-why-grid,
  .dynamic-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dynamic-why-card {
    flex-basis: calc((100% - 24px) / 2); /* 2 per row (one 24px gap) */
  }

  .dynamic-course-set {
    flex-basis: min(92vw, 760px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dynamic-scholarship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dynamic-intake-board,
  .dynamic-faq-layout {
    grid-template-columns: 1fr;
  }

  .dynamic-faq-panel {
    position: relative;
    top: auto;
  }
}

@media (max-width: 700px) {
  .dynamic-section--courses {
    padding: 64px 0;
  }

  .dynamic-courses-head {
    padding-inline: 18px;
  }

  .dynamic-course-carousel {
    margin-top: 34px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }

  .dynamic-course-set {
    display: flex;
    gap: 16px;
    flex-basis: auto;
    padding-right: 16px;
  }

  .country-main--dynamic .dynamic-course-card {
    flex: 0 0 min(78vw, 300px);
  }

  .dynamic-why-grid,
  .dynamic-course-grid,
  .dynamic-visa-steps,
  .dynamic-scholarship-grid {
    grid-template-columns: 1fr;
  }

  .dynamic-why-card {
    flex-basis: 100%; /* single column */
  }

  .dynamic-carousel-frame {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }

  .dynamic-intake-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dynamic-visa-steps::before {
    left: 34px;
  }

  .dynamic-visa-steps .visa-step,
  .dynamic-visa-steps .visa-step:nth-child(even) {
    margin-left: 0;
    padding-left: 82px;
  }

  .dynamic-why-card,
  .dynamic-scholarship-card,
  .dynamic-visa-steps .visa-step {
    min-height: auto;
  }
}

/* ============================================================
   MBBS COUNTRY PAGE (Royal / Premium) — v2
   ============================================================ */
.page-mbbs-country {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(199, 146, 74, 0.10) 0%, rgba(199, 146, 74, 0) 55%),
    linear-gradient(180deg, #fffdf6 0%, #f4f8f9 38%, #fffaf2 68%, #eef4f6 100%);
}

.mbbs-country {
  --mbbs-gold: #c7924a;
  --mbbs-gold-soft: #ffe6a3;
  --mbbs-ink-fade: rgba(7, 25, 34, 0.62);
  --mbbs-line-soft: rgba(7, 25, 34, 0.08);
}

/* Wider container reserved for the country page only */
.mbbs-country .mbbsx-container {
  width: min(calc(100% - 40px), 1440px);
  margin: 0 auto;
}

/* ---- Section head (shared) ---- */
.mbbs-country .mbbsx-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.mbbs-country .mbbsx-head .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}

.mbbs-country .mbbsx-head h2 {
  margin: 0 0 16px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.mbbs-country .mbbsx-head p {
  margin: 0 auto;
  max-width: 620px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ============================================================
   HERO
   ============================================================ */
.mbbsx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0 110px;
  color: #fff;
}

.mbbsx-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  filter: saturate(1.05) contrast(1.04);
}

.mbbsx-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 80% at 22% 28%, rgba(199, 146, 74, 0.32) 0%, transparent 62%),
    linear-gradient(135deg, rgba(7, 25, 34, 0.94) 0%, rgba(11, 88, 90, 0.80) 58%, rgba(7, 25, 34, 0.92) 100%);
}

.mbbsx-hero.no-image .mbbsx-hero__veil {
  background:
    radial-gradient(60% 80% at 18% 24%, rgba(199, 146, 74, 0.34) 0%, transparent 64%),
    radial-gradient(80% 60% at 100% 100%, rgba(13, 122, 120, 0.4) 0%, transparent 70%),
    linear-gradient(135deg, var(--deep) 0%, var(--navy) 55%, var(--teal-dark) 100%);
}

.mbbsx-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 30% at 80% 20%, rgba(255, 230, 163, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(7, 25, 34, 0.55) 100%);
  pointer-events: none;
}

.mbbsx-hero__grid {
  display: grid;
  grid-template-columns: 1.45fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.mbbsx-hero__copy {
  min-width: 0;
}

.mbbsx-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 230, 163, 0.18);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mbbsx-back:hover {
  color: var(--mbbs-gold-soft);
  border-color: rgba(255, 230, 163, 0.38);
  background: rgba(255, 230, 163, 0.10);
}

.mbbsx-back i {
  width: 14px;
  height: 14px;
}

.mbbsx-hero__crest {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.mbbsx-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 230, 163, 0.35);
  backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  flex-shrink: 0;
}

.mbbsx-flag img {
  width: 44px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
}

.mbbsx-hero__crestmeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mbbsx-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mbbs-gold-soft);
}

.mbbsx-hero__route {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.74);
  letter-spacing: 0.04em;
}

.mbbsx-hero__copy h1 {
  margin: 4px 0 20px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: #fff;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.36);
}

.mbbsx-hero__copy h1 .gold-text {
  color: var(--mbbs-gold-soft);
  background: none;
  -webkit-text-fill-color: var(--mbbs-gold-soft);
}

.mbbsx-lede {
  max-width: 600px;
  margin: 0 0 32px;
  font-size: 1.08rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.88);
}

.mbbsx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.mbbsx-trust {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mbbsx-trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 230, 163, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
}

.mbbsx-trust li i {
  width: 15px;
  height: 15px;
  color: var(--mbbs-gold-soft);
  flex-shrink: 0;
}

/* Hero snapshot card */
.mbbsx-snapshot {
  position: relative;
  padding: 36px 32px 28px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 230, 163, 0.30);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.mbbsx-snapshot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 230, 163, 0.55) 0%, rgba(255, 230, 163, 0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.mbbsx-snapshot__head {
  position: relative;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mbbsx-snapshot__eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mbbs-gold-soft);
}

.mbbsx-snapshot h2 {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: #fff;
}

.mbbsx-snapshot__head p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}

.mbbsx-snapshot__facts {
  position: relative;
  margin: 0 0 22px;
  display: grid;
  gap: 14px;
}

.mbbsx-snapshot__facts > div {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.mbbsx-snapshot__facts > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mbbsx-snapshot__facts dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 230, 163, 0.84);
}

.mbbsx-snapshot__facts dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
}

.mbbsx-snapshot__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mbbs-gold-soft);
  transition: gap 0.2s ease, color 0.2s ease;
}

.mbbsx-snapshot__link:hover {
  gap: 12px;
  color: #fff;
}

.mbbsx-snapshot__link i {
  width: 14px;
  height: 14px;
}

/* ============================================================
   SECTION BASE
   ============================================================ */
.mbbsx-section {
  position: relative;
  padding: 104px 0;
}

/* ============================================================
   INTRO / FOR INDIAN STUDENTS
   ============================================================ */
.mbbsx-section--intro {
  background: linear-gradient(180deg, #fffdf6 0%, #fff 100%);
}

.mbbsx-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.mbbsx-intro__copy .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}

.mbbsx-intro__copy h2 {
  margin: 0 0 28px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--navy);
}

.mbbsx-intro__prose {
  position: relative;
  padding-left: 24px;
  border-left: 2px solid rgba(199, 146, 74, 0.32);
}

.mbbsx-intro__para {
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.78;
  color: var(--ink);
}

.mbbsx-intro__para:last-child {
  margin-bottom: 0;
}

.mbbsx-intro__para + .mbbsx-intro__para {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--muted);
}

.mbbsx-intro__para.has-dropcap::first-letter {
  float: left;
  margin: 10px 16px 0 0;
  padding-top: 6px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 4.6rem;
  line-height: 0.85;
  color: var(--mbbs-gold);
}

.mbbsx-intro__callout {
  position: relative;
  padding: 36px 32px 32px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: #fff;
  box-shadow: 0 30px 64px rgba(7, 25, 34, 0.24);
  overflow: hidden;
}

.mbbsx-intro__callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(255, 230, 163, 0.18) 0%, transparent 60%);
  pointer-events: none;
}

.mbbsx-monogram {
  position: absolute;
  right: 18px;
  top: 8px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 7.4rem;
  line-height: 1;
  color: rgba(255, 230, 163, 0.16);
  pointer-events: none;
}

.mbbsx-callout__eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mbbs-gold-soft);
}

.mbbsx-intro__callout ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.mbbsx-intro__callout li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.mbbsx-intro__callout li i {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--mbbs-gold-soft);
  flex-shrink: 0;
}

/* ============================================================
   ADVANTAGES
   ============================================================ */
.mbbsx-section--advantages {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(13, 122, 120, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #fff 0%, #fbf8f0 100%);
}

.mbbsx-adv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

.mbbsx-adv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 220px;
  padding: 30px 28px 30px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fefbf3 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.mbbsx-adv__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 100% 0%, rgba(199, 146, 74, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.mbbsx-adv__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px rgba(7, 25, 34, 0.14);
  border-color: rgba(199, 146, 74, 0.42);
}

.mbbsx-adv__card:hover .mbbsx-adv__rule::before {
  transform: scaleX(1);
}

.mbbsx-adv__card:hover .mbbsx-adv__icon {
  transform: translateY(-2px) rotate(-3deg);
  box-shadow: 0 14px 28px rgba(199, 146, 74, 0.28);
}

.mbbsx-adv__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mbbsx-adv__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.65) 0%, transparent 50%),
    linear-gradient(135deg, var(--mbbs-gold) 0%, #a87432 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(199, 146, 74, 0.24);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.mbbsx-adv__icon i {
  width: 24px;
  height: 24px;
}

.mbbsx-adv__no {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(11, 43, 67, 0.18);
}

.mbbsx-adv__card p {
  position: relative;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}

.mbbsx-adv__rule {
  position: relative;
  display: block;
  height: 2px;
  margin-top: auto;
  background: rgba(199, 146, 74, 0.14);
  border-radius: 2px;
  overflow: hidden;
}

.mbbsx-adv__rule::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--mbbs-gold) 0%, rgba(199, 146, 74, 0) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.46s ease;
}

/* Legacy shared card pieces — kept for empty state & misc */
.mbbsx-card__no {
  position: relative;
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: 0.04em;
  color: var(--mbbs-gold);
}

.mbbsx-card__no::after {
  content: "";
  display: inline-block;
  margin-left: 12px;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--mbbs-gold) 0%, transparent 100%);
  vertical-align: middle;
}

.mbbsx-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(199, 146, 74, 0.16) 0%, rgba(199, 146, 74, 0.04) 100%);
  border: 1px solid rgba(199, 146, 74, 0.25);
  color: var(--mbbs-gold);
}

.mbbsx-card__icon i {
  width: 22px;
  height: 22px;
}

/* ============================================================
   CAREERS BEYOND MBBS
   ============================================================ */
.mbbsx-section--careers {
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(13, 122, 120, 0.06) 0%, transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(199, 146, 74, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fdfaf2 52%, #ffffff 100%);
}

.mbbsx-careers__head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}

.mbbsx-careers__copy .eyebrow.mbbsx-careers__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: rgba(45, 106, 79, 0.08);
  border: 1px solid rgba(45, 106, 79, 0.16);
  color: var(--mbbs-green, #2d6a4f);
  letter-spacing: 0.10em;
}

.mbbsx-careers__copy .eyebrow.mbbsx-careers__eyebrow::before {
  display: none;
}

.mbbsx-careers__copy .eyebrow.mbbsx-careers__eyebrow i {
  width: 15px;
  height: 15px;
}

.mbbsx-careers__copy h2 {
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.mbbsx-careers__copy h2 .mbbsx-careers__accent {
  position: relative;
  display: inline-block;
  background-image: var(--animated-text-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.mbbsx-careers__copy h2 .mbbsx-careers__accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 90px;
  height: 3px;
  background: linear-gradient(90deg, #2d6a4f 0%, rgba(45, 106, 79, 0) 100%);
  border-radius: 2px;
  -webkit-text-fill-color: initial;
}

.mbbsx-careers__copy p {
  margin: 0;
  max-width: 520px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
}

.mbbsx-careers__callout {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 106, 79, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(232, 247, 238, 0.72) 0%, rgba(245, 252, 248, 0.85) 100%);
  border: 1px solid rgba(45, 106, 79, 0.18);
  box-shadow: 0 10px 26px rgba(45, 106, 79, 0.08);
}

.mbbsx-careers__callout-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--mbbs-green, #2d6a4f);
  box-shadow: 0 6px 14px rgba(45, 106, 79, 0.16);
}

.mbbsx-careers__callout-icon i {
  width: 26px;
  height: 26px;
}

.mbbsx-careers__callout-copy p {
  margin: 0 0 4px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}

.mbbsx-careers__callout-copy strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mbbs-green, #2d6a4f);
}

.mbbsx-careers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.mbbsx-career-card {
  --tint-bg: rgba(13, 122, 120, 0.12);
  --tint-fg: #0f7a78;
  --tint-line: rgba(13, 122, 120, 0.38);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 28px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--mbbs-line-soft, rgba(7, 25, 34, 0.08));
  overflow: hidden;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.mbbsx-career-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--tint-bg) 0%, transparent 70%);
  opacity: 0.65;
  pointer-events: none;
  transition: transform 0.55s ease, opacity 0.55s ease;
}

.mbbsx-career-card:hover {
  transform: translateY(-6px);
  border-color: var(--tint-line);
  box-shadow: 0 26px 56px rgba(7, 25, 34, 0.12);
}

.mbbsx-career-card:hover::before {
  transform: scale(1.18) translate(-10%, 10%);
  opacity: 1;
}

.mbbsx-career-card:hover .mbbsx-career-card__icon {
  transform: translateY(-2px) rotate(-4deg);
}

.mbbsx-career-card:hover .mbbsx-career-card__rule::before {
  transform: scaleX(1);
}

.mbbsx-career-card__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mbbsx-career-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--tint-bg);
  color: var(--tint-fg);
  transition: transform 0.32s ease;
}

.mbbsx-career-card__icon i {
  width: 22px;
  height: 22px;
}

.mbbsx-career-card__no {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: rgba(11, 43, 67, 0.32);
}

.mbbsx-career-card h3 {
  position: relative;
  margin: 4px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--navy);
}

.mbbsx-career-card__rule {
  position: relative;
  display: block;
  height: 2px;
  background: rgba(11, 43, 67, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.mbbsx-career-card__rule::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--tint-fg) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.46s ease;
}

.mbbsx-career-card p {
  position: relative;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--muted);
}

.mbbsx-career-card[data-tint="teal"]     { --tint-bg: rgba(13, 122, 120, 0.12);  --tint-fg: #0f7a78; --tint-line: rgba(13, 122, 120, 0.4); }
.mbbsx-career-card[data-tint="green"]    { --tint-bg: rgba(45, 106, 79, 0.14);   --tint-fg: #2d6a4f; --tint-line: rgba(45, 106, 79, 0.42); }
.mbbsx-career-card[data-tint="lavender"] { --tint-bg: rgba(122, 88, 174, 0.14);  --tint-fg: #7a58ae; --tint-line: rgba(122, 88, 174, 0.42); }
.mbbsx-career-card[data-tint="peach"]    { --tint-bg: rgba(217, 111, 85, 0.14);  --tint-fg: #d96f55; --tint-line: rgba(217, 111, 85, 0.44); }
.mbbsx-career-card[data-tint="aqua"]     { --tint-bg: rgba(14, 165, 159, 0.14);  --tint-fg: #0ea59f; --tint-line: rgba(14, 165, 159, 0.42); }
.mbbsx-career-card[data-tint="rose"]     { --tint-bg: rgba(216, 87, 121, 0.14);  --tint-fg: #c84a6a; --tint-line: rgba(216, 87, 121, 0.44); }
.mbbsx-career-card[data-tint="sky"]      { --tint-bg: rgba(58, 117, 196, 0.14);  --tint-fg: #3a75c4; --tint-line: rgba(58, 117, 196, 0.42); }
.mbbsx-career-card[data-tint="mint"]     { --tint-bg: rgba(67, 138, 95, 0.14);   --tint-fg: #3f8a5d; --tint-line: rgba(67, 138, 95, 0.42); }

.js .mbbsx-careers__grid .mbbsx-career-card.reveal {
  transition: opacity 520ms ease, transform 520ms ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}

@media (max-width: 1100px) {
  .mbbsx-careers__head {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 44px;
  }

  .mbbsx-careers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mbbsx-careers__grid {
    grid-template-columns: 1fr;
  }

  .mbbsx-careers__callout {
    padding: 18px 20px;
  }

  .mbbsx-careers__copy h2 br {
    display: none;
  }
}

/* ============================================================
   ELIGIBILITY
   ============================================================ */
.mbbsx-section--eligibility {
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(7, 25, 34, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #fbf8f0 0%, #fff 100%);
}

.mbbsx-elig__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 32px;
}

.mbbsx-elig__panel {
  position: relative;
  padding: 42px 38px 36px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fcfaf4 100%);
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px rgba(7, 25, 34, 0.07);
  overflow: hidden;
}

.mbbsx-elig__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 100% 0%, rgba(199, 146, 74, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.mbbsx-elig__panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mbbs-gold) 0%, rgba(199, 146, 74, 0) 70%);
}

.mbbsx-elig__panel--dark {
  background: linear-gradient(165deg, var(--navy) 0%, var(--teal-dark) 100%);
  border-color: transparent;
  color: #fff;
}

.mbbsx-elig__panel--dark::before {
  background: radial-gradient(70% 50% at 100% 0%, rgba(255, 230, 163, 0.20) 0%, transparent 60%);
}

.mbbsx-elig__panel--dark::after {
  background: linear-gradient(90deg, var(--mbbs-gold-soft) 0%, rgba(255, 230, 163, 0) 70%);
}

.mbbsx-elig__panel header {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(7, 25, 34, 0.08);
}

.mbbsx-elig__panel--dark header {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.mbbsx-elig__panel header > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mbbsx-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.65) 0%, transparent 50%),
    linear-gradient(135deg, var(--mbbs-gold) 0%, #a87432 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(199, 146, 74, 0.28);
  flex-shrink: 0;
}

.mbbsx-elig__panel--dark .mbbsx-panel__icon {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.20) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255, 230, 163, 0.28) 0%, rgba(255, 230, 163, 0.08) 100%);
  color: var(--mbbs-gold-soft);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

.mbbsx-panel__icon i {
  width: 26px;
  height: 26px;
}

.mbbsx-elig__panel h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.mbbsx-elig__panel--dark h3 {
  color: #fff;
}

.mbbsx-elig__panel--dark .eyebrow {
  color: var(--mbbs-gold-soft);
}

.mbbsx-check {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.mbbsx-check li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  font-size: 0.99rem;
  line-height: 1.6;
  color: var(--ink);
  border-bottom: 1px solid rgba(7, 25, 34, 0.06);
}

.mbbsx-elig__panel--dark .mbbsx-check li {
  color: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

.mbbsx-check li:first-child {
  padding-top: 4px;
}

.mbbsx-check li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.mbbsx-check li i {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(13, 122, 120, 0.12);
  color: var(--teal);
  flex-shrink: 0;
}

.mbbsx-elig__panel--dark .mbbsx-check li i {
  background: rgba(255, 230, 163, 0.16);
  color: var(--mbbs-gold-soft);
}

/* ============================================================
   WHY POPULAR — editorial
   ============================================================ */
.mbbsx-section--why {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(13, 122, 120, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #fbf8f0 100%);
}

/* ---- Country profile strip ---- */
.mbbsx-profile {
  position: relative;
  padding: 38px 44px 36px;
  margin: 0 0 56px;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(199, 146, 74, 0.18) 0%, transparent 50%),
    linear-gradient(165deg, var(--navy) 0%, var(--teal-dark) 100%);
  color: #fff;
  box-shadow: 0 36px 72px rgba(7, 25, 34, 0.26);
  overflow: hidden;
}

.mbbsx-profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 40% at 100% 100%, rgba(255, 230, 163, 0.14) 0%, transparent 60%);
  pointer-events: none;
}

.mbbsx-profile__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mbbsx-profile__head .mbbsx-callout__eyebrow {
  margin-bottom: 8px;
}

.mbbsx-profile__head h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(1.65rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  color: #fff;
}

.mbbsx-profile__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 230, 163, 0.34);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  overflow: hidden;
}

.mbbsx-profile__flag img {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
}

.mbbsx-profile__grid {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
}

.mbbsx-profile__grid > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mbbsx-profile__grid dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 230, 163, 0.86);
}

.mbbsx-profile__grid dd {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.3;
  color: #fff;
}

/* ---- Editorial stories ---- */
.mbbsx-stories {
  display: grid;
  gap: 24px;
  counter-reset: story;
}

.mbbsx-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2.3fr);
  gap: 56px;
  padding: 40px 44px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  align-items: start;
  overflow: hidden;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.mbbsx-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(199, 146, 74, 0.06) 0%, transparent 30%);
  pointer-events: none;
}

.mbbsx-story:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(7, 25, 34, 0.12);
  border-color: rgba(199, 146, 74, 0.36);
}

.mbbsx-story__index {
  position: relative;
}

.mbbsx-story__no {
  display: block;
  margin-bottom: 14px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 4.6rem;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--mbbs-gold);
}

.mbbsx-story__index h3 {
  position: relative;
  margin: 0;
  padding-top: 18px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.mbbsx-story__index h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--mbbs-gold) 0%, rgba(199, 146, 74, 0) 100%);
}

.mbbsx-story__body {
  position: relative;
  padding-top: 14px;
}

.mbbsx-story__body p {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.78;
  color: var(--ink);
}

.mbbsx-why__empty {
  padding: 48px 36px;
  border-radius: 18px;
  background: #fff;
  border: 1px dashed rgba(199, 146, 74, 0.40);
  text-align: center;
}

.mbbsx-why__empty .mbbsx-card__icon {
  margin: 0 auto 16px;
}

.mbbsx-why__empty h3 {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
}

.mbbsx-why__empty p {
  margin: 0 auto 22px;
  max-width: 520px;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ============================================================
   ADMISSION PROCESS
   ============================================================ */
.mbbsx-section--process {
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(199, 146, 74, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #fbf8f0 0%, #fff 100%);
}

.mbbsx-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: mbbsx-process-step;
}

.mbbsx-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 26px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fefbf3 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.mbbsx-process__step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(199, 146, 74, 0.06) 0%, transparent 35%);
  pointer-events: none;
}

.mbbsx-process__step::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mbbs-gold) 0%, rgba(199, 146, 74, 0) 70%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
}

.mbbsx-process__step:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(7, 25, 34, 0.12);
  border-color: rgba(199, 146, 74, 0.4);
}

.mbbsx-process__step:hover::after {
  transform: scaleX(1);
}

.mbbsx-process__step:hover .mbbsx-process__badge {
  transform: rotate(-4deg) translateY(-2px);
}

.mbbsx-process__head {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
}

.mbbsx-process__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.65) 0%, transparent 50%),
    linear-gradient(135deg, var(--mbbs-gold) 0%, #a87432 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(199, 146, 74, 0.26);
  flex-shrink: 0;
  transition: transform 0.32s ease;
}

.mbbsx-process__badge i {
  width: 22px;
  height: 22px;
}

.mbbsx-process__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mbbsx-process__no {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mbbs-gold);
}

.mbbsx-process__heading h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--navy);
}

.mbbsx-process__substeps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  display: grid;
  gap: 8px;
  border-top: 1px dashed rgba(7, 25, 34, 0.10);
}

.mbbsx-process__substeps li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}

.mbbsx-process__substeps li i {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(13, 122, 120, 0.12);
  color: var(--teal);
  flex-shrink: 0;
}

/* ============================================================
   CTA
   ============================================================ */
.mbbsx-cta {
  position: relative;
  padding: 110px 0 120px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--deep) 100%);
  color: #fff;
  overflow: hidden;
}

.mbbsx-cta__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 40% at 12% 18%, rgba(13, 122, 120, 0.32) 0%, transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(255, 230, 163, 0.14) 0%, transparent 60%);
  pointer-events: none;
}

.mbbsx-cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 56px;
  align-items: center;
}

.mbbsx-cta__copy .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--mbbs-gold-soft);
}

.mbbsx-cta__copy h2 {
  margin: 0 0 22px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.10;
  letter-spacing: -0.012em;
  color: #fff;
}

.mbbsx-cta__copy h2 .gold-text {
  color: var(--mbbs-gold-soft);
  -webkit-text-fill-color: var(--mbbs-gold-soft);
}

.mbbsx-cta__copy p {
  max-width: 560px;
  margin: 0 0 30px;
  font-size: 1.04rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.84);
}

.mbbsx-cta__card {
  position: relative;
  padding: 38px 34px 34px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 230, 163, 0.32);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.mbbsx-cta__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 230, 163, 0.45) 0%, rgba(255, 230, 163, 0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.mbbsx-cta__monogram {
  position: absolute;
  right: 14px;
  top: 4px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 8.4rem;
  line-height: 1;
  color: rgba(255, 230, 163, 0.14);
  pointer-events: none;
}

.mbbsx-cta__card h3 {
  position: relative;
  margin: 0 0 20px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #fff;
}

.mbbsx-cta__card ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.mbbsx-cta__card li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.mbbsx-cta__card li i {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--mbbs-gold-soft);
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .mbbsx-profile__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mbbsx-story {
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
    gap: 36px;
    padding: 34px 32px;
  }
}

@media (max-width: 980px) {
  .mbbsx-hero {
    padding: 96px 0 80px;
  }

  .mbbsx-hero__grid,
  .mbbsx-intro__grid,
  .mbbsx-cta__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .mbbsx-section {
    padding: 76px 0;
  }

  .mbbsx-cta {
    padding: 80px 0 88px;
  }

  .mbbsx-intro__prose {
    padding-left: 18px;
  }

  .mbbsx-profile {
    padding: 32px 30px 30px;
  }

  .mbbsx-profile__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
  }

  .mbbsx-story {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 32px 30px;
  }

  .mbbsx-story__no {
    font-size: 3.6rem;
  }

  .mbbsx-story__index h3 {
    padding-top: 14px;
    font-size: 1.5rem;
  }

  .mbbsx-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mbbsx-process__step {
    padding: 22px 22px 20px;
  }

  .mbbsx-process__badge {
    width: 48px;
    height: 48px;
  }

  .mbbsx-process__badge i {
    width: 20px;
    height: 20px;
  }

  .mbbsx-process__heading h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 720px) {
  .mbbsx-hero {
    padding: 80px 0 64px;
  }

  .mbbsx-hero__copy h1 {
    font-size: 2.4rem;
  }

  .mbbsx-snapshot,
  .mbbsx-intro__callout,
  .mbbsx-cta__card {
    padding: 28px 22px;
  }

  .mbbsx-elig__panel {
    padding: 30px 22px 26px;
  }

  .mbbsx-elig__panel header {
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
  }

  .mbbsx-elig__panel h3 {
    font-size: 1.45rem;
  }

  .mbbsx-profile {
    padding: 28px 22px;
  }

  .mbbsx-profile__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .mbbsx-profile__grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .mbbsx-story {
    padding: 28px 22px;
  }

  .mbbsx-process {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .mbbsx-process__step {
    padding: 20px 18px 18px;
    gap: 14px;
  }

  .mbbsx-process__head {
    gap: 12px;
  }

  .mbbsx-process__badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .mbbsx-process__badge i {
    width: 18px;
    height: 18px;
  }

  .mbbsx-process__heading h3 {
    font-size: 1.05rem;
  }

  .mbbsx-process__substeps {
    padding-top: 12px;
    gap: 6px;
  }

  .mbbsx-process__substeps li {
    font-size: 0.88rem;
  }

  .mbbsx-adv__icon {
    width: 48px;
    height: 48px;
  }

  .mbbsx-cta__monogram {
    font-size: 6.2rem;
  }

  .mbbsx-monogram {
    font-size: 5.6rem;
  }

  .mbbsx-intro__para.has-dropcap::first-letter {
    font-size: 3.6rem;
    margin: 8px 12px 0 0;
  }
}

/* =============================================================
   BLOG — index + single post
   ============================================================= */
.page-blog {
  --blog-line: rgba(7, 25, 34, 0.10);
  --blog-ink:  #0b2b43;
  --blog-mute: #5a6a76;
  --blog-bg-soft: #fbfaf6;
}

.blog-page {
  background: var(--blog-bg-soft);
}

/* ---------- Index hero ---------- */
.blog-page-head {
  padding: 96px 0 56px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(199, 146, 74, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
  border-bottom: 1px solid var(--blog-line);
}

.blog-page-head .eyebrow {
  color: var(--teal-dark, #0b5859);
  margin-bottom: 18px;
}

.blog-page-title {
  margin: 0 0 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--blog-ink);
  max-width: 800px;
}

.blog-page-kicker {
  max-width: 640px;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--blog-mute);
}

/* ---------- Index list ---------- */
.blog-list-section {
  padding: 64px 0 96px;
}

.blog-list-container {
  width: min(calc(100% - 40px), 880px);
  margin: 0 auto;
}

.blog-list-item {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--blog-line);
}

.blog-list-item:first-child {
  padding-top: 8px;
}

.blog-list-media {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 3;
  background: #eee;
}

.blog-list-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease, filter 600ms ease;
}

.blog-list-item:hover .blog-list-media img {
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.02);
}

.blog-list-body {
  min-width: 0;
}

.blog-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(13, 122, 120, 0.08);
  color: var(--teal-dark, #0b5859);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-chip--on-dark {
  background: rgba(255, 230, 163, 0.18);
  color: #ffe6a3;
}

/* Multiple category chips (post hero + listing cards) wrap with even spacing. */
.blog-post-chips,
.blog-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-list-title {
  margin: 14px 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 1.92rem);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--blog-ink);
}

.blog-list-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 320ms ease;
}

.blog-list-title a:hover,
.blog-list-title a:focus-visible {
  background-size: 100% 1.5px;
}

.blog-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--blog-mute);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.blog-list-excerpt {
  margin: 0 0 14px;
  color: #344650;
  font-size: 1rem;
  line-height: 1.6;
}

.blog-list-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-dark, #0b5859);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 220ms ease, color 220ms ease;
}

.blog-list-cta:hover {
  gap: 12px;
  color: #0b6664;
}

.blog-list-cta i,
.blog-list-cta svg {
  width: 14px;
  height: 14px;
}

/* ---------- One Degree editorial blog grid ---------- */
.blog-grid-section {
  padding: 64px 0 96px;
}

.blog-grid-container {
  width: min(calc(100% - 40px), 1240px);
}

.blog-featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 36px;
  align-items: center;
  margin: 0 0 72px;
}

.blog-featured-media,
.blog-grid-card-media {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #e9efef;
}

.blog-featured-media {
  aspect-ratio: 1.897 / 1;
}

.blog-featured-media img,
.blog-grid-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 540ms ease, filter 540ms ease;
}

.blog-featured-post:hover .blog-featured-media img,
.blog-grid-card:hover .blog-grid-card-media img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.02);
}

.blog-featured-copy h2,
.blog-grid-card h2 {
  margin: 14px 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--blog-ink);
}

.blog-featured-copy h2 {
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.02;
}

.blog-featured-copy h2 a,
.blog-grid-card h2 a {
  color: inherit;
  text-decoration: none;
}

.blog-featured-copy h2 a:hover,
.blog-grid-card h2 a:hover {
  color: var(--teal-dark, #0b5859);
}

.blog-featured-copy > p:not(.blog-list-meta) {
  max-width: 520px;
  margin: 0;
  color: #344650;
  font-size: 1.04rem;
  line-height: 1.65;
}

.blog-editorial-grid {
  margin-top: 18px;
}

.blog-editorial-grid-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 30px;
  align-items: start;
  margin-bottom: 64px;
}

.blog-grid-extras {
  grid-column: auto;
  grid-row: auto;
  display: grid;
  grid-template-rows: auto auto;
  gap: 30px;
  align-self: start;
}

.blog-grid-signup,
.blog-grid-social {
  padding-top: 14px;
  border-top: 3px solid var(--blog-ink);
}

.blog-grid-signup h2 {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 4vw, 2.45rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blog-ink);
}

.blog-grid-signup p,
.blog-grid-social p {
  margin: 0 0 24px;
  color: #344650;
  line-height: 1.55;
}

.blog-grid-signup form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  border-bottom: 1px solid var(--blog-ink);
}

.blog-grid-signup input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blog-ink);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-grid-signup input:focus {
  outline: none;
}

.blog-grid-signup button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blog-ink);
}

.blog-grid-signup button svg {
  width: 18px;
  height: 18px;
}

.blog-grid-social {
  min-height: 0;
  padding: 18px;
  border: 1px solid rgba(13, 122, 120, 0.18);
  border-top: 3px solid var(--teal-dark, #0b5859);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(223, 245, 241, 0.8), #ffffff);
}

.blog-grid-social-mark {
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: 18px;
}

.blog-grid-social strong {
  display: block;
  color: var(--blog-ink);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-grid-card {
  min-width: 0;
}

.blog-grid-card-media {
  aspect-ratio: 1.413 / 1;
  margin-bottom: 18px;
}

.blog-grid-card h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.06;
}

.blog-grid-card-body > p:not(.blog-list-meta) {
  margin: 0 0 14px;
  color: #344650;
  font-size: 0.98rem;
  line-height: 1.58;
}

.blog-editorial-grid-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 30px;
}

.blog-editorial-grid-page .blog-grid-card {
  display: block;
  width: auto;
  margin: 0;
}

/* ---------- Pagination ---------- */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 56px;
}

.blog-pagination-page,
.blog-pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--blog-line);
  color: var(--blog-ink);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.blog-pagination-page:hover,
.blog-pagination-arrow:hover {
  background: rgba(13, 122, 120, 0.08);
  border-color: rgba(13, 122, 120, 0.32);
  color: var(--teal-dark, #0b5859);
  transform: translateY(-1px);
}

.blog-pagination-page.is-current {
  background: var(--teal-dark, #0b5859);
  border-color: var(--teal-dark, #0b5859);
  color: #ffffff;
  cursor: default;
}

.blog-pagination-arrow i,
.blog-pagination-arrow svg {
  width: 16px;
  height: 16px;
}

/* ---------- Newsletter band (shared with single post) ---------- */
.blog-newsletter {
  padding: 64px 0;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
  border-top: 1px solid var(--blog-line);
}

.blog-newsletter-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.blog-newsletter-copy h2 {
  margin: 8px 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.12;
  color: var(--blog-ink);
}

.blog-newsletter-copy p {
  margin: 0;
  color: var(--blog-mute);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 460px;
}

.blog-newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-newsletter-form input {
  flex: 1 1 220px;
  min-width: 220px;
  padding: 14px 18px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--blog-ink);
  font-size: 0.96rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.blog-newsletter-form input:focus {
  outline: none;
  border-color: rgba(13, 122, 120, 0.62);
  box-shadow: 0 0 0 4px rgba(13, 122, 120, 0.12);
}

.blog-newsletter-form .btn {
  flex: 0 0 auto;
  border-radius: 999px;
}

/* ---------- Single post hero ---------- */
.blog-post-hero {
  position: relative;
  isolation: isolate;
  padding: 0;
  background: #071922;
  color: #ffffff;
}

.blog-post-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.blog-post-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: saturate(0.92) contrast(1.02);
}

.blog-post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 25, 34, 0.55) 0%, rgba(7, 25, 34, 0.78) 70%, rgba(7, 25, 34, 0.94) 100%);
}

.blog-post-hero-copy {
  padding: 120px 0 88px;
  max-width: 880px;
}

.blog-post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 230, 163, 0.22);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.blog-post-back:hover {
  background: rgba(255, 230, 163, 0.10);
  color: #ffe6a3;
  border-color: rgba(255, 230, 163, 0.4);
}

.blog-post-back i,
.blog-post-back svg {
  width: 14px;
  height: 14px;
}

.blog-post-title {
  margin: 18px 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #ffffff;
}

.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

/* ---------- Single post body ---------- */
.blog-post-article {
  padding: 72px 0 96px;
  background: #ffffff;
}

.blog-post-shell {
  width: min(calc(100% - 40px), 760px);
  margin: 0 auto;
}

.blog-post-body {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1.08rem;
  line-height: 1.75;
  color: #1a2a36;
}

.blog-post-lede {
  margin: 0 0 28px;
  font-size: 1.22rem;
  line-height: 1.6;
  font-weight: 500;
  color: #0b2b43;
  letter-spacing: -0.005em;
}

.blog-post-body p {
  margin: 0 0 22px;
}

.blog-post-body h2 {
  margin: 44px 0 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.92rem);
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--blog-ink);
}

.blog-post-body h3 {
  margin: 32px 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.22;
  color: var(--blog-ink);
}

.blog-post-body a {
  color: var(--teal-dark, #0b5859);
  text-decoration: underline;
  text-decoration-color: rgba(13, 122, 120, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}

.blog-post-body a:hover {
  text-decoration-color: currentColor;
}

.blog-post-figure {
  margin: 34px 0;
}

.blog-post-figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--blog-line);
}

.blog-post-figure figcaption {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--muted, #5b6b74);
  text-align: center;
}

.blog-post-table-wrap {
  overflow-x: auto;
  margin: 34px 0;
  border-radius: 12px;
  border: 1px solid var(--blog-line);
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(7, 25, 34, 0.07);
}

.blog-post-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.94rem;
  line-height: 1.45;
}

.blog-post-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--blog-line);
  color: #263944;
  vertical-align: top;
}

.blog-post-table tr:first-child td {
  background: #fbfaf6;
  color: var(--blog-ink);
  font-weight: 800;
}

.blog-post-table tr:last-child td {
  border-bottom: 0;
}

.blog-post-table td:first-child {
  color: var(--blog-ink);
  font-weight: 800;
}

.blog-post-list {
  margin: 0 0 24px;
  padding-left: 0;
  list-style: none;
}

.blog-post-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}

.blog-post-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-dark, #0b5859);
}

.blog-post-quote {
  margin: 36px 0;
  padding: 22px 26px 22px 28px;
  border-left: 3px solid var(--teal-dark, #0b5859);
  background: #fbfaf6;
  border-radius: 0 12px 12px 0;
}

.blog-post-quote p {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.4;
  color: var(--blog-ink);
}

.blog-post-quote cite {
  display: block;
  color: var(--blog-mute);
  font-size: 0.84rem;
  font-style: normal;
  letter-spacing: 0.03em;
}

/* ---------- In-article CTA ---------- */
.blog-post-inline-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: 48px 0 12px;
  padding: 28px 30px;
  border-radius: 16px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(199, 146, 74, 0.16) 0%, transparent 65%),
    linear-gradient(135deg, #0b2b43 0%, #06324a 100%);
  color: #ffffff;
}

.blog-post-inline-cta .eyebrow {
  color: #ffe6a3;
  margin-bottom: 8px;
}

.blog-post-inline-cta h3 {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.18;
  color: #ffffff;
}

.blog-post-inline-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.96rem;
}

/* ---------- Related grid ---------- */
.blog-related {
  padding: 72px 0 64px;
  background: var(--blog-bg-soft);
  border-top: 1px solid var(--blog-line);
}

.blog-related-head {
  margin-bottom: 32px;
}

.blog-related-head .eyebrow {
  color: var(--teal-dark, #0b5859);
  margin-bottom: 10px;
}

.blog-related-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.01em;
  color: var(--blog-ink);
}

.blog-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.blog-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid var(--blog-line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

.blog-related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 122, 120, 0.28);
  box-shadow: 0 22px 44px rgba(7, 25, 34, 0.12);
}

.blog-related-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eee;
}

.blog-related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.blog-related-card:hover .blog-related-media img {
  transform: scale(1.05);
}

.blog-related-body {
  padding: 18px 20px 22px;
}

.blog-related-body h3 {
  margin: 12px 0 8px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.22;
  color: var(--blog-ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .blog-featured-post,
  .blog-editorial-grid-top {
    grid-template-columns: 1fr;
  }

  .blog-grid-extras {
    grid-column: auto;
    grid-row: auto;
  }

  .blog-featured-media {
    aspect-ratio: 16 / 10;
  }

  .blog-editorial-grid-page {
    grid-template-columns: 1fr;
  }

  .blog-list-item {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .blog-list-media {
    aspect-ratio: 16 / 10;
  }

  .blog-post-hero-copy {
    padding: 96px 0 64px;
  }

  .blog-newsletter-shell {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .blog-post-inline-cta {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .blog-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .blog-page-title,
  .blog-page-kicker,
  .blog-featured-copy,
  .blog-featured-copy h2,
  .blog-featured-copy p,
  .blog-grid-card,
  .blog-grid-card h2,
  .blog-grid-card p,
  .blog-grid-signup,
  .blog-grid-signup h2,
  .blog-grid-social {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .blog-grid-section {
    padding: 44px 0 72px;
  }

  .blog-grid-container {
    width: min(calc(100% - 28px), 1240px);
  }

  .blog-featured-post {
    gap: 22px;
    margin-bottom: 54px;
  }

  .blog-editorial-grid-top {
    gap: 42px;
    margin-bottom: 42px;
  }

  .blog-grid-social {
    min-height: 0;
  }

  .blog-page-head {
    padding: 72px 0 44px;
  }

  .blog-list-section {
    padding: 44px 0 72px;
  }

  .blog-post-article {
    padding: 52px 0 72px;
  }

  .blog-related-grid {
    grid-template-columns: 1fr;
  }

  .blog-pagination-page,
  .blog-pagination-arrow {
    min-width: 34px;
    height: 34px;
    font-size: 0.86rem;
  }
}

/* ───────────────────────── Test Preparation page (scoped) ───────────────────────── */
.tp-edwise {
  --tp-primary: #1d438d;
  --tp-secndry: #231f20;
  --tp-lblue: #c6d3e3;
  --tp-fill: #1d438d;
  --tp-line: #1d438d;
  background: #fff;
}

/* Test-prep page background = source site (white), and switch the body's
   horizontal-overflow guard from `hidden` (which makes body a scroll
   container and disables position:sticky) to `clip` (clips the same, but
   keeps sticky working) so the benefit image pins while the steps scroll. */
body.tp-body {
  overflow-x: clip;
  background: #fff;
}

/* Use the source site's font (Poppins) throughout this page, overriding
   the global Cormorant/Manrope. NOTE: do not set overflow on .tp-edwise —
   it breaks the sticky benefit image. */
.tp-edwise,
.tp-edwise h1,
.tp-edwise h2,
.tp-edwise h3,
.tp-edwise h4,
.tp-edwise h5,
.tp-edwise h6,
.tp-edwise p,
.tp-edwise a,
.tp-edwise span,
.tp-edwise strong,
.tp-edwise .sec-title,
.tp-edwise .hero-title-txt,
.tp-edwise .benef-title,
.tp-edwise .prep-cors-title,
.tp-edwise .button {
  font-family: "Poppins", sans-serif;
}

.tp-edwise .container {
  max-width: 1380px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.tp-edwise .f-row {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  flex-wrap: wrap;
}

.tp-edwise .f-col {
  padding: 0 15px;
}

.tp-edwise .f-2 .f-col {
  width: 50%;
}

.tp-edwise .button {
  background: var(--tp-fill);
  border: 1px solid transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: fit-content;
  line-height: 46px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.tp-edwise .button:hover {
  background: transparent;
  border: 1px solid var(--tp-fill);
  color: var(--tp-fill);
}

.tp-edwise .button.line {
  background: transparent;
  border: 1px solid var(--tp-line);
  color: var(--tp-line);
}

.tp-edwise .button.line:hover {
  background: var(--tp-line);
  border: 1px solid var(--tp-line);
  color: #fff;
}

.tp-edwise .comm-section {
  padding: 50px 0;
  position: relative;
}

.tp-edwise .comm-para p {
  font-size: 18px;
  line-height: 1.6;
  color: #4d5566;
}

.tp-edwise .sec-title {
  font-size: 42px;
  font-weight: 400;
  line-height: 1.25;
  text-transform: capitalize;
  color: var(--tp-secndry);
  /* Cancel the global `h1 { max-width: 760px }`, which left-pins the
     centered prep heading inside a narrow box. */
  max-width: none;
}

.tp-edwise .text-center {
  text-align: center !important;
}

/* Hero */
.tp-edwise .hero-title-txt {
  font-size: 52px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--tp-secndry);
  position: relative;
}

.tp-edwise .hero-title-txt strong {
  font-weight: 700;
}

.tp-edwise .hero-title-txt::before {
  content: "";
  background: url(/assets/test-prep/hero-elem-1.svg) no-repeat;
  background-size: contain;
  display: block;
  width: 44.82px;
  height: 44.16px;
  position: absolute;
  top: -23px;
  left: -20px;
}

.tp-edwise .highlighter {
  font-weight: 600;
  position: relative;
}

.tp-edwise .highlighter::after {
  content: "";
  background: url(/assets/test-prep/hero-elem-2.png) no-repeat;
  background-size: 90% 100%;
  display: block;
  width: 100%;
  height: 15.5px;
  position: absolute;
  bottom: -10px;
  left: 10px;
}

.tp-edwise .inner-hero {
  width: 100%;
  height: 100%;
  padding-top: 30px;
}

.tp-edwise .inner-hero-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tp-edwise .inner-hero-right {
  max-width: 444px;
  max-height: 413px;
  width: 100%;
  height: auto;
}

.tp-edwise .inner-hero-right img {
  width: 100%;
  height: auto;
  object-fit: fill;
}

.tp-edwise .inner-hero-left {
  max-width: 630px;
  width: 100%;
}

.tp-edwise .inner-hero-left .comm-para {
  margin: 26px 0 51px;
}

.tp-edwise .inner-hero-left .comm-para p {
  color: #4d5566;
}

.tp-edwise .inner-hero-2 {
  background: url(/assets/test-prep/inner-hero-bg-2.webp) center top no-repeat;
  background-size: contain;
}

.tp-edwise .inner-hero-2 .inner-hero-wrap {
  min-height: 64vh;
}

.tp-edwise .inner-hero-2 .inner-hero-right {
  max-width: 454px;
  max-height: 468px;
  width: 100%;
  height: 100%;
  margin-right: 90px;
}

.tp-edwise .inner-hero-2 .inner-hero-left {
  max-width: 580px;
}

.tp-edwise .inner-hero-2 .inner-hero-left .comm-para {
  margin-top: 40px;
}

.tp-edwise .inner-hero-2 .inner-hero-left .comm-para p {
  font-size: 16px;
}

.tp-edwise .inner-hero-2 .hero-title-txt::before {
  top: -32px;
  left: 10px;
}

/* Benefits */
.tp-edwise .benefit-hdr {
  width: 55%;
}

.tp-edwise .benefit-hdr p {
  margin-top: 16px;
}

.tp-edwise .benefit-content-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
}

.tp-edwise .benefit-img-wrap {
  display: block;
  width: 40%;
}

.tp-edwise .benef-sticky-div {
  position: relative;
  height: 100%;
}

.tp-edwise .benefit-img {
  position: sticky;
  top: 130px;
}

.tp-edwise .benefit-img img {
  width: 100%;
  height: auto;
  border-radius: 30px;
}

.tp-edwise .benefit-content {
  width: 50%;
}

.tp-edwise .benefit-box {
  padding: 60px;
  margin-bottom: 40px;
  border-radius: 44px;
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(200deg, #c6d3e3, #ffffff, #dde5ee) border-box;
}

.tp-edwise .benefit-count {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 2px #ff4524;
  font-size: 45px;
  font-weight: 600;
}

.tp-edwise .benef-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--tp-secndry);
  margin: 8px 0 16px;
  text-transform: capitalize;
}

.tp-edwise .benef-dtl p {
  font-size: 16px;
  line-height: 1.6;
  color: #4d5566;
}

/* Preparation courses */
.tp-edwise .prep-hdr {
  width: 80%;
  margin: 0 auto 60px;
}

.tp-edwise .prep-hdr p {
  width: 70%;
  margin: 16px auto 0;
  color: #4d5566;
}

.tp-edwise .prop-corse-wrap .f-row {
  gap: 30px 0;
}

.tp-edwise .prop-corse-wrap .f-col {
  display: flex;
  height: auto;
}

.tp-edwise .prep-corse-box {
  border-radius: 44px;
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(190deg, #c6d3e3, #e8edf4, #dde5ee) border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tp-edwise .prep-cors-img {
  max-height: 389px;
  height: 100%;
  width: 100%;
  margin-top: -2px;
}

.tp-edwise .prep-cors-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

.tp-edwise .prep-corse-content {
  padding: 24px;
}

.tp-edwise .prep-corse-content .button {
  margin-top: 20px;
}

.tp-edwise .prep-corse-content p {
  white-space: normal;
}

.tp-edwise .prep-cors-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--tp-secndry);
}

/* AOS fade-in (matches source markup) */
.tp-edwise [data-aos="fade-in"] {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.tp-edwise [data-aos="fade-in"].aos-animate {
  opacity: 1;
}

/* Responsive */
@media all and (max-width: 1440px) {
  .tp-edwise .container { max-width: 1280px; }
  .tp-edwise .hero-title-txt { font-size: 50px; }
  .tp-edwise .comm-para p { font-size: 16px; }
  .tp-edwise .sec-title { font-size: 40px; }
  .tp-edwise .inner-hero-2 .inner-hero-wrap { min-height: 60vh; }
  .tp-edwise .inner-hero-2 .inner-hero-right { max-width: 454px; max-height: 473px; }
}

@media all and (max-width: 1368px) {
  .tp-edwise .container { max-width: calc(100% - 120px); }
  .tp-edwise .benefit-count { font-size: 40px; }
  .tp-edwise .benef-title { font-size: 22px; }
  .tp-edwise .hero-title-txt { font-size: 46px; }
  .tp-edwise .inner-hero-2 .inner-hero-right { max-width: 384px; max-height: 408px; }
}

@media all and (max-width: 1280px) {
  .tp-edwise .comm-section { padding: 40px 0; }
  .tp-edwise .sec-title { font-size: 34px; }
  .tp-edwise .inner-hero-2 .inner-hero-right { max-width: 380px; max-height: 385px; }
  .tp-edwise .prep-corse-content { padding: 30px; }
  .tp-edwise .highlighter::after { height: 8.5px; bottom: 0; }
  .tp-edwise .inner-hero-2 .inner-hero-left { max-width: 550px; }
}

@media all and (max-width: 1024px) {
  .tp-edwise .comm-section { padding: 50px 0; }
  .tp-edwise .hero-title-txt { font-size: 34px; }
  .tp-edwise .sec-title { font-size: 32px; }
  .tp-edwise .inner-hero-left .comm-para { margin: 26px 0 0; }
  .tp-edwise .benefit-img-wrap { width: 46%; }
  .tp-edwise .benefit-box { padding: 40px; }
  .tp-edwise .inner-hero-right { max-width: 364px; max-height: 338px; }
  .tp-edwise .inner-hero-left { max-width: 420px; width: 100%; }
}

@media all and (max-width: 834px) {
  .tp-edwise .comm-section { padding: 40px 0; }
  .tp-edwise .benefit-box { padding: 30px; }
  .tp-edwise .benef-title { font-size: 20px; }
  .tp-edwise .benefit-content-wrap { flex-direction: column; margin-top: 20px; }
  .tp-edwise .benefit-img-wrap,
  .tp-edwise .benefit-content { width: 100%; }
  .tp-edwise .inner-hero-2 .inner-hero-wrap { min-height: auto; gap: 70px; }
}

@media all and (max-width: 768px) {
  .tp-edwise .container { max-width: calc(100% - 90px); }
  .tp-edwise .sec-title { font-size: 26px; }
  .tp-edwise .prep-hdr p { width: 100%; }
  .tp-edwise .prep-cors-img { max-height: 178px; }
  .tp-edwise .prep-corse-content { padding: 24px 22px; }
  .tp-edwise .f-768-1 .f-col { width: 100%; }
  .tp-edwise .inner-hero-2 .inner-hero-wrap { flex-direction: column-reverse; gap: 30px 0; min-height: auto; margin-top: 20px; }
  .tp-edwise .inner-hero-2 .inner-hero-right { margin-right: 0; }
  .tp-edwise .benefit-hdr { width: 100%; }
}

@media all and (max-width: 640px) {
  .tp-edwise .container { max-width: calc(100% - 60px); }
  .tp-edwise .inner-hero-2 .inner-hero-wrap { flex-direction: column-reverse; gap: 40px; min-height: auto; }
  .tp-edwise .benefit-hdr { width: 100%; }
  .tp-edwise .benefit-content-wrap { margin-top: 40px; flex-direction: column; }
  .tp-edwise .benefit-img { position: static; }
  .tp-edwise .benefit-img-wrap,
  .tp-edwise .benefit-content { width: 100%; }
  .tp-edwise .benefit-box:last-child { margin-bottom: 0; }
  .tp-edwise .inner-hero-wrap { flex-direction: column-reverse; }
  .tp-edwise .inner-hero-2 .inner-hero-right { max-width: 280px; }
}

@media all and (max-width: 480px) {
  .tp-edwise .container { max-width: calc(100% - 30px); }
  .tp-edwise .sec-title { font-size: 22px; text-align: center; }
  .tp-edwise .prep-corse-box { border-radius: 30px; }
  .tp-edwise .highlighter::after { height: 13.5px; bottom: -7px; }
  .tp-edwise .benefit-hdr { width: 100%; }
}

@media all and (max-width: 393px) {
  .tp-edwise .hero-title-txt { font-size: 24px; }
  .tp-edwise .prep-corse-content { padding: 30px 20px; }
  .tp-edwise .prep-corse-content .button { width: 100%; }
  .tp-edwise .prep-hdr { width: 100%; }
}

@media all and (max-width: 360px) {
  .tp-edwise .benefit-count { font-size: 34px; }
  .tp-edwise .benefit-box { margin-bottom: 20px; }
  .tp-edwise .benef-title { font-size: 18px; }
}

/* ───────────────────────── Admissions Counselling (royal / premium) ───────────────────────── */
.adm-page {
  background: var(--ivory);
  color: var(--ink);
}

.adm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #ff8a5c;
}

.adm-eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, #ff5e32, rgba(255, 94, 50, 0));
}

.adm-eyebrow--dark {
  color: #d8431d;
}

/* Buttons */
.adm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.adm-btn i {
  width: 18px;
  height: 18px;
}

.adm-btn--gold {
  background: linear-gradient(135deg, #ff7a4a 0%, #ff5e32 100%);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(255, 94, 50, 0.34);
}

.adm-btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(255, 94, 50, 0.46);
}

.adm-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #f4ede0;
  border-color: rgba(255, 138, 92, 0.42);
}

.adm-btn--ghost:hover {
  border-color: #ff8a5c;
  color: #fff;
  background: rgba(255, 138, 92, 0.12);
}

/* Hero */
.adm-hero {
  position: relative;
  overflow: hidden;
  padding: 104px 0 96px;
  color: #fff;
  background:
    radial-gradient(90% 70% at 85% -15%, rgba(255, 94, 50, 0.34), transparent 46%),
    radial-gradient(75% 95% at 8% 115%, rgba(255, 138, 92, 0.22), transparent 55%),
    radial-gradient(60% 80% at 55% 40%, rgba(120, 60, 220, 0.28), transparent 68%),
    radial-gradient(40% 60% at 100% 100%, rgba(216, 67, 29, 0.20), transparent 60%),
    linear-gradient(135deg, #0c0142 0%, #15036f 36%, #1a0088 62%, #2a16a0 100%);
}

.adm-hero__glow {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 94, 50, 0.28), transparent 65%);
  pointer-events: none;
}

.adm-hero__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 94, 50, 0.7), transparent);
}

.adm-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}

.adm-hero__copy h1 {
  margin: 0 0 22px;
  max-width: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
}

.adm-hero__copy h1 em {
  font-style: italic;
  color: #ff8a5c;
}

.adm-hero__copy > p {
  max-width: 560px;
  margin: 0 0 32px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.adm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.adm-hero__stats {
  list-style: none;
  margin: 46px 0 0;
  padding: 30px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.adm-hero__stats li {
  display: grid;
  gap: 4px;
}

.adm-hero__stats strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #ff8a5c;
}

.adm-hero__stats span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.66);
}

.adm-hero__media {
  position: relative;
}

.adm-hero__media::before {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 72%;
  height: 70%;
  border: 1px solid rgba(255, 138, 92, 0.45);
  border-radius: 12px;
  pointer-events: none;
}

.adm-hero__frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 138, 92, 0.5);
  box-shadow: 0 36px 70px rgba(0, 0, 0, 0.45);
}

.adm-hero__frame img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
}

.adm-hero__badge {
  position: absolute;
  left: -22px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(26, 0, 136, 0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 138, 92, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.adm-hero__badge-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #ff7a4a, #ff5e32);
  color: #ffffff;
}

.adm-hero__badge-icon svg {
  width: 22px;
  height: 22px;
}

.adm-hero__badge-copy {
  display: grid;
}

.adm-hero__badge-copy strong {
  color: #fff;
  font-size: 0.92rem;
}

.adm-hero__badge-copy small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.76rem;
}

/* Overview */
.adm-overview {
  padding: 96px 0;
  background: var(--ivory);
}

.adm-overview__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.adm-overview__media {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 94, 50, 0.3);
  box-shadow: var(--shadow);
}

.adm-overview__media img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.adm-overview__stamp {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(26, 0, 136, 0.82);
  color: #f4ede0;
  font-size: 0.84rem;
  border: 1px solid rgba(255, 138, 92, 0.4);
}

.adm-overview__stamp i {
  width: 18px;
  height: 18px;
  color: #ff8a5c;
}

.adm-overview__copy h2 {
  margin: 0 0 16px;
  max-width: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--navy);
}

.adm-overview__copy > p {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

.adm-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.adm-checklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  color: var(--ink);
}

.adm-checklist i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 94, 50, 0.14);
  border: 1px solid rgba(255, 94, 50, 0.3);
  color: #d8431d;
}

.adm-checklist i svg {
  width: 16px;
  height: 16px;
}

/* Tracks */
.adm-tracks {
  padding: 96px 0;
  background: var(--paper);
}

.adm-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.adm-head h2 {
  margin: 0 auto 14px;
  max-width: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  color: var(--navy);
}

.adm-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.adm-track-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.adm-track {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(7, 25, 34, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.adm-track:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 94, 50, 0.5);
  box-shadow: 0 28px 56px rgba(7, 25, 34, 0.16);
}

.adm-track__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.adm-track__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.adm-track:hover .adm-track__media img {
  transform: scale(1.07);
}

.adm-track__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7, 25, 34, 0.72) 100%);
}

.adm-track__icon {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, #ff7a4a, #ff5e32);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.adm-track__icon svg {
  width: 20px;
  height: 20px;
}

.adm-track__kicker {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  left: 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff8a5c;
}

.adm-track__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}

.adm-track__body h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
}

.adm-track__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.62;
}

/* Method (dark royal band) */
.adm-method {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  color: #fff;
  background:
    radial-gradient(110% 80% at 12% 0%, rgba(255, 122, 74, 0.22), transparent 50%),
    linear-gradient(135deg, #100258 0%, #1a0088 60%, #2a16a0 100%);
}

.adm-method__glow {
  position: absolute;
  right: -140px;
  bottom: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 94, 50, 0.2), transparent 65%);
  pointer-events: none;
}

.adm-method__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: start;
}

.adm-method__lead {
  position: sticky;
  top: 130px;
}

.adm-method__lead h2 {
  margin: 0 0 16px;
  max-width: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: #fff;
}

.adm-method__lead > p {
  margin: 0 0 28px;
  max-width: 420px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.7;
}

.adm-method__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.adm-step {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: flex-start;
  gap: 22px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.adm-step:first-child {
  border-top: 0;
  padding-top: 0;
}

.adm-step__num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: #ff8a5c;
}

.adm-step__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 92, 0.4);
  background: rgba(255, 138, 92, 0.1);
  color: #ff8a5c;
}

.adm-step__icon svg {
  width: 22px;
  height: 22px;
}

.adm-step__copy h3 {
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  color: #fff;
}

.adm-step__copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* CTA */
.adm-cta {
  padding: 96px 0;
  background: var(--ivory);
}

.adm-cta__inner {
  position: relative;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 40px;
  text-align: center;
  border-radius: 18px;
  color: #fff;
  border: 1px solid rgba(255, 138, 92, 0.3);
  box-shadow: var(--shadow);
  background:
    radial-gradient(100% 140% at 50% -20%, rgba(255, 94, 50, 0.26), transparent 60%),
    linear-gradient(135deg, #100258 0%, #1a0088 60%, #2a16a0 100%);
}

.adm-cta__crest {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a4a, #ff5e32);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(255, 94, 50, 0.4);
}

.adm-cta__crest svg {
  width: 30px;
  height: 30px;
}

.adm-cta .adm-eyebrow {
  justify-content: center;
}

.adm-cta__inner h2 {
  margin: 0 auto 14px;
  max-width: 640px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  color: #fff;
}

.adm-cta__inner > p {
  max-width: 560px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}

.adm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
  .adm-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .adm-overview__grid { grid-template-columns: 1fr; gap: 36px; }
  .adm-overview__media { order: 2; }
  .adm-track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-method__layout { grid-template-columns: 1fr; gap: 36px; }
  .adm-method__lead { position: static; }
}

@media (max-width: 680px) {
  .adm-hero { padding: 84px 0 72px; }
  .adm-hero__stats { gap: 24px; }
  .adm-hero__frame img { height: 360px; }
  .adm-hero__badge { left: 12px; bottom: 12px; }
  .adm-overview { padding: 72px 0; }
  .adm-overview__media img { height: 320px; }
  .adm-tracks { padding: 72px 0; }
  .adm-track-grid { grid-template-columns: 1fr; }
  .adm-method { padding: 72px 0; }
  .adm-step { grid-template-columns: auto 1fr; gap: 14px 16px; }
  .adm-step__num { grid-column: 1; }
  .adm-step__icon { display: none; }
  .adm-step__copy { grid-column: 2; }
  .adm-cta { padding: 72px 0; }
  .adm-cta__inner { padding: 44px 22px; }
}

/* ───────────────────────── Student Services page ───────────────────────── */
.sserv-page {
  background: var(--ivory);
  color: var(--ink);
}

.sserv-intro {
  padding: 88px 0 48px;
  background: var(--ivory);
}

.sserv-intro__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.sserv-intro h1 {
  margin: 0 0 18px;
  max-width: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  color: var(--navy);
}

.sserv-intro p {
  max-width: 560px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.sserv-intro__media {
  position: relative;
}

.sserv-intro__media::before {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  width: 70%;
  height: 68%;
  border: 1px solid rgba(255, 94, 50, 0.45);
  border-radius: 16px;
  pointer-events: none;
}

.sserv-intro__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 94, 50, 0.3);
  box-shadow: var(--shadow);
}

.sserv-intro__frame img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.sserv-intro__badge {
  position: absolute;
  left: -22px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(26, 0, 136, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 138, 92, 0.4);
  box-shadow: 0 20px 40px rgba(16, 4, 70, 0.35);
}

.sserv-intro__badge-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff7a4a, #ff5e32);
  color: #fff;
}

.sserv-intro__badge-icon svg {
  width: 22px;
  height: 22px;
}

.sserv-intro__badge-copy {
  display: grid;
}

.sserv-intro__badge-copy strong {
  color: #fff;
  font-size: 0.92rem;
}

.sserv-intro__badge-copy small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
}

.sserv-grid-sec {
  padding: 24px 0 100px;
  background: var(--ivory);
}

.sserv-grid-sec__head {
  margin: 0 0 50px;
}

.sserv-grid-sec__head h2 {
  margin: 0;
  max-width: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--navy);
}

.sserv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 28px;
}

.sserv-card {
  text-align: center;
}

.sserv-card__media {
  position: relative;
  width: min(220px, 78%);
  aspect-ratio: 1;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 18px 40px rgba(16, 4, 70, 0.16);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sserv-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0 rgba(255, 94, 50, 0);
  transition: box-shadow 0.35s ease;
}

.sserv-card:hover .sserv-card__media {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(16, 4, 70, 0.22);
}

.sserv-card:hover .sserv-card__media::after {
  box-shadow: inset 0 0 0 4px rgba(255, 94, 50, 0.85);
}

.sserv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.sserv-card:hover .sserv-card__media img {
  transform: scale(1.06);
}

.sserv-card h3 {
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--navy);
}

.sserv-card p {
  max-width: 31ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.62;
}

@media (max-width: 1024px) {
  .sserv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 30px;
  }
}

@media (max-width: 880px) {
  .sserv-intro__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sserv-intro__media {
    max-width: 560px;
  }
  .sserv-intro__frame img {
    height: 380px;
  }
}

@media (max-width: 560px) {
  .sserv-intro {
    padding: 72px 0 32px;
  }
  .sserv-grid-sec {
    padding: 16px 0 72px;
  }
  .sserv-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .sserv-card__media {
    width: min(200px, 66%);
  }
  .sserv-intro__frame img {
    height: 300px;
  }
  .sserv-intro__badge {
    left: 12px;
    bottom: 12px;
  }
}

/* ============================================================
   LOGO COLOURS (cream) — recolour the MBBS pages to the logo
   palette (blue #1A0088 + orange #FF5E32) so they stop leaking
   the teal (student page) and gold (country page) accents.
   ============================================================ */

/* MBBS Student page — teal/gold tokens → blue/orange */
html[data-color-theme="cream"] .mbbs-page {
  --mbbs-ink: #181134;
  --mbbs-text: #2c2550;
  --mbbs-muted: #5f5a85;
  --mbbs-forest: #100258;
  --mbbs-teal: #1a0088;
  --mbbs-sea: #3b2bb0;
  --mbbs-gold: #ff5e32;
  --mbbs-coral: #ff8a5c;
  --mbbs-paper: #faf8f3;
  --mbbs-mist: #f0ecdf;
  --mbbs-cream: #ffffff;
  --mbbs-line: rgba(26, 0, 136, 0.14);
  --mbbs-shadow: 0 24px 70px rgba(16, 4, 70, 0.16);
}

/* Hardcoded dark-green heroes/cards → navy with an orange wash */
html[data-color-theme="cream"] .mbbs-strip {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 94, 50, 0.16), transparent 55%),
    linear-gradient(180deg, #1a0088 0%, #100258 100%);
}

html[data-color-theme="cream"] .mbbs-exam-card {
  background:
    radial-gradient(circle at 80% 10%, rgba(255, 94, 50, 0.24), transparent 55%),
    linear-gradient(165deg, #1a0088 0%, #100258 100%);
}

html[data-color-theme="cream"] .mbbs-codepen-projection .mbbs-pin-dot {
  background: radial-gradient(circle at 34% 30%, #ffd9c9 0%, #ff8a5c 44%, #ff5e32 100%);
}

/* MBBS Country page (premium gold design) — gold tokens → orange */
html[data-color-theme="cream"] .mbbs-country {
  --mbbs-gold: #ff5e32;
  --mbbs-gold-soft: #ffd0bf;
}

html[data-color-theme="cream"] .page-mbbs-country {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(15, 122, 120, 0.07) 0%, rgba(15, 122, 120, 0) 55%),
    linear-gradient(180deg, #f1f8f5 0%, #eaf4f1 50%, #f1f8f5 100%);
}

/* Country hero veil — gold radial + teal mid → orange + navy */
html[data-color-theme="cream"] .mbbsx-hero__veil {
  background:
    radial-gradient(60% 80% at 22% 28%, rgba(255, 94, 50, 0.3) 0%, transparent 62%),
    linear-gradient(135deg, rgba(16, 2, 88, 0.94) 0%, rgba(26, 0, 136, 0.82) 58%, rgba(16, 2, 88, 0.92) 100%);
}

html[data-color-theme="cream"] .mbbsx-hero.no-image .mbbsx-hero__veil {
  background:
    radial-gradient(60% 80% at 18% 24%, rgba(255, 94, 50, 0.32) 0%, transparent 64%),
    radial-gradient(80% 60% at 100% 100%, rgba(255, 138, 92, 0.36) 0%, transparent 70%),
    linear-gradient(135deg, var(--deep) 0%, var(--navy) 55%, var(--teal-dark) 100%);
}

/* Remaining decorative gold accents (MBBS country + blog) → orange,
   and the blog's hardcoded teal CTA → navy. */
html[data-color-theme="cream"] .mbbsx-intro__prose {
  border-left-color: rgba(255, 94, 50, 0.32);
}

html[data-color-theme="cream"] .mbbsx-adv__card:hover {
  border-color: rgba(255, 94, 50, 0.42);
}

html[data-color-theme="cream"] .mbbsx-story:hover {
  border-color: rgba(255, 94, 50, 0.36);
}

html[data-color-theme="cream"] .mbbsx-why__empty {
  border-color: rgba(255, 94, 50, 0.4);
}

html[data-color-theme="cream"] .mbbsx-process__step:hover {
  border-color: rgba(255, 94, 50, 0.4);
}

html[data-color-theme="cream"] .mbbsx-adv__card:hover .mbbsx-adv__icon {
  box-shadow: 0 14px 28px rgba(255, 94, 50, 0.28);
}

html[data-color-theme="cream"] .mbbsx-adv__icon {
  box-shadow: 0 10px 22px rgba(255, 94, 50, 0.24);
}

html[data-color-theme="cream"] .mbbsx-panel__icon {
  box-shadow: 0 12px 26px rgba(255, 94, 50, 0.28);
}

html[data-color-theme="cream"] .mbbsx-process__badge {
  box-shadow: 0 10px 20px rgba(255, 94, 50, 0.26);
}

html[data-color-theme="cream"] :is(.mbbsx-adv__icon, .mbbsx-panel__icon, .mbbsx-process__badge) {
  background: linear-gradient(135deg, #ff5e32 0%, #d8431d 100%);
}

html[data-color-theme="cream"] .mbbsx-card__icon {
  background: linear-gradient(135deg, rgba(255, 94, 50, 0.16) 0%, rgba(255, 94, 50, 0.04) 100%);
  border-color: rgba(255, 94, 50, 0.25);
}

html[data-color-theme="cream"] .mbbsx-adv__rule {
  background: rgba(255, 94, 50, 0.14);
}

html[data-color-theme="cream"] .mbbsx-adv__card::before {
  background: radial-gradient(60% 50% at 100% 0%, rgba(255, 94, 50, 0.1) 0%, transparent 60%);
}

html[data-color-theme="cream"] .mbbsx-elig__panel::before {
  background: radial-gradient(70% 50% at 100% 0%, rgba(255, 94, 50, 0.1) 0%, transparent 60%);
}

html[data-color-theme="cream"] .mbbsx-story::before {
  background: linear-gradient(135deg, rgba(255, 94, 50, 0.06) 0%, transparent 30%);
}

html[data-color-theme="cream"] .mbbsx-process__step::before {
  background: linear-gradient(135deg, rgba(255, 94, 50, 0.06) 0%, transparent 35%);
}

html[data-color-theme="cream"] .mbbsx-section--careers {
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(26, 0, 136, 0.06) 0%, transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(255, 94, 50, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #faf8f3 52%, #ffffff 100%);
}

html[data-color-theme="cream"] .mbbsx-profile {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 94, 50, 0.18) 0%, transparent 50%),
    linear-gradient(165deg, var(--navy) 0%, var(--teal-dark) 100%);
}

html[data-color-theme="cream"] .mbbsx-section--process {
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(255, 94, 50, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #faf8f3 0%, #fff 100%);
}

html[data-color-theme="cream"] .blog-page-head {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255, 94, 50, 0.1) 0%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #faf8f3 100%);
}

html[data-color-theme="cream"] .blog-post-inline-cta {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(255, 94, 50, 0.16) 0%, transparent 65%),
    linear-gradient(135deg, #1a0088 0%, #100258 100%);
}

html[data-color-theme="cream"] :is(
  .blog-chip--on-dark,
  .blog-post-back:hover,
  .blog-post-inline-cta .eyebrow
) {
  color: #ffd0bf;
}

/* Contact card eyebrow ("CONTACT US") — mint #a9eee4 is off-palette;
   use a light orange that reads on the navy contact card. */
html[data-color-theme="cream"] .contact-card .eyebrow {
  color: #ffc9b3;
}

/* Footer flattened to solid #1A0088 (exact blue) for Logo Colours.
   Scoped to the footer + logo marquee so the gradient/overlays/skyline
   washes all resolve to #1A0088 instead of the lighter/deeper blues. */
html[data-color-theme="cream"] .site-footer,
html[data-color-theme="cream"] .footer-marquee {
  --theme-band-deep: #1a0088;
  --theme-home-dark: #1a0088;
  --deep: #1a0088;
}

html[data-color-theme="cream"] .footer-marquee {
  background: #1a0088;
}

/* Smoother cream → #1A0088 fade at the bottom of the contact section so it
   flows seamlessly into the flat-blue footer (no banding). */
html[data-color-theme="cream"] .contact-section {
  background:
    linear-gradient(
      180deg,
      #f4f1ec 0%,
      #f4f1ec 44%,
      color-mix(in srgb, #1a0088 18%, #f4f1ec) 64%,
      color-mix(in srgb, #1a0088 58%, #f4f1ec) 84%,
      #1a0088 100%
    );
}

/* ============================================================
   Home page refresh after moving study-abroad sections
   ============================================================ */
.home-page {
  background: var(--theme-body-bg, #faf9ff);
}

.home-page .audience-section {
  padding: 78px 0 66px;
  background:
    linear-gradient(
      180deg,
      var(--theme-home-ground-alt, #f0ecff) 0%,
      var(--theme-home-ground, #faf9ff) 100%
    );
}

.home-page .audience-section .section-lead {
  margin-bottom: 44px;
}

.home-page .audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  justify-content: initial;
}

.home-page .audience-card {
  flex: none;
  grid-template-rows: 225px 1fr auto;
  min-height: 405px;
  border-radius: var(--radius);
}

.home-page .audience-card div {
  padding: 24px 24px 12px;
}

.home-page .audience-card h3 {
  color: var(--navy);
  font-size: 1.16rem;
}

.home-page .whyus-section {
  padding: 66px 0 58px;
  background:
    linear-gradient(
      180deg,
      var(--theme-home-ground, #faf9ff) 0%,
      color-mix(in srgb, var(--theme-home-ground, #faf9ff) 72%, var(--theme-home-ground-alt, #f0ecff)) 100%
    );
}

.home-page .whyus-grid {
  gap: 20px;
  margin-top: 46px;
}

.home-page .whyus-card {
  margin-top: 30px;
  border-radius: var(--radius);
  padding: 44px 24px 28px;
}

.home-page .whyus-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

.home-page .whyus-icon svg {
  width: 25px;
  height: 25px;
}

.home-page .whyus-card h3 {
  color: var(--navy);
}

.home-page .outcomes-section {
  padding: 68px 0 88px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--theme-home-ground, #faf9ff) 70%, var(--theme-home-ground-alt, #f0ecff)) 0%,
      var(--theme-home-ground-alt, #f0ecff) 100%
    );
}

.home-page .outcome-band {
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--coral) 28%, transparent) 0%, transparent 44%),
    linear-gradient(135deg, var(--navy) 0%, var(--deep) 100%);
}

.home-page .outcome-band div {
  min-height: 132px;
  padding: 26px;
}

.home-page .testimonial-shell {
  max-width: 1000px;
  margin-top: 38px;
}

.home-page .testimonial-track {
  min-height: 238px;
}

.home-page .testimonial {
  padding: 36px 44px;
}

.home-page .about-section {
  padding: 92px 0;
  background:
    linear-gradient(
      180deg,
      var(--theme-home-ground-alt, #f0ecff) 0%,
      var(--theme-home-ground, #faf9ff) 100%
    );
}

.home-page .about-grid {
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "media head"
    "media body";
  align-content: center;
  align-items: start;
  column-gap: 58px;
  row-gap: 16px;
}

.home-page .about-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-page .about-head h2 {
  margin: 0;
}

.home-page .about-body {
  grid-area: body;
}

.home-page .about-media {
  grid-area: media;
  align-self: center;
  min-height: 500px;
}

.home-page .about-media img {
  width: 86%;
  height: 430px;
}

.home-page .insights-section {
  padding: 96px 0;
}

.home-page .contact-section {
  position: relative;
  padding-top: 96px;
}

.home-page .contact-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100% - 40px), var(--container));
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--navy) 18%, transparent) 18%,
      color-mix(in srgb, var(--coral) 34%, var(--navy)) 50%,
      color-mix(in srgb, var(--navy) 18%, transparent) 82%,
      transparent 100%
    );
}

@media (max-width: 1120px) {
  .home-page .audience-grid {
    gap: 18px;
  }
}

@media (max-width: 920px) {
  .home-page .audience-grid,
  .home-page .whyus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .audience-card {
    grid-template-rows: 190px 1fr auto;
    min-height: 0;
  }

  .home-page .outcome-band {
    grid-template-columns: 1fr;
  }

  .home-page .about-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head"
      "media"
      "body";
    align-content: start;
    column-gap: 0;
    row-gap: 26px;
  }

  /* Headline leads, then the image, then the supporting copy. */
  .home-page .about-head {
    gap: 8px;
  }
}

/* Marquee clones are inert except inside the phone marquee (below). */
.whyus-card.is-clone {
  display: none;
}

/* The "Why One Degree" carousel is a real scroll container driven by script.js:
   it auto-scrolls scrollLeft continuously, pauses on hover/drag, and is
   hold-draggable. No CSS keyframes — that's what lets native touch swipe and
   mouse hold-drag scrub it too. Reduced-motion is handled in JS (no auto-scroll,
   manual scroll still works). */

@media (max-width: 720px) {
  .home-page .audience-section,
  .home-page .whyus-section,
  .home-page .outcomes-section,
  .home-page .about-section,
  .home-page .insights-section {
    padding-top: 72px;
    padding-bottom: 76px;
  }

  .home-page .audience-grid {
    grid-template-columns: 1fr;
  }

  /* "Why One Degree": phone-only infinite carousel — 2 rows, columns flowing
     sideways with one full column centered and ~20% of each neighbour peeking.
     script.js clones the cards (a full second copy), auto-scrolls, and makes it
     hold-draggable; the loop wraps by exactly one copy (3 columns). It's a real
     scroll container so native touch swipe + mouse hold-drag scrub it too. */
  .home-page .whyus-carousel {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: hide the scrollbar */
    -ms-overflow-style: none;
    cursor: grab;
  }

  .home-page .whyus-carousel::-webkit-scrollbar {
    display: none; /* WebKit/Blink: hide the scrollbar */
  }

  .home-page .whyus-carousel.is-dragging {
    cursor: grabbing;
  }

  .home-page .whyus-grid {
    /* One full column centered with ~20% of the neighbouring columns peeking
       on each side. Column ≈ 62% of the viewport so the two side columns show
       roughly a fifth each. */
    --whyus-col: 62vw;
    --whyus-gap: 14px;
    display: grid;
    grid-auto-flow: column; /* fill top→bottom (2 rows), then the next column */
    grid-template-columns: none; /* clear the ≤920 repeat(2,1fr) so columns use grid-auto-columns */
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: var(--whyus-col);
    column-gap: var(--whyus-gap);
    row-gap: 34px; /* clears the icon badge that straddles each row-2 card top */
    width: max-content;
    margin-top: 44px;
  }

  .home-page .whyus-card {
    margin-top: 0;
    padding: 40px 18px 24px;
  }

  .home-page .whyus-card.is-clone {
    display: block;
  }

  .home-page .audience-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .home-page .audience-card img {
    height: 220px;
  }

  .home-page .audience-card a {
    margin: 0 22px 22px;
  }

  .home-page .outcome-band div {
    min-height: 0;
  }

  .home-page .testimonial-track {
    min-height: 340px;
  }

  /* Phone: image full-width with its proof tags as a tidy wrapped pill
     row directly beneath it. Kills the desktop absolute-positioning that
     left the badges floating out of sync with the resized image. */
  .home-page .about-media {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 0;
  }

  .home-page .about-media img {
    flex: 1 0 100%;
    width: 100%;
    height: 300px;
    margin-bottom: 4px;
  }

  .home-page .about-media .badge {
    position: static;
    inset: auto;
    justify-self: auto;
    margin: 0;
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.78rem;
  }
}

@media (max-width: 460px) {
  .home-page .audience-card img {
    height: 190px;
  }

  .home-page .testimonial-track {
    min-height: 380px;
  }
}

/* ============================================================
   Study Abroad page — align the moved home sections into one
   consistent, evenly-spaced column (they were tuned for the
   home page's flow, so widths/spacing were mismatched here).
   ============================================================ */

/* 1) Every section shares the same content width + edges.
   (The solutions section used the wider .edge-container = 1408px.) */
.study-abroad-page .edge-container {
  width: min(calc(100% - 40px), var(--container));
  margin: 0 auto;
}

/* 2) Even vertical rhythm between sections (signal-strip had only 4px top). */
.study-abroad-page .va-hero {
  padding: 84px 0 80px;
}

.study-abroad-page .method-section,
.study-abroad-page .solutions-section,
.study-abroad-page .signal-strip {
  padding: 88px 0;
}

.study-abroad-page .signal-strip {
  padding-bottom: 96px;
}

/* 3) Keep the method lead + steps top-aligned so the column reads cleanly. */
.study-abroad-page .method-layout {
  align-items: start;
}

/* 4) Comfortable gap above the solutions service grid on this page. */
.study-abroad-page .service-grid {
  margin-top: 44px;
}

/* Distinct "what you get" cards — horizontal header (icon + title on one row,
   copy below) with a permanent brand-gradient accent + icon, so they read
   differently from the white, icon-on-top solutions cards above. */
.study-abroad-page .signal-strip .section-lead {
  margin-bottom: 48px;
}

.study-abroad-page .signal {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "copy copy";
  column-gap: 14px;
  row-gap: 14px;
  align-items: center;
  min-height: 0;
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 7%, var(--theme-surface-solid)) 0%, var(--theme-surface-solid) 72%);
}

.study-abroad-page .signal::before {
  opacity: 1;
  height: 4px;
  background: var(--theme-brand-gradient);
}

.study-abroad-page .signal .signal-icon {
  grid-area: icon;
  width: 46px;
  height: 46px;
  margin-bottom: 0;
  border-radius: 50%;
  background: var(--theme-brand-gradient);
  color: #ffffff;
}

.study-abroad-page .signal:hover .signal-icon {
  background: var(--theme-brand-gradient);
}

.study-abroad-page .signal strong {
  grid-area: title;
  align-self: center;
  margin-bottom: 0;
  color: var(--navy);
  font-size: 1.04rem;
  line-height: 1.2;
}

.study-abroad-page .signal p {
  grid-area: copy;
}

.study-abroad-page .signal:hover {
  transform: translateY(-4px);
}

@media (max-width: 720px) {
  .study-abroad-page .signal {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "title"
      "copy";
    align-items: start;
    row-gap: 10px;
  }
}

/* ── Study Abroad — OLD "first move" CTA (white card), kept above the new
   .va-cta for comparison. Neutralises the home hero-bridge gradient +
   negative overlap (incl. the themed override) so the card sits cleanly on
   this lighter page, and balances the heading against a tidy action group
   (button + note) instead of letting them float apart. */
.study-abroad-page .pathfinder,
html[data-color-theme] .study-abroad-page .pathfinder {
  padding: 8px 0 84px;
  margin-top: 0;
  background: none;
}

/* Redesigned "first move" card: a top row (lead + CTA) sitting above a
   3-up feature strip, so the card reads as a full, intentional panel. */
.study-abroad-page .pathfinder-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

.study-abroad-page .pathfinder-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 32px 38px;
}

.study-abroad-page .pathfinder-lead {
  max-width: 560px;
}

.study-abroad-page .pathfinder-lead h2 {
  margin: 14px 0 12px;
}

.study-abroad-page .pathfinder-lead .finder-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.62;
}

.study-abroad-page .pathfinder-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  flex: 0 0 auto;
  width: 290px;
  max-width: 100%;
}

.study-abroad-page .pathfinder-action .btn {
  width: 100%;
  min-height: 56px;
  padding: 0 30px;
  font-size: 1.02rem;
  gap: 10px;
}

.study-abroad-page .pathfinder-action .btn i,
.study-abroad-page .pathfinder-action .btn svg {
  width: 19px;
  height: 19px;
}

.study-abroad-page .pathfinder-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.79rem;
  font-weight: 700;
}

.study-abroad-page .pathfinder-meta i,
.study-abroad-page .pathfinder-meta svg {
  width: 14px;
  height: 14px;
  color: var(--coral);
}

/* Feature strip */
.study-abroad-page .pathfinder-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--theme-border, rgba(15, 34, 48, 0.10));
  background: color-mix(in srgb, var(--navy) 4%, var(--theme-surface-solid, #ffffff));
}

.study-abroad-page .pathfinder-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 26px;
}

.study-abroad-page .pathfinder-step + .pathfinder-step {
  border-left: 1px solid var(--theme-border, rgba(15, 34, 48, 0.08));
}

.study-abroad-page .pf-step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--theme-brand-gradient);
  color: #ffffff;
}

.study-abroad-page .pf-step-ico i,
.study-abroad-page .pf-step-ico svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.study-abroad-page .pf-step-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.study-abroad-page .pf-step-copy strong {
  color: var(--navy);
  font-size: 1rem;
}

.study-abroad-page .pf-step-copy small {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

@media (max-width: 920px) {
  .study-abroad-page .pathfinder-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 24px;
  }

  .study-abroad-page .pathfinder-action {
    width: 100%;
  }

  .study-abroad-page .pathfinder-steps {
    grid-template-columns: 1fr;
  }

  .study-abroad-page .pathfinder-step + .pathfinder-step {
    border-left: 0;
    border-top: 1px solid var(--theme-border, rgba(15, 34, 48, 0.08));
  }
}

/* Home — the pathfinder used to sit between the hero and the signal strip
   and provided the top gap. With it gone, give the first section breathing
   room below the hero. */
.home-page .signal-strip {
  padding-top: 88px;
}

/* Study Abroad — "Applications and Essays" card carries the Test Preparation
   CTA (moved out of the nav). Pin it to the bottom so the card reads cleanly. */
.study-abroad-page .service-card--cta {
  display: flex;
  flex-direction: column;
}

.study-abroad-page .service-card-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
}

.study-abroad-page .service-card-cta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--theme-brand-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(7, 25, 34, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.study-abroad-page .service-card-cta > i,
.study-abroad-page .service-card-cta > svg {
  width: 18px;
  height: 18px;
  color: var(--coral);
  stroke-width: 2;
}

.study-abroad-page .service-card-cta:hover > span {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 25, 34, 0.18);
}

/* "and more" — sits like another country cell in the grid, but non-interactive. */
.dest-more {
  display: flex;
  pointer-events: none;
  cursor: default;
}

.dest-more::after { content: none; } /* no hover chevron */

.dest-more .dest-more-icon {
  background: rgba(19, 37, 47, 0.06);
  color: var(--muted);
}

.dest-more .dest-more-icon i,
.dest-more .dest-more-icon svg {
  width: 16px;
  height: 16px;
}

.dest-more .dest-meta strong { color: var(--muted); }

/* ============================================================
   Top blue notice bar — variant switcher
   original (default) · minimal (no socials/WhatsApp) · compact (WA icon left)
   ============================================================ */
/* WhatsApp icon (compact variant) — matches the notice social icons' hover
   animation: a springy 3D lift + tilt + scale, with the glyph scaling/rotating. */
.notice-wa-icon {
  display: none;          /* shown only in the "compact" variant */
  position: relative;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.94);
  transform-style: preserve-3d;
  transition:
    transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 240ms ease;
  will-change: transform;
}

.notice-wa-icon svg {
  width: 20px;
  height: 20px;
  transition:
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 240ms ease;
  will-change: transform;
}

.notice-wa-icon:hover,
.notice-wa-icon:focus-visible {
  color: #ffffff;
  transform: translateY(-4px) rotateX(14deg) rotateY(-8deg) scale(1.06);
}

.notice-wa-icon:hover svg,
.notice-wa-icon:focus-visible svg {
  transform: translateZ(6px) scale(1.18) rotate(-6deg);
}

.notice-wa-icon:active {
  transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(0.96);
  transition-duration: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  .notice-wa-icon,
  .notice-wa-icon svg {
    transition: color 200ms ease;
  }

  .notice-wa-icon:hover,
  .notice-wa-icon:focus-visible,
  .notice-wa-icon:hover svg,
  .notice-wa-icon:focus-visible svg {
    transform: none;
  }
}

/* minimal: keep only the scrolling marquee — and let it span the full width
   (drop the reserved left social-icon zone + the marquee's side margins). */
html.topbar-minimal .notice .site-socials,
html.topbar-minimal .notice .notice-whatsapp,
html.topbar-minimal .notice .notice-wa-icon { display: none; }

html.topbar-minimal .notice { padding-left: 16px; }
html.topbar-minimal .notice .notice-marquee { margin: 0; }

/* compact: WhatsApp becomes an icon beside the socials; right-side number removed */
html.topbar-compact .notice .notice-whatsapp { display: none; }
html.topbar-compact .notice .notice-wa-icon { display: inline-flex; }

/* ============================================================
   Study Abroad — one uniform page background (no banded section seams).
   The cream theme gives .method-section / .solutions-section their own
   (darker) beige gradients, which created an ugly transition against the
   page bg. Make every section transparent so the single page background
   (var(--theme-body-bg)) shows through uniformly.
   ============================================================ */
html[data-color-theme] .study-abroad-page .va-hero,
html[data-color-theme] .study-abroad-page .pathfinder,
html[data-color-theme] .study-abroad-page .method-section,
html[data-color-theme] .study-abroad-page .solutions-section,
.study-abroad-page .va-hero,
.study-abroad-page .pathfinder,
.study-abroad-page .method-section,
.study-abroad-page .solutions-section {
  background: transparent;
}

/* ============================================================
   MBBS country guide — premium redesign (.mbc)
   Sticky section titles + scrolling content, theme-matched
   (Cormorant Garamond display, teal/gold/coral), with a
   highlights marquee and scroll-snap carousels. All copy is
   driven by the scraped content — nothing hardcoded here.
   ============================================================ */
.page-mbbs-country {
  background: #eaf4f1;
}

.mbc {
  --ink: #0d2429;
  --ink-soft: #1a3b41;
  --text: #34484c;
  --muted: #6b7e81;
  --teal: #0f7a78;
  --teal-deep: #0a5856;
  --gold: #bd8a3a;
  --coral: #e26d5a;
  --paper: #f1f8f5;
  --soft: #e7f3ee;
  --card: #ffffff;
  --line: rgba(13, 36, 41, 0.10);
  --line-2: rgba(13, 36, 41, 0.16);
  --sh-sm: 0 6px 18px rgba(13, 36, 41, 0.06);
  --sh-md: 0 20px 46px rgba(13, 36, 41, 0.10);
  --sh-lg: 0 36px 84px rgba(13, 36, 41, 0.18);
  --r: 18px;
  --r-lg: 26px;
  --gold-grad: var(--hero-gold-gradient);
  --sticky-top: 92px;
  position: relative;
  color: var(--text);
  background: var(--paper);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

.mbc-shell {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---------- shared ---------- */
.mbc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--teal);
  font-family: "Outfit", "Manrope", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.mbc-eyebrow i,
.mbc-eyebrow svg { width: 16px; height: 16px; color: var(--gold); }
.mbc-eyebrow--light { color: #cdeee7; }
.mbc-eyebrow--light i,
.mbc-eyebrow--light svg { color: var(--gold); }

.mbc-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-weight: 800;
  font-size: 0.92rem;
  transition: gap 0.18s ease, color 0.18s ease;
}

.mbc-textlink:hover { gap: 13px; color: var(--teal-deep); }
.mbc-textlink i,
.mbc-textlink svg { width: 18px; height: 18px; }

.mbc-cta-btn { min-height: 52px; padding: 0 26px; font-size: 0.95rem; }

/* ============================ HERO ============================ */
.mbc-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: clamp(560px, 80vh, 800px);
  padding: 88px 0 56px;
  overflow: hidden;
  color: #fff;
  background: #0a1d20;
  isolation: isolate;
}

.mbc-hero__bg { position: absolute; inset: 0; z-index: -1; }

.mbc-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: mbcKenBurns 26s ease-in-out infinite alternate;
}

@keyframes mbcKenBurns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.6%, -1.4%, 0); }
}

.mbc-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg, rgba(7, 24, 27, 0.94) 0%, rgba(7, 24, 27, 0.78) 42%, rgba(7, 24, 27, 0.28) 78%, rgba(7, 24, 27, 0.1) 100%),
    linear-gradient(0deg, rgba(6, 20, 23, 0.88) 0%, rgba(6, 20, 23, 0.08) 46%, rgba(6, 20, 23, 0) 70%);
}

.mbc-hero__glow {
  position: absolute;
  top: -18%;
  right: -8%;
  width: 52%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(189, 138, 58, 0.32), rgba(189, 138, 58, 0) 70%);
  filter: blur(10px);
}

.mbc-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  /* flex item: allow it to honour its width instead of growing to fit a long
     non-wrapping child (e.g. the trust badge), which would clip the hero. */
  min-width: 0;
}

/* Pull the hero content toward the left of the centred column on wide screens. */
@media (min-width: 1280px) {
  .mbc-hero__inner {
    margin-left: max(24px, calc((100% - 1200px) / 2 - 170px));
    margin-right: auto;
  }
}

.mbc-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 8px 15px 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.84rem;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.mbc-back:hover { color: #fff; background: rgba(255, 255, 255, 0.16); transform: translateX(-2px); }
.mbc-back i,
.mbc-back svg { width: 17px; height: 17px; }

.mbc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.mbc-flagchip {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 9px 18px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.mbc-flagchip__flag {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 900;
}

.mbc-flagchip__flag img { width: 100%; height: 100%; object-fit: cover; }
.mbc-flagchip__txt { display: grid; line-height: 1.2; }
.mbc-flagchip__txt small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.mbc-flagchip__txt b { color: #fff; font-size: 1rem; font-weight: 800; }

.mbc-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid rgba(189, 138, 58, 0.4);
  border-radius: 999px;
  background: rgba(189, 138, 58, 0.16);
  color: #f4dca6;
  font-size: 0.76rem;
  font-weight: 800;
}

.mbc-stamp i,
.mbc-stamp svg { width: 15px; height: 15px; }

.mbc-hero__title {
  max-width: 26ch;
  margin: 0;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
}

.mbc-hero__lede {
  max-width: 60ch;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.7;
}

.mbc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.mbc-hero__badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 100%;
  margin: 22px 0 0;
  padding: 9px 16px;
  border: 1px solid rgba(189, 138, 58, 0.4);
  border-radius: 999px;
  background: rgba(189, 138, 58, 0.14);
  color: #f4dca6;
  font-size: 0.82rem;
  font-weight: 700;
}
.mbc-hero__badge i,
.mbc-hero__badge svg { width: 16px; height: 16px; color: var(--gold); }

.mbc-btn-ghost {
  min-height: 52px;
  padding: 0 24px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.mbc-btn-ghost:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); }

/* ======================= HIGHLIGHTS MARQUEE ======================= */
.mbc-marquee {
  padding: 16px 0;
  background:
    radial-gradient(120% 140% at 0% 0%, #14383d 0%, #0c272b 60%, #0a1f23 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(13, 36, 41, 0.18);
}

.mbc-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.mbc-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: mbcMarquee 36s linear infinite;
}

.mbc-marquee:hover .mbc-marquee__track { animation-play-state: paused; }

.mbc-marquee__group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
  flex: 0 0 auto;
}

.mbc-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.mbc-chip i,
.mbc-chip svg { width: 17px; height: 17px; color: var(--gold); }
.mbc-chip__label {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mbc-chip__value { color: #fff; font-size: 0.9rem; font-weight: 800; }

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

/* ============================ SECTION (sticky title) ============================ */
.mbc-sec {
  padding: clamp(58px, 8vh, 104px) 0;
  scroll-margin-top: var(--sticky-top);
}

.mbc-sec--light { background: var(--card); }
.mbc-sec--paper { background: var(--paper); }

.mbc-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: start;
}

.mbc-sec__aside {
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
}

.mbc-sec__index {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.mbc-sec__index i { font-style: normal; opacity: 0.55; -webkit-text-fill-color: currentColor; color: var(--muted); }

.mbc-sec__aside h2 {
  margin: 14px 0 0;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: 0.002em;
  text-wrap: balance;
}

.mbc-sec__aside .mbc-eyebrow + h2 { margin-top: 14px; }

.mbc-sec__note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.62;
}

.mbc-sec__aside .mbc-textlink { margin-top: 20px; }

.mbc-figure {
  position: relative;
  margin: 22px 0 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.mbc-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.mbc-figure img {
  width: 100%;
  height: clamp(170px, 22vw, 230px);
  object-fit: cover;
}

.mbc-figure figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(7, 24, 27, 0.62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.mbc-figure figcaption i,
.mbc-figure figcaption svg { width: 14px; height: 14px; color: var(--gold); }

.mbc-sec__main { min-width: 0; }

/* ---- facts grid ---- */
.mbc-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mbc-factcard {
  position: relative;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mbc-factcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gold-grad);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mbc-factcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(15, 122, 120, 0.3); }
.mbc-factcard:hover::before { opacity: 1; }

.mbc-factcard__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--soft);
  color: var(--teal);
}

.mbc-factcard__icon i,
.mbc-factcard__icon svg { width: 22px; height: 22px; }

.mbc-factcard__label {
  margin: 16px 0 6px;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.mbc-factcard__value { display: block; color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.35; }

/* ---- prose ---- */
.mbc-prose { position: relative; }
.mbc-prose p { margin: 0; color: var(--text); font-size: 1.03rem; line-height: 1.85; }
.mbc-prose p + p { margin-top: 15px; }

.mbc-prose--lead {
  padding: clamp(26px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  box-shadow: var(--sh-md);
}

.mbc-prose--lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 4px;
  border-radius: 999px;
  background: var(--gold-grad);
}

.mbc-prose--lead p { font-size: 1.06rem; }

.mbc-quote {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--teal);
}

.mbc-quote i,
.mbc-quote svg { width: 24px; height: 24px; }

/* ---- checks ---- */
.mbc-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.mbc-checks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--sh-sm);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
}

.mbc-checks i,
.mbc-checks svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 2px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--teal);
}

/* ---- subpoint cards (when few) ---- */
.mbc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.mbc-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mbc-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(15, 122, 120, 0.28); }

.mbc-card h3,
.mbc-uni h3 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 14px;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.32;
}

.mbc-card h3::before,
.mbc-uni h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 999px;
  background: var(--gold-grad);
}

.mbc-card p,
.mbc-uni p { margin: 0; color: var(--text); font-size: 0.95rem; line-height: 1.72; }
.mbc-card p + p,
.mbc-uni p + p { margin-top: 9px; }

/* ============================ CAROUSEL ============================ */
.mbc-carousel { margin-top: 26px; }

.mbc-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.mbc-carousel__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.mbc-carousel__count i,
.mbc-carousel__count svg { width: 15px; height: 15px; color: var(--gold); }

.mbc-carousel__nav { display: inline-flex; gap: 10px; }
.mbc-carousel__nav--center { justify-content: center; margin-top: 24px; }

.mbc-cbtn { transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease; }
.mbc-cbtn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(7, 25, 34, 0.12); }
.mbc-cbtn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.mbc-cbtn i,
.mbc-cbtn svg { width: 19px; height: 19px; }

.mbc-carousel__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.mbc-carousel__track::-webkit-scrollbar { display: none; }
.mbc-carousel__track.is-grab { cursor: grabbing; }

.mbc-uni {
  flex: 0 0 min(360px, 84%);
  scroll-snap-align: start;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-sm);
}

.mbc-uni h3 { font-size: 1.1rem; }

/* admission steps carousel */
.mbc-carousel--steps { max-width: 1180px; margin-inline: auto; }

.mbc-stepcard {
  position: relative;
  flex: 0 0 min(320px, 82%);
  scroll-snap-align: start;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-sm);
}

.mbc-stepcard__num {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 5px rgba(189, 138, 58, 0.18);
}

.mbc-stepcard h3 { margin: 0; color: var(--ink); font-size: 1.1rem; font-weight: 800; }

.mbc-stepcard ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 0.93rem;
  line-height: 1.6;
}

.mbc-stepcard li::marker { color: var(--gold); }

/* ============================ ADMISSION SECTION ============================ */
.mbc-process {
  padding: clamp(58px, 8vh, 104px) 0;
  scroll-margin-top: var(--sticky-top);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(15, 122, 120, 0.07), transparent 60%),
    var(--card);
}

.mbc-head { max-width: 760px; margin-bottom: 8px; }
.mbc-head--center { max-width: 720px; margin-inline: auto; text-align: center; }
.mbc-head--center .mbc-eyebrow { justify-content: center; }

.mbc-head h2 {
  margin: 16px 0 0;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  line-height: 1.05;
  text-wrap: balance;
}

.mbc-process .mbc-carousel { margin-top: 38px; }

/* ============================ CTA ============================ */
.mbc-cta {
  padding: clamp(40px, 7vh, 88px) 0 clamp(60px, 9vh, 110px);
  background: var(--paper);
}

.mbc-cta__panel {
  position: relative;
  display: grid;
  gap: 22px;
  padding: clamp(34px, 5vw, 64px);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  background: radial-gradient(130% 120% at 0% 0%, #14383d 0%, #0b262a 55%, #081e22 100%);
  box-shadow: var(--sh-lg);
}

.mbc-cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}

.mbc-cta__orb { position: absolute; border-radius: 50%; filter: blur(20px); pointer-events: none; }
.mbc-cta__orb--a {
  width: 340px;
  height: 340px;
  top: -42%;
  right: -6%;
  background: radial-gradient(closest-side, rgba(189, 138, 58, 0.4), transparent 70%);
}
.mbc-cta__orb--b {
  width: 280px;
  height: 280px;
  bottom: -48%;
  left: 8%;
  background: radial-gradient(closest-side, rgba(15, 122, 120, 0.5), transparent 70%);
}

.mbc-cta__copy { position: relative; z-index: 1; }

.mbc-cta__copy h2 {
  margin: 16px 0 0;
  max-width: 24ch;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.85rem);
  line-height: 1.05;
  text-wrap: balance;
}

.mbc-cta__copy p {
  margin: 14px 0 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.02rem;
  line-height: 1.7;
}

.mbc-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.mbc-cta__alt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  transition: background 0.18s ease, transform 0.18s ease;
}

.mbc-cta__alt:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.mbc-cta__alt i,
.mbc-cta__alt svg { width: 18px; height: 18px; }

/* ============================ reveal stagger ============================ */
.mbc .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* ============================ responsive ============================ */
@media (max-width: 1080px) {
  .mbc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .mbc-sec__grid { grid-template-columns: 1fr; }
  .mbc-sec__aside { position: static; }
  .mbc-figure { max-width: 420px; }
}

@media (max-width: 720px) {
  .mbc-hero { padding: 124px 0 60px; min-height: auto; }
  .mbc-checks,
  .mbc-cards { grid-template-columns: 1fr; }
  .mbc-hero__actions .btn,
  .mbc-cta__actions .btn,
  .mbc-cta__alt { width: 100%; justify-content: center; }
}

@media (max-width: 540px) {
  .mbc-shell,
  .mbc-hero__inner { width: min(100% - 32px, 1200px); }
}

@media (prefers-reduced-motion: reduce) {
  .mbc-hero__img { animation: none; }
  .mbc .reveal { transition-delay: 0ms; }
  .mbc-marquee__track { animation: none; transform: none; }
  .mbc-marquee__group:nth-child(2) { display: none; }
  .mbc-marquee__viewport { overflow-x: auto; scrollbar-width: none; }
  .mbc-marquee__viewport::-webkit-scrollbar { display: none; }
}

/* ============================================================
   MBBS COUNTRY PAGE — focused 6-section redesign (v3)
   Hero · Quick Facts · Why/Honest · NMC · Daily Life · NEET
   ============================================================ */

/* ---- sticky in-page jump nav (sits just below the site header) ---- */
.mbc-jump {
  position: sticky;
  top: 60px;
  z-index: 30;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.mbc-jump__inner { display: flex; align-items: center; gap: 18px; min-height: 58px; }

.mbc-jump__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mbc-jump__label i,
.mbc-jump__label svg { width: 16px; height: 16px; color: var(--gold); }

.mbc-jump__links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mbc-jump__links::-webkit-scrollbar { display: none; }

.mbc-jump__links a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.mbc-jump__links a:hover { color: var(--ink); background: var(--soft); }
.mbc-jump__links a.is-active { color: var(--teal-deep); background: var(--soft); }

.mbc-jump__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--teal);
  font-size: 0.86rem;
  font-weight: 800;
}
.mbc-jump__cta:hover { color: var(--teal-deep); }
.mbc-jump__cta i,
.mbc-jump__cta svg { width: 16px; height: 16px; }

/* ---- generic content band ---- */
.mbc-band {
  padding: clamp(54px, 8vh, 100px) 0;
  scroll-margin-top: 128px;
}
.mbc-band--light { background: var(--card); }
.mbc-band--paper { background: var(--paper); }

.mbc-band__head { max-width: 780px; margin: 0 auto clamp(34px, 5vw, 52px); text-align: center; }
.mbc-band__head .mbc-eyebrow { justify-content: center; }
.mbc-band__head h2 {
  margin: 14px 0 0;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.95rem);
  line-height: 1.06;
  text-wrap: balance;
}
.mbc-band__lead { margin: 16px 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.7; }
.mbc-band__lead + .mbc-band__lead { margin-top: 10px; }

/* ---- why-study benefit cards ---- */
.mbc-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.mbc-benefit {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mbc-benefit:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(15, 122, 120, 0.28); }

.mbc-benefit__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: var(--soft);
  color: var(--teal);
}
.mbc-benefit__icon i,
.mbc-benefit__icon svg { width: 23px; height: 23px; }
.mbc-benefit h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.mbc-benefit p { margin: 0; color: var(--text); font-size: 0.96rem; line-height: 1.7; }
.mbc-benefit p + p { margin-top: 8px; }

/* ---- verdict columns (well-suited / consider alternatives, pros / cons) ---- */
.mbc-verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.mbc-verdict--single { grid-template-columns: minmax(0, 720px); justify-content: center; }

.mbc-verdict__col {
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--sh-sm);
}
.mbc-verdict__col--pos { border-color: rgba(26, 127, 75, 0.32); background: linear-gradient(180deg, #f1faf4 0%, var(--card) 70%); }
.mbc-verdict__col--neg { border-color: rgba(192, 57, 43, 0.28); background: linear-gradient(180deg, #fdf1f0 0%, var(--card) 70%); }

.mbc-verdict__head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.mbc-verdict__head h3 { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.mbc-verdict__head i,
.mbc-verdict__head svg { flex: 0 0 auto; width: 32px; height: 32px; padding: 7px; border-radius: 50%; }
.mbc-verdict__col--pos .mbc-verdict__head i,
.mbc-verdict__col--pos .mbc-verdict__head svg { color: #1a7f4b; background: rgba(26, 127, 75, 0.12); }
.mbc-verdict__col--pos .mbc-verdict__head h3 { color: #15683d; }
.mbc-verdict__col--neg .mbc-verdict__head i,
.mbc-verdict__col--neg .mbc-verdict__head svg { color: #c0392b; background: rgba(192, 57, 43, 0.1); }
.mbc-verdict__col--neg .mbc-verdict__head h3 { color: #a4322a; }

.mbc-verdict__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mbc-verdict__list li { display: flex; gap: 11px; align-items: flex-start; color: var(--text); font-size: 0.96rem; line-height: 1.6; }
.mbc-verdict__list i,
.mbc-verdict__list svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; padding: 3px; border-radius: 50%; }
.mbc-verdict__col--pos .mbc-verdict__list i,
.mbc-verdict__col--pos .mbc-verdict__list svg { color: #1a7f4b; background: rgba(26, 127, 75, 0.12); }
.mbc-verdict__col--neg .mbc-verdict__list i,
.mbc-verdict__col--neg .mbc-verdict__list svg { color: #c0392b; background: rgba(192, 57, 43, 0.1); }

/* ---- NMC compliance checklist ---- */
.mbc-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto 26px;
  padding: 16px 20px;
  border: 1px solid rgba(189, 138, 58, 0.32);
  border-left-width: 4px;
  border-radius: 12px;
  background: rgba(189, 138, 58, 0.08);
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.6;
}
.mbc-note i,
.mbc-note svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--gold); }

.mbc-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.mbc-check2 {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px 22px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid transparent;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.mbc-check2:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-left-color: var(--gold); }

.mbc-check2__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 0 0 4px rgba(189, 138, 58, 0.16);
}
.mbc-check2__body h3 { margin: 0 0 6px; color: var(--ink); font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.mbc-check2__body p { margin: 0; color: var(--text); font-size: 0.95rem; line-height: 1.66; }

/* ---- daily life cards ---- */
.mbc-daily { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.mbc-daily__card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mbc-daily__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(15, 122, 120, 0.26); }

.mbc-daily__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--teal);
}
.mbc-daily__icon i,
.mbc-daily__icon svg { width: 24px; height: 24px; }
.mbc-daily__card h3 { margin: 0 0 9px; color: var(--ink); font-size: 1.08rem; font-weight: 800; }
.mbc-daily__card p { margin: 0; color: var(--text); font-size: 0.95rem; line-height: 1.72; }
.mbc-daily__card p + p { margin-top: 8px; }
.mbc-daily__card ul { margin: 10px 0 0; padding-left: 18px; color: var(--text); font-size: 0.93rem; line-height: 1.6; }
.mbc-daily__card li::marker { color: var(--gold); }

/* prose panel — for sections that arrive as paragraphs (no sub-cards) */
.mbc-prose-panel {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(26px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  box-shadow: var(--sh-md);
}
.mbc-prose-panel p { margin: 0; color: var(--text); font-size: 1.02rem; line-height: 1.82; }
.mbc-prose-panel p + p { margin-top: 14px; }

/* ---- NEET scores ---- */
.mbc-neet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 980px; margin: 0 auto; }
.mbc-neet__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.mbc-neetcard {
  position: relative;
  overflow: hidden;
  padding: 30px 26px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--sh-sm);
}
.mbc-neetcard--primary { border-color: rgba(15, 122, 120, 0.3); background: linear-gradient(180deg, #f0f8f7 0%, var(--card) 72%); }

.mbc-neetcard__cat {
  display: inline-block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mbc-neetcard__marks {
  display: block;
  margin: 10px 0 6px;
  color: var(--teal-deep);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
}
.mbc-neetcard--primary .mbc-neetcard__marks {
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.mbc-neetcard__note { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.mbc-trend {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.mbc-trend figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.92rem;
}
.mbc-trend figcaption i,
.mbc-trend figcaption svg { width: 18px; height: 18px; color: var(--gold); }
.mbc-trend__scroll { overflow-x: auto; }
.mbc-trend table { width: 100%; border-collapse: collapse; min-width: 420px; }
.mbc-trend th,
.mbc-trend td { padding: 14px 22px; text-align: left; font-size: 0.94rem; }
.mbc-trend th { color: var(--muted); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; }
.mbc-trend tbody tr { border-top: 1px solid var(--line); }
.mbc-trend td { color: var(--text); }
.mbc-trend__year { color: var(--ink); font-weight: 800; }
.mbc-trend__dir { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.86rem; }
.mbc-trend__dir i,
.mbc-trend__dir svg { width: 16px; height: 16px; }
.mbc-trend__dir.is-down { color: #c0392b; }
.mbc-trend__dir.is-up { color: #1a7f4b; }
.mbc-trend__dir.is-flat { color: var(--muted); }
.mbc-trend__foot { margin: 0; padding: 12px 22px 16px; color: var(--muted); font-size: 0.78rem; }

/* ---- responsive (new components) ---- */
@media (max-width: 1080px) {
  .mbc-benefits,
  .mbc-daily { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mbc-verdict,
  .mbc-verdict--single,
  .mbc-checklist,
  .mbc-neet__cards { grid-template-columns: 1fr; }
  .mbc-jump__label,
  .mbc-jump__cta { display: none; }
}
@media (max-width: 640px) {
  .mbc-benefits,
  .mbc-daily,
  .mbc-checklist { grid-template-columns: 1fr; }
}

/* ---- mobile: turn the long card grids into edge-to-edge swipe sliders so the
   page stays short instead of stacking 6-12 cards into one tall column ---- */
@media (max-width: 768px) {
  .mbc-band { padding: 46px 0; }
  .mbc-band__head { margin-bottom: 26px; }

  .mbc-benefits,
  .mbc-checklist,
  .mbc-daily {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    padding: 4px 2px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .mbc-benefits::-webkit-scrollbar,
  .mbc-checklist::-webkit-scrollbar,
  .mbc-daily::-webkit-scrollbar { display: none; }

  .mbc-benefits > .mbc-benefit,
  .mbc-checklist > .mbc-check2,
  .mbc-daily > .mbc-daily__card {
    flex: 0 0 clamp(240px, 78%, 300px);
    scroll-snap-align: start;
  }

  /* Quick Facts stays a compact 3-up grid on phones (not a slider). */
  .mbc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mbc-factcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
  }
  .mbc-factcard__label { margin-top: 12px; font-size: 0.62rem; letter-spacing: 0.06em; }
  .mbc-factcard__value { font-size: 0.85rem; }
}

/* mobile typography — keep the big serif headings from overflowing phones */
@media (max-width: 540px) {
  .mbc-hero__title { font-size: clamp(1.7rem, 7.4vw, 2.4rem); max-width: 100%; }
  .mbc-hero__lede { font-size: 0.98rem; max-width: 100%; }
  .mbc-band__head h2 { font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .mbc-band__lead { font-size: 0.96rem; }
  .mbc-cta__copy h2 { font-size: clamp(1.55rem, 6.2vw, 2.1rem); }

  /* let the 4-column NEET trend table fit phones instead of scrolling */
  .mbc-trend table { min-width: 0; width: 100%; table-layout: fixed; }
  .mbc-trend th,
  .mbc-trend td { padding: 10px 8px; font-size: 0.78rem; }
  .mbc-trend th { letter-spacing: 0.02em; }
  /* the trend arrow alone reads clearly on phones; drop the word to save space */
  .mbc-trend__word { display: none; }
  .mbc-trend__dir i,
  .mbc-trend__dir svg { width: 16px; height: 16px; }
}

/* ============================================================
   UNIFIED ICON-TILE SYSTEM
   ------------------------------------------------------------
   Every feature / section / card icon across the site now uses
   the home "signal" treatment (see .signal-icon ~line 2780): a
   soft rounded-square tile holding a 24px Lucide icon, with a
   scale + rotate hover.

     recipe : background #e8f7f3 ; icon color var(--teal-dark)
     shape  : rounded square, radius 16px (compact 14px)
     icon   : 24px (compact 22px)
     hover  : scale(1.06) rotate(-3deg) + warm tile tint

   Selectors are wrapped in `html[data-color-theme] :is(...)` so
   this layer wins over the per-page theme overrides above. Under
   the permanent cream theme `var(--teal-dark)` resolves to orange
   (#d8431d), so every tile renders as a pale tile + orange icon
   -- identical to the reference signal cards (gradient fills,
   gold/teal/navy accents and circles are all flattened to match).
   The admin CMS keeps its own palette (styled inline in its
   views). Appended last on purpose so source order wins. */

/* ---- STANDARD tier · 52px tile / radius 16 / 24px icon ---- */
html[data-color-theme] :is(
  .whyus-icon,
  .reason-card .reason-icon,
  .dynamic-why-card .reason-icon,
  .dynamic-scholarship-card .reason-icon,
  .va-vm-icon,
  .va-vm-card--mission .va-vm-icon,
  .adm-cta__crest,
  .study-abroad-page .signal .signal-icon,
  .mbbs-v2-service-icon,
  .mbbsx-careers__callout-icon,
  .mbbsx-career-card__icon,
  .mbbsx-adv__icon,
  .mbbsx-panel__icon,
  .mbbsx-process__badge,
  .mbbsx-card__icon,
  .mbc-factcard__icon,
  .mbc-benefit__icon,
  .mbc-daily__icon,
  .mbc-quote
) {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #e8f7f3;
  color: var(--teal-dark);
  border: 0;
  box-shadow: none;
  transition: transform 0.28s ease, background 0.28s ease;
}

html[data-color-theme] :is(
  .whyus-icon,
  .reason-card .reason-icon,
  .dynamic-why-card .reason-icon,
  .dynamic-scholarship-card .reason-icon,
  .va-vm-icon,
  .adm-cta__crest,
  .study-abroad-page .signal .signal-icon,
  .mbbs-v2-service-icon,
  .mbbsx-careers__callout-icon,
  .mbbsx-career-card__icon,
  .mbbsx-adv__icon,
  .mbbsx-panel__icon,
  .mbbsx-process__badge,
  .mbbsx-card__icon,
  .mbc-factcard__icon,
  .mbc-benefit__icon,
  .mbc-daily__icon,
  .mbc-quote
) :is(i, svg) {
  width: 24px !important;
  height: 24px !important;
  color: var(--teal-dark) !important;
  stroke-width: 2;
}

/* ---- COMPACT tier · native size / radius 14 / 22px icon ----
   nav menu, inline badges, over-image + corner accents. Size is
   left at each element's footprint so dense layouts don't break;
   circles become rounded squares, fills/borders/shadows dropped. */
html[data-color-theme] :is(
  .course-icon,
  .adm-track__icon,
  .adm-step__icon,
  .adm-hero__badge-icon,
  .sserv-intro__badge-icon,
  .va-impact-icon,
  .insight-card-more-icon
) {
  border-radius: 14px;
  background: #e8f7f3;
  color: var(--teal-dark);
  border: 0;
  box-shadow: none;
  transition: transform 0.28s ease, background 0.28s ease;
}

html[data-color-theme] :is(
  .course-icon,
  .adm-track__icon,
  .adm-step__icon,
  .adm-hero__badge-icon,
  .sserv-intro__badge-icon,
  .va-impact-icon,
  .insight-card-more-icon
) :is(i, svg) {
  width: 22px !important;
  height: 22px !important;
  color: var(--teal-dark) !important;
  stroke-width: 2;
}

/* ---- Shared hover · scale + rotate + warm tile tint ---- */
html[data-color-theme] :is(
  .reason-card:hover .reason-icon,
  .dynamic-why-card:hover .reason-icon,
  .dynamic-scholarship-card:hover .reason-icon,
  .va-vm-card:hover .va-vm-icon,
  .va-impact-card:hover .va-impact-icon,
  .adm-track:hover .adm-track__icon,
  .course-menu-card:hover .course-icon,
  .study-abroad-page .signal:hover .signal-icon,
  .mbbs-v2-service-card:hover .mbbs-v2-service-icon,
  .mbbsx-career-card:hover .mbbsx-career-card__icon,
  .mbbsx-adv__card:hover .mbbsx-adv__icon,
  .mbc-factcard:hover .mbc-factcard__icon,
  .mbc-benefit:hover .mbc-benefit__icon,
  .mbc-daily__card:hover .mbc-daily__icon
) {
  transform: scale(1.06) rotate(-3deg);
  background: color-mix(in srgb, #ff5e32 18%, #e8f7f3);
  color: var(--teal-dark);
  border-color: transparent;
  box-shadow: none;
}

/* whyus badge straddles the card edge -- keep its centring transform */
html[data-color-theme] .whyus-card:hover .whyus-icon {
  transform: translate(-50%, -50%) scale(1.06) rotate(-3deg);
  background: color-mix(in srgb, #ff5e32 18%, #e8f7f3);
}

/* ==========================================================================
   THE ONE DEGREE METHOD — interactive 4D compass (home page)
   Reuses .method-section so it inherits the themed band background. Everything
   else is namespaced .odm-* and theme-aware (colour vars resolve to the cream
   palette automatically). Four "D" stages sit at the cardinal points; the two
   threads are curved, clickable labels inside the ring; selecting any item
   swaps the detail panel beside the compass.
   ========================================================================== */
.odm-layout {
  display: grid;
  grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
  margin-top: 8px;
}

/* --- The compass --- */
.odm-compass {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.odm-dial {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  overflow: visible;
  filter: drop-shadow(0 18px 36px rgba(40, 33, 22, 0.14));
}

/* Compass face + rings */
.odm-face {
  fill: url(#odm-g-face);
}

.odm-face-sheen {
  fill: #ffffff;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}

.odm-ring {
  fill: none;
}

.odm-ring-outer {
  stroke: color-mix(in srgb, var(--navy) 34%, transparent);
  stroke-width: 3.5;
}

.odm-ring-bezel {
  stroke: color-mix(in srgb, var(--teal) 36%, transparent);
  stroke-width: 1.25;
}

.odm-ring-inner {
  stroke: color-mix(in srgb, var(--navy) 14%, transparent);
  stroke-width: 1.25;
}

/* Graduated bezel ticks */
.odm-grad {
  stroke: color-mix(in srgb, var(--navy) 22%, transparent);
  stroke-width: 1.3;
}

.odm-grad.is-mid {
  stroke: color-mix(in srgb, var(--navy) 40%, transparent);
  stroke-width: 2;
}

.odm-grad.is-major {
  stroke: var(--teal);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.odm-cross {
  stroke: color-mix(in srgb, var(--navy) 8%, transparent);
  stroke-width: 1;
}

/* Compass rose */
.odm-rose-inter {
  fill: color-mix(in srgb, var(--navy) 9%, transparent);
}

.odm-rose-star {
  fill: color-mix(in srgb, var(--navy) 16%, transparent);
}

.odm-rose-n {
  fill: url(#odm-g-orange);
  stroke: #ffffff;
  stroke-width: 0.75;
  stroke-linejoin: round;
}

.odm-rose-s {
  fill: url(#odm-g-ink);
  stroke: #ffffff;
  stroke-width: 0.75;
  stroke-linejoin: round;
}

.odm-pivot-ring {
  fill: #ffffff;
  stroke: color-mix(in srgb, var(--navy) 36%, transparent);
  stroke-width: 1.5;
}

.odm-pivot {
  fill: url(#odm-g-orange);
}

/* --- Curved, clickable thread ribbons (one per ring circumference) --- */
.odm-thread {
  cursor: pointer;
  outline: none;
}

.odm-thread-track {
  stroke: color-mix(in srgb, var(--teal) 17%, var(--paper));
  stroke-width: 27;
  stroke-linecap: round;
  transition: stroke 0.25s ease;
}

.odm-thread-text {
  fill: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-anchor: middle;
  pointer-events: none;
  transition: fill 0.25s ease;
}

.odm-thread:hover .odm-thread-track,
.odm-thread:focus-visible .odm-thread-track {
  stroke: color-mix(in srgb, var(--teal) 26%, var(--paper));
}

.odm-thread:hover .odm-thread-text,
.odm-thread:focus-visible .odm-thread-text {
  fill: var(--teal-dark);
}

.odm-thread.is-active .odm-thread-track {
  stroke: url(#odm-g-orange);
}

.odm-thread.is-active .odm-thread-text {
  fill: #fff;
}

.odm-thread:focus-visible .odm-thread-track {
  stroke: color-mix(in srgb, var(--teal) 40%, var(--paper));
}

/* --- The four D medallions at the cardinal directions --- */
.odm-point {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: clamp(68px, 18%, 88px);
  padding: 13px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--navy) 13%, transparent);
  border-radius: 17px;
  background:
    linear-gradient(158deg, #ffffff 0%, #fbf6ef 100%);
  box-shadow:
    0 12px 28px rgba(40, 33, 22, 0.13),
    0 2px 6px rgba(40, 33, 22, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
  z-index: 2;
}

/* gradient hairline ring */
.odm-point::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--navy) 45%, transparent), transparent 42%, color-mix(in srgb, var(--teal) 55%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.odm-point--n { top: 1.5%; left: 50%; transform: translate(-50%, -50%); }
.odm-point--s { top: 98.5%; left: 50%; transform: translate(-50%, -50%); }
.odm-point--e { top: 50%; left: 98.5%; transform: translate(-50%, -50%); }
.odm-point--w { top: 50%; left: 1.5%; transform: translate(-50%, -50%); }

.odm-point-num {
  position: absolute;
  top: -9px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--navy), #2a16a0);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 10px rgba(26, 0, 136, 0.3);
  transition: background 0.28s ease, color 0.28s ease;
}

.odm-point-d {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 4.6vw, 2.15rem);
  font-weight: 700;
  line-height: 0.82;
  background: linear-gradient(150deg, var(--navy) 0%, #4a2bd6 40%, var(--teal) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: -webkit-text-fill-color 0.28s ease;
}

.odm-point-name {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.28s ease;
}

.odm-point:hover,
.odm-point:focus-visible {
  transform: translate(-50%, -50%) scale(1.07);
  border-color: transparent;
  box-shadow:
    0 20px 40px rgba(40, 33, 22, 0.2),
    0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent);
  outline: none;
}

.odm-point:hover::before,
.odm-point:focus-visible::before { opacity: 1; }

.odm-point.is-active {
  border-color: transparent;
  background: linear-gradient(152deg, var(--navy) 0%, #3a23b8 46%, var(--teal) 118%);
  box-shadow:
    0 18px 38px rgba(216, 67, 29, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.odm-point.is-active::before { opacity: 0; }
.odm-point.is-active .odm-point-d { -webkit-text-fill-color: #fff; color: #fff; }
.odm-point.is-active .odm-point-name { color: rgba(255, 255, 255, 0.82); }
.odm-point.is-active .odm-point-num {
  background: #fff;
  color: var(--navy);
}

/* --- Detail panel --- */
.odm-detail {
  position: relative;
  min-height: 320px;
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid color-mix(in srgb, var(--navy) 11%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--teal) 7%, transparent) 0%, transparent 46%),
    linear-gradient(160deg, #ffffff 0%, #fbf7f1 100%);
  box-shadow: 0 26px 60px rgba(40, 33, 22, 0.13);
  overflow: hidden;
}

.odm-detail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, #4a2bd6 48%, var(--teal) 100%);
}

.odm-panel {
  display: none;
}

.odm-panel.is-active {
  display: block;
  animation: odmFade 0.4s ease both;
}

@keyframes odmFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.odm-panel-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent);
  background: color-mix(in srgb, var(--teal) 9%, var(--paper));
  color: var(--teal-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.odm-panel-kind::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}

.odm-panel-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
}

.odm-panel-d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 14px;
  background: linear-gradient(152deg, var(--navy) 0%, #3a23b8 46%, var(--teal) 120%);
  color: #fff;
  font-size: 0.78em;
  flex: none;
  box-shadow: 0 8px 18px rgba(216, 67, 29, 0.28);
}

.odm-panel-lead {
  margin: 0 0 14px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
}

.odm-panel-body {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.odm-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

.odm-hint i,
.odm-hint svg {
  width: 18px;
  height: 18px;
  color: var(--teal-dark);
  flex: none;
}

@media (max-width: 960px) {
  .odm-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    justify-items: center;
  }
  .odm-compass { max-width: 400px; }
  .odm-detail { min-height: 0; width: 100%; }
}

@media (max-width: 480px) {
  .odm-compass { max-width: 320px; }
  .odm-thread-text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .odm-point,
  .odm-thread-text,
  .odm-panel.is-active { transition: none; animation: none; }
}