/* ══════════════════════════════════════════════════════════
   Loopwork — distilled stylesheet (built from src/styles/)
   ══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   src/styles.tokens.css  (1)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   tokens.css — the editorial palette
   Warm off-white paper, near-black ink, one deep-clay accent.
   Editorial restraint: hard 1px ink rules, opaque surfaces, large
   serif display. Clay is the only accent — never a large surface.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── paper / light ── */
  --paper:    #EDE8DE;   /* page background, warm editorial off-white */
  --paper-2:  #E7E1D4;   /* second-light */
  --surface-1:#E3DDD0;   /* card surface, one step darker */
  --surface-2:#D9D2C2;   /* elevated surface */
  --surface-3:#CCC4B1;   /* highest elevation */

  /* ── ink / type ── */
  --ink-1: #1B1A17;       /* primary text, near-black ink */
  --ink-2: #3A3833;       /* secondary text */
  --ink-3: #6B675E;       /* tertiary, metadata, hairlines */
  --ink-4: #A29D91;       /* disabled, divider hairlines */

  /* ── dark surfaces ── */
  --steel: #26241F;       /* dark accent */
  --iron:  #15140F;       /* deepest dark, footer, inverse sections */

  /* THE accent. Deep clay. Used only as:
       1px borders, micro-labels, the top rule on featured cards,
       single highlight strokes, focus. Never as a large surface.
       --blood is kept as a legacy alias mapped to clay so existing
       usages repaint without churn; new code should use --clay. */
  --clay:       #9A3B2C;
  --clay-soft:  rgba(154, 59, 44, 0.08);
  --clay-glow:  rgba(154, 59, 44, 0.18);
  --clay-line:  rgba(154, 59, 44, 0.55);
  --blood:       var(--clay);     /* legacy alias */
  --blood-soft:  var(--clay-soft);
  --blood-glow:  var(--clay-glow);
  --blood-line:  var(--clay-line);

  /* ── card surfaces (opaque editorial — no blur) ── */
  --glass-bg:        var(--surface-1);            /* opaque card */
  --glass-bg-2:      var(--paper-2);              /* elevated card */
  --glass-bg-dark:   rgba(21, 20, 15, 0.55);     /* over iron */
  --glass-bg-dark-2: rgba(21, 20, 15, 0.72);
  --glass-border:        rgba(27, 26, 23, 0.14);
  --glass-border-strong: rgba(27, 26, 23, 0.26);
  --glass-border-blood:  var(--clay-line);
  --glass-blur:      0px;
  --glass-blur-lg:   0px;
  --glass-blur-sm:   0px;
  --glass-shadow:    0 0 0 1px var(--glass-border),
                     0 24px 60px -36px rgba(27, 26, 23, 0.22);
  --glass-shadow-strong: 0 0 0 1px var(--glass-border-strong),
                         0 30px 80px -24px rgba(27, 26, 23, 0.32);

  /* ── magnetic cursor offset (written by JS; unitless, *1px in CSS) ── */
  --mag-x: 0;
  --mag-y: 0;

  /* ── radii (MUJI rule: 2px and 9999px only) ── */
  --r-1: 2px;
  --r-pill: 9999px;
  /* soft variants for glass (still restrained) */
  --r-glass: 8px;
  --r-glass-lg: 14px;

  /* ── spacing (MUJI 8/12 breathing) ── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  40px;
  --s-8:  56px;
  --s-9:  72px;
  --s-10: 96px;
  --s-11: 128px;
  --s-12: 160px;
  --s-13: 200px;

  /* ── layout ── */
  --wrap:      min(1240px, 100% - 48px);
  --wrap-narrow: min(820px, 100% - 48px);
  --wrap-rail: min(360px, 100% - 48px);

  /* ── type ── */
  --f-display: 'Fraunces', 'Times New Roman', serif;
  --f-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* ── type scale ── */
  --t-0:  0.75rem;     /* micro */
  --t-1:  0.8125rem;   /* ui small */
  --t-2:  0.875rem;    /* small */
  --t-3:  1rem;        /* body */
  --t-4:  1.0625rem;   /* body lede */
  --t-5:  1.25rem;     /* lede large */
  --t-6:  1.5rem;      /* small h */
  --t-7:  2rem;        /* h3 */
  --t-8:  2.5rem;      /* h2 small */
  --t-9:  3.25rem;     /* h2 */
  --t-10: 4.25rem;     /* h2 large */
  --t-11: 5.25rem;     /* h1 */
  --t-12: 7rem;        /* display */
  --t-13: 9rem;        /* display x */
  --t-14: 11.5rem;     /* display xx (hero moment) */

  /* ── timing ── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-io:   cubic-bezier(0.83, 0, 0.17, 1);
  --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);

  --t-fast:   180ms;
  --t-mid:    360ms;
  --t-slow:   720ms;
  --t-xslow: 1200ms;

  /* ── z-stack ── */
  --z-base:    1;
  --z-content: 10;
  --z-nav:     50;
  --z-cursor:  80;
  --z-fab:     70;
  --z-overlay: 90;
  --z-preloader: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-mid: 0ms;
    --t-slow: 0ms;
    --t-xslow: 0ms;
  }
}

/* ──────────────────────────────────────────────────────────
   src/styles.base.css  (2)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   base.css — editorial restraint, MUJI weight rules
   - Display: Fraunces (variable, weight 440 max, italic via opsz)
   - Body:    Inter Tight, weights 400 and 600 ONLY (binary)
   - Mono:    JetBrains Mono
   - No drop shadows on elevated content
   - Hairline borders, sharp 2px corners, pill radii
   ═══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--f-body);
  font-size: var(--t-3);
  line-height: 1.55;
  font-weight: 400;
  font-feature-settings: 'ss01' on, 'cv11' on, 'kern' on;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── backgrounds layered behind everything ── */
.bg-paper, .bg-bleed, .bg-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bg-paper {
  background: var(--paper);
}
.bg-bleed {
  background:
    radial-gradient(60% 50% at 10% 0%, rgba(154, 59, 44, 0.05), transparent 60%),
    radial-gradient(50% 40% at 100% 100%, rgba(27, 26, 23, 0.05), transparent 60%);
  mix-blend-mode: multiply;
}
.bg-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 200px 200px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* ── typography ── */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 440;
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: var(--ink-1);
  font-variation-settings: 'opsz' 144;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
em { font-style: italic; font-style: oblique 14deg; }

.display-h1 {
  font-size: clamp(2.5rem, 6vw, var(--t-12));
  letter-spacing: -0.028em;
  line-height: 1.0;
  font-weight: 440;
  max-width: 16ch;
}
.display-h2 {
  font-size: clamp(1.875rem, 3.5vw, var(--t-10));
  letter-spacing: -0.024em;
  line-height: 1.04;
  max-width: 22ch;
}
.display-h2 em { color: var(--blood); }

p { margin: 0 0 1em; max-width: 65ch; color: var(--ink-1); }

a {
  color: var(--ink-1);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--blood); }
a.text-link {
  color: var(--ink-1);
  border-bottom: 1px solid var(--blood);
  padding-bottom: 1px;
}

::selection { background: var(--blood); color: var(--paper); }

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

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

/* ── layout helpers ── */
.wrap {
  width: var(--wrap);
  margin-inline: auto;
}
.wrap.narrow { width: var(--wrap-narrow); }

/* ── the signature red rule ── */
.rule {
  display: inline-block;
  width: 8px;
  height: 1px;
  background: var(--blood);
  vertical-align: middle;
}
.rule-tall {
  width: 2px;
  height: 32px;
  align-self: stretch;
  flex-shrink: 0;
}
.rule-blood { background: var(--blood); }
.rule-ink   { background: var(--ink-1); }
.rule-ink3  { background: var(--ink-3); }

/* ── section signature: red kiss under H2 ── */
.section-head { margin-bottom: var(--s-7); position: relative; }
.section-head .display-h2::after {
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  background: var(--blood);
  margin-top: var(--s-4);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-4);
}
.section-lede {
  font-size: var(--t-5);
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: var(--s-4);
  font-weight: 400;
  line-height: 1.5;
}

/* ── inline code ── */
.inline-code, code {
  font-family: var(--f-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  background: var(--surface-1);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-1);
  color: var(--ink-1);
}

/* ── kbd ── */
kbd {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.78em;
  font-weight: 500;
  padding: 2px 7px;
  background: var(--paper);
  color: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-bottom-width: 2px;
  border-radius: var(--r-1);
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}

.kbd-row { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ── buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 22px;
  font-family: var(--f-body);
  font-size: var(--t-2);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink-1);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  background: var(--paper);
  color: var(--ink-1);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink-1);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--blood);
  border-color: var(--blood);
  color: var(--paper);
}
.btn-ghost {
  background: transparent;
  border-color: var(--ink-3);
  color: var(--ink-1);
}
.btn-ghost:hover {
  border-color: var(--ink-1);
  background: var(--paper-2);
}

/* ── meta / utility ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-body);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-5);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-1);
  color: var(--paper);
  padding: 8px 12px;
  z-index: 200;
}
.skip:focus { left: 16px; top: 16px; }

/* ── responsive ── */
@media (max-width: 720px) {
  :root { --s-12: 96px; --s-13: 128px; }
  body { font-size: 0.97rem; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.motion.css  (3)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   motion.css — reveal choreography
   Two kinds of motion here:
   1. IntersectionObserver-driven fade + slide reveals
   2. Side-scroll storytelling (Japanese editorial register) —
      elements slide in from left or right based on scroll progress.
   ═══════════════════════════════════════════════════════════════ */

/* ── basic reveal (opacity + small Y) ── */
[data-reveal], .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── side reveals ── */
[data-side="left"] {
  transform: translate3d(-48px, 18px, 0);
}
[data-side="right"] {
  transform: translate3d(48px, 18px, 0);
}
[data-side="up"] {
  transform: translate3d(0, 36px, 0);
}
[data-side="down"] {
  transform: translate3d(0, -36px, 0);
}
[data-side="left"].is-in,
[data-side="right"].is-in,
[data-side="up"].is-in,
[data-side="down"].is-in {
  opacity: 1;
  transform: none;
}

/* ── stagger children ── */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
[data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: none;
}
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 60ms; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 120ms; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 180ms; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 240ms; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 300ms; }
[data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: 360ms; }
[data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: 420ms; }
[data-reveal-stagger].is-in > *:nth-child(9) { transition-delay: 480ms; }

/* ── scroll-progress side reveals (Japanese editorial) ──
   These are driven from JS, which sets --side-progress on the
   element. The element slides horizontally based on the scroll
   progress through the section. */
[data-scroll-side] {
  --side-progress: 0;
  transform: translate3d(
    calc((1 - var(--side-progress)) * -32px),
    0,
    0
  );
  opacity: calc(0.05 + 0.95 * var(--side-progress));
  transition: transform 0.05s linear, opacity 0.1s linear;
  will-change: transform, opacity;
}

/* ── kinetic type (headline that splits and animates in) ── */
[data-kinetic] .line {
  display: block;
  overflow: hidden;
}
[data-kinetic] .line > span,
[data-kinetic] .line {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
[data-kinetic].is-in .line,
[data-kinetic].is-in .line > span { opacity: 1; transform: none; }
[data-kinetic].is-in .line-1 { transition-delay: 100ms; }
[data-kinetic].is-in .line-2 { transition-delay: 200ms; }
[data-kinetic].is-in .line-3 { transition-delay: 300ms; }

/* ── ambient slow animations ── */
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
@keyframes floaty {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -12px, 0) rotate(0.4deg); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}
@keyframes scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes vert-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .reveal,
  [data-side="left"], [data-side="right"], [data-side="up"], [data-side="down"],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-scroll-side] {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ──────────────────────────────────────────────────────────
   src/styles.timeline.css  (4)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   timeline.css — scroll-driven vertical process timeline
   A single clay rail whose fill scales with --timeline-progress
   (set by timeline.js); steps build progressively via .is-in.
   ═══════════════════════════════════════════════════════════════ */

.timeline {
  position: relative;
  max-width: 760px;
  margin-top: var(--s-7);
}
.timeline-rail {
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--ink-4);
  border-radius: 2px;
}
.timeline-rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--clay);
  transform: scaleY(var(--timeline-progress, 0));
  transform-origin: top center;
  transition: transform 0.08s linear;
  border-radius: 2px;
}
.timeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-step {
  position: relative;
  padding: 0 0 var(--s-7) 36px;
  opacity: 0.3;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step.is-in {
  opacity: 1;
  transform: none;
}
.timeline-step::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: var(--paper);
  border: 2px solid var(--ink-4);
  transition: background var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}
.timeline-step.is-in::before {
  background: var(--clay);
  border-color: var(--clay);
}
.timeline-step-num {
  font-family: var(--f-mono);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--clay);
  margin-bottom: var(--s-2);
}
.timeline-step-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.timeline-step-body h3 {
  font-family: var(--f-display);
  font-size: var(--t-6);
  font-weight: 440;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0;
}
.timeline-step-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-4);
  max-width: 56ch;
  line-height: 1.55;
}
.timeline-step-tag {
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-pill);
  padding: 3px var(--s-3);
  margin-top: var(--s-1);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-step { opacity: 1 !important; transform: none !important; }
  .timeline-rail-fill { transform: scaleY(1) !important; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.hero.css  (5)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   hero.css — ambient 3D lens + flow-viz overlay container
   .hero-3d is the positioned stage that hero3d.js renders into.
   The flowviz SVG overlay (flowviz.js) layers on top of the canvas
   via .hero-3d-canvas; both share this stage.
   Opaque editorial surfaces — no backdrop-filter.
   ═══════════════════════════════════════════════════════════════ */

.hero-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.1;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-3d-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.hero-3d-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-3d-fallback svg {
  width: auto;
  height: 100%;
  filter: drop-shadow(0 30px 60px rgba(27, 26, 23, 0.18));
}
.hero-3d-fallback.is-hidden { display: none; }

/* loading / ready states on the stage */
.hero-3d.is-loading .hero-3d-canvas { opacity: 0; }
.hero-3d.is-ready .hero-3d-canvas {
  opacity: 1;
  transition: opacity var(--t-xslow) var(--ease-out);
}

/* faint hard-rule frame around the stage — editorial */
.hero-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink-4);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .hero-3d { min-height: 380px; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.flowviz.css  (6)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   flowviz.css — hero diagnostic flow overlay
   Layered over the hero3d stage. SVG nodes are opaque editorial
   pills with a hard ink border; the active node gets a clay top
   rule. The token is an HTML dot positioned over the active node.
   Overlay is pointer-events:none except interactive children so the
   3D cursor parallax underneath keeps working.
   ═══════════════════════════════════════════════════════════════ */

.fv {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* nodes sit in a left column so the 3D lens dominates the right */
.fv-svg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
  max-width: 280px;
  overflow: visible;
}

/* the rail connecting all stages */
.fv-rail {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}

/* node pills */
.fv-node {
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}
.fv-node-rect {
  fill: var(--paper);
  stroke: var(--ink-3);
  stroke-width: 1;
  transition: fill var(--t-mid) var(--ease-out),
              stroke var(--t-mid) var(--ease-out);
}
.fv-node-num {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  fill: var(--ink-3);
}
.fv-node-label {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 480;
  letter-spacing: -0.01em;
  fill: var(--ink-1);
}
.fv-node-dot {
  fill: var(--ink-4);
  transition: fill var(--t-mid) var(--ease-out);
}

/* active / hover / focus */
.fv-node:hover .fv-node-rect,
.fv-node.is-active .fv-node-rect,
.fv-node:focus-visible .fv-node-rect {
  fill: var(--surface-1);
  stroke: var(--ink-1);
}
.fv-node.is-active .fv-node-dot,
.fv-node:hover .fv-node-dot,
.fv-node:focus-visible .fv-node-dot {
  fill: var(--clay);
}
/* clay top rule on the active node */
.fv-node.is-active::after,
.fv-node:focus-visible::after { content: none; }
.fv-node-active-rule {
  fill: var(--clay);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}
.fv-node.is-active .fv-node-active-rule,
.fv-node:focus-visible .fv-node-active-rule { opacity: 1; }

/* the travelling lead token */
.fv-token {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;   /* center on the translate point */
  pointer-events: none;
  z-index: 3;
  transition: transform 1.6s var(--ease-in-out);
  will-change: transform;
}
.fv-token-core {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-soft);
}
.fv-token::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 1px solid var(--clay);
  opacity: 0.4;
  animation: fv-pulse 2s var(--ease-out) infinite;
}
@keyframes fv-pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* meta panel — opaque editorial card, bottom-right of the stage */
.fv-meta {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: min(240px, 46%);
  padding: 14px 16px;
  pointer-events: auto;
  background: var(--surface-1);
  border: 1px solid var(--ink-3);
  border-left: 2px solid var(--clay);
  border-radius: var(--r-glass);
  box-shadow: 0 18px 40px -24px rgba(27, 26, 23, 0.4);
}
.fv-meta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: 8px;
}
.fv-meta-stage {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fv-run {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out);
}
.fv-run:hover { opacity: 0.6; }
.fv-meta-title {
  font-family: var(--f-display);
  font-size: var(--t-7);
  font-weight: 480;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0 0 4px;
}
.fv-meta-sub {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  color: var(--ink-3);
  margin-bottom: 8px;
}
.fv-meta-detail {
  margin: 0;
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--ink-2);
}

/* the active rule is drawn in SVG; hide the CSS ::after path */
.fv-node-active-rule { display: block; }

@media (max-width: 768px) {
  .fv-svg { width: 44%; max-width: 200px; }
  .fv-meta { left: 0; right: 0; width: auto; bottom: -6%; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-token { transition: none !important; }
  .fv-token::before { animation: none !important; opacity: 0; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.playground.css  (7)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   playground.css — trigger → action → Run builder
   Two option lists, a stage with trigger/action slots joined by a
   connector, and a Run footer. The token travels the connector.
   ═══════════════════════════════════════════════════════════════ */

.playground {
  padding: var(--s-11) 0;
  border-bottom: 1px solid var(--ink-4);
}
.playground .wrap { max-width: 1040px; }

.pg {
  margin-top: var(--s-6);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-glass-lg);
  background: var(--paper-2);
  overflow: hidden;
}

/* two option lists side by side */
.pg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ink-4);
}
.pg-col { padding: var(--s-5); }
.pg-col:first-child { border-right: 1px solid var(--ink-4); }
.pg-col-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-4);
}
.pg-col-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--clay-line);
  border-radius: 4px;
  color: var(--clay);
}

.pg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.pg-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-glass);
  color: var(--ink-1);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.pg-opt:hover,
.pg-opt:focus-visible {
  border-color: var(--ink-2);
  background: var(--surface-1);
  outline: none;
}
.pg-opt.is-active {
  border-color: var(--clay);
  background: var(--clay-soft);
}
.pg-opt-label {
  font-family: var(--f-body);
  font-size: var(--t-2);
  font-weight: 600;
}
.pg-opt-sub {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* stage: trigger slot — connector — action slot */
.pg-stage {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
}
.pg-slot {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-glass);
  min-height: 88px;
  justify-content: center;
  transition: border-color var(--t-mid) var(--ease-out);
}
.pg-slot.is-set { border-color: var(--ink-1); }
.pg-slot-tag {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
}
.pg-slot-label {
  font-family: var(--f-display);
  font-size: var(--t-4);
  font-weight: 440;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.pg-slot:not(.is-set) .pg-slot-label { color: var(--ink-4); font-style: italic; }

/* connector + travelling token */
.pg-conn {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  min-width: 60px;
}
.pg-conn-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--ink-4), var(--ink-3));
  border-radius: 2px;
}
.pg-token {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 9999px;
  background: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-soft);
}

/* footer: run + reset buttons, then the run trace */
.pg-foot {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--ink-4);
  background: var(--paper);
  flex-wrap: wrap;
}
.pg-foot-btns {
  display: flex;
  gap: var(--s-2);
  flex: 0 0 auto;
}
.pg-run {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-2);
  padding: 8px 18px;
  background: var(--ink-1);
  color: var(--paper);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.pg-run:hover:not(:disabled) { background: var(--clay); transform: translate3d(2px, 0, 0); }
.pg-run:disabled { opacity: 0.5; cursor: default; }
.pg-reset {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pg-reset:hover:not(:disabled) { color: var(--clay); border-color: var(--clay-line); }
.pg-reset:disabled { opacity: 0.5; cursor: default; }

.pg-status {
  flex: 1 1 240px;
  font-size: var(--t-2);
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-status code {
  font-family: var(--f-mono);
  font-size: var(--t-1);
  color: var(--ink-1);
}
.pg-status .pg-ready strong { color: var(--ink-1); }
.pg-status .pg-ok { color: var(--clay); font-weight: 600; }

/* run trace */
.pg-trace-banner {
  font-size: var(--t-1);
  color: var(--ink-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink-4);
  margin-bottom: 2px;
}
.pg-trace-line {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  animation: pg-trace-in var(--t-fast) var(--ease-out) both;
}
@keyframes pg-trace-in {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: none; }
}
.pg-trace-n {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  color: var(--clay);
  line-height: 1.6;
}
.pg-trace-body { display: flex; flex-direction: column; gap: 1px; }
.pg-trace-tag {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pg-trace-title {
  font-family: var(--f-body);
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--ink-1);
}
.pg-trace-text {
  font-size: var(--t-1);
  color: var(--ink-2);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .pg-cols { grid-template-columns: 1fr; }
  .pg-col:first-child { border-right: none; border-bottom: 1px solid var(--ink-4); }
  .pg-stage { flex-direction: column; gap: var(--s-2); }
  .pg-slot { flex: none; width: 100%; }
  .pg-conn { width: 2px; height: 28px; min-width: 0; }
  .pg-conn-line { background: linear-gradient(to bottom, var(--ink-4), var(--ink-3)); }
  .pg-token { left: 50%; top: 0; margin: 0 0 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-opt, .pg-run, .pg-slot, .pg-reset { transition: none; }
  .pg-run:hover:not(:disabled) { transform: none; }
  .pg-token { transition: none !important; }
  .pg-trace-line { animation: none; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.selfcheck.css  (8)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   selfcheck.css — "Where's your bottleneck?" diagnostic quiz
   Renders into [data-selfcheck]; progress bar fills via --sc-progress.
   Editorial: opaque option cards, hard ink border, clay key numerals.
   ═══════════════════════════════════════════════════════════════ */

.selfcheck {
  padding: var(--s-11) 0;
  border-top: 1px solid var(--ink-4);
  border-bottom: 1px solid var(--ink-4);
  background: var(--paper-2);
}
.selfcheck .wrap { max-width: 880px; }

.sc-head { margin-bottom: var(--s-6); }
.sc-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sc-eyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--clay);
}
.sc-title {
  font-family: var(--f-display);
  font-size: var(--t-9);
  font-weight: 440;
  letter-spacing: -0.026em;
  line-height: 1.02;
  color: var(--ink-1);
  margin: var(--s-3) 0 var(--s-2);
}
.sc-lede {
  font-size: var(--t-4);
  color: var(--ink-2);
  max-width: 56ch;
  line-height: 1.5;
  margin: 0;
}

/* progress bar */
.sc-progress {
  height: 2px;
  width: 100%;
  background: var(--ink-4);
  position: relative;
  margin: var(--s-6) 0 var(--s-7);
  border-radius: 2px;
  overflow: hidden;
}
.sc-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--sc-progress, 0%);
  background: var(--clay);
  border-radius: 2px;
  transition: width var(--t-slow) var(--ease-out);
}
.sc-progress.no-anim::after { transition: none; }

/* step */
.sc-step { animation: sc-in var(--t-mid) var(--ease-out) both; }
@keyframes sc-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
.sc-step-head { margin-bottom: var(--s-5); }
.sc-step-num {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.sc-q {
  font-family: var(--f-display);
  font-size: var(--t-7);
  font-weight: 440;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0;
}

/* options */
.sc-opts {
  display: grid;
  gap: var(--s-2);
}
.sc-opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-glass);
  color: var(--ink-1);
  font-family: var(--f-body);
  font-size: var(--t-3);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.sc-opt:hover,
.sc-opt:focus-visible {
  border-color: var(--ink-1);
  background: var(--surface-1);
  transform: translate3d(2px, 0, 0);
  outline: none;
}
.sc-opt-key {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  color: var(--clay);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clay-line);
  border-radius: 4px;
}
.sc-opt-text { line-height: 1.4; }
.sc-opt-route {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}
.sc-hint {
  margin: var(--s-5) 0 0;
  font-size: var(--t-1);
  color: var(--ink-3);
}
.sc-hint kbd { font-family: var(--f-mono); }

/* result */
.sc-result { animation: sc-in var(--t-mid) var(--ease-out) both; }
.sc-result-tag {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
}
.sc-verdict {
  font-family: var(--f-display);
  font-size: var(--t-9);
  font-weight: 440;
  letter-spacing: -0.026em;
  line-height: 1.05;
  color: var(--ink-1);
  margin: var(--s-3) 0 var(--s-3);
}
.sc-next {
  font-size: var(--t-4);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 var(--s-6);
  max-width: 52ch;
}
.sc-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}
.sc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ink-1);
  color: var(--paper);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-2);
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.sc-cta:hover { background: var(--clay); transform: translate3d(2px, 0, 0); }
.sc-redo {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-3);
  padding: 4px 2px;
  cursor: pointer;
}
.sc-redo:hover { color: var(--clay); border-color: var(--clay); }

@media (max-width: 560px) {
  .sc-opt { grid-template-columns: auto 1fr; }
  .sc-opt-route { display: none; }
  .sc-title { font-size: var(--t-8); }
  .sc-verdict { font-size: var(--t-8); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-step, .sc-result { animation: none; }
  .sc-opt { transition: none; }
  .sc-opt:hover, .sc-opt:focus-visible { transform: none; }
  .sc-cta:hover { transform: none; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.editorial.css  (9)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   editorial.css — brand primitives, hard rules, the marquee,
   the quote moment, the shipped-work callout. Clay accents only.
   ═══════════════════════════════════════════════════════════════ */

/* ── the small clay dot used for the brand mark and edges ── */
.pill-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--clay);
  border-radius: 9999px;
  position: relative;
}
.pill-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--clay);
  filter: blur(4px);
  opacity: 0.5;
  z-index: -1;
}

/* ── edge mark — the small clay sliver next to a word ── */
.edge-mark {
  display: inline-block;
  width: 4px;
  height: 12px;
  background: var(--clay);
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 1px;
}

/* ── marquee strip (home, editorial register) ── */
.vertstrip {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--s-6) 0;
  background: var(--surface-1);
  border-top: 1px solid var(--ink-4);
  border-bottom: 1px solid var(--ink-4);
}
.vertstrip-track {
  display: inline-flex;
  white-space: nowrap;
  gap: var(--s-5);
  align-items: center;
  animation: vert-marquee 38s linear infinite;
  will-change: transform;
}
.vertstrip-track span {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-3);
  letter-spacing: 0.32em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.vertstrip-track .vert-dot {
  color: var(--clay);
  font-weight: 400;
  letter-spacing: 0;
}
.vertstrip:hover .vertstrip-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .vertstrip-track { animation: none; }
}

/* ── large quote moment (full-bleed dark) ── */
.quote-moment {
  position: relative;
  background: var(--iron);
  color: var(--paper);
  padding: var(--s-12) 0;
  overflow: hidden;
  isolation: isolate;
}
.quote-moment::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 0% 0%, rgba(154, 59, 44, 0.14), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(154, 59, 44, 0.09), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.quote-moment p, .quote-moment cite { color: var(--paper); }
.big-quote {
  margin: 0;
  position: relative;
  max-width: 24ch;
}
.big-quote-mark {
  display: block;
  font-family: var(--f-display);
  font-size: 8rem;
  line-height: 0.6;
  color: var(--clay);
  margin-bottom: -32px;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'opsz' 144;
}
.big-quote p {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  letter-spacing: -0.022em;
  line-height: 1.05;
  font-weight: 440;
  color: var(--paper);
  margin: 0 0 var(--s-7);
  font-style: italic;
  font-variation-settings: 'opsz' 144;
}
.big-quote footer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.big-quote cite {
  font-style: normal;
  font-family: var(--f-body);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ── shipped-work callout (formerly the "honest fabrication" frame) ── */
.frame-callout { padding: var(--s-9) 0; }
.frame-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-7);
  background: var(--paper-2);
  border: 1px solid var(--ink-4);
  border-top: 2px solid var(--clay);
  border-radius: var(--r-glass);
  max-width: 880px;
  margin: 0 auto;
}
.frame-mark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.frame-tag {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--clay);
}
.frame-card p { color: var(--ink-2); margin: 0; font-size: var(--t-4); }

/* ──────────────────────────────────────────────────────────
   src/styles.glass.css  (10)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   glass.css — opaque editorial card surfaces
   No blur. The card is a flat, paper-toned surface with a hard
   1px ink hairline and a single clay top rule on featured items.
   Kept as .glass* so existing markup composes unchanged.
   ═══════════════════════════════════════════════════════════════ */

.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-glass);
  box-shadow: var(--glass-shadow);
  transition:
    background var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out);
}

.glass > * { position: relative; z-index: 1; }

.glass:hover {
  background: var(--glass-bg-2);
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-strong);
}

.glass:hover.glass-blood {
  border-color: var(--glass-border-blood);
}

/* ── strong card (the closing CTA, featured panes) ── */
.glass-strong {
  position: relative;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--r-glass-lg);
  box-shadow: var(--glass-shadow-strong);
}

/* ── card over a dark (iron) section ── */
.glass-dark {
  position: relative;
  background: var(--glass-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-glass);
  color: var(--paper);
}

.iron-section .glass,
.iron-section .glass-strong {
  background: rgba(21, 20, 15, 0.45);
  border-color: rgba(154, 59, 44, 0.30);
  color: var(--paper);
}

/* ── the single clay edge treatment ── */
.glass-blood {
  border-top: 2px solid var(--clay);
  border-top-left-radius: var(--r-glass);
  border-top-right-radius: var(--r-glass);
}

/* ──────────────────────────────────────────────────────────
   src/styles.nav.css  (11)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   nav.css — floating paper pill nav
   ═══════════════════════════════════════════════════════════════ */

.pill-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 6px 6px 18px;
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 32px -16px rgba(27, 26, 23, 0.20);
  transition: all var(--t-mid) var(--ease-out);
  max-width: calc(100vw - 32px);
  overflow: hidden;
}

.pill-nav.is-scrolled {
  background: var(--glass-bg-2);
  border-color: var(--glass-border-strong);
  top: 12px;
  box-shadow: 0 12px 40px -12px rgba(27, 26, 23, 0.20);
}

.pill-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 0;
  color: var(--ink-1);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-2);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.pill-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.pill-links a {
  display: inline-block;
  padding: 8px 12px;
  font-size: var(--t-1);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-pill);
  letter-spacing: 0.005em;
  white-space: nowrap;
  position: relative;
}
.pill-links a:hover { color: var(--ink-1); background: var(--paper-2); }
.pill-links a.is-active { color: var(--ink-1); background: var(--surface-1); }
.pill-links a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 12px;
  height: 1px;
  background: var(--blood);
  transform: translateX(-50%);
}

.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: var(--t-1);
  font-weight: 600;
  background: var(--ink-1);
  color: var(--paper);
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--t-fast) var(--ease-out);
}
.pill-cta:hover {
  background: var(--blood);
  color: var(--paper);
}

/* Mobile / narrow */
@media (max-width: 880px) {
  .pill-nav { padding: 6px 6px 6px 14px; }
  .pill-links { display: none; }
  .pill-brand .pill-word { display: none; }
}

@media (max-width: 480px) {
  .pill-nav { top: 12px; }
  .pill-cta span { display: none; }
  .pill-cta { padding: 8px 12px; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.preloader.css  (12)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   preloader.css — the editorial boot sequence
   ═══════════════════════════════════════════════════════════════ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--iron);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  transition: opacity var(--t-slow) var(--ease-out),
              visibility var(--t-slow) var(--ease-out);
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.preloader-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: var(--t-3);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.preloader-head .pill-mark {
  background: var(--blood);
}

.preloader-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-top: 1px solid rgba(237, 232, 222, 0.12);
  padding-top: var(--s-4);
}
.preloader-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-4);
  text-transform: uppercase;
  transition: color var(--t-mid) var(--ease-out);
}
.preloader-list li.is-ok { color: var(--paper); }
.preloader-list li.is-ok .status { color: var(--blood); }
.preloader-list .status {
  color: var(--ink-4);
  font-weight: 600;
}

.preloader-bar {
  height: 1px;
  background: rgba(237, 232, 222, 0.08);
  position: relative;
  overflow: hidden;
}
.preloader-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--blood) 0%, var(--paper) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--t-slow) var(--ease-io);
}

.preloader-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.preloader-counter [data-pct] { color: var(--paper); }
.preloader-counter .preloader-status { color: var(--ink-4); }

/* ──────────────────────────────────────────────────────────
   src/styles.cursor.css  (13)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   cursor.css — two-part custom cursor + magnetic targets
   Lead dot (clay) + lagged follower ring (ink). `[data-magnetic]`
   elements translate toward the pointer via --mag-x/--mag-y.
   Touch devices and prefers-reduced-motion → cursor hidden.
   ═══════════════════════════════════════════════════════════════ */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 9999px;
  will-change: transform;
  mix-blend-mode: normal;
  transform: translate3d(-100px, -100px, 0);
}

[data-cursor-lead] {
  width: 6px;
  height: 6px;
  background: var(--blood);
  box-shadow: 0 0 0 0.5px rgba(154, 59, 44, 0.4);
  transition: width 180ms var(--ease-out),
              height 180ms var(--ease-out),
              background 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out);
}
[data-cursor-lead].is-hover {
  width: 0;
  height: 0;
  background: transparent;
  box-shadow: 0 0 0 1.5px var(--ink-1);
}

[data-cursor-follower] {
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink-1);
  opacity: 0.18;
  background: transparent;
  margin: -19px 0 0 -19px;
  transition: width 240ms var(--ease-out),
              height 240ms var(--ease-out),
              border-color 240ms var(--ease-out),
              opacity 240ms var(--ease-out);
}
[data-cursor-follower].is-hover {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  opacity: 0.32;
  border-color: var(--blood);
}
[data-cursor-follower].is-down {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  opacity: 0.5;
}

@media (pointer: coarse) {
  .cursor { display: none !important; }
}

html.no-cursor, html.no-cursor * {
  cursor: auto !important;
}
html.no-cursor .cursor { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-cursor-follower] { transition: none !important; }
  [data-magnetic] { transform: none !important; }
}

/* ── magnetic targets ── */
[data-magnetic] {
  transform: translate3d(calc(var(--mag-x, 0) * 1px), calc(var(--mag-y, 0) * 1px), 0);
  transition: transform var(--t-mid) var(--ease-out);
  will-change: transform;
}

/* ──────────────────────────────────────────────────────────
   src/styles.footer.css  (14)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   footer.css — the iron footer
   ═══════════════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  background: var(--iron);
  color: var(--paper);
  padding: var(--s-10) 0 var(--s-7);
  margin-top: var(--s-11);
  border-top: 1px solid var(--steel);
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(154, 59, 44, 0.12), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(154, 59, 44, 0.07), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(237, 232, 222, 0.10);
}

.foot-brand .pill-brand {
  color: var(--paper);
}
.foot-brand .pill-word { color: var(--paper); }
.foot-tag {
  margin-top: var(--s-3);
  color: var(--ink-4);
  font-size: var(--t-2);
  max-width: 30ch;
}

.foot-col h4 {
  font-family: var(--f-body);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s-4);
}
.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-col a {
  color: var(--paper);
  font-size: var(--t-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.foot-col a:hover {
  color: var(--blood);
}

.foot-base {
  margin-top: var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.foot-coord {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.foot-sig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .foot-base { flex-direction: column; align-items: flex-start; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.tooltip.css  (15)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   tooltip.css
   ═══════════════════════════════════════════════════════════════ */

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink-1);
  color: var(--paper);
  padding: 6px 10px;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: var(--r-1);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  z-index: var(--z-overlay);
}
.tooltip.is-visible {
  opacity: 1;
  transform: none;
}
.tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 6px;
  height: 6px;
  background: var(--ink-1);
  transform: translateX(-50%) rotate(45deg);
}

/* ──────────────────────────────────────────────────────────
   src/styles.book-fab.css  (16)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   book-fab.css — the floating book-a-call affordance
   ═══════════════════════════════════════════════════════════════ */

.book-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  background: var(--ink-1);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--t-2);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 12px 32px -12px rgba(27, 26, 23, 0.5);
  transition: all var(--t-mid) var(--ease-out);
  border: 1px solid var(--ink-1);
}
.book-fab:hover {
  background: var(--blood);
  border-color: var(--blood);
  transform: translateY(-2px);
  color: var(--paper);
}
.book-fab-mark {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--blood);
  position: relative;
}
.book-fab-mark::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 1px solid var(--blood);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .book-fab-mark::after { animation: none; opacity: 0.7; }
}

@media (max-width: 720px) {
  .book-fab { right: 16px; bottom: 16px; padding: 12px 18px 12px 14px; }
  .book-fab svg { display: none; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.kbd.css  (17)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   kbd.css — keyboard chip cluster
   ═══════════════════════════════════════════════════════════════ */

.kbd-help {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding: 12px 16px;
  background: var(--paper-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-glass);
}
.kbd-help-label {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kbd-help span {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  color: var(--ink-2);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.kbd-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: var(--s-3);
}
.kbd-grid span {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  color: var(--ink-2);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* ──────────────────────────────────────────────────────────
   src/styles.home.css  (18)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   home.css — the home page
   Hero (3D + flow-viz), capability grid 4x2, process timeline,
   disciplines, quote, engagement, FAQ, end CTA.
   ═══════════════════════════════════════════════════════════════ */

main { position: relative; z-index: var(--z-content); }

/* ─────────────────────── hero ─────────────────────── */
.hero {
  position: relative;
  padding: calc(var(--s-12) + 60px) 0 var(--s-10);
  overflow: hidden;
}
.hero-grid {
  width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-9);
  align-items: center;
}

.hero-eyebrow { margin-bottom: var(--s-5); }
.hero-headline {
  font-family: var(--f-display);
  font-size: clamp(3rem, 7.4vw, var(--t-13));
  letter-spacing: -0.034em;
  line-height: 0.96;
  font-weight: 440;
  color: var(--ink-1);
  margin: 0 0 var(--s-6);
  max-width: 12ch;
  font-variation-settings: 'opsz' 144;
}
.hero-headline .line {
  display: block;
  overflow: hidden;
}
.hero-headline em {
  font-style: italic;
  font-style: oblique 14deg;
  color: var(--blood);
}
.hero-headline .line-2 em,
.hero-headline .line-3 em {
  font-variation-settings: 'opsz' 144;
}

.hero-sub {
  font-size: var(--t-5);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0 0 var(--s-7);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--paper-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-pill);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.meta-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--blood);
  animation: pulse-dot 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .meta-pill .dot { animation: none; }
}
.meta-text {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* hero 3D stage lives in hero.css (rendered by hero3d.js).
   The flow-viz overlay (flowviz.js) layers on top of it. */

/* ── hero scroll indicator ── */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--blood), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--ink-1), transparent);
  animation: scan 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-line::after { animation: none; }
}

/* ─────────────────────── capability grid ─────────────────────── */
.capgrid {
  padding: var(--s-10) 0 var(--s-11);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.cap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  min-height: 220px;
  text-decoration: none;
  color: var(--ink-1);
  transition-delay: 0s;
}
.cap-num {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cap-num::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--ink-3);
}
.cap-title {
  font-family: var(--f-display);
  font-size: var(--t-6);
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 440;
  margin: 0;
  color: var(--ink-1);
}
.cap-desc {
  font-size: var(--t-2);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}
.cap-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-4);
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.cap:hover .cap-num { color: var(--blood); }
.cap:hover .cap-num::after { background: var(--blood); }
.cap:hover { border-color: var(--glass-border-blood); }

/* hover-reveal proof line (injected by capgrid.js) */
.cap-extra {
  margin: 0;
  padding-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-0);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--clay);
  border-top: 1px solid var(--clay-line);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0, 4px, 0);
  transition: max-height var(--t-mid) var(--ease-out),
              opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              padding-top var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}
.cap:hover .cap-extra,
.cap.is-active .cap-extra,
.cap:focus-within .cap-extra {
  max-height: 80px;
  opacity: 1;
  transform: none;
}
/* touch / no-hover: show the proof by default */
@media (hover: none) {
  .cap-extra {
    max-height: 80px;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1000px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cap-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────── process ─────────────────────── */
.process {
  padding: var(--s-11) 0;
  background: var(--surface-1);
  border-top: 1px solid var(--ink-4);
  border-bottom: 1px solid var(--ink-4);
  position: relative;
}
.process::before, .process::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-3), transparent);
}
.process::before { top: var(--s-7); opacity: 0.4; }

.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-8);
}
.process-step {
  padding: var(--s-5);
  min-height: 220px;
}
.step-num {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--blood);
  margin-bottom: var(--s-3);
}
.process-step h3 {
  font-family: var(--f-display);
  font-size: var(--t-7);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 440;
  margin-bottom: var(--s-3);
  color: var(--ink-1);
}
.process-step p {
  color: var(--ink-2);
  font-size: var(--t-2);
  line-height: 1.55;
  margin: 0 0 var(--s-3);
}
.step-tag {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-4);
}

.process-note {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-glass);
  max-width: 720px;
  margin-left: auto;
}
.process-note p {
  font-size: var(--t-4);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  font-style: italic;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144;
  font-weight: 440;
}

@media (max-width: 980px) {
  .process-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-track { grid-template-columns: 1fr; }
  .process-note { margin: 0; }
}

/* ─────────────────────── disciplines ─────────────────────── */
.disciplines { padding: var(--s-11) 0; }

.disc-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-3);
}
.disc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  min-height: 280px;
  text-decoration: none;
  color: var(--ink-1);
}
.disc-featured {
  grid-row: span 2;
  background: var(--iron);
  color: var(--paper);
  border-color: rgba(154, 59, 44, 0.2);
}
.disc-featured .disc-title,
.disc-featured .disc-desc { color: var(--paper); }
.disc-featured .disc-desc { color: rgba(237, 232, 222, 0.7); }
.disc-featured .disc-mark { color: var(--paper); }
.disc-featured .disc-mark .disc-index { color: var(--paper); }
.disc-featured .disc-go { color: var(--paper); }
.disc-featured .kbd-row { color: var(--paper); }
.disc-featured .kbd-row kbd {
  background: rgba(237, 232, 222, 0.06);
  color: var(--paper);
  border-color: rgba(237, 232, 222, 0.18);
}
.disc-featured:hover {
  border-color: var(--blood);
  background: var(--iron);
}

.disc-mark {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.disc-index {
  font-family: var(--f-mono);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.disc-title {
  font-family: var(--f-display);
  font-size: var(--t-8);
  letter-spacing: -0.022em;
  line-height: 1.04;
  font-weight: 440;
  margin: 0;
}
.disc-desc {
  font-size: var(--t-2);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
}
.disc-evidence {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(237, 232, 222, 0.10);
}
.disc-go {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-4);
  font-family: var(--f-body);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out);
}
.disc:hover .disc-go { color: var(--blood); }

@media (max-width: 980px) {
  .disc-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .disc-featured { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 600px) {
  .disc-grid { grid-template-columns: 1fr; }
  .disc-featured { grid-column: auto; }
}

/* ─────────────────────── engagement ─────────────────────── */
.engage { padding: var(--s-10) 0; }

.engage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.engage-card {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.engage-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blood);
}
.engage-card h3 {
  font-family: var(--f-display);
  font-size: var(--t-7);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 440;
  margin: 0;
}
.engage-card p {
  color: var(--ink-2);
  font-size: var(--t-3);
  line-height: 1.55;
}
.engage-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.engage-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--t-2);
  color: var(--ink-2);
}
.engage-card .bullet {
  width: 4px;
  height: 4px;
  background: var(--blood);
  margin-top: 0.6em;
  flex-shrink: 0;
}

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

/* ─────────────────────── FAQ ─────────────────────── */
.faq { padding: var(--s-10) 0; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-6);
  max-width: 900px;
}
.faq-item {
  padding: 0;
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-5) var(--s-6);
  cursor: pointer;
  list-style: none;
  gap: var(--s-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--f-display);
  font-size: var(--t-5);
  letter-spacing: -0.018em;
  line-height: 1.2;
  font-weight: 440;
  color: var(--ink-1);
  flex: 1;
}
.faq-icon {
  font-family: var(--f-mono);
  font-size: var(--t-3);
  font-weight: 500;
  color: var(--ink-2);
  transition: transform var(--t-mid) var(--ease-out);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); color: var(--blood); }
.faq-a {
  padding: 0 var(--s-6) var(--s-5);
  color: var(--ink-2);
  font-size: var(--t-3);
  line-height: 1.6;
  max-width: 64ch;
}

/* ─────────────────────── end CTA ─────────────────────── */
.cta-end { padding: var(--s-10) 0 var(--s-11); }
.cta-card {
  padding: var(--s-9) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}
.cta-h {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  letter-spacing: -0.028em;
  line-height: 1.0;
  font-weight: 440;
  margin: 0;
  max-width: 18ch;
}
.cta-h em { color: var(--blood); font-style: italic; font-variation-settings: 'opsz' 144; }
.cta-card p {
  font-size: var(--t-4);
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

/* ─────────────────────── responsive ─────────────────────── */
@media (max-width: 980px) {
  .hero { padding-top: calc(var(--s-11) + 60px); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero-3d { min-height: 380px; }
  .hero-headline { max-width: 100%; }
}
@media (max-width: 560px) {
  .hero-headline { font-size: clamp(2.4rem, 11vw, 3.6rem); }
}

/* ──────────────────────────────────────────────────────────
   src/styles.automation.css  (19)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   automation.css — automation page
   ═══════════════════════════════════════════════════════════════ */

.page-auto main { position: relative; z-index: var(--z-content); }

.page-hero {
  padding: calc(var(--s-11) + 60px) 0 var(--s-9);
  position: relative;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  align-items: end;
}
.display-h1 {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 6.5vw, var(--t-12));
  letter-spacing: -0.030em;
  line-height: 1.0;
  font-weight: 440;
  max-width: 18ch;
  margin: 0;
  font-variation-settings: 'opsz' 144;
}
.display-h1 em { color: var(--blood); font-style: italic; font-variation-settings: 'opsz' 144; }
.page-hero-sub {
  font-size: var(--t-5);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 42ch;
  margin: var(--s-5) 0 0;
}

.page-intro {
  padding: var(--s-7) 0 var(--s-9);
}
.page-intro p {
  font-size: var(--t-5);
  line-height: 1.55;
  color: var(--ink-1);
  max-width: 60ch;
}

.usecases { padding: var(--s-10) 0; }
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.usecase {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 240px;
}
.usecase-num {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--blood);
  display: flex;
  align-items: center;
  gap: 8px;
}
.usecase-num::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--blood);
}
.usecase h3 {
  font-family: var(--f-display);
  font-size: var(--t-6);
  letter-spacing: -0.018em;
  line-height: 1.15;
  font-weight: 440;
  margin: 0;
}
.usecase p {
  font-size: var(--t-2);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.usecase-kbd {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-4);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.usecase-kbd kbd { font-size: 0.7rem; }

@media (max-width: 1000px) {
  .usecase-grid { grid-template-columns: 1fr 1fr; }
  .page-hero-grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 600px) {
  .usecase-grid { grid-template-columns: 1fr; }
}

.approach { padding: var(--s-10) 0; background: var(--surface-1); border-top: 1px solid var(--ink-4); border-bottom: 1px solid var(--ink-4); }
.approach-list {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.approach-step {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.approach-step h3 {
  font-family: var(--f-display);
  font-size: var(--t-7);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 440;
  margin: 0;
}
.approach-step p { color: var(--ink-2); margin: 0; line-height: 1.55; }

@media (max-width: 800px) {
  .approach-list { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   src/styles.services.css  (20)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   services.css — shared style for the four service pages
   (custom-crm, website-design, ad-campaigns, content-growth)
   ═══════════════════════════════════════════════════════════════ */

.page-svc main { position: relative; z-index: var(--z-content); }

/* inherits the .page-hero, .page-intro, .usecases, .approach,
   .frame-callout, .cta-end rules from automation.css. This file
   adds the service-page-specific polish: */

/* ── service pages: more air around hero, narrower text column ── */
.page-svc .page-hero {
  padding: calc(var(--s-11) + 60px) 0 var(--s-9);
}
.page-svc .page-hero-grid {
  grid-template-columns: 1.6fr 0.8fr;
}
.page-svc .display-h1 {
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  max-width: 22ch;
}

@media (max-width: 1000px) {
  .page-svc .page-hero-grid { grid-template-columns: 1fr; }
}

/* ── frame callout (shipped-work / proof) ── */
.frame-callout { padding: var(--s-9) 0; }

/* ── editorial hero aside (replaces the ambient blade) ── */
.page-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-3);
  min-height: 320px;
}
.page-hero-index {
  font-family: var(--f-display);
  font-size: clamp(7rem, 16vw, 12rem);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--ink-1);
  opacity: 0.07;
  font-variation-settings: 'opsz' 144;
  user-select: none;
}
.page-hero-aside-label {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay);
}
@media (max-width: 1000px) {
  .page-hero-aside { min-height: 0; align-items: flex-start; }
  .page-hero-index { font-size: clamp(5rem, 22vw, 8rem); }
}

/* ──────────────────────────────────────────────────────────
   src/styles.workflows.css  (21)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   workflows.css — the Workflows page showpiece
   Rail (left) + Stage (center) + Meta (right)
   Interactive diagram, n8n-style chrome.
   ═══════════════════════════════════════════════════════════════ */

.page-work main { position: relative; z-index: var(--z-content); }
.page-work .page-hero { padding: calc(var(--s-11) + 60px) 0 var(--s-7); }
.page-work .page-hero-grid { grid-template-columns: 1.6fr 0.8fr; align-items: end; }
.page-work .display-h1 {
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  max-width: 14ch;
}
.page-work .page-hero-sub {
  max-width: 50ch;
  margin-top: var(--s-5);
}
.page-work .kbd-help {
  margin-top: var(--s-6);
}

.workflows { padding: var(--s-7) 0 var(--s-11); }

.wf-layout {
  display: grid;
  grid-template-columns: 220px 1fr 256px;
  gap: var(--s-3);
  align-items: start;
  min-height: 720px;
}

.wf-rail {
  position: sticky;
  top: 100px;
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-glass);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.rail-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-4);
}
.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rail-list button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  font-family: var(--f-body);
}
.rail-list button:hover {
  background: var(--paper-2);
  border-color: var(--ink-4);
}
.rail-list button.is-active {
  background: var(--paper-2);
  border-color: var(--ink-1);
  border-left: 2px solid var(--blood);
}
.rail-list .rail-num {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.rail-list .rail-title {
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.3;
}
.rail-list .rail-sub {
  font-size: var(--t-0);
  color: var(--ink-3);
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.rail-foot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rail-foot .kbd-row {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.wf-stage {
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-glass);
  padding: var(--s-6);
  position: relative;
  min-height: 720px;
  overflow: hidden;
}

.wf-meta {
  position: sticky;
  top: 100px;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.meta-head {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-4);
}
.meta-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 6px;
}
.meta-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--ink-4);
}
.meta-row:last-child { border-bottom: none; }
.meta-key {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meta-val {
  font-family: var(--f-body);
  font-size: var(--t-2);
  font-weight: 500;
  color: var(--ink-1);
}
.meta-val-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meta-shortcuts {
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-4);
}

/* ── workflow stage content (drawn by JS) ── */
.wf-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink-4);
}
.wf-stage-num {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--blood);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wf-stage-num::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--blood);
}
.wf-stage-title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -0.022em;
  line-height: 1.05;
  font-weight: 440;
  margin: 6px 0 0;
  max-width: 26ch;
}
.wf-stage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-3);
}
.wf-stage-tag {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  background: var(--paper-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-pill);
  color: var(--ink-2);
}

.wf-stage-run {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-align: right;
  flex-shrink: 0;
}
.wf-stage-run strong { color: var(--ink-1); font-weight: 600; }

.wf-stage-summary {
  color: var(--ink-2);
  max-width: 60ch;
  margin: var(--s-4) 0 0;
}

/* ── canvas area (n8n-style: 2D node field, scales to fit) ── */
.wf-canvas {
  position: relative;
  width: 100%;
  margin-top: var(--s-5);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.wf-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}
.wf-node {
  cursor: pointer;
  transition: filter var(--t-fast) var(--ease-out);
}
.wf-node:hover { filter: drop-shadow(0 4px 12px rgba(154, 59, 44, 0.25)); }
.wf-node:focus { outline: none; }
.wf-node:focus-visible .wf-node-rect { stroke: var(--blood); stroke-width: 2; }
.wf-node.is-active .wf-node-rect { stroke: var(--clay); stroke-width: 2; }
.wf-node.is-active { filter: drop-shadow(0 4px 14px rgba(154, 59, 44, 0.35)); }

/* node popover — floats beside the active/hovered node (body-mounted) */
.wf-popover {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 256px;
  padding: 12px 14px 13px;
  background: var(--paper);
  border: 1px solid var(--ink-3);
  border-left: 2px solid var(--clay);
  border-radius: var(--r-glass);
  box-shadow: 0 14px 34px rgba(27, 26, 23, 0.16);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease-out);
}
.wf-popover.is-open { opacity: 1; visibility: visible; }
.wf-pop-tag {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 4px;
}
.wf-pop-title {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-5);
  font-weight: 440;
  letter-spacing: -0.018em;
  color: var(--ink-1);
  margin-bottom: 2px;
  line-height: 1.1;
}
.wf-pop-sub {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  margin: 0 0 8px;
  word-break: break-word;
}
.wf-pop-expl {
  margin: 0;
  font-size: var(--t-1);
  line-height: 1.45;
  color: var(--ink-2);
}
.meta-hint {
  margin: 0;
  font-size: var(--t-1);
  line-height: 1.45;
  color: var(--ink-2);
}

.wf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-4);
  font-family: var(--f-mono);
  font-size: var(--t-0);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.wf-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wf-legend .legend-swatch {
  width: 12px;
  height: 12px;
  background: var(--iron);
  border-radius: 2px;
}
.wf-legend .legend-swatch.trigger { background: var(--ink-1); border-top: 2px solid var(--blood); border-radius: 2px 2px 0 0; }
.wf-legend .legend-swatch.action { background: var(--steel); }
.wf-legend .legend-swatch.ai { background: var(--ink-2); }

/* ── n8n-style execution ── */
.wf-conn {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
.wf-node.is-success ~ * .wf-conn,
.wf-connectors .wf-conn { /* base */ }

/* data packets travelling the connectors */
.wf-packet {
  fill: var(--clay);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(154, 59, 44, 0.6));
}

/* node status badge */
.wf-status-ring {
  fill: var(--iron);
  stroke: var(--ink-4);
  stroke-width: 1.5;
  transition: fill var(--t-fast) var(--ease-out),
              stroke var(--t-fast) var(--ease-out);
}
.wf-status-check {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}
.wf-status-pulse {
  fill: none;
  stroke: var(--clay);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.wf-node.is-running .wf-status-ring { stroke: var(--clay); }
.wf-node.is-running .wf-status-pulse { animation: wf-status-pulse 0.9s ease-out infinite; }
@keyframes wf-status-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
.wf-node.is-running .wf-node-rect { stroke: var(--clay); stroke-width: 1.5; }
.wf-node.is-success .wf-status-ring { fill: var(--clay); stroke: var(--clay); }
.wf-node.is-success .wf-status-check { opacity: 1; }

/* exec controls */
.wf-exec {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.wf-exec-run {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--t-2);
  padding: 7px 16px;
  background: var(--ink-1);
  color: var(--paper);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.wf-exec-run:hover { background: var(--clay); transform: translate3d(2px, 0, 0); }
.wf-exec-status {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.wf-exec-status .wf-exec-running { color: var(--clay); font-weight: 600; }
.wf-exec-status .wf-exec-ok { color: var(--clay); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .wf-packet { display: none; }
  .wf-status-pulse { animation: none !important; }
  .wf-exec-run { transition: none; }
  .wf-exec-run:hover { transform: none; }
}

@media (max-width: 1100px) {
  .wf-layout { grid-template-columns: 1fr; }
  .wf-rail, .wf-meta { position: static; }
  .wf-rail { margin-bottom: var(--s-3); }
  .wf-meta { margin-top: var(--s-3); }
}

/* ──────────────────────────────────────────────────────────
   src/styles.contact.css  (22)
   ────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   contact.css — Contact page
   ═══════════════════════════════════════════════════════════════ */

.page-contact main { position: relative; z-index: var(--z-content); }

.contact-hero {
  padding: calc(var(--s-11) + 60px) 0 var(--s-9);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-7);
  align-items: start;
}

.contact-h1 {
  font-size: clamp(3rem, 8vw, var(--t-12));
  letter-spacing: -0.034em;
  max-width: 10ch;
  margin: 0 0 var(--s-5);
  line-height: 0.96;
}
.contact-h1 em { color: var(--blood); font-style: italic; }
.contact-lede {
  font-size: var(--t-5);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0 0 var(--s-7);
}

.channel-list {
  list-style: none;
  margin: 0 0 var(--s-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.channel-list li {
  display: grid;
  grid-template-columns: 12px 80px 1fr;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--ink-4);
}
.channel-label {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.channel-val {
  font-family: var(--f-body);
  font-size: var(--t-3);
  font-weight: 500;
  color: var(--ink-1);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.channel-val:hover { color: var(--blood); }

.booking-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--paper-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.booking-pill .pulse {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--blood);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .booking-pill .pulse { animation: none; }
}

.cal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.cal-card-head {
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-bottom: 1px solid var(--ink-4);
}
.cal-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cal-iframe {
  width: 100%;
  height: 660px;
  border: 0;
  display: block;
  background: var(--paper);
}

/* ── brief section ── */
.brief { padding: var(--s-9) 0 var(--s-11); }
.brief-card {
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.brief-h {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  letter-spacing: -0.022em;
  line-height: 1.05;
  font-weight: 440;
  margin: 0;
  max-width: 20ch;
}
.brief-h em { color: var(--blood); font-style: italic; }
.brief-card p {
  color: var(--ink-2);
  font-size: var(--t-4);
  line-height: 1.55;
  max-width: 64ch;
}
.brief-list {
  list-style: none;
  margin: var(--s-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brief-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--ink-1);
  font-size: var(--t-3);
  line-height: 1.55;
}
.b-num {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--blood);
}
.brief-foot {
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-style: normal;
}

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