/* Ivylistic — Page-specific styles (Services, About, Resources) */

/* ============ Current-page indicator in nav ============ */
.nav-item.current button, .nav-item.current .nav-item__title {
  color: var(--accent);
}
.nav-item.current::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

/* ============ PAGE HERO (smaller dark hero for non-homepage pages) ============ */
.page-hero {
  background: var(--ink);
  position: relative;
  padding: clamp(64px, 10vw, 112px) 0 clamp(52px, 8vw, 92px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 25% 30%, rgba(123, 63, 160, 0.25) 0%, transparent 50%),
                    radial-gradient(circle at 75% 70%, rgba(201, 155, 61, 0.12) 0%, transparent 50%);
  z-index: 0;
}
/* Optional image background variant — used for the Services page hero (V1) */
.page-hero--with-image::before { display: none; }
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.page-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  filter: saturate(0.85);
}
.page-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(15, 42, 68, 0.78) 0%,
      rgba(15, 42, 68, 0.55) 50%,
      rgba(15, 42, 68, 0.78) 100%);
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.page-hero .hero-eyebrow { color: #C99FE5; margin-bottom: 24px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  line-height: 1.05;
  color: var(--cream);
  max-width: 22ch;
  margin-bottom: 24px;
}
.page-hero h1 .key.purple { color: #C99FE5; font-style: normal; }
.page-hero h1 .key.gold { color: var(--gold); font-style: normal; }
.page-hero-sub {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: rgba(242, 237, 227, 0.78);
  max-width: 56ch;
}
.page-hero .frame-corner {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1px solid var(--gold);
  z-index: 1;
  pointer-events: none;
}
.page-hero .frame-corner.tr { top: 48px; right: 48px; border-left: none; border-bottom: none; }
.page-hero .frame-corner.bl { bottom: 48px; left: 48px; border-right: none; border-top: none; }
body.no-frames .page-hero .frame-corner { display: none; }

/* ============ HOMEPAGE — MENTOR NETWORK (V1 redesigned 2-col grid) ============
   V1 client wanted a lighter section here so it breaks up the dark
   FoundersStrip (above) and FinalCTA (below). Cream/paper bg, no library
   backdrop, white cards still pop via the purple left accent + soft border. */
.mentor-network,
.mentor-showcase {
  position: relative;
  background: var(--paper);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding: clamp(48px, 5vw, 80px) 0 clamp(44px, 5vw, 64px);
  overflow: hidden;
}
/* Backdrop + overlay are no longer used on the light variant — kept defined for
   any cached page that still references the classes. */
.mentor-network__bg,
.mentor-showcase__bg {
  display: none;
}
.mentor-network__overlay {
  display: none;
}
.mentor-network__inner {
  position: relative;
  z-index: 2;
}
.mentor-network .section-head--light {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 0 32px;
}
.mentor-network .section-head--light h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 14px;
}
.mentor-network .section-head--light .lead {
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

/* Card grid */
.mn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.mn-grid--on-light {
  /* About-page variant — sits on a light section, no overlay/backdrop */
  margin-top: 24px;
}
@media (max-width: 720px) {
  .mn-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 14px; }
}

/* Individual card */
.mn-card {
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  padding: 22px 26px 20px 30px;
  border: 1px solid rgba(15, 42, 68, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.mn-card::before {
  /* Purple left accent strip */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--accent);
}
.mn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}
/* V1.4 (round 2): simplified mentor card — just a bold title and a description
   with selected bold spans for admit-list school names. No "Mentor 01", no
   "Class of" badge, no logo footer.
   NOTE: the global `* { font-synthesis: none }` in tokens.css normally blocks
   fake-bold across the site (because IvyPresto only ships a Regular weight).
   The mentor card needs real bold per client direction, so we explicitly
   re-enable weight synthesis on the title + <strong> tags here. The browser
   will draw a synthesised bold from the Regular face. */
.mn-card__title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  font-synthesis: weight;
  -webkit-font-synthesis: weight;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 10px;
}
.mn-card__desc {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.mn-card__desc strong {
  font-weight: 700;
  font-synthesis: weight;
  -webkit-font-synthesis: weight;
  color: var(--ink);
}
/* V1.6: descriptions that span multiple paragraphs (e.g. the Rotman card)
   render each paragraph as a span — add a small vertical gap between them. */
.mn-card__para { display: block; }
.mn-card__para + .mn-card__para { margin-top: 10px; }

/* V1.6: Mentor slider position indicator — minimal pill-dots below the
   grid. Auto-scrolls every 6 s (paused on hover). Only renders when
   the mentor list overflows MENTOR_PAGE_SIZE (6) so the design stays
   unchanged for sites with ≤ 6 mentors. */
.mn-slider-dots {
  margin: 28px auto 0;
  max-width: var(--container);
}
/* V1.6 (round 3): minimal dot indicator. Auto-scrolls every 6 s (paused
   on hover); the dots just show position and let visitors jump to a
   specific page if they want to. No arrows, no counter — kept simple. */
.mn-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 32px;
}
.mn-slider-dots__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(201, 155, 61, 0.6);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, width .25s ease;
}
.mn-slider-dots__dot:hover { border-color: var(--gold); background: rgba(201, 155, 61, 0.25); }
.mn-slider-dots__dot.is-active {
  background: var(--gold);
  border-color: var(--gold);
  /* Active dot stretches into a small pill so it reads as "where you
     are now" without being heavy. */
  width: 28px;
  border-radius: 999px;
}
.mn-slider-dots__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Subtle fade so slide transitions don't feel jarring. The grid is
   re-mounted via `key={page}` so this fires on every page change. */
.mn-grid { animation: ivy-mn-fade .35s ease-out both; }
@keyframes ivy-mn-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .mn-slider-dots { padding: 0 20px; margin-top: 22px; gap: 10px; }
  .mn-slider-dots__dot { width: 9px; height: 9px; }
  .mn-slider-dots__dot.is-active { width: 24px; }
}

/* Legacy .mentor-showcase rules retained for any cached references; the class is
   no longer rendered after the V1 redesign. */
.mentor-showcase__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.85);
}
.mentor-showcase__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(15, 42, 68, 0.82) 0%,
      rgba(15, 42, 68, 0.70) 35%,
      rgba(15, 42, 68, 0.78) 65%,
      rgba(15, 42, 68, 0.92) 100%);
}
.mentor-showcase__inner {
  position: relative;
  z-index: 2;
}
.mentor-showcase .section-head--light {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 0 32px;
}
.mentor-showcase .section-head--light .eyebrow,
.mentor-showcase .section-head--light .eyebrow--gold { color: var(--gold); }
.mentor-showcase .section-head--light h2 {
  color: var(--cream);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  margin: 14px 0 16px;
}
.mentor-showcase .section-head--light h2 .key.gold { color: var(--gold); font-style: normal; }
.mentor-showcase .section-head--light .lead {
  color: rgba(242, 237, 227, 0.82);
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 18px;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 auto;
}
.mentor-showcase .cta-row { text-align: center; margin-top: 40px; }
.mentor-showcase .gold-link--light { color: var(--gold); }
.mentor-showcase .gold-link--light:hover { color: var(--cream); }

/* Carousel — horizontal scroll track + arrow nav */
.mentor-carousel {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
}
.mentor-carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 28px;
  scroll-padding-left: 4px;
}
.mentor-carousel__track::-webkit-scrollbar { display: none; }

.mentor-carousel__nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(201, 155, 61, 0.5);
  border-radius: 50%;
  z-index: 3;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.mentor-carousel__nav:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.06);
}
.mentor-carousel__nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mentor-carousel__nav--prev { left: 4px; }
.mentor-carousel__nav--next { right: 4px; }

/* Mentor card — large portrait, school chip + info overlaid on a gold-edged frame */
.mentor-card {
  flex: 0 0 auto;
  width: clamp(240px, 25vw, 300px);
  scroll-snap-align: start;
  background: var(--paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(201, 155, 61, 0.18);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mentor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.45);
  border-color: rgba(201, 155, 61, 0.55);
}
.mentor-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, #2a486a 0%, #1c3552 100%);
}
.mentor-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
  transition: transform .6s ease;
}
.mentor-card:hover .mentor-card__photo img { transform: scale(1.05); }
.mentor-card__photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 42, 68, 0.70) 100%);
  pointer-events: none;
}
.mentor-card__logo {
  position: absolute;
  bottom: 12px; left: 12px;
  width: 64px; height: 38px;
  background: var(--paper);
  border-radius: 6px;
  padding: 6px 8px;
  display: grid; place-items: center;
  border: 1px solid rgba(201, 155, 61, 0.5);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  z-index: 1;
}
.mentor-card__logo img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: none;
}
.mentor-card__info { padding: 18px 20px 22px; }
.mentor-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 6px;
}
.mentor-card__school {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 10px;
}
.mentor-card__spec {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
/* V1: logo-prominent variant (legacy) — kept for backwards compat. */
.mentor-card--logo .mentor-card__logo-large {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #f6f0e2 0%, #ece4d2 100%);
  display: grid; place-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}
.mentor-card--logo .mentor-card__logo-large img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  transition: transform .35s ease;
}
.mentor-card--logo:hover .mentor-card__logo-large img { transform: scale(1.05); }
.mentor-card__bio {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.mentor-card--logo .mentor-card__name { color: var(--ink); }
.mentor-card--logo .mentor-card__school { color: var(--accent); }

/* V1: redesigned mentor card (--v2) — structured placeholder fields so the
   client knows exactly what content to deliver per mentor. */
.mentor-card--v2 {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(201, 155, 61, 0.18);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mentor-card--v2:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.45);
  border-color: rgba(201, 155, 61, 0.55);
}
.mentor-card--v2 .mentor-card__logo-large {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #ffffff;
  display: grid; place-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
}
.mentor-card--v2 .mentor-card__logo-large img {
  max-width: 78%;
  max-height: 72%;
  width: auto; height: auto;
  object-fit: contain;
  filter: none;
  transition: transform .35s ease;
}
.mentor-card--v2:hover .mentor-card__logo-large img { transform: scale(1.04); }
.mentor-card--v2 .mentor-card__info {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mentor-card__num {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.mentor-card--v2 .mentor-card__school {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin: 2px 0 14px;
}
.mentor-card__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.mentor-card__field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 42, 68, 0.12);
}
.mentor-card__field:first-child {
  padding-top: 0;
  border-top: none;
}
.mentor-card__field dt {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted, var(--ink-soft));
  margin: 0;
}
.mentor-card__field dd {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

/* Responsive — bigger cards on mobile, smaller arrows hidden on small screens */
@media (max-width: 1100px) {
  .mentor-card { width: clamp(240px, 42vw, 300px); }
}
@media (max-width: 700px) {
  .mentor-carousel { padding: 0 20px; }
  .mentor-carousel__track { gap: 16px; scroll-padding-left: 20px; padding: 4px 4px 24px; }
  .mentor-card { width: 78vw; max-width: 320px; }
  .mentor-carousel__nav { display: none; }
}

/* ============ SERVICES — DETAILED PACKAGE INCLUSIONS TABLE ============ */
.inclusions { background: #ffffff; }
.inclusions-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  overflow-x: auto;
}
.inclusions-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.inclusions-table thead th {
  background: var(--ink);
  color: var(--cream);
  padding: 24px 20px;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.inclusions-table thead th:first-child { width: 40%; }
.inclusions-table tbody td {
  padding: 18px 20px;
  border-top: 1px solid rgba(15, 42, 68, 0.06);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
  vertical-align: top;
}
.inclusions-table .row-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}
.inclusions-table tbody tr:hover td { background: rgba(201, 155, 61, 0.04); }
.pkg-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pkg-pill.emerald { background: rgba(15, 107, 90, 0.15); color: var(--emerald); }
.pkg-pill.platinum { background: rgba(154, 163, 173, 0.2); color: var(--ink); }
.pkg-pill.gold { background: rgba(201, 155, 61, 0.18); color: var(--gold); }

/* ============ SERVICES — SCHOOL-FOCUSED / FLEX OPTIONS ============ */
.school-focus { background: var(--paper); border-top: var(--hairline); }
.school-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.focus-card {
  padding: 36px 32px;
  border-radius: var(--radius-card);
  background: #ffffff;
  border: 1px solid rgba(15, 42, 68, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.focus-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); border-color: rgba(201, 155, 61, 0.4); }
.focus-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.focus-card--purple::before { background: var(--accent); }
.focus-card--gold::before { background: var(--gold); }
.focus-card--rose::before { background: #C37C7C; }
.focus-card--teal::before { background: #6A9FA1; }
.focus-eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
}
.focus-card--purple .focus-eyebrow { color: var(--accent); }
.focus-card--gold .focus-eyebrow { color: var(--gold); }
.focus-card--rose .focus-eyebrow { color: #C37C7C; }
.focus-card--teal .focus-eyebrow { color: #6A9FA1; }
.focus-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.15;
}
.focus-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 24px;
}

/* ============ FAQ ACCORDION ============ */
.faq { background: #ffffff; border-top: var(--hairline); }
.faq-list {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}
.faq-item {
  border-bottom: 1px solid rgba(15, 42, 68, 0.08);
  background: transparent;
  transition: background .25s ease;
}
.faq-item:first-child { border-top: 1px solid rgba(15, 42, 68, 0.08); }
.faq-item.open { background: var(--paper); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  text-align: left;
  line-height: 1.3;
  gap: 24px;
  cursor: pointer;
}
.faq-toggle {
  font-family: var(--font-sans);
  font-size: 24px;
  color: var(--gold);
  font-weight: 300;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.faq-a {
  padding: 0 24px 24px 24px;
  font-family: var(--font-serif);
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 70ch;
}
/* V1.4: rich-content FAQ answers — paragraphs, lists, bold highlights. */
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul {
  margin: 6px 0 14px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq-a ul ul { margin: 6px 0 6px; }
.faq-a li { line-height: 1.55; }
.faq-a li::marker { color: var(--gold); }
.faq-a strong { color: var(--ink); font-weight: 600; }
.faq-a a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(123, 63, 160, 0.4);
  text-underline-offset: 3px;
}
.faq-a a:hover { text-decoration-color: var(--accent); }
.faq-hi {
  color: var(--accent) !important;
  font-weight: 700 !important;
}
/* V1.5: optional CTA below the FAQ accordion (Services-page FAQ uses
   it to link to the full Resources-page FAQ). */
.faq-cta {
  max-width: 920px;
  margin: 36px auto 0;
  padding: 0 32px;
  display: flex;
  justify-content: center;
}
@media (max-width: 700px) {
  .faq-cta { margin-top: 28px; padding: 0 24px; }
}

/* ============ ABOUT — GUIDING PRINCIPLES ============ */
.principles {
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
  padding: 64px 32px 80px;
}
.principles .section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.principles .section-head .eyebrow { justify-content: center; }

/* ----- V1.4 ROUND 7: WHEEL LAYOUT ----- */
/* Square container so the polar coordinates land on a true circle. */
.principles-wheel {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

/* Connector spokes — straight lines from the hub centre to each satellite,
   coloured to match the satellite they connect to. SVG uses a 0–100 viewBox
   so coordinates align 1:1 with the satellite top/left percentages. */
.pw-spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.pw-spoke {
  stroke-width: 0.25;
  stroke-linecap: round;
  opacity: 0;
  animation: pwSpokeIn 0.6s ease-out forwards;
}
@keyframes pwSpokeIn {
  from { opacity: 0; stroke-dasharray: 0 200; }
  to   { opacity: 0.5; stroke-dasharray: 200 0; }
}
.pw-spoke--gold     { stroke: var(--gold); }
.pw-spoke--purple   { stroke: var(--accent); }
.pw-spoke--emerald  { stroke: var(--emerald); }
.pw-spoke--lavender { stroke: #C99FE5; }
.pw-spoke--ink      { stroke: var(--ink); }

/* Central hub */
.pw-hub {
  position: absolute;
  left: 50%; top: 50%;
  width: 26%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, var(--cream) 100%);
  border: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
  z-index: 3;
  box-shadow: 0 10px 30px rgba(15, 42, 68, 0.12);
  animation: pwHubPulse 4s ease-in-out infinite;
}
@keyframes pwHubPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(15, 42, 68, 0.12), 0 0 0 0 rgba(123, 63, 160, 0.35); }
  50%      { box-shadow: 0 10px 30px rgba(15, 42, 68, 0.12), 0 0 0 18px rgba(123, 63, 160, 0); }
}
.pw-hub__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 6px;
}
.pw-hub__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.1;
  color: var(--ink);
}
.pw-hub__count {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(123, 63, 160, 0.35);
  border-radius: 999px;
}

/* Satellite — each guiding principle */
.pw-node {
  position: absolute;
  width: 28%;
  aspect-ratio: 1 / 1;
  /* Resting transform is set as a regular CSS property (not animation-locked)
     so that :hover / .is-active rules can override it. The entry animation
     uses `backwards` fill so the bubble is hidden during its stagger delay
     and reveals from the from-keyframe — but after the animation finishes,
     these regular CSS values take over and hover transforms apply normally. */
  transform: translate(-50%, -50%);
  opacity: 1;
  background: #ffffff;
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3px;
  z-index: 2;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 42, 68, 0.10);
  /* CRITICAL: lock the box to a perfect square regardless of content.
     `aspect-ratio` alone is a hint that content can override; `min-height: 0`
     tells the box to honour aspect-ratio over intrinsic content height, and
     `overflow: hidden` clips any text that would otherwise bloat the height
     into an egg shape. */
  min-height: 0;
  overflow: hidden;
  animation: pwNodeIn 0.65s cubic-bezier(.2, .9, .3, 1.15) backwards;
  transition:
    transform 0.45s cubic-bezier(.2, .9, .3, 1.2),
    box-shadow 0.45s ease,
    border-width 0.3s ease,
    padding 0.45s ease;
}
@keyframes pwNodeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Zoomed state — applied on hover (desktop) AND on .is-active (when tapped
   on mobile / touch). Both produce identical visual results so the
   interaction reads the same on any device. The CSS transform scales
   text + padding proportionally, so a 1.6× scale renders ~11px body copy
   as roughly 18px — comfortably readable. */
.pw-node:hover,
.pw-node.is-active {
  transform: translate(-50%, -50%) scale(1.6);
  box-shadow: 0 24px 50px rgba(15, 42, 68, 0.22);
  z-index: 10;
}
.pw-node:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.pw-node--gold     { border-color: var(--gold); }
.pw-node--purple   { border-color: var(--accent); }
.pw-node--emerald  { border-color: var(--emerald); }
.pw-node--lavender { border-color: #C99FE5; }
.pw-node--ink      { border-color: var(--ink); }
.pw-node__num {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 4px;
  text-align: center;
  width: 100%;
}
.pw-node--gold .pw-node__num     { color: var(--gold); }
.pw-node--purple .pw-node__num   { color: var(--accent); }
.pw-node--emerald .pw-node__num  { color: var(--emerald); }
.pw-node--lavender .pw-node__num { color: #C99FE5; }
.pw-node--ink .pw-node__num      { color: var(--ink); }
.pw-node__title {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.35vw, 15px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 5px;
  /* Force the text blocks to use the full bubble width so wrapping happens
     at the bubble edge (~3px from the border), not at the content's natural
     shrink-wrap width — otherwise the flex align-items: center makes the
     text float in a narrow column in the middle. */
  width: 100%;
  text-align: center;
}
.pw-node__body {
  font-family: var(--font-serif);
  font-size: clamp(9px, 1.05vw, 11px);
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0;
  width: 100%;
  text-align: center;
}

/* Mobile fallback — wheel collapses to a clean stacked card list under 720px.
   The radial absolute-positioning would crush at small sizes; this keeps it
   readable. */
@media (max-width: 760px) {
  .principles { padding: 64px 20px 80px; }
  .principles .section-head { margin-bottom: 32px; }
  .principles-wheel {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 460px;
  }
  .pw-spokes,
  .pw-hub { display: none; }
  .pw-node {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    aspect-ratio: auto;
    transform: none;
    border-radius: 14px;
    padding: 22px 24px;
    opacity: 1;
    animation: pwCardIn 0.5s ease-out backwards;
  }
  @keyframes pwCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Mobile: cards are already full width and readable, so the desktop
     "zoom on hover/click" effect would push them off-screen. Override
     back to a subtle lift instead. */
  .pw-node:hover,
  .pw-node.is-active {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 42, 68, 0.14);
  }
  .pw-node__num { font-size: 10px; margin-bottom: 6px; }
  .pw-node__title { font-size: 17px; margin-bottom: 8px; }
  .pw-node__body { font-size: 13.5px; line-height: 1.55; }
}

/* ----- LEGACY 3-COLUMN GRID (kept for safety — no longer rendered) ----- */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.principle {
  position: relative;
  padding: 28px 28px 28px 28px;
  background: var(--paper);
  border-radius: var(--radius-card);
  border: 1px solid rgba(15, 42, 68, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.principle:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.principle-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}
.principle h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.2;
}
.principle p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ============ ABOUT — STORY (NOW PAGE BANNER) ============ */
/* V1.4 (round 9): repurposed as the About-page banner replacing the old
   PageHero. Dark Oxford-blue background, cream type, lavender accents on
   eyebrow and the highlighted key phrase. Extra top padding clears the
   sticky nav (~96px) so the eyebrow sits comfortably below it. */
.story {
  background: var(--ink);
  color: var(--cream);
  border-top: none;
  border-bottom: none;
  padding: 108px 0 64px;
  position: relative;
  overflow: hidden;
}
.story::before,
.story::after {
  /* Decorative gold corner-frame motif, mirroring the .results section */
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(201, 155, 61, 0.55);
  pointer-events: none;
}
.story::before { top: 110px; right: 32px; border-left: none; border-bottom: none; }
.story::after  { bottom: 32px; left: 32px; border-right: none; border-top: none; }
.story-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.story-inner h1 {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.1;
}
.story-inner h1 .key.purple { color: #C99FE5; font-style: normal; }
.story-inner .eyebrow {
  display: block;
  margin-bottom: 16px;
  color: #C99FE5;
}
.story-text { display: flex; flex-direction: column; gap: 20px; }
.story-text p {
  font-family: var(--font-serif);
  font-size: 17px;
  color: rgba(242, 237, 227, 0.85);
  line-height: 1.65;
}
.story-text .ink-emphasis {
  font-weight: 400;
  font-style: normal;
  color: var(--gold);
}

/* ============ ABOUT — VISION / MISSION ============ */
.vision { background: #ffffff; }
.vision-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.vision-card {
  background: var(--ink);
  padding: 48px;
  border-radius: var(--radius-card);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.vision-card .eyebrow { color: rgba(201, 155, 61, 0.85); display: block; margin-bottom: 24px; }
.vision-card h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.25;
}
.vision-card--gold { background: var(--paper); color: var(--ink); }
.vision-card--gold h3 { color: var(--ink); }
.vision-card--gold .gold-eyebrow { color: var(--gold); }
.vision-card__sub {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  margin-top: 20px;
  opacity: 0.78;
}
.vision-card--gold .vision-card__sub { color: var(--ink-soft); }
.vision-card::before {
  content: "";
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: 1px solid var(--gold);
  border-left: none; border-bottom: none;
}

/* ============ ABOUT — COMPANY REGISTRATION ============ */
.registration { background: var(--paper); border-top: var(--hairline); }
.registration-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.registration-inner .eyebrow { display: block; margin-bottom: 12px; }
.registration-inner h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 32px;
}
.registration-inner dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 48px;
}
.registration-inner dl > div {
  border-bottom: 1px dotted rgba(15, 42, 68, 0.12);
  padding-bottom: 14px;
}
.registration-inner dt {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 6px;
}
.registration-inner dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
}

/* ============ SERVICES — IMAGE POPUP ============ */
/* V1.6: modal popup on the Services page. Dimmed backdrop with a centered
   image card; closes on backdrop click / ESC / X. */
.services-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 42, 68, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: ivy-popup-fade 220ms ease-out both;
}
@keyframes ivy-popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.services-popup {
  position: relative;
  max-width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: ivy-popup-pop 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ivy-popup-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.services-popup__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 42, 68, 0.12);
  font-size: 18px; line-height: 1;
  color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
  z-index: 2;
}
.services-popup__close:hover { background: #ffffff; transform: scale(1.08); }
.services-popup__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.services-popup__link { display: block; }
.services-popup__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 48px);
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .services-popup-backdrop,
  .services-popup { animation: none; }
}

/* ============ RESOURCES — BLOG ============ */
.blog { background: #ffffff; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.blog-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  border: 1px solid rgba(15, 42, 68, 0.06);
  /* V1.6: cards now have an optional hero thumbnail. The thumbnail
     bleeds to the card edges; padding is moved onto the inner body. */
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: pointer;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); border-color: rgba(201, 155, 61, 0.4); }
.blog-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream-deep);
  border-bottom: 1px solid rgba(15, 42, 68, 0.06);
}
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}
.blog-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.blog-tag {
  color: var(--accent);
  font-weight: 400;
}
.blog-date { color: var(--muted); }
.blog-card h4 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  font-style: normal;
}
.blog-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.blog-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dotted rgba(15, 42, 68, 0.08);
}
.blog-foot .read {
  font-size: 12px; color: var(--muted);
  font-family: var(--font-sans);
}

/* ============ BLOG POST PAGE (/blog.html?slug=…) ============
   V1.6: hero image full-bleed at the top, content in a narrow column
   below for readability (matches the editorial long-form feel). */
.blog-post { background: #ffffff; }
.blog-post__hero {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  background: var(--cream-deep);
  border-bottom: 1px solid rgba(15, 42, 68, 0.06);
}
.blog-post__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-post__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}
.blog-post__back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.blog-post__back:hover { color: var(--accent-deep); }
.blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.blog-post__meta .blog-tag    { color: var(--accent); }
.blog-post__meta .blog-date,
.blog-post__meta .blog-read   { color: var(--muted); }
.blog-post__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
  font-weight: 400;
}
.blog-post__author {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 32px;
}
.blog-post__body {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.blog-post__body p { margin: 0 0 16px; }
.blog-post__body h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin: 36px 0 14px;
}
.blog-post__body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin: 28px 0 10px;
}
.blog-post__body ul,
.blog-post__body ol { margin: 0 0 18px; padding-left: 24px; }
.blog-post__body li { margin-bottom: 8px; line-height: 1.55; }
.blog-post__body li::marker { color: var(--gold); }
.blog-post__body strong { color: var(--ink); font-weight: 700; }
.blog-post__body em { font-style: italic; }
.blog-post__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(123, 63, 160, 0.4);
  text-underline-offset: 3px;
}
.blog-post__body a:hover { text-decoration-color: var(--accent); }
.blog-post__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
  border-radius: 8px;
}
.blog-post__body blockquote {
  border-left: 3px solid var(--gold);
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  color: var(--ink-soft);
  font-style: italic;
}
.blog-post--missing .blog-post__inner,
.blog-post--loading .blog-post__inner {
  text-align: center;
  padding: 96px 32px;
}
.blog-post--missing h1 {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 12px 0 16px;
}
@media (max-width: 700px) {
  .blog-post__inner { padding: 36px 24px 72px; }
  .blog-post__body { font-size: 16px; }
}

/* ============ RESOURCES — RANKINGS TABLE ============ */
.rankings { background: var(--paper); border-top: var(--hairline); }
.rankings-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
/* V1.6: with 50 rows the table is now ~1,300 px tall. Wrap it in a
   contained scroll box (~600 px) so visitors can scroll the table
   independently without having to scroll the whole page. Header row
   is sticky inside the scroll container so column titles stay visible. */
.rankings-scroll {
  max-height: 620px;
  overflow: auto;
  background: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  /* Subtle inset shadow at the bottom edge tells the visitor there's
     more content below the fold. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent 100%);
}
.rankings-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}
.rankings-table thead th {
  background: var(--ink);
  color: var(--cream);
  padding: 22px 24px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  position: sticky;
  top: 0;
  z-index: 1;
}
.rankings-table tbody td {
  padding: 18px 24px;
  border-top: 1px solid rgba(15, 42, 68, 0.06);
  font-size: 15px;
  color: var(--ink);
}
.rankings-table tbody tr:hover td { background: rgba(201, 155, 61, 0.06); }
.rankings-table .rank {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  font-weight: 400;
  width: 80px;
}
.rankings-table .school {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
}
.rankings-table .uplift {
  font-weight: 400;
  color: var(--emerald);
}
/* V1.4 round 4: prior-year rank reads as secondary supporting info. */
.rankings-table .prev-rank {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.rankings-foot {
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 0 32px;
  text-align: center;
}

/* ============ RESOURCES — TOP SCHOOLS BY REGION ============ */
.top-schools { background: #ffffff; border-top: var(--hairline); }
.regions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.region-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 32px;
  border: 1px solid rgba(15, 42, 68, 0.06);
}
.region-card h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(201, 155, 61, 0.3);
  font-style: normal;
}
.region-card ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
}
.region-card li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  color: var(--ink-soft);
}
.region-card li .rank {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 13px;
  font-weight: 400;
  width: 24px;
  flex-shrink: 0;
}

/* ============ RESOURCES — EVAL FORM ============ */
.eval { background: var(--paper); border-top: var(--hairline); }
.eval-card {
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(15, 42, 68, 0.06);
  position: relative;
}
.eval-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.eval-progress .pip {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--muted);
  padding: 12px 8px;
  text-align: center;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid rgba(15, 42, 68, 0.06);
  transition: all .25s ease;
}
.eval-progress .pip.active {
  color: var(--ink);
  border-color: var(--gold);
  background: rgba(201, 155, 61, 0.08);
}
.eval-step {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.eval-step label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.eval-step input, .eval-step textarea, .eval-step .eval-select {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 13px 16px;
  border: 1px solid rgba(15, 42, 68, 0.15);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.eval-step input:focus, .eval-step textarea:focus, .eval-step .eval-select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
/* V1-2: native country <select> styled to match the rest of the form. We strip
   the OS chrome and paint our own caret so it sits flush with the cream form
   palette instead of looking like a raw OS dropdown. */
.eval-step .eval-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%237B3FA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.eval-step .eval-select:invalid,
.eval-step .eval-select option[value=""] { color: rgba(15, 42, 68, 0.45); }
.eval-step textarea { resize: vertical; min-height: 92px; }
.eval-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.eval-step .seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--paper);
  border: 1px solid rgba(15, 42, 68, 0.1);
  border-radius: 10px;
  padding: 4px;
}
.eval-step .seg-btn {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink-soft);
  border-radius: 7px;
  white-space: nowrap;
  transition: all .2s ease;
  min-width: max-content;
}
.eval-step .seg-btn.on {
  background: var(--ink);
  color: var(--cream);
}
.eval-step .seg-btn:not(.on):hover { background: rgba(15, 42, 68, 0.05); }
.eval-step .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.eval-step .chip {
  padding: 8px 16px;
  border: 1px solid rgba(15, 42, 68, 0.2);
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink-soft);
  background: transparent;
  transition: all .2s ease;
}
.eval-step .chip.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.eval-step .chip:not(.on):hover { border-color: var(--ink); }
.eval-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 16px;
  flex-wrap: wrap;
}
.eval-foot .btn { padding: 12px 24px; font-size: 14px; }
.eval-foot .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.eval-help {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 12.5px;
  color: var(--muted);
}
.eval-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.eval-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(201, 155, 61, 0.3);
  transition: background .25s ease, transform .25s ease;
}
.eval-dots .dot.active { background: var(--gold); transform: scale(1.4); }

/* ============ EVAL POPUP MODAL ============ */
/* Opened by any CTA pointing at #evaluation (see EvalModal in pages.jsx). */
.eval-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 42, 68, 0.62);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  animation: evalFade .2s ease;
}
@keyframes evalFade { from { opacity: 0; } to { opacity: 1; } }
.eval-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(15, 42, 68, 0.32);
  padding: 40px;
}
.eval-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid rgba(15, 42, 68, 0.1);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.eval-modal__close:hover { background: var(--ink); color: var(--cream); }
.eval-modal__head { margin-bottom: 24px; padding-right: 32px; }
.eval-modal__head .eyebrow { display: block; }
.eval-modal__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  line-height: 1.15;
  margin-top: 6px;
}
.eval-modal__head .lead { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
.eval-success { font-family: var(--font-sans); color: var(--ink); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .school-focus-grid { grid-template-columns: 1fr; }
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
  .story-inner { grid-template-columns: 1fr; gap: 32px; }
  .vision-grid { grid-template-columns: 1fr; }
  .registration-inner dl { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .regions-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .principles-grid { grid-template-columns: 1fr; }
  .region-card ol { grid-template-columns: 1fr; }
  .eval-row { grid-template-columns: 1fr; }
  .eval-card { padding: 24px; }
  /* Stack segmented options so long labels (e.g. "Tested (will share score)")
     don't overflow horizontally on narrow screens. */
  .eval-step .seg { flex-direction: column; }
  .eval-step .seg-btn { flex: none; width: 100%; min-width: 0; white-space: normal; }
  .eval-foot { flex-direction: column-reverse; align-items: stretch; }
  .eval-foot .btn { width: 100%; }
  .eval-foot .eval-help { text-align: center; }
  .eval-modal { padding: 28px 18px; }
  .eval-modal-backdrop { padding: 14px 10px; }
  .page-hero .frame-corner.tr { top: 24px; right: 16px; width: 48px; height: 48px; }
  .page-hero .frame-corner.bl { bottom: 24px; left: 16px; width: 48px; height: 48px; }
  .inclusions-table thead th { padding: 16px 12px; font-size: 12px; }
  .inclusions-table tbody td { padding: 14px 12px; font-size: 13px; }
  .inclusions-table .row-label { font-size: 14px; }
}