/* Fluxworks site system: paper, ink, one accent.
   Loaded by every page; page-specific rules stay in each page's <style>.
   Structural devices carry meaning: 2px ink rules separate chapters,
   mono tags name the channel a row belongs to, numbers appear only on
   real sequences (the four engagement stages, the ledger, the steps).
   Amber appears only where a person approves. Nothing glows. */

:root {
  /* grounds */
  --paper: #f3f4f7;
  --surface: #e9ebf1;
  --ink: #14171d;
  --ink-deep: #0f1218;
  --ink-raise: #1a1f28;

  /* neutral scale, cooled toward ink */
  --n100: #f8f9fb; --n200: #eef0f4; --n300: #dcdfe6; --n400: #bfc4cf;
  --n500: #9aa1ae; --n600: #7b8290; --n700: #5f6672; --n800: #40454f; --n900: #22262d;

  /* cobalt accent and ramp. accent = 500 step in spirit; 600 is hover, 700 is text-size accent on paper */
  --accent: #1a45c4;
  --a100: #e8eefc; --a200: #cfdcf9; --a300: #a9c0f3; --a400: #7c9ce9;
  --a500: #4d74dc; --a600: #1439a8; --a700: #113095; --a800: #0e2670; --a900: #0a1c52;

  /* amber: the human gate. three steps only. */
  --human: #a8540a;       /* marker and 12px mono index on paper (4.85:1) */
  --human-300: #f5b73f;   /* marker on ink grounds (10.47:1) */
  --human-100: #fdf0d5;   /* the one permitted tint, behind a gate callout box */

  --error: #b91c1c;
  --divider: rgba(20, 23, 29, 0.34);

  /* type */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* elevation: ink-tinted only, never accent-tinted */
  --shadow-sm: 0 1px 2px rgba(20, 23, 29, 0.14);
  --shadow-md: 0 3px 10px rgba(20, 23, 29, 0.16);
  --shadow-lg: 0 20px 44px rgba(20, 23, 29, 0.14);

  /* grain: kept from DPS, ink chapters only, opacity 0.05 max */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");

  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  /* radius: zero, declared so nobody reaches for a value */
  --radius: 0px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: var(--radius); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--font); }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--a200); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.ink a:focus-visible, .ink button:focus-visible, .hero a:focus-visible, .poster a:focus-visible, .poster button:focus-visible { outline-color: var(--a300); }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--ink); color: #fff; font-weight: 700; }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* ---- layout primitives ------------------------------------------------ */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.wrap-narrow { max-width: 960px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.pad-xl { padding: clamp(64px, 8vw, 120px) 0; }
.pad-lg { padding: clamp(56px, 7vw, 104px) 0; }
.pad-md { padding: clamp(48px, 6vw, 88px) 0; }
.pad-sm { padding: clamp(40px, 5vw, 72px) 0; }
.rule-top { border-top: 2px solid var(--ink); }
.rule-bottom { border-bottom: 2px solid var(--ink); }
.surface { background: var(--surface); }

.split { display: grid; grid-template-columns: minmax(0, var(--c1, 1fr)) minmax(0, var(--c2, 1fr)); gap: var(--gap, clamp(32px, 5vw, 72px)); align-items: start; }
.split.center { align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }

/* Dark chapters: flat ink, grain over the whole plate. */
.ink, .poster { position: relative; isolation: isolate; color: var(--n100); }
.ink::before, .poster::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--grain); opacity: 0.05; pointer-events: none; }
.ink > *, .poster > * { position: relative; z-index: 1; }
.ink { background: var(--ink-deep); }
.poster { background: linear-gradient(118deg, var(--a800) 0%, var(--ink-deep) 100%); }

/* ---- type ------------------------------------------------------------- */
.h-hero { font-size: clamp(38px, 4.9vw, 72px); font-weight: 900; letter-spacing: -0.035em; line-height: 0.98; }
.h-sec { font-size: clamp(28px, 3.4vw, 48px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; }
.h-sec-md { font-size: clamp(26px, 3vw, 42px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.h-sec-sm { font-size: clamp(24px, 2.6vw, 36px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; }
.h-card { font-size: clamp(19px, 1.7vw, 23px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--n800); max-width: 60ch; }
.lede-sm { font-size: 17px; line-height: 1.6; color: var(--n800); }
.body { font-size: 17px; line-height: 1.62; color: var(--n800); max-width: 68ch; }
.body-sm { font-size: 15px; line-height: 1.55; color: var(--n800); }
.ink .lede, .ink .lede-sm, .ink .body, .ink .body-sm, .poster .lede, .poster .body, .poster .body-sm { color: var(--n400); }
.body a, .lede a, .lede-sm a, .body-sm a, .faq-body a, .prose a, .caption a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--accent); }
.body a:hover, .lede a:hover, .prose a:hover, .body-sm a:hover, .faq-body a:hover { color: var(--accent); }
.ink .body a, .poster .body a, .ink .body-sm a { color: var(--n100); text-decoration-color: var(--a300); }
.ink .body a:hover, .poster .body a:hover { color: var(--a300); }

.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--n700); }
.ink .eyebrow, .poster .eyebrow, .hero .eyebrow, .eyebrow.on-ink { color: var(--a300); }
.eyebrow-dot { display: flex; align-items: center; gap: var(--s3); }
.eyebrow-dot::before { content: ""; width: 10px; height: 10px; background: var(--accent); display: block; flex: none; }
.ink .eyebrow-dot::before, .hero .eyebrow-dot::before, .poster .eyebrow-dot::before { background: var(--a400); }
.rule-label { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n700); padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); }
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a700); }
.ink .tag, .hero .tag, .poster .tag { color: var(--a300); }
.pull { border-left: 3px solid var(--accent); padding-left: var(--s6); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.4; }
.ink .pull, .poster .pull { border-left-color: var(--a400); color: var(--n100); }
.caption { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--n700); }
.prose { max-width: 68ch; }
.prose p, .prose li { font-size: 17px; line-height: 1.62; color: var(--n800); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: var(--s4); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s2); }
.prose strong { color: var(--ink); }
.prose h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; letter-spacing: -0.025em; margin: clamp(32px, 4vw, 48px) 0 var(--s4); padding-top: var(--s4); border-top: 2px solid var(--ink); color: var(--ink); }
.prose h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: var(--s6) 0 var(--s2); color: var(--ink); }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--n200); padding: 1px 5px; }

/* ---- buttons ---------------------------------------------------------- */
.b, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 56px; padding: 0 clamp(18px, 2vw, 26px);
  font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: -0.005em; line-height: 1;
  border: 2px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; text-decoration: none; white-space: nowrap; touch-action: manipulation;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.b::after, .btn::after { content: "\2192"; font-size: 17px; line-height: 1; transition: transform 220ms var(--ease); }
.b:hover::after, .btn:hover::after { transform: translateX(5px); }
.b:hover, .btn:hover { background: var(--a600); border-color: var(--a600); color: #fff; }
.b.ghost, .btn-secondary, .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.b.ghost:hover, .btn-secondary:hover, .btn.ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ink .b.ghost, .ink .btn-secondary, .poster .b.ghost, .poster .btn-secondary, .hero .b.ghost, .hero .btn-secondary { color: var(--n100); border-color: var(--n100); }
.ink .b.ghost:hover, .ink .btn-secondary:hover, .poster .b.ghost:hover, .poster .btn-secondary:hover, .hero .b.ghost:hover { background: var(--n100); color: var(--ink); }
.poster .b:not(.ghost), .poster .btn-primary { background: #fff; border-color: #fff; color: var(--a900); }
.poster .b:not(.ghost):hover, .poster .btn-primary:hover { background: var(--a100); border-color: var(--a100); color: var(--a900); }
.b.sm, .btn-sm { min-height: 44px; padding: 0 16px; font-size: 13.5px; }
.b.no-arrow::after, .btn.no-arrow::after { content: none; }
.b:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-row, .actions, .hero-cta, .cta-row, .next, .booking-actions, .vcard-actions, .form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.go { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a700); }
.go::after { content: "\2192"; font-size: 15px; letter-spacing: 0; transition: transform 220ms var(--ease); }
.go:hover { color: var(--accent); }
.go:hover::after { transform: translateX(4px); }
.ink .go, .hero .go { color: var(--a300); }

/* ---- header ----------------------------------------------------------- */
.site-header, header.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  transition: box-shadow 260ms var(--ease), background 260ms var(--ease);
}
.site-header.is-stuck, header.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(20, 23, 29, 0.10);
}
.header-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px);
  display: flex; align-items: stretch; justify-content: space-between; gap: var(--s6); min-height: 76px;
}
.brand { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: var(--s3) 0 var(--s3) 15px; }
.brand::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 32px; background: var(--accent); }
.brand-mark { font-weight: 900; font-size: 23px; letter-spacing: -0.02em; line-height: 1; color: var(--ink); transition: color 180ms var(--ease); }
.brand-sub { font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n700); line-height: 1; }
.brand:hover .brand-mark { color: var(--accent); }
.site-nav { display: flex; align-items: stretch; gap: clamp(6px, 1.8vw, 26px); }
.site-nav > a { position: relative; display: flex; align-items: center; padding: 0 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); transition: color 180ms var(--ease); }
.site-nav > a:hover { color: var(--accent); }
.site-nav > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }
.header-cta { display: flex; align-items: center; gap: var(--s4); }
.header-cta .b { min-height: 44px; padding: 0 18px; font-size: 13.5px; }
.nav-toggle { display: none; }
@media (max-width: 919.98px) {
  .header-inner { flex-wrap: wrap; row-gap: 0; }
  .brand { order: 1; }
  .header-cta { order: 3; }
  .nav-toggle {
    order: 2; display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 14px; margin: 0 0 0 auto; align-self: center;
    border: 2px solid var(--ink); background: transparent; color: var(--ink);
    font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer;
    transition: background 180ms var(--ease), color 180ms var(--ease);
  }
  .nav-toggle:hover, header.nav.nav-open .nav-toggle { background: var(--ink); color: #fff; }
  .site-nav { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--n300); padding: var(--s2) 0 var(--s4); }
  header.nav.nav-open .site-nav { display: flex; }
  .site-nav > a { min-height: 48px; font-size: 15px; padding: 0 2px 0 14px; border-bottom: 1px solid var(--n300); }
  .site-nav > a[aria-current="page"]::after { height: auto; top: 10px; bottom: 10px; width: 3px; right: auto; left: 0; }
  .header-cta .b { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .header-cta .b::after { content: none; }
}
@media (max-width: 480px) {
  .brand-sub { display: none; }
  .header-inner { gap: var(--s2); }
  .brand-mark { font-size: 20px; }
  .nav-toggle { padding: 0 8px; font-size: 12px; min-height: 40px; }
  .header-cta .b { padding: 0 10px; font-size: 12px; min-height: 40px; }
}

/* ---- hero: ink plate, photograph under a scrim, copy on the left ------ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-deep); color: var(--n100);
  border-bottom: 2px solid var(--ink);
  padding: clamp(36px, 3.6vw, 52px) 0 clamp(32px, 3.2vw, 44px);
}
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--ink-deep); }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; filter: saturate(0.6) contrast(1.06) brightness(1.12); }
.hero-media img.is-missing { visibility: hidden; }
.hero-media::after { content: none; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(97deg,
      rgba(15, 18, 24, 0.96) 0%, rgba(15, 18, 24, 0.90) 34%,
      rgba(15, 18, 24, 0.55) 58%, rgba(15, 18, 24, 0.12) 100%),
    linear-gradient(180deg, rgba(15, 18, 24, 0.55) 0%, rgba(15, 18, 24, 0) 30%);
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.05; pointer-events: none; }
.hero .lede { color: color-mix(in srgb, var(--n200) 88%, transparent); max-width: 60ch; }
.hero-copy { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); max-width: 780px; }
.hero-copy .h-hero { max-width: 15ch; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.page-hero { padding: clamp(44px, 5.5vw, 72px) 0 clamp(40px, 5vw, 64px); }
.page-hero .h-hero { font-size: clamp(32px, 4.2vw, 58px); max-width: 18ch; }
.page-hero .hero-copy { max-width: 900px; }

/* Wiring list: the hero's right-hand panel. Each row is a real channel. */
.scope-list { border: 1px solid rgba(248, 249, 251, 0.16); padding: clamp(18px, 2.2vw, 28px); background: color-mix(in srgb, var(--ink-deep) 84%, transparent); }
.scope-list .rule-label { color: var(--a300); border-bottom-color: rgba(248, 249, 251, 0.4); }
.scope-row { display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(248, 249, 251, 0.14); color: var(--n100); }
.scope-row:last-child { border-bottom: 0; }
.scope-row i { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--a300); }
.scope-row b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.scope-row span { display: block; font-size: 13px; line-height: 1.45; color: var(--n400); margin-top: 2px; }

/* ---- image slots: paper ground and a fixed ratio so layout holds ------ */
.img-slot { position: relative; display: block; width: 100%; background: var(--surface); overflow: hidden; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; }
.img-slot img.is-missing { visibility: hidden; }
.ar-16x9 { aspect-ratio: 16 / 9; }
.ar-16x10 { aspect-ratio: 16 / 10; }
.ar-3x2 { aspect-ratio: 3 / 2; }
.ar-4x5 { aspect-ratio: 4 / 5; }
.ar-21x9 { aspect-ratio: 21 / 9; }
.portrait { border: 2px solid var(--ink); }
.portrait img { filter: saturate(0.7) contrast(1.05); }
.figure { display: flex; flex-direction: column; gap: var(--s3); }
.figure figcaption { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); align-items: center; }
.diagram { background: var(--surface); }
.diagram picture { display: block; width: 100%; height: 100%; }
/* Pending state: a labelled box, not a bare grey rectangle. */
.img-slot:has(> img.is-missing), .img-slot:has(picture > img.is-missing) { background: var(--paper); border: 1px solid var(--n300); }
.img-slot.portrait:has(> img.is-missing) { border: 2px solid var(--ink); }
.img-slot:has(img.is-missing)::after { content: attr(data-pending); position: absolute; left: 12px; bottom: 10px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n700); }
.figure-link { margin-left: auto; }
@media (max-width: 719.98px) {
  .img-slot.breakout { width: 100vw; margin-left: calc(50% - 50vw); }
  .img-slot.breakout:has(img.is-missing) { border-left: 0; border-right: 0; }
}

/* ---- section heads and doors ----------------------------------------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 44px); }
.section-head .eyebrow { margin-bottom: var(--s3); }
.section-head .lede { max-width: 60ch; margin-top: var(--s3); }
.section-head .side { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--n700); padding-bottom: 6px; }
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.path-card { display: flex; flex-direction: column; gap: var(--s4); border: 2px solid var(--ink); padding: clamp(24px, 3vw, 40px); color: var(--ink); background: var(--paper); transition: background 220ms var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.path-card:hover { background: var(--a100); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.path-head { display: flex; align-items: center; gap: var(--s3); }
.path-num { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #fff; background: var(--accent); padding: 5px 8px; }
.path-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--a700); }
.path-title { font-size: clamp(21px, 2.1vw, 28px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; }
.path-body { font-size: 15px; line-height: 1.6; color: var(--n800); }
.path-list { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--n300); }
.path-list li { font-size: 14px; line-height: 1.45; padding: 11px 0 11px 20px; position: relative; border-bottom: 1px solid var(--n300); }
.path-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px; background: var(--a400); }
.path-list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.path-go { margin-top: auto; padding-top: var(--s4); }
.doors-line { margin-top: clamp(24px, 3vw, 36px); padding-top: var(--s4); border-top: 1px solid var(--n300); font-size: 17px; color: var(--n800); }
.doors-line strong { color: var(--ink); }

/* ---- stat band -------------------------------------------------------- */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.band > div { padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.5vw, 36px); border-right: 1px solid var(--n300); }
.band > div:first-child { padding-left: 0; }
.band > div:last-child { border-right: 0; }
.num { font-size: clamp(34px, 3.6vw, 50px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--a900); }
.num.accent { color: var(--accent); }
.num-sup { font-size: 0.45em; font-weight: 800; letter-spacing: 0; margin-left: 2px; vertical-align: super; }
.num-label { position: relative; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n700); padding-top: var(--s3); margin-top: var(--s3); line-height: 1.3; }
.num-label::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--accent); }
@media (max-width: 719.98px) {
  .band { grid-template-columns: 1fr 1fr; }
  .band > div { padding-left: var(--s4); padding-right: var(--s4); }
  .band > div:nth-child(odd) { padding-left: 0; }
  .band > div:nth-child(2n) { border-right: 0; }
  .band > div:nth-child(-n+2) { border-bottom: 1px solid var(--n300); }
}

/* ---- stages (a real sequence, so numbered) ---------------------------- */
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 2px solid var(--ink); }
.stage { padding: var(--s8) var(--s6) var(--s8) 0; border-right: 1px solid var(--n300); }
.stages .stage + .stage { padding-left: var(--s6); }
.stages .stage:last-child { border-right: 0; }
.stage i { font-style: normal; display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--a700); margin-bottom: var(--s4); }
.stage h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--s3); }
.stage p { font-size: 15px; line-height: 1.6; color: var(--n800); }
.stage.human i { color: var(--human); }
.stage .gate { margin-top: var(--s4); }
@media (max-width: 719.98px) {
  .stages { grid-template-columns: 1fr; }
  .stage, .stages .stage + .stage { padding: var(--s6) 0; border-right: 0; border-bottom: 1px solid var(--n300); }
}

/* Human gate marker and the one tinted box. */
.gate { display: inline-flex; align-items: center; gap: var(--s3); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n700); }
.gate::before { content: ""; width: 10px; height: 10px; background: var(--human); flex: none; }
.ink .gate, .poster .gate { color: var(--n300); }
.ink .gate::before, .poster .gate::before { background: var(--human-300); }
.gate-box { border: 1px solid var(--divider); border-left: 3px solid var(--human); background: var(--human-100); padding: var(--s4) var(--s6); font-size: 15px; line-height: 1.6; color: var(--n800); }
.gate-box strong { color: var(--ink); }

/* ---- ledger (systems, in buying order) -------------------------------- */
.ledger { border-top: 2px solid var(--ink); }
.ledger-row { display: grid; grid-template-columns: 36px 64px minmax(0, 1.1fr) minmax(0, 2fr) 32px; gap: var(--s6); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--n300); color: var(--ink); transition: background 160ms var(--ease); }
.ledger-row:hover { background: var(--n200); }
.ledger-row .n { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--n700); }
.ledger-row .tag { padding-top: 3px; }
.ledger-row b { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
.ledger-row span { font-size: 15px; line-height: 1.5; color: var(--n800); }
.ledger-row em { font-style: normal; color: var(--a700); font-size: 18px; transition: transform 220ms var(--ease); justify-self: end; }
.ledger-row:hover em { transform: translateX(4px); }
@media (max-width: 919.98px) {
  .ledger-row { grid-template-columns: 36px 64px minmax(0, 1fr) 24px; gap: var(--s2) var(--s4); }
  .ledger-row span { grid-column: 3; }
  .ledger-row em { grid-row: 1 / span 2; grid-column: 4; align-self: center; }
}
@media (max-width: 599.98px) {
  .ledger-row { grid-template-columns: 36px minmax(0, 1fr) 24px; }
  .ledger-row .tag { grid-column: 2; }
  .ledger-row b, .ledger-row span { grid-column: 2; }
  .ledger-row em { grid-row: 1 / span 3; grid-column: 3; }
}

/* ---- cells (industry grid, menu grid) --------------------------------- */
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: rgba(248, 249, 251, 0.18); border: 1px solid rgba(248, 249, 251, 0.18); }
.cell { display: block; padding: clamp(20px, 2.4vw, 32px); background: var(--ink-deep); color: var(--n100); transition: background 180ms var(--ease); }
.cell h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--s2); }
.cell .pain { font-size: 13.5px; font-weight: 700; color: var(--a300); margin-bottom: var(--s3); }
.cell p { font-size: 14.5px; line-height: 1.55; color: var(--n400); }
.cell:hover { background: var(--ink-raise); }
.cells.on-paper { background: var(--n300); border-color: var(--n300); }
.cells.on-paper .cell { background: var(--paper); color: var(--ink); }
.cells.on-paper .cell .pain { color: var(--a700); }
.cells.on-paper .cell p { color: var(--n800); }
.cells.on-paper .cell:hover { background: var(--surface); }
.cells.on-paper .cell h3 { font-size: 17px; }
.cells.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 919.98px) { .cells.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .cells.three, .cells.two { grid-template-columns: 1fr; } }

/* ---- proof strip (replaces the DPS association strip) ---------------- */
.strip { padding: clamp(32px, 4vw, 52px) 0; background: var(--surface); border-top: 2px solid var(--ink); }
.strip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--n300); border-bottom: 1px solid var(--n300); margin-top: var(--s6); }
.strip-row a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 18px var(--s4); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; border-right: 1px solid var(--n300); transition: background 180ms var(--ease), color 180ms var(--ease); }
.strip-row a::after { content: "\2192"; color: var(--a700); font-weight: 400; transition: transform 220ms var(--ease); }
.strip-row a:hover { background: var(--paper); color: var(--accent); }
.strip-row a:hover::after { transform: translateX(4px); }
.strip-row a:last-child { border-right: 0; }
.strip-note { margin-top: var(--s4); }
@media (max-width: 919.98px) { .strip-row a:nth-child(3n) { border-right: 0; } .strip-row a { border-bottom: 1px solid var(--n300); } }
@media (max-width: 599.98px) { .strip-row { grid-template-columns: 1fr; } .strip-row a { border-right: 0; padding-left: 0; } }

/* ---- faq -------------------------------------------------------------- */
.faq-list { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--n300); }
.faq-item summary { position: relative; cursor: pointer; list-style: none; padding: var(--s6) 44px var(--s6) 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; transition: color 180ms var(--ease); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; line-height: 1; color: var(--accent); }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { color: var(--a700); }
.faq-body { padding: 0 44px var(--s6) 0; max-width: 72ch; }
.faq-body p { font-size: 15px; line-height: 1.62; color: var(--n800); }

/* ---- boxes and cards (used by subpages) ------------------------------- */
.box { border: 2px solid var(--ink); padding: clamp(20px, 2.5vw, 32px); background: var(--paper); color: var(--ink); }
.box.quiet { border-color: var(--divider); }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; gap: var(--s3); border: 2px solid var(--ink); padding: clamp(20px, 2.5vw, 32px); background: var(--paper); color: var(--ink); }
.card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.card p { font-size: 15px; line-height: 1.6; color: var(--n800); }
.card ul { list-style: none; margin: var(--s1) 0 0; padding: 0; border-top: 1px solid var(--n300); }
.card li { font-size: 14px; line-height: 1.45; padding: 9px 0 9px 18px; position: relative; border-bottom: 1px solid var(--n300); color: var(--n800); }
.card li::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; background: var(--a400); }
.card .kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--a700); }
.card .pain { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.card .tag { margin-top: auto; padding-top: var(--s2); }
.card .go { margin-top: auto; padding-top: var(--s2); }
.kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--a700); }
.note { border-left: 3px solid var(--accent); padding: var(--s3) 0 var(--s3) var(--s6); font-size: 15px; line-height: 1.6; color: var(--n800); max-width: 72ch; }
.note strong { color: var(--ink); }
.modules { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.modules span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 9px; border: 1px solid var(--ink); }
.sub-head { margin: clamp(40px, 5vw, 64px) 0 clamp(20px, 2.5vw, 28px); padding-top: var(--s4); border-top: 2px solid var(--ink); }
.sub-head .h-sec-sm { margin-top: var(--s2); }

/* Numbered pipeline (real sequence). */
.pipeline { display: grid; gap: 0; border-top: 2px solid var(--ink); list-style: none; margin: 0; padding: 0; }
.pipe, .pipe-step { display: grid; grid-template-columns: 52px 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--n300); align-items: baseline; }
.pipe .n, .pipe-step .n { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--a700); }
.pipe strong, .pipe-step strong { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.pipe span, .pipe-step span { display: block; font-size: 15px; line-height: 1.55; color: var(--n800); margin-top: 3px; }
.pipe.human .n, .pipe-step.human .n { color: var(--human); }

/* Table of contents on the menu page. */
.toc { display: flex; flex-wrap: wrap; gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--n300); }
.toc a { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; padding: 12px 14px 12px 0; margin-right: 14px; border-bottom: 3px solid transparent; transition: color 180ms var(--ease), border-color 180ms var(--ease); }
.toc a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* One system, one article: kicker and title left, install list right. */
.sol { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); padding: clamp(32px, 4vw, 52px) 0; border-top: 2px solid var(--ink); scroll-margin-top: 90px; }
.sol + .sol { border-top-width: 1px; border-top-color: var(--n300); }
.sol h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.1; margin: var(--s3) 0 var(--s3); }
.sol .pain { font-size: 16px; font-weight: 700; color: var(--ink); max-width: 40ch; }
.sol h3 { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n700); margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 2px solid var(--ink); }
.sol ul + h3, .sol p + h3 { margin-top: var(--s6); }
.sol ul { list-style: none; margin: 0; padding: 0; }
.sol li { font-size: 15px; line-height: 1.5; padding: 9px 0 9px 18px; position: relative; border-bottom: 1px solid var(--n300); color: var(--n800); }
.sol li::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; background: var(--a400); }
.sol > div > p:not(.pain) { font-size: 15px; line-height: 1.6; color: var(--n800); }
.sol .next { margin-top: var(--s6); }
.sol .b { min-height: 48px; font-size: 14px; }
@media (max-width: 919.98px) { .sol { grid-template-columns: 1fr; gap: var(--s6); } }

/* CTA block on subpages. */
.cta { margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.5vw, 44px); border: 2px solid var(--ink); background: var(--surface); display: flex; flex-direction: column; gap: var(--s4); }
.cta h2 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; letter-spacing: -0.025em; max-width: 22ch; }
.cta p { font-size: 16px; color: var(--n800); max-width: 60ch; }

/* ---- forms ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n800); }
.field label .req { font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--n700); }
.field input, .field select, .field textarea, .newsletter-form input[type="email"] {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 2px solid var(--ink); background: #fff; color: var(--ink); font-size: 16px; line-height: 1.3; outline: none;
  appearance: none; -webkit-appearance: none; border-radius: 0;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder, .newsletter-form input::placeholder { color: var(--n600); }
.field textarea { min-height: 120px; resize: vertical; }
.field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2314171d' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field input:focus, .field select:focus, .field textarea:focus, .newsletter-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--a200); }
.field.is-error input, .field.is-error textarea, .field.is-error select, input.is-error, textarea.is-error { border-color: var(--error); }
.row.two { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }
@media (max-width: 599.98px) { .row.two { grid-template-columns: 1fr; } }
.contact-form { display: flex; flex-direction: column; gap: var(--s4); }
.form-status { display: none; font-size: 14px; font-weight: 600; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--a100); color: var(--ink); }
.form-status.is-visible { display: block; }
.form-status.is-error { border-left-color: var(--error); background: color-mix(in srgb, var(--error) 12%, var(--paper)); }
.form-hint { font-size: 13.5px; line-height: 1.5; color: var(--n700); }
.form-hint a { text-decoration: underline; text-underline-offset: 2px; }
.form-actions { align-items: flex-start; }
.form-actions .form-hint { flex: 1 1 18rem; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; max-width: 34rem; }
.newsletter-form input[type="email"] { flex: 1 1 12rem; }
.newsletter-form button { min-height: 50px; padding: 0 18px; border: 2px solid var(--accent); background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 180ms var(--ease), border-color 180ms var(--ease); }
.newsletter-form button:hover { background: var(--a600); border-color: var(--a600); }
.newsletter-form .nl-status { width: 100%; font-size: 13.5px; color: var(--n700); min-height: 1.2em; }
.newsletter-form .nl-status.is-error { color: var(--error); }

/* ---- footer ----------------------------------------------------------- */
.site-footer { border-top: 2px solid var(--ink); background: var(--paper); padding: clamp(40px, 5vw, 64px) 0 104px; }
.footer-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-bottom: clamp(32px, 4vw, 48px); margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 2px solid var(--divider); }
.footer-news h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; letter-spacing: -0.025em; margin-bottom: var(--s2); }
.footer-news p { font-size: 15px; line-height: 1.55; color: var(--n800); max-width: 52ch; }
.footer-news .newsletter-form { justify-self: end; width: 100%; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.footer-col { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.footer-col .head { align-self: stretch; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n700); padding-bottom: var(--s2); border-bottom: 2px solid var(--divider); }
.footer-col > a, .footer-col > span { font-size: 14px; font-weight: 600; color: var(--ink); }
.footer-col > a:hover { color: var(--accent); }
.footer-col .muted { color: var(--n700); font-weight: 500; }
.footer-brand { position: relative; padding-left: 15px; }
.footer-brand::before { content: ""; position: absolute; left: 0; top: 2px; width: 4px; height: 32px; background: var(--accent); }
.footer-mark { font-weight: 900; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.footer-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--n700); margin-top: var(--s2); }
.footer-tagline { font-size: 14px; color: var(--n700); margin-top: var(--s3); max-width: 42ch; }
.footer-bottom { border-top: 2px solid var(--divider); margin-top: clamp(32px, 4vw, 56px); padding-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: space-between; }
.footer-bottom span { font-size: 12px; color: var(--n700); line-height: 1.5; }
.footer-bottom span:first-child { max-width: 720px; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 919.98px) {
  .footer-news { grid-template-columns: 1fr; }
  .footer-news .newsletter-form { justify-self: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 519.98px) { .footer-grid { grid-template-columns: 1fr; } .footer-col .head { font-size: 12px; letter-spacing: 0.12em; } }

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 919.98px) {
  .split, .hero-grid { grid-template-columns: 1fr; gap: var(--s8); }
  /* Stacked layout: the copy spans the full width, so the scrim no longer clears to the right. */
  .hero::before { background: linear-gradient(180deg, rgba(15, 18, 24, 0.94) 0%, rgba(15, 18, 24, 0.90) 62%, rgba(15, 18, 24, 0.70) 100%); }
  .hero-copy .h-hero { max-width: none; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-cta .b { width: auto; }
}
@media (max-width: 599.98px) {
  .eyebrow, .rule-label, .section-head .side { font-size: 12px; letter-spacing: 0.18em; }
  .footer-tag, .brand-sub { font-size: 12px; letter-spacing: 0.16em; }
  .b, .btn { white-space: normal; text-align: left; }
  .btn-row .b, .actions .b, .next .b, .cta-row .b, .form-actions .b { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .path-card:hover, .flux-chat-toggle:hover { transform: none; }
}
@media print {
  .site-header, header.nav, .site-footer, .flux-chat-root, .hero-cta, .header-cta, .nav-toggle, .cta, .poster, .footer-news { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .hero, .ink { background: #fff !important; color: #000 !important; border: 0; }
  .hero::before, .hero::after, .ink::before { display: none; }
  .hero .lede, .hero .eyebrow, .ink .body, .ink .lede { color: #000 !important; }
  .hero-media { display: none; }
  .box, .card, .path-card, .sheet-card { border: 1px solid #000; box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}