/* ═══ OCTOLEARN SCHOOL — Design System ═══ */
/* Navy + Gold palette · Light & Dark themes */

/* Brand anchors (constant across themes):
   --gold  #f7aa21  · --navy #082567 · --indigo #171755 */

/* ── LIGHT THEME (default) ── */
:root {
  --gold: #f7aa21;
  --navy: #082567;
  --indigo: #171755;

  /* fixed nav height — mobile h-16 (4rem), desktop h-20 (5rem). The hero starts
     its image and copy below this so nothing sits behind the nav. */
  --nav-h: 4rem;

  /* Light theme: GOLD (#f7aa21) is the dominant accent, INDIGO (#171755) is the
     deep text/contrast tone. The formerly-white surfaces now carry a warm gold
     tint so the page reads gold-forward, not white. */
  --bg: #FFFFFF;          /* pure white */
  --surface: #FEF7E6;     /* gold-tinted card surface (was white) */
  --sand: #FBEBC7;        /* deeper gold-tinted panel */
  --line: #EFD9A8;        /* gold-tinted hairline borders */
  --ink: #171755;         /* body text = deep indigo (readable on gold-tint) */
  --muted: #6A6480;       /* secondary text */
  --primary: #f7aa21;     /* PRIMARY ACTION = GOLD (dominant accent) */
  --primary-strong: #b8790c; /* deep gold for hover/links */
  --primary-tint: #FBE6B8; /* gold-tinted chip bg */
  --btn-primary-text: #171755; /* indigo text on the gold button (high contrast) */

  /* Accent "gradients" are solid GOLD (#f7aa21) — buttons, gradient text
     (hero heading, stats), dividers, dots, icons, etc. */
  --grad-warm: #f7aa21;
  --grad-sunset: #f7aa21;
  --grad-sand: linear-gradient(180deg, #FFFFFF 0%, #FBEBC7 100%);   /* section bg (white → warm sand) */
  --grad-card: linear-gradient(145deg, rgba(254,247,230,0.95) 0%, rgba(251,235,199,0.65) 100%); /* card bg — kept */
  --grad-hero: radial-gradient(ellipse at 20% 50%, rgba(247,170,33,0.14) 0%, transparent 50%),
               radial-gradient(ellipse at 80% 20%, rgba(247,170,33,0.16) 0%, transparent 45%),
               radial-gradient(ellipse at 60% 80%, rgba(23,23,85,0.05) 0%, transparent 45%);
  --grad-text: #f7aa21;
  --grad-border: linear-gradient(135deg, rgba(247,170,33,0.45) 0%, rgba(247,170,33,0.15) 50%, rgba(23,23,85,0.2) 100%);

  /* Texture images layered behind the primary color on hero & footer */
  --tex-hero: url('/octolondon/assets/texture-hero.jpg');
  --tex-footer: url('/octolondon/assets/pawel-czerwinski-yM8sdbsnDH4-unsplash.jpg');
  /* Page-wide background texture (behind everything except hero & footer) */
  --tex-body: url('/octolondon/assets/texture-body.jpg');
  --tex-body-opacity: 0.07;   /* subtle on the light theme */

  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --section-py: clamp(2.75rem, 5vw, 5rem);
  --container-px: clamp(1.5rem, 3vw, 2rem);
  --radius-card: 20px;
  --radius-btn: 9999px;
  --shadow-warm: 0 1px 2px rgba(8,37,103,.05), 0 8px 24px rgba(8,37,103,.07);
  --shadow-warm-lg: 0 2px 4px rgba(8,37,103,.06), 0 12px 32px rgba(8,37,103,.12);
  --shadow-glow: 0 0 40px rgba(247,170,33,0.18);
  --transition: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg: #0b1230;          /* deep navy background */
  --surface: #121a3e;     /* raised card */
  --sand: #16204a;        /* tinted panel */
  --line: #26315e;        /* hairline on dark */
  --ink: #EAEEFB;         /* near-white text */
  --muted: #9AA4C9;       /* secondary text */
  --primary: #f7aa21;     /* on dark, gold becomes the primary action */
  --primary-strong: #ffbf47;
  --primary-tint: #1c2a5c; /* navy chip bg on dark */
  --btn-primary-text: #082567; /* navy text on the gold button */

  /* Solid gold accents in dark mode too */
  --grad-warm: #f7aa21;
  --grad-sunset: #f7aa21;
  --grad-sand: linear-gradient(180deg, #0b1230 0%, #16204a 100%);   /* section bg — kept */
  --grad-card: linear-gradient(145deg, rgba(18,26,62,0.9) 0%, rgba(22,32,74,0.7) 100%); /* card bg — kept */
  --grad-hero: radial-gradient(ellipse at 20% 50%, rgba(247,170,33,0.10) 0%, transparent 50%),
               radial-gradient(ellipse at 80% 20%, rgba(30,74,158,0.18) 0%, transparent 45%),
               radial-gradient(ellipse at 60% 80%, rgba(23,23,85,0.25) 0%, transparent 50%);
  --grad-text: #f7aa21;
  --grad-border: linear-gradient(135deg, rgba(247,170,33,0.35) 0%, rgba(30,74,158,0.15) 50%, rgba(247,170,33,0.25) 100%);

  --shadow-warm: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-warm-lg: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
  --shadow-glow: 0 0 40px rgba(247,170,33,0.28);
  --tex-body-opacity: 0.12;   /* a touch stronger on the dark navy bg */
  color-scheme: dark;
}

/* Smooth the theme switch */
body, .card, .card-glass, .card-flat, #site-header, .btn, .form-input, footer {
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

/* Theme-toggle icon swap: show the moon in light mode, the sun in dark mode. */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Before JS renders the sections, #app is empty. Reserve the full viewport for
   it and hide the footer/chapter-view so a reload can't briefly show the footer
   floating up under the header with an empty page below it. As soon as JS fills
   #app, the :empty rules stop matching and everything shows normally. */
#app:empty { min-height: 100vh; }
#app:empty ~ footer,
#app:empty ~ #chapter-view { display: none; }

/* Offset anchor jumps so section headings clear the fixed header
   (h-16 mobile / h-20 desktop) instead of hiding beneath it. */
section[id],
[id] {
  scroll-margin-top: 5rem;
}
@media (min-width: 768px) {
  section[id],
  [id] {
    scroll-margin-top: 6rem;
  }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 1.0625rem;
  overflow-x: hidden;
}

/* Page-wide background texture — a fixed, low-opacity fluid-paint image sitting
   behind everything. Hero & footer draw their own textures on top of their own
   opaque/gradient backgrounds, so this only shows through the sections between
   them (about, programs, campus, admissions, contact …). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;                 /* behind page content, above the flat bg color */
  background: var(--tex-body) center/cover no-repeat fixed;
  opacity: var(--tex-body-opacity, 0.07);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  /* avoid the fixed-attachment repaint cost when motion is reduced */
  body::before { background-attachment: scroll; }
}

::selection {
  background: var(--primary-tint);
  color: var(--primary-strong);
}

/* ── Typography ── */
.font-display, h1, h2, h3, h4 { font-family: var(--font-display); }

h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h3 {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

p { max-width: 65ch; }

a { color: var(--primary-strong); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary); }

/* Gradient text utility */
.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Animated Background Orbs ── */
.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-orbs::before,
.bg-orbs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: orbFloat 20s ease-in-out infinite;
}
.bg-orbs::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(247, 170, 33,0.12) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}
.bg-orbs::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(247, 170, 33,0.1) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
  animation-delay: -10s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.05); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(40px, 30px) scale(1.02); }
}

/* ── Header ── */
/* Uses a per-theme translucent bg color so the blur reads correctly on
   both the light cool-white and the dark navy backgrounds. */
:root { --header-bg: rgba(247, 248, 252, 0.82); --header-bg-solid: rgba(247, 248, 252, 0.94); }
[data-theme="dark"] { --header-bg: rgba(11, 18, 48, 0.72); --header-bg-solid: rgba(11, 18, 48, 0.92); }

#site-header {
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: all var(--transition);
}

#site-header.scrolled {
  background: var(--header-bg-solid);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-warm);
}

/* ── Header logo on a gold panel with a diagonal cut ── */
.header-row { width: 100%; }

.header-logo {
  position: relative;
  display: flex;
  align-items: center;
  /* gold brand panel */
  background: var(--gold);
  /* Right edge is an inward notch (V-groove): the top-right and bottom-right
     corners sit at the full width, and the edge cuts INWARD to a point at the
     vertical middle — so a white arrow appears to poke into the gold panel.
     Notch depth = half the header height (2rem mobile) for true 45° / -45°. */
  padding: 0 3.75rem 0 1.5rem;
  clip-path: polygon(
    0 0,                       /* top-left */
    100% 0,                    /* top-right (full width) */
    calc(100% - 2rem) 50%,     /* middle notch tip (cut inward) */
    100% 100%,                 /* bottom-right (full width) */
    0 100%                     /* bottom-left */
  );
  transition: filter var(--transition);
  overflow: hidden;
}
.header-logo:hover { filter: brightness(1.04); }
@media (min-width: 768px) {
  .header-logo {
    padding: 0 5rem 0 2rem;
    /* notch depth = 2.5rem on the taller (h-20) desktop header */
    clip-path: polygon(
      0 0,
      100% 0,
      calc(100% - 2.5rem) 50%,
      100% 100%,
      0 100%
    );
  }
}

.header-logo-img {
  /* 1.3× larger than before (2.2rem → ~2.86rem) */
  height: 2.86rem;
  width: auto;
  display: block;
  transition: transform var(--transition);
  /* The PNG is already transparent with a dark-navy logo mark, which reads
     crisply on the gold panel as-is. No blend/filter needed. */
}
@media (min-width: 768px) { .header-logo-img { height: 3.77rem; } } /* 2.9rem × 1.3 */
.header-logo:hover .header-logo-img { transform: scale(1.03); }

/* Footer: the same main logo, rendered white so the navy mark reads on the
   dark navy footer (brightness(0) + invert flips it to white, keeps alpha). */
.footer-logo-img {
  height: 44px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Dark theme: the gold panel stays gold (brand), logo blend still works. */
[data-theme="dark"] .header-logo { background: var(--gold); }

/* ── Nav Link with animated underline ── */
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  /* extra bottom padding gives the hover underline breathing room below the
     text (it used to sit almost touching the letters) */
  padding: 0.5rem 0.75rem 0.65rem;
  border-radius: 8px;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  /* dropped ~1.5× further from the text so the orange line no longer crowds it */
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--grad-warm);
  border-radius: 2px;
  transition: all var(--transition);
  transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 60%;
}
.nav-link:hover, .nav-link.active {
  color: var(--ink);
}

/* ── Desktop dropdown nav ── */
.nav-dd { position: relative; }
.nav-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.nav-dd-caret { transition: transform var(--transition); }
.nav-dd:hover .nav-dd-caret,
.nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); color: var(--primary); }
.nav-dd:hover .nav-dd-btn,
.nav-dd:focus-within .nav-dd-btn { color: var(--ink); }

.nav-dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: #fff;              /* plain white panel */
  border: 1px solid #fff;
  border-radius: 0;              /* sharp square corners */
  box-shadow: var(--shadow-warm);
  padding: 0.4rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 60;
}
/* a hover bridge so the panel doesn't close in the gap under the button */
.nav-dd::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 10px;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* After an item is clicked (JS adds .dd-suppress) the panel hides immediately
   and stays hidden until the cursor leaves the dropdown, even though the
   cursor is still hovering / the link still holds focus. */
.nav-dd.dd-suppress .nav-dd-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;   /* vanish at once — no 400ms fade-out */
}
.nav-dd.dd-suppress .nav-dd-caret { transform: none !important; }
/* Dark theme: keep the dark surface (near-white item text would vanish on a
   white panel); the sharp corners stay. */
[data-theme="dark"] .nav-dd-panel {
  background: var(--surface);
  border-color: var(--line);
}
/* Minimal items: plain text rows, no number, no pill highlight. Each row has a
   content-matched gold icon that is invisible until the cursor activates it. */
.nav-dd-panel a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-dd-panel a:hover,
.nav-dd-panel a:focus-visible {
  color: var(--primary-strong);
}
.dd-ic {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #f7aa21;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}
.nav-dd-panel a:hover .dd-ic,
.nav-dd-panel a:focus-visible .dd-ic {
  opacity: 1;
  transform: none;
}

/* ── Mobile dropdown (tap to expand) ── */
.mobile-dd-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}
.mobile-dd.open .mobile-dd-btn .nav-dd-caret { transform: rotate(180deg); color: var(--primary); }
.mobile-dd-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}
.mobile-dd.open .mobile-dd-panel { max-height: 30rem; }
.mobile-dd-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0 0.7rem 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: all var(--transition);
}
.mobile-dd-link:hover { color: var(--primary); padding-left: 1rem; }

/* ── Section Spacing ── */
.section-padding {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  position: relative;
  z-index: 1;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  border-radius: var(--radius-btn);
  text-decoration: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition);
}
.btn:hover::before { opacity: 1; }

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  pointer-events: none;
}

.btn-primary {
  padding: 0.85rem 1.85rem;
  background: var(--grad-sunset);
  /* On the gold button, dark navy text has far better contrast than white. */
  color: var(--btn-primary-text, #082567);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(247, 170, 33,0.3), 0 1px 3px rgba(247, 170, 33,0.18);
}
.btn-primary:hover {
  color: var(--btn-primary-text, #082567);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(247, 170, 33,0.4), 0 2px 6px rgba(247, 170, 33,0.25);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  padding: 0.85rem 1.85rem;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  position: relative;
}
.btn-secondary::before {
  background: var(--grad-sand);
}
.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-warm);
}

.btn-ghost {
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--primary-strong);
}
.btn-ghost:hover { color: var(--primary); }

/* ── Cards ── flat: no border, no shadow; separated by fill + spacing ── */
.card {
  background: transparent;
  border: none;
  border-radius: var(--radius-card);
  padding: 1.75rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-warm);
  opacity: 0;
  transition: opacity var(--transition);
}
.card:hover {
  transform: translateY(-4px);
}
.card:hover::before {
  opacity: 1;
}

.card-flat {
  background: transparent;
  border-radius: var(--radius-card);
  padding: 1.75rem;
  transition: all var(--transition);
}
.card-flat:hover {
  transform: translateY(-3px);
}

/* Glass card variant — theme-aware fill. Light: warm gold-tinted glass
   (was plain white). Dark: navy glass. */
:root {
  --glass-bg: rgba(254, 247, 230, 0.72);
  --glass-bg-hover: rgba(254, 247, 230, 0.9);
  --glass-border: rgba(247, 170, 33, 0.28);
}
[data-theme="dark"] {
  --glass-bg: rgba(18, 26, 62, 0.7);
  --glass-bg-hover: rgba(18, 26, 62, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
}
.card-glass {
  background: transparent;
  border: none;
  border-radius: var(--radius-card);
  padding: 1.75rem;
  transition: all var(--transition);
}
.card-glass:hover {
  transform: translateY(-3px);
}

/* Cards no longer have a fill box, so the hover-lift drop-shadow would float
   in mid-air with no card edge. Suppress it for the now-boxless card families
   (keep only the lift transform). */
.card-glass.hover-lift:hover,
.principle-card.hover-lift:hover,
.card-flat.hover-lift:hover,
.gradient-border.hover-lift:hover {
  box-shadow: none;
}

/* Readability: with the glass box gone, small muted text (principle quotes,
   pillar/level body, stat labels) sits directly on the light marble texture.
   A faint warm-white halo lifts it off the texture without drawing any box.
   Dark theme keeps light text on a dark texture and needs none. */
:root .card-glass,
:root .principle-card,
:root .card-flat,
:root .gradient-border,
:root .stat-label {
  text-shadow: 0 1px 2px rgba(254, 247, 230, 0.85);
}
[data-theme="dark"] .card-glass,
[data-theme="dark"] .principle-card,
[data-theme="dark"] .card-flat,
[data-theme="dark"] .gradient-border,
[data-theme="dark"] .stat-label {
  text-shadow: none;
}

/* Borderless variant — drops the hairline border while keeping the glass fill. */
.card-glass--borderless { border-color: transparent; }

/* Line variant — a gold accent rail down the left edge (see vision/mission cards). */
.card-line {
  position: relative;
  padding-left: 2rem;
}
.card-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 3px;
  border-radius: 3px;
  background: var(--primary);
}

/* ── Eight Principles: icon on top, title + quote below (centered) ── */
.principle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.25rem;
  border-radius: var(--radius-card);
  background: transparent;
  transition: transform var(--transition);
}
.principle-icon {
  position: relative;
  /* 1.8× the previous 96px */
  width: 172.8px;
  height: 172.8px;
  margin-bottom: 1.1rem;
  display: grid;
  place-items: center;
}
/* soft gold glow halo behind the icon */
.principle-icon::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,170,33,0.22) 0%, transparent 70%);
  filter: blur(6px);
}
.principle-icon img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(8,37,103,0.25));
  transition: transform var(--transition-bounce);
}
.principle-card:hover .principle-icon img { transform: scale(1.08) rotate(-3deg); }
.principle-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.principle-quote {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
  max-width: 22ch;
}

/* ══ OUR MISSION — typewriter reveal ══
   A single centred statement; a gold caret types the text out when it
   scrolls into view. */
.mission-block {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0 1rem;
}
.mission-block .badge { display: inline-block; }
.mission-text {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
  min-height: 4.5em;        /* reserve height so the type-in doesn't reflow */
}
[data-theme="dark"] .mission-text { color: #fff; }
.mission-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--gold);
  animation: mission-blink 1s step-end infinite;
}
/* caret hidden once typing is done */
.mission-text.is-done .mission-caret { animation: none; opacity: 0; }
@keyframes mission-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mission-caret { display: none; }
}

/* ══ EIGHT CORE PRINCIPLES — luxury editorial gallery ══
   Sticky editorial content on the left; a horizontal premium card gallery on
   the right. Gold #D4AF37 accent throughout. The panel + text adapt to the
   theme (soft ivory in light, deep navy in dark); the CARDS stay deep navy in
   both modes so the gold-on-navy luxury look is preserved. Auto-selects across
   the cards on a timer. */
.corep {
  --gold: #D4AF37;
  /* theme-adaptive tokens (defaults = light) */
  --corep-panel-1: #fbf7ec;
  --corep-panel-2: #f3ecdb;
  --corep-text: var(--ink);
  --corep-muted: rgba(8,24,46,.62);
  --corep-line: rgba(212,175,55,.30);
  --corep-panel-border: rgba(8,24,46,.08);
  --corep-track: rgba(8,24,46,.12);
  --corep-arrow-bg: rgba(8,24,46,.04);
  --corep-arrow-fg: var(--ink);
  --corep-shadow: 0 30px 70px rgba(8,24,46,.14);
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 40px;
  /* centre the editorial column against the coverflow so the heading sits
     level with the middle of the banner fan */
  align-items: center;
  /* no framed panel — the section sits directly on the page background */
  padding: 8px 0;
  color: var(--corep-text);
  /* clip the coverflow fan horizontally so side cards never widen the page
     (they otherwise overflow the viewport on narrow screens); vertical stays
     visible so the lifted centre card can still breathe */
  overflow-x: clip;
}
[data-theme="dark"] .corep {
  --corep-text: #fff;
  --corep-muted: rgba(255,255,255,.65);
  --corep-line: rgba(212,175,55,.22);
  --corep-track: rgba(255,255,255,.12);
  --corep-arrow-bg: rgba(255,255,255,.03);
  --corep-arrow-fg: #fff;
}

/* ── LEFT: sticky editorial intro ── */
.corep-intro { position: relative; z-index: 2; }
.corep-label {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold);
  padding: 6px 14px; border: 1px solid var(--corep-line); border-radius: 9999px;
  margin-bottom: 22px;
}
.corep-heading {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 52px) !important;
  font-weight: 700; line-height: 1.08;
  color: var(--corep-text) !important; margin: 0 0 18px !important; text-align: left;
  max-width: 14ch;
}
.corep-sub {
  font-size: 16px; line-height: 1.65; color: var(--corep-muted);
  max-width: 40ch; margin-bottom: 26px;
}
.corep-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: #08182E;
  background: linear-gradient(135deg, #f0d688 0%, var(--gold) 55%, #b8912b 100%);
  padding: 12px 22px; border-radius: 9999px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(212,175,55,.32);
  transition: transform .3s, box-shadow .3s;
}
.corep-cta svg { transition: transform .3s; }
.corep-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(212,175,55,.45); }
.corep-cta:hover svg { transform: translateX(4px); }

/* ── RIGHT: 3D coverflow stage ──
   Cards are absolutely stacked on one plane; JS positions each with a
   translateX + rotateY + scale so they fan out along an arc. The centred
   card faces the viewer; its neighbours rotate away on either side. On
   every auto-select the whole fan rotates one seat, so the incoming card
   sweeps in along the arc (the motion the reference arrow describes). */
.corep-gallery {
  position: relative; z-index: 2;
  height: 580px;
  perspective: 1600px;
  perspective-origin: 50% 46%;
  /* the fan sits directly on the page now (no panel); keep it from pushing
     the layout wider than its column, but let cards breathe on all sides */
  overflow: visible;
  touch-action: pan-y;
  outline: none;
}
.corep-card {
  position: absolute;
  top: 20px; left: 50%;
  /* the banner is a 0.40 (560×1400) portrait; size the card to match so the
     whole designed image shows with no crop and no frame */
  width: 208px; height: 520px;
  margin-left: -104px;             /* centre the pivot on the stage midline */
  border-radius: 0;
  box-shadow: 0 24px 50px rgba(3,9,20,.5);
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  /* transform is driven by JS; the smooth cubic-bezier here IS the sweep.
     Kept a touch under the 1.2s auto-select so the card settles before the
     next advance rather than being cut off mid-rotation. */
  transition: transform .8s cubic-bezier(.33,.9,.28,1),
              opacity .55s ease, box-shadow .55s;
  overflow: hidden;
  outline: none;
  will-change: transform, opacity;
}
/* glass sheen that sweeps on hover/active */
.corep-sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 48%, rgba(255,255,255,.20) 52%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
/* the designed banner fills the whole card, uncropped */
.corep-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
/* side cards (not centred): gently dimmed so the centre reads as the focus */
.corep-card:not(.is-active) { opacity: .78; }

/* ── active (centred) card — soft gold glow, no frame ── */
.corep-card.is-active {
  box-shadow:
    0 44px 90px rgba(3,9,20,.6),
    0 0 60px rgba(247,170,33,.28);
}
.corep-card.is-active .corep-sheen { transform: translateX(120%); }
.corep-card.is-active .corep-photo { transform: scale(1.04); }

/* JS sets .in on the whole stage once the section scrolls into view;
   before that the cards stay collapsed at the centre so the first
   auto-select fans them out. */
.corep-gallery:not(.in) .corep-card { opacity: 0 !important; }

/* ── responsive (banner keeps its 0.40 ratio at every size) ── */
@media (max-width: 1024px) {
  .corep { grid-template-columns: 1fr; gap: 30px; padding: 40px 28px; }
  .corep-intro { position: static; }
  .corep-heading { max-width: none; }
  .corep-gallery { height: 560px; }
  .corep-card { width: 208px; margin-left: -104px; height: 520px; }
}
@media (max-width: 560px) {
  .corep { padding: 30px 16px; }
  .corep-gallery { height: 480px; perspective: 1100px; }
  .corep-card { width: 176px; margin-left: -88px; height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .corep-card, .corep-sheen { transition: opacity .3s ease, box-shadow .3s; }
}

/* ══ 6 PILLARS — a single row of brand-orange icons ══
   Six pillars laid out in one row: each is just its supplied #f7aa21 icon
   with a title beneath. No cards, no borders, no hover, no animation —
   plain and static, as requested. */
.pillars-arc {
  position: relative;
  margin-top: 1.5rem;
  padding: 0;
}
.pillars-arc__track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0;
  max-width: 1120px;
  margin: 0 auto;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 0.5rem;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
}
.pillar-icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}
.pillar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pillar-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
[data-theme="dark"] .pillar-title { color: #fff; }
/* description + carousel dots are gone in this layout */
.pillar-desc-wrap, .pillars-arc__dots { display: none; }

/* ── Tablet: 3 across, two rows ── */
@media (max-width: 900px) {
  .pillars-arc__track { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; max-width: 640px; }
}
/* ── Mobile: 2 across ── */
@media (max-width: 480px) {
  .pillars-arc__track { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
  .pillar-icon { width: 72px; height: 72px; }
}

/* ── Stat Counter ── */
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-number .plus {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.35rem;
  font-weight: 500;
}

/* ── Accordion ── */
.accordion-item {
  border-bottom: 1px solid var(--line);
  transition: background var(--transition);
}
.accordion-item:hover {
  background: rgba(244,237,227,0.3);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  transition: all var(--transition);
  border-radius: 8px;
}
.accordion-trigger:hover {
  color: var(--primary-strong);
  padding-left: 0.75rem;
}
.accordion-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.accordion-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-bounce);
  flex-shrink: 0;
  margin-left: 1rem;
  color: var(--primary);
}
.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1), padding 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-item.open .accordion-content {
  max-height: 500px;
}
.accordion-body {
  padding: 0 0.5rem 1.25rem 0.5rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.9375rem;
}

/* ── FAQ (between STEAM and the footer) ── */
.faq-section {
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--primary) 5%, var(--bg)) 100%);
}
[data-theme="dark"] .faq-section {
  background: linear-gradient(180deg, var(--bg) 0%, #0a1430 100%);
}
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 26px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}
.faq-item .accordion-trigger { align-items: flex-start; gap: 14px; }
.faq-q { font-weight: 600; font-size: 15.5px; line-height: 1.4; text-align: left; }
.faq-a { font-size: 14.5px; }
.faq-more {
  text-align: center;
  margin-top: 34px;
  font-size: 15px;
  color: var(--muted);
}
.faq-more a { color: var(--primary-strong); font-weight: 700; text-decoration: none; }
.faq-more a:hover { text-decoration: underline; }
@media (max-width: 820px) {
  .faq-list { grid-template-columns: 1fr; max-width: 640px; }
}

/* ── Form ── */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.form-input {
  width: 100%;
  padding: 0.8rem 1.1rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: all var(--transition);
}
.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(247, 170, 33, 0.1), var(--shadow-glow);
}
.form-input::placeholder { color: var(--muted); opacity: 0.5; }
.form-input.error { border-color: #d9534f; }
.form-error { font-size: 0.8rem; color: #d9534f; margin-top: 0.25rem; }

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236E6258' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ── Tags / Chips ── */
.tag {
  display: inline-block;
  padding: 0.45rem 1rem;
  background: var(--sand);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-btn);
  border: none;
  transition: all var(--transition-bounce);
}
.tag:hover {
  background: var(--primary-tint);
  color: var(--primary-strong);
  transform: translateY(-2px) scale(1.03);
}

/* ── Badge ── */
.badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: var(--primary-tint);
  color: var(--primary-strong);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-btn);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
}

/* ── Scroll Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 100ms; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 200ms; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 300ms; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 400ms; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 500ms; }

/* Initial page load animations */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUpIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}

@keyframes fadeUpIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in variant */
.fade-scale {
  opacity: 0;
  transform: scale(0.92);
  animation: fadeScaleIn 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 100ms + 200ms);
}
@keyframes fadeScaleIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide from left */
.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  animation: fadeLeftIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}
@keyframes fadeLeftIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide from right */
.fade-right {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeRightIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}
@keyframes fadeRightIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scroll-triggered */
.fade-up-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.fade-up-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Floating animation for decorative elements */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
.float { animation: float 6s ease-in-out infinite; }
.float-delay { animation: float 6s ease-in-out infinite; animation-delay: -3s; }

/* Pulse glow for CTA */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(247, 170, 33,0.25); }
  50% { box-shadow: 0 4px 28px rgba(247, 170, 33,0.4); }
}
.pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }

/* Shimmer effect */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up, .fade-scale, .fade-left, .fade-right { opacity: 1; transform: none; }
  .bg-orbs { display: none; }
}

/* ── Page Transition ── */
#app {
  animation: pageIn 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Hero Specific ── */
.hero-display {
  font-family: 'Abril Fatface', var(--font-display);
  /* 1.5× the previous size — was clamp(2.8rem, 6.5vw, 4.5rem) */
  font-size: clamp(4.2rem, 9.75vw, 6.75rem);
  font-weight: 400;              /* Abril Fatface ships a single regular weight */
  line-height: 1.05;
  letter-spacing: 0;
}
/* Each title word is its own block so it can reveal on its own beat.
   The gold gradient text-fill lives on the word (not the h1) so clip works. */
.hero-word {
  display: block;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* mask reveal: the word starts fully clipped from the bottom, translated
     down a hair; a light-driven clip window sweeps up to uncover it while it
     eases back into place — an editorial line reveal, not a fade. */
  clip-path: inset(105% 0 -10% 0);
  transform: translateY(0.42em);
  animation: heroWordReveal 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--w, 0) * 150ms + 250ms);
  will-change: clip-path, transform;
}
@keyframes heroWordReveal {
  to { clip-path: inset(-10% 0 -10% 0); transform: translateY(0); }
}
/* Subtitle + tagline rise in softly on the same cadence — no clip, just a
   gentle lift so the eye settles after the headline uncovers. */
.hero-rise {
  opacity: 0;
  transform: translateY(1.1rem);
  animation: heroSoftRise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--w, 0) * 150ms + 320ms);
}
@keyframes heroSoftRise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-word {
    animation: none;
    clip-path: none;
    transform: none;
  }
  .hero-rise {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Hero brand tagline — small uppercase mission line under the subtitle. */
.hero-tagline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--primary-strong);
  border-left: 3px solid var(--primary);
  padding-left: 0.85rem;
  max-width: 34rem;
}

/* ── Hero — full-bleed background image with copy in front ── */
/* desktop nav is taller (h-20 = 5rem); keep the hero offset in sync */
@media (min-width: 768px) {
  :root { --nav-h: 5rem; }
}
.hero-full {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  /* start the hero content below the fixed nav so nothing sits behind it */
  padding-top: var(--nav-h);
}
/* slideshow layer — every slide is stacked full-bleed behind everything, but
   starts at the nav's bottom edge so the image top aligns flush under the nav
   (not hidden behind it).
   No z-index here so it doesn't create a stacking context that would trap the
   dots below the scrim; the slides sit at z-index:0 and the dots at z-index:3. */
.hero-full .hero-bgs {
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
}
/* the image fills the whole section, behind everything. The copy now lives on
   the RIGHT, so bias the frame LEFT to keep the student clear of the text. */
.hero-full .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% center;   /* keep the student (left of centre) in frame */
  z-index: 0;
}
/* cross-fade: slides stack and fade between each other */
.hero-full .hero-slide {
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
  will-change: opacity;
}
.hero-full .hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-full .hero-slide { transition: none; }
}
/* slide dots — bottom-centre, over the image */
.hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.45);
  transition: background var(--transition), transform var(--transition);
}
.hero-dot:hover { background: rgba(255,255,255,0.75); }
.hero-dot.is-active {
  background: var(--gold);
  transform: scale(1.25);
}
/* readability scrim: darken the RIGHT where the copy now sits, fade out to the
   left so the student reads clearly on the left half */
.hero-full .hero-bg-scrim {
  position: absolute;
  top: var(--nav-h);        /* align with the image, which also starts below the nav */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background:
    linear-gradient(270deg, rgba(8,37,103,0.74) 0%, rgba(8,37,103,0.44) 38%, rgba(8,37,103,0.05) 62%, transparent 78%),
    linear-gradient(180deg, rgba(8,37,103,0.28) 0%, transparent 30%);
}
.hero-full .container { position: relative; z-index: 2; }
/* copy column pushed to the right, text right-aligned */
.hero-copy {
  width: 100%;
  max-width: 640px;
  margin-left: auto;             /* shove the column to the right edge */
  text-align: right;
  padding-top: 5rem;
  padding-bottom: 3rem;
}
/* the gold title fan-in must stay right-anchored too */
.hero-copy .hero-display { text-align: right; }
.hero-copy .hero-subtitle { margin-left: auto; }
/* the tagline's accent rule reads better on the right when copy is right-aligned */
.hero-copy .hero-tagline {
  border-left: none;
  border-right: 3px solid var(--primary);
  padding-left: 0;
  padding-right: 0.85rem;
  margin-left: auto;
}
/* copy sits over the darker part of the image → force light text regardless of theme */
.hero-full .hero-subtitle { color: rgba(255,255,255,0.92); }
.hero-full .hero-tagline { color: rgba(255,255,255,0.75); }
@media (max-width: 1023px) {
  /* on narrow screens the student is cropped out by the left bias; pull the
     focus toward them and darken a touch more so the copy stays readable */
  .hero-full .hero-bg { object-position: 40% center; }
  .hero-full .hero-bg-scrim {
    background: linear-gradient(180deg, rgba(8,37,103,0.55) 0%, rgba(8,37,103,0.35) 45%, rgba(8,37,103,0.6) 100%);
  }
  /* on mobile there's no room for a side split — recentre the copy */
  .hero-copy { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-copy .hero-display { text-align: center; }
  .hero-copy .hero-tagline {
    border-right: none;
    padding-right: 0;
    display: inline-block;
    text-align: center;
  }
}

/* ── Hero — enrollment CTA slot (ex Naadam promo card) ──
   Pinned to the CLEAR LEFT half of the hero (the copy owns the right).
   The seasonal card chrome (dark glass panel, gold border, padding) was
   dropped when the promo copy came out — only the CTA button lives here now,
   so the wrapper is layout-only. The .hero-promo-badge/title/text/seats/note
   rules below are kept intact so the seasonal card can be restored as-is. */
.hero-promo {
  max-width: 380px;
  margin-right: auto;            /* pin left; .hero-copy pins itself right */
  text-align: left;
}
.hero-promo-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: var(--grad-sunset, var(--gold));
  color: #082567;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-promo-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0.9rem 0 0.55rem;
}
.hero-promo-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.15rem;
}
/* scarcity strip — remaining promotional seats, counts down daily.
   Plain inline flow (not flex) so "Ердөө 50-хан хүүхэд…" wraps naturally
   with the number glued to its suffix. */
.hero-promo-seats {
  margin-bottom: 1.05rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: rgba(247,170,33,0.14);
  border: 1px dashed rgba(247,170,33,0.55);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
}
.hero-promo-seats .hps-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: -0.18em;
  padding: 0 0.15rem;
  color: var(--gold);
  animation: hpsPulse 1.6s ease-in-out infinite;
}
@keyframes hpsPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-promo-seats .hps-num { animation: none; }
}
.hero-promo-cta.btn {
  width: 100%;
  font-size: 0.9375rem;
}
.hero-promo-note {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin-top: 0.8rem;
}
@media (max-width: 1023px) {
  /* stacked layout: copy first, promo card under it, both centred */
  .hero-full .container {
    flex-direction: column;
    justify-content: center;
  }
  .hero-promo {
    order: 2;
    margin: 0 auto 2.5rem;
    width: 100%;
    max-width: 430px;
  }
  .hero-copy { padding-bottom: 2rem; }
}

/* ── Naadam promo — bottom ticker banner (PHONES ONLY) ──
   Slides up from the bottom edge once the hero (and its promo card) scrolls
   out of view, so the offer never disappears: the text flows continuously,
   the CTA stays static and clickable. Built by initNaadamBanner() in app.js.
   Desktop (≥768px) keeps only the hero card — no ticker (the display:none
   override lives BELOW the base rule so it wins the cascade). */
.naadam-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;                    /* under the fixed header (50) and menus */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  background: linear-gradient(90deg, rgba(8,16,44,0.94) 0%, rgba(8,37,103,0.92) 100%);
  border-top: 1px solid rgba(247,170,33,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -8px 28px rgba(4,10,32,0.35);
  transform: translateY(110%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.naadam-banner.nb-show { transform: translateY(0); }
/* ticker viewport — soft-fade both edges so items appear/vanish gracefully */
.nb-track {
  flex: 1;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}
/* two identical groups glide left; when one exits, the twin fills the gap */
.nb-group {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-right: 1.4rem;
  flex-shrink: 0;
  min-width: max-content;
  animation: nbFlow 28s linear infinite;
}
@keyframes nbFlow {
  to { transform: translateX(-100%); }
}
.naadam-banner:hover .nb-group { animation-play-state: paused; }
.nb-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: var(--grad-sunset, var(--gold));
  color: #082567;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nb-item {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.nb-sep { color: var(--gold); font-size: 0.8rem; }
/* scarcity item inside the ticker — the count pops in gold */
.nb-urgent { color: #fff; }
.nb-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gold);
  padding: 0 0.1rem;
}
.nb-cta.btn {
  padding: 0.5rem 1.1rem;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.nb-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), border-color var(--transition);
}
.nb-close:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
/* phones only: hide the ticker entirely on md-and-up screens */
@media (min-width: 768px) {
  .naadam-banner { display: none; }
}
/* lift the scroll-top button clear of the banner while it is shown
   (phones only — on desktop the banner never shows) */
@media (max-width: 767px) {
  body.nb-on .scroll-top { bottom: 4.5rem; }
}
@media (max-width: 640px) {
  .naadam-banner { gap: 0.5rem; padding: 0.5rem 0.6rem; }
  .nb-cta.btn { padding: 0.45rem 0.8rem; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .naadam-banner { transition: none; }
  .nb-group { animation: none; }
  .nb-track .nb-group + .nb-group { display: none; }
}

/* ── Image Placeholder ── */
.img-placeholder {
  background: linear-gradient(145deg, var(--sand) 0%, var(--primary-tint) 50%, #dfe5f4 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.875rem;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(247, 170, 33,0.08);
}
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(247, 170, 33,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(247, 170, 33,0.08) 0%, transparent 50%);
}
.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23EAE1D4'/%3E%3C/svg%3E");
  opacity: 0.3;
}

/* ── STEAM Cards ── */
/* ── STEAM cards: generated image background, dark scrim, text on top ── */
.steam-card {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  background: var(--indigo);
  transition: transform var(--transition), box-shadow var(--transition);
}
.steam-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
.steam-card:hover .steam-card-img { transform: scale(1.06); }
/* Dark navy scrim: stronger at the bottom so the title/description stay legible */
.steam-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,20,52,0.94) 0%, rgba(8,20,52,0.72) 32%, rgba(8,20,52,0.15) 62%, rgba(8,20,52,0.05) 100%);
}
.steam-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 1.25rem 1.4rem;
}
/* Variant without the big letter (the "Why Octolearn" cards): text sits at the
   bottom of the card, over the strongest part of the scrim. */
.steam-card-body.is-bottom { justify-content: flex-end; }
.steam-letter {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.steam-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.steam-card-desc {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  max-width: none;
}

/* Light theme keeps the same navy scrim so the STEAM cards read as one set
   in both modes — the title (gold) and description (white) stay legible over
   the navy veil, same as dark mode. */
html:not([data-theme="dark"]) .steam-card {
  background: var(--indigo);
}

/* ══ WHY OCTOLEARN — golden-ratio split grid ══
   A φ (1.618) split: one large featured image on the left, three smaller image
   cards stacked on the right. On the featured card the copy sits over a corner
   scrim; the right cards are shorter. Own navy+gold identity, works in light &
   dark. Collapses to a single column on narrow screens. */
.why-section {
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(247,170,33,0.05) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--navy) 8%, var(--bg)) 100%);
}
[data-theme="dark"] .why-section {
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(247,170,33,0.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, #0a1430 100%);
}
.why-golden {
  display: grid;
  grid-template-columns: 1.618fr 1fr;   /* the golden split */
  grid-template-rows: auto auto auto;   /* three bands define the height */
  align-items: stretch;
  gap: 18px;
}
/* The three right-hand bands each own their image ratio (1.786). The feature
   spans all three rows, so its height is driven by the right column — the two
   columns stay perfectly aligned (no overhang). Its photo fills via cover. */
.why-feature { grid-column: 1; grid-row: 1 / span 3; }
.why-card:not(.why-feature) { grid-column: 2; aspect-ratio: 1000 / 560; }
.why-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;              /* plain square corners */
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-warm-lg);
  isolation: isolate;
}
[data-theme="dark"] .why-card { border-color: rgba(255,255,255,0.10); }
.why-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* card matches the image ratio, so cover == full image */
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
  z-index: 0;
}
.why-card:hover .why-card-img { transform: scale(1.05); }
/* readable scrim: heavier at the bottom where the copy sits */
.why-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(6,11,28,0.92) 0%, rgba(6,11,28,0.70) 28%, rgba(6,11,28,0.10) 62%, transparent 82%);
}
.why-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 20px 22px;
}
.why-feature .why-card-body { padding: 28px 30px; }
.why-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--gold);
  margin-bottom: 6px;
}
.why-feature .why-card-title { font-size: 22px; }
.why-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 42ch;
  margin: 0;
}
.why-feature .why-card-desc { font-size: 15px; }
/* a thin gold top-accent that grows on hover — brand identity */
.why-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 3px; width: 0;
  z-index: 3;
  background: var(--grad-sunset, var(--gold));
  transition: width .4s ease;
}
.why-card:hover::after { width: 100%; }

@media (max-width: 900px) {
  .why-golden {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;         /* drop the desktop 3-row track */
    grid-auto-rows: auto;
    align-items: start;
  }
  /* feature becomes a full-width banner; give it a wide ratio so it isn't
     a giant square. The photo still fills it fully via cover. */
  .why-feature { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 7; }
  .why-card:not(.why-feature) { grid-column: auto; }
  .why-feature .why-card-title { font-size: 20px; }
}
@media (max-width: 560px) {
  .why-golden { grid-template-columns: 1fr; }
  .why-feature { aspect-ratio: 5 / 4; }
  .why-card:not(.why-feature) { aspect-ratio: 16 / 9; }
}

/* ── Step Number ── */
.step-number {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-sunset);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(247, 170, 33,0.2);
  transition: all var(--transition);
}
.step-number:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(247, 170, 33,0.3);
}

/* ── Mobile Nav Link ── */
.mobile-nav-link {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: all var(--transition);
}
.mobile-nav-link:hover {
  color: var(--primary);
  padding-left: 0.5rem;
}

/* ── CTA Band ── */
.cta-band {
  background: transparent;
  border: none;
  border-radius: var(--radius-card);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(247, 170, 33,0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 8s ease-in-out infinite;
}
.cta-band::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(247, 170, 33,0.06) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 8s ease-in-out infinite reverse;
}

/* ── Quote ── */
.quote-block {
  position: relative;
  padding: 2.5rem 2.5rem 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
  overflow: hidden;
}
.quote-block::before {
  content: '\201C';
  font-size: 5rem;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: absolute;
  top: 0.25rem;
  left: 1rem;
  line-height: 1;
  font-style: normal;
}
.quote-block::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-warm);
}

/* ── Decorative Divider ── */
.section-divider {
  width: 60px;
  height: 3px;
  background: var(--grad-warm);
  border-radius: 3px;
  margin: 1rem auto;
}

/* ── Icon container ── */
.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-tint);
  color: var(--primary-strong);
  transition: all var(--transition);
  flex-shrink: 0;
}
.card:hover .icon-circle,
.card-glass:hover .icon-circle {
  background: var(--grad-sunset);
  color: #fff;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 16px rgba(247, 170, 33,0.25);
}

/* ── Footer with organic texture behind a deep-navy overlay ── */
/* The footer stays dark navy in BOTH themes (white text), with the organic
   texture image layered behind the navy so it reads as a rich backdrop. */
footer {
  position: relative;
  isolation: isolate;
  background-color: var(--indigo, #171755) !important; /* deep navy base under the texture */
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--tex-footer) center/cover no-repeat;
  opacity: 0.28;
}
footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* navy → indigo wash so the texture never overpowers the text */
  background: linear-gradient(135deg, rgba(8,37,103,0.86) 0%, rgba(23,23,85,0.92) 100%);
}

/* ── Scroll-to-top button ── */
.scroll-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 70;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: var(--grad-sunset, var(--primary));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(192, 57, 43, 0.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.scroll-top.show {
  opacity: 1;
  transform: translateY(0);
}
.scroll-top:hover {
  box-shadow: 0 10px 28px rgba(192, 57, 43, 0.5);
  transform: translateY(-2px);
}
.scroll-top:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .scroll-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
}

/* ── Utility ── */
.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-primary-strong { color: var(--primary-strong); }
.text-gold { color: var(--gold); }
.bg-sand { background: var(--sand); }
.bg-primary-tint { background: var(--primary-tint); }
.border-line { border-color: var(--line); }
.measure { max-width: 65ch; }

/* ── Grid helpers ── */
.grid-programs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── Section background variants ── */
.section-gradient-warm {
  background: linear-gradient(180deg, var(--bg) 0%, var(--sand) 30%, var(--sand) 70%, var(--bg) 100%);
}
.section-gradient-sand {
  background: linear-gradient(180deg, var(--sand) 0%, var(--bg) 100%);
}

/* ── Hover lift for any element ── */
.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-warm-lg);
}

/* ── Gradient border card ── */
/* Flat, boxless — no fill; content floats on the section texture like the
   other cards. (Used by the POLYGLOT tech card.) */
.gradient-border {
  position: relative;
  background: transparent;
  border-radius: var(--radius-card);
  padding: 1.75rem;
  transition: all var(--transition);
}

/* ── Number highlight ── */
.number-highlight {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* ===================================================================
   CHAPTER VIEW — scoped chapter stylesheet
   All selectors scoped under .chapter-view. Palette mapped to main
   site navy+gold tokens. Source chrome/nav/cover/sidebar dropped.
   =================================================================== */

/* ---------- TYPOGRAPHY ---------- */
.chapter-view h1,
.chapter-view h2,
.chapter-view h3,
.chapter-view h4{
  font-family:var(--font-display); line-height:1.14; color:var(--ink); font-weight:700; margin:0;
}
.chapter-view p{margin:0 0 .9em}
.chapter-view a{color:var(--primary-strong); text-decoration:none}
.chapter-view strong{font-weight:700; color:var(--ink)}
.chapter-view em{font-family:var(--font-display); font-style:italic; color:var(--muted)}

/* ---------- SECTIONS ---------- */
.chapter-view section{padding:60px 0 8px; scroll-margin-top:10px}
/* Section heads: ONE consistent format across every chapter — centered like the
   main site's section headers, instead of a narrow left-squeezed column. */
.chapter-view .sec-head{
  margin:0 auto 34px;
  text-align:center;
}
.chapter-view .eyebrow{
  display:flex; align-items:center; gap:11px; font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:var(--primary-strong); font-weight:700; margin-bottom:14px;
}
.chapter-view .sec-head .eyebrow{ justify-content:center; }
/* Chapter number in the eyebrow is hidden (redundant on a website) */
.chapter-view .eyebrow .num{ display:none; }
.chapter-view .eyebrow .bar{height:1px; width:26px; background:var(--primary-tint)}
/* mirror bar so the centered eyebrow reads bar — label — bar */
.chapter-view .sec-head .eyebrow::after{
  content:''; height:1px; width:26px; background:var(--primary-tint); flex-shrink:0;
}
.chapter-view .sec-head h2{
  font-size:clamp(26px,3.6vw,38px); font-weight:800; letter-spacing:-.4px;
  max-width:26ch; margin:0 auto;
}
.chapter-view .sec-head .lede{
  font-size:17px; color:var(--muted); margin:14px auto 0; max-width:68ch; line-height:1.65;
}
.chapter-view .divider{
  height:1px; background:linear-gradient(90deg,var(--primary-tint),transparent); margin:54px 0 0;
}

/* ---------- CARDS / GRID ── borderless: separated by whitespace + a faint tint ---------- */
.chapter-view .card{
  background:transparent; border:none; border-radius:0;
  padding:0 0 0 1.25rem; box-shadow:none;
  border-left:2px solid var(--primary-tint);   /* a quiet accent rail instead of a full box */
}
/* Keep the hover gold top-line, but the chapter card has no top padding so it
   sat flush on the heading. Add top padding and pull the line up to the card's
   real top edge so it clears the heading text. */
.chapter-view .card{ padding-top:0.85rem; }
.chapter-view .card::before{ top:0; }
.chapter-view .grid{display:grid; gap:2.25rem}
.chapter-view .g2{grid-template-columns:1fr 1fr}
.chapter-view .g3{grid-template-columns:repeat(3,1fr)}
.chapter-view .g4{grid-template-columns:repeat(4,1fr)}
.chapter-view .card h4{ font-size:17px; margin-bottom:.6rem; }

/* ---------- TABLES ── borderless: rows separated by a hairline, no box/stripes ---------- */
.chapter-view table{width:100%; border-collapse:collapse; font-size:15px; margin:.5rem 0}
.chapter-view .tablewrap{
  overflow-x:auto; border:none; border-radius:0; box-shadow:none; background:transparent;
}
.chapter-view .tablewrap table{margin:0}
.chapter-view th{
  background:transparent; color:var(--primary-strong);
  font-family:var(--font-body); font-weight:700; font-size:11px; letter-spacing:.8px;
  text-transform:uppercase; text-align:left; padding:0 20px 10px 0;
  border-bottom:2px solid var(--primary-tint);
}
.chapter-view td{
  padding:11px 20px 11px 0; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top;
}
.chapter-view tbody tr:last-child td{ border-bottom:none; }
.chapter-view td strong{color:var(--ink); font-weight:600}
.chapter-view tr.total td{
  background:transparent; font-weight:700; color:var(--ink);
  border-top:2px solid var(--primary-tint); border-bottom:none; padding-top:13px;
}
.chapter-view tr.total td strong{color:var(--primary-strong)}

/* ---------- PILLS ---------- */
.chapter-view .pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  padding:4px 11px; border-radius:30px; letter-spacing:.3px;
}
.chapter-view .pill.gold{background:var(--primary-tint); color:var(--primary-strong)}
.chapter-view .pill.teal{background:rgba(8,37,103,.12); color:var(--navy)}
.chapter-view .pill.green{background:rgba(47,125,91,.16); color:#2f7d5b}
.chapter-view .pill.ox{background:rgba(138,47,56,.15); color:#a4434c}
.chapter-view .pill.ink{background:rgba(23,23,85,.12); color:var(--ink)}

/* ---------- NOTE ── borderless: left accent rail + soft tint only ---------- */
.chapter-view .note{
  background:transparent; border:none;
  border-left:3px solid var(--primary); border-radius:0;
  padding:2px 0 2px 18px; font-size:14.5px; color:var(--muted);
}
.chapter-view .note b,
.chapter-view .note strong{color:var(--primary-strong)}
.chapter-view .note.teal{ background:transparent; border-left-color:var(--navy); }
.chapter-view .note.teal b{color:var(--navy)}

/* ---------- CLEAN LIST ---------- */
.chapter-view ul.clean{list-style:none; padding:0; margin:0}
.chapter-view ul.clean li{
  position:relative; padding:8px 0 8px 28px; border-top:1px solid var(--line);
  font-size:15px; color:var(--muted);
}
.chapter-view ul.clean li:first-child{border-top:none}
.chapter-view ul.clean li::before{
  content:""; position:absolute; left:4px; top:16px; width:8px; height:8px;
  background:var(--primary); border-radius:2px; transform:rotate(45deg);
}
.chapter-view ul.clean li b{color:var(--ink)}

/* ---------- PILLARS ── borderless ---------- */
.chapter-view .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:6px}
.chapter-view .pillar{
  position:relative; background:transparent; border:none;
  border-top:2px solid var(--primary-tint); border-radius:0;
  padding:1.25rem 0 0; box-shadow:none; overflow:hidden;
}
.chapter-view .pillar .hex{position:absolute; top:-14px; right:-14px; width:74px; height:74px; opacity:.10}
.chapter-view .pillar .pn{
  font-family:var(--font-display); color:var(--primary); font-weight:700; font-size:14px;
}
.chapter-view .pillar h4{font-size:18px; margin:6px 0 9px}
.chapter-view .pillar p{font-size:14px; color:var(--muted); margin:0}

/* ---------- PRINCIPLES ── borderless ---------- */
.chapter-view .principles{display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem}
.chapter-view .principle{
  background:transparent; border:none; border-radius:0;
  padding:0; box-shadow:none; position:relative;
}
.chapter-view .principle .pnum{
  font-family:var(--font-display); font-weight:800; font-size:32px;
  color:var(--primary); line-height:.9;
}
.chapter-view .principle h4{font-size:15px; margin:8px 0 6px}
.chapter-view .principle p{
  font-size:13px; margin:0; color:var(--muted); font-family:var(--font-body);
}

/* ---------- FEATURE ── number badge replaced by a small gold marker ---------- */
.chapter-view .feature{display:flex; gap:14px; padding:15px 0; border-top:1px solid var(--line)}
.chapter-view .feature:first-child{border-top:none}
.chapter-view .feature .fi{
  /* hide the 1..10 number; keep a small square gold marker for rhythm */
  flex:0 0 10px; height:10px; margin-top:7px; border-radius:2px;
  background:var(--primary); color:transparent; font-size:0;
  display:block; transform:rotate(45deg);
}
.chapter-view .feature .ft b{color:var(--ink); display:block; font-size:15.5px; margin-bottom:2px}
.chapter-view .feature .ft span{font-size:14px; color:var(--muted)}

/* ---------- METRICS ── borderless ---------- */
.chapter-view .metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
.chapter-view .metric{
  background:transparent; border:none; border-radius:0;
  padding:0; text-align:left; box-shadow:none;
  border-top:2px solid var(--primary-tint); padding-top:14px;
}
.chapter-view .metric b{
  display:block; font-family:var(--font-display); font-size:30px;
  color:var(--primary-strong); font-weight:800; line-height:1;
}
.chapter-view .metric span{
  display:block; font-size:12px; color:var(--muted); margin-top:7px; font-weight:600;
}

/* ---------- DARK BAND ---------- */
/* The band used to be a filled navy panel; now it's a plain section on the
   page background. Its inner text carries light inline colors (for the old
   navy fill), so re-map every color to the site's normal ink/muted palette so
   it stays readable on the light/dark page background. */
.chapter-view .band{
  background:transparent; color:var(--ink); border-radius:0; padding:0;
  position:relative; overflow:visible; box-shadow:none;
}
.chapter-view .band h2,
.chapter-view .band h3{color:var(--ink) !important}
/* body copy inside the band → muted; keep bold spans a touch stronger */
.chapter-view .band p,
.chapter-view .band span,
.chapter-view .band li,
.chapter-view .band div{color:var(--muted) !important}
.chapter-view .band b,
.chapter-view .band strong{color:var(--ink) !important}
/* pills keep their own background but need readable text */
.chapter-view .band .pill{color:var(--ink) !important}
/* Cards inside the band: no box, a slim gold accent rail on the left —
   consistent with the rest of the site's card style, light & dark. */
.chapter-view .band .grid > div{
  background:transparent !important; border:none; border-radius:0; box-shadow:none;
  padding:2px 0 2px 1.1rem; border-left:2px solid rgba(247,170,33,.6);
}
.chapter-view .band .eyebrow{color:var(--primary-strong) !important}
.chapter-view .band .eyebrow .num,
.chapter-view .band .eyebrow .bar{color:var(--primary-strong) !important; background:var(--primary-tint)}

/* ---------- LEADERSHIP TEAM (chapter 2) ----------
   Rectangular portrait, name on a gold band right under it, plain navy role
   line, centered description. */
.chapter-view .leader{
  text-align:center;
  max-width:240px;   /* 1.5× smaller than the previous 360px */
  margin:0 auto;
}
/* transparent (background-removed) portrait: contain, standing on the name band */
.chapter-view .leader-photo{
  width:100%; aspect-ratio:14/15; object-fit:contain; object-position:bottom;
  display:block; border-radius:0;
}
/* name band: gold bar with a golden-gradient outline, flush under the photo.
   Full card width again, but slim — vertical padding trimmed so the bar is
   ~1.5× thinner than before. */
.chapter-view .leader h4{
  background:
    linear-gradient(var(--gold), var(--gold)) padding-box,
    linear-gradient(135deg, #ffe9b8 0%, #b8790c 40%, #ffd76e 70%, #8a5a06 100%) border-box;
  border:2px solid transparent;
  color:#082567;
  font-size:17px; font-weight:700;
  width:100%;
  padding:3px 10px; margin:0 auto 10px;
}
.chapter-view .leader-pill{
  display:block; margin-bottom:12px;
  color:var(--ink); font-size:13px; font-weight:700;
}
.chapter-view .leader p{font-size:15px; color:var(--muted); line-height:1.65; font-weight:600}

/* ---------- CONTACT PAGE (chapter 22) ----------
   Two columns: the contact details on the left, an embedded Google map on the
   right. Collapses to one column on narrow screens. */
.chapter-view .contact-grid{
  display:grid; grid-template-columns:minmax(280px,1fr) 1.3fr; gap:2.5rem; align-items:start; text-align:left;
}
.chapter-view .contact-info{display:flex; flex-direction:column; gap:1.1rem}
.chapter-view .contact-item{display:flex; gap:.9rem; align-items:flex-start}
.chapter-view .contact-ic{
  flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--primary-tint); color:var(--primary-strong);
}
.chapter-view .contact-label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px;
}
.chapter-view .contact-value{
  display:block; font-size:15.5px; color:var(--ink); font-weight:600; line-height:1.5; text-decoration:none;
}
a.chapter-view .contact-value:hover, .chapter-view a.contact-value:hover{color:var(--primary-strong)}
.chapter-view .contact-socials{display:flex; gap:.6rem; margin-top:.4rem}
.chapter-view .contact-socials a{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:9999px;
  background:var(--primary-tint); color:var(--primary-strong); transition:var(--transition);
}
.chapter-view .contact-socials a:hover{background:var(--primary); color:#fff}
.chapter-view .contact-map{display:flex; flex-direction:column; gap:.7rem}
.chapter-view .contact-map iframe{
  width:100%; height:420px; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-warm);
  filter:saturate(.92); background:var(--surface);
}
.chapter-view .contact-map-link{
  align-self:flex-start; font-size:14px; font-weight:700; color:var(--primary-strong); text-decoration:none;
}
.chapter-view .contact-map-link:hover{text-decoration:underline}
@media (max-width:860px){
  .chapter-view .contact-grid{grid-template-columns:1fr}
  .chapter-view .contact-map iframe{height:320px}
}

/* ---------- ADMISSION PROCESS STEPPER (chapter 19) ----------
   Sidebar of steps on the left, the selected step's content on the right. */
.chapter-view .eproc{
  display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:start;
  text-align:left;
}
.chapter-view .eproc-nav{
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:96px;
  border-right:1px solid var(--line); padding-right:26px;
}
.chapter-view .eproc-step{
  display:flex; align-items:center; gap:11px; text-align:left;
  font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--muted);
  background:transparent; border:0; border-radius:999px; padding:11px 16px;
  cursor:pointer; transition:var(--transition);
}
.chapter-view .eproc-step:hover{color:var(--ink)}
.chapter-view .eproc-step.on{background:var(--primary-tint); color:var(--primary-strong)}
.chapter-view .eproc-num{
  display:grid; place-items:center; flex-shrink:0;
  width:24px; height:24px; border-radius:50%;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  border:1.5px solid var(--primary-tint); color:var(--muted);
  transition:var(--transition);
}
.chapter-view .eproc-step.on .eproc-num{
  background:var(--primary); border-color:var(--primary); color:var(--btn-primary-text);
}
.chapter-view .eproc-panel{display:none}
.chapter-view .eproc-panel.on{display:block; animation:chapter-fade .25s ease}
.chapter-view .eproc-panel h3{font-size:clamp(20px,2.4vw,26px); margin-bottom:14px}
.chapter-view .eproc-cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  background:var(--primary); color:var(--btn-primary-text) !important;
  font-weight:700; font-size:15px; padding:12px 24px; border-radius:999px;
  transition:var(--transition);
}
.chapter-view .eproc-cta:hover{transform:translateY(-2px); box-shadow:var(--shadow-glow)}
@media (max-width: 860px){
  .chapter-view .eproc{grid-template-columns:1fr; gap:22px}
  .chapter-view .eproc-nav{
    position:static; flex-direction:row; flex-wrap:wrap; gap:8px;
    border-right:0; padding-right:0; border-bottom:1px solid var(--line); padding-bottom:16px;
  }
  .chapter-view .eproc-step{padding:8px 13px; font-size:13.5px}
}

/* ---------- GRADE TABS ---------- */
/* The whole grade block sits under a centered section head, so the tabs row,
   panel headings, KPI chips and timeline are centered too — otherwise the
   block reads as squeezed against the left edge. */
.chapter-view .gtabs{display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-bottom:26px}
.chapter-view .gpanel{max-width:1000px; margin:0 auto}
.chapter-view .ghead{justify-content:center}
.chapter-view .gpanel .gmeta{text-align:center; max-width:68ch; margin-left:auto; margin-right:auto}
.chapter-view .gpanel > h4{text-align:center}
.chapter-view .gpanel .kpi-row{justify-content:center}
.chapter-view .gpanel .tl{max-width:700px; margin-left:auto; margin-right:auto}
.chapter-view .gtab{
  font-family:var(--font-body); font-weight:700; font-size:14px;
  border:none; background:var(--sand); color:var(--muted);
  padding:9px 0; width:60px; text-align:center; border-radius:10px; cursor:pointer;
  transition:var(--transition); box-shadow:none;
}
.chapter-view .gtab small{
  display:block; font-size:8.5px; letter-spacing:.5px; color:var(--muted);
  font-weight:600; margin-top:1px; text-transform:uppercase;
}
.chapter-view .gtab:hover{border-color:var(--primary-tint)}
.chapter-view .gtab.on{background:var(--ink); color:var(--sand); border-color:var(--ink)}
.chapter-view .gtab.on small{color:var(--primary-tint)}
.chapter-view .gpanel{display:none}
.chapter-view .gpanel.on{display:block; animation:chapter-fade .25s ease}
@keyframes chapter-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chapter-view .ghead{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:6px}
.chapter-view .ghead h3{font-size:27px}
.chapter-view .gmeta{font-size:14px; color:var(--muted); margin-bottom:18px}

/* ---------- TIMELINE ---------- */
.chapter-view .tl{position:relative; margin:8px 0 0; padding-left:24px}
.chapter-view .tl::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--primary-tint);
}
.chapter-view .tl .ti{position:relative; padding:0 0 16px 14px}
.chapter-view .tl .ti::before{
  content:""; position:absolute; left:-23px; top:5px; width:11px; height:11px;
  border-radius:50%; background:var(--primary); border:2px solid var(--bg);
}
.chapter-view .tl .ti .d{
  font-family:var(--font-body); font-weight:800; font-size:12px;
  color:var(--primary-strong); letter-spacing:.5px;
}
.chapter-view .tl .ti .h{font-weight:700; color:var(--ink); font-size:14.5px; margin:1px 0 2px}
.chapter-view .tl .ti p{font-size:13.5px; color:var(--muted); margin:0}

/* ---------- KPI ---------- */
.chapter-view .kpi-row{display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 18px}
.chapter-view .kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:11px 15px; min-width:130px; box-shadow:var(--shadow-warm);
}
.chapter-view .kpi b{display:block; font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.3px}
.chapter-view .kpi span{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink)}

/* ---------- CHECKS ---------- */
.chapter-view .checks{
  list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:7px;
}
.chapter-view .checks li{font-size:13.5px; color:var(--muted); padding-left:24px; position:relative}
.chapter-view .checks li::before{
  content:"\2713"; position:absolute; left:0; top:0; color:#2f7d5b; font-weight:800;
}

/* ---------- COLLAPSIBLE ANNEX ---------- */
.chapter-view .annex summary{cursor:pointer; list-style:none}
.chapter-view .annex summary::-webkit-details-marker{display:none}

/* ---------- HOME DIRECTORY (content directory grid) ---------- */
.chapter-view .dirgroup{margin-bottom:26px}
.chapter-view h3.dg{
  font-size:13px; font-family:var(--font-body); letter-spacing:2.4px; text-transform:uppercase;
  color:var(--primary-strong); font-weight:700; margin:0 0 10px; display:flex; align-items:center; gap:10px;
}
.chapter-view h3.dg::after{content:""; height:1px; flex:1; background:var(--primary-tint)}
.chapter-view .dirgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.chapter-view .dircard{
  display:flex; align-items:baseline; gap:10px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-warm);
  text-decoration:none; color:var(--muted); font-weight:600; font-size:14.5px; transition:var(--transition);
}
.chapter-view .dircard:hover{border-color:var(--primary); color:var(--ink); transform:translateY(-2px)}
.chapter-view .dircard .dnum{
  font-family:var(--font-display); font-style:italic; font-weight:700;
  color:var(--primary); font-size:15px; min-width:24px;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:880px){
  .chapter-view .g2,
  .chapter-view .g3,
  .chapter-view .g4,
  .chapter-view .pillars,
  .chapter-view .principles,
  .chapter-view .metrics{grid-template-columns:1fr}
  .chapter-view .checks{grid-template-columns:1fr}
  .chapter-view .band{padding:28px 20px}
  .chapter-view .gtab{width:46px}
  .chapter-view .dirgrid{grid-template-columns:1fr}
}

/* ---------- PRINT ---------- */
@media print{
  .chapter-view .gpanel{
    display:block!important; page-break-inside:avoid;
    border-bottom:1px solid var(--line); padding-bottom:16px;
  }
  .chapter-view .gtabs{display:none}
  .chapter-view .annex[open] .annexbody,
  .chapter-view .annexbody{display:block!important}
  .chapter-view section{page-break-inside:avoid; padding:24px 0}
  .chapter-view .band,
  .chapter-view .card,
  .chapter-view .tablewrap{box-shadow:none}
}
/* ═══ CHAPTER PAGE-MODE VIEW (router chrome) ═══ */
body.chapter-open #app,
body.chapter-open .bg-orbs { display: none; }
.chapter-view {
  max-width: 1200px;          /* matches the main site container */
  margin: 0 auto;
  padding: 5.5rem var(--container-px) 4rem;
  position: relative;
  z-index: 1;
  animation: pageIn 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { .chapter-view { padding-top: 7rem; } }

.chapter-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.chapter-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-strong);
  background: var(--primary-tint);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 0.5rem 1rem 0.5rem 0.7rem;
  cursor: pointer;
  transition: all var(--transition);
}
.chapter-back:hover { background: var(--primary); color: var(--btn-primary-text, #fff); transform: translateX(-2px); }
.chapter-counter {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.chapter-body { min-height: 40vh; }

/* Prev / next pager */
.chapter-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.chapter-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  color: var(--ink);
  transition: all var(--transition);
  box-shadow: var(--shadow-warm);
}
.chapter-nav:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-warm-lg); }
.chapter-nav.next { justify-content: flex-end; text-align: right; }
.chapter-nav span { display: flex; flex-direction: column; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.chapter-nav small { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); margin-bottom: 0.15rem; }
.chapter-nav svg { color: var(--primary); flex-shrink: 0; }
@media (max-width: 640px) {
  .chapter-pager { grid-template-columns: 1fr; }
  .chapter-nav.next { justify-content: flex-start; text-align: left; flex-direction: row-reverse; }
}

/* Responsive: collapse chapter grids on small screens */
@media (max-width: 820px) {
  .chapter-view .g2, .chapter-view .g3, .chapter-view .g4,
  .chapter-view .pillars, .chapter-view .principles, .chapter-view .metrics { grid-template-columns: 1fr !important; }
}
@media (min-width: 560px) and (max-width: 820px) {
  .chapter-view .g4, .chapter-view .principles, .chapter-view .metrics { grid-template-columns: 1fr 1fr !important; }
}