/* ════════════════════════════════════════════════════════════════════════
   brand.css — Energy.LLC public site · institutional system (Oct 2026)
   ════════════════════════════════════════════════════════════════════════
   Register: large, calm, few words. Ink and paper with the brand violet
   used as a hairline and a single accent, never as a wash. Inter for all
   display and body; DM Mono only for section numbers and small labels.
   No gradients beyond photographic overlays, no illustrated scenes, no
   mascots. Motion = one fade-up reveal (.rv → .in), nothing else.
   Every color pairing below clears WCAG 2.1 AA at its size.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────── */
:root {
  --b-ink:        #0B0F1A;   /* dark bands, display text */
  --b-navy:       #1E1B4B;   /* brand navy, band gradient end */
  --b-violet:     #7C3AED;   /* the one accent */
  --b-violet-dk:  #6D28D9;   /* accent hover / AA on white at any size */
  --b-lilac:      #C4B5FD;   /* accent on dark */
  --b-paper:      #FFFFFF;
  --b-sand:       #F6F6F8;   /* alternate band */
  --b-line:       #E3E3EA;   /* hairlines on paper */
  --b-line-dk:    rgba(255,255,255,.14);
  --b-text:       #171B29;   /* body on paper · 15.6:1 */
  --b-muted:      #5A5F72;   /* secondary on paper · 6.5:1 */
  --b-text-dk:    #F2F1FA;   /* body on ink */
  --b-muted-dk:   #B7B3D4;   /* secondary on ink · 9.1:1 */
  --b-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --b-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --b-nav-h: 72px;
  --b-wrap: 1200px;
  --b-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── 2 · Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--b-nav-h) + 24px); }
body {
  font-family: var(--b-sans); font-size: 17px; line-height: 1.6;
  color: var(--b-text); background: var(--b-paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: #EDE9FE; color: var(--b-violet-dk); }
:focus-visible { outline: 3px solid var(--b-violet); outline-offset: 3px; border-radius: 2px; }
.b-section--ink :focus-visible, .b-hero :focus-visible, .b-footer :focus-visible, .b-nav--ink :focus-visible { outline-color: var(--b-lilac); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--b-violet); color: #fff; padding: 12px 20px;
  font-weight: 600; font-size: 14px; text-decoration: none; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ── 3 · Layout ─────────────────────────────────────────────────────────── */
.b-wrap { width: 100%; max-width: var(--b-wrap); margin: 0 auto; padding: 0 24px; }
.b-section { padding: clamp(80px, 10vw, 140px) 0; }
.b-section--sand { background: var(--b-sand); }
.b-section--ink { background: var(--b-ink); color: var(--b-text-dk); }
.b-section--tight { padding: clamp(56px, 7vw, 96px) 0; }
.b-grid { display: grid; gap: 32px; }
.b-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.b-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b-tight { max-width: 62ch; }
.b-measure { max-width: 68ch; }
.b-rule { border: 0; border-top: 1px solid var(--b-line); margin: 0; }
.b-section--ink .b-rule { border-color: var(--b-line-dk); }

/* ── 4 · Type ───────────────────────────────────────────────────────────── */
.b-eyebrow {
  font-family: var(--b-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--b-violet-dk);
  margin-bottom: 18px;
}
.b-section--ink .b-eyebrow, .b-hero .b-eyebrow { color: var(--b-lilac); }
.b-num {
  font-family: var(--b-mono); font-size: 12px; letter-spacing: .18em;
  color: var(--b-muted); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .18em; }
.b-section--ink .b-num { color: var(--b-muted-dk); }
.b-display {
  font-size: clamp(42px, 6.4vw, 88px); font-weight: 800; line-height: .98;
  letter-spacing: -.035em; color: #fff; text-wrap: balance;
}
.b-h1 {
  font-size: clamp(38px, 5.4vw, 72px); font-weight: 800; line-height: 1.02;
  letter-spacing: -.03em; text-wrap: balance;
}
.b-h2 {
  font-size: clamp(30px, 3.8vw, 50px); font-weight: 800; line-height: 1.06;
  letter-spacing: -.028em; text-wrap: balance;
}
.b-h3 { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
.b-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--b-muted); margin-top: 20px; text-wrap: pretty; }
.b-section--ink .b-lede, .b-hero .b-lede { color: var(--b-muted-dk); }
.b-muted { color: var(--b-muted); }
.b-section--ink .b-muted { color: var(--b-muted-dk); }
.b-head { margin-bottom: clamp(40px, 5vw, 64px); }
.b-accent { color: var(--b-violet); }
.b-section--ink .b-accent, .b-hero .b-accent { color: var(--b-lilac); }
p + p { margin-top: 1em; }

/* ── 5 · Nav ────────────────────────────────────────────────────────────── */
.b-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--b-nav-h);
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--b-line);
}
.b-nav--ink { background: rgba(11,15,26,.82); border-bottom-color: var(--b-line-dk); color: var(--b-text-dk); }
.b-nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.b-mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.b-mark svg { width: 30px; height: 30px; }
.b-mark-word { font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1; }
.b-mark-word span { color: var(--b-violet); }
.b-nav--ink .b-mark-word span { color: var(--b-lilac); }
.b-nav-right { display: flex; align-items: center; gap: 28px; }
.b-nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.b-nav-links a {
  font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--b-text);
  padding: 6px 0; border-bottom: 1.5px solid transparent; transition: border-color .25s;
}
.b-nav--ink .b-nav-links a { color: var(--b-text-dk); }
.b-nav-links a:hover, .b-nav-links a[aria-current="page"] { border-bottom-color: var(--b-violet); }
.b-nav--ink .b-nav-links a:hover, .b-nav--ink .b-nav-links a[aria-current="page"] { border-bottom-color: var(--b-lilac); }
.b-menu {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 4px; color: inherit;
}
.b-menu span, .b-menu span::before, .b-menu span::after {
  display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform .25s, opacity .25s;
}
.b-menu span::before, .b-menu span::after { content: ""; position: absolute; left: 0; }
.b-menu span::before { top: -7px; } .b-menu span::after { top: 7px; }
.b-nav.open .b-menu span { background: transparent; }
.b-nav.open .b-menu span::before { transform: translateY(7px) rotate(45deg); }
.b-nav.open .b-menu span::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 920px) {
  .b-menu { display: inline-flex; }
  .b-nav-right { gap: 12px; }
  .b-nav-links {
    display: none; position: absolute; top: var(--b-nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--b-paper); border-bottom: 1px solid var(--b-line);
    padding: 8px 0 12px;
  }
  .b-nav--ink .b-nav-links { background: var(--b-ink); border-bottom-color: var(--b-line-dk); }
  .b-nav.open .b-nav-links { display: flex; }
  .b-nav-links a { display: block; padding: 14px 24px; font-size: 16px; border-bottom: 0; }
  .b-nav-links a[aria-current="page"] { color: var(--b-violet-dk); }
  .b-nav--ink .b-nav-links a[aria-current="page"] { color: var(--b-lilac); }
  .b-nav .b-btn { padding: 11px 16px; font-size: 13.5px; }
}
.b-nav-spacer { height: var(--b-nav-h); }

/* ── 6 · Buttons + links ────────────────────────────────────────────────── */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 3px; font-weight: 600; font-size: 15px;
  letter-spacing: .005em; text-decoration: none; line-height: 1;
  background: var(--b-ink); color: #fff; border: 1.5px solid var(--b-ink);
  transition: background .25s, border-color .25s, color .25s, transform .25s var(--b-ease);
}
.b-btn:hover { background: var(--b-violet-dk); border-color: var(--b-violet-dk); }
.b-btn--violet { background: var(--b-violet); border-color: var(--b-violet); }
.b-btn--violet:hover { background: var(--b-violet-dk); border-color: var(--b-violet-dk); }
.b-btn--ghost { background: transparent; color: var(--b-text); border-color: var(--b-text); }
.b-btn--ghost:hover { background: var(--b-text); color: #fff; }
.b-section--ink .b-btn--ghost, .b-hero .b-btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.b-section--ink .b-btn--ghost:hover, .b-hero .b-btn--ghost:hover { background: #fff; color: var(--b-ink); border-color: #fff; }
.b-section--ink .b-btn, .b-hero .b-btn { background: #fff; color: var(--b-ink); border-color: #fff; }
.b-section--ink .b-btn:hover, .b-hero .b-btn:hover { background: var(--b-lilac); border-color: var(--b-lilac); }
.b-section--ink .b-btn--violet, .b-hero .b-btn--violet { background: var(--b-violet); color: #fff; border-color: var(--b-violet); }
.b-section--ink .b-btn--violet:hover, .b-hero .b-btn--violet:hover { background: var(--b-violet-dk); border-color: var(--b-violet-dk); }
.b-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 36px; }
.b-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px;
  color: var(--b-violet-dk); text-decoration: none; border-bottom: 1.5px solid transparent;
  transition: border-color .25s;
}
.b-link:hover { border-bottom-color: currentColor; }
.b-link::after { content: "→" / ""; transition: transform .25s var(--b-ease); }
.b-link:hover::after { transform: translateX(3px); }
.b-section--ink .b-link, .b-hero .b-link { color: var(--b-lilac); }

/* Submit spinner — .btn-sending while a form is in flight */
.btn-sending { position: relative; pointer-events: none; color: transparent !important; }
.btn-sending > * { visibility: hidden; }
.btn-sending::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: b-spin .7s linear infinite;
}
@keyframes b-spin { to { transform: rotate(360deg); } }

/* ── 7 · Hero ───────────────────────────────────────────────────────────── */
.b-hero {
  position: relative; color: var(--b-text-dk); background: var(--b-ink);
  padding: calc(var(--b-nav-h) + clamp(96px, 14vw, 180px)) 0 clamp(88px, 11vw, 150px);
  overflow: hidden;
}
.b-hero--photo { background-size: cover; background-position: center; }
.b-hero--photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,15,26,.78) 0%, rgba(11,15,26,.62) 55%, rgba(11,15,26,.9) 100%);
}
.b-hero--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,15,26,.55), rgba(30,27,75,.15) 70%, transparent);
}
.b-hero > .b-wrap { position: relative; z-index: 1; }
.b-hero--inner { padding: calc(var(--b-nav-h) + clamp(72px, 10vw, 128px)) 0 clamp(64px, 8vw, 104px); }
.b-hero-hairline { width: 56px; height: 2px; background: var(--b-violet); margin-bottom: 28px; }

/* ── 8 · Cards, rows, people ────────────────────────────────────────────── */
.b-card {
  padding: 34px 32px; background: var(--b-paper); border: 1px solid var(--b-line); border-radius: 4px;
  display: flex; flex-direction: column; gap: 14px;
}
.b-card p { color: var(--b-muted); font-size: 16px; line-height: 1.6; }
.b-card .b-link { margin-top: auto; padding-top: 8px; }
.b-section--sand .b-card { background: var(--b-paper); }
.b-section--ink .b-card { background: rgba(255,255,255,.03); border-color: var(--b-line-dk); }
.b-section--ink .b-card p { color: var(--b-muted-dk); }
.b-card-index { font-family: var(--b-mono); font-size: 12px; letter-spacing: .18em; color: var(--b-violet-dk); }
.b-section--ink .b-card-index { color: var(--b-lilac); }

.b-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 32px; }
.b-person { display: flex; flex-direction: column; gap: 14px; }
.b-portrait {
  aspect-ratio: 1 / 1; width: 100%; object-fit: cover; border-radius: 4px;
  filter: grayscale(1) contrast(1.05); background: var(--b-sand);
}
.b-monogram {
  aspect-ratio: 1 / 1; width: 100%; border-radius: 4px; background: var(--b-ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--b-lilac); font-weight: 700; font-size: 34px; letter-spacing: .04em;
}
.b-person-name { font-weight: 700; font-size: 18px; letter-spacing: -.012em; }
.b-person-role { color: var(--b-muted); font-size: 14.5px; margin-top: 3px; }
.b-person-line { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--b-muted); max-width: 34ch; }
.b-person-link { font-size: 13.5px; color: var(--b-violet-dk); text-decoration: none; font-weight: 600; }
.b-person-link:hover { text-decoration: underline; }

/* ── 9 · Forms ──────────────────────────────────────────────────────────── */
.b-form { display: grid; gap: 22px; }
.b-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.b-field { display: flex; flex-direction: column; gap: 8px; }
.b-field--wide { grid-column: 1 / -1; }
.b-field > span { font-size: 13.5px; font-weight: 600; color: var(--b-text); }
.b-field > span small { font-weight: 400; color: var(--b-muted); }
.b-field input, .b-field select, .b-field textarea {
  width: 100%; height: 50px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--b-text);
  background: var(--b-paper); border: 1px solid #6F7484; border-radius: 3px;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: border-color .2s, box-shadow .2s;
}
.b-field textarea { height: auto; min-height: 128px; padding: 13px 14px; resize: vertical; }
.b-field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A5F72' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.b-field input:focus, .b-field select:focus, .b-field textarea:focus {
  border-color: var(--b-violet); box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}
.b-field input:focus-visible, .b-field select:focus-visible, .b-field textarea:focus-visible {
  outline: 3px solid var(--b-violet); outline-offset: 2px;
}
.b-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.b-form-note { font-size: 13.5px; color: var(--b-muted); max-width: 46ch; }
.b-form-err { font-size: 15px; color: #B42318; }
.b-form-err a { color: inherit; }
.b-hp { position: absolute; left: -9999px; top: auto; }
.b-form .b-btn { border: 0; }

/* ── 10 · Footer ────────────────────────────────────────────────────────── */
.b-footer { background: var(--b-ink); color: var(--b-text-dk); padding: clamp(64px, 8vw, 96px) 0 40px; }
.b-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.b-footer h2 { font-size: 12px; font-family: var(--b-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--b-muted-dk); margin-bottom: 18px; font-weight: 500; }
.b-footer ul { list-style: none; display: grid; gap: 11px; }
.b-footer li a { font-size: 15px; text-decoration: none; color: var(--b-text-dk); opacity: .92; }
.b-footer li a:hover { color: var(--b-lilac); }
.b-footer-brand p { color: var(--b-muted-dk); font-size: 15px; max-width: 34ch; margin-top: 18px; }
.b-footer-legal {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--b-line-dk);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  font-size: 13px; color: var(--b-muted-dk);
}
.b-footer-legal a { color: inherit; text-decoration: none; }
.b-footer-legal a:hover { color: var(--b-lilac); }

/* ── 11 · Article (Insights) ───────────────────────────────────────────── */
.b-article { max-width: 720px; margin: 0 auto; }
.b-article p, .b-article li { font-size: 18px; line-height: 1.7; color: var(--b-text); }
.b-article h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 48px 0 14px; }
.b-article ul { padding-left: 22px; margin: 14px 0; }
.b-article li + li { margin-top: 8px; }
.b-article-meta { font-family: var(--b-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--b-muted); margin-bottom: 20px; }
.b-article-cta { margin-top: 56px; padding: 32px; border: 1px solid var(--b-line); border-radius: 4px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.b-article-cta p { font-size: 17px; color: var(--b-text); margin: 0; }
.b-post { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--b-line); }
.b-post-date { font-family: var(--b-mono); font-size: 12px; letter-spacing: .14em; color: var(--b-muted); padding-top: 6px; }
.b-post h3 a { text-decoration: none; }
.b-post h3 a:hover { color: var(--b-violet-dk); }
.b-post p { color: var(--b-muted); font-size: 16px; margin-top: 8px; max-width: 64ch; }
.b-empty { padding: 32px; border: 1px dashed var(--b-line); border-radius: 4px; color: var(--b-muted); font-size: 16px; }

/* ── 12 · Reveal + motion ──────────────────────────────────────────────── */
html.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--b-ease), transform .8s var(--b-ease); }
html.js .rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv, html.js .rv.in, .rv { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  .btn-sending::after { animation: none; }
  .b-link::after, .b-btn { transition: none; }
}

/* ── 13 · Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .b-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-footer-grid { grid-template-columns: 1fr 1fr; }
  .b-split { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .b-wrap { padding: 0 20px; }
  .b-grid--2, .b-grid--3, .b-grid--4, .b-split--even { grid-template-columns: 1fr; }
  .b-form-grid { grid-template-columns: 1fr; }
  .b-field--wide { grid-column: auto; }
  .b-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .b-actions .b-btn { width: 100%; }
  .b-post { grid-template-columns: 1fr; gap: 6px; }
  .b-card { padding: 28px 24px; }
}
@media print {
  .b-nav, .b-menu, .skip-link, .b-footer { display: none; }
  .b-hero { background: #fff !important; color: #000; padding-top: 24px; }
  .b-hero::before, .b-hero::after { display: none; }
  .b-display, .b-hero .b-lede { color: #000; }
}

/* ── 14 · Motion primitives (additive; every one resolves to a still, complete
   frame under prefers-reduced-motion and with JS off) ─────────────────── */
.e-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 201;
  background: var(--b-violet); transform-origin: left center; transform: scaleX(0);
}
/* Plate: slow Ken Burns on a photographic band. Wrap the image in .m-plate. */
.m-plate { position: relative; overflow: hidden; }
.m-plate > img, .m-plate > .m-plate-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); animation: m-kenburns 28s ease-in-out infinite alternate;
}
.m-plate-bg { background-size: cover; background-position: center; }
@keyframes m-kenburns { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.1) translateY(-1.5%); } }
/* Parallax: brand.js shifts [data-parallax] children by a fraction of scroll */
[data-parallax] { will-change: transform; }
/* Grow line: a hairline that draws itself when revealed */
.m-line { display: block; height: 2px; background: var(--b-violet); width: 100%; transform-origin: left center; transition: transform 1.1s var(--b-ease) .1s; }
html.js .m-line { transform: scaleX(0); }
html.js .m-line.in, html.js .in .m-line { transform: scaleX(1); }
.b-section--ink .m-line, .b-hero .m-line { background: var(--b-lilac); }
/* Headline mask reveal */
.m-mask { transition: clip-path 1s var(--b-ease); }
html.js .m-mask { clip-path: inset(0 0 100% 0); }
html.js .m-mask.in, html.js .in .m-mask { clip-path: inset(0 0 0 0); }
/* Stagger: children of .m-stagger fade-up in sequence once the parent is .in */
.m-stagger > * { transition: opacity .8s var(--b-ease), transform .8s var(--b-ease); }
html.js .m-stagger > * { opacity: 0; transform: translateY(16px); }
html.js .m-stagger.in > * { opacity: 1; transform: none; }
.m-stagger.in > *:nth-child(2) { transition-delay: .1s; }
.m-stagger.in > *:nth-child(3) { transition-delay: .2s; }
.m-stagger.in > *:nth-child(4) { transition-delay: .3s; }
.m-stagger.in > *:nth-child(5) { transition-delay: .4s; }
.m-stagger.in > *:nth-child(6) { transition-delay: .5s; }
/* Ghost numeral: a large faint section index behind a heading block */
.m-ghost { position: relative; }
.m-ghost::before {
  content: attr(data-ghost) / ""; position: absolute; left: -.04em; top: -.55em;
  font-family: var(--b-mono); font-size: clamp(96px, 14vw, 200px); font-weight: 500;
  line-height: 1; color: var(--b-text); opacity: .045; pointer-events: none; user-select: none;
}
.b-section--ink .m-ghost::before, .b-hero .m-ghost::before { color: #fff; opacity: .06; }
/* Wire: an SVG polyline that carries a moving pulse of current */
.m-wire { position: absolute; inset: auto 0 0 0; width: 100%; height: auto; pointer-events: none; opacity: .9; }
.m-wire .w-base { fill: none; stroke: rgba(196,181,253,.35); stroke-width: 1.5; }
.m-wire .w-flow { fill: none; stroke: #60A5FA; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 14 180; animation: m-flow 6s linear infinite; }
.m-wire .w-node { fill: #A78BFA; }
@keyframes m-flow { to { stroke-dashoffset: -776; } }
/* Count-up numerals: brand.js animates [data-count] text once revealed */
[data-count] { font-variant-numeric: tabular-nums; }
/* Image band inside a section */
.m-figure { border-radius: 4px; overflow: hidden; aspect-ratio: 21 / 9; position: relative; background: var(--b-sand); }
.m-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-figure--tall { aspect-ratio: 16 / 9; }
.m-caption { font-family: var(--b-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--b-muted); margin-top: 12px; }
/* Article hero image */
.b-article-hero { max-width: 1040px; margin: -40px auto 48px; padding: 0 24px; }
.b-article-hero .m-figure { aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: reduce) {
  .m-plate > img, .m-plate > .m-plate-bg { animation: none; transform: none; }
  html.js .m-line, html.js .m-mask, html.js .m-stagger > *, .m-line, .m-mask, .m-stagger > * { transition: none; transform: none; clip-path: none; opacity: 1; }
  .m-wire .w-flow { animation: none; stroke-dasharray: none; }
  [data-parallax] { transform: none !important; }
}

/* ── 15 · Hero variants + patterned bands (art direction, wave 2) ──────── */
/* Amber: the golden-hour warmth for owner/broker surfaces */
.b-hero--amber::before {
  background: linear-gradient(180deg, rgba(11,15,26,.72) 0%, rgba(44,28,18,.55) 55%, rgba(11,15,26,.92) 100%);
}
.b-hero--amber::after {
  background: linear-gradient(90deg, rgba(11,15,26,.6), rgba(120,70,20,.18) 70%, transparent);
}
/* Paper hero: ink type on paper with a faint pattern, for team / insights / contact */
.b-hero--paper { background: var(--b-paper); color: var(--b-text); }
.b-hero--paper .b-display, .b-hero--paper .b-h1 { color: var(--b-text); }
.b-hero--paper .b-lede { color: var(--b-muted); }
.b-hero--paper .b-eyebrow { color: var(--b-violet-dk); }
.b-hero--paper .b-btn { background: var(--b-ink); color: #fff; border-color: var(--b-ink); }
.b-hero--paper .b-btn:hover { background: var(--b-violet-dk); border-color: var(--b-violet-dk); }
.b-hero--paper .b-btn--ghost { background: transparent; color: var(--b-text); border-color: var(--b-text); }
.b-hero--paper .b-btn--ghost:hover { background: var(--b-text); color: #fff; }
.b-hero--paper .b-link { color: var(--b-violet-dk); }
.b-hero--paper :focus-visible { outline-color: var(--b-violet); }
/* Pattern layer: an SVG plate behind any hero or section (set the image inline) */
.b-pattern { position: absolute; inset: 0; background-size: cover; background-position: center; pointer-events: none; }
.b-pattern--soft { opacity: .3; }
.b-pattern--faint { opacity: .28; }
.b-hero > .b-pattern { z-index: 0; }
.b-hero--paper > .b-pattern { mix-blend-mode: multiply; opacity: .9; }
.b-hero--paper > .b-pattern--faint { opacity: .45; }
.b-hero--paper > .b-pattern--soft { opacity: .6; }
.b-section { position: relative; }
.b-section > .b-pattern { z-index: 0; }
.b-section > .b-wrap { position: relative; z-index: 1; }
/* Statement band: one oversized sentence on ink, the institutional "quiet flex" */
.b-statement { font-size: clamp(28px, 3.6vw, 48px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; max-width: 24ch; text-wrap: balance; }
/* Two-up figure + text */
.b-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.b-feature--flip > .m-figure, .b-feature--flip > .b-figure-scene { order: 2; }
@media (max-width: 920px) { .b-feature { grid-template-columns: 1fr; } .b-feature--flip > .m-figure, .b-feature--flip > .b-figure-scene { order: 0; } }
/* Portrait variants */
.b-portrait--color { filter: none; }
.b-people--lead { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.b-people--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }

/* ── 16 · Hero plate layering (home): parallax plate behind the overlays ── */
.b-hero { isolation: isolate; }
.b-hero > .m-plate { position: absolute; inset: 0; z-index: -1; }

/* Motion pause (WCAG 2.2.2): one control stops every auto-playing plate and wire pulse;
   the choice persists per browser and applies site-wide. Hidden under reduced motion
   (nothing auto-plays there). */
html.motion-paused .m-plate > img, html.motion-paused .m-plate > .m-plate-bg,
html.motion-paused .m-wire .w-flow { animation-play-state: paused; }
.b-motion-toggle { position: absolute; right: 20px; bottom: 18px; z-index: 2; font-family: var(--b-mono); font-size: 11.5px;
  font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: #F2F1FA;
  background: rgba(11,15,26,.72); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.b-motion-toggle:hover { background: rgba(11,15,26,.9); border-color: rgba(255,255,255,.5); }
.b-motion-toggle:focus-visible { outline: 3px solid #C4B5FD; outline-offset: 2px; }
.b-btn[aria-disabled="true"] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .b-motion-toggle { display: none; } }
html:not(.js) .b-motion-toggle { display: none; }

/* ── 17 · Illustrated scenes (inline SVG, class sc-scene; see assets/scenes/) ──
   The scene plays once reveal.js adds is-on; the pause control adds is-paused and
   this page-level guard covers any scene that lacks its own mirror rule. */
.sc-scene { display: block; width: 100%; height: auto; }
html.motion-paused .sc-scene :is(.pulse, .halo, .mote, .cloud, .cloud-a, .cloud-b, .sweep, .pl) { animation-play-state: paused !important; }
.m-scene { position: relative; }
.m-scene > .sc-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.m-scene > .b-wrap { position: relative; z-index: 1; }
/* Hero mount: the scene is a bottom band at its own aspect ratio, never cropped sideways.
   The hero grows so the structures (the lower 60% of the band) sit below the copy. */
.b-hero--scene { isolation: isolate; min-height: clamp(600px, 64vw, 900px); display: flex; flex-direction: column; justify-content: flex-start; }
.b-hero--scene > .b-hero-scene { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; overflow: hidden; display: flex; justify-content: flex-end; }
.b-hero--scene > .b-hero-scene > .sc-scene { width: 100%; height: auto; display: block; flex: none; }
.b-hero--scene > .b-wrap { position: relative; z-index: 1; }
.b-hero--scene > .b-motion-toggle { right: auto; left: 20px; }
.b-section--motion { position: relative; }
.b-section--motion > .b-motion-toggle { right: 20px; bottom: 18px; }  /* the scene's quiet third; the destination sits right */
@media (max-width: 768px) {
  /* keep the destination (right end of the corridor) in view: the scene is wider than the phone and anchored right */
  .b-hero--scene { min-height: 760px; }
  .b-hero--scene > .b-hero-scene > .sc-scene { width: 900px; }
}
/* Band mount: a wide scene behind a statement; copy sits in the upper part, the art holds the floor. */
.m-scene--band { min-height: 600px; display: flex; flex-direction: column; justify-content: flex-start; }
.m-scene--band > .sc-scene { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: auto; }
@media (max-width: 768px) { .m-scene--band { min-height: 0; padding-bottom: 36vw; } }
/* Figures and strips inside the content column. */
.b-figure-scene { margin: 0; }
.b-figure-scene > .sc-scene { width: 100%; height: auto; }
.b-scene-strip { margin-top: 36px; }
.b-head--tight { margin-bottom: 0; }
.b-split > div > .b-lede:first-child { margin-top: 0; }
.b-feature--art-left > .b-figure-scene { order: -1; }
.b-scene-strip > .sc-scene { width: 100%; height: auto; }
.m-scene--band.m-scene--band-tall { padding-bottom: calc(29.2vw + 32px); }   /* a band carrying a head and rows: reserve the 1440×420 scene's own height below the copy */
/* Door cards: a button CTA may wrap, and every card's action sits on the same baseline */
.b-card .b-actions { margin-top: auto; }
.b-card .b-actions .b-btn { white-space: normal; line-height: 1.35; text-align: center; }
.b-hero > .m-plate > .m-plate-bg { inset: -12% 0; height: auto; }

/* ── 18 · Bold-pass components (2026-10-24; additive; BOLD_SPEC.md part 4) ──
   Five format families built for big type and few words: the numbered path
   (.b-path), the bold-claim tile band (.b-tiles), the one closing band
   (.b-close), the press quote stack (.b-quote) and the pull line (.b-pull),
   plus three modifiers (.b-lede--claim, .b-eyebrow--line, .b-statement on any
   ground). No card chrome anywhere: no border, no fill, no radius. Every one
   sits on paper, sand or ink through --b-ground, carries the reveal grammar
   (.rv / .m-stagger / .m-mask / .m-line) and resolves to a complete, still
   frame under prefers-reduced-motion and with JS off. Tokens only. */

/* 18.0 · Ground token + path sizes (read by siblings such as .b-pull) */
:root {
  --b-ground: var(--b-paper);
  --b-path-pad:  clamp(56px, 6vw, 84px);    /* left reserve for the index column */
  --b-step-disc: clamp(44px, 4.6vw, 60px);  /* the index disc; the rule runs through its centre */
  --b-step-h:    clamp(26px, 2.6vw, 38px);  /* step head size; the index centres on its first line */
  --b-step-num:  clamp(28px, 3vw, 40px);    /* the index digit, DM Mono */
}
.b-section { --b-ground: var(--b-paper); }
.b-section--sand { --b-ground: var(--b-sand); }
.b-section--ink, .b-hero { --b-ground: var(--b-ink); }
.b-hero--paper { --b-ground: var(--b-paper); }

/* 18.1 · .b-path — the numbered path. Stacked at every width by default: one
   column, a continuous 2px rule down the left, a display-size counter on the
   rule inside a disc of the ground colour. Never a grid of cards. */
.b-path {
  --b-path-rule: var(--b-violet);
  --b-path-num:  var(--b-violet-dk);
  --b-path-cols: 3;
  list-style: none; counter-reset: b-step;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(28px, 4vw, 44px); max-width: 960px; padding-left: var(--b-path-pad);
}
.b-section--ink .b-path, .b-hero .b-path { --b-path-rule: var(--b-lilac); --b-path-num: var(--b-lilac); }
/* the rule: from the centre of the first index to the centre of the last */
.b-path::before {
  content: ""; position: absolute;
  top: calc(var(--b-step-h) * 1.08 / 2); bottom: 0;
  left: calc(var(--b-step-disc) / 2 - 1px); width: 2px;
  background: var(--b-path-rule); transform-origin: top center;
  transition: transform 1.1s var(--b-ease) .1s;
}
html.js .b-path.rv::before { transform: scaleY(0); }
html.js .b-path.rv.in::before { transform: scaleY(1); }
.b-step { position: relative; counter-increment: b-step; }
/* the last step blanks the rule below its own index so the path ends on a node */
.b-step:last-child::after {
  content: ""; position: absolute; width: 2px; bottom: 0;
  top: calc(var(--b-step-h) * 1.08 / 2);
  left: calc(-1 * var(--b-path-pad) + var(--b-step-disc) / 2 - 1px);
  background: var(--b-ground);
}
/* the index: a ground-coloured block just taller than the digit, centred on the rule and on the
   head's first line, so the rule passes close behind the number and reads as one line */
.b-step-n {
  position: absolute; left: calc(-1 * var(--b-path-pad));
  top: calc(var(--b-step-h) * 0.54 - .62em);
  width: var(--b-step-disc); height: 1.24em;
  background: var(--b-ground); display: grid; place-items: center;
  font-family: var(--b-mono); font-weight: 500; font-size: var(--b-step-num);
  line-height: 1; color: var(--b-path-num); font-variant-numeric: tabular-nums;
}
.b-step-n::before { content: counter(b-step); }
.b-step-h {
  font-size: var(--b-step-h); font-weight: 800; line-height: 1.08;
  letter-spacing: -.02em; text-wrap: balance;
}
/* the sentence runs long and wraps once (48ch, pretty): no two-word orphan beside the biggest type on
   the page; inside a feature column it takes the column's width */
.b-step-p { font-size: 17px; line-height: 1.55; color: var(--b-muted); max-width: 48ch; margin-top: 10px; text-wrap: pretty; }
.b-section--ink .b-step-p, .b-hero .b-step-p { color: var(--b-muted-dk); }
.b-feature .b-step-p { max-width: none; }
/* .b-path--row: the one horizontal variant, heads only, used where a scene above
   shows the same stages left to right. Three across (.b-path--4 for four); each
   step is CENTRED in its column so index and head sit under the scene's panel
   (a scene drawn in equal thirds, filling the wrap); the rule runs from the first
   index centre to the last and nowhere else; stacked under 768px. */
@media (min-width: 768px) {
  .b-path--row {
    grid-template-columns: repeat(var(--b-path-cols), minmax(0, 1fr));
    row-gap: 0; max-width: none; padding-left: 0;
  }
  .b-path--row.b-path--4 { --b-path-cols: 4; }
  .b-path--row::before {
    top: calc(var(--b-step-num) * .62 - 1px); bottom: auto;
    left: calc(100% / var(--b-path-cols) / 2);
    right: calc(100% / var(--b-path-cols) / 2);
    width: auto; height: 2px; transform-origin: left center;
  }
  html.js .b-path--row.rv::before { transform: scaleX(0); }
  html.js .b-path--row.rv.in::before { transform: scaleX(1); }
  .b-path--row .b-step { padding: 0 clamp(12px, 2vw, 28px); text-align: center; }
  .b-path--row .b-step:last-child::after { display: none; }
  .b-path--row .b-step-n { position: static; margin: 0 auto 22px; }
  .b-path--row .b-step-h { max-width: 14ch; margin: 0 auto; }
}
/* a row that captions a scene sits close under it (the figure carries no margin of its own);
   stacked under 768px it needs a little more air above the first index */
.b-figure-scene + .b-path--row { margin-top: clamp(24px, 2.4vw, 32px); }
@media (max-width: 767px) { .b-figure-scene + .b-path--row { margin-top: 36px; } }

/* 18.2 · .b-tiles — the bold-claim band. Three to six tiles, each ONE claim in
   display weight above a 1px hairline. No border, fill or radius. */
.b-tiles {
  --b-tile-line: var(--b-line);
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 56px) clamp(28px, 3.5vw, 48px);
}
.b-section--ink .b-tiles, .b-hero .b-tiles { --b-tile-line: var(--b-line-dk); }
.b-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-tile { position: relative; padding-top: 22px; display: flex; flex-direction: column; align-items: flex-start; }
/* the hairline draws in with the reveal, like .m-line */
.b-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--b-tile-line); transform-origin: left center;
  transition: transform 1.1s var(--b-ease) .1s;
}
html.js .b-tiles.rv .b-tile::before { transform: scaleX(0); }
html.js .b-tiles.rv.in .b-tile::before { transform: scaleX(1); }
.b-tiles.in .b-tile:nth-child(2)::before { transition-delay: .2s; }
.b-tiles.in .b-tile:nth-child(3)::before { transition-delay: .3s; }
.b-tiles.in .b-tile:nth-child(4)::before { transition-delay: .4s; }
.b-tiles.in .b-tile:nth-child(5)::before { transition-delay: .5s; }
.b-tiles.in .b-tile:nth-child(6)::before { transition-delay: .6s; }
.b-tile-fig { margin: 0 0 18px; width: 40px; height: 40px; }
.b-tile-fig > svg, .b-tile-fig > img { width: 100%; height: 100%; }
.b-tile-h {
  font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.15;
  letter-spacing: -.018em; text-wrap: balance;
}
.b-tile-p { font-size: 16.5px; line-height: 1.55; color: var(--b-muted); margin-top: 12px; max-width: 34ch; text-wrap: pretty; }
.b-section--ink .b-tile-p, .b-hero .b-tile-p { color: var(--b-muted-dk); }
.b-tiles + .b-actions { margin-top: clamp(40px, 5vw, 56px); }
/* --audience: a small mono tag names the audience, the h3 is the CLAIM addressed to
   them in display weight, the p (optional) one clause of at most twelve words. The
   audience never sits in the big type: a bare noun over a sentence is the rejected
   row turned ninety degrees. */
.b-tile-tag {
  display: block; margin: 0 0 14px; font-family: var(--b-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--b-violet-dk);
}
.b-section--ink .b-tile-tag, .b-hero .b-tile-tag { color: var(--b-lilac); }
.b-tiles--audience .b-tile-p { font-size: 16.5px; margin-top: 12px; max-width: 30ch; }
/* --4 at four across: the head steps down so a claim holds two lines in a 300px column */
@media (min-width: 1025px) {
  .b-tiles--4 .b-tile-h { font-size: clamp(21px, 1.6vw, 24px); }
}
/* --facts: a two-column fact sheet; each h3 is a fact written as a sentence. */
.b-tiles--facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 44px) clamp(40px, 5vw, 72px); }
.b-tiles--facts .b-tile-h { font-size: clamp(20px, 1.7vw, 25px); font-weight: 700; letter-spacing: -.015em; }
.b-tiles--facts .b-tile-p { font-size: 16px; max-width: 46ch; }
/* --list: one column, each h3 a link in display weight, hairlines between. The list spans
   the wrap so its hairlines match the head rule; the measure sits on the h3. */
.b-tiles--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.b-tiles--list .b-tile { padding: clamp(24px, 2.6vw, 34px) 0; }
.b-tiles--list .b-tile:last-child { border-bottom: 1px solid var(--b-tile-line); }
.b-tiles--list .b-tile-h { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; max-width: 30ch; }
.b-tiles--list .b-tile-h a { color: inherit; text-decoration: none; transition: color .25s; }
.b-tiles--list .b-tile-h a::after { content: "\00a0→" / ""; color: var(--b-violet-dk); font-weight: 600; display: inline-block; transition: transform .25s var(--b-ease); }
.b-tiles--list .b-tile-h a:hover { color: var(--b-violet-dk); }
.b-tiles--list .b-tile-h a:hover::after { transform: translateX(4px); }
.b-section--ink .b-tiles--list .b-tile-h a::after { color: var(--b-lilac); }
.b-section--ink .b-tiles--list .b-tile-h a:hover { color: var(--b-lilac); }
/* --assets: the figure sits on its own ground swatch with one download link under it
   (a file download is not a page action). */
.b-tiles--assets .b-tile-fig {
  width: 100%; height: clamp(176px, 15vw, 232px); display: grid; place-items: center;
  padding: 24px; margin-bottom: 20px;
}
.b-tiles--assets .b-tile-fig > img, .b-tiles--assets .b-tile-fig > svg { width: auto; height: auto; max-width: 64%; max-height: 54%; }
.b-tile-fig--ink { background: var(--b-ink); }
.b-tile-fig--paper { background: var(--b-paper); box-shadow: inset 0 0 0 1px var(--b-line); }
.b-tiles--assets .b-tile-h { font-size: clamp(18px, 1.4vw, 21px); font-weight: 700; letter-spacing: -.012em; }
.b-tiles--assets .b-link { margin-top: 14px; }

/* 18.3 · .b-close — the one closing band: the existing ink tight split, named.
   One faint lavender line runs along the band's floor. The home page alone adds
   one quiet owners' line under the button (.b-close-aside). */
.b-close { position: relative; overflow: hidden; }
.b-close::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(196,181,253,.38) 22%, rgba(196,181,253,.38) 78%, transparent 100%);
}
/* the close takes its own column ratio (52/48) so a ten-word head breaks in three lines, not four */
@media (min-width: 1025px) {
  .b-close .b-split { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
}
.b-close .b-lede { max-width: 40ch; }
.b-close .b-actions { margin-top: 28px; }
.b-close-aside { margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--b-muted-dk); max-width: 46ch; }
.b-close-aside a { color: inherit; text-decoration: underline; text-decoration-color: rgba(196,181,253,.55); text-underline-offset: 3px; transition: color .25s; }
.b-close-aside a:hover { color: var(--b-lilac); text-decoration-color: currentColor; }

/* 18.4 · .b-quote — the press quote stack: a size tag and one paragraph in
   reading-size display type, a 2px violet rule on the left. Sand or paper. */
.b-quotes { display: grid; row-gap: 40px; }
.b-quote { margin: 0; border-left: 2px solid var(--b-violet); padding-left: 24px; }
.b-quote-tag {
  display: block; font-family: var(--b-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--b-violet-dk); margin-bottom: 12px;
}
.b-quote p { font-size: clamp(19px, 1.7vw, 25px); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; max-width: 62ch; color: var(--b-text); text-wrap: pretty; }
.b-quote p + p { margin-top: .8em; }
.b-section--ink .b-quote { border-color: var(--b-lilac); }
.b-section--ink .b-quote-tag { color: var(--b-lilac); }
.b-section--ink .b-quote p { color: var(--b-text-dk); }

/* 18.5 · .b-pull — the pull line: one bold sentence that restates a block for
   the skimmer, after a feature paragraph or under a path. It carries a mark that
   says "conclusion, not head, not step": a 2px violet-dk rule on its left edge
   (the .b-quote rule) and violet-dk type (lilac on ink), so neither colour nor
   weight is a head's. Under a path the rule sits in the index column, on the
   path rule's own x, as the path's end-cap, and the text aligns with the step
   heads. At most one per block. */
.b-pull {
  font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
  max-width: 24ch; margin-top: 28px; color: var(--b-violet-dk); text-wrap: balance;
  border-left: 2px solid var(--b-violet-dk); padding-left: 22px;
}
.b-section--ink .b-pull, .b-hero .b-pull { color: var(--b-lilac); border-color: var(--b-lilac); }
.b-path + .b-pull {
  margin-top: clamp(48px, 5vw, 72px);
  margin-left: calc(var(--b-step-disc) / 2 - 1px);
  padding-left: calc(var(--b-path-pad) - var(--b-step-disc) / 2 + 1px);
  max-width: calc(24ch + var(--b-path-pad));
}
/* features that carry a path or a portrait take their own column ratio */
@media (min-width: 921px) {
  /* the path needs the width, the scene does not: 56 copy / 44 scene (art-left: scene first) */
  .b-feature--path { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
  .b-feature--art-left.b-feature--path { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
}
/* a portrait feature keeps two columns down to 768px (portrait at 40%) so a tablet never opens on
   a full viewport of photograph before the head */
@media (min-width: 768px) and (max-width: 920px) {
  .b-feature--portrait { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* 18.6 · Modifiers on existing elements */
/* the profile hero's one claim under the name */
.b-lede--claim { font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--b-text); max-width: 30ch; margin-top: 22px; }
.b-section--ink .b-lede--claim, .b-hero .b-lede--claim { color: var(--b-text-dk); }
.b-hero--paper .b-lede--claim { color: var(--b-text); }
/* the home hero's three-fragment eyebrow line in place of a category word */
.b-eyebrow--line {
  font-family: var(--b-sans); font-size: clamp(15px, 1.15vw, 17px); font-weight: 600; line-height: 1.45;
  letter-spacing: -.005em; text-transform: none; color: var(--b-lilac); max-width: 52ch; margin-bottom: 22px;
}
.b-hero--paper .b-eyebrow--line { color: var(--b-violet-dk); }
/* .b-statement carries size only and sits on any ground */
.b-section:not(.b-section--ink) .b-statement { color: var(--b-text); }

/* 18.7 · Responsive: stack below 768px (gutters come from .b-wrap); --4 goes two up under 1024px */
@media (max-width: 1024px) {
  .b-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the pull keeps the paragraph's measure: one long bold line, not a three-line stack shaped like a head */
  .b-pull { max-width: 36ch; }
  .b-path + .b-pull { max-width: calc(36ch + var(--b-path-pad)); }
}
@media (max-width: 767px) {
  .b-tiles, .b-tiles--2, .b-tiles--3, .b-tiles--4, .b-tiles--audience, .b-tiles--facts { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .b-tiles--list { gap: 0; }
  .b-path { max-width: none; }
  .b-path--row { row-gap: 40px; }   /* heads-only steps: keep enough rule between the indices to read as one line */
  .b-step-p, .b-tile-p { max-width: none; }
  .b-path + .b-pull { max-width: none; }
  .b-feature--portrait .b-portrait { max-width: 480px; }
}
/* 18.8 · Reduced motion: every drawn rule and hairline is complete and still */
@media (prefers-reduced-motion: reduce) {
  html.js .b-path.rv::before, html.js .b-path--row.rv::before, html.js .b-tiles.rv .b-tile::before,
  .b-path::before, .b-tile::before { transform: none; transition: none; }
  .b-tiles--list .b-tile-h a, .b-tiles--list .b-tile-h a::after, .b-close-aside a { transition: none; }
}

/* 18x — audit fixes routed to the components owner */
.b-figure-scene--trim { overflow: hidden; }                       /* S5 under a phrase row: crop the scene's blank sky and foot */
.b-figure-scene--trim > .sc-scene { margin: -7.9% 0 -4%; }
@media (max-width: 680px) { .b-people--lead { grid-template-columns: minmax(0, 1fr); } }   /* two founder cards stack on phones */
.b-people--lead.b-people--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
@media (max-width: 900px) { .b-people--lead.b-people--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .b-people--lead.b-people--3 { grid-template-columns: minmax(0, 1fr); } }   /* the two-class rule above outranked the phone stacking rule */

/* ═══ 19. THEME RESTORED (Matthew, 24 Oct evening: "we had the perfect designs on the last output") ═══
   The bold-pass copy stays; the clarity-pass look comes back: numbered kickers with ghost numerals (markup),
   paths as hairline rows (claim in the label column, sentence beside it), tiles with the card chrome. */
.b-path:not(.b-path--row) { padding-left: 0; max-width: none; row-gap: 0; border-top: 1px solid var(--b-line); }
.b-path:not(.b-path--row)::before { display: none; }
.b-path:not(.b-path--row) .b-step { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--b-line); }
.b-path:not(.b-path--row) .b-step-n, .b-path:not(.b-path--row) .b-step:last-child::after { display: none; }
.b-path:not(.b-path--row) .b-step-h { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; }
.b-path:not(.b-path--row) .b-step-p { font-size: 17px; line-height: 1.6; max-width: 64ch; margin-top: 0; }
.b-feature .b-path:not(.b-path--row) .b-step { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
.b-section--ink .b-path:not(.b-path--row), .b-section--ink .b-path:not(.b-path--row) .b-step { border-color: var(--b-line-dk); }
.b-path + .b-pull { margin-left: 0; padding-left: 0; }
.b-tiles:not(.b-tiles--list):not(.b-tiles--facts):not(.b-tiles--assets) { gap: 24px; }
.b-tiles:not(.b-tiles--list):not(.b-tiles--facts):not(.b-tiles--assets) .b-tile {
  padding: 34px 32px; background: var(--b-paper); border: 1px solid var(--b-line); border-radius: 4px; gap: 14px; }
.b-tiles:not(.b-tiles--list):not(.b-tiles--facts):not(.b-tiles--assets) .b-tile::before { display: none; }
.b-tiles:not(.b-tiles--list):not(.b-tiles--facts):not(.b-tiles--assets) .b-tile-h { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; }
.b-tiles:not(.b-tiles--list):not(.b-tiles--facts):not(.b-tiles--assets) .b-tile-p { margin-top: 0; }
.b-tiles:not(.b-tiles--list):not(.b-tiles--facts):not(.b-tiles--assets) .b-tile-tag { margin-bottom: 0; }
.b-section--ink .b-tiles .b-tile { background: rgba(255,255,255,.03); border-color: var(--b-line-dk); }
@media (max-width: 680px) {
  .b-path:not(.b-path--row) .b-step, .b-feature .b-path:not(.b-path--row) .b-step { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .b-tiles:not(.b-tiles--list):not(.b-tiles--facts):not(.b-tiles--assets) .b-tile { padding: 28px 24px; }
}

/* ═══ 20. EDITORIAL PASS (2026-10-25; additive; EDITORIAL_SPEC.md part 3) ═══
   Home and For Operators only. New modifier classes beside the existing ones; nothing above this
   line changes. The page's big ideas sit in large unboxed type; hairline rows stay where they
   carry detail. Tokens only. */

/* 20.1 · Hero, editorial (home): the copy column pulled up and narrowed, the corridor drawn larger
   so it owns the frame, and a two-sentence h1 (VARIANT B) that breaks on its own lines. */
.b-hero--editorial { padding-top: calc(var(--b-nav-h) + clamp(72px, 10vw, 128px)); }   /* same (0,1,0) as .b-hero, later in source */
.b-hero--editorial .b-lede { max-width: 54ch; }
.b-hero--editorial .b-display .b-line { display: block; }
.b-hero--editorial .b-actions { margin-top: 40px; }
@media (min-width: 769px) {
  /* S1 keeps its own xMidYMax slice: at 44vw the drawn window is x 84 to 1356 of 1440, inside the
     author's safe window (144 to 1296), so nothing in the story is cut; the ground stays on the floor */
  .b-hero--editorial > .b-hero-scene > .sc-scene { height: 44vw; }   /* same (0,3,0) as the mount's height: auto, later in source */
}
@media (max-width: 768px) {
  /* the mount's 900px phone scene puts the story cluster in its bottom 161px; reserve that plus clearance */
  .b-hero--editorial { padding-bottom: 212px; }
}

/* 20.2 · The one explanation: an oversized statement in three fragments, one per line, and one
   short paragraph set off to the right under a short drawn rule. The statement is the h2. */
.b-statement--xl {
  font-size: clamp(34px, 4.6vw, 66px); font-weight: 800; line-height: 1.04; letter-spacing: -.032em;
  max-width: 26ch; text-wrap: balance;
}
.b-statement--xl .b-line { display: block; }
.b-explain {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 clamp(32px, 5vw, 72px); margin-top: clamp(32px, 4vw, 56px);
}
.b-explain > * { grid-column: 2; }
.b-explain .m-line { width: 56px; margin-bottom: 22px; }   /* beats .m-line's width: 100% at (0,2,0) */
.b-explain .b-lede { margin-top: 0; max-width: 46ch; }

/* 20.3 · Routes: audience rows under the kicker alone, never cards. A hairline draws in above each
   row and one closes the list; the audience is a mono tag over the claim (an h2 in display weight);
   the sentence starts on the claim's first line, one link under it. */
.b-routes { --b-route-line: var(--b-line); list-style: none; margin-top: 8px; }
.b-section--ink .b-routes { --b-route-line: var(--b-line-dk); }
.b-route {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 clamp(24px, 4vw, 64px); align-items: start; padding: clamp(36px, 4vw, 56px) 0;
}
.b-route::before, .b-route:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--b-route-line); transform-origin: left center;
  transition: transform 1.1s var(--b-ease) .1s;
}
.b-route::before { top: 0; }
.b-route:last-child::after { bottom: 0; }
html.js .b-routes.rv .b-route::before, html.js .b-routes.rv .b-route:last-child::after { transform: scaleX(0); }
html.js .b-routes.rv.in .b-route::before, html.js .b-routes.rv.in .b-route:last-child::after { transform: scaleX(1); }
.b-routes.in .b-route:nth-child(2)::before { transition-delay: .2s; }
.b-routes.in .b-route:nth-child(3)::before { transition-delay: .3s; }
.b-routes.in .b-route:last-child::after { transition-delay: .4s; }
.b-route > div:last-child { padding-top: calc(11.5px * 1.4 + 14px); }   /* the tag's line plus its margin: the sentence starts beside the claim, not the tag */
.b-route-tag {
  display: block; margin: 0 0 14px; font-family: var(--b-mono); font-size: 11.5px; line-height: 1.4; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--b-violet-dk);
}
.b-section--ink .b-route-tag { color: var(--b-lilac); }
.b-route-h {
  font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.08; letter-spacing: -.028em;
  max-width: 20ch; text-wrap: balance;
}
.b-route-p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--b-muted); max-width: 46ch; text-wrap: pretty; }
.b-section--ink .b-route-p { color: var(--b-muted-dk); }
.b-route .b-link { margin-top: 18px; }   /* .b-link is inline-flex, so the margin takes */

/* 20.4 · People on the home page: the three developers across the wrap, no card chrome; on phones a
   portrait beside the words instead of three full-width squares. */
.b-people--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: clamp(40px, 5vw, 64px); }
.b-people--home .b-portrait { height: auto; }   /* the img's height attribute (a presentational 640px) beat .b-portrait's aspect-ratio: 1:1 squares, 360px here and 104px on phones (render check 2026-10-25) */

/* 20.5 · The short close: no seam (the towns scene's own floor is the divider), air instead; head
   and button on one centred line. */
.b-close--short { padding-top: clamp(72px, 9vw, 120px); }   /* same (0,1,0) as .b-section--tight, later in source */
.b-close--short .b-split { align-items: center; }
.b-close--short .b-actions { margin-top: 0; }   /* later than .b-close .b-actions at the same (0,2,0) */
.b-close--short .b-close-aside { margin-top: 16px; }

/* 20.6 · Operators: S5 as the page's one picture, edge to edge and untrimmed on desktop, with the
   three forms as plain captions whose columns are the scene's thirds. The row variant's centring
   stays; the index digits and the connecting rule go (the three are alternatives, and the scene's own
   conductor is the line through them). */
.b-section--bleed { overflow-x: clip; }   /* a 100vw child never adds a sideways scroll beside a desktop scrollbar */
.b-figure-scene--bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }   /* same (0,1,0) as .b-figure-scene, later in source */
.b-path--unnumbered { padding-left: 0; }
.b-path--unnumbered::before,
.b-path--unnumbered .b-step-n,
.b-path--unnumbered .b-step:last-child::after { display: none; }
.b-path--unnumbered .b-step-h { font-size: clamp(24px, 2.2vw, 32px); }
.b-path--unnumbered + .b-actions { justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) {
  .b-path--row.b-path--bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }   /* the captions' thirds are the scene's thirds; .b-step keeps its own inset */
  .b-path--row.b-path--unnumbered .b-step-p { margin: 10px auto 0; max-width: 30ch; }
}
@media (max-width: 680px) {
  /* phones only: the section 19 trim, written here so the desktop figure stays whole */
  .b-figure-scene--bleed { overflow: hidden; }
  .b-figure-scene--bleed > .sc-scene { margin: -7.9% 0 -4%; }
  .b-section--motion .b-path--unnumbered + .b-actions { margin-bottom: 40px; }   /* the centred link clears the pause control at the section's bottom right (phone render 2026-10-25: they sat a few px apart) */
}

/* 20.7 · Responsive */
@media (max-width: 920px) {
  .b-route { grid-template-columns: minmax(0, 1fr); gap: 14px 0; padding: 28px 0; }
  .b-route > div:last-child { padding-top: 0; }
  .b-route-h, .b-route-p { max-width: none; }
  .b-route .b-link { margin-top: 12px; }
  .b-people--home { gap: 32px 24px; }
}
@media (max-width: 680px) {
  .b-people--home { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .b-people--home .b-person {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: start;
  }   /* (0,2,0): beats .b-person's flex column */
  .b-people--home .b-person > .b-portrait { grid-column: 1; grid-row: 1 / span 3; }   /* name, role, line beside it */
  .b-people--home .b-person > :not(.b-portrait) { grid-column: 2; }
  .b-people--home .b-person-line { margin-top: 6px; max-width: none; }
  .b-explain { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .b-explain > * { grid-column: 1; }
  .b-explain .b-lede { max-width: none; }
  .b-close--short .b-actions { margin-top: 24px; }
}

/* 20.8 · Reduced motion: the route hairlines are complete and still */
@media (prefers-reduced-motion: reduce) {
  html.js .b-routes.rv .b-route::before, html.js .b-routes.rv .b-route:last-child::after,
  .b-route::before, .b-route:last-child::after { transform: none; transition: none; }
}

/* 20.9 · Operators, after the render judge (VISUAL_JUDGE.md, 2026-10-25: findings 2, 3, 8 and 12).
   Appended, never edited above: each rule wins by source order at equal or higher specificity. */
@media (min-width: 768px) {
  /* 2: the three caption claims each hold one line so the three sentences share a baseline; 22ch
     (about 480px at 32px) is wider than the third's 424px of content, so the column bounds it */
  .b-path--row.b-path--unnumbered .b-step-h { max-width: 22ch; }   /* (0,3,0) over .b-path--row .b-step-h's 14ch */
}
@media (min-width: 681px) {
  /* 3: the scene's blank sky (viewBox y 0 to 95, 7.9 percent of its width) read as a hole between
     the head and the page's one picture; crop 7.5 percent so the crossarms sit about 73px under the
     m-line at 1440 (the head's 64px margin plus 9px of air). The scene has no content up there. */
  .b-figure-scene--bleed { overflow: hidden; }
  .b-figure-scene--bleed > .sc-scene { margin-top: -7.5%; }
}
@media (max-width: 680px) {
  /* 8: phones trim less. The scene at the viewport's width is 131px tall; the outer parcels' corner
     marks sit 10px from each edge, so it cannot be drawn larger without cutting them. The sky and
     foot trims shrink to about 20px and 8px, leaving the crossarms and the marks their air. */
  .b-figure-scene--bleed > .sc-scene { margin: -5.3% 0 -2.1%; }   /* later than 20.6's -7.9% 0 -4% at the same (0,2,0) */
}
/* 12: a forced line inside a chapter head ("Send us your / requirement." on phones and desktop alike) */
.b-h2 .b-line { display: block; }

/* 20.10 · Home, after the render judge (VISUAL_JUDGE.md, 2026-10-25: findings 1, 4, 5, 6 and the
   nits 9 and 11). Appended, never edited above: each rule wins by source order at equal or higher
   specificity. */
@media (max-width: 768px) {
  /* 1: the mount's 900px phone scene never drew. Section 1's `img, svg { max-width: 100% }` capped
     the corridor at the viewport (375px wide, 146px tall), so the substation sat under the pause chip
     and the 212px reservation held empty ink. The scene is now 1000px wide (scale .694 of its 1440
     viewBox), anchored so viewBox x 1300 meets the right edge (margin-right = -140 / 1440 * 1000px):
     a 375 phone shows x 760 to 1300 (tower two, tower three, the takeoff, the lit shell, the hall and
     the town), a 768 tablet x 194 to 1300 (the whole corridor from the substation on). The story
     cluster (viewBox y 302 to 560) stands 179px on the hero floor; the reservation is that plus 48. */
  .b-hero--editorial { padding-bottom: 227px; }   /* later than 20.1's 212px at (0,1,0) */
  .b-hero--editorial > .b-hero-scene > .sc-scene { width: 1000px; max-width: none; margin-right: -97px; }   /* (0,3,0), later than the mount's 900px; max-width beats section 1's (0,0,1) */
  /* 1: the pause control leaves the scene: right-aligned in the sky above the hall and the town
     (their roofs, viewBox y 412, stand 103px above the floor; the chip's foot sits 12px over them)
     and clear of tower three's arm (viewBox x 1013, 176px from the left edge at 375). */
  .b-hero--editorial > .b-motion-toggle { left: auto; right: 20px; bottom: 115px; }   /* later than .b-hero--scene's left: 20px at (0,2,0) */
}
/* 5: a head carrying the kicker alone (home 02) keeps its ghost above the first route's hairline:
   the numeral's box runs .45em below the head (90px at 1440) and its ink about 65px, past the 41px
   where the rule sat. 40px of padding puts the rule at 81px; phones never overshot, so 8px there. */
.b-head--solo { padding-bottom: clamp(8px, 2.8vw, 40px); }
@media (min-width: 1025px) {
  /* 4: the evidence head (home 03) takes the wider column, the lede the narrower one on the right,
     so the 50px h2 sets in two lines ("Our developers have spent" is 629px wide, "their careers
     building power." 670px, measured with the site's fonts) instead of four two-word lines beside
     empty space; 2fr of the 1056px content is 704px, 7fr of 12 would be 622 and still three lines */
  .b-split--wide-head { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }   /* later than .b-split at (0,1,0); .b-split's ≤1024 stacking rule is untouched */
}
@media (max-width: 1024px) {
  /* 6: stacked, the lede follows the m-line at 28px; the head's 64px margin plus the split's row gap
     read as a hole on phones */
  .b-split--wide-head { row-gap: 0; }
  .b-split--wide-head > .b-head { margin-bottom: 28px; }   /* (0,2,0) over .b-head's margin */
}
@media (max-width: 400px) {
  /* nit 9: at 34px the second fragment ("We line up the power.", 337px) overran the 335px gutter and
     wrapped; at 32px it is 317px and the first 314px, so only the third fragment wraps, as the spec
     says, down to a 360px phone (320px of gutter) */
  .b-statement--xl { font-size: 32px; }   /* later than 20.2's clamp at (0,1,0) */
}
@media (min-width: 1025px) {
  /* nit 10: the home close carries no lede, so its head takes the wider column (704px at 1440) and
     the ten-word h2 sets in two lines on its own break ("or tell us the power you need." is 684px);
     the site-wide 52/48 close split stays on every other page */
  .b-close--short .b-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }   /* later than .b-close .b-split at (0,2,0) */
}
.b-close--short .b-h2 .b-line { display: block; }

/* ═══ 21. ROUND TWO MODIFIERS (2026-10-25; additive; ROUND2_DECK.md part 4.3, ROUND2_CSS.md) ═══
   Three modifiers on .b-routes, one adjacency rule for a pull under a list, and the stagger a
   four-row list needs. Modifier classes only, beside section 20's .b-routes grammar; nothing
   above this line changes, and every rule wins by source order at equal or higher specificity.
   No border, fill or radius anywhere. Tokens only. */

/* 21.1 · .b-routes--untagged (development 01): the two columns and the hairlines with no tag.
   The right column's reserved tag height (the tag's line plus its margin, 20.3) goes, so the
   sentence starts on the claim's first line. */
.b-routes--untagged .b-route > div:last-child { padding-top: 0; }   /* (0,3,1) over .b-route > div:last-child (0,2,1) */

/* 21.2 · .b-routes--stack (acquisitions 02, in the 56fr column of .b-feature--art-left.b-feature--path):
   each row runs one column at every width: tag, claim, sentence, 32px of padding, the same
   hairlines above each row and one closing. The claim holds the column; the column bounds it. */
.b-routes--stack .b-route { grid-template-columns: minmax(0, 1fr); gap: 14px 0; padding: 32px 0; }   /* (0,2,0) over .b-route and over 20.7's ≤920 row */
.b-routes--stack .b-route > div:last-child { padding-top: 0; }
.b-routes--stack .b-route-h { max-width: none; }

/* 21.3 · .b-routes--record (Matthew's profile; ready for Chad's when his record arrives): the claim
   steps down so a credential reads as a record, not a chapter head; the rows sit closer. The floor
   is the phone size the deck names (24px at 375); 30px from 1364px up. */
.b-routes--record .b-route { padding: clamp(24px, 3vw, 40px) 0; }   /* (0,2,0) over .b-route's clamp(36px, 4vw, 56px) */
.b-routes--record .b-route-h { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.022em; }   /* (0,2,0) over .b-route-h */

/* 21.4 · A pull under a list (operators 02): the air a path's pull gets under the closing hairline
   (.b-path + .b-pull, 18.5); .b-pull alone carries 28px. */
.b-routes + .b-pull { margin-top: clamp(40px, 4vw, 56px); }   /* (0,2,0) over .b-pull (0,1,0) */

/* 21.5 · Four rows (development 01, partners 01): 20.3 staggers three hairlines; the fourth row's
   rule and the closing rule take the next two beats instead of drawing with the first. */
.b-routes.in .b-route:nth-child(4)::before { transition-delay: .4s; }
.b-routes.in .b-route:nth-child(4):last-child::after { transition-delay: .5s; }   /* (0,5,1) over 20.3's last-child::after (0,4,1) */

/* 21.6 · Phones */
@media (max-width: 767px) {
  .b-routes + .b-pull { max-width: none; }   /* the pull runs the gutter's width under a stacked list, as .b-path + .b-pull does (18.7) */
}
@media (max-width: 680px) {
  .b-routes--record .b-route-h { font-size: 24px; }   /* the clamp floor, stated where the phone reads it */
  .b-routes--record .b-route { padding: 24px 0; }
  .b-routes--stack .b-route { padding: 32px 0; }      /* the stack keeps its own padding; 20.7's 28px row never reaches it */
}
/* Reduced motion: 20.8 stills every .b-route hairline, the fourth row's included; nothing to add. */

/* 21.7 · .b-feature--copy-split (acquisitions 02, with .b-feature--art-left.b-feature--path): the head, the
   rows and the figure are three children of the feature, not two. Desktop keeps the 44/56 columns with
   the scene left of head and rows (the figure spans both rows, centred); phones run head, scene, rows
   (ROUND2_DECK.md line 243), which a single copy column cannot, since order: -1 lifts the scene above
   the head as well. The figure still follows the copy in the DOM. */
@media (min-width: 921px) {
  .b-feature--copy-split { grid-template-rows: auto minmax(0, 1fr); row-gap: 0; align-items: start; }   /* (0,1,0), later than .b-feature; the head's own 64px margin spaces the rows, not the feature's gap on top of it */
  .b-feature--copy-split > .b-figure-scene { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .b-feature--copy-split > .b-head, .b-feature--copy-split > .b-routes { grid-column: 2; }
}
@media (max-width: 920px) {
  .b-feature--copy-split > .b-head { order: -2; margin-bottom: 28px; }   /* ahead of .b-feature--art-left > .b-figure-scene's -1; stacked, the head sits 28px over the scene (20.10 finding 6), the feature's gap then spaces scene and rows */
}

/* 21.8 · Acquisitions, after the round-two render judge (R2_VISUAL_JUDGE.md findings 7 and 8, nit 19).
   Appended, never edited above: each rule wins by source order at equal or higher specificity. */
/* 8: .b-explain--under: the qualifier sits at the left under the xl statement, about 640px wide at
   1440, so no empty quadrant opens under the statement (20.2's right column was about 450px). */
.b-explain--under { grid-template-columns: minmax(0, 1fr); }   /* (0,1,0), later than .b-explain */
.b-explain--under > * { grid-column: 1; }
.b-explain--under .b-lede { max-width: 58ch; }   /* (0,2,0), later than 20.2's 46ch */
/* 7: the parcel scene leaves the 44fr column and runs the wrap's width under the head, so the owners'
   page has a picture at the scale of the operators scene; the two doors sit side by side under it. */
.b-head + .b-figure-scene:has(+ .b-routes--doors) { margin-top: clamp(-16px, -1vw, -8px); }   /* acquisitions only (the doors follow it): the scene's own sky is the air under the m-line; operators and powered land keep 20.6 and 20.9 */
.b-figure-scene + .b-routes--doors { margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 921px) {
  .b-routes--doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 80px); }
  .b-routes--doors .b-route:last-child::after { display: none; }   /* two columns, one hairline above each door; no closing rule under one of them */
}
/* nit 19: the property form pairs its two choices (Property type, What are you considering) on one
   row; Location takes the full row above them. Markup unchanged. */
@media (min-width: 681px) {
  [data-lead-form="acquisition"] .b-form-grid > .b-field:nth-child(5) { grid-column: 1 / -1; }
}
/* nit 19: a select still on its disabled "Select" placeholder reads muted, not as a chosen value (every form) */
.b-field select:has(> option[value=""]:checked) { color: var(--b-muted); }
.b-field select option { color: var(--b-text); }

/* 21.T · Track Record & Team and the Founders index (R2_VISUAL_JUDGE 2026-10-25: should 10, 17, 18).
   Appended, never edited above; modifier classes and one new component, no border, fill or radius
   beyond .b-portrait's own. Tokens only. */
/* 17: team 01, the three portraits at 4:5 so the names and lines sit nearer the fold (363 x 454 at
   1440, was 363 x 640: the img's height attribute beat .b-portrait's aspect-ratio) */
.b-people--team .b-portrait { aspect-ratio: 4 / 5; height: auto; object-position: 50% 22%; }   /* (0,2,0) over .b-portrait */
/* 10: team 02, the prior experience as person-anchored blocks beside a small portrait, not hairline
   rows: thumbnail, name and claim, the record; no rules between the blocks, air instead */
.b-record { list-style: none; margin-top: 8px; display: grid; gap: clamp(40px, 5vw, 64px); }
.b-record-row {
  display: grid; grid-template-columns: 120px minmax(0, 5fr) minmax(0, 6fr);
  gap: 0 clamp(24px, 3.5vw, 56px); align-items: start;
}
.b-record-row > .b-portrait { width: 120px; height: auto; aspect-ratio: 4 / 5; object-position: 50% 22%; }   /* (0,2,0) */
.b-record-h { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; }
.b-record-p {
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--b-muted); max-width: 52ch; text-wrap: pretty;
  padding-top: calc(11.5px * 1.4 + 14px);   /* the tag's line plus its margin: the record starts beside the claim */
}
/* 18: the founders index, two bio rows across the full wrap (portrait left, words right) instead of
   two narrow cards in an 820px box */
.b-people--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 48px clamp(32px, 5vw, 72px); }   /* later than .b-people--lead at (0,1,0) */
.b-people--pair .b-person {
  display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); column-gap: 28px; row-gap: 14px; align-items: start;
}   /* (0,2,0): beats .b-person's flex column */
.b-people--pair .b-person > .b-portrait { grid-column: 1; grid-row: 1 / span 2; height: auto; }
.b-people--pair .b-person > :not(.b-portrait) { grid-column: 2; }
.b-people--pair .b-person-line { max-width: 42ch; }
@media (max-width: 1024px) {
  .b-people--pair { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}
@media (max-width: 920px) {
  .b-record-row { grid-template-columns: 96px minmax(0, 1fr); row-gap: 12px; }
  .b-record-row > .b-portrait { width: 96px; grid-row: 1 / span 2; }
  .b-record-row > :not(.b-portrait) { grid-column: 2; }
  .b-record-p { padding-top: 0; max-width: none; }
}
@media (max-width: 680px) {
  /* 17: phones read the three developers as thumbnail rows (the home phone layout), not 2.5 screens of faces */
  .b-people--team { gap: 28px; }
  .b-people--team .b-person {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: start;
  }   /* (0,2,0): beats .b-person's flex column */
  .b-people--team .b-person > .b-portrait { grid-column: 1; grid-row: 1 / span 4; }
  .b-people--team .b-person > :not(.b-portrait) { grid-column: 2; }
  .b-people--team .b-person-line { margin-top: 6px; max-width: none; }
  /* 02 follows the thumbnails directly, so its own small portraits leave on phones: one face per person per screen */
  .b-record { gap: 36px; }
  .b-record-row { grid-template-columns: minmax(0, 1fr); }
  .b-record-row > .b-portrait { display: none; }
  .b-record-row > :not(.b-portrait) { grid-column: 1; }
  .b-people--pair .b-person { grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }
  .b-people--pair .b-person-line { max-width: none; }
}
@media (max-width: 680px) {
  /* 7 on phones: the parcel scene runs edge to edge (the gutter's 40px back) and loses a little of its
     empty sky, so it reads as the page's picture rather than a strip; the corner marks keep their air */
  .b-head + .b-figure-scene:has(+ .b-routes--doors) { margin: -4px calc(50% - 50vw) 0; overflow: hidden; }
  .b-head + .b-figure-scene:has(+ .b-routes--doors) > .sc-scene { margin-top: -4%; }
}

/* 21.P · Partners and News & Insights (R2_VISUAL_JUDGE 2026-10-25: blocker 2, should 15 and 16 for the
   partners band, nits 24 and 25). Scoped to classes only these pages carry: .m-scene--band-tall (partners)
   and the .b-article* family (the three articles). */

/* blocker 2 · the article heads open on a brand line scene (the scene file as an image: its finished,
   still picture, since every loop is keyed on .is-on), not a raster plate. The figure takes the scene's
   own proportion and drops its sand fill so no box shows; the ink variant frames an ink-ground scene at
   about 16:6, cropped from the sky down and drawn in to the corridor. The ~190px dead gap under the figure closes to the figure's
   own 48px. */
.b-article-hero--scene { margin-top: 0; }   /* the raster plate tucked 40px under the hero; a line scene would lose its sky to the hero ground */
.b-article-hero--scene .m-figure { aspect-ratio: auto; background: none; border-radius: 0; }
.b-article-hero--scene .m-figure img { height: auto; object-fit: contain; }
.b-article-hero--ink .m-figure { aspect-ratio: 16 / 6; background: var(--b-ink); border-radius: 4px; }
.b-article-hero--ink .m-figure img { height: 100%; object-fit: cover; object-position: 50% 100%; transform: scale(1.5); transform-origin: 76% 92%; }   /* the corridor and the lit site fill the frame; the empty sky is what crops */
.b-article-hero + .b-section { padding-top: 0; }

/* nit 24 · the article's closing ask: a hairline above it, no card */
.b-article-cta { border: 0; border-top: 1px solid var(--b-line); border-radius: 0; padding: 32px 0 0; }

@media (max-width: 680px) {
  /* nit 25 · the byline keeps its dot with its words; the figure sits on the text gutter */
  .b-article-meta { white-space: nowrap; letter-spacing: .12em; }
  .b-article-hero { padding: 0 20px; }
}

/* should 15 and 16 · partners' towns band on phones: the panorama is cropped to its focal span at about
   1.7:1 instead of shrinking to an 80px strip, and the pause control moves off the art into the gutter
   below it. */
@media (max-width: 600px) {
  .m-scene--band.m-scene--band-tall { overflow: hidden; padding-bottom: calc(52.5vw + 76px); }
  .m-scene--band.m-scene--band-tall > .sc-scene { width: 180%; max-width: none; left: -62%; right: auto; bottom: 64px; }
  .m-scene--band.m-scene--band-tall > .b-motion-toggle { bottom: 16px; right: 20px; }
}

/* 21.PD · Powered Land & Shells and Development Capabilities, after the round-two render judge
   (R2_VISUAL_JUDGE.md 2026-10-25: blocker 3, should 4, 5, 8, 10, 15, 16, nit 26, nit 28). Appended,
   never edited above; modifier classes only, no border, fill or radius. Both pages' 02 use 21.8's
   .b-explain--under (finding 8); development 01 uses 18.1's .b-path--row.b-path--4 (finding 10). */
/* Finding 15, powered land on phones. S5 drawn at the viewport's width is 131px tall and the three forms read
   as a thumbnail; the scene cannot be split, so it runs at 210 percent in a sideways strip (each form
   about 262px wide at 375, the next one showing at the right edge as the cue to swipe), captions
   stacked under it as before. (0,2,0) and (0,3,0), later than 20.6, 20.9 and 21.8's .b-head + figure. */
@media (max-width: 680px) {
  .b-figure-scene.b-figure-scene--panels {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .b-figure-scene.b-figure-scene--panels::-webkit-scrollbar { display: none; }
  .b-figure-scene.b-figure-scene--panels > .sc-scene { width: 210%; max-width: none; margin: -11.1% 0 -4.4%; }   /* 20.9's sky and foot trims, scaled by 2.1 */
}
/* Findings 26 and 15, development 03: the disciplines scene as the page's one picture. It runs edge to edge
   and loses the strip below its ground band (viewBox y 336 to 360), so the pale band reads as the
   ground under the four, not as a tinted box with a bottom edge; the pause control sits in the
   gutter under the scene, not on it (16). Phones crop to the focal right half (viewBox x 720 to
   1440: the batteries, the reactor and the lit grid node), 2:1 instead of a 4:1 strip. */
.b-scene-strip--floor { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; }
.b-scene-strip--floor > .sc-scene { margin-bottom: -1.67%; }   /* 24 of 1440 */
.b-section--strip-foot { padding-bottom: 72px; }   /* (0,1,0), later than .b-section */
@media (max-width: 680px) {
  .b-scene-strip--floor > .sc-scene { width: 200%; max-width: none; margin: 0 0 -3.33% -100%; }
  .b-section--strip-foot { padding-bottom: 68px; }
}

/* 21.P · The two profiles and the press kit (R2_VISUAL_JUDGE 2026-10-25: should 13, 14, 18; nit 21).
   Appended, never edited above; modifier classes only, tokens only, no border, fill or radius beyond
   .b-portrait's own. Chad's record (14) rides 21.3's .b-routes--record and needs nothing here. */
/* 13: the co-founder cross-link at about a third of the width (thumbnail, head, link), so each profile
   carries one lead portrait; the img's 880px height attribute gives way to a square */
.b-feature--portrait.b-feature--crosslink { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }   /* (0,2,0) over .b-feature and 18.5's 768-920 portrait columns */
.b-feature--crosslink .b-portrait { height: auto; max-width: 320px; }   /* (0,2,0) */
@media (max-width: 767px) {
  .b-feature--portrait.b-feature--crosslink { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .b-feature--crosslink .b-portrait { max-width: 120px; }   /* a thumbnail above the head, not a second screen of face */
  /* nit 21: stacked under its portrait, a profile head clears the ghost numeral's rise (.55em of 96px) */
  .b-feature--portrait > div > .b-head.m-ghost { margin-top: 32px; }
}
/* 18: the press founders as two full-width bio rows (portrait left, paste-length paragraphs right) on
   the founders index's .b-people--pair, one row per founder so the long bio is not a narrow column */
.b-people--pair.b-people--rows { grid-template-columns: minmax(0, 1fr); max-width: none; gap: clamp(48px, 5vw, 72px); }   /* (0,2,0), later than 21.T's .b-people--pair */
.b-people--rows .b-person { grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); }   /* (0,2,0), later than 21.T */
.b-people--rows .b-person > .b-portrait { grid-row: 1 / span 4; }
.b-people--rows .b-person-line { max-width: 68ch; font-size: 16px; }
.b-people--rows .b-person-line + .b-person-line { margin-top: 0; }
@media (max-width: 1024px) {
  .b-people--pair.b-people--rows { max-width: none; }   /* 21.T caps the pair at 760px here; the rows keep the wrap */
}
@media (max-width: 680px) {
  .b-people--rows .b-person { grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; }
  .b-people--rows .b-person > .b-portrait { grid-row: 1 / span 1; }
  .b-people--rows .b-person > .b-person-line, .b-people--rows .b-person > .b-person-link { grid-column: 1 / -1; }   /* the bio runs the gutter's width under the thumbnail and name */
}
/* 21.PD, continued · 10: development 01, the four stages as a numbered horizontal sequence (18.1's .b-path--row.b-path--4,
   used nowhere else). At four across, 38px heads broke three ways in a 232px column; 28px in a 264px
   column holds each head to two lines and the sentences start level. */
@media (min-width: 768px) {
  .b-path--row.b-path--4 .b-step { padding: 0 clamp(8px, 1.2vw, 16px); }   /* (0,3,0) over 18.1's column inset */
  .b-path--row.b-path--4 .b-step-h { font-size: clamp(24px, 2vw, 28px); max-width: none; min-height: 2.16em; }   /* (0,3,0) over 18.1's (0,2,0); two lines held so the four sentences share a top */
  .b-path--row.b-path--4 .b-step-p { margin: 12px auto 0; max-width: 28ch; }
}

/* 21.H · Home and For Operators, round-two fixes (R2_AUDIT 6 and 10; R2_VISUAL_JUDGE blocker 3 and 8, 9, 10, 11,
   15, 16, 20). Modifier classes only; nothing above changes; each rule wins by source order or by its own class. */

/* judge 8: home 01's qualifier sits at the left under the statement, at a reading width, not in a right-hand column */
.b-explain--under { grid-template-columns: minmax(0, 1fr); }
.b-explain--under > * { grid-column: 1; }
.b-explain--under .b-lede { max-width: 58ch; }   /* (0,2,0), later than 20.2's 46ch */

/* judge 11: the home people block shows small portraits, names, roles and one line each; the team page owns the large set */
@media (min-width: 681px) {
  .b-people--compact { gap: 32px clamp(24px, 3vw, 40px); }
  .b-people--compact .b-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; row-gap: 2px; align-items: start; }
  .b-people--compact .b-person > .b-portrait { grid-column: 1; grid-row: 1 / span 3; width: 96px; }
  .b-people--compact .b-person > :not(.b-portrait) { grid-column: 2; }
  .b-people--compact .b-person-line { margin-top: 6px; max-width: none; }
}
.b-people--compact + .b-actions { margin-top: clamp(32px, 4vw, 48px); }

/* judge 15: on phones the home towns band keeps the town at a readable size (about 1.6:1 around its left half) instead of
   the whole panorama scaled to a strip; the copy reserves the scene's height below it */
@media (max-width: 600px) {
  .m-scene--band-crop { overflow: hidden; padding-bottom: calc(62.4vw + 8px); }
  .m-scene--band-crop > .sc-scene { width: 214vw; max-width: none; left: -30vw; right: auto; }   /* (0,2,0), later than the band mount */
}

/* judge 16: the home hero's pause control takes the same corner as the other scene pages on desktop (bottom right, on
   the floor beside the lit site), and on phones moves off the art to the empty sky under the nav */
.b-hero--editorial > .b-motion-toggle { left: auto; right: 20px; }
@media (max-width: 768px) {
  .b-hero--editorial > .b-motion-toggle { top: calc(var(--b-nav-h) + 16px); bottom: auto; right: 20px; }   /* later than 20.10's bottom: 115px */
}

/* judge 20: the home close aside wraps evenly, never leaving one word alone */
.b-close--short .b-close-aside { text-wrap: balance; }

/* blocker 3, 9, 10: operators 02 is its own composition. S3 leads at the wrap's width, the pause control sits just
   under the art at its right edge, and the three answers run across under it (one column each, a hairline above
   each) instead of the 5/7 rows the home page uses */
.b-figure-scene--lead { position: relative; max-width: 1040px; margin: 0 auto; }
.b-figure-scene--lead > .b-motion-toggle { top: calc(100% + 12px); bottom: auto; right: 0; }
.b-figure-scene--lead + .b-routes { margin-top: clamp(72px, 7vw, 96px); }
.b-routes--across .b-route-h { font-size: clamp(24px, 2.1vw, 30px); max-width: 18ch; }
.b-routes--across .b-route-p { font-size: clamp(16.5px, 1.25vw, 18px); }
@media (min-width: 921px) {
  .b-routes--across { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 3.4vw, 56px); }
  .b-routes--across .b-route:last-child::after { display: none; }   /* three columns, one hairline over each */
  .b-routes--across .b-route { align-content: start; }   /* a shorter column keeps its sentence under its claim; the grid's stretch never spreads its rows */
}
@media (max-width: 680px) {
  .b-figure-scene--lead > .b-motion-toggle { top: calc(100% + 10px); }
  .b-figure-scene--lead + .b-routes { margin-top: 64px; }
}
@media (min-width: 681px) {
  .b-people--compact .b-person { grid-template-rows: auto auto 1fr; }   /* 21.H: the portrait's spare height goes under the line, so every role sits on one baseline */
}

/* ═══ 22. POST-DEPLOY FIXES (2026-10-26) ═══ */
/* 22.1 The legal pages' "Last updated" line is mono, tracked and nowrap: wider than a phone column, it widened the layout
   viewport to 396px and the phone zoomed the page out. Let it wrap on narrow screens. */
@media (max-width: 480px) { .b-article-meta { white-space: normal; } }