/* ==========================================================================
   Artificial Intelligence Engineer Program
   Public site design system.

   Palette is sampled from the supplied logo: the orange-red of the mark (#EC3705)
   warming through its inner arm to amber (#FF8C08), against the deep navy of the
   wordmark (#090A4E).

   Navy carries the page. Orange is reserved for things you can act on — the
   primary CTA, the active state, the accent rule under a heading — so it stays
   meaningful instead of decorative. Sections alternate between a light ground
   and a navy ground to give a long page rhythm without extra ornament.

   Deliberately single-theme. This is a brand surface, and a dark-mode inversion
   of a page built around one brand colour reads as a different company. The
   admin panel, where people spend hours, is theme-aware instead.
   ========================================================================== */

:root {
  /* Brand — sampled from the supplied logo, not eyeballed.
     #EC3705 is the mark; #090A4E is the wordmark; the mark's inner arm runs
     #F25108 -> #FF8C08, which is where the two accent stops come from. */
  --o-600: #c62d03;
  --o-500: #ec3705;
  --o-400: #f96f08;
  --o-300: #ff8c08;
  --o-100: #ffdfcb;
  --o-050: #fff4ec;

  --n-900: #04051f;
  --n-800: #06072f;
  --n-700: #090a4e;
  --n-600: #14166b;
  --n-500: #22258a;
  --n-300: #7d7fbe;
  --n-200: #b8b9dc;

  /* Neutrals */
  /* The emphatic text colour. Distinct from --n-700, which fills the dark bands: on a
     light page they are the same navy, but a dark theme has to lighten one and darken
     the other. */
  --ink-strong: #090a4e;
  --ink: #12123a;
  --ink-2: #4a4a72;
  --ink-3: #6f6f95;
  --line: #e4e4f0;
  --line-2: #eeeef7;
  --bg: #ffffff;
  --bg-2: #f7f7fc;
  --bg-3: #f1f1f9;

  --white: #ffffff;
  /* Card and panel fill. Separate from --bg so a theme can darken panels without
     touching the page behind them. */
  --surface: #ffffff;
  /* The sticky header, translucent over whatever scrolls beneath it. Its own token
     because it is the one surface that cannot be a flat colour. */
  --header-bg: rgba(255, 255, 255, .9);
  /* Label colour on a filled accent (buttons, chips). A custom theme with a pale
     primary needs a dark label here, so it cannot be hard-coded white. */
  --on-accent: #ffffff;
  --on-dark: #ffffff;
  --on-dark-2: #b9bce4;
  --on-dark-3: #8f92c4;

  --ok: #12805c;
  --warn: #b26b00;
  --err: #c62f34;

  --ok-bg: #e6f6ef;   --ok-ink: #0c5c42;   --ok-line: #b9e5d2;
  --warn-bg: #fff3e0; --warn-ink: #8a5300; --warn-line: #f7ddb4;
  --err-bg: #fdecec;  --err-ink: #94232a;  --err-line: #f6c9cb;
  --info-bg: #e8ecff; --info-ink: #2a3aa8; --info-line: #ccd5ff;

  /* Type */
  --f-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  /* Space & shape */
  --wrap: 1200px;
  --wrap-narrow: 860px;
  --gut: 24px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --sh-sm: 0 1px 2px rgba(9, 10, 78, .06), 0 2px 8px rgba(9, 10, 78, .05);
  --sh-md: 0 4px 12px rgba(9, 10, 78, .07), 0 14px 34px rgba(9, 10, 78, .07);
  --sh-lg: 0 8px 20px rgba(9, 10, 78, .09), 0 28px 64px rgba(9, 10, 78, .11);
  --sh-orange: 0 8px 24px rgba(236, 55, 5, .28);

  --header-h: 74px;
  --topbar-h: 40px;
}

/* --------------------------------------------------------------- reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.14; margin: 0; letter-spacing: -.028em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--o-400);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--n-700); color: var(--on-accent); padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------- layout */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gut); }

section { scroll-margin-top: calc(var(--header-h) + 12px); }

.band { padding: clamp(56px, 7vw, 96px) 0; }
.band-tight { padding: clamp(40px, 5vw, 68px) 0; }
.band-alt { background: var(--bg-2); }

.band-dark {
  background:
    radial-gradient(1000px 460px at 12% -10%, rgba(236, 55, 5, .22), transparent 60%),
    radial-gradient(900px 420px at 88% 110%, rgba(80, 66, 220, .28), transparent 62%),
    linear-gradient(170deg, var(--n-800) 0%, var(--n-700) 62%, var(--n-600) 100%);
  color: var(--on-dark);
}
.band-dark h2, .band-dark h3 { color: var(--on-accent); }
.band-dark p { color: var(--on-dark-2); }

/* ----------------------------------------------------------- section head */

/* A section head holds two things that want different widths, and capping the
   container served only one of them. 700px is a reading measure — right for the
   lede paragraph at 17px, and far too narrow for a 40px display line, which it
   forced into two lines with 500px of the column left empty on either side.

   So the container is uncapped and each part carries its own limit: the heading
   in em, so it scales with its own type and lands near 1080px at full size, and
   the lede in px, because a paragraph's comfortable measure does not grow just
   because the heading did.

   780px is about 77 characters a line at this size, the widest a paragraph can
   comfortably run before the eye starts losing its place on the return sweep. It
   is deliberately not matched to the heading: a heading is scanned in one glance
   and a paragraph is read line by line, so the same width does not suit both. */
.shead { margin-bottom: clamp(28px, 4vw, 44px); }
.shead > h1, .shead > h2, .shead > .h2 { max-width: 26em; text-wrap: balance; }
.shead > .lede { max-width: 780px; }
.shead.center { text-align: center; }
.shead.center > h1, .shead.center > h2, .shead.center > .h2, .shead.center > .lede { margin-inline: auto; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--o-600);
  margin-bottom: 14px;
}
.kicker::before {
  content: ''; width: 22px; height: 2px; background: var(--o-500); border-radius: 2px;
}
.band-dark .kicker { color: var(--o-300); }
.band-dark .kicker::before { background: var(--o-300); }
.shead.center .kicker { justify-content: center; }

h2, .h2 { font-size: clamp(1.72rem, 3.4vw, 2.6rem); font-weight: 800; }

/* Balanced wrapping on every display heading. Where a heading does fit on one
   line this does nothing; where it does not, it splits the lines evenly instead
   of leaving a single orphaned word underneath — which was happening in the
   closing call to action, the case study hero and several section heads. */
h1, h2, .h1, .h2 { text-wrap: balance; }
h3, .h3 { font-size: clamp(1.12rem, 1.9vw, 1.32rem); font-weight: 700; letter-spacing: -.02em; }

.lede { margin-top: 16px; font-size: clamp(1rem, 1.5vw, 1.11rem); color: var(--ink-2); }
.band-dark .lede { color: var(--on-dark-2); }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--f-display); font-size: 15.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--o-500) 0%, var(--o-400) 55%, var(--o-300) 100%);
  color: var(--on-accent); box-shadow: var(--sh-orange);
}
.btn-primary:hover { box-shadow: 0 12px 30px rgba(236, 55, 5, .38); }

.btn-navy { background: var(--n-700); color: var(--on-accent); box-shadow: 0 8px 22px rgba(9, 10, 78, .26); }
.btn-navy:hover { background: var(--n-600); }

.btn-outline { border-color: var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.btn-outline:hover { border-color: var(--ink-strong); color: var(--ink-strong); }

.btn-ghost-light { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); color: var(--on-accent); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }

.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 17px 34px; font-size: 16.5px; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------------- top bar */

.topbar {
  background: var(--n-900); color: var(--on-dark-2);
  font-size: 13.5px; height: var(--topbar-h);
  display: flex; align-items: center;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-note strong { color: var(--o-300); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-contact { display: flex; align-items: center; gap: 16px; }
.topbar-contact a {
  display: inline-flex; align-items: center; gap: 7px; color: var(--on-dark-2);
  transition: color .15s ease;
}
.topbar-contact a:hover { color: var(--on-accent); }
.topbar-contact svg { width: 15px; height: 15px; flex: none; opacity: .85; }

.social-row { display: flex; align-items: center; gap: 6px; }
.social-row a {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: var(--on-dark-2);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.social-row a:hover { background: var(--o-500); color: var(--on-accent); transform: translateY(-1px); }
.social-row svg { width: 14px; height: 14px; }

@media (max-width: 900px) { .topbar { display: none; } }

/* --------------------------------------------------------------- header */

.header {
  position: sticky; top: 0; z-index: 90;
  height: var(--header-h);
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.header.is-stuck { box-shadow: var(--sh-sm); border-color: var(--line); }
.header .wrap { display: flex; align-items: center; gap: 18px; height: 100%; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand img, .brand svg { height: 42px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-family: var(--f-display); font-size: 16px; font-weight: 800; color: var(--ink-strong); letter-spacing: -.02em; }
.brand-text span { font-size: 11px; font-weight: 600; color: var(--o-600); letter-spacing: .06em; text-transform: uppercase; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 13px; border-radius: 999px; font-size: 14.6px; font-weight: 600;
  color: var(--ink-2); transition: color .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink-strong); background: var(--bg-3); }
.nav a.is-active { color: var(--o-600); background: var(--o-050); }

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center; flex: none;
}
.burger span {
  display: block; width: 19px; height: 2px; background: var(--n-700); border-radius: 2px;
  position: relative; transition: background-color .18s ease;
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 19px; height: 2px;
  background: var(--n-700); border-radius: 2px; transition: transform .2s ease, top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: inline-flex; margin-left: auto; }
  .header-cta .btn { display: none; }
  .header-cta .btn.keep { display: inline-flex; }
}

/* On a phone the header ran to 411px of content in a 375px viewport and pushed
   the menu button off the right edge: brand, the kept Apply button, the burger,
   two 18px gaps and 48px of padding do not fit.

   The Apply button is the one to drop. It is not lost — the fixed bar at the
   bottom of the screen carries Apply, and so does the drawer this button sits
   next to — whereas the menu and the brand have nowhere else to go. */
@media (max-width: 560px) {
  .header .wrap { gap: 12px; padding-inline: 16px; }
  .header-cta { display: none; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 120; visibility: hidden;
  /* The closed panel parks at translateX(100%), off the right edge. The
     overflow-x rule on body already stops that widening the page; clipping it
     here as well means the drawer stays self-contained if that rule ever
     changes. */
  overflow: hidden;
}
.drawer[data-open="true"] { visibility: visible; }
.drawer-scrim {
  position: absolute; inset: 0; background: rgba(4, 5, 31, .55);
  opacity: 0; transition: opacity .22s ease;
}
.drawer[data-open="true"] .drawer-scrim { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: var(--surface); box-shadow: -18px 0 44px rgba(4, 5, 31, .22);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer[data-open="true"] .drawer-panel { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line-2);
}
.drawer-close {
  width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--ink-2);
}
.drawer nav { padding: 10px 12px; display: flex; flex-direction: column; }
.drawer nav a {
  padding: 13px 14px; border-radius: var(--r-sm); font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.drawer nav a:last-child { border-bottom: 0; }
.drawer nav a:hover { background: var(--bg-2); color: var(--o-600); }
.drawer-foot { margin-top: auto; padding: 18px; border-top: 1px solid var(--line-2); display: grid; gap: 10px; }

/* ----------------------------------------------------------- breadcrumb */

.crumbs { padding: 14px 0; border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; font-size: 13.5px; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.crumbs li::after { content: '/'; color: var(--n-200); }
.crumbs li:last-child::after { display: none; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--o-600); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; overflow: hidden; color: var(--on-accent);
  background:
    radial-gradient(1100px 520px at 8% -6%, rgba(236, 55, 5, .30), transparent 58%),
    radial-gradient(860px 460px at 92% 8%, rgba(88, 72, 235, .34), transparent 60%),
    linear-gradient(165deg, var(--n-900) 0%, var(--n-700) 58%, var(--n-600) 100%);
  padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 7vw, 92px);
}

/* A faint engineering grid — enough to suggest a technical product, quiet
   enough that it never competes with the headline. */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}

.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.badge-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; font-size: 12.8px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07);
  color: var(--on-accent);
}
.badge-live { border-color: rgba(255, 140, 8, .45); background: rgba(255, 140, 8, .14); }
.dot-pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--o-300); flex: none;
  box-shadow: 0 0 0 0 rgba(255, 140, 8, .7);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 10px rgba(255, 140, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 140, 8, 0); }
}

.hero h1 {
  font-size: clamp(2.15rem, 5.1vw, 3.65rem); font-weight: 800; letter-spacing: -.035em;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--o-400) 0%, var(--o-300) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lede { margin-top: 20px; font-size: clamp(1.02rem, 1.7vw, 1.17rem); color: rgba(255,255,255,.82); max-width: 60ch; }

.hero-points { margin-top: 24px; display: grid; gap: 11px; list-style: none; }
.hero-points li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,255,255,.9); font-size: 15.4px; }
.tick {
  flex: none; width: 21px; height: 21px; border-radius: 50%; margin-top: 2px;
  background: rgba(255, 140, 8, .18); border: 1px solid rgba(255, 140, 8, .5);
  display: grid; place-items: center;
}
.tick svg { width: 11px; height: 11px; stroke: var(--o-300); }

.hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { margin-top: 18px; font-size: 13.4px; color: rgba(255,255,255,.6); }

/* Four equal grid columns of 142px meant "10 modules" (148px) and "Deployed, not
   simulated" (146px) both wrapped, while the row as a whole only needed 585px of
   the 630px available. Flex instead: each figure takes the width it needs, and a
   single gap value keeps the spacing between them even. */
.hero-stats {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 18px 28px;
}
.hero-stats > div { flex: 0 0 auto; }
.hero-stats div b, .hero-stats div span { white-space: nowrap; }
.hero-stats div b {
  display: block; font-family: var(--f-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800; color: var(--on-accent); letter-spacing: -.03em;
}
.hero-stats div span { font-size: 12.8px; color: rgba(255,255,255,.62); }

/* hero form card */
.hero-card {
  background: var(--surface); color: var(--ink); border-radius: var(--r-xl);
  padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--sh-lg);
  position: relative;
}
.hero-card h2 { font-size: 1.3rem; font-weight: 800; }
.hero-card .card-sub { margin-top: 7px; font-size: 14.2px; color: var(--ink-3); }
.hero-card .form-note { margin-top: 14px; font-size: 12.4px; color: var(--ink-3); text-align: center; }
.hero-card .form-note a { color: var(--ink-strong); text-decoration: underline; }

/* ------------------------------------------------------------- trust bar */

.trustbar { border-block: 1px solid var(--line-2); background: var(--surface); padding: 22px 0; }

/* The four claims need 1167px and the standard 1200px wrap leaves 1152, so the
   last one dropped to a line of its own. This is a full-bleed band of short
   items rather than a column of prose, so it is given a little more room and a
   slightly tighter gap; below that width they still wrap, which is right. */
.trustbar .wrap { max-width: 1260px; }
.trustbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.trustbar span {
  font-size: 13.6px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 9px;
  /* An item wraps as a whole or not at all — half a claim on the next line reads worse
     than a second row of claims. */
  white-space: nowrap;
}
.trustbar svg { width: 17px; height: 17px; stroke: var(--o-500); flex: none; }

/* ---------------------------------------------------------------- cards */

.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--o-100); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--ink-2); font-size: 15.2px; }

.card-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--o-050), var(--o-100)); margin-bottom: 16px;
}
.card-icon svg { width: 22px; height: 22px; stroke: var(--o-600); fill: none; stroke-width: 1.8; }

.band-dark .card {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13);
}
.band-dark .card:hover { border-color: rgba(251,165,28,.4); background: rgba(255,255,255,.08); }
.band-dark .card p { color: var(--on-dark-2); }
.band-dark .card-icon { background: rgba(251,165,28,.14); }
.band-dark .card-icon svg { stroke: var(--o-300); }

.num {
  font-family: var(--f-display); font-size: 12px; font-weight: 800;
  letter-spacing: .12em; color: var(--o-600);
}
.band-dark .num { color: var(--o-300); }

/* stat cards */
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 22px; text-align: left;
}
.stat b {
  display: block; font-family: var(--f-display); font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  font-weight: 800; color: var(--ink-strong); letter-spacing: -.035em; line-height: 1.05;
}
.stat span { display: block; margin-top: 8px; font-size: 14.4px; color: var(--ink-2); }
.stat small { display: block; margin-top: 10px; font-size: 12.2px; color: var(--ink-3); }
.band-dark .stat { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13); }
.band-dark .stat b { color: var(--o-300); }
.band-dark .stat span { color: rgba(255,255,255,.86); }
.band-dark .stat small { color: var(--on-dark-3); }

/* ----------------------------------------------------------- curriculum */

.track-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-3); border-radius: 999px; margin-bottom: 26px; flex-wrap: wrap; }
.track-tabs button {
  border: 0; background: transparent; cursor: pointer; padding: 9px 18px; border-radius: 999px;
  /* 44px is the tap target these need on a phone; the padding alone left them at 37. */
  min-height: 44px;
  font-family: var(--f-display); font-size: 14.2px; font-weight: 700; color: var(--ink-2);
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.track-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink-strong); box-shadow: var(--sh-sm); }

.module {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  margin-bottom: 12px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease;
}
.module:hover { border-color: var(--o-100); }
.module[open] { border-color: var(--o-100); box-shadow: var(--sh-sm); }

.module summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  display: flex; align-items: center; gap: 16px;
}
.module summary::-webkit-details-marker { display: none; }
.module summary:hover { background: var(--o-050); }

.module-idx {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 14px;
  background: var(--n-700); color: var(--on-accent);
}
.module[open] .module-idx { background: linear-gradient(135deg, var(--o-500), var(--o-300)); }

.module-head { flex: 1; min-width: 0; }
.module-head h3 { font-size: 1.06rem; }
.module-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.8px; color: var(--ink-3); }
.pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 11.6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.pill-eng { background: var(--info-bg); color: var(--info-ink); }
.pill-con { background: var(--o-050); color: var(--o-600); }
.pill-cap { background: var(--ok-bg); color: var(--ok); }

.chev { flex: none; width: 20px; height: 20px; stroke: var(--ink-3); transition: transform .2s ease; }
.module[open] .chev { transform: rotate(180deg); }

.module-body { padding: 0 22px 22px 78px; }
.module-body > p { color: var(--ink-2); font-size: 15px; margin-bottom: 14px; }
.module-body ul { list-style: none; display: grid; gap: 8px; }
.module-body li { position: relative; padding-left: 24px; font-size: 14.8px; color: var(--ink-2); }
.module-body li::before {
  content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px;
  border-radius: 2px; background: var(--o-400); transform: rotate(45deg);
}
@media (max-width: 640px) { .module-body { padding-left: 22px; } }

/* --------------------------------------------------------------- chips */

.stack-group { margin-bottom: 26px; }
.stack-group h3 { font-size: .96rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.stack-group h3::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); color: var(--on-accent);
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.chip:hover { border-color: rgba(251,165,28,.55); background: rgba(251,165,28,.12); transform: translateY(-2px); }
.chip small { color: var(--on-dark-3); font-weight: 500; font-size: 11.8px; }

/* ------------------------------------------------------------- projects */

.proj { display: flex; flex-direction: column; height: 100%; }
.proj .scenario {
  font-size: 13.6px; color: var(--ink-3); font-style: italic;
  border-left: 3px solid var(--o-300); padding-left: 12px; margin-bottom: 14px;
}
.proj .stack { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.proj .stack span {
  font-family: var(--f-mono); font-size: 11.4px; padding: 4px 9px; border-radius: 6px;
  background: var(--bg-3); color: var(--ink-2);
}
.level {
  align-self: flex-start; font-size: 11.2px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.level-foundation { background: var(--info-bg); color: var(--info-ink); }
.level-intermediate { background: var(--o-050); color: var(--o-600); }
.level-capstone { background: var(--ok-bg); color: var(--ok); }

/* -------------------------------------------------------------- process */

.steps { counter-reset: step; display: grid; gap: 16px; }
.step {
  display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start;
  padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--f-display); font-size: 1.35rem; font-weight: 800;
  color: var(--o-400); line-height: 1;
}
.step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step p { font-size: 14.8px; color: var(--ink-2); }

/* -------------------------------------------------------------- careers */

.role-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table.roles { width: 100%; border-collapse: collapse; min-width: 620px; }
table.roles th, table.roles td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line-2); font-size: 14.8px; }
table.roles th { background: var(--bg-2); font-family: var(--f-display); font-size: 12.6px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
table.roles tbody tr:last-child td { border-bottom: 0; }
table.roles tbody tr:hover { background: var(--o-050); }
table.roles td:first-child { font-weight: 700; color: var(--ink-strong); }
table.roles .money { font-family: var(--f-mono); font-size: 13.8px; color: var(--ink); white-space: nowrap; }
.table-note { margin-top: 12px; font-size: 12.6px; color: var(--ink-3); }

/* ------------------------------------------------------------- audience */

.aud { display: grid; gap: 12px; list-style: none; }
.aud li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 15.2px;
}
.aud .tick { background: var(--o-050); border-color: var(--o-100); }
.aud .tick svg { stroke: var(--o-600); }

.prereq { display: grid; gap: 10px; list-style: none; }
.prereq li { position: relative; padding-left: 26px; font-size: 15.2px; color: var(--ink-2); }
.prereq li::before {
  content: ''; position: absolute; left: 2px; top: .58em; width: 8px; height: 8px;
  border-radius: 50%; border: 2px solid var(--o-400);
}

/* -------------------------------------------------------------- batches */

.batch {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.batch.is-open { border-color: var(--o-300); box-shadow: 0 0 0 3px var(--o-050); }
.batch-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.batch h3 { font-size: 1.1rem; }
.batch-tag {
  font-size: 11.4px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); white-space: nowrap;
}
.batch-tag.closed { background: var(--bg-3); color: var(--ink-3); }
.batch dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14.4px; }
.batch dt { color: var(--ink-3); }
.batch dd { margin: 0; font-weight: 600; color: var(--ink); }

/* ----------------------------------------------------------- instructors */

.person { text-align: left; }
.person-photo {
  width: 74px; height: 74px; border-radius: 20px; object-fit: cover; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--o-050), var(--o-100));
}
.person-photo.initials {
  display: grid; place-items: center; font-family: var(--f-display);
  font-size: 1.3rem; font-weight: 800; color: var(--o-600);
}
.person h3 { font-size: 1.02rem; }
.person .role { font-size: 13.6px; color: var(--o-600); font-weight: 600; margin-top: 3px; }
.person .bio { margin-top: 10px; font-size: 14.4px; color: var(--ink-2); }
.person .tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.person .tags span { font-size: 11.6px; padding: 4px 9px; border-radius: 6px; background: var(--bg-3); color: var(--ink-2); }

.empty-note {
  padding: 30px 24px; border: 1px dashed var(--line); border-radius: var(--r-lg);
  text-align: center; color: var(--ink-3); font-size: 14.6px; background: var(--bg-2);
}
.band-dark .empty-note { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: var(--on-dark-3); }

/* ---------------------------------------------------------- testimonials */

.quote {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; height: 100%;
}
.quote .stars { display: flex; gap: 2px; }
.quote .stars svg { width: 15px; height: 15px; fill: var(--o-300); }
.quote blockquote { margin: 0; font-size: 15.4px; color: var(--ink); line-height: 1.7; }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.quote figcaption img, .quote .avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--o-050); display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 800; color: var(--o-600); font-size: 14px;
}
.quote figcaption b { display: block; font-size: 14.4px; }
.quote figcaption span { font-size: 12.8px; color: var(--ink-3); }

/* ------------------------------------------------------------------ faq */

.faq-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.faq-cats button {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  padding: 8px 16px; border-radius: 999px; min-height: 44px;
  font-size: 13.8px; font-weight: 600; color: var(--ink-2);
  transition: all .16s ease;
}
.faq-cats button[aria-pressed="true"] { background: var(--n-700); border-color: var(--n-700); color: var(--on-accent); }

.faq {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: 10px;
}
.faq[open] { border-color: var(--o-100); box-shadow: var(--sh-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 20px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  font-family: var(--f-display); font-weight: 700; font-size: 15.8px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--o-600); }
.faq .plus { flex: none; width: 22px; height: 22px; position: relative; margin-top: 2px; }
.faq .plus::before, .faq .plus::after {
  content: ''; position: absolute; background: var(--o-500); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.faq .plus::before { left: 0; top: 10px; width: 22px; height: 2px; }
.faq .plus::after { left: 10px; top: 0; width: 2px; height: 22px; }
.faq[open] .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 20px 20px; color: var(--ink-2); font-size: 15.2px; max-width: 76ch; }

/* ----------------------------------------------------------------- form */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.4px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field label .req { color: var(--err); }

.input, .select, .textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--o-400); box-shadow: 0 0 0 3px rgba(249, 115, 22, .14);
}
.input::placeholder, .textarea::placeholder { color: #a6a6c2; }
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; 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='%236f6f95' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.field-err { margin-top: 5px; font-size: 12.6px; color: var(--err); }
.input[aria-invalid="true"] { border-color: var(--err); }

/* The spam check. The sum is text, not an image, so it reflows, zooms and re-colours
   with the rest of the form and reads correctly in every theme. The dashed accent border
   marks it as a challenge rather than another field to fill in — accent rather than the
   neutral fill because on the dark theme --bg-3 and --surface are the same colour, which
   would run the sum and the answer box together into one block. */
.captcha-row { display: flex; align-items: center; gap: 10px; }
.captcha-q {
  flex: none; padding: 11px 14px; border: 1.5px dashed var(--o-400); border-radius: var(--r-sm);
  background: var(--o-050); color: var(--ink); font-family: var(--f-mono);
  font-size: 16px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.captcha-answer { width: 84px; flex: none; text-align: center; font-weight: 700; }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   inputs, but almost none skip a visible-to-the-DOM field. aria-hidden and
   tabindex keep it away from assistive tech and keyboard users. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 14px 16px; border-radius: var(--r-sm); font-size: 14.4px; margin-bottom: 16px; display: flex; gap: 10px; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert-ok { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-line); }
.alert-err { background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); }

/* ------------------------------------------------------------- final cta */

.finalcta {
  border-radius: var(--r-xl); padding: clamp(34px, 5vw, 60px); text-align: center; color: var(--on-accent);
  background:
    radial-gradient(700px 340px at 20% 0%, rgba(236, 55, 5, .34), transparent 60%),
    linear-gradient(150deg, var(--n-700), var(--n-600));
  box-shadow: var(--sh-lg);
}
.finalcta h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
.finalcta p { margin: 16px auto 0; max-width: 58ch; color: rgba(255,255,255,.82); }
.finalcta .btn-row { justify-content: center; margin-top: 28px; }

/* --------------------------------------------------------------- footer */

.footer { background: var(--n-900); color: var(--on-dark-2); padding: clamp(44px, 5vw, 66px) 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 34px;
  padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer .brand-text b { color: var(--on-accent); }

.brand-stacked { flex-direction: column; align-items: flex-start; gap: 8px; }
.brand-stacked img { height: auto; width: 210px; max-width: 100%; }
.brand-sub {
  font-size: 12.4px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--o-300);
}
.footer-about { margin-top: 16px; font-size: 14.2px; color: var(--on-dark-3); max-width: 40ch; }
.footer h4 {
  font-family: var(--f-display); font-size: 12.6px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-accent); margin: 0 0 16px;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer ul a { font-size: 14.2px; color: var(--on-dark-2); transition: color .15s ease; }
.footer ul a:hover { color: var(--o-300); }

.footer-contact { display: grid; gap: 13px; font-size: 14.2px; }
.footer-contact div { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; stroke: var(--o-400); flex: none; margin-top: 3px; }
.footer-contact a:hover { color: var(--o-300); }

/* Staff link — present but quiet, so it never competes with the contact details
   a visitor is actually looking for. */
.footer-admin { color: var(--on-dark-3); }
.footer-admin:hover { color: var(--o-300); }

.footer-bottom {
  padding: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 12px 22px;
  align-items: center; justify-content: space-between; font-size: 13px; color: var(--on-dark-3);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-credit a { color: var(--on-dark-2); border-bottom: 1px solid rgba(255,255,255,.18); }
.footer-credit a:hover { color: var(--o-300); border-bottom-color: currentColor; }
.footer-bottom a:hover { color: var(--o-300); }

/* -------------------------------------------------------- floating cta */

.floaters {
  position: fixed; right: 18px; bottom: 22px; z-index: 80;
  display: flex; flex-direction: column; gap: 12px;
}
.floater {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-accent); box-shadow: 0 6px 20px rgba(4, 5, 31, .3); position: relative;
  transition: transform .16s ease;
}
.floater:hover { transform: scale(1.07); }
.floater svg { width: 26px; height: 26px; }
.floater-wa { background: #25d366; }
.floater-call { background: linear-gradient(135deg, var(--o-500), var(--o-400)); }

/* The wave. Two offset rings rather than one, so the pulse reads as a signal
   rather than a blink — and it stops entirely for reduced-motion users. */
.floater::before, .floater::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0;
  animation: wave 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.floater::after { animation-delay: 1.3s; }
.floater-wa::before, .floater-wa::after { color: #25d366; }
.floater-call::before, .floater-call::after { color: var(--o-400); }

@keyframes wave {
  0%   { transform: scale(1);    opacity: .65; }
  100% { transform: scale(1.95); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .floater::before, .floater::after { animation: none; display: none; }
  .dot-pulse { animation: none; }
}

.floater-label {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--n-800); color: var(--on-accent); font-size: 12.6px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.floater:hover .floater-label { opacity: 1; }
@media (max-width: 720px) { .floater-label { display: none; } }

/* --------------------------------------------------------- mobile bar */

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  display: none; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(4, 5, 31, .1);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.mobilebar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px; border-radius: var(--r-sm); font-size: 10.8px; font-weight: 600; color: var(--ink-2);
}
.mobilebar a svg { width: 19px; height: 19px; stroke: var(--ink-2); fill: none; stroke-width: 1.9; }
.mobilebar a.accent { color: var(--o-600); }
.mobilebar a.accent svg { stroke: var(--o-500); }
.mobilebar a:active { background: var(--bg-3); }

@media (max-width: 720px) {
  .mobilebar { display: grid; }
  body { padding-bottom: 66px; }
  /* Lift the floaters clear of the bar rather than hiding them — they are the
     two highest-intent actions on the page. */
  .floaters { bottom: calc(74px + env(safe-area-inset-bottom)); right: 14px; }
  .floater { width: 48px; height: 48px; }
  .floater svg { width: 23px; height: 23px; }
}

/* -------------------------------------------------------- content pages */

.prose { max-width: 74ch; }
.prose h2 { font-size: 1.4rem; margin: 32px 0 12px; }
.prose h3 { font-size: 1.12rem; margin: 26px 0 10px; }
.prose p { margin-bottom: 14px; color: var(--ink-2); }
.prose ul, .prose ol { margin: 0 0 16px 22px; display: grid; gap: 7px; }
.prose li { color: var(--ink-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--o-600); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--o-500); }
.prose strong { color: var(--ink); }
.prose code { font-family: var(--f-mono); font-size: .88em; background: var(--bg-3); padding: 2px 6px; border-radius: 5px; }
.prose blockquote {
  margin: 18px 0; padding: 14px 18px; border-left: 3px solid var(--o-300);
  background: var(--o-050); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2);
}

.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.4px; color: var(--ink-3); margin-top: 14px; }

.article-card {
  /* Named so the cover can bleed to the card edge without restating the number. */
  --card-pad: 24px;
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.article-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--o-100); }
.article-card h3 { font-size: 1.06rem; }
.article-card p { font-size: 14.6px; color: var(--ink-2); }
.article-card .more { margin-top: auto; padding-top: 12px; font-size: 13.8px; font-weight: 700; color: var(--o-600); }

/* ------------------------------------------------------------- utility */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 28px; }
.mt-4 { margin-top: 40px; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.small { font-size: 13.4px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Case studies — "Real-time issue & solution"

   The page has one job: make a long engagement readable as a sequence. So the
   milestone list is a genuine vertical timeline with a coloured marker per
   phase, and each step separates what happened from what to learn from it.
   ========================================================================== */

.case-card {
  /* Named so the cover image can bleed to the card edge without restating them. */
  --card-pad-y: 26px;
  --card-pad-x: 24px;
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--card-pad-y) var(--card-pad-x);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.case-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--o-100); }

.case-card-top { display: flex; gap: 8px; align-items: center; }
.case-flag, .case-tag {
  font-size: 11.2px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.case-flag { background: var(--bg-3); color: var(--ink-2); }
.case-tag { background: var(--o-050); color: var(--o-600); }

.case-card h2 { font-size: 1.24rem; font-weight: 800; }

.case-quote {
  font-style: italic; color: var(--ink-2); font-size: 14.8px;
  border-left: 3px solid var(--o-300); padding-left: 13px;
}
.case-summary { font-size: 15px; color: var(--ink-2); }

.case-meta { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13.4px; }
.case-meta dt { color: var(--ink-3); }
.case-meta dd { margin: 0; color: var(--ink); }

.case-metrics {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.case-metrics div {
  flex: 1; min-width: 92px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--bg-2);
}
.case-metrics b {
  display: block; font-family: var(--f-display); font-size: 1.05rem; font-weight: 800;
  color: var(--o-600); letter-spacing: -.02em;
}
.case-metrics span { display: block; font-size: 11.4px; color: var(--ink-3); line-height: 1.35; margin-top: 2px; }

.case-more { font-size: 13.6px; font-weight: 700; color: var(--o-600); }

/* -------------------------------------------------------------- detail */

.case-hero {
  color: var(--on-accent); padding: clamp(40px, 5vw, 68px) 0;
  background:
    radial-gradient(900px 440px at 10% -10%, rgba(236, 55, 5, .28), transparent 60%),
    linear-gradient(160deg, var(--n-900) 0%, var(--n-700) 62%, var(--n-600) 100%);
}
.case-hero h1 {
  font-size: clamp(1.85rem, 4.1vw, 2.85rem); font-weight: 800; margin-top: 10px;
  /* 22ch here forced a second line onto almost every real title — the seeded one
     needs about 34ch and had 500px of empty column beside it. Still capped, so a
     very long title keeps a sane measure, and balanced so the wrap it does take
     splits evenly instead of leaving a one-word stub. */
  max-width: 36ch;
  text-wrap: balance;
}
.case-hero .kicker { color: var(--o-300); }
.case-hero .kicker::before { background: var(--o-300); }

.case-brief {
  margin: 26px 0 0; padding: 18px 22px; border-radius: var(--r-md);
  background: rgba(255,255,255,.07); border-left: 3px solid rgba(255,255,255,.4);
  font-size: clamp(1.02rem, 1.8vw, 1.16rem); color: var(--on-accent); font-style: italic;
}
.case-brief-label {
  display: block; font-style: normal; font-size: 11.4px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 8px;
}

.case-real {
  margin-top: 16px; padding: 18px 22px; border-radius: var(--r-md);
  background: rgba(255, 140, 8, .13); border-left: 3px solid var(--o-300);
}
.case-real-label {
  display: block; font-size: 11.4px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--o-300); margin-bottom: 8px;
}
.case-real p { color: var(--on-accent); font-size: clamp(1rem, 1.7vw, 1.12rem); }

.case-facts {
  display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 28px 0 0;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
}
.case-facts dt {
  font-size: 11.4px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-3);
}
.case-facts dd { margin: 3px 0 0; font-size: 14.6px; color: var(--on-accent); font-weight: 600; }

.case-notice {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 26px 0 -10px; padding: 16px 20px;
  border: 1px solid var(--o-100); background: var(--o-050); border-radius: var(--r-md);
}
.case-notice svg { width: 20px; height: 20px; stroke: var(--o-600); flex: none; margin-top: 2px; }
.case-notice strong { display: block; color: var(--ink); font-size: 14.8px; margin-bottom: 4px; }
.case-notice p { font-size: 14px; color: var(--ink-2); max-width: 82ch; }

.case-h2 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); font-weight: 800; margin-bottom: 16px; }

/* ------------------------------------------------------------ timeline */

.timeline-list { list-style: none; margin: 0; padding: 0; position: relative; }

.tl-item { position: relative; padding: 0 0 34px 40px; }

/* The connecting rail. Drawn on the item rather than the list so the last one
   can stop it, instead of a line dangling past the final marker. */
.tl-item::before {
  content: ''; position: absolute; left: 11px; top: 22px; bottom: -6px;
  width: 2px; background: var(--line);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }

.tl-marker {
  position: absolute; left: 4px; top: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--n-300);
}
.tl-discovery .tl-marker { border-color: var(--info-ink); }
.tl-build     .tl-marker { border-color: var(--o-500); }
.tl-integrate .tl-marker { border-color: #6b3fc9; }
.tl-evaluate  .tl-marker { border-color: var(--warn); }
.tl-automate  .tl-marker { border-color: var(--o-300); }
.tl-adopt     .tl-marker { border-color: #0d7a8f; }
.tl-outcome   .tl-marker { border-color: var(--ok); background: var(--ok); }

.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 7px; }
.tl-phase {
  font-family: var(--f-mono); font-size: 12.2px; font-weight: 600; color: var(--ink-3);
}
.tl-kind {
  font-size: 10.8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--bg-3); color: var(--ink-2);
}
.tl-kind-discovery { background: var(--info-bg); color: var(--info-ink); }
.tl-kind-build     { background: var(--o-050); color: var(--o-600); }
.tl-kind-integrate { background: #f0e9ff; color: #5b2fc9; }
.tl-kind-evaluate  { background: var(--warn-bg); color: var(--warn); }
.tl-kind-automate  { background: var(--warn-bg); color: #a6560a; }
.tl-kind-adopt     { background: #e2f4f7; color: #0d6478; }
.tl-kind-outcome   { background: var(--ok-bg); color: var(--ok); }

.tl-body h3 { font-size: clamp(1.08rem, 2vw, 1.28rem); font-weight: 800; margin-bottom: 10px; }
.tl-body .prose { max-width: none; }
.tl-body .prose p { font-size: 15.4px; }

.tl-lesson {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--r-sm);
  background: var(--bg-2); border-left: 3px solid var(--o-400);
  font-size: 14.8px; color: var(--ink);
}
.tl-lesson span {
  display: block; font-size: 11.2px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--o-600); margin-bottom: 5px;
}

/* Outcome table sits on the dark band, so the shared table styles need reversing. */
.metric-cat {
  font-size: 10.8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--o-300); margin-top: 3px;
}
.metric-note { font-size: 12.6px; color: rgba(255,255,255,.6); margin-top: 5px; max-width: 46ch; }
.metric-delta { color: var(--o-300); font-weight: 700; }

.band-dark table.roles { background: transparent; }
.band-dark .role-table-wrap { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); }
.band-dark table.roles th { background: rgba(255,255,255,.06); color: var(--on-dark-3); }
.band-dark table.roles td { border-bottom-color: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
.band-dark table.roles td:first-child { color: var(--on-accent); }
.band-dark table.roles tbody tr:hover { background: rgba(255,255,255,.05); }

/* Landing-page teaser for the section. */
/* Flex rather than fixed grid columns, because the teaser has two shapes — with
   a cover image and without — and flex reflows both from one rule instead of a
   media query per arrangement. The basis values are what wrap: the cover holds
   its width, the body gives way first, and the metrics drop below when the row
   can no longer hold all three. */
.case-teaser {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  padding: clamp(24px, 3vw, 34px); border-radius: var(--r-xl);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-sm);
}
.case-teaser-body { flex: 1 1 330px; min-width: 0; }
.case-teaser > .case-metrics { flex: 0 1 auto; }

.case-teaser-cover {
  flex: 0 0 clamp(200px, 24%, 290px);
  align-self: stretch;
  display: block; min-height: 190px;
  border-radius: var(--r-lg); overflow: hidden; background: var(--bg-3);
}
.case-teaser-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.case-teaser:hover .case-teaser-cover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .case-teaser-cover img, .case-teaser:hover .case-teaser-cover img { transition: none; transform: none; }
}
.case-teaser h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: 8px; }
.case-teaser p { color: var(--ink-2); font-size: 15.2px; max-width: 62ch; }
.case-teaser .case-quote { margin-top: 14px; }
@media (max-width: 760px) {
  /* One column: the cover goes full width and stops being a side panel. */
  .case-teaser-cover { flex-basis: 100%; aspect-ratio: 16 / 7; min-height: 0; }
}

@media (max-width: 560px) {
  .tl-item { padding-left: 32px; }
  .case-metrics div { min-width: 100%; }
}

/* ------------------------------------------------------- nav dropdown */
/* Careers, Mentors, FAQs and Articles live behind one "More" menu so the bar
   keeps room for the brand and the two CTAs. Built on <details>, so it works
   with scripting off. */
.nav-drop { position: relative; }
.nav-drop > summary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: 999px;
  font-size: 14.6px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; cursor: pointer;
  list-style: none;                 /* Firefox */
  transition: color .15s ease, background-color .15s ease;
}
.nav-drop > summary::-webkit-details-marker { display: none; }   /* Safari/Chrome */
.nav-drop > summary:hover { color: var(--ink-strong); background: var(--bg-3); }
.nav-drop[open] > summary { color: var(--o-600); background: var(--o-050); }
.nav-drop > summary svg { transition: transform .18s ease; }
.nav-drop[open] > summary svg { transform: rotate(180deg); }
.nav-drop > summary:focus-visible { outline: 2px solid var(--o-500); outline-offset: 2px; }

.nav-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 95;
  min-width: 190px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
}
.nav-menu a {
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 14.6px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--o-600); background: var(--bg-2); }

@media (prefers-reduced-motion: reduce) {
  .nav-drop > summary svg { transition: none; }
}

/* ------------------------------------------------- case study covers */
/* Optional: a study without a cover keeps the original card and hero
   exactly as they were, so adding an image is never required. */
.case-cover {
  display: block;
  /* Bleeds to the card edge by cancelling its padding. Derived from the same
     custom properties so the two cannot drift apart. The radius is the card's
     less its 1px border, which is the inner curve the image has to sit in. */
  margin: calc(var(--card-pad-y) * -1) calc(var(--card-pad-x) * -1) 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.case-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.case-card:hover .case-cover img { transform: scale(1.03); }

.case-hero-image {
  margin: 26px 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
}
.case-hero-image img {
  display: block;
  width: 100%; height: auto;
  max-height: 460px;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .case-cover img, .case-card:hover .case-cover img { transition: none; transform: none; }
}

/* Active nav states beyond the top-level bar links (.nav a.is-active already
   exists above): the item inside the More menu, the menu's own summary when
   the current page lives inside it, and the mobile drawer. */
.nav-drop > summary.is-active { color: var(--o-600); background: var(--o-050); }
.nav-menu a.is-active { color: var(--o-600); background: var(--o-050); }
.drawer nav a.is-active { color: var(--o-600); background: var(--o-050); }

/* ------------------------------------------------------ article archive */
.archive-head { margin-bottom: 18px; }
.archive-head h1 {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.4vw, 2.3rem);
  font-weight: 800; letter-spacing: -.02em; margin: 0;
}
.archive-count { margin: 6px 0 0; color: var(--ink-3); font-size: 14.5px; }

.archive-filter {
  display: grid; gap: 10px;
  padding: 14px 16px; margin-bottom: 26px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.archive-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.archive-label {
  flex: none; min-width: 46px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.archive-opts { display: flex; flex-wrap: wrap; gap: 7px; }

/* Light-background counterpart to .chip, which is built for the dark bands. */
.arch-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  font-size: 13.8px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.arch-chip:hover { border-color: var(--o-300); color: var(--o-600); }
.arch-chip small { color: var(--ink-3); font-weight: 500; font-size: 11.6px; }
.arch-chip.is-on {
  background: var(--o-050); border-color: var(--o-300); color: var(--o-600);
}
.arch-chip.is-on small { color: var(--o-600); }

/* --------------------------------------------------------- article covers */
.article-cover {
  display: block;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 14px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.article-cover img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.article-card:hover .article-cover img { transform: scale(1.03); }

.article-hero-image {
  margin: 22px 0 26px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
}
.article-hero-image img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .article-cover img, .article-card:hover .article-cover img { transition: none; transform: none; }
}

/* Visitor tally in the footer, under the description. Quiet on purpose — it is a
   small fact about the site, not a claim being made. */
.footer-visitors {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  font-size: 13.4px; color: var(--on-dark-2);
}
.footer-visitors svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.footer-visitors strong { color: var(--on-accent); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- post-enquiry (/thank-you) */

.ty-confirm {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  padding: 28px 30px; margin-bottom: 40px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ok);
  border-radius: var(--r-lg);
}
.ty-confirm h1 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); line-height: 1.2; }
.ty-confirm .lede { margin-top: 10px; max-width: 62ch; }

.ty-mark {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
}
.ty-mark svg { width: 26px; height: 26px; }
.ty-mark-quiet { background: var(--o-050); color: var(--o-500); }

/* The reference the candidate quotes back to us. Monospaced and spaced out because it
   gets read down a phone line as often as it gets copied. */
.ty-ref {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-top: 18px; padding: 12px 16px;
  background: var(--bg-2); border: 1px dashed var(--line); border-radius: var(--r-md);
  font-size: 14.4px;
}
.ty-ref-label { color: var(--ink-3); }
.ty-ref strong { font-family: var(--f-mono); font-size: 1.05rem; letter-spacing: .08em; color: var(--n-800); }
.ty-ref-note { flex-basis: 100%; font-size: 13px; color: var(--ink-3); }

.ty-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.ty-aside { position: sticky; top: 96px; }
.ty-aside .kicker { display: block; margin-bottom: 6px; }
.ty-aside .btn svg { width: 18px; height: 18px; }

/* The steps here describe what we will do, not an ordered curriculum, so the counter the
   shared .step rule prints would be reading as a syllabus number. It stays — it is the
   sequence of the next few days — but the cards sit tighter than the curriculum ones. */
.ty-grid .step { padding: 18px 20px; }

.ty-facts { display: grid; gap: 10px; margin-top: 16px; }
.ty-facts > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14.4px; }
.ty-facts dt { color: var(--ink-3); }
.ty-facts dd { font-weight: 700; color: var(--ink-strong); text-align: right; text-transform: capitalize; }

.ty-while { margin-top: 56px; margin-bottom: 24px; }

@media (max-width: 900px) {
  .ty-grid { grid-template-columns: 1fr; gap: 28px; }
  .ty-aside { position: static; }
}
@media (max-width: 560px) {
  .ty-confirm { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .ty-mark { width: 46px; height: 46px; }
  .ty-mark svg { width: 22px; height: 22px; }
}

/* ---------------------------------------------------- phone with dial code */

/* One control in two parts. The border lives on the wrapper so the code box and the
   number read as a single field, and the focus ring is drawn around the whole thing
   rather than around whichever half happens to have the caret. */
.phone-field {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.phone-field:focus-within { border-color: var(--o-400); box-shadow: 0 0 0 3px rgba(249, 115, 22, .14); }

.phone-cc {
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px 0 12px; border-right: 1.5px solid var(--line-2); background: var(--bg-2);
  border-radius: calc(var(--r-sm) - 2px) 0 0 calc(var(--r-sm) - 2px);
}
.phone-flag {
  width: 21px; height: 16px; flex: none; display: block;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
  object-fit: cover;
}
.phone-dial {
  width: 44px; padding: 12px 0; border: 0; background: none;
  font-family: var(--f-mono); font-size: 14.4px; color: var(--ink);
}
.phone-dial:focus { outline: none; }

/* The number half keeps the .input class for type and colour, but gives up the box —
   the wrapper draws it now. */
.phone-field .input {
  border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: none; min-width: 0; flex: 1;
}
.phone-field .input:focus { box-shadow: none; }

@media (max-width: 380px) {
  .phone-cc { padding: 0 7px 0 9px; gap: 5px; }
  .phone-dial { width: 40px; font-size: 13.5px; }
}


/* ---------------------------------------------------------- scroll nav */
/* Centred on the right edge: the call/WhatsApp floaters own the bottom-right corner
   and the mobile bar owns the bottom, so this is the one part of that edge that is
   free at every breakpoint. */
.scrollnav {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 80;
  display: flex; flex-direction: column;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.scrollnav[hidden] { display: none; }
.scrollnav button {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--ink-2);
  transition: background-color .14s ease, color .14s ease;
}
.scrollnav button + button { border-top: 1px solid var(--line-2); }
.scrollnav button:hover:not(:disabled) { background: var(--bg-3); color: var(--ink-strong); }
.scrollnav button:focus-visible { outline: 2px solid var(--o-500); outline-offset: -2px; }
/* Kept in place rather than removed at the ends of the page, so the control does not
   resize and move under the cursor mid-scroll. */
.scrollnav button:disabled { opacity: .32; cursor: default; }
.scrollnav svg { width: 19px; height: 19px; }

@media (max-width: 720px) {
  .scrollnav { right: 10px; }
  .scrollnav button { width: 40px; height: 40px; }
}
/* A coarse pointer with no room to spare: the mobile bar already offers the jumps that
   matter, and this would sit over the content. */
@media (max-width: 380px) {
  .scrollnav { display: none; }
}

/* ============================================================== THEMES ====
   Theme 1 (light) is the block at the top of this file — no attribute, no
   override, so the default site is byte-for-byte what it always was.

   Theme 2 (dark) is below. Theme 3 (custom) uses one of these two as its base
   and has its brand hues written over the top by ThemeService, inline in the
   page head, so a custom theme is a handful of declarations rather than a
   second copy of this block.

   Everything here is a token reassignment. If a rule further up needed a new
   token to make that possible, it got one — that is why --surface and
   --on-accent exist. Nothing below restyles a component. */
:root[data-theme='dark'] {
  /* Primary scale. In dark the accent is blue rather than orange: an orange
     button on a near-black page is the one combination that reliably looks
     cheap, and blue keeps white labels above 4.5:1. */
  /* --o-600 is only ever a text colour here (kickers, links), never a fill, so on a
     dark page it has to be the lighter of the two, not the darker. */
  --o-600: #60a5fa;
  --o-500: #2563eb;
  --o-400: #3b82f6;
  --o-300: #06b6d4;
  --o-100: #0e2a52;
  --o-050: #0d1f3d;

  /* Band scale, darkest first. The dark bands have to sit *below* the page in
     value, not above it, or the page stops reading as one surface. */
  --n-900: #04060f;
  --n-800: #070b16;
  --n-700: #0d1428;
  --n-600: #16203f;
  --n-500: #1f2c52;
  --n-300: #64748b;
  --n-200: #94a3b8;

  --ink-strong: #ffffff;
  --ink: #ffffff;
  --ink-2: #cbd5e1;
  --ink-3: #94a3b8;

  --line: #253156;
  --line-2: #1e2848;

  --bg: #0b1020;
  --bg-2: #0f1730;
  --bg-3: #121a33;

  --surface: #121a33;
  --header-bg: rgba(15, 23, 48, .88);
  --on-accent: #ffffff;

  --on-dark: #ffffff;
  --on-dark-2: #cbd5e1;
  --on-dark-3: #94a3b8;

  --ok: #34d399;
  --warn: #fbbf24;
  --err: #fb7185;

  /* Status tints invert: on light they lighten towards white, on dark they
     darken towards the page, or every alert glows. */
  --ok-bg: #0e2f26;   --ok-ink: #6ee7b7;   --ok-line: #1c5344;
  --warn-bg: #33270c; --warn-ink: #fcd34d; --warn-line: #5c451a;
  --err-bg: #3a1620;  --err-ink: #fda4af;  --err-line: #5e2733;
  --info-bg: #14203f; --info-ink: #93c5fd; --info-line: #24386b;

  /* Shadows are cast in black on dark, not in the brand navy: a coloured shadow
     over a dark page reads as a halo. */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30);
  --sh-md: 0 4px 12px rgba(0, 0, 0, .42), 0 14px 34px rgba(0, 0, 0, .34);
  --sh-lg: 0 8px 20px rgba(0, 0, 0, .48), 0 28px 64px rgba(0, 0, 0, .40);
  --sh-orange: 0 8px 24px rgba(37, 99, 235, .34);
}