/* ============================================================================
   Sedoha — layout & components  (SHARED · identical on every branch)
   Every value references a token from tokens.css or theme.css. No literals.
   Register: austere structure; warmth carried only by serif + the sand/navy
   panel — never by decoration.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  --head-h: 4.75rem;
  scroll-behavior: smooth;
}
/* Home & About: each section fills the viewport so only one is seen at a time,
   with a gentle scroll-snap that lands on section starts (proximity = never traps). */
html:has(body.home),
html:has(body.snap) {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--head-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-ui);
  line-height: var(--sd-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numeric cells align — non-negotiable where figures appear. */
.tnum { font-variant-numeric: tabular-nums; }

/* Content never runs to the window edge. */
.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--sd-s5);
}
.measure { max-width: var(--sd-measure); }

a { color: inherit; text-underline-offset: 2px; }

/* -- Header ----------------------------------------------------------------
   The bar itself is full-bleed (background + hairline span the whole browser
   width); .site-head-in re-applies the .wrap content column inside it. */
.site-head {
  padding-block: var(--sd-s5);
  border-bottom: var(--sd-hairline-w) solid var(--sd-hairline);
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--sd-paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
          backdrop-filter: saturate(1.1) blur(6px);
}
.site-head-in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sd-s5);
}
/* Wordmark — “Sedoha” in Inter · 600 (design system: identity/wordmark-inter.html).
   Pure-type wordmark, near-black on paper; tracking tightened per the card. */
.wordmark {
  align-self: center;
  font-family: var(--sd-font-ui);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--sd-ink);
  text-decoration: none;
}
.brand { display: flex; align-items: center; gap: var(--sd-s4); }
/* Header tagline — the lede line locks up with the wordmark (homepage): same face,
   weight and ink as the logo type, two stacked lines matching the wordmark's height,
   set off by a hairline; hidden where it would crowd the nav. */
.brand-tag {
  margin: 0;
  padding-left: var(--sd-s4);
  border-left: var(--sd-hairline-w) solid var(--sd-hairline);
  font-family: var(--sd-font-ui);
  font-weight: 600;
  font-size: clamp(0.66rem, 1.05vw, 0.76rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sd-ink);
  white-space: nowrap;
}
@media (max-width: 64rem) { .brand-tag { display: none; } }
.site-nav {
  display: flex;
  align-items: baseline;
  gap: var(--sd-s5);
  font-size: var(--sd-fs-ui);
  color: var(--sd-prussian);
}
.site-nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--sd-terra-deep); }
/* current page: quiet gold underline */
.site-nav a[aria-current="page"] {
  color: var(--sd-terra-deep);
  border-bottom-color: var(--sd-terra);
}
/* -- Nav dropdown (About Us → Our Story / Our People) ---------------------- */
.nav-item { position: relative; }
.nav-caret {
  display: inline-block;
  font-size: 0.7em;
  color: var(--sd-ink-3);
  transition: transform 0.14s ease;
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: 100%;
  /* right-aligned so the dropdown opens inward — a left-aligned menu near the
     right edge overflowed the viewport on mobile and caused horizontal scroll. */
  right: 0;
  left: auto;
  margin-top: var(--sd-s3);
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sd-s2);
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  box-shadow: 0 16px 40px -18px rgba(20, 40, 63, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 30;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* transparent bridge over the gap so hover survives the trip to the menu */
.nav-menu::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--sd-s3));
  left: 0;
  right: 0;
  height: var(--sd-s3);
}
.nav-menu a {
  padding: var(--sd-s2) var(--sd-s3);
  border-radius: var(--sd-radius-ctl);
  border-bottom: none;
  white-space: nowrap;
  color: var(--sd-prussian);
}
.nav-menu a:hover {
  background: var(--sd-surface-2);
  color: var(--sd-terra-deep);
}
@media (max-width: 34rem) {
  .site-head-in { flex-wrap: wrap; gap: var(--sd-s3); }
  .site-nav { gap: var(--sd-s4); }
}

/* -- Section rhythm -------------------------------------------------------- */
section { padding-block: clamp(var(--sd-s7), 9vw, 6rem); }
/* Home sections: full-height panels, content vertically centered, so a visitor
   sees one section at a time. min-height (not height) lets long revealed copy
   grow past the fold rather than clip. */
.home main > section,
.snap main > section {
  min-height: 100svh;
  padding-block: var(--sd-s7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-margin-top: var(--head-h);
}
.home main > section > .wrap,
.snap main > section > .wrap { width: 100%; }
/* About's Our Story section is itself the .wrap column — give it full width too */
.snap main > section.wrap { width: 100%; }
@media (max-width: 44rem) {
  .snap main > section { min-height: 0; }
}
.section-head {
  font-family: var(--sd-font-reader);
  font-weight: 600;
  font-size: var(--sd-fs-title);
  line-height: var(--sd-lh-tight);
  letter-spacing: -0.01em;
  color: var(--sd-heading);
  margin: 0 0 var(--sd-s4);
}
/* Always-visible standfirst under a section head: the gist a visitor reads at
   rest, before any hover-reveal. Keeps the page legible without a single hover;
   the reveal panels below become detail-on-demand, not the only delivery. */
.section-lede {
  font-family: var(--sd-font-reader);
  font-size: clamp(var(--sd-fs-lead), 1.7vw, 1.2rem);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink);
  max-width: 48ch;
  margin: 0 0 var(--sd-s5);
}
.band .section-lede { color: var(--sd-band-ink); }

/* Mid-scroll call-to-action — a calm centered beat so a convinced visitor can
   act before reaching the footer form. Built from the shared button system.
   Overrides the full-height home-section panel: a short band, button at its
   natural width (align-items:center stops the flex column stretching it). */
main > section.cta-mid {
  min-height: 0;
  align-items: center;
  text-align: center;
  scroll-snap-align: none;
  padding-block: clamp(var(--sd-s7), 10vw, 6rem);
}
.cta-mid p {
  font-family: var(--sd-font-reader);
  font-size: clamp(var(--sd-fs-lead), 2vw, 1.35rem);
  line-height: var(--sd-lh-tight);
  color: var(--sd-heading);
  margin: 0 0 var(--sd-s5);
}

/* -- Hero ------------------------------------------------------------------ */
.hero { padding-top: clamp(var(--sd-s7), 11vw, 7rem); }
.hero h1 {
  font-family: var(--sd-font-reader);
  font-weight: 600;
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--sd-heading);
  margin: 0 0 var(--sd-s5);
  max-width: 20ch;
}
.hero .lede,
#opener .lede {
  font-family: var(--sd-font-reader);
  font-size: clamp(var(--sd-fs-lead), 2.4vw, 1.4rem);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink);
  margin: 0 0 var(--sd-s6);
}

/* Statement hero — the claim alone, centered in the viewport, with a quiet
   scroll cue inviting the story below. */
.hero.hero--statement {
  position: relative;
  align-items: center;
  text-align: center;
}
.hero.hero--statement h1 {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(2.3rem, 6.5vw, 4rem);
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sd-s6);
  transform: translateX(-50%);
  color: var(--sd-ink-3);
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  animation: hero-bob 2.2s ease-in-out infinite;
}
.hero-scroll:hover { color: var(--sd-terra-deep); }
@keyframes hero-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }

/* Hero: two-column with the "complete ledger" balance visual */
.hero-grid {
  display: grid;
  gap: var(--sd-s6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 52rem) {
  .hero-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--sd-s7); }
  /* the hero: roomy copy on the left, large chart pushed right */
  .hero .hero-grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
  /* reversed: visual on the left, text on the right (by position) */
  .hero-grid--rev > :first-child { order: 2; }
  .hero-grid--rev > :last-child  { order: 1; }
}

/* Inquiry form (Get in touch) */
.inquiry { display: grid; gap: var(--sd-s4); max-width: 30rem; }
.field { display: grid; gap: var(--sd-s2); }
.field > span {
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--sd-w-med);
  color: var(--sd-ink-3);
}
.field input,
.field textarea {
  font: inherit;
  font-size: var(--sd-fs-ui);
  width: 100%;
  color: var(--sd-ink);
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-ctl);
  padding: var(--sd-s3) var(--sd-s4);
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sd-terra);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-terra) 14%, transparent);
}
.inquiry .btn { justify-self: start; margin-top: var(--sd-s2); }
.inquiry .btn[disabled] { opacity: 0.6; cursor: default; }

/* Honeypot — off-screen (not display:none, which some bots skip). */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Inline submit status + success confirmation */
.form-status { margin: var(--sd-s2) 0 0; font-size: var(--sd-fs-ui); }
.form-status.is-error { color: var(--sd-terra-deep); }
.form-done {
  margin: 0;
  padding: var(--sd-s4) var(--sd-s5);
  font-size: var(--sd-fs-lead);
  color: var(--sd-band-ink);
  background: var(--sd-band-bg);
  border: var(--sd-hairline-w) solid var(--sd-band-hairline);
  border-radius: var(--sd-radius-card);
}

/* Improvement section: the AI strategy-recommendation card */
.rec {
  margin: 0;
  max-width: 30rem;
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  padding: var(--sd-s5);
  box-shadow: 0 12px 34px -18px rgba(20, 40, 63, 0.28);
}
.rec-head {
  display: flex;
  align-items: center;
  gap: var(--sd-s2);
  padding-bottom: var(--sd-s3);
  margin-bottom: var(--sd-s4);
  border-bottom: var(--sd-hairline-w) solid var(--sd-hairline);
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--sd-w-med);
  color: var(--sd-ink-3);
}
.rec-star {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sd-terra);
  color: var(--sd-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.rec-action {
  margin: 0 0 var(--sd-s5);
  font-family: var(--sd-font-reader);
  font-size: var(--sd-fs-section);
  line-height: var(--sd-lh-tight);
  color: var(--sd-heading);
}
.rec-action strong { font-weight: 600; }
.rec-detail { margin: 0; display: grid; gap: var(--sd-s4); }
.rec-detail dt {
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--sd-w-bold);
  color: var(--sd-terra-deep);
  margin-bottom: 3px;
}
.rec-detail dd { margin: 0; font-size: var(--sd-fs-ui); line-height: var(--sd-lh-body); color: var(--sd-ink-2); }
.rec-detail strong { color: var(--sd-ink); font-weight: var(--sd-w-med); }
.rec-sector {
  margin-left: auto;
  color: var(--sd-terra-deep);
  font-weight: var(--sd-w-bold);
  letter-spacing: 0.06em;
}
/* recommendation carousel (rotating sector examples) */
.rec-rotator { display: grid; justify-items: center; }
.rec-slide { grid-area: 1 / 1; width: 100%; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.rec-slide.is-active { opacity: 1; pointer-events: auto; }
.rec-dots { display: flex; gap: var(--sd-s2); justify-content: center; margin-top: var(--sd-s4); }
.rec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sd-band-hairline); transition: background 0.3s ease; }
.rec-dot.is-active { background: var(--sd-terra); }

.hero-cta { margin-top: 0; }

/* The Ledger: many sources → one chart of accounts → any framework out */
.fl { width: 100%; max-width: none; height: auto; display: block; }
.fl-annot { fill: var(--sd-ink-3); font-family: var(--sd-font-ui); font-size: 10px; font-weight: var(--sd-w-bold); letter-spacing: 0.1em; }
.fl-line line { stroke: var(--sd-band-hairline); stroke-width: 1.5; }
.fl-node { fill: var(--sd-ink-3); }
.fl-label { fill: var(--sd-ink); font-family: var(--sd-font-ui); font-size: 12.5px; font-weight: var(--sd-w-med); }
.fl-hub { fill: var(--sd-paper); stroke: var(--sd-prussian); stroke-width: 1.5; }
.fl-hub-title { fill: var(--sd-heading); font-family: var(--sd-font-reader); font-size: 13px; font-weight: 600; }
.fl-hub-sub { fill: var(--sd-ink-3); font-family: var(--sd-font-ui); font-size: 10px; }
/* the real chart-of-accounts rows inside the hub (capitals + line items) */
.fl-hub-div { stroke: var(--sd-hairline); stroke-width: 1; }
.fl-hub-ent { fill: var(--sd-ink-3); font-family: var(--sd-font-ui); font-size: 9.5px; }
.fl-colhead { fill: var(--sd-ink-3); font-family: var(--sd-font-ui); font-size: 8px; font-weight: var(--sd-w-bold); letter-spacing: 0.07em; }
.fl-cap { fill: var(--sd-ink); font-family: var(--sd-font-ui); font-size: 11px; font-weight: var(--sd-w-med); }
.fl-cap-num { fill: var(--sd-ink); font-family: var(--sd-font-ui); font-size: 11px; font-weight: var(--sd-w-bold); font-variant-numeric: tabular-nums; }
.fl-sub { fill: var(--sd-ink-3); font-family: var(--sd-font-ui); font-size: 9.5px; }
.fl-sub-num { fill: var(--sd-ink-3); font-family: var(--sd-font-ui); font-size: 9.5px; font-variant-numeric: tabular-nums; }

/* Hero convergence visual (SVG): six capital streams merge through the ✦
   into one set of books — Sedoha bridging financial and non-financial. */
.hero-viz { width: 100%; max-width: 30rem; height: auto; display: block; }
/* the capital-bars comparison is wider (546 viewBox) — give it the room back */
#opener .hero-viz { max-width: 35rem; }
.hv-cap-tx {
  fill: var(--sd-ink);
  font-family: var(--sd-font-ui);
  font-size: 15px;
  font-weight: var(--sd-w-med);
}
/* the group labels on either side of the barrier (Performance / Risk) */
.hv-group-tx {
  fill: var(--sd-ink-3);
  font-family: var(--sd-font-ui);
  font-size: 12px;
  font-weight: var(--sd-w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hv-halo { fill: var(--sd-terra-tint); }
.hv-line    { stroke: var(--sd-band-hairline); stroke-width: 1.5; fill: none; }
.hv-connect { stroke: var(--sd-prussian); stroke-width: 2; }
.hv-mark    { fill: var(--sd-terra); }
/* the barrier between the financial and impact books (the "today" state) */
.hv-barrier { stroke: var(--sd-muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
/* the label under the ✦ */
.hv-mark-tx {
  fill: var(--sd-terra-deep);
  font-family: var(--sd-font-ui);
  font-size: 14px;
  font-weight: var(--sd-w-med);
}
/* the output card: one set of books on a light ground, capital colors legible */
.hv-card {
  fill: var(--sd-paper);
  stroke: var(--sd-hairline);
  stroke-width: 1;
}
.hv-card-title {
  fill: var(--sd-prussian);
  font-family: var(--sd-font-ui);
  font-size: 16px;
  font-weight: var(--sd-w-bold);
  letter-spacing: 0.01em;
}
.hv-card-sub {
  fill: var(--sd-ink-3);
  font-family: var(--sd-font-ui);
  font-size: 12px;
}
.hv--financial    { fill: var(--sd-cap-financial); }
.hv--natural      { fill: var(--sd-cap-natural); }
.hv--social       { fill: var(--sd-cap-social); }
.hv--human        { fill: var(--sd-cap-human); }
.hv--manufactured { fill: var(--sd-cap-manufactured); }
.hv--intellectual { fill: var(--sd-cap-intellectual); }
/* Interactive capital chart (merged opener) — one plot, two tab controls.
   "Traditional accounting" isolates the financial line; "Sedoha" shows all six,
   labeled. Default: Sedoha. With JS off, all six show (static, labeled). */
.cap-chart { position: relative; }
.cap-tabs { display: flex; gap: var(--sd-s3); margin-bottom: var(--sd-s5); }
.cap-tab {
  font: inherit;
  font-size: var(--sd-fs-meta);
  font-weight: var(--sd-w-med);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--sd-s2) var(--sd-s4);
  border-radius: var(--sd-radius-ctl);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  background: transparent;
  color: var(--sd-ink-3);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cap-tab:hover { color: var(--sd-prussian); border-color: var(--sd-muted); }
.cap-tab[aria-pressed="true"] {
  color: var(--sd-prussian);
  border-color: var(--sd-prussian);
  background: var(--sd-prussian-tint);
}
.cap-plot { width: 100%; height: auto; display: block; }
.cap-line  { fill: none; stroke: var(--cc, var(--sd-prussian)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cap-dot   { fill: var(--cc, var(--sd-prussian)); }
.cap-label { fill: var(--cc, var(--sd-prussian)); font-family: var(--sd-font-ui); font-size: 12px; font-weight: var(--sd-w-med); }
/* With JS on, visibility is driven by the active mode (JS sets the default on load).
   Without JS, the rules below don't apply and every line stays visible. */
.js .cap-line, .js .cap-dot, .js .cap-label { opacity: 0; transition: opacity .9s ease; }
.js .cap-chart.is-sedoha .cap-line,
.js .cap-chart.is-sedoha .cap-dot,
.js .cap-chart.is-sedoha .cap-label { opacity: 1; }
.js .cap-chart.is-traditional [data-cap="financial"] .cap-line,
.js .cap-chart.is-traditional [data-cap="financial"] .cap-dot,
.js .cap-chart.is-traditional [data-cap="financial"] .cap-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .cap-line, .js .cap-dot, .js .cap-label { transition: none; }
}

/* Golden-path stakeholder chain — community-first. Pick a role to see its value;
   default is the affected community (the gold-accented anchor). Detail panels stack
   in one grid cell so swapping never shifts layout. With JS off, all panels show. */
.chain-viz { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: 24rem; margin-inline: auto; }
.chain-node {
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--sd-s3) var(--sd-s4);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  background: var(--sd-paper);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.chain-node-role { font-weight: var(--sd-w-med); color: var(--sd-heading); }
.chain-node-eg { font-size: var(--sd-fs-meta); color: var(--sd-ink-3); }
.chain-node:hover { border-color: var(--sd-muted); }
.chain-node.is-active {
  border-color: var(--sd-prussian);
  background: var(--sd-prussian-tint);
  box-shadow: 0 8px 22px -14px rgba(20, 40, 63, .45);
}
/* the community anchor — the destination; gold-accented, the visual foundation */
.chain-node--anchor { border-left: 3px solid var(--sd-terra); box-shadow: inset 0 0 0 1px var(--sd-terra); }
.chain-node--anchor.is-active { border-color: var(--sd-terra-deep); background: var(--sd-terra-tint); }
/* The golden path — the rail is the point: one unbroken gold line, top of the
   chain to the ground. Meaning, not ornament (the product's golden-path concept). */
.chain-rail { width: 3px; height: var(--sd-s5); background: var(--sd-terra); border-radius: 999px; margin: 0 auto; }
.chain-axis { text-align: center; font-size: var(--sd-fs-meta); color: var(--sd-ink-3); letter-spacing: .02em; margin: var(--sd-s4) 0 0; }
.chain-detail { margin-top: var(--sd-s5); }
.chain-panel {
  font-family: var(--sd-font-reader);
  font-size: var(--sd-fs-lead);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink);
}
.chain-panel p { margin: 0; }
.chain-panel strong { color: var(--sd-heading); font-weight: var(--sd-w-med); }
/* With JS on, exactly one panel shows at a time. Off: all panels show (stacked,
   readable). A reserved min-height keeps the section from jumping as roles swap. */
.js .chain-detail { min-height: 8.5rem; }
.js .chain-panel { display: none; }
.js .chain-panel.is-active { display: block; }

/* traditional side: financial shown large & dominant; the five others small & muted */
.hv-fin-box { fill: var(--sd-cap-financial); }
.hv-fin-tx {
  fill: var(--sd-paper);
  font-family: var(--sd-font-ui);
  font-size: 17px;
  font-weight: var(--sd-w-bold);
  letter-spacing: 0.01em;
}
.hv-cap-sm { fill: var(--sd-ink-3); font-family: var(--sd-font-ui); font-size: 11px; }

/* Hero carousel: rotating "from the books to a life" — auditable ledger (the
   asked-about line highlighted), a prominent ✦ inquiry, a warm human story.
   Numbers→warmth. Stories illustrative/dummy; portraits are placeholders. */
.hero-rotator { display: grid; }
.hero-slide { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 0.7s ease; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-dots { display: flex; gap: var(--sd-s2); justify-content: center; margin-top: var(--sd-s4); }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sd-hairline); transition: background 0.3s ease; }
.hero-dot.is-active { background: var(--sd-terra); }

.story-viz { display: flex; flex-direction: column; max-width: 30rem; margin-inline: auto; }
.sv-card {
  margin: 0;
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  padding: var(--sd-s5);
  box-shadow: 0 10px 30px -18px rgba(20, 40, 63, 0.22);
}
/* the full, drilled-down six-capital ledger */
.sv-ledger6 { padding-bottom: var(--sd-s6); }
.sv-tag { font-size: var(--sd-fs-meta); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sd-ink-3); margin-bottom: var(--sd-s3); }
.sv-verified { color: var(--sd-prussian); font-weight: var(--sd-w-med); }
.sv-row { display: flex; justify-content: space-between; gap: var(--sd-s4); padding: var(--sd-s2); font-size: var(--sd-fs-ui); color: var(--sd-ink); }
.sv-row + .sv-row { border-top: var(--sd-hairline-w) solid var(--sd-hairline); }
.sv-row .num { font-variant-numeric: tabular-nums; font-weight: var(--sd-w-med); white-space: nowrap; }
.sv-hl {
  background: var(--sd-terra-tint);
  border-radius: 6px;
  box-shadow: inset 3px 0 0 var(--sd-terra);
  font-weight: var(--sd-w-med);
}
.sv-hl + .sv-row, .sv-row + .sv-hl, .sv-sub + .sv-row { border-top: none; }
.sv-bar { display: inline-block; width: 3px; height: 0.9em; margin-right: 8px; border-radius: 1px; vertical-align: -1px; background: var(--c); }
/* drill-down sub-accounts under the highlighted capital */
.sv-sub {
  display: flex;
  justify-content: space-between;
  gap: var(--sd-s4);
  padding: 3px var(--sd-s2) 3px var(--sd-s6);
  font-size: var(--sd-fs-meta);
  color: var(--sd-ink-3);
}
.sv-sub .num { font-variant-numeric: tabular-nums; }
/* the Q&A, overlaid AS A CHAT, dropping over the dimmed ledger */
.sv-qa {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--sd-s6));
  display: flex;
  flex-direction: column;
  gap: var(--sd-s3);
  padding: var(--sd-s4);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  background: color-mix(in srgb, var(--sd-paper) 85%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  box-shadow: 0 16px 44px -20px rgba(20, 40, 63, 0.40);
}
.sv-qa .chat-bubble p, .sv-qa .chat-user p { font-size: var(--sd-fs-ui); }

/* -- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: var(--sd-w-med);
  padding: var(--sd-s3) var(--sd-s5);
  border-radius: var(--sd-radius-ctl);
  text-decoration: none;
  border: var(--sd-hairline-w) solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
/* Primary: gold fill (one per view). Secondary: prussian outline. */
.btn--primary { background: var(--sd-btn-bg); color: var(--sd-btn-ink); }
.btn--primary:hover { background: var(--sd-btn-hover); }
.btn--ghost {
  background: transparent;
  color: var(--sd-prussian);
  border-color: var(--sd-prussian);
  margin-left: var(--sd-s3);
}
.btn--ghost:hover { background: var(--sd-prussian-tint); border-color: var(--sd-prussian); }

/* -- Quiet neutral band — alternates section grounds so every adjacent
      section reads as its own surface (paper / neutral / prussian tint). --- */
.band-quiet {
  background: var(--sd-surface-2);
  border-block: var(--sd-hairline-w) solid var(--sd-hairline);
}

/* -- Two-halves band (ledger + engine) ------------------------------------ */
.band {
  background: var(--sd-band-bg);
  color: var(--sd-band-ink);
  border-block: var(--sd-hairline-w) solid var(--sd-band-hairline);
}
.band .section-head { color: var(--sd-band-ink); }
.halves {
  display: grid;
  gap: var(--sd-s6);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .halves { grid-template-columns: 1fr 1fr; gap: var(--sd-s7); } }
.half h3 {
  font-size: var(--sd-fs-section);
  font-weight: var(--sd-w-bold);
  margin: 0 0 var(--sd-s3);
}
.half p { margin: 0; color: var(--sd-band-ink-2); max-width: 46ch; }
.half .rule {
  width: var(--sd-s7);
  height: 3px;
  background: var(--sd-accent);
  margin-bottom: var(--sd-s4);
}
/* The engine half is text-only; center it against the taller ledger column. */
@media (min-width: 46rem) { .half--engine { align-self: center; } }


/* -- How-it-works & prose -------------------------------------------------- */
.prose p {
  margin: 0 0 var(--sd-s4);
  font-size: var(--sd-fs-lead);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink-2);
}
.prose p strong { color: var(--sd-ink); font-weight: var(--sd-w-med); }
.prose a { color: var(--sd-prussian); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--sd-terra-deep); }

/* -- AI-native: two columns (visual left, copy right) ---------------------- */
.ai-grid {
  display: grid;
  gap: var(--sd-s6);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: var(--sd-s6);
}
@media (min-width: 52rem) {
  .ai-grid { grid-template-columns: 1fr 1fr; gap: var(--sd-s7); }
}
#ai .ai-visual { cursor: default; }
/* Three proactive-insight examples, all visible at rest as a static column. */
.insight-stack { display: grid; gap: var(--sd-s4); }
.insight-card {
  margin: 0;
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  padding: var(--sd-s5);
  box-shadow: 0 10px 34px -14px rgba(20, 40, 63, 0.30);   /* window depth */
}
.insight-head { display: flex; align-items: center; gap: var(--sd-s2); margin-bottom: var(--sd-s3); }
.insight-av { flex: none; color: var(--sd-terra); line-height: 1; }
.insight-title {
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  font-weight: var(--sd-w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sd-ink-3);
}
.insight-tag {
  margin: 0 0 var(--sd-s2);
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  font-weight: var(--sd-w-med);
  color: var(--sd-prussian);
}
.insight-txt { margin: 0; color: var(--sd-ink-2); font-size: var(--sd-fs-lead); line-height: var(--sd-lh-body); }
.insight-txt strong { color: var(--sd-ink); font-weight: var(--sd-w-bold); }

/* chat window chrome */
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--sd-s2);
  padding: var(--sd-s3) var(--sd-s4);
  background: var(--sd-surface-2);
  border-bottom: var(--sd-hairline-w) solid var(--sd-hairline);
}
.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sd-terra);
  color: var(--sd-paper);
  font-size: 12px;
}
.chat-title { font-weight: var(--sd-w-med); font-size: var(--sd-fs-ui); color: var(--sd-ink); }
.chat-body {
  display: flex;
  flex-direction: column;
  gap: var(--sd-s4);
  padding: var(--sd-s5) var(--sd-s4);
}
.chat-msg { display: flex; max-width: 90%; }
.chat-user { align-self: flex-end; }
.chat-user p {
  margin: 0;
  padding: var(--sd-s3) var(--sd-s4);
  background: var(--sd-prussian);
  color: var(--sd-paper);
  border-radius: 14px 14px 4px 14px;
  font-size: var(--sd-fs-lead);
  font-weight: var(--sd-w-med);
  line-height: 1.35;
}
.chat-ai { align-self: flex-start; gap: var(--sd-s3); }
.chat-ai-av {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--sd-terra);
  color: var(--sd-paper);
  font-size: 13px;
}
.chat-bubble {
  padding: var(--sd-s4);
  background: var(--sd-surface-2);
  border-radius: 14px 14px 14px 4px;
}
.chat-bubble p { margin: 0; font-size: var(--sd-fs-lead); color: var(--sd-ink); line-height: var(--sd-lh-body); }
.chat-bubble p + p { margin-top: var(--sd-s3); }
.chat-bubble strong { font-weight: var(--sd-w-bold); }
.chat-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sd-s3) 0;
  font-size: var(--sd-fs-ui);
}
.chat-table td {
  padding: var(--sd-s2) 0;
  border-bottom: var(--sd-hairline-w) solid var(--sd-hairline);
  color: var(--sd-ink);
}
.chat-table tr:last-child td { border-bottom: none; }
.chat-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--sd-w-bold); }

/* -- Name callout ---------------------------------------------------------- */
.callout {
  border-left: 3px solid var(--sd-accent);
  padding-left: var(--sd-s5);
}
.callout .pron { color: var(--sd-ink-3); font-style: italic; }
.callout dl { margin: var(--sd-s4) 0 0; }
.callout dt { font-weight: var(--sd-w-bold); margin-top: var(--sd-s4); }
.callout dd { margin: var(--sd-s1) 0 0; color: var(--sd-ink-2); }

/* -- Capital-name identity (bold + hue; never hue alone) ------------------- */
.cap {
  font-weight: var(--sd-w-bold);
  text-decoration: underline;            /* underline inherits the capital color */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.cap--natural      { color: var(--sd-cap-natural); }
.cap--social       { color: #8A6D14; }   /* text-safe gold (canonical --sd-cap-social #E3B505 ~2.4:1 fails on paper; this ~4.8:1) */
.cap--human        { color: var(--sd-cap-human); }
.cap--manufactured { color: var(--sd-cap-manufactured); }
.cap--financial    { color: var(--sd-cap-financial); }
.cap--intellectual { color: var(--sd-cap-intellectual); }

/* -- Footer links ---------------------------------------------------------- */
.site-foot a { color: var(--sd-link); text-decoration: none; border-bottom: 1px solid var(--sd-band-hairline); }
.site-foot a:hover { border-bottom-color: var(--sd-prussian); }

/* ============================================================================
   Reveal-on-interaction — sections LEAD with the visual; the prose is disclosed
   when the reader hovers, focuses, or taps the visual (or a part of it).
   Progressive enhancement: without JS everything is shown; the `.js` gate only
   collapses copy once the page is interactive, so no content is ever stranded.
   ========================================================================== */

/* Disclosable copy: collapses to zero height via the 0fr→1fr grid technique,
   so the column leads with the heading + visual and no empty gap. */
.js .reveal-copy {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease, opacity .4s ease, margin .45s ease;
}
.js .reveal-copy > .reveal-inner {
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .4s ease, transform .45s ease, visibility 0s linear .45s;
}
.js .reveal-copy.is-open { grid-template-rows: 1fr; }
.js .reveal-copy.is-open > .reveal-inner {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .05s, transform .45s ease .05s;
}
/* keep the last revealed paragraph from sitting flush on the CTA below it */
.js .reveal-copy.is-open + * { margin-top: var(--sd-s5); }

/* Touch / no-hover devices: hover is the only trigger now (no click/pin), so
   show the disclosable copy expanded — nothing should be unreachable. */
@media (hover: none) {
  .js .reveal-copy { grid-template-rows: 1fr; }
  .js .reveal-copy > .reveal-inner { opacity: 1; visibility: visible; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story-mark { animation: none; }
  .js .reveal-copy, .js .reveal-copy > .reveal-inner { transition-duration: .01ms; }
}

/* The visual is a hotspot surface: it invites the pointer, and its parts light
   up / dim as the reader explores. The wrapper anchors the ✦ markers. */
.reveal-viz { cursor: pointer; position: relative; }
/* the wrapper matches the SVG's box so the ✦ markers (positioned in %) land on
   the right parts; the svg fills the wrapper. */
.viz-wrap { position: relative; }
#opener .viz-wrap { max-width: 35rem; }
#opener .viz-wrap .hero-viz, #how .viz-wrap .fl { max-width: 100%; }
/* card visuals: constrain the hotspot box to the card so the ✦ pins to its corner */
#what .rec-carousel, #truth .hero-visual, #ai .ai-visual { max-width: 30rem; margin-inline: auto; }
.reveal-viz [data-spot] { cursor: pointer; }
/* when a specific part is engaged, the others recede so the eye follows */
.reveal-viz.has-active [data-part] { transition: opacity .3s ease; }
.reveal-viz.has-active [data-part]:not(.is-active) { opacity: 0.28; }
.reveal-viz [data-part].is-active { opacity: 1; }
/* SVG group hotspots need a hit area even over transparent gaps */
.reveal-viz [data-spot] rect.spot-hit,
.reveal-viz [data-spot] { pointer-events: auto; }
.spot-hit { fill: transparent; }
/* focus ring for keyboard users landing on an SVG hotspot */
.reveal-viz [data-spot]:focus-visible { outline: 2px solid var(--sd-terra); outline-offset: 3px; }
.reveal-viz [data-spot] { outline: none; }

/* -- Page hero (interior pages: Methodology, About) ------------------------ */
.page-hero { padding-top: clamp(var(--sd-s7), 9vw, 5.5rem); }
.page-hero h1 {
  font-family: var(--sd-font-reader);
  font-weight: 600;
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--sd-heading);
  margin: 0 0 var(--sd-s5);
  max-width: 20ch;
}
.page-hero .lede {
  font-family: var(--sd-font-reader);
  font-size: clamp(var(--sd-fs-lead), 2.4vw, 1.4rem);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink);
  margin: 0;
}

/* -- Coming-soon note (Methodology placeholder) ---------------------------- */
.soon {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-s2);
  margin-top: var(--sd-s6);
  padding: var(--sd-s2) var(--sd-s4);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-ctl);
  background: var(--sd-surface-2);
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--sd-w-med);
  color: var(--sd-ink-3);
}
.soon .soon-star { color: var(--sd-terra); }

/* the four cycle verbs, as a quiet preview strip */
.cycle {
  list-style: none;
  margin: var(--sd-s7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sd-s5);
  grid-template-columns: 1fr;
  max-width: 46rem;
}
@media (min-width: 44rem) { .cycle { grid-template-columns: repeat(4, 1fr); } }
.cycle li {
  padding: var(--sd-s5) var(--sd-s4);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  background: var(--sd-paper);
}
.cycle .cyc-verb {
  font-family: var(--sd-font-reader);
  font-weight: 600;
  font-size: var(--sd-fs-section);
  color: var(--sd-prussian);
  margin: 0 0 var(--sd-s2);
}
.cycle .cyc-note { margin: 0; font-size: var(--sd-fs-ui); color: var(--sd-ink-2); line-height: var(--sd-lh-body); }

/* -- Leadership profiles (About) ------------------------------------------- */
.team {
  display: grid;
  gap: var(--sd-s7);
  grid-template-columns: 1fr;
  margin-top: var(--sd-s7);
}
.profile {
  display: grid;
  gap: var(--sd-s5) var(--sd-s6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 44rem) {
  .profile { grid-template-columns: 12rem 1fr; gap: var(--sd-s7); }
}
/* portrait: square frame, photo or monogram fallback */
.portrait {
  width: 100%;
  max-width: 12rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--sd-radius-card);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  overflow: hidden;
  background: var(--sd-surface-2);
  box-shadow: 0 12px 34px -18px rgba(20, 40, 63, 0.28);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
/* monogram placeholder (used until a headshot lands) */
.portrait--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sd-prussian-tint);
}
.portrait--mono span {
  font-family: var(--sd-font-reader);
  font-weight: 600;
  font-size: 3rem;
  color: var(--sd-prussian);
  letter-spacing: 0.02em;
}
.profile-body h2 {
  font-family: var(--sd-font-reader);
  font-weight: 600;
  font-size: var(--sd-fs-title);
  line-height: var(--sd-lh-tight);
  letter-spacing: -0.01em;
  color: var(--sd-heading);
  margin: 0 0 var(--sd-s1);
}
.profile-role {
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--sd-w-bold);
  color: var(--sd-terra-deep);
  margin: 0 0 var(--sd-s4);
}
.profile-body .prose p:last-child { margin-bottom: 0; }
/* outbound vitae links (personal site, writing, LinkedIn) — quiet meta row */
.profile-links {
  font-size: var(--sd-fs-meta);
  color: var(--sd-ink-3);
  margin-top: var(--sd-s4);
}

/* -- Footer ---------------------------------------------------------------- */
.site-foot {
  scroll-snap-align: end; /* give the footer its own snap point — without it, proximity-snap yanks the viewport back to the last section's start and hides the footer */
  border-top: var(--sd-hairline-w) solid var(--sd-hairline);
  padding-block: var(--sd-s6);
  color: var(--sd-ink-3);
  font-size: var(--sd-fs-meta);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sd-s4);
}

/* -- Our Story (About): two-problem cards + resolution band ----------------- */
.story-problems {
  display: grid;
  gap: var(--sd-s5);
  grid-template-columns: 1fr;
  align-items: start;   /* each card keeps its own height when its body reveals */
  margin-top: var(--sd-s7);
}
@media (min-width: 44rem) { .story-problems { grid-template-columns: 1fr 1fr; gap: var(--sd-s6); } }
.story-problem {
  padding: var(--sd-s5);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  background: var(--sd-paper);
  box-shadow: 0 12px 34px -20px rgba(20, 40, 63, 0.22);
}
.story-problem h3 {
  font-family: var(--sd-font-reader);
  font-weight: 600;
  font-size: var(--sd-fs-section);
  line-height: var(--sd-lh-tight);
  color: var(--sd-heading);
  margin: 0 0 var(--sd-s3);
}
.story-problem p {
  margin: 0;
  font-size: var(--sd-fs-lead);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink-2);
}
.story-answer {
  display: flex;
  gap: var(--sd-s4);
  align-items: flex-start;
  margin: var(--sd-s6) 0 0;
  padding: var(--sd-s6);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  background: var(--sd-terra-tint);
  font-family: var(--sd-font-reader);
  font-size: clamp(var(--sd-fs-lead), 2.2vw, 1.35rem);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink);
}
.story-answer-mark {
  flex: none;
  color: var(--sd-terra);
  font-size: 1.6rem;
  line-height: 1.15;
}
/* Each problem's body is disclosed by hovering (or focusing) its heading; the
   ✦ is the beckon. No JS → the bodies show (progressive enhancement). */
.story-toggle { display: flex; align-items: baseline; gap: var(--sd-s2); cursor: pointer; }
.story-mark { flex: none; color: var(--sd-terra); font-size: 0.82em; line-height: 1; }
.js .story-mark { animation: spark-twinkle 2.9s ease-in-out infinite; }
.story-toggle[aria-expanded="true"] .story-mark { animation: none; }
.story-toggle:focus-visible { outline: 2px solid var(--sd-terra); outline-offset: 3px; border-radius: var(--sd-radius-ctl); }
.story-toggle { outline: none; }

/* -- Improvement: chat interactions for impact management ------------------
   One "Ask Sedoha" window; three exchanges (set goals / track progress /
   weigh strategies), each a hover-spot with an edge marker. Hovering a marker
   highlights its exchange (the others recede) and reveals the matching copy. */
#what .chat-viz { max-width: 30rem; margin-inline: auto; }
.chat-card {
  margin: 0;
  overflow: hidden;
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  box-shadow: 0 12px 34px -16px rgba(20, 40, 63, 0.30);
}
.chat-exchange {
  display: flex;
  flex-direction: column;
  gap: var(--sd-s3);
  cursor: pointer;
}
.chat-exchange + .chat-exchange {
  border-top: var(--sd-hairline-w) solid var(--sd-hairline);
  padding-top: var(--sd-s4);
}
.chat-exchange:focus-visible {
  outline: 2px solid var(--sd-terra);
  outline-offset: 4px;
  border-radius: var(--sd-radius-ctl);
}
/* the header doubles as the "what this is" reveal trigger (its ✦ stays) */
.chat-head { cursor: pointer; }
.chat-head:hover .chat-title,
.chat-head[aria-expanded="true"] .chat-title { color: var(--sd-terra-deep); }
.chat-head:focus-visible { outline: 2px solid var(--sd-terra); outline-offset: -2px; }
/* per-industry slide label */
.chat-sector {
  margin: 0;
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--sd-w-bold);
  color: var(--sd-terra-deep);
}
/* the rotating industry examples (cross-fade, stacked in one cell) */
.chat-rotator { display: grid; }
.chat-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--sd-s4);
  padding: var(--sd-s4) var(--sd-s4) var(--sd-s5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.chat-slide.is-active { opacity: 1; pointer-events: auto; }
.chat-dots { display: flex; gap: var(--sd-s2); justify-content: center; margin-top: var(--sd-s4); }
.chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sd-band-hairline);
  transition: background 0.3s ease;
}
.chat-dot.is-active { background: var(--sd-terra); }

/* -- The ledger: a compact mock of the product interface ------------------
   Nav + a dense chart of accounts + a docked chat; hover markers surface the
   ledger's properties (search / verify / audit / inquire). The four regions
   are [data-part]s, so the reveal engine dims the rest when one is engaged. */
#truth .app-viz { max-width: 34rem; margin-inline: auto; }
.app-window {
  margin: 0;
  overflow: hidden;
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  box-shadow: 0 18px 44px -20px rgba(20, 40, 63, 0.34);
  font-size: var(--sd-fs-table);
}
.app-bar {
  display: flex;
  align-items: center;
  gap: var(--sd-s3);
  padding: var(--sd-s3) var(--sd-s4);
  border-bottom: var(--sd-hairline-w) solid var(--sd-hairline);
  background: var(--sd-surface-2);
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--sd-font-reader);
  font-weight: 600;
  color: var(--sd-prussian);
  white-space: nowrap;
}
.app-brand-star { color: var(--sd-terra); }
.app-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sd-s2);
  min-width: 0;
  padding: var(--sd-s2) var(--sd-s3);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-ctl);
  background: var(--sd-paper);
  color: var(--sd-ink-3);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-search-ic { flex: none; }
.app-body { display: flex; align-items: stretch; }
.app-nav {
  flex: none;
  width: 34%;
  max-width: 10rem;
  padding: var(--sd-s3);
  border-right: var(--sd-hairline-w) solid var(--sd-hairline);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--sd-surface-2);
}
.app-nav-h {
  margin: var(--sd-s3) 0 var(--sd-s1);
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--sd-w-bold);
  color: var(--sd-ink-3);
}
.app-nav-h:first-child { margin-top: 0; }
.app-nav-i {
  padding: 3px var(--sd-s2);
  border-radius: var(--sd-radius-ctl);
  color: var(--sd-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-nav-i.is-current {
  background: var(--sd-terra-tint);
  color: var(--sd-terra-deep);
  font-weight: var(--sd-w-med);
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-s2);
  padding: var(--sd-s3) var(--sd-s4);
  border-bottom: var(--sd-hairline-w) solid var(--sd-hairline);
}
.app-main-title { font-family: var(--sd-font-reader); font-weight: 600; color: var(--sd-heading); }
.app-audit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sd-s2);
  border-radius: var(--sd-radius-ctl);
  background: var(--sd-prussian-tint);
  color: var(--sd-prussian);
  font-size: var(--sd-fs-meta);
  font-weight: var(--sd-w-med);
  white-space: nowrap;
  cursor: pointer;
}
.app-ledger { padding: var(--sd-s2) var(--sd-s4) var(--sd-s3); cursor: pointer; }
.app-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sd-s3);
  padding: 4px 0;
  color: var(--sd-ink);
}
.app-row + .app-row, .app-sub + .app-row { border-top: var(--sd-hairline-w) solid var(--sd-hairline); }
.app-row--head {
  color: var(--sd-ink-3);
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.app-row .num, .app-sub .num { font-variant-numeric: tabular-nums; font-weight: var(--sd-w-med); white-space: nowrap; }
.app-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 7px; background: var(--c); }
.app-sub {
  display: flex;
  justify-content: space-between;
  gap: var(--sd-s3);
  padding: 2px 0 2px var(--sd-s5);
  font-size: var(--sd-fs-meta);
  color: var(--sd-ink-3);
}
.app-sub .num { font-weight: var(--sd-w-reg); }
.app-chat {
  display: flex;
  flex-direction: column;
  gap: var(--sd-s2);
  padding: var(--sd-s3) var(--sd-s4) var(--sd-s4);
  border-top: var(--sd-hairline-w) solid var(--sd-hairline);
  background: var(--sd-surface-2);
  cursor: pointer;
}
.app-chat-msg { font-size: var(--sd-fs-table); line-height: var(--sd-lh-body); }
.app-chat-user {
  align-self: flex-end;
  max-width: 85%;
  padding: var(--sd-s2) var(--sd-s3);
  background: var(--sd-prussian);
  color: var(--sd-paper);
  border-radius: 12px 12px 3px 12px;
  font-weight: var(--sd-w-med);
}
.app-chat-ai {
  align-self: flex-start;
  max-width: 92%;
  display: flex;
  gap: var(--sd-s2);
  padding: var(--sd-s3);
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: 12px 12px 12px 3px;
  color: var(--sd-ink);
}
.app-chat-star {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sd-terra);
  color: var(--sd-paper);
  font-size: 10px;
}

/* -- Simplified reporting: vertical flow (data in → ledger → reports out) ---
   Compact source/report chip bands top & bottom, a full-width itemised chart
   of accounts in the middle. Reuses .app-row/.app-sub for the ledger rows. */
#how .flow-viz { max-width: 30rem; margin-inline: auto; position: relative; }
.flow-band {
  padding: var(--sd-s3) var(--sd-s4);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  background: var(--sd-surface-2);
  cursor: pointer;
}
.flow-band-h {
  display: block;
  margin-bottom: var(--sd-s2);
  font-size: var(--sd-fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: var(--sd-w-bold);
  color: var(--sd-ink-3);
}
.flow-chips { display: flex; flex-wrap: wrap; gap: var(--sd-s2); }
.flow-chip {
  padding: 3px var(--sd-s3);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: 999px;
  background: var(--sd-paper);
  font-size: var(--sd-fs-meta);
  color: var(--sd-ink-2);
  white-space: nowrap;
}
.flow-arrow {
  text-align: center;
  color: var(--sd-terra);
  font-size: 13px;
  line-height: 1;
  margin: var(--sd-s2) 0;
}
.flow-ledger {
  overflow: hidden;
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  background: var(--sd-paper);
  box-shadow: 0 14px 38px -20px rgba(20, 40, 63, 0.30);
  cursor: pointer;
}
.flow-ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sd-s3);
  padding: var(--sd-s3) var(--sd-s4);
  border-bottom: var(--sd-hairline-w) solid var(--sd-hairline);
  background: var(--sd-surface-2);
}
.flow-ledger-title { font-family: var(--sd-font-reader); font-weight: 600; color: var(--sd-heading); }
.flow-ledger-ent { font-size: var(--sd-fs-meta); color: var(--sd-ink-3); white-space: nowrap; }
.flow-ledger-body { padding: var(--sd-s2) var(--sd-s4) var(--sd-s3); }

/* Header mark — six-dot chart mark beside the wordmark. */
.wordmark { display: inline-flex; align-items: center; gap: 0.42em; }
.wordmark-mark { width: 0.92em; height: 0.92em; flex: none; }
.wordmark-mark svg { width: 100%; height: 100%; display: block; }
.wordmark-mark .c-nat { fill: var(--sd-cap-natural); }
.wordmark-mark .c-soc { fill: var(--sd-cap-social); }
.wordmark-mark .c-hum { fill: var(--sd-cap-human); }
.wordmark-mark .c-man { fill: var(--sd-cap-manufactured); }
.wordmark-mark .c-fin { fill: var(--sd-cap-financial); }
.wordmark-mark .c-int { fill: var(--sd-cap-intellectual); }
.wordmark-mark .wm-star { fill: var(--sd-terra); }

/* ---------------------------------------------------------------------------
   Engagement steps (what-we-do page) — the four-step engagement arc. One list, one
   style: numbered via CSS counter, hairline top rules, no card chrome (austere
   register — structure, not decoration). */
.eng-steps {
  list-style: none;
  margin: var(--sd-s6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sd-s5);
  counter-reset: eng-step;
}
.eng-steps li {
  counter-increment: eng-step;
  border-top: var(--sd-hairline-w) solid var(--sd-hairline);
  padding-top: var(--sd-s4);
}
.eng-steps li::before {
  content: counter(eng-step, decimal-leading-zero);
  display: block;
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  font-weight: var(--sd-w-bold);
  letter-spacing: 0.06em;
  color: var(--sd-terra);
  margin-bottom: var(--sd-s2);
  font-variant-numeric: tabular-nums;
}
.eng-steps h3 {
  margin: 0 0 var(--sd-s2);
  font-size: var(--sd-fs-lead);
  color: var(--sd-ink);
}
.eng-steps p {
  margin: 0;
  color: var(--sd-ink-2);
  line-height: var(--sd-lh-body);
}
.eng-steps--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .eng-steps, .eng-steps--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .eng-steps { grid-template-columns: 1fr; }
}

/* Chain-panel outbound link to the matching solutions door */
.chain-more {
  display: inline-block;
  margin-top: var(--sd-s2);
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  font-weight: var(--sd-w-med);
  color: var(--sd-terra-deep);
  text-decoration: none;
}
.chain-more:hover { text-decoration: underline; }

/* Plain-words term — a dotted-underline term reveals a one-sentence plain
   definition on hover/tap-focus. Site-wide pattern. */
.term {
  position: relative;
  border-bottom: 1px dotted var(--sd-ink-3);
  cursor: help;
}
.term:focus { outline: none; }
.term-def {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: min(34ch, 72vw);
  background: var(--sd-surface-2);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  padding: var(--sd-s3) var(--sd-s4);
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  font-style: normal;
  line-height: var(--sd-lh-body);
  color: var(--sd-ink-2);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.term:hover .term-def,
.term:focus .term-def {
  opacity: 1;
  visibility: visible;
}

/* Disclosure fold — a bold lead sentence that opens to its full paragraph.
   Native <details>, so it works with JS off. */
.fold {
  border-top: var(--sd-hairline-w) solid var(--sd-hairline);
  padding: var(--sd-s4) 0;
  max-width: var(--sd-measure);
}
.fold:last-of-type { border-bottom: var(--sd-hairline-w) solid var(--sd-hairline); }
.fold summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--sd-s4);
  font-family: var(--sd-font-reader);
  font-size: clamp(var(--sd-fs-lead), 1.7vw, 1.2rem);
  line-height: var(--sd-lh-body);
  font-weight: var(--sd-w-med);
  color: var(--sd-ink);
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--sd-font-ui);
  color: var(--sd-terra);
  transition: transform 160ms ease;
}
.fold[open] summary::after { content: "\2212"; }
.fold p {
  margin: var(--sd-s4) 0 0;
  font-family: var(--sd-font-reader);
  font-size: var(--sd-fs-lead);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink-2);
}
.fold a { color: var(--sd-prussian); text-decoration: underline; text-underline-offset: 2px; }

/* Statement-hero identity subline. */
.hero--statement .hero-sub {
  margin: var(--sd-s5) auto 0;
  max-width: 44ch;
  font-family: var(--sd-font-reader);
  font-size: clamp(var(--sd-fs-lead), 2vw, 1.3rem);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink-2);
}

/* Ecosystem variant of the chain section — "Everyone answers to someone".
   Rides the .chain JS + panel machinery; the chips are restyled .chain-node
   buttons; bands echo .flow-chip / .flow-band-h. */
.eco-bands { max-width: 28rem; margin-inline: auto; }
.eco-band-h {
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  font-weight: var(--sd-w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sd-ink-3);
  margin: var(--sd-s5) 0 var(--sd-s2);
}
.eco-bands .eco-band-h:first-child { margin-top: 0; }
.eco-band { display: flex; flex-wrap: wrap; gap: var(--sd-s2); }
.chain--eco .chain-node {
  flex-direction: row;
  padding: 4px var(--sd-s3);
  border-radius: 999px;
  font-size: var(--sd-fs-meta);
  color: var(--sd-ink-2);
  background: var(--sd-paper);
}
.eco-anchor {
  border-left: 3px solid var(--sd-terra);
  padding-left: var(--sd-s3);
  color: var(--sd-ink-2);
  font-size: var(--sd-fs-ui);
  margin: 0;
}

/* Chat-carousel header — sector heading flanked by prev/next arrows. */
.chat-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-s4);
  margin-bottom: var(--sd-s4);
}
.chat-nav-label {
  margin: 0;
  min-width: 13ch;
  text-align: center;
  font-family: var(--sd-font-reader);
  font-size: clamp(var(--sd-fs-lead), 2vw, 1.3rem);
  font-weight: 600;
  color: var(--sd-heading);
}
.chat-arrow {
  font: inherit;
  cursor: pointer;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  background: var(--sd-paper);
  color: var(--sd-ink-2);
  display: grid;
  place-items: center;
}
.chat-arrow:hover { border-color: var(--sd-muted); color: var(--sd-heading); }
/* The heading carries the sector name; hide the in-slide label under JS
   (it stays for the no-JS stacked view). */
.js .chat-slide .chat-sector { display: none; }

/* -- Honesty label under synthetic product mockups (observe pass 2026-08-25).
   Reader-visible: the synthetic-data markers must never live only in comments. */
.mock-note {
  margin: var(--sd-s3) 0 0;
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  line-height: var(--sd-lh-body);
  color: var(--sd-ink-3);
}

/* ---------------------------------------------------------------------------
   Follow-one-number strip (homepage #trace) — the traceability claim shown end
   to end. Rides the section-head/lede + mock-note patterns; numbered by CSS
   counter like .eng-steps. */
.trace-strip { list-style: none; margin: var(--sd-s6) 0 var(--sd-s4); padding: 0;
  display: grid; gap: var(--sd-s4); counter-reset: trace; max-width: 40rem; }
.trace-strip li { counter-increment: trace; display: grid;
  grid-template-columns: 7.5rem 1fr; gap: var(--sd-s4); align-items: baseline;
  border-left: 3px solid var(--sd-terra); padding-left: var(--sd-s4); }
.trace-tag { font-family: var(--sd-font-ui); font-size: var(--sd-fs-meta);
  font-weight: var(--sd-w-bold); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sd-terra-deep); }
.trace-tag::before { content: counter(trace) " · "; color: var(--sd-ink-3); }
.trace-strip p { margin: 0; color: var(--sd-ink-2); line-height: var(--sd-lh-body); }
@media (max-width: 34rem) { .trace-strip li { grid-template-columns: 1fr; gap: var(--sd-s2); } }

/* Problem section — copy in the left column, the two-loops figure in the right. */
.problem-grid { display: grid; gap: var(--sd-s6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 52rem) {
  .problem-grid { grid-template-columns: 6fr 6fr; gap: var(--sd-s7); }
}
.problem-copy .section-lede { max-width: 48ch; }
.problem-copy .section-lede:not(.act-bridge) { color: var(--sd-ink-2); margin-bottom: var(--sd-s4); }

/* Two ledgers: money's tidy balance sheet beside impact's pile of reports.
   Reuses the app-row family for the sheet; the pile is four offset cards. */
.ledgers { margin: 0; }
.ledgers-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sd-s5); align-items: start; }
.ledger-label {
  margin: 0 0 var(--sd-s3);
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sd-heading);
  text-align: center;
}
.ledger-card {
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  padding: var(--sd-s3) var(--sd-s4) var(--sd-s4);
  box-shadow: 0 14px 36px -18px rgba(20, 40, 63, 0.30);
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-table);
}
.ledger-head {
  display: flex; justify-content: space-between; gap: var(--sd-s3);
  padding-bottom: var(--sd-s2); margin-bottom: var(--sd-s2);
  border-bottom: var(--sd-hairline-w) solid var(--sd-hairline);
  font-weight: 600; color: var(--sd-ink);
}
.ledger-foot { display: flex; gap: var(--sd-s2); margin-top: var(--sd-s3); font-size: var(--sd-fs-meta); }
.pile { position: relative; min-height: 16rem; }
.pile-doc {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sd-s3) var(--sd-s4);
  background: var(--sd-paper);
  border: var(--sd-hairline-w) solid var(--sd-hairline);
  border-radius: var(--sd-radius-card);
  box-shadow: 0 10px 28px -16px rgba(20, 40, 63, 0.28);
  font-family: var(--sd-font-ui);
  font-size: var(--sd-fs-meta);
  color: var(--sd-ink-2);
}
.pile-kind { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sd-ink-3); }
.pile-doc--a { top: 0;      transform: rotate(-3deg) translateX(-4%); }
.pile-doc--b { top: 3.7rem; transform: rotate(2deg) translateX(5%); }
.pile-doc--c { top: 7.4rem; transform: rotate(-1.5deg) translateX(-2%); }
.pile-doc--d { top: 11.1rem; transform: rotate(1deg) translateX(3%); padding-right: 4.5rem; }
.pile-stamp {
  position: absolute; right: var(--sd-s3); top: var(--sd-s3); transform: rotate(-8deg);
  padding: 1px 7px; border: 1.5px solid var(--sd-terra-deep); border-radius: 3px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sd-terra-deep); opacity: 0.85;
}
.ledgers-captions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sd-s5); margin-top: var(--sd-s4); }
.ledgers-captions p { margin: 0; font-family: var(--sd-font-ui); font-size: 0.85rem; line-height: 1.4; color: var(--sd-ink-3); text-align: center; }
@media (max-width: 30rem) {
  .ledgers-pair, .ledgers-captions { grid-template-columns: 1fr; }
}

/* Act bridges — the one-line handoffs between the homepage's story sections. */
.act-bridge { font-style: italic; color: var(--sd-ink-2); max-width: var(--sd-measure); }