/* ═══════════════════════════════════════════════════════════════════════
   VEKSA design system, dark

   Black ground, white type, one orange accent. Depth comes from layered
   near-black surfaces and hairline borders rather than shadows, which do
   not read on black.

   Display type is BubbledotICG-FinePos and is reserved for page titles and
   section headings. It is a dot-matrix face: legible at size, mush at body
   scale, so everything below h2 is Space Grotesk.

   Class and custom-property names are a deliberate contract. Every page and
   component in src/ styles itself through these, so the visual world changes
   here rather than across thirty files.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* "ink" now reads light-on-dark. Names kept so the page markup is
     untouched; only the values invert. */
  --ink: #ffffff;
  --ink-2: #c9c9d2;
  --ink-3: #9a9aa6;
  --ink-4: #7a7a86;

  /* Four steps, tuned in CIE L* rather than WCAG ratio. Ratio is the wrong
     metric down here: its +0.05 offset swamps the numerator near black, so
     #000 -> #0b0b0e scored 1.068 and looked like nothing. In L*, where ~2-3
     is the just-noticeable step for large areas, these sit about 6-7 apart:
       surface       L*  0.0   page ground
       surface-card  L*  6.1   cards on the ground
       surface-2     L*  6.9   tinted sections
       surface-3     L* 14.2   cards on a tinted section, inputs */
  --surface: #000000;
  --surface-2: #14141d;
  --surface-3: #23232e;
  --surface-card: #131318;
  --surface-invert: #ffffff;

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);

  /* Brand. Orange is the accent; navy is a supporting ground, not type,
     because navy on black has almost no separation. */
  --accent: #ff601f;
  --accent-ink: #ff7a45;
  --navy: #082658;
  --link: #ff7a45;

  --font-sans: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'BubbledotICG-FinePos', 'Space Grotesk', monospace;

  /* Fluid type. */
  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.28rem + 1vw, 2rem);
  --step-4: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --step-5: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Depth on black is a lighter surface plus a hairline, not a shadow. */
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.7);

  --measure: 68ch;
  --container: 1180px;
  --gutter: clamp(1rem, 3vw, 2.5rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--surface);
}

html:focus-within {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* The dot-matrix face is NOT the default heading face. It is a display
   type: at the clamp minimums h1 rendered 32px and h2 28px, which is where
   a dotted face stops resolving into letterforms. It now appears only via
   .display-face, on page hero titles, with its own size floor. */
h1 {
  font-size: var(--step-5);
  letter-spacing: -0.02em;
}

.display-face {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.14;
  /* Floor of 38px: below that the dots read as texture, not type. */
  font-size: clamp(2.375rem, 1.6rem + 3vw, 3.75rem);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p,
ul,
ol {
  margin: 0;
}

p {
  text-wrap: pretty;
}

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

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

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

::selection {
  background: var(--accent);
  color: #fff;
}

/* ── Layout primitives ───────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: 780px;
}

.section {
  padding-block: clamp(var(--sp-8), 7vw, var(--sp-9));
}

.section-tight {
  padding-block: clamp(var(--sp-7), 5vw, var(--sp-8));
}

/* A tinted section is a lift out of black, not a wash of colour. */
.section-tint {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}

/* A third ground, tinted toward the brand navy. With black, surface-2 and
   this, no three consecutive sections can share a background. */
.section-deep {
  position: relative;
  /* Three blooms sitting roughly under the three glow cards, so the colour
     spills onto the ground the way it does in the reference rather than
     stopping at each card's edge. Painted into the section's own background
     stack: a blurred pseudo-element at a negative z-index would paint over
     the section background instead of behind it. */
  background:
    radial-gradient(36rem 20rem at 17% 78%, rgba(255, 96, 31, 0.17), transparent 62%),
    radial-gradient(36rem 20rem at 50% 84%, rgba(64, 138, 255, 0.16), transparent 62%),
    radial-gradient(36rem 20rem at 83% 78%, rgba(140, 100, 255, 0.16), transparent 62%),
    radial-gradient(60rem 26rem at 50% 0%, rgba(255, 96, 31, 0.06), transparent 70%),
    linear-gradient(180deg, #070a14, #04060d);
  border-block: 1px solid var(--line);
}

/* Faint engineering grid, as in the reference. Sits under the content and
   is decorative only, so it never intercepts pointer events. */
.section-grid {
  position: relative;
}

.section-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  /* Fades out top and bottom so the grid never collides with the section
     boundary it sits inside. */
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.section-grid > * {
  position: relative;
}

.section-line {
  border-top: 1px solid var(--line);
}

/* Two untinted sections in a row have a deltaL* of 0 between them, so the
   boundary would vanish entirely. A hairline guarantees it without relying
   on every page remembering to alternate `tint`. */
.section:not(.section-tint) + .section:not(.section-tint) {
  border-top: 1px solid var(--line);
}

.stack > * + * {
  margin-top: var(--flow, var(--sp-4));
}
.stack-lg {
  --flow: var(--sp-6);
}
.stack-sm {
  --flow: var(--sp-3);
}

/* ── Type helpers ────────────────────────────────────────────────────── */

/* The eyebrow is a badge pill, matching the hero's. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45em 0.95em;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-2);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.eyebrow::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  align-self: flex-start;
  margin-top: 0.45em;
}

.field-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: var(--measure);
}

.muted {
  color: var(--ink-3);
}

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

/* One accented word per heading, at most. */
.gradient-text {
  color: var(--accent);
  display: inline-block;
}

/* ── Section heading ─────────────────────────────────────────────────── */
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-8));
}

.section-head .eyebrow {
  margin-bottom: var(--sp-5);
}

.section-head p {
  margin-top: var(--sp-5);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-3);
}

.section-head-center {
  margin-inline: auto;
  text-align: center;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: #fff;
  --btn-fg: #000;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.8em 1.6em;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

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

/* Orange is the primary action, and nothing else on the page is orange
   at this weight. */
/* Black on orange, not white. #FF601F has a luminance of 0.30, so white
   text on it measures 3.02:1 and fails AA for button-sized type; black
   reaches 6.94:1 and reads bolder against the dark ground anyway. */
.btn-accent {
  --btn-bg: var(--accent);
  --btn-fg: #000;
}
.btn-accent:hover {
  --btn-bg: #ff7333;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn-ghost:hover {
  --btn-bg: var(--surface-3);
}

.btn-invert {
  --btn-bg: #fff;
  --btn-fg: #000;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--link);
}
.link-arrow::after {
  content: '→';
  transition: transform 0.18s ease;
}
.link-arrow:hover::after {
  transform: translateX(3px);
}

/* ── Grids ───────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}

/* ── Card ────────────────────────────────────────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(var(--sp-5), 2vw, var(--sp-6));
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.card h3 {
  font-size: var(--step-1);
  color: var(--ink);
}

.card p {
  color: var(--ink-3);
  font-size: var(--step-0);
}

a.card:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

/* On an already-tinted section the card must step up again, or it inverts
   and reads as a hole. */
.section-tint .card {
  background: var(--surface-3);
}
.section-tint a.card:hover {
  background: #2c2c39;
}

.card-media {
  margin: calc(clamp(var(--sp-5), 2vw, var(--sp-6)) * -1)
    calc(clamp(var(--sp-5), 2vw, var(--sp-6)) * -1) 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-foot {
  margin-top: auto;
  padding-top: var(--sp-3);
}

/* Sans, not the display face. These render at 20-24px, the same range where
   the dotted face stopped resolving for headings; the accent colour and
   tabular figures carry the sequence instead. */
.card-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* ── Gradient tile ───────────────────────────────────────────────────── */

/* Dark at the top where the copy sits, saturated at the foot. The stop
   positions are the whole trick: text lives above 62%, so the bright end of
   the ramp is always below the last line rather than behind it. */
.tile-grid {
  gap: clamp(var(--sp-4), 1.6vw, var(--sp-5));
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 19rem;
  padding: clamp(var(--sp-5), 2vw, var(--sp-6));
  /* The link must clear the bright band below, whatever the tile's height. */
  padding-bottom: 3.25rem;
  border-radius: 24px;
  overflow: hidden;
  /* The bright end is pinned 2.75rem from the bottom rather than to a
     percentage. With percentage stops the ramp stretches with the tile, so the
     link sat at 65-74% on a desktop tile but 81-90% on a shorter tablet one,
     where white dropped to 2.65:1. Pinned, the link lands the same distance
     above the saturated end at every viewport. */
  background: linear-gradient(
    180deg,
    #0a0a0e 0%,
    var(--t-deep) 40%,
    var(--t-mid) calc(100% - 2.75rem),
    var(--t-lit) 100%
  );
  transition: transform 0.22s ease;
}

.tile:hover {
  transform: translateY(-3px);
}

.tile-icon {
  display: inline-grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: var(--sp-5);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  flex: none;
}

.tile-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.tile h3 {
  font-size: var(--step-2);
  color: #fff;
  margin-bottom: var(--sp-2);
}

.tile p {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--step-0);
}

/* Pushed to the foot of the copy, not the foot of the card, so it never
   drifts into the bright end of the ramp. */
.tile-link {
  margin-top: var(--sp-4);
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.tile-link::after {
  content: '→';
  transition: transform 0.18s ease;
}
.tile:hover .tile-link::after {
  transform: translateX(3px);
}

/* Hues cycle by position rather than an index class, so a section with any
   number of tiles is fully styled. With index classes a seventh card shipped
   with no gradient at all. Orange leads because it is the brand. */
.tile:nth-child(6n + 1) {
  --t-deep: #2a1004;
  --t-mid: #c9460e;
  --t-lit: #ffc46b;
}
.tile:nth-child(6n + 2) {
  --t-deep: #061634;
  --t-mid: #2f5fd0;
  --t-lit: #b3d2ff;
}
.tile:nth-child(6n + 3) {
  --t-deep: #04210f;
  --t-mid: #12864a;
  --t-lit: #86f0b0;
}
.tile:nth-child(6n + 4) {
  --t-deep: #1a0730;
  --t-mid: #6f3ad1;
  --t-lit: #d3b0ff;
}
.tile:nth-child(6n + 5) {
  --t-deep: #04211f;
  --t-mid: #0d7a76;
  --t-lit: #8ceee9;
}
.tile:nth-child(6n + 6) {
  --t-deep: #2a0618;
  --t-mid: #c22a68;
  --t-lit: #ffadcb;
}

/* ── Photo card ──────────────────────────────────────────────────────── */

/* The third medium on the homepage. Products are solid gradient, How we work
   is a lit border, and this is photographic, so the three sections read as a
   family without any two looking like the same component recoloured.
   Text sits on solid card below the image, never on the photograph. */
.photo-grid {
  gap: clamp(var(--sp-4), 1.6vw, var(--sp-5));
}

.photo-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--line);
  transition:
    border-color 0.22s ease,
    transform 0.22s ease;
}

.photo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 96, 31, 0.45);
}

.photo-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-3);
}

.photo-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Held back so six photographs do not fight the saturated tiles above. */
  filter: saturate(0.7) brightness(0.82) contrast(1.05);
  transition:
    filter 0.3s ease,
    transform 0.5s ease;
}

.photo-card:hover .photo-card-media img {
  filter: saturate(1) brightness(0.95) contrast(1.05);
  transform: scale(1.04);
}

/* Fades the photograph into the card body so there is no hard seam, and
   guarantees the top of the copy area is solid. */
.photo-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--surface-card) 100%);
  pointer-events: none;
}

.photo-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: clamp(var(--sp-4), 1.6vw, var(--sp-5)) clamp(var(--sp-5), 2vw, var(--sp-6))
    clamp(var(--sp-5), 2vw, var(--sp-6));
  margin-top: -1px;
}

.photo-card-body h3 {
  font-size: var(--step-1);
  color: #fff;
}

.photo-card-body p {
  color: var(--ink-3);
  font-size: var(--step-0);
}

.photo-card-link {
  margin-top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--link);
}
.photo-card-link::after {
  content: '→';
  transition: transform 0.18s ease;
}
.photo-card:hover .photo-card-link::after {
  transform: translateX(3px);
}

/* On a tinted section the photo card must step up, and its scrim has to fade
   to the same colour or a seam appears where the image ends. */
.section-tint .photo-card {
  background: var(--surface-3);
}
.section-tint .photo-card-media::after {
  background: linear-gradient(180deg, transparent 45%, var(--surface-3) 100%);
}

/* Spec ticks inside a gradient tile. The default orange bullet is the brand
   accent and would read as wrong on the blue, green, violet and teal tiles,
   so inside a tile they go neutral. */
.tile-ticks {
  margin-top: var(--sp-3);
  gap: var(--sp-2);
}
.tile-ticks li {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--step--1);
  padding-left: 1.4rem;
}
.tile-ticks li::before {
  background: rgba(255, 255, 255, 0.72);
  width: 0.4rem;
  height: 0.4rem;
  top: 0.6em;
}

/* ── Glow card ───────────────────────────────────────────────────────── */

/* A dark card inside a lit gradient edge, with the same gradient blurred
   behind it as a bloom. The edge is done with two backgrounds and a
   transparent border (padding-box over border-box) rather than a stacked
   pseudo-element, so the interior stays a real background the text sits on
   instead of something painted over. */
.glow-grid {
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
}

.glow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(var(--sp-5), 2.2vw, var(--sp-6));
  border: 2px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(#0a0a0f, #0a0a0f) padding-box,
    var(--glow) border-box;
  /* The bloom is a box-shadow, not a blurred pseudo-element. A pseudo at
     z-index:-1 paints AFTER its parent's background when the parent makes a
     stacking context, so it washed colour across the card interior instead
     of sitting behind it. box-shadow has no such ordering trap and the
     interior stays the flat dark the text was measured against. */
  box-shadow:
    0 0 46px -6px var(--bloom),
    0 0 110px -30px var(--bloom);
}

.glow-badge {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: var(--sp-4);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-0);
  font-weight: 600;
  color: #fff;
}

.glow-card h3 {
  font-size: var(--step-2);
  color: #fff;
}

.glow-card p {
  color: var(--ink-3);
}

/* Four hues, cycling by position for the same reason as the tiles. */
.glow-card:nth-child(4n + 1) {
  --glow: linear-gradient(150deg, #ff601f, #ffb072);
  --bloom: rgba(255, 96, 31, 0.42);
}
.glow-card:nth-child(4n + 2) {
  --glow: linear-gradient(150deg, #2f6bff, #67d4ff);
  --bloom: rgba(64, 138, 255, 0.4);
}
.glow-card:nth-child(4n + 3) {
  --glow: linear-gradient(150deg, #7b5cff, #d97bff);
  --bloom: rgba(140, 100, 255, 0.4);
}
.glow-card:nth-child(4n + 4) {
  --glow: linear-gradient(150deg, #0fb1a8, #7ff0e6);
  --bloom: rgba(20, 190, 178, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
  .glow-card {
    transition: transform 0.22s ease;
  }
  .glow-card:hover {
    transform: translateY(-3px);
  }
}

/* ── Feature list ────────────────────────────────────────────────────── */
.ticks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.ticks li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--ink-2);
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Stats ───────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-5);
}

.stat b {
  display: block;
  font-size: var(--step-3);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat span {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* ── Split (copy beside media) ───────────────────────────────────────── */
.split {
  display: grid;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  /* Top-aligned: centring floated a short copy column in the middle of a tall
     list, leaving a void under the heading and another under the button. */
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* An image column is the one case where optical centring is right, since a
   picture has no baseline to line up with the text beside it. */
.split:has(.split-media) {
  align-items: center;
}

.split-media img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ── Closing band ────────────────────────────────────────────────────── */

/* Navy earns its place here: a large ground where it separates from black,
   rather than as type where it would not. */
.band {
  position: relative;
  background: linear-gradient(160deg, var(--navy), #050f24 70%);
  border-block: 1px solid var(--line);
  color: var(--ink-2);
  overflow: hidden;
}

.band::before {
  content: '';
  position: absolute;
  inset: -40% 45% 35% -12%;
  background: radial-gradient(50% 50% at 30% 50%, rgba(255, 96, 31, 0.22), transparent 70%);
  pointer-events: none;
}

.band .wrap {
  position: relative;
}

.band h2,
.band h3 {
  color: #fff;
}

.band .eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ── 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;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -3rem;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: #fff;
  color: #000;
  border-radius: var(--radius-pill);
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: var(--sp-4);
}

/* ═══════════════════════════════════════════════════════════════════════
   Site chrome
   ═══════════════════════════════════════════════════════════════════════ */

.utilbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--step--1);
}

.utilbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 38px;
}

.utilbar a {
  color: var(--ink-2);
}
.utilbar a:hover {
  color: #fff;
}

.utilbar-links {
  display: flex;
  gap: var(--sp-5);
}

@media (max-width: 800px) {
  .utilbar {
    display: none;
  }
}

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 76px;
}

/* Matches the homepage hero: a pill, because the mark is a 6:1 wordmark
   that a circle would shrink to nothing. */
.brand {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  background: #fff;
  border-radius: var(--radius-pill);
  flex: none;
}

.brand img {
  width: auto;
  height: 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.nav > a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.55em 0.85em;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.nav > a:hover,
.nav-trigger:hover,
.nav-item:hover .nav-trigger {
  color: #fff;
  background: var(--surface-3);
}

.nav-trigger::after {
  content: '';
  width: 0.34em;
  height: 0.34em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

.nav-item {
  position: relative;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 20rem;
  padding: var(--sp-3);
  background: #0e0e12;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}

.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu,
.nav-item.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-menu a {
  padding: var(--sp-3);
  border-radius: var(--radius);
}
.nav-menu a:hover {
  background: var(--surface-3);
}

.nav-menu strong {
  display: block;
  font-size: var(--step-0);
  font-weight: 600;
  color: #fff;
}

.nav-menu small {
  display: block;
  margin-top: 2px;
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.45;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.header-actions .btn {
  padding: 0.62em 1.2em;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--surface-3);
  color: #fff;
}

.nav-toggle {
  display: none;
}

@media (max-width: 1040px) {
  .nav {
    display: none;
  }
  .nav-toggle {
    display: inline-grid;
  }
  .header-actions .btn-desktop {
    display: none;
  }
  /* .nav carried the margin-left:auto that pushes everything after the logo
     to the right, so hiding it dropped the search and menu buttons back
     against the logo: 89px of dead space at 375, 724px at 1024. The actions
     have to own that margin once the nav is gone. */
  .header-actions {
    margin-left: auto;
  }
}

/* ── Mobile navigation ───────────────────────────────────────────────── */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  max-height: min(70vh, 32rem);
  overflow-y: auto;
}

.mobile-nav.open {
  display: block;
}

.mobile-nav .wrap {
  padding-block: var(--sp-4);
  display: grid;
  gap: 2px;
}

.mobile-nav a {
  padding: var(--sp-3);
  border-radius: var(--radius);
  color: var(--ink-2);
}
.mobile-nav a:hover {
  background: var(--surface-3);
  color: #fff;
}

.mobile-nav .mobile-group {
  margin-top: var(--sp-4);
  padding: 0 var(--sp-3);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  padding-block: clamp(var(--sp-8), 7vw, var(--sp-9)) var(--sp-6);
  font-size: var(--step-0);
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) {
  .footer-grid {
    gap: clamp(var(--sp-5), 3vw, var(--sp-7));
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }
  .footer-brand {
    grid-column: auto;
  }
}

.site-footer h2,
.site-footer b {
  color: #fff;
}

.footer-col b {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.footer-col a {
  display: block;
  padding-block: 0.35em;
  color: var(--ink-2);
}
.footer-col a:hover {
  color: var(--accent-ink);
}

.footer-brand img {
  width: 128px;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.8rem;
}

.footer-brand p {
  margin-top: var(--sp-4);
  max-width: 32ch;
  color: var(--ink-3);
}

.footer-contact {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}
.footer-contact a {
  color: #fff;
}

.footer-bottom {
  margin-top: clamp(var(--sp-7), 6vw, var(--sp-8));
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--step--1);
}

/* ── Search overlay ──────────────────────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  padding: clamp(var(--sp-6), 10vh, var(--sp-9)) var(--gutter);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.search-overlay.open {
  display: block;
}

.search-panel {
  max-width: 34rem;
  margin-inline: auto;
  background: #0e0e12;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.search-panel input {
  width: 100%;
  padding: var(--sp-5);
  font-size: var(--step-1);
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.search-panel input::placeholder {
  color: var(--ink-4);
}
.search-panel input:focus {
  outline: none;
}

.search-results {
  max-height: 22rem;
  overflow-y: auto;
  padding: var(--sp-2);
}

.search-results a {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--radius);
}
.search-results a:hover,
.search-results a:focus-visible {
  background: var(--surface-3);
}

.search-results b {
  display: block;
  color: #fff;
  font-weight: 500;
}

.search-results small {
  color: var(--ink-4);
  font-size: var(--step--1);
}

.search-results p {
  padding: var(--sp-4);
  color: var(--ink-3);
}

/* ── Contact form ────────────────────────────────────────────────────── */
.form-card {
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.form-fields {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.form-card label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  margin-top: var(--sp-2);
  padding: 0.75em 0.95em;
  font-size: var(--step-0);
  font-weight: 400;
  color: #fff;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.form-card textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 96, 31, 0.2);
}

.form-full {
  grid-column: 1 / -1;
}

.form-msg:empty {
  display: none;
}

.form-msg {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--step-0);
}

.form-msg.is-error {
  background: rgba(255, 96, 31, 0.12);
  border-color: rgba(255, 96, 31, 0.4);
  color: #ffb999;
}

.form-msg.is-sending {
  opacity: 0.75;
}

.form-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

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

/* ── Prose ───────────────────────────────────────────────────────────── */
.prose {
  max-width: 68ch;
}

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

.prose h2 {
  margin-top: var(--sp-8);
  font-size: var(--step-3);
}

.prose h3 {
  margin-top: var(--sp-7);
  font-size: var(--step-1);
}

.prose ul {
  padding-left: 1.2rem;
  display: grid;
  gap: var(--sp-2);
}

.prose li {
  color: var(--ink-2);
}

.prose a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose .updated {
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* ── Touch targets ───────────────────────────────────────────────────────
   Scoped to coarse pointers so a mouse-driven desktop keeps its tighter
   rhythm. Measured at 375px before this block: footer links 35px, icon
   buttons 40px, contact links 22px, breadcrumbs 21px.

   44px is the Apple HIG size and WCAG 2.5.5 (AAA). Breadcrumbs are the one
   exception at 32px: they are a secondary, single-line row and 44 would add
   more than 20px of dead height to every inner page. 32 still clears the
   24x24 that WCAG 2.5.8 (AA) actually requires. */
@media (pointer: coarse) {
  .footer-col a,
  .footer-contact a,
  .contact-link,
  .link-arrow,
  .mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Inline-flex, so these stay on the line they were on rather than
     becoming full-width blocks. */
  .link-arrow,
  .contact-link {
    display: inline-flex;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .crumbs a,
  .crumbs span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
}