/* Worksmith.tech — merged final
   Palette from the 2026 Capabilities Portfolio: ink, paper, ember.
   Ember is reserved for loss, attention and the one action on each screen.
   Type: Outfit (text + display) · JetBrains Mono (labels, data) · Poppins 700 (wordmark only). All self-hosted. */

@font-face { font-family: "Outfit"; src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Matte black palette — updated 2026-09 */
  --ink: #121212;
  --ink-deep: #0a0a0a;
  --ink-foot: #080808;
  --ink-card: #1a1a1a;
  --line-d: #2c2c2c;
  --line-d-soft: rgba(243, 238, 230, 0.10);
  --paper: #faf8f3;
  --paper-2: #f2eee6;
  --paper-3: #e9e3d8;
  --white: #fffdf9;
  --line-p: #dcd5c8;
  --line-p-soft: #e8e2d7;
  --ash: #8a847b;          /* labels on ink */
  --ash-p: #6f6961;        /* labels on paper (AA at small sizes) */
  --text-d: #f3eee6;
  --muted-d: #aca498;
  --text-p: #171412;
  --muted-p: #5c574f;
  --ember: #e5602f;
  --ember-hi: #f3743f;
  --ember-ink: #b3451b;    /* ember for small text on paper (AA) */
  --ember-wash: rgba(229, 96, 47, 0.09);

  --f-sans: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-mark: "Poppins", "Outfit", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1320px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #121212; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text-d);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }
button { font: inherit; }
figure { margin: 0; }
table { border-collapse: collapse; }
kbd { font: inherit; }
::selection { background: var(--ember); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.mono { font-family: var(--f-mono); font-weight: 400; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ember); color: var(--ink); padding: 10px 14px; text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
}

/* ---------- layers ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100vh; z-index: 0; display: block; background: var(--ink); }
.shade {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23, 20, 18, 0.92) 0%, rgba(23, 20, 18, 0.78) 32%, rgba(23, 20, 18, 0) 58%),
    linear-gradient(0deg, rgba(23, 20, 18, 0.65) 0%, rgba(23, 20, 18, 0) 24%);
}
.no-webgl #scene { display: none; }
.no-webgl .shade {
  background:
    radial-gradient(55% 50% at 74% 44%, #2b2420 0%, rgba(23, 20, 18, 0) 72%),
    radial-gradient(circle at center, rgba(243, 238, 230, 0.06) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--ink);
}
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main { position: relative; z-index: 2; overflow-x: clip; }

/* ---------- type primitives ---------- */
.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow .mono { font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted-d); text-transform: uppercase; }
.paper .eyebrow { color: var(--ember-ink); }
.paper .eyebrow .mono { color: var(--muted-p); }

.display {
  font-size: clamp(3rem, 7.2vw, 6.8rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
  font-weight: 600;
}
.display .ln { display: block; overflow: hidden; padding-bottom: 0.07em; margin-bottom: -0.07em; }
.display .ln > span { display: block; animation: rise 1.05s var(--ease) both; }
.display .ln:nth-child(2) > span { animation-delay: 0.07s; }
.display .ln:nth-child(3) > span { animation-delay: 0.14s; }
.display em { font-style: normal; color: var(--ember); }
@keyframes rise { from { transform: translateY(104%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.032em; }
.lede { font-size: clamp(1.06rem, 1.3vw, 1.26rem); line-height: 1.55; color: var(--muted-d); max-width: 34em; }
.body-d { color: var(--muted-d); font-size: 1.06rem; max-width: 36em; }
.sub { font-size: 1.1rem; color: var(--muted-p); max-width: 40em; }
.ink .sub { color: var(--muted-d); }

/* ---------- buttons + links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 50px; padding: 0 22px;
  font: 500 15px/1 var(--f-sans); letter-spacing: 0.005em;
  text-decoration: none; border-radius: 2px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.arr { display: inline-block; transition: transform 0.25s var(--ease); }
.btn:hover .arr, .link-arrow:hover .arr { transform: translateX(4px); }
.btn:hover .arr-back { transform: translateX(-4px); }
.btn:hover .arr-down, .link-arrow:hover .arr-down { transform: translateY(3px); }
.btn-ember { background: var(--ember); color: var(--ink); }
.btn-ember:hover { background: var(--ember-hi); }
.btn-ghost { border-color: rgba(243, 238, 230, 0.26); color: var(--text-d); }
.btn-ghost:hover { border-color: var(--text-d); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%;
  font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--text-d);
  padding-bottom: 4px; border-bottom: 1px solid rgba(243, 238, 230, 0.3); transition: border-color 0.2s;
}
.link-arrow:hover { border-color: var(--ember); }
.paper .link-arrow, .spec .link-arrow { color: var(--text-p); border-bottom-color: rgba(23, 20, 18, 0.3); }
.paper .link-arrow:hover { border-color: var(--ember-ink); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--nav-h);
  color: var(--text-d); border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s, color 0.35s;
}
.nav.is-scrolled { background: rgba(23, 20, 18, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(243, 238, 230, 0.08); }
.nav.is-paper { background: rgba(250, 248, 243, 0.9); color: var(--text-p); border-bottom-color: var(--line-p); }
.nav.is-drop, .nav.is-open { background: var(--ink); color: var(--text-d); border-bottom-color: var(--line-d); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.mark {
  width: 34px; height: 34px; border-radius: 9px; background: #0f0d0c; border: 1px solid #2e2925;
  display: grid; place-items: center; flex: none;
  font-family: var(--f-mark); font-weight: 700; font-size: 17px; line-height: 1; color: #fff; letter-spacing: -0.02em;
}
.mark i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); margin-left: 1px; }
.word { font-family: var(--f-mark); font-weight: 700; font-size: 21px; letter-spacing: -0.025em; line-height: 1; }
.word sup { font-size: 11px; color: var(--ember); letter-spacing: 0; vertical-align: top; position: relative; top: -3px; margin-left: 1px; }
.nav-links { display: flex; align-items: center; gap: clamp(24px, 3.2vw, 52px); }
.nav-links > a, .drop-btn {
  position: relative; font-size: 14.5px; font-weight: 400; text-decoration: none; opacity: 0.74; transition: opacity 0.2s;
  background: none; border: 0; color: inherit; cursor: pointer; padding: 8px 0;
}
.nav-links > a:hover, .drop-btn:hover, .drop-btn[aria-expanded="true"] { opacity: 1; }
.nav-links > a[aria-current], .drop-btn[data-current] { opacity: 1; }
.nav-links > a[aria-current]::after, .drop-btn[data-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ember); }
.drop-btn { display: inline-flex; align-items: center; gap: 7px; }
.chev { width: 7px; height: 7px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease); }
.drop-btn[aria-expanded="true"] .chev { transform: translateY(1px) rotate(-135deg); }
.only-menu { display: none; }
.nav-end { display: flex; align-items: center; gap: 16px; }
.nav .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 0; color: inherit; font-size: 14px; font-weight: 500; cursor: pointer; padding: 10px 0; }
.bars { width: 22px; height: 10px; position: relative; display: inline-block; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.25s var(--ease); }
.bars::before { top: 0; }
.bars::after { bottom: 0; }
.nav.is-open .bars::before { transform: translateY(4.25px) rotate(45deg); }
.nav.is-open .bars::after { transform: translateY(-4.25px) rotate(-45deg); }

.mega {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--ink); color: var(--text-d);
  border-bottom: 1px solid var(--line-d);
  padding-block: 36px 44px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  animation: fade-up 0.3s var(--ease) both;
}
.mega[hidden] { display: none; }
.mega-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr); gap: clamp(24px, 3vw, 44px); }
.mega-v { display: grid; gap: 6px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line-d); text-decoration: none; }
.mega-v .mono { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); }
.mega-v strong { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; transition: color 0.2s; }
.mega-v:hover strong { color: var(--ember); }
.mega-col ul a { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 8px 0; font-size: 15px; font-weight: 300; color: var(--muted-d); text-decoration: none; transition: color 0.2s; }
.mega-col ul a:hover { color: var(--text-d); }
.mega-col ul .mono { font-size: 11.5px; color: var(--ember); padding-top: 3px; }
.mega-aside { border-left: 1px solid var(--line-d); padding-left: clamp(20px, 2.4vw, 36px); display: grid; gap: 14px; align-content: start; color: var(--muted-d); font-size: 15px; }
.mega-aside .mono { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }

@media (max-width: 1060px) {
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 28px; background: var(--ink); color: var(--text-d);
    border-bottom: 1px solid var(--line-d);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
  }
  .nav.is-open .nav-links { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .nav-links > a, .drop-btn { width: 100%; justify-content: space-between; text-align: left; padding: 15px 0; border-bottom: 1px solid var(--line-d); font-size: 18px; opacity: 1; }
  .nav-links > a[aria-current]::after, .drop-btn[data-current]::after { left: auto; right: 0; top: 50%; bottom: auto; width: 6px; height: 6px; border-radius: 50%; }
  .drop-btn[data-current]::after { right: 24px; }
  .only-menu { display: block; }
  .menu-btn { display: inline-flex; }
  .mega { position: static; padding: 4px 0 12px; border: 0; box-shadow: none; animation: none; background: transparent; }
  .mega-inner { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0; }
  .mega-v { padding: 12px 0 6px; margin: 0; border: 0; }
  .mega-v strong { font-size: 1.05rem; }
  .mega-col ul a { padding: 6px 0; }
  .mega-aside { display: none; }
}
@media (max-width: 560px) { .nav-cta { display: none; } }

/* ---------- figure HUD + gap annotations ---------- */
.hud {
  position: fixed; right: var(--gutter); bottom: 26px; z-index: 3;
  display: grid; justify-items: end; gap: 10px; max-width: min(560px, 46vw);
  pointer-events: none; opacity: 0; transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.hud-on .hud { opacity: 1; transform: none; }
.no-webgl .hud, .no-webgl .findings { display: none; }
.fig { display: flex; gap: 12px; align-items: baseline; font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--muted-d); text-align: right; }
.fig b { color: var(--ember); font-weight: 500; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; font-family: var(--f-mono); font-size: 11px; color: var(--ash); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend-note { padding-left: 18px; border-left: 1px solid var(--line-d); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-rec { background: var(--text-d); box-shadow: 0 0 8px rgba(243, 238, 230, 0.55); }
.dot-loss { background: var(--ember); box-shadow: 0 0 8px rgba(229, 96, 47, 0.7); }

.findings { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } /* under main: light sections cover the gap labels */
.tag { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.tag-in {
  position: absolute; left: 0; bottom: 14px;
  display: grid; gap: 2px; padding: 0 0 38px 12px;
  border-left: 1px solid rgba(229, 96, 47, 0.8); white-space: nowrap;
}
.tag-in b { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); }
.tag-in span { font-size: 15px; font-weight: 400; color: var(--text-d); }
.tag-in small { font-family: var(--f-mono); font-size: 10.5px; color: var(--ash); }
@media (max-width: 860px) {
  .hud { z-index: 1; left: var(--gutter); right: var(--gutter); max-width: none; justify-items: start; bottom: 16px; }
  .fig { text-align: left; font-size: 11px; }
  .legend { justify-content: flex-start; font-size: 10px; gap: 4px 12px; }
  .legend-note { padding-left: 12px; }
}

/* ---------- home: hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 40px);
}
.hero-copy { display: grid; gap: 26px; padding-bottom: clamp(36px, 7vh, 88px); }
.hero-copy > * { max-width: 800px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sequence {
  display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3.4vw, 52px);
  max-width: 640px; padding-block: 20px 30px; border-top: 1px solid rgba(243, 238, 230, 0.12);
}
.sequence div { display: grid; gap: 3px; }
.sequence dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.sequence dd { font-size: 15px; font-weight: 400; color: var(--text-d); }

/* ---------- home: approach ---------- */
.approach { position: relative; padding-block: clamp(64px, 9vh, 100px) clamp(40px, 6vh, 72px); }
.col-text { display: grid; gap: 24px; max-width: 620px; }
.principles { margin-top: clamp(36px, 5vh, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); max-width: 760px; }
.principles li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line-d-soft); }
.principles .mono { font-size: 11.5px; color: var(--ember); }
.principles h3 { font-size: 1.18rem; font-weight: 500; letter-spacing: -0.01em; }
.principles p { font-size: 0.97rem; line-height: 1.55; color: var(--muted-d); }
.principles-lg { max-width: none; margin-top: 0; }
.principles-lg h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -0.025em; }
.principles-lg p { font-size: 1.04rem; max-width: 30em; }

/* ---------- home: verticals ---------- */
.vertical { position: relative; min-height: auto; padding-block: clamp(56px, 8vh, 88px); }
.v-sticky {
  position: relative; min-height: auto; max-width: 540px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding-block: 0;
}
.v-title { font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 0.97; letter-spacing: -0.042em; }
.v-lede { font-size: 1.1rem; line-height: 1.55; color: var(--muted-d); }
.svc-list { display: grid; margin-top: 6px; border-bottom: 1px solid var(--line-d-soft); }
.svc-list li { border-top: 1px solid var(--line-d-soft); }
.svc-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; padding-block: 15px; text-decoration: none; }
.svc-list .mono { font-size: 12px; color: var(--ember); padding-top: 5px; }
.svc-list h3 { font-size: 1.07rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1.35; transition: color 0.2s; }
.svc-list p { font-size: 0.94rem; line-height: 1.5; color: var(--muted-d); margin-top: 2px; }
.svc-list .arr { padding-top: 2px; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s, transform 0.25s var(--ease); color: var(--ember); }
.svc-list a:hover h3 { color: var(--ember); }
.svc-list a:hover .arr, .svc-list a:focus-visible .arr { opacity: 1; transform: none; }
@media (max-height: 800px) and (min-width: 861px) { .svc-list p { display: none; } .svc-list a { padding-block: 11px; } }

/* ---------- order ---------- */
.order { position: relative; padding-block: clamp(56px, 8vh, 88px); }
.order-list { margin-top: 28px; max-width: 700px; border-bottom: 1px solid var(--line-d-soft); counter-reset: ord; }
.order-list li { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding-block: 22px; border-top: 1px solid var(--line-d-soft); }
.order-list .k { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); padding-top: 5px; }
.ol-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 4px; text-decoration: none; }
.ol-v strong { font-size: 1.12rem; font-weight: 500; }
.ol-v span { font-size: 1.12rem; font-weight: 300; color: var(--muted-d); transition: color 0.2s; }
.ol-v:hover span { color: var(--ember); }
.order-list p { font-size: 0.98rem; color: var(--muted-d); }
.order-list li.is-current::before { content: ""; position: absolute; left: -18px; top: 28px; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 5px rgba(229, 96, 47, 0.16); }
.order-list li.is-current .k { color: var(--ember); }
.order-list li.is-current .ol-v span { color: var(--text-d); }
.ink .order-list { margin-top: 0; }
.note { margin-top: 40px; max-width: 700px; padding-left: 20px; border-left: 2px solid var(--ember); color: var(--muted-d); }
.note strong { color: var(--text-d); font-weight: 500; }

/* ---------- surfaces ---------- */
.paper { position: relative; background: var(--paper); color: var(--text-p); padding-block: clamp(60px, 9vh, 100px); }
.ink { position: relative; background: var(--ink-deep); color: var(--text-d); padding-block: clamp(60px, 9vh, 100px); }
.sec-head { display: grid; gap: 20px; max-width: 860px; margin-bottom: clamp(36px, 5vh, 56px); }
.paper :focus-visible { outline-color: var(--text-p); }

/* services index (home) */
.svc-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px 40px; flex-wrap: wrap; margin-bottom: clamp(36px, 6vh, 60px); }
.svc-top .sec-head { margin-bottom: 0; max-width: 780px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button {
  height: 38px; padding: 0 14px; border-radius: 2px; cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--muted-p); background: transparent; border: 1px solid var(--line-p);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.filters button:hover { color: var(--text-p); border-color: var(--text-p); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.svc-index { border-bottom: 1px solid var(--line-p); }
.svc { border-top: 1px solid var(--line-p); }
.svc-row {
  appearance: none; background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
  width: 100%; padding: 26px 0;
  display: grid; grid-template-columns: 52px minmax(0, 1.05fr) 104px minmax(0, 1.55fr) 24px; gap: 24px; align-items: baseline;
}
.svc-row:focus-visible { outline: 2px solid var(--text-p); outline-offset: -2px; }
.svc-row .n { font-size: 13px; color: var(--ember-ink); }
.svc-row .name { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.18; transition: color 0.2s; }
.svc-row:hover .name { color: #7a3417; }
.svc-row .v { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); }
.svc-row .sum { font-size: 1rem; line-height: 1.5; color: var(--muted-p); }
.plus { position: relative; width: 14px; height: 14px; align-self: center; justify-self: end; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--text-p); transition: transform 0.3s var(--ease); }
.plus::before { left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; }
.plus::after { top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -0.75px; }
.svc.is-open .plus::after { transform: scaleY(0); }
.svc-body { padding: 4px 0 44px calc(52px + 24px); }
.svc-body:not([hidden]) { animation: fade-up 0.4s var(--ease) both; }
.svc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.svc-body h4 { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-p); margin-bottom: 12px; }
.ticks li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid var(--line-p); font-size: 0.97rem; line-height: 1.5; color: var(--muted-p); }
.ticks li::before { content: ""; position: absolute; left: 1px; top: 19px; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); }
.ticks b, .steps b, .gain b { color: var(--text-p); font-weight: 500; }
.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-p); font-size: 0.97rem; line-height: 1.5; color: var(--muted-p); }
.steps .mono { font-size: 12px; color: var(--ember-ink); padding-top: 3px; }
.gain > p { font-size: 1.02rem; line-height: 1.6; color: var(--text-p); }
.gain > p + p { margin-top: 12px; }
.gain .link-arrow { margin-top: 26px; }
.receive div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-p); }
.receive dt { font-weight: 500; font-size: 0.95rem; }
.receive dd { font-size: 0.95rem; line-height: 1.5; color: var(--muted-p); }
.fit { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--ember); font-size: 0.96rem; color: var(--muted-p); }
.fit b { color: var(--text-p); font-weight: 500; }
.svc[hidden] { display: none; }

/* method */
.phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.phases li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 26px 0 0; border-top: 1px solid var(--line-d); }
.phases li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--text-d); }
.phases li.exit::before { background: var(--ember); box-shadow: 0 0 0 5px rgba(229, 96, 47, 0.16); }
.phases .ph { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.phases h3 { font-size: 1.24rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.phases .term { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted-d); }
.phases .desc { font-size: 0.95rem; line-height: 1.55; color: var(--muted-d); }
.exit-tag { margin-top: auto; padding-top: 22px; display: flex; align-items: flex-end; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember); }
.exit-tag::before { content: ""; width: 16px; height: 16px; border-left: 1px dashed var(--ember); border-bottom: 1px dashed var(--ember); }
.pull { margin-top: clamp(64px, 10vh, 110px); padding-top: 36px; border-top: 1px solid var(--line-d); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.pull > div { display: grid; gap: 22px; }
.pull.is-first { margin-top: 0; }
.pull .quote { font-size: clamp(1.3rem, 2.1vw, 1.9rem); line-height: 1.34; letter-spacing: -0.015em; font-weight: 400; color: var(--text-d); text-wrap: pretty; }

/* pricing */
.pricing-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(32px, 6vw, 96px); align-items: start; }
.pricing-grid > .sec-head { grid-column: 1 / -1; }
.pricing-grid .link-arrow { margin-top: 28px; }
.figure-25 { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 18px; padding-top: 22px; border-top: 2px solid var(--text-p); }
.figure-25 .cap { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-p); }
.figure-25 .num { font-size: clamp(6rem, 12vw, 11.5rem); font-weight: 600; line-height: 0.8; letter-spacing: -0.065em; font-variant-numeric: tabular-nums; margin-block: 6px 4px; }
.figure-25 .num span { color: var(--ember); letter-spacing: -0.02em; }
.figure-25 p:last-child { color: var(--muted-p); max-width: 26em; }
.rows { border-bottom: 1px solid var(--line-p); }
.rows > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; padding-block: 20px; border-top: 1px solid var(--line-p); }
.rows > div.is-hot { background: linear-gradient(90deg, var(--ember-wash), transparent 80%); box-shadow: inset 2px 0 0 var(--ember); padding-left: 16px; }
.rows dt { font-size: 0.98rem; font-weight: 500; }
.rows dd { font-size: 1rem; line-height: 1.55; color: var(--muted-p); }
.two-up { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 8vh, 80px); }
.two-up article { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 36px); background: var(--white); border: 1px solid var(--line-p); }
.two-up .eyebrow::before { display: none; }
.two-up h2 { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; }
.two-up p:last-child { color: var(--muted-p); }

/* data & limits */
.terms { padding-top: 0; }
.rule-top { height: 1px; background: var(--line-p); margin-bottom: clamp(88px, 13vh, 150px); }
.terms:not(#terms) { padding-top: clamp(96px, 14vh, 160px); }
.data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.data-grid > div { display: grid; gap: 8px; align-content: start; padding-block: 22px 30px; border-top: 1px solid var(--line-p); }
.data-grid dt { display: grid; gap: 10px; font-size: 1.12rem; font-weight: 500; letter-spacing: -0.01em; }
.data-grid dt .mono { font-size: 11px; color: var(--ember-ink); font-weight: 500; }
.data-grid dd { font-size: 0.98rem; line-height: 1.55; color: var(--muted-p); }
.limits { margin-top: clamp(80px, 12vh, 140px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
#terms .limits { margin-top: 0; }
.limits > div { display: grid; gap: 22px; }
.h-limits { font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 0.98; letter-spacing: -0.04em; }
.nots { border-bottom: 1px solid var(--line-p); }
.nots li { position: relative; padding: 20px 0 20px 40px; border-top: 1px solid var(--line-p); font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.4; font-weight: 400; letter-spacing: -0.01em; }
.nots li::before { content: ""; position: absolute; left: 2px; top: 31px; width: 18px; height: 1.5px; background: var(--ember); }
.nots li span { display: block; margin-top: 5px; font-size: 0.96rem; font-weight: 300; letter-spacing: 0; color: var(--muted-p); line-height: 1.5; }
.term-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(48px, 7vh, 72px); }
.term-chips a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line-p); font-size: 12px; letter-spacing: 0.04em; color: var(--muted-p); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
.term-chips a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); }
.term-chips a:hover { color: var(--text-p); border-color: var(--text-p); }
.today { margin-top: clamp(56px, 9vh, 96px); max-width: 820px; padding-left: 22px; border-left: 2px solid var(--ember); font-size: 1.05rem; color: var(--muted-p); }
.today strong { color: var(--text-p); font-weight: 500; }
.paper > .wrap > .today:only-child { margin-top: 0; }

/* ---------- contact ---------- */
.contact { position: relative; padding-block: clamp(64px, 9vh, 100px) clamp(48px, 7vh, 72px); }
.contact.is-page { padding-top: calc(var(--nav-h) + 48px); min-height: auto; }
.contact.is-page .crumbs { position: absolute; top: calc(var(--nav-h) + 24px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-copy { display: grid; gap: 26px; }
.display-2 { font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: 0.96; letter-spacing: -0.045em; }
.people { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; max-width: 620px; }
.people > div { display: grid; gap: 4px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line-d-soft); }
.people dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.people dd { display: grid; gap: 2px; font-size: 1rem; font-weight: 400; }
.people .role { font-size: 0.92rem; font-weight: 300; color: var(--muted-d); }
.people a { width: max-content; text-decoration: none; border-bottom: 1px solid rgba(243, 238, 230, 0.28); transition: border-color 0.2s; }
.people a:hover { border-color: var(--ember); }
.next-steps { margin-top: 12px; max-width: 620px; border-bottom: 1px solid var(--line-d-soft); }
.next-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 14px 0; border-top: 1px solid var(--line-d-soft); color: var(--muted-d); }
.next-steps .mono { font-size: 11.5px; color: var(--ember); padding-top: 4px; }

.brief { display: grid; gap: 22px; padding: clamp(24px, 3vw, 38px); background: rgba(17, 15, 13, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-d); }
.brief-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-d); font-family: var(--f-mono); }
.brief-head p { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.brief-head span { font-size: 11px; color: var(--ash); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.field > label, .field > legend { padding: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-d); }
.field input, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--f-sans); color: var(--text-d);
  background: transparent; border: 0; border-bottom: 1px solid var(--line-d); border-radius: 0;
  padding: 8px 0 10px; transition: border-color 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: #7a736a; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ember); }
.field textarea { resize: vertical; min-height: 84px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 2px;
  font-size: 13.5px; font-weight: 400; color: var(--muted-d); border: 1px solid var(--line-d); cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}
.chip span:hover { color: var(--text-d); border-color: var(--muted-d); }
.chip input:checked + span { background: var(--text-d); border-color: var(--text-d); color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
.brief .btn { width: 100%; justify-content: space-between; }
.status { font-size: 0.88rem; color: var(--muted-d); min-height: 1.4em; }
.status.is-error { color: #ff9b76; }
.status.is-ok { color: var(--text-d); }

/* ---------- inner pages: hero ---------- */
.page-hero {
  position: relative; min-height: 55vh; min-height: 55svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: calc(var(--nav-h) + 48px) clamp(36px, 6vh, 64px);
}
.page-hero.is-vertical { min-height: 65vh; min-height: 65svh; }
.page-hero.is-service { min-height: 60vh; min-height: 60svh; }
.page-hero > .wrap:first-child { position: absolute; top: calc(var(--nav-h) + 24px); left: 0; right: 0; }
.crumbs { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; color: var(--line-d); }
.crumbs a { text-decoration: none; transition: color 0.2s; }
.crumbs a:hover { color: var(--text-d); }
.crumbs [aria-current] { color: var(--muted-d); }
.ph-copy { display: grid; gap: 24px; justify-items: start; }
.ph-copy > * { max-width: 820px; }
.display--page { font-size: clamp(2.5rem, 5.2vw, 5rem); line-height: 0.97; letter-spacing: -0.042em; }
.display--service { font-size: clamp(2.8rem, 6.4vw, 6.2rem); }
.display--vertical { font-size: clamp(3.2rem, 8.6vw, 8.4rem); line-height: 0.9; }
.display--vertical .ln > span, .display--service .ln > span, .display--page .ln > span { animation-duration: 1.15s; }
.ph-copy .lede, .ph-copy .actions, .ph-copy .badge-n { animation: fade-up 0.9s var(--ease) 0.18s both; }
.badge-n {
  display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding-inline: 12px;
  border: 1px solid var(--ember); color: var(--ember);
  font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: rgba(23, 20, 18, 0.55);
}

/* services page */
.v-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px); }
.v-col { display: grid; gap: 16px; align-content: start; padding-top: 24px; border-top: 2px solid var(--text-p); }
.v-col h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing: -0.035em; line-height: 1.02; }
.v-col h2 a { text-decoration: none; transition: color 0.2s; }
.v-col h2 a:hover { color: var(--ember-ink); }
.v-sum { color: var(--muted-p); min-height: 5em; }
.v-svcs { margin-top: 8px; border-bottom: 1px solid var(--line-p); }
.v-svcs li { padding: 14px 0 16px; border-top: 1px solid var(--line-p); }
.v-svcs a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 6px; align-items: baseline; font-weight: 500; font-size: 1.08rem; letter-spacing: -0.012em; text-decoration: none; }
.v-svcs .mono { font-size: 12px; color: var(--ember-ink); }
.v-svcs .arr { opacity: 0.4; }
.v-svcs a:hover .t { color: #7a3417; }
.v-svcs a:hover .arr { opacity: 1; }
.v-svcs p { margin: 4px 0 0 40px; font-size: 0.95rem; color: var(--muted-p); }

/* vertical page: service rows */
.vrows { border-bottom: 1px solid var(--line-p); }
.vrows li { border-top: 1px solid var(--line-p); }
.vrows a {
  display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.2fr) 80px; gap: 24px; align-items: baseline;
  padding: clamp(26px, 4vh, 40px) 0; text-decoration: none;
  transition: background-color 0.3s, padding 0.35s var(--ease);
}
.vrows .n { font-size: 13px; color: var(--ember-ink); }
.vrows .name { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; transition: color 0.2s; }
.vrows .sum { color: var(--muted-p); max-width: 34em; }
.vrows .go { justify-self: end; font-size: 14px; font-weight: 500; opacity: 0.5; transition: opacity 0.2s; }
.vrows a:hover { background: var(--paper-2); padding-inline: 18px; }
.vrows a:hover .name { color: #7a3417; }
.vrows a:hover .go { opacity: 1; }
.vrows a:hover .arr { transform: translateX(4px); }

/* service page */
.svc-page { padding-top: clamp(64px, 10vh, 110px); }
.svc-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.svc-aside { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; gap: 12px; }
.aside-card { padding: 22px; border: 1px solid var(--line-p); background: var(--white); }
.aside-card > .mono { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); }
.aside-v { display: block; margin: 8px 0 14px; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.aside-v:hover { color: #7a3417; }
.aside-card ul { border-top: 1px solid var(--line-p); }
.aside-card li a { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--line-p-soft); font-size: 0.96rem; color: var(--muted-p); text-decoration: none; transition: color 0.2s; }
.aside-card li a .mono { font-size: 11.5px; color: var(--ember-ink); padding-top: 3px; }
.aside-card li a:hover { color: var(--text-p); }
.aside-card li a[aria-current] { color: var(--text-p); font-weight: 500; box-shadow: inset 2px 0 0 var(--ember); padding-left: 12px; grid-template-columns: 30px minmax(0, 1fr); }
.aside-card.is-ink { background: var(--ink); border-color: var(--ink); color: var(--muted-d); display: grid; gap: 14px; }
.aside-card.is-ink > .mono { color: var(--ember); }
.aside-card.is-ink .btn { width: 100%; justify-content: space-between; height: 44px; }
.svc-main { min-width: 0; display: grid; gap: clamp(56px, 8vh, 88px); }
.blk-h { font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-ink); padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1.5px solid var(--text-p); }
.ticks-lg li { font-size: 1.04rem; padding-block: 14px; }
.ticks-lg li::before { top: 24px; }
.ticks-lg.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.receive-lg div { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding-block: 18px; }
.receive-lg dt { font-size: 1.04rem; }
.receive-lg dd { font-size: 1.02rem; }
.receive-lg div:first-child { border-top: 0; }
.stepline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.stepline li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ember); }
.stepline .mono { font-size: 11.5px; color: var(--ash-p); }
.stepline b { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.015em; }
.stepline p { font-size: 0.93rem; line-height: 1.55; color: var(--muted-p); }
.gain-ink { background: var(--ink); color: var(--muted-d); padding: clamp(28px, 4vw, 52px); display: grid; gap: 14px; position: relative; overflow: hidden; }
.gain-ink .eyebrow { margin-bottom: 6px; }
.gain-ink p:not(.eyebrow) { max-width: 44em; font-size: 1.05rem; }
.gain-ink p:nth-of-type(2) { color: var(--text-d); font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; letter-spacing: -0.01em; font-weight: 400; }
.gain-ink strong, .gain-ink em { color: var(--text-d); font-weight: 500; }
.gain-ink::after { content: "W."; position: absolute; right: -0.04em; bottom: -0.32em; font: 700 15rem/1 var(--f-mark); letter-spacing: -0.06em; color: rgba(243, 238, 230, 0.03); pointer-events: none; }
.fit-lg { padding-left: 22px; border-left: 2px solid var(--ember); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--muted-p); max-width: 46em; }
.fit-lg b { color: var(--text-p); font-weight: 500; }

/* approach page */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.ledger { border-top: 2px solid var(--text-p); }
.ledger-cap { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-p); padding: 12px 0 0; }
.ledger-head, .ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 7rem; gap: 16px; align-items: center; }
.ledger-head { padding: 12px 0; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-p); border-bottom: 1px solid var(--line-p); }
.ledger-head span:last-child, .ledger-row span:last-child { justify-self: end; }
.ledger-row { padding: 20px 0; border-bottom: 1px solid var(--line-p); font-size: 1.16rem; font-weight: 400; letter-spacing: -0.012em; }
.ledger-row .mono { font-size: 11.5px; color: var(--ash-p); }
.ledger-row .ok { color: var(--muted-p); }
.ledger-row.is-loss { color: var(--ember-ink); border-bottom: 2px solid var(--text-p); }
.ledger-row .loss { color: var(--ink); background: var(--ember); padding: 5px 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.js-ready .ledger-row { opacity: 0; transform: translateX(-10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--d) * 0.28s + 0.15s); }
.js-ready .ledger.is-run .ledger-row { opacity: 1; transform: none; }
.js-ready .ledger-row.is-loss { transition-delay: 1.2s; }
.prose { display: grid; gap: 20px; }
.prose .lead { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 400; letter-spacing: -0.028em; line-height: 1.18; }
.prose p:not(.lead):not(.eyebrow) { color: var(--muted-p); font-size: 1.08rem; max-width: 36em; }

/* how we work page */
.timeline { border-top: 1.5px solid var(--text-p); }
.timeline li { display: grid; grid-template-columns: clamp(96px, 16vw, 220px) minmax(0, 1fr); gap: 24px; padding: clamp(32px, 5vh, 52px) 0; border-bottom: 1px solid var(--line-p); }
.tl-n { font-size: clamp(3rem, 7vw, 6rem); font-weight: 300; line-height: 0.82; letter-spacing: -0.06em; color: #c6bdb0; font-variant-numeric: tabular-nums; }
.timeline li.is-exit .tl-n { color: var(--ember); }
.tl-body { display: grid; gap: 12px; max-width: 44em; justify-items: start; }
.tl-body h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-tags .mono { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--line-p); color: var(--muted-p); }
.tl-tags .exit { border-color: var(--ember-ink); color: var(--ember-ink); }
.tl-body p:not(.tl-tags) { font-size: 1.08rem; color: var(--muted-p); }
.tl-body .link-arrow { margin-top: 6px; }

/* ---------- specimens (service pages) ---------- */
.spec { background: var(--white); border: 1px solid var(--line-p); padding: clamp(20px, 3vw, 36px); display: grid; gap: 22px; box-shadow: 0 1px 0 var(--line-p), 0 30px 60px -44px rgba(23, 20, 18, 0.35); }
.spec-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line-p); }
.spec-no { font-size: 11.5px; color: var(--ember-ink); font-weight: 500; }
.spec-title { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.012em; margin-right: auto; }
.stamp { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-ink); border: 1px solid currentColor; padding: 4px 7px; }
.spec-foot { font-size: 0.93rem; color: var(--muted-p); max-width: 52em; }
.spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec table { width: 100%; min-width: 760px; font-size: 0.9rem; }
.spec th { text-align: left; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); padding: 0 12px 10px 0; border-bottom: 1.5px solid var(--text-p); white-space: nowrap; }
.spec td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-p-soft); vertical-align: top; color: var(--muted-p); line-height: 1.4; }
.spec td b { color: var(--text-p); font-weight: 500; }
.spec td.mono { font-size: 12px; color: var(--text-p); white-space: nowrap; }
.spec .r, .spec .amt { text-align: right; }
.spec .amt { color: var(--text-p) !important; letter-spacing: 0.02em; }
.spec .was { text-decoration: line-through; text-decoration-color: rgba(179, 69, 27, 0.6); color: var(--ash-p) !important; }
.conf { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--line-p); color: var(--muted-p); }
.conf.is-high { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.conf.is-hold { border-color: var(--ember-ink); color: var(--ember-ink); background: var(--ember-wash); }

.chain { display: flex; flex-wrap: wrap; gap: 0; counter-reset: ch; }
.chain li { counter-increment: ch; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); padding: 6px 12px 6px 0; }
.chain li::before { content: "0" counter(ch); color: var(--line-p); }
.chain li + li::after { content: none; }
.chain li:not(:last-child) { margin-right: 12px; border-right: 1px solid var(--line-p); }
.chain li.on { color: var(--text-p); }
.chain li.on::before { color: var(--ember-ink); }
.alert { border: 1px solid var(--text-p); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 16px; background: var(--paper); position: relative; }
.alert::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--ember); }
.alert-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); }
.pill { background: var(--ember); color: var(--ink); padding: 4px 8px; font-size: 10.5px; }
.alert h4 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.02em; }
.alert-why { color: var(--muted-p); max-width: 40em; }
.alert-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.alert-meta div { border-top: 1px solid var(--line-p); padding-top: 10px; }
.alert-meta dt { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); }
.alert-meta dd { font-weight: 500; }
.alert-ev { background: var(--white); border: 1px solid var(--line-p); padding: 14px 16px; }
.alert-ev > .mono { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-ink); margin-bottom: 6px; }
.alert-ev li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line-p-soft); font-size: 0.95rem; }
.alert-ev li .mono { font-size: 11.5px; color: var(--muted-p); }
.track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ash-p); }
.track li { padding-top: 10px; border-top: 3px solid var(--line-p); line-height: 1.35; }
.track li.done { border-top-color: var(--text-p); color: var(--text-p); }
.track li.now { border-top-color: var(--ember); color: var(--ember-ink); }

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: fl; }
.flow li { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 16px 18px 0; border-top: 1px solid var(--line-p); }
.flow li:nth-child(n + 5) { border-top-style: dashed; }
.flow i, .legend-p i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; position: relative; flex: none; }
.flow i { margin-bottom: 8px; }
.flow b { font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; }
.flow span { font-size: 0.88rem; color: var(--muted-p); line-height: 1.4; }
.flow .k-auto > i, .legend-p i.k-auto { background: var(--ember); }
.flow .k-keep > i, .legend-p i.k-keep { box-shadow: inset 0 0 0 1.5px var(--text-p); }
.flow .k-cut > i, .legend-p i.k-cut { box-shadow: inset 0 0 0 1.5px var(--ash-p); }
.flow .k-cut > i::after, .legend-p i.k-cut::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--ember-ink); transform: rotate(-45deg); }
.flow .k-exc > i, .legend-p i.k-exc { background: var(--text-p); border-radius: 1px; transform: rotate(45deg) scale(0.78); }
.flow li.k-cut b { text-decoration: line-through; text-decoration-color: var(--ember-ink); color: var(--ash-p); }
.legend-p { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-p); padding-top: 14px; border-top: 1px solid var(--line-p); }
.legend-p li { display: inline-flex; align-items: center; gap: 8px; }

.gate { display: grid; gap: 8px; padding-top: 22px; }
.gate-bar { position: relative; display: grid; grid-template-columns: 72fr 28fr; height: 64px; border: 1px solid var(--text-p); }
.gate-bar .z-ask, .gate-bar .z-go { display: flex; align-items: center; padding: 0 16px; font-size: 0.95rem; font-weight: 500; }
.z-ask { background: repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--paper) 8px 16px); color: var(--text-p); }
.z-go { background: var(--ink); color: var(--paper); }
.gate-line { position: absolute; left: 72%; top: -12px; bottom: -12px; width: 2px; background: var(--ember); }
.gate-line b { position: absolute; left: 10px; top: -8px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember-ink); white-space: nowrap; transform: translateY(-100%); }
.gate-axis { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); padding-top: 8px; }
.gate-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.agent-log { background: var(--ink); color: var(--muted-d); padding: 18px 20px; }
.agent-log > p.mono { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px; }
.agent-log ol li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-d); font-size: 12px; line-height: 1.5; }
.agent-log ol li span { color: var(--ash); }
.agent-log ol li.hold { color: var(--ember); }
.gate-rules div { padding: 12px 0; border-top: 1px solid var(--line-p); }
.gate-rules dt { font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-ink); }
.gate-rules dd { font-size: 0.95rem; color: var(--muted-p); margin-top: 3px; }

.thread { display: grid; gap: 12px; max-width: 560px; padding: 22px; background: var(--paper-2); border: 1px solid var(--line-p); }
.msg { display: grid; gap: 4px; max-width: 84%; padding: 12px 14px; font-size: 0.96rem; line-height: 1.45; }
.msg > .mono:first-child { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); }
.msg .meta { justify-self: end; font-size: 10.5px; color: var(--ash-p); }
.msg.out { justify-self: end; background: var(--ink); color: var(--paper); }
.msg.out > .mono:first-child, .msg.out .meta { color: var(--ash); }
.msg.in { justify-self: start; background: var(--white); border: 1px solid var(--line-p); }
.msg.in .meta { color: var(--ember-ink); justify-self: start; }
.msg.hand { justify-self: center; max-width: 92%; background: var(--ember-wash); border: 1px dashed var(--ember-ink); text-align: center; }
.msg.hand > .mono:first-child { color: var(--ember-ink); }
.silence { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-ink); }
.silence span { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--ember-ink) 0 4px, transparent 4px 8px); }
.file { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 10px; background: var(--paper-2); border: 1px solid var(--line-p); }
.file::before { content: ""; width: 10px; height: 12px; border: 1.2px solid currentColor; border-radius: 1px; }

.field-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.device { background: var(--ink); color: var(--paper); border-radius: 22px; padding: 16px; border: 6px solid #2a2521; box-shadow: 0 24px 48px -30px rgba(23, 20, 18, 0.6); display: grid; gap: 12px; }
.dev-top { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-d); }
.dev-top .off { color: var(--ember); }
.dev-photo { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: repeating-linear-gradient(45deg, #221e1b 0 6px, #262120 6px 12px); display: grid; place-items: end start; padding: 10px; border-radius: 6px; overflow: hidden; }
.dev-photo i { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); border: 1px solid rgba(243, 238, 230, 0.5); border-radius: 50%; }
.dev-photo i::before, .dev-photo i::after { content: ""; position: absolute; background: rgba(243, 238, 230, 0.5); }
.dev-photo i::before { left: 50%; top: -10px; bottom: -10px; width: 1px; }
.dev-photo i::after { top: 50%; left: -10px; right: -10px; height: 1px; }
.dev-photo .mono { position: relative; font-size: 10px; color: var(--muted-d); }
.dev-meta div { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line-d); }
.dev-meta dt { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.dev-meta dd { font-size: 12.5px; color: var(--text-d); }
.dev-sync { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted-d); padding-top: 4px; }
.dev-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-d); box-shadow: 0 0 0 4px rgba(243, 238, 230, 0.12); }
.field-notes li { padding: 16px 0; border-top: 1px solid var(--line-p); color: var(--muted-p); font-size: 1.02rem; }
.field-notes b { color: var(--text-p); font-weight: 500; }

.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.loop li { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--text-p); background: var(--paper); }
.loop li:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 50%; transform: translate(50%, -50%); z-index: 1; font-size: 14px; color: var(--ember-ink); background: var(--white); line-height: 1; }
.loop li > .mono { font-size: 10.5px; color: var(--ember-ink); }
.loop b { font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.loop li > span:last-child { font-size: 0.88rem; color: var(--muted-p); line-height: 1.4; }
.loop-back { display: grid; gap: 6px; color: var(--ember-ink); margin-top: -12px; }
.loop-back svg { display: block; width: 100%; height: 36px; }
.loop-back .mono { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.funnel { padding-top: 16px; border-top: 1px solid var(--line-p); display: grid; gap: 10px; }
.funnel > .mono { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); }
.funnel ol { display: grid; gap: 6px; }
.funnel li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 30px; }
.funnel li::before { content: ""; width: calc(var(--w) * 0.6); flex: none; height: 22px; background: var(--ink); opacity: 0.85; }
.funnel li span { font-size: 0.92rem; color: var(--muted-p); white-space: nowrap; }
.funnel li.drop::before { background: var(--ember); opacity: 1; }
.funnel li em { font-style: normal; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember-ink); }

/* ---------- page forwarding ---------- */
.pager { position: relative; z-index: 2; background: var(--paper-2); color: var(--text-p); padding-block: 44px 64px; border-top: 1px solid var(--line-p); }
.rail { display: flex; gap: clamp(10px, 1.6vw, 22px); align-items: flex-end; }
.rail-group { flex: var(--n) 1 0; min-width: 0; display: grid; gap: 6px; }
.rail-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-p); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-group.is-here .rail-label { color: var(--ember-ink); }
.rail-ticks { display: flex; gap: 3px; }
.rail-ticks a { position: relative; flex: 1; height: 22px; display: block; }
.rail-ticks a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line-p); transition: background-color 0.2s, height 0.2s var(--ease); }
.rail-ticks a.is-past::before { background: var(--text-p); }
.rail-ticks a.is-now::before { background: var(--ember); height: 10px; }
.rail-ticks a:hover::before { height: 10px; background: var(--text-p); }
.rail-ticks a:hover::after, .rail-ticks a:focus-visible::after {
  content: attr(data-label); position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3;
  padding: 5px 8px; background: var(--ink); color: var(--paper); white-space: nowrap;
  font: 400 11px/1.2 var(--f-mono);
}
.pager-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 22px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); }
.keys { display: inline-flex; align-items: center; gap: 6px; }
.keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--line-p); border-bottom-width: 2px; background: var(--white); color: var(--text-p); font-size: 11px; }
.pager-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager-grid.is-single { grid-template-columns: 1fr; }
.pager-cell {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 148px;
  padding: 24px 28px; background: var(--paper); border: 1px solid var(--line-p); text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pager-cell > .mono { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); transition: color 0.3s; }
.pager-next { align-items: flex-end; text-align: right; }
.pager-title { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
a.pager-cell:hover { background: var(--ink); color: var(--text-d); border-color: var(--ink); }
a.pager-cell:hover > .mono { color: var(--ember); }
a.pager-cell:hover .arr { transform: translateX(6px); color: var(--ember); }
a.pager-prev:hover .arr { transform: translateX(-6px); }

/* ---------- footer ---------- */
.footer { position: relative; z-index: 2; overflow: hidden; background: var(--ink-foot); color: var(--muted-d); padding-block: 76px 32px; }
.foot-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.7fr) minmax(0, 2.5fr) minmax(0, 1.2fr) minmax(0, 1.8fr); gap: 40px; }
.foot-brand { display: grid; gap: 20px; align-content: start; justify-items: start; }
.foot-brand p { max-width: 22em; }
.footer h4 { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-bottom: 14px; }
.footer ul li { padding-block: 4px; }
.footer ul a { color: var(--text-d); text-decoration: none; opacity: 0.8; transition: opacity 0.2s; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 15px; }
.footer ul a:not(:has(.mono)) { display: inline; }
.footer ul a:hover { opacity: 1; }
.footer ul a .mono { font-size: 11px; color: var(--ember); min-width: 1.7em; }
.foot-svc ul { columns: 1; }
.foot-svc li { break-inside: avoid; }
.footer .muted { color: var(--ash); }
.foot-legal { position: relative; z-index: 1; margin-top: 84px; padding-top: 22px; border-top: 1px solid #2a2521; display: flex; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; font-size: 12.5px; line-height: 1.55; color: #857e75; }
.foot-legal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.foot-legal p { max-width: 70em; }
.foot-legal .foot-co { grid-column: 1 / -1; color: #9a9389; }
.foot-legal .foot-co a, .foot-links a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(243, 238, 230, 0.18); transition: color 0.2s, border-color 0.2s; }
.foot-legal .foot-co a:hover, .foot-links a:hover { color: var(--text-d); border-color: var(--ember); }
.foot-links { grid-column: 2; grid-row: 2; display: flex; gap: 20px; white-space: nowrap; color: #b2aa9f; }
.foot-legal .foot-end { grid-column: 1 / -1; }
@media (max-width: 760px) { .foot-legal { grid-template-columns: minmax(0, 1fr); } .foot-links { grid-column: 1; grid-row: auto; flex-wrap: wrap; } }
.foot-w { position: absolute; right: -1.5vw; bottom: -10vw; font-family: var(--f-mark); font-weight: 700; font-size: 34vw; line-height: 0.8; letter-spacing: -0.06em; color: #181512; pointer-events: none; user-select: none; }

/* ---------- small screens ---------- */
@media (max-width: 1180px) {
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .stepline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stepline li { grid-template-columns: 40px 160px minmax(0, 1fr); gap: 12px; padding-block: 16px; border-top: 1px solid var(--line-p); }
  .stepline li:first-child { border-top: 2px solid var(--ember); }
  .svc-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .gate-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .figure-25 { position: relative; top: 0; margin-bottom: 40px; }
  .limits { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .phases li { border-top: 0; border-left: 1px solid var(--line-d); padding: 0 0 38px 28px; }
  .phases li::before { left: -5px; top: 5px; }
  .exit-tag { margin-top: 4px; padding-top: 6px; }
  .pull { grid-template-columns: minmax(0, 1fr); }
  .svc-row { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 6px 12px; }
  .svc-row .n { grid-column: 1; grid-row: 1; }
  .svc-row .name { grid-column: 2; grid-row: 1; }
  .svc-row .plus { grid-column: 3; grid-row: 1; }
  .svc-row .sum { grid-column: 2; grid-row: 2; }
  .svc-row .v { display: none; }
  .svc-body { padding-left: 52px; }
  .svc-cols { grid-template-columns: minmax(0, 1fr); }
  .v-cols { grid-template-columns: minmax(0, 1fr); }
  .v-sum { min-height: 0; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-aside { position: static; order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vrows a { grid-template-columns: 48px minmax(0, 1fr) 60px; }
  .vrows .sum { grid-column: 2; grid-row: 2; }
  .vrows .go { grid-row: 1; grid-column: 3; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:nth-child(n + 3) { border-top-style: solid; }
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .loop li:nth-child(2)::after { content: "↓"; right: 50%; top: auto; bottom: -8px; transform: translate(50%, 50%); }
  .loop-back { display: none; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .device { max-width: 320px; }
  .rail-label { font-size: 9px; }
}
/* phone + tablet: a dark plate behind the copy so the words stay readable; the figure only ghosts through in grey */
@media (max-width: 1060px) {
  html:not(.no-webgl) .shade { background: none; }
  .hero > .wrap,
  .approach > .wrap,
  .order > .wrap,
  .contact > .wrap,
  .page-hero > .wrap {
    position: relative;
    background: none;
  }
  .hero > .wrap::before,
  .approach > .wrap::before,
  .order > .wrap::before,
  .contact > .wrap::before,
  .page-hero > .wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: -28px;
    background: rgba(23, 20, 18, 0.9);
    -webkit-backdrop-filter: grayscale(1) brightness(3.96);
    backdrop-filter: grayscale(1) brightness(3.96);
    -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 42px), transparent 100%);
    mask-image: linear-gradient(#000 0, #000 calc(100% - 42px), transparent 100%);
    pointer-events: none;
  }
  .hero > .wrap > *,
  .approach > .wrap > *,
  .order > .wrap > *,
  .contact > .wrap > *,
  .page-hero > .wrap > * {
    position: relative;
    z-index: 1;
  }
  .v-sticky { position: relative; background: transparent; }
  .v-sticky::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    top: 0;
    bottom: -28px;
    background: rgba(23, 20, 18, 0.9);
    -webkit-backdrop-filter: grayscale(1) brightness(3.96);
    backdrop-filter: grayscale(1) brightness(3.96);
    -webkit-mask-image: linear-gradient(#000 0, #000 calc(100% - 42px), transparent 100%);
    mask-image: linear-gradient(#000 0, #000 calc(100% - 42px), transparent 100%);
    pointer-events: none;
  }
  .v-sticky > * { position: relative; z-index: 1; }
  .pg-home .hero {
    min-height: 0;
    justify-content: flex-start;
    padding-top: calc(var(--nav-h) + 20px);
  }
  .pg-home .approach,
  .pg-home .vertical {
    margin-top: 32vh;
    padding-block: 0;
  }
  /* the findings ring is taller than the other gap views */
  .pg-home #find {
    margin-top: 52vh;
  }
  .pg-home #carry {
    margin-top: 46vh;
  }
  .pg-home .order {
    margin-top: 0;
    padding-block: 0;
  }
  .tag-in {
    bottom: 8px;
    width: 116px;
    white-space: normal;
    padding: 0 0 18px 8px;
    gap: 1px;
  }
  .tag-in b { font-size: 8px; letter-spacing: 0.04em; }
  .tag-in span { font-size: 11px; line-height: 1.15; }
  .tag-in small { font-size: 8px; line-height: 1.25; }
  .tag.is-flip .tag-in {
    left: auto;
    right: 0;
    width: 116px;
    border-left: 0;
    border-right: 1px solid rgba(229, 96, 47, 0.8);
    padding: 0 8px 18px 0;
    text-align: right;
  }
  .page-hero,
  .page-hero.is-vertical,
  .page-hero.is-service {
    min-height: 0;
    justify-content: flex-start;
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 36px;
  }
}
@media (max-width: 860px) {
  .shade { background: linear-gradient(180deg, rgba(23, 20, 18, 0.35) 0%, rgba(23, 20, 18, 0.72) 55%, rgba(23, 20, 18, 0.9) 100%); }
  html:not(.no-webgl) .shade { background: none; }
  .pg-home .v-sticky { background-clip: border-box; padding-block: 0; }
  .pg-home .v-sticky::before { top: 0; bottom: 0; }
  .vertical { min-height: auto; }
  .v-sticky { position: relative; min-height: auto; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-label { display: none; }
  .order-list li.is-current::before { left: -12px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .order-list li, .rows > div, .receive div, .receive-lg div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .data-grid, .row2, .people, .two-up, .svc-aside, .ticks-lg.two, .alert-meta { grid-template-columns: minmax(0, 1fr); }
  .svc-body { padding-left: 0; }
  .hero-copy { gap: 22px; }
  .actions .btn { flex: 1 1 100%; justify-content: space-between; }
  .ledger-head, .ledger-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger-head span:nth-child(2), .ledger-row span:nth-child(2) { display: none; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vrows a { grid-template-columns: minmax(0, 1fr) 28px; gap: 8px; }
  .vrows .n { grid-column: 1 / -1; }
  .vrows .name { grid-column: 1; grid-row: 2; }
  .vrows .sum { grid-column: 1 / -1; grid-row: 3; }
  .vrows .go { grid-row: 2; grid-column: 2; font-size: 0; }
  .vrows .go .arr { font-size: 18px; }
  .stepline li { grid-template-columns: 32px minmax(0, 1fr); }
  .stepline li p { grid-column: 2; }
  .flow, .loop { grid-template-columns: minmax(0, 1fr); }
  .loop li::after { content: "↓" !important; right: 50% !important; top: auto !important; bottom: -8px !important; transform: translate(50%, 50%) !important; }
  .loop li:last-child::after { content: none !important; }
  .track { grid-template-columns: minmax(0, 1fr); }
  .track li { border-top: 0; border-left: 3px solid var(--line-p); padding: 4px 0 4px 10px; }
  .track li.done { border-left-color: var(--text-p); }
  .track li.now { border-left-color: var(--ember); }
  .msg { max-width: 96%; }
  .pager-grid { grid-template-columns: minmax(0, 1fr); }
  .pager-cell { min-height: 0; }
  .keys { display: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-svc ul { columns: 1; }
  .gate-bar { grid-template-columns: 62fr 38fr; height: auto; }
  .gate-bar .z-ask, .gate-bar .z-go { padding: 12px; font-size: 0.85rem; }
  .gate-line { left: 62%; }
}

@media print {
  #scene, .shade, .grain, .hud, .findings, .nav, .pager { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- page transitions (multi-page) ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
/* a true cross-fade (the UA pairs old and new with plus-lighter), so the figure never dips or flashes */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.34s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
::view-transition { background: #171412; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.foot-brand .brand { color: var(--text-d); }
.footer ul li { font-size: 15px; }

/* =====================================================================
   v3 · craft layer
   ===================================================================== */

/* entrance curtain — first visit in a session only */
.curtain { display: none; }
.js-loading .curtain, .curtain-lift .curtain {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink-deep); color: var(--text-d);
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.curtain-lift .curtain { transform: translateY(-101%); }
.curtain-in { width: min(360px, 76vw); display: grid; gap: 22px; }
.c-mark { font: 700 clamp(4.4rem, 11vw, 7rem)/0.8 var(--f-mark); letter-spacing: -0.06em; display: inline-flex; align-items: flex-end; gap: 0.04em; }
.c-mark i { width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--ember); margin-bottom: 0.02em; box-shadow: 0 0 24px rgba(229, 96, 47, 0.55); }
.c-bar { height: 1px; background: var(--line-d); overflow: hidden; }
.c-bar i { display: block; height: 100%; background: var(--ember); transform: scaleX(0); transform-origin: 0 50%; }
.c-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.c-count { color: var(--text-d); font-variant-numeric: tabular-nums; }
.js-loading .display .ln > span,
.js-loading .ph-copy .lede, .js-loading .ph-copy .actions, .js-loading .ph-copy .badge-n,
.js-loading .hero-copy .lede, .js-loading .hero-copy .actions, .js-loading .hero-copy .eyebrow { animation-play-state: paused; }
.hero-copy .eyebrow, .hero-copy .lede, .hero-copy .actions, .hero .sequence { animation: fade-up 1s var(--ease) both; }
.hero-copy .eyebrow { animation-delay: 0.05s; }
.hero-copy .lede { animation-delay: 0.32s; }
.hero-copy .actions { animation-delay: 0.42s; }
.hero .sequence { animation-delay: 0.55s; }
.js-loading .hero .sequence { animation-play-state: paused; }

/* headings rise word by word */
.rise .rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.rise .rw > span { display: inline-block; transform: translateY(108%); transition: transform 0.95s cubic-bezier(0.2, 0.75, 0.1, 1); transition-delay: calc(var(--i) * 32ms); }
.rise.is-in .rw > span { transform: none; }

/* chapter scrubber (home) */
.scrub { position: fixed; left: 18px; top: 50%; z-index: 4; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.hud-on .scrub { opacity: 1; pointer-events: auto; }
.scrub ol { display: grid; gap: 2px; }
.scrub a { position: relative; display: flex; align-items: center; gap: 10px; height: 14px; text-decoration: none; color: var(--ash); }
.scrub a::before { content: ""; width: 10px; height: 1px; background: currentColor; transition: width 0.35s var(--ease), background-color 0.2s; }
.scrub .mono { font-size: 10px; letter-spacing: 0.08em; }
.scrub em { font-style: normal; font-size: 12px; color: var(--text-d); opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.3s var(--ease); white-space: nowrap; }
.scrub:hover a em, .scrub a:focus-visible em { opacity: 1; transform: none; }
.scrub:hover { background: linear-gradient(90deg, rgba(17,15,13,.92), rgba(17,15,13,.0)); }
.scrub ol { padding: 10px 28px 10px 0; }
.scrub a[aria-current] { color: var(--ember); }
.scrub a[aria-current]::before { width: 22px; background: var(--ember); }
@media (max-width: 1239px) { .scrub { display: none; } }
@media (min-width: 1240px) { .pg-home .hero-copy, .pg-home .col-text, .pg-home .v-sticky { margin-left: 18px; } }

/* system inspector (hover a slab) */
.inspect { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.inspect::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 5px rgba(229, 96, 47, 0.18), 0 0 18px rgba(229, 96, 47, 0.8); }
.inspect::after { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 1px; background: linear-gradient(90deg, var(--ember), rgba(229, 96, 47, 0.2)); transform-origin: 0 0; transform: rotate(-38deg); }
.inspect-in {
  position: absolute; left: 36px; bottom: 26px; min-width: 228px;
  display: grid; gap: 1px; padding: 12px 16px 13px;
  background: rgba(13, 11, 10, 0.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(243, 238, 230, 0.12); border-left: 2px solid var(--ember);
}
.i-id { font: 500 10px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.i-name { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text-d); }
.i-note { font: 400 11.5px/1.4 var(--f-mono); color: var(--muted-d); }
.i-status { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(243, 238, 230, 0.1); font: 500 10.5px/1.4 var(--f-mono); letter-spacing: 0.04em; color: var(--ember); }
.is-inspecting [data-canvas] { cursor: crosshair; }
@media (max-width: 860px) { .inspect { display: none; } }

/* spotlight + magnetic */
.spot { background-image: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(229, 96, 47, 0.085), transparent 62%); }
.btn-ember { transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1); will-change: transform; }

/* footer clock */
.foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.clock { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted-d); }
.clock i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(229, 96, 47, 0.18); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* 25% figure */
.figure-25 .num b { font-weight: inherit; }

@media (prefers-reduced-motion: reduce) {
  .rise .rw > span { transform: none; }
  .btn-ember { transform: none !important; }
}


/* ---------- scoping form · consent and collection notice ---------- */
.consent { display: grid; gap: 10px; }
.consent label { display: flex; gap: 12px; align-items: flex-start; font-size: 0.93rem; line-height: 1.45; color: var(--text-d); cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid #5a514a; border-radius: 2px; background: transparent; display: grid; place-content: center; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.consent input::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 0.2s var(--ease); }
.consent input:checked { background: var(--ember); border-color: var(--ember); }
.consent input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.consent input:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.notice summary { width: max-content; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-d); cursor: pointer; list-style: none; padding-left: 30px; }
.notice summary::-webkit-details-marker { display: none; }
.notice summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--ember); }
.notice[open] summary::before { content: "–"; }
.notice summary:hover { color: var(--text-d); }
.notice p { margin: 8px 0 0 30px; font-size: 0.84rem; line-height: 1.6; color: var(--muted-d); }
.notice a { color: var(--text-d); }

/* ---------- legal documents ---------- */
.pg-privacy .page-hero, .pg-terms .page-hero { min-height: 62vh; min-height: 62svh; }
@media (max-width: 1060px) {
  .pg-privacy .page-hero, .pg-terms .page-hero { min-height: 0; }
}
.legal { padding-block: clamp(64px, 9vh, 104px) clamp(96px, 14vh, 150px); }
.lg-layout { display: grid; grid-template-columns: 250px minmax(0, 780px); gap: clamp(40px, 7vw, 110px); align-items: start; }
.lg-aside { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; gap: 34px; max-height: calc(100vh - var(--nav-h) - 56px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 8px; }
.lg-switch { display: grid; border: 1px solid var(--line-p); }
.lg-switch a { display: grid; gap: 2px; padding: 12px 16px; text-decoration: none; color: var(--text-p); font-weight: 500; transition: background-color 0.2s; }
.lg-switch a + a { border-top: 1px solid var(--line-p); }
.lg-switch a .mono { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-p); font-weight: 400; }
.lg-switch a:hover { background: var(--paper-2); }
.lg-switch a[aria-current] { background: var(--ink); color: var(--text-d); }
.lg-switch a[aria-current] .mono { color: var(--ember); }
.lg-toc > .mono { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-p); margin-bottom: 10px; }
.lg-toc ol { margin: 0; padding: 0; list-style: none; display: grid; }
.lg-toc a { position: relative; display: grid; grid-template-columns: 28px 1fr; padding: 5px 0 5px 14px; font-size: 13.5px; line-height: 1.35; color: var(--muted-p); text-decoration: none; transition: color 0.2s; }
.lg-toc a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-p); transition: background-color 0.2s, width 0.2s; }
.lg-toc a .mono { font-size: 11px; padding-top: 1px; color: var(--ash-p); }
.lg-toc a:hover { color: var(--text-p); }
.lg-toc a[aria-current] { color: var(--text-p); }
.lg-toc a[aria-current]::before { width: 2px; background: var(--ember); }
.lg-toc a[aria-current] .mono { color: var(--ember-ink); }

.ph { background: rgba(229, 96, 47, 0.16); color: var(--ember-ink); padding: 0 0.25em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lg-draft { display: grid; gap: 4px; margin-bottom: 34px; padding: 16px 20px; border-left: 3px solid var(--ember); background: var(--ember-wash); font-size: 0.95rem; }
.lg-draft .mono { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-ink); }
.lg-meta { display: grid; grid-template-columns: 1.6fr 1.3fr 0.7fr 1fr; margin: 0; border-block: 1px solid var(--text-p); }
.lg-meta > div { padding: 14px 16px 14px 0; display: grid; gap: 4px; }
.lg-meta > div + div { padding-left: 16px; border-left: 1px solid var(--line-p); }
.lg-meta dt { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash-p); }
.lg-meta dd { margin: 0; font-size: 12.5px; color: var(--text-p); overflow-wrap: anywhere; }
.lg-glance { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lg-glance li { display: grid; gap: 14px; align-content: space-between; padding: 18px 18px 16px; background: var(--white); border: 1px solid var(--line-p-soft); }
.lg-glance p { font-size: 0.98rem; line-height: 1.45; font-weight: 400; }
.lg-glance a { width: max-content; font-size: 11px; color: var(--ember-ink); text-decoration: none; border-bottom: 1px solid currentColor; }

.lg-sec { margin-top: clamp(56px, 8vh, 84px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.lg-sec h2 { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--text-p); font-size: clamp(1.45rem, 2.1vw, 1.85rem); font-weight: 500; letter-spacing: -0.022em; line-height: 1.15; }
.lg-sec h2 .mono { font-size: 13px; letter-spacing: 0; color: var(--ember-ink); font-weight: 400; }
.lg-clause { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding-block: 14px; border-bottom: 1px solid var(--line-p-soft); scroll-margin-top: calc(var(--nav-h) + 24px); transition: background-color 0.6s; }
.lg-clause:target { background: linear-gradient(90deg, var(--ember-wash), rgba(229, 96, 47, 0) 70%); }
.lg-n { padding-top: 3px; font-size: 12px; color: var(--ash-p); text-decoration: none; }
.lg-n:hover { color: var(--ember-ink); }
.lg-body { min-width: 0; }
.lg-body p { font-size: 1rem; line-height: 1.72; color: #2c2723; max-width: 68ch; }
.lg-body > * + * { margin-top: 0.85em; }
.lg-body strong { font-weight: 600; color: var(--text-p); }
.lg-body a { color: var(--text-p); text-decoration-color: rgba(23, 20, 18, 0.3); text-underline-offset: 3px; }
.lg-body a:hover { text-decoration-color: var(--ember-ink); }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr); font-size: 1rem; line-height: 1.68; color: #2c2723; max-width: 72ch; }
.lg-list .mono { font-size: 12px; padding-top: 4px; color: var(--ash-p); }
.lg-table { overflow-x: auto; }
.lg-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.95rem; line-height: 1.55; }
.lg-table th, .lg-table td { text-align: left; vertical-align: top; padding: 13px 18px 13px 0; border-top: 1px solid var(--line-p); }
.lg-table thead th { padding-block: 8px; border-top: 0; font-family: var(--f-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); }
.lg-table tbody th { width: 34%; font-weight: 500; color: var(--text-p); }
.lg-table td { color: #2c2723; }
.lg-card { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); background: var(--paper-2); padding: 8px 22px; }
.lg-card > div { display: contents; }
.lg-card dt, .lg-card dd { padding-block: 11px; border-top: 1px solid var(--line-p); }
.lg-card > div:first-child dt, .lg-card > div:first-child dd { border-top: 0; }
.lg-card dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-p); padding-top: 14px; }
.lg-card dd { margin: 0; font-size: 0.97rem; }
.lg-end { margin-top: 84px; padding-top: 22px; border-top: 2px solid var(--text-p); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: baseline; font-size: 0.95rem; color: var(--muted-p); }
.lg-end a { color: var(--text-p); }

@media (max-width: 1060px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr); }
  .lg-aside { position: static; max-height: none; overflow: visible; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lg-switch { grid-template-columns: 1fr 1fr; }
  .lg-switch a + a { border-top: 0; border-left: 1px solid var(--line-p); }
  .lg-toc ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 24px; }
}
@media (max-width: 700px) {
  .lg-meta { grid-template-columns: 1fr 1fr; }
  .lg-meta > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .lg-meta > div:nth-child(n + 3) { border-top: 1px solid var(--line-p); }
  .lg-meta > div { padding-right: 10px; }
  .lg-meta > div + div { padding-left: 12px; }
  .lg-meta dd { font-size: 11.5px; overflow-wrap: normal; }
  .lg-glance { grid-template-columns: minmax(0, 1fr); }
  .lg-sec h2, .lg-clause { grid-template-columns: 46px minmax(0, 1fr); }
  .lg-list li { grid-template-columns: 30px minmax(0, 1fr); }
  .lg-card { grid-template-columns: minmax(0, 1fr); padding: 6px 18px 14px; }
  .lg-card dd { padding-top: 0; border-top: 0; }
  .lg-card > div:not(:first-child) dt { border-top: 1px solid var(--line-p); }
}
@media print {
  .lg-aside, .lg-glance, .page-hero { display: none !important; }
  .lg-layout { display: block; }
}

/* ---------- figure · system name tags ---------- */
.sys-tags { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sys-tag { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.sys-tag span { position: absolute; left: 0; bottom: 10px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 7px; padding: 4px 8px 4px 7px; white-space: nowrap; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-d); background: rgba(17, 15, 13, 0.55); border: 1px solid rgba(243, 238, 230, 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sys-tag b { font-weight: 400; color: var(--ember); }
.sys-tag span::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: linear-gradient(rgba(243, 238, 230, 0.35), rgba(243, 238, 230, 0)); }
@media (max-width: 860px) {
  .sys-tag span { font-size: 9px; letter-spacing: 0.04em; gap: 5px; padding: 3px 6px 3px 5px; }
}
@media print { .sys-tags { display: none !important; } }