/* ==========================================================================
   College Prep Master — Brand Design System
   Built from: "CPM Marketing DNA – New Way" brand guidelines (July 2026)

   PALETTE                          TYPE
   Navy        #0B2346  primary     Main titles      Avenir Next LT Pro Bold  (700)
   White       #FFFFFF  primary     Section titles   Avenir Next LT Pro Demi  (600)
   Gold        #C9A227  primary     Body             Avenir Next LT Pro Reg   (400)
   Slate Blue  #4F6D8A  secondary   Captions         Avenir Next LT Pro Reg   (400)
   Light Blue  #9CB7D6  secondary   Quotes           Avenir Next Cyr Italic Bold
   Light Gray  #D9E1EA  secondary
   Dark Gray   #6B7280  secondary

   FONT NOTE — Avenir Next LT Pro is a licensed Adobe/Linotype face and cannot
   be served freely. The stack below tries Avenir Next first (visitors who own
   it see the true brand face), then falls back to Nunito Sans, the closest
   free geometric-humanist match. To swap in licensed webfonts later, add
   @font-face blocks below and change nothing else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Primary */
  --navy:        #0B2346;
  --white:       #FFFFFF;
  --gold:        #C9A227;

  /* Secondary */
  --slate:       #4F6D8A;
  --light-blue:  #9CB7D6;
  --light-gray:  #D9E1EA;
  --dark-gray:   #6B7280;

  /* Derived — tints and shades of the above, no new hues introduced */
  --navy-900:    #071730;
  --navy-700:    #123362;
  --gold-600:    #A8871C;
  /* gold-600 only reaches 3.4:1 on white — too low for small text. gold-700 is
     the accessible gold for captions, eyebrows and links on light surfaces. */
  --gold-700:    #856814;
  --gold-tint:   #FBF6E7;
  --slate-tint:  #F3F6FA;
  --page-tint:   #F7F9FC;
  --hairline:    rgba(11, 35, 70, 0.10);
  --hairline-2:  rgba(11, 35, 70, 0.16);
  --on-navy-dim: #B9C9DF;

  /* Type */
  --font-sans: "Avenir Next LT Pro", "Avenir Next", "Avenir",
               "Nunito Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --w-body: 400;
  --w-demi: 600;
  --w-bold: 700;

  /* Fluid scale */
  --t-hero:    clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --t-h1:      clamp(2.1rem, 1.5rem + 2.4vw, 3.35rem);
  --t-h2:      clamp(1.65rem, 1.28rem + 1.5vw, 2.4rem);
  --t-h3:      clamp(1.15rem, 1.05rem + 0.42vw, 1.4rem);
  --t-h4:      1.0625rem;
  --t-body:    clamp(1rem, 0.97rem + 0.14vw, 1.075rem);
  --t-small:   0.9375rem;
  --t-caption: 0.8125rem;
  --t-eyebrow: 0.75rem;

  /* Space */
  --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2rem;    --s-6: 3rem;    --s-7: 4rem;   --s-8: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Shell */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11,35,70,.05), 0 3px 10px rgba(11,35,70,.05);
  --shadow-md: 0 2px 4px rgba(11,35,70,.05), 0 12px 32px rgba(11,35,70,.09);
  --shadow-lg: 0 4px 8px rgba(11,35,70,.06), 0 24px 56px rgba(11,35,70,.14);
  --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-weight: var(--w-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-weight: var(--w-bold);
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h3, h4, h5 { font-weight: var(--w-demi); letter-spacing: -0.008em; line-height: 1.25; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { text-wrap: pretty; }
strong, b { font-weight: var(--w-demi); }

a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-600); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--navy); color: var(--white);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: var(--w-demi); text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--white); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 560px) { .wrap { width: min(100% - 2rem, var(--wrap)); } }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--tint { background: var(--page-tint); }
.section--gray { background: var(--light-gray); }

.section--navy {
  background: var(--navy);
  color: var(--white);
  position: relative;
  isolation: isolate;
}
.section--navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 100% at 82% 0%, rgba(201,162,39,.16), transparent 62%),
    radial-gradient(58% 90% at 0% 100%, rgba(79,109,138,.30), transparent 62%);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy p, .section--navy li { color: var(--on-navy-dim); }
/* :not(.btn) — buttons carry their own colour pairing and must not be
   repainted by the surface they happen to sit on. */
.section--navy a:not(.btn) { color: var(--white); }
.section--navy .eyebrow { color: var(--gold); }
.section--navy .lede { color: #D5E0EF; }

/* Light-surfaced components nested inside a navy section keep dark-on-light
   text. Without this the inherited white text lands on a white card. */
.section--navy .pillar,
.section--navy .tier,
.section--navy .form-card,
.section--navy .callout {
  color: var(--navy);
}
.section--navy .pillar h1, .section--navy .pillar h2,
.section--navy .pillar h3, .section--navy .pillar h4,
.section--navy .tier h1, .section--navy .tier h2,
.section--navy .tier h3, .section--navy .tier h4,
.section--navy .callout h4 {
  color: var(--navy);
}
.section--navy .pillar p, .section--navy .pillar li,
.section--navy .tier p, .section--navy .tier li,
.section--navy .callout p {
  color: var(--slate);
}
.section--navy .pillar__sub { color: var(--gold-700); }
.section--navy .pillar__tags span { color: var(--slate); }
.section--navy .tier__for { color: var(--slate); }

/* minmax(min(Npx, 100%), 1fr) — the inner min() stops the track from forcing
   the grid wider than its container on very narrow screens. */
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.stack > * + * { margin-top: var(--s-3); }
.center { text-align: center; }
.narrow { max-width: var(--wrap-narrow); margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: var(--s-2);
}
.lede {
  font-size: clamp(1.075rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--slate);
}
.caption { font-size: var(--t-caption); color: var(--dark-gray); line-height: 1.5; }
.small { font-size: var(--t-small); }
.muted { color: var(--dark-gray); }

.section-head { max-width: 760px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--s-3); }

/* Quote — Avenir Next Cyr Italic Bold per guidelines */
.quote {
  font-style: italic;
  font-weight: var(--w-bold);
  font-size: clamp(1.2rem, 1rem + 0.95vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}
.quote em { color: var(--gold-700); font-style: italic; }

.quote-band {
  background: var(--gold-tint);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, .5rem + 2vw, 2rem);
  align-items: start;
}
.quote-band__mark {
  font-size: 4rem; line-height: .78; font-weight: var(--w-bold);
  color: var(--gold-600); font-family: Georgia, "Times New Roman", serif;
}
.section--navy .quote-band { background: rgba(255,255,255,.07); }
.section--navy .quote { color: var(--white); }
.section--navy .quote em { color: var(--gold); }

@media (max-width: 560px) {
  .quote-band { grid-template-columns: 1fr; }
  .quote-band__mark { font-size: 2.75rem; }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.6rem;
  font-size: var(--t-small);
  font-weight: var(--w-demi);
  letter-spacing: .01em;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold   { background: var(--gold); color: var(--navy); border-color: var(--gold); box-shadow: 0 6px 18px rgba(201,162,39,.32); }
.btn--gold:hover { background: #D8B23A; border-color: #D8B23A; color: var(--navy); box-shadow: 0 10px 26px rgba(201,162,39,.42); }

.btn--navy   { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }

.btn--ghost  { background: transparent; color: var(--navy); border-color: var(--hairline-2); }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }

/* Every dark surface, not just .section--navy — the heroes are dark too, and a
   navy-on-navy ghost button is invisible. */
.section--navy .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost {
  color: var(--white);
  border-color: rgba(255,255,255,.34);
}
.section--navy .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover {
  background: var(--white); color: var(--navy); border-color: var(--white);
}

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

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btn-row--center { justify-content: center; }

/* Long CTA labels must wrap rather than widen the page on small phones. */
@media (max-width: 430px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .btn--lg { font-size: .95rem; padding: .9rem 1.35rem; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy);
  color: var(--on-navy-dim);
  font-size: var(--t-caption);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 40px; flex-wrap: wrap;
}
.topbar a { color: var(--on-navy-dim); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--gold); }
.topbar__group { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.topbar__tag { color: var(--gold); font-weight: var(--w-demi); letter-spacing: .06em; text-transform: uppercase; font-size: .6875rem; }
@media (max-width: 860px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 4px 24px rgba(11,35,70,.09); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand__logo {
  width: auto;
  height: 52px;          /* stacked wordmark — needs height to stay legible */
  flex-shrink: 0;
}
.brand__logo--reverse { height: 58px; }
@media (max-width: 1180px) { .brand__logo { height: 46px; } }
@media (max-width: 460px)  { .brand__logo { height: 40px; } }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-weight: var(--w-bold); font-size: .98rem; letter-spacing: .085em;
  text-transform: uppercase; color: var(--navy); white-space: nowrap;
}
.brand__tag {
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-700); font-weight: var(--w-demi); margin-top: 3px; white-space: nowrap;
}

.nav__menu { display: flex; align-items: center; gap: .15rem; list-style: none; padding: 0; margin: 0; }
.nav__link {
  display: block; padding: .55rem .62rem; border-radius: 8px;
  font-size: .875rem; font-weight: var(--w-demi);
  color: var(--navy); text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover { background: var(--slate-tint); color: var(--navy); }
.nav__link[aria-current="page"] { color: var(--gold-700); }
.nav__actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

.nav__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--hairline-2); border-radius: 10px; cursor: pointer;
}
.nav__toggle span {
  display: block; width: 19px; height: 2px; background: var(--navy); border-radius: 2px;
  position: relative; transition: background-color .2s var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  background: var(--navy); border-radius: 2px; transition: transform .25s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: calc(var(--header-h)) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
    padding: var(--s-3) 1.25rem var(--s-5);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;
  }
  .nav__menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__link { padding: .95rem .6rem; font-size: 1.05rem; border-bottom: 1px solid var(--hairline); border-radius: 0; }
  .nav__menu li:last-child .nav__link { border-bottom: 0; }
  .nav__actions .btn--ghost { display: none; }
}
/* Header must never push the page sideways on small screens: the brand
   tagline drops out first, then the CTA falls back to its short label. */
.btn__short { display: none; }

@media (max-width: 620px) {
  .brand__tag { display: none; }
  .brand { min-width: 0; flex-shrink: 1; }
  /* Let the wordmark stack to two lines rather than force the header wider
     than the viewport. "College Prep / Master" reads fine as a compact lockup. */
  .brand__name { white-space: normal; line-height: 1.08; }
}
@media (max-width: 560px) {
  .nav__actions .btn__full { display: none; }
  .nav__actions .btn__short { display: inline; }
}
@media (max-width: 460px) {
  .nav__actions .btn { padding: .7rem 1.05rem; font-size: .85rem; }
  .brand__name { font-size: .85rem; }
  .brand__mark { width: 34px; height: 34px; }
}
@media (max-width: 380px) {
  .brand__name { font-size: .78rem; letter-spacing: .05em; }
  .nav__actions { gap: .4rem; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--white);
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(64% 88% at 88% 6%, rgba(201,162,39,.20), transparent 60%),
    radial-gradient(54% 82% at 4% 96%, rgba(79,109,138,.36), transparent 62%),
    var(--navy);
}
.hero__inner {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
}
.hero h1 { color: var(--white); font-size: var(--t-hero); letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__lede { color: #D5E0EF; font-size: clamp(1.075rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; max-width: 33em; }
.hero .eyebrow { color: var(--gold); }
.hero__cta { margin-top: var(--s-5); }

.hero__figure { position: relative; }
.hero__img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,.42);
}
/* Light brand panel — the hero's counterweight to the navy field.
   Drop-in replaceable with a photograph (see index.html). */
.brand-panel {
  background-color: var(--white);
  background-image: linear-gradient(160deg, #FFFFFF 0%, #F4F7FB 55%, var(--light-gray) 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,.42);
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  text-align: center;
}
.brand-panel__rose { width: clamp(96px, 8vw + 40px, 152px); height: auto; }
.brand-panel__word {
  font-weight: var(--w-bold);
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.brand-panel__pillars {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, .3rem + 1vw, 1.25rem);
  width: 100%;
  padding-top: clamp(1rem, .7rem + 1vw, 1.5rem);
  border-top: 1px solid var(--hairline);
}
.brand-panel__pillars li {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--gold-600);
}
.brand-panel__pillars svg { width: 26px; height: 26px; }
.brand-panel__pillars span {
  font-size: .625rem; font-weight: var(--w-bold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); line-height: 1.2;
}

.hero__badge {
  position: absolute; left: -1.25rem; bottom: 1.75rem;
  background: var(--white); color: var(--navy);
  border-radius: var(--radius); padding: .95rem 1.2rem;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: .8rem; max-width: 15rem;
}
.hero__badge svg { flex-shrink: 0; }
.hero__badge b { display: block; font-weight: var(--w-bold); font-size: 1.5rem; line-height: 1; }
.hero__badge span { font-size: var(--t-caption); color: var(--dark-gray); line-height: 1.35; display: block; margin-top: 3px; }

.hero__proof {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.15);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--s-4);
}
.hero__proof div b {
  display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: var(--w-bold); color: var(--gold); line-height: 1.1; letter-spacing: -0.02em;
}
.hero__proof div span { font-size: var(--t-caption); color: var(--on-navy-dim); line-height: 1.4; display: block; margin-top: .3rem; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__figure { max-width: 420px; margin-inline: auto; width: 100%; }
  .hero__badge { left: 0; }
}

/* Compact page hero for interior pages */
.page-hero {
  background: var(--navy); color: var(--white);
  padding-block: clamp(3rem, 2rem + 4.5vw, 5rem);
  position: relative; isolation: isolate; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 100% at 88% 0%, rgba(201,162,39,.17), transparent 62%),
    radial-gradient(52% 92% at 2% 100%, rgba(79,109,138,.32), transparent 62%);
}
.page-hero h1 { color: var(--white); max-width: 18ch; }
.page-hero .lede { color: #D5E0EF; margin-top: var(--s-3); max-width: 60ch; }
.page-hero .eyebrow { color: var(--gold); }
.page-hero .btn-row { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.1vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  height: 100%;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--hairline-2); }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--slate); font-size: var(--t-small); }
.card__link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: var(--s-3); font-size: var(--t-small); font-weight: var(--w-demi);
  color: var(--gold-700); text-decoration: none;
}
.card__link:hover { gap: .65rem; color: var(--gold-700); }
.card__link svg { transition: transform .2s var(--ease); }
.card__link:hover svg { transform: translateX(2px); }

.section--navy .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13); box-shadow: none; }
.section--navy .card p { color: var(--on-navy-dim); }

/* Icon in a navy disc — the brand's repeating motif */
.icon-disc {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  display: grid; place-items: center; flex-shrink: 0;
  margin-bottom: var(--s-3);
}
.icon-disc svg { width: 25px; height: 25px; }
.icon-disc--gold { background: var(--gold); color: var(--navy); }
.icon-disc--outline { background: transparent; border: 2px solid var(--gold); color: var(--gold-600); }
.section--navy .icon-disc { background: var(--gold); color: var(--navy); }
.icon-disc--sm { width: 40px; height: 40px; margin-bottom: 0; }
.icon-disc--sm svg { width: 19px; height: 19px; }

/* Numbered step cards */
.step { position: relative; }
.step__num {
  font-size: 2.6rem; font-weight: var(--w-bold); line-height: 1;
  color: var(--light-gray); letter-spacing: -0.04em; margin-bottom: var(--s-2);
}
.section--navy .step__num { color: rgba(255,255,255,.22); }

/* Feature list with gold checks */
/* The check sits in the padding rather than a grid column, so an <li> may hold
   any mix of text and inline elements without items reflowing into the gutter. */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checklist li {
  position: relative; padding-left: 1.85rem;
  font-size: var(--t-small); line-height: 1.5;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .15rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8871C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--navy .checklist li::before {
  background-color: rgba(201,162,39,.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.checklist--tight li { font-size: var(--t-caption); }

/* Plain bulleted list, brand-styled */
.dotlist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.dotlist li {
  position: relative; padding-left: 1.1rem;
  font-size: var(--t-small); line-height: 1.5; color: var(--slate);
}
.dotlist li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.section--navy .dotlist li { color: var(--on-navy-dim); }

/* An <ol> gets numbers instead of dots — the deck numbers its values and
   beliefs 1–5, and the order carries meaning. */
ol.dotlist { counter-reset: dotnum; }
ol.dotlist li { padding-left: 1.6rem; counter-increment: dotnum; }
ol.dotlist li::before {
  content: counter(dotnum);
  top: 0; width: auto; height: auto; border-radius: 0; background: none;
  font-size: .75rem; font-weight: var(--w-bold); line-height: 1.9;
  color: var(--gold-700);
}
.section--navy ol.dotlist li::before { color: var(--gold); }

/* --------------------------------------------------------------------------
   9. Pillars (The College Master Plan™)
   -------------------------------------------------------------------------- */
.pillars { display: grid; gap: var(--s-4); counter-reset: pillar; }
.pillar {
  display: grid; grid-template-columns: 108px 1fr;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pillar__index {
  background: var(--navy); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: var(--s-4) var(--s-2); text-align: center;
}
.pillar__index b { font-size: 2.1rem; font-weight: var(--w-bold); line-height: 1; letter-spacing: -0.03em; }
.pillar__index span { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--light-blue); }
.pillar:nth-child(2) .pillar__index { background: var(--gold); color: var(--navy); }
.pillar:nth-child(2) .pillar__index span { color: rgba(11,35,70,.7); }
.pillar:nth-child(3) .pillar__index { background: var(--slate); }
.pillar:nth-child(3) .pillar__index span { color: rgba(255,255,255,.88); }
.pillar__body { padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); }
.pillar__body h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: var(--w-bold); }
.pillar__sub { font-style: italic; color: var(--gold-700); font-weight: var(--w-demi); font-size: var(--t-small); margin-top: .25rem; }
.pillar__body > p { margin-top: var(--s-3); color: var(--slate); font-size: var(--t-small); }
.pillar__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s-3); }
.pillar__tags span {
  font-size: var(--t-caption); font-weight: var(--w-demi);
  background: var(--slate-tint); color: var(--slate);
  border-radius: 999px; padding: .3rem .75rem; border: 1px solid var(--hairline);
}
@media (max-width: 620px) {
  .pillar { grid-template-columns: 1fr; }
  .pillar__index { flex-direction: row; gap: .7rem; padding: .8rem; justify-content: flex-start; }
  .pillar__index b { font-size: 1.4rem; }
}

/* Process flow — Discover → Plan → Build → Apply → Transition */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--s-3); }
.flow__step {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s-4); position: relative; height: 100%;
}
.flow__n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: grid; place-items: center; font-size: .8125rem; font-weight: var(--w-bold);
  margin-bottom: var(--s-3);
}
.flow__step h4 { font-weight: var(--w-bold); letter-spacing: .05em; text-transform: uppercase; font-size: .8125rem; color: var(--navy); }
.flow__step > p { font-size: var(--t-caption); color: var(--slate); margin-top: .45rem; }
.flow__step ul { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hairline); }

/* Before / after transformation */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-4); align-items: stretch; }
.ba__col { border-radius: var(--radius-lg); padding: clamp(1.4rem, 1rem + 1.3vw, 2.25rem); }
.ba__col--before { background: var(--page-tint); border: 1px solid var(--light-gray); }
.ba__col--after  { background: var(--navy); color: var(--white); }
.ba__col--after h3 { color: var(--white); }
.ba__col h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; font-weight: var(--w-bold); }
.ba__col > p { font-size: var(--t-caption); margin-top: .3rem; }
.ba__col--before > p { color: var(--dark-gray); }
.ba__col--after  > p { color: var(--light-blue); }
.ba__list { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: .9rem; }
.ba__list li { padding-bottom: .9rem; border-bottom: 1px solid var(--hairline); font-size: var(--t-small); line-height: 1.45; }
.ba__col--after .ba__list li { border-color: rgba(255,255,255,.14); color: var(--on-navy-dim); }
.ba__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ba__list b { display: block; font-weight: var(--w-demi); color: var(--navy); }
.ba__col--after .ba__list b { color: var(--gold); }
.ba__arrow { display: grid; place-items: center; color: var(--gold); }
@media (max-width: 860px) {
  .ba { grid-template-columns: 1fr; }
  .ba__arrow { transform: rotate(90deg); padding: .25rem 0; }
}

/* --------------------------------------------------------------------------
   10. Program tiers
   -------------------------------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--s-4); align-items: start; }
.tier {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; height: 100%;
}
.tier--featured { border-color: var(--gold); box-shadow: 0 4px 10px rgba(201,162,39,.14), 0 24px 52px rgba(11,35,70,.14); }
.tier__head { padding: var(--s-5) clamp(1.4rem,1rem + 1.1vw,1.9rem) var(--s-4); border-bottom: 1px solid var(--hairline); position: relative; }
.tier--featured .tier__head { background: var(--gold-tint); border-bottom-color: rgba(201,162,39,.28); }
.tier__flag {
  position: absolute; top: 0; right: clamp(1.4rem,1rem + 1.1vw,1.9rem);
  background: var(--gold); color: var(--navy);
  font-size: .625rem; font-weight: var(--w-bold); letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 0 0 6px 6px;
}
.tier__name { font-size: 1.5rem; font-weight: var(--w-bold); letter-spacing: -0.02em; }
.tier__for { font-size: var(--t-caption); color: var(--slate); margin-top: .4rem; line-height: 1.45; }
.tier__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: var(--s-4); }
.tier__stats div { text-align: center; }
.tier__stats b { display: block; font-size: 1.35rem; font-weight: var(--w-bold); color: var(--navy); line-height: 1; }
.tier__stats span { font-size: .625rem; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); display: block; margin-top: .3rem; line-height: 1.3; }
.tier__body { padding: var(--s-4) clamp(1.4rem,1rem + 1.1vw,1.9rem) var(--s-5); display: flex; flex-direction: column; flex: 1; }
.tier__body .btn { margin-top: auto; }
.tier__body .checklist { margin-bottom: var(--s-5); }

/* Comparison table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--hairline); }
.cmp { width: 100%; min-width: 700px; border-collapse: collapse; font-size: var(--t-small); background: var(--white); }
.cmp th, .cmp td { padding: .85rem 1rem; text-align: center; border-bottom: 1px solid var(--hairline); }
.cmp thead th { background: var(--navy); color: var(--white); font-weight: var(--w-demi); font-size: var(--t-caption); letter-spacing: .09em; text-transform: uppercase; position: sticky; top: 0; }
.cmp thead th:first-child { text-align: left; }
.cmp tbody th { text-align: left; font-weight: var(--w-body); color: var(--navy); background: var(--white); }
.cmp tbody tr:nth-child(even) th, .cmp tbody tr:nth-child(even) td { background: var(--page-tint); }
.cmp tbody tr:hover th, .cmp tbody tr:hover td { background: var(--gold-tint); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .grp th {
  background: var(--light-gray); font-weight: var(--w-bold); font-size: var(--t-caption);
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
}
.cmp .yes { color: var(--gold-700); font-weight: var(--w-bold); }
.cmp .no  { color: var(--dark-gray); }
.table-note { font-size: var(--t-caption); color: var(--dark-gray); margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   11. Results / case studies
   -------------------------------------------------------------------------- */
.case {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-4); align-items: center;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: clamp(1.4rem,1rem + 1.2vw,2rem);
  box-shadow: var(--shadow-sm);
}
.case__name { font-size: 1.3rem; font-weight: var(--w-bold); letter-spacing: -0.02em; }
.case__school { font-size: var(--t-caption); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); margin-top: .2rem; }
.case__facts { margin-top: var(--s-3); }
.case__figure {
  background: var(--navy); color: var(--white);
  border-radius: var(--radius); padding: var(--s-4) var(--s-5);
  text-align: center; min-width: 200px;
}
.case__figure span { display: block; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--light-blue); }
.case__figure b { display: block; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); font-weight: var(--w-bold); color: var(--gold); line-height: 1.1; margin-top: .35rem; letter-spacing: -0.02em; }
.case__figure small { display: block; font-size: var(--t-caption); color: var(--on-navy-dim); margin-top: .25rem; }
@media (max-width: 720px) { .case { grid-template-columns: 1fr; } }

/* Stat row */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--s-4); }
.stat { text-align: center; padding: var(--s-4) var(--s-3); }
.stat b {
  display: block; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: var(--w-bold);
  color: var(--gold-600); line-height: 1; letter-spacing: -0.03em;
}
.section--navy .stat b { color: var(--gold); }
.stat span { display: block; font-size: var(--t-caption); color: var(--slate); margin-top: .5rem; line-height: 1.4; }
.section--navy .stat span { color: var(--on-navy-dim); }

/* --------------------------------------------------------------------------
   12. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.acc { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.acc details { border-bottom: 1px solid var(--hairline); }
.acc details:last-child { border-bottom: 0; }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 1.15rem clamp(1rem, .7rem + 1vw, 1.6rem);
  font-weight: var(--w-demi); font-size: var(--t-body); cursor: pointer; list-style: none;
  transition: background-color .18s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--slate-tint); }
.acc summary::after {
  content: ""; flex-shrink: 0; width: 13px; height: 13px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--ease);
}
.acc details[open] summary { background: var(--slate-tint); }
.acc details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.acc__body { padding: 0 clamp(1rem, .7rem + 1vw, 1.6rem) 1.35rem; }
.acc__body p { color: var(--slate); font-size: var(--t-small); }
.acc__body p + p { margin-top: var(--s-2); }

.faq-group + .faq-group { margin-top: var(--s-6); }
.faq-group > h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-3); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .35rem; }
.field label { font-size: var(--t-caption); font-weight: var(--w-demi); letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem;
  border: 1px solid var(--hairline-2); border-radius: var(--radius-sm);
  background: var(--white); font-size: var(--t-small); color: var(--navy);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.18);
}
.field textarea { resize: vertical; min-height: 118px; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6D8A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 15px; padding-right: 2.4rem;
}
.form__note { font-size: var(--t-caption); color: var(--dark-gray); }

.form-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  box-shadow: var(--shadow-lg); border: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   14. Misc blocks
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.split--narrow-right { grid-template-columns: 1.25fr .75fr; }
@media (max-width: 860px) { .split, .split--narrow-right { grid-template-columns: 1fr; } }

.portrait { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 32%; }

.scarcity {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(201,162,39,.14); border: 1px solid rgba(201,162,39,.4);
  color: var(--gold-600); border-radius: 999px;
  padding: .4rem .95rem; font-size: var(--t-caption); font-weight: var(--w-demi);
}
.section--navy .scarcity, .hero .scarcity, .page-hero .scarcity {
  background: rgba(201,162,39,.18); color: var(--gold); border-color: rgba(201,162,39,.45);
}
.scarcity::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.divider-star {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--gold); margin-block: var(--s-4);
}
.divider-star::before, .divider-star::after {
  content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.callout {
  border-left: 3px solid var(--gold);
  background: var(--gold-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s-4) clamp(1.1rem, .8rem + 1vw, 1.75rem);
}
.callout h4 { margin-bottom: .4rem; }
.callout p { font-size: var(--t-small); color: var(--slate); }

.res-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 1.05rem 1.25rem; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--white); text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.res-link:hover { border-color: var(--gold); transform: translateX(3px); box-shadow: var(--shadow-sm); color: var(--navy); }
.res-link b { display: block; font-weight: var(--w-demi); font-size: var(--t-small); }
.res-link span { display: block; font-size: var(--t-caption); color: var(--dark-gray); margin-top: .15rem; line-height: 1.4; }
.res-link__arrow { margin-left: auto; color: var(--gold); flex-shrink: 0; }

/* Final CTA band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 55ch; margin-inline: auto; margin-top: var(--s-3); }
.cta-band .btn-row { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: var(--on-navy-dim); padding-block: var(--s-7) var(--s-5); font-size: var(--t-small); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--s-5); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  color: var(--white); font-size: var(--t-caption); font-weight: var(--w-bold);
  letter-spacing: .13em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer a { color: var(--on-navy-dim); text-decoration: none; font-size: var(--t-small); }
.site-footer a:hover { color: var(--gold); }
.footer__brand .brand__name { color: var(--white); }
.footer__brand p { color: var(--on-navy-dim); font-size: var(--t-caption); margin-top: var(--s-3); max-width: 34ch; line-height: 1.55; }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); }
.footer__contact svg { flex-shrink: 0; margin-top: .3rem; color: var(--gold); }
.footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center;
  font-size: var(--t-caption); color: #8FA3BC;
}
.footer__social { display: flex; gap: .6rem; }
.footer__social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.24); text-decoration: none;
  transition: transform .2s var(--ease);
}
.wa-float:hover { transform: scale(1.07); color: #fff; }

/* --------------------------------------------------------------------------
   16. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .topbar, .wa-float, .site-footer, .btn { display: none !important; }
  .hero, .page-hero, .section--navy { background: #fff !important; color: #000 !important; }
  .hero h1, .page-hero h1, .section--navy h2 { color: #000 !important; }
}


/* Footer sits on navy-900, so gold accents need the bright value, not the
   dark gold-700 that is correct on white. */
.site-footer .brand__tag { color: var(--gold); }
.site-footer .scarcity {
  background: rgba(201,162,39,.18);
  color: var(--gold);
  border-color: rgba(201,162,39,.45);
}

/* --------------------------------------------------------------------------
   18. Footer review links (Trustpilot / Google)
   -------------------------------------------------------------------------- */
.footer__reviews {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer__reviews a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-caption); color: var(--on-navy-dim); text-decoration: none;
  transition: color .18s var(--ease);
}
.footer__reviews a svg { color: var(--gold); flex-shrink: 0; }
.footer__reviews a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   19. Español nav link — set apart without shouting
   -------------------------------------------------------------------------- */
.nav__link--es {
  border: 1px solid var(--hairline-2);
  margin-left: .3rem;
}
.nav__link--es:hover { border-color: var(--gold); }
@media (max-width: 1180px) {
  .nav__link--es { border: 0; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   20. Foundation / Senior tracks — the two stages inside The College Master Plan™
   -------------------------------------------------------------------------- */
.tracks { display: grid; gap: var(--s-4); }
.track {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
}
.track--senior { border-left-color: var(--slate); }
.track__label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem;
  margin-bottom: .6rem;
}
.track__label b {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  font-weight: var(--w-bold); letter-spacing: .02em; text-transform: uppercase;
  color: var(--navy);
}
.track__grades {
  font-size: var(--t-caption); font-weight: var(--w-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700);
  background: var(--gold-tint); border-radius: 999px; padding: .25rem .7rem;
}
.track--senior .track__grades { color: var(--slate); background: var(--slate-tint); }
.track__line { font-weight: var(--w-demi); color: var(--navy); }
.track > p { font-size: var(--t-small); color: var(--slate); margin-top: .5rem; }
.track .pillar__tags { margin-top: var(--s-3); }

.track-flow {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap; margin-bottom: var(--s-4);
  font-size: var(--t-caption); font-weight: var(--w-demi); color: var(--slate);
}
.track-flow b { color: var(--navy); font-weight: var(--w-bold); }
.track-flow svg { color: var(--gold); flex-shrink: 0; }
.section--navy .track-flow { color: var(--on-navy-dim); }
.section--navy .track-flow b { color: var(--white); }

/* --------------------------------------------------------------------------
   21. Case studies — Challenge → Strategy → Outcome → Crest → Financial impact
   -------------------------------------------------------------------------- */
.case-study {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px);
  gap: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.case-study__name {
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  font-weight: var(--w-bold); letter-spacing: -0.02em; color: var(--navy); line-height: 1;
}
.case-study__school {
  font-size: var(--t-caption); font-weight: var(--w-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); margin-top: .35rem;
}
.case-study__facts { margin: var(--s-4) 0 0; display: grid; gap: .85rem; }
.case-study__facts > div { display: grid; gap: .15rem; }
.case-study__facts dt {
  font-size: .6875rem; font-weight: var(--w-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}
.case-study__facts dd { margin: 0; font-size: var(--t-small); color: var(--navy); line-height: 1.5; }

.case-study__aside { display: grid; gap: var(--s-3); justify-items: stretch; }

/* Crest slot — drop the university mark in here when licensing allows. */
.case-study__crest {
  display: grid; place-items: center; gap: .35rem;
  min-height: 78px; padding: .75rem;
  border: 1px dashed var(--hairline-2); border-radius: var(--radius-sm);
  background: var(--slate-tint);
  text-align: center;
}
.case-study__crest img { max-height: 62px; width: auto; }
.case-study__crest span {
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}

.case-study__impact {
  background: var(--navy); color: var(--white);
  border-radius: var(--radius); padding: var(--s-4) var(--s-3);
  text-align: center;
}
.case-study__impact .label {
  display: block; font-size: .625rem; font-weight: var(--w-bold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--light-blue);
}
.case-study__impact b {
  display: block; margin-top: .4rem;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
  font-weight: var(--w-bold); color: var(--gold);
  line-height: 1.05; letter-spacing: -0.03em;
}
.case-study__impact small {
  display: block; margin-top: .4rem;
  font-size: var(--t-caption); color: var(--on-navy-dim); line-height: 1.35;
}
@media (max-width: 780px) { .case-study { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   22. Third-party reviews
   -------------------------------------------------------------------------- */
.review-links { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.review-link {
  display: flex; align-items: center; gap: .8rem;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 1rem 1.4rem;
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.review-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); color: var(--navy); }
.review-link svg { color: var(--gold); flex-shrink: 0; }
.review-link b { display: block; font-weight: var(--w-demi); font-size: var(--t-small); color: var(--navy); }
.review-link span { display: block; font-size: var(--t-caption); color: var(--dark-gray); margin-top: .1rem; }

/* --------------------------------------------------------------------------
   23. Platinum as the primary tier
   -------------------------------------------------------------------------- */
.tier--premier {
  border-color: var(--navy);
  box-shadow: 0 4px 12px rgba(11,35,70,.18), 0 28px 60px rgba(11,35,70,.22);
}
.tier--premier .tier__head { background: var(--navy); border-bottom-color: rgba(255,255,255,.14); }
.tier--premier .tier__name { color: var(--white); }
.tier--premier .tier__for { color: var(--light-blue); }
.tier--premier .tier__stats b { color: var(--gold); }
.tier--premier .tier__stats span { color: var(--on-navy-dim); }
.tier--premier .tier__flag { background: var(--gold); color: var(--navy); }

/* Keep the CTA row aligned across cards even when checklists differ in length. */
.tiers .tier__body .checklist { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   24. Education list — institution first, degree beneath
   -------------------------------------------------------------------------- */
.edu-list { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .95rem; }
.edu-list li {
  display: grid; gap: .1rem;
  padding-bottom: .95rem; border-bottom: 1px solid var(--hairline);
}
.edu-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.edu-list b {
  font-size: var(--t-small); font-weight: var(--w-bold);
  color: var(--navy); letter-spacing: -0.005em; line-height: 1.3;
}
.edu-list span { font-size: var(--t-caption); color: var(--slate); line-height: 1.4; }
.edu-list em { font-style: italic; color: var(--gold-700); font-weight: var(--w-demi); }
.edu-list__logo { height: 26px; width: auto; margin-bottom: .3rem; }