/* Ivylistic — Section Styles */

/* ============ ANNOUNCEMENT STRIP ============ */
.announce {
  background: var(--ink);
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px 16px;
  position: relative;
  border-bottom: var(--hairline-strong);
}
.announce .gold { color: var(--gold); font-weight: 400; }
.announce .arrow { display: inline-block; transform: translateX(2px); transition: transform .25s ease; }
.announce a:hover .arrow { transform: translateX(6px); }
.announce .close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cream);
  opacity: 0.5;
  font-size: 16px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
}
.announce .close:hover { opacity: 1; }

/* ============ TOP NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.solid {
  background: var(--cream);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 42, 68, 0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1440px;
  margin: 0 auto;
  gap: 24px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo .mark { width: 38px; height: 38px; }
.nav-logo .wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1;
}
.nav-logo .wordmark .listic { color: var(--gold); }
/* Horizontal lockup (cap + IVYLISTIC wordmark + tagline) — overrides the
   side-by-side inline-text version above. */
.nav-logo--lockup { gap: 0; }
.nav-logo--lockup img {
  height: 56px;
  width: auto;
  display: block;
}
@media (max-width: 700px) {
  .nav-logo--lockup img { height: 44px; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 400;
}
.nav-item { position: relative; padding: 10px 0; }
.nav-item button, .nav-item__title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: inherit; color: inherit; font-weight: inherit;
  text-decoration: none; cursor: pointer;
}
.nav-item .caret { font-size: 9px; opacity: 0.6; transition: transform .25s ease; }
.nav-item:hover .caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 280px;
  background: var(--paper);
  border: 1px solid rgba(15, 42, 68, 0.08);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  padding: 16px 8px;
  /* margin-top creates visual gap to the button, but the bridge pseudo-element
     keeps hover continuous so the dropdown doesn't disappear when crossing the gap */
  margin-top: 8px;
  box-shadow: var(--shadow-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
/* Invisible "bridge" between the nav-item button and its dropdown so hover stays
   continuous across the visual gap. Without this, the cursor leaves the button
   over the 8px margin and the dropdown closes before the user reaches it. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0; height: 12px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--ink-soft);
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown a:hover { background: #ffffff; color: var(--ink); }
.nav-dropdown a .sub {
  display: block; font-size: 11px; color: var(--muted); margin-top: 2px;
}

/* ============ MOBILE HAMBURGER + DRAWER ============ */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(15, 42, 68, 0.18);
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
  flex: 0 0 auto;
}
.nav .solid .nav-burger, .nav.solid .nav-burger { border-color: rgba(15, 42, 68, 0.25); }
.burger-icon { position: relative; width: 20px; height: 14px; display: block; }
.burger-icon span {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.burger-icon span:nth-child(1) { top: 0; }
.burger-icon span:nth-child(2) { top: 6px; }
.burger-icon span:nth-child(3) { top: 12px; }
.burger-icon.is-x span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger-icon.is-x span:nth-child(2) { opacity: 0; }
.burger-icon.is-x span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  visibility: hidden;
}
.nav-drawer.is-open { pointer-events: auto; visibility: visible; }
.nav-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 42, 68, 0.55);
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; }
.nav-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: -16px 0 40px rgba(15, 42, 68, 0.25);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
  position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.nav-drawer__logo img { height: 36px; width: auto; display: block; }
.nav-drawer__close {
  width: 40px; height: 40px;
  background: transparent; border: none;
  font-size: 28px; line-height: 1;
  color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
  border-radius: 6px;
}
.nav-drawer__close:hover { background: #ffffff; }
.nav-drawer__menu { padding: 12px 0 28px; }
.nav-drawer__group { padding: 8px 20px; border-bottom: 1px solid rgba(15, 42, 68, 0.06); }
.nav-drawer__group:last-of-type { border-bottom: none; }
.nav-drawer__group-title {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  padding: 12px 0 6px;
  letter-spacing: -0.01em;
}
.nav-drawer__sublinks { display: flex; flex-direction: column; padding: 0 0 8px 0; }
.nav-drawer__sublinks a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-soft);
  border-bottom: 1px dashed rgba(15, 42, 68, 0.05);
}
.nav-drawer__sublinks a:last-child { border-bottom: none; }
.nav-drawer__cta {
  display: flex !important;
  margin: 20px;
  justify-content: center;
}

/* Mobile breakpoint switches */
@media (max-width: 1100px) {
  .nav-burger { display: inline-flex; }
  .nav-links { display: none; }
  .nav-cta-desktop { display: none; }
}

/* ============ FLOATING CONSULTATION CTA ============ */
.floating-cta {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 50;
  background: var(--accent);
  color: #fff;
  padding: 14px 22px 14px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(123, 63, 160, 0.35);
  transition: transform .35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .25s ease, background .25s ease;
}
.floating-cta:hover { background: var(--accent-deep); transform: translateY(-2px); }
.floating-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(80px);
}
.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.floating-cta .dot {
  width: 8px; height: 8px; background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(201, 155, 61, 0.6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 155, 61, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(201, 155, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 155, 61, 0); }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 56px 0 80px;
  background: var(--ink);
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 1s ease;
}
.hero-bg.fade { opacity: 0; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 42, 68, 0.45) 0%, rgba(15, 42, 68, 0.75) 100%);
  z-index: 1;
  transition: background .6s ease;
}
/* V1 mapping (after the hero re-order):
     • set-0 → Strategy banner   (bg: hero-campus.png — bright)
     • set-1 → Built by Alumni   (bg: video sequence — has its own .video-bg__overlay)
     • set-2 → Globe banner      (bg: hero-library.png — warm, mid-bright)
   V1-2: switched from left-tilted gradients (which left the right half of the
   imagery transparent) to full-coverage gradients that darken the entire
   banner. Reason: the V1-2 CTA position move puts the buttons at the
   bottom-right of the hero, and with the old left-only wash the ghost CTAs
   blended into the bright photography. Each gradient is darkest at the
   bottom-right (where CTAs sit) and at the top-left (heading text), with a
   slightly lighter mid-zone so the imagery still reads through. */
.hero.hero-set-0 .hero-overlay {
  background:
    /* dark anchor at the bottom-right corner for the CTA cluster */
    radial-gradient(ellipse 70% 55% at 80% 100%,
      rgba(15, 42, 68, 0.72) 0%,
      rgba(15, 42, 68, 0.00) 70%
    ),
    /* full-bleed dark wash so the whole banner is legible */
    linear-gradient(180deg,
      rgba(15, 42, 68, 0.62) 0%,
      rgba(15, 42, 68, 0.42) 45%,
      rgba(15, 42, 68, 0.70) 100%
    );
}
/* Video slide — the .video-bg__overlay below carries part of the gradient,
   but we still need a full wash on top so the eyebrow + heading + the
   "Get a Free Evaluation" CTA all stay legible against the brightest video
   frames. */
.hero.hero-set-1 .hero-overlay {
  background:
    radial-gradient(ellipse 70% 55% at 80% 100%,
      rgba(15, 42, 68, 0.55) 0%,
      rgba(15, 42, 68, 0.00) 70%
    ),
    linear-gradient(180deg,
      rgba(15, 42, 68, 0.40) 0%,
      rgba(15, 42, 68, 0.25) 45%,
      rgba(15, 42, 68, 0.55) 100%
    );
}
.hero.hero-set-2 .hero-overlay {
  background:
    radial-gradient(ellipse 70% 55% at 80% 100%,
      rgba(15, 42, 68, 0.72) 0%,
      rgba(15, 42, 68, 0.00) 70%
    ),
    linear-gradient(180deg,
      rgba(15, 42, 68, 0.65) 0%,
      rgba(15, 42, 68, 0.45) 45%,
      rgba(15, 42, 68, 0.72) 100%
    );
}
/* ===== STACKED HERO CONTENT — cross-fade between slides ===== */
.hero-content {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease, transform .9s ease;
}
.hero-content.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}
.hero-content.is-inactive {
  opacity: 0;
  transform: translateY(calc(-50% + 12px));
}

/* ===== V1-2: STACKED CTA ANCHOR — pinned to bottom-right of the banner.
   Separated from .hero-content so the CTAs can land at the bottom-right of the
   full hero, while the heading text stays in its left ~50% column. One anchor
   per slide; they cross-fade in lockstep with .hero-content via the same
   is-active / is-inactive classes. */
.hero-ctas-anchor {
  position: absolute;
  right: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  bottom: clamp(2.5rem, 6vh, 5.5rem);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease, transform .9s ease;
  transform: translateY(0);
}
.hero-ctas-anchor.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hero-ctas-anchor.is-inactive {
  opacity: 0;
  transform: translateY(12px);
}
.hero-ctas-anchor .hero-ctas {
  /* In the anchor, CTAs are right-aligned by default since the anchor itself
     is right-pinned. */
  justify-content: flex-end;
  margin-top: 0;
}

/* V1.4: parallel BOTTOM-CENTER anchor for secondary CTAs. Horizontally
   centred on the hero, sharing the same `bottom` value as the primary right
   anchor so both buttons land on the same vertical baseline. Only used by
   slides that opt in via `secondaryCtasAtBottom: true`. (Class name kept as
   `--left` for legacy stability — historically it was bottom-left.) */
.hero-ctas-anchor--left {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.hero-ctas-anchor--left.is-active  { transform: translateX(-50%) translateY(0); }
.hero-ctas-anchor--left.is-inactive { transform: translateX(-50%) translateY(12px); }
.hero-ctas-anchor--left .hero-ctas {
  justify-content: center;
}

/* ===== HERO VIDEO SLIDE ===== */
.video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #14304F 0%, #0F2A44 60%, #0a1e30 100%);
}
.video-bg__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight desaturation + warmer tint keeps any uploaded footage on-brand */
  filter: saturate(0.85) contrast(1.05);
  /* Stacked crossfade — all 4 clips occupy the same space; only the active one
     is fully visible. Opacity transition matches the JS trigger window. */
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity;
}
.video-bg__el.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .video-bg__el { transition: opacity .1s; }
}
.video-bg__overlay {
  position: absolute; inset: 0;
  /* Left-tilted gradient — dark over the text column, clear over the right side
     so the campus footage stays visible. Matches the Crimson reference. */
  background:
    linear-gradient(90deg,
      rgba(15, 42, 68, 0.82) 0%,
      rgba(15, 42, 68, 0.55) 22%,
      rgba(15, 42, 68, 0.18) 48%,
      rgba(15, 42, 68, 0.00) 72%,
      rgba(15, 42, 68, 0.00) 100%);
  pointer-events: none;
}
/* Subtle bottom vignette so the slider dots at the bottom stay legible */
.video-bg::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 42, 68, 0.45) 100%);
  pointer-events: none;
}
.video-bg__controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 10px;
  z-index: 2;
}
.video-bg__btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(242, 237, 227, 0.12);
  color: var(--cream);
  border: 1px solid rgba(201, 155, 61, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .25s ease;
}
.video-bg__btn:hover {
  background: rgba(201, 155, 61, 0.25);
  border-color: var(--gold);
  color: var(--gold);
}

/* ===== HERO GLOBE COLUMN ===== */
/* Globe lives in its own right-hand column on the hero, never under text. */
.hero-globe-col {
  /* Globe moved out of the hero into its own .globe-section below the trust bar.
     The hero no longer renders the globe inline on any viewport. */
  display: none !important;
}
.hero-globe-col.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
}
.hero-globe-col.is-active {
  opacity: 1;
  transform: translateX(0);
}
.hero-globe-col::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(15, 42, 68, 0.85) 0%,
    rgba(15, 42, 68, 0.60) 30%,
    rgba(15, 42, 68, 0.25) 55%,
    transparent 72%
  );
  pointer-events: none;
}
.globe-widget {
  position: relative;
  width: 100%;
  height: 100%;
}
.globe-mount {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: grab;
}
.globe-mount:active { cursor: grabbing; }
.globe-mount canvas { display: block !important; }
/* Hide markers behind the popup card when it's open so they don't poke through the card surface. */
.globe-widget.is-popup-open .globe-marker {
  opacity: 0.25;
  pointer-events: none;
}
.globe-hint {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.55);
  white-space: nowrap;
  pointer-events: none;
}
.globe-hint .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201,155,61, 0.6);
  animation: pulse 2.4s infinite;
}

/* ===== GLOBE MARKERS — purple round dots with gold ring ===== */
.globe-marker {
  position: relative;
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.globe-marker__dot {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #7B3FA0;             /* Ambition Purple */
  border: 1.5px solid rgba(242, 237, 227, 0.85); /* cream ring for legibility */
  box-shadow:
    0 0 0 2px rgba(123, 63, 160, 0.35),
    0 0 12px rgba(123, 63, 160, 0.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.globe-marker__ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 155, 61, 0.7); /* gold halo */
  opacity: 0.85;
  animation: markerPulse 2.6s ease-out infinite;
}
@keyframes markerPulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(2.0); opacity: 0;   }
  100% { transform: scale(2.0); opacity: 0;   }
}
.globe-marker:hover .globe-marker__dot {
  transform: scale(1.35);
  box-shadow:
    0 0 0 3px rgba(201, 155, 61, 0.5),
    0 0 18px rgba(123, 63, 160, 0.7);
}
.globe-marker:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 50%;
}

/* All three slides keep their text pinned to the left column so they never crowd
   the photography on the right. The left-only localized overlay (per-slide) sits
   exactly under this text column. */
.hero-content[data-slide-idx="0"],
.hero-content[data-slide-idx="1"],
.hero-content[data-slide-idx="2"] {
  max-width: min(560px, calc(50% - 48px));
  margin-left: max(32px, calc((100vw - var(--container)) / 2));
  margin-right: 0;
  left: auto; right: auto;
}
/* V1.4: slide 2 carries the longest H1 ("Improve your MBA profile and boost
   your chances of admit") so its column gets to stretch out to roughly the
   centre of the slider, with its own font scale to keep the wrap tight. */
.hero-content[data-slide-idx="2"] {
  max-width: min(720px, calc(50% - 32px));
}
.hero-content[data-slide-idx="0"] h1 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); max-width: 14ch; }
.hero-content[data-slide-idx="1"] h1 { font-size: clamp(2.4rem, 4.2vw, 4.2rem); max-width: 16ch; }
.hero-content[data-slide-idx="2"] h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); max-width: 22ch; line-height: 1.08; }
.hero-content[data-slide-idx="2"] .hero-sub { max-width: 46ch; }
/* Note: hero-ctas left-alignment + margin-top now lives on the base
   `.hero-ctas` rule (set in V1.4 round 17), so the per-slide override
   is no longer needed. */

/* ===== LOCATION CARD ===== */
/* Card lives INSIDE the globe column on its left edge — never crosses into the
   headline area on the left side of the hero. z-index well above the markers. */
/* loc-card popup — fixed centered modal on EVERY viewport now that the globe lives
   in its own dedicated section (no more inline-with-text positioning). */
.loc-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: #ffffff;
  color: var(--ink);
  border-radius: var(--radius-card);
  padding: 32px 30px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(123, 63, 160, 0.35);
  z-index: 2147483645;
  animation: locCardIn .42s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes locCardIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.loc-card__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  background: transparent;
  transition: background .2s ease, color .2s ease;
}
.loc-card__close:hover { background: rgba(15,42,68,0.08); color: var(--ink); }
.loc-card__corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.loc-card__corner--tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.loc-card__corner--bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.loc-card__country {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 6px;
}
.loc-card__city {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.05;
  margin: 0 0 18px;
}
.loc-card__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid rgba(15,42,68,0.08);
  border-bottom: 1px solid rgba(15,42,68,0.08);
  margin-bottom: 16px;
}
.loc-card__stat-num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.loc-card__stat-label {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.loc-card__desc {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.loc-card__group {
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 42, 68, 0.08);
}
.loc-card__group:first-of-type { padding-top: 0; border-top: none; }
.loc-card__schools-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
}
/* Marquee — logos scroll horizontally so the country card feels alive even
   when the list is short. Each .loc-card__group can pass its own animation
   duration via inline style to vary the row speeds. */
.loc-card__marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.loc-card__marquee-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: locCardMarquee linear infinite;
  will-change: transform;
}
.loc-card__marquee-track--reverse {
  animation-name: locCardMarqueeReverse;
}
.loc-card__marquee:hover .loc-card__marquee-track { animation-play-state: paused; }
@keyframes locCardMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes locCardMarqueeReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .loc-card__marquee-track { animation: none; transform: translateX(-25%); }
}
.loc-card__logo {
  flex: 0 0 auto;
  height: 40px;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background: transparent;
}
.loc-card__logo img {
  max-height: 32px;
  max-width: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.15);
}
.loc-card__logo--text span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.loc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--accent);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
  transition: gap .25s ease, color .25s ease;
}
.loc-card__cta:hover { gap: 12px; color: var(--ink); border-color: var(--ink); }

/* When the popup would clip off-screen left (small viewports), pin to right of globe instead. */
@media (max-width: 1100px) {
  .hero-globe-col {
    display: none !important;
  }
  .hero .hero-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 32px;
  }
  /* Mobile: full-bleed dark overlays on the IMAGE-bg slides so eyebrow + heading
     + body text all stay legible against bright photos.
     - set-0 (Strategy / campus image)  — strong dark wash
     - set-1 (Built by Alumni / video)  — lighter wash because video already has its own
     - set-2 (Globe / library image)    — strong dark wash */
  .hero.hero-set-0 .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(15, 42, 68, 0.78) 0%,
        rgba(15, 42, 68, 0.65) 50%,
        rgba(15, 42, 68, 0.85) 100%
      );
  }
  .hero.hero-set-1 .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(15, 42, 68, 0.55) 0%,
        rgba(15, 42, 68, 0.40) 45%,
        rgba(15, 42, 68, 0.70) 100%
      );
  }
  .hero.hero-set-2 .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(15, 42, 68, 0.78) 0%,
        rgba(15, 42, 68, 0.60) 45%,
        rgba(15, 42, 68, 0.80) 100%
      );
  }
  /* Strengthen the video-overlay on mobile too so the eyebrow on Banner 1 reads
     against the bright campus footage. */
  .video-bg__overlay {
    background:
      linear-gradient(180deg,
        rgba(15, 42, 68, 0.55) 0%,
        rgba(15, 42, 68, 0.35) 45%,
        rgba(15, 42, 68, 0.65) 100%);
  }
}
/* Mobile-only: centre-align the hero text + CTAs on phones (V1 client request).
   V1-2: also re-anchor the CTA block to the bottom-center of the hero so it
   reads as a normal stacked layout below the heading on phones — there's no
   room to separate CTAs to the bottom-right corner on a phone viewport. */
@media (max-width: 700px) {
  .hero .hero-content { text-align: center; }
  .hero h1,
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-ctas-anchor {
    left: 0;
    right: 0;
    bottom: clamp(2rem, 6vh, 4.5rem);
    width: 100%;
    padding: 0 24px;
    text-align: center;
  }
  .hero-ctas-anchor .hero-ctas { justify-content: center; }
  /* V1.4: on mobile the bottom-LEFT anchor stacks ABOVE the primary anchor
     (instead of sitting to its left, which has no room on a phone). Both end
     up centred and column-stacked at the bottom of the hero. */
  .hero-ctas-anchor--left {
    left: 0;
    right: 0;
    bottom: calc(clamp(2rem, 6vh, 4.5rem) + 68px);
    width: 100%;
    padding: 0 24px;
    text-align: center;
  }
  .hero-ctas-anchor--left .hero-ctas { justify-content: center; }
}
@media (max-width: 1100px) {
  /* Re-open the 1100px block for the popup rules below — split so the 700px
     centring rules above can remain isolated to true mobile. */
  .loc-card {
    /* Fixed overlay on mobile so the popup is ALWAYS visible regardless of where the globe sits */
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    z-index: 2147483645;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201,155,61,0.4);
  }
  @keyframes locCardIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  /* Bigger close button so it's tappable on mobile */
  .loc-card__close {
    width: 38px; height: 38px;
    font-size: 24px;
    background: rgba(15,42,68,0.06);
    top: 10px; right: 10px;
  }
}
/* Original positioning rule replaced by the stacked cross-fade rule above. */
.hero-eyebrow {
  /* V1-2: +20% size bump + true bold per client. IvyPresto Text only ships
     Regular weight and the site otherwise disables font-synthesis globally,
     so we explicitly opt back into synthetic weight on this element so the
     800 below actually renders heavier than the surrounding 400 body text. */
  font-size: 16px;
  letter-spacing: 0.28em;
  font-weight: 800;
  font-synthesis: weight;
  -webkit-font-synthesis: weight;
  color: #C99FE5;
  text-transform: uppercase;
  margin-bottom: 28px;
  display: inline-block;
  text-shadow: 0 1px 6px rgba(15, 42, 68, 0.55);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 5.4vw, 5.2rem);
  line-height: 1.04;
  color: var(--cream);
  max-width: 18ch;
  margin-bottom: 28px;
  font-style: normal;
}
.hero h1 .key { font-style: normal; }
.hero h1 .key.purple { color: #C99FE5; font-style: normal; }
.hero h1 .key.gold { color: var(--gold); font-style: normal; }
.hero-sub {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: rgba(242, 237, 227, 0.82);
  max-width: 52ch;
  margin-bottom: 40px;
  font-style: normal;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  /* V1.4 round 17: all hero CTAs render inline under the sub-text now,
     left-aligned with the heading column on every slide. */
  justify-content: flex-start;
  margin-top: 8px;
}
/* V1.4 round 18: zero-height flex line-break — placed BEFORE a CTA that
   carries center:true so the CTA wraps to a new row. Then the CTA's
   .hero-ctas__center class auto-centres it within that new row. */
.hero-ctas__break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
}
.hero-ctas__center {
  margin-inline: auto;
}

.hero-dots {
  position: absolute;
  bottom: 48px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 3;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(201, 155, 61, 0.35);
  transition: background .25s ease, transform .25s ease;
}
.hero-dot.active { background: var(--gold); transform: scale(1.4); }

.hero-trophy-row {
  display: flex; gap: 32px; align-items: center;
  margin-top: 48px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(201, 155, 61, 0.25);
  max-width: 760px;
}
.hero-trophy-row .label {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(201, 155, 61, 0.85); font-weight: 400;
}
.hero-trophy {
  font-family: var(--font-display); font-style: normal;
  font-size: 17px;
  color: rgba(242, 237, 227, 0.85);
}

/* Hero — gold corner frames specific */
.hero .frame-corner {
  position: absolute;
  width: 80px; height: 80px;
  border: 1px solid var(--gold);
  z-index: 2;
  pointer-events: none;
}
.hero .frame-corner.tr { top: 80px; right: 48px; border-left: none; border-bottom: none; }
.hero .frame-corner.bl { bottom: 80px; left: 48px; border-right: none; border-top: none; }
body.no-frames .frame-corner { display: none; }

/* ============ TRUST BAR ============ */
.trust {
  padding: 28px 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  background: #ffffff;
}
.trust-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 32px;
  max-width: var(--container); margin: 0 auto; padding: 0 32px;
}
.trust-label {
  font-family: var(--font-serif); font-style: normal;
  color: var(--ink-soft); font-size: 14px;
}
.trust-logos {
  display: flex; align-items: center; gap: 56px; flex-wrap: wrap;
}
/* Marquee variant — desktop hidden, mobile (≤700px) shown */
.trust-marquee {
  display: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.trust-marquee__track {
  display: flex;
  gap: 36px;
  width: max-content;
  animation: trustScroll 26s linear infinite;
}
@keyframes trustScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 700px) {
  .trust-logos { display: none; }
  .trust-marquee { display: block; }
  .trust-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 0; }
  .trust-label { text-align: center; padding: 0 24px; }
}
.trust-logo {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0.55;
  font-weight: 400;
  transition: opacity .25s ease;
  white-space: nowrap;
}
.trust-logo:hover { opacity: 1; }
.trust-logo.bold { font-weight: 400; letter-spacing: -0.01em; font-family: var(--font-sans); font-size: 16px; }

/* ============ FOUNDERS STRIP ============ */
/* ===== FOUNDERS STRIP — library backdrop + horizontal marquee ===== */
.founders-strip {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 5vw, 64px);
}
.founders-strip .fs-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.founders-strip .fs-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.85);
}
.founders-strip .fs-overlay {
  position: absolute; inset: 0;
  /* Top starts at full ink to match the bottom of the globe-section's fade-to-ink
     so the boundary between the two sections disappears. Bottom darkens further. */
  background:
    linear-gradient(180deg,
      var(--ink) 0%,
      rgba(15, 42, 68, 0.96) 12%,
      rgba(15, 42, 68, 0.74) 40%,
      rgba(15, 42, 68, 0.82) 75%,
      rgba(15, 42, 68, 0.94) 100%);
  z-index: 1;
}
.founders-strip .fs-inner {
  position: relative; z-index: 2;
}
.founders-strip .fs-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
  padding: 0 32px;
}
.founders-strip h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--cream);
  font-weight: 400;
  text-align: center;
  line-height: 1.15;
  margin-top: 14px;
}
.founders-strip h2 .school {
  color: var(--gold); font-style: normal; font-weight: 400;
  display: inline-block; min-width: 6ch;
  position: relative;
  animation: schoolFade .35s ease both;
}
.founders-strip h2 .school::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--gold); opacity: 0.5;
}
@keyframes schoolFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.founders-strip .meet-link {
  margin-top: 22px; display: flex; justify-content: center;
}

/* Static founders row — 3 tiles centered */
.fs-founders-row {
  display: flex;
  justify-content: center;
  /* V1-2: tiles widened to ~260px so the school line fits on ONE line.
     Gap widened so the row still feels balanced. Padding-top bumped so the
     ribbon (now floating above the circle) has clearance. */
  gap: clamp(36px, 5vw, 80px);
  padding: 36px 32px 4px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  /* V1.4 (round 10): stack all 3 founder tiles in a single column on phones.
     The previous flex-wrap pattern produced an unbalanced 2 + 1 layout and
     long school strings ("INSEAD, FONTAINEBLEAU, FRANCE") collided with the
     neighbouring tile's label. Single column gives each tile the full width
     and clean horizontal rhythm. */
  .fs-founders-row {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    gap: 36px;
    padding: 28px 24px 8px;
  }
}

/* ============ STANDALONE GLOBE SECTION (all screens) ============ */
.globe-section {
  display: block;
  background:
    radial-gradient(ellipse at center, #14304f 0%, #0c1f33 70%, #07151f 100%);
  padding: clamp(48px, 5vw, 80px) 0 clamp(52px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
/* Soft fade at the bottom edge → blends seamlessly into the founders-strip below,
   which now starts with a matching dark ink wash at its top. */
.globe-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent 0%, #07151f 80%, var(--ink) 100%);
  pointer-events: none;
  z-index: 3;
}
/* Starfield */
.globe-section__stars {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.globe-section__star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: var(--star-opacity, 0.5);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.65);
  animation: starTwinkle 4s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes starTwinkle {
  0%, 100% { opacity: calc(var(--star-opacity, 0.5) * 0.35); transform: scale(0.9); }
  50%      { opacity: var(--star-opacity, 0.5); transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .globe-section__star { animation: none; }
}
/* Soft accent glows in opposite corners — break up the flat darkness */
.globe-section__glow {
  position: absolute;
  width: 540px; height: 540px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.globe-section__glow--gold {
  top: -120px; left: -160px;
  background: radial-gradient(circle, rgba(201, 155, 61, 0.45) 0%, transparent 70%);
}
.globe-section__glow--purple {
  bottom: -160px; right: -160px;
  background: radial-gradient(circle, rgba(123, 63, 160, 0.45) 0%, transparent 70%);
}
/* Floating stat chips — pinned to the four corners on desktop, hidden on small mobile */
.globe-section__stats {
  position: absolute; inset: clamp(80px, 9vw, 130px) clamp(24px, 4vw, 64px);
  pointer-events: none;
  z-index: 2;
}
.globe-section__stat {
  position: absolute;
  background: rgba(15, 42, 68, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 155, 61, 0.35);
  border-radius: 14px;
  padding: 14px 18px;
  text-align: center;
  min-width: 110px;
  pointer-events: auto;
  transition: transform .3s ease, border-color .3s ease;
}
.globe-section__stat:hover { transform: translateY(-3px); border-color: var(--gold); }
.globe-section__stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.globe-section__stat .label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.78);
}
.globe-section__stat--tl { top: 0; left: 0; }
.globe-section__stat--tr { top: 0; right: 0; }
.globe-section__stat--bl { bottom: 0; left: 0; }
.globe-section__stat--br { bottom: 0; right: 0; }
@media (max-width: 1100px) {
  .globe-section__stat--tl, .globe-section__stat--tr { display: none; }
  .globe-section__stat--bl, .globe-section__stat--br { padding: 10px 14px; min-width: 88px; }
  .globe-section__stat .num { font-size: 20px; }
  .globe-section__stat .label { font-size: 8.5px; }
}
@media (max-width: 600px) {
  .globe-section__stats { inset: auto 16px 24px 16px; display: flex; gap: 10px; justify-content: center; }
  .globe-section__stat { position: static; padding: 8px 12px; min-width: 0; flex: 1 1 auto; max-width: 50%; }
}
.globe-section__head {
  text-align: center;
  padding: 0 24px 36px;
  max-width: 720px;
  margin: 0 auto;
}
.globe-section__head .hero-eyebrow {
  color: #C99FE5;
  text-align: center;
  margin-bottom: 14px;
}
.globe-section__title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  color: var(--cream);
  font-weight: 400;
  margin: 0 0 12px;
}
.globe-section__sub {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(242, 237, 227, 0.82);
  margin: 0;
}
.globe-section__ctas {
  /* V1-2: two stacked rows — ghosts on top, primary below on its own line. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.globe-section__ctas-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.globe-section__ctas-row--primary .btn-primary {
  /* Slightly more presence than the ghost row above it. */
  padding-inline: clamp(22px, 3vw, 32px);
}
.globe-section__wrap {
  width: 100%;
  max-width: 760px;
  height: clamp(440px, 52vw, 620px);
  margin: 0 auto;
  position: relative;
}
.globe-section__foot {
  text-align: center;
  max-width: 760px;
  margin: 24px auto 0;
  padding: 0 24px 8px;
  position: relative;
  z-index: 2;
}
.globe-section__foot-title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--cream);
  font-weight: 400;
  margin: 0 0 14px;
}
.globe-section__foot-sub {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(242, 237, 227, 0.78);
  margin: 0;
}
@media (max-width: 600px) {
  .globe-section__wrap { height: 360px; padding: 0 8px; }
}
/* Bigger, more tappable globe markers on touch screens */
@media (max-width: 1100px) {
  .globe-section .globe-marker {
    width: 28px !important;
    height: 28px !important;
  }
  .globe-section .globe-marker__dot {
    width: 12px;
    height: 12px;
  }
  .globe-section .globe-marker__ring {
    width: 28px;
    height: 28px;
  }
}
.fs-tile {
  flex: 0 0 auto;
  /* V1-2: widened from 140 → 260 so "INSEAD, FONTAINEBLEAU, FRANCE" (the
     widest of the three school lines) fits on a SINGLE line, putting the year
     reliably on the third line of every card. */
  width: 260px;
  text-align: center;
  transition: transform .3s ease;
  /* Position relative so the .fs-role ribbon (now a sibling of .fs-pic, not a
     child) can absolute-anchor to the tile and float above the circle without
     being clipped by .fs-pic's overflow: hidden (which we need for portrait-
     aspect photos like Tushar's). padding-top reserves a clean zone above the
     circle for the floating ribbon. */
  position: relative;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fs-tile:hover { transform: translateY(-4px); }
.fs-pic {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid rgba(201, 155, 61, 0.65);
  padding: 5px;
  background: var(--ink);
  display: grid;
  place-items: center;
  /* V1-2: clip portraits that come in with portrait aspect ratios (e.g.,
     Tushar's 1200×1600 source was rendering at 104×139 inside a 104×104
     grid cell, spilling below the gold circle). Anything that hangs past the
     circle is now hidden behind it. */
  overflow: hidden;
}
.fs-tile--founder .fs-pic {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 155, 61, 0.18), 0 14px 28px rgba(0, 0, 0, 0.35);
}
.fs-initials {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--cream);
  background: linear-gradient(135deg, #2a486a 0%, #1c3552 100%);
}
/* Photo variant — the img inside .fs-pic replaces the initials placeholder. */
.fs-pic img {
  width: 100%; height: 100%;
  /* V1-2: grid items default to min-width/min-height: auto, which lets a
     portrait-aspect img grow taller than 100% of the cell (Tushar's 1200×1600
     was rendering 104×139 in a 104×104 cell). Override to 0 so the explicit
     width/height: 100% actually constrain the img to a square. */
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.fs-badge {
  position: absolute;
  bottom: -4px; left: 50%; transform: translateX(-50%);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(201, 155, 61, 0.4);
}
.fs-role {
  position: absolute;
  /* V1-2: now a sibling of .fs-pic (anchored to .fs-tile), floating fully
     above the gold circle with no overlap. .fs-tile padding-top (set on the
     parent row) gives clearance for this. */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  z-index: 2;
}
.fs-cap {
  margin-top: 18px;
  text-align: center;
  /* V1-2: flex column so .year always sits at the bottom of the caption block
     regardless of how many lines .school text wraps to (e.g. INSEAD,
     Fontainebleau, France wraps to 2 lines while UT Austin · McCombs fits on 1). */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.fs-cap .name {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  margin-bottom: 6px;
}
.fs-cap .school {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  /* V1-2: tiles widened to 260px so all school strings fit on ONE line —
     the previous 3-line min-height reservation is no longer needed since the
     .year line now lands at line 3 naturally for every card. nowrap is
     defensive: it prevents the line from breaking even on borderline browser
     metrics. */
  white-space: nowrap;
  line-height: 1.45;
}
.fs-cap .year {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(242, 237, 227, 0.85);
  margin-top: 6px;
  white-space: normal;
}
@media (prefers-reduced-motion: reduce) {
  .fs-track { animation: none; }
}

/* ============ USP GRID ============ */
.usp { background: #ffffff; }
.section-head {
  text-align: center;
  /* V1.5: tightened from 64 px to 40 px as part of the site-wide
     section-padding reduction so the heading-to-content gap matches
     the new compressed rhythm. */
  margin-bottom: 40px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 32px;
}
.section-head .eyebrow { display: block; margin-bottom: 16px; }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-style: normal;
  color: var(--ink);
  margin-bottom: 18px;
}
.section-head h2 .key.purple { color: var(--accent); font-style: normal; }
.section-head h2 .key.gold { color: var(--gold); font-style: normal; }
.section-head .lead {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: normal;
}
/* Founder testimonial feature — sits above the USP cards.
   Three overlapping founder portraits + a pull-quote in the founders' voice.
   Makes the section feel human before the user gets to the bullet list. */
.usp-feature {
  max-width: var(--container);
  margin: 0 auto 56px;
  padding: 36px clamp(28px, 4vw, 56px);
  /* V1-2: stronger background tint + thicker gold left accent so the testimonial
     band reads as its own anchored block, not a sibling card. */
  background: linear-gradient(135deg, rgba(123, 63, 160, 0.06) 0%, rgba(201, 155, 61, 0.09) 100%);
  border: 1px solid rgba(201, 155, 61, 0.35);
  border-left: 4px solid var(--gold, #C99B3D);
  border-radius: var(--radius-card);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.usp-feature::before {
  /* Subtle gold corner-frame motif top-right */
  content: ""; position: absolute;
  top: 14px; right: 14px;
  width: 24px; height: 24px;
  border: 1px solid rgba(201, 155, 61, 0.4);
  border-left: none; border-bottom: none;
  pointer-events: none;
}
.usp-feature__stack {
  display: flex;
  flex-shrink: 0;
}
.usp-feature__stack img {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 18px rgba(15, 42, 68, 0.12);
}
.usp-feature__stack img:not(:first-child) { margin-left: -22px; }
.usp-feature__text {
  position: relative;
}
.usp-feature__mark {
  position: absolute;
  top: -36px; left: -8px;
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}
.usp-feature__quote {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 60ch;
  position: relative; z-index: 1;
}
/* V1-2: closing sentence of the testimonial ("...is why we have built
   Ivylistic.") is wrapped in <strong> for emphasis. The site otherwise has
   font-synthesis: none globally + an IvyPresto-Regular-only @font-face, so a
   plain <strong> wouldn't actually render heavier. We deliberately re-enable
   synthetic bold for THIS element only, plus a small letter-spacing nudge so
   the line still reads as deliberately emphasised even on browsers where the
   synthetic bold lands lightly. */
.usp-feature__quote strong {
  font-synthesis: weight;
  -webkit-font-synthesis: weight;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.usp-feature__attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.usp-feature__names {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.usp-feature__role {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.usp-feature__quote--coda {
  /* V1-2: punchier — bold + accent purple + slight uplift so the line lands as
     a standalone closing statement, not a quiet footnote. */
  font-style: italic;
  font-weight: 700;
  color: var(--accent, #7B3FA0);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  letter-spacing: 0.005em;
  margin-top: 4px;
  margin-bottom: 18px;
}
/* V1-2: in the testimonial band, the highlight should be markedly stronger than
   the small highlight inside the USP cards. Heavier weight, a thicker ribbon,
   and a clearer fill so it reads as the visual anchor of the paragraph. */
.usp-feature .usp-highlight {
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(transparent 45%, rgba(201, 155, 61, 0.55) 45%, rgba(201, 155, 61, 0.55) 92%, transparent 92%);
  padding: 0 4px;
  border-radius: 2px;
}
.usp-feature__cta {
  margin-top: 24px;
  align-self: flex-start;
}
@media (max-width: 800px) {
  .usp {
    overflow-x: clip;
  }
  .usp-feature {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 20px;
    margin-bottom: 40px;
    margin-left: 16px;
    margin-right: 16px;
    max-width: calc(100% - 32px);
    gap: 24px;
  }
  .usp-feature__stack { justify-content: center; }
  .usp-feature__stack img { width: 64px; height: 64px; border-width: 2px; }
  .usp-feature__stack img:not(:first-child) { margin-left: -16px; }
  .usp-feature__mark { top: -24px; left: 50%; transform: translateX(-50%); font-size: 64px; }
  .usp-feature__quote {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 100%;
  }
  .usp-feature__attribution { align-items: center; }
  .usp-feature__cta {
    align-self: stretch;
    display: flex;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    padding: 14px 18px;
    font-size: 13.5px;
  }
}

.usp-grid {
  display: grid;
  /* V1-2: 6 cards now (added AI). 3×2 layout reads cleaner than 6×1 on
     desktop — keeps each card wide enough for the body copy to breathe. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.usp-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(15, 42, 68, 0.08);
  border-radius: var(--radius-card);
  padding: 36px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  /* Entrance — slides up + fades in when .usp is .is-visible */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.85,.3,1.05) var(--usp-stagger, 0s),
              transform .7s cubic-bezier(.22,.85,.3,1.05) var(--usp-stagger, 0s),
              box-shadow .35s ease,
              border-color .35s ease;
}
.usp.is-visible .usp-card { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .usp-card { opacity: 1; transform: none; transition: box-shadow .35s ease, border-color .35s ease; }
}

/* Oversized watermark number behind the card */
.usp-card__num {
  position: absolute;
  top: -28px; right: -14px;
  font-family: var(--font-display);
  font-size: 168px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.03em;
  transition: opacity .45s ease, transform .45s ease;
}
.usp-card:hover .usp-card__num { opacity: 0.18; transform: translateY(-4px) scale(1.04); }

/* Bottom-left gold accent bar that grows on hover */
.usp-card__bar {
  position: absolute;
  bottom: 0; left: 0;
  width: 36px; height: 3px;
  background: var(--gold);
  transition: width .4s cubic-bezier(.22,.85,.3,1.05);
}
.usp-card:hover { border-color: rgba(201, 155, 61, 0.5); box-shadow: 0 18px 36px rgba(15, 42, 68, 0.10); }
.usp-card:hover .usp-card__bar { width: 100%; }

.usp-icon {
  width: 48px; height: 48px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold);
  background: rgba(201, 155, 61, 0.08);
  position: relative; z-index: 1;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.usp-card:hover .usp-icon { background: var(--gold); color: var(--ink); transform: rotate(8deg) scale(1.05); }
.usp-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.18;
  position: relative; z-index: 1;
  margin: 4px 0 0;
}
.usp-card .usp-lead {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.3;
  color: var(--accent);
  margin: 0;
  position: relative; z-index: 1;
}
.usp-card .usp-body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  position: relative; z-index: 1;
}
.usp-highlight {
  color: var(--ink);
  background: linear-gradient(transparent 60%, rgba(201, 155, 61, 0.35) 60%);
  padding: 0 1px;
  transition: background .35s ease;
}
.usp-card:hover .usp-highlight {
  background: linear-gradient(transparent 50%, rgba(201, 155, 61, 0.6) 50%);
}

/* ============ TIMELINE — STEPPER VIEW ============ */
.timeline { background: #ffffff; border-top: var(--hairline); }
.tl-stepper {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.tl-stepper__rail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 40px;
  position: relative;
}
.tl-stepper__rail::before {
  content: ""; position: absolute;
  left: 26px; right: 26px; top: 26px;
  height: 1px; background: rgba(201, 155, 61, 0.25);
  z-index: 0;
}
.tl-stepper__pill { flex: 1 1 0; min-width: 0; }
/* Marker — sits between pills as a small decorative element ("↔" arrow or
   the "Application Submission" vertical label, matching slide 9 of the deck). */
.tl-stepper__marker {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid; place-items: center;
  position: relative;
  z-index: 1;
}
.tl-stepper__marker-arrow {
  font-size: 22px;
  color: var(--accent);
  background: #ffffff;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(123, 63, 160, 0.25);
}
.tl-stepper__marker-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* V1.5: recoloured from gold to purple (--accent) so the milestone labels
     ("Application Submission" etc.) match the rest of the timeline's purple
     accent. The iterative-marker label has its own --iter override so it
     stays purple too. */
  color: var(--accent);
  background: #ffffff;
  padding: 8px 4px;
  border-radius: 4px;
  border: 1px solid rgba(123, 63, 160, 0.35);
  white-space: nowrap;
  line-height: 1.1;
}
.tl-stepper__pill {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: opacity .25s ease;
  opacity: 0.45;
}
.tl-stepper__pill:hover { opacity: 0.85; }
.tl-stepper__pill.is-active { opacity: 1; }
.tl-stepper__pill.is-done { opacity: 0.7; }
.tl-stepper__num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(15, 42, 68, 0.15);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.tl-stepper__pill.is-active .tl-stepper__num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(123, 63, 160, 0.28);
}
.tl-stepper__pill.is-done .tl-stepper__num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.tl-stepper__name {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  max-width: 16ch;
}
.tl-stepper__pill.is-active .tl-stepper__name { color: var(--accent); }

.tl-stepper__panel {
  background: #ffffff;
  border: 1px solid rgba(201, 155, 61, 0.35);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: 0 14px 36px rgba(15, 42, 68, 0.08);
  animation: tlPanelIn .35s ease both;
}
@keyframes tlPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tl-stepper__panel-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(201, 155, 61, 0.35);
}
.tl-stepper__phase-num {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.tl-stepper__phase-name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink);
  margin: 0;
}
.tl-stepper__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.tl-stepper__grid--2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
/* V1.4: 3-col Process Description / Benefit / Output layout — the default
   3-column grid already matches, this alias just makes the intent explicit
   for future readers. Mobile media query below stacks back to 1 column. */
.tl-stepper__grid--3col {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
/* V1.4: bold purple highlight for key terms inside Benefit copy. */
.tl-hi {
  color: var(--accent);
  font-weight: 700;
}
/* V1.4: each Benefit sentence on its own line — stack paragraphs vertically
   with a small gap so the multi-sentence read is rhythmic, not crammed. */
.tl-stepper__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-stepper__lines p {
  margin: 0;
}
/* V1.4: Output column — frameworks list + framework screenshot placeholder. */
.tl-stepper__cell--output { /* same border-left/padding as siblings */ }
.tl-stepper__output-item {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 12px;
}
.tl-stepper__output-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-stepper__output-list li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
  position: relative;
  padding-left: 18px;
}
.tl-stepper__output-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1px;
  background: var(--accent);
}
.tl-stepper__output-note {
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 14px;
  line-height: 1.4;
}
.tl-stepper__output-shot {
  margin-top: 8px;
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(123, 63, 160, 0.04), rgba(201, 155, 61, 0.05));
  border: 1px dashed rgba(123, 63, 160, 0.4);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--accent);
  gap: 4px;
}
.tl-stepper__output-shot-label {
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--ink);
  font-weight: 600;
  margin-top: 4px;
}
.tl-stepper__output-shot-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
/* V1.4 round 12: hazed framework screenshot variant. Image stays crisp at
   source — the visual obscurity is applied via CSS blur + a frosted gradient
   overlay + a small corner stamp. */
.tl-stepper__output-shot--image {
  padding: 8px;
  margin: 4px 0 0;
}
.tl-stepper__output-img-wrap {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(123, 63, 160, 0.25);
  background: var(--cream);
  box-shadow: 0 6px 18px rgba(15, 42, 68, 0.10);
}
.tl-stepper__output-img {
  width: 100%;
  height: auto;
  display: block;
  /* Scale up slightly so the blur edges don't expose the unblurred image
     boundary inside the wrapper. */
  transform: scale(1.06);
  filter: blur(3px) saturate(0.85);
}
.tl-stepper__output-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
}
.tl-stepper__output-stamp {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(123, 63, 160, 0.25);
  border-radius: 4px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* V1.5: Iterative loop between phases 03 and 04 — a closed lens around
   the rail. Top arc 03 → 04 (arrowhead lands just above circle 04);
   bottom arc 04 → 03 (arrowhead lands just below circle 03). The marker
   is `position: absolute` over the rail at the midpoint between pills 03
   and 04 — so it consumes no horizontal space and phases 01-04 are
   equally spaced. The label sits centered on the rail line inside the
   lens with a white background that hides the rail line behind it. */
.tl-stepper__marker--iter {
  position: absolute;
  /* Midpoint x (relative to .tl-stepper__rail) between circle 03 center
     and circle 04 center. Derivation: with 7 flex pills + 1 fixed
     `Application Submission` marker (44 px) + 7 gaps (6 px), a pill is
     (W - 86) / 7 wide and circle k center is at (k - 0.5) * (p + 6).
     Midpoint between circles 03 and 04 simplifies to (3W - 153) / 7. */
  left: calc((300% - 153px) / 7);
  /* Rail line vertical position — the rail's ::before pseudo-element
     sits at top: 26px which is the y of the circle centers. */
  top: 26px;
  transform: translate(-50%, -50%);
  /* Width matches the distance between pill 03 and pill 04 centers
     (= (W - 44) / 7), so the arcs land right on the two circles. */
  width: calc((100% - 44px) / 7);
  height: 80px;
  display: block;
  flex: initial;
  color: var(--accent);
  pointer-events: none;
  z-index: 1;
}
.tl-stepper__iter-arc {
  width: 100%;
  height: 100%;
  color: var(--accent);
  margin: 0;
  display: block;
}
.tl-stepper__marker--iter .tl-stepper__marker-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  writing-mode: horizontal-tb;
  border: none;
  /* White background hides the rail line behind the label so the text
     reads cleanly. */
  background: #ffffff;
  color: var(--accent);
  padding: 2px 6px;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  z-index: 2;
}
.tl-stepper__cell {
  border-left: 2px solid var(--accent);
  padding-left: 18px;
}
.tl-stepper__label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
}
.tl-stepper__cell p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.tl-stepper__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-stepper__bullets li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  position: relative;
  padding-left: 18px;
}
.tl-stepper__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1px;
  background: var(--gold);
}
.tl-stepper__empty {
  font-size: 14.5px;
  color: rgba(54, 71, 92, 0.4);
  margin: 0;
}

@media (max-width: 1100px) {
  .tl-stepper__rail { flex-wrap: wrap; row-gap: 18px; column-gap: 6px; }
  .tl-stepper__rail::before { display: none; }
  .tl-stepper__name { font-size: 11.5px; }
}
/* ----- Mobile stepper ----- */
@media (max-width: 700px) {
  .timeline .section-head {
    padding: 0 24px;
    text-align: center;
  }
  .timeline .section-head .eyebrow { justify-content: center; }
  .timeline .section-head h2 {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    line-height: 1.2;
  }
  .tl-stepper { padding: 0 16px; }

  /* Phase rail — 2-row wrap: 4 pills on row 1, 3 pills on row 2 (centered) */
  .tl-stepper__rail {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 14px 8px;
    overflow: visible;
    padding: 4px 4px 16px;
  }
  .tl-stepper__pill {
    flex: 0 0 auto;
    /* (375 viewport - 32 padding - 24 outer rail padding - 3 * 8 gap) / 4
       = 319 / 4 ≈ 76 px keeps four pills on row 1 cleanly */
    width: calc((100% - 24px) / 4);
    max-width: 84px;
  }
  .tl-stepper__name { font-size: 13px; line-height: 1.25; max-width: 100%; }
  .tl-stepper__num { width: 44px; height: 44px; font-size: 16px; }

  /* "Application Submission" vertical marker is desktop-only — too cramped on
     a 375 px phone. Hide on small screens so the rail stays clean. */
  .tl-stepper__marker { display: none; }

  /* Detail panel — tighter padding, vertical stack of cells */
  .tl-stepper__panel { padding: 22px 20px; }
  .tl-stepper__panel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 14px;
  }
  .tl-stepper__phase-num { font-size: 10px; }
  .tl-stepper__phase-name { font-size: 1.4rem; line-height: 1.18; }
  .tl-stepper__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .tl-stepper__cell { padding-left: 14px; }
  .tl-stepper__label { font-size: 9.5px; letter-spacing: 0.2em; margin-bottom: 8px; }
  .tl-stepper__cell p { font-size: 13.5px; line-height: 1.55; }
  .tl-stepper__bullets { gap: 8px; }
  .tl-stepper__bullets li { font-size: 13.5px; line-height: 1.45; padding-left: 14px; }
}

/* ============ FRAMEWORKS (V1.4) ============ */
/* V1.4 round 15 — FULL REVAMP.
   Dark navy section (matches Results section aesthetic). Two cream
   cards side-by-side, each with a giant tonal "01"/"02" numeral
   behind the framework name, a fixed-ratio hazed image at the top,
   and the body copy below. Symmetric layout so the cards read as a
   paired set; no more zig-zag mirror trick. */
.frameworks {
  background: var(--ink);
  color: var(--cream);
  padding: 76px clamp(20px, 6vw, 64px) 80px;
  position: relative;
  overflow: hidden;
}
/* Subtle gold corner-frame motif echoes the Results section's
   editorial corners — signals "this is a curated, premium section." */
.frameworks::before,
.frameworks::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(201, 155, 61, 0.45);
  pointer-events: none;
}
.frameworks::before { top: 40px; right: 40px; border-left: none; border-bottom: none; }
.frameworks::after  { bottom: 40px; left: 40px; border-right: none; border-top: none; }

.frameworks .section-head { margin-bottom: 64px; position: relative; z-index: 1; }
.frameworks .section-head .eyebrow { color: #C99FE5; }
.frameworks .section-head h2 { color: var(--cream); }
.frameworks .section-head h2 .key.purple { color: #C99FE5; }
.frameworks .section-head .lead { color: rgba(242, 237, 227, 0.75); }

/* Symmetric 2-column grid. Single column on tablet and below. */
.frameworks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 36px);
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* The card itself — floating cream panel on the navy section. */
.framework-card {
  position: relative;
  background: var(--cream);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(201, 155, 61, 0.20);
  overflow: hidden;
  /* Gold inner-corner accent on the top-right of each card. */
}
.framework-card::after {
  content: "";
  position: absolute;
  top: 16px; right: 16px;
  width: 28px; height: 28px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  opacity: 0.6;
  pointer-events: none;
}

/* Giant tonal numeral sitting behind the framework label. */
.framework-card__numeral {
  position: absolute;
  top: clamp(12px, 1.5vw, 22px);
  left: clamp(14px, 2vw, 28px);
  font-family: var(--font-display);
  font-size: clamp(96px, 12vw, 168px);
  font-weight: 400;
  line-height: 0.85;
  color: rgba(123, 63, 160, 0.08);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Image cell — fixed 4:3 ratio, all source aspects cropped consistently. */
.framework-card__visual { position: relative; z-index: 1; }
.framework-card__shot--image {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}
.framework-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(123, 63, 160, 0.18);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 42, 68, 0.18);
}
.framework-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.06);
  filter: blur(3px) saturate(0.85);
}
.framework-card__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.10) 100%);
  pointer-events: none;
}
.framework-card__stamp {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(123, 63, 160, 0.22);
  border-radius: 4px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Text column below the image. */
.framework-card__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.framework-card__label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.framework-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}
.framework-card__name .tm {
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 2px;
  color: var(--accent);
}
.framework-card__body p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* In-paragraph highlights — kept from the previous round. */
.fw-hi {
  color: var(--accent);
  font-weight: 600;
}
.fw-hi-strong {
  background: linear-gradient(180deg, transparent 55%, rgba(201, 155, 61, 0.35) 55%);
  padding: 0 4px;
  color: var(--ink);
  font-weight: 700;
}

/* Pending-diagram placeholder (still used if any framework lacks imageSrc). */
.framework-card__shot {
  padding: 28px 18px;
  background: linear-gradient(180deg, rgba(123, 63, 160, 0.05), rgba(201, 155, 61, 0.06));
  border: 1px dashed rgba(123, 63, 160, 0.42);
  border-radius: 10px;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--accent);
  gap: 6px;
}
.framework-card__shot-label {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
  margin-top: 8px;
  max-width: 22ch;
  line-height: 1.25;
}
.framework-card__shot-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Tablet + mobile — stack to single column. */
@media (max-width: 900px) {
  .frameworks { padding: 72px 20px 80px; }
  .frameworks .section-head { margin-bottom: 40px; }
  .frameworks::before { top: 24px; right: 20px; width: 44px; height: 44px; }
  .frameworks::after  { bottom: 24px; left: 20px; width: 44px; height: 44px; }
  .frameworks-grid { grid-template-columns: 1fr; gap: 24px; }
  .framework-card { padding: 24px; gap: 18px; border-radius: 14px; }
  .framework-card__numeral {
    font-size: clamp(72px, 22vw, 120px);
    top: 8px;
    left: 16px;
  }
  .framework-card__name { font-size: 1.4rem; }
  .framework-card__body p { font-size: 14px; line-height: 1.6; }
}

/* ============ FRAMEWORKS — ALT DESIGN (V1.4 round 16) ============ */
/* Light editorial spread, presented as a side-by-side comparison option
   to the primary dark-navy Frameworks section above. Each framework gets
   its own full-width horizontal row: giant gold serif numeral on the
   left, hazed image in the middle, title + body on the right.
   Hairline gold divider between the two spreads. */
.frameworks-alt {
  background: var(--paper);
  color: var(--ink);
  padding: 44px clamp(20px, 6vw, 64px) 76px;
  position: relative;
  overflow: hidden;
}
/* Small "Alt option" preview banner pinned at the top so it's visually
   obvious this is a comparison choice — remove this whole block once the
   user picks a winner. */
.frameworks-alt__banner {
  max-width: 1240px;
  margin: 0 auto 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px dashed rgba(123, 63, 160, 0.4);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  background: rgba(123, 63, 160, 0.04);
  width: max-content;
}
.frameworks-alt__banner::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.frameworks-alt .section-head {
  max-width: 880px;
  margin: 0 auto 56px;
  text-align: center;
}
.frameworks-alt .section-head .eyebrow {
  justify-content: center;
  color: var(--gold);
}
.frameworks-alt .section-head h2 .key.gold { color: var(--gold); }

/* The spreads container — two full-width horizontal rows stacked. */
.fw-alt-spreads {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.fw-spread {
  position: relative;
  display: grid;
  /* numeral · image · text */
  grid-template-columns: clamp(80px, 10vw, 140px) minmax(280px, 1.05fr) 1.4fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(201, 155, 61, 0.35);
}
.fw-spread:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/* Decorative gold dot at the centre of the divider line. */
.fw-spread:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--paper);
}

/* Giant gold numeral on the left. */
.fw-spread__numeral {
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 140px);
  font-weight: 400;
  line-height: 0.85;
  color: var(--gold);
  letter-spacing: -0.03em;
  text-align: center;
  user-select: none;
}

/* Image cell — fixed 4:3, hazed treatment matching the primary design. */
.fw-spread__visual { position: relative; }
.fw-spread__img-wrap {
  position: relative;
  width: 100%;
  /* Wider frame (16:10) accommodates both source images well — the wide
     story-arc PNG (16:9) almost fills it edge-to-edge, and the squarer 5C
     summary PNG (~1:1) sits with small side bands. object-fit: contain
     guarantees nothing is cropped. */
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(123, 63, 160, 0.18);
  background: var(--cream);
  box-shadow: 0 12px 30px rgba(15, 42, 68, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.fw-spread__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: blur(3px) saturate(0.85);
}
.fw-spread__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.10) 100%);
  pointer-events: none;
}
.fw-spread__stamp {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(123, 63, 160, 0.22);
  border-radius: 4px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Right text column — large display title + body. */
.fw-spread__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fw-spread__label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.fw-spread__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
}
.fw-spread__name .tm {
  font-size: 0.45em;
  vertical-align: super;
  margin-left: 2px;
  color: var(--accent);
}
.fw-spread__body p {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* Tablet — drop the numeral inline above the image. */
@media (max-width: 1024px) {
  .fw-spread {
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(20px, 3vw, 36px);
  }
  .fw-spread__numeral {
    position: absolute;
    top: -4px;
    left: 0;
    font-size: clamp(64px, 9vw, 96px);
    color: rgba(201, 155, 61, 0.5);
  }
  .fw-spread__visual { grid-column: 1; padding-top: 28px; }
  .fw-spread__text   { grid-column: 2; }
}

/* Mobile — full stack: numeral on top, image, text. */
@media (max-width: 700px) {
  .frameworks-alt { padding: 48px 20px 72px; }
  .frameworks-alt .section-head { margin-bottom: 36px; }
  .fw-alt-spreads { gap: 40px; }
  .fw-spread {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 40px;
    text-align: center;
  }
  .fw-spread__numeral {
    position: relative;
    top: auto;
    left: auto;
    font-size: 72px;
    color: var(--gold);
    grid-column: 1;
    grid-row: 1;
  }
  .fw-spread__visual { grid-column: 1; grid-row: 2; padding-top: 0; }
  .fw-spread__text { grid-column: 1; grid-row: 3; align-items: center; }
  .fw-spread__name { max-width: 100%; font-size: 1.5rem; }
  .fw-spread__body p { font-size: 14.5px; max-width: 100%; }
}

/* ============ LOGO WALL ============ */
.logos { background: #ffffff; border-top: var(--hairline); border-bottom: var(--hairline); position: relative; overflow: hidden; }
/* Decorative gold corner-frame motif on the wall */
.logos::before, .logos::after {
  content: ""; position: absolute; width: 56px; height: 56px;
  border: 1px solid rgba(201, 155, 61, 0.45); pointer-events: none;
}
.logos::before { top: 32px; right: 32px; border-left: none; border-bottom: none; }
.logos::after  { bottom: 32px; left: 32px; border-right: none; border-top: none; }
/* Two opposite-direction infinite marquees */
.logo-marquee {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 16px 0 24px;
  /* Soft fade at the edges so logos enter/exit gracefully */
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee__row {
  position: relative;
  overflow: hidden;
}
.logo-marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  align-items: center;
  will-change: transform;
}
.logo-marquee__row--right .logo-marquee__track { animation: logoScrollRight 48s linear infinite; }
.logo-marquee__row--left  .logo-marquee__track { animation: logoScrollLeft 52s linear infinite; }
.logo-marquee__row--slow.logo-marquee__row--right .logo-marquee__track { animation-duration: 64s; }
.logo-marquee__row--slow.logo-marquee__row--left  .logo-marquee__track { animation-duration: 68s; }
.logo-marquee__row:hover .logo-marquee__track { animation-play-state: paused; }
@keyframes logoScrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes logoScrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; transform: translateX(-25%); }
}

.logo-tile {
  flex: 0 0 auto;
  display: grid; place-items: center;
  padding: 8px 4px;
  min-width: 140px;
  height: 72px;
  transition: filter .3s ease, transform .3s ease;
}
.logo-tile img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.4) opacity(0.78);
  transition: filter .3s ease;
}
.logo-tile:hover img { filter: grayscale(0) opacity(1); }
@media (max-width: 700px) {
  .logo-marquee { gap: 22px; padding: 8px 0 16px; }
  .logo-marquee__track { gap: 36px; }
  .logo-tile { min-width: 110px; height: 56px; padding: 6px 2px; }
  .logo-tile img { max-height: 40px; }
}

/* Backward-compat for any old text-based tiles still in the page (none after this rebuild) */
.logo-tile .school-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.05;
  display: block;
}
.logo-tier.lower .logo-tile .school-name { font-size: 13px; font-weight: 400; }
.logo-tile .school-sub {
  display: block;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.logo-tier.lower .logo-tile .school-sub { font-size: 9.5px; margin-top: 4px; }

/* ============ SERVICES / PRICING ============ */
.services { background: #ffffff; }
/* === Services V1 redesign: hero image strip + decorative divider + panel === */
.services { padding: 0 0 clamp(44px, 5vw, 64px); }
.services-hero {
  position: relative;
  min-height: clamp(280px, 36vw, 420px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: var(--hairline);
}
.services-hero__bg { position: absolute; inset: 0; z-index: 0; }
.services-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.9);
}
.services-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(15, 42, 68, 0.75) 0%,
      rgba(15, 42, 68, 0.58) 50%,
      rgba(15, 42, 68, 0.82) 100%);
}
.services-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: clamp(40px, 5vw, 68px) 32px;
}
.services-hero__inner .eyebrow {
  color: #C99FE5;
  display: inline-block;
  margin-bottom: 18px;
}
.services-hero__inner h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 18px;
}
.services-hero__inner h2 .key.purple { color: #C99FE5; }
.services-hero__inner .lead {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: rgba(242, 237, 227, 0.88);
  margin: 0 auto;
  max-width: 64ch;
}

/* Decorative divider between hero and cards */
.services-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 380px;
  margin: 36px auto 24px;
  color: var(--accent);
}
.services-divider__line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(123, 63, 160, 0.45) 50%, transparent 100%);
}
.services-divider svg { opacity: 0.7; }

/* Soft cream panel that anchors the card grid */
.pkg-panel {
  background: linear-gradient(180deg, var(--paper) 0%, #F6EFE3 100%);
  border-top: 1px solid rgba(15, 42, 68, 0.06);
  border-bottom: 1px solid rgba(15, 42, 68, 0.06);
  padding: clamp(28px, 3vw, 44px) 0;
  margin: 0 auto;
}

.pkg-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  align-items: start;
}
.pkg {
  background: var(--paper);
  border-radius: var(--radius-card);
  border: 1px solid rgba(15, 42, 68, 0.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pkg:hover { transform: translateY(-6px); box-shadow: var(--shadow-1); }
.pkg .band { height: 6px; }
.pkg .body { padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.pkg .pkg-eyebrow {
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 400;
}
.pkg.emerald .pkg-eyebrow { color: var(--emerald); }
.pkg.platinum .pkg-eyebrow { color: var(--silver); }
.pkg.gold .pkg-eyebrow { color: var(--gold); }
.pkg h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  color: var(--ink);
  line-height: 1.05;
}
.pkg .schools-select {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pkg .school-pill {
  padding: 5px 11px;
  border: 1px solid rgba(15, 42, 68, 0.15);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s ease;
}
.pkg .school-pill.active {
  border-color: var(--ink); background: var(--ink); color: var(--cream);
}
.pkg .school-pill:not(.active):hover { border-color: var(--ink); }
.pkg ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pkg li { font-size: 13.5px; color: var(--ink-soft); padding-left: 22px; position: relative; line-height: 1.45; }
.pkg li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 6px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.pkg .pkg-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; margin-top: auto;
  border-top: 1px solid rgba(15, 42, 68, 0.08);
}
.pkg .quote {
  font-family: var(--font-serif); font-style: normal; color: var(--muted); font-size: 13px;
}

/* ============ V1 redesigned package cards (.pkg--full) ============
   Full inclusion list lives inside each card. The Emerald card is highlighted
   as the "Recommended" tier with a floating pill badge and a green accent. */
.pkg--full {
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pkg--full .body {
  padding: 32px 28px 28px;
  gap: 14px;
}
.pkg--full.is-featured {
  border-color: var(--emerald, #0F6B5A);
  box-shadow: 0 18px 36px rgba(15, 107, 90, 0.18);
  transform: translateY(-4px);
}
.pkg--full.is-featured:hover { transform: translateY(-10px); }
/* Badge sits INSIDE the card, anchored to the top-right corner just below the
   band. Card stays overflow:hidden so the green top band keeps its rounded
   corners — the badge no longer gets clipped because it's now inside. */
.pkg-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--emerald, #0F6B5A);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(15, 107, 90, 0.35);
}
.pkg--full h3 { font-size: 28px; margin-bottom: 2px; }
.pkg-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.schools-wrap { margin-top: 4px; }
.schools-label {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.pkg--full .schools-select { gap: 6px; }
.pkg--full .school-pill {
  min-width: 36px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-sans);
}

/* Category groups — 4 named sections inside each card. Each has a small purple
   icon chip + title header, then a sub-list of inclusion rows. */
.pkg-cats {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 6px;
}
.pkg-cat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(123, 63, 160, 0.18);
}
.pkg-cat__chip {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(123, 63, 160, 0.12);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pkg-cat__title {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
/* Tier-specific accent on category headers (Emerald = sage; Platinum = silver; Gold = gold) */
.pkg.emerald  .pkg-cat__chip  { background: rgba(15, 107, 90, 0.12);  color: var(--emerald, #0F6B5A); }
.pkg.emerald  .pkg-cat__title { color: var(--emerald, #0F6B5A); }
.pkg.emerald  .pkg-cat__head  { border-bottom-color: rgba(15, 107, 90, 0.22); }
.pkg.platinum .pkg-cat__chip  { background: rgba(154, 163, 173, 0.18); color: #5b6470; }
.pkg.platinum .pkg-cat__title { color: #5b6470; }
.pkg.platinum .pkg-cat__head  { border-bottom-color: rgba(154, 163, 173, 0.30); }
.pkg.gold     .pkg-cat__chip  { background: rgba(201, 155, 61, 0.18); color: var(--gold); }
.pkg.gold     .pkg-cat__title { color: #8f6f24; }
.pkg.gold     .pkg-cat__head  { border-bottom-color: rgba(201, 155, 61, 0.30); }

/* Feature list — one row per inclusion, ✓ included / ✗ not included, optional
   qualifier pill (Limited / Moderate / Full / Unlimited). */
.pkg-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pkg-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  line-height: 1.4;
  /* override the default .pkg li ::before checkmark — we use our own SVG icon */
  padding-left: 0 !important;
}
.pkg-feat::before { display: none !important; }
.pkg-feat__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-top: 1px;
}
.pkg-feat.is-on  .pkg-feat__icon {
  background: rgba(15, 107, 90, 0.12);
  color: var(--emerald, #0F6B5A);
}
.pkg-feat.is-off .pkg-feat__icon {
  background: rgba(15, 42, 68, 0.06);
  color: rgba(15, 42, 68, 0.35);
}
.pkg-feat__label {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.pkg-feat.is-off .pkg-feat__label {
  color: rgba(15, 42, 68, 0.42);
  text-decoration: line-through;
  text-decoration-color: rgba(15, 42, 68, 0.25);
  text-decoration-thickness: 1px;
}
.pkg-feat__tag {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  background: rgba(123, 63, 160, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Tier-specific accent on the featured tag (so Emerald's qualifiers feel premium) */
.pkg.emerald .pkg-feat__tag { color: var(--emerald, #0F6B5A); background: rgba(15, 107, 90, 0.10); }

.pkg--full .pkg-foot {
  border-top: 1px solid rgba(15, 42, 68, 0.10);
  padding-top: 18px;
  margin-top: 18px;
  justify-content: center;
}
.pkg--full .pkg-foot .btn { width: 100%; }
.btn-sm {
  font-size: 12.5px;
  padding: 8px 16px;
}
.btn-ghost-ink {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(15, 42, 68, 0.25);
}
.btn-ghost-ink:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Mobile: stack cards single-column, slight tweaks for compactness */
@media (max-width: 900px) {
  .pkg-grid { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; }
  .pkg--full.is-featured { transform: none; }
  .pkg--full.is-featured:hover { transform: translateY(-4px); }
  .pkg--full .body { padding: 28px 22px 24px; }
  .pkg--full h3 { font-size: 26px; }
}

/* V1.4 (round 11): sticky package heading on mobile.
   While scrolling through a single package card, the package name
   ("Emerald" / "Platinum" / "Gold") stays pinned just below the sticky nav
   until the user scrolls past that card — then the next card's heading
   takes over.

   IMPORTANT: position: sticky FAILS inside an ancestor that has
   `overflow: hidden` OR a `transform` (the featured Emerald card has
   `transform: translateY(-4px)` baked in for visual lift). Both of those
   create a new containing block that traps sticky. So on mobile we:
     • set .pkg overflow: visible (the rounded corners still come from the
       border-radius on the .pkg itself, just not clipped by overflow)
     • kill the featured-card transform (we don't need the desktop lift
       on a single-column mobile stack anyway)
   Then sticky can stick to the viewport scroll. */
@media (max-width: 900px) {
  /* Disable overflow:hidden on the card and any baked-in transforms so
     sticky has a clean containing-block chain up to the body/page. */
  .pkg,
  .pkg--full {
    overflow: visible;
  }
  .pkg--full.is-featured {
    transform: none;
  }
  .pkg--full .body {
    overflow: visible;
  }
  .pkg--full h3 {
    position: sticky;
    top: 78px;
    z-index: 5;
    background: var(--paper);
    /* align-self:stretch + width:auto so the flex item doesn't shrink-wrap;
       a sticky flex item with shrink-to-fit width can refuse to stick. */
    align-self: stretch;
    width: auto;
    /* Bleed full-width past the body's horizontal padding so the sticky bar
       reads as a strip across the whole card, not a floating word. */
    margin: 0 -22px;
    padding: 14px 22px 12px;
    border-bottom: 1px solid rgba(15, 42, 68, 0.08);
    box-shadow: 0 4px 12px rgba(15, 42, 68, 0.06);
  }
  /* Featured (Emerald) card has a cream tint — match its sticky bar bg to
     that tint so the header doesn't suddenly become paper when it sticks. */
  .pkg--full.is-featured h3 {
    background: var(--cream);
  }
}

.pkg-secondary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: var(--container); margin: 32px auto 0; padding: 0 32px;
}
.pkg-sec-tile {
  background: var(--paper);
  border-radius: 8px;
  border: 1px solid rgba(15, 42, 68, 0.08);
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  transition: all .25s ease;
}
.pkg-sec-tile:hover {
  border-color: var(--gold); transform: translateY(-2px);
}
.pkg-sec-tile .arrow { color: var(--gold); transition: transform .25s ease; }
.pkg-sec-tile:hover .arrow { transform: translateX(4px); }

/* ============ FOUNDERS DETAIL ============ */
.founders { background: #ffffff; border-top: var(--hairline); }
.founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.founder-card {
  background: var(--paper);
  padding: 32px;
  border-radius: var(--radius-card);
  position: relative;
}
.founder-card::before, .founder-card::after {
  content: ""; position: absolute;
  width: 28px; height: 28px;
  border: 1px solid var(--gold);
}
.founder-card::before {
  top: 16px; right: 16px;
  border-left: none; border-bottom: none;
}
.founder-card::after {
  bottom: 16px; left: 16px;
  border-right: none; border-top: none;
}
.founder-portrait {
  aspect-ratio: 4 / 5;
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a486a 0%, #1c3552 100%);
  display: grid; place-items: center;
  color: var(--cream);
  position: relative;
}
.founder-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.founder-card .name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 4px;
  white-space: nowrap;
}
.founder-card .role-line {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}
.founder-card .school-line {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.founder-card .year-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.founder-video {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #1c3552 0%, #0F2A44 100%);
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border: 1px dashed rgba(123, 63, 160, 0.45);
}
.founder-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-video__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(242, 237, 227, 0.78);
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.founder-video__placeholder svg {
  color: var(--accent);
  opacity: 0.85;
}
.founder-highlights {
  display: flex; flex-direction: column; gap: 18px;
}
.founder-highlight {
  border-left: 2px solid rgba(201, 155, 61, 0.6);
  padding-left: 14px;
}
.founder-highlight__title {
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--gold);
  line-height: 1.3;
  margin-bottom: 6px;
}
.founder-highlight__body {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* Mentors */
.mentors-head {
  text-align: center;
  max-width: var(--container);
  margin: 96px auto 48px;
  padding: 0 32px;
}
.mentors-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-style: normal;
  color: var(--ink); font-weight: 400;
  margin-bottom: 8px;
}
.mentors-head p { font-family: var(--font-serif); font-style: normal; color: var(--ink-soft); }
.mentors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.mentor-tile {
  background: var(--paper);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(15, 42, 68, 0.06);
  transition: transform .25s ease;
}
.mentor-tile:hover { transform: translateY(-3px); }
.mentor-pic {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #2a486a 0%, #1c3552 100%);
  position: relative;
  color: var(--cream); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 32px;
}
.mentor-pic .school-badge {
  position: absolute; bottom: 10px; left: 10px;
  background: var(--paper); color: var(--ink);
  font-size: 10px; padding: 4px 10px; border-radius: 4px;
  font-family: var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 400;
}
.mentor-info { padding: 16px 18px 20px; }
.mentor-info .name { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.mentor-info .spec { font-size: 12px; color: var(--muted); margin-top: 4px; font-style: normal; font-family: var(--font-serif); }
/* V1: logo-prominent variant (legacy). */
.mentor-tile--logo .mentor-tile__logo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #f6f0e2 0%, #ece4d2 100%);
  display: grid; place-items: center;
  padding: 18px;
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}
.mentor-tile--logo .mentor-tile__logo img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.mentor-tile--logo .mentor-info { padding: 14px 16px 18px; }
.mentor-tile--logo .mentor-info .school {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
  margin-bottom: 8px;
}
.mentor-tile--logo .mentor-info .bio {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* V1: redesigned --v2 variant for the about-page mentor grid. */
.mentor-tile--v2 .mentor-tile__logo {
  aspect-ratio: 4 / 3;
  background: #ffffff;
  display: grid; place-items: center;
  padding: 18px;
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}
.mentor-tile--v2 .mentor-tile__logo img {
  max-width: 78%;
  max-height: 72%;
  object-fit: contain;
}
.mentor-tile--v2 .mentor-info {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mentor-tile__num {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.mentor-tile--v2 .mentor-info .school {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin: 2px 0 12px;
}
.mentor-tile__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.mentor-tile__field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15, 42, 68, 0.12);
}
.mentor-tile__field:first-child {
  padding-top: 0;
  border-top: none;
}
.mentor-tile__field dt {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted, var(--ink-soft));
  margin: 0;
}
.mentor-tile__field dd {
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

/* ============ RESULTS ============ */
.results { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; }
.results::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 30% 50%, rgba(123, 63, 160, 0.18) 0%, transparent 50%),
                    radial-gradient(circle at 70% 50%, rgba(201, 155, 61, 0.12) 0%, transparent 50%);
}
.results .container { position: relative; z-index: 2; }
.results .section-head h2 { color: var(--cream); }
.results .section-head .eyebrow { color: #C99FE5; }
.results .section-head .lead { color: rgba(242, 237, 227, 0.7); }
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 80px;
}
.stat {
  text-align: center;
  padding: 0 24px;
  position: relative;
}
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px;
  background: rgba(201, 155, 61, 0.3);
}
.stat .big {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat .label {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--cream);
  font-size: 17px;
}
.stat .sub {
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(201, 155, 61, 0.7); margin-top: 8px;
}
.map-wrap {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.map-wrap svg { width: 100%; height: auto; }
.map-caption {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-style: normal;
  color: rgba(242, 237, 227, 0.7);
  font-size: 14.5px;
}

/* ============ PRESS ============ */
.press { background: #ffffff; }
.press-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.press-card {
  background: var(--paper);
  border: 1px solid rgba(201, 155, 61, 0.4);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s ease, border-color .25s ease;
}
.press-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.press-card .pub {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.press-card .date {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.press-card h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  font-style: normal;
}
.press-card .read { margin-top: auto; padding-top: 12px; }

/* ============ FINAL CTA ============ */
.final-cta {
  background: var(--ink);
  position: relative; overflow: hidden;
  color: var(--cream);
  text-align: center;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'><path d='M20 80 Q50 20 100 50 T 180 30' stroke='%23C99B3D' stroke-width='0.5' fill='none' opacity='0.4'/></svg>");
  background-size: 480px;
  background-repeat: repeat;
  opacity: 0.06;
}
.final-cta .container { position: relative; z-index: 2; max-width: 820px; }
.final-cta .laurel {
  width: 200px; height: auto;
  opacity: 0.16;
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 0;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 20px;
  position: relative; z-index: 2;
}
.final-cta h2 .key { color: var(--gold); font-style: normal; }
.final-cta p {
  font-family: var(--font-serif); font-style: normal;
  font-size: 18px;
  color: rgba(242, 237, 227, 0.78);
  margin-bottom: 36px;
  position: relative; z-index: 2;
}
.final-cta .ctas {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  position: relative; z-index: 2;
}

/* ============ FOOTER ============ */
/* V1.5: footer now uses the same cream background as the top nav so the
   page top and page foot read as a single brand surface. All text colours
   were dark-bg cream-translucent before — now switched to ink/ink-soft
   variants for legibility on cream. */
.footer {
  background: var(--cream);
  color: var(--ink-soft);
  padding-top: 56px;
  border-top: 1px solid rgba(15, 42, 68, 0.08);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px 56px;
}
.footer-brand .footer-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.footer-brand .footer-logo .mark { width: 44px; height: 44px; }
.footer-brand .wordmark {
  font-family: var(--font-display); font-size: 24px;
  font-weight: 400; letter-spacing: 0.04em;
  color: var(--ink);
}
.footer-brand .wordmark .listic { color: var(--gold); }
.footer-brand .tag {
  font-family: var(--font-serif); font-style: normal;
  color: var(--accent);
  font-size: 14px;
  margin-bottom: 24px;
}
/* Horizontal lockup variant in the footer — replaces the inline cap + text */
.footer-logo--lockup img {
  height: 84px;
  width: auto;
  display: block;
}
@media (max-width: 700px) {
  .footer-logo--lockup img { height: 64px; }
}
.footer-brand .reg {
  font-size: 12px; color: var(--muted);
  line-height: 1.6; max-width: 36ch;
}
.footer-col h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* V1.5: recoloured from gold to purple (--accent) to match the page's
     purple accent system on the new cream footer background. */
  color: var(--accent);
  font-weight: 400;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--accent); }
.footer-rule {
  max-width: var(--container); margin: 0 auto;
  border-top: 1px solid rgba(15, 42, 68, 0.08);
  padding: 0 32px;
}
.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 32px 36px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 24px;
  font-size: 12px;
  color: var(--muted);
}
.footer-social {
  display: flex; gap: 16px; align-items: center;
}
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(15, 42, 68, 0.18);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-soft);
  transition: all .25s ease;
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }
.footer-bottom .legal { display: flex; gap: 18px; }
.footer-bottom .legal a { color: var(--muted); transition: color .2s ease; }
.footer-bottom .legal a:hover { color: var(--accent); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .nav-links { gap: 22px; font-size: 13.5px; }
  /* V1-2: 6 cards in 3×2 — same as desktop. The old nth-child(4)/(5)
     grid-column overrides existed to balance the orphan row when there were
     only 5 cards, and are no longer needed. */
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline-track { grid-template-columns: repeat(3, 1fr); }
  .timeline-track::before { display: none; }
  .timeline-step { padding-bottom: 32px; }
  .logo-tier { grid-template-columns: repeat(3, 1fr); }
  .logo-tier.lower { grid-template-columns: repeat(4, 1fr); }
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg-secondary { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: 1fr; gap: 48px; }
  .stat + .stat::before { display: none; }
  .press-grid { grid-template-columns: 1fr; }
  .mentors-grid { grid-template-columns: repeat(2, 1fr); }
  .founders-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nav-links { display: none; }
  .usp-grid { grid-template-columns: 1fr; }
  .timeline-track { grid-template-columns: 1fr; }
  .timeline-step { border-left: 1px solid rgba(201, 155, 61, 0.3); padding-left: 24px; }
  .trust-inner { justify-content: center; }
  .pkg-secondary { grid-template-columns: 1fr; }
  .mentors-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .hero { padding: 60px 0 120px; }
  .floating-cta { right: 16px; bottom: 16px; }
  .founders-strip .inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============ MOBILE TYPOGRAPHY + LAYOUT POLISH ============ */
@media (max-width: 600px) {
  /* Hero — full-width content on every slide (kill the desktop globe-column reservation) */
  .hero-content,
  .hero-content[data-slide-idx="0"],
  .hero-content[data-slide-idx="1"],
  .hero-content[data-slide-idx="2"] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero h1,
  .hero-content[data-slide-idx="0"] h1,
  .hero-content[data-slide-idx="1"] h1,
  .hero-content[data-slide-idx="2"] h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.12; max-width: 100%; }
  .hero-sub { font-size: 1rem; line-height: 1.55; }
  .hero-eyebrow { font-size: 13px; letter-spacing: 0.18em; }
  .hero-content {
    padding: 0 24px;
    /* Nudge content up on mobile so the bottom CTA doesn't collide with the bl corner frame */
    top: 46%;
    transform: translateY(-50%);
  }
  .hero-ctas { flex-wrap: wrap; gap: 12px; }
  .hero-ctas .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 14px; }
  .hero { padding: 70px 0 80px; min-height: 88vh; }
  .hero-dots { bottom: 14px; }
  /* Smaller corner frames on mobile + push them out of button territory */
  .hero .frame-corner { width: 56px; height: 56px; }
  .hero .frame-corner.tr { top: 56px; right: 16px; }
  .hero .frame-corner.bl { bottom: 56px; left: 16px; }

  /* Founders strip — tighter heading + tile rhythm */
  .founders-strip h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .founders-strip .fs-head { margin-bottom: 32px; padding: 0 24px; }
  /* V1.4 (round 10): wider tile + label so "INSEAD, FONTAINEBLEAU, FRANCE"
     and "UT AUSTIN · MCCOMBS" fit on one or two lines instead of bleeding
     into the adjacent tile when the row was still wrapping. */
  .fs-tile { width: 180px; }
  .fs-pic { width: 132px; height: 132px; padding: 5px; }
  .fs-cap .name { font-size: 17px; }
  .fs-cap .school { font-size: 9.5px; letter-spacing: 0.14em; }
  /* Note: the .fs-founders-row gap is set to 36px under the
     @media (max-width: 600px) block earlier in this file; keep that
     rule (don't override here) so the single-column stack reads cleanly. */

  /* USP — tighter padding, larger icons stay */
  .usp { padding: 64px 0; }
  .usp .section-head { padding: 0 24px; }
  .usp-grid { padding: 0 24px; gap: 18px; }
  .usp-card { padding: 24px 22px; }

  /* Timeline — single column, vertical line stays */
  .timeline { padding: 64px 0; }
  .timeline .section-head { padding: 0 24px; }
  .timeline-track { padding: 0 24px; gap: 24px; }

  /* Logo wall — tighter grid */
  .logos { padding: 64px 0; }
  .logos .section-head { padding: 0 24px; }
  .logo-tier { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; padding: 0 24px; }
  .logo-tier.lower { grid-template-columns: repeat(3, 1fr) !important; gap: 14px; }

  /* Mentor showcase */
  .mentor-showcase { padding: 64px 0; }
  .mentor-showcase .section-head { padding: 0 24px; }
  .mentor-showcase .mentors-grid { padding: 0 24px; gap: 18px; }

  /* Press / Final CTA — comfortable spacing */
  .press { padding: 56px 0; }
  .press .section-head { padding: 0 24px; }
  .press-grid { padding: 0 24px; }
  .final-cta { padding: 64px 24px; }
  .final-cta h2 { font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important; }

  /* Footer — comfortable spacing on a single column */
  .footer-cols { padding: 0 24px; gap: 32px; }
  .footer-bottom { padding: 0 24px; flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom .legal { flex-wrap: wrap; justify-content: center; }

  /* Announce strip — tighter on mobile */
  .announce { font-size: 12px; padding: 9px 36px 9px 16px; }
  .announce .arrow { display: inline; }

  /* Floating CTA hidden on mobile — sticky mobile bar would be better, but at least dont' overlap content */
  .floating-cta { font-size: 12px; padding: 11px 16px 11px 14px; }
}

/* Avoid horizontal overflow on very small screens */
html, body { overflow-x: clip; }
body { max-width: 100vw; }