/* ==========================================================================
   Greenhills — Premium visual refinement
   Layered ON TOP of styles.css. Architecture, markup and behaviour are
   untouched; this file only changes visual language, so it can be removed
   with one <link> if the direction is rejected.

   Grounded in an audit of greenhillssby.com's compiled theme CSS, not taste:
     font-weight 500 → 333 uses, 400 → 328, but 700 → only 10
     letter-spacing 1.7px → 250 uses, 0.6px → 244
     navy #13284d → 437 uses, sage #9ebba5 → 329
   The old site reads as premium because it is almost entirely 400/500 weight
   with wide tracking and air — not because of a different typeface. It loads
   the SAME two families this site already does (Manrope + Bitter), so the
   refinement adds ZERO font payload.
   ========================================================================== */

:root {
  /* Sage, sampled from the reference theme. Secondary only — navy stays the
     identity colour and sage never becomes a background wash. */
  --sage: #9ebba5;
  --sage-deep: #6f9179;
  --sage-tint: #eef3ef;
  --sage-line: rgba(158, 187, 165, .45);

  /* Editorial serif for major headings, sans for everything functional.
     CORRECTION: the reference site's display face is ITC Galliard Pro,
     self-hosted via @font-face in its theme CSS — not Bitter, which I first
     assumed from its Google Fonts link. Galliard is a Garamond-lineage serif
     with fine tapered serifs; Bitter is a SLAB serif built for small-size
     screen legibility, so its heavy rectangular serifs read as chunky at
     display sizes. Galliard is commercially licensed, so the honest free
     equivalent is Cormorant Garamond — same Garalde skeleton, high contrast,
     designed specifically for large display use.
     Swapped 1:1 for Bitter's four weights, so payload is unchanged. */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;

  --rule: rgba(8, 27, 49, .12);
  --tracking-eyebrow: .18em;

  /* Slower, fewer, calmer. */
  --ease-editorial: cubic-bezier(.22, .61, .36, 1);
}

/* ── Typography ───────────────────────────────────────────────────────────
   The inversion that does most of the work: editorial serif headings over a
   clean sans body. styles.css had these the other way round — sans headings
   on serif body — which reads as a product site rather than a prospectus. */
body {
  font-family: var(--font-sans);
  font-size: clamp(1rem, .96rem + .22vw, 1.075rem);
  line-height: 1.72;
  font-weight: 400;
  color: #2b3540;
}

h1, h2, h3 {
  font-family: var(--font-display);
  /* Cormorant's optical size runs small and its strokes are fine, so it wants
     more scale and less weight than a slab would. 400 is the display weight. */
  font-weight: 400;
  letter-spacing: .012em;
  /* Deliberately NO colour here. Headings inherit, and several contexts are
     light-on-dark (hero, .dark, .quote-panel, .admission-cta, footer).
     Setting navy globally made the hero H1 nearly invisible. */
}
.section:not(.dark) .section-head h2,
.section:not(.dark) h3 { color: var(--navy-950); }
h1 { line-height: 1.02; font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem); }
h2 {
  line-height: 1.12;
  font-size: clamp(2.1rem, 1.5rem + 2.9vw, 3.5rem);   /* up from ~2.75rem max */
}
h3 { font-weight: 500; letter-spacing: .015em; }

/* Eyebrow / section label — the tracked uppercase signature. */
.section-kicker,
.hero-breadcrumb,
.house-tag,
.job-status,
.review-head .section-kicker {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase;
}
.section-kicker {
  position: relative;
  display: inline-block;
  font-size: .7rem !important;
  color: var(--blue-700) !important;
  margin-bottom: 1.1rem !important;
  padding-bottom: .85rem;
}
/* A short rule under the label, drawn in sage — the old site's thin-line
   detail, used to establish hierarchy before the heading. */
.section-kicker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.25rem;
  height: 1px;
  transform: translateX(-50%);
  background: var(--sage-deep);
}
.section-copy .section-kicker::after,
.review-head .section-kicker::after { left: 0; transform: none; }
.section-head { max-width: 780px; }
.section-head h2 { letter-spacing: .005em; }

/* Supporting paragraphs: quieter, roomier. */
.section-head p:not(.section-kicker),
.section-copy p:not(.section-kicker) {
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.78;
  color: #5a6672;
}

/* ── Vertical rhythm ─────────────────────────────────────────────────────
   Premium reads as air. Roughly +25% between major sections. */
.section { padding: clamp(4.75rem, 9vw, 9rem) clamp(1.25rem, 5vw, 4rem); }
.section-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .012em;
  line-height: 1.0;
  font-size: clamp(2.9rem, 1.9rem + 4.6vw, 5.6rem);
}
.hero-line {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(.72rem, .68rem + .3vw, .84rem);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.35rem;
}
.hero-copy {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, .95rem + .35vw, 1.14rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .86);
}
.page-hero h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: .012em; }
.page-hero p { font-family: var(--font-sans); }

/* ── Buttons ──────────────────────────────────────────────────────────────
   Tighter radius, no lift, no heavy shadow. The pill shape is what read as
   "app"; a 3px radius reads as print. */
.primary-button, .ghost-button, .light-button,
.outline-button, .outline-light-button, .text-button, .film-button {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: .95rem 1.6rem;
  transition: background .28s var(--ease-editorial),
              color .28s var(--ease-editorial),
              border-color .28s var(--ease-editorial);
}
.primary-button {
  background: var(--navy-950);
  box-shadow: none;
}
/* NB: do NOT use var(--accent-hover) here. redesign.css redefines the accent
   tokens per skin, and under data-skin="navy" --accent-hover is #155e35 —
   a dark green. Reading the token made every primary button turn green on
   hover. Hover is a lighter navy, stated literally so no skin can change it. */
.primary-button:hover {
  background: #16324e;
  transform: none;            /* no lift */
  box-shadow: none;
}
/* Secondary: muted sage ground, navy type — straight from the reference. */
.light-button, .outline-button {
  background: var(--sage-tint);
  border-color: var(--sage-line);
  color: var(--navy-950);
  box-shadow: none;
}
.light-button:hover, .outline-button:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--navy-950);
  transform: none;
}
.outline-light-button {
  border-color: rgba(255, 255, 255, .5);
  background: transparent;
}
.outline-light-button:hover { background: rgba(255, 255, 255, .12); transform: none; }
.large { padding: 1.05rem 1.9rem; }

/* Header CTA stays compact and quiet. */
.header-actions .primary-button { font-size: .74rem; padding: .72rem 1.15rem; }
.header-actions .ghost-button { font-size: .74rem; padding: .72rem 1.05rem; }

/* ── Navigation ──────────────────────────────────────────────────────────
   Lighter, wider, less dense. Behaviour untouched. */
.main-nav .nav-list > li > a,
.main-nav .nav-trigger {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .86rem;
  letter-spacing: .045em;
  opacity: 1;
  color: inherit;
}
@media (min-width: 1101px) {
  .main-nav .nav-list { gap: .55rem; }
  .nav-sub {
    border-radius: 3px;
    border-color: var(--rule);
    box-shadow: 0 18px 44px rgba(8, 27, 49, .12);
    padding: .4rem;
  }
  .nav-sub a {
    border-radius: 2px;
    font-weight: 500;
    font-size: .855rem;
    letter-spacing: .02em;
    padding: .65rem .8rem;
  }
  .nav-sub a:hover { background: var(--sage-tint); }
  .nav-sub-cta {
    border-radius: 2px;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
  }
}

/* ── Trust strip ─────────────────────────────────────────────────────────
   This block floats over the hero photograph, so it is one of the few places
   containment is genuinely earned — it keeps a ground. Refined rather than
   removed: square corners, no shadow, and the existing 1px grid gaps now
   read as hairline rules against a lighter divider colour. */
.trust-strip {
  border-radius: 2px;
  box-shadow: 0 18px 50px rgba(6, 22, 37, .16);
  background: var(--rule);
}
.stat {
  background: var(--warm-white);
  padding: 1.35rem 1.5rem;
  text-align: left;
}
.stat strong {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--navy-950);
}
.stat span {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .66rem;
  color: #6b7681;
}

/* ── Highlights / reason grid: cards → editorial rules ───────────────────
   The reference's Highlights block is a titled column of thin-separated
   rows beside a large photograph. Same idea here: drop the tile, keep the
   separator. */
.reason-grid { gap: 0; }
.reason-grid article {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  padding: 1.75rem 0;
}
.reason-grid article:first-child {
  border-top: 0;
  padding-top: 0;
  /* styles.css gives the first highlight a 4px accent bar and makes it span
     two columns — a "featured tile" treatment that fights the editorial rule
     rhythm. Neutralised so all highlights read as one list. */
  border-left: 0;
  grid-column: auto;
  background: transparent;
}
.reason-grid article h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--navy-950);
  margin-bottom: .55rem;
}
.reason-grid article p { color: #5a6672; line-height: 1.75; }

/* ── Cards that remain: quieter containment ─────────────────────────── */
.content-card, .impact-card, .profile-card, .routine-card,
.form-card, .fee-card, .disc-card, .house-card, .job-card, .apply-card {
  border-radius: 4px;
  box-shadow: none;
  border-color: var(--rule);
}
.content-card:hover, .impact-card:hover, .profile-card:hover,
.house-card:hover, .job-card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(8, 27, 49, .24);
}
.content-card img, .impact-card img { border-radius: 2px; }

/* ── Photography: let it be rectangular ─────────────────────────────── */
.campus-map-card, .tab-panel img, .campus-image {
  border-radius: 2px;
  box-shadow: none;
}
.campus-map-card { border-color: var(--rule); padding: 0; }

/* ── Quote / testimonial ─────────────────────────────────────────────── */
.quote-panel, .testimonial-card blockquote, .review-card p {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}
.quote-panel { border-radius: 4px; }
.review-card p { line-height: 1.55; }
.review-person h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
}

/* ── Journey cards ───────────────────────────────────────────────────── */
.journey-card { border-radius: 3px; }
.journey-stage {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--sage);
}
.journey-grade {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .02em;
}
.journey-reveal h3 { font-family: var(--font-display); font-weight: 500; }

/* ── Admissions CTA ──────────────────────────────────────────────────── */
.admission-cta { border-radius: 4px; box-shadow: none; }
.admission-cta h2 { font-family: var(--font-display); font-weight: 400; }
.admission-cta p { font-family: var(--font-sans); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { padding: clamp(3.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem) 3rem; }
.site-footer h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1rem;
}
.site-footer a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: .875rem;
  color: rgba(255, 255, 255, .72);
  transition: color .25s var(--ease-editorial);
}
.site-footer a:hover { color: #fff; }
.site-footer p { font-family: var(--font-sans); }

/* ── Motion: slower, fewer ───────────────────────────────────────────── */
.reveal, .reveal-up, .reveal-scale, .reveal-left, .reveal-right {
  transition: opacity 1.05s var(--ease-editorial), transform 1.05s var(--ease-editorial);
}
.reveal-up { transform: translateY(22px); }        /* was 40px */
.reveal-scale { transform: scale(.985); }          /* was .95 */
.reveal-left { transform: translateX(-22px); }
.reveal-right { transform: translateX(22px); }
.reveal-stagger > * { transition: opacity 1.05s var(--ease-editorial), transform 1.05s var(--ease-editorial); transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-scale, .reveal-left, .reveal-right,
  .reveal-stagger > *, .primary-button, .light-button, .outline-button { transition: none; }
}

/* ── Mobile: the refinement has to survive small screens ─────────────── */
@media (max-width: 680px) {
  .section { padding: 3.75rem 1.25rem; }
  .section-kicker { font-size: .66rem !important; }
  .section-kicker::after { left: 0; transform: none; }
  .section-head { text-align: left; }
  .section-head h2 { font-size: clamp(1.6rem, 1.2rem + 2.6vw, 2.1rem); }
  .hero h1 { font-size: clamp(2.2rem, 11vw, 3.2rem); line-height: 1.08; }
  .hero-line { font-size: .68rem; }

  .stat { padding: 1.1rem 1.15rem; }

  .primary-button, .light-button, .outline-button,
  .outline-light-button, .ghost-button { font-size: .76rem; padding: .95rem 1.25rem; }
  .reason-grid article { padding: 1.4rem 0; }
}

/* ==========================================================================
   GREEN CLEANUP
   The palette had three bright greens (#2e7d32 / #4caf50 / #1b5e20) scattered
   across 39 rules in four stylesheets. Everything below re-points UI green at
   navy (primary) or sage (secondary), so the system is navy + white + sage.

   Deliberately NOT changed:
     · .gh-fab .gh-wa — WhatsApp's own brand green. Recolouring a third-party
       brand mark would misrepresent it.
     · photography and the crest artwork.
   ========================================================================== */

/* ── Focus rings ─────────────────────────────────────────────────────────
   Sage alone is too light to be a reliable focus indicator, so focus uses
   navy with a white offset ring — visible on both light and dark grounds. */
.primary-button:focus-visible, .ghost-button:focus-visible,
.light-button:focus-visible, .outline-button:focus-visible,
.outline-light-button:focus-visible, .text-button:focus-visible,
.film-button:focus-visible, .nav-toggle:focus-visible,
.main-nav .nav-list > li > a:focus-visible,
.main-nav .nav-trigger:focus-visible,
.nav-sub a:focus-visible {
  outline: 2px solid var(--navy-950);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85);
}
.dark .primary-button:focus-visible,
.dark .outline-light-button:focus-visible,
.page-hero .primary-button:focus-visible,
.page-hero .outline-light-button:focus-visible,
.hero .primary-button:focus-visible,
.hero .outline-light-button:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(6, 22, 37, .55);
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.main-nav a:hover,
.main-nav .nav-trigger:hover,
.nav-item.open > .nav-trigger { color: var(--sage-deep); }
.nav-sub a[aria-current="page"] { background: var(--sage-tint); color: var(--navy-950); }
.nav-sub-cta { background: var(--navy-950) !important; }
.nav-sub-cta:hover { background: var(--sage-deep) !important; }

/* ── Tabs / filters: navy, and no longer pills ─────────────────────────── */
.tab-list button, .filter-bar button, .staff-filter button {
  border-radius: 2px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .7rem 1.15rem;
  border-color: var(--rule);
  background: transparent;
  color: var(--navy-850);
  transition: background .28s var(--ease-editorial), color .28s var(--ease-editorial), border-color .28s var(--ease-editorial);
}
.tab-list button:hover, .filter-bar button:hover, .staff-filter button:hover {
  background: var(--sage-tint);
  border-color: var(--sage-line);
}
.tab-list button.active, .filter-bar button.active, .staff-filter button.active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: #fff;
}
/* Inside the dark School Life section the row sits on navy, so the buttons
   invert: light outline resting, white fill when active. */
.dark .tab-list button {
  background: transparent;
  border-color: rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .88);
}
.dark .tab-list button:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.dark .tab-list button.active {
  background: #fff;
  border-color: #fff;
  color: var(--navy-950);
}

/* ── Accents, rules and markers ─────────────────────────────────────────── */
.check-list li:before { background: var(--sage-deep); }
.dark .section-kicker { color: var(--sage) !important; }
.dark .section-kicker::after { background: var(--sage); }
.routine-card li { border-left-color: var(--sage-line); }
.routine-card li:hover { border-left-color: var(--sage-deep); }
.routine-card span { color: var(--navy-850); }
.boarding-preview::before { background: linear-gradient(180deg, var(--sage), rgba(158, 187, 165, 0)); }
.page-hero::after { background: linear-gradient(90deg, var(--sage), rgba(158, 187, 165, 0)); }
.page-hero .hero-breadcrumb { color: var(--sage); }
.hero-breadcrumb a { color: var(--sage); }

/* redesign.css paints a green bar on trust stats and highlight items. */
.trust-strip .stat::before,
.reason-grid article::before { background: var(--sage) !important; }

/* Floating register rail — UI, not brand. */
.social-sidebar .register-btn { background: var(--navy-950); }
.social-sidebar .register-btn:hover { background: var(--sage-deep); }

/* Announcement ribbon accents (conversion.css falls back to a gold). */
.gh-announce a.gh-announce-cta { color: var(--sage); }
.gh-announce .gh-dot { background: var(--sage); box-shadow: none; animation: none; }

/* ── Highlights: single editorial column ────────────────────────────────
   Two columns produced staggered rules (each item's border sits at its own
   content top) and left an empty fifth cell. The reference is a single
   vertical list beside a large image — which also makes every rule align by
   construction rather than by luck. */
.reason-grid {
  grid-template-columns: 1fr !important;
  gap: 0;
}
.reason-grid article {
  grid-column: auto !important;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.reason-grid article:first-child { border-top: 0; padding-top: 0; }
.reason-grid article:last-child { padding-bottom: 0; }
.reason-grid article h3 { margin-bottom: .4rem; }
.reason-grid article p { margin: 0; }

@media (max-width: 680px) {
  .tab-list button, .filter-bar button, .staff-filter button {
    font-size: .68rem;
    padding: .62rem .9rem;
  }
  .reason-grid article { padding: 1.25rem 0; }
}

/* A 4% bright-green wash on the Boarding section — barely visible, but it is
   still the legacy hue tinting a whole band. Re-cast in sage. */
.boarding-preview {
  background: linear-gradient(135deg, rgba(158, 187, 165, .16), rgba(6, 22, 37, .03));
  /* The hairlines top and bottom were green too — easy to miss because they
     are 12% alpha, but they framed the whole band in the legacy hue. */
  border-top-color: var(--sage-line);
  border-bottom-color: var(--sage-line);
}

/* ==========================================================================
   THREE CORRECTIONS
   ========================================================================== */

/* 1 — Section labels were gold, not sage.
   redesign.css re-defines --blue-700 as #c39a4e ("kickers -> gold") on the
   navy skin. My kicker rule read that variable, so every light-section label
   inherited gold. Only .dark kickers looked right because those were pinned
   to sage explicitly. Pin the light ones too, with a sage dark enough to pass
   contrast on white (#46614f ≈ 6.8:1 — AA at small uppercase sizes; the
   lighter --sage-deep only reaches ~3.5:1). */
:root { --sage-ink: #46614f; }

.section-kicker { color: var(--sage-ink) !important; }
.section-kicker::after { background: var(--sage-ink); }
.dark .section-kicker { color: var(--sage) !important; }
.dark .section-kicker::after { background: var(--sage); }

/* 2 — Navigation hover was green text.
   Recolouring the label is the problem: any single hue has to work both on
   the white scrolled header and over the hero photograph. Drop the colour
   change entirely and use a sage underline instead — legible on either
   ground, and the restrained line interaction the direction called for. */
.main-nav .nav-list > li > a,
.main-nav .nav-trigger { position: relative; }
.main-nav .nav-list > li > a::after,
.main-nav .nav-trigger::after {
  content: "";
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: .28rem;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: center;
  transition: opacity .28s var(--ease-editorial), transform .28s var(--ease-editorial);
}
.main-nav .nav-list > li > a:hover::after,
.main-nav .nav-trigger:hover::after,
.nav-item.open > .nav-trigger::after { opacity: .55; transform: scaleX(1); }

/* Colour now stays inherited on hover — no green. */
.main-nav a:hover,
.main-nav .nav-trigger:hover,
.nav-item.open > .nav-trigger { color: inherit; }
/* The current section keeps a quiet sage marker rather than a colour shift. */
.main-nav .nav-trigger.is-active-section::after { opacity: .4; transform: scaleX(1); }

/* The caret is a glyph, not a label — exclude it from the underline. */
.nav-caret { position: relative; z-index: 1; }

/* 3 — Register rail: secondary, not another navy block.
   It sat in navy, the same weight as the header's primary CTA. Give it the
   sage secondary treatment so the two CTAs read as different offers. */
.social-sidebar .register-btn {
  background: var(--sage);
  color: var(--navy-950);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 2px 0 0 2px;
  transition: background .28s var(--ease-editorial);
}
.social-sidebar .register-btn:hover { background: var(--sage-deep); color: #fff; }

/* ==========================================================================
   SITEWIDE ROLLOUT — accent token neutralisation
   --------------------------------------------------------------------------
   styles.css:17-19 defines the legacy palette:
       --accent:#2e7d32  --accent-soft:#4caf50  --accent-hover:#1b5e20
   Those three names are read by ~48 rules across styles/nav/careers/fees/
   apply/disclosures/lead-capture/conversion.css — buttons, list bullets,
   badges, stripes, focus rings, active nav states.

   This file loads LAST, so redefining the three names here recolours every
   one of those call sites at once. Patching the call sites individually
   would have been 48 opportunities to miss one, and any new rule written
   against the token later would reintroduce green. Owning the token is the
   only fix that also covers code not yet written.

   Reverting = delete refine.css and the green returns exactly as before.
   ========================================================================== */
:root {
  --accent: #0a1f3a;        /* was #2e7d32. Background for white text in 6+
                               rules, so it must stay dark: navy is 15.2:1. */
  --accent-hover: #16324e;  /* was #1b5e20. One step lighter than --accent so
                               hover still reads as a state change. */
  --accent-soft: #9ebba5;   /* was #4caf50. Used as TEXT on dark grounds and
                               as a border/gradient stop — sage is 7.8:1 on
                               navy. NOT suitable for focus rings on white
                               (2.0:1), which is why they are restated below. */
}

/* Focus rings previously used --accent-soft, which as sage would fail the
   3:1 non-text contrast minimum on a white ground. WCAG 2.2 judges a focus
   indicator against what it sits on, so the ring gets its own darker sage
   and is stated after the token block to win on cascade order. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
}
/* On dark grounds the darker sage is too close to the background, so the
   ring flips to the lighter tone there. */
.dark a:focus-visible,      .dark button:focus-visible,
.page-hero a:focus-visible, .page-hero button:focus-visible,
footer a:focus-visible,     footer button:focus-visible {
  outline-color: var(--sage);
}

/* The legacy primary button carried a green-tinted drop shadow written as a
   literal rgba(46,125,50,.28) — a token override cannot reach that. */
.primary-button,
.nav-sub-cta,
.hero-actions .primary-button { box-shadow: none !important; }

/* Interior-page hero CTAs sit on a dark photographic ground. --accent used to
   be bright green, which carried its own contrast; navy does not — on
   /boarding the button went near-invisible against the hero overlay. So the
   primary CTA flips to the light treatment (sage ground, navy type, 8.9:1).

   SCOPE: .page-hero ONLY — deliberately not .hero. The homepage hero is the
   single .hero in the codebase (every interior page uses .page-hero), and it
   keeps the navy fill, which reads better over the video hero's lighter,
   busier frame. .hero-actions is NOT in this selector: it appears in both
   hero types, so matching on it would drag the homepage in too. Nesting
   already covers it — the div sits inside .hero or .page-hero respectively. */
.page-hero .primary-button {
  background: var(--sage);
  color: var(--navy-950);
}
.page-hero .primary-button:hover {
  background: #fff;
  color: var(--navy-950);
}

/* ── Brand lockup ─────────────────────────────────────────────────────────
   The wordmark was Manrope 700 — the one remaining piece of the old
   geometric-sans language, sitting directly beside the crest and reading as
   a product logo rather than a school. The institutional convention is a
   serif name over a tracked sans descriptor, which is also what the
   reference site does.

   Sizes are raised ~22%: Cormorant's optical size runs smaller than
   Manrope's at equal font-size, so a 1:1 swap would have shrunk the
   wordmark next to the crest. clamp() replaces the base stylesheet's
   fixed desktop/mobile pair — refine.css loads last, so its unmediated
   rule would otherwise beat the narrow-viewport override. */
.brand strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.22rem, 1.06rem + .52vw, 1.44rem);
  letter-spacing: .012em;
}
/* "The" as a small serif italic — the traditional article treatment, and it
   stops the word competing with the name for attention. */
.brand .brand-the {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: .62em;
  letter-spacing: .01em;
  opacity: .82;
}
/* Descriptor stays sans and tracked: it is a label, not part of the name. */
.brand small {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(.6rem, .55rem + .16vw, .69rem);
  letter-spacing: .2em;
}