/* BNRY site styles. Hand-authored — not generated. */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* ── Ground ──────────────────────────────────────────────────────────
     Dark-dominant, per the BNRY brand system: the mark is an off-white
     solid on black, and every application in the brand sheet is built on
     that ground. Four steps of near-black give the page depth without ever
     reaching for a border to separate two sections.

     This is a committed single-theme design. There is no light variant to
     fall back to, so every colour below is stated explicitly and nothing is
     left to inherit from the host. */
  --paper:      #08090B;   /* the ground everything sits on */
  --surface:    #0E1115;   /* raised: cards, panels */
  --mist:       #101419;   /* the second surface */
  --shallow:    #19202A;   /* rules and fills */
  --deep:       #040507;   /* the deepest band: the portfolio */
  --deep-2:     #0A0E13;

  /* ── System identity ─────────────────────────────────────────────────
     A hue always means "this belongs to that system". All five are tuned
     for a dark ground and clear AA against it. */
  --yfs:        #4ECFA0;   /* emerald  — human development, growth */
  --akili:      #8FA6FF;   /* periwinkle — learning, measurement */
  --vertex:     #E89A5C;   /* amber    — operations, material work */
  --anima:      #5FD4E6;   /* cyan     — neural, associative */
  --execos:     #9FBDD8;   /* steel    — command, oversight */

  /* The tint aliases are retained so any rule still asking for a dark-ground
     variant resolves. On this ground they are the same value. */
  --yfs-lt:     #4ECFA0;
  --akili-lt:   #8FA6FF;
  --vertex-lt:  #E89A5C;
  --anima-lt:   #5FD4E6;
  --execos-lt:  #9FBDD8;

  /* ── Emphasis ────────────────────────────────────────────────────────
     Titanium gold is the brand's signal colour and has one job here: the
     live path — the feedback return, the travelling pulse, the arrival
     bloom. It is never used for ordinary emphasis. */
  --gold:       #D9B370;
  --gold-deep:  #8A6B2E;

  /* Steel blue is the parent-brand accent (brand system: monochrome
     foundations, steel blue, restrained metallic). System hues remain as
     wayfinding — a hue tells you which system you are in, which is
     function rather than decoration. */
  --steel:      #8FB0CC;
  --steel-lt:   #8FB0CC;
  --accent:     #8FB0CC;
  --accent-2:   #A9C6DD;
  --accent-btn: #8FB0CC;

  --ink:        var(--deep);
  --ink-2:      var(--deep-2);
  --charcoal:   var(--deep);
  --soft-white: #ECECE8;   /* the mark's own off-white */
  --neutral:    var(--mist);
  --bg:         var(--paper);
  --bg-2:       var(--mist);
  --fg:         #ECECE8;
  --fg-muted:   #98A3AE;
  --line:       #1C232C;
  --line-ink:   #2A3441;

  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Instrument Fallback", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap: 78rem;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --radius: 2px;
}

/* Metric-adjusted fallbacks so the webfont swap does not reflow. Keep these
   even if the fonts are ever self-hosted. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 92%; }
@font-face { font-family: "Instrument Fallback"; src: local("Arial"); size-adjust: 100%; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* `clip`, NOT `hidden`. overflow-x:hidden makes the body a scroll
     container, which silently kills position:sticky for every descendant —
     it is why the method figure would not pin. `clip` contains the same
     320px overflow without creating a scroll container. */
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 .5em; }
/* Tighter tracking as the size grows — display type set at body tracking
   reads loose and generic. `balance` stops a heading orphaning one word on
   its own line, which is most of what makes a big headline look unconsidered. */
h1 { font-size: clamp(2.25rem, 7vw, 4.25rem); letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(1.6rem, 4.2vw, 2.75rem); letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; overflow-wrap: break-word; }
a { color: var(--accent-btn); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.mono { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow { color: var(--accent-btn); margin-bottom: .75rem; }
.lede { font-size: clamp(1.1rem, 2.5vw, 1.35rem); color: var(--fg-muted); max-width: 46ch; }
.prose { max-width: 46rem; }

/* ---- Skip link + focus -------------------------------------------------- */
.skip-link {
  position: absolute; left: .5rem; top: -3rem;
  background: var(--ink); color: var(--soft-white);
  padding: .6rem 1rem; border-radius: 6px; z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: .5rem; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: 3px; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  color: var(--soft-white);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(120%) blur(6px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--soft-white); text-decoration: none; font-family: var(--font-display); font-weight: 700; }
.brand-word { letter-spacing: .12em; font-size: 1.05rem; }
.brand-mark { flex: none; }
.site-nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.nav-link {
  color: var(--soft-white); text-decoration: none;
  font-size: .95rem; padding: .5rem .6rem; border-radius: 6px;
  background: none; border: 0; cursor: pointer; font-family: var(--font-body);
}
.nav-link:hover { background: rgba(255,255,255,.10); }
/* Single-page nav: the section currently in view. Set by bnry.js; the
   underline is drawn rather than relying on color alone. */
.nav-link.is-current { background: rgba(255,255,255,.10); box-shadow: inset 0 -2px 0 var(--accent-2); }

/* ---- The section grid --------------------------------------------------- */
/* Every section is built from this one unit: a narrow margin column holding
   the section index and label, and a content column holding everything else.
   Repeating a single rhythm down the page is what makes it read as composed
   rather than assembled, and it puts the wide right-hand emptiness of the
   old single-column layout to work. */
.sec-grid { display: grid; gap: .75rem 0; }
.sec-grid > * { min-width: 0; }   /* let canvases and long words shrink */
.sec-meta { display: flex; align-items: baseline; gap: .9rem; }
.sec-index { color: var(--fg-muted); opacity: .55; font-size: .7rem; }
.sec-title { margin-bottom: 0; }
.sec-prose { max-width: 44rem; margin-top: 1.75rem; }
.sec-grid .div-grid,
.sec-grid .spec-list,
.sec-grid .method-layout { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

@media (min-width: 900px) {
  .sec-grid { grid-template-columns: 13rem 1fr; column-gap: 3.5rem; }
  /* Meta sits in the margin; everything else lands in the content column. */
  .sec-meta { grid-column: 1; flex-direction: column; gap: .5rem; padding-top: .55rem; }
  .sec-grid > *:not(.sec-meta) { grid-column: 2; }
  /* Prose stays in the content column, but wide multi-column content takes
     the full measure — three cards squeezed into the content column wrap
     every heading onto three lines, which is the cramping the margin
     rhythm is supposed to avoid. */
  .method-band .method-layout,
  .sec-grid .div-grid { grid-column: 1 / -1; }
}

/* ---- Reveals ------------------------------------------------------------ */
/* Reveals start hidden and are released by bnry.js. With JS off there is
   nothing to release them, so head() ships a <noscript> block that undoes
   this rule — otherwise the whole page would be invisible without scripts.
   CSP allows inline styles, which is what makes that possible. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}

/* Headings wipe up from their own baseline instead of fading. The inset is
   generous on three sides so descenders and italic overhang are never
   clipped mid-transition — only the bottom edge does the masking. */
.reveal-mask { clip-path: inset(-0.25em -0.5em 100% -0.5em); }
.reveal-mask.is-in {
  clip-path: inset(-0.25em -0.5em -0.25em -0.5em);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1),
              clip-path 1s cubic-bezier(.22,.61,.36,1);
}

/* ---- Hero + bands ------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--soft-white);
  padding: clamp(4rem, 12vw, 8rem) 0 clamp(3.5rem, 9vw, 6rem);
  overflow: hidden;
}
/* The field sits behind the words and never competes with them. */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: auto;
}
.hero-inner { position: relative; }
.hero .eyebrow { color: var(--accent-2); }
.hero .lede { color: rgba(245,245,242,.72); }
.hero h1 { max-width: 15ch; margin-bottom: 1.5rem; }
.hero .lede { max-width: 42ch; }

/* A readout across the foot of the hero: what the company actually consists
   of, stated before you scroll. Hairline-separated, monospace — the register
   of an index, not a tagline. */
.hero-foot {
  position: relative; margin-top: clamp(3rem, 8vw, 5.5rem);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: flex-end; justify-content: space-between;
}
.hero-index { display: flex; flex-wrap: wrap; gap: .5rem 0; color: rgba(245,245,242,.5); }
/* Separators as left borders on subsequent items — a pseudo-element with
   negative margins fought the flex gap and landed the rule after the label
   instead of between labels. */
.hero-index span { padding-inline: 1.5rem; }
.hero-index span:first-child { padding-left: 0; }
.hero-index span + span { border-left: 1px solid rgba(245,245,242,.22); }
.hero-cue { color: rgba(245,245,242,.45); margin: 0; display: flex; align-items: center; gap: .6rem; }
.hero-cue::after {
  content: ""; width: 1px; height: 2.2rem;
  background: linear-gradient(var(--accent-2), transparent);
  animation: cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---- Spec list (principles) --------------------------------------------- */
/* Five items in a three-across grid orphan two on a second row. A
   rule-separated list has no orphan at any width and reads as a spec sheet
   rather than five more cards. */
.spec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.spec-row {
  display: grid; gap: .15rem 1.5rem; align-items: baseline;
  grid-template-columns: 2.5rem 1fr;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
/* Same auto-placement trap as .sub-row — the paragraph must not fall into
   the index column at narrow widths. */
.spec-row > h3, .spec-row > p { grid-column: 2; }
.spec-i { color: var(--accent-btn); opacity: .7; font-size: .72rem; }
.spec-row h3 { margin: 0; }
.spec-row p { margin: 0; color: var(--fg-muted); }
@media (min-width: 700px) {
  .spec-row { grid-template-columns: 2.5rem 13rem 1fr; }
  .spec-row p { grid-column: 3; }
}

.band { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.band + .band { border-top: 1px solid var(--line); }
/* Anchor targets sit under the sticky header without this, so jumping to a
   section clipped its own heading. */
.band[id], .hero[id] { scroll-margin-top: 4.5rem; }

/* An ink band mid-page: the film needs a dark beat between the two light
   halves, and About is the reflective moment. */
.band-ink { background: var(--ink); color: var(--soft-white); border-top: 0; }
.band-quiet { background: var(--bg-2); border-top: 0; }
.band-ink .sec-index, .band-ink .cap-note { color: rgba(244,242,236,.45); }
.band-ink h2 { color: var(--soft-white); }
.band-ink p { color: rgba(245,245,242,.75); }
.band-ink .eyebrow { color: var(--accent-2); }
.band-ink + .band { border-top: 0; }

/* ---- Ventures band ------------------------------------------------------ */
/* ---- The Cell: the BNRY motif -------------------------------------------
   Three stepped segments derived from the offset-block mark. Filled = built,
   unfilled = in development. Generated from the same status field that
   writes the disclosure, so it cannot overstate the words beside it. */
.cell { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; }
.cell-seg { width: 9px; background: var(--line); border-radius: 1px; }
.cell-seg.h1 { height: 40%; } .cell-seg.h2 { height: 68%; } .cell-seg.h3 { height: 100%; }
.cell-seg.is-on { background: var(--cell, var(--accent)); }
[data-token="yfs"]    { --cell: var(--yfs); }
[data-token="akili"]  { --cell: var(--akili); }
[data-token="vertex"] { --cell: var(--vertex); }
.band-ink .cell-seg { background: var(--line-ink); }
.band-ink .cell-seg.is-on { background: var(--cell, var(--accent-2)); }

/* ---- Division cards ----------------------------------------------------- */
.div-grid { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line); }
.div-card {
  position: relative; overflow: hidden; display: block;
  text-decoration: none; color: var(--fg); background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: background .35s ease, opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
/* The accent reads as a measured tick against the top rule, not a coloured
   cap on a box — the cards share hairlines and form one structure. */
.div-card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 3.5rem;
  background: var(--cell, var(--accent));
}
.div-card:hover, .div-card:focus-visible { background: #fff; }
.card-glow {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(18rem circle at var(--mx,50%) var(--my,50%),
              color-mix(in srgb, var(--cell, var(--accent)) 13%, transparent), transparent 62%);
}
.div-card:hover .card-glow { opacity: 1; }
.card-body { position: relative; display: block; }
.div-role { display: block; color: var(--fg-muted); margin-bottom: 1.1rem; }
.div-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.div-status { color: var(--cell, var(--accent)); }
.div-name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; letter-spacing: -.018em; line-height: 1.15; margin-bottom: .5rem;
}
.div-sum { display: block; color: var(--fg-muted); margin-bottom: 1.1rem; }
.div-more { display: block; color: var(--cell, var(--accent)); }
.div-card.reveal.is-in {
  transition: background .35s ease, opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}

/* ---- Architecture diagram ------------------------------------------------ */
.arch { margin: clamp(1.75rem,4vw,2.75rem) 0 0; }
.arch-svg { display: block; width: 100%; height: auto; overflow: visible; }
.arch-name { fill: var(--soft-white); font-family: var(--font-display); font-size: 12px; font-weight: 600; }
.arch-label, .arch-sub {
  fill: rgba(244,242,236,.5); font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: .09em;
}
.arch-fb-label { fill: var(--gold); }
.arch-riser, .arch-out, .arch-feedback { stroke-width: 1; }
.arch-div { transition: opacity .3s ease; }
/* Focusing or hovering one division dims the others so its path through the
   substrate is readable. Enhancement only — the figure is complete without it. */
.arch.is-focused .arch-div { opacity: .28; }
.arch.is-focused .arch-div.is-active { opacity: 1; }
.arch figcaption { color: var(--fg-muted); font-size: .9rem; margin-top: 1rem; max-width: 46rem; }
.band-ink .arch figcaption { color: rgba(244,242,236,.6); }

/* ---- Substrate / evidence / pathway lists -------------------------------- */
.sub-list, .ev-list, .path-list { list-style: none; padding: 0; margin: clamp(1.75rem,4vw,2.5rem) 0 0; }
.sub-row, .ev-row, .path-row { padding: 1.05rem 0; border-top: 1px solid var(--line); }
.band-ink .sub-row, .band-ink .ev-row { border-top-color: var(--line-ink); }
.sub-row { display: grid; grid-template-columns: 2.5rem 1fr; gap: .15rem 1.4rem; align-items: baseline; }
/* Three children in a two-column grid: without explicit placement the
   paragraph auto-flows into the 2.5rem index column and every line breaks
   mid-word. The desktop rule below masked this above 700px only. */
.sub-row > h3, .sub-row > p { grid-column: 2; }
.sub-i { color: var(--accent); opacity: .8; font-size: .72rem; }
.sub-row h3, .ev-row h3, .path-row h3 { margin: 0 0 .1rem; }
.sub-row p, .ev-row p, .path-row p { margin: 0; color: var(--fg-muted); }
@media (min-width: 700px) {
  .sub-row { grid-template-columns: 2.5rem 14rem 1fr; }
  .sub-row p { grid-column: 3; }
}
.ev-state {
  display: inline-block; margin-top: .55rem; color: var(--gold-deep);
  border: 1px solid currentColor; padding: .15em .5em; font-size: .68rem;
}

/* ---- Division page blocks ------------------------------------------------ */
.status-band { background: var(--bg-2); }
.status-row { display: flex; align-items: center; gap: .8rem; }
.status-line { margin: 0; color: var(--accent); }
.disclosure-text { max-width: 52rem; color: var(--fg); margin: 1rem 0 0; }
.cap-block { margin-top: 2rem; }
.cap-head { color: rgba(244,242,236,.55); margin-bottom: .8rem; }
/* Six capabilities, always. auto-fit left five in row one and one orphan
   beside a dead block; 2 and 3 both divide 6 exactly. */
.cap-list {
  list-style: none; padding: 0; margin: 0 0 1.1rem;
  display: grid; gap: 1px; background: var(--line-ink);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .cap-list { grid-template-columns: repeat(3, 1fr); } }
.cap-list li { background: var(--ink); padding: .8rem 1rem; font-size: .95rem; }
.cap-note { color: rgba(244,242,236,.55); font-size: .9rem; max-width: 44rem; }
.outcome-line { font-size: 1.15rem; color: var(--fg); }
.seq-tail { font-family: var(--font-body); font-weight: 400; color: var(--fg-muted); font-size: .95rem; }

/* ---- Sequences ---------------------------------------------------------- */
.sequence { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 1.25rem; }
.seq-step { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.seq-num { color: var(--accent-btn); font-size: 1rem; padding-top: .15rem; }
.seq-phase { color: var(--fg-muted); margin-bottom: .15rem; }
.seq-step h3 { margin-bottom: .25rem; }

/* ---- The method stage --------------------------------------------------- */
.method-layout { display: grid; gap: 2rem; margin-top: 2rem; }

/* The canvas pins so the figure holds still while the six movements pass it.
   .method-stage must STRETCH to the full row height (the default) — that
   column is the track the pin travels down. Collapsing it to the canvas's
   own height leaves sticky nothing to stick within, and the figure scrolls
   straight off the top. */
.method-stage { align-self: stretch; }
.stage-pin { position: sticky; top: 5rem; }
.method-canvas {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  max-height: 60vh; margin-inline: auto;
}
.stage-caption {
  text-align: center; color: var(--accent-btn); margin: .25rem 0 0;
  min-height: 1.2em;   /* reserve the line so swapping words never reflows */
}

/* Steps dim until the figure reaches them. The active step is marked by a
   rule and full-strength text, not by colour alone. */
.method-steps .seq-step {
  opacity: .34;
  padding-left: .9rem;
  border-left: 2px solid transparent;
  transition: opacity .5s ease, border-color .5s ease;
}
.method-steps .seq-step.is-active { opacity: 1; border-left-color: var(--accent); }
.method-steps { gap: clamp(1.5rem, 5vh, 3rem); }

@media (min-width: 880px) {
  .method-layout { grid-template-columns: 1fr 1fr; gap: 3rem; }
  /* Extra room at the top and bottom of the list so the figure has scroll to
     travel through — without it the four states flash past in one flick. */
  .method-steps { padding-block: 12vh; }
}
.seq-step p { color: var(--fg-muted); margin: 0; }

/* ---- Disclosure + pending ---------------------------------------------- */
.disclosure { background: var(--bg-2); }
.disclosure-text { max-width: 52rem; font-size: 1.05rem; color: var(--fg); margin: 0; }
.pending {
  display: block; border-left: 3px solid var(--brass);
  background: color-mix(in srgb, var(--brass) 10%, transparent);
  padding: .7rem .9rem; border-radius: 0 6px 6px 0; color: #5a4a24;
  text-transform: none; letter-spacing: 0; font-size: .85rem; margin: 0 0 1.25rem;
}

/* ---- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--charcoal); color: var(--soft-white); }
.cta-band p { color: rgba(244,242,236,.75); }
.cta-band .sec-index { color: rgba(244,242,236,.4); }
/* Choice architecture: one primary action, contextual actions visibly
   subordinate. Never a row of equally weighted buttons. */
.cta-alt { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.btn-quiet {
  background: none; color: var(--soft-white);
  border: 1px solid rgba(244,242,236,.28); padding: .62rem 1rem; font-size: .93rem;
}
.btn-quiet:hover { border-color: rgba(244,242,236,.6); }
.band:not(.cta-band):not(.band-ink) .btn-quiet { color: var(--accent); border-color: var(--line); }
.band:not(.cta-band):not(.band-ink) .btn-quiet:hover { border-color: var(--accent); }

/* ---- Buttons ------------------------------------------------------------ */
.btn { display: inline-block; font-family: var(--font-body); font-weight: 500; text-decoration: none; padding: .8rem 1.4rem; border-radius: 8px; border: 0; cursor: pointer; font-size: 1rem; }
.btn-solid { background: var(--accent-btn); color: #fff; }
.btn-solid:hover { filter: brightness(1.08); }

/* ---- Contact ------------------------------------------------------------ */
/* The portfolio build has no form — the form styles were removed with it and
   are in git history. What remains is the address line in the CTA band. */
.contact-line { margin-top: 1.5rem; }
/* .pending inherits the brass treatment below; on the dark CTA band it needs
   its own colors or it renders near-invisible. */
.cta-band .pending {
  text-align: left; color: rgba(245,245,242,.85);
  background: rgba(245,245,242,.08); border-left-color: var(--accent-2);
  max-width: 34rem; margin-inline: auto;
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(245,245,242,.82); padding-top: clamp(2.5rem, 6vw, 4rem); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-bottom: 2rem; }
.foot-brand { display: flex; align-items: center; gap: .5rem; color: var(--soft-white); font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; }
.foot-tag { color: rgba(245,245,242,.6); font-size: .95rem; }
.foot-head { color: var(--soft-white); font-weight: 600; margin-bottom: .5rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.site-footer a { color: rgba(245,245,242,.82); text-decoration: none; }
.site-footer a:hover { color: var(--soft-white); text-decoration: underline; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.10); padding-top: 1.25rem; padding-bottom: 1.5rem; }
.foot-legal p { color: rgba(244,242,236,.55); font-size: .85rem; margin: 0; }
.foot-status { color: rgba(244,242,236,.42); margin-top: .35rem !important; }

/* ---- Calibration rail (signature device, >=1180px) --------------------- */


/* ---- Responsive up-scaling --------------------------------------------- */
@media (min-width: 860px) {
  .div-grid { grid-template-columns: repeat(3, 1fr); }
  /* Two children now (brand + sections), not three. */
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .seq-step { grid-template-columns: 3rem 1fr; }
}

/* ---- Reduced motion: render everything in its final state --------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* bnry.js reveals everything immediately in this mode, but assert it in CSS
     too so a script failure cannot leave the page blank. */
  .reveal { opacity: 1; transform: none; }
  /* clip-path is not a transition, so the * rule above does not clear it —
     without this every heading would stay masked to nothing. */
  .reveal-mask, .reveal-mask.is-in { clip-path: none; }
  /* The two canvases never paint under reduced motion — remove the boxes they
     would have occupied rather than leaving holes in the layout. */
  .hero-canvas, .method-stage { display: none; }
  .method-layout { grid-template-columns: 1fr; }
  .method-steps { padding-block: 0; }
  .method-steps .seq-step { opacity: 1; }
  .hero-cue { display: none; }
  /* The spine is a progress report and stays put; the page itself already
     conveys position. */
  .flow-spine { display: none; }
  .seg-mark { width: 3.5rem; }
}

/* ---- Architecture: narrow-screen reading -------------------------------- */
/* Exactly one of the SVG and this fallback is displayed at any width, so
   assistive technology never meets both. The SVG's labels are 8.5px, which
   is fine at desktop measure and unreadable on a phone. */
.arch-fallback { display: none; }
@media (max-width: 719px) {
  .arch-svg { display: none; }
  .arch-fallback { display: block; margin-top: 1.5rem; }
  .af-label { color: rgba(244,242,236,.55); margin: 0; }
  .af-rule { color: rgba(244,242,236,.35); margin: .35rem 0; font-size: 1.1rem; }
  .af-divs { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: 1px; background: var(--line-ink); }
  .af-divs li { background: var(--ink-2); padding: .85rem 1rem; }
  .af-top { display: flex; align-items: center; gap: .6rem; }
  .af-name { font-family: var(--font-display); font-weight: 600; }
  .af-role { display: block; color: rgba(244,242,236,.6); font-size: .88rem; margin-top: .25rem; }
  .af-subs { color: rgba(244,242,236,.75); font-size: .92rem; margin: .35rem 0 0; }
  .af-feedback { color: var(--gold); margin: 1rem 0 0; }
}

/* ---- Division hue on dark grounds ---------------------------------------
   Any surface with the ink ground swaps the division hue for its tint. The
   base hues measure 2.07–3.85:1 there; the tints measure 4.54–4.72:1. */
.hero, .band-ink, .cta-band { --cell: var(--accent-lt, var(--accent-2)); }
.hero .eyebrow, .band-ink .eyebrow, .cta-band .eyebrow { color: var(--accent-lt, var(--accent-2)); }
.band-ink .div-status, .band-ink .div-more, .band-ink .sub-i { color: var(--accent-lt, var(--accent-2)); }
.band-ink .ev-state { color: var(--gold); }
.band-ink a:not(.btn) { color: var(--accent-lt, var(--accent-2)); }

/* ---- Header at phone width ----------------------------------------------
   Four nav items plus the wordmark exceed 390px, so the row wrapped and left
   "Contact" stranded under a right-aligned stub. Make it two deliberate rows
   instead: brand, then the nav spread across the full measure. No hamburger —
   four items do not warrant hiding navigation behind a control. */
@media (max-width: 600px) {
  .header-inner {
    flex-direction: column; align-items: stretch;
    gap: 0; min-height: 0; padding-block: .55rem;
  }
  .site-nav {
    justify-content: space-between; gap: 0; flex-wrap: nowrap;
    margin-top: .5rem; padding-top: .45rem;
    border-top: 1px solid rgba(255,255,255,.09);
  }
  .nav-link { font-size: .9rem; padding: .4rem .3rem; }
  /* The current-page underline is inset; at this size it needs the room. */
  .nav-link.is-current { box-shadow: inset 0 -2px 0 var(--accent-2); }
}

/* ══ Lighter composition ═══════════════════════════════════════════════════
   The page runs light. Exactly one band stays deep — the architecture — so
   the peak still has somewhere to land. Everything that was ink is now a
   pale cool surface. */
.hero {
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 55%, var(--mist) 100%);
  color: var(--fg);
}
.hero .eyebrow { color: var(--accent); }
.hero h1 { color: var(--fg); }
.hero .lede { color: var(--fg-muted); }
.hero-index { color: var(--fg-muted); }
.hero-index span + span { border-left-color: var(--shallow); }
.hero-cue { color: var(--fg-muted); }

/* Sections that were ink become mist, except the architecture. */
.band-ink { background: var(--mist); color: var(--fg); border-top: 0; }
.band-ink h2, .band-ink h3 { color: var(--fg); }
.band-ink p { color: var(--fg-muted); }
.band-ink .eyebrow { color: var(--accent); }
.band-ink .sec-index { color: var(--fg-muted); opacity: .5; }
.band-ink .cell-seg { background: var(--shallow); }
.band-ink .cell-seg.is-on { background: var(--cell, var(--accent)); }
.band-ink .sub-row, .band-ink .ev-row { border-top-color: var(--line); }
.band-ink .div-status, .band-ink .div-more, .band-ink .sub-i,
.band-ink a:not(.btn) { color: var(--accent); }
.band-ink .cap-head, .band-ink .cap-note { color: var(--fg-muted); }
.band-ink .cap-list { background: var(--line); }
.band-ink .cap-list li { background: var(--surface); color: var(--fg); }
.band-quiet { background: var(--surface); border-top: 1px solid var(--line); }

/* The architecture keeps the deep channel — the one place the page goes dark. */
.band-deep { background: var(--deep); color: var(--soft-white); border-top: 0; }
.band-deep h2 { color: var(--soft-white); }
.band-deep p { color: rgba(242,246,249,.78); }
.band-deep .eyebrow { color: var(--steel-lt); }
.band-deep .sec-index { color: rgba(242,246,249,.42); }
.band-deep .arch figcaption { color: rgba(242,246,249,.62); }
.band-deep .cell-seg { background: var(--line-ink); }

/* CTA sits on the deep channel too, closing where the argument peaked. */
.cta-band { background: var(--deep); color: var(--soft-white); }
.cta-band p { color: rgba(242,246,249,.78); }
.cta-band .sec-index { color: rgba(242,246,249,.42); }
.btn-quiet { color: var(--soft-white); border-color: rgba(242,246,249,.3); }
.btn-quiet:hover { border-color: rgba(242,246,249,.65); }

.site-header { background: color-mix(in srgb, var(--deep) 95%, transparent); }
.site-footer { background: var(--deep); }

/* ══ Flow spine ════════════════════════════════════════════════════════════
   A stepped circuit trace down the left edge: the offset-block mark
   unfolded. It draws in proportion to read progress and carries a travelling
   signal, so it reports something true rather than decorating the margin.
   Hidden below 1180px, where the margin does not exist. */
.flow-spine { display: none; }
@media (min-width: 1180px) {
  .flow-spine {
    display: block; position: fixed; left: 10px; top: 0; bottom: 0;
    width: 56px; z-index: 5; pointer-events: none;
  }
  .spine-svg { width: 56px; height: 100%; overflow: visible; }
  .spine-track { fill: none; stroke: var(--shallow); stroke-width: 1; }
  .spine-live {
    fill: none; stroke: var(--steel); stroke-width: 1.5;
    stroke-linecap: square;
    /* dasharray/offset are set from the measured path length by bnry.js */
  }
  .spine-node {
    position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    background: var(--gold); border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
    opacity: 0; transition: opacity .4s ease;
  }
  .flow-spine.is-live .spine-node { opacity: 1; }
}

/* ══ Offset progression ════════════════════════════════════════════════════
   Consecutive sections step inward and back out, so the eye descends on a
   diagonal rather than a straight rail. Same geometry as the spine and the
   mark: offset, not centred. Modest — this is rhythm, not decoration. */
@media (min-width: 1100px) {
  .flow-step > .wrap { transition: none; }
  .flow-step:nth-of-type(2n) > .wrap { padding-left: calc(var(--pad) + 3.5rem); }
  .flow-step:nth-of-type(3n) > .wrap { padding-left: calc(var(--pad) + 1.75rem); }
}

/* ══ Segment markers ═══════════════════════════════════════════════════════
   Each band opens with a short trace that draws when the section arrives —
   the visual echo of the spine, tying section to system. */
.seg-mark {
  display: block; height: 2px; width: 0; background: var(--accent);
  margin-bottom: 1.25rem; transition: width .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in .seg-mark, .sec-meta.is-in .seg-mark { width: 3.5rem; }
.band-deep .seg-mark { background: var(--akili-lt); }

/* ══ Engine list ═══════════════════════════════════════════════════════════
   The four stages of intake-to-solution. A trace runs between rows so the
   sequence reads as one process rather than four bullets. */
.eng-list { list-style: none; padding: 0; margin: clamp(1.75rem,4vw,2.5rem) 0 0; }
.eng-row {
  position: relative; display: grid; gap: .2rem 1.4rem;
  grid-template-columns: 2.5rem 1fr; padding: 0 0 1.6rem;
}
.eng-i { color: var(--accent); font-size: .72rem; padding-top: .3rem; }
.eng-body { grid-column: 2; }
.eng-row h3 { margin: 0 0 .15rem; }
.eng-row p { margin: 0; color: var(--fg-muted); max-width: 42rem; }
/* The connecting trace: drawn from the index down to the next row. */
.eng-trace {
  position: absolute; left: .85rem; top: 2rem; bottom: .3rem; width: 1px;
  background: var(--shallow);
}
.eng-trace::after {
  content: ""; position: absolute; inset: 0 0 auto 0; width: 1px; height: 0;
  background: var(--accent); transition: height 1.1s cubic-bezier(.22,.61,.36,1);
}
.eng-row.is-in .eng-trace::after { height: 100%; }
.eng-row:last-child .eng-trace { display: none; }
.eng-foot { color: var(--fg-muted); max-width: 42rem; margin-top: .6rem; }

/* ══ Story beats ══════════════════════════════════════════════════════════
   Problem, what we saw, what we built. Captures of the real product sit
   inside a beat when the file exists; until then the beat is prose only.
   No empty frame — a chrome with nothing in it asserts a product. */
.beat-list { list-style: none; padding: 0; margin: clamp(1.75rem,4vw,2.5rem) 0 0; display: grid; gap: clamp(2rem,5vw,3.25rem); }
.beat { display: grid; grid-template-columns: 2.5rem 1fr; gap: .2rem 1.4rem; }
.beat-i { color: var(--accent); font-size: .72rem; padding-top: .35rem; }
.beat-body { grid-column: 2; }
.beat-body h3 { margin: 0 0 .45rem; font-size: 1.25rem; }
.beat-body p { margin: 0; color: var(--fg-muted); max-width: 44rem; font-size: 1.06rem; }
.shot {
  display: block; margin-top: 1.5rem; border: 1px solid var(--line);
  background: var(--surface); overflow: hidden; max-width: 46rem;
}
.shot img { display: block; width: 100%; height: auto; }

/* ══ Trusted by ════════════════════════════════════════════════════════════ */
.trust-list { list-style: none; padding: 0; margin: clamp(1.75rem,4vw,2.5rem) 0 0; display: grid; gap: 1px; background: var(--line); }
.trust-row { background: var(--surface); padding: clamp(1.4rem,3vw,2rem); display: grid; gap: .5rem; }
.trust-head { display: flex; align-items: center; gap: .7rem; }
.trust-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.018em; }
.trust-role { color: var(--cell, var(--accent)); }
.trust-row p { margin: 0; color: var(--fg-muted); max-width: 46rem; }
.trust-row .btn-quiet { justify-self: start; color: var(--cell, var(--accent)); border-color: var(--line); margin-top: .4rem; }
.trust-row .btn-quiet:hover { border-color: var(--cell, var(--accent)); }
/* The hero field sits behind the words on light ground too. */
.hero-canvas[data-field] { opacity: .85; }

/* ══ Ambient band field ════════════════════════════════════════════════════
   The drifting aura from the hero, carried into sections further down so the
   page keeps the same atmosphere rather than going flat below the fold. */
.band { position: relative; }
.band-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .55;
}
.band > .wrap { position: relative; z-index: 1; }

/* ══ Practice areas ════════════════════════════════════════════════════════ */
.pa-list { list-style: none; padding: 0; margin: clamp(1.75rem,4vw,2.5rem) 0 0; display: grid; gap: 0; }
.pa-row { display: grid; grid-template-columns: 2.5rem 1fr; gap: .2rem 1.4rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.pa-row:last-child { border-bottom: 1px solid var(--line); }
.pa-i { color: var(--steel); font-size: .72rem; padding-top: .35rem; }
.pa-body { grid-column: 2; }
.pa-body h3 { margin: 0 0 .4rem; font-size: 1.18rem; }
.pa-body p { margin: 0; color: var(--fg-muted); max-width: 46rem; }
/* The discipline that governs each area, set as a rule rather than a caption —
   the constraint is part of the offer. */
.pa-rule { margin-top: .7rem !important; color: var(--steel) !important; border-left: 2px solid var(--steel); padding-left: .7rem; }

/* Captures carry a source line — the reader should know they are looking at
   the live product, not a rendering. */
.shot { margin: 1.5rem 0 0; }
.shot + .shot { margin-top: 1rem; }
.shot figcaption { color: var(--fg-muted); margin-top: .5rem; font-size: .7rem; }

/* ══ Products under a brand ════════════════════════════════════════════════
   A brand and its products are not interchangeable. Naming them as distinct
   rows, each with its own domain, keeps the reader from collapsing the two —
   which matters most where one arm is clinical and the other is not. */
.prod-list { list-style: none; padding: 0; margin: clamp(1.75rem,4vw,2.5rem) 0 0; display: grid; gap: 1px; background: var(--line); }
.prod-row { background: var(--paper); padding: clamp(1.4rem,3vw,2rem); display: grid; gap: .3rem; }
.prod-role { color: var(--cell, var(--accent)); }
.prod-row h3 { margin: 0; font-size: 1.25rem; }
.prod-row p { margin: 0; color: var(--fg-muted); max-width: 44rem; }
.prod-link { justify-self: start; margin-top: .5rem; color: var(--cell, var(--accent)); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.prod-link:hover { opacity: .75; }

/* =========================================================================
   THE 2026 REVISION — dark ground, the real mark, the neural field.
   Appended rather than interleaved: every rule below either introduces a
   component that did not exist before, or corrects one rule above that
   assumed a light ground. Keeping them together makes the delta legible.
   ========================================================================= */

/* ---- Corrections for the dark ground ------------------------------------ */
/* These rules were written when --bg was near-white. The token flip handles
   the rest of the sheet; these four could not follow it because they named a
   literal colour. */
.div-card:hover, .div-card:focus-visible { background: var(--surface); }
.btn-solid { background: var(--accent-btn); color: #08090B; font-weight: 600; }
.btn-solid:hover { background: var(--accent-2); }
.pending { color: var(--gold); }
.band-quiet { background: var(--mist); }
.site-header { background: color-mix(in srgb, var(--paper) 88%, transparent); }
.site-footer { background: var(--deep); }
a { color: var(--accent-2); }

/* The body ground must be painted explicitly. The artifact host and some
   embedders composite the page over their own surface, and a transparent
   body silently borrows it — which on a light host renders this entire
   design as off-white text on white. */
html, body { background: var(--paper); color: var(--fg); }

/* ---- The mark ----------------------------------------------------------- */
/* Sized by height alone; the 43x52 viewBox carries the aspect. */
.brand-mark { height: 22px; width: auto; flex: none; }
.foot-mark { height: 26px; }
.brand-word { letter-spacing: .34em; font-weight: 600; padding-left: .18em; }

/* ---- Hero: the mark in the composition ---------------------------------- */
.hero-lead { padding-top: clamp(5rem, 14vw, 9rem); }
.hero-mark { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.hero-symbol {
  height: clamp(58px, 9vw, 92px); width: auto; color: var(--soft-white);
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--gold) 30%, transparent));
}
/* The mark is a reveal target, and .reveal-mask clips — so it must never be
   given that class, or its glow is sliced flat the same way. */
.hero-mark { clip-path: none !important; }
.hero h1 { max-width: 19ch; }
.hero .lede { max-width: 48ch; color: color-mix(in srgb, var(--fg) 76%, transparent); }
.hero-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---- System glyphs ------------------------------------------------------ */
/* Identity, not maturity. Every system in the portfolio is operating or in
   beta; none of them should be read against a progress ladder, which is what
   the segmented Cell it replaced inevitably invited. */
.glyph { height: 22px; width: 22px; flex: none; color: var(--cell, var(--accent)); }
[data-token="yfs"]    { --cell: var(--yfs); }
[data-token="akili"]  { --cell: var(--akili); }
[data-token="vertex"] { --cell: var(--vertex); }
[data-token="anima"]  { --cell: var(--anima); }
[data-token="execos"] { --cell: var(--execos); }

/* ---- Portfolio cards ---------------------------------------------------- */
.sys-grid {
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: 1fr; border: 1px solid var(--line); margin-bottom: 3.5rem;
}
@media (min-width: 640px) { .sys-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sys-grid { grid-template-columns: repeat(3, 1fr); } }
.sys-card {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  color: var(--fg); background: var(--surface);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  transition: background .35s ease, opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
.sys-card::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 3.5rem;
  background: var(--cell, var(--accent));
}
.sys-card:hover, .sys-card:focus-visible { background: var(--mist); }
.card-body { position: relative; display: flex; flex-direction: column; height: 100%; }
.sys-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.sys-status {
  font-size: .68rem; letter-spacing: .1em; color: var(--fg-muted);
  border: 1px solid var(--line-ink); padding: .16rem .5rem; border-radius: 999px;
}
.is-beta .sys-status { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.sys-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.22rem;
  letter-spacing: -.015em; line-height: 1.15; display: block; margin-bottom: .35rem;
}
.sys-role { display: block; color: var(--cell, var(--accent)); font-size: .7rem; margin-bottom: .9rem; }
.sys-sum { display: block; color: var(--fg-muted); font-size: .96rem; line-height: 1.55; }
.sys-more {
  display: block; margin-top: auto; padding-top: 1.4rem;
  color: var(--cell, var(--accent)); font-size: .72rem;
}
.sys-card:hover .sys-more { letter-spacing: .09em; }

/* ---- Proof strip -------------------------------------------------------- */
/* Verifiable figures only. A system with no external record yet renders no
   strip at all — an asymmetric row is the honest outcome, and padding it out
   for visual balance is precisely the failure this component exists to make
   impossible. */
.pf-strip {
  list-style: none; margin: 1.35rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--line-ink);
  display: grid; gap: .8rem 1.25rem; grid-template-columns: repeat(3, 1fr);
}
.pf-cell { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pf-fig {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -.01em; color: var(--fg); font-variant-numeric: tabular-nums;
}
.pf-lab {
  font-size: .58rem; letter-spacing: .07em; line-height: 1.35;
  color: var(--fg-muted); text-transform: uppercase;
}
.status-band .pf-strip {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  max-width: 52rem; margin-top: 1.75rem;
}
.status-band .pf-fig { font-size: 1.5rem; }
.status-band .pf-lab { font-size: .64rem; }

/* ---- Engagement list ---------------------------------------------------- */
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
           background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .ev-list { grid-template-columns: repeat(2, 1fr); } }
.ev-row { background: var(--bg); padding: clamp(1.4rem, 3vw, 2rem); }
.ev-i { display: block; color: var(--accent); font-size: .7rem; margin-bottom: .7rem; }
.ev-row h3 { margin-bottom: .45rem; }
.ev-row p { margin: 0; color: var(--fg-muted); font-size: .96rem; }

/* ---- Architecture diagram ----------------------------------------------- */
.arch-svg { display: none; }
@media (min-width: 900px) { .arch-svg { display: block; } .arch-fallback { display: none; } }
.arch-name { font-family: var(--font-display); font-weight: 600; font-size: 14px;
             fill: var(--soft-white); }
.arch-sub { font-size: 8.5px; letter-spacing: .09em; fill: var(--fg-muted);
            font-family: var(--font-mono); }
.arch-sub-c { text-anchor: middle; }
.arch-label { font-size: 8.5px; letter-spacing: .13em; fill: var(--fg-muted);
              font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  .hero-cue::after { animation: none; }
}

/* ---- Layout corrections for the five-system portfolio ------------------- */
/* Wide multi-column content takes the full measure. Five cards squeezed into
   the 1fr content column wrap every heading onto three lines and crush the
   proof strip into overlapping columns — the exact cramping the margin
   rhythm exists to avoid. */
@media (min-width: 900px) {
  .sec-grid .sys-grid,
  .sec-grid .arch,
  .sec-grid .ev-list { grid-column: 1 / -1; }
}

/* ---- Proof strip, restated as a data sheet ------------------------------ */
/* The three-column grid collided: "Registered MD vendor" is four words wide
   and a card is not. Figure left, label right, one rule-separated row each —
   it cannot overflow at any width, and it reads as a spec sheet, which is the
   register these figures should carry anyway. */
.pf-strip {
  display: flex; flex-direction: column; gap: 0;
  list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 0;
}
.pf-cell {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .48rem 0; border-top: 1px solid var(--line-ink);
}
.pf-fig {
  font-size: .86rem; flex: none; letter-spacing: -.005em;
  color: var(--cell, var(--fg));
}
.pf-lab {
  font-size: .56rem; letter-spacing: .06em; line-height: 1.3;
  text-align: right; color: var(--fg-muted); text-transform: uppercase;
}
/* On a system page the strip is the headline, not a footnote. */
.status-band .pf-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 2.5rem; max-width: 58rem; margin-top: 2rem;
}
.status-band .pf-cell {
  flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: .3rem; padding: 1rem 0;
}
.status-band .pf-fig { font-size: 1.65rem; color: var(--fg); }
.status-band .pf-lab { text-align: left; font-size: .6rem; }

/* The stacked form is the deliberate one. An earlier rule set a column
   direction that this block relied on implicitly; stating it here means the
   two cannot drift apart, and fixes the label alignment that inherited a
   right-align intended for the row form. */
.pf-cell { flex-direction: column; align-items: flex-start; gap: .28rem; }
.pf-lab { text-align: left; }

/* ---- The open cell -------------------------------------------------------
   Five systems in a three-across grid leave a sixth cell empty. Rather than
   dress the gap or restyle the grid around it, the vacancy becomes the offer:
   the portfolio is open, and this is where a client's system would sit. */
.sys-open {
  display: flex; flex-direction: column; justify-content: center;
  gap: .9rem; padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--deep-2); text-decoration: none; color: var(--fg);
  border: 1px dashed transparent;
  transition: background .35s ease;
}
.sys-open:hover { background: var(--mist); }
.sys-open .so-rule { display: block; width: 2.5rem; height: 1px; background: var(--gold); }
.sys-open h3 { margin: 0; color: var(--fg); font-size: 1.1rem; max-width: 16ch; }
.sys-open p { margin: 0; color: var(--fg-muted); font-size: .92rem; }
.sys-open .sys-more { color: var(--gold); margin-top: .4rem; padding-top: 0; }

/* The figure needs room to breathe at the width it is actually drawn at. */
.arch { margin: clamp(2rem, 5vw, 3.5rem) 0 0; }
.arch-svg { width: 100%; height: auto; overflow: visible; }
.arch figcaption { color: var(--fg-muted); font-size: .92rem; margin-top: 1.25rem; max-width: 46rem; }
.arch-riser { stroke-width: 1.5; opacity: .75; }
.arch-out { stroke-width: 1; }
.arch-feedback { stroke-width: 1.25; opacity: .8; }
.arch-fb-label { fill: color-mix(in srgb, var(--gold) 80%, transparent); }

/* The band fields carried opacity .55 on top of an already-low per-stroke
   alpha, which is the compounding that made them read as a watermark. The
   per-stroke values in bnry.js are now the single place intensity is tuned;
   this only holds them back far enough to stay behind running text. */
.band-field { opacity: .85; }

/* ---- Market strip -------------------------------------------------------
   The same component as the proof strip with a different subject, and the
   difference has to survive a glance: a market figure must never be taken
   for a company figure. Gold rules and gold figures separate it from the
   accent-coloured proof rows without introducing a sixth hue. */
.is-market .pf-cell { border-top-color: color-mix(in srgb, var(--gold) 34%, transparent); }
.is-market .pf-fig { color: var(--gold); }
#market .pf-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 2.5rem; max-width: 58rem; margin-top: 2rem;
}
#market .pf-cell {
  flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1rem 0;
}
#market .pf-fig { font-size: 1.65rem; }
#market .pf-lab { text-align: left; font-size: .6rem; }
.mkt-src {
  margin-top: 1.5rem; font-size: .6rem; letter-spacing: .07em;
  color: var(--fg-muted); text-transform: none;
}

/* Three figures auto-fitting into two columns strand the third on its own
   row. The strip is always two or three cells, so it is laid out for that
   rather than left to a minmax that cannot know. */
@media (min-width: 900px) {
  #market .pf-strip, .status-band .pf-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Outbound links ------------------------------------------------------ */
.ext { font-size: .85em; opacity: .7; margin-left: .15em; }
/* Visually hidden, still announced. Used for the new-tab warning, which a
   sighted user gets from the arrow and a screen reader user would not. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- System figures ------------------------------------------------------
   The generated diagrams on the ANIMA and Executive OS pages. Both are drawn
   at ~950 units wide and their labels are set to be legible at that width, so
   below 720px they are replaced by their own figcaption rather than shipped
   as something nobody can read. The <desc> carries the full content either
   way, so assistive technology loses nothing at any width. */
.sysfig { margin: clamp(2rem, 5vw, 3.25rem) 0 0; }
.sysfig svg { width: 100%; height: auto; display: block; overflow: visible; }
.sysfig figcaption {
  margin-top: 1.5rem; color: var(--fg-muted); font-size: .92rem;
  max-width: 46rem; display: flex; flex-wrap: wrap; gap: .4rem 2rem;
}
.fig-key { display: inline-flex; align-items: center; gap: .6rem; font-size: .84rem; }
.k-line { display: block; width: 1.6rem; height: 2px; flex: none; }
.k-quiet { background: var(--line-ink); }
.k-anima { background: var(--anima); opacity: .55; }
.k-gold { background: var(--gold); }
@media (max-width: 719px) {
  .sysfig svg { display: none; }
  .sysfig figcaption { margin-top: 0; }
}

/* The engagement figure spans the full measure and sits above the four
   stage cards it labels, so the sequence is read before the detail. */
.engfig { margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .sec-grid .engfig { grid-column: 1 / -1; } }

/* =========================================================================
   THE PORTAL

   The root document. One screen, no scroll, nothing behind it.

   Scrolling is locked at the root rather than hidden after the fact: the
   page is exactly the viewport and there is no second section to reach. The
   `is-portal` class is on <html> so the lock cannot be defeated by content
   height, and it applies to this document only — every other page scrolls
   normally.

   `dvh` rather than `vh` because mobile browsers size `vh` to the viewport
   with the address bar hidden, which leaves the control below the fold on a
   page that is not allowed to scroll.
   ========================================================================= */
.is-portal, .is-portal body {
  height: 100%; max-height: 100%; overflow: hidden;
  overscroll-behavior: none;
}
.portal {
  position: relative; isolation: isolate;
  width: 100%; height: 100dvh; min-height: 100dvh;
  display: grid; place-items: center;
  background: var(--deep); overflow: hidden;
}
.portal-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* The travelling mark. Positioned from the centre by the script, which is
   also what feeds its position to the field, so the lighting and the motion
   cannot drift apart. Small by intent — it is a spark crossing the network,
   not a logo parked on top of one. */
.portal-mark {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  pointer-events: none; will-change: transform;
  translate: -50% -50%;
}
.portal-glyph {
  /* Smaller again. It is a probe moving over the brain, and the thing to
     look at is what lights up behind it, not the mark itself. */
  height: clamp(22px, 3.1vmin, 34px); width: auto; color: var(--soft-white);
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--gold) 78%, transparent));
}

.portal-copy {
  position: relative; z-index: 2; display: grid; justify-items: center;
  gap: .9rem; text-align: center; padding: var(--pad);
}
/* A soft ground under the copy so the type stays legible wherever the mark
   and its excited nodes happen to be passing. */
.portal-copy::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; translate: -50% -50%;
  width: min(42rem, 150%); height: 240%; pointer-events: none;
  /* Lighter than before. The brain is the subject now and the copy sits on
     it; a heavy scrim punches a hole through the middle of the silhouette. */
  background: radial-gradient(ellipse at center,
              rgba(4,5,7,.72) 0%, rgba(4,5,7,.40) 46%, transparent 76%);
}
.portal-name {
  font-family: var(--font-display); font-weight: 700; margin: 0;
  font-size: clamp(2.6rem, 9vmin, 4.75rem); letter-spacing: .22em;
  line-height: 1; color: var(--soft-white); padding-left: .22em;
}
.portal-tag {
  /* Both size and tracking scale down. Tracking alone is what overruns a
     narrow screen — 28 characters at .34em reaches both edges at 393px — and
     shrinking only the font keeps the overrun while making it harder to
     read. */
  margin: 0; font-size: clamp(.52rem, 2.1vw, .64rem);
  letter-spacing: clamp(.16em, .9vw, .34em);
  color: color-mix(in srgb, var(--gold) 88%, transparent);
  max-width: 100%;
}
.portal-enter {
  margin-top: 1.4rem; font-family: var(--font-mono); font-size: .76rem;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  padding: .9rem 1.7rem;
  transition: background .25s ease, box-shadow .25s ease, letter-spacing .25s ease;
}
.portal-enter:hover, .portal-enter:focus-visible {
  letter-spacing: .24em;
  box-shadow: 0 0 36px 0 color-mix(in srgb, var(--accent) 42%, transparent);
}

/* The mark holds still. The field draws one frame and stops. Nothing here
   depends on motion to be usable: the name, the tagline and the link are all
   present and the link is a plain anchor. */
@media (prefers-reduced-motion: reduce) {
  .portal-mark { display: none; }
  .portal-enter { transition: none; }
}

/* ---- The engagement arc on a card ---------------------------------------
   The home page's engagement figure at card scale, in the system's hue. The
   same shape appears at three sizes across the site, so a reader who has met
   it once reads it instantly the next time. */
.card-arc {
  display: block; width: 100%; height: 34px;
  margin: 1.1rem 0 .2rem; overflow: visible;
}

/* ---- Portfolio groups ---------------------------------------------------- */
.grp-label {
  margin: 2.5rem 0 1rem; color: var(--fg-muted); font-size: .62rem;
}
@media (min-width: 640px) { .sys-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sys-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ---- The engagement track ------------------------------------------------
   Three stages with a rail running through them, ending filled. Replaces
   three paragraphs that said the same thing at length: the shape comes from
   the track, the substance from one line per stage. */
.tk-list {
  list-style: none; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0;
  display: grid; gap: 0;
}
@media (min-width: 860px) {
  .sec-grid .tk-list { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 0 2rem; }
}
.tk-step {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem;
  padding: 0 0 2rem;
  grid-template-areas: "rail idx" "rail label" "rail body";
}
@media (min-width: 860px) {
  .tk-step {
    grid-template-columns: 1fr; gap: .55rem; padding: 0;
    grid-template-areas: "rail" "idx" "label" "body";
  }
}
.tk-rail { grid-area: rail; position: relative; display: block; }
/* Vertical rail on narrow screens, horizontal across the top on wide ones. */
.tk-rail::before {
  content: ""; position: absolute; background: var(--line-ink);
  left: 5px; top: 14px; width: 1px; height: calc(100% + 2rem - 14px);
}
.tk-step.is-last .tk-rail::before { display: none; }
.tk-dot {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--cell, var(--accent)); background: var(--bg);
  position: relative; top: 3px;
}
.tk-step.is-last .tk-dot { background: var(--cell, var(--accent)); }
@media (min-width: 860px) {
  .tk-rail { height: 11px; }
  .tk-rail::before { left: 14px; top: 5px; width: calc(100% + 2rem - 14px); height: 1px; }
}
.tk-i { grid-area: idx; color: var(--cell, var(--accent)); font-size: .64rem; }
.tk-label { grid-area: label; margin: 0; font-size: 1.05rem; }
.tk-body { grid-area: body; margin: 0; color: var(--fg-muted); font-size: .95rem; }