/*! EXCO Commercial components 3.0.0, on exco-foundation-3.0.0.css. Spec: planning/research/v3/DIRECTION-v3.md (D).
    Components only: no :root, no tokens, no selector the foundation declares, every type size a var(--fs-n).
    Colors come from foundation tokens. Motion runs only under html.js and prefers-reduced-motion: no-preference;
    without JS or with reduced motion every component is static and complete. */

/* ============================================================ hero (D 4.2): split statement */
/* air above; no bottom padding (the next section or the proof row closes it) */
.hero { padding-top: clamp(3rem, 7vw, 5rem); }
/* h1 in columns 1-7; lead and actions in 8-12 from 960; stacked below */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5) var(--col-gap); }
.hero__grid > h1 { margin: 0; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .hero__grid > h1 { grid-column: 1 / 8; }
  /* the lead's first cap line sits on the h1 cap line (Geist: cap top = (lh - 1.3) / 2 + 0.295 em) */
  .hero__aside { grid-column: 8 / 13; padding-top: calc(var(--fs-1) * 0.155 - var(--fs-3) * 0.345); }
}
/* lead, index and actions stack 24px apart */
.hero__aside > * + * { margin-top: var(--s-5); }

/* ============================================================ proof row and steps (D 4.3, 4.14) */
/* hairline-topped columns: one below 560, two to 959, four (or three) from 960 */
.proof, .steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .proof, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .proof, .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* three columns (StableHOCL): one column below 760, three from 760 */
@media (max-width: 759px) { .proof--3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 760px) { .proof--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof > li, .steps > li { padding-top: var(--s-4); border-top: 1px solid var(--line); }
/* term: 17/500, two lines at most */
.proof__title, .steps__term { margin: 0; font-size: var(--fs-4); font-weight: 500; line-height: 1.35; text-wrap: balance; }
/* caption: 15 muted */
.proof__text, .steps__text { margin: var(--s-2) 0 0; font-size: var(--fs-5); line-height: 1.45; color: var(--muted); }
/* steps: term and sentence on their own lines; the number from the markup or a counter (no new text) */
.steps { counter-reset: step; }
.steps > li { counter-increment: step; }
.steps__term, .steps__text { display: block; }
.steps__no { display: block; margin-bottom: var(--s-3); font-size: var(--fs-6); font-weight: 500; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.steps__no:empty::before { content: counter(step, decimal-leading-zero); }
/* proof row with line icons (Home, pass 2 2026-10-18): 32px ink-deep icon over a 22px title; icon left of the text below 760 */
.proof--icons > li { padding-top: var(--s-5); }
.proof__icon { width: 32px; height: 32px; margin-bottom: var(--s-4); color: var(--ink-deep); }
.proof--icons .proof__title { font-size: var(--fs-3); line-height: var(--lh-3); letter-spacing: var(--ls-3); }
@media (max-width: 759px) {
  .proof--icons > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s-4); }
  .proof--icons .proof__icon { grid-row: 1 / span 2; margin: 0; }
  .proof--icons > li > p { grid-column: 2; }
}

/* strip (D 17; Home Ecosystem since the strategy review 2026-10-23): comparable items as hairline-topped columns, the proof
   row's geometry, instead of a third list of rows on one page: four from 960, two from 560, one below. Each item: title
   17/500, line 15 muted, an optional link 12px under it. Markup: .rows.rows--strip > .row > .row__title, .row__text, .tlink */
.rows--strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
@media (min-width: 560px) { .rows--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .rows--strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rows--strip > * { border-top: 1px solid var(--line); }
.rows--strip > .row { display: block; min-height: 0; padding: var(--s-4) 0 0; }
.rows--strip .row__title { margin: 0 0 var(--s-2); font-size: var(--fs-4); line-height: 1.35; letter-spacing: 0; }
.rows--strip .row__text { font-size: var(--fs-5); line-height: 1.45; color: var(--muted); max-width: none; text-wrap: balance; }
.rows--strip .row > .tlink { margin-top: var(--s-3); }

/* Company roles (Home, S-48): one open strip, shared rules, clear names and quieter roles. */
.company-strip { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--s-6) 0 0; padding: 0; list-style: none; border-block: 1px solid var(--line); }
.company-strip > li { min-width: 0; padding-block: var(--s-5); }
.company-strip > li + li { border-top: 1px solid var(--line); }
.company-strip__name { margin: 0; font-size: var(--fs-3); font-weight: 500; line-height: var(--lh-3); letter-spacing: var(--ls-3); }
.company-strip__name > :is(a, span) { display: inline-block; padding-block: var(--s-2); }
.company-strip__name a { text-decoration: underline 1px transparent; text-underline-offset: 0.2em; }
.company-strip__name a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
.company-strip__name .arrow { display: inline-block; margin-left: var(--s-1); font-size: var(--fs-5); }
.company-strip__role { margin: var(--s-2) 0 0; font-size: var(--fs-5); line-height: 1.45; color: var(--muted); }
@media (min-width: 960px) {
  .company-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .company-strip > li { padding: var(--s-5); }
  .company-strip > li:first-child { padding-left: 0; }
  .company-strip > li:last-child { padding-right: 0; }
  .company-strip > li + li { border-top: 0; border-left: 1px solid var(--line); }
}

/* ============================================================ stability bars (S-78, Reed 2026-10-24: "the hybrid")
   The value first at a headline size ("24 months / documented stability", on an amber rule), then a simplified chart:
   StableHOCL's amber bar to 24 months with a dashed extension to 33 over a --line track, conventional HOCl's short stub
   under it, each labelled inline, and a 0 / 12 / 24 / 36 month scale, then the testing line. Replaces the .tl timeline
   (Home) and the StableHOCL evidence box and comparison cards; .sbars--detail (StableHOCL hero) adds a six-month scale and
   a key. .is-dark recolours it for a charcoal band. The bars draw once when shown (site.js data-reveal); static otherwise. */
.sbars { min-width: 0; }
.sbars__stat { margin: 0 0 var(--s-7); padding-left: var(--s-6); border-left: 2px solid var(--accent); }
.sbars__stat > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); }
.sbars__n { font-size: var(--fs-1); line-height: 1; letter-spacing: var(--ls-1); }
.sbars__u { font-size: var(--fs-3); }
.sbars__what { flex-basis: 100%; margin-top: var(--s-2); font-size: var(--fs-4); color: var(--muted); }
.sbars__chart { display: grid; gap: var(--s-5); }
.sbars__lab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-4); max-width: none; margin: 0 0 var(--s-2); font-size: var(--fs-5); font-weight: 500; line-height: 1.4; }
.sbars__row--conv .sbars__lab, .sbars__val { color: var(--muted); }
.sbars__val { font-weight: 400; }
.sbars__track { position: relative; height: 6px; overflow: hidden; background: var(--line); border-radius: 3px; }
.sbars__bar { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
/* x = months / 36: StableHOCL to 24, the data continuing to about 33.5; conventional HOCl a schematic 1.75 */
.sbars__row--stable .sbars__bar { width: 66.6667%; background: var(--accent); }
.sbars__ext { position: absolute; top: 0; bottom: 0; left: 66.6667%; width: 26.3889%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent) 0 6px, transparent 6px 10px); }
.sbars__row--conv .sbars__bar { width: 4.8611%; background: color-mix(in srgb, var(--muted) 60%, transparent); }
.sbars__scale { display: flex; justify-content: space-between; padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--fs-6); font-weight: 500; line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; }
.sbars__note { margin: var(--s-5) 0 0; font-size: var(--fs-5); line-height: 1.45; color: var(--muted); }
.is-dark .sbars__track { background: var(--line-dk); }
.is-dark .sbars__scale { border-top-color: var(--line-dk); }
.is-dark :is(.sbars__row--conv .sbars__lab, .sbars__val, .sbars__scale, .sbars__what, .sbars__note) { color: var(--muted-dk); }
.is-dark .sbars__row--conv .sbars__bar { background: color-mix(in srgb, var(--muted-dk) 60%, transparent); }
@media (max-width: 759px) { .sbars__stat { margin-bottom: var(--s-6); padding-left: var(--s-5); } }
/* .sbars--detail (StableHOCL): a six-month scale and a key for the solid (documented) and dashed (continuing) bar */
.sbars__key { display: grid; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; list-style: none; font-size: var(--fs-5); line-height: 1.4; color: var(--muted); }
.sbars__key li { display: flex; align-items: center; gap: var(--s-3); }
.sbars__key li::before { content: ""; flex: none; width: 24px; height: 6px; border-radius: 3px; }
.sbars__key-doc::before { background: var(--accent); }
.sbars__key-ext::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent) 0 6px, transparent 6px 10px); }
.sbars--detail .sbars__note { margin-top: var(--s-4); }

/* Why + stability evidence (Home, Reed 2026-10-23; S-37 / S-38 / S-78): the copy, then the bars */
.stability { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.stability__copy { min-width: 0; }
.stability__copy h2 { max-width: 18ch; margin: 0 0 var(--s-5); }
.stability__copy > p:not(.label) { max-width: var(--measure); }
.stability__copy .stability__link { margin-top: var(--s-5); margin-bottom: 0; }
@media (min-width: 1100px) {
  .stability { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); }
}

/* the site's one motion moment: the bars draw once in --dur-draw (1.2s) when the chart first shows.
   site.js sets data-shown on the [data-reveal] element. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal]:not([data-shown="true"]) :is(.sbars__bar, .sbars__ext) { clip-path: inset(0 100% 0 0); }
  html.js [data-shown="true"] .sbars__row--conv .sbars__bar { animation: bars-draw calc(var(--dur-draw) * .4) var(--ease-out) both; }
  html.js [data-shown="true"] .sbars__row--stable .sbars__bar { animation: bars-draw calc(var(--dur-draw) * .65) var(--ease-out) calc(var(--dur-draw) * .1) both; }
  html.js [data-shown="true"] .sbars__ext { animation: bars-draw calc(var(--dur-draw) * .25) linear calc(var(--dur-draw) * .75) both; }
}
@keyframes bars-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ============================================================ panels and tags (D 4.6, 4.9) */
/* a contained paper-2 panel inside the container; never full-width */
.panel { padding: 40px; background: var(--paper-2); border-radius: var(--radius); }
@media (max-width: 759px) { .panel { padding: var(--s-5); } }
/* research panel: 64px under the market rows */
.panel--research { margin-top: var(--s-8); }
.panel__tag { margin: 0 0 var(--s-4); }
.panel__title { margin: 0 0 var(--s-2); }
.panel__intro { margin: 0; color: var(--muted); }
/* program rows inside the panel: a closed hairline list, 17/500 titles with the status tag beneath */
.panel .rows { margin-top: var(--s-5); border-block: 1px solid var(--line); }
.panel .row__title { font-size: var(--fs-4); line-height: 1.4; letter-spacing: 0; }
.row__title .tag { display: table; margin-top: var(--s-2); }
.panel__note { margin: var(--s-5) 0 0; font-size: var(--fs-5); line-height: 1.45; color: var(--muted); }
.panel__links { margin-top: var(--s-5); }
/* tag: fine, hairline box, sentence case */
.tag {
  display: inline-block; padding: var(--s-1) var(--s-2);
  font-size: var(--fs-6); font-weight: 500; line-height: 1.3; letter-spacing: 0.01em; white-space: nowrap;
  color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius);
}

/* ============================================================ research panel (Home; pass 2 2026-10-18, light 2026-10-19,
   inside Markets again since the strategy review 2026-10-23, D 4.6 / D 17)
   A contained --paper-2 panel (.rpanel) 64px under the market rows, inside section.home-markets: label, h3 title + intro,
   two program columns (16:9 image slot, h4 name, status, line), then the C-07 line and the links over a hairline. Light:
   the charcoal pathways band sits a section above, and a tint is never a band (D 17). Its image slots are light plates,
   pending (hidden, [data-pending]) until the landscapes land: no empty frames (D 17). Since 2026-10-23 they hold the
   owner-supplied orchard and range stills (.photo.photo--16x9.program__img). */
/* S-46: tighten the inset, not the outer container, so the panel aligns with the market grid. */
.rpanel { margin-top: var(--s-8); padding: var(--s-6); background: var(--paper-2); border-radius: var(--radius); }
@media (max-width: 759px) { .rpanel { padding: var(--s-5); } }
.is-dark .section__rule { border-top-color: var(--line-dk); }
.is-dark .label { color: var(--muted-dk); }
.is-dark .tag { color: var(--muted-dk); border-color: var(--line-dk); }
/* Label left, with the heading 8px below (S-46). */
.rpanel__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-2); }
.rpanel__top > * { margin: 0; }
/* S-53: a single reading hierarchy, not a heading competing with a side-by-side introduction. */
.rpanel__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.rpanel__title { margin: 0; max-width: none; }
.rpanel__intro { margin: 0; max-width: var(--measure); color: var(--muted); }
/* S-49: stacked editorial research rows, visually distinct from the 2x2 commercial market grid. */
.programs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.program { display: grid; grid-template-columns: clamp(88px, 22vw, 240px) minmax(0, 1fr); align-items: center; gap: var(--s-6); padding: var(--s-5) 0; }
.program:first-child { padding-top: 0; }
.program:last-child { padding-bottom: 0; }
.program + .program { border-top: 1px solid var(--line); }
.program__img { width: 100%; margin: 0; }
.program__body { min-width: 0; }
.program__title { margin: 0 0 var(--s-2); }
.program__text { margin: 0; max-width: var(--measure); }
@media (max-width: 559px) {
  /* S-54: thumbnail beside title/status; descriptions use the full phone width. */
  .program { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: var(--s-2) var(--s-4); }
  .program__body { display: contents; }
  .program__img { grid-row: 1 / 3; }
  .program__title { grid-column: 2; margin: 0; font-size: var(--fs-4); }
  .program__text { grid-column: 1 / -1; margin-top: var(--s-2); font-size: var(--fs-5); }
  .program .status { grid-column: 2; margin: 0; font-size: var(--fs-6); }
}
/* status: a half-filled ring (in progress) and the words, in the text colour; never a chip, never amber */
.status { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-5); font-weight: 500; line-height: 1.4; }
.status::before {
  content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
/* foot: the C-07 line, then the links, over a hairline */
.rpanel__foot { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.rpanel__note { margin: 0; font-size: var(--fs-5); line-height: 1.45; color: var(--muted); max-width: none; }
.rpanel__links { margin-top: var(--s-4); }

/* ============================================================ compact market index (Home; S-41 / S-43 / S-44 / S-45 / S-47)
   Four markets in a balanced two-by-two grid; all desktop images share one height. */
.market-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4);
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
}
.market-list > li { min-width: 0; }
.market-entry {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-areas: "image image" "copy arrow";
  align-content: start; align-items: start; gap: var(--s-4) var(--s-2);
  height: 100%; padding: var(--s-2); color: inherit; text-decoration: none;
}
.market-entry__image { grid-area: image; display: block; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.market-entry__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.market-entry__copy { grid-area: copy; min-width: 0; }
.market-entry__title { margin: 0; font-size: var(--fs-5); font-weight: 500; line-height: var(--lh-3); letter-spacing: var(--ls-3); }
.market-entry__arrow { grid-area: arrow; justify-self: end; font-size: var(--fs-3); line-height: 1; color: var(--ink-deep); }
.market-entry:is(:hover, :focus-visible) { background: var(--paper-2); }
.market-entry:focus-visible { outline-offset: -2px; }
@media (min-width: 900px) {
  .market-list { gap: var(--s-7) var(--s-5); margin-top: var(--s-7); }
  .market-entry__image { aspect-ratio: auto; height: clamp(120px, 11.5vw, 164px); }
  .market-entry__title { font-size: var(--fs-4); }
}
/* Short desktop windows retain the tighter height without reverting to long stacked rows. */
@media (min-width: 900px) and (max-height: 740px) {
  .market-list { row-gap: var(--s-6); margin-top: var(--s-6); }
  .market-entry__image { height: clamp(100px, 9vw, 132px); }
}
@media (prefers-reduced-motion: no-preference) {
  .market-entry { transition: background-color var(--dur-med) var(--ease-out); }
  .market-entry__arrow { transition: transform var(--dur-med) var(--ease-out); }
  .market-entry:is(:hover, :focus-visible) .market-entry__arrow { transform: translateX(4px); }
}

/* ============================================================ pathways band (Reed 2026-10-23; S-39 / S-40 / S-42)
   Small 1 / 2 / 3 and smaller titles, with compact circled arrows. No diagrams,
   audience labels or Explore text; the whole row is one link. */
.section.pband { --bleed: min(var(--s-5), var(--gutter)); padding-block: var(--section-y); }
@media (max-width: 759px) { .section.pband { padding-block: clamp(3.5rem, 10vw, 4.5rem); } }
.pband .section__rule { display: none; }
.pband + .section { padding-top: var(--section-y); }
.pband__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-6); }
.pband__head h2 { margin: 0; font-size: var(--fs-1); line-height: var(--lh-1); letter-spacing: var(--ls-1); max-width: 20ch; }
.pband__head > .tlink { margin-bottom: var(--s-1); }
.pband__role { max-width: var(--measure); margin: 0 0 var(--s-6); font-size: var(--fs-4); line-height: var(--lh-body); color: var(--paper); }
.pband .tlink .arrow { color: var(--accent); }
.paths { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); }
.path {
  position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 40px;
  grid-template-areas: "no title more" ". who who";
  align-items: start; gap: var(--s-2) var(--s-3);
  margin-inline: calc(-1 * var(--bleed)); padding: var(--s-5) var(--bleed);
  color: var(--paper); text-decoration: none;
}
.path::after { content: ""; position: absolute; left: var(--bleed); right: var(--bleed); bottom: 0; border-bottom: 1px solid var(--line-dk); }
.paths > li:last-child .path::after { border-bottom-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.path__no { grid-area: no; font-size: var(--fs-3); font-weight: 400; line-height: var(--lh-3); color: var(--muted-dk); font-variant-numeric: tabular-nums; }
.path__title { grid-area: title; margin: 0; font-size: var(--fs-3); font-weight: 400; line-height: var(--lh-3); letter-spacing: var(--ls-3); text-wrap: balance; }
.path__who { grid-area: who; margin: 0; }
.path__who-v { display: block; font-size: var(--fs-5); line-height: var(--lh-body); color: var(--muted-dk); }
.path__more { grid-area: more; justify-self: end; font-size: var(--fs-3); line-height: var(--lh-3); color: var(--accent); }
.path__more .arrow {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--accent); border-radius: 50%; line-height: 1;
}
@media (min-width: 1000px) {
  .path {
    grid-template-columns: 1.5rem minmax(0, 1.2fr) minmax(0, 1fr) 40px;
    grid-template-areas: "no title who more"; align-items: center;
    column-gap: var(--s-5); padding-block: var(--s-6);
  }
}
.path:is(:hover, :focus-visible) { background: var(--ink-deep-2); }
.path:focus-visible { outline-offset: -2px; }
.path:is(:hover, :focus-visible) .path__more .arrow { color: var(--ink-deep); background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  html.js .path { transition: background-color var(--dur-med) var(--ease-out); }
  html.js .path__more .arrow { transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
  .path:is(:hover, :focus-visible) .path__more .arrow { transform: translateX(4px); }
}
.pband__ask { margin: var(--s-6) 0 0; color: var(--muted-dk); }

/* ============================================================ placeholders (D 4.10) */
/* inline open item: bracketed text stays visible in a dashed box */
.placeholder {
  padding: 0.1em 0.35em; font-size: var(--fs-5); line-height: 1.5; color: var(--muted);
  border: 1px dashed var(--line-ui); border-radius: var(--radius);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
p.placeholder { display: block; max-width: var(--measure); padding: var(--s-3) var(--s-4); }
/* image plate: ink-deep with a 24px hairline grid; label bottom-left; 4:3 by default, 420px tall at most.
   Markup: <div class="placeholder placeholder--img" role="img" aria-label="Image placeholder: …">[<span class="placeholder__kind">Licensed image</span>: <span class="placeholder__shot">…</span>]</div> */
.placeholder--img {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  width: 100%; aspect-ratio: 4 / 3; max-height: 420px; padding: var(--s-5);
  text-align: left; color: var(--muted-dk);
  background-color: var(--ink-deep);
  background-image: linear-gradient(to bottom, var(--line-dk) 1px, transparent 1px), linear-gradient(to right, var(--line-dk) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  border: 1px solid var(--line-dk);
}
/* with the label spans, the brackets and colon stay in the DOM (check.py --launch) but take no space */
.placeholder--img:has(.placeholder__kind) { line-height: 0; color: transparent; }
.placeholder--3x2 { aspect-ratio: 3 / 2; }
.placeholder--16x9 { aspect-ratio: 16 / 9; }
.placeholder__kind { display: block; font-size: var(--fs-6); font-weight: 500; line-height: 1.4; color: var(--muted-dk); }
.placeholder__shot { display: block; margin-top: var(--s-1); font-size: var(--fs-5); line-height: 1.4; color: var(--paper); }
/* phones: 4:3, 240px tall at most */
@media (max-width: 559px) { .placeholder--img { aspect-ratio: 4 / 3; max-height: 240px; } }
/* band: a wide still under a section (420px cap). (The light plate and .placeholder--film that held the Home film band
   until the footage landed are gone: the band is now .film, below.) */
.placeholder--band { aspect-ratio: 21 / 8; }
@media (max-width: 759px) { .placeholder--band { aspect-ratio: 3 / 2; } }
/* a plate inside a dark object is ink-deep-2 (D 4.10) */
.is-dark .placeholder--img { background-color: var(--ink-deep-2); }
/* a plate on the light research panel (Home, 2026-10-19) is light: paper, a 1px --line edge, the 24px grid at ink 8 %,
   labels muted / ink */
.rpanel .placeholder--img {
  background-color: var(--paper); border-color: var(--line);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px);
}
.rpanel .placeholder__kind { color: var(--muted); }
.rpanel .placeholder__shot { color: var(--ink); }
/* portrait frame (About): light, 160 x 200, label centered */
.placeholder--portrait {
  width: 160px; height: 200px; aspect-ratio: auto; max-height: none; padding: var(--s-3);
  justify-content: center; align-items: center; text-align: center;
  color: var(--muted); background: var(--paper-2); border: 1px solid var(--line);
}
.placeholder--portrait .placeholder__kind { color: var(--muted); }
/* ============================================================ film hero (D 15; Reed live instruction 2026-10-18, "a big banner at the top")
   .fhero: full-bleed media at the top of the page (licensed footage or one still), the statement over its bottom-left on a
   corner scrim. Markup: section.hero.fhero > .wrap.fhero__body > .fhero__text (h1, .lead, .btn-row), then the media layer
   (after the statement in the DOM, so reading and tab order run statement -> pause / play; it paints underneath, z -2):
   .film.fhero__media[data-film] (poster picture + video + control, below) or .fhero__media (a still picture).
   Height: from the width (no layout shift), capped by the small viewport so the statement and the primary sit above the
   fold on short laptops (1366 x 768) and the film's bottom edge shows at 1280 x 800 (the one svh use, D 15, check.py).
   Phones: a 5 : 8 portrait (160vw) and their own crops. Ink-deep under the media so paper type reads before the poster
   paints. Paper type on the scrim: >= 4.5 : 1 on every frame (tools/video/textcheck.py). */
.fhero {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  height: clamp(27.5rem, 160vw, 45rem); min-height: 27.5rem; max-height: calc(100svh - var(--header-h) - var(--s-7));
  padding: 0; overflow: hidden; color: var(--paper); background: var(--ink-deep);
}
@media (min-width: 760px) {
  .fhero { height: clamp(30rem, 26rem + 26vw, 50rem); min-height: 30rem; }
}
/* .fhero--page: the interior pages' banner (Markets, Pathways, About; Reed 2026-10-24 "make all banners the same length"),
   the Pathways height; Home keeps the full film height above */
.fhero--page { height: clamp(25rem, 120vw, 33.75rem); min-height: 25rem; max-height: calc(100svh - var(--header-h)); }
@media (min-width: 760px) {
  .fhero--page { height: clamp(22.5rem, 19.5rem + 19.5vw, 37.5rem); min-height: 22.5rem; max-height: calc(75svh - 78px); }
}
/* the layer and its picture fill the hero; the <video> is sized by .film__video below, which also keeps it display: none
   until html.js (a .fhero__media video selector here would out-rank that and paint Chrome's no-JS player over the poster) */
.fhero__media, .fhero__media > picture, .fhero__media img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
}
.fhero__media { z-index: -2; }
/* the scrim, behind the statement only: the text block's own band (.fhero__body, the statement plus a 10rem fade zone above
   it), extended to the viewport's left edge; --ink at 78 % under the foot, 70 % at the h1, gone 10rem above it. From
   760 a mask ends it 2rem past the text column and fades it out over 20rem, so the right of the frame and everything above
   the statement stay clean footage. Tied to the text's own height, so it holds at every hero height (short laptops, 320). */
.fhero__body { position: relative; width: 100%; padding-top: 10rem; padding-bottom: clamp(1.5rem, 5vw, 4rem); pointer-events: none; }
/* the band lets clicks through to the pause / play control in the media layer; the statement takes them */
.fhero__text { pointer-events: auto; }
.fhero__body::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: min(0px, 50% - 50vw); right: min(0px, 50% - 50vw);
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 78%, transparent) 0%,
    color-mix(in srgb, var(--ink) 70%, transparent) calc(100% - 10rem), color-mix(in srgb, var(--ink) 42%, transparent) calc(100% - 6rem),
    color-mix(in srgb, var(--ink) 12%, transparent) calc(100% - 2.5rem), transparent 100%);
}
@media (min-width: 760px) {
  .fhero__body::before {
    -webkit-mask-image: linear-gradient(to right, #000 calc(max(var(--gutter), 50vw - var(--maxw) / 2 + var(--gutter)) + 42rem), transparent calc(max(var(--gutter), 50vw - var(--maxw) / 2 + var(--gutter)) + 62rem));
    mask-image: linear-gradient(to right, #000 calc(max(var(--gutter), 50vw - var(--maxw) / 2 + var(--gutter)) + 42rem), transparent calc(max(var(--gutter), 50vw - var(--maxw) / 2 + var(--gutter)) + 62rem));
  }
}
.fhero__text { max-width: 40rem; }
.fhero__text > h1 { margin: 0; }
.fhero__text > .lead { margin: var(--s-5) 0 0; color: var(--paper); }
.fhero__text > .btn-row { margin-top: var(--s-6); }
.fhero .tlink { color: var(--paper); }
.fhero :focus-visible { outline-color: var(--focus-on-dark); }
/* phones: the primary spans the column; the link sits under it */
@media (max-width: 559px) { .fhero__text > .btn-row > .btn { flex: 1 1 100%; } }

/* film: the media layer that plays (poster = frame 0, video, pause / play). No autoplay attribute, preload none, every
   <source> gated by prefers-reduced-motion: no-preference; site.js starts the loop after the page's load event when a
   source matched, not under reduced motion, and not with Save-Data on (then the control shows Play). Without JS the video
   layer is display: none (Chrome paints native controls on a dark box over the poster, gate VIDEO); under reduced motion
   no source matches: the poster is all there is and the control stays hidden. No frame or tint on the footage itself:
   the hero's scrim (above) is the only layer over it. */
.film > picture, .film__poster, .film__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.film__video { display: none; }
html.js .film__video { display: block; }
/* pause / play (WCAG 2.2.2): 40px, on the container's right edge, level with the statement's foot; two bars while it
   plays, a triangle when paused; the label follows */
.film__ctl {
  position: absolute; right: max(var(--gutter), 50% - var(--maxw) / 2 + var(--gutter)); bottom: clamp(1.5rem, 5vw, 4rem);
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--paper) 90%, transparent); border: 1px solid var(--line); border-radius: var(--radius);
}
.film[data-paused] > .film__ctl { display: flex; }
.film__ctl::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.film[data-paused="true"] > .film__ctl::before {
  width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}
.film[data-paused="true"] .film__pause, .film[data-paused="false"] .film__play { display: none; }
/* the ring sits inside the paper square, so it reads on any frame of the footage */
.film__ctl:focus-visible { outline-color: var(--focus-on-light); outline-offset: -5px; }
/* Reed 2026-10-18: no visible pause button. It stays in the tab order (WCAG 2.2.2 for keyboard users) and appears
   only when focused with the keyboard; reduced-motion visitors already get the poster only. */
.film[data-paused] > .film__ctl:not(:focus-visible) { opacity: 0; pointer-events: none; }

/* ============================================================ image band (D 17; strategy review 2026-10-23)
   A full-bleed photograph that opens a chapter (Home Why): the colour change of D 1.1, with mass, never a flat tint.
   21 : 8 from 760 px (560px cap: wider screens see a letterbox of the same picture), 3 : 2 on phones (320px cap); the
   <picture> art-directs the phone crop. No overlay, tint, frame or caption (gate VIDEO: decorative licensed imagery,
   aria-hidden, alt=""). The ground under it is --paper-2, so a lazy image that is still loading reads as paper, never as
   a dark slab near the charcoal band (D 16). Markup: div.band > picture > img (width/height set, loading="lazy"). */
.band { width: 100%; aspect-ratio: 21 / 8; max-height: 560px; overflow: hidden; background: var(--paper-2); }
.band picture, .band img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) { .band { aspect-ratio: 3 / 2; max-height: 320px; } }
/* contained: the same band inside the container (StableHOCL "Why it matters"): 420px cap and the 2px corner, as the plate it replaces */
.band--contained { max-height: 420px; border-radius: var(--radius); }

/* ============================================================ photograph in a plate's box (D 4.10 "when photography arrives", D 17)
   The plate's box with the picture in it: 3 : 2 (or 16 : 9), object-fit cover, the 2px corner; no frame, overlay, tint or
   caption (owner-supplied illustrative stills are decorative, alt="", like the licensed film: gate VIDEO). --paper-2
   under it while a lazy image loads. Markup: picture.photo > source + img (width/height set, loading="lazy"). */
.photo { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================ close (D 4.13) */
/* the last section of main: statement, primary, optional ask line; 160px before the footer at 1280 */
.close { padding-bottom: calc(var(--section-y) + var(--s-6)); }
.close .statement { margin-bottom: var(--s-6); }
.close__ask { margin: var(--s-5) 0 0; font-size: var(--fs-5); line-height: 1.4; color: var(--muted); }
/* S-50: one restrained closing invitation; the company strip already supplies the divider above. */
.section.home-close { padding-top: var(--s-8); padding-bottom: calc(var(--s-8) + var(--s-2)); } /* Reed 2026-10-24: a roomier cream ending over the compact footer */
.home-close .statement { margin: 0; max-width: none; font-size: var(--fs-2); line-height: var(--lh-2); letter-spacing: var(--ls-2); }
.home-close > .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.home-close .btn-row { margin: 0; flex: none; }
@media (min-width: 960px) {
  .home-close > .wrap { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-6); }
}

/* ============================================================ people (D 4.15) */
.people { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--col-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* portrait frame left of name, credential and role */
.person { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (max-width: 479px) { .person { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 759px) { .person + .person { padding-top: var(--s-6); border-top: 1px solid var(--line); } }
.person__name { margin: 0 0 var(--s-1); }
.person__cred { margin: 0 0 var(--s-3); font-size: var(--fs-5); line-height: 1.4; color: var(--muted); }
.person__role { margin: 0; }

/* ============================================================ partner layout and redirect panel (D 4.11) */
/* intro in 1-4, form in 6-12 from 820; stacked, intro first, below */
.formwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7) var(--col-gap); align-items: start; }
@media (min-width: 820px) {
  .formwrap { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .formwrap__intro { grid-column: 1 / 5; }
  .formwrap__form { grid-column: 6 / 13; }
}
/* intro sub-heading "What happens next.": an h2 at h3 size (D 4.11; outline h1 > h2 > h3) (gate P2, P2-D-1) */
.formwrap__next-h { font-size: var(--fs-3); font-weight: 500; line-height: var(--lh-3); letter-spacing: var(--ls-3); }
/* IP or supplier route: a contained paper-2 panel that ends the form */
.redirect-panel { padding: var(--s-5); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
.redirect-panel__h { margin: 0 0 var(--s-4); }
.redirect-panel__action { margin: 0 0 var(--s-4); }
.redirect-panel__note { margin: 0; font-size: var(--fs-5); line-height: 1.45; color: var(--muted); }

/* ============================================================ index list (Markets, Pathways) */
/* in-page anchors as hairline rows; numbers from the markup or a counter; a two-line label hangs beside its number (gate P2) */
.index-list { margin: 0; padding: 0; list-style: none; counter-reset: idx; }
.index-list > li { counter-increment: idx; }
.index-list > li + li { border-top: 1px solid var(--line); }
.index-list a {
  display: flex; align-items: baseline; padding-block: var(--s-3);
  font-size: var(--fs-5); font-weight: 500; line-height: 1.35; color: var(--ink);
  text-decoration: underline 1px transparent; text-underline-offset: 0.25em;
}
/* current section (site.js aria-current) and hover: ink underline */
.index-list a:hover, .index-list a[aria-current="true"] { text-decoration-color: currentColor; }
.index-list__no { flex: none; display: inline-block; min-width: 2.5em; font-size: var(--fs-6); color: var(--muted); font-variant-numeric: tabular-nums; }
.index-list__no:empty::before { content: counter(idx, decimal-leading-zero); }

/* index row: the page's in-page index (.index-list, above) as hairline-topped columns under a film hero (Markets,
   Pathways; D 15): one hairline row per item on phones, --cols columns from 760, the number over the name */
.index-list--row > li { border-top: 1px solid var(--line); }
.index-list--row > li:last-child { border-bottom: 1px solid var(--line); }
.index-list--row a { min-height: 48px; }
@media (min-width: 760px) {
  .index-list--row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: var(--col-gap); }
  .index-list--row > li:last-child { border-bottom: 0; }
  .index-list--row a { flex-direction: column; gap: var(--s-2); padding-block: var(--s-4) 0; }
}

/* ============================================================ heading line breaks */
/* a sentence that starts its own line inside a heading (a sense break; no <br>, no text change) (gate P2) */
.line { display: block; }

/* ============================================================ links from partials/links.json */
/* a data-link with url: null becomes <span class="link-pending">: plain text, not a link */
.link-pending.link-pending { color: inherit; text-decoration: none; cursor: auto; }

/* ============================================================ scroll motion (pass 2 2026-10-18; trimmed by the strategy review
   2026-10-23, D 17). CSS scroll-driven, 0 B of JS. Only with JS on, screen, prefers-reduced-motion: no-preference and
   support for view timelines; otherwise (no JS, reduced motion, Firefox, Safari < 26, print) everything is in its final
   state. Linear on the scroll; transform, opacity and clip-path only, so no layout shift. Headings and labels only: they
   rise 12px from opacity 0.4 (never from 0) and are settled the moment they are fully inside the viewport, so the heading
   that peeks above the fold is never grey; reading copy (paragraphs, intros, notes, programs, the identity line) never
   fades. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* section hairlines draw left to right */
    html.js .section__rule { transform-origin: 0 50%; animation: x-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    /* labels and headings rise in over their own height (entry 0% -> 100%: done once fully in view) */
    html.js main > .section:not(.util--center):not(.util--legal) :is(.label, h2) {
      animation: x-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
    /* plates open to their edges */
    html.js .placeholder--img:not(.placeholder--portrait) { animation: x-open linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    /* proof items rise as the row enters, 10% apart, the floor 0.4; all settled once the row is fully in view */
    html.js .proof--icons > li { animation: x-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    html.js .proof--icons > li:nth-child(2) { animation-range: entry 10% entry 100%; }
    html.js .proof--icons > li:nth-child(3) { animation-range: entry 20% entry 100%; }
  }
}
@keyframes x-rise { from { opacity: .4; transform: translateY(12px); } }
@keyframes x-draw { from { transform: scaleX(0); } }
@keyframes x-open { from { clip-path: inset(5% 3%); } to { clip-path: inset(0); } }
/* page to page: a 180ms cross-fade (Chrome/Edge 126+, Safari 18.2+; others navigate normally) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: .18s; animation-timing-function: var(--ease-out); }
}

/* ============================================================ review aid: ?claims=1 (site.js adds html.show-claims) */
html.show-claims :is([data-claim], [data-redline]) { outline: 1px dashed var(--ink-deep); outline-offset: 2px; }
html.show-claims :is([data-claim], [data-redline])::after {
  content: attr(data-claim) " " attr(data-redline);
  display: inline-block; margin-left: 0.4em; padding: 1px var(--s-1); vertical-align: middle;
  font-size: var(--fs-6); font-weight: 500; line-height: 1.3; letter-spacing: 0;
  color: var(--paper); background: var(--ink-deep); border-radius: var(--radius);
}
html.show-claims :is(.tl, .site-footer, .is-dark) :is([data-claim], [data-redline]) { outline-color: var(--paper); }
html.show-claims :is(.tl, .site-footer, .is-dark) :is([data-claim], [data-redline])::after { color: var(--ink-deep); background: var(--paper); }

/* ============================================================ print */
@media print {
  .placeholder--img { background-image: none; }
  .film__video, .film__ctl, .band { display: none; }
  /* the film hero prints as its statement in ink: no media, no scrim */
  .fhero { height: auto; min-height: 0; max-height: none; color: var(--ink); background: none; }
  .fhero__body::before, .fhero__media { display: none; }
  .fhero .tlink { color: var(--ink); }
  .tl { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* the pathways band prints as ink on the page (backgrounds are not printed) */
  .pband { color: var(--ink); background: none; }
  .pband :is(.label, .tlink, .path, .path__no, .path__who-v, .path__more, .pband__ask) { color: var(--ink); }
}

/* ============================================================ footer proportions (Reed 2026-10-24: the footer was taller than
   its content needs; ~235px at 1280 instead of ~313). From 760: less space above the lockup, the three links closer together
   (36px rows; 24px is the WCAG 2.2 target minimum), less space before the copyright row; the row itself unchanged. Phones
   keep the foundation's 44px link rows. */
@media (min-width: 760px) {
  .site-footer { padding-top: var(--s-6); }
  .footer-links :is(a, .link-pending) { min-height: 36px; padding-block: var(--s-1); }
  .footer-bottom { margin-top: var(--s-5); }
}