/* ═══════════════════════════════════════════════════════════════════════
   Calibrated Autonomy

   Palette, type scale and section order follow the design brief this site
   was built from. Two conventions are load-bearing:

   1. The four authority tiers are an escalation scale, not four unrelated
      colours: green → blue → amber → red tracks rising consequence of
      error, which is exactly what the Matrix argues. Every tier swatch on
      the site is driven by [data-tier] so the colour can never disagree
      with the label.
   2. Nothing animates without a prefers-reduced-motion escape, and every
      interactive element keeps a visible :focus-visible ring. This site
      sells engineering judgment; sloppy accessibility undercuts the pitch
      more than it would on most marketing sites.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0A0D12;
  --surface: #11161E;
  --surface-light: #171E28;
  --surface-lift: #1D2632;
  --text: #F5F7FA;
  --text-dim: #9DA8B7;
  --text-faint: #6C7787;
  --accent: #3DDC97;
  --blue: #4B8CFF;
  --warning: #FFB547;
  --critical: #FF5C65;

  --tier-autonomous: var(--accent);
  --tier-validated: var(--blue);
  --tier-supervised: var(--warning);
  --tier-human: var(--critical);

  --border: rgba(157, 168, 183, 0.16);
  --border-strong: rgba(157, 168, 183, 0.3);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shell: 1200px;
  --radius: 10px;
  --radius-lg: 16px;

  --step: clamp(3.5rem, 7vw, 7rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Clears the fixed header when an anchor is jumped to. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 4.3vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.06rem, 1.5vw, 1.28rem); letter-spacing: -0.014em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.12em 0.42em;
  color: var(--accent);
}

strong { font-weight: 600; color: var(--text); }
em { font-style: italic; color: var(--text-dim); }

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

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

.skip {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  background: var(--accent); color: var(--bg);
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
}
.skip:focus { top: 0; text-decoration: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.accent-text { color: var(--accent); }
.tm { font-size: 0.45em; vertical-align: super; color: var(--text-dim); font-weight: 500; }

/* ─────────────────────────── tier colour system ───────────────────────── */

[data-tier="AUTONOMOUS"] { --tier: var(--tier-autonomous); }
[data-tier="VALIDATED"]  { --tier: var(--tier-validated); }
[data-tier="SUPERVISED"] { --tier: var(--tier-supervised); }
[data-tier="HUMAN"]      { --tier: var(--tier-human); }

.tier-dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--tier, var(--text-faint));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier, var(--text-faint)) 18%, transparent);
}

/* ─────────────────────────────── buttons ──────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: #06120C; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 84%, white); }

.btn-ghost { color: var(--text); border-color: var(--border-strong); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(61, 220, 151, 0.06); }

.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.86rem; }
.btn-block { width: 100%; justify-content: center; }

/* ──────────────────────────────── header ──────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.022em;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand-thin { color: var(--text-dim); font-weight: 400; }

.brand-mark { width: 26px; height: 26px; flex: none; }
.mark-frame { fill: none; stroke: var(--border-strong); stroke-width: 1.3; }
.mark-auto,
.mark-valid,
.mark-human { fill: none; stroke-width: 1.9; stroke-linecap: round; }
.mark-auto  { stroke: var(--tier-autonomous); }
.mark-valid { stroke: var(--tier-validated); }
.mark-human { stroke: var(--tier-human); }
.mark-gate  { fill: var(--tier-validated); stroke: none; }
.mark-node  { fill: var(--tier-supervised); stroke: none; }

.site-nav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .header-cta { display: none; }
  .site-nav ul { gap: 1.1rem; }
  .site-nav a { font-size: 0.82rem; }
}

@media (max-width: 720px) {
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 2.6rem; height: 2.6rem;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
  }
  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after {
    display: block; width: 16px; height: 1.5px;
    background: var(--text); border-radius: 2px;
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
  }
  .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; }
  .nav-toggle-bar::before { transform: translateY(-5px); }
  .nav-toggle-bar::after  { transform: translateY(5px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: rotate(-45deg); }

  .site-nav ul {
    position: fixed;
    inset: 4.4rem 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0;
    display: none;
  }
  .site-nav ul.is-open { display: flex; }
  .site-nav li { border-top: 1px solid var(--border); }
  .site-nav li:first-child { border-top: 0; }
  .site-nav a {
    display: block;
    padding: 0.95rem clamp(1.15rem, 4vw, 2.5rem);
    font-size: 0.98rem;
    border-bottom: 0;
  }
}

/* ───────────────────────────────── hero ───────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(7.5rem, 14vh, 11rem) 0 var(--step);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 30% 40%, rgba(10, 13, 18, 0.86), transparent 70%),
    linear-gradient(to bottom, rgba(10, 13, 18, 0.5) 0%, rgba(10, 13, 18, 0.2) 40%, var(--bg) 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
}

.hero h1 { margin-bottom: 1.5rem; }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  color: var(--text-dim);
  max-width: 40ch;
  margin-bottom: 1.1rem;
}
.lede-sub {
  font-size: 0.97rem;
  color: var(--text-faint);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.4rem; }

.hero-note {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-faint);
  letter-spacing: 0.01em;
}

/* hero transformation diagram — CSS grid, not SVG, so the labels are real
   selectable text that a screen reader can read and a narrow viewport can wrap */
.hero-diagram {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  backdrop-filter: blur(8px);
}

.diagram-caption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.3rem;
}

.transform {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.9rem;
  align-items: start;
}
.transform-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

.chain { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.34rem; }
.chain li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 0.42rem 0.55rem;
  border-radius: 6px;
  background: var(--surface-light);
  border-left: 2px solid var(--border-strong);
}
.chain-before li { color: var(--text-faint); }
.chain-after li { color: var(--text-dim); border-left-color: var(--tier); }

.transform-metric {
  font-size: 0.74rem;
  color: var(--text-faint);
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}
.chain-after + .transform-metric strong { color: var(--accent); }

.transform-arrow {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding-top: 2rem;
}
.transform-arrow-line {
  width: 1px; height: 2.2rem;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
}
.transform-arrow-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  line-height: 1.4;
}

.tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  list-style: none;
  margin: 1.3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.tier-legend li {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (max-width: 520px) {
  .transform { grid-template-columns: 1fr; }
  .transform-arrow { padding: 0.4rem 0; }
  .transform-arrow-line { width: 2.2rem; height: 1px; background: linear-gradient(to right, transparent, var(--accent), transparent); }
}

/* ─────────────────────────────── sections ─────────────────────────────── */

.section {
  position: relative;
  padding-block: var(--step);
  isolation: isolate;
}
.section-alt { background: var(--surface); }
.section-alt::before,
.section-alt::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.section-alt::before { top: 0; }
.section-alt::after { bottom: 0; }

.section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.16;
  mask-image: linear-gradient(to bottom, transparent, black 45%, transparent);
}

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 4.5vw, 3.8rem); }
.section-head h2 { margin-bottom: 1.1rem; }
.section-lede {
  font-size: clamp(0.99rem, 1.2vw, 1.09rem);
  color: var(--text-dim);
}
.section-lede + .section-lede { margin-top: -0.3rem; }

.notice {
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* ─────────────────────────────── pillars ──────────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--tier);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.section-alt .pillar { background: var(--surface-light); }
.pillar:hover { transform: translateY(-3px); background: var(--surface-light); }
.pillar-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--tier);
  margin-bottom: 1rem;
}
.pillar h3 { margin-bottom: 0.6rem; }
.pillar p:last-child { font-size: 0.9rem; color: var(--text-dim); }

/* ──────────────────────────── the walkthrough ─────────────────────────── */

.walkthrough {
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.wt-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.wt-tab {
  flex: 1 1 200px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-right: 1px solid var(--border);
  padding: 1.1rem 1.3rem;
  text-align: left;
  font: inherit;
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.wt-tab:last-child { border-right: 0; }
.wt-tab:hover { background: var(--surface); color: var(--text); }
.wt-tab[aria-selected="true"] {
  background: var(--surface-light);
  color: var(--text);
  border-bottom-color: var(--accent);
}
.wt-tab-industry {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.4rem;
}
.wt-tab[aria-selected="true"] .wt-tab-industry { color: var(--accent); }
.wt-tab-name { font-size: 0.94rem; font-weight: 600; line-height: 1.35; }

/* Stacked tabs need a different selection marker. The desktop indicator is an
   accent bottom border, which sits under the tab and reads as "this one" only
   while the tabs are side by side. Once they stack, that same line lands between
   two rows and reads as a divider — it could belong to either. So below this
   width the marker moves to the inline-start edge, and the bottom border reverts
   to being an ordinary separator. */
@media (max-width: 700px) {
  .wt-picker { flex-direction: column; }
  .wt-tab {
    /* flex-basis follows the main axis, so the 200px basis above would become a
       200px tall tab the moment the picker turns into a column. */
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .wt-tab:last-child { border-bottom: 0; }
  .wt-tab[aria-selected="true"] {
    border-bottom-color: var(--border);
    box-shadow: inset 3px 0 0 var(--accent);
  }
}

.wt-body { padding: clamp(1.3rem, 3vw, 2.2rem); }
.wt-summary {
  color: var(--text-dim);
  font-size: 0.98rem;
  max-width: 78ch;
  margin-bottom: 1.8rem;
}

/* headline numbers */
.wt-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  /* Deliberately NOT the gap-as-border trick (container painted --border, cells
     painted --surface, gaps showing through). There are five metrics, and at two,
     three and four columns the last row is short — so the unoccupied cell would
     paint --border and read as a ghost tile sitting next to the final number.
     Instead the container is --surface throughout and each cell draws its own
     hairline; adjacent shadows meet inside the 1px gap to form one line, and the
     short row simply ends as continuous surface. auto-fit collapses the surplus
     tracks to 0px at desktop widths, so five cells fill one row exactly there. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2rem;
}
.wt-metric {
  background: var(--surface);
  padding: 1.15rem 1.2rem;
  box-shadow: 0 0 0 1px var(--border);
}
.wt-metric-value {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.wt-metric-value.is-accent { color: var(--accent); }
.wt-metric-unit { font-size: 0.5em; font-weight: 500; color: var(--text-faint); letter-spacing: 0; }
.wt-metric-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.5;
}

/* authority distribution bar */
.wt-distribution { margin-bottom: 2.2rem; }
.wt-distribution-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.wt-distribution-title {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wt-distribution-note { font-size: 0.8rem; color: var(--text-dim); }
.wt-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.wt-bar-part { background: var(--tier); }
.wt-bar-part + .wt-bar-part { border-left: 1px solid var(--surface-light); }

.wt-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}
.wt-bar-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.wt-bar-legend b { color: var(--text); font-variant-numeric: tabular-nums; }

/* the step table — the centrepiece of the centrepiece */
.wt-steps-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.wt-steps-title { font-size: 1.02rem; font-weight: 600; margin: 0; }
.wt-steps-hint { font-size: 0.78rem; color: var(--text-faint); margin: 0; }

.wt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.wt-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tier);
  border-radius: var(--radius);
  overflow: hidden;
}
.wt-step.is-human { background: color-mix(in srgb, var(--tier) 5%, var(--surface)); }

.wt-step-button {
  display: grid;
  grid-template-columns: 2.3rem 1fr auto auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.85rem 1rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s var(--ease);
}
.wt-step-button:hover { background: var(--surface-lift); }

.wt-step-index {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.wt-step-label { font-size: 0.92rem; font-weight: 500; line-height: 1.4; }

.wt-step-tier {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier) 34%, transparent);
  border-radius: 999px;
  padding: 0.26rem 0.62rem;
  white-space: nowrap;
}

.wt-step-chevron {
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  color: var(--text-faint);
  transition: transform 0.2s var(--ease);
}
.wt-step-button[aria-expanded="true"] .wt-step-chevron { transform: rotate(180deg); color: var(--accent); }

.wt-step-detail {
  padding: 0 1rem 1.1rem calc(1rem + 2.3rem + 0.9rem);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: -1px;
}
.wt-step-detail[hidden] { display: none; }
.wt-step-reason { font-size: 0.9rem; color: var(--text-dim); max-width: 76ch; margin-bottom: 0.9rem; }
.wt-step-reason-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tier);
  margin-bottom: 0.4rem;
}
.wt-step-minutes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}
.wt-step-minutes b { color: var(--text-dim); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .wt-step-button {
    grid-template-columns: 1.9rem 1fr auto;
    gap: 0.6rem 0.7rem;
  }
  .wt-step-tier { grid-column: 2; justify-self: start; }
  .wt-step-chevron { grid-row: 1; grid-column: 3; }
  .wt-step-detail { padding-left: 1rem; }
}

/* the human-touchpoint callout */
.wt-touchpoints {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}
.wt-touchpoints h4 {
  font-size: 1.02rem;
  margin-bottom: 0.5rem;
}
.wt-touchpoints-lede { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 1.1rem; max-width: 74ch; }
.wt-touchpoint-list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.wt-touchpoint {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  background: color-mix(in srgb, var(--tier) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tier) 24%, transparent);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
}
.wt-touchpoint .tier-dot { margin-top: 0.45rem; }
.wt-touchpoint-label { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.25rem; }
.wt-touchpoint-tier {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tier);
}
.wt-outcome {
  font-size: 0.96rem;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: 1.1rem;
  max-width: 76ch;
}

.wt-caveat {
  margin-top: 1.6rem;
  font-size: 0.76rem;
  color: var(--text-faint);
  line-height: 1.6;
  max-width: 80ch;
}

.pullquote {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 34ch;
  text-align: center;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  color: var(--text-dim);
  letter-spacing: -0.018em;
}
.pullquote strong { color: var(--accent); font-weight: 700; }

/* ────────────────────────────── engagements ───────────────────────────── */

/* Explicitly 2x2 rather than auto-fit: four cards in a three-column track leaves
   the fourth orphaned beside two empty columns, and these cards carry enough
   copy that two wide columns read better than three narrow ones. */
.engagements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
@media (max-width: 780px) {
  .engagements { grid-template-columns: 1fr; }
}
.engagement {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.section-alt .engagement { background: var(--surface-light); }
.engagement:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.engagement-flagship {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.engagement-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.engagement-head h3 { margin: 0; margin-right: auto; }
/* Hug the content when the badge wraps to its own line, instead of stretching
   across the card. */
.engagement-head > :not(h3) { flex: 0 0 auto; }

/* Currently unused on purpose: the price band is commented out in index.html.
   Kept so republishing the band stays a one-line HTML change. Not dead code. */
.engagement-price {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  margin: 0;
  white-space: nowrap;
}
.engagement-badge {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #06120C;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  margin: 0;
  white-space: nowrap;
}

.engagement-promise {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.9rem;
}
.engagement p:not([class]) { font-size: 0.9rem; color: var(--text-dim); }

.engagement-guarantee {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--accent);
}

.list-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 1.2rem 0 0.7rem;
}

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.42rem; }
.ticks li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.87rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.42rem; height: 0.24rem;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
}
.section-alt .chips li { background: var(--bg); }
.chips-muted li { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--border-strong); }

.engagement-footer {
  margin-top: 1.6rem;
  font-size: 0.92rem;
  color: var(--text-dim);
  max-width: 74ch;
}

/* ───────────────────────── trust architecture stack ───────────────────── */

.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: none; }
.layer {
  background: color-mix(in srgb, var(--surface-light) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.3rem 1.4rem;
  align-items: baseline;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.layer:hover { transform: translateX(3px); }
.layer h3 { margin: 0; grid-column: 2; }
.layer-num {
  grid-row: 1 / span 3;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
  padding-top: 0.2rem;
}
.layer-items { grid-column: 2; font-size: 0.84rem; color: var(--text-faint); margin: 0; font-family: var(--mono); }
.layer-note { grid-column: 2; font-size: 0.86rem; color: var(--text-dim); margin: 0.4rem 0 0; }

/* Layers 3 and 4 are the actual product; the brief said to emphasise control,
   and the human-governance layer earns equal weight for the same reason. */
.layer-emphasis {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, var(--surface-light)), var(--surface-light));
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.layer-emphasis .layer-num { color: var(--accent); }
.layer-human {
  background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 9%, var(--surface-light)), var(--surface-light));
  border-color: color-mix(in srgb, var(--warning) 34%, transparent);
}
.layer-human .layer-num { color: var(--warning); }

.stack-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-faint);
  text-align: center;
}

@media (max-width: 620px) {
  .layer { grid-template-columns: 1fr; gap: 0.35rem; }
  .layer h3, .layer-items, .layer-note { grid-column: 1; }
  .layer-num { grid-row: auto; padding-top: 0; }
}

/* ─────────────────────────────── the matrix ───────────────────────────── */

.matrix-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) { .matrix-wrap { grid-template-columns: 1fr; } }

.matrix {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 0.7rem;
}
.matrix-grid {
  grid-row: 1; grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cell {
  background: color-mix(in srgb, var(--tier) 8%, var(--surface));
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
  min-height: 8.5rem;
  border-top: 2px solid var(--tier);
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s var(--ease);
}
.cell:hover { background: color-mix(in srgb, var(--tier) 15%, var(--surface)); }
.cell-tier {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tier);
  font-weight: 500;
  margin-bottom: 0.7rem;
}
.cell-desc { font-size: 0.88rem; color: var(--text-dim); margin: 0; }

.matrix-axis-x {
  grid-row: 2; grid-column: 2;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
  text-align: center;
}
.matrix-axis-x span, .matrix-axis-y span { color: var(--text-dim); }
.matrix-axis-y {
  grid-row: 1; grid-column: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
  text-align: center;
  place-self: center;
}

.matrix-copy p:not([class]) { color: var(--text-dim); font-size: 0.96rem; }
.matrix-quote {
  font-size: clamp(1.06rem, 1.7vw, 1.28rem);
  color: var(--text);
  line-height: 1.45;
  letter-spacing: -0.016em;
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
  margin: 1.3rem 0;
}

/* ───────────────────── reference architectures (JS-rendered) ──────────── */

.refs { display: grid; gap: 1.4rem; }

.ref {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 860px) { .ref { grid-template-columns: 1fr; } }

.ref-media { position: relative; min-height: 220px; }
.ref-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.ref-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, var(--surface-light) 99%);
}
@media (max-width: 860px) {
  .ref-media { min-height: 170px; }
  .ref-media::after { background: linear-gradient(to bottom, transparent 40%, var(--surface-light) 99%); }
}

.ref-body { padding: clamp(1.4rem, 2.6vw, 2rem); }
.ref-industry {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.ref-body h3 { margin-bottom: 0.8rem; }
.ref-summary { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 1.3rem; }

/* Grid, not flex: with flex-wrap the fourth stat drops to a new line and its
   value ends up beside the previous row's labels, which reads as one garbled
   figure. A grid keeps every value directly above its own label. */
.ref-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
}
@media (max-width: 1040px) {
  .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ref-stat-value {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ref-stat-value small { font-size: 0.55em; font-weight: 500; color: var(--text-faint); }
.ref-stat-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ref-human {
  font-size: 0.86rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
}
.ref-human strong { color: var(--text); }
.ref-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* ───────────────────────────── comparison ─────────────────────────────── */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.compare-col {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--surface);
}
.compare-col h3 { margin-bottom: 1.2rem; }
.compare-col ol { margin: 0; padding: 0; list-style: none; counter-reset: item; display: grid; gap: 0.55rem; }
.compare-col li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-dim);
  align-items: baseline;
}
.compare-col li::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-faint);
}
.compare-them { opacity: 0.72; }
.compare-them h3 { color: var(--text-dim); }
.compare-them li { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.compare-us { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.compare-us li::before { color: var(--accent); }

.measures {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.6rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
@media (max-width: 760px) { .measures { grid-template-columns: 1fr; } }
.measure-col h3 { font-size: 0.95rem; margin-bottom: 0.9rem; }
.measure-no h3 { color: var(--text-faint); }

.wont {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--critical);
  border-radius: var(--radius-lg);
}
.wont h3 { margin-bottom: 0.7rem; }
.wont > p:not([class]) { font-size: 0.93rem; color: var(--text-dim); }
.wont-list {
  list-style: none;
  margin: 1.2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.5rem 1.6rem;
}
.wont-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.89rem;
  color: var(--text-dim);
}
.wont-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.7rem; height: 1.5px;
  background: var(--critical);
}
.wont-note { font-size: 0.89rem; color: var(--text-faint); max-width: 74ch; }

/* ─────────────────────────────── philosophy ───────────────────────────── */

.philosophy {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
@media (max-width: 880px) { .philosophy { grid-template-columns: 1fr; } }

.philosophy-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}
.philosophy-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: 0.85; }
.philosophy-copy h2 { font-size: clamp(1.32rem, 2.2vw, 1.85rem); margin-bottom: 1.3rem; }
.philosophy-copy p:not([class]) { color: var(--text-dim); font-size: 0.96rem; }
.philosophy-sign {
  font-size: 1.06rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 1.4rem;
}

/* ──────────────────────────── engagement steps ────────────────────────── */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.step { background: var(--surface); padding: 1.5rem 1.4rem; transition: background-color 0.2s var(--ease); }
.section-alt .step { background: var(--surface-light); }
.step:hover { background: var(--surface-light); }
.step-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.step p:last-child { font-size: 0.86rem; color: var(--text-dim); }

/* ──────────────────────────────── contact ─────────────────────────────── */

.section-cta {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--surface);
  border-top: 1px solid var(--border);
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.contact-copy h2 { font-size: clamp(1.5rem, 2.9vw, 2.3rem); }
.contact-sub { font-size: 1.06rem; color: var(--text-dim); margin-bottom: 1.8rem; }

.contact-points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.85rem; }
.contact-points li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.94rem;
  color: var(--text-dim);
}
.contact-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.contact-note {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-faint);
}

.contact-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.form-title { font-size: 1.06rem; font-weight: 600; margin-bottom: 1.4rem; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 0.45rem;
}
.field-hint { display: block; font-weight: 400; font-size: 0.76rem; color: var(--text-faint); margin-top: 0.15rem; }

.field input, .field textarea {
  width: 100%;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.field.has-error input, .field.has-error textarea { border-color: var(--critical); }

.field-error {
  font-size: 0.78rem;
  color: var(--critical);
  margin: 0.35rem 0 0;
  min-height: 0;
}
.field-error:empty { display: none; }

/* Off-screen rather than display:none — some bots skip anything not rendered. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  min-height: 1.2em;
}
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--accent); }
.form-status.is-error { color: var(--critical); }
.form-status.is-busy { color: var(--text-dim); }

.form-fineprint {
  margin-top: 1rem;
  font-size: 0.76rem;
  color: var(--text-faint);
  text-align: center;
}

/* ──────────────────────────────── footer ──────────────────────────────── */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr 1fr; } }

.footer-brand { grid-column: 1 / -1; }
@media (min-width: 701px) { .footer-brand { grid-column: 1; } }

.footer-name { font-weight: 700; font-size: 1.06rem; margin-bottom: 0.4rem; letter-spacing: -0.02em; }
.footer-tag { font-size: 0.88rem; color: var(--text-dim); max-width: 30ch; }

.footer-head {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-col a { color: var(--text-dim); font-size: 0.87rem; }
.footer-col a:hover { color: var(--accent); text-decoration: none; }

.footer-legal {
  border-top: 1px solid var(--border);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}
.footer-legal p { font-size: 0.76rem; color: var(--text-faint); margin: 0; }
.footer-legal-note { max-width: 52ch; }

/* ───────────────────────── reveal-on-scroll ───────────────────────────── */

/* Opt-in via a class the script adds, so a no-JS visitor never sees a page of
   invisible content waiting for an observer that will never run. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .pillar:hover, .layer:hover, .engagement:hover { transform: none; }
}

@media print {
  .site-header, .skip, .hero-bg, .section-bg, .contact-form, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}