/* =========================================================================
   ALTITUDES — Design System v.0
   Editorial brutalism × cloud-native restraint.
   Typography from Kyma (TASA Orbiter + Roboto Mono).
   Palette from Altitudes brandbook (ink, bone, lime, sky).
   ========================================================================= */

/* --- Fonts -------------------------------------------------------------
   TASA Orbiter — OFL-1.1, served via Fontsource on jsDelivr (variable, 400–800).
   Roboto Mono — Apache 2.0, served via Google Fonts (incl. italic).
   ----------------------------------------------------------------------- */
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/tasa-orbiter@5.2.2/index.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,500;0,600;0,700;1,600;1,700&display=swap');

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* — Palette: surfaces (warm cream family, Altitudes brandbook) — */
  --bone:           #F6F2E0;   /* primary light surface — warm cream */
  --bone-warm:      #FBF8EA;   /* warmer offset for cards in bone sections */
  --bone-cool:      #EFEFE4;   /* cooler bone for restraint */
  --sand:           #E5E0CC;   /* line / divider on bone */
  --sand-mute:      #9C9885;   /* secondary text on bone */

  /* — Palette: dark surfaces (navy-tinted, never pure black) — */
  --ink:            #1A1E33;   /* primary dark surface — softened brand navy */
  --ink-deep:       #0F1226;   /* max-contrast frame */
  --ink-soft:       #262A44;   /* dark card above ink */
  --ink-line:       #3D4262;   /* line / divider on ink */
  --ink-mute:       #6E7290;   /* secondary text on ink */
  --ink-bright:     #B8BBD4;   /* primary text on ink */

  /* — Palette: accents (Altitudes brand) — */
  --lime:           #DCEC6E;   /* signature accent — dusty brand lime, oklch(0.88 0.18 105) */
  --lime-hot:       #D1FF1F;   /* RESERVED — electric pop for status / single-CTA punch */
  --lime-soft:      #ECF1BA;   /* gentle lime wash */
  --mint:           #A8D9CD;   /* secondary accent — soft brand mint */
  --mint-soft:      #D4ECE4;   /* gentle mint wash */
  --sky:            #4F7FE0;   /* link / secondary accent — softened brand blue */
  --sky-soft:       #C8D8F4;   /* gentle sky wash */
  --sky-deep:       #2A52B8;   /* hover for sky */

  /* — Type families — */
  --font-display:   "TASA Orbiter Variable", "TASA Orbiter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:      "TASA Orbiter Variable", "TASA Orbiter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      "Roboto Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* — Type scale (display) — */
  --t-hero:         clamp(72px, 9.2vw, 144px);
  --t-display-xl:   clamp(56px, 6.2vw, 96px);
  --t-display-l:    clamp(40px, 4.6vw, 70px);
  --t-display-m:    clamp(32px, 3.4vw, 48px);
  --t-display-s:    clamp(24px, 2.4vw, 32px);

  /* — Type scale (mono / UI) — */
  --t-mono-xs:      10px;
  --t-mono-s:       11px;
  --t-mono-m:       12px;
  --t-mono-l:       14px;
  --t-body:         15px;
  --t-body-l:       18px;
  --t-lede:         22px;

  /* — Tracking — */
  --track-display:  -0.03em;
  --track-mono:     -0.03em;

  /* — Rhythm — */
  --section-pad:    120px;
  --section-pad-l:  180px;
  --container:      1320px;
  --gutter:         32px;

  /* — Motion ----------------------------------------------------------- */
  /* See design-system/MOTION.md for the full brand motion book. */

  /* Curves — three named easings + linear for marquees only. */
  --ease-snap:      cubic-bezier(0.68, 0, 0, 0.99);   /* CONTROLS — buttons, pills, CTAs       */
  --ease-arrive:    cubic-bezier(0.22, 1, 0.36, 1);   /* CONTENT — reveals, scroll arrivals    */
  --ease-color:     cubic-bezier(0.4, 0, 0.2, 1);     /* TINTS — color, opacity, links         */
  --ease-linear:    linear;                            /* MARQUEE — constant-velocity loops only */

  /* Compatibility aliases for the earlier token names. */
  --ease:           var(--ease-arrive);
  --dur-fast:       var(--dur-fast-canonical);
  --dur:            var(--dur-reveal);
  --dur-slow:       var(--dur-stage);

  /* Durations — five stops. Anything between is wrong (MOTION.md §4). */
  --dur-instant:    100ms;   /* Cursor → element under cursor. Hover color.                */
  --dur-fast-canonical: 240ms;   /* Default state change.                                  */
  --dur-control:    400ms;   /* Buttons / pills bg+fg crossfade.                           */
  --dur-reveal:     600ms;   /* Scroll-triggered content arrival.                          */
  --dur-stage:      800ms;   /* Hero stagger total ceiling.                                */

  /* Stagger units */
  --stagger-word:   40ms;
  --stagger-item:   80ms;

  /* Marquee speed */
  --marquee-speed:  28s;
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;       /* belt-and-suspenders for marquees */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
hr { border: 0; border-top: 1px solid var(--sand); margin: 0; }
::selection { background: var(--lime); color: var(--ink); }

/* --- Layout primitives ------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-pad) 0;
  position: relative;
}
.section.first { padding-top: var(--section-pad-l); }
.section--ink { background: var(--ink); color: var(--bone); }
.section--ink-deep { background: var(--ink-deep); color: var(--bone); }
.section--bone-warm { background: var(--bone-warm); }
.section--bone-cool { background: var(--bone-cool); }
.section--lime-soft { background: var(--lime-soft); }
.section--mint-soft { background: var(--mint-soft); }
.section--sky-soft { background: var(--sky-soft); }

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid currentColor;
  opacity: 1;
}
.section-head .section-head__line { border-color: var(--sand); }
.section--ink .section-head { border-color: var(--ink-line); }

.section-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--sand-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section--ink .section-tag { color: var(--ink-mute); }
.section-tag .num { color: var(--ink); }
.section--ink .section-tag .num { color: var(--bone); }

/* --- Display type ------------------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: var(--track-display);
  color: inherit;
  text-wrap: balance;
}
.display em, .display .it { font-style: italic; font-weight: 700; }
.display .brk { color: var(--sand-mute); font-weight: 700; }
.section--ink .display .brk { color: var(--ink-mute); }
.display .pop { color: var(--lime); }

h1.display { font-size: var(--t-hero); }
h2.display { font-size: var(--t-display-l); }
h3.display { font-size: var(--t-display-m); }
h4.display { font-size: var(--t-display-s); }

/* --- Mono / labels ----------------------------------------------------- */
.mono, .eyebrow, .label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow { color: var(--sand-mute); }
.section--ink .eyebrow { color: var(--ink-mute); }

.lede {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--t-lede);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 60ch;
  text-wrap: pretty;
}

.body {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 70ch;
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
  --btn-bg-hover: var(--ink-soft);
  --btn-fg-hover: var(--lime);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 50px;
  padding: 0 18px 0 22px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  border-radius: 0;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  cursor: pointer;
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); }
.btn .arrow { font-family: var(--font-mono); font-weight: 700; transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--lime {
  --btn-bg: var(--lime);
  --btn-fg: var(--ink);
  --btn-bg-hover: var(--ink);
  --btn-fg-hover: var(--lime);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bg-hover: var(--ink);
  --btn-fg-hover: var(--bone);
  border: 1px solid var(--ink);
}
.section--ink .btn--ghost {
  --btn-fg: var(--bone);
  --btn-bg-hover: var(--bone);
  --btn-fg-hover: var(--ink);
  border-color: var(--bone);
}

.btn--sm { min-height: 36px; padding: 0 12px 0 14px; gap: 12px; font-size: var(--t-mono-xs); }

/* --- Pills / badges ---------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  border-radius: 0;
}
.pill--ink { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pill--lime { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.pill--ghost-ink { border-color: var(--bone); color: var(--bone); }
.pill::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}
.pill.no-dot::before { display: none; }

/* --- Color swatches ---------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
@media (max-width: 880px) { .swatches { grid-template-columns: repeat(2, 1fr); } }
.swatch {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px 20px;
  min-height: 200px;
  background: var(--bone);
  position: relative;
}
.swatch__chip {
  width: 56px; height: 56px;
  border: 1px solid var(--ink);
}
.swatch--ink .swatch__chip { border-color: var(--bone); }
.swatch__meta { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; }
.swatch__name { display: block; margin-bottom: 4px; }
.swatch__hex { display: block; opacity: 0.6; font-weight: 500; }
.swatch__usage { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); opacity: 0.7; max-width: 22ch; line-height: 1.4; }

.swatch--bone { background: var(--bone); color: var(--ink); }
.swatch--bone-warm { background: var(--bone-warm); color: var(--ink); }
.swatch--bone-cool { background: var(--bone-cool); color: var(--ink); }
.swatch--sand { background: var(--sand); color: var(--ink); }
.swatch--ink { background: var(--ink); color: var(--bone); }
.swatch--ink-deep { background: var(--ink-deep); color: var(--bone); }
.swatch--ink-soft { background: var(--ink-soft); color: var(--bone); }
.swatch--lime { background: var(--lime); color: var(--ink); }
.swatch--lime-hot { background: var(--lime-hot); color: var(--ink); }
.swatch--lime-soft { background: var(--lime-soft); color: var(--ink); }
.swatch--mint { background: var(--mint); color: var(--ink); }
.swatch--mint-soft { background: var(--mint-soft); color: var(--ink); }
.swatch--sky { background: var(--sky); color: var(--bone); }
.swatch--sky-soft { background: var(--sky-soft); color: var(--ink); }
.swatch--sky-deep { background: var(--sky-deep); color: var(--bone); }
.swatch--sand-mute { background: var(--sand-mute); color: var(--ink); }
.swatch--ink-mute { background: var(--ink-mute); color: var(--bone); }

/* --- Type specimen ----------------------------------------------------- */
.spec {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--sand);
  align-items: baseline;
}
.section--ink .spec { border-color: var(--ink-line); }
.spec:last-child { border-bottom: 1px solid var(--sand); }
.section--ink .spec:last-child { border-color: var(--ink-line); }
.spec__meta { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute); }
.section--ink .spec__meta { color: var(--ink-mute); }
.spec__meta .row { display: block; }
.spec__meta .row + .row { margin-top: 4px; }
.spec__sample {}

.font-tasa { font-family: var(--font-display); }
.font-tasa-text { font-family: var(--font-text); }
.font-mono { font-family: var(--font-mono); }

/* --- Stat block -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: currentColor; border: 1px solid currentColor; }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.section--ink .stats { background: var(--ink-line); border-color: var(--ink-line); }
.stat {
  background: var(--bone);
  padding: 32px 28px 28px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 220px;
  justify-content: space-between;
}
.section--ink .stat { background: var(--ink); color: var(--bone); }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 60px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.stat__num .brk { color: var(--sand-mute); }
.section--ink .stat__num .brk { color: var(--ink-mute); }
.stat__lab {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--sand-mute);
  max-width: 22ch;
  line-height: 1.4;
}
.section--ink .stat__lab { color: var(--ink-mute); }

/* --- Cards ------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sand); border: 1px solid var(--sand); }
.section--ink .card-grid { background: var(--ink-line); border-color: var(--ink-line); }
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: var(--bone);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 24px;
  min-height: 280px;
}
.section--ink .card { background: var(--ink); color: var(--bone); }
.card__num { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute); }
.section--ink .card__num { color: var(--ink-mute); }
.card__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.0; letter-spacing: -0.025em; }
.card__body { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono-l); line-height: 1.55; letter-spacing: -0.01em; color: var(--ink); opacity: 0.78; max-width: 36ch; }
.section--ink .card__body { color: var(--bone); opacity: 0.7; }
.card__footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink); }
.section--ink .card__footer { color: var(--bone); }

/* --- Spacing / scale viz ----------------------------------------------- */
.scale-row { display: flex; align-items: end; gap: 24px; flex-wrap: wrap; }
.scale-bar { background: var(--ink); height: 64px; position: relative; }
.section--ink .scale-bar { background: var(--lime); }
.scale-bar span {
  position: absolute; bottom: -22px; left: 0;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono);
  color: var(--sand-mute);
}
.section--ink .scale-bar span { color: var(--ink-mute); }

/* --- Nav demo ---------------------------------------------------------- */
.nav-demo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: var(--ink);
  color: var(--bone);
  gap: 24px;
}
.nav-demo__brand { display: flex; align-items: center; gap: 12px; }
.nav-demo__brand svg { width: 22px; height: auto; color: var(--lime); }
.nav-demo__brand .wm { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.03em; }
.nav-demo__links { display: flex; gap: 6px; }
.nav-demo__links a {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  padding: 6px 12px; color: var(--ink-bright); transition: color var(--dur-fast) var(--ease);
}
.nav-demo__links a:hover { color: var(--lime); }

/* --- Quote ------------------------------------------------------------- */
.quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 26ch;
  text-wrap: balance;
}
.quote::before { content: "“"; color: var(--lime); margin-right: 0.1em; }
.quote::after { content: "”"; color: var(--lime); margin-left: 0.05em; }

/* --- Section-divider strip (lime/bone marquee feel) ------------------- */
.divider-strip {
  background: var(--lime); color: var(--ink);
  padding: 18px 0;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-l);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  overflow: hidden;
  border-top: 1px solid color-mix(in oklab, var(--lime) 70%, var(--ink) 30%);
  border-bottom: 1px solid color-mix(in oklab, var(--lime) 70%, var(--ink) 30%);
}
.divider-strip--mint { background: var(--mint); }
.divider-strip--sky-soft { background: var(--sky-soft); }
.divider-strip__inner {
  display: flex; gap: 56px; white-space: nowrap;
  padding-left: 32px;
}
.divider-strip__inner span { position: relative; }
.divider-strip__inner span::after { content: "→"; margin-left: 56px; opacity: 0.35; }

/* --- Document chrome (the docs page itself) --------------------------- */
.doc-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: var(--bone);
  border-bottom: 1px solid var(--sand);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.doc-nav__brand { display: flex; align-items: center; gap: 12px; }
.doc-nav__brand svg { width: 22px; height: auto; color: var(--ink); }
.doc-nav__brand .wm { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.03em; text-transform: none; }
.doc-nav__brand .sub { color: var(--sand-mute); padding-left: 12px; border-left: 1px solid var(--sand); margin-left: 8px; }
.doc-nav__links { display: flex; gap: 8px; }
.doc-nav__links a {
  padding: 6px 10px; color: var(--sand-mute); transition: color var(--dur-fast) var(--ease);
}
.doc-nav__links a:hover { color: var(--ink); }
.doc-nav__links a.active { color: var(--ink); }
@media (max-width: 720px) { .doc-nav__links { display: none; } }

/* --- Do / don't matrix ------------------------------------------------ */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: currentColor; border: 1px solid currentColor; }
.rule {
  background: var(--bone);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 180px;
}
.rule__mark {
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
  display: inline-flex; align-items: center; gap: 10px;
}
.rule--do { color: var(--ink); }
.rule--do .rule__mark::before { content: "✓"; color: var(--ink); background: var(--lime); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.rule--dont .rule__mark::before { content: "✕"; color: var(--bone); background: var(--ink); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.rule__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.025em; line-height: 1.05; }
.rule__body { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-mono-l); letter-spacing: -0.005em; line-height: 1.5; opacity: 0.75; }

@media (max-width: 720px) {
  .rules { grid-template-columns: 1fr; }
}

/* --- Big footnote ----------------------------------------------------- */
.footnote {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-mono-m); letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--sand-mute);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 32px 0; border-top: 1px solid var(--sand);
}
.section--ink .footnote { color: var(--ink-mute); border-color: var(--ink-line); }

/* --- Utility ---------------------------------------------------------- */
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row-l { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* =========================================================================
   MOTION — see design-system/MOTION.md for the full brand motion book.
   All animations respect prefers-reduced-motion (final block in this file).
   ========================================================================= */

/* --- Scroll-reveal ---------------------------------------------------- */
/*
 * Sections / blocks marked with `.reveal` start hidden and animate in when
 * IntersectionObserver fires `.is-visible`. JS lives in design-system/motion.js.
 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity   var(--dur-reveal) var(--ease-arrive),
    transform var(--dur-reveal) var(--ease-arrive),
    filter    var(--dur-reveal) var(--ease-arrive);
  will-change: opacity, transform, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Stagger children — 80ms cascade. JS sets `--reveal-i` per child. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--dur-reveal) var(--ease-arrive),
    transform var(--dur-reveal) var(--ease-arrive);
  transition-delay: calc(var(--reveal-i, 0) * var(--stagger-item));
  will-change: opacity, transform;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* --- Hero text reveal — word-by-word ---------------------------------- */
/*
 * Apply `.reveal-hero` to a heading and add `data-reveal-words` (set by JS,
 * which splits the heading into <span>s on first paint).
 * Each word fades + lifts + unblurs with 40ms stagger.
 */
.reveal-hero [data-word] {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(8px);
  transition:
    opacity   var(--dur-reveal) var(--ease-arrive),
    transform var(--dur-reveal) var(--ease-arrive),
    filter    var(--dur-reveal) var(--ease-arrive);
  transition-delay: calc(var(--word-i, 0) * var(--stagger-word));
  will-change: opacity, transform, filter;
}
.reveal-hero.is-visible [data-word] {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* Preserve word breaks — wrapping span carries the space. */
.reveal-hero [data-word]::after { content: "\00a0"; }

/* Character-split variant — finer-grained, used by .s-hero-epic */
.reveal-hero [data-char] {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(2deg);
  filter: blur(8px);
  transition:
    opacity   var(--dur-reveal) var(--ease-arrive),
    transform var(--dur-reveal) var(--ease-arrive),
    filter    var(--dur-reveal) var(--ease-arrive);
  /* 25ms per char keeps the total under 800ms for typical hero lines */
  transition-delay: calc(var(--char-i, 0) * 25ms);
  will-change: opacity, transform, filter;
}
.reveal-hero.is-visible [data-char] {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.reveal-hero [data-char]:empty { display: none; }

/* --- Marquee --------------------------------------------------------- */
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.divider-strip__inner {
  animation: marquee-x var(--marquee-speed) var(--ease-linear) infinite;
  will-change: transform;
}
.divider-strip:hover .divider-strip__inner {
  animation-play-state: paused;
}

/* --- Status dot pulse ------------------------------------------------- */
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime-hot);
  box-shadow: 0 0 8px var(--lime-hot);
  vertical-align: middle;
  margin-right: 8px;
  animation: status-pulse 2s var(--ease-linear) infinite;
  will-change: opacity;
}

/* --- Button hover — uses --ease-snap (Kyma's signature) ------------- */
/* Already defined in .btn earlier; here we explicitly use the new tokens. */
.btn {
  transition:
    background var(--dur-control) var(--ease-snap),
    color      var(--dur-control) var(--ease-snap),
    border-color var(--dur-control) var(--ease-snap);
}
.btn .arrow {
  transition: transform var(--dur-fast-canonical) var(--ease-arrive);
}

/* --- Card hover — bg tint shift, no shadow, no lift ------------------ */
.card { transition: background var(--dur-fast-canonical) var(--ease-color), border-color var(--dur-fast-canonical) var(--ease-color); }
.card:hover { background: var(--bone-warm); }
.section--ink .card:hover { background: var(--ink-soft); }

/* --- Link hover — color only ----------------------------------------- */
a { transition: color var(--dur-instant) var(--ease-color); }

/* --- Focus ring — instant, prominent --------------------------------- */
*:focus-visible {
  outline: 2px solid var(--lime-hot);
  outline-offset: 2px;
  border-radius: 0;
}

/* --- Sticky nav scrolled state --------------------------------------- */
.doc-nav {
  transition:
    background  var(--dur-fast-canonical) var(--ease-color),
    border-color var(--dur-fast-canonical) var(--ease-color);
}
.doc-nav.is-scrolled {
  background: color-mix(in oklab, var(--bone) 88%, var(--ink) 12%);
  border-bottom-color: var(--line-strong, var(--sand));
}

/* --- Count-up (digits animate when in view) -------------------------- */
/* No CSS animation — JS swaps text content. Class is the hook. */
.count-up { font-variant-numeric: tabular-nums; }

/* --- Reduced-motion override ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > *, .reveal-hero [data-word] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================================
   PAGE LOADER — see MOTION.md §13.
   A brief, deliberate brand entrance. ~1000ms total: counter 00→100 + brand
   mark + lime progress bar, then vertical strip wipe to reveal the page.
   Shown once per session (suppressed thereafter via sessionStorage).
   Skipped entirely under prefers-reduced-motion.
   ========================================================================= */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;       /* strips are the dark surface; loader is just a container */
  color: var(--bone);
  display: grid;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
}

.loader__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lime-hot);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-arrive);
  will-change: transform;
  box-shadow: 0 0 12px var(--lime-hot);
}
.loader.is-progressing .loader__bar { transform: scaleX(1); }

.loader__head,
.loader__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
  z-index: 2;
}
.loader__center { position: relative; z-index: 2; }
.loader__bar { z-index: 2; }
.loader__head { border-bottom: 1px solid var(--ink-line); opacity: 0; transition: opacity 240ms var(--ease-color) 120ms; }
.loader__foot { border-top: 1px solid var(--ink-line); opacity: 0; transition: opacity 240ms var(--ease-color) 120ms; }
.loader.is-progressing .loader__head,
.loader.is-progressing .loader__foot { opacity: 1; }

.loader__head .left,
.loader__foot .left { color: var(--bone); }
.loader__foot .right { color: var(--lime); display: inline-flex; align-items: center; gap: 8px; }

.loader__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
}

.loader__mark {
  width: 88px;
  height: auto;
  color: var(--lime-hot);
  opacity: 0;
  transform: scale(0.92) translateY(8px);
  transition:
    opacity   var(--dur-reveal) var(--ease-arrive),
    transform var(--dur-reveal) var(--ease-arrive);
  filter: drop-shadow(0 0 24px rgba(209, 255, 31, 0.18));
}
.loader.is-progressing .loader__mark {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.loader__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition:
    opacity   var(--dur-reveal) var(--ease-arrive) 80ms,
    transform var(--dur-reveal) var(--ease-arrive) 80ms,
    filter    var(--dur-reveal) var(--ease-arrive) 80ms;
}
.loader.is-progressing .loader__wordmark {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.loader__count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.025em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.loader__count::after { content: "%"; color: var(--ink-mute); margin-left: 4px; font-size: 14px; vertical-align: top; font-weight: 700; }

/* Vertical strip wipe — 6 columns slide up out of view to reveal the page */
.loader__wipe {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
  z-index: 1;
}
.loader__wipe span {
  background: var(--ink);
  transform: translateY(0);
  transition: transform 560ms var(--ease-arrive);
  will-change: transform;
}
/* Cascade the strips so they peel away rather than jump together */
.loader.is-exiting .loader__wipe span:nth-child(1) { transition-delay:   0ms; transform: translateY(-101%); }
.loader.is-exiting .loader__wipe span:nth-child(2) { transition-delay:  60ms; transform: translateY(-101%); }
.loader.is-exiting .loader__wipe span:nth-child(3) { transition-delay: 120ms; transform: translateY(-101%); }
.loader.is-exiting .loader__wipe span:nth-child(4) { transition-delay: 180ms; transform: translateY(-101%); }
.loader.is-exiting .loader__wipe span:nth-child(5) { transition-delay: 240ms; transform: translateY(-101%); }
.loader.is-exiting .loader__wipe span:nth-child(6) { transition-delay: 300ms; transform: translateY(-101%); }

/* When exiting, fade the chrome (head/foot/center) so the wipe carries it */
.loader.is-exiting .loader__head,
.loader.is-exiting .loader__foot,
.loader.is-exiting .loader__center,
.loader.is-exiting .loader__bar {
  opacity: 0;
  transition: opacity 200ms var(--ease-color);
}

/* The body locks scroll while the loader is visible */
html.is-loading,
html.is-loading body { overflow: hidden; }

/* Reduced motion: hide loader instantly */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none !important; }
  html.is-loading, html.is-loading body { overflow: visible; }
}

/* =========================================================================
   SECTION LIBRARY — see design-system/SECTIONS.md for the full catalogue.
   Each `.s-*` class is a self-contained reusable section. Compose pages by
   stacking them. Every section respects the same tokens and reduced-motion
   override as the rest of the system.
   ========================================================================= */

/* --- s-hero-epic — bold hero with background wordmark + character split ----
   Kyma reference: massive KYMA wordmark sitting behind the hero copy.
   We use the Altitudes "altitudes" wordmark as the silent background.
*/
.s-hero-epic {
  position: relative;
  min-height: 0;
  padding: clamp(80px, 11vh, 128px) 0 clamp(96px, 14vh, 160px) 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  isolation: isolate;
}
.s-hero-epic__topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 32px;
  align-items: center;
  margin-bottom: clamp(40px, 6vh, 64px);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.s-hero-epic__topbar > span:nth-child(2),
.s-hero-epic__topbar > span:nth-child(3) { text-align: center; }
.s-hero-epic__topbar > span:nth-child(4) { text-align: right; }
.s-hero-epic__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 20px;
}
.s-hero-epic__eyebrow .brk { color: var(--ink-mute); }
.s-hero-epic__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--bone);
  margin: 0 0 28px;
  max-width: 16ch;
  position: relative;
  z-index: 2;
}
.s-hero-epic__title .pop { color: var(--lime); }
.s-hero-epic__title .brk { color: var(--ink-mute); }
.s-hero-epic__lede {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--t-lede);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--bone);
  max-width: 52ch;
  margin: 0 0 36px;
  opacity: 0.85;
  position: relative;
  z-index: 2;
}
.s-hero-epic__cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* Background wordmark — sits behind the hero, slowly drifts up on scroll */
.s-hero-epic__bg-mark {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%) translateY(var(--bg-mark-y, 0));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(180px, 28vw, 480px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--bone) 6%, transparent);
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  user-select: none;
  will-change: transform;
}

/* Marquee strip pinned to bottom of hero — "trusted by", scrolling */
.s-hero-epic__strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bone);
  color: var(--ink);
  padding: 16px 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-l);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  overflow: hidden;
  z-index: 3;
}
.s-hero-epic__strip-inner {
  display: flex; gap: 56px; white-space: nowrap;
  padding-left: 32px;
  animation: marquee-x 32s linear infinite;
  will-change: transform;
}
.s-hero-epic__strip-inner span::after { content: "•"; margin-left: 56px; color: var(--sand-mute); }

/* --- s-trusted-by — hero-anchored credibility row -------------------------
   The Kyma pattern: stars + "trusted by N+" + avatar stack on the left,
   prominent fixed customer logos on the right. Bone background contrasts
   with the dark hero above it. Designed to sit pinned to the hero (replace
   the s-hero-epic__strip when you want named logos instead of the tagline
   marquee), or as a standalone strip elsewhere.
*/
.s-trusted-by {
  background: var(--bone-warm);
  color: var(--ink);
  padding: 18px 0;
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
}
.s-trusted-by--ink { background: var(--ink); color: var(--bone); border-color: var(--ink-line); }
.s-trusted-by__inner {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(220px, auto) 1fr;
  gap: 28px;
  align-items: center;
  min-height: 56px;
}
@media (max-width: 1200px) {
  .s-trusted-by__inner { grid-template-columns: minmax(140px, auto) 1fr; }
  .s-trusted-by__company { grid-column: 2; }
  .s-trusted-by__logos { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--sand); }
  .s-trusted-by--ink .s-trusted-by__logos { border-top-color: var(--ink-line); }
}
@media (max-width: 760px) {
  .s-trusted-by__inner { grid-template-columns: 1fr; gap: 16px; }
  .s-trusted-by__company { grid-column: 1; }
}

/* --- Star rating column --- */
.s-trusted-by__rating {
  display: flex; align-items: center; gap: 10px;
  padding-right: 32px;
  border-right: 1px solid var(--sand);
}
.s-trusted-by--ink .s-trusted-by__rating { border-right-color: var(--ink-line); }
@media (max-width: 1024px) {
  .s-trusted-by__rating { padding-right: 0; border-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--sand); }
}
.s-trusted-by__stars {
  display: inline-flex; gap: 2px;
  color: var(--ink);
  letter-spacing: -0.05em;
  font-size: 16px;
  line-height: 1;
}
.s-trusted-by__stars span { color: var(--ink); }
.s-trusted-by--ink .s-trusted-by__stars span { color: var(--lime); }
.s-trusted-by__rating-meta {
  display: grid; gap: 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.s-trusted-by__rating-meta strong { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.s-trusted-by__rating-meta span { color: var(--sand-mute); }

/* --- Avatar stack + "trusted by" column --- */
.s-trusted-by__company {
  display: flex; align-items: center; gap: 12px;
  padding-right: 32px;
  border-right: 1px solid var(--sand);
}
.s-trusted-by--ink .s-trusted-by__company { border-right-color: var(--ink-line); }
@media (max-width: 1024px) {
  .s-trusted-by__company { padding-right: 0; border-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--sand); }
}
.s-trusted-by__avatars {
  display: inline-flex;
  padding-left: 14px;
}
.s-trusted-by__avatars > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bone-warm);
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-mono);
  font-weight: 700; font-size: 11px;
  letter-spacing: -0.02em;
  margin-left: -14px;
}
.s-trusted-by--ink .s-trusted-by__avatars > span { border-color: var(--ink); background: var(--ink-soft); }
.s-trusted-by__avatars > span:nth-child(2) { background: var(--sky); color: var(--bone); }
.s-trusted-by__avatars > span:nth-child(3) { background: var(--mint); color: var(--ink); }
.s-trusted-by__avatars > span:last-child { background: var(--sand); color: var(--ink); }

.s-trusted-by__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.4;
}
.s-trusted-by__label .pop { color: var(--lime); padding: 0 4px; }
.s-trusted-by--ink .s-trusted-by__label { color: var(--bone); }

/* --- Customer logo row --- */
.s-trusted-by__logos {
  display: flex; align-items: center;
  gap: clamp(20px, 4vw, 56px);
  justify-content: space-between;
  min-width: 0; /* let the marquee track shrink to fit its column */
  overflow: hidden;
}
.s-trusted-by__logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity var(--dur-fast-canonical) var(--ease-color), color var(--dur-fast-canonical) var(--ease-color);
}
.s-trusted-by--ink .s-trusted-by__logo { color: var(--bone); }
.s-trusted-by__logo:hover { color: var(--ink); opacity: 1; }
.s-trusted-by__logo .glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--ink); color: var(--lime);
  font-size: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.s-trusted-by--ink .s-trusted-by__logo .glyph { background: var(--lime); color: var(--ink); }

/* --- s-companies — standalone "companies we work for" grid ------------------
   Bigger, calmer version of trusted-by. Used as its own section, not pinned
   to the hero. 6–8 logos in a single row, each in its own bordered tile.
*/
.s-companies {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-companies__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 64px;
}
.s-companies__eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-companies__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 12px 0 0; max-width: 18ch;
}
.s-companies__title .pop { color: var(--lime); }
.s-companies__count {
  text-align: right;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
.s-companies__count strong {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 40px;
  letter-spacing: -0.025em; color: var(--ink); margin-top: 4px;
}
.s-companies__count strong .pop { color: var(--lime); }

.s-companies__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
}
@media (max-width: 1024px) { .s-companies__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .s-companies__grid { grid-template-columns: 1fr; } }
.s-companies__tile {
  background: var(--bone);
  aspect-ratio: 16 / 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px;
  transition: background var(--dur-fast-canonical) var(--ease-color);
  text-align: center;
}
.s-companies__tile:hover { background: var(--bone-warm); }
/* Last tile alone on its row spans full width to avoid awkward empty cells */
.s-companies__tile:last-child:nth-child(4n+1) {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: 96px;
  background: var(--bone-warm);
  flex-direction: row;
  justify-content: center;
  gap: 24px;
}
.s-companies__tile:last-child:nth-child(4n+1) .s-companies__tile-glyph {
  width: 32px; height: 32px; font-size: 14px;
}
.s-companies__tile:last-child:nth-child(4n+1) .s-companies__tile-name { font-size: 20px; }
@media (max-width: 1024px) {
  .s-companies__tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.s-companies__tile-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--ink); color: var(--lime);
  font-size: 18px; line-height: 1;
  border-radius: 50%;
}
.s-companies__tile-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: -0.025em;
  color: var(--ink);
}
.s-companies__tile-meta {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}

/* Footer row of context tags — sector, region, work type */
.s-companies__foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sand);
  margin-top: 1px;
}
@media (max-width: 880px) { .s-companies__foot { grid-template-columns: 1fr; } }
.s-companies__foot > div {
  background: var(--bone-warm);
  padding: 24px 28px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.s-companies__foot > div strong {
  display: block; color: var(--ink); margin-bottom: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em;
}
.s-companies__foot > div span { color: var(--sand-mute); }

/* --- s-logo-strip — grayscale by default, color on hover ------------------- */
.s-logo-strip {
  padding: 64px 0;
  background: var(--bone);
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
  overflow: hidden;
}
.s-logo-strip__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 40px;
}
.s-logo-strip__eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-logo-strip__count {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink);
}
.s-logo-strip__count .pop { color: var(--lime); padding: 2px 8px; border: 1px solid var(--ink); }

.s-logo-strip__track {
  display: flex; align-items: center; gap: 72px;
  animation: marquee-x 38s linear infinite;
  will-change: transform;
  padding: 8px 0;
}
.s-logo-strip:hover .s-logo-strip__track { animation-play-state: paused; }

.s-logo-strip__logo {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--ink-mute);
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--dur-fast-canonical) var(--ease-color), opacity var(--dur-fast-canonical) var(--ease-color), color var(--dur-fast-canonical) var(--ease-color);
  white-space: nowrap;
}
.s-logo-strip__logo:hover { filter: grayscale(0); opacity: 1; color: var(--ink); }
.s-logo-strip__logo svg, .s-logo-strip__logo img { height: 28px; width: auto; }
.s-logo-strip__logo .dot {
  width: 24px; height: 24px;
  background: var(--ink); color: var(--bone);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
}

/* =========================================================================
   VERTICAL STRIPES UTILITY — Kyma-style 4-column grid lines.
   Any container with `data-stripes` gets three subtle 1px vertical lines at
   25%, 50%, 75% of its width. The motif persists across sections and
   creates the editorial column-grid feel that runs underneath all content.
   Tune intensity per surface via `--stripe-color`.

   Variants:
     `data-stripes`        default (auto picks ink-tint or bone-tint via ::before)
     `data-stripes="ink"`  on dark surface (bone-tinted lines)
     `data-stripes="bone"` on light surface (ink-tinted lines)
     `data-stripes-drift`  adds a slow vertical drift animation for liveness
   ========================================================================= */

[data-stripes] {
  position: relative;
  isolation: isolate;
  --stripe-color: color-mix(in oklab, var(--ink) 8%, transparent);
}
[data-stripes="ink"]  { --stripe-color: color-mix(in oklab, var(--bone) 10%, transparent); }
[data-stripes="bone"] { --stripe-color: color-mix(in oklab, var(--ink) 8%, transparent); }
[data-stripes]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, transparent 0, transparent calc(25% - 0.5px),
      var(--stripe-color) calc(25% - 0.5px), var(--stripe-color) calc(25% + 0.5px),
      transparent calc(25% + 0.5px), transparent 100%),
    linear-gradient(to right, transparent 0, transparent calc(50% - 0.5px),
      var(--stripe-color) calc(50% - 0.5px), var(--stripe-color) calc(50% + 0.5px),
      transparent calc(50% + 0.5px), transparent 100%),
    linear-gradient(to right, transparent 0, transparent calc(75% - 0.5px),
      var(--stripe-color) calc(75% - 0.5px), var(--stripe-color) calc(75% + 0.5px),
      transparent calc(75% + 0.5px), transparent 100%);
}
[data-stripes] > * { position: relative; z-index: 1; }

/* Drift variant — stripes very slowly translate up. Long duration so the
   motion is felt, not seen. Disabled under prefers-reduced-motion. */
[data-stripes-drift]::before {
  background-size: 100% 200%;
  animation: stripes-drift 40s linear infinite;
}
@keyframes stripes-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 -200%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-stripes-drift]::before { animation: none; }
}

/* =========================================================================
   s-bar-stat — Kyma-strengthened friction chart.
   Each row is a 60px-tall stripe-stack bar with a venetian-blind texture
   (horizontal sub-bars at 12px pitch). Filled portion scales from 0 to
   `--bar-fill` on reveal, with a staggered delay per row. Bad rows fill in
   ink (current state, heavy). Good rows fill in lime (after state, the win).
   Section sits on the vertical-stripes grid so the four columns of the
   chart frame line up with the editorial grid.
   ========================================================================= */
.s-bar-stat {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-bar-stat__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 64px;
}
.s-bar-stat__eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-bar-stat__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 12px 0 0; max-width: 24ch;
}
.s-bar-stat__title .pop { color: var(--lime); }
.s-bar-stat__title .brk { color: var(--sand-mute); }
.s-bar-stat__sub {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  max-width: 26ch; text-align: right;
}

.s-bar-stat__rows {
  display: grid; gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.s-bar-stat__row {
  display: grid;
  grid-template-columns: 240px 1fr 180px 110px;
  gap: 28px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--sand);
  --bar-color: var(--ink);
  --bar-track-color: color-mix(in oklab, var(--ink) 10%, transparent);
}
.s-bar-stat__row:last-child { border-bottom: 0; }
.s-bar-stat__row[data-variant="good"] {
  --bar-color: var(--lime);
  --bar-track-color: color-mix(in oklab, var(--lime) 22%, transparent);
}
.s-bar-stat__row-key {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink);
}
.s-bar-stat__row-key .brk { color: var(--sand-mute); }

/* The bar track — 60px tall venetian blind of horizontal sub-bars in the
   muted track color. 5 sub-bars visible at 12px pitch (9px stripe + 3px gap). */
.s-bar-stat__row-bar {
  position: relative;
  height: 60px;
  background-color: var(--bone);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--bar-track-color) 0,
    var(--bar-track-color) 9px,
    transparent 9px,
    transparent 12px
  );
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  overflow: hidden;
}
/* The fill — same sub-bar texture in the saturated bar color (ink for bad,
   lime for good). Scales X from 0 to --bar-fill on reveal, staggered. */
.s-bar-stat__row-bar-fill {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--bar-color) 0,
    var(--bar-color) 9px,
    transparent 9px,
    transparent 12px
  );
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1400ms var(--ease-arrive);
  transition-delay: calc(var(--bar-i, 0) * 140ms);
}
/* Marker line — a 2px highlight bar at the right edge of the fill, picks up
   the bar color at full saturation. Reads as the "trigger" stat indicator. */
.s-bar-stat__row-bar-fill::after {
  content: "";
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 2px;
  background: var(--bar-color);
}
.s-bar-stat.is-visible .s-bar-stat__row-bar-fill {
  transform: scaleX(var(--bar-fill, 0.5));
}

/* Big value number — bumped up so it carries weight against the 60px bar */
.s-bar-stat__row-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1; letter-spacing: -0.035em;
}
.s-bar-stat__row-value .brk { color: var(--sand-mute); }
.s-bar-stat__row-tag {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--ink);
  text-align: center;
  justify-self: end;
}
.s-bar-stat__row-tag--good { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.s-bar-stat__row-tag--bad { background: var(--ink); color: var(--bone); }

@media (max-width: 1024px) {
  .s-bar-stat__row { grid-template-columns: 200px 1fr 140px 90px; gap: 18px; }
  .s-bar-stat__row-bar { height: 56px; }
  .s-bar-stat__row-value { font-size: clamp(32px, 4vw, 48px); }
}
@media (max-width: 720px) {
  .s-bar-stat__row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .s-bar-stat__row-bar { height: 44px; }
  .s-bar-stat__row-value { font-size: 36px; }
  .s-bar-stat__row-tag { justify-self: start; }
}

/* --- s-roi-calc — interactive ROI projection ------------------------------- */
.s-roi-calc {
  padding: var(--section-pad) 0;
  background: var(--bone-warm);
}
.s-roi-calc__head { margin-bottom: 48px; }
.s-roi-calc__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.98; letter-spacing: -0.035em;
  max-width: 18ch; margin: 0;
}
.s-roi-calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--ink);
}
@media (max-width: 880px) { .s-roi-calc__grid { grid-template-columns: 1fr; } }
.s-roi-calc__inputs {
  padding: 40px 32px;
  background: var(--bone);
  border-right: 1px solid var(--ink);
  display: grid; gap: 24px;
}
@media (max-width: 880px) { .s-roi-calc__inputs { border-right: 0; border-bottom: 1px solid var(--ink); } }
.s-roi-calc__field { display: grid; gap: 8px; }
.s-roi-calc__field label {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink);
}
.s-roi-calc__field input,
.s-roi-calc__field select {
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px;
  line-height: 1; letter-spacing: -0.025em;
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.s-roi-calc__field input:focus,
.s-roi-calc__field select:focus { border-bottom-color: var(--lime); }
.s-roi-calc__field .hint {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: var(--track-mono); color: var(--sand-mute);
}

.s-roi-calc__output {
  padding: 40px 32px;
  background: var(--ink); color: var(--bone);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 32px;
}
.s-roi-calc__output-eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute);
}
.s-roi-calc__output-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.9; letter-spacing: -0.04em; color: var(--lime);
  display: block;
}
.s-roi-calc__output-label {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--bone);
  margin-top: 8px;
}
.s-roi-calc__breakdown {
  display: grid; gap: 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body);
  color: var(--ink-bright);
  border-top: 1px solid var(--ink-line);
  padding-top: 20px;
}
.s-roi-calc__breakdown-row {
  display: flex; justify-content: space-between;
}

/* --- s-service-table — IDs + service + outcome, hover reveals detail ------- */
.s-service-table {
  padding: var(--section-pad) 0;
  background: var(--ink);
  color: var(--bone);
}
.s-service-table__head {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 80px;
  gap: 24px;
  padding-bottom: 16px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute);
}
.s-service-table__head > span:nth-child(4) { text-align: right; }

.s-service-table__row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 80px;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--ink-line);
  cursor: pointer;
  transition: background var(--dur-fast-canonical) var(--ease-color);
}
.s-service-table__row:hover { background: var(--ink-soft); }
.s-service-table__row-num {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); color: var(--ink-mute);
}
.s-service-table__row-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 32px; line-height: 1; letter-spacing: -0.025em;
}
.s-service-table__row-outcome {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body);
  color: var(--ink-bright); opacity: 0.85;
}
.s-service-table__row-arrow {
  font-family: var(--font-mono); font-weight: 700; font-size: 22px;
  text-align: right; color: var(--bone);
  transition: transform var(--dur-fast-canonical) var(--ease-arrive), color var(--dur-fast-canonical) var(--ease-color);
}
.s-service-table__row:hover .s-service-table__row-arrow { transform: translateX(6px); color: var(--lime); }

/* --- s-process — 4-step numbered process with metric counter --------------- */
.s-process {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-process__head {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
  margin-bottom: 64px;
}
.s-process__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 12px 0 0; max-width: 20ch;
}
.s-process__title .pop { color: var(--lime); }
/* Narrative bridge before the embedded diagram.
   No side-stripe — positional weight + mono register carry the bridge role. */
.s-process__diagram-lead {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.8;
  margin: -40px 0 0;
  max-width: 68ch;
}
.s-process__metric {
  text-align: right; font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-process__metric strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 48px; color: var(--ink); margin-top: 4px; letter-spacing: -0.025em; }

.s-process__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sand); border: 1px solid var(--sand); }
@media (max-width: 1024px) { .s-process__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .s-process__steps { grid-template-columns: 1fr; } }
.s-process__step {
  background: var(--bone); padding: 32px 28px; min-height: 280px;
  display: flex; flex-direction: column; gap: 16px;
}
.s-process__step-num {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-process__step-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.025em; }
.s-process__step-body { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body); line-height: 1.55; color: var(--ink); opacity: 0.8; }
.s-process__step-duration {
  margin-top: auto;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink);
  padding-top: 16px; border-top: 1px solid var(--sand);
}

/* --- s-feature-case — large featured customer story ---------------------- */
.s-feature-case {
  padding: var(--section-pad) 0;
  background: var(--bone-warm);
}
.s-feature-case__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  border: 1px solid var(--ink);
}
@media (max-width: 880px) { .s-feature-case__inner { grid-template-columns: 1fr; } }
.s-feature-case__story {
  padding: 48px 40px;
  background: var(--bone);
  border-right: 1px solid var(--ink);
}
@media (max-width: 880px) { .s-feature-case__story { border-right: 0; border-bottom: 1px solid var(--ink); } }
.s-feature-case__meta { display: flex; gap: 16px; font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute); margin-bottom: 24px; }
.s-feature-case__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.s-feature-case__title .pop { color: var(--lime); }
.s-feature-case__lede {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body-l);
  line-height: 1.6; color: var(--ink); opacity: 0.85; max-width: 60ch; margin-bottom: 32px;
}
.s-feature-case__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid var(--ink); }

.s-feature-case__stats { background: var(--ink); color: var(--bone); padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.s-feature-case__stat { border-bottom: 1px solid var(--ink-line); padding-bottom: 24px; }
.s-feature-case__stat:last-child { border-bottom: 0; padding-bottom: 0; }
.s-feature-case__stat-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(48px, 7vw, 80px);
  line-height: 0.9; letter-spacing: -0.04em; color: var(--lime);
  display: block;
}
.s-feature-case__stat-label {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute);
  margin-top: 8px;
}

/* --- s-testimonial-grid — irregular grid of testimonials ----------------- */
.s-testimonial-grid {
  padding: var(--section-pad) 0;
  background: var(--ink);
  color: var(--bone);
}
.s-testimonial-grid__rows {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line);
}
@media (max-width: 1024px) { .s-testimonial-grid__rows { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .s-testimonial-grid__rows { grid-template-columns: 1fr; } }
.s-testimonial-grid__card {
  background: var(--ink); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
  min-height: 260px;
}
.s-testimonial-grid__card--tall { grid-row: span 2; background: var(--ink-soft); }
.s-testimonial-grid__quote { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.s-testimonial-grid__quote::before { content: "“"; color: var(--lime); margin-right: 0.1em; }
.s-testimonial-grid__quote::after { content: "”"; color: var(--lime); margin-left: 0.05em; }
.s-testimonial-grid__attr { margin-top: auto; font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute); }
.s-testimonial-grid__attr strong { display: block; color: var(--bone); margin-bottom: 4px; }

/* --- s-tech-stack — grid of tool tiles with hover reveal ----------------- */
.s-tech-stack {
  padding: var(--section-pad) 0;
  background: var(--bone-cool);
}
.s-tech-stack__head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 48px; }
.s-tech-stack__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 0.98; letter-spacing: -0.035em; margin: 0; }
.s-tech-stack__more { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute); padding: 8px 14px; border: 1px solid var(--ink); }
.s-tech-stack__more .pop { color: var(--lime); padding: 0 4px; }

.s-tech-stack__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--sand); border: 1px solid var(--sand);
}
@media (max-width: 880px)  { .s-tech-stack__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .s-tech-stack__grid { grid-template-columns: repeat(2, 1fr); } }
.s-tech-stack__tile {
  background: var(--bone); aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--dur-fast-canonical) var(--ease-color);
  text-align: center;
  padding: 12px;
}
.s-tech-stack__tile:hover { background: var(--bone-warm); }
.s-tech-stack__tile-icon { font-size: 36px; line-height: 1; }
.s-tech-stack__tile-name { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink); }

/* --- s-pricing — solution pricing toggle (monthly / annual) -------------- */
.s-pricing { padding: var(--section-pad) 0; background: var(--bone); }
.s-pricing__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.s-pricing__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 0.98; letter-spacing: -0.035em; margin: 0; max-width: 18ch; }
.s-pricing__toggle { display: inline-flex; border: 1px solid var(--ink); padding: 0; }
.s-pricing__toggle button {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  padding: 12px 20px; background: transparent; color: var(--ink);
  cursor: pointer; border: 0; border-radius: 0;
  transition: background var(--dur-fast-canonical) var(--ease-color), color var(--dur-fast-canonical) var(--ease-color);
}
.s-pricing__toggle button.is-active { background: var(--ink); color: var(--bone); }
.s-pricing__toggle button .save { color: var(--lime); margin-left: 6px; }

.s-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sand); border: 1px solid var(--sand); }
@media (max-width: 1024px) { .s-pricing__grid { grid-template-columns: 1fr; } }

.s-pricing__card { background: var(--bone); padding: 36px 32px; display: flex; flex-direction: column; gap: 24px; }
.s-pricing__card--featured { background: var(--ink); color: var(--bone); }
.s-pricing__card--featured .s-pricing__card-name,
.s-pricing__card--featured .s-pricing__card-price,
.s-pricing__card--featured .s-pricing__card-body,
.s-pricing__card--featured .s-pricing__card-features li { color: var(--bone); }
.s-pricing__card--featured .s-pricing__card-features li::before { color: var(--lime); }

.s-pricing__card-tag { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute); display: flex; justify-content: space-between; }
.s-pricing__card-tag .badge { background: var(--lime); color: var(--ink); padding: 2px 8px; }
.s-pricing__card-name { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.025em; }
.s-pricing__card-price { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 0.95; letter-spacing: -0.035em; }
.s-pricing__card-price small { font-size: 14px; font-weight: 500; font-family: var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute); margin-left: 4px; }
.s-pricing__card-body { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body); line-height: 1.55; color: var(--ink); opacity: 0.85; max-width: 36ch; }
.s-pricing__card-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.s-pricing__card-features li {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body);
  padding-left: 20px; position: relative;
  color: var(--ink);
}
.s-pricing__card-features li::before { content: "→"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }

/* --- s-faq — accordion FAQ ---------------------------------------------- */
.s-faq { padding: var(--section-pad) 0; background: var(--bone); }
.s-faq__inner { max-width: 980px; margin: 0 auto; }
.s-faq__head { margin-bottom: 48px; }
.s-faq__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 0.98; letter-spacing: -0.035em; margin: 0; }
.s-faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.s-faq__item { border-bottom: 1px solid var(--sand); padding: 24px 0; }
.s-faq__item summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 40px 1fr auto; gap: 24px; align-items: baseline; }
.s-faq__item summary::-webkit-details-marker { display: none; }
.s-faq__item-num { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); color: var(--sand-mute); }
.s-faq__item-q { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.s-faq__item-mark { font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--sand-mute); transition: transform var(--dur-fast-canonical) var(--ease-arrive), color var(--dur-fast-canonical) var(--ease-color); }
.s-faq__item[open] .s-faq__item-mark { transform: rotate(45deg); color: var(--ink); }
.s-faq__item-a { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body); line-height: 1.6; color: var(--ink); opacity: 0.78; margin: 16px 0 0 64px; max-width: 70ch; }

/* --- s-cta-big — large closing CTA -------------------------------------- */
.s-cta-big {
  padding: var(--section-pad) 0;
  background: var(--ink); color: var(--bone);
  position: relative; overflow: hidden;
}
.s-cta-big__bg-mark {
  position: absolute; left: 50%; bottom: -12%;
  transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(180px, 28vw, 480px);
  line-height: 1; letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--bone) 4%, transparent);
  pointer-events: none; z-index: 1; white-space: nowrap; user-select: none;
}
.s-cta-big__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
@media (max-width: 880px) { .s-cta-big__inner { grid-template-columns: 1fr; gap: 32px; } }
.s-cta-big__eyebrow { font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute); margin-bottom: 24px; display: block; }
.s-cta-big__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 8vw, 120px); line-height: 0.92; letter-spacing: -0.04em; margin: 0; max-width: 16ch; }
.s-cta-big__title .pop { color: var(--lime); }
.s-cta-big__side { display: flex; flex-direction: column; gap: 16px; }
.s-cta-big__reassurance { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body); color: var(--ink-bright); opacity: 0.8; }

/* --- s-marquee-tagline — large rotating tagline ------------------------- */
.s-marquee-tagline {
  background: var(--lime); color: var(--ink);
  padding: 32px 0;
  overflow: hidden;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.s-marquee-tagline__inner {
  display: flex; gap: 64px; white-space: nowrap;
  animation: marquee-x 24s linear infinite;
  will-change: transform;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.035em;
  line-height: 1;
}
.s-marquee-tagline:hover .s-marquee-tagline__inner { animation-play-state: paused; }
.s-marquee-tagline__inner span::after { content: " /"; color: var(--ink); opacity: 0.4; margin-left: 64px; }

/* --- s-footer — full-page footer with brand mark, nav columns, newsletter,
   legal row, and a big background wordmark. Every page ends with one.
*/
.s-footer {
  background: var(--ink-deep);
  color: var(--bone);
  padding: var(--section-pad) 0 32px;
  position: relative;
  overflow: hidden;
}
.s-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
}
@media (max-width: 1024px) { .s-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px)  { .s-footer__top { grid-template-columns: 1fr; } }

.s-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.s-footer__lockup { display: flex; align-items: center; gap: 12px; }
.s-footer__lockup svg { width: 32px; height: auto; color: var(--lime); }
.s-footer__lockup .wm { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.025em; color: var(--bone); }
.s-footer__pitch {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body);
  line-height: 1.55; color: var(--ink-bright); opacity: 0.85; max-width: 32ch;
}
.s-footer__contact {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--bone);
  margin-top: 12px; display: grid; gap: 6px;
}
.s-footer__contact a { color: var(--lime); }
.s-footer__contact .muted { color: var(--ink-mute); }

.s-footer__col h4 {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute);
  margin: 0 0 16px;
}
.s-footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.s-footer__col a { color: var(--ink-bright); transition: color var(--dur-instant) var(--ease-color); }
.s-footer__col a:hover { color: var(--lime); }

.s-footer__newsletter form {
  display: grid; gap: 12px;
}
.s-footer__newsletter input {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  padding: 12px 14px;
  background: transparent; color: var(--bone);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  outline: none;
}
.s-footer__newsletter input::placeholder { color: var(--ink-mute); }
.s-footer__newsletter input:focus { border-color: var(--lime); }
.s-footer__newsletter button {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  padding: 12px 14px;
  background: var(--lime); color: var(--ink); border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: 0;
  transition: background var(--dur-fast-canonical) var(--ease-snap), color var(--dur-fast-canonical) var(--ease-snap);
}
.s-footer__newsletter button:hover { background: var(--bone); color: var(--ink); }
.s-footer__newsletter p {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: var(--track-mono); color: var(--ink-mute);
  line-height: 1.4; max-width: 28ch; margin: 0;
}

.s-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 24px; border-top: 1px solid var(--ink-line);
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-mute);
  position: relative; z-index: 2;
  flex-wrap: wrap;
}
.s-footer__bottom .legal { display: flex; gap: 24px; }
.s-footer__bottom .legal a { color: var(--ink-mute); }
.s-footer__bottom .legal a:hover { color: var(--bone); }
.s-footer__bottom .live { color: var(--bone); display: inline-flex; align-items: center; gap: 6px; }

.s-footer__bg-mark {
  position: absolute; left: 50%; bottom: -16%;
  transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(180px, 28vw, 480px);
  line-height: 1; letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--bone) 3%, transparent);
  pointer-events: none; z-index: 1; white-space: nowrap; user-select: none;
}

/* --- s-team — meet the people; named cards with id/role/location ---------- */
.s-team {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-team__head {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
  margin-bottom: 64px;
}
.s-team__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 12px 0 0; max-width: 20ch;
}
.s-team__title .pop { color: var(--lime); }
.s-team__sub {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  max-width: 30ch; text-align: right;
}

.s-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
}
@media (max-width: 1024px) { .s-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .s-team__grid { grid-template-columns: 1fr; } }

.s-team__card {
  background: var(--bone);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 20px;
  min-height: 320px;
  transition: background var(--dur-fast-canonical) var(--ease-color);
}
.s-team__card:hover { background: var(--bone-warm); }
.s-team__card-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
.s-team__card-meta .id { color: var(--ink); }
.s-team__card-avatar {
  width: 100%; aspect-ratio: 1; background: var(--ink); color: var(--lime);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 56px; letter-spacing: -0.04em;
  border: 1px solid var(--ink);
  overflow: hidden;
}
.s-team__card-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; line-height: 1.05; letter-spacing: -0.025em;
}
.s-team__card-role {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute); margin-top: -8px;
}
.s-team__card-bio {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  line-height: 1.55; color: var(--ink); opacity: 0.78;
  margin-top: auto;
}

.s-team__more {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px; padding: 24px 28px;
  background: var(--ink); color: var(--bone);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.s-team__more .lime { color: var(--lime); }

/* --- s-articles — article preview cards with byline / date / category ----- */
.s-articles {
  padding: var(--section-pad) 0;
  background: var(--bone-warm);
}
.s-articles__head {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
  margin-bottom: 48px;
}
.s-articles__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 12px 0 0; max-width: 18ch;
}
.s-articles__all {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink); padding: 8px 14px; border: 1px solid var(--ink);
  transition: background var(--dur-fast-canonical) var(--ease-color), color var(--dur-fast-canonical) var(--ease-color);
}
.s-articles__all:hover { background: var(--ink); color: var(--bone); }

.s-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--sand);
  border: 1px solid var(--sand);
}
@media (max-width: 1024px) { .s-articles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .s-articles__grid { grid-template-columns: 1fr; } }

.s-articles__card {
  background: var(--bone); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 360px;
  transition: background var(--dur-fast-canonical) var(--ease-color);
}
.s-articles__card:hover { background: var(--bone-warm); }
.s-articles__card-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.s-articles__card-meta .date { color: var(--sand-mute); }
.s-articles__card-meta .cat { color: var(--ink); padding: 2px 8px; border: 1px solid var(--ink); }
.s-articles__card-author {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-articles__card-author .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--lime);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
}
.s-articles__card-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 24px; line-height: 1.1; letter-spacing: -0.025em;
}
.s-articles__card-body {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  line-height: 1.55; color: var(--ink); opacity: 0.78;
  margin-top: auto;
}
.s-articles__card-arrow {
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--ink);
  display: flex; justify-content: flex-end;
  transition: transform var(--dur-fast-canonical) var(--ease-arrive);
}
.s-articles__card:hover .s-articles__card-arrow { transform: translateX(6px); }

/* --- s-contact-form — multi-field form, founder reassurance sidebar ------- */
.s-contact-form {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-contact-form__head { margin-bottom: 48px; }
.s-contact-form__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0; max-width: 18ch;
}
.s-contact-form__title .pop { color: var(--lime); }

.s-contact-form__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
  border: 1px solid var(--ink);
}
@media (max-width: 960px) { .s-contact-form__grid { grid-template-columns: 1fr; } }

.s-contact-form__form {
  padding: 40px 32px;
  background: var(--bone-warm);
  border-right: 1px solid var(--ink);
  display: grid; gap: 28px;
}
@media (max-width: 960px) { .s-contact-form__form { border-right: 0; border-bottom: 1px solid var(--ink); } }

.s-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .s-contact-form__row { grid-template-columns: 1fr; } }

.s-contact-form__field { display: grid; gap: 8px; }
.s-contact-form__field label {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink);
}
.s-contact-form__field label .req { color: var(--lime); margin-left: 4px; }
.s-contact-form__field input,
.s-contact-form__field select,
.s-contact-form__field textarea {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-body);
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  letter-spacing: -0.005em;
}
.s-contact-form__field textarea { resize: vertical; min-height: 80px; padding: 10px 0; }
.s-contact-form__field input:focus,
.s-contact-form__field select:focus,
.s-contact-form__field textarea:focus { border-bottom-color: var(--lime); }
.s-contact-form__field .hint {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: var(--track-mono); color: var(--sand-mute);
}
.s-contact-form__submit {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--lime); color: var(--ink); border: 0; padding: 18px 22px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  cursor: pointer; border-radius: 0;
  transition: background var(--dur-control) var(--ease-snap), color var(--dur-control) var(--ease-snap);
}
.s-contact-form__submit:hover { background: var(--ink); color: var(--lime); }
.s-contact-form__legal {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: var(--track-mono); color: var(--sand-mute); line-height: 1.45;
  max-width: 60ch;
}

.s-contact-form__aside {
  background: var(--ink); color: var(--bone);
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.s-contact-form__aside-eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute);
}
.s-contact-form__aside-quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; color: var(--bone);
}
.s-contact-form__aside-quote::before { content: "“"; color: var(--lime); margin-right: 0.1em; }
.s-contact-form__aside-quote::after { content: "”"; color: var(--lime); margin-left: 0.05em; }
.s-contact-form__aside-attr {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute);
}
.s-contact-form__aside-attr strong { display: block; color: var(--bone); margin-bottom: 4px; }

.s-contact-form__aside-promise {
  margin-top: auto;
  border-top: 1px solid var(--ink-line);
  padding-top: 24px;
  display: grid; gap: 12px;
}
.s-contact-form__aside-promise .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.s-contact-form__aside-promise .row span:first-child { color: var(--ink-mute); }
.s-contact-form__aside-promise .row span:last-child { color: var(--lime); }

/* --- TopBar — Kyma-style status-bar nav -----------------------------------
   Fixed at the top of every page. Mono-font labels, live clock, MENU button.
   Status dot pulses lime-hot. The full nav lives inside the MenuOverlay panel
   that opens when MENU is clicked.
*/
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 24px;
  background: color-mix(in oklab, var(--bone) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: background var(--dur-fast-canonical) var(--ease-color), border-color var(--dur-fast-canonical) var(--ease-color);
}
.topbar.is-on-ink {
  background: color-mix(in oklab, var(--ink) 80%, transparent);
  border-bottom-color: var(--ink-line);
  color: var(--ink-mute);
}
.topbar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
  text-transform: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.025em;
}
.topbar.is-on-ink .topbar__brand { color: var(--bone); }
.topbar__brand svg { width: 22px; height: auto; color: var(--ink); }
.topbar.is-on-ink .topbar__brand svg { color: var(--lime); }
.topbar__focus { text-align: center; }
.topbar__meta { text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.topbar__clock {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}
.topbar.is-on-ink .topbar__clock { color: var(--ink-bright); opacity: 0.7; }

.topbar__menu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--ink); color: var(--bone);
  border: 0; border-radius: 0;
  cursor: pointer;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  transition: background var(--dur-fast-canonical) var(--ease-snap), color var(--dur-fast-canonical) var(--ease-snap);
}
.topbar__menu-btn:hover { background: var(--lime); color: var(--ink); }
.topbar__menu-btn:hover .topbar__menu-icon span { background: var(--ink); }
.topbar__menu-icon {
  display: inline-flex; flex-direction: column; gap: 3px; align-items: stretch;
  width: 14px;
}
.topbar__menu-icon span {
  display: block; height: 2px; background: var(--bone);
  transition: background var(--dur-fast-canonical) var(--ease-snap), transform var(--dur-fast-canonical) var(--ease-snap);
}
.topbar.is-on-ink {
  /* keep MENU button visible on dark */
}
@media (max-width: 720px) {
  /* Show brand + compact meta (clock+dot) + MENU on one row */
  .topbar { grid-template-columns: 1fr auto auto; }
  .topbar__focus, .topbar__meta-text { display: none; }
}
@media (max-width: 480px) {
  /* Tightest viewport: drop the clock too, keep brand + MENU only */
  .topbar { grid-template-columns: 1fr auto; }
  .topbar__meta { display: none; }
}

/* --- MenuOverlay — full-screen Kyma-style menu ---------------------------
   Fills the entire viewport with a bone background. Left column shows a
   featured case study; middle/right column carries the primary nav and
   secondary listings. Close button anchored top-right.
*/
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
}
.menu-overlay__panel {
  position: absolute; inset: 0;
  background: var(--bone);
  color: var(--ink);
  display: block;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-control) var(--ease-arrive), transform var(--dur-control) var(--ease-arrive);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.menu-overlay.is-open { pointer-events: auto; }
.menu-overlay.is-open .menu-overlay__panel {
  opacity: 1;
  transform: translateY(0);
}

/* Close button — pinned to viewport top-right via the overlay, not the panel,
   so it stays visible while the panel scrolls underneath. */
.menu-overlay__close {
  position: absolute;
  top: 24px; right: 24px;
  opacity: 0;
  transition: opacity var(--dur-control) var(--ease-arrive) 80ms;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--ink); color: var(--bone);
  border: 0; cursor: pointer;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  border-radius: 0;
  z-index: 4;
  transition: background var(--dur-fast-canonical) var(--ease-snap), color var(--dur-fast-canonical) var(--ease-snap);
}
.menu-overlay.is-open .menu-overlay__close { opacity: 1; }
.menu-overlay__close:hover { background: var(--lime); color: var(--ink); }
.menu-overlay__close-icon {
  display: inline-block; width: 14px; height: 14px; position: relative;
}
.menu-overlay__close-icon::before,
.menu-overlay__close-icon::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 2px; background: var(--bone); transform-origin: center;
}
.menu-overlay__close-icon::before { transform: rotate(45deg); }
.menu-overlay__close-icon::after  { transform: rotate(-45deg); }
.menu-overlay__close:hover .menu-overlay__close-icon::before,
.menu-overlay__close:hover .menu-overlay__close-icon::after { background: var(--ink); }

/* Two-column grid: featured case on the left, nav + secondary on the right */
.menu-overlay__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  width: 100%;
  min-height: 100vh;
}
@media (max-width: 960px) {
  .menu-overlay__grid { grid-template-columns: 1fr; }
}

/* Featured case (left column) */
.menu-overlay__featured {
  padding: 80px 48px 48px;
  display: flex; flex-direction: column;
  gap: 24px;
  background: var(--bone-warm);
  border-right: 1px solid var(--sand);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast-canonical) var(--ease-color);
}
.menu-overlay__featured:hover { background: var(--bone); }
@media (max-width: 960px) {
  .menu-overlay__featured { border-right: 0; border-bottom: 1px solid var(--sand); padding: 80px 24px 32px; }
}
.menu-overlay__featured-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
.menu-overlay__featured-visual {
  background: var(--ink); color: var(--lime);
  aspect-ratio: 5 / 4;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.menu-overlay__featured-visual svg {
  width: 50%; height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 24px rgba(209, 255, 31, 0.25));
}
.menu-overlay__featured-stats {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  background: var(--ink-deep);
  padding: 16px 18px;
  border: 1px solid var(--ink-line);
}
.menu-overlay__featured-stats > div {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-mute);
}
.menu-overlay__featured-stats strong {
  font-family: var(--font-display); font-weight: 800;
  font-size: 24px; letter-spacing: -0.025em;
  color: var(--bone);
}
.menu-overlay__featured-tag {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
.menu-overlay__featured-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1; letter-spacing: -0.025em;
  margin: 8px 0 0; max-width: 22ch;
}

/* Primary nav (right column) */
.menu-overlay__nav {
  padding: 80px 48px 48px;
  display: flex; flex-direction: column;
  gap: 0;
}
@media (max-width: 960px) {
  .menu-overlay__nav { padding: 24px; }
}

.menu-overlay__nav-item {
  display: block;
  padding: 4px 0;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-instant) var(--ease-color), padding-left var(--dur-fast-canonical) var(--ease-arrive);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-reveal) var(--ease-arrive), transform var(--dur-reveal) var(--ease-arrive), color var(--dur-instant) var(--ease-color), padding-left var(--dur-fast-canonical) var(--ease-arrive);
  transition-delay: calc(var(--item-i, 0) * 40ms);
}
.menu-overlay.is-open .menu-overlay__nav-item {
  opacity: 1;
  transform: translateY(0);
}
.menu-overlay__nav-item:hover { padding-left: 8px; }
.menu-overlay__nav-item:hover .menu-overlay__nav-label { color: var(--lime); }
.menu-overlay__nav-label {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.04; letter-spacing: -0.035em;
  color: var(--ink);
  transition: color var(--dur-instant) var(--ease-color);
}

/* Contact block between nav and listings */
.menu-overlay__contact-block {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--sand);
  display: flex; flex-direction: column;
  gap: 8px;
}
.menu-overlay__email {
  display: inline-block;
  align-self: flex-start;
  background: var(--lime); color: var(--ink);
  padding: 6px 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.025em;
  text-decoration: none;
  transition: background var(--dur-fast-canonical) var(--ease-color);
}
.menu-overlay__email:hover { background: var(--ink); color: var(--lime); }
.menu-overlay__location {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
.menu-overlay__location-sep { color: var(--sand); }
.menu-overlay__location .status-dot { margin-right: 0; }

/* Secondary listings (socials + legal) below contact */
.menu-overlay__listings {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--sand);
}
@media (max-width: 560px) {
  .menu-overlay__listings { grid-template-columns: 1fr; gap: 24px; }
}
.menu-overlay__listing-block h4 {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute); margin: 0 0 14px;
}
.menu-overlay__listing-block ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
}
.menu-overlay__listing-block li a {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-instant) var(--ease-color);
}
.menu-overlay__listing-block li a:hover { color: var(--lime); }
.menu-overlay__listing-block .num { color: var(--sand-mute); font-weight: 500; }
.menu-overlay__listing-block svg { flex-shrink: 0; color: var(--ink); transition: color var(--dur-instant) var(--ease-color); }
.menu-overlay__listing-block li a:hover svg { color: var(--lime); }

/* Footer social icons keep their layout */
.s-footer__socials li a { display: inline-flex; align-items: center; gap: 8px; }
.s-footer__socials li svg { flex-shrink: 0; }

html.menu-open, html.menu-open body { overflow: hidden; }

/* =========================================================================
   container--narrow — modifier for long-form reading surfaces (legal docs,
   article bodies).
   ========================================================================= */
.container--narrow {
  max-width: 760px;
}

/* =========================================================================
   s-case-intro — opening prose block on /work/<slug>. Sits between hero
   and the Capabilities block. Two short paragraphs, narrow column.
   ========================================================================= */
.s-case-intro {
  padding: clamp(48px, 8vh, 96px) 0 0 0;
  background: var(--bone);
}
.s-case-intro__p {
  font-family: var(--font-text); font-weight: 500;
  font-size: 18px; line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 65ch;
}
.s-case-intro__p:last-child { margin-bottom: 0; }

/* =========================================================================
   s-case-outcome — closing block on /work/<slug>. Header + paragraphs +
   stats list + pull quote + byline. Lives on bone-cool.
   ========================================================================= */
.s-case-outcome {
  padding: var(--section-pad) 0;
  background: var(--bone-cool);
}
.s-case-outcome__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  margin-bottom: 12px;
}
.s-case-outcome__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 22ch;
  color: var(--ink);
}
.s-case-outcome__p {
  font-family: var(--font-text); font-weight: 500;
  font-size: 17px; line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 65ch;
}
.s-case-outcome__stats {
  list-style: none; padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.s-case-outcome__stats li {
  padding: 24px 20px;
  border-right: 1px solid var(--sand);
  display: flex; flex-direction: column;
  gap: 8px;
}
.s-case-outcome__stats li:last-child { border-right: 0; }
.s-case-outcome__stat-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 0.95; letter-spacing: -0.035em;
  color: var(--ink);
}
.s-case-outcome__stat-bracket {
  color: var(--sand-mute);
  font-size: 0.72em;
  margin-left: 2px;
}
.s-case-outcome__stat-label {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
  max-width: 22ch;
}
.s-case-outcome__quote {
  margin: 40px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  max-width: 70ch;
}
.s-case-outcome__quote-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2; letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--ink);
}
.s-case-outcome__quote-by {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
  font-style: normal;
}
.s-case-outcome__byline {
  margin: 24px 0 0;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
@media (max-width: 880px) {
  .s-case-outcome__stats { grid-template-columns: repeat(2, 1fr); }
  .s-case-outcome__stats li:nth-child(2n) { border-right: 0; }
  .s-case-outcome__stats li:nth-child(odd) { border-right: 1px solid var(--sand); }
  .s-case-outcome__stats li:nth-child(1),
  .s-case-outcome__stats li:nth-child(2) { border-bottom: 1px solid var(--sand); }
}

/* Visually-hidden — utility that hides content visually but keeps it
   exposed to screen readers. Used for off-screen labels and headings. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Skip-link — visible only on keyboard focus. WCAG 2.4.1. Jumps the
   keyboard / screen-reader user past the top nav into <main>. */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Make <main> not show a focus ring when programmatic focus lands via
   tabindex="-1" + skip-link target. We want the focus to move, not glow. */
main:focus { outline: none; }
main:focus-visible { outline: none; }

/* =========================================================================
   s-article — long-form reading layout for insights detail pages.
   Cap line length at 65ch. Byline, body sections, pull quote, foot.
   ========================================================================= */
.s-article {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-article__byline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 40px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-mute, var(--sand-mute));
}
.s-article__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--ink); color: var(--lime);
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: -0.01em;
  border-radius: 50%;
}
.s-article__byline-text {
  display: flex; flex-direction: column; gap: 2px;
}
.s-article__byline-text strong {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}
.s-article__byline-text span {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
.s-article__date { color: var(--sand-mute); }

.s-article__section {
  margin-bottom: 32px;
}
.s-article__h {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1; letter-spacing: -0.03em;
  margin: 24px 0 14px;
  color: var(--ink);
}
.s-article__p {
  font-family: var(--font-text); font-weight: 500;
  font-size: 17px; line-height: 1.65;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  color: var(--ink);
  max-width: 65ch;
}
.s-article__p:last-child { margin-bottom: 0; }
.s-article__quote {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 28px 0;
  margin: 28px 0;
  max-width: 70ch;
}
.s-article__quote-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2; letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--ink);
}
.s-article__quote-by {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
  font-style: normal;
}
.s-article__foot {
  border-top: 1px solid var(--ink);
  margin-top: 40px;
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.s-article__foot-label { color: var(--sand-mute); }
.s-article__foot-author { color: var(--ink); }

@media (max-width: 720px) {
  .s-article__p { font-size: 16px; line-height: 1.6; }
  .s-article__byline { gap: 10px; grid-template-columns: auto 1fr; }
  .s-article__date { grid-column: 1 / -1; padding-top: 6px; }
}

/* =========================================================================
   s-contact-section — two-column layout pairing the form with an aside.
   ========================================================================= */
.s-contact-section {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-contact-section__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.s-contact-section__aside {
  position: sticky;
  top: 80px;
}
.s-contact-section__heading {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 28px;
  color: var(--ink);
}
.s-contact-section__steps {
  list-style: none;
  padding: 0; margin: 0 0 40px;
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--ink);
  padding-top: 24px;
}
.s-contact-section__steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
}
.s-contact-section__steps strong {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink);
}
.s-contact-section__steps span {
  font-family: var(--font-text); font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 36ch;
}
.s-contact-section__channels h3 {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
  margin: 0 0 12px;
}
.s-contact-section__channels ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
  font-family: var(--font-mono); font-size: 14px;
}
.s-contact-section__channels a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (max-width: 880px) {
  .s-contact-section__grid { grid-template-columns: 1fr; }
  .s-contact-section__aside { position: static; }
}

/* =========================================================================
   s-legal-doc — readable long-form for privacy / terms / cookies.
   ========================================================================= */
.s-legal-doc {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-legal-doc__section {
  border-top: 1px solid var(--sand);
  padding: 28px 0;
}
.s-legal-doc__section:first-child { border-top: 1px solid var(--ink); }
.s-legal-doc__h {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--ink);
}
.s-legal-doc__p {
  font-family: var(--font-text); font-weight: 500;
  font-size: 16px; line-height: 1.6;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--ink);
  max-width: 65ch;
}
.s-legal-doc__p:last-child { margin-bottom: 0; }
.s-legal-doc__meta {
  border-top: 1px solid var(--ink);
  margin-top: 32px;
  padding-top: 20px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--sand-mute);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.s-legal-doc__meta a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* =========================================================================
   s-page-hero — inner-page hero (service / solution / static).
   ========================================================================= */
.s-page-hero {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding: clamp(96px, 14vh, 160px) 0 clamp(64px, 9vh, 112px) 0;
  overflow: hidden;
  isolation: isolate;
}
.s-page-hero__metarow {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-bottom: 20px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute);
  position: relative; z-index: 2;
}
.s-page-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--lime);
  margin-bottom: 20px;
  position: relative; z-index: 2;
}
.s-page-hero__eyebrow .brk { color: var(--ink-mute); }
.s-page-hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 0 24px;
  max-width: 20ch;
  position: relative; z-index: 2;
}
.s-page-hero__title .pop { color: var(--lime); }
.s-page-hero__lede {
  font-family: var(--font-text); font-weight: 500;
  font-size: var(--t-lede);
  line-height: 1.4; letter-spacing: -0.015em;
  max-width: 60ch; margin: 0 0 32px;
  opacity: 0.9;
  position: relative; z-index: 2;
}
.s-page-hero__cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  position: relative; z-index: 2;
}
@media (max-width: 720px) {
  .s-page-hero { padding: 88px 0 56px; }
  .s-page-hero__title { font-size: clamp(34px, 9vw, 52px); }
  .s-page-hero__lede { font-size: 17px; }
}

/* =========================================================================
   s-capabilities — numbered capability grid for service / solution pages.
   ========================================================================= */
.s-capabilities {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-capabilities__head {
  margin-bottom: 24px;
}
.s-capabilities__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  margin-bottom: 12px;
}
.s-capabilities__eyebrow .brk { color: var(--sand-mute); }
.s-capabilities__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0;
  max-width: 22ch;
}
.s-capabilities__title .pop { color: var(--lime); }
.s-capabilities__intro {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.1; letter-spacing: -0.025em;
  max-width: 24ch;
  margin: 0 0 48px;
  color: var(--ink);
}
/* Narrative bridge before the embedded diagram.
   No side-stripe — positional weight + mono register carry the bridge role. */
.s-capabilities__diagram-lead {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.8;
  margin: -24px 0 0;
  max-width: 68ch;
}
.s-capabilities__grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.s-capabilities__item {
  padding: 28px 28px;
  border-right: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
  background: var(--bone-warm);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
}
.s-capabilities__item:nth-child(2n) { border-right: 0; }
.s-capabilities__item:nth-last-child(-n+2) { border-bottom: 0; }
.s-capabilities__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-capabilities__item-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.15; letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.s-capabilities__item-body {
  font-family: var(--font-text); font-weight: 500;
  font-size: 15px; line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 38ch;
  margin: 0;
  color: var(--ink);
}
@media (max-width: 880px) {
  .s-capabilities__grid { grid-template-columns: 1fr; }
  .s-capabilities__item { border-right: 0; }
  .s-capabilities__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--sand); }
  .s-capabilities__item:last-child { border-bottom: 0; }
}

/* =========================================================================
   s-price-card — packaged solution price answer on solution detail page.
   ========================================================================= */
.s-price-card {
  padding: var(--section-pad) 0;
  background: var(--bone);
}
.s-price-card__panel {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(32px, 5vw, 56px);
  display: grid;
  gap: 24px;
  position: relative;
  isolation: isolate;
}
.s-price-card__panel[data-featured="true"] {
  background: var(--ink-deep);
}
.s-price-card__head {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-mute);
}
.s-price-card__tag {}
.s-price-card__badge {
  background: var(--lime); color: var(--ink);
  padding: 4px 10px;
  font-weight: 700;
  letter-spacing: var(--track-mono);
}
.s-price-card__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0;
}
.s-price-card__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px 32px;
  padding: 22px 0 12px;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.s-price-card__price-main {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--lime);
}
.s-price-card__price-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-mute);
}
.s-price-card__price-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-bright);
  max-width: 50ch;
}
.s-price-card__cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* =========================================================================
   s-contact-form — Woodpecker-primed inbound form.
   ========================================================================= */
.s-contact-form {
  display: grid;
  gap: 22px;
  max-width: 720px;
  padding: clamp(32px, 5vw, 64px);
  background: var(--bone-warm);
  border: 1px solid var(--sand);
}
.s-contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.s-contact-form__field {
  display: flex; flex-direction: column; gap: 6px;
}
.s-contact-form__field--full { grid-column: 1 / -1; }
.s-contact-form__label {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink);
}
.s-contact-form__req {
  color: var(--lime-soft);
  background: var(--ink);
  padding: 0 4px;
  margin-left: 4px;
  font-size: 9px;
}
.s-contact-form input[type="text"],
.s-contact-form input[type="email"],
.s-contact-form select,
.s-contact-form textarea {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono); font-weight: 500;
  font-size: 16px;       /* prevent iOS focus zoom */
  line-height: 1.4;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--sand);
  border-radius: 0;
  outline: 0;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-color);
}
.s-contact-form textarea {
  border: 1px solid var(--sand);
  padding: 12px 14px;
  resize: vertical;
}
.s-contact-form input:focus-visible,
.s-contact-form select:focus-visible,
.s-contact-form textarea:focus-visible {
  border-color: var(--ink);
  border-bottom-width: 2px;
}
.s-contact-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.s-contact-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.s-contact-form__radios {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.s-contact-form__radio {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--sand);
  cursor: pointer;
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-color), background var(--dur-fast) var(--ease-color);
}
.s-contact-form__radio input { accent-color: var(--ink); }
.s-contact-form__radio:has(input:checked) {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.s-contact-form__status {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  line-height: 1.5;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid transparent;
  min-height: 0;
}
.s-contact-form__status:empty { display: none; }
.s-contact-form__status[data-kind="success"] {
  background: color-mix(in oklab, var(--lime) 22%, var(--bone));
  border-color: var(--ink);
  color: var(--ink);
}
.s-contact-form__status[data-kind="error"] {
  background: color-mix(in oklab, var(--ink) 8%, var(--bone));
  border-color: var(--ink);
  color: var(--ink);
}
.s-contact-form__status-heading {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px;
  margin-right: 6px;
}
.s-contact-form__submit { justify-self: start; }
.s-contact-form__submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}
.s-contact-form__privacy {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--sand-mute);
  margin: 0;
  max-width: 50ch;
}
.s-contact-form__privacy a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (max-width: 720px) {
  .s-contact-form__row { grid-template-columns: 1fr; }
  .s-contact-form { padding: 28px 22px; }
}

/* =========================================================================
   s-offer — three-pillar offering triptych. Sits high on the homepage.
   ========================================================================= */
.s-offer { padding: var(--section-pad) 0; background: var(--bone); }
.s-offer__head { margin-bottom: 56px; max-width: 56ch; }
.s-offer__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  margin-bottom: 16px;
}
.s-offer__eyebrow .brk { color: var(--sand-mute); }
.s-offer__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 0 16px;
  max-width: 22ch;
  color: var(--ink);
}
.s-offer__title .pop { color: var(--lime); }
.s-offer__lede {
  font-family: var(--font-text); font-weight: 500; font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
  margin: 0;
  opacity: 0.85;
}
.s-offer__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.s-offer__card {
  display: flex; flex-direction: column;
  padding: 36px 32px;
  background: var(--bone-warm);
  border-right: 1px solid var(--sand);
  gap: 14px;
}
.s-offer__card:last-child { border-right: 0; }
.s-offer__card-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-offer__card-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.05; letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
  max-width: 14ch;
}
.s-offer__card-lede {
  font-family: var(--font-text); font-weight: 500; font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
  max-width: 32ch;
}
.s-offer__card-bullets {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: 8px;
  flex: 1;
}
.s-offer__card-bullets li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink);
}
.s-offer__card-bullets li::before {
  content: "+";
  color: var(--lime); display: inline-block; width: 12px;
}
.s-offer__card-link {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--sand);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  width: 100%;
  justify-content: space-between;
  transition: color var(--dur-fast) var(--ease-color);
}
.s-offer__card-link:hover { color: var(--ink-soft); }
.s-offer__card-link:hover .arrow { transform: translateX(4px); }
.s-offer__card-link .arrow { transition: transform var(--dur-fast) var(--ease-arrive); }
@media (max-width: 1024px) {
  .s-offer__grid { grid-template-columns: 1fr; }
  .s-offer__card { border-right: 0; border-bottom: 1px solid var(--sand); }
  .s-offer__card:last-child { border-bottom: 0; }
}

/* =========================================================================
   s-savings — multi-axis quantified savings rows.
   ========================================================================= */
.s-savings { padding: var(--section-pad) 0; background: var(--bone-cool); }
.s-savings__head { margin-bottom: 48px; max-width: 56ch; }
.s-savings__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  margin-bottom: 14px;
}
.s-savings__eyebrow .brk { color: var(--sand-mute); }
.s-savings__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 0 16px;
  max-width: 22ch;
  color: var(--ink);
}
.s-savings__title .pop { color: var(--lime); }
.s-savings__lede {
  font-family: var(--font-text); font-weight: 500; font-size: 17px;
  line-height: 1.5; margin: 0; color: var(--ink);
  max-width: 56ch; opacity: 0.85;
}
.s-savings__rows {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.s-savings__row {
  display: grid;
  grid-template-columns: 60px auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--sand);
}
.s-savings__row:last-child { border-bottom: 0; }
.s-savings__row-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-savings__row-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 0.95; letter-spacing: -0.04em;
  color: var(--lime);
  /* stronger contrast for the lime on bone-cool: tint the lime toward ink */
  color: color-mix(in oklab, var(--lime) 88%, var(--ink) 12%);
  min-width: 160px;
}
.s-savings__row-body { display: flex; flex-direction: column; gap: 4px; }
.s-savings__row-key {
  font-family: var(--font-text); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em; color: var(--ink);
}
.s-savings__row-scope {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
.s-savings__row-breakdown {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  color: var(--sand-mute);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  text-align: right;
  max-width: 24ch;
}
@media (max-width: 880px) {
  .s-savings__row { grid-template-columns: auto 1fr; gap: 12px; padding: 20px 0; }
  .s-savings__row-num { grid-column: 1; }
  .s-savings__row-value { grid-column: 1 / -1; }
  .s-savings__row-body { grid-column: 1 / -1; }
  .s-savings__row-breakdown { grid-column: 1 / -1; text-align: left; }
}

/* =========================================================================
   s-bigstat — single-claim rhythm break, ink palette.
   ========================================================================= */
.s-bigstat {
  position: relative;
  padding: var(--section-pad) 0;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
.s-bigstat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.s-bigstat__left { display: flex; flex-direction: column; gap: 18px; }
.s-bigstat__eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--lime);
}
.s-bigstat__eyebrow .brk { color: var(--ink-mute); }
.s-bigstat__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(96px, 14vw, 200px);
  line-height: 0.86; letter-spacing: -0.06em;
  color: var(--lime);
}
.s-bigstat__value .brk { color: var(--ink-mute); }
.s-bigstat__caption {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-mute);
  max-width: 26ch;
}
.s-bigstat__proof-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--bone);
  max-width: 20ch;
}
.s-bigstat__proof-body {
  font-family: var(--font-text); font-weight: 500; font-size: 17px;
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 0 14px;
  color: var(--bone);
  opacity: 0.88;
}
.s-bigstat__proof-body:last-of-type { margin-bottom: 18px; }
.s-bigstat__cite {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-block;
}
@media (max-width: 880px) {
  .s-bigstat__grid { grid-template-columns: 1fr; gap: 36px; }
  .s-bigstat__value { font-size: clamp(72px, 22vw, 120px); }
}

/* =========================================================================
   s-stack — tools grid, grouped by cluster.
   ========================================================================= */
.s-stack { padding: var(--section-pad) 0; background: var(--bone); }
.s-stack__head { margin-bottom: 48px; max-width: 60ch; }
.s-stack__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  margin-bottom: 14px;
}
.s-stack__eyebrow .brk { color: var(--sand-mute); }
.s-stack__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 0 16px;
  max-width: 22ch;
  color: var(--ink);
}
.s-stack__title .pop { color: var(--lime); }
.s-stack__lede {
  font-family: var(--font-text); font-weight: 500; font-size: 17px;
  line-height: 1.5; margin: 0; color: var(--ink);
  max-width: 56ch; opacity: 0.85;
}
.s-stack__groups {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.s-stack__group {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: start;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--sand);
}
.s-stack__group:last-child { border-bottom: 0; }
.s-stack__group-label {
  display: flex; flex-direction: column; gap: 6px;
}
.s-stack__group-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
}
.s-stack__group-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.1; letter-spacing: -0.025em;
  color: var(--ink);
}
.s-stack__tools {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.s-stack__tool {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  background: var(--bone-warm);
  border: 1px solid var(--sand);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}
.s-stack__foot {
  margin: 32px 0 0;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
@media (max-width: 880px) {
  .s-stack__group { grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================================
   s-team — engineer grid. Initials avatars, name, role, intro, profile link.
   ========================================================================= */
.s-team { padding: var(--section-pad) 0; background: var(--bone); }
.s-team__head { display: block; margin-bottom: 48px; }
.s-team__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  margin-bottom: 14px;
}
.s-team__eyebrow .brk { color: var(--sand-mute); }
.s-team__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 0 16px;
  max-width: 22ch;
  color: var(--ink);
}
.s-team__title .pop { color: var(--lime); }
.s-team__lede {
  font-family: var(--font-text); font-weight: 500; font-size: 17px;
  line-height: 1.5; margin: 0; color: var(--ink);
  max-width: 56ch; opacity: 0.85;
}
.s-team__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.s-team__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px;
  background: var(--bone-warm);
  border-right: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
  gap: 10px;
}
.s-team__card:nth-child(3n) { border-right: 0; }
.s-team__card:nth-last-child(-n+3) { border-bottom: 0; }
.s-team__num {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--sand-mute);
  position: absolute; top: 28px; right: 28px;
}
.s-team__avatar {
  width: 56px; height: 56px;
  background: var(--ink);
  color: var(--lime);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 18px;
  letter-spacing: -0.01em;
  border-radius: 50%;
  margin-bottom: 4px;
}
.s-team__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.1; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.s-team__role {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
.s-team__intro {
  font-family: var(--font-text); font-weight: 500; font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 32ch;
  margin: 4px 0 0;
}
.s-team__link {
  align-self: flex-start;
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--sand);
  width: 100%;
  justify-content: space-between;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-color);
}
.s-team__link:hover { color: var(--ink-soft); }
.s-team__link .arrow { transition: transform var(--dur-fast) var(--ease-arrive); }
.s-team__link:hover .arrow { transform: translateX(4px); }
.s-team__foot {
  margin: 32px 0 0;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
}
@media (max-width: 1024px) {
  .s-team__grid { grid-template-columns: repeat(2, 1fr); }
  .s-team__card:nth-child(3n) { border-right: 1px solid var(--sand); }
  .s-team__card:nth-child(2n) { border-right: 0; }
  .s-team__card:nth-last-child(-n+3) { border-bottom: 1px solid var(--sand); }
  .s-team__card:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 720px) {
  .s-team__grid { grid-template-columns: 1fr; }
  .s-team__card { border-right: 0; border-bottom: 1px solid var(--sand); }
  .s-team__card:last-child { border-bottom: 0; }
}

/* =========================================================================
   s-cascade — evidence pile reveal.
   Two-column section: headline + lede on the left, four evidence cards
   stacking on the right. When the section enters viewport the cards
   cascade in with a per-card delay, so the eye reads them top to bottom
   rather than all at once. No sticky runway: the section is a normal
   block-height surface so there's no wasted dark space after the cards
   land. Reveal is triggered by a single IntersectionObserver in motion.js.
   ========================================================================= */
.s-cascade {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-pad) 0;
}
.s-cascade__sticky {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.s-cascade__head { position: relative; z-index: 2; }
.s-cascade__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 20px;
}
.s-cascade__eyebrow .brk { color: var(--ink-mute); }
.s-cascade__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  max-width: 18ch;
}
.s-cascade__title .pop { color: var(--lime); }
.s-cascade__lede {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
  opacity: 0.85;
}
.s-cascade__pile {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.s-cascade__card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 26px;
  background: color-mix(in oklab, var(--ink) 80%, var(--bone) 20%);
  border: 1px solid var(--ink-line);
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 700ms var(--ease-arrive),
    transform 700ms var(--ease-arrive);
  transition-delay: calc(var(--card-i, 0) * 60ms);
}
.s-cascade.is-in .s-cascade__card,
.s-cascade__card.is-in {
  opacity: 1;
  transform: translateY(0);
}
.s-cascade__card-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.s-cascade__card-body { display: flex; flex-direction: column; gap: 4px; }
.s-cascade__card-key {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.s-cascade__card-ctx {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.s-cascade__card-pct {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 3.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lime);
}
@media (prefers-reduced-motion: reduce) {
  .s-cascade__card { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1024px) {
  .s-cascade__sticky { grid-template-columns: 1fr; gap: 32px; }
  .s-cascade__title { font-size: clamp(32px, 8vw, 52px); }
  .s-cascade__lede { font-size: 16px; }
}
@media (max-width: 720px) {
  .s-cascade__title { font-size: clamp(30px, 9vw, 44px); }
  .s-cascade__card { padding: 16px 18px; gap: 14px; grid-template-columns: auto 1fr; }
  .s-cascade__card-pct { font-size: clamp(28px, 9vw, 40px); grid-column: 1 / -1; text-align: right; }
}

/* =========================================================================
   s-error — branded 404 / 500 surface.
   Reuses the hero ink palette so the failure surface feels like part of
   the site, not a fallback. Big [code] eyebrow, editorial headline written
   in voice, a 4-tile nav grid into the most useful destinations, and a
   mailto fallback. Lives on stripes-drift so the page still breathes.
   ========================================================================= */
.s-error {
  position: relative;
  min-height: 80vh;
  padding: clamp(96px, 14vh, 160px) 0 clamp(96px, 14vh, 160px) 0;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  isolation: isolate;
}
.s-error__code {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}
.s-error__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  max-width: 18ch;
  position: relative;
  z-index: 2;
}
.s-error__title .pop { color: var(--lime); }
.s-error__lede {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--t-lede);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 56ch;
  margin: 0 0 56px;
  opacity: 0.85;
  position: relative;
  z-index: 2;
}
/* Four destination tiles. Grid borders, hover swaps the cell to lime. */
.s-error__nav {
  list-style: none;
  padding: 0;
  margin: 0 0 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  position: relative;
  z-index: 2;
}
.s-error__nav li { border-right: 1px solid var(--ink-line); }
.s-error__nav li:last-child { border-right: 0; }
.s-error__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 1.8vw, 30px);
  letter-spacing: -0.025em;
  color: var(--bone);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.s-error__nav a::after {
  content: "\2192";   /* → */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-mute);
  transition: transform var(--dur-fast) var(--ease-arrive), color var(--dur-fast) var(--ease-color);
}
.s-error__nav a:hover {
  background: var(--lime);
  color: var(--ink);
}
.s-error__nav a:hover::after {
  color: var(--ink);
  transform: translateX(6px);
}
.s-error__nav a:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}
.s-error__fallback {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-bright);
  max-width: 60ch;
  margin: 0;
  position: relative;
  z-index: 2;
}
.s-error__fallback a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-color);
}
.s-error__fallback a:hover { color: var(--bone); }
/* Background mark drifting low and faint, same trick as the hero. */
.s-error__bg-mark {
  position: absolute;
  left: 50%;
  bottom: -10%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(180px, 32vw, 540px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--bone) 5%, transparent);
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
  user-select: none;
}
@media (max-width: 1024px) {
  .s-error__nav { grid-template-columns: repeat(2, 1fr); }
  .s-error__nav li:nth-child(2) { border-right: 0; }
  .s-error__nav li:nth-child(odd) { border-right: 1px solid var(--ink-line); }
  .s-error__nav li:nth-child(1),
  .s-error__nav li:nth-child(2) { border-bottom: 1px solid var(--ink-line); }
}
@media (max-width: 720px) {
  .s-error { padding: 80px 0 96px; min-height: auto; }
  .s-error__title { font-size: clamp(36px, 9vw, 56px); max-width: 16ch; }
  .s-error__lede { font-size: 17px; margin-bottom: 36px; }
  .s-error__nav { grid-template-columns: 1fr; margin-bottom: 36px; }
  .s-error__nav li { border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .s-error__nav li:last-child { border-bottom: 0; }
  .s-error__nav a { padding: 22px 0; font-size: clamp(20px, 6vw, 26px); }
  .s-error__bg-mark { font-size: clamp(140px, 50vw, 280px); bottom: -6%; }
}

/* =========================================================================
   CLIENT LOGO — typographic wordmark plate by default, swappable to SVG.
   ========================================================================= */

.client-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  color: inherit;
}

.client-logo--sm { height: 18px; }
.client-logo--md { height: 24px; }
.client-logo--lg { height: 32px; }

.client-logo img,
.client-logo svg {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  color: inherit;     /* keeps single-color SVGs tinted via currentColor */
}
/* Square brand favicons need a wider image slot to read; allow them to grow
   to ~2x their height before contain clips. Browsers render square images
   square so this just gives the slot room. */
.client-logo--lg img { min-width: 32px; }

/* Kyma-style monochrome treatment: at rest, every client mark renders in
   tinted greyscale at 70% opacity so the row of marks reads as a unified
   credibility band, not a competing palette. On hover (the parent tile or
   the strip item), the mark blooms back to full colour as a small reward
   for engagement. The One-Voice Rule (lime is the only saturated colour on
   the page) is preserved on first read; brand truth is preserved on intent.

   `mix-blend-mode: multiply` makes any white-padded favicon (JPEGs, PNGs
   without alpha) blend cleanly into the cream tile. White pixels in the
   source multiply against the cream surface to become the surface itself,
   so favicons that ship with a baked-in white background (BKWI, ISCO, and
   any future logo with the same issue) drop their pad without per-file work. */
.client-logo img {
  filter: grayscale(1) contrast(1.05);
  opacity: 0.70;
  mix-blend-mode: multiply;
  transition:
    filter var(--dur-control) var(--ease-color),
    opacity var(--dur-control) var(--ease-color);
}
.s-companies__tile:hover .client-logo img,
.logo-marquee__item:hover .client-logo img,
.client-logo:hover img {
  filter: grayscale(0) contrast(1);
  opacity: 1;
}
/* On the dark ink surfaces (hero strip variant + dark TrustedBy), invert the
   mid-tones so dark marks become legible against navy, and switch the blend
   to `screen` so dark / black-padded favicons drop their pad against the ink
   surface (screen is the dark-mode analogue of multiply). */
.s-trusted-by--ink .client-logo img,
.s-hero-epic .client-logo img {
  filter: grayscale(1) brightness(1.7) invert(1) contrast(1.15);
  mix-blend-mode: screen;
}
.s-trusted-by--ink .client-logo:hover img,
.s-hero-epic .client-logo:hover img {
  filter: grayscale(0) brightness(1.05) contrast(1);
}
/* Honour reduced motion — no filter transition, but the rest state stays
   monochrome (the calmer presentation is the design intent, not the motion). */
@media (prefers-reduced-motion: reduce) {
  .client-logo img { transition: none; }
}

/* Typographic wordmark plate — the name set in TASA Orbiter */
.client-logo__name {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: inherit;
}
.client-logo--sm .client-logo__name { font-size: 14px; }
.client-logo--md .client-logo__name { font-size: 18px; }
.client-logo--lg .client-logo__name { font-size: 24px; letter-spacing: -0.03em; }

/* =========================================================================
   ROTATING LOGO STRIP — Kyma-style continuous horizontal marquee.
   The track holds the client list twice and translates from 0 to -50%, so
   the second copy hands off to the first seamlessly. The mask softens the
   edges so logos don't pop in / out.
   ========================================================================= */

.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.logo-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  width: max-content;
  min-width: max-content;
  animation: logo-marquee-x var(--logo-marquee-dur, 48s) linear infinite;
  will-change: transform;
}
.logo-marquee__item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
@keyframes logo-marquee-x {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* =========================================================================
   s-why-free — positioning beat on /audit/. Ink panel, two-column grid.
   Left: eyebrow + headline. Right: prose paragraphs.
   ========================================================================= */
.s-why-free {
  padding: var(--section-pad) 0;
  background: var(--ink); color: var(--bone);
  position: relative; overflow: hidden;
}
.s-why-free__grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start;
}
@media (max-width: 880px) {
  .s-why-free__grid { grid-template-columns: 1fr; gap: 32px; }
}
.s-why-free__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 24px;
}
.s-why-free__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.98; letter-spacing: -0.03em;
  margin: 0; max-width: 18ch;
  color: var(--bone);
}
.s-why-free__right p {
  font-family: var(--font-text); font-weight: 500;
  font-size: 18px; line-height: 1.6;
  letter-spacing: -0.005em;
  color: color-mix(in oklab, var(--bone) 88%, transparent);
  margin: 0 0 18px;
  max-width: 60ch;
}
.s-why-free__right p:last-child { margin-bottom: 0; }

/* =========================================================================
   s-not-fit — anti-qualification list on /audit/. Bone-cool surface,
   narrow column, numbered list with mono counters.
   ========================================================================= */
.s-not-fit {
  padding: var(--section-pad) 0;
  background: var(--bone-cool);
}
.s-not-fit__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--sand-mute);
  margin-bottom: 24px;
}
.s-not-fit__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 24px; max-width: 22ch;
  color: var(--ink);
}
.s-not-fit__lede {
  font-family: var(--font-text); font-weight: 500;
  font-size: 18px; line-height: 1.55;
  color: var(--ink);
  margin: 0 0 40px; max-width: 60ch;
}
.s-not-fit__list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: notfit;
  border-top: 1px solid var(--ink-line);
}
.s-not-fit__list li {
  counter-increment: notfit;
  position: relative;
  padding: 20px 0 20px 64px;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-text); font-weight: 500;
  font-size: 18px; line-height: 1.5;
  color: var(--ink);
}
.s-not-fit__list li::before {
  content: "[" counter(notfit, decimal-leading-zero) "]";
  position: absolute; left: 0; top: 22px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  color: var(--sand-mute);
}

/* =========================================================================
   s-guarantee — risk-reversal panel on Kickstarter solution pages.
   Lime panel with ink type. Two-column grid.
   ========================================================================= */
.s-guarantee {
  padding: var(--section-pad) 0;
  background: var(--lime); color: var(--ink);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.s-guarantee__grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start;
}
@media (max-width: 880px) {
  .s-guarantee__grid { grid-template-columns: 1fr; gap: 32px; }
}
.s-guarantee__eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
}
.s-guarantee__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.98; letter-spacing: -0.03em;
  margin: 0; max-width: 18ch;
  color: var(--ink);
}
.s-guarantee__body {
  font-family: var(--font-text); font-weight: 500;
  font-size: 19px; line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0; max-width: 60ch;
}

/* =========================================================================
   MOBILE LAYOUT — make every section breathe at 360px–768px viewports.
   Three breakpoints: 1024 (tablet), 720 (mobile-large), 480 (mobile-small).
   ========================================================================= */

@media (max-width: 1024px) {
  :root {
    --section-pad:    96px;
    --section-pad-l:  120px;
  }
}

@media (max-width: 720px) {
  :root {
    --section-pad:    72px;
    --section-pad-l:  96px;
    --gutter:         20px;
  }

  /* Topbar — collapse to brand + MENU only, less padding */
  .topbar { padding: 14px 16px; }
  .topbar__brand { font-size: 17px; }
  .topbar__brand svg { width: 20px; }

  /* Hero — reduce display sizes */
  .s-hero-epic { min-height: auto; padding: 80px 0 96px; }
  .s-hero-epic__topbar { margin-bottom: 36px; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 10px; }
  .s-hero-epic__topbar > :nth-child(2),
  .s-hero-epic__topbar > :nth-child(3) { display: none; }
  .s-hero-epic__title { font-size: clamp(40px, 9vw, 60px); max-width: 14ch; }
  .s-hero-epic__lede { font-size: 17px; margin-bottom: 28px; }
  .s-hero-epic__cta-row { gap: 12px; }
  .s-hero-epic__cta-row .btn { width: 100%; justify-content: space-between; }
  .s-hero-epic__bg-mark { font-size: clamp(120px, 38vw, 200px); bottom: -4%; }

  /* Trusted-by strip — stack to 3 rows; logos wrap to 2 lines */
  .s-trusted-by { padding: 14px 0; }
  .s-trusted-by__inner { grid-template-columns: 1fr; gap: 14px; }
  .s-trusted-by__rating,
  .s-trusted-by__company {
    padding-right: 0; border-right: 0;
    padding-bottom: 12px; border-bottom: 1px solid var(--sand);
  }
  .s-trusted-by--ink .s-trusted-by__rating,
  .s-trusted-by--ink .s-trusted-by__company { border-bottom-color: var(--ink-line); }
  .s-trusted-by__logos {
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: flex-start;
    padding-top: 0; border-top: 0;
  }
  .s-trusted-by__logo { font-size: 14px; }
  .s-trusted-by__logo .glyph { width: 22px; height: 22px; font-size: 11px; }

  /* Companies — head stacks; tile aspect more compact */
  .s-companies__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .s-companies__count { text-align: left; }
  .s-companies__count strong { font-size: 32px; }
  .s-companies__tile { aspect-ratio: auto; min-height: 140px; padding: 20px 16px; gap: 8px; }
  .s-companies__tile-glyph { width: 32px; height: 32px; font-size: 14px; }
  .s-companies__tile-name { font-size: 19px; }
  .s-companies__foot > div { padding: 18px 20px; }

  /* Bar-stat — already collapses; tighten head */
  .s-bar-stat__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .s-bar-stat__title { font-size: clamp(28px, 7vw, 40px); }
  .s-bar-stat__sub { text-align: left; }
  .s-bar-stat__row { padding: 16px 0; gap: 8px; }
  .s-bar-stat__row-key { font-size: 10px; }
  .s-bar-stat__row-bar { width: 100%; }
  .s-bar-stat__row-value { font-size: 22px; }
  .s-bar-stat__row-tag { justify-self: start; }

  /* Marquee tagline — smaller text on mobile */
  .s-marquee-tagline { padding: 22px 0; }
  .s-marquee-tagline__inner { font-size: clamp(28px, 7vw, 40px); }

  /* Service table — rows stack into card-like layout */
  .s-service-table__head { display: none; }
  .s-service-table__row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    padding: 20px 0;
  }
  .s-service-table__row-num { grid-row: 1; }
  .s-service-table__row-name { grid-row: 1; grid-column: 2 / -1; font-size: 22px; }
  .s-service-table__row-outcome { grid-row: 2; grid-column: 2 / 3; font-size: 13px; }
  .s-service-table__row-arrow { grid-row: 1; }

  /* Process — already collapses to single col */
  .s-process__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .s-process__metric { text-align: left; }
  .s-process__step { min-height: auto; padding: 24px 20px; }

  /* Feature case — stack story above stats */
  .s-feature-case__story { padding: 32px 20px; }
  .s-feature-case__stats { padding: 24px 20px; }
  .s-feature-case__stat-value { font-size: clamp(40px, 12vw, 56px); }

  /* Testimonial grid — already collapses */
  .s-testimonial-grid__card { min-height: 200px; padding: 24px 20px; }
  .s-testimonial-grid__quote { font-size: 18px; }

  /* Tech stack — already collapses */
  .s-tech-stack__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }

  /* Pricing — full width cards */
  .s-pricing__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .s-pricing__card { padding: 28px 22px; }
  .s-pricing__card-price { font-size: 44px; }

  /* FAQ — tighten */
  .s-faq__item summary { grid-template-columns: 32px 1fr auto; gap: 12px; }
  .s-faq__item-q { font-size: 18px; }
  .s-faq__item-a { margin-left: 44px; font-size: 14px; }

  /* CTA-big — stack */
  .s-cta-big__inner { grid-template-columns: 1fr; gap: 24px; }
  .s-cta-big__bg-mark { font-size: clamp(120px, 38vw, 200px); }
  .s-cta-big__side .btn { width: 100%; justify-content: space-between; }

  /* Companies / footer / etc — generic */
  .s-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .s-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .s-footer__bg-mark { font-size: clamp(140px, 40vw, 240px); }

  /* Team — already collapses; reduce header sizes */
  .s-team__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .s-team__card { min-height: auto; padding: 22px 18px; }
  .s-team__card-avatar { font-size: 40px; }

  /* Articles — header stacks */
  .s-articles__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .s-articles__card { min-height: 280px; padding: 22px 18px; }

  /* Contact form — stack; full-width submit */
  .s-contact-form__form { padding: 28px 20px; gap: 22px; }
  .s-contact-form__aside { padding: 28px 20px; gap: 20px; }
  .s-contact-form__field input,
  .s-contact-form__field select,
  .s-contact-form__field textarea { font-size: 16px; /* prevents iOS zoom-on-focus */ }

  /* ROI calc — same */
  .s-roi-calc__inputs { padding: 28px 20px; }
  .s-roi-calc__output { padding: 28px 20px; }
  .s-roi-calc__field input,
  .s-roi-calc__field select { font-size: 28px; }
  .s-roi-calc__output-value { font-size: clamp(44px, 14vw, 64px); }

  /* Menu overlay — compact spacing on mobile */
  .menu-overlay__nav { padding: 24px; }
  .menu-overlay__featured { padding: 80px 24px 32px; }
  .menu-overlay__nav-label { font-size: clamp(32px, 12vw, 48px); }
  .menu-overlay__email { font-size: 22px; padding: 5px 10px; }
  .menu-overlay__featured-title { font-size: 20px; }
  .menu-overlay__close { top: 16px; right: 16px; padding: 8px 12px; }

  /* Showcase labels (sections.html demo only) */
  .s-showcase-label { padding: 6px 16px; font-size: 9px; gap: 12px; }
}

@media (max-width: 480px) {
  :root {
    --section-pad: 56px;
    --gutter:      16px;
  }
  .s-hero-epic__title { font-size: clamp(38px, 11vw, 56px); }
  .s-hero-epic__lede { font-size: 16px; }
  .s-trusted-by__logo { font-size: 13px; }
  .topbar__menu-btn { padding: 6px 10px; }

  /* CTAs become full-width by default on tiny screens */
  .btn { width: auto; min-height: 44px; }

  .s-companies__tile-name { font-size: 17px; }
  .s-feature-case__title { font-size: clamp(24px, 7vw, 32px); }
  .s-process__title { font-size: clamp(28px, 8vw, 40px); }
}

/* iOS-specific: prevent input zoom on focus by ensuring 16px font on inputs */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: max(16px, var(--t-body)); }
}

/* =========================================================================
   Observability Info Flow — scroll storytelling section
   =========================================================================
   Five-stage sticky+scroll narrative. The diagram is pinned on the left
   while story panels and scroll sentinels drive stage activation on the
   right. Each stage transitions past / active / future via JS class-swap.
   ========================================================================= */

.dg-ob-story {
  background: var(--bone-cool);
}

/* Intro header (eyebrow + lede) — within a container */
.dg-ob-story__intro {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(32px, 4vw, 48px);
}
.dg-ob-story__intro .eyebrow {
  display: block;
  margin-bottom: 16px;
}
.dg-ob-story__lede {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.75;
  max-width: 64ch;
}

/* Outer scroll container — tall enough to drive 4 stage transitions */
.dg-ob-story__outer {
  position: relative;
  height: calc(100vh + 4 * 80vh); /* 480vh: 100vh sticky + 320vh scroll */
  width: 100%;
}

/* Sticky panel — two-column grid, full viewport height */
.dg-ob-story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 56fr 44fr;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
  background: var(--bone-cool);
}

/* Left: diagram */
.dg-ob-story__diagram-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(24px, 3vw, 56px);
  border-right: 1px solid var(--ink-line);
}
.dg-ob-story__fig-label {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
}
.dg-ob-story__diagram-col svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: calc(100vh - 120px);
  object-fit: contain;
}

/* Right: story panels */
.dg-ob-story__text-col {
  position: relative;
  display: flex;
  align-items: center;
}
.dg-ob-story__panel {
  position: absolute;
  inset: clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s var(--ease-arrive),
    transform 0.45s var(--ease-arrive);
  pointer-events: none;
}
.dg-ob-story__panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.dg-ob-story__panel.is-past {
  opacity: 0;
  transform: translateY(-18px);
}
.dg-ob-story__step-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 20px;
}
.dg-ob-story__step-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 18px;
}
.dg-ob-story__step-body {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.75;
  max-width: 46ch;
}

/* Progress pips — right gutter of the text col */
.dg-ob-story__progress {
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1;
}
.dg-ob-story__pip {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--ink-line);
  transition: background 0.3s ease, transform 0.3s ease;
}
.dg-ob-story__pip.is-past   { background: var(--sand-mute); }
.dg-ob-story__pip.is-active { background: var(--ink); transform: scaleY(2.5); }

/* Scroll sentinels — invisible 1px-wide column, stacked vertically */
.dg-ob-story__sentinels {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.dg-ob-story__sentinel {
  width: 1px;
  height: 80vh;
  display: block;
}

/* Mobile: collapse to sequential list, no sticky */
@media (max-width: 860px) {
  .dg-ob-story__outer { height: auto; }
  .dg-ob-story__sticky {
    position: relative;
    height: auto;
    grid-template-columns: 1fr;
  }
  .dg-ob-story__diagram-col {
    border-right: 0;
    border-bottom: 1px solid var(--ink-line);
    padding-bottom: 32px;
    max-height: 60vw;
    min-height: 220px;
  }
  .dg-ob-story__text-col {
    display: block;
    padding: 0;
    min-height: auto;
  }
  .dg-ob-story__panel {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    padding: 32px clamp(20px, 5vw, 40px);
    border-bottom: 1px solid var(--ink-line);
    pointer-events: auto;
  }
  .dg-ob-story__panel.is-past { opacity: 1; transform: none; }
  .dg-ob-story__progress,
  .dg-ob-story__sentinels { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dg-ob-story__panel {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dg-ob-story__pip { transition: none; }
}

/* --- Section showcase chrome (for sections.html) ------------------------ */
.s-showcase-label {
  position: sticky; top: 0; z-index: 10;
  background: var(--ink); color: var(--bone);
  padding: 8px 24px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--t-mono-s);
  letter-spacing: var(--track-mono); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  border-bottom: 1px solid var(--ink-line);
}
.s-showcase-label .name .brk { color: var(--ink-mute); }
.s-showcase-label .hint { color: var(--ink-mute); }