/* ============================================================================
   MARGA EVOLEARN — Design system v3
   ----------------------------------------------------------------------------
   Concept: "engineering datasheet". The school’s output is a reviewable
   artefact — a spec, a dashboard, a deployed system. The interface borrows that
   vernacular: hairline rules, monospace field labels, instrument-panel darks,
   and one ambient light source. Palette sampled from the Marga brand board.

   Typefaces are self-hosted (assets/fonts) rather than linked from Google, so
   text paints without a third-party round-trip and the layout cannot be
   reflowed by a change on someone else’s server. Regenerate with
   tools/fetch-fonts.php.
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-var-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sora-var-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sora-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand — sampled from the marga brand board */
  --navy-900: #0A1220;
  --navy-800: #121D2E;
  --navy-700: #1B2838;
  --navy-600: #24354A;

  --peri:     #5B7FD4;
  --peri-lo:  #4468BE;
  --sky:      #6BB8F5;
  --teal:     #0DA5A5;
  --teal-hi:  #17C4C4;

  /* Track accents. Eight hues held at matched saturation and luminance so they
     read as one designed family rather than a set of unrelated brights. Each
     track owns one — colour identifies the discipline, it isn't decoration. */
  --t-cyber:   #0DA5A5;
  --t-stack:   #5B7FD4;
  --t-python:  #D9902B;
  --t-ai:      #7C5CE0;
  --t-system:  #2E93E0;
  --t-data:    #12A578;
  --t-cloud:   #0FAECB;
  --t-uiux:    #DB5680;

  /* Every component that can be tinted falls back to the house accent. */
  --accent: var(--peri);

  /* Neutrals, biased toward the accent so none of them read as default grey */
  --paper:    #FFFFFF;
  --mist-50:  #F5F7FB;
  --mist-100: #EAEFF7;
  --mist-200: #DCE4F0;

  --ink:       #0E1725;
  --ink-soft:  #4A5A73;
  --ink-faint: #8494AC;
  --ink-ghost: #B3BFD0;

  --line:        rgba(14, 23, 37, .09);
  --line-strong: rgba(14, 23, 37, .16);
  --line-dark:   rgba(255, 255, 255, .10);

  /* Semantic — separate from the brand accent */
  --good: #0E9F6E;
  --warn: #B7791F;
  --crit: #D0442F;

  /* Radii vary by role, so nothing reads as uniformly rounded */
  --r-panel: 20px;
  --r-card:  14px;
  --r-field: 8px;
  --r-pill:  999px;

  /* Layered shadows — soft, blue-tinted, never grey */
  --sh-1: 0 1px 2px rgba(14, 23, 37, .05);
  --sh-2: 0 4px 16px -4px rgba(14, 23, 37, .10), 0 2px 6px -2px rgba(14, 23, 37, .06);
  --sh-3: 0 18px 44px -12px rgba(14, 23, 37, .16), 0 6px 16px -8px rgba(14, 23, 37, .10);
  --sh-4: 0 40px 90px -24px rgba(10, 18, 32, .32), 0 12px 32px -16px rgba(10, 18, 32, .22);
  --sh-glow: 0 0 0 1px rgba(91, 127, 212, .22), 0 20px 50px -18px rgba(91, 127, 212, .38);

  /* Fills the screen instead of stranding a wide band of empty gradient either
     side. The vw term keeps a margin on very large displays; the px ceiling
     stops a 4K monitor from stretching the grids past what the photography and
     card layouts were composed for. Long-form text is capped separately in ch,
     so widening this affects grids and imagery, never line length. */
  --wrap: min(1720px, 94vw);

  /* Height the fixed bar occupies. Heroes reserve this much at the top so the
     photograph runs edge to edge behind the bar while the copy clears it. */
  --nav-h: 80px;

  /* Fluid spine. Every major vertical gap derives from these three, so the page
     keeps one rhythm instead of forty hand-tuned pixel values. */
  --gutter:        clamp(20px, 4vw, 40px);
  --space-section: clamp(74px, 8.2vw, 132px);
  --space-head:    clamp(38px, 4.4vw, 64px);
  --space-block:   clamp(22px, 2.4vw, 34px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Type scale — 1.25 major third, clamped */
  --t-xs:  .79rem;
  --t-sm:  .92rem;
  --t-base: 1rem;
  --t-lg:  1.16rem;
  --t-xl:  clamp(1.25rem, 1.6vw, 1.4rem);
  --t-2xl: clamp(1.5rem, 2.2vw, 1.85rem);
  --t-3xl: clamp(1.9rem, 3.1vw, 2.6rem);
  --t-4xl: clamp(2.3rem, 4.4vw, 3.5rem);
  --t-5xl: clamp(2.8rem, 6vw, 4.9rem);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 18px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'ss01' 1;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

h1, h2, h3, h4, h5 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .48em;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-5xl); font-weight: 700; letter-spacing: -0.042em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.032em; }
h3 { font-size: var(--t-xl); letter-spacing: -0.022em; }
h4 { font-size: var(--t-lg); letter-spacing: -0.018em; }

p { margin: 0 0 1.05em; color: var(--ink-soft); max-width: 68ch; }
strong { color: var(--ink); font-weight: 600; }

.mono, .field-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-sm); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--peri);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--navy-900); color: #fff; padding: 14px 22px;
  border-radius: 0 0 var(--r-field) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ------------------------------------------------------- Grain + ambience */
/* A single fine-grain layer keeps large flat darks from banding.            */
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Ambient aurora — one slow light source, never a rainbow. */
.aurora { position: absolute; inset: -30% -10%; pointer-events: none; z-index: 0; filter: blur(64px); opacity: .92; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  animation: drift 22s var(--ease) infinite alternate;
}
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 2%;  top: 4%;   background: radial-gradient(circle, rgba(91,127,212,.9), transparent 68%); }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; right: 4%; top: 18%;  background: radial-gradient(circle, rgba(13,165,165,.72), transparent 68%); animation-delay: -7s; }
.aurora i:nth-child(3) { width: 32vw; height: 32vw; left: 38%; bottom: 0%; background: radial-gradient(circle, rgba(124,92,224,.62), transparent 68%); animation-delay: -13s; }
.aurora i:nth-child(4) { width: 26vw; height: 26vw; right: 24%; top: 2%;  background: radial-gradient(circle, rgba(219,86,128,.42), transparent 68%); animation-delay: -18s; }
.aurora i:nth-child(5) { width: 24vw; height: 24vw; left: 18%; bottom: 6%; background: radial-gradient(circle, rgba(15,174,203,.5), transparent 68%); animation-delay: -4s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -6%, 0) scale(1.16); }
}

/* --------------------------------------------------------- The level mark */
/* The brand thesis is "opportunity, levelled". The bars rise once into an   */
/* even line on reveal — the idea stated, not an ambient bouncing loop.      */
.level { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; }
.level b {
  display: block; width: 3px; border-radius: 1px; background: currentColor;
  height: 34%; transform-origin: bottom;
  transition: height .7s var(--ease-out);
}
.level b:nth-child(2) { height: 62%; }
.level b:nth-child(3) { height: 44%; }
.level b:nth-child(4) { height: 100%; }
.is-level .level b { height: 100% !important; }

.level-lg { height: 62px; gap: 7px; align-items: flex-end; }
.level-lg b { width: 7px; border-radius: 2px 2px 0 0; }

/* ------------------------------------------------------------------ Header */
.site-header {
  /* Single source of truth for the bar's height. The mobile menu measures
     itself against this, so the two can never drift apart. */
  --header-h: 76px;
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  --header-h: 64px;
  background: rgba(255, 255, 255, .9);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px -8px rgba(14, 23, 37, .16);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h); transition: height .3s var(--ease);
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.16rem;
  letter-spacing: -0.035em; white-space: nowrap; color: var(--ink);
}
/* The lockup is a fixed-ratio image: set the height and let width follow, so a
   future re-export at a different pixel size cannot change the header's rhythm.
   width:auto is required or the width="460" attribute wins. */
.brand img { height: 50px; width: auto; }
.site-header.is-stuck .brand img { height: 40px; transition: height .25s var(--ease); }
.footer-brand .brand img { height: 40px; }
.admin-brand { gap: 9px; }
.admin-brand img { height: 26px; }

.brand .level { color: var(--peri); }
.brand-sub {
  font-family: 'IBM Plex Mono', monospace; font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-top: 2px; font-weight: 400;
}

@media (max-width: 560px) {
  .brand img { height: 34px; }
  .site-header.is-stuck .brand img { height: 31px; }
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .895rem; font-weight: 500; padding: 9px 13px; border-radius: var(--r-field);
  color: var(--ink-soft); transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-links > li > a:hover { color: var(--ink); background: var(--mist-100); }
.nav-links > li > a.active { color: var(--ink); font-weight: 600; }
.nav-links > li > a.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--peri), var(--teal));
}

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy-900); color: #fff !important; padding: 11px 20px !important;
  border-radius: var(--r-pill); font-size: .86rem !important; font-weight: 600 !important;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.nav-cta:hover { background: var(--navy-700) !important; transform: translateY(-1px); box-shadow: var(--sh-2); }
.nav-cta::after { display: none !important; }

/* Dropdown */
.has-drop > a::after { content: '⌄'; font-size: .8em; opacity: .5; position: static !important; background: none !important; height: auto !important; }
.drop {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 320px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-3); padding: 8px; z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.drop::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.drop li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-field); font-size: .875rem;
  line-height: 1.35; color: var(--ink-soft); transition: background .15s, color .15s;
}
.drop li a:hover { background: var(--mist-50); color: var(--ink); }
.drop li a .ico { color: var(--peri); }
.drop li a .sub {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-top: 3px;
}
.drop .drop-head {
  font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); padding: 10px 12px 6px;
}
.drop hr { border: none; border-top: 1px solid var(--line); margin: 6px 8px; }

.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .nav-links > li > a { font-size: .84rem; padding: 9px 10px; }
  .nav-links { gap: 0; }
}
@media (max-width: 940px) {
  /* Absolute, not fixed. The header carries a backdrop-filter, which makes it
     the containing block for fixed descendants — so `inset: 68px 0 0 0` was
     resolving against a 76px-tall bar and collapsing the panel to 81px, with
     overflow-y hiding every item past "Home". Anchoring to the header on
     purpose is both correct and immune to that filter being changed later. */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));   /* excludes mobile browser chrome */
    background: var(--paper);
    flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 40px; gap: 0;
    opacity: 0; pointer-events: none; transform: translateY(-10px);
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid var(--line);
  }
  .nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-links > li { border-bottom: 1px solid var(--line); }
  .nav-links > li:last-child { border-bottom: none; padding-top: 16px; }
  .nav-links > li > a {
    display: flex; align-items: center;
    padding: 15px 0; font-size: 1.02rem; width: 100%; border-radius: 0;
  }
  .nav-links > li > a.active::after { left: 0; right: auto; width: 22px; bottom: 8px; }
  .nav-cta { justify-content: center; padding: 15px !important; }

  /* Accordion. Expanding all three menus inline produced a 1257px wall of
     links; each now opens only when asked. */
  .drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    min-width: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
    display: none; padding: 0 0 10px 6px;
  }
  .has-drop.is-open > .drop { display: block; }
  .drop .drop-head, .drop hr { display: none; }
  .drop li a { padding: 11px 0; font-size: .9rem; }
  .drop li a:hover { background: transparent; }
  .drop li a .sub { display: none; }   /* the label alone is enough at this width */

  .has-drop > a::after { margin-left: auto; transition: transform .2s var(--ease); }
  .has-drop.is-open > a::after { transform: rotate(180deg); }
  .has-drop.is-open > a { color: var(--ink); font-weight: 600; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; background: var(--mist-100); border: none;
    border-radius: var(--r-field); cursor: pointer; padding: 0;
  }
  .nav-toggle i { position: relative; width: 16px; height: 1.6px; background: var(--ink); display: block; transition: .2s var(--ease); border-radius: 2px; }
  .nav-toggle i::before, .nav-toggle i::after {
    content: ''; position: absolute; left: 0; width: 16px; height: 1.6px;
    background: var(--ink); transition: .2s var(--ease); border-radius: 2px;
  }
  .nav-toggle i::before { top: -5.5px; }
  .nav-toggle i::after { top: 5.5px; }
  .nav-toggle[aria-expanded="true"] i { background: transparent; }
  .nav-toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }
}

/* Scroll progress hairline */
.scroll-rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; }
.scroll-rail i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--peri), var(--sky) 50%, var(--teal));
  transform-origin: left;
}

/* ----------------------------------------------------------------- Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; font-size: .93rem; font-weight: 600; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; overflow: hidden;
  font-family: 'Instrument Sans', sans-serif; letter-spacing: -0.005em; line-height: 1.25;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* A single sheen sweep on hover — restrained, not a permanent shimmer. */
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn-primary { background: var(--navy-900); color: #fff; box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--navy-700); box-shadow: var(--sh-3); }

.btn-accent {
  background: linear-gradient(135deg, var(--peri), var(--peri-lo));
  color: #fff; box-shadow: 0 10px 26px -10px rgba(91, 127, 212, .8);
}
.btn-accent:hover { box-shadow: 0 16px 38px -12px rgba(91, 127, 212, .92); }

.btn-tech { background: var(--teal); color: #fff; box-shadow: 0 10px 26px -10px rgba(13, 165, 165, .7); }
.btn-tech:hover { background: var(--teal-hi); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-quiet { background: var(--mist-100); color: var(--ink); }
.btn-quiet:hover { background: var(--mist-200); }

.on-dark .btn-ghost, .btn-ghost.on-dark { border-color: rgba(255,255,255,.26); color: #fff; }
.on-dark .btn-ghost:hover, .btn-ghost.on-dark:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

.btn-sm { padding: 10px 18px; font-size: .84rem; }
.btn-lg { padding: 17px 32px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* Icons that step forward on hover */
.btn .arw { transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* ------------------------------------------------------ Section furniture */
/* Fluid rather than stepped: vertical rhythm scales continuously with the
   viewport, so there is no width at which the page suddenly feels cramped or
   loosely spaced. The floor keeps small screens breathable; the ceiling stops
   a 27" monitor from pushing sections a full screen apart. */
section { padding: var(--space-section) 0; position: relative; }
.section-tight { padding: calc(var(--space-section) * .62) 0; }
.section-alt { background: var(--mist-50); }

/* Two dark sections in a row read as one long slab. Collapse the seam so the
   pair shares a single generous band instead of stacking two paddings. */
.section-dark + .section-dark { padding-top: 0; }

/* Tinted grounds. Very low-chroma washes so a light section still carries a
   hue instead of defaulting to grey — the colour comes from the brand family. */
.section-wash {
  background:
    radial-gradient(1200px 460px at 8% -10%,  rgba(91,127,212,.13), transparent 62%),
    radial-gradient(900px 420px at 96% 8%,    rgba(13,165,165,.11), transparent 60%),
    radial-gradient(760px 400px at 46% 108%,  rgba(124,92,224,.10), transparent 62%),
    var(--mist-50);
}
.section-wash-warm {
  background:
    radial-gradient(1000px 440px at 92% -8%, rgba(219,86,128,.12), transparent 60%),
    radial-gradient(820px 400px at 4% 20%,   rgba(217,144,43,.10), transparent 58%),
    var(--mist-50);
}
.section-dark {
  color: rgba(255, 255, 255, .76); position: relative; overflow: hidden;
  background: linear-gradient(168deg, #15253E 0%, var(--navy-900) 50%, #0C1A2E 100%);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255, 255, 255, .68); }
.section-dark .wrap { position: relative; z-index: 2; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--peri); margin-bottom: 18px; font-weight: 500;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px; opacity: .9;
  background: linear-gradient(90deg, currentColor, transparent);
}
.eyebrow.no-rule::before { display: none; }
.section-dark .eyebrow { color: var(--sky); }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 56px;
  margin-bottom: var(--space-head); padding-bottom: 30px; border-bottom: 1px solid var(--line);
}
/* 34ch broke longer section headings onto four short lines. 44ch keeps two or
   three, and `text-wrap: balance` on h2 evens them out. */
.section-head > div:first-child { max-width: 44ch; }
.section-head p { max-width: 40ch; margin: 0; font-size: var(--t-base); }
.section-head h2 { margin-bottom: 0; }
.section-dark .section-head { border-bottom-color: var(--line-dark); }

@media (max-width: 780px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ------------------------------------------------------------- Home hero */
.hero {
  position: relative; overflow: hidden; padding: 0; color: #fff;
  background:
    linear-gradient(168deg, #14243F 0%, var(--navy-900) 46%, #0C1A2E 100%);
  /* Tall enough to read as a stage rather than a banner, but never taller than
     the viewport — the section below must stay visible as a scroll cue. */
  min-height: clamp(640px, 84vh, 900px);
  display: flex; align-items: center;
}

/* Aligns the carousel's own furniture to the same column as the copy, so the
   dots start exactly where the headline starts at every width. */
.hero { --hero-inset: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }

.hero .wrap { position: relative; z-index: 3; width: 100%; }
.hero-in {
  max-width: 660px;
  padding: clamp(96px, 11vh, 150px) 0 clamp(150px, 17vh, 210px);
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero .eyebrow { color: var(--sky); }
.hero .lede { font-size: var(--t-lg); color: rgba(255, 255, 255, .78); max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* The headline's operative phrase, marked as the thesis it is. */
.mark-grad {
  background: linear-gradient(100deg, var(--sky), var(--peri) 48%, var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

@media (max-width: 1000px) {
  .hero { min-height: 0; }
  .hero-in { padding: 76px 0 132px; }
  .hero h1 { max-width: 18ch; }
}

/* Hero readout strip — instrument panel, not a stat brag */
.readout-band {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, #0C1A2E 0%, var(--navy-900) 100%);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.readout {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark); position: relative; z-index: 3;
}
.readout > div { padding: 26px 0 34px; padding-right: 24px; }
.readout > div + div { border-left: 1px solid var(--line-dark); padding-left: 24px; }
.readout .n {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  display: block; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #fff 18%, var(--sky) 62%, var(--teal-hi));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.readout .l {
  font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .46); margin-top: 11px;
  display: block; line-height: 1.55;
}
@media (max-width: 820px) {
  .readout { grid-template-columns: 1fr 1fr; }
  .readout > div { padding: 20px 18px 24px 0; }
  .readout > div:nth-child(odd) { border-left: none; padding-left: 0; }
  .readout > div:nth-child(even) { border-left: 1px solid var(--line-dark); padding-left: 22px; }
  .readout > div:nth-child(1), .readout > div:nth-child(2) { border-bottom: 1px solid var(--line-dark); }
}

/* ---------------------------------------------------------------- Marquee */
.marquee {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper); padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 0; width: max-content; animation: slide 44s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex; align-items: center; gap: 12px; padding: 0 30px;
  font-family: 'IBM Plex Mono', monospace; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.marquee-track span .ico { color: var(--accent, var(--peri)); }
.marquee-track span { color: var(--ink-soft); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- Datasheets */
/* Track cards read as engineering spec sheets: square corners, hairline    */
/* rules, monospace field labels. Deliberately not rounded tiles.           */
.sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sheet {
  background: var(--paper); padding: 30px 26px 28px; position: relative;
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  transition: background .3s var(--ease);
}
/* A hairline of the track's own colour, drawn on hover. */
.sheet::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.sheet:hover::after { transform: scaleX(1); }
.sheet::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%);
  transition: opacity .35s var(--ease);
}
.sheet:hover::before { opacity: 1; }
.sheet .ico-plate {
  color: var(--accent);
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--accent) 15%, #fff),
              color-mix(in srgb, var(--accent) 6%, #fff));
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sheet:hover .ico-plate {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.sheet:hover .sheet-foot .go { color: var(--accent); }
.sheet .fld {
  font-family: 'IBM Plex Mono', monospace; font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.sheet h3 { font-size: 1.03rem; margin: 0; }
.sheet p { font-size: .875rem; margin: 0; color: var(--ink-soft); }
.sheet .sheet-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.sheet .sheet-foot .go { color: var(--peri); transition: transform .25s var(--ease); }
.sheet:hover .sheet-foot .go { transform: translateX(4px); }
@media (max-width: 1080px) { .sheet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .sheet-grid { grid-template-columns: 1fr; } }

.ico-plate {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-field);
  background: linear-gradient(145deg, var(--mist-100), var(--mist-50));
  border: 1px solid var(--line); color: var(--peri); flex-shrink: 0;
}
.ico-plate.teal { color: var(--teal); }
.ico-plate.dark { background: rgba(255,255,255,.07); border-color: var(--line-dark); color: var(--sky); }
.ico { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

/* ------------------------------------------------------------------ Cards */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 30px; box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.card:hover, .card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--mist-200); }
.card h3 { margin-bottom: .5em; }
.card p:last-child { margin-bottom: 0; }
.section-alt .card { background: var(--paper); }
.section-dark .card { background: rgba(255,255,255,.045); border-color: var(--line-dark); box-shadow: none; }

.card-grid { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* Bento — deliberate asymmetry rather than an even grid */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bento .wide { grid-column: span 2; }
.bento .tall { grid-row: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento .wide, .bento .tall { grid-column: auto; grid-row: auto; }
}

/* Split layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split.narrow-right { grid-template-columns: 1.28fr 1fr; }
.split.narrow-left  { grid-template-columns: 1fr 1.28fr; }
.split.mid { align-items: center; }
@media (max-width: 940px) {
  .split, .split.narrow-right, .split.narrow-left { grid-template-columns: 1fr; gap: 44px; }
}
.sticky-side { position: sticky; top: 104px; }
@media (max-width: 940px) { .sticky-side { position: static; } }

/* ------------------------------------------------------------ Page heroes */
.page-hero {
  color: #fff; padding: 92px 0 84px; position: relative; overflow: hidden;
  background: linear-gradient(168deg, #16263F 0%, var(--navy-900) 52%, #0C1A2E 100%);
}
.page-hero .wrap { position: relative; z-index: 3; }
.page-hero h1 { color: #fff; max-width: 20ch; font-size: var(--t-4xl); }
.page-hero p { color: rgba(255, 255, 255, .7); max-width: 58ch; font-size: var(--t-lg); margin-bottom: 0; }
.page-hero .hero-actions { margin-top: 32px; }
.page-hero .btn-ghost { border-color: rgba(255,255,255,.26); color: #fff; }
.page-hero .btn-ghost:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

.breadcrumb {
  font-family: 'IBM Plex Mono', monospace; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .16em; color: rgba(255, 255, 255, .45); margin-bottom: 22px;
}
.breadcrumb a { transition: color .18s; }
.breadcrumb a:hover { color: var(--sky); }
.breadcrumb span { opacity: .4; margin: 0 8px; }

/* ------------------------------------------------------------------ Stats */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { padding: 34px 28px 34px 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 28px; }
.stat .num {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  display: block; line-height: 1.05; letter-spacing: -0.04em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat .label {
  font-family: 'IBM Plex Mono', monospace; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-faint); margin-top: 11px; display: block; line-height: 1.6;
}
@media (max-width: 820px) {
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat { padding: 24px 18px 24px 0; }
  .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: 22px; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ------------------------------------------------------------ Value tiles */
/* No 01/02/03 markers — these four are a set, not a sequence. */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.values-grid.two { grid-template-columns: repeat(2, 1fr); }
.value-tile {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 26px; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.value-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--accent) 45%, transparent), var(--sh-1);
}
.value-tile .ico-plate {
  color: var(--accent);
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--accent) 16%, #fff),
              color-mix(in srgb, var(--accent) 6%, #fff));
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
/* The four values each take one hue from the family. */
.values-grid > .value-tile:nth-child(1) { --accent: var(--t-cloud); }
.values-grid > .value-tile:nth-child(2) { --accent: var(--t-ai); }
.values-grid > .value-tile:nth-child(3) { --accent: var(--t-data); }
.values-grid > .value-tile:nth-child(4) { --accent: var(--t-uiux); }
.value-tile h3 { font-size: 1.05rem; margin: 16px 0 8px; }
.value-tile p { font-size: .875rem; margin: 0; }
@media (max-width: 1000px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .values-grid, .values-grid.two { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Honesty cards */
.honesty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.honesty-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 30px 28px; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.honesty-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}
.honesty-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: 0 18px 42px -16px color-mix(in srgb, var(--accent) 45%, transparent), var(--sh-1);
}
.honesty-card .tag {
  font-family: 'IBM Plex Mono', monospace; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--accent);
}
/* Delivery / financial aid / placement each carry their own hue. */
.honesty-grid > .honesty-card:nth-child(1) { --accent: var(--t-cloud); }
.honesty-grid > .honesty-card:nth-child(2) { --accent: var(--t-python); }
.honesty-grid > .honesty-card:nth-child(3) { --accent: var(--t-data); }
.honesty-card h3 { margin: 12px 0 10px; font-size: 1.1rem; }
.honesty-card p { font-size: .9rem; margin: 0; }
@media (max-width: 860px) { .honesty-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Terminal */
.terminal {
  background: var(--navy-900); border-radius: var(--r-card); padding: 18px 20px;
  font-family: 'IBM Plex Mono', monospace; font-size: .76rem; color: #C9DAF0;
  overflow-x: auto; border: 1px solid rgba(255,255,255,.09);
  box-shadow: var(--sh-3);
}
.terminal .dots { display: flex; gap: 6px; margin-bottom: 12px; }
.terminal .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.terminal .dot.r { background: rgba(255,255,255,.16); }
.terminal .dot.y { background: rgba(255,255,255,.16); }
.terminal .dot.g { background: var(--teal); }

/* ------------------------------------------------------------ School panel */
.schools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.school-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 34px; display: flex; flex-direction: column; gap: 17px; box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.school-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.school-card .badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 9px;
  font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(91, 127, 212, .08); color: var(--peri-lo);
  border: 1px solid rgba(91, 127, 212, .2);
}
.school-card .badge .ico { color: var(--peri); }
.school-card h3 { font-size: var(--t-xl); margin: 0; }
.school-card .btn { align-self: flex-start; margin-top: auto; }
.school-card .track-list { display: flex; flex-wrap: wrap; gap: 8px; }
.school-card .track-list a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; padding: 6px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  color: var(--ink-soft); letter-spacing: .05em; transition: .2s var(--ease);
}
.school-card .track-list a:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.partner-note {
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; color: var(--ink-faint);
  letter-spacing: .08em; line-height: 1.75; margin: 0;
}

/* The founding quotation, set as a pull quote rather than body copy. */
.story-quote {
  font-family: 'Sora', sans-serif; font-size: var(--t-2xl); font-weight: 500;
  line-height: 1.34; letter-spacing: -0.028em; color: var(--ink);
  border-left: 2px solid var(--peri); padding-left: 26px; margin: 0 0 24px; max-width: 22ch;
}
.terminal pre { margin: 0; white-space: pre-wrap; line-height: 1.72; font-family: inherit; }
.terminal .prompt { color: var(--teal-hi); }

/* -------------------------------------------------------------- Manifesto */
.creed { max-width: 900px; margin: 0 auto; }
.creed li {
  padding: 30px 0; border-bottom: 1px solid var(--line-dark);
  font-family: 'Sora', sans-serif; font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  font-weight: 500; line-height: 1.48; color: rgba(255,255,255,.9);
  letter-spacing: -0.022em; display: flex; gap: 22px; align-items: flex-start;
}
.creed li:last-child { border-bottom: none; }
.creed li::before {
  content: ''; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; margin-top: .62em;
  background: linear-gradient(135deg, var(--sky), var(--teal));
}
@media (max-width: 620px) { .creed li { gap: 14px; padding: 22px 0; } }

/* ----------------------------------------------------------- Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 940px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 32px 30px; display: flex; flex-direction: column; gap: 20px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.quote-card p { color: var(--ink); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.quote-card footer {
  display: flex; align-items: center; gap: 12px; margin-top: auto;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.quote-card .avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, var(--peri), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: .92rem; color: #fff;
  letter-spacing: 0;
}
.quote-mark { color: var(--mist-200); }

/* ------------------------------------------------------------------- Blog */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 940px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.blog-thumb {
  height: 156px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 20px;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
}
/* Each category gets a saturated two-point wash, so the blog grid reads in
   colour and the category is legible before you reach the label. */
.blog-thumb::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 8%,  rgba(91,127,212,.85), transparent 56%),
    radial-gradient(circle at 12% 96%, rgba(107,184,245,.55), transparent 58%);
}
.blog-thumb.teal::after {
  background:
    radial-gradient(circle at 78% 8%,  rgba(219,86,128,.8), transparent 56%),
    radial-gradient(circle at 12% 96%, rgba(124,92,224,.6), transparent 58%);
}
.blog-thumb.sky::after {
  background:
    radial-gradient(circle at 78% 8%,  rgba(13,165,165,.85), transparent 56%),
    radial-gradient(circle at 12% 96%, rgba(18,165,120,.6), transparent 58%);
}
.blog-thumb.amber::after {
  background:
    radial-gradient(circle at 78% 8%,  rgba(217,144,43,.85), transparent 56%),
    radial-gradient(circle at 12% 96%, rgba(219,86,128,.5), transparent 58%);
}
.blog-card:hover .blog-thumb::after { transform: scale(1.08); transition: transform .6s var(--ease-out); }
.blog-thumb::after { transition: transform .6s var(--ease-out); }
.blog-thumb .level { color: rgba(255,255,255,.85); position: relative; z-index: 2; height: 30px; }
.blog-thumb .level b { width: 5px; }
.blog-card:hover .blog-thumb .level b { height: 100%; }
.blog-body { padding: 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.blog-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-faint);
}
.blog-meta .cat { color: var(--peri); }
.blog-body h3 { margin: 0; font-size: 1.08rem; line-height: 1.32; }
.blog-body p { font-size: .885rem; margin: 0; }
.blog-read {
  margin-top: auto; padding-top: 6px; font-size: .82rem; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
}
.blog-card:hover .blog-read .arw { transform: translateX(4px); }
.blog-read .arw { transition: transform .25s var(--ease); }

/* Article */
.article { max-width: 720px; margin: 0 auto; }
.article h2 { font-size: var(--t-2xl); margin: 52px 0 16px; }
.article p { font-size: 1.09rem; line-height: 1.78; color: var(--ink-soft); }
.article p.first { font-size: 1.24rem; line-height: 1.62; color: var(--ink); letter-spacing: -0.012em; }

/* ------------------------------------------------------------ Program card */
.program-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px; display: flex; flex-direction: column; gap: 13px; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.program-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%);
  transition: opacity .35s var(--ease);
}
.program-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.program-card:hover::before { opacity: 1; }
.program-card:hover::after { transform: scaleX(1); }
.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px -16px color-mix(in srgb, var(--accent) 42%, transparent), var(--sh-2);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.program-card .ico-plate {
  color: var(--accent);
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--accent) 15%, #fff),
              color-mix(in srgb, var(--accent) 6%, #fff));
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.program-card .kicker { color: color-mix(in srgb, var(--accent) 78%, var(--ink-faint)); }
.program-card .kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-faint);
}
.program-card h3 { margin: 0; font-size: 1.1rem; }
.program-card p { font-size: .89rem; margin: 0; }
.program-card .meta {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint);
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto;
}

/* --------------------------------------------------------------- Sequence */
/* Numbering kept here only because admissions genuinely is a sequence.      */
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 26px; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.step .idx {
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .14em;
  color: var(--peri); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
}
.step .idx::after { content: ''; width: 26px; height: 1px; background: var(--line-strong); }
.step h3 { font-size: 1.05rem; margin-bottom: 9px; }
.step p { font-size: .885rem; margin: 0; }
@media (max-width: 1000px) { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .step-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Checklist */
.checklist li {
  padding: 15px 0 15px 34px; position: relative; border-bottom: 1px solid var(--line);
  color: var(--ink-soft); line-height: 1.62; font-size: .95rem;
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 24px;
  width: 16px; height: 1.5px; background: var(--peri); border-radius: 2px;
}
.section-dark .checklist li { border-bottom-color: var(--line-dark); color: rgba(255,255,255,.72); }
.section-dark .checklist li::before { background: var(--sky); }

/* ------------------------------------------------------------------ Pills */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; padding: 6px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink-soft);
  letter-spacing: .06em; transition: .2s var(--ease);
}
a.pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); }
.pill.tech { border-color: rgba(13,165,165,.34); color: var(--teal); background: rgba(13,165,165,.06); }
.pill.accent { border-color: rgba(91,127,212,.34); color: var(--peri-lo); background: rgba(91,127,212,.06); }
.section-dark .pill { border-color: var(--line-dark); color: rgba(255,255,255,.7); }

/* -------------------------------------------------------------- Note band */
.note-band {
  border: 1px solid var(--line); border-left: 3px solid var(--teal);
  background: linear-gradient(100deg, rgba(13,165,165,.05), transparent 55%);
  padding: 22px 26px; border-radius: 0 var(--r-card) var(--r-card) 0;
  font-size: .95rem; line-height: 1.68; color: var(--ink-soft);
}
.note-band strong { color: var(--ink); }
.note-band.accent { border-left-color: var(--peri); background: linear-gradient(100deg, rgba(91,127,212,.06), transparent 55%); }
.note-band.warn { border-left-color: var(--warn); background: linear-gradient(100deg, rgba(183,121,31,.06), transparent 55%); }
.section-dark .note-band { border-color: var(--line-dark); color: rgba(255,255,255,.72); }
.section-dark .note-band strong { color: #fff; }

/* -------------------------------------------------------------------- FAQ */
.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.faq-nav button {
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .12em; padding: 10px 17px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  cursor: pointer; transition: .2s var(--ease);
}
.faq-nav button:hover { border-color: var(--ink); color: var(--ink); }
.faq-nav button.active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

.faq-group { margin-bottom: 46px; }
.faq-group > h2 {
  font-size: .72rem; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .2em; color: var(--peri); margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line); font-weight: 500;
}
details.faq-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
  margin-bottom: 10px; overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
details.faq-item:hover { border-color: var(--mist-200); }
details.faq-item[open] { box-shadow: var(--sh-2); border-color: var(--mist-200); }
details.faq-item summary {
  padding: 20px 56px 20px 24px; font-weight: 600; font-size: 1.01rem; color: var(--ink);
  cursor: pointer; list-style: none; position: relative;
  font-family: 'Sora', sans-serif; letter-spacing: -0.018em; line-height: 1.42;
}
details.faq-item summary::-webkit-details-marker { display: none; }
/* The + / − marker. Both bars must share one centre; previously the vertical
   bar was translated 6px off the horizontal one, so it drew a dash with a
   stray tick beside it rather than a plus. Widths are offset by hand because
   the two bars are different sizes: the 14px bar sits at right:24 (centre
   right:31), so the 2px bar needs right:30 to land on the same centre. */
details.faq-item summary::after,
details.faq-item summary::before {
  content: ''; position: absolute; top: 50%; right: 24px;
  background: var(--peri); border-radius: 2px;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
details.faq-item summary::after  { width: 14px; height: 2px; margin-top: -1px; }
details.faq-item summary::before { width: 2px; height: 14px; margin-top: -7px; margin-right: 6px; }
details.faq-item[open] summary::before { opacity: 0; transform: rotate(90deg); }
.faq-answer { padding: 0 24px 24px; font-size: .96rem; line-height: 1.72; color: var(--ink-soft); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Forms */
.form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: 38px; box-shadow: var(--sh-3);
}
.form-card > h3 { font-size: 1.28rem; margin-bottom: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: span 2; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: span 1; }
  .form-card { padding: 26px 22px; }
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: 'IBM Plex Mono', monospace; font-size: .63rem; text-transform: uppercase;
  letter-spacing: .15em; color: var(--ink-faint); font-weight: 500;
}
.field label .req { color: var(--peri); }
.field input, .field select, .field textarea {
  padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-field);
  font-size: .95rem; font-family: 'Instrument Sans', sans-serif; background: var(--mist-50);
  color: var(--ink); width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.62; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-ghost); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--peri); background: var(--paper);
  box-shadow: 0 0 0 4px rgba(91, 127, 212, .12); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-ghost); }
.field .hint { font-size: .78rem; color: var(--ink-faint); line-height: 1.55; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--crit); background: rgba(208,68,47,.03); }
.field .err { font-size: .78rem; color: var(--crit); font-weight: 500; }

.checkline { display: flex; align-items: flex-start; gap: 11px; font-size: .89rem; color: var(--ink-soft); line-height: 1.58; }
.checkline input[type="checkbox"] { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--peri); flex-shrink: 0; }

.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

.alert {
  padding: 16px 20px; border-radius: var(--r-card); font-size: .93rem; margin-bottom: 24px;
  border: 1px solid; line-height: 1.62;
}
.alert-ok  { background: rgba(14,159,110,.06); border-color: rgba(14,159,110,.3); color: #0A6B4A; }
.alert-err { background: rgba(208,68,47,.05); border-color: rgba(208,68,47,.3); color: #97301F; }
.alert-info{ background: var(--mist-50); border-color: var(--line-strong); color: var(--ink-soft); }
.alert ul { margin: 8px 0 0; padding-left: 20px; list-style: disc; }

.inline-form { display: flex; gap: 10px; }
.inline-form input {
  flex: 1; padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill);
  font-size: .92rem; font-family: 'Instrument Sans', sans-serif;
  background: rgba(255,255,255,.06); color: #fff;
}
.inline-form input::placeholder { color: rgba(255,255,255,.42); }
.inline-form input:focus { outline: none; border-color: var(--sky); background: rgba(255,255,255,.1); }
@media (max-width: 560px) { .inline-form { flex-direction: column; } }

.capture-box {
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-card);
  padding: 24px; margin-top: 34px; background: rgba(255,255,255,.04);
}
.capture-box p { font-size: .875rem; color: rgba(255,255,255,.66); margin-bottom: 14px; }
.capture-box strong { color: #fff; }


/* ----------------------------------------------------------------- Footer */
.site-footer {
  color: rgba(255,255,255,.64); padding: 54px 0 22px; position: relative; overflow: hidden;
  background: linear-gradient(168deg, #142339 0%, var(--navy-900) 55%, #0A1220 100%);
}
.site-footer .wrap { position: relative; z-index: 2; }
/* Five columns, not four. Adding "Legal & Info" pushed Contact onto a second
   row inside a four-column grid, which is what made the footer twice as tall
   as it needed to be. */
.footer-grid {
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 30px 34px;
  padding-bottom: 32px; border-bottom: 1px solid var(--line-dark);
}
.footer-grid h4 {
  color: rgba(255,255,255,.42); font-family: 'IBM Plex Mono', monospace; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .18em; margin-bottom: 14px; font-weight: 500;
}
.footer-grid ul { display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { font-size: .85rem; color: rgba(255,255,255,.68); transition: color .18s var(--ease); }
.footer-grid a:hover { color: #fff; }
.footer-brand .brand { color: #fff; }
.footer-brand .brand .level { color: var(--sky); }
.footer-brand p { color: rgba(255,255,255,.52); max-width: 34ch; margin-top: 14px; font-size: .85rem; line-height: 1.6; }
.footer-addr {
  font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .09em;
  color: rgba(255,255,255,.36); margin-top: 14px; line-height: 1.7;
}
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding-top: 20px; font-size: .68rem; color: rgba(255,255,255,.4);
  font-family: 'IBM Plex Mono', monospace; letter-spacing: .1em;
}
.footer-bottom a:hover { color: var(--sky); }
@media (max-width: 1180px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 880px)  { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }

/* -------------------------------------------------------------- CTA final */
.cta-final { text-align: center; }
.cta-final .hero-actions { justify-content: center; }
.cta-final p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta-final .eyebrow { justify-content: center; }

/* ---------------------------------------------------------- Contact lists */
.contact-list li { padding: 17px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: none; }
.contact-list .k {
  font-family: 'IBM Plex Mono', monospace; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-faint); display: block; margin-bottom: 5px;
}
.contact-list .v { font-size: .98rem; color: var(--ink); transition: color .18s; }
a.v:hover { color: var(--peri); }

/* ------------------------------------------------------- Reveal animation */
/* Scoped to .js so that if scripting is unavailable — or the bundle fails —
   the content is simply visible rather than permanently transparent. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Hero load sequence — same no-JS safeguard as the scroll reveals. */
.js .hero-in > * { opacity: 0; transform: translateY(16px); animation: rise .85s var(--ease-out) forwards; }
.js .hero-in > *:nth-child(1) { animation-delay: .05s; }
.js .hero-in > *:nth-child(2) { animation-delay: .14s; }
.js .hero-in > *:nth-child(3) { animation-delay: .23s; }
.js .hero-in > *:nth-child(4) { animation-delay: .32s; }
.js .hero-in > *:nth-child(5) { animation-delay: .41s; }
/* The photograph is now the ground rather than a plate that rises into place,
   so it fades up instead — movement behind the headline would fight it. */
.js .hero-bg { opacity: 0; animation: fadein 1.1s var(--ease-out) .15s forwards; }
@keyframes rise   { to { opacity: 1; transform: none; } }
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero-in > *, .js .hero-bg { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ Admin */
.admin-body { background: var(--mist-50); }
.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr; } }
.admin-side { background: var(--navy-900); color: rgba(255,255,255,.72); padding: 26px 18px; }
.admin-side .brand { color: #fff; font-size: 1.02rem; margin-bottom: 30px; }
.admin-side .brand .level { color: var(--sky); }
.admin-side nav a {
  display: block; padding: 11px 14px; border-radius: var(--r-field); font-size: .885rem;
  margin-bottom: 3px; color: rgba(255,255,255,.66); transition: .18s var(--ease);
}
.admin-side nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-side nav a.active { background: linear-gradient(135deg, var(--peri), var(--peri-lo)); color: #fff; font-weight: 600; }
.admin-side .side-foot {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  font-size: .68rem; font-family: 'IBM Plex Mono', monospace; color: rgba(255,255,255,.38); line-height: 1.85;
}
.admin-main { padding: 32px 36px 64px; }
@media (max-width: 720px) { .admin-main { padding: 22px 18px 44px; } }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; flex-wrap: wrap; margin-bottom: 28px; }
.admin-head h1 { font-size: 1.65rem; margin: 0 0 4px; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 1040px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; }
.kpi .n {
  font-family: 'Sora', sans-serif; font-size: 1.85rem; font-weight: 700; display: block;
  line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.kpi .l {
  font-family: 'IBM Plex Mono', monospace; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-faint); margin-top: 9px; display: block;
}
.kpi.alert-kpi .n { color: var(--crit); }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-bottom: 24px; }
.panel-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 1rem; }
.panel-body { padding: 22px; }

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th {
  text-align: left; padding: 12px 16px; background: var(--mist-50); border-bottom: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace; font-size: .6rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-faint); white-space: nowrap; font-weight: 500;
}
table.data td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .15s; }
table.data tbody tr:hover td { background: var(--mist-50); }
table.data .nowrap { white-space: nowrap; }

.chip {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .1em; padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--ink-soft); white-space: nowrap;
}
.chip.new       { background: rgba(91,127,212,.1);  border-color: rgba(91,127,212,.35); color: var(--peri-lo); }
.chip.contacted { background: rgba(183,121,31,.1);  border-color: rgba(183,121,31,.35); color: var(--warn); }
.chip.closed    { background: var(--mist-100); }
.chip.bad       { background: rgba(208,68,47,.08);  border-color: rgba(208,68,47,.32); color: var(--crit); }
.chip.ok        { background: rgba(14,159,110,.1);  border-color: rgba(14,159,110,.32); color: var(--good); }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select {
  padding: 9px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-field);
  font-size: .85rem; font-family: 'Instrument Sans', sans-serif; background: var(--paper);
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--peri); box-shadow: 0 0 0 3px rgba(91,127,212,.12); }

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 32px 20px; background: var(--navy-900); position: relative; overflow: hidden;
}
.login-card {
  background: var(--paper); border-radius: var(--r-panel); padding: 40px; width: 100%; max-width: 420px;
  box-shadow: var(--sh-4); position: relative; z-index: 3;
}
.login-card .brand { justify-content: center; display: flex; margin-bottom: 8px; }
.login-card .sub {
  text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--ink-faint); margin-bottom: 30px;
}

.kv { display: grid; grid-template-columns: 200px 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-field); overflow: hidden; }
.kv > div { background: var(--paper); padding: 12px 16px; font-size: .9rem; }
.kv > div.k {
  background: var(--mist-50); font-family: 'IBM Plex Mono', monospace; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .13em; color: var(--ink-faint);
}
@media (max-width: 640px) { .kv { grid-template-columns: 1fr; } }

@media print {
  .site-header, .site-footer, .admin-side, .scroll-rail { display: none !important; }
  body { background: #fff; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================================
   COLOUR PASS — the track palette applied across the light sections so the
   page reads in colour rather than as navy-on-white with tinted icons.
   ======================================================================== */

/* Datasheet cards carry a permanent colour hint, not only one on hover. */
.sheet { border-top: 3px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.sheet .fld { color: color-mix(in srgb, var(--accent) 72%, var(--ink-faint)); }

/* Give the track grid a soft tinted ground so the cards sit in colour. */
.sheet-grid {
  background: color-mix(in srgb, var(--peri) 9%, var(--line));
  border-color: color-mix(in srgb, var(--peri) 16%, var(--line));
}

/* The section that holds the tracks gets its own wash. */
#tracks { background:
  radial-gradient(1100px 420px at 6% -6%, rgba(91,127,212,.12), transparent 60%),
  radial-gradient(900px 380px at 98% 4%,  rgba(13,165,165,.10), transparent 58%),
  var(--paper);
}

/* Stat strips echo the brand gradient. */
.stat .num {
  background: linear-gradient(120deg, var(--ink) 24%, var(--peri-lo) 74%, var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Section headings: the closing clause picks up the accent. */
.section-head h2 .accent-word,
h2 .accent-word {
  background: linear-gradient(100deg, var(--peri), var(--teal) 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Delivery-format cards each take a hue. */
.card-grid > .card:nth-child(1) { --accent: var(--t-cloud); }
.card-grid > .card:nth-child(2) { --accent: var(--t-ai); }
.card-grid > .card:nth-child(3) { --accent: var(--t-data); }
.card-grid > .card:nth-child(4) { --accent: var(--t-uiux); }
.card .ico-plate {
  color: var(--accent);
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--accent) 16%, #fff),
              color-mix(in srgb, var(--accent) 6%, #fff));
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.card-hover:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 18px 42px -16px color-mix(in srgb, var(--accent) 42%, transparent), var(--sh-1);
}

/* Admissions steps: a colour per stage makes the sequence readable at a glance. */
.step-grid > .step:nth-child(1) { --accent: var(--t-cloud); }
.step-grid > .step:nth-child(2) { --accent: var(--t-ai); }
.step-grid > .step:nth-child(3) { --accent: var(--t-python); }
.step-grid > .step:nth-child(4) { --accent: var(--t-data); }
.step { border-top: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.step .idx { color: var(--accent); }
.step .idx::after { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.step:hover {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  border-top-color: var(--accent);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--accent) 45%, transparent), var(--sh-1);
}

/* Quote cards rotate through the family. */
.quote-grid > .quote-card:nth-child(1) { --accent: var(--t-cyber); }
.quote-grid > .quote-card:nth-child(2) { --accent: var(--t-uiux); }
.quote-grid > .quote-card:nth-child(3) { --accent: var(--t-system); }
.quote-card .quote-mark { color: color-mix(in srgb, var(--accent) 42%, transparent); }
.quote-card .avatar { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--peri))); }
.quote-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 20px 46px -18px color-mix(in srgb, var(--accent) 48%, transparent), var(--sh-1);
}

/* Blog cards take their category hue on hover. */
.blog-grid > .blog-card:nth-child(3n+1) { --accent: var(--t-stack); }
.blog-grid > .blog-card:nth-child(3n+2) { --accent: var(--t-uiux); }
.blog-grid > .blog-card:nth-child(3n+3) { --accent: var(--t-cyber); }
.blog-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 22px 48px -18px color-mix(in srgb, var(--accent) 45%, transparent), var(--sh-1);
}
.blog-meta .cat { color: var(--accent); }

/* Nav dropdown icons inherit each track's colour via inline --accent. */
.drop li a .ico { color: var(--accent, var(--peri)); }

/* Checklist ticks alternate through the palette rather than one flat blue. */
.checklist li:nth-child(4n+1)::before { background: var(--t-cloud); }
.checklist li:nth-child(4n+2)::before { background: var(--t-ai); }
.checklist li:nth-child(4n+3)::before { background: var(--t-data); }
.checklist li:nth-child(4n+4)::before { background: var(--t-uiux); }

/* Pills pick up colour instead of reading as grey chips. */
.pill.tech   { border-color: rgba(13,165,165,.4);  color: var(--teal);    background: rgba(13,165,165,.09); }
.pill.accent { border-color: rgba(91,127,212,.4);  color: var(--peri-lo); background: rgba(91,127,212,.09); }
.pill-row > .pill:nth-child(3n+1) { border-color: rgba(15,174,203,.4);  color: #0B8DA4; background: rgba(15,174,203,.09); }
.pill-row > .pill:nth-child(3n+2) { border-color: rgba(124,92,224,.36); color: #6446C4; background: rgba(124,92,224,.09); }
.pill-row > .pill:nth-child(3n+3) { border-color: rgba(18,165,120,.4);  color: #0E8A64; background: rgba(18,165,120,.09); }

/* School panel badge in brand colour. */
.school-card { border-top: 3px solid var(--peri); }
.schools-grid > .school-card:nth-child(2) { border-top-color: var(--teal); }
.schools-grid > .school-card:nth-child(2) .badge {
  background: rgba(13,165,165,.09); color: var(--teal); border-color: rgba(13,165,165,.24);
}
.schools-grid > .school-card:nth-child(2) .badge .ico { color: var(--teal); }

/* FAQ category rules rotate colour. */
.faq-group:nth-child(4n+1) > h2 { color: var(--t-cloud); }
.faq-group:nth-child(4n+2) > h2 { color: var(--t-ai); }
.faq-group:nth-child(4n+3) > h2 { color: var(--t-data); }
.faq-group:nth-child(4n+4) > h2 { color: var(--t-uiux); }

/* Admin sidebar keeps the brand gradient. */
.admin-side { background: linear-gradient(168deg, #15253E, var(--navy-900) 60%, #0A1220); }

/* ===========================================================================
   HERO CAROUSEL
   OpenRouter has no video generation, so the sense of motion comes from a slow
   Ken Burns pan on each still plus a cross-fade between slides. Cheaper than
   video, works on mobile data, and stops dead under prefers-reduced-motion.
   ======================================================================== */
.carousel {
  position: relative; border-radius: var(--r-panel); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--navy-800); box-shadow: var(--sh-4);
  aspect-ratio: 16 / 9;
}

/* ------------------------------------------- Full-bleed hero carousel */
/* Fills the hero and sits behind the copy. Everything here is a layer, in
   order: photograph, scrim, then the controls. */
.carousel.hero-bg {
  position: absolute; inset: 0; z-index: 1;
  aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none; background: var(--navy-900);
  /* The copy, buttons and email field sit on top and must stay clickable, so
     the layer ignores the pointer and only its own controls take it back. */
  pointer-events: none;
}

/* Scrim. Weighted to the left because the copy lives there — the right side
   stays open so the photograph is still legible as a photograph. */
.carousel.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(97deg,
      rgba(7, 13, 24, .95) 0%,
      rgba(7, 13, 24, .88) 30%,
      rgba(7, 13, 24, .58) 55%,
      rgba(7, 13, 24, .30) 78%,
      rgba(7, 13, 24, .42) 100%),
    linear-gradient(to top, rgba(7, 13, 24, .82) 0%, transparent 34%),
    linear-gradient(to bottom, rgba(7, 13, 24, .55) 0%, transparent 22%);
}

/* Slide caption — opposite the copy, bottom right, on the open side of the
   scrim where the photograph is doing the talking. */
.hero-bg .slide-body {
  position: absolute; z-index: 3;
  left: auto; right: var(--hero-inset); bottom: 116px;
  padding: 0; max-width: 30ch; text-align: right;
  align-items: flex-end; pointer-events: none;
}
.hero-bg .slide-link {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: auto; color: #fff;
}
.hero-bg .slide-caption { font-size: 1.12rem; max-width: none; }
.hero-bg .slide-link .arw { transition: transform .25s var(--ease); vertical-align: -2px; }
.hero-bg .slide-link:hover .arw { transform: translateX(4px); }
.hero-bg .slide-link:hover .slide-caption { text-decoration: underline; text-underline-offset: 4px; }

/* Control bar — arrows and progress dots as one cluster on the copy's column,
   so the hero reads as a single left-aligned composition. */
.carousel-bar {
  position: absolute; z-index: 4; bottom: 46px; left: var(--hero-inset);
  display: flex; align-items: center; gap: 14px; pointer-events: none;
}
.carousel-bar > * { pointer-events: auto; }

.hero-bg .carousel-arrow {
  position: static; transform: none; opacity: 1;
  width: 42px; height: 42px;
}
.hero-bg .carousel-arrow:hover { transform: none; background: rgba(255, 255, 255, .16); }
.hero-bg .carousel-dots { position: static; }

@media (max-width: 1000px) {
  .hero-bg .slide-body { display: none; }   /* the copy owns the small screen */
  .carousel-bar { bottom: 34px; }
  .carousel.hero-bg::after {
    background:
      linear-gradient(180deg, rgba(7, 13, 24, .80) 0%, rgba(7, 13, 24, .90) 100%),
      linear-gradient(to top, rgba(7, 13, 24, .9) 0%, transparent 45%);
  }
}
.carousel-viewport { position: absolute; inset: 0; }

.slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden;
  transition: opacity .85s var(--ease), visibility .85s;
}
.slide.is-active { opacity: 1; visibility: visible; }

.slide picture { position: absolute; inset: 0; display: block; }
.slide-media {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
}
/* The pan only runs on the visible slide, so idle slides cost nothing. */
.slide.is-active .slide-media { animation: kenburns 15s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.6%, -1.4%, 0); }
}

/* Scrim: keeps the caption legible over any frame. */
.slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 12, 22, .92) 0%, rgba(6, 12, 22, .35) 38%, transparent 68%),
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 58%);
}

.slide-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 26px 44px; display: flex; flex-direction: column; gap: 7px;
}
.slide-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: #fff;
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 82%, transparent);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 90%, transparent);
}
.slide-caption {
  font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 500;
  line-height: 1.35; letter-spacing: -0.02em; color: #fff; max-width: 26ch;
  text-shadow: 0 2px 14px rgba(6, 12, 22, .6);
}

/* Arrows — hidden until the carousel is hovered or keyboard-focused. */
.carousel-arrow {
  position: absolute; top: 50%; z-index: 4; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(10, 18, 32, .55); color: #fff;
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.carousel:hover .carousel-arrow,
.carousel:focus-within .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { background: rgba(10, 18, 32, .85); }
.carousel-arrow.prev { left: 14px; }
.carousel-arrow.prev .ico { transform: rotate(180deg); }
.carousel-arrow.next { right: 14px; }
.carousel-arrow.prev:hover { transform: translateY(-50%) translateX(-2px); }
.carousel-arrow.next:hover { transform: translateY(-50%) translateX(2px); }

/* Dots double as a progress bar for the autoplay timer. */
.carousel-dots {
  position: absolute; left: 26px; bottom: 14px; z-index: 5;
  display: flex; gap: 7px;
}
.carousel-dots button {
  width: 26px; height: 4px; padding: 0; border: none; cursor: pointer;
  border-radius: 2px; background: rgba(255, 255, 255, .3);
  overflow: hidden; transition: background .25s var(--ease), width .35s var(--ease);
}
.carousel-dots button:hover { background: rgba(255, 255, 255, .55); }
.carousel-dots button.is-active { width: 44px; background: rgba(255, 255, 255, .28); }
.carousel-dots button i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.carousel-dots button.is-active i { animation: dotfill var(--slide-ms, 6000ms) linear forwards; }
@keyframes dotfill { from { width: 0; } to { width: 100%; } }

.carousel.is-paused .slide.is-active .slide-media,
.carousel.is-paused .carousel-dots button.is-active i { animation-play-state: paused; }

@media (max-width: 1000px) { .carousel { aspect-ratio: 16 / 9; } }
@media (max-width: 560px) {
  .carousel { aspect-ratio: 3 / 2; }
  .slide-body { padding: 20px 20px 38px; }
  .slide-caption { font-size: .95rem; }
  .carousel-dots { left: 20px; }
  .carousel-arrow { display: none; }
}

/* Reduced motion: no pan, no cross-fade timing, no auto-advance. */
@media (prefers-reduced-motion: reduce) {
  .slide.is-active .slide-media { animation: none; transform: scale(1.02); }
  .carousel-dots button.is-active i { animation: none; width: 100%; }
  .slide { transition: none; }
}

/* ============================================================== Photography
   The site's photo library is real editorial photography, so the chrome around
   it stays quiet: thin frames, no heavy gradients over faces, and a scrim only
   where type actually sits on top of an image. */

/* <picture> is inline by default, which collapses any layout that expects the
   image to fill its parent. Every photo slot below wants a block that fills. */
.slide picture,
.photo-plate picture,
.card-media picture,
.blog-thumb picture { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------- Lifted plate */
/* Sits between a dark page hero and the light content under it, overlapping
   both so the eye crosses the seam on the photograph rather than on an edge. */
.photo-plate {
  margin: calc(var(--space-section) * -0.42) 0 calc(var(--space-section) * 0.5);
  position: relative; z-index: 5;
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--sh-4);
}
.photo-plate img { width: 100%; height: 100%; object-fit: cover; }

/* A single hairline of track colour, bottom-anchored — the same device the
   program cards use on hover, so the pages feel related. */
.photo-plate::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent, var(--peri));
}

@media (max-width: 720px) {
  .photo-plate { aspect-ratio: 3 / 2; margin-top: calc(var(--space-section) * -0.3); }
}

/* ------------------------------------------------------ Program card media */
.card-media {
  display: block; position: relative; overflow: hidden;
  /* Bleeds to the card edge past the card's own padding. */
  margin: -28px -28px 4px;
  aspect-ratio: 16 / 9;
  background: var(--mist-100);
}
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease-out);
}
.program-card:hover .card-media img { transform: scale(1.045); }

/* Track colour meets the photograph as a hairline at the edge, not as a wash
   over it. A tint across the bottom of a real photo reads as a colour cast and
   undoes the thing the photography was bought for. */
.card-media::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  pointer-events: none; background: var(--accent);
}

/* ---------------------------------------------------------- Blog thumbnail */
/* With a photograph present the category wash would bury the image, so it is
   replaced by a bottom scrim — enough to carry the hover state, not enough to
   tint the picture. */
.blog-thumb.has-photo { padding: 0; display: block; }
.blog-thumb.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.blog-thumb.has-photo::after {
  background: linear-gradient(to top, rgba(10, 18, 32, .34), transparent 52%);
  transform: none;
}
.blog-card:hover .blog-thumb.has-photo::after { transform: none; }
.blog-thumb.has-photo img { transition: transform .6s var(--ease-out); }
.blog-card:hover .blog-thumb.has-photo img { transform: scale(1.05); }

/* The featured post on the index runs full-height beside its copy. */
.blog-thumb.has-photo[style*="height:100%"] { height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .card-media img,
  .blog-thumb.has-photo img { transition: none; }
  .program-card:hover .card-media img,
  .blog-card:hover .blog-thumb.has-photo img { transform: none; }
}

/* ------------------------------------------------------------ Form fields */
/* Native select chrome draws its arrow *over* the text box, which was clipping
   longer option labels ("Select your backgroun…"). Replace it with our own
   chevron and reserve the room for it. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238494AC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.field select::-ms-expand { display: none; }

/* Controls in a row must start level even when one label wraps to two lines.
   Forcing labels onto one line "fixed" that by overflowing the card instead —
   worse, and it broke at every narrow width. Reserving two lines of label
   height everywhere costs a few pixels and cannot overflow: short labels sit on
   a common baseline, long ones wrap into the space already allowed for them. */
.field label {
  min-height: 2.1em;
  display: flex;
  align-items: flex-end;
  line-height: 1.35;
  /* A flex container drops the whitespace between the label text and the
     required asterisk, which renders "FULL NAME*". Restore it explicitly. */
  gap: .34em;
}
/* Stacked single column — nothing to align against, so reclaim the space. */
@media (max-width: 720px) {
  .field label { min-height: 0; }
}

/* ------------------------------------------------- Photographic dark band */
/* A full-bleed photograph behind a dark section. The image is a real <img>
   rather than a CSS background so it gets the WebP source, the lazy load and
   the cache-busted URL that background-image cannot carry. */
.section-photo { position: relative; isolation: isolate; overflow: hidden; }
.section-photo > picture {
  position: absolute; inset: 0; z-index: 0; display: block;
}
.section-photo-media { width: 100%; height: 100%; object-fit: cover; }

/* Two-part scrim: a flat floor so body copy always clears contrast, plus a
   vertical grade that keeps the section's edges welded to the bands above and
   below it instead of ending on a hard seam. */
.section-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--navy-900) 0%,
      color-mix(in srgb, var(--navy-900) 52%, transparent) 24%,
      color-mix(in srgb, var(--navy-900) 52%, transparent) 76%,
      var(--navy-900) 100%),
    color-mix(in srgb, var(--navy-900) 40%, transparent);
}
.section-photo > .wrap { position: relative; z-index: 2; }

/* The mark stands in for the old level-bar glyph above the manifesto line. */
.brand-mark {
  height: 74px; width: auto; margin: 0 auto 30px;
  display: block;
}
@media (max-width: 640px) { .brand-mark { height: 58px; margin-bottom: 24px; } }

/* ------------------------------------------------------------- Turnstile */
/* The widget is an iframe Cloudflare sizes itself; the wrapper just gives it
   the same rhythm as a form field and stops it stretching oddly in a flex row. */
.turnstile-field { width: 100%; min-height: 65px; }
.turnstile-field .cf-turnstile { display: block; }
/* In the hero capture box the form is a flex row — force the widget onto its
   own line so it never competes with the email field for width. */
.inline-form { flex-wrap: wrap; }
.inline-form .turnstile-field { flex: 1 0 100%; margin-top: 4px; }

/* ============================================================================
   EDITORIAL LAYER
   ----------------------------------------------------------------------------
   Components adapted from three reference landing pages. Each is rebuilt on our
   own tokens rather than lifted, so it inherits the track colours, the spacing
   spine and the dark/light grounds already in use.
   ========================================================================== */

/* ------------------------------------------------- 1. Serif accent in heads */
/* The strongest single cue that a headline was typeset rather than generated:
   one italic serif word inside a sans line. Used on the operative noun only —
   two per page at most, or it stops being an accent. */
.hl {
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  /* A serif italic sits optically smaller than the grotesque around it, and
     its tighter tracking needs the letter-spacing handed back. */
  font-size: 1.07em;
  letter-spacing: 0;
  padding-right: .04em;
}
.hero h1 .hl, .page-hero h1 .hl { color: #fff; }

/* --------------------------------------------------- 2. Floating pill nav */
/* Detached bar that reads as an object on the page rather than a browser
   chrome edge. Desktop only — the mobile panel anchors to the header box and
   must keep a full-width bar to measure against. */
@media (min-width: 941px) {
  .site-header {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 0; box-shadow: none; padding-top: 14px;
    transition: padding-top .3s var(--ease);
  }
  .site-header .nav {
    /* Sits over a dark photograph rather than the references' pale sky, so it
       needs near-full opacity to read as a white object instead of grey haze. */
    background: rgba(255, 255, 255, .95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(14, 23, 37, .07);
    border-radius: var(--r-pill);
    padding: 0 12px 0 22px;
    box-shadow: 0 10px 34px -14px rgba(10, 18, 32, .30), 0 2px 6px -2px rgba(10, 18, 32, .08);
    height: 66px;
  }
  .site-header.is-stuck { padding-top: 8px; box-shadow: none; }
  .site-header.is-stuck .nav {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 38px -14px rgba(10, 18, 32, .34);
    height: 62px;
  }
  /* The pill has its own inset, so the wrap must not add a second one. */
  .site-header .wrap { padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
}

/* ------------------------------------------------------ 3. Pill eyebrow */
/* Hero badges become capsules; section eyebrows keep the hairline rule, so the
   two levels of the page stay distinguishable. */
.hero .eyebrow, .page-hero .eyebrow {
  padding: 7px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; margin-bottom: 22px;
}
.hero .eyebrow::before, .page-hero .eyebrow::before {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal-hi);
  box-shadow: 0 0 12px 1px var(--teal-hi);
}

/* -------------------------------------------- 4. Corner arrow on card media */
/* Signals "this whole card is a link" without a text CTA competing with the
   title. Drawn as a background so no page needs new markup. */
.card-media::before,
.blog-thumb.has-photo::before {
  content: ''; position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230E1725' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  box-shadow: 0 4px 14px -4px rgba(10, 18, 32, .4);
  /* Visible at rest, not on hover only: on touch there is no hover, and the
     badge is what tells you the card is a link before you try. */
  opacity: .88; transform: scale(.94);
  transition: opacity .28s var(--ease), transform .28s var(--ease-out);
}
.program-card:hover .card-media::before,
.blog-card:hover .blog-thumb.has-photo::before { opacity: 1; transform: scale(1.06); }

/* ------------------------------------------------- 5. Two-tone stat figures */
/* The suffix carries the accent so the numeral itself stays plain and legible —
   a gradient across the whole figure was costing it weight. */
.readout .n {
  background: none; -webkit-text-fill-color: currentColor; color: #fff;
}
.readout .n .sfx { color: var(--teal-hi); }
.stat .num .sfx { color: var(--peri); }

/* -------------------------------------------------- 6. Rounded section slabs */
/* Tinted sections become inset slabs instead of full-bleed bands, which stops
   the page reading as a stack of stripes. */
.section-alt, .section-wash, .section-wash-warm {
  border-radius: clamp(18px, 2.6vw, 32px);
  margin-inline: clamp(10px, 1.8vw, 26px);
  overflow: hidden;
}
.section-dark.grain { border-radius: clamp(18px, 2.6vw, 32px); margin-inline: clamp(10px, 1.8vw, 26px); }

/* --------------------------------------------------------- 7. Calmer ground */
/* Five saturated blurred blobs at near-full opacity is the single most
   recognisable "generated" texture on the web. Kept as an atmosphere, dropped
   to something a photographer's gel would produce. */
.aurora { opacity: .30; filter: blur(90px); }
.section-dark .aurora { opacity: .22; }
.page-hero .aurora { opacity: .26; }

/* ------------------------------------------------ 8. Centred page heroes */
/* Left-aligned copy left the right half of every inner hero empty. All three
   references centre this block, and it also lets the headline run wider before
   it wraps. The home hero stays left-aligned — it has a photograph to balance
   against, these do not. */
.page-hero { padding: clamp(104px, 11vw, 148px) 0 clamp(96px, 10vw, 132px); }
.page-hero .wrap { text-align: center; }
.page-hero h1 { max-width: 22ch; margin-inline: auto; }
.page-hero p  { margin-inline: auto; }
.page-hero .breadcrumb,
.page-hero .eyebrow,
.page-hero .hero-actions { justify-content: center; }
.page-hero .breadcrumb { display: flex; flex-wrap: wrap; }

/* A page hero followed by a lifted photo needs less bottom room — the plate
   already occupies it. */
.page-hero:has(+ .wrap > .photo-plate) { padding-bottom: clamp(120px, 12vw, 168px); }

/* ------------------------------------------- 9. Bar overlays the hero art */
/* Previously the bar sat in flow, so the page opened on a white strip above
   the photograph. Fixed positioning lets the carousel run to the very top of
   the viewport with the bar floating on it; each hero reserves --nav-h at the
   top so its copy still clears the bar. Every page begins with .hero or
   .page-hero, so nothing else can slide underneath. */
.site-header { position: fixed; top: 0; left: 0; right: 0; }

.hero { padding-top: var(--nav-h); }
.hero-in { padding-top: clamp(64px, 8vh, 104px); }

.page-hero { padding-top: calc(clamp(104px, 11vw, 148px) + var(--nav-h)); }

/* The not-found fallbacks are bare sections with their own padding; top them up
   so their headline never lands under the bar. */
main > section.wrap:first-child { padding-top: calc(100px + var(--nav-h)) !important; }

@media (min-width: 941px) {
  /* 14px stand-off + 66px pill. */
  :root { --nav-h: 92px; }
}

/* ---------------------------------------------- 10. Larger reading sizes */
/* Body moved 16 -> 17px. The mono micro-labels were set relative to nothing and
   had drifted to 0.6rem, which is below comfortable reading at any distance. */
.eyebrow            { font-size: .74rem; }
.blog-meta          { font-size: .68rem; }
.program-card .kicker,
.program-card .meta { font-size: .66rem; }
.readout .l         { font-size: .70rem; }
.stat .label        { font-size: .70rem; }
.field label        { font-size: .70rem; }
.slide-eyebrow      { font-size: .70rem; }
.drop li a .sub     { font-size: .67rem; }
.hint, .form-note   { font-size: .84rem; }
.terminal pre       { font-size: .92rem; line-height: 1.7; }
.footer-col a, .footer-col p { font-size: .95rem; }

/* ---------------------------------------------- 11. Photography components */
/* A framed photo with a caption under it, for use inside a column. */
.media-card {
  margin: 0; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
}
.media-card picture { display: block; }
.media-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.media-card figcaption {
  padding: 13px 16px 15px; font-size: .84rem; line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}
/* On a light ground the frame flips: hairline border, paper fill, ink caption. */
.media-card.on-light {
  border-color: var(--line); background: var(--paper); box-shadow: var(--sh-2);
}
.media-card.on-light figcaption { color: var(--ink-soft); }

/* Contact-sheet band: three frames of the real thing, evenly weighted. */
.photo-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: clamp(38px, 4.5vw, 62px);
}
.photo-strip figure {
  margin: 0; border-radius: var(--r-card); overflow: hidden; position: relative;
  border: 1px solid rgba(255, 255, 255, .12);
}
.photo-strip picture { display: block; }
.photo-strip img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.photo-strip figure:hover img { transform: scale(1.045); }
.photo-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 15px 14px;
  font-size: .82rem; line-height: 1.45; color: #fff;
  background: linear-gradient(to top, rgba(7, 13, 24, .88), transparent);
}
@media (max-width: 860px) { .photo-strip { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .photo-strip img { transition: none; }
  .photo-strip figure:hover img { transform: none; }
}

/* A photograph seated at the top of a .card, bleeding past the card's padding.
   photo() emits <picture> as the card's first child, so no :has() is needed. */
.card > picture:first-child {
  display: block; margin: -30px -30px 20px; overflow: hidden;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.card > picture:first-child .card-top {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  transition: transform .6s var(--ease-out);
}
.card-hover:hover > picture:first-child .card-top { transform: scale(1.04); }
@media (max-width: 720px) { .card > picture:first-child { margin: -26px -26px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .card > picture:first-child .card-top { transition: none; }
  .card-hover:hover > picture:first-child .card-top { transform: none; }
}

/* ------------------------------------------------- 12. Testimonial marquee */
/* Eight quotes will not sit in three columns. A slow drift keeps the row going
   without giving it half the page. main.js clones .marquee-track, so the loop
   is seamless and the duplicate is aria-hidden by virtue of being decorative. */
.quote-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.quote-track { gap: 20px; animation-duration: 90s; align-items: stretch; }
.quote-marquee:hover .quote-track,
.quote-marquee:focus-within .quote-track { animation-play-state: paused; }

.quote-track .quote-card {
  width: 360px; flex: 0 0 360px; margin: 4px 0 10px;
  padding: 0 0 26px; gap: 0; overflow: hidden;
}
.quote-media { display: block; margin-bottom: 22px; }
.quote-media picture { display: block; }
.quote-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.quote-track blockquote {
  margin: 0; padding: 0 26px; color: var(--ink);
  font-size: 1.02rem; line-height: 1.62;
}
.quote-track blockquote::before { content: '\201C'; }
.quote-track blockquote::after  { content: '\201D'; }
.quote-track figcaption {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 26px 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
@media (prefers-reduced-motion: reduce) { .quote-track { animation: none; } }
@media (max-width: 560px) { .quote-track .quote-card { width: 290px; flex-basis: 290px; } }

/* Small qualifier under a readout figure, for attributing a number. */
.readout .note {
  display: block; margin-top: 6px; font-size: .64rem; line-height: 1.5;
  font-family: 'IBM Plex Mono', monospace; letter-spacing: .06em;
  color: rgba(255, 255, 255, .34);
}
/* Six figures rather than four — wrap instead of crushing them. */
.readout { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ----------------------------------------------------------- 13. Policies */
.legal-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: start; }
@media (max-width: 940px) { .legal-wrap { grid-template-columns: 1fr; } }

.legal-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 940px) { .legal-toc { position: static; } }
.legal-meta {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; line-height: 1.9;
  color: var(--ink-faint); padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.legal-meta span { color: var(--ink-ghost); text-transform: uppercase; letter-spacing: .12em; }
.legal-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: block; padding: 7px 10px; border-radius: var(--r-field);
  font-size: .88rem; line-height: 1.4; color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.legal-toc a::before { content: counter(toc, decimal-leading-zero) '  '; color: var(--ink-ghost); font-family: 'IBM Plex Mono', monospace; font-size: .76rem; }
.legal-toc a:hover { background: var(--mist-50); color: var(--ink); }

.legal > section { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.legal > section:last-child { border-bottom: 0; }
.legal h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 1.32rem; letter-spacing: -0.022em; margin-bottom: .7em; scroll-margin-top: calc(var(--nav-h) + 20px);
}
.legal-num { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--peri); font-weight: 500; }
.legal p { max-width: 74ch; }
.legal a { color: var(--peri-lo); text-decoration: underline; text-underline-offset: 3px; }

.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: .95rem; }
.legal-table th, .legal-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal-table thead th {
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom-color: var(--line-strong);
}
.legal-table tbody tr:last-child td { border-bottom: 0; }

.legal-contact-list { display: grid; gap: 10px; margin-top: 14px; }
.legal-contact-list li { display: flex; gap: 14px; flex-wrap: wrap; font-size: .95rem; color: var(--ink-soft); }
.legal-contact-list span {
  min-width: 92px; font-family: 'IBM Plex Mono', monospace; font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px;
}

/* ------------------------------------- 14. Transparent bar over hero art */
/* The bar carries no background while it sits on the hero photograph, and
   becomes the white pill only once the page scrolls. Everything inside it has
   to swap with it — a navy wordmark and ink links are invisible on a dark
   photo, and equally the light ones would vanish on the white pill. */
.logo-onart { display: none; }

@media (min-width: 941px) {
  .js .site-header:not(.is-stuck) .nav {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
  }
  .js .site-header:not(.is-stuck) .logo-ink   { display: none; }
  .js .site-header:not(.is-stuck) .logo-onart { display: block; }

  .js .site-header:not(.is-stuck) .nav-links > li > a { color: rgba(255, 255, 255, .82); }
  .js .site-header:not(.is-stuck) .nav-links > li > a:hover,
  .js .site-header:not(.is-stuck) .nav-links > li > a.active { color: #fff; background: transparent; }
  .js .site-header:not(.is-stuck) .nav-links > li > a.active::after { background: #fff; }

  /* The dark CTA pill disappears into the photograph, so it inverts to a
     glass capsule and only becomes solid navy on the white bar. */
  .js .site-header:not(.is-stuck) .nav-cta {
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .34);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .js .site-header:not(.is-stuck) .nav-cta:hover {
    background: #fff !important; color: var(--navy-900) !important; border-color: #fff;
  }

  /* Dropdown panels keep their own light surface regardless of the bar. */
  .js .site-header:not(.is-stuck) .drop li a { color: var(--ink-soft); }

  /* A little more standoff now that there is no pill edge to define it. */
  .site-header { padding-top: 20px; }
  .js .site-header:not(.is-stuck) .nav { height: 72px; }
}

/* -------------------------------------------------- 15. Breathing room */
/* The card grids were all sharing one 22px gutter regardless of how much text
   the cards carried. The honesty/value cards run long, so they get a wider
   one, and the cards themselves get more internal room. */
.honesty-grid { gap: clamp(20px, 2.4vw, 34px); }
.values-grid  { gap: clamp(20px, 2.4vw, 32px); }
.card-grid    { gap: clamp(20px, 2.2vw, 30px); }
.honesty-card { padding: clamp(26px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.honesty-card .ico-plate { margin-bottom: 4px; }
.honesty-card h3 { margin: 0; }
.honesty-card p  { margin: 0; }

/* Centred closing statement — the last thing on a page should not feel wedged
   against its own edges. */
.closing-statement { padding: clamp(10px, 2vw, 26px) 0; }
.closing-statement h2 { max-width: 24ch; margin-inline: auto; }
.closing-statement p  { max-width: 58ch; margin-inline: auto; margin-bottom: 32px; }

/* The creed lines are the whole point of the manifesto page; give them room. */
.creed li { padding: clamp(26px, 2.6vw, 38px) 0; }

/* Sub-headings inside a policy section (e.g. the two ways to raise a refund). */
.legal h3 {
  font-size: 1.02rem; letter-spacing: -0.015em;
  margin: 1.5em 0 .5em; color: var(--ink);
}
.legal h3:first-child { margin-top: 0; }
.legal .note-band { margin-block: 20px; }