/*
  CAPACITY PARTNERS GROUP — PUBLIC SITE.

  The approved palette and typography, used as the application uses them. The
  variable names match `public/assets/app.css` so that a reader moving between
  the two surfaces is reading the same vocabulary, and `test/public-site.test.ts`
  checks the values against `src/domain/brand.ts` rather than trusting them.

  RESTRAINT IS STILL THE DESIGN, BUT IT IS NOW SPACIOUS RESTRAINT. Navy,
  off-white, one gold accent used sparingly, a serif for statements and a sans
  for everything else. No gradients pretending to be depth, no illustration
  standing in for substance. What changed in this pass is scale and air: display
  type is much larger, sections breathe, and one idea occupies one screen.

  BOTH APPROVED FAMILIES ARE STILL HERE; WHAT CHANGED IS WHICH ONE LEADS.

  No NEW typeface was introduced, and two measured constraints forbid one:

    1. `_headers` sets `font-src https://fonts.gstatic.com` — with no `'self'`.
       A self-hosted font file would be refused by the browser, not merely
       discouraged. Changing that is a security-header change, and headers are
       explicitly unchanged in this pass.
    2. `test/public-site.test.ts` and `test/brand.test.ts` both assert Playfair
       Display and Montserrat by name. Swapping families would require editing
       the brand harness to pass, which is not how a brand decision gets made.

  WITHIN those two faces, the display role moved. Montserrat now sets the
  headline, the section headings, the category headings and the stage names —
  approved by Elde on 9 October 2026, after the change was shown rendered and
  flagged as a brand decision rather than a routine one. Playfair Display keeps
  the masthead wordmark, the Capacity Operating Principle and the footer
  promise: the three places the page speaks in the company's own voice rather
  than describing what it does.

  NOTE FOR ANYONE CHANGING THIS BACK: the tests will NOT stop you. They check
  that the string "Playfair Display" appears in this file, and it appears in
  `--serif` whether or not anything uses it. This paragraph is the record.
*/

:root {
  --navy: #0A1E3A;
  --blue: #1E3A5F;
  --gold: #C9A15A;
  --neutral: #E7E5E2;
  --paper: #F7F7F6;

  --ink: #14181F;
  --ink-soft: #4A525E;
  --rule: rgba(10, 30, 58, 0.12);
  --rule-soft: rgba(10, 30, 58, 0.07);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /*
    ONE SPACING SCALE, AND SECTIONS USE THE LARGE END OF IT. The previous
    stylesheet padded a band by 4.5rem; the eye reads that as a list of topics.
    At 8–10rem a section reads as its own screen, which is the whole point of
    the layout change.
  */
  --space-section: clamp(5rem, 11vw, 10rem);
  --space-block: clamp(2.5rem, 5vw, 4.5rem);

  --wrap: 72rem;
  --wrap-narrow: 46rem;
  --gutter: 1.5rem;

  --nav-h: 3.75rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky bar must not cover the heading of the section it scrolled to. */
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 6px;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------- masthead */

/*
  A THIN, QUIET, STICKY BAR. It carries the mark and the section links and
  nothing else — no call to action, because there is nothing to call anyone to
  yet. `backdrop-filter` is progressive: where it is unsupported the bar simply
  stays solid navy, which is the same bar with less depth.
*/
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 30, 58, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead { background: var(--navy); }
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--nav-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
/*
  THE EMBLEM IS NAVY INK ON LIGHT and there is no approved reversed version, so
  on the navy masthead it sits on a light disc — the same relationship the
  approved business card uses. Lightening the mark in CSS would be redrawing it.
*/
.brand-emblem {
  display: block;
  background: var(--paper);
  border-radius: 50%;
  padding: 3px;
  width: 30px;
  height: 30px;
}
.brand-mark { display: flex; align-items: baseline; gap: 0.5rem; line-height: 1; }
.brand-mark .formal {
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: 0.01em;
}
.brand-mark .group {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav a {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 160ms ease;
}
.nav a:hover { color: #fff; }

.masthead .descriptor {
  margin: 0;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ----------------------------------------------------------------- hero */

.hero {
  background: var(--navy);
  color: #fff;
  padding: clamp(5rem, 13vw, 10rem) 0 clamp(5rem, 12vw, 9rem);
  text-align: center;
  overflow: hidden;
}
.hero .wrap { max-width: 60rem; }

.eyebrow {
  margin: 0 0 1.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

/*
  THE HEADLINE IS THE PAGE. At this size the explicit <br> still decides where
  the line breaks, so no width constraint is allowed to disagree with it — a
  `max-width` here once produced a three-line heading whenever the webfont had
  not loaded, which made the headline read differently depending on network
  timing.
*/
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.2vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  text-wrap: balance;
}
.hero .lede {
  font-weight: 300;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: 44ch;
  margin: 0 auto 1.5rem;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}
.hero .sub {
  font-weight: 300;
  max-width: 54ch;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.0625rem;
}

.status {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  text-align: left;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.15rem 1.35rem;
  border: 1px solid rgba(201, 161, 90, 0.35);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9375rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.86);
}
.status .dot {
  flex: none;
  width: 7px; height: 7px;
  margin-top: 0.62rem;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------------------------------------------------------------- bands */

.band { padding: var(--space-section) 0; }
.band.alt { background: #fff; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }

/*
  SECTION HEADS ARE CENTRED AND LARGE, BODY TEXT IS NOT. Centring a heading
  gives a section a beginning; centring a paragraph makes it harder to read.
  So `.intro` is centred only because it is short, and everything longer stays
  ranged left inside a narrow measure.
*/
.band .wrap > h2,
.band .wrap > .intro,
.band .wrap > .eyebrow { text-align: center; }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 auto 1.25rem;
  max-width: 23ch;
  text-wrap: balance;
}
h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  margin: 0 0 0.6rem;
}
.intro {
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto var(--space-block);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.note {
  max-width: 58ch;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--blue);
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--ink-soft);
}
.band.alt .note { background: var(--neutral); }
.note strong, .limit strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------- problem categories */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-block);
}
.chip {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--blue);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.band.alt .chip { background: var(--paper); }
.chip:hover { border-color: var(--blue); }
.chip[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.panels { max-width: 46rem; margin: 0 auto; }
.panel { text-align: center; }
.panel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-bottom: 1rem;
}
.panel p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 300;
  font-size: 1.0625rem;
  max-width: 50ch;
  margin-inline: auto;
}

/* -------------------------------------------------------------- journey */

.journey {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 58rem;
  border-top: 1px solid var(--rule-soft);
}
.stage { border-bottom: 1px solid var(--rule-soft); }

.stage-head {
  display: grid;
  /*
    THE NAME COLUMN IS 17rem BECAUSE "Capacity Diagnostic" IS THE LONGEST ONE.
    At 13rem it wrapped to two lines in Playfair at this size, which pushed the
    one-line summary out of alignment with it and made the row look broken.
  */
  grid-template-columns: 3.5rem minmax(0, 17rem) 1fr 1.5rem;
  align-items: baseline;
  gap: 1.25rem;
  width: 100%;
  padding: 1.75rem 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.stage-head:hover .name { color: var(--blue); }
/*
  THE STAGE NUMBER IS BLUE, NOT GOLD, AND A MEASUREMENT DECIDED THAT.
  Gold (#C9A15A) on the paper background measures 2.41:1. WCAG AA asks 4.5:1 for
  text this size, so the one ornamental use of gold on a light surface was also
  the least readable text on the page. Gold stays where it measures well — on
  navy, where it reaches 6.4:1, and as non-text accents. A contrast sweep of all
  91 text elements now returns no failures.
*/
.num {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.name {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  letter-spacing: -0.01em;
  transition: color 160ms ease;
}
.one-line { color: var(--ink-soft); font-weight: 300; font-size: 0.9375rem; }
.caret {
  justify-self: end;
  align-self: center;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms ease;
}
.stage-head[aria-expanded="true"] .caret { transform: rotate(-135deg) translateY(-2px); }

.stage-body {
  padding: 0 0 2rem 4.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
/*
  `display: grid` ABOVE WOULD HAVE BROKEN THE `hidden` ATTRIBUTE, AND DID.
  The browser's own `[hidden] { display: none }` is a UA rule, so any author
  rule that sets `display` outranks it. The first render of this redesign showed
  all five stages open at once with `aria-expanded="false"` on four of them —
  the accordion was still working, the stylesheet was simply overruling it.
  This restores the attribute, and the `.no-js` rule at the bottom of the file
  re-opens everything when the script never runs.
*/
.stage-body[hidden] { display: none; }

.stage-copy { max-width: 58ch; }
.stage-body p { margin: 0 0 1rem; color: var(--ink-soft); font-weight: 300; }
.stage-body p:last-child { margin-bottom: 0; }
.limit {
  font-size: 0.9375rem;
  padding-left: 1rem;
  border-left: 2px solid var(--neutral);
}

/*
  THE PRODUCT PREVIEWS ARE DRAWINGS, NOT SCREENSHOTS, AND THAT IS A CLAIM RULE
  RATHER THAN AN ART DIRECTION. Nothing here is open to a client yet, so a
  screenshot would either be of something that does not exist or of something a
  visitor cannot reach. Each preview is an inline SVG abstraction of the ARTEFACT
  the stage produces — a snapshot card, a scored rubric, a sequenced roadmap, a
  staffed team, a follow-up record. They carry no figures, because a figure on a
  marketing page is a claim.
*/
.preview {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 30, 58, 0.04);
}
.band.alt .preview { background: var(--paper); }

/* ---------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}
.cards.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.card {
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
  padding: 2rem 1.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.band.alt .card { background: var(--paper); }
.card:hover { border-color: var(--rule); box-shadow: 0 2px 10px rgba(10, 30, 58, 0.05); }
.card .mark {
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--gold);
  margin: 0 0 1.25rem;
  border-radius: 2px;
}
.card p { margin: 0 0 0.85rem; color: var(--ink-soft); font-weight: 300; font-size: 0.9875rem; }
.card p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ principle */

.principle {
  background: var(--blue);
  color: #fff;
  padding: var(--space-section) 0;
  text-align: center;
}
.principle .eyebrow { color: var(--gold); }
.principle blockquote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
  max-width: 18ch;
  text-wrap: balance;
}
.principle .gloss {
  max-width: 56ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  text-align: left;
}

/* ----------------------------------------------------- founding phase */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
  text-align: left;
  max-width: 60rem;
  margin: 0 auto;
}
.split .intro { margin: 0 0 1.25rem; text-align: left; }
.split p { color: var(--ink-soft); font-weight: 300; max-width: 46ch; }
.facts {
  list-style: none;
  margin: 0;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--rule-soft);
  border-radius: 16px;
}
.band.alt .facts { background: var(--paper); }
.facts li {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
}
.facts li:first-child { padding-top: 0; }
.facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.facts .k {
  color: var(--blue);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.625rem;
}
.facts .v { color: var(--ink-soft); font-weight: 300; }

/* -------------------------------------------------------------- closing */

.closing {
  background: var(--navy);
  color: #fff;
  padding: var(--space-section) 0;
  text-align: center;
}
.closing h2 { margin: 0 auto 1.5rem; max-width: 16ch; }
.closing p {
  max-width: 52ch;
  margin: 0 auto 1.25rem;
  color: rgba(255, 255, 255, 0.84);
  font-weight: 300;
  font-size: 1.0625rem;
}
.closing .quiet {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
  margin-bottom: 0;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.93em;
  color: var(--gold);
  white-space: nowrap;
}

/* --------------------------------------------------------------- footer */

.footer {
  background: #fff;
  border-top: 1px solid var(--rule-soft);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align: center;
}
.footer-lockup { max-width: 200px; height: auto; opacity: 0.9; }
.footer .descriptor {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.footer .promise {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--blue);
  margin: 0 0 2rem;
}
.footer .legal {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 0.78125rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------------------------------------------------- the 404, and only it */

/*
  THE MEASURED DEFECT THIS FIXES. On a tall desktop viewport the 404 ended at
  its footer and left the page background showing beneath it as a pale strip —
  a visible seam under a white footer on the company's apex domain. The page is
  short by nature, so the fix is to let its one section absorb the leftover
  height rather than to add content that does not need to exist.
*/
.page-404 { display: flex; flex-direction: column; min-height: 100vh; }
.page-404 .masthead { position: static; }
.page-404 main { flex: 1 0 auto; display: flex; align-items: center; }
.page-404 .footer { flex: none; }
.page-404 main .wrap { width: 100%; }

/* ------------------------------------------------------------ narrow */

@media (max-width: 60rem) {
  .stage-body { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 52rem) {
  .masthead .descriptor { display: none; }
  .brand-mark .group { display: none; }

  .stage-head {
    grid-template-columns: 2.5rem 1fr 1.25rem;
    row-gap: 0.35rem;
    padding: 1.35rem 0;
  }
  .one-line { grid-column: 2 / -1; }
  .stage-body { padding-left: 2.5rem; padding-bottom: 1.75rem; }
  .facts { padding: 1.25rem 1.35rem; }
  .principle .gloss { font-size: 0.9375rem; }
}

/*
  NO SCRIPT, NO LOSS OF MEANING. If `site.js` never runs, every stage body and
  every category panel is shown rather than hidden, because the markup only
  becomes collapsible once the script has taken over. This rule is the belt:
  it un-hides anything the browser is holding hidden when JS is unavailable.
*/
.no-js .stage-body[hidden] { display: grid; }
.no-js .panel[hidden] { display: block; }


/* Closer product-led direction, retaining the approved font assets. */
.hero { background: #f5f5f7; color: var(--ink); padding: clamp(4rem,9vw,7rem) 0 4rem; }
.hero .eyebrow { color: var(--blue); }
/* -.055em closed the gaps in "capacity" at 5.4rem: Montserrat is not drawn
   for the negative tracking SF tolerates. -.03em keeps the tight modern set
   without the letters colliding. */
.hero h1 { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; font-size: clamp(2.4rem,6.1vw,4.9rem); }
.hero .lede { color: var(--ink-soft); font-weight: 400; max-width: 50ch; }
.hero .sub { color: var(--ink-soft); font-weight: 400; margin-bottom: 2rem; }
/* THE NOTICE IS THE PAGE'S HONESTY STATEMENT, so it does not get to be the
   smallest thing on the screen. The revision made it borderless 13px text
   ranged left inside a centred hero, which read as a disclaimer footnote.
   Restored to a legible card, restyled for the light hero rather than the
   navy one it was originally drawn for. */
.hero .status { color: var(--ink-soft); background: #fff; border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--gold); border-radius: 14px; font-size: .9375rem;
  padding: 1.1rem 1.3rem; max-width: 44rem; }
.hero .status .dot { background: var(--blue); }
h2, .panel h3, .name { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; }
.product-spotlight { text-align: center; padding: 6rem 0; background: white; overflow: hidden; }
.product-spotlight .eyebrow { color: var(--blue); }
.product-spotlight h2 { margin-left: auto; margin-right: auto; font-size: clamp(2.6rem,5.5vw,4.5rem); }
.product-spotlight .intro { margin-left: auto; margin-right: auto; font-weight: 400; }
.hero-product { display: block; width: min(100%,780px); height: auto; margin: 3rem auto 1.5rem; border-radius: 26px; background: #f5f5f7; padding: 2rem; }
.illustration-note { color: var(--ink-soft); font-size: .875rem; }
/* Consecutive intros are one passage; only the last one needs the section gap. */
.band .wrap > .intro + .intro { margin-top: calc(1.5rem - var(--space-block)); }
.stage-body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.stage-body[hidden] { display: none; }
@media(max-width:52rem) { .stage-body { grid-template-columns: 1fr; } .product-spotlight { padding: 4rem 0; } .hero-product { padding: .5rem; } .hero h1 br { display: none; } }

/* Customer-facing product presentation. No collection or purchasing controls. */
.hero-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1rem; margin:1.8rem 0; }
.action { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.8rem 1.25rem; border-radius:2rem; font-size:.9375rem; font-weight:500; text-decoration:none; }
.action.primary { background:var(--navy); color:#fff; }
.action.secondary { color:var(--navy); border:1px solid var(--navy); }
.action.light { background:#fff; color:var(--navy); }
.action.outline-light { color:#fff; border:1px solid #fff; }
.action:hover { text-decoration:underline; text-underline-offset:.2em; }
.roadmap-preview { max-width:54rem; margin:3rem auto 0; text-align:left; background:#fff; border:1px solid var(--rule); border-radius:1.5rem; box-shadow:0 20px 65px rgba(10,30,58,.08); overflow:hidden; scroll-margin-top:8rem; }
.preview-bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; background:#f5f6f8; padding:1.25rem 2rem; font-size:.7rem; font-weight:600; letter-spacing:.08em; color:var(--navy); }
.sample-label { letter-spacing:0; font-size:.75rem; font-weight:500; }
.preview-summary { padding:2.5rem 2rem 1.5rem; }
.preview-summary h3 { font-family:var(--sans); font-size:clamp(1.65rem,3.5vw,2.5rem); font-weight:600; letter-spacing:-.03em; line-height:1.15; margin:.6rem 0 1rem; }
.preview-summary p:last-child { max-width:37rem; color:var(--ink-soft); }
.preview-finding { display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; margin:0 2rem; padding:1.5rem 0; border-top:1px solid var(--rule); }
.preview-number { color:var(--navy); font-size:.8rem; font-weight:600; padding-top:.25rem; }
.preview-finding h4 { font-size:1.1rem; font-weight:600; margin:0 0 .5rem; }
.preview-finding p { color:var(--ink-soft); font-size:.9375rem; line-height:1.65; margin:0 0 .8rem; }
.preview-owner { color:var(--navy); font-size:.8125rem; }
.preview-footer { padding:1.5rem 2rem; background:#f5f6f8; font-size:.875rem; }
.preview-footer p { margin:.5rem 0 0; color:var(--ink-soft); }
.more-detail { max-width:48rem; margin:2rem auto 0; text-align:left; }
.more-detail summary { color:var(--navy); cursor:pointer; font-weight:500; padding:1rem 0; }
.more-detail .intro { text-align:left; margin:1rem 0; }
@media(max-width:52rem) {
  :root { --nav-h:8rem; }
  .masthead .wrap { min-height:0; flex-wrap:wrap; padding-top:.8rem; padding-bottom:.8rem; gap:.8rem; }
  .nav { display:flex; width:100%; gap:.5rem 1rem; flex-wrap:wrap; }
  .nav a { font-size:.75rem; color:#fff; padding:.35rem 0; }
  .preview-bar { padding:1rem; flex-wrap:wrap; }
  .preview-summary { padding:1.5rem 1rem 1rem; }
  .preview-finding { margin:0 1rem; grid-template-columns:1.5rem 1fr; gap:.6rem; }
  .preview-footer { padding:1.25rem 1rem; }
  .hero-actions { gap:.75rem; }
  .action { font-size:.875rem; }
}



/* Approved Capacity introduction, 21 October 2026. Scoped to preserve existing
   content, brand assets and security headers. Gold text uses a darker shade. */
#capacity-intro{--paper:#f6f5f1;--navy:#10253b;--muted:#5d6872;--gold:#886c40;--line:#d8dcd9;--scroll-offset:110px;background:var(--paper);color:var(--navy);font-family:var(--sans);font-size:16px;line-height:1.55}
#capacity-intro a{color:inherit;text-decoration:none}
#capacity-intro .primary{color:white}
#capacity-intro h1,#capacity-intro h2{font-family:var(--serif)}
#capacity-intro .story{position:relative;max-width:1480px;margin:auto;padding:0 6vw;display:grid;grid-template-columns:48% 52%;align-items:start}
#capacity-intro .narrative{position:relative;z-index:2}
#capacity-intro .chapter{min-height:90svh;display:flex;flex-direction:column;justify-content:center;padding:65px 0 85px;max-width:600px}
#capacity-intro .chapter:first-child{min-height:calc(100svh - 92px);padding-top:80px}
#capacity-intro .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2.4px;font-weight:600;color:var(--gold);margin:0 0 25px}
#capacity-intro h1,#capacity-intro h2,#capacity-intro h3,#capacity-intro p{margin-top:0}
#capacity-intro h1,#capacity-intro h2{font-family:var(--serif);font-weight:400;letter-spacing:-.055em;line-height:1.035}
#capacity-intro h1{font-size:clamp(50px,5.8vw,94px);margin-bottom:30px}
#capacity-intro h1 span{color:var(--gold)}
#capacity-intro h2{font-size:clamp(42px,4.5vw,74px);margin-bottom:25px}
#capacity-intro .support{font-size:clamp(16px,1.35vw,20px);color:var(--muted);line-height:1.7;max-width:410px;margin-bottom:30px}
#capacity-intro .actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
#capacity-intro .primary{display:inline-flex;align-items:center;gap:25px;padding:15px 22px;border-radius:999px;background:var(--navy);color:white;font-size:13px}
#capacity-intro .secondary{font-size:13px;padding:12px 0;border-bottom:1px solid #8b949a}
#capacity-intro .scroll-cue{margin-top:55px;font-size:11px;color:var(--muted);letter-spacing:1.1px;display:flex;align-items:center;gap:12px}
#capacity-intro .scroll-cue:before{content:"";height:40px;width:1px;background:var(--gold)}
#capacity-intro .tiny-note{font-size:12px;color:var(--muted);margin-top:20px;max-width:380px}
#capacity-intro .boundary{margin-top:22px;max-width:400px;padding:14px 16px;border-left:2px solid var(--gold);background:#efeee7;font-size:13px;line-height:1.6;color:var(--navy)}
#capacity-intro .chapter-number{display:block;font-size:12px;color:var(--gold);letter-spacing:2px;margin-bottom:24px}
#capacity-intro .ingredients{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
#capacity-intro .ingredients span{padding:7px 12px;border:1px solid var(--line);border-radius:30px;font-size:12px}
#capacity-intro .visual{position:sticky;top:110px;height:calc(100svh - 145px);min-height:470px;display:flex;flex-direction:column;justify-content:center;margin-right:-4vw;isolation:isolate;overflow:hidden}
#capacity-intro .visual:before{content:"";position:absolute;width:75%;height:60%;left:10%;top:20%;background:radial-gradient(ellipse,#e4e4dd88,transparent 70%);z-index:-1}
#capacity-intro .visual-tools{position:absolute;left:8%;right:8%;top:45px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3;color:var(--muted);font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
#capacity-intro .motion-note{margin:0;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);max-width:60%;text-align:right;line-height:1.4}
#capacity-intro .sculpture{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 22px 30px #10253b16)}
#capacity-intro .band-face{stroke:none}
#capacity-intro .connector-group{transition:none}
#capacity-intro .energy{fill:#f5e4c2;stroke:var(--gold);stroke-width:1.4}
#capacity-intro .field-line{stroke:#ccd4d1;stroke-width:.75;fill:none}
#capacity-intro .node-label{fill:#3a4d5e;font-size:13px;font-weight:600;letter-spacing:1.4px}
#capacity-intro .route-label{font-size:12px;letter-spacing:2px;fill:var(--gold);font-weight:600}
#capacity-intro .visual-caption{display:flex;align-items:center;gap:14px;justify-content:center;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);min-height:30px;margin-top:0}
#capacity-intro .visual-caption:before{content:"";width:25px;height:1px;background:var(--gold)}
#capacity-intro .progress{height:2px;background:#dce0dc;margin:18px auto 0;width:110px}
#capacity-intro .progress i{display:block;height:100%;width:calc(10% + var(--progress)*90%);background:var(--gold)}
@media(min-width:1500px){#capacity-intro .story{padding-left:85px;padding-right:85px}
}
@media(max-width:900px){#capacity-intro .story{grid-template-columns:52% 48%;padding:0 6vw}
#capacity-intro .visual{min-height:380px;top:100px}
#capacity-intro .visual-tools{top:15px;left:4%;right:4%}
#capacity-intro .chapter{min-height:80svh}
#capacity-intro .chapter:first-child{min-height:calc(100svh - 78px)}
#capacity-intro h1{font-size:clamp(44px,6.4vw,68px)}
#capacity-intro h2{font-size:clamp(40px,5.2vw,52px)}
#capacity-intro .support{font-size:16px}
}
@media(max-width:600px){#capacity-intro{--scroll-offset:264px}
#capacity-intro .story{display:flex;flex-direction:column;padding:0 7vw}
#capacity-intro .visual{order:0;position:sticky;top:72px;z-index:4;height:172px;min-height:172px;flex-shrink:0;
          margin:0 -8.14%;width:116.28%;padding:6px 8vw 0;
          background:var(--paper);box-shadow:0 8px 14px -9px rgba(16,37,59,.22);
          overflow:hidden;justify-content:flex-start}
#capacity-intro .visual:before{display:none}
#capacity-intro .visual-tools{position:static;justify-content:flex-end;margin-bottom:2px}
#capacity-intro .visual-tools .tools-label{display:none}
#capacity-intro .motion-note{max-width:100%;font-size:11px}
#capacity-intro .sculpture{height:112px;margin:0}
#capacity-intro #capability-labels,#capacity-intro #forward .route-label,#capacity-intro #field-grid{display:none}
#capacity-intro #connections{stroke-width:3}
#capacity-intro .energy{r:7;stroke-width:2.6}
#capacity-intro .band-edge{stroke-width:2.6}
#capacity-intro .band-under{stroke-width:2}
#capacity-intro .visual-caption{font-size:11px;letter-spacing:.8px;min-height:18px}
#capacity-intro .progress{display:none}
#capacity-intro .narrative{order:1;width:100%}
#capacity-intro .chapter{min-height:72svh;padding:56px 0;border-top:1px solid var(--line)}
#capacity-intro .chapter:first-child{min-height:0;padding:26px 0 60px}
#capacity-intro h1{font-size:clamp(34px,10.4vw,62px);margin-bottom:22px}
#capacity-intro h2{font-size:clamp(32px,9.6vw,48px)}
#capacity-intro .eyebrow{margin-bottom:17px}
#capacity-intro .support{max-width:360px;margin-bottom:24px;line-height:1.6}
#capacity-intro .boundary{max-width:100%}
#capacity-intro .primary{padding:14px 20px}
#capacity-intro .actions{gap:20px}
#capacity-intro .scroll-cue{margin-top:27px}
#capacity-intro .scroll-cue:before{height:25px}
}
@media(max-width:600px) and (max-height:700px){#capacity-intro{--scroll-offset:232px}
#capacity-intro .visual{height:140px;min-height:140px}
#capacity-intro .sculpture{height:88px}
#capacity-intro .chapter{min-height:0;padding:44px 0}
}
@media(max-width:600px) and (max-height:600px){#capacity-intro{--scroll-offset:204px}
#capacity-intro .visual{height:112px;min-height:112px}
#capacity-intro .sculpture{height:64px}
#capacity-intro .visual-caption{display:none}
#capacity-intro .chapter{padding:38px 0}
}

#capacity-intro h1,#capacity-intro h2{font-family:var(--serif)}
#capacity-intro .eyebrow{font-family:var(--sans)}
#capacity-intro .visual{top:calc(var(--nav-h) + 18px)}
#capacity-intro .chapter{scroll-margin-top:calc(var(--scroll-offset) - var(--nav-h) - 24px)}
#capacity-intro .chapter h1,#capacity-intro .chapter h2{max-width:100%;overflow-wrap:normal}
#capacity-intro .progress-link{align-self:flex-start}
#capacity-intro .tiny-note{font-size:13px}
#capacity-intro .visual-tools{justify-content:flex-end}
#capacity-intro .motion-note[hidden]{display:none}
#capacity-intro .chapter:first-child .support{max-width:440px}
html.reduced{scroll-behavior:auto}
/* The existing masthead remains compact over the approved opening. */
body:not(.page-404) .masthead{background:#f6f5f1;color:#10253b}
body:not(.page-404) .masthead .formal,body:not(.page-404) .masthead .group,body:not(.page-404) .nav a{color:#10253b}
@media(max-width:52rem){
 body:not(.page-404){--nav-h:7rem}
 body:not(.page-404) .masthead .wrap{padding-top:.6rem;padding-bottom:.6rem;gap:.35rem}
 body:not(.page-404) .nav{gap:.25rem .85rem}
 body:not(.page-404) .nav a{font-size:11px}
}
@media(max-width:600px){
 #capacity-intro .visual{top:var(--nav-h)}
 #capacity-intro{--scroll-offset:264px}
 #capacity-intro .chapter:first-child{padding-top:26px}
 body:not(.page-404){--nav-h:72px}
 body:not(.page-404) .masthead .wrap{flex-wrap:nowrap;min-height:72px;padding-top:.5rem;padding-bottom:.5rem}
 body:not(.page-404) .nav{width:auto;justify-content:flex-end}
 body:not(.page-404) .nav a[href="#problem"],body:not(.page-404) .nav a[href="#sample-roadmap"]{display:none}
}
@media(max-width:360px){body:not(.page-404) .nav a[href="#founding"]{display:none}}
@media(max-width:600px) and (max-height:700px){#capacity-intro{--scroll-offset:232px}}
@media(max-width:600px) and (max-height:600px){#capacity-intro{--scroll-offset:204px}}

@media(max-width:600px){
 .no-js #capacity-intro .visual{position:static;height:auto;min-height:0;margin:0;width:auto;padding:0 7vw;background:none;box-shadow:none}
 .no-js #capacity-intro .sculpture{height:200px}
}

/* Readable small labels across both retained typography scopes. */
.brand-mark .group,.brand .group,.facts .k,.footer .descriptor,.masthead .descriptor{font-size:12px}
#capacity-intro .eyebrow,#capacity-intro .scroll-cue,#capacity-intro .visual-caption{font-size:12px}
.footer nav{margin:1.4rem 0;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
@media(max-width:52rem){body:not(.page-404) .nav a{font-size:12px}}