/* ==========================================================================
   OmniLithTech — site styles
   Depends on tokens.css. No raw hex values below this line.
   Order: reset → type → layout → components → sections → utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--surface-dark);
  color: var(--text-on-light);
  font-family: var(--font-text);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Visible keyboard focus everywhere. Never `outline: none`. */
:focus-visible {
  outline: 3px solid var(--focus-on-light);
  outline-offset: 2px;
}

/* Cyan on dark, Prussian Blue on light. Every dark surface on the site has to
   be listed here — a Prussian ring on Midnight Blue is effectively invisible,
   which is worse than no ring at all because it looks intentional. */
.section--dark :focus-visible,
.section--prussian :focus-visible,
.hero :focus-visible,
.site-header :focus-visible,
.nav-drawer :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--focus-on-dark);
}

::selection {
  background: var(--teal);
  color: var(--midnight-blue);
}

/* --------------------------------------------------------------------------
   2. Typography
   Sora is used at H1 and H2 only. Inter carries everything else.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
p,
figure,
ul,
ol,
dl,
dd {
  margin: 0;
}

.h1,
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-h1);
}

.h2,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
}

.h3,
h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-h3);
}

.h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-body);
  line-height: 1.4;
}

.lead {
  font-size: var(--size-lead);
  line-height: 1.55;
  max-width: var(--measure);
}

.prose p {
  max-width: var(--measure);
}

.prose p + p {
  margin-top: var(--sp-5);
}

/* Captions, eyebrows, UI labels, table headers — Inter Medium, tracked out. */
.eyebrow {
  font-weight: 500;
  font-size: var(--size-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}

.caption {
  font-weight: 500;
  font-size: var(--size-caption);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.small {
  font-size: var(--size-small);
}

/* Numerals and metrics behave like a data product. */
.data,
.tabular {
  font-family: var(--font-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
}

.data {
  font-size: var(--size-data);
  line-height: 1;
  letter-spacing: -0.015em;
}

.data--sm {
  font-size: var(--size-data-sm);
}

.data__unit {
  font-size: 0.44em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 0.15em;
}

/* The manual sets its section headings over a heavy Teal rule. */
.rule-heading {
  padding-bottom: var(--sp-4);
  border-bottom: 4px solid var(--teal);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: var(--section-y-tight);
}

/* Section surfaces. Light and dark alternate down each page; a hairline sits
   at the top of every light section so the steps between light values read
   as deliberate. */
.section--dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

.section--prussian {
  background: var(--surface-dark-alt);
  color: var(--text-on-dark);
}

/* Teal on Prussian Blue is only ≈3.5:1, so the eyebrow and lead on this
   surface step up to the secondary palette rather than using the dark-section
   defaults. */
.section--prussian .eyebrow {
  color: var(--cool-grey);
}

.section--prussian .lead {
  color: var(--light-blue-grey);
}

.section--off-white {
  background: var(--surface-light-alt);
  color: var(--text-on-light);
  border-top: 1px solid var(--rule-light);
}

.section--tint {
  background: var(--surface-light-tint);
  color: var(--text-on-light);
  border-top: 1px solid var(--rule-light);
}

.section--white {
  background: var(--surface-light);
  color: var(--text-on-light);
  border-top: 1px solid var(--rule-light);
}

.section__head {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
  max-width: var(--measure);
}

.grid {
  display: grid;
  gap: var(--sp-7);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--teal);
  color: var(--midnight-blue);
  font-weight: 500;
  font-size: var(--size-small);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* The logo's 45° cut, reused as a corner treatment. Three surfaces only. */
.cut-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   4. Logo
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.62em; /* symbol-to-wordmark spacing from the construction grid */
  text-decoration: none;
  color: inherit;
  /* Exclusion zone: the manual specifies 2× the construction module on all
     sides (module ≈ 0.35 of the mark height), and prohibits any artwork or
     type inside it. Enforced as padding, so no sibling can encroach on it at
     any breakpoint.

     The matching negative margin keeps the zone from inflating the header
     and footer rows. Horizontally it is capped at the container gutter so
     the reserved space can never push past the viewport edge — at 360px the
     uncapped value overflowed the page by 4px. */
  --logo-clear: calc(var(--logo-size, 30px) * 0.7);
  padding: var(--logo-clear);
  margin-block: calc(var(--logo-clear) * -1);
  margin-inline: calc(-1 * min(var(--logo-clear), var(--gutter)));
}

.logo__mark {
  width: var(--logo-size, 30px);
  height: var(--logo-size, 30px);
  flex: none;
}

.logo__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--logo-size, 30px) * 0.63);
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}

.logo__word em {
  font-style: normal;
  color: var(--teal);
}

/* --------------------------------------------------------------------------
   5. Arrow — the single icon used site-wide (manual p.21).
   A double chevron. On hover it translates along its own axis.
   -------------------------------------------------------------------------- */
.arrow {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}

.arrow--down {
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   6. Buttons
   Teal fill always takes a Midnight Blue label (≈5.4:1). Hover inverts fill
   and label, as the manual shows.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.85em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--size-small);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn:hover .arrow,
.btn:focus-visible .arrow {
  transform: translateX(4px);
}

.btn--primary {
  background: var(--teal);
  color: var(--action-label);
  border-color: var(--teal);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--midnight-blue);
  color: var(--teal);
  border-color: var(--teal);
}

/* Ghost on dark: teal-outlined with white text. */
.btn--ghost-dark {
  background: transparent;
  color: var(--pure-white);
  border-color: var(--teal);
}

.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  background: var(--teal);
  color: var(--action-label);
}

/* Ghost on light: Prussian outline, Midnight label. */
.btn--ghost-light {
  background: transparent;
  color: var(--midnight-blue);
  border-color: var(--prussian-blue);
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  background: var(--prussian-blue);
  color: var(--pure-white);
}

.btn--lg {
  padding: 1.05em 1.7em;
  font-size: var(--size-body);
}

/* Text link with the arrow. On dark only — teal small type is never set on a
   light surface. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
  font-size: var(--size-small);
  text-decoration: none;
  color: var(--teal);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.link-arrow:hover {
  border-bottom-color: var(--teal);
}

.link-arrow:hover .arrow,
.link-arrow:focus-visible .arrow {
  transform: translateX(4px);
}

.section--off-white .link-arrow,
.section--white .link-arrow,
.section--tint .link-arrow {
  color: var(--prussian-blue);
}

.section--off-white .link-arrow:hover,
.section--white .link-arrow:hover,
.section--tint .link-arrow:hover {
  border-bottom-color: var(--prussian-blue);
}

/* --------------------------------------------------------------------------
   7. Header (manual p.21)
   Transparent over the dark hero, solidifying to Midnight Blue with a
   hairline Prussian Blue border on scroll.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--text-on-dark);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-header.is-solid {
  background: var(--midnight-blue);
  border-bottom-color: var(--prussian-blue);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-5), 2.4vw, var(--sp-7));
}

.site-nav__link {
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--size-small);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-nav__link:hover {
  color: var(--teal);
}

.site-nav__link:hover .arrow {
  transform: translateX(3px);
}

.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--teal);
  color: var(--teal);
}

.site-header__desktop {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-5), 2.4vw, var(--sp-7));
}

/* Mobile drawer trigger */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--prussian-blue);
  color: var(--text-on-dark);
  padding: var(--sp-3);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.nav-toggle__bars {
  display: block;
  width: 18px;
  height: 10px;
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle__bars::before {
  top: 0;
}

.nav-toggle__bars::after {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-4px) rotate(-45deg);
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--midnight-blue);
  /* The drawer is a sibling of the header, not a child, so it has to set its
     own foreground colour — otherwise the logo mark (currentColor) and the
     "OmniLith" half of the wordmark inherit Midnight Blue from <body> and
     disappear against the drawer. */
  color: var(--text-on-dark);
  display: grid;
  grid-template-rows: auto 1fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--prussian-blue);
}

.nav-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-block: var(--sp-5);
  overflow-y: auto;
}

.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  color: var(--text-on-dark);
  text-decoration: none;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-h3);
  border-bottom: 1px solid var(--rule-dark-soft);
}

.nav-drawer__link:hover,
.nav-drawer__link[aria-current="page"] {
  color: var(--teal);
}

.nav-drawer__cta {
  margin-top: var(--sp-6);
  justify-content: center;
}

@media (max-width: 900px) {
  .site-header__desktop {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 7vw, 7rem);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5.5rem));
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(var(--sp-7), 5vw, var(--sp-9));
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  }
}

.hero__eyebrow {
  color: var(--teal);
  margin-bottom: var(--sp-5);
}

.hero__title {
  margin-bottom: var(--sp-5);
  max-width: 15ch;
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--teal);
}

.hero__lead {
  color: var(--text-on-dark-muted);
  max-width: 52ch;
  margin-bottom: var(--sp-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Page heroes on the leaner pages */
.hero--page {
  padding-block: calc(var(--header-h) + clamp(3.5rem, 7vw, 6.5rem)) clamp(3.5rem, 7vw, 6.5rem);
}

.hero--page .hero__title {
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   9. Signature: departure-bank visualisation
   -------------------------------------------------------------------------- */
.viz {
  --cut: 32px;
  border: 1px solid var(--rule-dark);
  background: var(--surface-dark-sunken);
  padding: var(--sp-5);
  position: relative;
}

.viz__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule-dark);
}

.viz__title {
  color: var(--text-on-dark);
  font-weight: 500;
  font-size: var(--size-small);
  letter-spacing: 0.01em;
}

.viz__clock {
  color: var(--teal);
  font-size: var(--size-small);
}

.viz__stage {
  width: 100%;
  display: block;
}

/* Type inside the SVG follows the same rules as type outside it: Inter
   Medium, tabular figures. */
.viz__stage text {
  font-family: var(--font-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.viz__stage .viz-tick {
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--text-on-dark-soft);
}

.viz__stage .viz-peak {
  font-size: 12px;
  letter-spacing: 0.01em;
  fill: var(--cyan);
}

/* The vertical (mobile) rail is drawn at roughly phone width. Capping it
   stops the SVG — and therefore its type — from scaling up on wider
   small-breakpoint viewports. */
@media (max-width: 767px) {
  .viz__stage svg {
    max-width: 420px;
    margin-inline: auto;
  }
}

.viz__panel {
  margin-top: var(--sp-5);
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}

.viz__panel-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.viz__panel-time {
  color: var(--teal);
  font-size: var(--size-body);
}

.viz__panel-name {
  color: var(--text-on-dark);
  font-weight: 500;
  font-size: var(--size-small);
}

.viz__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
}

.viz__metric dt {
  color: var(--text-on-dark-soft);
  font-weight: 500;
  font-size: var(--size-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.viz__metric dd {
  color: var(--text-on-dark);
  font-size: var(--size-data-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Cyan marks only the single peak value on screen. */
.viz__metric dd.is-peak {
  color: var(--cyan);
}

.viz__note {
  color: var(--text-on-dark-soft);
  margin-top: var(--sp-4);
}

/* The written profiles for all three banks. When the sweep is running these
   are visually hidden rather than removed, so the visualisation's content is
   always present for assistive technology — the SVG itself is decorative and
   the animated panel is not a live region. With reduced motion (or no JS)
   they become the visible legend. */
.viz__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.viz.is-static .viz__legend {
  position: static;
  width: auto;
  height: auto;
  margin: var(--sp-5) 0 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-5);
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--sp-5);
}

.viz.is-static .viz__panel {
  display: none;
}

.viz__legend-item dt {
  color: var(--teal);
  font-size: var(--size-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.viz__legend-item dd {
  color: var(--text-on-dark-muted);
  font-size: var(--size-small);
  margin: var(--sp-2) 0 0;
}

/* --------------------------------------------------------------------------
   10. Benchmark rule — "the gap"
   Figures sit on one horizontal hairline, positioned at their relative
   magnitudes, so the gap is drawn rather than only stated.
   -------------------------------------------------------------------------- */
.benchmarks {
  display: grid;
  gap: var(--sp-7);
}

.benchmark-row {
  display: grid;
  gap: var(--sp-5);
  border-top: 1px solid var(--rule-light-strong);
  padding-top: var(--sp-5);
}

@media (min-width: 768px) {
  .benchmark-row {
    grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }
}

.benchmark-row__label {
  color: var(--text-on-light-muted);
  font-weight: 500;
  font-size: var(--size-small);
}

.benchmark-row__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
}

.benchmark {
  display: grid;
  gap: var(--sp-2);
}

.benchmark__value {
  color: var(--midnight-blue);
}

.benchmark__caption {
  color: var(--text-on-light-muted);
  max-width: 30ch;
}

/* The per-passenger axis. The three figures are read as text above it; the
   axis below places them at their true relative magnitudes, so the gap is
   drawn as well as stated. Decorative — it repeats nothing new. */
.gap-axis {
  margin-top: var(--sp-6);
}

.gap-axis__track {
  position: relative;
  height: 2px;
  background: var(--cool-grey);
  margin-bottom: var(--sp-3);
}

.gap-axis__mark {
  position: absolute;
  left: var(--at);
  top: 50%;
  width: 3px;
  height: 16px;
  background: var(--prussian-blue);
  transform: translate(-50%, -50%);
}

.gap-axis__mark--accent {
  background: var(--teal);
}

.gap-axis__band {
  position: absolute;
  left: var(--from);
  right: calc(100% - var(--to));
  top: 50%;
  height: 6px;
  background: var(--prussian-blue);
  transform: translateY(-50%);
}

.gap-axis__scale {
  display: flex;
  justify-content: space-between;
  color: var(--text-on-light-muted);
}

.source-note {
  color: var(--text-on-light-muted);
  border-top: 1px solid var(--rule-light-strong);
  padding-top: var(--sp-4);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   11. Spec rows — the capability set. A datasheet, not a card grid.
   -------------------------------------------------------------------------- */
.spec {
  border-top: 1px solid var(--rule-dark);
}

.section--off-white .spec,
.section--white .spec,
.section--tint .spec {
  border-top-color: var(--rule-light-strong);
}

.spec__row {
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--rule-dark);
  align-items: start;
}

.section--off-white .spec__row,
.section--white .spec__row,
.section--tint .spec__row {
  border-bottom-color: var(--rule-light-strong);
}

@media (min-width: 768px) {
  .spec__row {
    grid-template-columns: 4rem minmax(0, 22ch) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: baseline;
  }
}

.spec__index {
  color: var(--teal);
  font-weight: 500;
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
}

.section--off-white .spec__index,
.section--white .spec__index,
.section--tint .spec__index {
  color: var(--prussian-blue);
}

.spec__term {
  font-weight: 600;
  font-size: var(--size-h3);
  letter-spacing: var(--track-h3);
}

.spec__desc {
  color: var(--text-on-dark-muted);
  max-width: var(--measure);
}

.section--off-white .spec__desc,
.section--white .spec__desc,
.section--tint .spec__desc {
  color: var(--text-on-light-muted);
}

/* --------------------------------------------------------------------------
   12. Product launch card (manual p.25)
   Product name in the primary heading style, concise highlight tags,
   CTA at the bottom-right.
   -------------------------------------------------------------------------- */
.launch-card {
  --cut: 36px;
  background: var(--surface-light);
  border: 1px solid var(--rule-light-strong);
  display: grid;
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--dur) var(--ease);
}

.launch-card:hover {
  box-shadow: var(--shadow-lift);
}

@media (min-width: 900px) {
  .launch-card {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  }
}

.launch-card__visual {
  background: var(--surface-panel);
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sp-7);
  min-height: 260px;
  overflow: hidden;
}

.launch-card__status {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  background: var(--pure-white);
  border: 1px solid var(--teal);
  color: var(--prussian-blue);
  font-weight: 500;
  font-size: var(--size-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-3);
}

.launch-card__body {
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  display: grid;
  align-content: start;
  gap: var(--sp-5);
}

.launch-card__name {
  color: var(--midnight-blue);
}

.launch-card__desc {
  color: var(--text-on-light-muted);
  max-width: 54ch;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag {
  background: var(--light-blue-grey);
  color: var(--prussian-blue);
  font-weight: 500;
  font-size: var(--size-small);
  padding: var(--sp-2) var(--sp-4);
  line-height: 1.35;
}

.launch-card__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--sp-3);
}

/* --------------------------------------------------------------------------
   13. Process rail — the Colour Progression System (manual p.26)
   Horizontal on desktop, vertical on mobile. Stage colour is driven by
   scroll position so the progression is felt, not only drawn.
   -------------------------------------------------------------------------- */
.rail {
  --progress: 0;
  margin-top: var(--sp-8);
}

.rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  position: relative;
}

.rail__stage {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding-left: var(--sp-7);
}

.rail__node {
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  background: var(--stage-0);
  transition: background-color var(--dur-reveal) var(--ease);
}

.rail__stage[data-state="1"] .rail__node {
  background: var(--stage-1);
}
.rail__stage[data-state="2"] .rail__node {
  background: var(--stage-2);
}
.rail__stage[data-state="3"] .rail__node {
  background: var(--stage-3);
}

/* Vertical connector on mobile */
.rail__stage::before {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(0.35em + 14px);
  bottom: calc(-1 * var(--sp-6));
  width: 2px;
  background: var(--rule-light-strong);
}

.rail__stage:last-child::before {
  display: none;
}

.rail__num {
  color: var(--text-on-light-muted);
  font-weight: 500;
  font-size: var(--size-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.rail__name {
  font-weight: 600;
  font-size: var(--size-h3);
  letter-spacing: var(--track-h3);
  color: var(--midnight-blue);
}

.rail__desc {
  color: var(--text-on-light-muted);
  max-width: 46ch;
}

@media (min-width: 860px) {
  .rail__track {
    position: relative;
    height: 2px;
    background: var(--cool-grey);
    margin-bottom: var(--sp-6);
  }

  .rail__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--progress) * 100%);
    background: linear-gradient(
      to right,
      var(--stage-1) 0%,
      var(--stage-2) 55%,
      var(--stage-3) 100%
    );
    transition: width var(--dur-reveal) var(--ease);
  }

  .rail__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .rail__stage {
    padding-left: 0;
    padding-top: var(--sp-6);
  }

  .rail__stage::before {
    display: none;
  }

  .rail__node {
    top: calc(-1 * var(--sp-6) - 7px);
    left: 0;
  }
}

/* --------------------------------------------------------------------------
   14. Cards (manual p.24) — used on Company and AeroYield
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface-light);
  border: 1px solid var(--rule-light-strong);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--dur) var(--ease);
}

.card:hover {
  box-shadow: var(--shadow-lift);
}

.card__eyebrow {
  color: var(--prussian-blue);
}

.card__title {
  color: var(--midnight-blue);
}

.card__body {
  color: var(--text-on-light-muted);
}

.card--dark {
  background: var(--surface-dark-sunken);
  border-color: var(--rule-dark);
  box-shadow: none;
}

.card--dark .card__title {
  color: var(--text-on-dark);
}

.card--dark .card__body {
  color: var(--text-on-dark-muted);
}

.card--dark .card__eyebrow {
  color: var(--teal);
}

.card-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* --------------------------------------------------------------------------
   15. Engines module — tabs on desktop, accordion on mobile
   -------------------------------------------------------------------------- */
/* Five tabs do not fit on one row between 900px and roughly 1180px, so the
   list wraps rather than scrolling sideways — nothing ends up hidden behind
   an edge with no affordance. */
.engines__tablist {
  display: none;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule-dark);
  margin-bottom: var(--sp-7);
}

.engines__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-on-dark-muted);
  font-weight: 500;
  font-size: var(--size-small);
  padding: var(--sp-4) clamp(var(--sp-3), 1.4vw, var(--sp-5));
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.engines__tab-num {
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark-soft);
}

.engines__tab:hover {
  color: var(--text-on-dark);
}

.engines__tab[aria-selected="true"] {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.engines__tab[aria-selected="true"] .engines__tab-num {
  color: var(--teal);
}

.engines__panel {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 1024px) {
  .engines__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
  }
}

.engines__panel[hidden] {
  display: none;
}

.engines__copy {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.engines__title {
  color: var(--text-on-dark);
}

.engines__desc {
  color: var(--text-on-dark-muted);
  max-width: var(--measure);
}

.engines__list {
  margin: 0;
  padding-left: 1.1em;
  color: var(--text-on-dark-muted);
  display: grid;
  gap: var(--sp-3);
}

.engines__list li::marker {
  color: var(--teal);
}

.engines__figure {
  margin: 0;
  border: 1px solid var(--rule-dark);
  background: var(--surface-dark-sunken);
  padding: var(--sp-5);
}

.engines__figure svg {
  width: 100%;
  height: auto;
}

/* Purpose-built diagrams. Each engine gets its own drawing rather than a
   stock icon, built from the same three palettes as everything else. */
.dia-fill {
  fill: var(--prussian-blue);
}
.dia-fill-soft {
  fill: color-mix(in srgb, var(--prussian-blue) 62%, var(--midnight-blue));
}
.dia-accent {
  fill: var(--teal);
}
.dia-cyan {
  fill: var(--cyan);
}
.dia-line {
  fill: none;
  stroke: var(--prussian-blue);
  stroke-width: 1.5;
}
.dia-line-accent {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
}
.dia-line-dash {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.dia-label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--text-on-dark-soft);
}
.dia-label--on {
  fill: var(--teal);
}

.engines__figure figcaption {
  color: var(--text-on-dark-soft);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-dark);
}

/* Accordion presentation below the tab breakpoint */
.engines__item {
  border-bottom: 1px solid var(--rule-dark);
}

.engines__summary {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text-on-dark);
  text-align: left;
  padding: var(--sp-5) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-h3);
  letter-spacing: var(--track-h3);
}

.engines__summary .arrow {
  margin-left: auto;
  color: var(--teal);
  transition: transform var(--dur) var(--ease);
}

.engines__summary[aria-expanded="true"] .arrow {
  transform: rotate(90deg);
}

.engines__summary-num {
  color: var(--teal);
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.engines__item .engines__panel {
  padding-bottom: var(--sp-6);
}

@media (min-width: 900px) {
  .engines__tablist {
    display: flex;
  }
  .engines__summary {
    display: none;
  }
  .engines__item {
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   16. Cohort comparison
   -------------------------------------------------------------------------- */
.cohorts {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 860px) {
  .cohorts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cohort {
  background: var(--surface-light);
  border: 1px solid var(--rule-light-strong);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.cohort__time {
  color: var(--prussian-blue);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: var(--size-h3);
}

.cohort__name {
  color: var(--midnight-blue);
}

.cohort__bars {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.cohort__bar-row {
  display: grid;
  grid-template-columns: minmax(0, 12ch) minmax(0, 1fr) 4ch;
  align-items: center;
  gap: var(--sp-4);
}

.cohort__bar-label {
  color: var(--text-on-light-muted);
  font-size: var(--size-small);
  font-weight: 500;
}

.cohort__bar-track {
  height: 8px;
  background: var(--light-blue-grey);
  position: relative;
}

.cohort__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v, 0) * 1%);
  background: var(--prussian-blue);
}

.cohort--focus .cohort__bar-fill {
  background: var(--teal);
}

.cohort__bar-value {
  color: var(--midnight-blue);
  font-size: var(--size-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --------------------------------------------------------------------------
   17. FAQ / disclosure rows
   -------------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--rule-light-strong);
}

.faq__item {
  border-bottom: 1px solid var(--rule-light-strong);
}

.faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: var(--sp-5) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--size-h3);
  letter-spacing: var(--track-h3);
  color: var(--midnight-blue);
}

.faq__q .arrow {
  margin-left: auto;
  color: var(--prussian-blue);
  transition: transform var(--dur) var(--ease);
}

.faq__q[aria-expanded="true"] .arrow {
  transform: rotate(90deg);
}

.faq__a {
  padding-bottom: var(--sp-6);
  color: var(--text-on-light-muted);
  max-width: var(--measure);
}

.faq__a[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   18. Statement section (performance fee) — quiet, confident, no illustration
   -------------------------------------------------------------------------- */
.statement {
  max-width: 22ch;
}

.statement__body {
  color: var(--text-on-dark-muted);
  max-width: 58ch;
  margin-top: var(--sp-6);
  font-size: var(--size-lead);
  line-height: 1.6;
}

.statement__terms {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--rule-dark);
  display: grid;
  gap: 0;
}

.statement__term {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule-dark);
}

@media (min-width: 768px) {
  .statement__term {
    grid-template-columns: minmax(0, 24ch) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: baseline;
  }
}

.statement__term dt {
  color: var(--teal);
  font-weight: 500;
  font-size: var(--size-small);
}

.statement__term dd {
  margin: 0;
  color: var(--text-on-dark-muted);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   19. Closing CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  --cut: 40px;
}

.cta-band__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 860px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-8);
  }
}

.cta-band__title {
  color: var(--pure-white);
  max-width: 20ch;
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-dark);
  color: var(--text-on-dark-muted);
  padding-block: var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--rule-dark);
}

.site-footer__top {
  display: grid;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--rule-dark);
}

@media (min-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: var(--sp-9);
  }
}

.site-footer__brand {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.site-footer__positioning {
  color: var(--text-on-dark-muted);
  max-width: 34ch;
}

.site-footer__cols {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.site-footer__col h2 {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--size-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  margin-bottom: var(--sp-4);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.site-footer__col a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  font-size: var(--size-small);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-footer__col a:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.site-footer__legal {
  padding-top: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  color: var(--text-on-dark-soft);
}

@media (min-width: 768px) {
  .site-footer__legal {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.site-footer__legal dl {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
}

.site-footer__legal dl > div {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.site-footer__legal dt {
  color: var(--text-on-dark-soft);
}

.site-footer__legal dd {
  margin: 0;
  color: var(--text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   21. Contact form
   -------------------------------------------------------------------------- */
.contact-split {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 900px) {
  .contact-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--sp-9);
    align-items: start;
  }
}

.contact-aside {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
}

.contact-aside__steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-light-strong);
  margin: 0;
}

.contact-aside__step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--rule-light-strong);
}

.contact-aside__step dt {
  color: var(--prussian-blue);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: var(--size-small);
}

.contact-aside__step dd {
  margin: 0;
  color: var(--text-on-light-muted);
}

.contact-direct {
  display: grid;
  gap: var(--sp-3);
  border-top: 1px solid var(--rule-light-strong);
  padding-top: var(--sp-5);
}

.form {
  display: grid;
  gap: var(--sp-5);
  background: var(--surface-light);
  border: 1px solid var(--rule-light-strong);
  padding: clamp(var(--sp-5), 3.5vw, var(--sp-7));
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field__label {
  font-weight: 500;
  font-size: var(--size-small);
  color: var(--midnight-blue);
}

.field__req {
  color: var(--prussian-blue);
}

.field__control {
  width: 100%;
  padding: 0.8em 0.9em;
  border: 1px solid var(--cool-grey);
  border-radius: var(--radius);
  background: var(--pure-white);
  color: var(--midnight-blue);
  font-size: var(--size-body);
  transition: border-color var(--dur) var(--ease);
}

.field__control::placeholder {
  color: var(--text-on-light-muted);
  opacity: 0.75;
}

.field__control:hover {
  border-color: var(--graphite);
}

textarea.field__control {
  min-height: 8.5rem;
  resize: vertical;
}

.field__hint {
  color: var(--text-on-light-muted);
}

.field__error {
  color: var(--prussian-blue);
  font-weight: 500;
  font-size: var(--size-small);
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}

.field__error::before {
  content: "";
  width: 3px;
  align-self: stretch;
  background: var(--prussian-blue);
  flex: none;
}

.field__error[hidden] {
  display: none;
}

.field.is-invalid .field__control {
  border-color: var(--prussian-blue);
  border-width: 2px;
}

.form__row {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 620px) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form__foot {
  display: grid;
  gap: var(--sp-4);
  border-top: 1px solid var(--rule-light);
  padding-top: var(--sp-5);
}

@media (min-width: 620px) {
  .form__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.form__status {
  border: 1px solid var(--teal);
  border-left-width: 4px;
  background: var(--light-blue-grey);
  color: var(--midnight-blue);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--size-small);
}

.form__status[hidden] {
  display: none;
}

.form__summary {
  border: 2px solid var(--prussian-blue);
  padding: var(--sp-4) var(--sp-5);
  color: var(--midnight-blue);
}

.form__summary[hidden] {
  display: none;
}

.form__summary ul {
  margin: var(--sp-3) 0 0;
  padding-left: 1.1em;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--size-small);
}

.form__summary a {
  color: var(--prussian-blue);
}

/* --------------------------------------------------------------------------
   22. Team placeholders
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.team-card {
  border: 1px dashed var(--cool-grey);
  background: var(--surface-light);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.team-card__avatar {
  aspect-ratio: 4 / 3;
  background: var(--light-blue-grey);
  display: grid;
  place-items: center;
  color: var(--text-on-light-muted);
}

.team-card__role {
  color: var(--midnight-blue);
  font-weight: 600;
}

.team-card__note {
  color: var(--text-on-light-muted);
}

/* --------------------------------------------------------------------------
   23. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack-4 {
  display: grid;
  gap: var(--sp-4);
}
.stack-5 {
  display: grid;
  gap: var(--sp-5);
}
.stack-6 {
  display: grid;
  gap: var(--sp-6);
}
.stack-7 {
  display: grid;
  gap: var(--sp-7);
}

.mb-5 {
  margin-bottom: var(--sp-5);
}
.mt-6 {
  margin-top: var(--sp-6);
}
.figure-flush {
  margin: 0;
}

.text-muted-dark {
  color: var(--text-on-dark-muted);
}
.text-muted-light {
  color: var(--text-on-light-muted);
}
.text-teal {
  color: var(--teal);
}

/* Scroll-triggered reveal. Short distance, one easing curve.
   Content is visible by default and only hidden once the `js` class has been
   set by the inline head script — so nothing ever flashes, and nothing is
   hidden if scripts never run. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-dist));
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
  /* Matches the `.js .reveal` selector above rather than `.reveal` alone —
     a media query adds no specificity, so a bare `.reveal` rule here would
     lose to it and leave the page blank for anyone who asks for less motion. */
  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   24. Values passed to CSS as classes rather than style="" attributes

   None of these carry design decisions — they hold data. They exist as
   classes so that no element on the site needs an inline `style` attribute,
   which is what allows the Content-Security-Policy to be `style-src 'self'`
   with no 'unsafe-inline'. CSP hashes cannot cover style attributes, only
   <style> elements, so removing them entirely is the only way to close that
   hole. If you add a value here, add a class — do not reach for an inline
   style.
   -------------------------------------------------------------------------- */
.icon-sprite {
  position: absolute;
}

.logo--lg {
  --logo-size: 34px;
}

/* Benchmark axis positions — see the market-context section on the home page.
   The figures themselves are in the markup; these place them at their true
   relative magnitudes on a $0–$20 axis. */
.gap-axis__mark--india {
  --at: 21.5%;
}
.gap-axis__band--hubs {
  --from: 36%;
  --to: 79.5%;
}
.gap-axis__mark--me {
  --at: 88%;
}

/* Cohort category-demand indices (0–100) on the AeroYield worked example. */
.bar-4 { --v: 4; }
.bar-12 { --v: 12; }
.bar-15 { --v: 15; }
.bar-18 { --v: 18; }
.bar-24 { --v: 24; }
.bar-27 { --v: 27; }
.bar-31 { --v: 31; }
.bar-34 { --v: 34; }
.bar-38 { --v: 38; }
.bar-61 { --v: 61; }

/* --------------------------------------------------------------------------
   25. Honeypot

   Positioned off-screen rather than display:none — some bots deliberately
   skip fields that are display:none or type=hidden, and fill in everything
   else. Paired with aria-hidden and tabindex="-1" in the markup so it is
   invisible to screen readers and unreachable by keyboard: a human should
   never be able to put anything in it.
   -------------------------------------------------------------------------- */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}