/* =========================================================
   XtroAI — editorial design system
   Ink, paper, one accent. Runs dark by default now — the
   press-room read established in the hero, carried through
   the whole site rather than left as a one-section treatment.

   The base tone is a cool charcoal-navy rather than the warm
   brown-black the dark conversion first used. "Under the hood"
   was already built on its own cool navy (#0a0e17) precisely
   because a product panel needed to read as precise instrument,
   not warm ink — the rest of the page now shares that reasoning
   instead of sitting next to it as an unrelated cool insert.
   Red stays exactly as it was: it's the brand mark, not a mood.
   ========================================================= */

:root {
  /* ink & paper — ink is now the dark ground, paper the light,
     legible-text tone; the names stay so every rule below keeps
     reading correctly without being rewritten one at a time */
  --paper: #12151b;
  --paper-2: #1a1e26;
  --paper-3: #232830;
  --ink: #eef0f3;
  --ink-2: #b8bec7;
  --ink-3: #838a94;
  --ink-4: #4f545c;

  /* brand accent — labels, marks, buttons, emphasis, "active/in
     progress" states. Matches the Tamsi Soft lineage this site now
     consolidates. */
  --accent: #8dc63f;
  --accent-soft: rgba(141, 198, 63, 0.14);
  --good: #4f9e86;
  --good-soft: rgba(79, 158, 134, 0.14);
  /* warn — specifically blocked/refused/bad-outcome states (Fig. 1's
     refuse path, the loss curve's bad run). Kept separate from the
     brand accent now that accent is green and would otherwise collide
     with "good" meaning the same thing. */
  --warn: #d8380f;
  --warn-soft: rgba(216, 56, 15, 0.14);

  /* rules */
  --rule: rgba(238, 240, 243, 0.14);
  --rule-strong: rgba(238, 240, 243, 0.3);
  --rule-heavy: rgba(238, 240, 243, 0.82);

  /* type */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* geometry */
  --shell: 1280px;
  --gutter: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background-color: var(--paper);
  /* a quiet light-from-above gradient anchored to the top of the
     document, so the page reads as lit rather than a flat fill —
     layered under the existing faint paper tooth */
  background-image:
    linear-gradient(180deg, #1c212b 0%, var(--paper) 640px),
    radial-gradient(rgba(238, 240, 243, 0.045) 0.5px, transparent 0.5px);
  background-repeat: no-repeat, repeat;
  background-size: auto, 4px 4px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

p {
  margin: 0;
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' 60;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-wrap: balance;
  hyphens: manual;
}

.ink-accent {
  color: var(--accent);
  font-style: italic;
  font-variation-settings: 'opsz' 72;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 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-link {
  position: fixed;
  top: -60px;
  left: 20px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 14px;
}

.shell {
  width: min(var(--shell), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

section[id],
main[id] {
  scroll-margin-top: 110px;
}

/* =========================================================
   Masthead + header
   ========================================================= */

.masthead {
  border-bottom: 1px solid var(--rule);
  /* always the darkest strip on the page, regardless of theme — was
     ink-on-paper when the page was light, stays paper-on-ink now that
     the page itself is dark, rather than flipping to a light band */
  background: var(--paper-3);
  color: var(--ink);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 34px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.masthead-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f6d9cf;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: blip 2.6s ease-in-out infinite;
}

@keyframes blip {
  50% {
    opacity: 0.35;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-heavy);
  transition: box-shadow 0.3s var(--ease);
}

.site-header.is-stuck {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--accent);
  transform: translateY(4px);
  border-radius: 6px;
  overflow: hidden;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-word {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variation-settings: 'opsz' 24;
  letter-spacing: -0.03em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.main-nav a {
  position: relative;
  padding: 4px 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.22s var(--ease);
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.main-nav a:hover,
.main-nav a.is-current {
  color: var(--ink);
}

.main-nav a:hover::after,
.main-nav a.is-current::after {
  transform: scaleX(1);
}

.nav-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-4);
  margin-right: 3px;
}

.main-nav a:hover .nav-num,
.main-nav a.is-current .nav-num {
  color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  width: 40px;
  height: 40px;
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: width 0.25s var(--ease), transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle span:nth-child(1) { width: 22px; }
.nav-toggle span:nth-child(2) { width: 16px; }
.nav-toggle span:nth-child(3) { width: 22px; }

.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 108px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
  flex-direction: column;
  width: min(var(--shell), calc(100% - (var(--gutter) * 2)));
  padding: 8px 0;
  background: var(--paper);
  border: 1px solid var(--rule-heavy);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  overflow: hidden;
}

.mobile-nav a:not(.btn) {
  padding: 15px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.mobile-nav .btn {
  margin: 14px 20px 10px;
  justify-content: center;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 0.25s var(--ease);
}

.btn svg {
  width: 17px;
  height: 17px;
  transition: transform 0.3s var(--ease);
}

.btn-solid {
  padding: 12px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 10px;
}

.btn-solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  /* the accent fill needs light text regardless of theme — var(--paper)
     is correct on the light-page version of this token set but not once
     ink/paper invert for the dark theme */
  color: #eef0f3;
}

.btn-lg {
  padding: 17px 32px;
  font-size: 0.95rem;
}

.btn-text {
  position: relative;
  padding: 4px 0;
  color: var(--ink);
  border-bottom: 1.5px solid var(--rule-strong);
}

.btn-text:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.btn-text:hover svg {
  transform: translateX(4px);
}

/* =========================================================
   Section furniture
   ========================================================= */

.sec-head {
  max-width: 780px;
  margin-bottom: 64px;
}

.sec-mark {
  display: block;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.sec-head h2 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 500;
}

.sec-lede {
  margin-top: 24px;
  max-width: 620px;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.68;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  padding-top: clamp(40px, 5.4vw, 72px);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}


/* ---------- registration target ---------- */

.regmark {
  position: absolute;
  top: 46%;
  right: -16%;
  width: min(960px, 76vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.regmark-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.reg-rings circle {
  fill: none;
  stroke: rgba(238, 240, 243, 0.1);
  stroke-width: 0.7;
}

.reg-ticks line {
  stroke: rgba(238, 240, 243, 0.14);
  stroke-width: 0.5;
}

.reg-cross line {
  stroke: rgba(238, 240, 243, 0.12);
  stroke-width: 0.7;
}

/* ink dots run down their radius and register at the centre, then release */
.reg-inks circle {
  animation: inkRun var(--dur, 14s) cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: var(--delay, 0s);
  transform-box: view-box;
  transform-origin: 0 0;
}

@keyframes inkRun {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  62% {
    transform: translate(var(--tx), var(--ty));
    opacity: 0.85;
  }
  76% {
    transform: translate(var(--tx), var(--ty));
    opacity: 0.85;
  }
  92%,
  100% {
    transform: translate(var(--tx), var(--ty));
    opacity: 0;
  }
}

.hero > .shell {
  position: relative;
  z-index: 1;
}

/* the embedding field, wordmark and ink bar sit behind .shell — full
   bleed across the section, same as .sec-bg elsewhere on the page */
.hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 92px);
  /* stages Fig. 1's real 3D tilt below — has no effect on hero-copy,
     which never carries a 3D transform */
  perspective: 1400px;
}

.hero-title {
  margin-top: 20px;
  /* was up to 7.4rem — tall enough on a common laptop screen that the
     CTA and proof stats below never made it into the first view */
  font-size: clamp(2.9rem, 7.2vw, 6.4rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.hero-lede {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  max-width: 600px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 30px;
}

/* technical figure — held in real 3D and given a slow ambient sway, the
   same device already used for the network figure, so the panel reads
   as a physical object rather than a flat diagram. The SVG inside stays
   untouched DOM/text, so it's crisp at any tilt angle. On pointer-fine
   devices the sway pauses and script.js drives the tilt from the cursor
   instead; everything freezes flat under reduced motion. */
.hero-figure {
  margin: 0;
  padding: 26px 24px 22px;
  border: 1px solid var(--rule-strong);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: var(--paper-2);
  transform-style: preserve-3d;
  /* the hero runs dark now, so depth reads as a rim-light plus a soft
     drop into the near-black stage, not a shadow cast on paper */
  box-shadow: 0 0 0 1px rgba(238, 240, 243, 0.05), 0 34px 60px -24px rgba(0, 0, 0, 0.6);
  animation: figureTilt 11s ease-in-out infinite alternate;
  transition: box-shadow 0.4s var(--ease);
}

.hero-figure.tilt-live {
  animation-play-state: paused;
}

@keyframes figureTilt {
  from { transform: rotateY(-4deg) rotateX(2.2deg); }
  to   { transform: rotateY(4deg) rotateX(-2.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-figure {
    animation: none;
    transform: none;
    box-shadow: 0 0 0 1px rgba(238, 240, 243, 0.05), 0 12px 30px -12px rgba(0, 0, 0, 0.5);
  }
}

@media (pointer: coarse) {
  .hero-figure {
    animation-duration: 16s;
  }
}

.fig1-stage {
  position: relative;
  aspect-ratio: 400 / 330;
}

.fig1-stage .schematic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--ink-3);
}

.sch-box rect,
.sch-gate,
.sch-out,
.sch-box-dim,
.sch-box-warn {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.1;
}

.sch-box-dim {
  stroke: var(--ink-4);
  stroke-dasharray: 3 3;
}

/* the refused/escalated path — the one genuinely blocked state in this
   diagram, so it's the one box that gets the warning color */
.sch-box-warn {
  stroke: var(--warn);
  stroke-dasharray: 3 3;
}

.sch-gate {
  fill: var(--paper);
  stroke: var(--accent);
  stroke-width: 1.6;
}

/* the verified/answered path — pass, not brand emphasis, so it takes
   the verified color rather than the accent */
.sch-out {
  fill: var(--good);
  stroke: var(--good);
}

.sch-wire line,
.sch-wire path {
  stroke: var(--ink);
  stroke-width: 1.1;
  fill: none;
  color: var(--ink);
  transition: stroke 0.3s var(--ease);
}

.sch-wire .sch-wire-dim {
  stroke: var(--ink-4);
  stroke-dasharray: 3 3;
  color: var(--ink-4);
}

/* the two branch wires light up in the verdict's color once the token
   actually resolves down that path this cycle */
.sch-wire path.is-lit-pass {
  stroke: var(--good);
}

.sch-wire path.is-lit-fail {
  stroke: var(--warn);
  stroke-dasharray: none;
}

.sch-label text {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--ink);
}

.sch-label .sch-label-dim {
  fill: var(--ink-3);
}

.sch-label .sch-label-warn {
  fill: var(--warn);
}

/* dark text reads better on the lighter, muted verified-green than
   light text would — fixed regardless of the page's own theme */
.sch-label .sch-label-out {
  fill: #12151b;
}

.sch-note text {
  font-family: var(--mono);
  font-size: 8px;
  font-style: italic;
  fill: var(--ink-3);
}

.sch-note .sch-note-good {
  fill: var(--good);
}

.sch-note .sch-note-warn {
  fill: var(--warn);
}

/* the query travelling through the pipeline */
.sch-pulse {
  fill: var(--accent);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(141, 198, 63, 0.55));
  transition: opacity 0.25s var(--ease);
}

.sch-pulse.is-live {
  opacity: 1;
}

/* a quick expanding ring fired off the gate the moment the token
   arrives, while it's "evaluating" — a one-shot burst, not a loop */
.sch-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 0;
}

.sch-ring.run {
  animation: schRing 550ms ease-out;
}

@keyframes schRing {
  0%   { opacity: 0.85; r: 6; }
  100% { opacity: 0; r: 44; }
}

/* nodes brighten as the query reaches them */
.sch-box rect,
.sch-gate,
.sch-out,
.sch-box-dim,
.sch-box-warn {
  transition: fill 0.35s var(--ease), stroke 0.35s var(--ease),
    stroke-width 0.35s var(--ease);
}

.sch-box rect.is-active {
  stroke: var(--accent);
  stroke-width: 1.8;
}

.sch-gate.is-active {
  stroke-width: 2.4;
  fill: rgba(141, 198, 63, 0.07);
}

#nAnswer.is-active {
  filter: drop-shadow(0 0 6px rgba(109, 155, 118, 0.5));
}

#nRefuse.is-active {
  stroke: var(--warn);
  stroke-dasharray: none;
}

/* proof band */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  max-width: 560px;
}

.hero-proof dt {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero-proof dd {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.hero-proof .proof-note {
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink-3);
}

.hero-figure figcaption {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.8rem;
  line-height: 1.6;
}

.fig-num {
  display: inline;
  margin-right: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ticker */
.ticker {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  overflow: hidden;
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: roll 38s linear infinite;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.ticker-track b {
  color: var(--accent);
  font-weight: 400;
}

@keyframes roll {
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   Thesis
   ========================================================= */

.thesis {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--rule);
}

.pullquote {
  margin: 0 0 clamp(56px, 7vw, 88px);
  max-width: 1050px;
}

.pullquote p {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  font-weight: 400;
  font-variation-settings: 'opsz' 60;
  line-height: 1.16;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.thesis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 80px);
}

.thesis-col h3 {
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tick-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tick-list li {
  position: relative;
  padding: 18px 0 18px 34px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.6;
}

.tick-list li::before {
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--mono);
  font-size: 0.9rem;
}

.tick-list-neg li::before {
  content: '×';
  color: var(--ink-4);
}

.tick-list-pos li::before {
  content: '→';
  color: var(--accent);
}

/* =========================================================
   Engagement index (ledger table)
   ========================================================= */

.index-section {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--rule);
}

.table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* below this, .ledger's own min-width forces horizontal scroll — without
   a visible cue the table just looks cut off mid-word at the right edge
   rather than reading as "swipe for more" */
.table-hint {
  display: none;
}

@media (max-width: 820px) {
  .table-hint {
    display: block;
    margin-bottom: 10px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--paper) 85%);
    pointer-events: none;
  }
}

.ledger {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.ledger thead th {
  padding: 0 18px 14px 0;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* position: relative makes this row the containing block for the
   name link's stretched ::after below, so the whole row is clickable,
   not just the engagement name itself */
.ledger tbody tr {
  position: relative;
  border-bottom: 1px solid var(--rule);
  transition: background 0.25s var(--ease);
}

.ledger tbody tr:hover {
  background: var(--paper-2);
}

.ledger td,
.ledger tbody th {
  padding: 24px 18px 24px 0;
  vertical-align: top;
  font-weight: 400;
}

.col-num {
  width: 52px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-4);
  padding-top: 28px !important;
}

.ledger tbody tr:hover .col-num {
  color: var(--accent);
}

.col-name {
  width: 20%;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.col-name a {
  color: inherit;
}

.col-name a:hover {
  color: var(--accent);
}

/* stretches the link over the entire row, so a visitor can click
   anywhere in it, not just the small text of the engagement name */
.col-name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.col-sector {
  width: 20%;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 28px !important;
}

/* a small sector icon so the row's industry reads at a glance while
   scanning the table, not just from the uppercase mono label */
.sector-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sector-icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.sector-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.col-system {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
}

.col-state {
  width: 90px;
  text-align: right;
  padding-top: 26px !important;
}

/* a running system in production is a verified state, not a warning —
   accent stays reserved for anything that actually needs attention */
.state {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--good);
  border-radius: 6px;
  color: var(--good);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.table-note {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* =========================================================
   Under the hood — dark product panel inset into the page.
   Runs on its own palette and type scale: cool navy, one red
   accent, rounded geometry, sans headings.
   ========================================================= */

.hood-wrap {
  padding: clamp(60px, 8vw, 110px) 0;
  border-bottom: 1px solid var(--rule);
}

.hood {
  --h-bg: #0a0e17;
  --h-surface: rgba(255, 255, 255, 0.024);
  --h-line: rgba(255, 255, 255, 0.09);
  --h-line-2: rgba(255, 255, 255, 0.14);
  --h-text: #f1f5f9;
  --h-muted: #97a5b8;
  --h-dim: #64748b;
  --h-red: #ef4444;

  padding: clamp(30px, 4vw, 62px);
  border-radius: clamp(18px, 2vw, 30px);
  background: var(--h-bg);
  color: var(--h-text);
  box-shadow: 0 30px 70px rgba(10, 14, 23, 0.22);
}

.hood-head {
  max-width: 760px;
  margin-bottom: clamp(34px, 4vw, 52px);
}

.hood-kicker {
  display: block;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--h-red);
}

.hood-head h2 {
  font-family: var(--sans);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--h-text);
}

.hood-stop {
  color: var(--h-red);
}

.hood-head p {
  margin-top: 20px;
  max-width: 620px;
  color: var(--h-muted);
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.66;
}

.hood-body {
  display: grid;
  /* narrow step column, wide console — matches the reference density */
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* ---------- curved rail + steps ---------- */

.hood-rail-wrap {
  position: relative;
  padding-left: 64px;
}

.hood-rail {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hood-rail-base {
  fill: none;
  stroke: rgba(239, 68, 68, 0.22);
  stroke-width: 2;
  stroke-linecap: round;
}

.hood-rail-progress {
  fill: none;
  stroke: var(--h-red);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.65s var(--ease);
}

.hood-node {
  fill: #ffffff;
  opacity: 0.22;
  transition: opacity 0.3s var(--ease), fill 0.3s var(--ease), r 0.3s var(--ease);
}

.hood-node.is-done {
  opacity: 1;
}

.hood-node.is-current {
  fill: var(--h-red);
  opacity: 1;
}

.hood-node-halo {
  fill: var(--h-red);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.hood-node-halo.is-lit {
  opacity: 0.22;
}

.hood-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hood-steps li {
  padding-bottom: 24px;
}

.hood-steps li:last-child {
  padding-bottom: 0;
}

.hood-step-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--h-red);
}

.hood-steps h3 {
  display: inline;
  margin-left: 10px;
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--h-text);
}

.hood-steps li p {
  margin-top: 7px;
  color: var(--h-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.hood-steps li h3,
.hood-steps li p,
.hood-steps li .hood-step-num {
  transition: opacity 0.3s var(--ease);
}

/* dimmed only once the sequence is armed, so a stale or failed script
   can never leave the rail greyed out */
.hood.is-armed .hood-steps li:not(.is-done):not(.is-current) {
  opacity: 0.5;
}

/* ---------- console ---------- */

.hood-panel {
  border: 1px solid var(--h-line);
  border-radius: clamp(12px, 1.2vw, 18px);
  background: var(--h-surface);
  overflow: hidden;
}

.hood-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--h-line);
}

.hood-dots {
  display: inline-flex;
  gap: 7px;
}

.hood-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.hood-dots i:first-child { background: #ef4444; }
.hood-dots i:nth-child(2) { background: #f5a623; }
.hood-dots i:last-child { background: #22c55e; }

.hood-title {
  flex: 1;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--h-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hood-badges {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.hood-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h-muted);
}

.hood-badge:not(.hood-badge-demo) {
  padding: 6px 12px;
  border: 1px solid var(--h-line-2);
  border-radius: 999px;
}

.hood-badge-demo .dot {
  background: var(--h-red);
}

/* ---------- run indicator ---------- */

.hood-progress {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.hood-progress span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.45), var(--h-red));
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.55);
  transition: width 0.4s linear;
}

/* a bright head on the leading edge, so the bar reads as something
   travelling rather than a block that grows */
.hood-progress span::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translate(50%, -50%);
  box-shadow: 0 0 10px 2px rgba(239, 68, 68, 0.9);
}

.hood-progress span.is-done::after {
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

/* ---------- log ---------- */

.hood-log {
  display: grid;
  /* no row gap — consecutive output should read as one contiguous
     terminal block, spacing comes from line-height alone */
  gap: 0;
  padding: 34px 26px 30px;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.68;
  color: #cbd5e1;
  min-height: 250px;
  align-content: start;
}

/* Lines are only hidden once script.js has armed the sequence. If the
   script is stale, blocked or errors, the log simply reads in full. */
.hood.is-armed .hood-log p {
  /* content-box so the caret's border sits outside the typed width,
     instead of clipping the last character under the global border-box */
  box-sizing: content-box;
  width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  justify-self: start;
  opacity: 0;
}

.hood.is-armed .hood-log p.is-typing,
.hood.is-armed .hood-log p.is-typed {
  opacity: 1;
}

.hood.is-armed .hood-log p.is-typed {
  width: var(--type-w, auto);
}

/* terminal block cursor — sits on its own line under the output */
.hood-caret {
  display: block;
  width: 9px;
  height: 16px;
  background: #cbd5e1;
  animation: hoodBlink 1.05s steps(1) infinite;
}

.hood-caret.is-hidden {
  display: none;
}

@keyframes hoodBlink {
  50% {
    opacity: 0;
  }
}

@keyframes hoodType {
  from {
    width: 0;
  }
  to {
    width: var(--type-w);
  }
}


/* narrow screens: keep the sequencing, drop the clipping so lines wrap */
@media (max-width: 700px) {
  .hood.is-armed .hood-log p {
    width: auto !important;
    white-space: normal;
    overflow: visible;
    animation: none !important;
    transition: opacity 0.35s var(--ease);
  }
}

.hood-log .t {
  color: var(--h-dim);
}

.hood-log .v {
  color: var(--h-text);
}

/* the gate line is the moment a person gets involved — whole line accent */
.hood-log .is-gate,
.hood-log .is-gate .t,
.hood-log .is-gate .v {
  color: var(--h-red);
}

.hood-log .is-final {
  color: #ffffff;
  font-weight: 600;
}

.hood-log .is-final .t {
  color: #ffffff;
}

/* ---------- stat tiles ---------- */

.hood-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.hood-stats > div {
  padding: 20px 22px;
  border: 1px solid var(--h-line);
  border-radius: 12px;
  background: var(--h-surface);
}

.hood-stat-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h-muted);
}

.hood-stats strong {
  font-family: var(--sans);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--h-text);
}

.hood-disclaimer {
  margin-top: 22px;
  color: var(--h-muted);
  font-size: 0.86rem;
  line-height: 1.62;
}

/* =========================================================
   Services / offers
   ========================================================= */

.services {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--rule);
}

.offer-list {
  border-top: 1.5px solid var(--ink);
}

.offer {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: clamp(20px, 3.5vw, 56px);
  padding: clamp(32px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--rule);
  transition: background 0.3s var(--ease);
}

.offer:hover {
  background: var(--paper-2);
}

.offer-head {
  position: relative;
  padding-left: 46px;
}

.offer-num {
  position: absolute;
  left: 0;
  top: 6px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
}

.offer-head h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 600;
}

.offer-term {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.offer-pitch {
  color: var(--ink);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.62;
}

.offer-points {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.offer-points li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}

.offer-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 1px;
  background: var(--ink-4);
}

.offer-for {
  align-self: start;
  padding: 18px 20px;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.55;
}

.offer-for span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* comparison against alternatives */
.compare {
  margin-top: clamp(50px, 6vw, 84px);
  padding-top: clamp(38px, 4vw, 54px);
  border-top: 1.5px solid var(--ink);
}

.compare-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 46px);
}

.compare-head h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 600;
}

.compare-head p {
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.66;
}

.compare-table {
  min-width: 820px;
}

.compare-table thead th {
  width: 25%;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  padding-right: 22px;
}

/* this column is the recommended choice, not a warning — accent-red
   would clash with what red now means everywhere else on the site
   (Fig. 1's refuse path, the loss curve's bad outcome). Green matches
   the LIVE badges and Fig. 1's own pass state instead. */
.compare-table thead th.col-us {
  color: var(--good);
}

.compare-table tbody th {
  padding: 22px 22px 22px 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  vertical-align: top;
}

.compare-table tbody td {
  padding: 22px 22px 22px 0;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.55;
  vertical-align: top;
}

.compare-table tbody td.col-us {
  padding-left: 18px;
  border-left: 1.5px solid var(--good);
  background: var(--good-soft);
  color: var(--ink);
  font-weight: 500;
}

.compare-table tbody tr:hover {
  background: transparent;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  color: var(--ink-4);
  font-style: italic;
  font-weight: 400;
}

/* this row is XtroAI admitting the wrong fit for some buyers — the
   green "recommended" tint from .col-us above would contradict its
   own text here, so it drops back to a neutral rule for this one row */
.compare-table tbody tr:last-child td.col-us {
  color: var(--ink-2);
  background: transparent;
  border-left-color: var(--rule-strong);
}

/* =========================================================
   Method
   ========================================================= */

.method {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--rule);
}

/* ---------- drafting field ---------- */

.draft-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ruled paper, fading out before it reaches the text */
.draft-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(238, 240, 243, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 240, 243, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}

/* a dimension rule down the gutter, as on a technical drawing */
.draft-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(8px, 3vw, 44px);
  width: 40px;
  height: 100%;
  overflow: visible;
}

.draft-rule line {
  stroke: rgba(238, 240, 243, 0.16);
  stroke-width: 1;
}

.draft-ticks line {
  stroke: rgba(238, 240, 243, 0.22);
  stroke-width: 1;
}

.draft-ticks text {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.1em;
  fill: rgba(238, 240, 243, 0.32);
}

/* ---------- sticky stacking cards ---------- */

.stack-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.stack-sticky {
  position: sticky;
  top: 130px;
}

.stack-sticky .sec-head {
  margin-bottom: 30px;
}

.stack-cards {
  margin: 0;
  padding: 0 0 clamp(40px, 6vw, 90px);
  list-style: none;
}

.stack-card {
  position: sticky;
  /* each card parks a little lower, leaving the one above visible */
  top: calc(118px + (var(--i) * 18px));
  display: flex;
  flex-direction: column;
  min-height: 360px;
  /* no margin — cards must butt together so the next one slides up and
     covers the last without the page showing through the seam */
  padding: clamp(28px, 3.2vw, 44px);
  border-radius: clamp(14px, 1.6vw, 22px);
  /* fixed hex, not var(--paper) — these run their own ink-to-accent
     palette regardless of page theme, so their text stays light always */
  color: #eef0f3;
  /* a light rim rather than a cast shadow — the page is dark now, so a
     dark drop shadow no longer reads as depth against it */
  box-shadow: 0 1px 0 rgba(238, 240, 243, 0.08), 0 -16px 44px rgba(0, 0, 0, 0.45);
}

/* a run from ink through to full accent as the process heats up. Card
   one used to match --ink exactly, which was the point on a light page
   (darkest possible chip) — now the page itself is that same dark, so
   it needs to sit a shade above the ground instead to keep reading as
   a distinct card rather than a hole in the page. */
.sc-1 { background: #232830; }
.sc-2 { background: #2e3a1f; }
.sc-3 { background: #5c8a2f; }
.sc-4 { background: #8dc63f; }

.sc-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: rgba(238, 240, 243, 0.55);
}

.stack-card h3 {
  margin-top: 26px;
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  font-weight: 500;
  color: #eef0f3;
}

.stack-card p {
  margin-top: 18px;
  max-width: 520px;
  color: rgba(238, 240, 243, 0.76);
  font-size: 1rem;
  line-height: 1.68;
}

.sc-term {
  margin-top: auto;
  padding-top: 26px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 240, 243, 0.6);
}

.method .guarantee {
  position: relative;
  z-index: 1;
}

.phases {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--ink);
}

.phase {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 120px;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(30px, 3.6vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
}

.phase-num {
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 500;
  line-height: 0.9;
  color: var(--ink-4);
  transition: color 0.3s var(--ease);
}

.phase:hover .phase-num {
  color: var(--accent);
}

.phase-body h3 {
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  font-weight: 600;
}

.phase-body p {
  margin-top: 14px;
  max-width: 660px;
  color: var(--ink-2);
  font-size: 0.99rem;
  line-height: 1.68;
}

.phase-term {
  padding-top: 8px;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.guarantee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(44px, 5vw, 64px);
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--ink);
  color: var(--paper);
  border-radius: clamp(14px, 1.6vw, 22px);
}

.guarantee-mark {
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: 0.8;
  color: var(--accent);
}

.guarantee h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 600;
}

.guarantee p {
  margin-top: 14px;
  max-width: 720px;
  /* paired with the box's own background:var(--ink) — a literal light
     rgba here would go invisible once the page (and this box) flip
     polarity, since --paper is dark now, not light */
  color: var(--paper);
  opacity: 0.76;
  font-size: 1rem;
  line-height: 1.7;
}

/* =========================================================
   Studio
   ========================================================= */

.studio {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--rule);
}

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.dossier {
  padding: clamp(28px, 3.2vw, 40px);
  border: 1px solid var(--rule-heavy);
  background: var(--paper-2);
  border-radius: clamp(14px, 1.6vw, 22px);
}

/* founder portrait — a headshot beside the name, not a hero image.
   Fixed width so it never crowds out the bio below it. */
.dossier-portrait {
  flex: none;
  width: clamp(104px, 13vw, 132px);
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper-3);
}

.dossier-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* the file is already cropped to head-and-shoulders */
  object-position: 50% 50%;
}

.dossier-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}

.dossier-initials {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: none;
  background: var(--accent);
  /* on the solid accent fill, not the page — stays light regardless of
     theme, unlike var(--paper) which now flips dark */
  color: #eef0f3;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.dossier-head h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 600;
}

.dossier-role {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.dossier-bio {
  margin-top: 24px;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.72;
}

.dossier-facts {
  margin: 28px 0 28px;
}

.dossier-facts > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}

.dossier-facts dt {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}

.dossier-facts dd {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink);
}

.principles-head {
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.principles ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pr;
}

.principles li {
  counter-increment: pr;
  position: relative;
  padding: 26px 0 26px 52px;
  border-bottom: 1px solid var(--rule);
}

.principles li::before {
  content: counter(pr, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 29px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
}

.principles h4 {
  font-size: 1.22rem;
  font-weight: 600;
}

.principles p {
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.64;
}

/* depth of practice */
.depth {
  margin-top: clamp(50px, 6vw, 84px);
  padding-top: clamp(38px, 4vw, 54px);
  border-top: 1.5px solid var(--ink);
}

.depth-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 52px);
}

.depth-head h3 {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 600;
}

.depth-head p {
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.66;
}

.depth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
}

.depth-col {
  padding: 26px 24px 28px;
  background: var(--paper);
  transition: background 0.3s var(--ease);
}

.depth-col:hover {
  background: var(--paper-2);
}

.depth-col h4 {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.depth-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.depth-col li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 0.89rem;
  line-height: 1.5;
}

.depth-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--ink-4);
}

/* =========================================================
   Security & trust
   ========================================================= */

.security {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--rule);
}

.security-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
}

.security-col {
  padding: clamp(24px, 2.6vw, 30px);
  background: var(--paper);
}

/* small line-icon marking each card/column's topic at a glance — the
   site's own abstract-diagram style (stroke, no fill), not clipart,
   so it reads as part of the same visual system as Fig. 1 */
.col-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 14px;
  color: var(--accent);
}

.col-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.security-col h4 {
  margin-bottom: 12px;
  font-size: 1.02rem;
  font-weight: 600;
}

.security-col p {
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.62;
}

.security-note {
  position: relative;
  z-index: 1;
  margin-top: clamp(28px, 3vw, 38px);
  max-width: 680px;
  color: var(--ink-3);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* =========================================================
   Case study pages
   ========================================================= */

.case-hero {
  padding: clamp(50px, 7vw, 90px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--rule);
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 44px);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.22s var(--ease);
}

.case-back:hover {
  color: var(--accent);
}

.case-hero h1 {
  margin-top: 18px;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.case-lede {
  margin-top: 24px;
  max-width: 720px;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.66;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.case-body {
  padding: clamp(60px, 8vw, 100px) 0;
  border-bottom: 1px solid var(--rule);
}

/* Case-study pipeline figure — same flat-diagram visual grammar as the
   homepage's Fig. 1, reused per engagement with its own labels/flow, so
   a time-pressed visitor can read the shape of the system before (or
   instead of) reading the four text blocks below it. */
.case-fig {
  margin: 0 0 clamp(48px, 6vw, 72px);
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--rule-strong);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: var(--paper-2);
}

.case-diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
  margin: 0 auto;
  color: var(--ink-3);
}

.cd-box {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.1;
}

.cd-box-dim {
  stroke: var(--ink-4);
  stroke-dasharray: 3 3;
}

.cd-box-gate {
  stroke: var(--accent);
  stroke-width: 1.6;
}

.cd-box-good {
  fill: var(--good);
  stroke: var(--good);
}

.cd-box-warn {
  stroke: var(--warn);
  stroke-dasharray: 3 3;
}

.cd-wire {
  stroke: var(--ink);
  stroke-width: 1.1;
  fill: none;
  color: var(--ink);
}

.cd-wire-good {
  stroke: var(--good);
  color: var(--good);
}

.cd-wire-warn {
  stroke: var(--warn);
  stroke-dasharray: 3 3;
  color: var(--warn);
}

.cd-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  fill: var(--ink);
}

.cd-label-dim {
  fill: var(--ink-3);
}

.cd-label-warn {
  fill: var(--warn);
}

/* dark text reads better on the light, saturated verified-green fill
   than light text would — matches the homepage schematic's same call */
.cd-label-good {
  fill: #12151b;
}

.case-fig-caption {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.85rem;
  line-height: 1.6;
}

.case-fig-caption b {
  margin-right: 8px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px);
}

.case-block h2 {
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
}

.case-block p {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.72;
}

.case-nda {
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule);
  max-width: 720px;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.6;
}

.case-nda a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.case-nda a:hover {
  color: var(--accent);
}

@media (max-width: 700px) {
  .case-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   Questions
   ========================================================= */

.questions {
  padding: clamp(80px, 10vw, 140px) 0;
  border-bottom: 1px solid var(--rule);
}

.qa-list {
  border-top: 1.5px solid var(--ink);
}

.qa {
  border-bottom: 1px solid var(--rule);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa-q {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  transition: color 0.22s var(--ease);
}

.qa summary:hover .qa-q {
  color: var(--accent);
}

.qa-sign {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.qa-sign::before,
.qa-sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), background 0.25s var(--ease);
}

.qa-sign::after {
  transform: rotate(90deg);
}

.qa[open] .qa-sign::before,
.qa[open] .qa-sign::after {
  background: var(--accent);
}

.qa[open] .qa-sign::after {
  transform: rotate(0deg);
}

.qa-a {
  padding: 0 80px 30px 0;
  max-width: 820px;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.74;
  animation: qaIn 0.35s var(--ease) both;
}

@keyframes qaIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

/* =========================================================
   Contact
   ========================================================= */

.contact {
  /* was up to 160px — noticeably more than every other section's top
     padding, which pushed the second contact row (WhatsApp) out of
     the first view on a common laptop screen for no real reason */
  padding: clamp(70px, 9vw, 130px) 0;
}

.contact-title {
  max-width: 920px;
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.contact-lede {
  margin-top: 20px;
  max-width: 620px;
  color: var(--ink-2);
  font-size: clamp(1.04rem, 1.3vw, 1.18rem);
  line-height: 1.68;
}

.contact-rows {
  margin-top: 36px;
  border-top: 1.5px solid var(--ink);
}

.contact-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 28px 8px 28px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding 0.3s var(--ease), background 0.3s var(--ease);
}

.contact-row:hover {
  padding-left: 16px;
  padding-right: 0;
  background: var(--paper-2);
}

.contact-kind {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-val {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.contact-row:hover .contact-val {
  color: var(--accent);
}

.contact-go {
  font-size: 1.3rem;
  color: var(--ink-4);
  transition: transform 0.3s var(--ease), color 0.25s var(--ease);
}

.contact-row:hover .contact-go {
  color: var(--accent);
  transform: translateX(5px);
}

.contact-note {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* low-commitment entry point */
.soft-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(46px, 5vw, 70px);
  padding: clamp(28px, 3.2vw, 42px);
  border: 1.5px solid var(--ink);
  border-radius: clamp(14px, 1.6vw, 22px);
}

.soft-entry-tag {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.soft-entry h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
}

.soft-entry p {
  margin-top: 14px;
  max-width: 640px;
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.66;
}

/* ask an AI */
.ask-ai {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(34px, 4vw, 48px);
  border-top: 1px solid var(--rule);
}

.ask-head {
  max-width: 660px;
  margin-bottom: clamp(26px, 3vw, 38px);
}

.ask-head h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
}

.ask-head p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.66;
}

.ask-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.ask-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule);
}

.ask-q {
  flex: 1 1 320px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

.ask-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: none;
}

.ask-links a {
  padding: 7px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
  transition: all 0.22s var(--ease);
}

.ask-links a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  position: relative;
  padding: clamp(50px, 6vw, 76px) 0 34px;
  /* the whole site runs dark now, so the footer just continues the
     page's own ground instead of holding its own separate inversion */
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

.site-footer > .shell {
  position: relative;
  z-index: 1;
}

/* ---------- footer action row ---------- */

.footer-inner {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
}

.footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.footer-lockup .brand-mark {
  width: 26px;
  height: 26px;
  color: var(--accent);
  transform: none;
}

.footer-brand .brand-word {
  color: var(--ink);
}

.footer-brand > p {
  margin-top: 18px;
  max-width: 420px;
  color: rgba(238, 240, 243, 0.6);
  font-size: 0.92rem;
  line-height: 1.68;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.footer-nav h4 {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 240, 243, 0.42);
}

.footer-nav a {
  display: block;
  padding: 6px 0;
  color: rgba(238, 240, 243, 0.82);
  font-size: 0.92rem;
  transition: color 0.22s var(--ease), transform 0.22s var(--ease);
}

.footer-nav a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

/* ---------- data residency line ---------- */

.footer-trust {
  display: flex;
  gap: 11px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(238, 240, 243, 0.12);
  max-width: 420px;
  color: rgba(238, 240, 243, 0.5);
  font-size: 0.82rem;
  line-height: 1.6;
}

.footer-trust svg {
  flex: none;
  width: 16px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent);
}

.footer-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px 48px;
  margin-top: clamp(40px, 5vw, 58px);
  padding-top: clamp(34px, 4vw, 48px);
  border-top: 1px solid rgba(238, 240, 243, 0.16);
}

.footer-tagline {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.12;
  color: var(--ink);
}

.footer-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.fbtn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.25s var(--ease);
}

/* a light pill against the dark footer, regardless of page theme — the
   footer's strong CTA, same role var(--ink) plays on .btn-solid */
.fbtn-solid {
  background: var(--ink);
  color: var(--paper);
}

.fbtn-solid:hover {
  background: var(--accent);
  color: #eef0f3;
}

.fbtn-ghost {
  border-color: rgba(238, 240, 243, 0.3);
  color: var(--ink);
}

.fbtn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- independent check ---------- */

.footer-ask-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-ask-lede {
  max-width: 380px;
  margin-bottom: 22px;
  color: rgba(238, 240, 243, 0.55);
  font-size: 0.88rem;
  line-height: 1.6;
}

.verify-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(238, 240, 243, 0.16);
}

.verify-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(238, 240, 243, 0.12);
}

.verify-q {
  color: rgba(238, 240, 243, 0.86);
  font-size: 0.92rem;
  line-height: 1.45;
}

.verify-links {
  display: inline-flex;
  gap: 16px;
  flex: none;
}

.verify-links a {
  position: relative;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(238, 240, 243, 0.45);
  transition: color 0.2s var(--ease);
}

.verify-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.verify-links a:hover {
  color: var(--ink);
}

.verify-links a:hover::after {
  transform: scaleX(1);
}

/* ---------- legal row ---------- */

.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: clamp(34px, 4vw, 48px);
  padding-top: 22px;
  border-top: 1px solid rgba(238, 240, 243, 0.16);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 240, 243, 0.45);
}

.footer-legal a {
  color: rgba(238, 240, 243, 0.45);
  transition: color 0.22s var(--ease);
}

.footer-legal a:hover {
  color: var(--accent);
}

.fl-dot {
  color: rgba(238, 240, 243, 0.28);
}

.footer-legal .footer-avail {
  margin-left: auto;
}

/* ---------- press sheet / WebGL stage ---------- */

.footer-stage {
  position: relative;
  /* sized up so the point cloud reads as a real showcase piece, not a
     small decoration easy to scroll past without noticing */
  height: clamp(320px, 40vw, 560px);
  margin-top: clamp(30px, 3.4vw, 46px);
  overflow: hidden;
  pointer-events: none;
}

/* the embedding field itself */
.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* crop marks, as on a trimmed press sheet */
.crop {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: rgba(238, 240, 243, 0.24);
  border-style: solid;
  border-width: 0;
}

.crop-tl { top: 26px; left: 26px; border-top-width: 1px; border-left-width: 1px; }
.crop-tr { top: 26px; right: 26px; border-top-width: 1px; border-right-width: 1px; }
.crop-bl { bottom: 26px; left: 26px; border-bottom-width: 1px; border-left-width: 1px; }
.crop-br { bottom: 26px; right: 26px; border-bottom-width: 1px; border-right-width: 1px; }

/* wordmark sized to the viewport so it is never clipped side to side */
.stage-word {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: min(16vw, 225px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(238, 240, 243, 0.05);
  user-select: none;
}

/* ink calibration bar — each swatch registers in turn, the way a press
   proof steps through its colours */
.inkbar {
  position: absolute;
  /* clear of the crop marks, which occupy 26-52px from each edge */
  left: 66px;
  bottom: 28px;
  display: flex;
  gap: 5px;
}

.ink {
  width: clamp(22px, 3.4vw, 46px);
  height: 11px;
  background: var(--c);
  opacity: 0.35;
  animation: inkRegister 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.55s);
}

@keyframes inkRegister {
  0%, 62%, 100% {
    opacity: 0.32;
    transform: scaleY(1);
  }
  18%, 34% {
    opacity: 1;
    transform: scaleY(1.5);
  }
}

.press-mark {
  position: absolute;
  right: 66px;
  bottom: 31px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(238, 240, 243, 0.3);
}

/* =========================================================
   Reveal
   ========================================================= */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

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

.js .reveal[data-delay='1'] { transition-delay: 0.09s; }
.js .reveal[data-delay='2'] { transition-delay: 0.18s; }
.js .reveal[data-delay='3'] { transition-delay: 0.27s; }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1080px) {
  .hero-grid,
  .studio-grid,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-figure {
    max-width: 520px;
  }

  .offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .offer-for {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 22px;
  }

  .main-nav,
  .header-actions .btn {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .masthead-hide {
    display: none;
  }

  .thesis-grid,
  .depth-head,
  .compare-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .depth-head,
  .compare-head {
    gap: 18px;
    align-items: start;
  }

  .depth-grid,
  .security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phase {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .hood-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .stack-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stack-sticky {
    position: static;
  }

  .draft-rule {
    display: none;
  }

  .regmark {
    right: -40%;
    width: 130vw;
    opacity: 0.55;
  }

  .phase-term {
    grid-column: 2;
    text-align: left;
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .hero-title {
    font-size: clamp(2.6rem, 12.5vw, 3.6rem);
  }

  .hero-actions {
    gap: 20px;
  }

  .hero-actions .btn-lg {
    width: 100%;
    justify-content: center;
  }

  .offer {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .offer-head {
    padding-left: 34px;
  }

  .dossier-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .depth-grid,
  .security-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hood-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .hood-log {
    font-size: 0.7rem;
    padding: 20px 16px;
  }

  .hood-badge:not(.hood-badge-demo) {
    display: none;
  }

  .contact-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding-block: 22px;
  }

  .contact-kind {
    grid-column: 1;
  }

  .contact-val {
    grid-column: 1;
  }

  .contact-go {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .qa-a {
    padding-right: 20px;
  }

  .footer-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .footer-base {
    flex-direction: column;
    align-items: flex-start;
  }

  .guarantee,
  .soft-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .soft-entry .btn {
    justify-content: center;
  }
}

/* =========================================================
   Section figures
   Every section sits behind a different machine-learning
   diagram. They are the real shapes of the work — a network,
   a loss curve, a confusion matrix, a context window, gradient
   descent, activation functions, a decision tree, vector search
   — so the ambient layer says what the studio actually does.
   All sit at low contrast and animate transform/opacity only.
   ========================================================= */

.sec-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero,
.thesis,
.index-section,
.services,
.method,
.studio,
.questions,
.contact {
  position: relative;
}

.hero > .shell,
.thesis > .shell,
.index-section > .shell,
.services > .shell,
.method > .shell,
.studio > .shell,
.questions > .shell,
.contact > .shell {
  position: relative;
  z-index: 1;
}

.fig {
  position: absolute;
  display: block;
}

/* figures idle until their section is on screen — otherwise every diagram
   on the page animates continuously for nobody's benefit */
.sec-bg:not(.is-live) .fig * {
  animation-play-state: paused;
}

/* WebGL upgrade for Fig. 01 (method). Full-section canvas, transparent,
   composed by the camera rather than a CSS box — the 2D fallback
   beneath keeps its own sizing untouched in case this never mounts.
   Hidden by JS only once WebGL confirms it's live. */
.method-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* ---------- 1 · network: signal through the layers ----------
   Held in real 3D: the container carries a perspective and the
   plane swings on its Y axis, so the layers genuinely pass in
   front of one another rather than faking depth with opacity. */
.sec-bg[data-fig='network'] {
  perspective: 1100px;
  perspective-origin: 62% 50%;
}

.fig-network {
  top: 50%;
  right: -6%;
  width: min(760px, 62vw);
  height: auto;
  aspect-ratio: 520 / 400;
  transform-style: preserve-3d;
  /* fast enough to read as moving within the first second on the page,
     not just on close inspection */
  animation: netSwing 9s ease-in-out infinite alternate;
}

@keyframes netSwing {
  from { transform: translateY(-50%) rotateY(-36deg) rotateX(14deg); }
  to   { transform: translateY(-50%) rotateY(26deg) rotateX(-10deg); }
}

.fx-edge {
  stroke: rgba(238, 240, 243, 0.07);
  stroke-width: 0.8;
}

.fx-node {
  fill: var(--accent);
  opacity: 0.12;
  animation: fxFire 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxFire {
  0%, 70%, 100% { opacity: 0.1; r: 5; }
  12% { opacity: 0.75; r: 7; }
  30% { opacity: 0.22; r: 5; }
}

/* ---------- 2 · loss curves ---------- */
.fig-loss {
  top: 50%;
  left: 50%;
  width: min(1180px, 88vw);
  height: auto;
  aspect-ratio: 500 / 200;
  transform: translate(-50%, -50%);
}

.fx-axis line {
  stroke: rgba(238, 240, 243, 0.1);
  stroke-width: 1;
}

.fx-loss {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: fxDraw 13s ease-in-out infinite;
}

.fx-loss-good { stroke: rgba(109, 155, 118, 0.55); }
.fx-loss-bad  { stroke: rgba(216, 56, 15, 0.4); animation-delay: 0.8s; }

@keyframes fxDraw {
  0% { stroke-dashoffset: 1400; }
  38%, 72% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: -1400; }
}

/* ---------- 3 · confusion matrix ---------- */
.fig-matrix {
  top: 50%;
  right: -3%;
  width: min(560px, 46vw);
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.fx-cell {
  fill: rgba(238, 240, 243, 0.5);
  opacity: calc(var(--o, 0.1) * 0.16);
  animation: fxCell 9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* the diagonal "hit" cells use the brand accent, which now being a
   bright green reads much more visible at a given opacity than the
   old dark red did against this near-black ground — a lower-range
   animation keeps them a faint texture rather than a solid block
   sitting on top of the table content. */
.fx-cell.is-hit {
  fill: var(--accent);
  animation-name: fxCellHit;
}

@keyframes fxCell {
  0%, 100% { opacity: calc(var(--o, 0.1) * 0.1); }
  45% { opacity: calc(var(--o, 0.1) * 0.4); }
}

@keyframes fxCellHit {
  0%, 100% { opacity: calc(var(--o, 0.1) * 0.04); }
  45% { opacity: calc(var(--o, 0.1) * 0.16); }
}

/* ---------- 4 · token stream ---------- */
.fig-tokens {
  top: 50%;
  left: 0;
  width: 140%;
  height: auto;
  aspect-ratio: 1012 / 200;
  transform: translateY(-50%);
}

.fx-token {
  fill: rgba(238, 240, 243, 0.13);
  animation: fxToken 7s linear infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxToken {
  0% { opacity: 0; transform: translateX(-26px); }
  14% { opacity: 1; }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translateX(30px); }
}

/* ---------- 5 · gradient descent ---------- */
.fig-descent {
  top: 50%;
  right: -8%;
  width: min(820px, 58vw);
  height: auto;
  aspect-ratio: 660 / 400;
  transform: translateY(-50%);
}

.fx-contour {
  fill: none;
  stroke: rgba(238, 240, 243, 0.09);
  stroke-width: 1;
}

/* the descent's converging path — a successful optimization run, so it
   takes the verified color rather than the accent */
.fx-path {
  fill: none;
  stroke: rgba(109, 155, 118, 0.45);
  stroke-width: 1.6;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: fxStepPath 11s ease-in-out infinite;
}

@keyframes fxStepPath {
  0% { stroke-dashoffset: 460; }
  45%, 80% { stroke-dashoffset: 0; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.fx-step {
  fill: var(--good);
  opacity: 0;
  animation: fxStep 11s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxStep {
  0%, 4% { opacity: 0; }
  10% { opacity: 0.55; }
  74% { opacity: 0.4; }
  88%, 100% { opacity: 0; }
}

/* ---------- 6 · activation functions ---------- */
.fig-activation {
  top: 50%;
  left: -4%;
  width: min(720px, 52vw);
  height: auto;
  aspect-ratio: 460 / 200;
  transform: translateY(-50%);
}

.fx-curve {
  fill: none;
  stroke: rgba(238, 240, 243, 0.17);
  stroke-width: 1.5;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: fxCurve 12s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxCurve {
  0% { stroke-dashoffset: 900; }
  30%, 66% { stroke-dashoffset: 0; }
  88%, 100% { stroke-dashoffset: -900; }
}

/* ---------- 7 · decision tree ---------- */
.fig-tree {
  top: 46%;
  right: -4%;
  width: min(700px, 52vw);
  height: auto;
  aspect-ratio: 640 / 320;
  transform: translateY(-50%);
}

.fx-branch {
  stroke: rgba(238, 240, 243, 0.13);
  stroke-width: 1;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: fxBranch 10s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxBranch {
  0% { stroke-dashoffset: 200; }
  34%, 72% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: 200; }
}

/* a resolved leaf — a completed classification, not a warning */
.fx-leaf {
  fill: var(--good);
  opacity: 0;
  animation: fxLeaf 10s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxLeaf {
  0%, 8% { opacity: 0; }
  22%, 70% { opacity: 0.4; }
  88%, 100% { opacity: 0; }
}

/* ---------- 8 · vector search ---------- */
.fig-vectors {
  top: 50%;
  right: -10%;
  width: min(880px, 62vw);
  height: auto;
  aspect-ratio: 660 / 400;
  transform: translateY(-50%);
}

.fx-vec {
  stroke: rgba(141, 198, 63, 0.26);
  stroke-width: 1;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: fxVec 12s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxVec {
  0% { stroke-dashoffset: 320; }
  40%, 74% { stroke-dashoffset: 0; }
  94%, 100% { stroke-dashoffset: -320; }
}

.fx-seed {
  fill: rgba(238, 240, 243, 0.22);
  animation: fxSeed 12s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxSeed {
  0%, 30% { opacity: 0.5; }
  60%, 100% { opacity: 0.12; }
}

.fx-target {
  fill: var(--accent);
  opacity: 0.35;
}

.fx-ring {
  fill: none;
  stroke: rgba(141, 198, 63, 0.22);
  stroke-width: 1;
  transform-origin: 330px 200px;
  animation: fxRing 5s ease-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes fxRing {
  0% { transform: scale(0.5); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* =========================================================
   Touch + small-screen legibility
   Mono labels sit at 9.6-10.9px on desktop, which is fine at
   arm's length on a large display but too small on a phone.
   Tap targets follow the 40px minimum.
   ========================================================= */

@media (max-width: 820px) {
  .masthead-item,
  .hero-proof dt,
  .press-mark,
  .state,
  .hood-badge,
  .footer-nav h4,
  .hood-stat-label,
  .col-num,
  .col-state,
  .col-sector,
  .ledger thead th,
  .compare-table thead th {
    font-size: 0.71rem;
  }

  .fig-num,
  .sec-mark,
  .hood-kicker,
  .sc-term,
  .contact-kind,
  .soft-entry-tag,
  .footer-ask-label,
  .footer-avail,
  .footer-legal,
  .kicker,
  .offer-term,
  .dossier-role,
  .principles-head,
  .contact-note,
  .table-note,
  .offer-num,
  .sc-num,
  .hood-step-num {
    font-size: 0.75rem;
  }

  .hood-log {
    font-size: 0.74rem;
  }

  /* inline assistant links were 17px tall — not reliably tappable */
  .verify-links {
    gap: 4px;
  }

  .verify-links a {
    padding: 11px 12px;
    margin: -3px 0;
    border: 1px solid rgba(238, 240, 243, 0.16);
    border-radius: 999px;
    font-size: 0.72rem;
  }

  .verify-links a::after {
    display: none;
  }

  .verify-list li {
    gap: 10px 14px;
    padding: 16px 0;
  }

  /* text buttons need a real hit area, not just their text box */
  .btn-text {
    padding: 12px 0;
  }

  .footer-nav a,
  .footer-legal a {
    padding: 11px 0;
  }

  /* remaining sub-11px labels */
  .dossier-facts dt,
  .depth-col h4 {
    font-size: 0.72rem;
  }
}

/* =========================================================
   Motion preferences
   ========================================================= */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .hood .hood-log p {
    opacity: 1;
    width: auto !important;
    white-space: normal;
    overflow: visible;
    animation: none !important;
  }

  .hood-caret {
    animation: none;
  }

  .hood .hood-steps li:not(.is-done):not(.is-current) {
    opacity: 1;
  }

  .ticker-track,
  .ink,
  .fig,
  .fig * {
    animation: none !important;
  }

  /* hold the network flat rather than mid-swing */
  .fig-network {
    transform: translateY(-50%);
  }

  /* figures stay drawn, just still */
  .fx-loss,
  .fx-curve,
  .fx-branch,
  .fx-vec,
  .fx-path {
    stroke-dashoffset: 0;
  }

  .fx-node,
  .fx-leaf,
  .fx-step,
  .fx-token {
    opacity: 0.3;
  }

  .fx-ring {
    opacity: 0.2;
  }

  .ink {
    opacity: 0.6;
  }

  .stack-card {
    position: static;
  }
}

/* =========================================================
   Print
   ========================================================= */

@media print {
  .site-header,
  .mobile-nav,
  .ticker,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}