/* =========================================================================
   GENEVA ACADEMY · EDITORIAL DESIGN SYSTEM
   Inspired by elite prep school institutional design (Lawrenceville, Choate,
   Phillips Exeter) and editorial magazines (Harvard Magazine, The Atlantic).
   ========================================================================= */

:root {
  /* Brand palette — preserved navy & crimson, deepened for print-grade contrast */
  --navy: #19224b;              /* primary brand */
  --navy-deep: #0e1430;         /* hero/cta backgrounds */
  --navy-soft: #2a3669;         /* hover states */
  --crimson: #7a1024;           /* accent — deepened from #891528 for AAA on cream */
  --crimson-deep: #5c0a18;
  --gold: #a37e3a;              /* hairline rules, eyebrows, ornaments */
  --gold-soft: #c8a96b;

  /* Sticky site header height, subtracted from the full-screen hero heights */
  --header-h: 80px;

  /* Neutral palette — warm, paper-toned */
  --paper: #faf8f3;             /* primary page bg, warm ivory */
  --paper-deep: #f1ebde;        /* alternate bg, vellum */
  --cream: #f6f1e7;             /* hero scrim & inset cards */
  --ink: #0e1116;               /* primary text — near-black */
  --ink-soft: #2a2f3a;          /* secondary text */
  --ink-mute: #5b606b;          /* tertiary text, meta */
  --rule: #d4cfc2;              /* hairline borders */
  --rule-soft: #e8e3d6;

  /* Type stacks — the site uses exactly TWO families:
     Cormorant Garamond (display/headings) + Source Serif 4 (body + all UI).
     --font-sans is kept as an alias of the serif so existing rules resolve
     to Source Serif without touching every declaration. */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-serif: var(--font-source-serif), "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-sans: var(--font-source-serif), "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* Fluid type scale (clamp: min, preferred, max) — modular ~1.25 */
  --fs-eyebrow: 0.75rem;        /* 12px small caps eyebrows */
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);     /* 16–17 */
  --fs-lede: clamp(1.125rem, 1.0rem + 0.6vw, 1.375rem);   /* 18–22 */
  --fs-h4: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);     /* 20–26 */
  --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);        /* 24–36 */
  --fs-h2: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);           /* 32–56 */
  --fs-h1: clamp(2.75rem, 1.8rem + 4.4vw, 5.75rem);       /* 44–92 */
  --fs-display: clamp(3rem, 1.8rem + 6vw, 7.5rem);        /* 48–120 hero */

  /* Spatial scale (8pt grid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* Layout */
  --container: 1480px;
  --container-narrow: 1100px;
  --container-text: 720px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-flow: cubic-bezier(0.6, 0.01, 0.05, 1); /* heavy, cinematic ease for scroll reveals — the site's "flow" */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}

@theme inline {
  --color-navy: var(--navy);
  --color-navy-deep: var(--navy-deep);
  --color-crimson: var(--crimson);
  --color-gold: var(--gold);
  --color-paper: var(--paper);
  --color-cream: var(--cream);
  --color-ink: var(--ink);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-serif: var(--font-source-serif), Georgia, serif;
  --font-sans: var(--font-source-serif), Georgia, serif;
}

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--navy);
  color: var(--paper);
}

/* -------------------------------------------------------------------------
   ACCESSIBILITY: SKIP LINK + FOCUS
   ------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100000;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--gold-soft);
  outline-offset: 2px;
}

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

/* Remove default outline only when we have :focus-visible coverage */
:focus:not(:focus-visible) {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   EDITORIAL PRIMITIVES
   ------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.container-text {
  width: 100%;
  max-width: var(--container-text);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* Eyebrow: small caps label, no rule */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  line-height: 1;
}

.eyebrow--gold {
  color: var(--gold);
}

.eyebrow--light {
  color: var(--gold-soft);
}

/* Display headlines */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-style: normal;
  color: var(--paper);
  font-feature-settings: "ss01", "ss02";
}

.display-xl em {
  font-style: italic;
  font-weight: 300;
  font-feature-settings: "ss01";
}

.h-display {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

.h-display em {
  font-style: italic;
  font-weight: 300;
}

.h-section {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

.h-section em {
  font-style: italic;
}

/* Ghost word: the oversized, faded display word that sits above an eyebrow +
   section heading (e.g. "Heritage" over "Our Story"). Single source of truth
   for the treatment — change it here and every section intro updates. Left is
   the default; add .ghost-word--right to flip it toward a photo on the right. */
.ghost-word {
  overflow: visible;
  pointer-events: none;
  line-height: 0.75;
  margin-bottom: 0.2rem;
}

.ghost-word__text {
  display: block;
  text-align: left;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(4.5rem, 13vw, 13rem);
  letter-spacing: 0.005em;
  color: var(--navy);
  opacity: 0.07;
}

.ghost-word--right .ghost-word__text {
  text-align: right;
}

/* In-content interlink: contextual links woven into body prose. Colored +
   medium weight so they read as links without a busy permanent underline;
   the underline appears on hover/focus. */
.ilink {
  color: var(--crimson);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.ilink:hover,
.ilink:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(139, 0, 0, 0.45);
}
/* On dark hero copy the crimson link is unreadable — match the surrounding
   light text instead, so the sentence stays one color (white). */
.hero-lede .ilink {
  color: inherit;
}
.hero-lede .ilink:hover,
.hero-lede .ilink:focus-visible {
  text-decoration-color: currentColor;
}

/* Click-to-play video card, pinned to a hero corner (bottom-right on desktop,
   top-right on phones so it clears the hero buttons). The YouTube iframe is only
   loaded on click (see main.js initVideoFacades). */
.hero-video {
  position: absolute;
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  z-index: 2;
  width: clamp(200px, 26vw, 320px);
  aspect-ratio: 16 / 9;
  margin: 0; padding: 0; border: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #0e1430;
  color: var(--paper);
  box-shadow: 0 24px 50px -20px rgba(7, 22, 51, 0.65), 0 0 0 1px rgba(250, 248, 243, 0.16);
  isolation: isolate;
}
.hero-video__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: 0.85; display: block;
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 16, 28, 0.6), rgba(8, 16, 28, 0.05) 55%);
}
.hero-video:hover .hero-video__thumb,
.hero-video:focus-visible .hero-video__thumb { opacity: 1; transform: scale(1.05); }
.hero-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139, 0, 0, 0.92); color: #fff;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, background 0.3s ease;
}
.hero-video:hover .hero-video__play,
.hero-video:focus-visible .hero-video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--crimson); }
.hero-video__play svg { margin-left: 3px; }
.hero-video__label {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-align: left;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.hero-video:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
.hero-video--playing { background: #000; cursor: default; }
.hero-video--playing::after { display: none; }
.hero-video--playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) {
  .hero-video {
    width: clamp(140px, 42vw, 200px);
    bottom: auto; top: clamp(0.75rem, 3vw, 1.25rem);
    right: clamp(0.75rem, 3vw, 1.25rem);
  }
}

.h-card {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.008em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0;
}

.body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Decorative rule utilities removed — design no longer uses dashed/hairline accents */
.rule-gold,
.rule-gold--wide {
  display: none !important;
}

/* Drop cap for editorial paragraphs. The body that follows the cap
   also flows in the display serif so the opening reads as one cohesive
   passage before subsequent paragraphs return to the body serif. */
.dropcap {
  font-family: var(--font-display);
}

.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 400;
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  margin: 0.1em 0.1em 0 0;
  color: var(--crimson);
  font-feature-settings: "ss01";
}

/* Section padding presets */
.section {
  padding-block: clamp(3rem, 7vw, 7rem);
}

.section-tight {
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
}

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */

/* Pill button system: slide-fill hover + rotated arrow that snaps on hover */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 32px;
  min-width: 200px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  border: 0;
  background: transparent;
  color: var(--paper);
  transition:
    color 0.45s var(--ease-out),
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--navy);
  z-index: -2;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  transform: translateX(-105%);
  transition: transform 0.6s var(--ease-out);
  z-index: -1;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:hover::after {
  transform: translateX(0);
}

/* Primary calls-to-action (Apply, Begin Admissions, Donate) — solid crimson
   at rest, slide-fill to navy on hover. */

.btn--primary,
.btn--crimson {
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--crimson);
}
.btn--primary::before,
.btn--crimson::before { background: var(--crimson); }
.btn--primary::after,
.btn--crimson::after  { background: var(--navy); }
.btn--primary:hover,
.btn--crimson:hover {
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--navy);
}

/* Secondary outline buttons on dark backgrounds (Schedule a Visit) */
.btn--ghost {
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(250, 248, 243, 0.45);
}
.btn--ghost::before { background: transparent; }
.btn--ghost::after  { background: var(--paper); }
.btn--ghost:hover {
  color: var(--navy);
  box-shadow: inset 0 0 0 1px transparent;
}

/* Secondary outline buttons on light backgrounds (View All Programs, etc.) */
.btn--ghost-dark {
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.btn--ghost-dark::before { background: transparent; }
.btn--ghost-dark::after  { background: var(--navy); }
.btn--ghost-dark:hover {
  color: var(--paper);
  box-shadow: inset 0 0 0 1px transparent;
}

.btn--text {
  height: auto;
  min-width: 0;
  padding: 0.5rem 0;
  border-radius: 0;
  color: var(--navy);
  letter-spacing: 0.18em;
  box-shadow: inset 0 -1px 0 0 var(--gold);
  isolation: auto;
  overflow: visible;
}
.btn--text::before,
.btn--text::after { display: none; }
.btn--text:hover {
  color: var(--crimson);
  box-shadow: inset 0 -1px 0 0 var(--crimson);
  transform: none;
}

/* Arrow icon — rotated -35° at rest, snaps to 0° + translates on hover */
.btn__arrow {
  display: inline-block;
  transform: rotate(-35deg);
  transition: transform 0.45s var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: rotate(0deg) translateX(4px);
}

/* -------------------------------------------------------------------------
   ENTRANCE ANIMATIONS (reduced-motion-safe via @media above)
   ------------------------------------------------------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes draw {
  from {
    transform: scaleX(0);
    transform-origin: left center;
  }
  to {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

.rise {
  animation: rise var(--dur-slow) var(--ease-out) both;
}

.fade {
  animation: fade var(--dur-slow) var(--ease-out) both;
}

.delay-1 {
  animation-delay: 100ms;
}
.delay-2 {
  animation-delay: 250ms;
}
.delay-3 {
  animation-delay: 400ms;
}
.delay-4 {
  animation-delay: 550ms;
}
.delay-5 {
  animation-delay: 700ms;
}
.delay-6 {
  animation-delay: 850ms;
}

/* -------------------------------------------------------------------------
   FORM ELEMENTS
   ------------------------------------------------------------------------- */

input,
select,
textarea {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   SCROLL PROGRESS INDICATOR (driven by native scroll handler in main.js)
   ------------------------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
}

.scroll-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-soft) 50%,
    var(--crimson) 100%
  );
  transform-origin: left center;
  transition: width 0.08s linear;
  box-shadow: 0 0 12px rgba(163, 126, 58, 0.4);
}

/* -------------------------------------------------------------------------
   REVEAL ON SCROLL (paired with <Reveal>)
   ------------------------------------------------------------------------- */

.reveal {
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms var(--ease-flow) var(--reveal-delay),
              transform 1000ms var(--ease-flow) var(--reveal-delay);
  will-change: opacity, transform;
}

/* A gentle upward drift (with a hint of scale on the scale variant) is the core of
   the site's flowing, cinematic entrance — content settles into place rather than
   simply fading. Distances stay restrained so the motion reads as refined, not busy. */
.reveal--rise { transform: translateY(40px); }
.reveal--fade { transform: translateY(14px); }
.reveal--scale { transform: translateY(24px) scale(0.985); }
.reveal--blur,
.reveal--draw { transform: translateY(24px); }

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   BUTTON MICRO-INTERACTIONS (refined)
   ------------------------------------------------------------------------- */

.btn--primary,
.btn--crimson {
  position: relative;
  overflow: hidden;
}

.btn--primary::after,
.btn--crimson::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 800ms var(--ease-out);
  pointer-events: none;
}

.btn--primary:hover::after,
.btn--crimson:hover::after {
  transform: translateX(100%);
}

.btn--ghost {
  position: relative;
}

.btn--ghost::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--gold-soft);
  transition:
    width 500ms var(--ease-out),
    left 500ms var(--ease-out);
}

.btn--ghost:hover::before {
  width: 100%;
  left: 0;
}

/* -------------------------------------------------------------------------
   HERO PARALLAX & ATMOSPHERE
   ------------------------------------------------------------------------- */

.hero-bg {
  transform: scale(1.05);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
}

/* -------------------------------------------------------------------------
   HEADER BRAND LOCKUP — seal + Fraunces wordmark
   ------------------------------------------------------------------------- */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--navy);
  text-decoration: none;
  transition: opacity 280ms var(--ease-out);
}
.brand-lockup:hover {
  opacity: 0.85;
}

.brand-lockup__seal {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow:
    0 0 0 1px rgba(200, 169, 107, 0.55),
    0 0 0 2.5px rgba(200, 169, 107, 0.12);
}
.brand-lockup__seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-lockup__text {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.brand-lockup__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--navy);
  line-height: 1;
  font-feature-settings: "ss01";
}
.brand-lockup__tagline {
  display: none;
}

/* -------------------------------------------------------------------------
   HEADER PHONE LINK
   ------------------------------------------------------------------------- */

.header-phone {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0 16px 0 0;
  height: 40px;
  text-decoration: none;
  transition: color 280ms var(--ease-out);
  white-space: nowrap;
  flex-shrink: 0;
}
.header-phone:hover {
  color: var(--crimson);
}
.header-phone svg {
  color: var(--gold);
  flex-shrink: 0;
}
.header-phone > span {
  white-space: nowrap;
}

/* Apply button compact size in header */
.header-cta {
  display: none;
  height: 44px;
  min-width: 0;
  padding: 0 22px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
}

@media (min-width: 1100px) {
  .header-cta { display: inline-flex; }
}
/* Phone needs more room — only show it once the row is comfortably wide,
   so it never gets clipped at intermediate widths. */
@media (min-width: 1320px) {
  .header-phone { display: inline-flex; }
}
/* Tighten nav spacing in the 1100–1320 band so menu + Apply always fit. */
@media (min-width: 1100px) and (max-width: 1320px) {
  .nav-link { padding: 14px 12px; letter-spacing: 0.16em; }
}

/* -------------------------------------------------------------------------
   PRIMARY NAV — refined typography + animated underline
   ------------------------------------------------------------------------- */

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 16px;
  transition: color 320ms var(--ease-out);
  text-decoration: none;
  font-feature-settings: "tnum", "ss01";
}

.nav-link__text {
  position: relative;
  display: inline-block;
  /* Tiny weight nudge for legibility */
  transform: translateY(0);
  transition: transform 380ms var(--ease-out);
}

.nav-link__caret {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  opacity: 0.7;
  transition:
    transform 320ms var(--ease-out),
    opacity 320ms var(--ease-out);
}

/* Hover is deliberately text-only: the label roll (.txt-roll) is the whole
   effect — no colour wash, no colour shift, no caret move. The pill below is
   kept for keyboard focus and the active page only. */

/* A soft gold "wash" pill. Shown on keyboard focus (so focus stays visible)
   and, in crimson, for the active page — but NOT on hover. */
.nav-link::before {
  content: "";
  position: absolute;
  inset: 5px 6px;
  border-radius: 999px;
  background: rgba(163, 126, 58, 0.12);
  opacity: 0;
  transform: scale(0.82);
  transform-origin: center;
  transition:
    opacity 300ms var(--ease-out),
    transform 360ms var(--ease-out),
    background-color 300ms var(--ease-out);
  pointer-events: none;
}
.nav-link:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

/* The old underline span is repurposed as a small centered dot,
   shown only for the active page. */
.nav-link__underline {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--crimson);
  opacity: 0;
  transform: scale(0);
  transition:
    transform 320ms var(--ease-out),
    opacity 280ms var(--ease-out);
  pointer-events: none;
}

/* Aria-current active state */
.nav-link[aria-current="page"] {
  color: var(--navy);
}
.nav-link[aria-current="page"]::before {
  opacity: 1;
  transform: scale(1);
  background: rgba(122, 16, 36, 0.08);
}
.nav-link[aria-current="page"] .nav-link__underline {
  opacity: 1;
  transform: scale(1);
}

.nav-sublink:hover {
  color: var(--crimson) !important;
  background-color: var(--paper-deep);
}
/* =========================================================================
   ADDITIONS FOR STATIC HTML BUILD
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base), border-color var(--dur-base);
}
.site-header.header--scrolled {
  background-color: rgba(250, 248, 243, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--rule);
}
/* Mobile & tablet: keep the menu bar solid white (no translucency/blur) so the
   hero never shows through it. Desktop nav starts at 1100px. */
@media (max-width: 1099px) {
  .site-header,
  .site-header.header--scrolled {
    background-color: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
}

.primary-nav { display: none; }
.header-burger { display: inline-flex; width: 48px; height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--navy); }
.header-burger span { display: block; width: 22px; height: 1.5px; background-color: currentColor; }
.header-burger span:last-child { width: 16px; }
@media (min-width: 1100px) {
  .primary-nav { display: block !important; }
  .header-cta { display: inline-flex !important; }
  .header-burger { display: none !important; }
}

.primary-nav ul { display: flex; align-items: center; gap: 0; }
.nav-item { position: relative; }

.nav-megaitem:hover { background-color: rgba(163, 126, 58, 0.06); }
.nav-megaitem:hover > span:first-child { color: var(--crimson); }
.nav-feature:hover .nav-feature__img { transform: scale(1.06); }
.nav-feature:hover .nav-feature__cta { color: var(--paper); }

.nav-dropdown {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  max-width: calc(100vw - 2rem);
  background-color: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 32px 64px -24px rgba(14, 20, 48, 0.28), 0 8px 16px -8px rgba(14, 20, 48, 0.08);
  z-index: 200;
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  pointer-events: none;
  transform-origin: top left;
  transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out);
}
.nav-dropdown.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav-link__caret { transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out); }
.nav-item.is-open .nav-link__caret { transform: rotate(180deg); }

/* ============================================================
   RICH NAV DROPDOWN — hover-driven photo "carousel".
   The left zone keeps the text menu; the right zone is a fixed
   photo STAGE that clips a vertical TRACK of image cards. Hovering
   a menu item slides its card into the stage and lights it up.
   The stage/track/cards are built by main.js (buildNavStage) from
   the `data-img` on each .nav-megaitem, so this works for any
   dropdown whose items carry a photo. Desktop only (nav is hidden
   below 1100px, where the mobile drawer takes over).
   ============================================================ */
.nav-dropdown--rich { width: auto !important; display: flex; align-items: stretch; }
/* Stack the menu links in a single column (overrides the inline multi-column
   grid), so every dropdown reads as one clean list beside the photo stage. */
.nav-dropdown--rich > div:first-child {
  flex: 0 0 auto;
  align-self: center;
  grid-template-columns: 1fr !important;
}
/* Simple photo panel on the right of the dropdown: one image that crossfades
   to the hovered item's photo (built by main.js buildNavStage). Square corners. */
.nav-stage {
  flex: 0 0 300px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  margin: 14px 14px 14px 4px;
  background: var(--paper-deep, #efeae0);
}
.nav-stage__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.2s ease;
}
.nav-stage__img.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .nav-stage__img { transition: none; }
}

/* ============================================================
   MOBILE DRAWER — full-screen editorial LIGHT panel
   Warm paper/vellum with gold + crimson editorial accents.
   ============================================================ */
.mobile-drawer-overlay {
  position: fixed; inset: 0;
  background-color: rgba(14, 20, 48, 0.32);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 300;
}
.mobile-drawer-overlay.is-open { opacity: 1; pointer-events: auto; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(460px, 100vw);
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(200, 169, 107, 0.18) 0%, transparent 52%),
    radial-gradient(110% 75% at 0% 100%, rgba(122, 16, 36, 0.07) 0%, transparent 48%),
    linear-gradient(160deg, var(--paper) 0%, var(--cream) 55%, var(--paper-deep) 100%);
  color: var(--ink);
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 560ms var(--ease-out),
    opacity 360ms var(--ease-out);
  z-index: 400;
  display: flex; flex-direction: column;
  box-shadow: -40px 0 120px -36px rgba(14, 20, 48, 0.4);
  overflow: hidden;
}
.mobile-drawer::before {
  /* gold hairline down the leading edge */
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold) 18%, var(--gold-soft) 50%, var(--gold) 82%, transparent);
  opacity: 0; transition: opacity 600ms var(--ease-out) 200ms;
}
.mobile-drawer::after {
  /* oversized watermark monogram in the corner */
  content: "G";
  position: absolute; right: -2.5rem; bottom: -4rem;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 22rem; line-height: 1; color: rgba(25, 34, 75, 0.05);
  pointer-events: none; user-select: none;
}
.mobile-drawer.is-open { transform: translateX(0); opacity: 1; }
.mobile-drawer.is-open::before { opacity: 1; }

.mobile-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; position: relative; z-index: 2;
  border-bottom: 1px solid var(--rule);
}
.mobile-drawer__head .eyebrow,
.mobile-drawer__head .eyebrow--gold { color: var(--crimson) !important; }
.mobile-drawer__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy); font-size: 22px; border: 1px solid var(--rule);
  border-radius: 999px; background: rgba(255, 255, 255, 0.4);
  transition: transform 400ms var(--ease-out), color 280ms, border-color 280ms, background 280ms;
}
.mobile-drawer__close:hover { color: var(--paper); border-color: var(--crimson); background: var(--crimson); transform: rotate(90deg); }

.mobile-drawer__nav { flex: 1; overflow-y: auto; padding: 18px 0 8px; position: relative; z-index: 2; }
.mobile-drawer__item { border-bottom: 1px solid var(--rule-soft); }

/* Staggered entrance — each row slides + fades when the drawer opens */
.mobile-drawer__item,
.mobile-drawer__cta {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 480ms var(--ease-out), transform 560ms var(--ease-out);
}
.mobile-drawer.is-open .mobile-drawer__item,
.mobile-drawer.is-open .mobile-drawer__cta { opacity: 1; transform: translateX(0); }
.mobile-drawer.is-open .mobile-drawer__item:nth-child(1) { transition-delay: 120ms; }
.mobile-drawer.is-open .mobile-drawer__item:nth-child(2) { transition-delay: 175ms; }
.mobile-drawer.is-open .mobile-drawer__item:nth-child(3) { transition-delay: 230ms; }
.mobile-drawer.is-open .mobile-drawer__item:nth-child(4) { transition-delay: 285ms; }
.mobile-drawer.is-open .mobile-drawer__item:nth-child(5) { transition-delay: 340ms; }
.mobile-drawer.is-open .mobile-drawer__item:nth-child(6) { transition-delay: 395ms; }
.mobile-drawer.is-open .mobile-drawer__item:nth-child(7) { transition-delay: 450ms; }
.mobile-drawer.is-open .mobile-drawer__item:nth-child(8) { transition-delay: 505ms; }
.mobile-drawer.is-open .mobile-drawer__cta { transition-delay: 580ms; }

.mobile-drawer__row { display: flex; align-items: stretch; position: relative; }
/* crimson bar that slides in from the left on hover/active */
.mobile-drawer__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--crimson); transform: scaleY(0); transform-origin: top;
  transition: transform 320ms var(--ease-out);
}
.mobile-drawer__row:hover::before { transform: scaleY(1); }

.mobile-drawer__link {
  flex: 1; display: flex; align-items: center;
  padding: 15px 28px; min-height: 54px;
  font-family: var(--font-display); font-size: clamp(24px, 7vw, 30px); font-weight: 300;
  color: var(--navy); letter-spacing: -0.015em; line-height: 1.1;
  position: relative; transition: color 320ms var(--ease-out), padding-left 320ms var(--ease-out);
}
.mobile-drawer__link:hover,
.mobile-drawer__link:active { color: var(--crimson); padding-left: 36px; }

.mobile-drawer__toggle {
  width: 56px; min-height: 54px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 14px; border-left: 1px solid var(--rule-soft);
  transition: transform var(--dur-base) var(--ease-out), color 280ms;
}
.mobile-drawer__toggle { transform: rotate(-90deg); }
.mobile-drawer__toggle:hover { color: var(--crimson); }

/* ----- Sideways drill-down panel (slides in from the right) ----- */
.mobile-drawer__panel {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    /* diagonal light streaks across the gradient */
    linear-gradient(118deg, transparent 30%, rgba(200, 169, 107, 0.12) 33%, transparent 37%),
    linear-gradient(118deg, transparent 50%, rgba(255, 255, 255, 0.06) 53%, transparent 56%),
    linear-gradient(118deg, transparent 68%, rgba(200, 169, 107, 0.09) 71%, transparent 75%),
    linear-gradient(118deg, transparent 84%, rgba(255, 255, 255, 0.05) 87%, transparent 90%),
    radial-gradient(130% 90% at 100% 0%, rgba(200, 169, 107, 0.20) 0%, transparent 55%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 72%, #090d20 100%);
  /* Cool entrance: glide in + fade + subtle zoom */
  opacity: 0;
  transform: translateX(44px) scale(0.97);
  transform-origin: center right;
  visibility: hidden;
  transition:
    transform 560ms var(--ease-out),
    opacity 400ms var(--ease-out),
    visibility 0s linear 560ms;
}
.mobile-drawer__panel.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  visibility: visible;
  transition:
    transform 560ms var(--ease-out),
    opacity 440ms var(--ease-out);
}
/* While a panel is open, the underlying list gently fades + recedes behind it */
.mobile-drawer__head,
.mobile-drawer__nav,
.mobile-drawer__cta {
  transition: opacity 320ms var(--ease-out), transform 460ms var(--ease-out);
}
.mobile-drawer.has-panel-open .mobile-drawer__head,
.mobile-drawer.has-panel-open .mobile-drawer__nav,
.mobile-drawer.has-panel-open .mobile-drawer__cta {
  opacity: 0;
  transform: translateX(-28px) scale(0.96);
  pointer-events: none;
}

.mobile-drawer__back {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 22px 28px; width: 100%; text-align: left;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper);
  background: transparent; border: 0; border-bottom: 1px solid rgba(200, 169, 107, 0.2);
  cursor: pointer; transition: color 240ms var(--ease-out), gap 240ms var(--ease-out);
}
.mobile-drawer__back:hover { color: var(--gold-soft); gap: 18px; }
.mobile-drawer__back .arrow { font-size: 22px; line-height: 1; }

.mobile-drawer__panel-title {
  display: block; padding: 30px 28px 10px;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(36px, 11vw, 52px); line-height: 1; letter-spacing: -0.02em;
  color: var(--paper); text-decoration: none;
  transition: color 280ms var(--ease-out);
}
.mobile-drawer__panel-title:hover { color: var(--gold-soft); }

.mobile-drawer__sub { list-style: none; margin: 0; padding: 14px 0 20px; }
.mobile-drawer__sub a {
  position: relative; display: flex; align-items: center; gap: 18px;
  padding: 18px 28px; min-height: 62px;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 6vw, 26px); line-height: 1.15; letter-spacing: -0.01em;
  color: rgba(250, 248, 243, 0.94);
  border-left: 2px solid transparent;
  opacity: 0; transform: translateX(22px);
  transition: color 280ms, border-color 280ms, background 280ms, padding-left 280ms,
    opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.mobile-drawer__sub a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-soft); flex-shrink: 0; opacity: 0.7;
  transition: transform 280ms var(--ease-out), opacity 280ms, background 280ms;
}
.mobile-drawer__panel.is-active .mobile-drawer__sub a { opacity: 1; transform: translateX(0); }
.mobile-drawer__panel.is-active .mobile-drawer__sub li:nth-child(1) a { transition-delay: 220ms; }
.mobile-drawer__panel.is-active .mobile-drawer__sub li:nth-child(2) a { transition-delay: 270ms; }
.mobile-drawer__panel.is-active .mobile-drawer__sub li:nth-child(3) a { transition-delay: 320ms; }
.mobile-drawer__panel.is-active .mobile-drawer__sub li:nth-child(4) a { transition-delay: 370ms; }
.mobile-drawer__panel.is-active .mobile-drawer__sub li:nth-child(5) a { transition-delay: 420ms; }
.mobile-drawer__panel.is-active .mobile-drawer__sub li:nth-child(6) a { transition-delay: 470ms; }
.mobile-drawer__sub a:hover {
  color: var(--paper); border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(200, 169, 107, 0.16) 0%, transparent 80%);
  padding-left: 34px;
}
.mobile-drawer__sub a:hover::before { transform: scale(1.6); opacity: 1; background: var(--gold); }

.mobile-drawer__cta { padding: 24px 28px 32px; display: grid; gap: 12px; position: relative; z-index: 2; border-top: 1px solid var(--rule-soft); }

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer__item,
  .mobile-drawer__cta { transition: opacity 200ms linear; transform: none; }
  .mobile-drawer::before { transition: none; }
}

.footer-link:hover { color: var(--crimson); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: minmax(0, 1fr) !important; } }

.footer-wordmark { width: 100%; padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem) clamp(0.5rem, 1.5vw, 1.25rem); text-align: center; line-height: 0.95; user-select: none; overflow: hidden; }
.footer-wordmark__row { display: inline-flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: clamp(0.5rem, 1.5vw, 1.25rem); font-family: var(--font-display); font-size: clamp(2.25rem, 9vw, 8.5rem); font-weight: 300; letter-spacing: -0.02em; color: var(--navy); line-height: 0.95; max-width: 100%; }
.footer-wordmark__word { display: inline-block; overflow: hidden; line-height: 1.1; padding-top: 0.16em; padding-bottom: 0.25em; margin-top: -0.16em; margin-bottom: -0.18em; }
.footer-wordmark__word { overflow: visible; }
.footer-wordmark__inner { display: inline-block; transform: none; font-feature-settings: "ss01"; padding-bottom: 0.08em; }
.footer-wordmark__inner--italic { font-style: normal; font-weight: 300; color: var(--crimson); }

.hero-headline { font-family: var(--font-display); font-size: clamp(2rem, 1.1rem + 4.2vw, 5.25rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.018em; color: var(--paper); margin: 0; font-feature-settings: "ss01", "ss02"; }
.hero-headline em { font-style: italic; font-weight: 300; }
@media (min-width: 1100px) { .hero-content { max-width: 580px; } }
@media (min-width: 1400px) { .hero-content { max-width: 640px; } }

.welcome-grid { display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
.welcome-text { padding-top: clamp(0rem, 2vw, 2rem); }
.welcome-headline { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); line-height: 1.08; letter-spacing: -0.014em; }
.welcome-headline em { font-style: italic; font-weight: 300; color: var(--crimson); }
.welcome-figure { margin: 0; position: relative; }
.welcome-figure__frame { position: relative; overflow: hidden; background: var(--navy-deep); aspect-ratio: 4 / 5; }
.welcome-figure__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1400ms var(--ease-out); }
.welcome-figure:hover .welcome-figure__img { transform: scale(1.04); }
.welcome-figure__badge { position: absolute; left: 1.5rem; bottom: 1.5rem; padding: 1rem 1.25rem; background: rgba(14, 20, 48, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; }
.welcome-pullquote { margin: 2.5rem 0 2rem; padding-left: clamp(1.25rem, 2.5vw, 2rem); max-width: 580px; position: relative; }
.welcome-pullquote__mark { position: absolute; left: 0; top: -1.75rem; font-family: var(--font-display); font-style: italic; font-size: 6rem; line-height: 1; color: var(--crimson); opacity: 0.18; pointer-events: none; user-select: none; }
.welcome-pullquote blockquote { margin: 0; }
.welcome-pullquote p { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); line-height: 1.35; font-weight: 400; font-style: italic; color: var(--navy); letter-spacing: -0.005em; margin: 0; }
.welcome-lede.dropcap::first-letter { font-family: var(--font-display); font-weight: 400; float: left; font-size: 5.2em; line-height: 0.82; margin: 0.08em 0.1em 0 0; color: var(--crimson); font-feature-settings: "ss01"; }
@media (min-width: 960px) { .welcome-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; } }

.programs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: start; max-width: 1280px; margin-inline: auto; }
.programs-intro { position: relative; }
.programs-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.programs-cards__col { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); }
@media (min-width: 720px) {
  .programs-cards { grid-template-columns: 1fr 1fr; }
  .programs-cards__col--offset { margin-top: clamp(2rem, 5vw, 5rem); }
}
@media (min-width: 1024px) {
  .programs-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 6rem); }
  .programs-intro { order: 2; }
  .programs-cards { order: 1; }
}
@media (max-width: 1023px) { .programs-intro { position: static; } }

.program-card { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 5; color: var(--paper); text-decoration: none; isolation: isolate; background: var(--navy-deep); }
.program-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out); z-index: 0; }
.program-card:hover .program-card__img { transform: scale(1.025); }
.program-card__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(14,20,48,0.5) 60%, rgba(14,20,48,0.9) 100%);
  transition: background 850ms var(--ease-out);
}
.program-card:hover .program-card__scrim,
.program-card:focus-visible .program-card__scrim {
  background: linear-gradient(180deg, rgba(14,20,48,0.28) 0%, rgba(14,20,48,0.62) 55%, rgba(14,20,48,0.92) 100%);
}
.program-card__rest {
  position: absolute; inset: auto 0 0 0; padding: clamp(1.25rem, 2.5vw, 2rem); z-index: 3;
}
.program-card__grade { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 8px; }
.program-card__title { font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; color: var(--paper); margin: 0; }
/* Description: collapsed at rest, reveals on hover/focus */
.program-card__desc {
  font-family: var(--font-serif); font-size: 14px; line-height: 1.55;
  color: rgba(250, 248, 243, 0.92);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition:
    max-height 900ms var(--ease-out),
    opacity 760ms var(--ease-out) 80ms,
    transform 900ms var(--ease-out) 80ms,
    margin 900ms var(--ease-out);
}
.program-card:hover .program-card__desc,
.program-card:focus-visible .program-card__desc {
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
  margin: 12px 0 0;
}
/* On touch devices, always show the description (no hover to trigger it) */
@media (hover: none) {
  .program-card__desc { max-height: 320px; opacity: 1; transform: none; margin: 12px 0 0; }
}
.program-card__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); padding-bottom: 4px; box-shadow: inset 0 -1px 0 0 var(--gold-soft); align-self: flex-start; transition: color var(--dur-base); }
.program-card__arrow { display: inline-block; transform: rotate(-35deg); transition: transform var(--dur-base) var(--ease-out); }
.program-card:hover .program-card__arrow { transform: rotate(0deg) translateX(3px); }

/* FAQ via <details> */
/* Home-page bare FAQ rows — navy-filled card style matching the footer */
/* Home-page (bare) FAQ rows — scoped to NOT collide with .faq-wrap academics block */
section[aria-labelledby="faq-heading"] .faq-item,
.faq-section .faq-item {
  position: relative;
  border: 1px solid rgba(25, 34, 75, 0.10);
  border-radius: 0; /* sharp corners, matching the site's square photo frames */
  background: var(--navy);
  color: var(--paper);
  overflow: hidden;
  transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}
section[aria-labelledby="faq-heading"] .faq-item + .faq-item,
.faq-section .faq-item + .faq-item { margin-top: 12px; }
section[aria-labelledby="faq-heading"] .faq-item:hover,
.faq-section .faq-item:hover {
  background: #1f2956;
  border-color: rgba(200, 169, 107, 0.45);
  box-shadow: 0 20px 36px -24px rgba(7, 22, 51, 0.55);
}
section[aria-labelledby="faq-heading"] .faq-item[open],
.faq-section .faq-item[open] {
  background: #243262;
  border-color: rgba(200, 169, 107, 0.6);
  box-shadow: 0 28px 56px -28px rgba(7, 22, 51, 0.55);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.3rem);
  font-weight: 500;
  color: var(--paper);
  line-height: 1.3;
  letter-spacing: -0.012em;
  transition: color 200ms ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(200, 169, 107, 0.18);
  color: var(--gold-soft);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  transition: background 260ms ease, color 220ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-item:hover > summary::after {
  background: var(--gold-soft);
  color: var(--navy);
}
.faq-item[open] > summary::after {
  content: "−";
  background: var(--gold-soft);
  color: var(--navy);
  transform: rotate(180deg);
}
.faq-item > div {
  padding: 0 clamp(22px, 2.6vw, 36px) clamp(22px, 2.4vw, 30px);
  font-family: var(--font-serif);
  color: rgba(250, 248, 243, 0.86);
  line-height: 1.7;
  font-size: 16px;
  max-width: 760px;
  border-top: 1px solid rgba(200, 169, 107, 0.18);
  padding-top: clamp(16px, 1.8vw, 24px);
  margin-top: 2px;
}
.faq-item > div em { color: var(--gold-soft); font-style: italic; }
.faq-item > div a {
  color: var(--gold-soft);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  text-decoration: none;
  transition: color 200ms ease;
}
.faq-item > div a:hover { color: var(--paper); }

/* Generic page hero band */
.page-hero { background-color: var(--navy-deep); color: var(--paper); padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 8vh, 6rem); position: relative; overflow: hidden; }
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero .h-display { color: var(--paper); }
.page-hero .lede { color: rgba(250, 248, 243, 0.82); }

/* CTA dark band */
.cta-band { background-color: var(--navy); color: var(--paper); padding: clamp(4rem, 8vw, 6rem) 0; text-align: center; }
.cta-band .h-section { color: var(--paper); max-width: 720px; margin: 0 auto 1.25rem; }
.cta-band .lede { color: rgba(250, 248, 243, 0.82); max-width: 600px; margin: 0 auto 2rem; }
.cta-band .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Two-column section helper */
.split2 { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 880px) { .split2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; } }
.split2 img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* Card grid */
.card-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.flat-card { background: var(--paper-deep); padding: 2rem; border-radius: 8px; }
.flat-card h3 { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--navy); margin: 0 0 0.75rem; font-weight: 400; }
.flat-card p { font-family: var(--font-serif); color: var(--ink-soft); margin: 0; line-height: 1.65; }

/* Header phone & cta inline display */
.site-header .right-cluster { display: flex; align-items: center; gap: 8px; }

/* ===========================
   Recovered page styles
   =========================== */

/* Thin gold rule used on academic-stage page intros */
.rule-divider { display: block; width: 50px; height: 0; border-top: 4px solid var(--gold); margin: 1.25rem auto 1.75rem; }
.rule-divider--inline { width: 60px; margin: 0; border-top-width: 1px; border-top-color: var(--gold); }

/* Two-column feature (image + body) used on K3/K4/K/Logic/Rhetoric pages */
.two-col-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.two-col-feature--top { align-items: start; }
.two-col-feature__media img { width: 100%; height: auto; display: block; }
.two-col-feature__body { font-family: var(--font-serif); font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
.two-col-feature__body p { margin: 0 0 1.25rem; }
.two-col-feature__body h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; color: var(--navy); margin: 1.5rem 0 0.5rem; }
@media (max-width: 760px) {
  .two-col-feature { grid-template-columns: 1fr; }
}

/* Read-more disclosure (used inside two-col feature) */
.read-more { border-bottom: 1px solid var(--rule); margin-top: 0.5rem; }
.read-more > summary {
  list-style: none; cursor: pointer; padding: 12px 0; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); border-top: 1px solid var(--rule);
}
.read-more > summary::-webkit-details-marker { display: none; }
.read-more__plus { display: inline-block; width: 18px; text-align: center; font-weight: 900; font-size: 18px; color: var(--gold); transition: transform 200ms var(--ease-out); }
.read-more[open] > summary .read-more__plus { transform: rotate(45deg); }
.read-more__body { padding: 12px 0 20px; font-family: var(--font-serif); font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
.read-more__body p { margin: 0 0 1.1rem; }
.read-more__body h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--navy); margin: 1.4rem 0 0.5rem; letter-spacing: 0.02em; text-transform: uppercase; }

/* Grade-card grid (Grammar page) */
.grade-grid-section { padding-block: clamp(2rem, 5vw, 4rem); }
.grade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; align-items: stretch; }

.grade-card { background: transparent; border: 1px solid rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; }
.grade-card > summary { list-style: none; cursor: pointer; padding: 0; display: block; }
.grade-card > summary::-webkit-details-marker { display: none; }
.grade-card > summary > img { width: 100%; height: 260px; object-fit: cover; display: block; }
.grade-card__body { padding: 30px 40px 24px; }
.grade-card__eyebrow { display: block; font-family: var(--font-sans); font-size: 13px; color: var(--navy); margin: 0 0 6px; }
.grade-card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.25; color: var(--navy); margin: 0 0 0.75rem; }
.grade-card__blurb { font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.25rem; }
.grade-card__toggle {
  display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--rule);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.grade-card__plus { display: inline-block; width: 18px; text-align: center; font-weight: 900; font-size: 18px; color: var(--gold); transition: transform 200ms var(--ease-out); }
.grade-card[open] .grade-card__plus { transform: rotate(45deg); }
.grade-card__detail { padding: 0 40px 36px; font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.75; color: var(--ink-soft); }
.grade-card__detail h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.3; color: var(--navy); margin: 1.4rem 0 0.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.grade-card__detail p { margin: 0 0 0.85rem; }

/* Parallax band (Logic page, etc.) */
.parallax-band {
  position: relative; width: 100%; min-height: 400px; padding: clamp(4rem, 8vw, 6rem) 1.25rem;
  background-color: rgb(26, 43, 87);
  background-image: url('https://genevaroseburg.com/wp-content/uploads/2023/02/IMG_3244-scaled-3.jpg');
  background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;
  display: flex; align-items: center; justify-content: center;
}
.parallax-band__overlay { position: absolute; inset: 0; background-color: rgba(26, 43, 87, 0.55); }
.parallax-band__quote {
  position: relative; z-index: 1; max-width: 1000px; margin: 0;
  font-family: var(--font-display), Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.25; color: var(--paper); text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .parallax-band { background-attachment: scroll; }
}

/* Faculty grid (teachers-staff page) */
.faculty-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1000px) { .faculty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .faculty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .faculty-grid { grid-template-columns: 1fr; } }
.faculty-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin: 0 0 16px; }
.faculty-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; line-height: 1.25; color: var(--navy); margin: 0 0 6px; letter-spacing: 0.02em; }
.faculty-card p { font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; color: var(--crimson); margin: 0 0 12px; }
.faculty-card a { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.faculty-card a:hover { color: var(--crimson); }

/* Posts grid */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.post-card { background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.post-card__media { display: block; }
.post-card__media img { width: 100%; height: 220px; object-fit: cover; display: block; }
.post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; font-family: var(--font-serif); color: var(--ink-soft); }
.post-card__body h2 { font-family: var(--font-display), Georgia, serif; font-weight: 400; font-size: 1.5rem; line-height: 1.25; color: var(--navy); margin: 0 0 10px; }
.post-card__body h2 a { color: var(--ink-soft); text-decoration: none; }
.post-card__body h2 a:hover { color: var(--crimson); }
.post-card__meta { font-size: 0.8rem; line-height: 1.5; color: var(--navy); margin: 0 0 14px; font-family: var(--font-sans); }
.post-card__body > p { margin: 0; flex: 1; }
.post-card__more { margin: 18px 0 0; }
.post-card__more a { color: var(--navy); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.post-card__more a:hover { color: var(--crimson); }

/* ---------- Why Geneva: School of Athens fresco backdrop ---------- */
.why-section { isolation: isolate; }
.why-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("images/school-of-athens.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  opacity: 0.18;
  filter: saturate(0.55) sepia(0.22) contrast(1.02);
}
.why-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(241,235,222,0.55) 0%, rgba(241,235,222,0.25) 35%, rgba(241,235,222,0.25) 65%, rgba(241,235,222,0.65) 100%);
}
@media (max-width: 640px) { .why-bg { opacity: 0.12; } }

/* Capitalized roman numerals for the three commitments */
.pillar-numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  line-height: 1;
  color: var(--crimson);
  letter-spacing: 0;
  font-feature-settings: "ss01";
}

/* =========================================================================
   MOBILE POLISH — applies across every page (375px → ~640px)
   ========================================================================= */

/* Prevent horizontal overflow from large decorative letters / wide hero bg.
   Use `clip` (not `hidden`) so it does NOT create a scroll container that
   would break the sticky header. */
html, body { overflow-x: clip; }

/* TopBar (the announcement bar above the header) — compact on mobile,
   hide the question text on the smallest screens. */
@media (max-width: 640px) {
  [aria-label="Announcement"] .container {
    gap: 12px !important;
    padding: 8px 1rem !important;
    min-height: 40px !important;
  }
  [aria-label="Announcement"] .container > span:first-child {
    display: none;
  }
  [aria-label="Announcement"] .container a {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
}

/* Header brand lockup — shrink seal + name + shorten tagline on small screens. */
@media (max-width: 480px) {
  .site-header .container { min-height: 64px; gap: 12px; }
  .brand-lockup { gap: 10px; }
  .brand-lockup__seal { width: 36px; height: 36px; }
  .brand-lockup__name { font-size: 16px; }
  .header-burger { width: 44px; height: 44px; }
}

/* Section padding floor on mobile — keep things tight. */
@media (max-width: 640px) {
  .section { padding-block: clamp(2.5rem, 9vw, 3.75rem); }
  .section-tight { padding-block: clamp(2rem, 6vw, 3rem); }
}

/* Buttons — stack full-width below 480px so two buttons don't overflow. */
@media (max-width: 480px) {
  .btn {
    min-width: 0;
    width: 100%;
    height: 52px;
    padding: 0 24px;
    font-size: 12px;
  }
  .hero-content .btn,
  .ctas .btn,
  .cta-band .ctas .btn {
    width: 100%;
  }
  .hero-content > div > div[style*="display:flex"],
  .ctas,
  .cta-band .ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    max-width: 360px;
  }
  .cta-band .ctas { margin-inline: auto; }
}

/* Mobile drawer CTAs are already grid, but ensure full width. */
.mobile-drawer__cta .btn { width: 100%; min-width: 0; }

/* Tap-target minimums for footer + dropdown links. */
.footer-link, .nav-sublink, .mobile-drawer__sub a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

/* Page hero — tighten on mobile so the dark band isn't 60vh of empty space. */
@media (max-width: 640px) {
  .page-hero { padding: clamp(3rem, 10vh, 5rem) 0 clamp(2.5rem, 7vh, 4rem); }
  .cta-band { padding: clamp(2.5rem, 8vw, 4rem) 0; }
}

/* Two-column feature: confirm stack below 720 (was 760 — bump). */
@media (max-width: 760px) {
  .two-col-feature { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}

/* Welcome grid + difference + footer-grid stack confirmation. */
@media (max-width: 640px) {
  .welcome-figure__badge { left: 1rem; bottom: 1rem; padding: 0.75rem 1rem; }
  .welcome-pullquote { padding-left: 1rem; margin: 2rem 0 1.5rem; }
  .welcome-pullquote__mark { font-size: 4.5rem; top: -1.25rem; }
}

/* Grade card grid + faculty grid + posts grid sensible mobile defaults. */
@media (max-width: 540px) {
  .grade-grid { grid-template-columns: 1fr !important; }
  .posts-grid { grid-template-columns: 1fr !important; }
  .grade-card__body { padding: 24px 22px 18px; }
  .grade-card__detail { padding: 0 22px 28px; }
  .grade-card > summary > img { height: 220px; }
}

/* Footer: ensure inner stacks vertically gracefully on small screens. */
@media (max-width: 540px) {
  footer .container > div[style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
}

/* Body text minimum on mobile to keep things readable. */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .lede { font-size: 1.0625rem; line-height: 1.55; }
}

/* Footer wordmark — keep it from blowing out width on small screens. */
@media (max-width: 480px) {
  .footer-wordmark__row { font-size: clamp(2rem, 12vw, 3.5rem); gap: 0.5rem; }
}

/* Make sure the parallax band falls back gracefully on mobile (fixed bg is
   buggy on iOS). */
@media (max-width: 768px) {
  .parallax-band { background-attachment: scroll; min-height: 320px; }
  .parallax-band__quote { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
}

/* FAQ summary readable on mobile. */
@media (max-width: 480px) {
  .faq-item > summary { padding: 1.25rem 0; gap: 0.75rem; font-size: 1.0625rem; }
}

/* ---------- Hero Seal + Value Card (interactive crest) ---------- */
.hero-seal-wrap {
  display: none;
  position: absolute;
  right: clamp(1.5rem, 6vw, 5rem);
  bottom: clamp(8rem, 18.5vh, 17rem);
  z-index: 90;
}
.hero-seal-wrap:has(.hero-value-card.is-open) { z-index: 200; }

/* "Click here" under the crest. A pale-gold gradient is clipped to the glyphs
   and slid across them, so the shimmer is the highlight travelling through the
   text rather than the whole label pulsing. It inherits the wrap's display:none,
   so like the seal itself it only appears at >= 1100px. */
.hero-seal__hint {
  display: block;
  width: clamp(120px, 11vw, 160px);
  margin-top: 0.55rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
  /* Base tone sits much closer to white than the old pale gold, so the label
     reads as white-warm rather than gold; the travelling highlight is pure white. */
  background-image: linear-gradient(100deg,
    #efe8dc 0%, #efe8dc 38%, #ffffff 50%, #efe8dc 62%, #efe8dc 100%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: seal-hint-shimmer 3.4s linear infinite;
}
@keyframes seal-hint-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-seal__hint { animation: none; background-position: 50% 0; }
}

.hero-seal {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: clamp(120px, 11vw, 160px);
  height: clamp(120px, 11vw, 160px);
  display: inline-block;
  outline: none;
}
.hero-seal__disc {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--navy-deep);
  box-shadow:
    0 22px 56px -18px rgba(0,0,0,0.65),
    0 6px 14px -4px rgba(0,0,0,0.45);
  transition: transform 480ms var(--ease-out), box-shadow 480ms var(--ease-out), opacity 480ms var(--ease-out);
}
.hero-seal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms var(--ease-out);
}
.hero-seal__ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(200,169,107,0.9);
  pointer-events: none;
  transition: border-color 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.hero-seal__ring-inner {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 0.75px solid rgba(200,169,107,0.5);
  pointer-events: none;
}
.hero-seal__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200,169,107,0.5);
  pointer-events: none;
  animation: sealPulse 2.6s var(--ease-out) infinite;
}
@keyframes sealPulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.hero-seal:hover .hero-seal__disc,
.hero-seal:focus-visible .hero-seal__disc {
  transform: scale(1.04);
  box-shadow:
    0 22px 56px -18px rgba(163,126,58,0.55),
    0 4px 14px -4px rgba(0,0,0,0.45);
}
.hero-seal:hover .hero-seal__img,
.hero-seal:focus-visible .hero-seal__img { transform: scale(1.06); }
.hero-seal:hover .hero-seal__ring-outer,
.hero-seal:focus-visible .hero-seal__ring-outer {
  border-color: rgba(200,169,107,1);
  transform: scale(1.04);
}
.hero-seal.is-open .hero-seal__disc { transform: scale(0.7); opacity: 0.5; }
.hero-seal.is-open .hero-seal__pulse { animation: none; opacity: 0; }

.hero-value-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  transform-origin: bottom right;
  transform: scale(0.85) translateY(8px);
  width: clamp(320px, 26vw, 400px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out);
}
.hero-value-card.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.hero-value-card__inner {
  position: relative;
  border-radius: 0;   /* sharp edges */
  padding: 28px 28px 22px;
  background: linear-gradient(155deg, rgba(14,20,48,0.86) 0%, rgba(14,20,48,0.74) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 30px 80px -24px rgba(0,0,0,0.55),
    inset 0 1px 0 0 rgba(255,255,255,0.06);
  outline: 1px solid rgba(200,169,107,0.22);
  outline-offset: -1px;
  color: var(--paper);
  overflow: hidden;
}
.hero-value-card__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,169,107,0.55) 50%, transparent 100%);
}
.hero-value-card__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(200,169,107,0.22);
  border-radius: 0;   /* square, not a pill */
  color: var(--gold-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 280ms, border-color 280ms, background 280ms;
}
.hero-value-card__close:hover {
  color: var(--paper);
  border-color: var(--gold-soft);
  background: rgba(200,169,107,0.12);
}
.hero-value-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(200,169,107,0.18);
}
/* Readability: the card was set in micro-type (9-12.5px) with heavy tracking,
   which is what made it feel generic and hard to read. Same two typefaces as the
   rest of the site (Cormorant Garamond + Source Serif 4), just sized to be read. */
.hero-value-card__brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 5px;
  letter-spacing: -0.005em;
}
.hero-value-card__sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0;
}
.hero-value-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-value-card__list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.hero-value-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 23px;
  font-weight: 400;
  color: var(--gold-soft);
  line-height: 1.25;
  text-align: center;
}
.hero-value-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--paper);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.hero-value-card__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
}
.hero-value-card__body {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(250,248,243,0.92);
  margin: 0;
}
/* auto-fit, so the footer still balances now that the Confession item is gone */
.hero-value-card__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0,1fr));
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(200,169,107,0.18);
}
.hero-value-card__foot > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hero-value-card__foot-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hero-value-card__foot-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--paper);
}

@media (min-width: 1100px) { .hero-seal-wrap { display: block; } }
@media (prefers-reduced-motion: reduce) { .hero-seal__pulse { animation: none; } }

/* ---------- Breadcrumb bar ---------- */
.breadcrumb-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: 0.75rem;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.breadcrumb-bar ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--ink-mute);
}
.breadcrumb-bar li:not(:first-child)::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--gold);
}
.breadcrumb-bar a {
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}
.breadcrumb-bar a:hover {
  color: var(--crimson);
  border-bottom-color: var(--crimson);
}
.breadcrumb-bar [aria-current="page"] { color: var(--navy); }

/* ---------- Privacy / legal pages ---------- */
.privacy-section { margin-bottom: 2.75rem; }
.privacy-section:last-of-type { margin-bottom: 0; }
.privacy-section h2 { color: var(--navy); }
.privacy-section a { color: var(--crimson); }
.privacy-section ul li { margin: 0; }

/* ---------- Sticky Apply / Call CTA bar (all breakpoints) ---------- */
.mobile-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: block;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 248, 243, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 28px -14px rgba(14, 20, 48, 0.28);
}
.mobile-cta-bar__inner {
  display: flex; gap: 10px; align-items: center;
  max-width: 1240px; margin: 0 auto;
}
.mobile-cta-bar .btn { flex: 1 1 0; width: auto; min-width: 0; height: 52px; }
body { padding-bottom: 84px; }

/* The bar stays out of the way while the hero owns the screen, then slides up
   once the hero has scrolled past. `cta-autohide` is added by main.js, so with
   JS disabled or broken the bar is simply always visible rather than lost.
   visibility (not just opacity) is what keeps the buttons out of the tab order
   while they are off screen. */
body.cta-autohide .mobile-cta-bar {
  transform: translateY(calc(100% + 12px));
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              visibility 0s linear 0.5s;
}
body.cta-autohide .mobile-cta-bar.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  body.cta-autohide .mobile-cta-bar,
  body.cta-autohide .mobile-cta-bar.is-visible { transition: none; }
}
/* On desktop the bar sits to the right at a comfortable button size rather than
   stretching two full-width buttons across the viewport. */
@media (min-width: 1100px) {
  .mobile-cta-bar__inner { justify-content: flex-end; }
  .mobile-cta-bar .btn { flex: 0 0 auto; min-width: 180px; height: 48px; }
}

/* ---------- HTML sitemap page ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.sitemap-group__title { color: var(--navy); margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
.sitemap-list { display: grid; gap: 0.7rem; }
.sitemap-list a { font-family: var(--font-serif); font-size: 1.0625rem; color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color 240ms, border-color 240ms; }
.sitemap-list a:hover { color: var(--crimson); border-bottom-color: var(--gold); }

/* ---- Header fit: tighten primary nav at intermediate desktop widths ---- */
@media (min-width: 1100px) and (max-width: 1340px) {
  .site-header > .container { gap: 14px; }
  .primary-nav .nav-link { padding: 14px 9px; letter-spacing: 0.11em; font-size: 11px; }
  .header-cta { padding: 0 16px; letter-spacing: 0.14em; }
}

/* ---- Announcement bar: tidy the positioning statement on small screens ---- */
@media (max-width: 760px) {
  [aria-label="Announcement"] span { font-size: 11.5px; line-height: 1.45; }
  /* in-bar CTA is redundant with the sticky bottom Schedule a Visit on mobile */
  [aria-label="Announcement"] a { display: none; }
}

/* ============================================================
   STYLISTIC POLISH PASS — brighter, more luminous, refined
   (additive overrides; affects color/shadow/depth only, not layout)
   ============================================================ */

/* Dark page-hero bands: replace flat navy with a luminous gradient + gold glow */
.page-hero {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(200,169,107,0.22) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(122,16,36,0.20) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%, #0a0f24 100%) !important;
}

/* CTA band: same luminous treatment so it glows rather than sits flat */
.cta-band {
  background: var(--paper) !important;
  color: var(--ink) !important;
  position: relative;
  overflow: hidden;
}
.cta-band .h-section { color: var(--navy) !important; }
.cta-band .lede     { color: rgba(7, 22, 51, 0.7) !important; }

/* (The hairline gold rule along the top of the CTA band was removed site-wide.) */
.cta-band::before { content: none; }
/* Faded Geneva logo-mark watermark — multiply blend so it ghosts on paper */
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("/assets/images/geneva-logo-mark.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: clamp(420px, 52vw, 760px);
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.cta-band .container { position: relative; z-index: 1; }
/* contact links in the band → gold on paper */
.cta-band a[href^="tel:"],
.cta-band a[href^="mailto:"] { color: var(--gold) !important; }

/* Modifier: hide the seal watermark on specific CTA bands */
.cta-band--no-watermark::after { display: none !important; content: none !important; }

/* =====================================================================
   FOOTER v2 — Dark Utility-style with massive wordmark + 5 link columns
   ===================================================================== */
.footer-v2 {
  /* Faded-white wash over the photo (same idea as the "What separates…" band):
     the classroom reads as a soft watermark through the middle and fades out to
     solid paper at BOTH edges — so the footer blends into the page above it and
     the fine print at the bottom stays legible. AVIF via the image optimizer. */
  background:
    linear-gradient(180deg,
      var(--paper) 0%,
      rgba(250, 248, 243, 0.80) 18%,
      rgba(250, 248, 243, 0.84) 52%,
      rgba(250, 248, 243, 0.97) 86%,
      var(--paper) 100%),
    url("/assets/images/geneva-students-writing-desks.avif") 100% 40% / cover no-repeat,
    var(--paper) !important;
  color: var(--navy);
  padding: clamp(72px, 10vw, 105px) 0 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  position: relative;
}
.footer-v2__inner {
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
}

/* Giant centred brand lockup (replaces the old italic "Geneva Academy" text). */
.footer-v2__wordmark {
  display: block;
  margin: 0 0 clamp(48px, 6vw, 75px);
  padding: clamp(24px, 3vw, 40px) 0;
  text-align: center;
  user-select: none;
}
.footer-v2__wordmark img {
  display: block;
  width: 100%;
  max-width: clamp(280px, 58vw, 820px);
  height: auto;
  margin-inline: auto;
}

/* 5-column link grid */
.footer-v2__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding-bottom: clamp(40px, 6vw, 64px);
}
.footer-v2__col {
  padding-right: 24px;
}
.footer-v2__h {
  margin: 0 0 30px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
  color: var(--navy);
  padding-top: 2px;
  padding-bottom: 2px;
}
.footer-v2__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-v2__link {
  display: inline-block;
  padding: 2px 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.footer-v2__link:hover {
  color: var(--gold);
}

/* Bottom row: copyright + Back to top — the true final line of the footer */
.footer-v2__bottom {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(24px, 3vw, 34px) 0 6px;
  flex-wrap: wrap;
}
/* Badges share the bottom bar with the copyright and back-to-top, so they run
   smaller than they did as a standalone row. */
.footer-v2__bottom .footer-v2__badges {
  gap: clamp(12px, 1.6vw, 20px);
}
.footer-v2__bottom .footer-v2__badges img { height: 34px; }
.footer-v2__copy {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: var(--navy);
}
.footer-v2__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  color: var(--navy);
  background: transparent;
  border: 1px solid rgba(25, 34, 75, 0.35);
  border-radius: 160px;
  text-decoration: none;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.footer-v2__top:hover {
  color: var(--navy);
  border-color: var(--gold);
}
.footer-v2__top svg { width: 12px; height: 12px; }

/* Accreditation + legal area — sits above the final copyright line */
.footer-v2__legal { align-items: center; text-align: center;
  order: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 32px);
  padding: clamp(32px, 4vw, 44px) 0 0;
  color: var(--navy);
}
.footer-v2__badges { justify-content: center;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 2.5vw, 34px);
}
.footer-v2__badges::before {
  content: "Proud member of";
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  margin-right: 4px;
}
.footer-v2__badges img {
  height: 46px; width: auto; opacity: 0.9; filter: saturate(0) brightness(0.35);
  transition: opacity 0.3s ease;
}
.footer-v2__badges img:hover { opacity: 1; }
.footer-v2__nondiscrim {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.7;
  color: var(--navy);
  max-width: 920px;
}
.footer-v2__nondiscrim strong {
  display: block;
  margin-bottom: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy);
}
.footer-v2__legal-row { justify-content: center;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 28px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--navy);
}
.footer-v2__legal-row a {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-v2__legal-row a:hover {
  color: var(--gold);
}
.footer-v2__soli {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}

/* Full-viewport hero on every screen size. The sticky header occupies ~80px at
   the top, so the hero fills the rest of the window (header + hero = one full
   screen). Overrides the inline `min-height: clamp(560px, 88vh, 920px)`.
   `min-height` (not height) lets it still grow if the content is taller than the
   viewport on very short/landscape screens. */
.hero-card {
  min-height: calc(100vh - 80px) !important;
  min-height: calc(100dvh - 80px) !important;
}

/* =====================================================================
   GLOBAL EYEBROW DOUBLE-SLASH — Adds // mark before every .eyebrow
   site-wide, matching the welcome-v3 treatment.
   ===================================================================== */
.eyebrow::before {
  content: "//";
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 1.55em;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: currentColor;
  vertical-align: -0.05em;
}

/* Responsive */
@media (max-width: 1080px) {
  .footer-v2__grid { grid-template-columns: repeat(3, 1fr); gap: 32px 0; }
}
@media (max-width: 720px) {
  .footer-v2__grid { grid-template-columns: 1fr 1fr; }
  .footer-v2__wordmark img { max-width: min(78vw, 420px); }
}
@media (max-width: 480px) {
  .footer-v2__grid { grid-template-columns: 1fr; }
  .footer-v2__bottom { justify-content: flex-start; }
}

/* Trivium / grade link cards: lift to bright cream with a soft gold-tinted shadow */
.trivium-card {
  background: linear-gradient(165deg, #fff 0%, var(--cream) 100%) !important;
  box-shadow: 0 1px 2px rgba(14,20,48,0.04), 0 14px 30px -18px rgba(14,20,48,0.18);
}
/* Static: no hover shadow change — the resting shadow holds. */

/* Silo link tiles: warmer hover wash */
.silo-link { border-radius: 4px; padding-inline: 4px; transition: background-color 240ms var(--ease-out), border-color 240ms; }
.silo-link:hover { background: linear-gradient(90deg, rgba(200,169,107,0.10), transparent 85%); }

/* Sitemap link groups: subtle card framing for a brighter, organized feel */
.sitemap-group {
  background: linear-gradient(165deg, #fff 0%, var(--cream) 100%);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 14px 30px -22px rgba(14,20,48,0.18);
}

/* Post cards: soft shadow + hover lift for the news index */
.post-card {
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  box-shadow: 0 12px 26px -20px rgba(14,20,48,0.16);
  transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out);
}
.post-card:hover { transform: none; }

/* Faculty cards: fully static — no hover shadow, lift, or border change. */
.faculty-card:hover { transform: none; box-shadow: none; }

/* FAQ / read-more / grade-card disclosures: brighten the open state */
.faq-wrap .faq-item { border-bottom: 1px solid var(--rule-soft); transition: border-color 240ms; }
.faq-wrap .faq-item[open] { border-bottom-color: var(--gold); }

/* Breadcrumb bar: a hair brighter with a faint gold underline accent */
.breadcrumb-bar { background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }

/* Eyebrows a touch brighter/cleaner */
.eyebrow { font-feature-settings: "tnum"; }

/* ============================================================
   ADMISSIONS PROCESS — layered glass step carousel
   ============================================================ */
.admit {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(5rem, 11vw, 10rem) 0 clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(85% 65% at 58% -8%, rgba(28,92,184,0.60) 0%, transparent 60%),
    radial-gradient(70% 55% at 102% 18%, rgba(18,52,116,0.55) 0%, transparent 58%),
    linear-gradient(165deg, #0c1730 0%, #081020 58%, #05080f 100%);
  color: var(--paper);
}
.admit__glow { position:absolute; inset:-20% 0; z-index:-1; pointer-events:none;
  background: radial-gradient(50% 42% at 62% 8%, rgba(46,118,220,0.5) 0%, transparent 70%); filter: blur(72px); }

/* giant title word (top-left, like the reference) */
.admit__bigword {
  position:absolute; top: clamp(0.5rem,2.5vw,2.5rem); left: clamp(1rem,4vw,3rem);
  font-family: var(--font-display); font-weight:300; line-height:0.82; letter-spacing:-0.03em;
  font-size: clamp(4.5rem, 15vw, 13rem);
  color: var(--paper); opacity:0.96; pointer-events:none; user-select:none; z-index:1;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
  transition: opacity 500ms var(--ease-out);
}

/* stage: media stack (right) + glass card anchored bottom-left */
.admit__stage { position:relative; z-index:2; display:grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: clamp(1.5rem,3vw,2.5rem); align-items:end; }

.admit__card {
  background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(40px) saturate(140%); backdrop-filter: blur(40px) saturate(140%);
  border:1px solid rgba(255,255,255,0.16); border-radius:16px; padding: clamp(1.5rem,2.5vw,2rem); width: clamp(280px, 100%, 340px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6), inset 0 1px 0 0 rgba(255,255,255,0.06);
  opacity:0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.admit__card.is-in { opacity:1; transform:none; }
.admit__step { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.65); margin:0 0 1rem; }
.admit__rule { border:0; border-top:1px solid rgba(255,255,255,0.22); margin:0 0 1.25rem; }
.admit__title { font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,1.2rem+1.2vw,2.1rem); line-height:1.15; color:var(--paper); margin:0 0 1.25rem; letter-spacing:-0.01em; }
.admit__title em { font-style:italic; color:var(--gold-soft); }
.admit__points { list-style:none; margin:0; padding:0; display:grid; gap:0.7rem; }
.admit__points li { position:relative; padding-left:1.5rem; font-family:var(--font-serif); font-size:1.0625rem; line-height:1.5; color:rgba(250,248,243,0.88); }
.admit__points li::before { content:""; position:absolute; left:0; top:0.6em; width:6px; height:6px; border-radius:50%; background:var(--gold-soft); }

/* media stack */
.admit__stack { position:relative; height: clamp(340px, 42vw, 560px); }
.admit-slide { position:absolute; inset:0 0 0 auto; margin:0; width:88%; height:100%; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.15); box-shadow:0 40px 90px -40px rgba(0,0,0,0.7);
  transition: transform 600ms var(--ease-out), opacity 600ms var(--ease-out), filter 600ms var(--ease-out); }
.admit-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.admit-slide__veil { position:absolute; inset:0; background:rgba(10,15,36,0.6); opacity:0; transition:opacity 600ms var(--ease-out); }
/* depth states */
.admit-slide.depth-0 { transform: translateX(0) scale(1); opacity:1; z-index:3; }
.admit-slide.depth-0 .admit-slide__veil { opacity:0; }
.admit-slide.depth-1 { transform: translateX(7%) translateY(4%) scale(0.92); opacity:1; z-index:2; }
.admit-slide.depth-1 .admit-slide__veil { opacity:0.55; }
.admit-slide.depth-2 { transform: translateX(13%) translateY(8%) scale(0.84); opacity:1; z-index:1; }
.admit-slide.depth-2 .admit-slide__veil { opacity:0.78; }
.admit-slide.depth-hidden { transform: translateX(13%) translateY(8%) scale(0.84); opacity:0; z-index:0; pointer-events:none; }

/* footer caption + controls */
.admit__footer { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top: clamp(1.5rem,3vw,2.5rem); }
.admit__caption { font-family:var(--font-serif); font-style:italic; font-size:1.125rem; color:rgba(250,248,243,0.78); margin:0; max-width:60%; }
.admit__controls { display:flex; align-items:center; gap:16px; }
.admit__progress { font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:0.18em; color:rgba(255,255,255,0.7); }
/* rounded pill holding the two chevrons (matches the reference) */
.admit__pill { display:inline-flex; align-items:center; gap:4px; padding:5px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius:999px;
  -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px); }
.admit__btn { width:42px; height:42px; border:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--paper); font-size:18px; cursor:pointer;
  transition: background 200ms var(--ease-out); }
.admit__btn:hover { background:rgba(255,255,255,0.14); }

@media (max-width: 860px) {
  .admit__stage { grid-template-columns: 1fr; gap:1.5rem; }
  .admit__stack { height: clamp(300px, 70vw, 420px); order:-1; }
  .admit__caption { max-width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .admit-slide, .admit__card { transition:none; }
}

/* ============================================================
   FEATURE GLASS — layered media stack + glass text card
   (used for the K4 Curriculum feature; media left, card right)
   ============================================================ */
.feature-glass {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background:
    radial-gradient(110% 80% at 8% -10%, rgba(200,169,107,0.20) 0%, transparent 55%),
    radial-gradient(90% 70% at 100% 110%, rgba(122,16,36,0.18) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%, #0a0f24 100%);
  color: var(--paper);
}
.feature-glass__glow { position:absolute; inset:-20% 0; z-index:-1; pointer-events:none;
  background: radial-gradient(55% 50% at 25% 35%, rgba(42,54,105,0.5) 0%, transparent 70%); filter: blur(60px); }
.feature-glass__ghost {
  position:absolute; top: clamp(0.5rem,2vw,1.5rem); right: clamp(1rem,3vw,2.5rem);
  font-family: var(--font-display); font-weight:300; font-style:italic;
  font-size: clamp(6rem, 18vw, 15rem); line-height:0.8; letter-spacing:-0.03em;
  color: rgba(255,255,255,0.045); pointer-events:none; user-select:none; z-index:0;
}
.feature-glass__inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns: minmax(0,1.02fr) minmax(0,0.98fr);
  gap: clamp(1.5rem,3vw,2.75rem); align-items:center;
}
/* layered media stack (left) */
.feature-glass__media { position:relative; min-height: clamp(360px, 40vw, 520px); }
.fg-slide { position:absolute; inset:0 auto 0 0; margin:0; width:90%; height:100%; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.15); box-shadow:0 40px 90px -40px rgba(0,0,0,0.7); }
.fg-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.fg-veil { position:absolute; inset:0; background:rgba(10,15,36,0.62); }
.fg-depth-0 { transform: translateX(0) scale(1); z-index:3; }
.fg-depth-1 { transform: translateX(-8%) translateY(5%) scale(0.92); z-index:2; }
.fg-depth-1 .fg-veil { background:rgba(10,15,36,0.5); }
.fg-depth-2 { transform: translateX(-15%) translateY(10%) scale(0.84); z-index:1; }
.feature-glass__media:hover .fg-depth-0 { transform: translateX(2%) scale(1.01); transition: transform 600ms var(--ease-out); }
.fg-slide { transition: transform 600ms var(--ease-out); }
/* glass card (right) */
.feature-glass__card {
  background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(40px) saturate(140%); backdrop-filter: blur(40px) saturate(140%);
  border:1px solid rgba(200,169,107,0.26); border-radius:18px; padding: clamp(1.75rem,3vw,2.5rem);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6), inset 0 1px 0 0 rgba(255,255,255,0.06);
}
.feature-glass__title { font-family:var(--font-display); font-weight:300; font-size:var(--fs-h2); line-height:1.05; color:var(--paper); margin:0 0 1rem; letter-spacing:-0.012em; }
.feature-glass__rule { border:0; border-top:1px solid rgba(200,169,107,0.3); margin:0 0 1.25rem; }
.feature-glass__card > p { font-family:var(--font-serif); font-size:1.0625rem; line-height:1.75; color:rgba(250,248,243,0.86); margin:0 0 1rem; }

/* Read More — dark variant for use on glass cards */
.read-more--dark summary { color: var(--gold-soft); border-top-color: rgba(200,169,107,0.25); }
.read-more--dark .read-more__plus { color: var(--gold-soft); }
.read-more--dark .read-more__body p { color: rgba(250,248,243,0.82); }
.read-more--dark[open] summary { color: var(--paper); }

@media (max-width: 860px) {
  .feature-glass__inner { grid-template-columns: 1fr; }
  .feature-glass__media { min-height: clamp(280px, 64vw, 380px); order:-1; }
  .fg-depth-1 { transform: translateX(-6%) translateY(4%) scale(0.93); }
  .fg-depth-2 { transform: translateX(-11%) translateY(8%) scale(0.86); }
}

/* Feature glass — reverse orientation (card left, media right) for rhythm */
.feature-glass--reverse .feature-glass__inner { grid-template-columns: minmax(0,0.98fr) minmax(0,1.02fr); }
.feature-glass--reverse .feature-glass__card { order: 1; }
.feature-glass--reverse .feature-glass__media { order: 2; }
.feature-glass--reverse .feature-glass__ghost { right: auto; left: clamp(1rem,3vw,2.5rem); }
.feature-glass--reverse .feature-glass__glow { background: radial-gradient(55% 50% at 75% 35%, rgba(42,54,105,0.5) 0%, transparent 70%); }
/* mirror the media stack so it leans toward the right edge */
.feature-glass--reverse .fg-slide { inset:0 0 0 auto; }
.feature-glass--reverse .fg-depth-1 { transform: translateX(8%) translateY(5%) scale(0.92); }
.feature-glass--reverse .fg-depth-2 { transform: translateX(15%) translateY(10%) scale(0.84); }
.feature-glass--reverse .feature-glass__media:hover .fg-depth-0 { transform: translateX(-2%) scale(1.01); }

/* Pull-quote styling inside a glass card */
.feature-glass__quote {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.45;
  color: var(--paper); margin: 0 0 1.25rem; letter-spacing: -0.005em;
}
.feature-glass__cite {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); margin: 0;
}
@media (max-width: 860px) {
  .feature-glass--reverse .feature-glass__inner { grid-template-columns: 1fr; }
  .feature-glass--reverse .feature-glass__media { order: -1; }
  .feature-glass--reverse .fg-slide { inset:0 auto 0 0; }
}

/* ============================================================
   CAP — three-block capabilities-style feature (alternating)
   Themed to Geneva: navy/gold luminous, Fraunces ghost word,
   layered photo stack, no Google references.
   ============================================================ */
.cap {
  position: relative; width: 100%;
  background:
    radial-gradient(80% 60% at 50% -5%, rgba(255,255,255,0.7) 0%, transparent 60%),
    linear-gradient(165deg, var(--paper) 0%, var(--paper-deep) 55%, var(--cream) 100%);
  color: var(--ink);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow-x: clip;
  isolation: isolate;
}
.cap *, .cap *::before, .cap *::after { box-sizing: border-box; }
.cap-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; }

.cap__head { display:flex; justify-content:center; text-align:center; padding-inline: clamp(20px,5vw,24px); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.cap__eyebrow {
  display:inline-block;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--crimson);
}

.cap__blocks { display:flex; flex-direction:column; gap: clamp(3.5rem, 7vw, 6.5rem); }

/* ---- Block ---- */
.cap-block {
  position: relative; width: 100%; max-width: 1600px; margin-inline: auto;
  padding: clamp(1rem, 3vw, 2.5rem); isolation: isolate;
}
.cap-block__glow {
  position:absolute; inset:-18% 0; z-index:-1; pointer-events:none;
  filter: blur(80px); background-repeat:no-repeat;
}
.cap-block__glow--navy  { background-image: radial-gradient(100% 60% at 30% 0%, rgba(200,169,107,0.20) 0%, transparent 65%), radial-gradient(80% 40% at 80% 100%, rgba(25,34,75,0.10) 0%, transparent 60%); }
.cap-block__glow--slate { background-image: radial-gradient(100% 60% at 70% 0%, rgba(122,16,36,0.10) 0%, transparent 65%), radial-gradient(80% 40% at 20% 100%, rgba(200,169,107,0.18) 0%, transparent 60%); }
.cap-block__glow--blue  { background-image: radial-gradient(100% 60% at 35% 0%, rgba(200,169,107,0.22) 0%, transparent 65%), radial-gradient(80% 40% at 85% 100%, rgba(25,34,75,0.08) 0%, transparent 60%); }

/* Giant ghost word — Fraunces light italic, navy, the Geneva editorial voice */
.cap-block__word {
  position:absolute; top:0; left:0; right:0; z-index:0; margin:0;
  pointer-events:none; user-select:none;
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  text-transform: none;
  color: var(--navy); line-height: 0.82; white-space: nowrap;
  font-size: clamp(5rem, 22vw, 19rem);
  opacity: 0.10; padding-inline: clamp(4px, 2vw, 32px);
  letter-spacing: -0.025em;
  font-feature-settings: "ss01";
}
.cap-block--end .cap-block__word { text-align: right; }

/* Inner layout (mobile-first single column) */
.cap-block__inner {
  position:relative; z-index:1; display:flex; flex-direction:column; gap: clamp(14px, 3vw, 18px);
  padding-top: clamp(64px, 16vw, 130px);
}

/* Editorial text card — warm cream, gold hairline frame, restrained shadow */
.cap-card {
  width:100%;
  background: linear-gradient(165deg, var(--paper) 0%, var(--cream) 100%);
  border: 1px solid rgba(200, 169, 107, 0.35);
  border-radius: 4px;
  padding: clamp(22px, 3.2vw, 32px);
  display:flex; flex-direction:column; gap: 14px;
  box-shadow: 0 14px 30px -22px rgba(14,20,48,0.18);
  position: relative;
}
/* gold hairline accent above the title */
.cap-card__title {
  margin:0; font-family: var(--font-display); font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1;
  color: var(--navy); letter-spacing: -0.012em;
  font-feature-settings: "ss01";
}
.cap-card__rule { display: none; }
.cap-card__body {
  margin:0; font-family: var(--font-serif);
  font-size: clamp(15px, 2vw, 17px); line-height: 1.7;
  color: var(--ink-soft);
}

/* Media (mobile: show only the front layer, full width) */
.cap-media { position:relative; width:100%; aspect-ratio: 16 / 10; }
.cap-slide {
  position:absolute; inset:0; border:1px solid var(--rule);
  border-radius: 16px; overflow:hidden; backface-visibility: hidden;
  box-shadow: 0 30px 60px -30px rgba(14,20,48,0.30);
}
.cap-slide img { width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none; }
.cap-slide__scrim {
  position:absolute; inset:0; pointer-events:none;
  background-color:#fff; opacity:0;
  transition: opacity 500ms cubic-bezier(0.22,1,0.36,1);
}
.cap-slide--mid, .cap-slide--back { display:none; }

/* Footer caption */
.cap-block__footer {
  position:relative; z-index:2; margin-top: clamp(14px, 3vw, 22px);
}
.cap-block__caption {
  margin:0; font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.4; color: var(--navy);
  max-width: 60ch;
}

/* ---- Tablet and up: 2-column with fanned 3-layer media stack ---- */
@media (min-width: 820px) {
  .cap-block__inner {
    display:grid; align-items:center; column-gap: clamp(14px, 1.6vw, 22px);
    padding-top: clamp(80px, 10vw, 140px);
  }
  .cap-block--start .cap-block__inner { grid-template-columns: minmax(260px, 360px) 1fr; grid-template-areas: "card media"; }
  .cap-block--end   .cap-block__inner { grid-template-columns: 1fr minmax(260px, 360px); grid-template-areas: "media card"; }
  .cap-card  { grid-area: card; align-self: center; }
  .cap-media { grid-area: media; aspect-ratio: 1210 / 693; }

  .cap-slide--mid, .cap-slide--back { display:block; }
  .cap-slide { bottom: 0; top: auto; height: 100%; width: 88%; transition: transform 600ms var(--ease-out); }
  .cap-slide--front { z-index: 3; }
  .cap-slide--mid   { z-index: 2; height: 86%; }
  .cap-slide--back  { z-index: 1; height: 72%; }
  .cap-slide--mid  .cap-slide__scrim { opacity: 0.5; }
  .cap-slide--back .cap-slide__scrim { opacity: 0.78; }

  .cap-media--start .cap-slide--front { left: 0; }
  .cap-media--start .cap-slide--mid   { left: 7%; }
  .cap-media--start .cap-slide--back  { left: 13%; }
  .cap-media--end   .cap-slide--front { right: 0; }
  .cap-media--end   .cap-slide--mid   { right: 7%; }
  .cap-media--end   .cap-slide--back  { right: 13%; }

  .cap-block__footer {
    display: grid; align-items: center; column-gap: clamp(14px, 1.6vw, 22px);
  }
  .cap-block--start .cap-block__footer { grid-template-columns: minmax(260px,360px) 1fr; }
  .cap-block--end   .cap-block__footer { grid-template-columns: 1fr minmax(260px,360px); }
  .cap-block--start .cap-block__caption { grid-column: 2; padding-right: clamp(0px, 8vw, 140px); }
  .cap-block--end   .cap-block__caption { grid-column: 1; padding-left: 12%; padding-right: clamp(0px, 8vw, 140px); }
}
@media (min-width: 1280px) { .cap-block { padding-inline: 32px; } }
@media (prefers-reduced-motion: reduce) { .cap-slide { transition: none; } }

/* ============================================================
   ADMIT-HERO — two-row alternating image/text hero
   Used on /admissions/. Dark navy with gold dot markers.
   ============================================================ */
.admit-hero {
  position: relative;
  background:
    radial-gradient(110% 90% at 90% -10%, rgba(200,169,107,0.18) 0%, transparent 55%),
    radial-gradient(90% 80% at 5% 110%, rgba(122,16,36,0.16) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 75%, #0a0f24 100%);
  color: var(--paper);
  padding: clamp(56px, 9vw, 120px) 0 clamp(56px, 9vw, 120px);
  overflow: hidden;
}
.admit-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,169,107,0.6) 50%, transparent);
  z-index: 3;
}
.admit-hero__inner {
  position: relative; z-index: 1;
  max-width: 1320px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: flex; flex-direction: column;
  gap: clamp(48px, 8vw, 92px);
}

.admit-hero__row {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
@media (min-width: 880px) {
  .admit-hero__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .admit-hero__row--a .admit-hero__media { order: 1; transform: translateY(28px); }
  .admit-hero__row--a .admit-hero__text  { order: 2; padding-top: clamp(20px, 3vw, 48px); }
  .admit-hero__row--b .admit-hero__media { order: 2; transform: translateY(-28px); }
  .admit-hero__row--b .admit-hero__text  { order: 1; padding-top: clamp(20px, 3vw, 48px); }
}

.admit-hero__media { position: relative; }
.admit-hero__media img {
  display: block; width: 100%; max-width: 560px;
  height: clamp(280px, 36vw, 420px); object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 28px 60px -36px rgba(0,0,0,0.55);
}
.admit-hero__row--b .admit-hero__media img { margin-left: auto; }

.admit-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 22px;
}

/* Headline rhythm — Fraunces, two lines, italic em */
.admit-hero__h {
  margin: 0 0 1.25rem; line-height: 1.0;
  font-family: var(--font-display);
}
.admit-hero__h .ah-line {
  display: block;
  font-weight: 300; font-style: normal;
  font-size: clamp(2.2rem, 1rem + 4vw, 4rem);
  letter-spacing: -0.012em; color: var(--paper);
}
.admit-hero__h em {
  font-style: italic; font-weight: 300;
  font-size: clamp(2.6rem, 1rem + 5vw, 4.6rem);
  letter-spacing: -0.018em;
  color: var(--gold-soft);
  line-height: 1.02;
}

/* Lede with gold dot markers (mirrors the orange dots in reference) */
.admit-hero__lede {
  position: relative;
  margin: 0; padding-left: clamp(22px, 2vw, 32px);
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6;
  color: rgba(250,248,243,0.88);
  max-width: 540px;
}
.admit-hero__lede::before {
  content: ""; position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
}
.admit-hero__row--b .admit-hero__lede { max-width: 520px; }

/* =====================================================================
   K3v4 HERO — Harvard meets Apple meets Classical Christian
   8px spacing system. Max content 1440. Hero 92vh.
   Colors: #071633 primary navy, #0D214F secondary, #C9A15D gold,
           #9A112E burgundy, #F5F1E8 cream, #FFFFFF white.
   ===================================================================== */
.k3v4-wrap {
  position: relative;
  background: var(--paper);
  padding: clamp(8px, 1vw, 16px);
}
.k3v4-hero {
  position: relative;
  min-height: 92vh;
  max-width: 1600px;
  margin: 0 auto;
  /* Clean Apple-style navy gradient — quiet, single diagonal */
  background: linear-gradient(135deg, #071633 0%, #0D214F 100%);
  color: #fff;
  border-radius: clamp(16px, 1.4vw, 24px);
  overflow: hidden;
  isolation: isolate;
}

/* Photo lives on the right; mask fades its left edge cleanly into the navy */
.k3v4-hero__media { position: absolute; inset: 0; z-index: 0; }
.k3v4-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 65% 35%;
  filter: saturate(1.02) brightness(1.02);
  animation: k3v4-pan 26s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 70%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 70%, #000 100%);
}
@keyframes k3v4-pan {
  from { transform: scale(1.04) translateX(0); }
  to   { transform: scale(1.06) translateX(-1%); }
}
/* Minimal scrim — soft top/bottom navy on the photo side only, no colored vignettes */
.k3v4-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,22,51,0.30) 0%, transparent 18%, transparent 78%, rgba(7,22,51,0.40) 100%);
}

/* --- Tech layer: grid + circuit + pulsing nodes --- */
.k3v4-tech { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.k3v4-tech__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(201,161,93,0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201,161,93,0.45) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(70% 80% at 22% 50%, #000 0%, transparent 80%);
  mask-image: radial-gradient(70% 80% at 22% 50%, #000 0%, transparent 80%);
}
.k3v4-tech__circuit {
  position: absolute;
  top: 14%; left: 4%;
  width: 38%; height: 56%;
  color: var(--gold);
  opacity: 0.10;
  animation: k3v4-drift 30s ease-in-out infinite alternate;
}
.k3v4-tech__circuit svg { width: 100%; height: 100%; display: block; }
@keyframes k3v4-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(18px, -10px); }
}
.k3v4-tech__node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(201,161,93,0.5);
  opacity: 0.5;
  animation: k3v4-pulse 3.6s ease-in-out infinite;
}
.k3v4-tech__node.n1 { top: 16%; left: 8%; animation-delay: 0s; }
.k3v4-tech__node.n2 { top: 38%; left: 24%; animation-delay: 0.6s; }
.k3v4-tech__node.n3 { top: 64%; left: 14%; animation-delay: 1.2s; }
.k3v4-tech__node.n4 { top: 30%; left: 38%; animation-delay: 1.8s; }
.k3v4-tech__node.n5 { top: 78%; left: 30%; animation-delay: 2.4s; }
@keyframes k3v4-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.5); }
}

/* --- Navigation --- */
.k3v4-nav {
  position: relative; z-index: 10;
  height: 90px;
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.k3v4-nav.is-scrolled {
  background: rgba(7,22,51,0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.k3v4-nav__inner {
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 0 clamp(24px, 3vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.k3v4-nav__brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: #fff;
}
.k3v4-nav__shield {
  width: 36px; height: 40px; color: var(--gold);
}
.k3v4-nav__brand-text {
  display: inline-flex; align-items: baseline; gap: 14px;
}
.k3v4-nav__brand-mark {
  font-family: var(--font-display);
  font-weight: 500; font-size: 28px;
  letter-spacing: -0.01em; color: #fff;
}
.k3v4-nav__brand-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-soft);
}
.k3v4-nav__links {
  display: flex; align-items: center; gap: clamp(28px, 3.6vw, 56px);
  list-style: none; margin: 0; padding: 0;
}
.k3v4-nav__links a {
  position: relative;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s ease;
}
.k3v4-nav__links a::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 100%; height: 1px;
  background: var(--gold);
  transition: right 0.3s ease;
}
.k3v4-nav__links a:hover { color: var(--gold-soft); }
.k3v4-nav__links a:hover::after { right: 0; }

.k3v4-nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 24px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; background: #9A112E;
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(154,17,46,0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.k3v4-nav__cta:hover {
  transform: translateY(-2px);
  background: #ad1633;
  box-shadow: 0 20px 40px -16px rgba(154,17,46,0.7);
}
.k3v4-nav__cta svg { width: 14px; height: 14px; }

/* --- Two-column grid --- */
.k3v4-hero__grid {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 48fr 52fr;
  gap: 48px;
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 3vw, 48px) clamp(120px, 14vw, 200px);
}

/* Left content */
.k3v4-hero__left {
  display: flex; flex-direction: column; justify-content: center;
  max-width: 620px;
  animation: k3v4-rise 1s 0.05s both cubic-bezier(.2,.7,.2,1);
}
@keyframes k3v4-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.k3v4-hero__eyebrow {
  display: inline-block;
  width: max-content;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201,161,93,0.4);
}
.k3v4-hero__h {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw + 0.5rem, 108px);
  line-height: 0.96;
  letter-spacing: -0.022em;
  color: #fff;
  text-wrap: balance;
}
.k3v4-hero__h em {
  font-style: italic; font-weight: 400;
  color: var(--gold-soft);
}
.k3v4-hero__lede {
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65;
  color: rgba(255,255,255,0.85);
  max-width: 520px;
  margin: 0 0 clamp(32px, 4vw, 48px);
}

/* CTAs */
.k3v4-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.k3v4-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 60px; min-width: 200px; padding: 0 32px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.k3v4-btn--primary {
  background: #9A112E; color: #fff;
  box-shadow: 0 20px 50px -20px rgba(154,17,46,0.6);
}
.k3v4-btn--primary:hover {
  transform: translateY(-2px); background: #ad1633;
  box-shadow: 0 28px 56px -24px rgba(154,17,46,0.78);
}
.k3v4-btn--ghost {
  background: transparent; color: var(--gold-soft);
  box-shadow: inset 0 0 0 1px rgba(201,161,93,0.55);
}
.k3v4-btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(201,161,93,0.1);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--gold-soft);
}
.k3v4-btn__play {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  background: var(--gold-soft); color: #071633;
  border-radius: 50%;
}
.k3v4-btn__play svg { width: 9px; height: 9px; }

/* Trust block */
.k3v4-trust {
  display: flex; align-items: flex-start; gap: 16px;
  max-width: 480px;
}
.k3v4-trust__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(201,161,93,0.12);
  border: 1px solid rgba(201,161,93,0.35);
  color: var(--gold);
}
.k3v4-trust__icon svg { width: 20px; height: 20px; }
.k3v4-trust__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.k3v4-trust__sub {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 400; line-height: 1.5;
  color: rgba(255,255,255,0.65);
}

/* Right side — photo lives in scrim; floating scripture badge */
.k3v4-hero__right { position: relative; }
.k3v4-scripture {
  position: absolute;
  right: clamp(0px, 2vw, 24px);
  bottom: clamp(0px, 2vw, 24px);
  width: clamp(170px, 14vw, 210px);
  height: clamp(170px, 14vw, 210px);
  border-radius: 50%;
  background: rgba(13,33,79,0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201,161,93,0.5);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 22px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.55);
  animation: k3v4-rise 1s 0.4s both cubic-bezier(.2,.7,.2,1);
}
.k3v4-scripture__verse {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.3; color: #fff;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}
.k3v4-scripture__cite {
  font-family: var(--font-sans);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-soft);
}

/* Curved bottom transition (paper/cream fill, asymmetric wave) */
.k3v4-hero__curve {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: clamp(90px, 10vw, 160px);
  z-index: 4; display: block; pointer-events: none;
}
.k3v4-hero__curve path { fill: var(--paper); }

/* --- Floating value bar overlapping hero --- */
.k3v4-values {
  position: relative;
  margin: clamp(-80px, -6vw, -56px) auto 0;
  z-index: 5;
  padding: 0 clamp(16px, 3vw, 48px);
}
.k3v4-values__card {
  max-width: 1440px; margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  box-shadow:
    0 40px 80px -32px rgba(7,22,51,0.22),
    0 12px 28px -16px rgba(7,22,51,0.1);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
}
@media (min-width: 880px) {
  .k3v4-values__card { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .k3v4-values__item { padding: 0 clamp(20px, 2.4vw, 36px); }
  .k3v4-values__item + .k3v4-values__item { border-left: 1px solid rgba(7,22,51,0.10); }
}
.k3v4-values__item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px;
  animation: k3v4-rise 0.9s both cubic-bezier(.2,.7,.2,1);
}
.k3v4-values__item:nth-child(2) { animation-delay: 0.08s; }
.k3v4-values__item:nth-child(3) { animation-delay: 0.16s; }
.k3v4-values__item:nth-child(4) { animation-delay: 0.24s; }
.k3v4-values__icon {
  width: clamp(72px, 7vw, 96px);
  height: clamp(72px, 7vw, 96px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(201,161,93,0.14);
  color: var(--gold);
  transition: transform 0.35s ease;
}
.k3v4-values__icon svg {
  width: clamp(34px, 3.4vw, 44px);
  height: clamp(34px, 3.4vw, 44px);
  stroke-width: 1.7;
}
.k3v4-values__item:hover .k3v4-values__icon { transform: translateY(-3px); }
.k3v4-values__item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(17px, 1.3vw, 20px);
  color: #071633;
}
.k3v4-values__item p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.55;
  color: rgba(7,22,51,0.7);
  max-width: 28ch;
}

/* --- Tablet / mobile --- */
@media (max-width: 1080px) {
  .k3v4-hero__grid { gap: 24px; padding-right: 24px; }
  .k3v4-scripture { width: 150px; height: 150px; padding: 18px; }
}
@media (max-width: 880px) {
  .k3v4-hero { min-height: auto; }
  .k3v4-nav { height: 72px; }
  .k3v4-nav__brand-eyebrow { display: none; }
  .k3v4-nav__links { display: none; }
  .k3v4-nav__cta { height: 44px; padding: 0 18px; min-width: 0; }
  .k3v4-hero__grid {
    grid-template-columns: 1fr;
    padding: clamp(40px, 8vw, 72px) clamp(20px, 5vw, 40px) clamp(120px, 16vw, 180px);
  }
  .k3v4-hero__scrim {
    background:
      linear-gradient(180deg, rgba(7,22,51,0.85) 0%, rgba(7,22,51,0.5) 35%, rgba(7,22,51,0.85) 100%);
  }
  .k3v4-hero__media img { object-position: 65% 25%; }
  .k3v4-hero__h { font-size: clamp(40px, 11vw, 56px); }
  .k3v4-hero__ctas { flex-direction: column; align-items: stretch; }
  .k3v4-btn { width: 100%; min-width: 0; }
  .k3v4-scripture { display: none; }
  .k3v4-tech__circuit, .k3v4-tech__grid { display: none; }
  .k3v4-tech__node.n4, .k3v4-tech__node.n5 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .k3v4-hero__media img { animation: none; transform: scale(1.05); }
  .k3v4-tech__circuit, .k3v4-tech__node { animation: none; }
  .k3v4-hero__left, .k3v4-scripture, .k3v4-values__item { animation: none; }
}

/* =====================================================================
   FLUID PASS — site-wide de-boxing
   Goal: one continuous paper field; sections flow into each other
   instead of sitting as distinct color blocks.
   Hero sections + CTA band keep their navy. Everything else inherits.
   ===================================================================== */

/* Make all the light "content" sections transparent so the body's paper
   color reads as one continuous wash. */
.duet,
.prelude,
.k3v3-welcome,
.k3v3-hero-wrap,
.k3v4-wrap {
  background: transparent !important;
}

/* Body unifies to a single warm tone; soften the cream so paper ≈ cream */
body { background: var(--paper); }

/* Section inline-style backgrounds that hard-code paper/paper-deep get
   normalized to transparent — let the flow show through. */
section[style*="background-color:var(--paper)"],
section[style*="background-color: var(--paper)"],
section[style*="background-color:var(--paper-deep)"],
section[style*="background-color: var(--paper-deep)"],
section[style*="background-color:var(--cream)"] {
  background-color: transparent !important;
}

/* Value bar: drop the floating "card" chrome — let it sit in the flow */
.k3v4-values__card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 40px) !important;
}
.k3v4-values__item + .k3v4-values__item {
  border-left-color: rgba(7,22,51,0.08) !important;
}

/* Welcome section: drop the hard rounded card image on the right;
   keep the floating left photo since it's already masked. */
.k3v3-welcome__card-right {
  box-shadow: none !important;
}

/* Duet collage edges: soften any visible card chrome */
.duet__card-wrap .duet__card {
  background: transparent !important;
  box-shadow: none !important;
}

/* (Removed blanket .section transparency — was stripping the navy
   Difference section too. Inline-style nulls below cover the paper
   variants without touching dark sections.) */

/* Soften padding so sections breathe together rather than stack as blocks */
.duet,
.prelude,
.k3v3-welcome {
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* Hero wraps lose their visible paper "frame" — just give the rounded
   card breathing room without painting an outer color band. */
.k3v3-hero-wrap,
.k3v4-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* =====================================================================
   WIDE & SPACIOUS — match the home hero's openness everywhere
   ===================================================================== */

/* Generous outer gutters on the main container */
.container {
  padding-inline: clamp(1.25rem, 4vw, 3.5rem) !important;
}
.container-narrow {
  padding-inline: clamp(1.25rem, 4vw, 3rem) !important;
}

/* Sections breathe more — taller rhythm so they feel like one continuous
   page rather than packed cards stacked together. */
.section {
  padding-top: clamp(72px, 9vw, 140px) !important;
  padding-bottom: clamp(72px, 9vw, 140px) !important;
}

/* Inline max-widths on inner grids: open them up so two-column blocks
   stretch across the spacious container instead of feeling boxed. */
section[style*="max-width:1080px"] > div,
.section [style*="max-width:1080px"] {
  max-width: 1280px !important;
}
.duet__inner.container {
  max-width: 1380px !important;
}

/* Two-column splits / card grids stretch wider */
.split2 { max-width: 1400px; margin-inline: auto; }
.card-grid { max-width: 1400px; margin-inline: auto; }

/* Inner content max-widths on hero-style blocks open up */
.k3v4-hero__grid,
.admit-hero__inner,
.prelude__inner {
  max-width: 1480px !important;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem) !important;
}

/* Footer + nav-mega aren't part of the page-flow boxiness, so leave alone */

/* =====================================================================
   EXPOSÉ SPREAD — Single-page museum biography layout
   Matches the OEDIPUS REX / STRAVINSKY wireframe exactly.
   12-column grid · right-edge timeline rail · hairline rules · oversized type
   ===================================================================== */
:root {
  --ex-bg:      #F2EEE4;
  --ex-text:    #1E1B18;
  --ex-muted:   #5B534B;
  --ex-gold:    #A98552;
  --ex-border:  rgba(30,27,24,0.18);
  --ex-line:    rgba(30,27,24,0.28);
}

.expose {
  position: relative;
  background: var(--ex-bg);
  color: var(--ex-text);
  padding: clamp(48px, 6vw, 88px) clamp(12px, 2vw, 32px) clamp(64px, 8vw, 120px);
  font-family: var(--font-sans);
  overflow: hidden;
  isolation: isolate;
}

/* Right edge vertical timeline rail */
.expose__rail {
  position: absolute;
  top: 0; bottom: 0;
  right: clamp(20px, 3vw, 56px);
  width: 1px;
  background: var(--ex-line);
  z-index: 2; pointer-events: none;
}
.expose__rail-dot {
  position: absolute; right: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ex-text);
}
.expose__rail-x {
  position: absolute; right: -7px;
  width: 14px; height: 14px;
  background:
    linear-gradient(45deg,  transparent calc(50% - 0.5px), var(--ex-text) calc(50% - 0.5px), var(--ex-text) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(-45deg, transparent calc(50% - 0.5px), var(--ex-text) calc(50% - 0.5px), var(--ex-text) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* The 12-column grid */
.expose__grid {
  max-width: 1560px;
  margin: 0 auto;
  padding-right: clamp(28px, 3vw, 56px);  /* keep clear of the right rail */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(18px, 2vw, 32px);
  row-gap: clamp(40px, 5vw, 88px);
}

/* ---------- Shared chrome ---------- */
.expose__tag {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  line-height: 1.7;
  color: var(--ex-text);
}
.expose__tag span { display: block; }
.expose__tag span + span { color: var(--ex-muted); font-weight: 500; }

.expose__rule {
  grid-column: 1 / -1;
  border: none; height: 1px;
  background: var(--ex-line);
  margin: 0;
}

/* ---------- 1) top masthead ---------- */
.expose__tag--top {
  grid-column: 1 / span 3;
  grid-row: 1;
}

/* ---------- 2) Massive name ---------- */
.expose__name {
  grid-column: 1 / span 6;
  grid-row: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 9vw, 148px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--ex-text);
}
.expose__name em {
  font-style: italic; font-weight: 400;
  color: var(--ex-gold);
}

/* ---------- 3) Hero portrait next to the name ---------- */
.expose__photo {
  margin: 0; position: relative;
  background: rgba(30,27,24,0.05);
}
.expose__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.expose__photo--name {
  grid-column: 7 / span 4;
  grid-row: 2;
  aspect-ratio: 1 / 1;
}

/* ---------- 4) Side quote anchored to name row ---------- */
.expose__quote--name {
  grid-column: 11 / span 2;
  grid-row: 2;
  align-self: start;
  padding-top: 12px;
}
.expose__quote {
  position: relative;
}
.expose__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  color: var(--ex-text);
}
.expose__qmark {
  display: block;
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(24px, 2vw, 30px); line-height: 1;
  color: var(--ex-text); opacity: 0.7;
  margin-bottom: 6px;
}

/* ---------- 5) Dates ---------- */
.expose__dates {
  grid-column: 1 / span 3;
  grid-row: 3;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.7;
  color: var(--ex-muted);
}

/* ---------- 6) Major hairline ---------- */
.expose__rule { grid-row: 4; }

/* ---------- 7a) GENEVA spelled across the page ---------- */
.expose__dropcap {
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.02em;
  color: var(--ex-text);
  align-self: start;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.expose__dropcap span {
  font-size: clamp(80px, 16vw, 240px);
  line-height: 0.84;
  display: inline-block;
}
.expose__dropcap span:nth-child(odd)  { font-style: normal; }
.expose__dropcap span:nth-child(even) { font-style: italic; color: var(--ex-gold); }
.expose__inline-line {
  grid-column: 1 / span 1;
  grid-row: 6;
  align-self: start;
  margin-top: 0.9em;
  height: 1px;
  background: var(--ex-line);
}
.expose__para {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.7;
  color: var(--ex-text);
  max-width: 30ch;
}
.expose__para em { font-style: italic; color: var(--ex-text); }
.expose__para--intro {
  grid-column: 2 / span 4;
  grid-row: 6;
  align-self: start;
  margin-top: 0.6em;
}

/* ---------- 8) Mid right photo ---------- */
.expose__photo--mid {
  grid-column: 9 / span 3;
  grid-row: 6;
  aspect-ratio: 1 / 1;
}

/* ---------- 9) Year (founding) ---------- */
.expose__year { display: flex; flex-direction: column; gap: 6px; }
.expose__year-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1; letter-spacing: -0.012em;
  color: var(--ex-text);
}
.expose__year-cap {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.6;
  color: var(--ex-text);
}
.expose__year:first-of-type {
  grid-column: 6 / span 3;
  grid-row: 6;
}

/* ---------- 10) Large photo + side caption ---------- */
.expose__side-cap {
  grid-column: 1 / span 1;
  grid-row: 7;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ex-muted);
  justify-self: end;
  align-self: start;
  padding-top: 8px;
}
.expose__photo--lg {
  grid-column: 2 / span 4;
  grid-row: 7;
  aspect-ratio: 4 / 5;
}

/* ---------- 11) Multi-line statement ---------- */
.expose__statement {
  grid-column: 7 / span 5;
  grid-row: 7;
  align-self: end;
  margin: 0 0 clamp(24px, 4vw, 64px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.15; letter-spacing: -0.014em;
  color: var(--ex-text);
}
.expose__statement em { font-style: italic; color: var(--ex-gold); }

/* ---------- 12) Mid tag ---------- */
.expose__tag--mid {
  grid-column: 1 / span 2;
  grid-row: 8;
}

/* ---------- 13) Side paragraph ---------- */
.expose__para--side {
  grid-column: 1 / span 3;
  grid-row: 9;
}

/* ---------- 14) Quote photo + quote ---------- */
.expose__photo--qphoto {
  grid-column: 5 / span 5;
  grid-row: 9;
  aspect-ratio: 16 / 10;
}
.expose__quote--mid {
  grid-column: 4 / span 2;
  grid-row: 9;
  align-self: center;
  padding-left: clamp(0px, 2vw, 16px);
}
.expose__quote--mid p { font-size: clamp(14px, 1.1vw, 17px); }

/* ---------- 15) Date marker ---------- */
.expose__dates--mid {
  grid-column: 1 / span 2;
  grid-row: 10;
}

/* ---------- 16) Center XL photo ---------- */
.expose__photo--xl {
  grid-column: 3 / span 5;
  grid-row: 11;
  aspect-ratio: 5 / 4;
}

/* ---------- 17) Sigil + biography ---------- */
.expose__sigil {
  grid-column: 9 / span 1;
  grid-row: 11;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1; color: var(--ex-text);
  align-self: start;
}
.expose__bio {
  grid-column: 9 / span 3;
  grid-row: 11;
  align-self: start;
  margin-top: clamp(36px, 4vw, 56px);
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.75;
  color: var(--ex-text);
}

/* ---------- 18) Bottom tag ---------- */
.expose__tag--bot {
  grid-column: 1 / span 2;
  grid-row: 12;
}

/* ---------- 19) Closing line + coda ---------- */
.expose__inline-line--bot {
  grid-column: 1 / span 1;
  grid-row: 13;
  align-self: start;
  margin-top: 0.6em;
  height: 1px;
  background: var(--ex-line);
}
.expose__para--coda {
  grid-column: 2 / span 3;
  grid-row: 13;
}

/* ---------- 20) Closing year ---------- */
.expose__year--future {
  grid-column: 9 / span 3;
  grid-row: 13;
}
.expose__year--future .expose__year-num { color: var(--ex-gold); font-style: italic; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .expose__grid {
    grid-template-columns: repeat(6, 1fr);
    row-gap: clamp(28px, 4vw, 48px);
  }
  .expose__tag--top    { grid-column: 1 / span 3; grid-row: 1; }
  .expose__name        { grid-column: 1 / -1; grid-row: 2; font-size: clamp(56px, 12vw, 100px); }
  .expose__photo--name { grid-column: 1 / span 4; grid-row: 3; }
  .expose__quote--name { grid-column: 5 / span 2; grid-row: 3; align-self: end; padding-top: 0; }
  .expose__dates       { grid-column: 1 / span 3; grid-row: 4; }
  .expose__rule        { grid-row: 5; }
  .expose__dropcap     { grid-column: 1 / span 2; grid-row: 6; }
  .expose__inline-line { display: none; }
  .expose__para--intro { grid-column: 3 / span 4; grid-row: 6; }
  .expose__photo--mid  { grid-column: 1 / span 3; grid-row: 7; }
  .expose__year:first-of-type { grid-column: 4 / span 3; grid-row: 7; align-self: center; }
  .expose__side-cap    { display: none; }
  .expose__photo--lg   { grid-column: 1 / span 4; grid-row: 8; }
  .expose__statement   { grid-column: 1 / -1;     grid-row: 9; }
  .expose__tag--mid    { grid-column: 1 / span 3; grid-row: 10; }
  .expose__para--side  { grid-column: 1 / span 4; grid-row: 11; }
  .expose__photo--qphoto { grid-column: 1 / -1;   grid-row: 12; aspect-ratio: 16/9; }
  .expose__quote--mid  { grid-column: 1 / span 3; grid-row: 13; padding-left: 0; }
  .expose__dates--mid  { grid-column: 4 / span 3; grid-row: 13; align-self: center; }
  .expose__photo--xl   { grid-column: 1 / -1;     grid-row: 14; aspect-ratio: 4/3; }
  .expose__sigil       { grid-column: 1 / span 1; grid-row: 15; }
  .expose__bio         { grid-column: 2 / span 5; grid-row: 15; margin-top: 0; }
  .expose__tag--bot    { grid-column: 1 / span 3; grid-row: 16; }
  .expose__para--coda  { grid-column: 1 / span 4; grid-row: 17; }
  .expose__inline-line--bot { display: none; }
  .expose__year--future { grid-column: 1 / -1;    grid-row: 18; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .expose       { padding: 48px 24px 64px; }
  .expose__grid { grid-template-columns: 1fr; padding-right: 28px; }
  .expose__rail { right: 12px; }
  .expose__name { font-size: clamp(52px, 16vw, 84px); }
  .expose__statement { font-size: clamp(24px, 6vw, 34px); }
  .expose__photo--name, .expose__photo--mid, .expose__photo--lg,
  .expose__photo--qphoto, .expose__photo--xl,
  .expose__name, .expose__quote--name, .expose__dates, .expose__rule,
  .expose__dropcap, .expose__para--intro, .expose__year:first-of-type,
  .expose__statement, .expose__tag, .expose__para--side, .expose__quote--mid,
  .expose__dates--mid, .expose__sigil, .expose__bio, .expose__para--coda,
  .expose__year--future, .expose__tag--top {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .expose__photo--qphoto { aspect-ratio: 4/3; }
  .expose__bio { margin-top: 8px; }
}

/* (Keep old museum / editorial / expose classes hidden) */
.museum-pillars, .museum-mission, .museum-timeline, .editorial, .expose { display: none !important; }

/* =====================================================================
   COLLECTION — "Formation" portfolio spread, Geneva-styled, high-conversion
   Cream paper bg · navy text · gold + crimson accents · sharp corners
   ===================================================================== */
.collection {
  background: var(--paper);
  color: var(--navy);
  padding: clamp(80px, 10vw, 144px) clamp(20px, 4vw, 60px) clamp(72px, 9vw, 120px);
  font-family: var(--font-sans);
  overflow: hidden;
}
.collection__inner {
  max-width: 1440px; margin: 0 auto;
}

/* --- Top conversion header --- */
.collection__top {
  text-align: center;
  margin-bottom: clamp(64px, 8vw, 120px);
}
.collection__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  padding: 8px 0;
  border-top: 1px solid rgba(7,22,51,0.18);
  border-bottom: 1px solid rgba(7,22,51,0.18);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.collection__headline {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 10vw, 156px);
  line-height: 0.94; letter-spacing: -0.038em;
  color: var(--navy);
}
.cl-letter { display: inline-block; line-height: 1; }
.cl-letter--em { font-style: italic; color: var(--gold); }

.collection__sub {
  margin: 0 auto clamp(32px, 4vw, 44px);
  max-width: 640px;
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.45;
  color: rgba(7,22,51,0.72);
}

.collection__ctas {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.collection-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; min-width: 220px; padding: 0 28px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.collection-btn--primary {
  background: var(--crimson); color: #fff;
  box-shadow: 0 18px 40px -18px rgba(122,16,36,0.55);
}
.collection-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -22px rgba(122,16,36,0.7);
  background: #9a263a;
}
.collection-btn--ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px rgba(7,22,51,0.18);
}
.collection-btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(7,22,51,0.04);
  box-shadow: inset 0 0 0 1.5px rgba(7,22,51,0.45);
}

.collection__trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(7,22,51,0.55);
}
.collection__trust li {
  display: inline-flex; align-items: center; gap: 10px;
}
.collection__trust li + li::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  margin-right: 4px;
}

/* --- Asymmetric 2-col rows --- */
.collection__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 80px);
  margin-bottom: clamp(44px, 6vw, 80px);
  align-items: start;
}
.collection__col {
  display: flex; flex-direction: column;
  gap: clamp(40px, 5vw, 96px);
  min-width: 0;
}
.collection__col--end { justify-content: flex-end; min-height: 100%; }

/* --- Featured Schools block --- */
.collection__featured {
  padding-bottom: clamp(32px, 4vw, 48px);
  max-width: 540px;
}
.collection__featured-head {
  display: inline-flex; align-items: center; gap: 16px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.collection__featured-icon {
  width: 26px; height: 26px;
  color: var(--navy);
}
.collection__featured-icon svg { width: 100%; height: 100%; }
.collection__featured-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--navy);
}
.collection__featured-body {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.3; letter-spacing: -0.014em;
  color: var(--navy);
}
.collection__featured-body em { font-style: italic; color: var(--gold); }
.collection__featured-link {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--crimson);
  text-decoration: none;
  border-bottom: 1px solid var(--crimson);
  padding-bottom: 4px;
  transition: gap 0.25s ease;
}

/* --- Cards --- */
.collection-card {
  display: block;
  text-decoration: none;
  color: var(--navy);
}
.collection-card__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--paper-deep);
}
.collection-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.collection-card:hover .collection-card__media img { transform: scale(1.04); }
.collection-card--tall      .collection-card__media { aspect-ratio: 647 / 797; }
.collection-card--landscape .collection-card__media { aspect-ratio: 513 / 568; }

.collection-card__hover {
  position: absolute; left: 24px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--paper); color: var(--navy);
  border-radius: 999px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.collection-card:hover .collection-card__hover {
  opacity: 1; transform: translateY(0);
}

.collection-card__caption {
  display: flex; align-items: baseline; gap: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(7,22,51,0.12);
}
.collection-card__num {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--gold);
  letter-spacing: -0.01em;
}
.collection-card__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.2; letter-spacing: -0.012em;
  color: var(--navy);
}
.collection-card__meta {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(7,22,51,0.55);
}

/* --- Conversion footer --- */
.collection__cta-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid rgba(7,22,51,0.18);
  border-bottom: 1px solid rgba(7,22,51,0.18);
}
.collection__cta-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.collection__cta-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.15; letter-spacing: -0.014em;
  color: var(--navy);
}
.collection__cta-h em { font-style: italic; color: var(--crimson); }

/* --- Tablet / mobile --- */
@media (max-width: 880px) {
  .collection__headline { font-size: clamp(56px, 16vw, 100px); }
  .collection__row,
  .collection__row--reverse {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .collection__col { gap: 48px; }
  .collection__featured { padding-bottom: 16px; }
  .collection__ctas { flex-direction: column; width: 100%; max-width: 360px; }
  .collection-btn { width: 100%; min-width: 0; justify-content: center; }
  .collection__cta-foot { flex-direction: column; text-align: center; align-items: center; }
  .collection-card__hover { left: 16px; bottom: 16px; padding: 10px 18px; font-size: 10px; }
}

/* =====================================================================
   MUSEUM SPREAD — (kept harmless above; classes hidden via expose rules)
   ===================================================================== */
:root {
  --mz-bg:        #F2EEE4;
  --mz-text:      #1E1B18;
  --mz-muted:     #5B534B;
  --mz-gold:      #A98552;
  --mz-border:    rgba(30,27,24,0.18);
  --mz-dark-bg:   #191716;
  --mz-pad:       clamp(24px, 5vw, 72px);
}

.museum-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--mz-muted);
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.museum-eyebrow--light { color: rgba(242,238,228,0.7); }

.museum-btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 18px 32px;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.museum-btn--dark { background: var(--mz-text); color: var(--mz-bg); }
.museum-btn--dark:hover { transform: translateY(-2px); background: #000; }

/* ---------- Section 1: Pillars (3-col) ---------- */
.museum-pillars {
  background: var(--mz-bg); color: var(--mz-text);
  border-top: 1px solid var(--mz-border);
  border-bottom: 1px solid var(--mz-border);
  padding: clamp(64px, 8vw, 110px) var(--mz-pad);
}
.museum-pillars__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 6vw, 96px);
}
.museum-pillar { position: relative; }
.museum-pillar + .museum-pillar { border-left: 1px solid var(--mz-border); padding-left: clamp(20px, 3vw, 48px); }
.museum-pillar__index {
  display: block;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(40px, 4vw, 60px); line-height: 1;
  color: var(--mz-gold);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.museum-pillar__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.15; letter-spacing: -0.012em;
  color: var(--mz-text);
}
.museum-pillar__body {
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.7;
  color: var(--mz-muted);
  max-width: 38ch;
}
.museum-pillar__link {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mz-text);
  text-decoration: none;
  border-bottom: 1px solid var(--mz-border);
  padding-bottom: 4px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.museum-pillar__link:hover { color: var(--mz-gold); border-color: var(--mz-gold); }

/* ---------- Section 2: Mission (5fr / 7fr) ---------- */
.museum-mission {
  background: var(--mz-bg); color: var(--mz-text);
  padding: clamp(80px, 10vw, 140px) var(--mz-pad);
}
.museum-mission__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.museum-mission__h {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw + 0.5rem, 84px);
  line-height: 0.96; letter-spacing: -0.022em;
  color: var(--mz-text);
}
.museum-mission__h em { font-style: italic; color: var(--mz-gold); }
.museum-mission__lede {
  margin: 0 0 32px;
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.7;
  color: var(--mz-muted);
  max-width: 44ch;
}
.museum-mission__quote {
  margin: 0 0 36px;
  padding: 20px 0 20px 28px;
  border-left: 1px solid var(--mz-border);
}
.museum-mission__quote p {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45;
  color: var(--mz-text);
  max-width: 38ch;
}
.museum-mission__quote figcaption {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mz-gold);
}
.museum-mission__art {
  margin: 0;
  position: relative;
}
.museum-mission__art img {
  width: 100%; height: auto;
  aspect-ratio: 7/5;
  object-fit: cover; display: block;
}

/* ---------- Section 3: Timeline (dark) ---------- */
.museum-timeline {
  background: var(--mz-dark-bg);
  color: var(--mz-bg);
  padding: clamp(96px, 11vw, 160px) var(--mz-pad);
  position: relative; overflow: hidden;
}
.museum-timeline__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: clamp(48px, 6vw, 88px);
  position: relative;
  align-items: start;
}
.museum-timeline__C {
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(180px, 22vw, 360px);
  line-height: 0.84; letter-spacing: -0.04em;
  color: var(--mz-gold);
  opacity: 0.85;
  align-self: start;
  margin-top: -0.12em;
  user-select: none;
}
.museum-timeline__head {
  grid-column: 2;
  grid-row: 1;
}
.museum-timeline__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw + 0.5rem, 84px);
  line-height: 0.98; letter-spacing: -0.022em;
  color: var(--mz-bg);
}
.museum-timeline__h em { font-style: italic; color: var(--mz-gold); }

.museum-timeline__portrait {
  grid-column: 3; grid-row: 1 / span 2;
  margin: 0;
  position: relative;
  align-self: start;
}
.museum-timeline__portrait img {
  width: 100%; aspect-ratio: 3/4;
  object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
}
.museum-timeline__portrait figcaption {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242,238,228,0.55);
}

.museum-years {
  grid-column: 2;
  grid-row: 2;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid rgba(242,238,228,0.18);
  padding-top: clamp(20px, 2.5vw, 32px);
}
.museum-year {
  display: flex; flex-direction: column; gap: 8px;
  padding-right: 12px;
  border-right: 1px solid rgba(242,238,228,0.10);
}
.museum-year:last-child { border-right: none; }
.museum-year__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px); line-height: 1;
  color: var(--mz-bg);
  letter-spacing: -0.01em;
}
.museum-year__cap {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(242,238,228,0.62);
  line-height: 1.5;
}
.museum-year--now .museum-year__num { color: var(--mz-gold); font-style: italic; }
.museum-year--now .museum-year__cap { color: var(--mz-gold); }

.museum-timeline__quote {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  padding-top: clamp(28px, 3.5vw, 56px);
  border-top: 1px solid rgba(242,238,228,0.18);
}
.museum-timeline__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.4vw + 0.3rem, 40px);
  line-height: 1.3; letter-spacing: -0.012em;
  color: var(--mz-bg);
  max-width: 22ch;
}
.museum-timeline__quote em { color: var(--mz-gold); font-style: italic; }

/* ---------- Responsive (per YAML responsive_rules) ---------- */
@media (max-width: 980px) {
  /* Tablet: collapse to single column */
  .museum-pillars__inner { grid-template-columns: 1fr; gap: 48px; }
  .museum-pillar + .museum-pillar { border-left: none; border-top: 1px solid var(--mz-border); padding: 32px 0 0; }
  .museum-mission__inner { grid-template-columns: 1fr; gap: 48px; }

  .museum-timeline__inner {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .museum-timeline__C { grid-column: 1; grid-row: auto; font-size: clamp(140px, 28vw, 220px); }
  .museum-timeline__head { grid-column: 1; grid-row: auto; }
  .museum-timeline__portrait { grid-column: 1; grid-row: auto; max-width: 360px; }
  .museum-timeline__portrait img { aspect-ratio: 4/5; }
  .museum-years { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Mobile */
  :root { --mz-pad: 24px; }
  .museum-mission__h, .museum-timeline__h { font-size: clamp(40px, 12vw, 64px); }
  .museum-years { grid-template-columns: 1fr; }
  .museum-year { border-right: none; border-bottom: 1px solid rgba(242,238,228,0.10); padding: 0 0 16px; }
  .museum-year:last-child { border-bottom: none; }
}

/* (Old .editorial spread classes removed but kept harmless above) */
.editorial {
  display: none !important;
}
.editorial__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

/* Right-side vertical timeline rule with markers */
.editorial__rail {
  position: absolute;
  top: 0; bottom: 0; right: clamp(8px, 2vw, 32px);
  width: 1px; background: rgba(7,22,51,0.18);
  pointer-events: none;
}
.editorial__marker {
  position: absolute;
  right: -3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold);
  border: 2px solid var(--paper);
}
.editorial__rail-x {
  position: absolute;
  right: -7px; width: 16px; height: 16px;
  color: rgba(7,22,51,0.45);
  font-family: var(--font-sans); font-weight: 400;
  font-size: 14px; line-height: 1;
  display: grid; place-items: center;
  background: var(--paper);
  transform: rotate(45deg);
}
.editorial__rail-x::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* Top eyebrow line: GENEVA ACADEMY / CLASSICAL CHRISTIAN */
.editorial__masthead {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: clamp(48px, 6vw, 88px);
  padding-right: clamp(40px, 5vw, 80px);
}
.editorial__masthead-tag {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
  line-height: 1.7;
}
.editorial__masthead-tag span {
  display: block;
  color: rgba(7,22,51,0.55); font-weight: 500;
}

/* Massive name + hero photo + quote block row */
.editorial__lede {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 88px);
  padding-right: clamp(40px, 5vw, 80px);
}
.editorial__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 8vw + 1rem, 132px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.editorial__name em {
  font-style: italic; font-weight: 400;
  color: var(--crimson);
}
.editorial__dates {
  margin-top: clamp(20px, 2.5vw, 32px);
  font-family: var(--font-serif);
  font-size: 15px; line-height: 1.7;
  color: rgba(7,22,51,0.65);
}

/* Lede right column — figure + pull-quote */
.editorial__figure {
  position: relative;
}
.editorial__figure img {
  width: 100%; aspect-ratio: 1/1;
  object-fit: cover; display: block;
  background: var(--paper-deep);
}
.editorial__pullquote {
  margin: clamp(20px, 3vw, 36px) 0 0;
  padding-left: clamp(28px, 3vw, 44px);
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5;
  color: rgba(7,22,51,0.75);
  max-width: 320px;
}
.editorial__pullquote::before {
  content: "\201C";
  position: absolute; top: -0.4em; left: 0;
  font-family: var(--font-display);
  font-size: 2.4em; line-height: 1;
  font-style: normal; font-weight: 400;
  color: rgba(7,22,51,0.35);
}

/* Body grid: drop cap + paragraph columns alternating with photos */
.editorial__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-right: clamp(40px, 5vw, 80px);
}
.editorial__dropcap {
  font-family: var(--font-display);
  font-weight: 400; font-style: normal;
  font-size: clamp(96px, 12vw, 180px);
  line-height: 0.84;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  justify-self: end;
}
.editorial__body-text p {
  margin: 0 0 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(14px, 1vw, 16px); line-height: 1.7;
  color: var(--ink-soft);
  max-width: 36ch;
}
.editorial__body-text p em { font-style: italic; color: var(--ink); }

/* Chapter row: photo + year marker + caption */
.editorial__chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-right: clamp(40px, 5vw, 80px);
}
.editorial__chapter--reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.editorial__chapter--reverse .editorial__chapter-text { order: -1; }
.editorial__chapter-figure {
  position: relative;
}
.editorial__chapter-figure img {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover; display: block;
  background: var(--paper-deep);
}
.editorial__chapter--reverse .editorial__chapter-figure img { aspect-ratio: 4/3; }
.editorial__caption {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(7,22,51,0.55);
  writing-mode: horizontal-tb;
}
.editorial__caption--side {
  position: absolute; top: 0; left: -1.6em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0; max-width: none;
}

.editorial__chapter-text { padding-top: clamp(40px, 6vw, 96px); }
.editorial__year {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1; letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 12px;
}
.editorial__year-cap {
  font-family: var(--font-serif);
  font-size: 15px; line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 16px; max-width: 36ch;
}
.editorial__chapter-h {
  margin: clamp(20px, 2.5vw, 32px) 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15; letter-spacing: -0.012em;
  color: var(--navy); max-width: 12ch;
}
.editorial__chapter-h em { font-style: italic; color: var(--crimson); }
.editorial__chapter-body {
  font-family: var(--font-serif);
  font-size: clamp(14px, 0.95vw, 16px); line-height: 1.7;
  color: var(--ink-soft); margin: 0 0 1.25rem; max-width: 38ch;
}

/* Big mid-section pullquote */
.editorial__quote-big {
  margin: clamp(56px, 7vw, 96px) 0;
  padding-right: clamp(40px, 5vw, 80px);
  text-align: left;
  max-width: 760px;
}
.editorial__quote-big p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw + 0.4rem, 40px);
  line-height: 1.22; letter-spacing: -0.012em;
  color: var(--navy);
}
.editorial__quote-big em { font-style: italic; color: var(--crimson); }
.editorial__quote-mark {
  display: block;
  font-family: var(--font-display);
  font-style: normal; font-weight: 400;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1;
  color: rgba(7,22,51,0.35);
  margin-bottom: 8px;
}

/* Small italic mini-quote inline */
.editorial__mini {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(14px, 1vw, 16px); line-height: 1.55;
  color: rgba(7,22,51,0.75);
  max-width: 24ch;
  margin: 0;
}
.editorial__mini::before {
  content: "\201C";
  position: absolute; top: -0.2em; left: 0;
  font-size: 2em; line-height: 1;
  color: rgba(7,22,51,0.35);
}

/* Closing signature row */
.editorial__sign {
  display: flex; align-items: baseline; gap: 18px;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid rgba(7,22,51,0.12);
  padding-right: clamp(40px, 5vw, 80px);
}
.editorial__sign-name {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--navy);
}
.editorial__sign-role {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(7,22,51,0.55);
}

/* Mobile cleanup */
@media (max-width: 880px) {
  .editorial__rail { display: none; }
  .editorial__masthead,
  .editorial__lede,
  .editorial__body,
  .editorial__chapter,
  .editorial__chapter--reverse,
  .editorial__quote-big,
  .editorial__sign { padding-right: 0; }
  .editorial__lede,
  .editorial__body,
  .editorial__chapter,
  .editorial__chapter--reverse {
    grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px);
  }
  .editorial__chapter--reverse .editorial__chapter-text { order: 0; }
  .editorial__chapter-text { padding-top: 0; }
  .editorial__dropcap { justify-self: start; font-size: clamp(80px, 22vw, 140px); }
  .editorial__caption--side { position: static; writing-mode: horizontal-tb; transform: none; margin-top: 10px; }
  .editorial__name { font-size: clamp(48px, 14vw, 84px); }
}

/* =====================================================================
   PROGRAMS V2 — Editorial header + two large feature articles
   ===================================================================== */
.programs-v2 {
  padding: clamp(72px, 9vw, 140px) 0;
  background: transparent !important;
  color: var(--navy);
}
.programs-v2__inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 80px);
}

/* Header: 2-col grid 865/519 with image on the right */
.programs-v2__head {
  display: grid;
  grid-template-columns: minmax(0, 865fr) minmax(0, 519fr);
  align-items: center;
  column-gap: clamp(40px, 5vw, 72px);
  row-gap: clamp(40px, 5vw, 72px);
  margin-bottom: clamp(72px, 8vw, 108px);
}
.programs-v2__head-copy { min-width: 0; }
.programs-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}
.programs-v2__slash {
  display: none;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, var(--crimson) 0%, var(--gold) 60%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  flex: none;
}
.programs-v2__h {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 2.6vw + 18px, 64px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
  max-width: 960px;
}
.programs-v2__h em { font-style: italic; color: var(--crimson); }
.programs-v2__lede {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28.9px;
  font-weight: 400;
  color: rgba(7, 22, 51, 0.78);
  max-width: 680px;
}
.programs-v2__head-figure {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 519px;
}
.programs-v2__head-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 519 / 486;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 28px 60px -32px rgba(7, 22, 51, 0.30);
}

/* Feature articles: 2-col grid 688/688 with alternating layout */
.programs-v2__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 104px);
  row-gap: clamp(40px, 6vw, 64px);
  align-items: center;
  margin-bottom: clamp(80px, 10vw, 140px);
}
.programs-v2__feature:last-child { margin-bottom: 0; }
.programs-v2__feature--right .programs-v2__feature-media { order: 2; }
.programs-v2__feature--right .programs-v2__feature-copy { order: 1; }

.programs-v2__feature-media {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-deep);
  text-decoration: none;
  box-shadow: 0 28px 60px -32px rgba(7, 22, 51, 0.30);
}
.programs-v2__feature-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 688 / 459;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.programs-v2__feature-media:hover img,
.programs-v2__feature-media:focus-visible img { transform: scale(1.03); }

.programs-v2__feature-copy { min-width: 0; }
.programs-v2__feature-h {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 1.6vw + 14px, 38px);
  line-height: 1.08;
  letter-spacing: -0.024em;
  color: var(--navy);
  text-wrap: balance;
}
.programs-v2__feature-p {
  margin: 0 0 26px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28.9px;
  font-weight: 400;
  color: rgba(7, 22, 51, 0.78);
  max-width: 616px;
}
.programs-v2__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border: 1.5px solid rgba(7, 22, 51, 0.55);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  color: var(--navy);
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease, padding 250ms ease;
}
.programs-v2__pill:hover,
.programs-v2__pill:focus-visible {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}
.programs-v2__pill span { transition: transform 280ms ease; display: inline-block; }
.programs-v2__pill:hover span { transform: translateX(4px); }

@media (max-width: 980px) {
  .programs-v2__head { grid-template-columns: 1fr; }
  .programs-v2__head-figure { justify-self: stretch; max-width: 100%; }
  .programs-v2__feature { grid-template-columns: 1fr; }
  .programs-v2__feature--right .programs-v2__feature-media,
  .programs-v2__feature--right .programs-v2__feature-copy { order: initial; }
}

/* =====================================================================
   COMPARE-SECTION — Public vs Classical Christian side-by-side table
   ===================================================================== */
.compare-section {
  padding: clamp(72px, 9vw, 140px) 0;
  background: transparent !important;
  color: var(--navy);
}
.compare-section__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 80px);
}
.compare-section__head {
  max-width: 820px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}
.compare-section__h {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 0.8rem + 3.4vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
}
.compare-section__h em { font-style: italic; color: var(--crimson); }
.compare-section__lede {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(7, 22, 51, 0.72);
}

.compare-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  border-radius: 0;
  padding: clamp(12px, 1.4vw, 18px);
  background:
    linear-gradient(180deg, rgba(7, 22, 51, 0.03) 0%, transparent 100%),
    rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(7, 22, 51, 0.08);
  box-shadow: 0 32px 64px -40px rgba(7, 22, 51, 0.18);
}
.compare-table__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
  position: sticky;
  top: 80px;
  z-index: 2;
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
}
/* condensed: tighter padding and leading so the side-by-side reads as a scannable
   table rather than eight stacked essays */
.compare-cell {
  position: relative;
  padding: clamp(13px, 1.4vw, 18px) clamp(15px, 1.5vw, 20px);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--font-serif);
  font-size: 14.75px;
  line-height: 1.5;
}
.compare-cell p { margin: 0; }
.compare-cell__h {
  display: block;
  margin: 0 0 5px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(14px, 0.4vw + 12px, 17px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.compare-cell.is-head {
  padding-block: clamp(16px, 1.6vw, 22px);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(13px, 0.4vw + 10px, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* Public column — muted, slightly faded, crimson accent */
.compare-cell--public {
  color: rgba(7, 22, 51, 0.68);
  background: rgba(122, 16, 36, 0.04);
  border: 1px solid rgba(122, 16, 36, 0.10);
}
.compare-cell--public.is-head {
  background: var(--crimson) !important;
  color: #ffffff !important;
  border-color: var(--crimson) !important;
}
.compare-cell--public .compare-cell__h { color: var(--crimson); }

/* Geneva CCE column — confident, navy */
.compare-cell--cce {
  color: rgba(7, 22, 51, 0.92);
  background: rgba(7, 22, 51, 0.04);
  border: 1px solid rgba(7, 22, 51, 0.14);
}
.compare-cell--cce.is-head {
  background: var(--navy) !important;
  color: #ffffff !important;
  border-color: var(--navy) !important;
}
.compare-cell--cce .compare-cell__h { color: var(--navy); }

@media (max-width: 720px) {
  .compare-table__head { position: static; }
  .compare-table__head,
  .compare-row { grid-template-columns: 1fr; }

  /* On a phone the two columns stack, so the comparison stops being a comparison
     and becomes eight alternating blocks that read as contradictions. Show only
     the classical Christian side; display:none also removes the public cells from
     the accessibility tree, so the table is not announced with empty cells. */
  .compare-cell--public { display: none; }
  .compare-cell--cce.is-head { text-align: left; }
}

/* =====================================================================
   DETAIL-SECTION — "Rooted In Every Subject" head + 3 staggered cards
   ===================================================================== */
.detail-section {
  padding: clamp(72px, 9vw, 140px) 0;
  background: transparent !important;
  color: var(--navy);
}
.detail-section__inner {
  width: 100%;
  /* Match the width cap AND edge padding of the home .container sections above
     (body.page-home main#main > section > .container), which cap at 1440px and
     centre, so this block lines up with its neighbours on wide screens instead
     of spreading edge-to-edge. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
}
.detail-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: clamp(28px, 3vw, 40px);
  align-items: center;
}
.detail-section__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 3.6vw + 10px, 64px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--navy);
}
.detail-section__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(14px, 1.6vw, 30px);
  line-height: 1.08;
}
.detail-section__row + .detail-section__row { margin-top: 10px; }
.detail-section__icon {
  display: inline-grid;
  place-items: center;
  width: clamp(48px, 5vw, 72px);
  height: clamp(48px, 5vw, 72px);
  color: var(--crimson);
}
.detail-section__icon svg { width: 100%; height: 100%; display: block; }
.detail-section__em {
  display: inline-block;
  margin-left: clamp(8px, 1vw, 20px);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(44px, 4.2vw + 12px, 76px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  color: var(--crimson);
}
.detail-section__lede {
  margin: 0;
  max-width: 460px;
  justify-self: end;
  margin-right: clamp(0px, 4vw, 80px);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  color: rgba(7, 22, 51, 0.80);
}

.detail-section__grid {
  display: grid;
  /* Six slim portrait photos in a row, like a filmstrip. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.detail-card {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-deep);
}
.detail-card img {
  display: block;
  width: 100%;
  /* Tall + narrow → thin portrait against the ~225px column width. */
  height: clamp(300px, 24vw, 440px);
  object-fit: cover;
}
.detail-card--up { transform: translateY(-28px); }
.detail-card--down { transform: translateY(28px); }

@media (max-width: 980px) {
  .detail-section__head { grid-template-columns: 1fr; }
  .detail-section__lede { justify-self: start; margin-right: 0; }
}
/* Reflow the filmstrip: 3-up on tablets, 2-up on phones. */
@media (max-width: 1100px) {
  .detail-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
}
@media (max-width: 560px) {
  .detail-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-card--up, .detail-card--down { transform: none; }
}
/* Homepage filmstrip block (parallax backdrop, photo filmstrip, and its
   "Schedule a Visit" button): the full filmstrip only reads well on wide
   desktop, so hide the whole block on tablet and phone. */
@media (max-width: 1100px) {
  .filmstrip-block { display: none !important; }
}


/* =====================================================================
   WELCOME V3 — DARK variant (Sonoma-style image+text rows)
   ===================================================================== */
.welcome-v3--dark {
  background: #151c24 !important;
}
body.page-home main#main > section.welcome-v3--dark {
  background: #151c24 !important;
}
.welcome-v3--dark .welcome-v3__head { color: #ffffff; max-width: 100%; }
.welcome-v3--dark .welcome-v3__h { color: #ffffff; max-width: 1100px; }
.welcome-v3--dark .welcome-v3__h em { color: var(--crimson); }
.welcome-v3--dark .welcome-v3__body {
  color: rgba(255, 255, 255, 0.78);
  max-width: 980px;
}
.welcome-v3--dark .welcome-v3__body em { color: var(--gold-soft); font-weight: 500; }
.welcome-v3--dark .welcome-v3__eyebrow { color: var(--gold-soft); }
.welcome-v3--dark .welcome-v3__slash { color: var(--gold-soft); }

.welcome-v3__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 80px);
  margin-top: clamp(48px, 6vw, 80px);
}
.vrow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 120px);
  color: #ffffff;
}
.vrow--right { flex-direction: row-reverse; }
.vrow__media {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.vrow__media img {
  display: block;
  width: clamp(320px, 40vw, 560px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

.vrow__copy {
  flex: 1 1 0;
  max-width: 620px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vrow--left .vrow__copy { padding-top: clamp(20px, 2vw, 40px); }
.vrow--right .vrow__copy { padding-top: clamp(80px, 8vw, 140px); }

.vrow__h {
  margin: 0 0 clamp(28px, 3.2vw, 44px);
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw + 8px, 64px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}
.vrow__h em {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 4.5vw + 12px, 84px);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #ffffff;
}
.vrow__p {
  position: relative;
  margin: 0;
  padding-left: 60px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
}
.vrow__bullet {
  position: absolute;
  top: 14px;
  left: 0;
  display: inline-block;
  width: 30px;
  height: 8px;
}
.vrow__bullet::before,
.vrow__bullet::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  background: #e9540d;
}
.vrow__bullet::before { left: 0; }
.vrow__bullet::after { left: 14px; }

@media (max-width: 860px) {
  .vrow, .vrow--right { flex-direction: column; }
  .vrow__copy { padding-top: 0 !important; max-width: 100%; }
  .vrow__media img { width: 100%; aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  .welcome-v3__collage { grid-template-columns: 1fr; grid-template-rows: auto; gap: 14px; }
  .welcome-v3__img--lead, .welcome-v3__img--accent, .welcome-v3__img--tile {
    grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3;
  }
}

.welcome-v3__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  background: var(--paper-deep);
}

/* (Previously forced sections below v3 to white — removed in favor of
   the varied paper-deep gradient set on body below.) */

/* Multi-stop golden-tan gradient body — varies across the page so it
   never reads as a flat field. Sections sit transparent on top. */
body {
  background:
    linear-gradient(180deg,
      #faf8f3 0%,
      #fbf9f5 25%,
      #fcfbf8 50%,
      #fdfcfb 75%,
      #ffffff 100%) !important;
  background-attachment: fixed !important;
}

/* Most content sections become transparent so the body gradient shows. */
main#main > section { background: transparent !important; }

/* Cap and centre section content site-wide so nothing spreads edge-to-edge on
   wide screens (it just reads cleaner). Only affects screens wider than the cap;
   narrower screens stay full-width, and full-bleed heroes/bands are untouched
   because they don't use .container. Sections with their own narrower inline
   max-width keep it (their inner elements are already margin-auto centred). */
body.page-home main#main > section > .container,
body.page-home main#main > section .welcome-v3__inner {
  max-width: 1440px !important;
  width: 100%;
  padding-left: clamp(1.5rem, 6vw, 5rem) !important;
  padding-right: clamp(1.5rem, 6vw, 5rem) !important;
  margin-inline: auto !important;
}
body.page-home main#main > section.cta-band > .container,
body.page-home main#main > section.cta-band--no-watermark > .container {
  max-width: 1440px !important;
}

/* Tighten the seam between welcome-v3 and the section that follows */
body.page-home main#main > section.welcome-v3 + section {
  padding-top: clamp(48px, 5vw, 72px) !important;
}

/* On the home page, let the programs grid span the same horizontal range as
   the welcome-v3 container below (no 1280px cap), so the text columns line up. */
body.page-home main#main > section[aria-labelledby="programs-heading"] .programs-grid {
  max-width: none !important;
}
body.page-home main#main > section[aria-labelledby="programs-heading"] {
  --programs-collage-ratio: 580fr;
  --programs-text-ratio: 620fr;
}
@media (min-width: 1024px) {
  body.page-home main#main > section[aria-labelledby="programs-heading"] .programs-grid {
    grid-template-columns: minmax(0, var(--programs-collage-ratio)) minmax(0, var(--programs-text-ratio)) !important;
  }
}
main#main > section.cta-band,
main#main > section.cta-band--no-watermark { background: transparent !important; }

/* Programs intro: lock down ALL scroll-driven movement (transform,
   transition, animation, opacity, translate, will-change) on the
   intro block and every descendant. Stops parallax JS, reveal-on-scroll
   classes, and stagger effects from nudging the text on scroll. */
.programs-intro,
.programs-intro * {
  transform: none !important;
  translate: none 0 !important;
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  filter: none !important;
}

/* Mobile: cancel the desktop "bleed-left" overhang on the programs title
   and its eyebrow so they stay fully on-screen. */
@media (max-width: 980px) {
  .programs-intro__h {
    margin-left: 0 !important;
    width: 100% !important;
    font-size: clamp(2rem, 6vw + 0.5rem, 3.25rem) !important;
  }
  .programs-intro .eyebrow {
    margin-left: 0 !important;
  }
}

/* Tablet / mobile */
@media (max-width: 980px) {
  .welcome-v3__inner {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .welcome-v3__figure { justify-self: stretch; max-width: 100%; }
}
@media (max-width: 640px) {
  .welcome-v3__h { font-size: clamp(32px, 9vw, 44px); }
  .welcome-v3__eyebrow { letter-spacing: 0.14em; }
}

/* =====================================================================
   FAQ — accordion block (Geneva navy treatment)
   ===================================================================== */
.faq-wrap {
  position: relative;
  padding: clamp(80px, 9vw, 140px) clamp(24px, 5vw, 80px);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(7, 22, 51, 0.07), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(122, 16, 36, 0.05), transparent 65%),
    linear-gradient(180deg, transparent 0%, rgba(7, 22, 51, 0.025) 60%, transparent 100%);
  isolation: isolate;
}
.faq-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 169, 107, 0.55) 50%, transparent);
  pointer-events: none;
}
.faq-inner {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.faq-inner__head {
  margin-bottom: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(7, 22, 51, 0.12);
}
.faq-inner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
  color: var(--gold);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.faq-inner__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.faq-inner__h {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 0.9rem + 3.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--navy);
  text-wrap: balance;
  max-width: 760px;
}
.faq-inner__h em { font-style: italic; color: var(--crimson); }
.faq-inner__lede {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(7, 22, 51, 0.72);
}
.faq-list { display: grid; gap: 14px; }
.faq-wrap .faq-item {
  position: relative;
  border: 1px solid rgba(7, 22, 51, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.faq-wrap .faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--navy);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-wrap .faq-item:hover {
  border-color: rgba(7, 22, 51, 0.32);
  background: #ffffff;
  box-shadow: 0 12px 28px -22px rgba(7, 22, 51, 0.45);
}
.faq-wrap .faq-item[open] {
  border-color: var(--navy);
  background: #ffffff;
  box-shadow: 0 24px 50px -28px rgba(7, 22, 51, 0.45);
}
.faq-wrap .faq-item[open]::before { transform: scaleY(1); }
.faq-wrap .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(18px, 2vw, 24px) clamp(22px, 2.6vw, 36px) clamp(18px, 2vw, 24px) clamp(26px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.85rem + 0.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--navy);
  transition: color 200ms ease;
}
.faq-wrap .faq-item summary::-webkit-details-marker { display: none; }
.faq-wrap .faq-item[open] summary { padding-bottom: clamp(8px, 1vw, 14px); }
.faq-wrap .faq-item__chev {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px -8px rgba(7, 22, 51, 0.6);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), background 220ms ease, box-shadow 220ms ease;
}
.faq-wrap .faq-item__chev::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.8px solid var(--paper);
  border-bottom: 1.8px solid var(--paper);
  transform: translateY(-1.5px) rotate(45deg);
  transition: border-color 220ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-wrap .faq-item:hover .faq-item__chev {
  background: var(--crimson);
  box-shadow: 0 6px 18px -8px rgba(122, 16, 36, 0.55);
}
.faq-wrap .faq-item[open] .faq-item__chev {
  transform: rotate(180deg);
  background: var(--gold);
  box-shadow: 0 6px 18px -8px rgba(200, 169, 107, 0.65);
}
.faq-wrap .faq-item[open] .faq-item__chev::before { border-color: var(--navy); }
.faq-wrap .faq-item__body {
  padding: 0 clamp(22px, 2.6vw, 36px) clamp(22px, 2.6vw, 32px) clamp(26px, 3vw, 40px);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(7, 22, 51, 0.82);
  border-top: 1px solid rgba(7, 22, 51, 0.08);
  padding-top: clamp(16px, 1.6vw, 22px);
  margin-top: 4px;
}
.faq-wrap .faq-item__body p { margin: 0 0 0.9em; }
.faq-wrap .faq-item__body p:last-child { margin-bottom: 0; }
.faq-wrap .faq-item__body em { font-style: italic; color: var(--navy); font-weight: 500; }
.faq-wrap .faq-item__body a {
  color: var(--navy) !important;
  font-weight: 500;
  border-bottom: 1px solid var(--gold) !important;
  transition: color 200ms ease, border-color 200ms ease;
}
.faq-wrap .faq-item__body a:hover { color: var(--crimson) !important; border-color: var(--crimson) !important; }

/* =====================================================================
   MAP-EMBED — Google Maps iframe + address card, reused on every page
   ===================================================================== */
.map-embed {
  padding: clamp(60px, 7vw, 110px) clamp(24px, 5vw, 80px);
}
.map-embed__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.map-embed__map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: 0 28px 60px -32px rgba(7, 22, 51, 0.30);
  min-height: 380px;
}
.map-embed__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  filter: saturate(0.9) contrast(0.96);
}
.map-embed__card {
  background: var(--navy);
  color: var(--paper);
  border-radius: 18px;
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  box-shadow: 0 28px 60px -32px rgba(7, 22, 51, 0.45);
}
.map-embed__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.map-embed__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 0.9rem + 1.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--paper);
}
.map-embed__h em { font-style: italic; color: var(--gold-soft); }
.map-embed__addr {
  font-style: normal;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(250, 248, 243, 0.88);
}
.map-embed__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.map-embed__row a {
  color: var(--gold-soft);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-decoration: none;
  transition: color 200ms ease;
}
.map-embed__row a:hover { color: var(--paper); }
.map-embed__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  width: max-content;
  transition: background 200ms ease, color 200ms ease;
}
.map-embed__pill:hover { background: var(--gold-soft); color: var(--navy); }

@media (max-width: 860px) {
  .map-embed__inner { grid-template-columns: 1fr; }
  .map-embed__map { min-height: 320px; }
}

/* =====================================================================
   BLOG POST — single-article layout for /news/{slug}/
   ===================================================================== */
.post-page {
  background: transparent;
}
.post-page__hero {
  position: relative;
  padding: clamp(60px, 8vw, 120px) 0 clamp(36px, 5vw, 64px);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(7, 22, 51, 0.06), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(7, 22, 51, 0.025) 100%);
  border-bottom: 1px solid rgba(7, 22, 51, 0.08);
  text-align: left;
}
.post-page__back {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1.75rem;
}
.post-page__back a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}
.post-page__back a:hover { color: var(--crimson); border-color: var(--crimson); }
.post-page__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1rem + 3.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--navy);
  text-wrap: balance;
  max-width: 920px;
}
.post-page__cover {
  margin: 0;
  padding: 0;
  background: transparent;
}
.post-page__cover-inner {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: 0;
}
.post-page__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 40px 80px -40px rgba(7, 22, 51, 0.35);
}

.post-page__body {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.post-page__body p {
  margin: 0 0 1.25em;
  font-family: var(--font-serif);
  font-size: clamp(17px, 0.4vw + 16px, 19px);
  line-height: 1.75;
  color: rgba(7, 22, 51, 0.85);
}
.post-page__body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4em;
  float: left;
  line-height: 0.9;
  margin: 0.1em 0.12em 0 0;
  color: var(--crimson);
  font-weight: 500;
}
.post-page__body em { font-style: italic; }
.post-signature {
  margin-top: 3rem !important;
  font-family: var(--font-sans);
  font-size: 13px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold) !important;
  font-style: normal !important;
}
.post-page__foot {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(60px, 8vw, 120px);
  border-top: 1px solid rgba(7, 22, 51, 0.08);
}

/* Curved gradient divider at the bottom of the programs section */
.programs-section--curve {
  position: relative;
  padding-bottom: clamp(48px, 6vw, 88px) !important;
}
.programs-section--curve::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 22px;
  height: 36px;
  background: linear-gradient(30deg,
    rgba(200, 169, 107, 0) 0%,
    rgba(200, 169, 107, 0.45) 18%,
    var(--gold) 38%,
    var(--crimson) 50%,
    var(--gold) 62%,
    rgba(200, 169, 107, 0.45) 82%,
    rgba(200, 169, 107, 0) 100%
  );
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'><path d='M 0 14 Q 600 38 1200 14 L 1200 16 Q 600 40 0 16 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'><path d='M 0 14 Q 600 38 1200 14 L 1200 16 Q 600 40 0 16 Z' fill='black'/></svg>") center / 100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(122, 16, 36, 0.20));
}

/* =====================================================================
   CTA SPLIT — copy left, contact form right (home CTA band)
   ===================================================================== */
.cta-band--split { text-align: left; }
.cta-band--split .cta-split__copy .h-section,
.cta-band--split .cta-split__copy .display-xl,
.cta-band--split .cta-split__copy .lede {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
.cta-band--split .cta-split__copy .ctas { justify-content: flex-start !important; }
.cta-band--split .cta-split__copy .eyebrow { justify-content: flex-start !important; }
.cta-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.cta-split__copy { min-width: 0; }
.cta-split__contact a { transition: color 200ms ease, border-color 200ms ease; }
.cta-split__contact a:hover { color: var(--crimson); border-color: var(--crimson); }

@media (max-width: 900px) {
  .cta-split { grid-template-columns: 1fr; }
}

/* Form ----------------------------------------------------------------- */
.cta-form {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(7, 22, 51, 0.14);
  border-radius: 4px;
  padding: clamp(28px, 3.5vw, 44px);
  isolation: isolate;
  overflow: hidden;
}
/* flat: tricolor top bar removed */
.cta-form::before { content: none; }
.cta-form__head { margin-bottom: clamp(20px, 2.4vw, 28px); }
.cta-form__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.cta-form__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 0.9rem + 1.3vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--navy);
  text-wrap: balance;
}
.cta-form__form {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}
.cta-form__row {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}
.cta-form__row--split { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) {
  .cta-form__row--split { grid-template-columns: 1fr; }
}
.cta-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cta-form__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.cta-form__hint {
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: none;
  color: var(--ink-mute);
  font-size: 10.5px;
  margin-left: 4px;
}
.cta-form__field input,
.cta-form__field select,
.cta-form__field textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: #faf8f3;
  border: 1px solid rgba(7, 22, 51, 0.14);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--navy);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.cta-form__field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-serif);
}
.cta-form__field input::placeholder,
.cta-form__field textarea::placeholder {
  color: rgba(7, 22, 51, 0.42);
  font-style: italic;
}
.cta-form__field input:focus,
.cta-form__field select:focus,
.cta-form__field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(25, 34, 75, 0.10);
}
.cta-form__field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}
.cta-form__actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  justify-content: space-between;
}
.cta-form__actions .btn { flex: none; }
.cta-form__privacy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 240px;
}
.cta-form__privacy a {
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease;
}
.cta-form__privacy a:hover { color: var(--crimson); border-color: var(--crimson); }
.k3-row__copy { min-width: 0; }
.k3-row__h {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.5vw + 0.5rem, 42px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
}
.k3-row__body {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(7, 22, 51, 0.78);
  max-width: 56ch;
}
.k3-row__body em { font-style: italic; color: var(--navy); font-weight: 500; }
.k3-row__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border: 1.5px solid rgba(7, 22, 51, 0.55);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.045em;
  color: var(--navy);
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.k3-row__pill:hover,
.k3-row__pill:focus-visible {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}
.k3-row__arrow { transition: transform 250ms ease; }
.k3-row__pill:hover .k3-row__arrow { transform: translateX(3px); }

@media (max-width: 860px) {
  .k3-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Unified button hover (2026-07-02) — every crimson / filled button now
   "highlights to white" on hover (like the ghost button), with navy text.
   The crimson white-shimmer sweep is removed for a clean, simple fill.
   --------------------------------------------------------------------------- */
.btn--primary::after,
.btn--crimson::after {
  background: var(--paper);
  background-image: none;
  transform: translateX(-105%);
  opacity: 1;
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover::after,
.btn--crimson:hover::after {
  transform: translateX(0);
}
.btn--primary:hover,
.btn--crimson:hover {
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
/* Outline buttons on light backgrounds → fill to white on hover too */
.btn--ghost-dark::after { background: var(--paper); }
.btn--ghost-dark:hover {
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

/* ---------------------------------------------------------------------------
   Sub-page heroes (2026-07-02) — match the home page hero's height / main-photo
   dimensions exactly, so every hero reads as the same size across the site.
   (Overrides the smaller per-page inline min-heights.)
   --------------------------------------------------------------------------- */
/* Full-screen heroes. The site header is sticky and in-flow (min-height 80px),
   so the hero fills exactly the viewport that remains beneath it. `svh` is used
   over `vh` so mobile browser chrome does not push the hero taller than the
   screen; the `vh` line is the fallback for engines without `svh`.
   `.hero-card` is the home page hero, `.about-hero` every sub-page hero. */
.about-hero,
.hero-card {
  min-height: calc(100vh - var(--header-h)) !important;
  min-height: calc(100svh - var(--header-h)) !important;
}

/* ---------------------------------------------------------------------------
   "As Seen On" press row, in the hero beneath the CTAs.

   The logos are dark marks on transparent PNGs, shown desaturated rather than in
   their brand colours so five palettes are not fighting the hero.

   grayscale(), NOT brightness(0). The ABC mark is a filled disc with the letters
   knocked out in white, and the NBC peacock is similar; brightness(0) crushes the
   white knockout and the dark field to the same black and the logo becomes an
   unreadable blob. grayscale() keeps the light/dark relationship, so on the navy
   desktop hero the pair is inverted (white disc, dark letters) and on the white
   phone hero it is left as-is (dark disc, white letters).
   --------------------------------------------------------------------------- */
.press-row { width: 100%; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.press-row__label {
  margin: 0 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.62);
}
/* Each logo sits in a floating white disc, the original "As Seen On" treatment.
   The offset lives on the <li> and the animation on the badge inside it, because a
   keyframe that animates `transform` would otherwise overwrite a static translateY
   on the same element. Logos keep their brand colours here: they sit on white, so
   the grayscale/invert trick the flat row needed does not apply.
   The images are the *-trim.png crops, so `contain` fits the mark, not the wide
   transparent margin the square originals carried. */
.press-row__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: clamp(10px, 2.2vw, 26px);
  --press-circle: clamp(44px, 6vw, 84px);
}
.press-row__list li { flex: none; }
.press-row__list li:nth-child(odd)  { transform: translateY(-8px); }
.press-row__list li:nth-child(even) { transform: translateY(8px); }

.press-row__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--press-circle);
  height: var(--press-circle);
  padding: 18%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 16px 46px -10px rgba(0, 0, 0, 0.5);
  animation: gn-float 4.8s ease-in-out infinite;
}
.press-row__list li:nth-child(1) .press-row__badge { animation-delay: 0s; }
.press-row__list li:nth-child(2) .press-row__badge { animation-delay: 0.6s; }
.press-row__list li:nth-child(3) .press-row__badge { animation-delay: 1.2s; }
.press-row__list li:nth-child(4) .press-row__badge { animation-delay: 1.8s; }
.press-row__list li:nth-child(5) .press-row__badge { animation-delay: 2.4s; }

.press-row__badge img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes gn-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .press-row__badge { animation: none; }
}

/* ---------------------------------------------------------------------------
   Phone home hero (<= 640px): a white hero with the student portrait sitting in
   the content flow, between the headline and the lede.

   The portrait is a white-studio photograph with the white baked in (no alpha),
   so the hero background is pure #fff rather than --paper's warm ivory; that is
   what lets the photo blend into the page with no visible edge.

   The portrait is painted as a background-image on an empty, role="img" div
   instead of an <img>. A background-image inside a non-matching media query is
   never fetched, so desktop never downloads the phone-only photo.

   Because the navy card and its scrim are gone, every piece of hero copy is
   re-coloured for a light background: the inline styles in content.json hard-code
   white, so each override needs !important.
   --------------------------------------------------------------------------- */
.hero-portrait { display: none; }

/* 1024px, not 640px: the white hero runs all the way up through tablet portrait.
   It stops just below 1100px, where .hero-seal-wrap brings the crest back and the
   navy hero takes over, so the two treatments never overlap. */
@media (max-width: 1024px) {
  .page-home .hero-card {
    background-color: #fff !important;
    color: var(--ink) !important;
  }

  /* the classroom photo, its scrim, the grain and the top/bottom darkening all
     belonged to the navy hero and have nothing to sit on now */
  .page-home .hero-card .hero-bg,
  .page-home .hero-card .hero-bg + div[aria-hidden="true"],
  .page-home .hero-card .grain { display: none !important; }
  .page-home .hero-card::after { display: none !important; }

  /* The block is vertically centred in the hero, so the way to lift the headline
     is to weight the padding towards the bottom: the extra bottom padding is what
     pushes the whole column up off centre. */
  .page-home .hero-card .hero-content-wrap {
    align-items: center !important;
    padding-top: clamp(0.25rem, 1vh, 0.75rem) !important;
    padding-bottom: clamp(2rem, 7vh, 4.5rem) !important;
  }
  .page-home .hero-card .hero-content {
    max-width: none !important;
    align-items: center !important; /* centres the headline, portrait, lede and buttons */
    text-align: center !important;
  }
  /* The photo is cropped tight to the student, so this box is sized to him.
     The hero is a full-screen card and the copy above and below it is fixed
     height, so the room left for the portrait is governed by viewport HEIGHT,
     not width — hence svh. The 72% cap keeps him from going wide on a narrow
     phone, and the 150px floor keeps him recognisable on a short one. */
  .page-home .hero-portrait {
    display: block;
    /* the 300px ceiling (was 240px) keeps him from looking stranded on a tablet,
       while the 70% cap still governs on a narrow phone */
    width: min(clamp(150px, 23svh, 300px), 70%);
    aspect-ratio: 400 / 447;
    /* the h1 contributes 0.5rem below it and the lede 0.75rem above it, so these
       margins are set to land on an even ~32px of air on each side of the boy */
    margin: 1.5rem auto 1.25rem;
    background: url("images/hero-mobile-student.jpg") center / contain no-repeat;
  }

  .page-home .hero-card .hero-headline,
  .page-home .hero-card .hero-headline__row {
    text-align: center !important;
    color: var(--navy) !important;
  }
  .page-home .hero-card .hero-headline__row--tail { color: var(--ink-soft) !important; }

  /* the eyebrow is nowrap by default and is too long to centre on a phone */
  .page-home .hero-card .hero-content .eyebrow {
    white-space: normal !important;
    color: var(--crimson) !important;
    margin-bottom: 0.75rem !important;
  }

  /* the <p> carries an inline text-align:left, so centring it needs !important */
  .page-home .hero-card .hero-lede {
    margin: 0.75rem auto 1.5rem !important;
    color: var(--ink-soft) !important;
    text-align: center !important;
  }
  .page-home .hero-card .hero-lede em { color: var(--crimson) !important; }

  /* Keep the two hero CTAs side by side instead of stacking.

     Below 480px an older rule turns this row into a column and forces each button
     to width:100%:
       .hero-content > div > div[style*="display:flex"] { flex-direction: column !important }
       .hero-content .btn { width: 100% }
     That attribute selector outranks a plain `.page-home .hero-cta-row`, so these
     rules carry an extra class (three classes beats two classes + one attribute)
     and restore `flex-direction: row`.

     Two buttons at their natural 220px plus a 14px gap need 454px, but a 360px
     phone only offers a 297px content box, so the buttons are also allowed to
     shrink (flex-basis 0, min-width 0, overriding the 200px floor on .btn) with
     the type, tracking, padding and arrow scaled back until the pair fits. */
  /* .hero-content centres its children, so the .reveal wrapper around the buttons
     shrinks to its content and width:100% on the row would resolve against that
     shrunk box. Stretch the wrapper first, then the row has real width to fill. */
  .page-home .hero-content > div:has(> .hero-cta-row) {
    width: 100%;
    align-self: stretch;
  }
  .page-home .hero-content .hero-cta-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(8px, 2.5vw, 14px) !important;
    width: 100%;
  }
  .page-home .hero-content .hero-cta-row .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 260px;
    padding: 0 clamp(6px, 2.5vw, 20px);
    font-size: clamp(9.5px, 2.7vw, 12px);
    letter-spacing: clamp(0.4px, 0.28vw, 1.6px);
    gap: clamp(4px, 1.5vw, 10px);
  }
  /* the arrow costs ~26px per button and is decorative */
  .page-home .hero-content .hero-cta-row .btn__arrow { display: none; }

  /* the press row sits on white here, so the logos invert back to near-black
     and the whole row centres with the rest of the hero column */
  .page-home .press-row { text-align: center; }
  .page-home .press-row__label { color: var(--ink-soft); opacity: 0.7; }
  .page-home .press-row__list {
    justify-content: center;
    gap: clamp(8px, 2.6vw, 18px);
    /* five discs plus four gaps must clear a 281px content box at 320px wide */
    --press-circle: clamp(42px, 12.5vw, 66px);
  }
  /* the phone hero is white, so a white disc on white needs an edge to read */
  .page-home .press-row__badge {
    border: 1px solid rgba(14, 20, 48, 0.08);
    box-shadow: 0 8px 22px -10px rgba(14, 20, 48, 0.45);
  }

  /* .btn--ghost is a white outline over white — restyle it as .btn--ghost-dark */
  .page-home .hero-card .btn--ghost {
    color: var(--navy) !important;
    box-shadow: inset 0 0 0 1px var(--navy) !important;
  }
  .page-home .hero-card .btn--ghost::after { background: var(--navy) !important; }
  .page-home .hero-card .btn--ghost:hover {
    color: var(--paper) !important;
    box-shadow: inset 0 0 0 1px transparent !important;
  }
}

/* ---------------------------------------------------------------------------
   "As Seen On" — a full-width bar pinned to the bottom of the hero, on iPad and
   desktop (>= 768px). Phones (< 768px) keep it inline in the content column.

   The bar is absolutely positioned against .hero-content-wrap (position:relative,
   full width), so left/right:0 spans the whole hero. It is lifted a little off the
   very bottom so the badges' float animation never clips against the hero-card's
   overflow:hidden. pointer-events:none because the badges are not links and the
   bar must not intercept clicks meant for the hero.
   --------------------------------------------------------------------------- */
/* The press row sits with the hero CTAs (it already follows .hero-cta-row in the
   markup), left-aligned under "Begin Admissions" / "Schedule a Visit", rather
   than pinned across the bottom of the hero. Badge size is unchanged. */
@media (min-width: 768px) {
  /* Shrink-to-fit column holding the CTA row + the press row. Because it hugs
     its widest child (the two buttons), centring the press row inside it centres
     the label and logos on the BUTTON GROUP rather than on the whole hero
     column, which is wider and would push them off to the right. */
  .page-home .hero-cta-stack {
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .page-home .press-row {
    position: static;
    width: auto;
    align-self: stretch;
    margin: clamp(1.75rem, 4vh, 2.75rem) 0 0 !important;
    padding: clamp(1rem, 2vh, 1.35rem) 0 0;
    display: flex;
    flex-direction: column;          /* label ABOVE the logos */
    align-items: center;             /* label + logos centred under the buttons */
    justify-content: flex-start;
    gap: clamp(1rem, 2.2vh, 1.5rem); /* breathing room beneath "As Seen On" */
    pointer-events: none;
  }
  .page-home .press-row__label {
    margin: 0 !important;
    white-space: nowrap;
    text-align: center;
  }
  .page-home .press-row__list {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: clamp(0.7rem, 2.2vw, 1.6rem) !important;
    --press-circle: clamp(46px, 5vw, 64px) !important;   /* same size as before */
  }
}
/* desktop navy hero: light hairline above the row */
@media (min-width: 1025px) {
  .page-home .press-row { border-top: 1px solid rgba(250, 248, 243, 0.14); }
}
/* iPad white hero: dark hairline */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-home .press-row { border-top: 1px solid rgba(14, 20, 48, 0.08); }
}

/* ---------------------------------------------------------------------------
   "Rooted in every subject." — photo first once the grid stacks.

   That section is a grid whose text column is authored first, so when it stacks
   the photo falls below the heading. Every other stacked section on the home
   page leads with its photo.

   The inline style used repeat(auto-fit, ...), which collapses on CONTAINER
   width, while the reorder below keys off VIEWPORT width. Those two disagree by
   the width of a scrollbar, which would strand the photo below the heading in a
   few pixels of viewport. So the column count is pinned to the same breakpoint
   as the reorder. The two-column desktop layout, text left photo right, is
   unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 885px) {
  .detail-section .rooted-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .detail-section .rooted-media { order: -1; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
}
@media (min-width: 886px) {
  .detail-section .rooted-grid {
    /* Match the site-wide balanced photo/text model: a wider text column and a
       capped photo column, so the photo keeps its own 3:2 ratio and reads as a
       proportional companion to the paragraph rather than a stretched slab. */
    grid-template-columns: minmax(0, 1fr) minmax(0, min(42%, 480px)) !important;
    align-items: center !important;
  }
  .detail-section .rooted-media {
    /* Keep the authored 3:2 ratio and center it beside the taller text column. */
    align-self: center !important;
  }
}

/* ==========================================================================
   FRAMED PHOTO — the layered "matted print" treatment, global.
   For any photo that sits beside a column of text. A warm tan slab sits close
   behind the photo, a fine dark navy hairline frames from further out (landing
   on the paper, clear of the tan), and a hairline gold keyline hugs the photo.
   The decoration always drifts INWARD, toward the text:
     .photo-frame--left   photo in the LEFT column  → drifts down-RIGHT
     .photo-frame--right  photo in the RIGHT column → drifts down-LEFT
   Markup:
     <figure class="photo-frame photo-frame--left">
       <div class="photo-frame__media"><img ...></div>
     </figure>
   ========================================================================== */
.photo-frame { position: relative; isolation: isolate; margin: 0; }
.photo-frame::before,
.photo-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px; z-index: 0; pointer-events: none;
}
.photo-frame::before { background: #e6d6b0; }               /* warm tan slab */
.photo-frame::after  { border: 1px solid var(--navy); }     /* fine dark hairline */
.photo-frame__media {
  position: relative; z-index: 1; border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(163,126,58,0.30), 0 26px 50px -34px rgba(7,22,51,0.55);
}
.photo-frame__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-frame--right::before { transform: translate(-16px, 16px); }
.photo-frame--right::after  { transform: translate(-30px, 30px); }
.photo-frame--left::before  { transform: translate(16px, 16px); }
.photo-frame--left::after   { transform: translate(30px, 30px); }
/* Shrink the drift on phones so the decoration never causes horizontal scroll. */
@media (max-width: 640px) {
  .photo-frame--right::before { transform: translate(-10px, 10px); }
  .photo-frame--right::after  { transform: translate(-19px, 19px); }
  .photo-frame--left::before  { transform: translate(10px, 10px); }
  .photo-frame--left::after   { transform: translate(19px, 19px); }
}
/* The legacy gold corner-brackets are upgraded to .photo-frame by PhotoFrames.tsx.
   Hide them up front so they never flash before the script swaps in the frame. */
#main figure > span[style*="1px solid var(--gold)"] { display: none; }

/* Balanced photo/text sections (toggled by PhotoBalance.tsx only while the two
   columns sit side by side). The photo keeps its OWN declared aspect ratio (4/5,
   3/2, etc.) and is vertically centered beside the text, never stretched to the
   text's height. The text column is given the majority of the width and the photo
   column is capped, so the photo always reads as a proportional companion to the
   paragraph rather than an oversized slab. PhotoBalance.tsx adds pb--photo-left /
   pb--photo-right so the wider text column always lands on the correct side. */
.photo-balanced { align-items: center !important; column-gap: clamp(2rem, 4vw, 4.5rem) !important; }
/* Cap the row and centre it on wide screens so the photo and text don't spread
   edge-to-edge. High specificity to beat the global full-width container rule. */
body.page-home main#main > section > .container.photo-balanced,
main#main > section > .container.photo-balanced {
  max-width: 1440px !important;
  margin-inline: auto !important;
}
/* Text-dominant, order-aware columns. The photo column is min(42%, 480px) so the
   text keeps the majority of the row and the photo never balloons on wide screens. */
.photo-balanced.pb--photo-right { grid-template-columns: minmax(0, 1fr) minmax(0, min(42%, 480px)) !important; }
.photo-balanced.pb--photo-left  { grid-template-columns: minmax(0, min(42%, 480px)) minmax(0, 1fr) !important; }
.photo-balanced > .photo-frame,
.photo-balanced > figure,
.photo-balanced > .rooted-media,
.photo-balanced > span,
.photo-balanced > div:has(> img) {
  align-self: center !important;   /* centered beside the text, not stretched */
  justify-self: stretch !important;
  width: 100% !important;          /* fill the (capped) photo column */
  max-width: none !important;
}

/* ==========================================================================
   FLOATY CURRICULUM ROWS (CurriculumFlow.tsx)
   Each subject is a framed photo beside its heading + summary. Photo and text
   drift at different rates on scroll (semi-independent float), and "In depth"
   expands the full course text with a soft height + fade (grid-rows trick, so
   the text stays in the DOM for search engines while collapsed).
   ========================================================================== */
/* Tightened padding for the grade curriculum section (beats the global .section rule). */
.section.grade-flow-section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem) !important; }
.cflow { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 7rem); }
/* Rows are capped and centred on the page, with a generous gap so the photo and
   text read as two floating pieces rather than one block. */
.cflow__row {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5.5vw, 5.5rem);
  max-width: 1060px;
  margin-inline: auto;
  width: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease-flow);
}
.cflow__row.is-in { opacity: 1; }
.cflow__row--rev { flex-direction: row-reverse; }

.cflow__media { flex: 0 0 clamp(230px, 34%, 380px); margin: 0; }
.cflow__media-box { aspect-ratio: 4 / 5; overflow: hidden; }
.cflow__media-box img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.cflow__text { flex: 1 1 auto; min-width: 0; position: relative; }
/* Real text content sits above the big faded icon watermark. */
.cflow__text > *:not(.cflow__wm) { position: relative; z-index: 1; }
/* Oversized faded subject icon, ghosting behind the paragraph like the seal mark. */
.cflow__wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none; line-height: 0.9;
  color: var(--navy); opacity: 0.06;
  font-size: clamp(9rem, 22vw, 19rem);
}
/* PNG crest watermark: the crimson subject icon sits behind the text as a faint
   brand mark. Slightly higher opacity than the flat glyph so its line-art reads. */
.cflow__wm--img { opacity: 0.1; width: clamp(9rem, 22vw, 17rem); }
.cflow__wm--img img { display: block; width: 100%; height: auto; }
.cflow__num { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 0.75rem; }
.cflow__h {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; color: var(--navy);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.015em;
  margin: 0 0 0.9rem;
}
.cflow__sum {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 1.0625rem; line-height: 1.7;
  color: var(--ink-soft); margin: 0; max-width: 54ch;
}

/* "In depth" toggle */
.cflow__toggle {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.15rem;
  background: none; border: 0; cursor: pointer; padding: 0.35rem 0;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--crimson); transition: color 0.3s var(--ease-flow);
}
.cflow__toggle:hover { color: var(--navy); }
.cflow__toggle-icon {
  width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.45s var(--ease-flow);
}
.cflow__row.is-open .cflow__toggle-icon { transform: translateY(1px) rotate(-135deg); }

/* Smooth height reveal: grid 0fr -> 1fr keeps the content in the DOM (crawlable). */
.cflow__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-flow); }
.cflow__row.is-open .cflow__more { grid-template-rows: 1fr; }
.cflow__more-inner {
  overflow: hidden; min-height: 0; opacity: 0;
  transition: opacity 0.5s var(--ease-flow);
}
.cflow__row.is-open .cflow__more-inner { opacity: 1; }
.cflow__more-pad { padding-top: 1.15rem; border-top: 1px solid rgba(25, 34, 75, 0.14); }
.cflow__more-inner p {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 0.95rem; line-height: 1.62;
  color: var(--ink-soft); margin: 0 0 0.55rem; max-width: 58ch;
}
.cflow__more-inner p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .cflow__row, .cflow__row--rev { flex-direction: column; align-items: flex-start; }
  .cflow__media { flex-basis: auto; width: min(320px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cflow__row { opacity: 1; }
  .cflow__more, .cflow__more-inner, .cflow__toggle-icon { transition: none; }
}

/* Full course text kept in the DOM for search engines, but out of view. */
.cflow__seo { display: none; }

/* --------------------------------------------------------------------------
   ICON-LED VARIANT (CurriculumFlowIcons.tsx — 10th grade only)
   The subject icon replaces the photo and becomes the control that opens the
   "In depth" modal. No photo frame, and no watermark behind the text.
   -------------------------------------------------------------------------- */
.cflow--icons .cflow__media--icon {
  flex: 0 0 clamp(190px, 26%, 280px);
  display: flex; justify-content: center; margin: 0;
}
.cflow--icons .cflow__icon-btn {
  display: grid; place-items: center;
  width: clamp(150px, 20vw, 232px); aspect-ratio: 1;
  padding: 0; background: none; border: 0;
  cursor: pointer; color: var(--crimson);
  transition: transform 0.5s var(--ease-flow);
}
.cflow--icons .cflow__icon-btn--static { cursor: default; }
.cflow--icons .cflow__icon-btn img { display: block; width: 100%; height: auto; }
.cflow--icons .cflow__icon-btn i { font-size: clamp(4rem, 9vw, 7rem); }
.cflow--icons .cflow__icon-btn:not(.cflow__icon-btn--static):hover { transform: scale(1.045); }
.cflow--icons .cflow__icon-btn:not(.cflow__icon-btn--static):active { transform: scale(0.99); }
.cflow--icons .cflow__icon-btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 6px;
}
/* Field number as a faded Roman numeral behind the copy, in the display italic
   used by the big section watermarks. Replaces the small gold .cflow__num. */
.cflow--icons .cflow__rn {
  width: auto;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(9rem, 19vw, 16rem);
  letter-spacing: 0.02em; line-height: 1;
  color: var(--navy); opacity: 0.07;
  user-select: none;
}
@media (max-width: 720px) {
  .cflow--icons .cflow__media--icon { flex-basis: auto; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .cflow--icons .cflow__icon-btn { transition: none; }
  .cflow--icons .cflow__icon-btn:hover { transform: none; }
}

/* "In depth" modal — a card over a blurred page (page outlines stay visible). */
.cflow-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.cflow-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(14, 20, 48, 0.32);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: cflowModalFade 0.3s var(--ease-flow);
}
.cflow-modal__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px;
  max-height: min(85vh, 760px); overflow-y: auto;
  background: var(--paper);
  padding: clamp(2rem, 4.5vw, 3.25rem);
  box-shadow: 0 40px 90px -30px rgba(7, 22, 51, 0.6);
  animation: cflowModalRise 0.45s var(--ease-flow);
}
.cflow-modal__close {
  position: absolute; top: 0.85rem; right: 1.1rem;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  background: none; border: 0; font-size: 1.9rem; line-height: 1;
  color: var(--ink-soft); cursor: pointer; transition: color 0.25s var(--ease-flow);
}
.cflow-modal__close:hover { color: var(--crimson); }
.cflow-modal__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.85rem;
}
.cflow-modal__eyebrow i { font-size: 1.05rem; }
.cflow-modal__eyebrow-img { display: block; width: 26px; height: 26px; object-fit: contain; }
.cflow-modal__h {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; color: var(--navy);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.015em;
  margin: 0 0 1.35rem;
}
.cflow-modal__body p {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 1rem; line-height: 1.68;
  color: var(--ink-soft); margin: 0 0 0.7rem;
}
.cflow-modal__body p:last-child { margin-bottom: 0; }
/* Sub-heading for each subject inside a grouped field's modal. */
.cflow-modal__sub {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; color: var(--navy);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em;
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(25, 34, 75, 0.14);
}
.cflow-modal__body > p:first-child .cflow-modal__sub {
  margin-top: 0; padding-top: 0; border-top: 0;
}
@keyframes cflowModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cflowModalRise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cflow-modal__backdrop, .cflow-modal__card { animation: none; }
}

/* ==========================================================================
   STICKY SCROLLYTELLING MEDIA (StickyMediaSteps.tsx)
   Text steps on the left, a photo pinned on the right that crossfades between
   images as each step passes the viewport centre.
   ========================================================================== */
.sticky-media__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.sticky-media__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.sticky-media__step {
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.45;
  transition: opacity 0.6s var(--ease-flow);
}
.sticky-media__step.is-active { opacity: 1; }
.sticky-media__eyebrow { color: var(--gold); margin-bottom: 1rem; display: inline-block; }
.sticky-media__h { color: var(--navy); margin-bottom: 1.25rem; }
.sticky-media__p {
  max-width: 56ch; font-size: 1.125rem; line-height: 1.7;
  color: var(--ink-soft); margin: 0 0 1rem;
}
.sticky-media__p:last-child { margin-bottom: 0; }

.sticky-media__sticky {
  position: sticky;
  top: clamp(88px, 12vh, 120px);
  margin: 0;
}
.sticky-media__stack {
  position: relative;
  height: min(76vh, 620px);
}
.sticky-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.9s var(--ease-flow), transform 1.8s var(--ease-flow);
}
.sticky-media__img.is-active { opacity: 1; transform: scale(1); }

/* Clean per-topic summary + collapsible "Full course details" (StickyMediaSteps
   `summary` mode). The summary reads large and airy; the full curriculum text is
   tucked into a native <details> disclosure so the scroll stays uncluttered. */
.sticky-media__lede {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 1.5rem;
}
.sticky-media__more { max-width: 56ch; }
.sticky-media__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  padding: 0.5rem 0;
  transition: color 0.3s var(--ease-flow);
}
.sticky-media__more > summary::-webkit-details-marker { display: none; }
.sticky-media__more > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.4s var(--ease-flow);
}
.sticky-media__more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.sticky-media__more > summary:hover { color: var(--navy); }
.sticky-media__more[open] > summary { margin-bottom: 0.75rem; }
/* Explicitly collapse the details body when closed (a global rule on the site
   defeats the browser's native <details> hiding). */
.sticky-media__more:not([open]) > .sticky-media__more-body { display: none; }
.sticky-media__more-body {
  border-top: 1px solid rgba(25, 34, 75, 0.14);
  padding-top: 1.15rem;
  margin-top: 0.25rem;
}
.sticky-media__more-body .sticky-media__p {
  font-size: 1rem;
  line-height: 1.62;
  margin: 0 0 0.6rem;
}

@media (max-width: 820px) {
  .sticky-media__grid { grid-template-columns: 1fr; gap: 0; }
  .sticky-media__figure { order: -1; }
  .sticky-media__sticky { top: clamp(70px, 9vh, 84px); }
  .sticky-media__stack { height: 40vh; }
  .sticky-media__step { min-height: 60vh; opacity: 1; }
  .sticky-media__step:first-child { padding-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-media__img { transition: opacity 0.3s linear; transform: none; }
  .sticky-media__img.is-active { transform: none; }
  .sticky-media__step { opacity: 1; }
}

/* ==========================================================================
   PHOTOS — SHARP, SQUARE CORNERS (site-wide)
   Every photograph, and the frame that clips it, renders with hard 90° corners
   — no rounded photo cards anywhere. Circular seals/avatars (border-radius:50%)
   and pill/badge shapes stay round; they never wrap a rectangular photo.
   ========================================================================== */
img,
picture,
video {
  border-radius: 0 !important;
}
/* Frames that directly clip a photo/embed lose their rounding. Direct-child
   (`> img`) keeps this to true photo frames and off unrelated content cards. */
:where(figure, a, span, div, li, button, picture):has(> img),
:where(figure, a, span, div, li, picture):has(> picture),
:where(figure, a, span, div, li):has(> video),
:where(figure, div, span, a):has(> iframe) {
  border-radius: 0 !important;
}
/* …but keep genuine circles (seal discs, round avatars, press badges). */
.brand-lockup__seal,
.hero-seal__disc,
.press-row__badge,
[class*="seal"],
[class*="avatar"],
img[class*="avatar"],
[style*="border-radius:50%"],
[style*="border-radius: 50%"] {
  border-radius: 50% !important;
}

/* ── Signature angled card corner ──────────────────────────────────
   Replaces the square bottom-right corner of the standard hairline-
   bordered "paper" card with an upward 45° cut, giving Geneva's cards
   a distinctive silhouette instead of a plain rectangle.

   Targets the site's standard card wherever it renders: both JSX
   `style` objects and raw-HTML blocks serialise to this same inline
   style, so one rule covers the whole (home) site. The `0.` fragment
   matches every hairline opacity in use (0.10 / 0.12 / 0.16).

   Because a card's ivory fill usually sits on a page of the same
   ivory, a bare cut would be invisible — so the corner is CUT with
   clip-path and the full outline (the new diagonal edge included) is
   redrawn as a uniform hairline via two layered pseudo-elements:
     ::before  fills the whole notch with the hairline colour
     ::after   an inset, 1px-smaller notch of the card fill on top,
               leaving a crisp 1px frame on every edge, diagonal and all
   In-flow card content always paints above the negative-z layers, so
   nothing is obscured; the 20px cut stays inside the card's padding so
   no text is clipped. */
/* Both spellings are matched on purpose. The markup ships the compact form
   (`border:1px solid rgba(25,34,75,0.12)`), but as soon as any script writes to
   `element.style` (the reveal observer sets will-change/opacity/transform), the
   browser re-serialises the whole style attribute with canonical spacing
   (`border: 1px solid rgba(25, 34, 75, 0.12)`). Matching only the compact form
   silently drops the angled corner from every card the reveal script touches. */
[style*="border:1px solid rgba(25,34,75,0."],
[style*="border: 1px solid rgba(25, 34, 75, 0."] {
  --card-cut: 20px;
  --card-frame: rgba(25, 34, 75, 0.14);
  position: relative;
  isolation: isolate;
  border-color: transparent !important; /* keep 1px box metrics; outline redrawn below */
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--card-cut)),
                     calc(100% - var(--card-cut)) 100%, 0 100%);
}
[style*="border:1px solid rgba(25,34,75,0."]::before,
[style*="border:1px solid rgba(25,34,75,0."]::after,
[style*="border: 1px solid rgba(25, 34, 75, 0."]::before,
[style*="border: 1px solid rgba(25, 34, 75, 0."]::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
[style*="border:1px solid rgba(25,34,75,0."]::before,
[style*="border: 1px solid rgba(25, 34, 75, 0."]::before {
  inset: 0;
  z-index: -2;
  background: var(--card-frame);
}
[style*="border:1px solid rgba(25,34,75,0."]::after,
[style*="border: 1px solid rgba(25, 34, 75, 0."]::after {
  inset: 1px;
  z-index: -1;
  background: inherit; /* matches each card's own fill (paper / paper-deep) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - (var(--card-cut) - 1px)),
                     calc(100% - (var(--card-cut) - 1px)) 100%, 0 100%);
}

/* ── Same angled corner for the class-based content cards ──────────
   .grade-card (subject/school pages) and .stage-card (Academics) set
   their hairline border in a CSS class, not inline, so the selector
   above can't reach them. They also already use ::before for the gold
   top-accent bar, so here the 1px frame is drawn a different way: the
   card's own background-color IS the frame colour, and a single ::after
   (inset 1px, card fill) covers all but that 1px on every edge, diagonal
   included. This leaves ::before free for the accent bar. !important is
   needed because each page's scoped <style> loads after main.css.
   The hover box-shadow would be clipped by clip-path, so it is swapped
   for a drop-shadow that traces the notched silhouette. */
.grade-card, .stage-card, .vg-card, .type-card {
  --card-cut: 20px;
  --card-frame: rgba(25, 34, 75, 0.14);
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--card-frame) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--card-cut)),
                     calc(100% - var(--card-cut)) 100%, 0 100%);
}
/* The fill doubles as the shimmer surface: a band of light rides on top of the
   paper colour as a second background layer. ::before is already the gold accent
   bar on these cards, so no free pseudo remains for an overlay; painting the
   shimmer here keeps the text above it perfectly crisp. */
.grade-card::after, .stage-card::after, .vg-card::after, .type-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image: linear-gradient(115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.28) 47%,
    rgba(255, 252, 242, 0.62) 50%,
    rgba(255, 255, 255, 0.28) 53%,
    transparent 60%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: 100% 0; /* band parked off the left edge */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - (var(--card-cut) - 1px)),
                     calc(100% - (var(--card-cut) - 1px)) 100%, 0 100%);
}
/* Static cards (site-wide default): these cards sit still on hover — no lift,
   shimmer, shadow, tint, or accent bar. The lift/shadow from each page's scoped
   <style> is killed with !important (that CSS loads after main.css). The resting
   look (angled corner, hairline frame, paper fill) is unchanged. */
.grade-card:hover, .stage-card:hover, .vg-card:hover, .type-card:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
/* The gold accent bar (each page's scoped ::before) never grows in. */
.grade-card::before, .stage-card::before, .vg-card::before, .type-card::before {
  transform: scaleX(0) !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .grade-card::after, .stage-card::after, .vg-card::after, .type-card::after { background-image: none; }
}

/* Journal/news post cards take the same angled corner. Their fill is white
   rather than paper, and unlike the cards above they carry a resting shadow,
   so both the resting and hover shadows become drop-shadows (clip-path clips
   a box-shadow, but drop-shadow traces the notched silhouette). */
.post-card {
  --card-cut: 20px;
  --card-frame: rgba(25, 34, 75, 0.14);
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--card-frame) !important;
  box-shadow: none !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--card-cut)),
                     calc(100% - var(--card-cut)) 100%, 0 100%);
  filter: drop-shadow(0 10px 16px rgba(14, 20, 48, 0.10));
  transition: transform 360ms var(--ease-out), filter 360ms var(--ease-out);
}
.post-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - (var(--card-cut) - 1px)),
                     calc(100% - (var(--card-cut) - 1px)) 100%, 0 100%);
}
/* Static: post cards keep their resting drop-shadow and angled corner, but do
   not tint, swell, lift, or shimmer on hover. */
.post-card:hover {
  transform: none;
  box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .post-card { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grade-card, .stage-card { transition: none; }
}

/* ==========================================================================
   LABEL "ROLL" HOVER (TextRoll.tsx duplicates each label into .txt-roll)
   Hovering a top menu-bar link or a footer link rolls the label upward: the
   visible copy slides out the top while its twin rolls in from below. Buttons
   keep their own slide-fill hover — this is nav + footer links only.
   ========================================================================== */
.txt-roll { position: relative; display: block; overflow: hidden; height: 1.5em; }
.txt-roll > span {
  display: block;
  line-height: 1.5;
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}
.txt-roll > span:last-child { position: absolute; top: 100%; left: 0; }
.nav-link:hover .txt-roll > span,
.nav-link:focus-visible .txt-roll > span,
.footer-v2__link:hover .txt-roll > span,
.footer-v2__link:focus-visible .txt-roll > span { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .txt-roll > span { transition: none; }
}