/* SOJKA & Co. website. Brand layers come from ./brand (synced from the brand system); site layers from src/styles. */
/* SOJKA & Co. Brand System — generated from tokens.json */
:root, [data-theme="light"] {
  --white: #FFFFFF;
  --black: #000000;
  --navy-50: #F3F7FF;
  --navy-100: #EBEFF9;
  --navy-200: #D8DFF2;
  --navy-300: #B8C4E2;
  --navy-400: #8E9DC7;
  --navy-500: #6879A7;
  --navy-600: #4C5C88;
  --navy-700: #374570;
  --navy-800: #293760;
  --navy-900: #1D2951;
  --navy-950: #141F46;
  --navy-975: #070F34;
  --lime-50: #F7FFDF;
  --lime-100: #ECFDB3;
  --lime-200: #E0FA76;
  --lime-500: #D3F300;
  --lime-600: #B2CD00;
  --lime-700: #8FA500;
  --lime-800: #6A7B00;
  --lime-900: #4F5D00;
  --surface: var(--white);
  --surface-alt: var(--navy-50);
  --surface-raised: var(--white);
  --surface-inverse: var(--navy-900);
  --surface-stripe: var(--navy-100);
  --border: var(--navy-200);
  --border-strong: var(--navy-500);
  --ink: var(--navy-900);
  --ink-muted: var(--navy-600);
  --ink-subtle: #5D6A91;
  --ink-inverse: var(--white);
  --action: var(--navy-900);
  --action-hover: var(--navy-700);
  --on-action: var(--white);
  --accent: var(--lime-500);
  --accent-hover: var(--lime-200);
  --on-accent: var(--navy-900);
  --accent-soft: var(--lime-100);
  --accent-ink: var(--lime-900);
  --link: var(--navy-900);
  --focus: var(--navy-900);
  --success: #007272;
  --success-soft: #DDFAFA;
  --warning: #975D00;
  --warning-soft: #FFF1E2;
  --danger: #B7191C;
  --danger-soft: #FFEFED;
  --info: #3860AC;
  --info-soft: #EDF4FF;
  --chart-1: #344E91;
  --chart-2: #03869E;
  --chart-3: #7F3C6B;
  --chart-4: #917EC8;
  --chart-5: var(--lime-800);
  --chart-context: var(--navy-300);
  --chart-context-2: var(--navy-400);
  --chart-grid: var(--border);
  --chart-axis: var(--border-strong);
  --shadow-sm: 0 1px 2px #1D29510F, 0 1px 3px #1D29511A;
  --shadow-lg: 0 4px 8px #1D295114, 0 16px 40px -8px #1D295133;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #1D2951;
}
[data-theme="dark"] {
  --surface: var(--navy-900);
  --surface-alt: var(--navy-950);
  --surface-raised: var(--navy-800);
  --surface-inverse: var(--navy-975);
  --surface-stripe: #232F59;
  --border: var(--navy-700);
  --border-strong: var(--navy-400);
  --ink: var(--white);
  --ink-muted: var(--navy-300);
  --ink-subtle: #A5B1CE;
  --ink-inverse: var(--white);
  --action: var(--lime-500);
  --action-hover: var(--lime-200);
  --on-action: var(--navy-900);
  --accent: var(--lime-500);
  --accent-hover: var(--lime-200);
  --on-accent: var(--navy-900);
  --accent-soft: #3A4944;
  --accent-ink: var(--lime-500);
  --link: var(--lime-500);
  --focus: var(--lime-500);
  --success: #83D5D4;
  --success-soft: #314B6B;
  --warning: #F1B779;
  --warning-soft: #474559;
  --danger: #FFABA1;
  --danger-soft: #4A4361;
  --info: #A4C5FF;
  --info-soft: #384874;
  --chart-1: #748BEF;
  --chart-2: #108CA0;
  --chart-3: #CC5878;
  --chart-4: #9868CA;
  --chart-5: var(--lime-500);
  --chart-context: var(--navy-600);
  --chart-context-2: var(--navy-500);
  --chart-grid: var(--border);
  --chart-axis: var(--border-strong);
  --shadow-sm: 0 1px 3px #00000066;
  --shadow-lg: 0 16px 40px -8px #000000B3;
  --focus-ring: 0 0 0 2px #1D2951, 0 0 0 4px #D3F300;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-pill: 9999px;
  --rule-hairline: 1px;
  --rule-sm: 2px;
  --rule-md: 4px;
  --rule-lg: 6px;
  --line-thickness: 0.1115;
  --line-offset: 0.2235;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --container: 1200px;
  --container-wide: 1440px;
  --measure: 68ch;
  --logo-min-digital: 96px;
  --logo-min-print: 25mm;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --opacity-disabled: 0.4;
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-text: "Libre Franklin", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
.display-2xl { font-family: var(--font-display); font-size: 96px; line-height: 96px; font-weight: 600; letter-spacing: -0.015em; }
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 76px; font-weight: 600; letter-spacing: -0.01em; }
.display-lg { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.01em; }
.heading-xl { font-family: var(--font-display); font-size: 44px; line-height: 50px; font-weight: 600; letter-spacing: -0.005em; }
.heading-lg { font-family: var(--font-display); font-size: 36px; line-height: 42px; font-weight: 600; }
.heading-md { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; }
.quote { font-family: var(--font-display); font-size: 30px; line-height: 40px; font-weight: 500; font-style: italic; }
.figure { font-family: var(--font-display); font-size: 64px; line-height: 64px; font-weight: 600; letter-spacing: -0.01em; }
.title-lg { font-family: var(--font-text); font-size: 22px; line-height: 30px; font-weight: 600; }
.title { font-family: var(--font-text); font-size: 18px; line-height: 26px; font-weight: 600; }
.lead { font-family: var(--font-text); font-size: 20px; line-height: 32px; font-weight: 400; }
.body-lg { font-family: var(--font-text); font-size: 18px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-text); font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.01em; }
.caption { font-family: var(--font-text); font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0.01em; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
.data-sm { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 400; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }

/* SOJKA & Co. brand fonts: Cormorant Garamond, Libre Franklin, IBM Plex Mono (SIL OFL 1.1, see licenses/) */
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/CormorantGaramond-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/assets/fonts/LibreFranklin-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/assets/fonts/LibreFranklin-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* SOJKA & Co. — base layer. Every value comes from tokens.css (generated from tokens.json). */
body { margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 26px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.sc-root { font-family: var(--font-text); color: var(--ink); background: var(--surface); }
.sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; }
.sc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sc-focusable:focus { outline: none; }
.sc-focusable:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { .sc-root *, .sc-root *::before, .sc-root *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
/* Preview scaffolding (component cards only): a padded box, a wrapping row, a stack, and a variant label. */
.sc-pv { box-sizing: border-box; padding: var(--space-6); background: var(--surface); color: var(--ink); font-family: var(--font-text); }
.sc-pv *, .sc-pv *::before, .sc-pv *::after { box-sizing: border-box; }
.sc-pv-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.sc-pv-stack { display: grid; gap: var(--space-6); }
.sc-pv-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.sc-pv-label { display: block; margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.sc-pv-panel { padding: var(--space-6); background: var(--surface-alt); }
.sc-pv-inverse { padding: var(--space-6); background: var(--surface-inverse); color: var(--ink-inverse); }
/* The line under type, at the logo's own ratios: thickness = line-thickness (0.1115) x cap height,
   gap below the baseline = line-offset (0.2235) x cap height. Cap-height ratios are font metrics
   (Cormorant Garamond 0.625 em, Libre Franklin 0.742 em, IBM Plex Mono 0.698 em). skip-ink lets
   descenders break the line exactly as the J breaks it in the logo. Add .sc-underline to any text;
   it picks the serif ratio inside Cormorant type classes and the sans ratio elsewhere. */
:root { --sc-cap-display: 0.625; --sc-cap-text: 0.742; --sc-cap-mono: 0.698; }
.sc-underline { --sc-cap: var(--sc-cap-text); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--accent);
  text-decoration-thickness: max(2px, calc(var(--line-thickness) * var(--sc-cap) * 1em));
  text-underline-offset: calc(var(--line-offset) * var(--sc-cap) * 1em); text-decoration-skip-ink: auto; }
:is(.display-2xl, .display-xl, .display-lg, .heading-xl, .heading-lg, .heading-md, .quote, .figure) .sc-underline,
.sc-underline:is(.display-2xl, .display-xl, .display-lg, .heading-xl, .heading-lg, .heading-md, .quote, .figure) { --sc-cap: var(--sc-cap-display); }
:is(.eyebrow, .data, .data-sm, .code) .sc-underline, .sc-underline:is(.eyebrow, .data, .data-sm, .code) { --sc-cap: var(--sc-cap-mono); }
/* Theme scopes. Any element with data-theme re-resolves every semantic token for its subtree, so it also
   re-sets text color from that scope's ink. Two uses:
   1. Inverse (navy) bands: paint var(--surface-inverse) on the band, then put data-theme="dark" on the band's
      content wrapper. Inside it ink, ink-muted, border, link, action, focus-ring and the status colors all
      take their Navy values, so components need no inverse rules of their own.
   2. Pinned artwork (letters, business cards, slides, posts, email panels): data-theme="light" or "dark" on
      the artwork root keeps it Paper or Navy whatever the page theme is. */
[data-theme] { color: var(--ink); }
.sc-pv-inverse > [data-theme] { background: transparent; }
/* Preview note: a quiet lowercase caption that never reads as an Eyebrow. */
.sc-pv-note { display: block; margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
/* Tables ignore height:1px, so a visually hidden table must also stop being a table box. */
table.sc-visually-hidden { display: block; }
/* Bold inside brand surfaces is the brand's semibold, not the browser's 700. */
:is(.sc-root, .sc-pv) :is(strong, b) { font-weight: 600; }

/* ---- Logo ---- */
/* border-box so clear-space padding never pushes a fluid logo past its container. */
.sc-logo { display: inline-block; box-sizing: border-box; line-height: 0; vertical-align: middle; }
.sc-logo svg { display: block; overflow: visible; }
.sc-logo--auto .sc-logo__type { fill: var(--ink); }
.sc-logo--auto .sc-logo__line { fill: var(--accent); }
/* primary and reversed are fixed artwork: they do not follow the theme. */
.sc-logo--primary .sc-logo__type { fill: var(--navy-900); }
.sc-logo--primary .sc-logo__line { fill: var(--lime-500); }
.sc-logo--reversed .sc-logo__type { fill: var(--white); }
.sc-logo--reversed .sc-logo__line { fill: var(--lime-500); }
.sc-logo--mono .sc-logo__type, .sc-logo--mono .sc-logo__line { fill: currentColor; }
.sc-logo--fluid { display: block; width: 100%; }
.sc-logo--fluid svg { width: 100%; height: auto; }

/* ---- Monogram ---- */
.sc-monogram { display: inline-block; line-height: 0; vertical-align: middle; }
.sc-monogram svg { display: block; }
/* tile: the ground follows surface-inverse (deeper in Navy); the S and line are fixed artwork. */
.sc-monogram--tile .sc-monogram__ground { fill: var(--surface-inverse); }
.sc-monogram--tile .sc-monogram__type { fill: var(--white); }
.sc-monogram--tile .sc-monogram__line { fill: var(--lime-500); }
.sc-monogram--tile-white .sc-monogram__ground { fill: var(--white); }
.sc-monogram--tile-white .sc-monogram__type { fill: var(--navy-900); }
.sc-monogram--tile-white .sc-monogram__line { fill: var(--lime-500); }
.sc-monogram--auto .sc-monogram__type { fill: var(--ink); }
.sc-monogram--auto .sc-monogram__line { fill: var(--accent); }
.sc-monogram--mono .sc-monogram__type, .sc-monogram--mono .sc-monogram__line { fill: currentColor; }
/* String size: width comes from the inline style, the square from aspect-ratio. */
.sc-monogram--fluid { display: block; aspect-ratio: 1; }
.sc-monogram--fluid svg { width: 100%; height: 100%; }

/* ---- Icon ---- */
.sc-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ---- Rule ---- */
/* The line as a standalone bar. Square ends, no radius, never a border (so it can be broken and drawn in). */
.sc-rule {
  /* Ratios measured from the wordmark (logo-data.js): its line is 76 x its own thickness long,
     and the J opens a gap 5.657 x the thickness wide. */
  --sc-rule-logo-ratio: 76;
  --sc-rule-gap-ratio: 5.657;
  --sc-rule-w: var(--rule-md);
  --sc-rule-ink: var(--accent);
  --sc-rule-at: 0.24;
  --sc-rule-gap: calc(var(--sc-rule-w) * var(--sc-rule-gap-ratio));
  display: block;
  box-sizing: border-box;
  flex: none;
  width: 100%;
  max-width: 100%;
  height: var(--sc-rule-w);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  color: inherit;
  overflow: visible;
  background: var(--sc-rule-ink);
  transform-origin: 0 50%;
}
.sc-rule--sm { --sc-rule-w: var(--rule-sm); }
.sc-rule--md { --sc-rule-w: var(--rule-md); }
.sc-rule--lg { --sc-rule-w: var(--rule-lg); }

.sc-rule--full { width: 100%; }
.sc-rule--short { width: var(--space-12); }
.sc-rule--logo { width: calc(var(--sc-rule-w) * var(--sc-rule-logo-ratio)); }

/* Hairline: the neutral 1px divider in the border color. Length still follows the weight token. */
.sc-rule--hairline { --sc-rule-ink: var(--border); height: var(--rule-hairline); }

/* Broken at --sc-rule-at (0-1, the center of the gap), the gap scaled to the weight as the J's is to the logo's line. */
.sc-rule--gap {
  background: linear-gradient(to right,
    var(--sc-rule-ink) calc(var(--sc-rule-at) * 100% - var(--sc-rule-gap) / 2),
    transparent 0,
    transparent calc(var(--sc-rule-at) * 100% + var(--sc-rule-gap) / 2),
    var(--sc-rule-ink) 0);
}

/* Draw-in: scaleX from the left edge, once, when the rule first enters the viewport. */
@keyframes sc-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sc-rule--wait { transform: scaleX(0); }
.sc-rule--play { animation: sc-rule-draw var(--duration-slow) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .sc-rule--wait, .sc-rule--play { transform: none; animation: none; }
}

/* ---- Highlight ---- */
/* `as` changes the semantics only. The look is always the line or the wash, so the element's UA styling
   (mark's yellow, em's italic, strong's bold) is neutralized and the surrounding type carries through. */
.sc-highlight { color: inherit; background: transparent; }
em.sc-highlight, strong.sc-highlight, mark.sc-highlight { font-style: inherit; font-weight: inherit; }

/* line: the .sc-underline utility (base.css) does the work - the logo's ratios, broken by descenders. */

/* marker: the accent-soft wash behind running text, always with ink words (the tested pair in both themes,
   even if the paragraph is ink-muted). 0.1em side padding is an optical nudge so the wash clears the first
   and last glyph; clone repeats it on every wrapped line. */
.sc-highlight.sc-highlight--marker {
  color: var(--ink);
  background: var(--accent-soft);
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Endorsement ---- */
/* Lockups of SOJKA & Co. with another brand. The lockup hugs its content; the consumer places it.
   Transparent so a pinned lockup (data-theme on the root) never paints a theme surface over its ground. */
.sc-endorsement { display: inline-flex; max-width: 100%; vertical-align: middle; color: var(--ink); background: transparent; }
.sc-endorsement--horizontal { flex-direction: row; align-items: center; gap: var(--space-5); }
.sc-endorsement--stacked { flex-direction: column; align-items: flex-start; }
/* Endorsed: the by-line hangs directly under the name and shares its baseline when set beside it. */
.sc-endorsement--endorsed.sc-endorsement--stacked { gap: 0; }
.sc-endorsement--endorsed.sc-endorsement--horizontal { align-items: baseline; }
/* Partnership stacked: the extra top margin on the logo balances the space the partner's line box
   already leaves under its baseline, so the divider reads as centered between the two marks. */
.sc-endorsement--partnership.sc-endorsement--stacked { gap: var(--space-4); }
.sc-endorsement--partnership.sc-endorsement--stacked .sc-endorsement__logo { margin-top: var(--space-2); }

/* A lockup is artwork: neither mark shrinks or rewraps. Where it will not fit, use layout="stacked". */
.sc-endorsement__partner { display: block; flex: none; max-width: 100%; }
.sc-endorsement__name { display: block; color: inherit; white-space: nowrap; }
.sc-endorsement__placeholder { display: block; color: var(--ink-subtle); white-space: nowrap; }

/* The hairline divider between the two marks: vertical beside, horizontal when stacked. */
.sc-endorsement__divider { flex: none; align-self: stretch; background: var(--border); }
.sc-endorsement--horizontal .sc-endorsement__divider { width: var(--rule-hairline); }
.sc-endorsement--stacked .sc-endorsement__divider { height: var(--rule-hairline); }

/* "A SOJKA & Co. company": the real logo at its minimum or above, set on the text baseline in JSX.
   0.12em either side is an optical nudge: a word space alone crowds the Garamond capitals. */
.sc-endorsement__by { display: block; flex: none; color: var(--ink-muted); white-space: nowrap; }
.sc-endorsement__logo { flex: none; }
.sc-endorsement__by .sc-endorsement__logo { margin: 0 0.12em; }

/* reversed and primary need no rules here: JSX pins the root with data-theme="dark" / "light", so ink,
   ink-muted, ink-subtle and border resolve to Navy or Paper values whatever the page theme is. */
/* Mono: one ink for everything - text, divider and logo all follow currentColor. */
.sc-endorsement--mono { color: inherit; }
.sc-endorsement--mono :is(.sc-endorsement__by, .sc-endorsement__placeholder) { color: inherit; }
.sc-endorsement--mono .sc-endorsement__divider { background: currentColor; }

/* ---- Heading ---- */
.sc-heading { margin: 0; color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; }
.sc-heading.sc-heading--balance { text-wrap: balance; }
.sc-heading--muted { color: var(--ink-muted); }
.sc-heading--inverse { color: var(--ink-inverse); }
/* The line sits below the baseline at the logo's ratios (from .sc-underline). On display sizes it can reach
   past the last line box, so reserve that depth as padding: 0.2235 + 0.1115 of the cap height (0.625em),
   less the font's own descent room (~0.18em at a 1:1 line-height). Never a margin - spacing is the layout's. */
.sc-heading--underline:is(.display-2xl, .display-xl, .display-lg, .heading-xl, .heading-lg, .heading-md) {
  padding-bottom: max(0px, calc((var(--line-offset) + var(--line-thickness)) * var(--sc-cap-display) * 1em - 0.18em));
}

/* ---- Text ---- */
.sc-text { margin: 0; color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; }
.sc-text--muted { color: var(--ink-muted); }
.sc-text--subtle { color: var(--ink-subtle); }
.sc-text--inverse { color: var(--ink-inverse); }
.sc-text--measure { max-width: var(--measure); }
/* Two classes so a weight beats the type class (.caption is 500) whatever order the sheets load in. */
.sc-text.sc-text--regular { font-weight: 400; }
.sc-text.sc-text--medium { font-weight: 500; }
.sc-text.sc-text--semibold { font-weight: 600; }
.sc-text :is(strong, b) { font-weight: 600; }

/* ---- Eyebrow ---- */
.sc-eyebrow { margin: 0; color: var(--ink-muted); text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; }
.sc-eyebrow--ink { color: var(--ink); }
.sc-eyebrow--accent { color: var(--accent-ink); }
.sc-eyebrow--inverse { color: var(--ink-inverse); }
.sc-eyebrow--line { display: flex; align-items: flex-start; gap: var(--space-3); }
/* The line as a section marker: a short, square-ended lime bar, rule-sm thick and space-6 long. Its middle sits on
   the middle of the first line box (0.5lh, then back up by half its own height), which is the middle of the capitals,
   and it stays there if the label wraps. The first margin-top is the fallback without the lh unit (line-height space-4). */
.sc-eyebrow__line {
  flex: none; display: block; width: var(--space-6); height: var(--rule-sm); background: var(--accent);
  margin-top: calc(var(--space-4) / 2);
  margin-top: 0.5lh;
  transform: translateY(-50%);
}
.sc-eyebrow__text { min-width: 0; }

/* ---- Quote ---- */
.sc-quote { margin: 0; color: var(--ink); }
.sc-quote--center { text-align: center; }
/* The line above the quote: rule-md thick, space-12 long, square-ended lime. */
.sc-quote__line { display: block; width: var(--space-12); height: var(--rule-md); margin-bottom: var(--space-6); background: var(--accent); }
.sc-quote--center .sc-quote__line { margin-inline: auto; }
.sc-quote--lg .sc-quote__line { margin-bottom: var(--space-8); }
.sc-quote__body { margin: 0; padding: 0; border: 0; }
.sc-quote__text { margin: 0; quotes: "\201C" "\201D" "\2018" "\2019"; text-wrap: pretty; font-variant-numeric: lining-nums; }
.sc-quote__text::before { content: open-quote; }
.sc-quote__text::after { content: close-quote; }
/* Left-aligned quotes hang the opening mark into the margin so the letters, not the mark, hold the left edge
   (optical alignment). The indent is the mark's own advance in Cormorant Garamond italic. */
.sc-quote--left .sc-quote__text { text-indent: -0.36em; }
.sc-quote--center .sc-quote__text { text-wrap: balance; }
/* lg is display-lg (56/60) set italic at the quote weight, for a single hero quote. Two classes beat .display-lg. */
.sc-quote--lg .sc-quote__text { font-style: italic; font-weight: 500; text-wrap: balance; }
.sc-quote__caption { display: grid; gap: var(--space-1); margin-top: var(--space-6); }
.sc-quote--lg .sc-quote__caption { margin-top: var(--space-8); }
.sc-quote__cite { color: var(--ink); }
.sc-quote__role { color: var(--ink-muted); }

/* ---- Stat ---- */
.sc-stat { margin: 0; display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
:where(.sc-stat) > :is(dt, dd) { margin: 0; }
/* Figure first on screen; the label comes first in the DOM (see Stat.jsx). */
.sc-stat__value { order: -1; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
/* The gap under the figure is the same with or without the line, so a row of stats keeps one label baseline.
   At lg the line reaches ~0.21em below the baseline, past the figure's 1:1 line box: space-5 clears it. */
.sc-stat__label { margin-top: var(--space-5); color: var(--ink); }
.sc-stat--md .sc-stat__label { margin-top: var(--space-2); }
.sc-stat__delta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); margin-top: var(--space-1); font-variant-numeric: lining-nums tabular-nums; }
.sc-stat__icon { flex: none; }
.sc-stat__delta--positive :is(.sc-stat__icon, .sc-stat__change) { color: var(--success); }
.sc-stat__delta--negative :is(.sc-stat__icon, .sc-stat__change) { color: var(--danger); }
.sc-stat__delta--neutral :is(.sc-stat__icon, .sc-stat__change) { color: var(--ink-muted); }
.sc-stat__change { font-weight: 500; }
.sc-stat__period { color: var(--ink-muted); }
.sc-stat__caption { margin-top: var(--space-4); color: var(--ink-subtle); }
.sc-stat--md .sc-stat__caption { margin-top: var(--space-3); }
.sc-stat__illustrative { display: block; }

/* ---- Button ---- */
/* Button: square (radius-xs), typographic, one primary per view. The lime line is the ghost hover and the accent fill. */
.sc-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--control-md);
  margin: 0;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.sc-button__content { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sc-button__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-button__icon { transition: transform var(--duration-fast) var(--ease-standard); }

/* sizes: heights are the control tokens; lg sets body at the label weight */
.sc-button--sm { height: var(--control-sm); padding: 0 var(--space-3); }
.sc-button--sm .sc-button__content { gap: var(--space-1); }
.sc-button--md { height: var(--control-md); padding: 0 var(--space-5); }
.sc-button--lg { height: var(--control-lg); padding: 0 var(--space-6); }
.sc-button.sc-button--lg { font-weight: 600; }
/* optical: a Lucide glyph carries ~2px of air inside its box, so the padding on the icon side steps down one notch */
.sc-button--md.sc-button--has-start { padding-left: var(--space-4); }
.sc-button--md.sc-button--has-end { padding-right: var(--space-4); }
.sc-button--lg.sc-button--has-start { padding-left: var(--space-5); }
.sc-button--lg.sc-button--has-end { padding-right: var(--space-5); }
.sc-button--sm.sc-button--has-start { padding-left: var(--space-2); }
.sc-button--sm.sc-button--has-end { padding-right: var(--space-2); }
.sc-button--full { display: flex; width: 100%; }

/* primary: the action fill, one per view */
.sc-button--primary { background: var(--action); color: var(--on-action); }
.sc-button--primary:not(.sc-button--inert):hover { background: var(--action-hover); }

/* secondary: transparent with the control boundary */
.sc-button--secondary { border-color: var(--border-strong); color: var(--ink); }
.sc-button--secondary:not(.sc-button--inert):hover { background: var(--surface-alt); border-color: var(--ink); }

/* ghost: no chrome; hover draws the lime line under the label at the logo ratio (.sc-underline) */
.sc-button--ghost { color: var(--ink); }
.sc-button--ghost .sc-button__label { text-decoration-color: transparent; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.sc-button--ghost:not(.sc-button--inert):hover .sc-button__label { text-decoration-color: var(--accent); }
/* overflow:hidden on the label would clip the line, so the ghost label keeps visible overflow */
.sc-button--ghost .sc-button__label { overflow: visible; }

/* accent: the lime fill - only on surface-inverse or in the Navy theme */
.sc-button--accent { background: var(--accent); color: var(--on-accent); }
.sc-button--accent:not(.sc-button--inert):hover { background: var(--accent-hover); }

/* arrow-right leans 2px into the direction of travel (optical nudge) */
.sc-button:not(.sc-button--inert):hover .sc-button__icon--nudge { transform: translateX(2px); }

/* disabled */
.sc-button:disabled,
.sc-button[aria-disabled="true"]:not(.sc-button--loading) { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* loading: the label keeps its width (opacity, so it stays the accessible name); three segments of the line pulse in turn */
.sc-button--loading { cursor: progress; }
.sc-button--loading .sc-button__content { opacity: 0; }
.sc-button__loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-1); pointer-events: none; }
.sc-button__bar { display: block; width: var(--space-3); height: var(--rule-sm); background: currentColor; opacity: 0.25; animation: sc-button-line calc(var(--duration-slow) * 3) var(--ease-standard) infinite; }
.sc-button__bar:nth-child(2) { animation-delay: var(--duration-slow); }
.sc-button__bar:nth-child(3) { animation-delay: calc(var(--duration-slow) * 2); }
.sc-button--sm .sc-button__bar { width: var(--space-2); }
@keyframes sc-button-line { 0%, 100% { opacity: 0.25; } 30% { opacity: 1; } 60% { opacity: 0.25; } }

/* On a navy band the band's content wrapper carries data-theme="dark", so every token above already resolves to its
   Navy value (primary lime, secondary and ghost white, lime focus ring). No inverse rules of its own. */

/* forced colors drop backgrounds: keep the loading segments drawn in the button text color */
@media (forced-colors: active) {
  .sc-button__bar { forced-color-adjust: none; background: ButtonText; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-button, .sc-button__icon, .sc-button--ghost .sc-button__label { transition: none; }
  .sc-button:not(.sc-button--inert):hover .sc-button__icon--nudge { transform: none; }
  .sc-button__bar { animation: none; opacity: 1; }
}

/* ---- Link ---- */
/* Link: the logo's lime line under type. Inline links carry the link color; standalone links carry the arrow. */
.sc-link {
  --sc-link-ink: var(--link);
  --sc-link-ink-hover: var(--ink);
  color: var(--sc-link-ink);
  text-decoration: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.sc-link__text {
  transition:
    text-decoration-color var(--duration-fast) var(--ease-standard),
    text-decoration-thickness var(--duration-fast) var(--ease-standard);
}
.sc-link__icon { transition: transform var(--duration-fast) var(--ease-standard); }
/* the last word and the icon never part: a wrapping link carries its arrow onto the last line */
.sc-link__tail { white-space: nowrap; }

/* inline: inherits the surrounding type (Text, body, lead); the line is always there */
.sc-link--inline { font: inherit; letter-spacing: inherit; }
/* a second, non-color cue: in regular-weight running text the link steps up to 500 (the lime line alone is 1.27:1 on Paper) */
:is(.body, .body-lg, .body-sm, .lead, .caption) .sc-link--inline,
.sc-link--inline:is(.body, .body-lg, .body-sm, .lead, .caption) { font-weight: 500; }
.sc-link--inline:hover { color: var(--sc-link-ink-hover); }
/* hover: the line thickens by half again (3px under body sizes, the logo ratio x 1.6 above) */
.sc-link--inline:hover .sc-link__text {
  text-decoration-thickness: max(calc(var(--rule-sm) * 1.5), calc(var(--line-thickness) * var(--sc-cap) * 1.6em));
}
/* em sizing so the glyph scales with the type it sits in; negative margins take back the glyph's built-in side air (optical) */
.sc-link--inline .sc-link__icon { width: 1.1em; height: 1.1em; margin: 0 -0.2em 0 -0.05em; vertical-align: -0.15em; }

/* standalone: label weight in ink, no line at rest; hover draws the line and the arrow leans 2px forward.
   It stays an inline box (not inline-flex), so a link that wraps in a narrow column keeps its arrow after the
   last word instead of stranding it at the far edge of a full-width flex item. */
.sc-link--standalone { --sc-link-ink: var(--ink); }
.sc-link--standalone.sc-link--lg { font-weight: 600; }
.sc-link--standalone .sc-link__text { text-decoration-color: transparent; }
.sc-link--standalone:hover .sc-link__text { text-decoration-color: var(--accent); }
/* optical: -0.2em centers the 1.15em glyph on the cap height of Libre Franklin (0.742em) */
.sc-link--standalone .sc-link__icon { width: 1.15em; height: 1.15em; margin-left: var(--space-1); vertical-align: -0.2em; }
.sc-link--standalone:hover .sc-link__icon--arrow-right { transform: translateX(2px); }
.sc-link--standalone:hover .sc-link__icon--arrow-up-right { transform: translate(1px, -1px); }

/* On a navy band the band's content wrapper carries data-theme="dark": link resolves to lime, ink to white and
   focus-ring to lime there, so the link needs no inverse rules of its own. */

@media (prefers-reduced-motion: reduce) {
  .sc-link, .sc-link__text, .sc-link__icon { transition: none; }
  .sc-link--standalone:hover .sc-link__icon { transform: none; }
}

/* ---- TextField ---- */
/* TextField: label above, square chrome (surface-raised, 1px border-strong, radius-xs), hint before the field, error after it. */
.sc-text-field { display: grid; gap: var(--space-2); min-width: 0; color: var(--ink); }
.sc-text-field__intro { display: grid; min-width: 0; }
.sc-text-field__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.sc-text-field__label { color: var(--ink); cursor: default; }
.sc-text-field__required { color: var(--ink-muted); }
.sc-text-field__hint { margin: 0; color: var(--ink-muted); max-width: var(--measure); }

.sc-text-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  height: var(--control-md);
  padding: 0 var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--ink);
  cursor: text;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.sc-text-field--lg .sc-text-field__control { height: var(--control-lg); padding: 0 var(--space-4); gap: var(--space-3); }
/* the icon lets presses through to the chrome, which hands focus to the field */
.sc-text-field__icon { flex: none; color: var(--ink-muted); pointer-events: none; }

.sc-text-field__input {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.sc-text-field__input::placeholder { color: var(--ink-subtle); opacity: 1; }
/* type="search": drop WebKit's built-in magnifier inset so text starts where every other field's does */
.sc-text-field__input::-webkit-search-decoration { -webkit-appearance: none; }

/* multiline: the chrome grows with the rows; the textarea carries its own vertical padding */
.sc-text-field--multiline .sc-text-field__control { height: auto; align-items: flex-start; }
.sc-text-field--multiline .sc-text-field__icon { margin-top: var(--space-3); }
.sc-text-field--multiline .sc-text-field__input { padding: var(--space-2) 0; resize: vertical; min-height: var(--control-md); }
.sc-text-field--multiline.sc-text-field--lg .sc-text-field__input { padding: var(--space-3) 0; }

/* States at one specificity (0,2,0; :where hides the guards) so source order decides: hover < read-only < focus < error < error+focus. */
:where(.sc-text-field:not(.sc-text-field--disabled)) .sc-text-field__control:hover { border-color: var(--ink); }
/* read-only: sunken to surface-alt, boundary kept at border-strong (4.0:1 / 5.9:1), no hover; still focusable and selectable */
.sc-text-field--readonly .sc-text-field__control { background: var(--surface-alt); border-color: var(--border-strong); cursor: default; }
/* the transparent outline is invisible normally and becomes the focus indicator in forced-colors mode */
:where(.sc-text-field) .sc-text-field__control:focus-within { border-color: var(--focus); box-shadow: var(--focus-ring); outline: var(--rule-sm) solid transparent; outline-offset: var(--rule-sm); }
/* error: a danger boundary doubled with a 1px inset hairline, then the icon and message below */
.sc-text-field--invalid .sc-text-field__control { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.sc-text-field--invalid .sc-text-field__control:focus-within { box-shadow: inset 0 0 0 1px var(--danger), var(--focus-ring); }
.sc-text-field__error { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--danger); }
/* optical: center the 16px glyph on the first 22px line of body-sm */
.sc-text-field__error-icon { flex: none; margin-top: 3px; }

/* disabled */
.sc-text-field--disabled { opacity: var(--opacity-disabled); }
.sc-text-field--disabled .sc-text-field__control,
.sc-text-field--disabled .sc-text-field__input,
.sc-text-field--disabled .sc-text-field__label { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .sc-text-field__control { transition: none; }
}

/* ---- Select ---- */
/* Select: the native <select> in TextField's square chrome, with a chevron-down drawn over its right edge. */
.sc-select { display: grid; gap: var(--space-2); min-width: 0; color: var(--ink); }
.sc-select__intro { display: grid; min-width: 0; }
.sc-select__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.sc-select__label { color: var(--ink); cursor: default; }
.sc-select__required { color: var(--ink-muted); }
.sc-select__hint { margin: 0; color: var(--ink-muted); max-width: var(--measure); }

.sc-select__control {
  position: relative;
  display: flex;
  box-sizing: border-box;
  height: var(--control-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.sc-select--lg .sc-select__control { height: var(--control-lg); }

.sc-select__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  /* right padding clears the 20px chevron plus its gap */
  padding: 0 calc(var(--space-3) + var(--space-5) + var(--space-2)) 0 var(--space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-overflow: ellipsis;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.sc-select--lg .sc-select__input { padding: 0 calc(var(--space-4) + var(--space-5) + var(--space-2)) 0 var(--space-4); }
.sc-select__input option { background: var(--surface-raised); color: var(--ink); }
.sc-select--placeholder .sc-select__input { color: var(--ink-subtle); }
.sc-select__chevron {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}
.sc-select--lg .sc-select__chevron { right: var(--space-4); }

/* States at one specificity (0,2,0; :where hides the guards) so source order decides: hover < focus < error < error+focus. */
:where(.sc-select:not(.sc-select--disabled)) .sc-select__control:hover { border-color: var(--ink); }
:where(.sc-select:not(.sc-select--disabled)) .sc-select__control:hover .sc-select__chevron { color: var(--ink); }
/* the transparent outline is invisible normally and becomes the focus indicator in forced-colors mode */
:where(.sc-select) .sc-select__control:focus-within { border-color: var(--focus); box-shadow: var(--focus-ring); outline: var(--rule-sm) solid transparent; outline-offset: var(--rule-sm); }
/* error: a danger boundary doubled with a 1px inset hairline, then the icon and message below */
.sc-select--invalid .sc-select__control { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.sc-select--invalid .sc-select__control:focus-within { box-shadow: inset 0 0 0 1px var(--danger), var(--focus-ring); }
.sc-select__error { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--danger); }
/* optical: center the 16px glyph on the first 22px line of body-sm */
.sc-select__error-icon { flex: none; margin-top: 3px; }

/* disabled */
.sc-select--disabled { opacity: var(--opacity-disabled); }
.sc-select--disabled .sc-select__input,
.sc-select--disabled .sc-select__label { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .sc-select__control { transition: none; }
}

/* ---- Checkbox ---- */
/* Checkbox / radio: a native input laid over an 18px drawn box. Square (radius-xs) for checkbox; the radio is the system's only circle. */
.sc-checkbox {
  /* 18px box = space-4 + rule-sm; it sits centered on the first 26px line of .body */
  --sc-checkbox-size: calc(var(--space-4) + var(--rule-sm));
  display: grid;
  grid-template-columns: var(--sc-checkbox-size) minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
  color: var(--ink);
}
.sc-checkbox__control {
  position: relative;
  display: block;
  width: var(--sc-checkbox-size);
  height: var(--sc-checkbox-size);
  margin-top: var(--space-1);
}
/* the real input covers the box: native keyboard, click and form behavior, invisible */
.sc-checkbox__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.sc-checkbox__box {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--on-action);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.sc-checkbox--radio .sc-checkbox__box { border-radius: var(--radius-pill); }
.sc-checkbox__check { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
/* 6px dot = 1.5 x space-1 */
.sc-checkbox__dot {
  display: block;
  width: calc(var(--space-1) * 1.5);
  height: calc(var(--space-1) * 1.5);
  border-radius: var(--radius-pill);
  background: var(--on-action);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-standard);
}

/* States, all at one specificity (:where) so source order decides:
   hover < checked < checked+hover < error < focus.
   Hover answers only where a press toggles the input (the box or the label), not the description or error. */
:where(.sc-checkbox:not(.sc-checkbox--disabled):has(.sc-checkbox__input:hover, .sc-checkbox__label:hover)) .sc-checkbox__box { border-color: var(--ink); }
/* checked: the action fill with an on-action check or dot */
:where(.sc-checkbox__input:checked) + .sc-checkbox__box { background: var(--action); border-color: var(--action); }
:where(.sc-checkbox__input:checked) + .sc-checkbox__box .sc-checkbox__check { opacity: 1; }
:where(.sc-checkbox__input:checked) + .sc-checkbox__box .sc-checkbox__dot { transform: scale(1); }
:where(.sc-checkbox:not(.sc-checkbox--disabled):has(.sc-checkbox__input:hover, .sc-checkbox__label:hover) .sc-checkbox__input:checked) + .sc-checkbox__box { background: var(--action-hover); border-color: var(--action-hover); }
/* error: danger boundary doubled with a 1px inset hairline (unchecked only), then the icon and message */
:where(.sc-checkbox--invalid .sc-checkbox__input:not(:checked)) + .sc-checkbox__box { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
:where(.sc-checkbox__input:focus-visible) + .sc-checkbox__box { box-shadow: var(--focus-ring); outline: var(--rule-sm) solid transparent; outline-offset: var(--rule-sm); }
:where(.sc-checkbox--invalid .sc-checkbox__input:not(:checked):focus-visible) + .sc-checkbox__box { box-shadow: inset 0 0 0 1px var(--danger), var(--focus-ring); }

.sc-checkbox__text { display: grid; min-width: 0; }
.sc-checkbox__label { color: var(--ink); cursor: pointer; }
.sc-checkbox__description { color: var(--ink-muted); }

.sc-checkbox__error { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-1); color: var(--danger); }
/* optical: center the 16px glyph on the first 22px line of body-sm */
.sc-checkbox__error-icon { flex: none; margin-top: 3px; }

/* disabled */
.sc-checkbox--disabled { opacity: var(--opacity-disabled); }
.sc-checkbox--disabled .sc-checkbox__input,
.sc-checkbox--disabled .sc-checkbox__label { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .sc-checkbox__box, .sc-checkbox__check, .sc-checkbox__dot { transition: none; }
}
/* forced colors drop backgrounds: keep the radio dot drawn in the system text color */
@media (forced-colors: active) {
  .sc-checkbox__dot { forced-color-adjust: none; background: CanvasText; }
}

/* ---- Badge ---- */
/* Badge: the only pill in the system. A 1px border is always present (transparent when soft) so soft and
   outline badges share one height: sm = 18px caption line + 2 x 1px border = 20px; md = 20px label line +
   2 x 1px padding (optical) + 2 x 1px border = 24px. */
.sc-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  box-sizing: border-box; max-width: 100%;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  white-space: nowrap; vertical-align: middle;
  font-variant-numeric: lining-nums tabular-nums;
}
.sc-badge--md { padding: 1px var(--space-3); }
.sc-badge.sc-badge--sm { padding: 0 var(--space-2); font-weight: 600; } /* caption at 600; doubled class beats .caption */
.sc-badge__text { overflow: hidden; text-overflow: ellipsis; }
.sc-badge__icon { margin-left: calc(-1 * var(--space-1)); }
.sc-badge--sm .sc-badge__icon { margin-left: -2px; } /* optical: pulls the icon toward the round end */
/* The dot is a 6px square, not a circle: square like the ends of the line. */
.sc-badge__dot { flex: none; width: 6px; height: 6px; background: currentColor; margin-left: -2px; } /* optical: 6px per spec; -2px sits it in the curve */
.sc-badge--md .sc-badge__dot { margin-right: 2px; } /* optical: a touch more air beside 14px text */

/* soft: tinted ground + its text token */
.sc-badge--soft.sc-badge--neutral { background: var(--surface-alt); color: var(--ink-muted); border-color: var(--border); }
.sc-badge--soft.sc-badge--accent { background: var(--accent-soft); color: var(--accent-ink); }
.sc-badge--soft.sc-badge--success { background: var(--success-soft); color: var(--success); }
.sc-badge--soft.sc-badge--warning { background: var(--warning-soft); color: var(--warning); }
.sc-badge--soft.sc-badge--danger { background: var(--danger-soft); color: var(--danger); }
.sc-badge--soft.sc-badge--info { background: var(--info-soft); color: var(--info); }

/* outline: 1px in the tone color, transparent ground */
.sc-badge--outline { background: transparent; border-color: currentColor; }
.sc-badge--outline.sc-badge--neutral { color: var(--ink-muted); }
.sc-badge--outline.sc-badge--accent { color: var(--accent-ink); }
.sc-badge--outline.sc-badge--success { color: var(--success); }
.sc-badge--outline.sc-badge--warning { color: var(--warning); }
.sc-badge--outline.sc-badge--danger { color: var(--danger); }
.sc-badge--outline.sc-badge--info { color: var(--info); }

/* ---- Callout ---- */
/* Callout: a square, tinted notice. Never a colored side or top stripe - the brand tone carries the line under
   its title, starting at the left edge of the text, the way the logo carries it under the name. */
.sc-callout {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-3); align-items: start;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-none);
  color: var(--ink);
}
.sc-callout--has-icon { grid-template-columns: auto minmax(0, 1fr); }
.sc-callout--dismissible { grid-template-columns: minmax(0, 1fr) auto; }
.sc-callout--has-icon.sc-callout--dismissible { grid-template-columns: auto minmax(0, 1fr) auto; }

/* 20px icon centered on the 26px first line of the title (or body). */
.sc-callout__icon { margin-top: 3px; } /* optical: (26 - 20) / 2 */
.sc-callout__main { min-width: 0; }
.sc-callout__title { margin: 0; color: var(--ink); }
.sc-callout__content { color: var(--ink-muted); max-width: var(--measure); }
.sc-callout__content > :first-child { margin-top: 0; }
.sc-callout__content > :last-child { margin-bottom: 0; }
.sc-callout__title + .sc-callout__content { margin-top: var(--space-1); }
.sc-callout__action { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.sc-callout__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-sm); height: var(--control-sm);
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0 0;
  padding: 0; border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.sc-callout__dismiss:hover { color: var(--ink); background: var(--surface); }
.sc-callout__dismiss:focus { outline: none; }
.sc-callout__dismiss:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Tones: -soft ground, icon in the status color, words in ink. */
.sc-callout--neutral { background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--border); }
.sc-callout--neutral .sc-callout__icon { color: var(--ink-muted); }
.sc-callout--info { background: var(--info-soft); }
.sc-callout--info .sc-callout__icon { color: var(--info); }
.sc-callout--success { background: var(--success-soft); }
.sc-callout--success .sc-callout__icon { color: var(--success); }
.sc-callout--warning { background: var(--warning-soft); }
.sc-callout--warning .sc-callout__icon { color: var(--warning); }
.sc-callout--danger { background: var(--danger-soft); }
.sc-callout--danger .sc-callout__icon { color: var(--danger); }

/* Brand: surface-alt, a heading-md title on the lime line (.sc-underline, the logo's own ratios), no icon by default. */
.sc-callout--brand { background: var(--surface-alt); }
.sc-callout--brand .sc-callout__title + .sc-callout__content { margin-top: var(--space-3); }
.sc-callout--brand .sc-callout__icon { color: var(--ink); }
.sc-callout--brand:has(.sc-callout__title) .sc-callout__icon { margin-top: 7px; } /* optical: (34px heading-md line - 20) / 2 */

@media (prefers-reduced-motion: reduce) {
  .sc-callout__dismiss { transition: none; }
}

/* ---- Card ---- */
/* Card: square, bordered before shadowed. A linked card is one link: the title <a> stretches a pseudo-element
   over the whole card, so the hit area is the card and the focus ring draws around it. */
.sc-card {
  /* The stretched link's ring is drawn on the page around the card, so it takes the page's ring, resolved here,
     not the Navy ring of an inverse card's inner theme scope. */
  --sc-card-ring: var(--focus-ring);
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-none);
  color: var(--ink);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.sc-card--outline { background: var(--surface-raised); border: 1px solid var(--border); }
.sc-card--filled { background: var(--surface-alt); }
/* Inverse: the card paints the navy band; its body and footer carry data-theme="dark" (set in Card.jsx), so the
   eyebrow, body, meta and footer hairline take their Navy tokens with no local remaps. */
.sc-card--inverse { background: var(--surface-inverse); color: var(--ink-inverse); }

.sc-card__media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-none); }
.sc-card__media > * { display: block; width: 100%; height: 100%; object-fit: cover; }

.sc-card__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: var(--space-6); }
/* header: a consumer row above the eyebrow and title - a mark or icon on the left, badges on the right. */
.sc-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.sc-card__header:last-child { margin-bottom: 0; }
.sc-card__eyebrow { margin: 0 0 var(--space-3); color: var(--ink-muted); text-transform: uppercase; }
.sc-card__title { margin: 0; color: inherit; text-wrap: balance; overflow-wrap: break-word; }
.sc-card__text { color: var(--ink-muted); max-width: var(--measure); }
.sc-card__text:not(:first-child) { margin-top: var(--space-2); }
.sc-card__title.heading-md + .sc-card__text { margin-top: var(--space-3); }
.sc-card__text > :first-child { margin-top: 0; }
.sc-card__text > :last-child { margin-bottom: 0; }
/* The meta line settles to the bottom so cards in a row align their dates. */
.sc-card__meta { margin: 0; padding-top: var(--space-6); margin-top: auto; color: var(--ink-subtle); font-variant-numeric: lining-nums tabular-nums; }
.sc-card__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); color: var(--ink-muted); }

/* Linked card. The title keeps .sc-underline's geometry; its color is transparent until hover/focus. */
.sc-card__link { color: inherit; }
.sc-card__link.sc-underline { text-decoration-color: transparent; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.sc-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-none); }
.sc-card--outline .sc-card__link::after { inset: -1px; } /* covers the 1px border so the ring sits outside it */
.sc-card__link:focus { outline: none; }
.sc-card__link:focus-visible::after { box-shadow: var(--sc-card-ring); }
.sc-card--link:hover { box-shadow: var(--shadow-sm); }
.sc-card--link:hover .sc-card__link,
.sc-card__link:focus-visible { text-decoration-color: var(--accent); }
/* Interactive bits in the header and footer stay clickable above the stretched link. */
.sc-card--link :is(.sc-card__header, .sc-card__footer) :is(a, button) { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .sc-card, .sc-card__link.sc-underline { transition: none; }
}

/* ---- PortfolioCard ---- */
/* PortfolioCard renders Card (outline): Card owns the ground, the hairline, the padding, the title and the footer
   rule. This file styles only what a holding adds: the mark and status in Card's header slot, the ledger and the
   sentence in its body slot, and the link with the Illustrative note in its footer. */

/* Header: mark top-left, one status badge top-right (Card's header row is flex, space-between). */
.sc-portfolio-card .sc-card__header { margin-bottom: var(--space-6); }
.sc-portfolio-card__mark {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: var(--space-16); height: var(--space-16);
  overflow: hidden;
  border-radius: var(--radius-none);
}
.sc-portfolio-card__mark > img,
.sc-portfolio-card__mark > svg { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Initials stand in for a company mark: Cormorant on surface-alt, no lime line (the line belongs to SOJKA). */
.sc-portfolio-card__mark--initials { background: var(--surface-alt); }
.sc-portfolio-card__initials { color: var(--ink); white-space: nowrap; }
.sc-portfolio-card__status { flex: none; }

/* The ledger: label left in mono, value right, hairlines between rows like a statement. */
.sc-portfolio-card__facts { margin: 0; padding: 0; border-top: 1px solid var(--border); }
.sc-portfolio-card__fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.sc-portfolio-card__label { flex: none; margin: 0; color: var(--ink-muted); }
.sc-portfolio-card__value {
  min-width: 0; margin: 0;
  color: var(--ink); text-align: right; overflow-wrap: break-word;
  font-variant-numeric: lining-nums tabular-nums;
}

.sc-portfolio-card__description { margin: var(--space-4) 0 0; }

/* Footer: the one link left; the Illustrative note opposite it, quiet (caption, ink-subtle). */
.sc-portfolio-card__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.sc-portfolio-card__illustrative { margin-left: auto; color: var(--ink-subtle); }

/* ---- PersonCard ---- */
/* PersonCard. card = Card (outline) with the portrait in its media slot, cropped square, and the links in its
   footer; Card owns the ground, hairline, padding, eyebrow, title and body. row = a hairline list row with its
   own three-column grid, because a list row is not a boxed card. */
.sc-person-card { min-width: 0; }

/* Portrait: square, never rounded. Photos are cropped to fill. The tile is a size container for the initials. */
.sc-person-card__portrait {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-none);
  container-type: inline-size;
}
.sc-person-card__portrait > img,
.sc-person-card__portrait > picture,
.sc-person-card__portrait > picture > img,
.sc-person-card__portrait > svg,
.sc-person-card__portrait > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Initials tile: Cormorant on the navy band with the logo's line under it, like the Monogram's S.
   The glyphs follow the tile (30cqw) so a 64px row tile and a full-width card tile hold the same proportion;
   max(1em, ...) keeps them at or above the parent's heading-md size, the Cormorant floor. */
.sc-person-card__portrait--initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-inverse);
  color: var(--ink-inverse);
}
.sc-person-card__initials { white-space: nowrap; }
.sc-person-card__glyphs {
  display: block;
  font-size: max(1em, 30cqw);
  line-height: 1;
  padding-bottom: 0.22em; /* optical: centers the caps and the line under them, not the font's ascent/descent box */
}

/* ---- card: Card's media slot is 16:9; a portrait is square. ---- */
.sc-person-card--card .sc-card__media { aspect-ratio: 1 / 1; }

.sc-person-card__links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.sc-person-card__link { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.sc-person-card__icon { flex: none; color: var(--ink-muted); }
.sc-person-card--card .sc-person-card__links { flex-direction: column; }

/* ---- row: portrait | role, name, bio | links. Rows stack into a list with shared hairlines.
   The row is a container so the links can move under the bio when it is narrow. ---- */
.sc-person-card--row {
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--space-4) 0;
  color: var(--ink);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sc-person-card--row + .sc-person-card--row { border-top: 0; }
.sc-person-card--row .sc-person-card__portrait { grid-column: 1; grid-row: 1 / span 2; width: var(--space-16); height: var(--space-16); }
.sc-person-card__body { display: flex; flex-direction: column; min-width: 0; grid-column: 2; grid-row: 1; padding-left: var(--space-6); }
.sc-person-card__role { margin-bottom: var(--space-1); }
.sc-person-card__name { margin: 0; color: var(--ink); text-wrap: balance; }
.sc-person-card__bio { margin: var(--space-1) 0 0; max-width: var(--measure); }
.sc-person-card--row .sc-person-card__links { grid-column: 2; grid-row: 2; padding: var(--space-3) 0 0 var(--space-6); }
@container (min-width: 640px) {
  .sc-person-card--row .sc-person-card__links {
    grid-column: 3; grid-row: 1;
    flex-direction: column; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-5) 0 0 var(--space-8); /* the first link sits on the name's line, under the eyebrow */
  }
}

/* ---- Steps ---- */
/* Steps: the sequence drawn on the line. Markers are small squares; the connector between two markers is a
   hairline (border) until the step before it is complete, then the lime line (rule-sm). The line stops a
   space-2 short of each marker, the way it breaks around the J in the logo. */
.sc-steps {
  --sc-steps-marker: var(--space-3);
  --sc-steps-gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
  color: var(--ink);
}
.sc-steps__item { position: relative; min-width: 0; }
.sc-steps__track { position: relative; display: block; }
.sc-steps__marker {
  display: block; box-sizing: border-box;
  width: var(--sc-steps-marker); height: var(--sc-steps-marker);
  background: var(--ink);
}
.sc-steps__connector { position: absolute; display: block; background: var(--border); }
.sc-steps__connector--done { background: var(--accent); }

.sc-steps__content { display: flex; flex-direction: column; min-width: 0; }
.sc-steps__number { display: block; color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums; }
.sc-steps__title { display: block; color: var(--ink); }
.sc-steps__number + .sc-steps__title { margin-top: var(--space-1); }
.sc-steps__description { display: block; margin-top: var(--space-1); color: var(--ink-muted); max-width: var(--measure); }

/* States (only when `current` is set). */
.sc-steps__item--upcoming .sc-steps__marker { background: transparent; border: 1px solid var(--border-strong); }
.sc-steps__item--upcoming .sc-steps__title { color: var(--ink-muted); }
.sc-steps__item--current .sc-steps__marker { background: var(--accent); box-shadow: 0 0 0 1px var(--ink); }
.sc-steps__item--current .sc-steps__number { color: var(--ink); }

/* Horizontal: equal columns; the connector runs from this marker to the next item's marker. */
.sc-steps--horizontal { display: grid; grid-template-columns: repeat(var(--sc-steps-count, 4), minmax(0, 1fr)); }
.sc-steps--horizontal .sc-steps__track { height: var(--sc-steps-marker); margin-bottom: var(--space-5); }
.sc-steps--horizontal .sc-steps__content { padding-right: var(--space-6); }
.sc-steps--horizontal .sc-steps__connector {
  left: calc(var(--sc-steps-marker) + var(--sc-steps-gap)); right: var(--sc-steps-gap);
  top: calc(50% - 1px); height: 1px; /* whole pixels keep the hairline crisp */
}
.sc-steps--horizontal .sc-steps__connector--done { top: calc(50% - var(--rule-sm) / 2); height: var(--rule-sm); }

/* Vertical: marker in a left rail aligned to the number line; the connector runs down to the next marker. */
.sc-steps--vertical { display: flex; flex-direction: column; }
.sc-steps--vertical .sc-steps__item { display: grid; grid-template-columns: var(--sc-steps-marker) minmax(0, 1fr); column-gap: var(--space-5); }
.sc-steps--vertical .sc-steps__item:not(:last-child) .sc-steps__content { padding-bottom: var(--space-8); }
.sc-steps--vertical .sc-steps__track { position: static; }
/* Marker centered on the first line: 16px eyebrow line when numbered, 26px title line otherwise. */
.sc-steps--vertical { --sc-steps-nudge: 2px; } /* optical: (16px eyebrow line - 12px marker) / 2 */
.sc-steps--vertical.sc-steps--unnumbered { --sc-steps-nudge: 7px; } /* optical: (26px title line - 12px marker) / 2 */
.sc-steps--vertical .sc-steps__marker { margin-top: var(--sc-steps-nudge); }
.sc-steps--vertical .sc-steps__connector {
  left: calc(var(--sc-steps-marker) / 2 - 1px); width: 1px; /* whole pixels keep the hairline crisp */
  top: calc(var(--sc-steps-nudge) + var(--sc-steps-marker) + var(--sc-steps-gap));
  bottom: calc(var(--sc-steps-gap) - var(--sc-steps-nudge));
}
.sc-steps--vertical .sc-steps__connector--done { left: calc(var(--sc-steps-marker) / 2 - var(--rule-sm) / 2); width: var(--rule-sm); }

/* ---- Accordion ---- */
/* Accordion: questions between hairlines. The panel animates its height with the grid-rows technique
   (0fr -> 1fr) at duration-base / ease-standard; a closed panel is visibility:hidden once collapsed, so its
   links leave the tab order. */
.sc-accordion { border-top: 1px solid var(--border); color: var(--ink); }
.sc-accordion__item { border-bottom: 1px solid var(--border); }
.sc-accordion__heading { margin: 0; font: inherit; }

/* The button reaches space-3 past the hairlines on each side so the focus ring does not crowd the title;
   text and icon still align with the dividers. */
.sc-accordion__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);
  box-sizing: border-box; width: calc(100% + 2 * var(--space-3));
  margin: 0 calc(-1 * var(--space-3)); padding: var(--space-5) var(--space-3);
  border: 0; border-radius: var(--radius-none); background: transparent;
  color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.sc-accordion__trigger:focus { outline: none; }
.sc-accordion__trigger:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* The title keeps .sc-underline's geometry; the line appears on hover and keyboard focus. */
.sc-accordion__title { min-width: 0; color: var(--ink); text-wrap: pretty; }
.sc-accordion__title.sc-underline { text-decoration-color: transparent; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.sc-accordion__trigger:hover .sc-accordion__title,
.sc-accordion__trigger:focus-visible .sc-accordion__title { text-decoration-color: var(--accent); }

/* 20px icon centered on the 26px title line. */
.sc-accordion__icon { display: inline-flex; flex: none; margin-top: 3px; color: var(--ink-muted); transition: color var(--duration-fast) var(--ease-standard); } /* optical: (26 - 20) / 2 */
.sc-accordion__trigger:hover .sc-accordion__icon,
.sc-accordion__item--open .sc-accordion__icon { color: var(--ink); }

.sc-accordion__panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
}
.sc-accordion__item--open > .sc-accordion__panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--duration-base) var(--ease-standard), visibility 0s linear 0s;
}
.sc-accordion__inner { min-height: 0; overflow: hidden; }
.sc-accordion__content { padding: 0 var(--space-12) var(--space-6) 0; max-width: var(--measure); color: var(--ink-muted); text-wrap: pretty; }
.sc-accordion__content > :first-child { margin-top: 0; }
.sc-accordion__content > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .sc-accordion__panel, .sc-accordion__item--open > .sc-accordion__panel,
  .sc-accordion__title.sc-underline, .sc-accordion__icon { transition: none; }
}

/* ---- DataTable ---- */
/* --sc-data-table-ground is the ground the table sits on (ground prop). Only sticky cells paint it; everything else is transparent,
   so the table reads correctly on surface, surface-alt, surface-raised and inside inverse bands. */
.sc-data-table { --sc-data-table-ground: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr); color: var(--ink); min-width: 0; }
.sc-data-table--on-surface-alt { --sc-data-table-ground: var(--surface-alt); }
.sc-data-table--on-surface-raised { --sc-data-table-ground: var(--surface-raised); }
.sc-data-table__scroll { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
.sc-data-table--sticky .sc-data-table__scroll { overflow-y: auto; }
.sc-data-table__table { width: 100%; border-collapse: collapse; border-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.sc-data-table__caption { margin: 0; text-align: left; color: var(--ink); padding: 0 0 var(--space-4); max-width: var(--measure); }

/* Header: mono uppercase labels in ink-muted over a border-strong rule. */
.sc-data-table__th { text-transform: uppercase; color: var(--ink-muted); text-align: left; vertical-align: top; white-space: nowrap;
  padding: 0 var(--space-4) var(--space-3); border-bottom: 1px solid var(--border-strong); }
.sc-data-table__label { display: block; }
.sc-data-table__unit { display: block; margin-top: 2px; /* optical: unit hangs just under the label */ color: var(--ink-subtle); text-transform: none; letter-spacing: 0; }
/* Collapsed borders do not travel with sticky cells, so the stuck header draws its rule as an inset shadow (not a drop shadow). */
.sc-data-table--sticky .sc-data-table__th { position: sticky; top: 0; z-index: 1; padding-top: var(--space-3); background: var(--sc-data-table-ground); border-bottom-color: transparent; box-shadow: inset 0 -1px 0 var(--border-strong); }

/* Body cells: hairline rules, text in body-sm, figures in data / data-sm. */
.sc-data-table__cell { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; vertical-align: baseline; color: var(--ink); font-weight: 400; }
.sc-data-table__cell { white-space: nowrap; }
.sc-data-table__cell--wrap { white-space: normal; min-width: 16ch; }
.sc-data-table__cell--head { font-weight: 500; }
.sc-data-table__cell--num { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.sc-data-table__fig-pad { padding-right: 1ch; /* the width of the closing parenthesis on negatives */ }
.sc-data-table__th--pad .sc-data-table__label, .sc-data-table__th--pad .sc-data-table__unit { margin-right: 1ch; /* header ends over the digits, not the parenthesis */ }
.sc-data-table__cell--right { text-align: right; }
.sc-data-table__cell--center { text-align: center; }
.sc-data-table__cell--left { text-align: left; }
.sc-data-table__th:first-child, .sc-data-table__cell:first-child { padding-left: 0; }
.sc-data-table__th:last-child, .sc-data-table__cell:last-child { padding-right: 0; }

.sc-data-table--compact .sc-data-table__cell { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.sc-data-table--compact .sc-data-table__th { padding-bottom: var(--space-2); }
.sc-data-table--compact .sc-data-table__th,
.sc-data-table--compact .sc-data-table__cell { padding-left: var(--space-3); padding-right: var(--space-3); }
.sc-data-table--compact .sc-data-table__th:first-child, .sc-data-table--compact .sc-data-table__cell:first-child { padding-left: 0; }
.sc-data-table--compact .sc-data-table__th:last-child, .sc-data-table--compact .sc-data-table__cell:last-child { padding-right: 0; }

/* Overflowing on a narrow screen: the row-header column stays put while the figures scroll under it. */
.sc-data-table--overflow .sc-data-table__cell--head,
.sc-data-table--overflow .sc-data-table__th:first-child { position: sticky; left: 0; z-index: 1; background: var(--sc-data-table-ground); box-shadow: inset -1px 0 0 var(--border); padding-right: var(--space-4); }
.sc-data-table--overflow.sc-data-table--zebra tbody .sc-data-table__row:nth-child(even) .sc-data-table__cell--head { background: var(--surface-stripe); }
.sc-data-table--overflow.sc-data-table--sticky .sc-data-table__th:first-child { z-index: 2; box-shadow: inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border-strong); }

/* Zebra: a surface-stripe band on alternate rows; zebra tables get an inset so text never touches the band edge. */
.sc-data-table--zebra tbody .sc-data-table__row:nth-child(even) { background: var(--surface-stripe); }
.sc-data-table--zebra .sc-data-table__th:first-child, .sc-data-table--zebra .sc-data-table__cell:first-child { padding-left: var(--space-3); }
.sc-data-table--zebra .sc-data-table__th:last-child, .sc-data-table--zebra .sc-data-table__cell:last-child { padding-right: var(--space-3); }

/* Totals: border-strong top rule, semibold, no closing hairline. */
.sc-data-table__row--total .sc-data-table__cell { border-top: 1px solid var(--border-strong); border-bottom: 0; font-weight: 600; }

/* Deltas: sign + value + trend icon, in success / danger. Never color alone. */
.sc-data-table__delta { display: inline-block; white-space: nowrap; }
.sc-data-table__delta-icon { margin-right: var(--space-1); vertical-align: -3px; /* optical: sits the 16px icon on the figure baseline */ }
.sc-data-table__delta--good { color: var(--success); }
.sc-data-table__delta--bad { color: var(--danger); }
.sc-data-table__delta--flat { color: var(--ink-muted); }

.sc-data-table__na { color: var(--ink-subtle); }
.sc-data-table__empty { padding: var(--space-8) 0; color: var(--ink-muted); border-bottom: 1px solid var(--border); }
.sc-data-table--zebra .sc-data-table__empty { padding-left: var(--space-3); }

.sc-data-table__source { margin: var(--space-3) 0 0; color: var(--ink-subtle); max-width: var(--measure); }
.sc-data-table__flag { color: var(--ink-muted); font-weight: 600; }

/* ---- Chart ---- */
.sc-chart { --sc-chart-ground: var(--surface); --sc-chart-wash: var(--surface-alt); display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; color: var(--ink); min-width: 0; }
.sc-chart--on-surface-raised { --sc-chart-ground: var(--surface-raised); --sc-chart-wash: var(--surface-alt); }
.sc-chart--on-surface-alt { --sc-chart-ground: var(--surface-alt); --sc-chart-wash: var(--surface); }

.sc-chart__head { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-4); }
.sc-chart__title { color: var(--ink); }
.sc-chart__subtitle { color: var(--ink-muted); }

/* Legend: mirrors the mark (square for bars, line for lines). Text stays in ink tokens, never the series color. */
.sc-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.sc-chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.sc-chart__key { display: inline-block; flex: none; background: var(--sc-series); }
.sc-chart__key--bar { width: 10px; height: 10px; /* mark geometry: a bar key one step larger than the 8px line marker */ }
.sc-chart__key--line { width: var(--space-4); height: var(--rule-sm); }
.sc-chart__key--emph { background: var(--accent); box-shadow: inset 0 0 0 1px var(--chart-5); }
.sc-chart__key--line.sc-chart__key--emph { height: var(--rule-md); }

.sc-chart__plot { position: relative; width: 100%; overflow: visible; }
.sc-chart__svg { display: block; max-width: 100%; height: auto; overflow: visible; font-variant-numeric: lining-nums tabular-nums; }

/* Chrome: solid hairlines, recessive. */
.sc-chart__grid { stroke: var(--chart-grid); stroke-width: 1px; shape-rendering: crispEdges; }
.sc-chart__axis { stroke: var(--chart-axis); stroke-width: 1px; shape-rendering: crispEdges; }
.sc-chart__tick { fill: var(--ink-muted); }
.sc-chart__cat { fill: var(--ink); }
.sc-chart__value { fill: var(--ink); }
/* A halo in the ground color lifts value and end labels off any gridline they cross. */
.sc-chart__svg text.sc-chart__value, .sc-chart__end { paint-order: stroke; stroke: var(--sc-chart-ground); stroke-width: var(--space-1); stroke-linejoin: round; }
.sc-chart__end .sc-chart__value { stroke: none; }
.sc-chart__value--emph { font-weight: 600; }
.sc-chart__end-name { fill: var(--ink-muted); font-weight: 400; }
.sc-chart__leader { fill: none; stroke: var(--chart-axis); stroke-width: 1px; }

/* Marks: square ends, 2px surface gaps between neighbors, no outlines except the lime edge on Paper. */
.sc-chart__bar-fill { fill: var(--sc-series); shape-rendering: crispEdges; }
.sc-chart__bar--emphasis .sc-chart__bar-fill { fill: var(--accent); }
.sc-chart__bar-edge { fill: none; stroke: var(--chart-5); stroke-width: 1px; shape-rendering: crispEdges; }
.sc-chart__line { fill: none; stroke: var(--sc-series); stroke-width: var(--rule-sm); stroke-linecap: square; stroke-linejoin: miter; stroke-miterlimit: 2; }
/* The emphasis line is the logo's line applied to data: lime, cased in chart-5 so it holds 3:1 on Paper (in Navy both are lime). */
.sc-chart__line--case { stroke: var(--chart-5); stroke-width: var(--rule-md); }
.sc-chart__line--core { stroke: var(--accent); stroke-width: var(--rule-sm); }
.sc-chart__marker--core { fill: var(--accent); }
.sc-chart__marker { fill: var(--sc-series); stroke: var(--sc-chart-ground); stroke-width: var(--rule-sm); paint-order: stroke; }

/* Hover / focus layer. */
.sc-chart__hit { fill: transparent; }
.sc-chart__wash { fill: var(--sc-chart-wash); }
.sc-chart__crosshair { stroke: var(--chart-axis); stroke-width: 1px; shape-rendering: crispEdges; }
.sc-chart__plot:focus-visible { box-shadow: var(--focus-ring); outline: 2px solid transparent; }

.sc-chart__tip { position: absolute; z-index: 2; pointer-events: none; min-width: calc(var(--space-20) * 2); max-width: 100%;
  padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-none); box-shadow: var(--shadow-lg); }
.sc-chart__tip--middle { transform: translateY(-50%); }
.sc-chart__tip--above { transform: translateY(-100%); }
.sc-chart__tip-label { margin: 0 0 var(--space-2); color: var(--ink-muted); text-transform: uppercase; }
.sc-chart__tip-row { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.sc-chart__tip-row + .sc-chart__tip-row { margin-top: var(--space-1); }
.sc-chart__tip-value { color: var(--ink); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; min-width: 7ch; text-align: right; }
.sc-chart__tip-name { color: var(--ink-muted); }

.sc-chart__empty { margin: 0; padding: var(--space-12) 0; color: var(--ink-muted); border-top: 1px solid var(--chart-grid); border-bottom: 1px solid var(--chart-axis); }
.sc-chart__source { margin: var(--space-3) 0 0; color: var(--ink-subtle); max-width: var(--measure); }
.sc-chart__flag { color: var(--ink-muted); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .sc-chart__wash, .sc-chart__crosshair { transition: opacity var(--duration-fast) var(--ease-standard); }
}
@media (forced-colors: active) {
  .sc-chart__bar-fill, .sc-chart__marker { fill: CanvasText; }
  .sc-chart__line { stroke: CanvasText; }
}

/* ---- NavBar ---- */
/* NavBar: the site header. The root is a size container, so the bar collapses by its own width, not the viewport's.
   Gutters follow the page: space-10 at 960+, space-6 below (tablet), space-4 under 720 (the mobile gutter). */
.sc-nav-bar {
  container: sc-nav-bar / inline-size;
  box-sizing: border-box;
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
/* sits above page content and below floating layers (menus, dialogs) */
.sc-nav-bar--sticky { position: sticky; top: 0; z-index: 10; }
.sc-nav-bar--scrolled { box-shadow: var(--shadow-sm); }

/* Inverse: the navy band. The header paints it; the bar and the panel carry data-theme="dark" (NavBar.jsx), so the
   links, the toggle, the CTA (primary resolves to lime) and the focus ring take their Navy values from the tokens. */
.sc-nav-bar--inverse { background: var(--surface-inverse); border-bottom-color: transparent; }

.sc-nav-bar__bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  max-width: calc(var(--container) + 2 * var(--space-10));
  margin: 0 auto;
  padding: var(--space-5) var(--space-10);
}
/* The wordmark: 32px tall at 720px+ (control-sm, level with the CTA and the toggle), 24px (space-6) below, per the web guideline.
   The Logo is fluid, so the link sets its width: height x 6.051, the wordmark's fixed aspect (viewBox 4030 x 666). */
.sc-nav-bar__brand {
  --sc-nav-bar-logo-h: var(--control-sm);
  flex: none;
  display: inline-flex;
  width: calc(var(--sc-nav-bar-logo-h) * 6.051);
  border-radius: var(--radius-xs);
}
.sc-nav-bar__nav { margin-left: auto; min-width: 0; }
.sc-nav-bar__links { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.sc-nav-bar__nav + .sc-nav-bar__cta { margin-left: var(--space-2); }
.sc-nav-bar__brand + .sc-nav-bar__cta { margin-left: auto; }

/* Links: ink-muted at rest; hover and the current page step up to ink and draw the line (.sc-underline, rule-sm at
   this size, skip-ink). The color step is the non-lime cue - the line alone is 1.27:1 on Paper. */
.sc-nav-bar__link,
.sc-nav-bar__menu-link {
  display: inline-flex;
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.sc-nav-bar__link { box-sizing: border-box; padding: var(--space-2) var(--space-1); white-space: nowrap; }
.sc-nav-bar__text { text-decoration-color: transparent; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
:is(.sc-nav-bar__link, .sc-nav-bar__menu-link):hover,
:is(.sc-nav-bar__link, .sc-nav-bar__menu-link)[aria-current="page"] { color: var(--ink); }
:is(.sc-nav-bar__link, .sc-nav-bar__menu-link):hover .sc-nav-bar__text,
:is(.sc-nav-bar__link, .sc-nav-bar__menu-link)[aria-current="page"] .sc-nav-bar__text { text-decoration-color: var(--accent); }

/* The menu toggle and the panel exist only under a 960px container. */
.sc-nav-bar .sc-nav-bar__toggle { display: none; }
.sc-nav-bar__panel { display: none; }

/* Panel: full width under the bar, in flow (it pushes the page down rather than covering it). */
.sc-nav-bar__panel {
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  padding: var(--space-2) var(--space-6) var(--space-6);
}
.sc-nav-bar__menu { margin: 0; padding: 0; list-style: none; }
.sc-nav-bar__menu-link-item + .sc-nav-bar__menu-link-item { border-top: 1px solid var(--border); }
.sc-nav-bar__menu-link { box-sizing: border-box; display: flex; align-items: center; min-height: var(--control-lg); padding: var(--space-3) 0; }
.sc-nav-bar__panel-cta { margin-top: var(--space-6); }
/* 720-960px: a bar-wide button would read as a banner, so the panel CTA keeps its own width there. */
@container sc-nav-bar (width >= 720px) {
  .sc-nav-bar__panel-cta { display: flex; }
  .sc-nav-bar__panel-cta > .sc-button { width: auto; }
}

/* Under a 960px container the links and the CTA go behind the menu button: four or five links, the wordmark and a
   CTA need about 830px of bar, so collapsing any later lets the links run under the CTA. */
@container sc-nav-bar (width < 960px) {
  .sc-nav-bar__bar { padding-inline: var(--space-6); }
  .sc-nav-bar .sc-nav-bar__nav,
  .sc-nav-bar .sc-nav-bar__cta { display: none; }
  .sc-nav-bar .sc-nav-bar__toggle { display: inline-flex; margin-left: auto; }
  .sc-nav-bar--open .sc-nav-bar__panel { display: block; }
}
@container sc-nav-bar (width < 720px) {
  .sc-nav-bar__bar { gap: var(--space-4); padding: var(--space-4); }
  .sc-nav-bar__brand { --sc-nav-bar-logo-h: var(--space-6); }
  .sc-nav-bar__panel { padding-inline: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-nav-bar, .sc-nav-bar__link, .sc-nav-bar__menu-link, .sc-nav-bar__text { transition: none; }
}

/* ---- Hero ---- */
/* Hero: the page opener. Left-aligned type on a 12-column grid inside the container: space-32 above and below at
   960px+ (the hero padding in the layout guideline), space-24 below 960, space-16 under 720.
   No full-height box, no gradient, no image: the headline and the line do the work. The root is a size container. */
.sc-hero {
  container: sc-hero / inline-size;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--ink);
}

/* Inverse: the navy band. The section paints it; the inner wrapper carries data-theme="dark" (Hero.jsx), so the
   title, lead, aside (Stats, deltas included) and Buttons resolve their Navy tokens. No local remaps. */
.sc-hero--inverse { background: var(--surface-inverse); }

.sc-hero__inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  align-items: end;
  max-width: calc(var(--container) + 2 * var(--space-10));
  margin: 0 auto;
  padding: var(--space-32) var(--space-10);
}
.sc-hero__main { grid-column: 1 / span 8; min-width: 0; }

.sc-hero__eyebrow { margin-bottom: var(--space-6); }
/* Short, balanced lines: the headline breaks into two or three lines of roughly equal length (ch of its own size). */
.sc-hero__title { max-width: 15ch; }
.sc-hero--lg .sc-hero__title { max-width: 17ch; }
.sc-hero__lead { margin-top: var(--space-8); }
.sc-hero--lg .sc-hero__lead { margin-top: var(--space-6); }
.sc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-10); }

/* Aside: a ledger column to the right, set off by a hairline and settled to the foot of the headline block. */
.sc-hero__aside {
  grid-column: 9 / -1;
  min-width: 0;
  padding-left: var(--space-8);
  border-left: 1px solid var(--border);
}

@container sc-hero (width < 960px) {
  .sc-hero__inner { padding: var(--space-24) var(--space-6); }
  .sc-hero__main { grid-column: 1 / -1; }
  .sc-hero__aside {
    grid-column: 1 / -1;
    margin-top: var(--space-16);
    padding: var(--space-8) 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
@container sc-hero (width < 720px) {
  .sc-hero__inner { padding: var(--space-16) var(--space-4); }
  .sc-hero__eyebrow { margin-bottom: var(--space-4); }
  .sc-hero__lead { margin-top: var(--space-6); }
  .sc-hero__actions { margin-top: var(--space-8); }
  .sc-hero__aside { margin-top: var(--space-12); }
}

/* ---- Section ---- */
/* Section: the page section shell. A full-bleed band (the tone) holding the container; the root is a size container,
   so split vs stacked and the padding follow the section's own width. Gutters: space-10 at 960+, space-6 below,
   space-4 under 720. Vertical padding (layout guideline): space-24 at 960+, space-20 below, space-16 under 720. */
.sc-section {
  container: sc-section / inline-size;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--ink);
}
.sc-section--alt { background: var(--surface-alt); }

/* Inverse: the navy band. The band paints it; the inner wrapper carries data-theme="dark" (Section.jsx), so Text,
   Stats, hairlines, Links and Buttons in the content slot resolve their Navy tokens. No local remaps. */
.sc-section--inverse { background: var(--surface-inverse); }

.sc-section__inner {
  box-sizing: border-box;
  max-width: calc(var(--container) + 2 * var(--space-10));
  margin: 0 auto;
  padding: var(--space-24) var(--space-10);
}

/* Header: the short lime tick, then the eyebrow, then the heading (Rule and Eyebrow READMEs give the gaps). */
.sc-section__header { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sc-section__rule + .sc-section__eyebrow,
.sc-section__rule + .sc-section__title { margin-top: var(--space-4); }
.sc-section__eyebrow + .sc-section__title { margin-top: var(--space-3); }
/* keeps a long heading to two balanced lines at heading-lg rather than one line across the container */
.sc-section__title { max-width: 24ch; }

.sc-section__body { min-width: 0; }
.sc-section__header + .sc-section__body { margin-top: var(--space-6); }
.sc-section__intro + .sc-section__content { margin-top: var(--space-12); }
.sc-section__header + .sc-section__body > .sc-section__content:first-child { margin-top: var(--space-6); }

/* Split: header in the left four columns, intro and content in the right eight, tops aligned. */
@container sc-section (width >= 960px) {
  .sc-section--split .sc-section__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
    align-items: start;
  }
  .sc-section--split .sc-section__header { grid-column: 1 / span 4; padding-right: var(--space-6); }
  .sc-section--split .sc-section__body { grid-column: 5 / -1; }
  .sc-section--split .sc-section__header + .sc-section__body { margin-top: 0; }
  .sc-section--split .sc-section__header + .sc-section__body > .sc-section__content:first-child { margin-top: 0; }
  .sc-section--split .sc-section__intro + .sc-section__content { margin-top: var(--space-10); }
}
@container sc-section (width < 960px) {
  .sc-section__inner { padding: var(--space-20) var(--space-6); }
}
@container sc-section (width < 720px) {
  .sc-section__inner { padding: var(--space-16) var(--space-4); }
  .sc-section__intro + .sc-section__content { margin-top: var(--space-10); }
}

/* ---- Footer ---- */
/* Footer: the site's closing band. Brand block left, link columns right, a full-width hairline, then the legal line.
   The root is a size container; gutters follow the page (space-10 at 960+, space-6 below, space-4 under 720). */
.sc-footer {
  container: sc-footer / inline-size;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--ink);
}
.sc-footer--default { border-top: 1px solid var(--border); }

/* Inverse (default): the navy band. The footer paints it; the inner wrapper carries data-theme="dark" (Footer.jsx),
   so the contact Link, column links, hairline and focus rings resolve their Navy tokens. No local remaps. */
.sc-footer--inverse { background: var(--surface-inverse); }

.sc-footer__inner {
  box-sizing: border-box;
  max-width: calc(var(--container) + 2 * var(--space-10));
  margin: 0 auto;
  padding: var(--space-20) var(--space-10) var(--space-8);
}
.sc-footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-12);
  align-items: start;
}

/* Brand block: wordmark, descriptor, contact. */
.sc-footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sc-footer__logo { display: inline-flex; border-radius: var(--radius-xs); }
.sc-footer__descriptor { margin-top: var(--space-5); }
.sc-footer__contact { margin-top: var(--space-2); color: var(--ink-muted); }
.sc-footer__contact > * { margin: 0; }

/* Link columns: as many as are given, equal widths, in the right seven columns. */
.sc-footer__nav {
  grid-column: 6 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-6);
  min-width: 0;
}
.sc-footer__col { min-width: 0; }
.sc-footer__col-title { margin-bottom: var(--space-4); }
.sc-footer__links { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }

/* Links: ink-muted at rest; hover steps up to ink and draws the line (.sc-underline: 2px at this size, skip-ink). */
.sc-footer__link {
  display: inline-flex;
  padding: var(--space-1) 0;
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.sc-footer__text { text-decoration-color: transparent; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.sc-footer__link:hover { color: var(--ink); }
.sc-footer__link:hover .sc-footer__text { text-decoration-color: var(--accent); }

/* The hairline and the legal line. */
.sc-footer__rule { margin-top: var(--space-16); }
.sc-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-6); }

@container sc-footer (width < 960px) {
  .sc-footer__inner { padding-inline: var(--space-6); }
  .sc-footer__brand { grid-column: 1 / span 5; }
  .sc-footer__nav { grid-column: 6 / -1; }
}
@container sc-footer (width < 720px) {
  .sc-footer__inner { padding: var(--space-16) var(--space-4) var(--space-8); }
  .sc-footer__brand, .sc-footer__nav { grid-column: 1 / -1; }
  .sc-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; row-gap: var(--space-10); }
  .sc-footer__rule { margin-top: var(--space-12); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-footer__link, .sc-footer__text { transition: none; }
}

/* ---- Slide ---- */
/* A slide is a page, not a panel: a fixed 16:9 frame that pins its own theme (data-theme on the root, so a
   Paper slide stays white and a Navy slide stays navy whatever the UI theme) and sizes everything in --u,
   one pixel of the 1920 x 1080 canvas. --u stays an unresolved calc, so it resolves against this root's
   inline size wherever a descendant uses it: the slide is a faithful scaled page at any width. */
.sc-slide {
  --u: calc(100cqw / 1920);
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-none);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sc-slide *, .sc-slide *::before, .sc-slide *::after { box-sizing: border-box; }

/* The canvas: 120 margins, 12 columns, 48 gutters (columns 96 wide). The spacing and rule tokens are re-based
   on the canvas here, so nested components (Eyebrow, Stat, Quote, Rule) keep their proportions at any size. */
.sc-slide__canvas {
  --space-1: calc(var(--u) * 4);
  --space-2: calc(var(--u) * 8);
  --space-3: calc(var(--u) * 12);
  --space-4: calc(var(--u) * 16);
  --space-5: calc(var(--u) * 20);
  --space-6: calc(var(--u) * 24);
  --space-8: calc(var(--u) * 32);
  --space-10: calc(var(--u) * 40);
  --space-12: calc(var(--u) * 48);
  --space-16: calc(var(--u) * 64);
  --space-20: calc(var(--u) * 80);
  --space-24: calc(var(--u) * 96);
  --space-32: calc(var(--u) * 128);
  --rule-hairline: max(1px, var(--u));
  --rule-sm: max(1px, calc(var(--u) * 2));
  --rule-md: max(1px, calc(var(--u) * 4));
  --rule-lg: max(1px, calc(var(--u) * 6));
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  column-gap: calc(var(--u) * 48);
  padding: calc(var(--u) * 120);
}

/* ---- Type on the canvas (title 120, section 96, heading 64, body 32, eyebrow 22, footer 18). The generated
   type class stays on each element for family, weight and tracking; two classes here set the canvas size. */
.sc-slide .sc-slide__eyebrow { margin: 0 0 calc(var(--u) * 32); font-size: calc(var(--u) * 22); line-height: calc(var(--u) * 28); }
.sc-slide .sc-slide__eyebrow.sc-eyebrow--line { gap: calc(var(--u) * 20); }
.sc-slide .sc-slide__eyebrow .sc-eyebrow__line { width: calc(var(--u) * 48); height: var(--rule-md); }
.sc-slide .sc-slide__title { margin: 0; color: var(--ink); }
.sc-slide--title .sc-slide__title { font-size: calc(var(--u) * 120); line-height: calc(var(--u) * 128); letter-spacing: -0.015em; }
.sc-slide--section .sc-slide__title { font-size: calc(var(--u) * 96); line-height: calc(var(--u) * 104); letter-spacing: -0.01em; }
.sc-slide:is(.sc-slide--content, .sc-slide--stat, .sc-slide--quote, .sc-slide--closing) .sc-slide__title {
  font-size: calc(var(--u) * 64); line-height: calc(var(--u) * 72); letter-spacing: -0.005em;
}
.sc-slide .sc-slide__subtitle { max-width: calc(var(--u) * 1104); margin: calc(var(--u) * 28) 0 0; font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 46); color: var(--ink-muted); }
.sc-slide--title .sc-slide__subtitle { margin-top: calc(var(--u) * 40); font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 56); }

/* ---- title: wordmark top-left, the display title and its line anchored to the foot of the canvas. */
.sc-slide--title .sc-slide__canvas { grid-template-rows: auto minmax(0, 1fr); }
.sc-slide .sc-slide__brand { grid-column: 1 / span 4; grid-row: 1; align-self: start; }
.sc-slide--title .sc-slide__main { grid-column: 1 / span 10; grid-row: 2; align-self: end; }
.sc-slide--title .sc-slide__rule { margin-bottom: calc(var(--u) * 64); }

/* ---- section: a big index numeral over columns 1-4, the section title over 5-12, on one last baseline. */
.sc-slide--section .sc-slide__canvas { align-items: last baseline; }
.sc-slide .sc-slide__index {
  grid-column: 1 / span 4; grid-row: 1; margin: 0;
  font-size: calc(var(--u) * 400); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-muted);
}
.sc-slide--section .sc-slide__main { grid-column: 5 / -1; grid-row: 1; }
.sc-slide--section .sc-slide__index + .sc-slide__main { grid-column: 5 / -1; }
.sc-slide--section .sc-slide__main:first-child { grid-column: 1 / span 10; }
.sc-slide--section .sc-slide__rule { margin-bottom: calc(var(--u) * 48); }

/* ---- content and stat: eyebrow + heading at the top, the matter below. */
.sc-slide:is(.sc-slide--content, .sc-slide--stat) .sc-slide__canvas { grid-template-rows: auto minmax(0, 1fr); }
.sc-slide__head { grid-column: 1 / span 9; grid-row: 1; }
.sc-slide__columns {
  grid-column: 1 / -1; grid-row: 2; align-self: start;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--u) * 48);
  padding-top: calc(var(--u) * 72);
}
.sc-slide__bullets { grid-column: 1 / span 8; display: grid; row-gap: calc(var(--u) * 28); margin: 0; padding: 0; list-style: none; }
.sc-slide__columns--split .sc-slide__bullets { grid-column: 1 / span 7; }
/* Square bullets, 6 x 6, centered on the x-height of the first line (optical: 21 of the 46 line). Ink on Paper
   (lime would vanish on white at this size); a piece of the lime line on Navy, where it reads at 11.2:1. */
.sc-slide__bullet {
  display: grid; grid-template-columns: calc(var(--u) * 6) minmax(0, 1fr); column-gap: calc(var(--u) * 28);
  font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 46); color: var(--ink); text-wrap: pretty;
}
.sc-slide__bullet::before { content: ''; width: max(1px, calc(var(--u) * 6)); height: max(1px, calc(var(--u) * 6)); margin-top: calc(var(--u) * 21); background: var(--ink); }
.sc-slide--navy .sc-slide__bullet::before { background: var(--accent); }
.sc-slide__body { grid-column: 1 / span 8; font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 46); color: var(--ink); text-wrap: pretty; }
.sc-slide__body :is(p, ul, ol) { margin: 0; }
.sc-slide__body > * + * { margin-top: calc(var(--u) * 24); }
.sc-slide__body :is(.lead, .body-lg, .body, .body-sm) { font-size: inherit; line-height: inherit; }
/* Beside bullets the body becomes a side note: columns 9-12, smaller, muted, under a hairline. */
.sc-slide__columns--split .sc-slide__body,
.sc-slide__body--aside {
  grid-column: 9 / -1; padding-top: calc(var(--u) * 24); border-top: var(--rule-hairline) solid var(--border);
  font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 36); color: var(--ink-muted);
}

/* ---- stat: the figure huge at the foot, the line under it at the logo's ratios (Stat line). The figure is 320
   unless it is wider than its eight columns (1104): Slide.jsx measures its width in ems once (--sc-slide-fig-em,
   scale-free) and the size becomes 1104 / ems, so "$128.4M" fits instead of running into the side note. */
.sc-slide .sc-slide__stat { grid-column: 1 / span 8; grid-row: 2; align-self: end; min-width: 0; }
.sc-slide .sc-slide__stat .sc-stat__value {
  font-size: min(calc(var(--u) * 320), calc(var(--u) * 1104 / var(--sc-slide-fig-em, 1)));
  line-height: 0.94; letter-spacing: -0.02em; white-space: nowrap;
}
.sc-slide .sc-slide__stat .sc-stat__label { margin-top: calc(var(--u) * 80); font-size: calc(var(--u) * 32); line-height: calc(var(--u) * 46); }
.sc-slide .sc-slide__stat .sc-stat__caption { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 30); }
.sc-slide .sc-slide__stat .sc-stat__illustrative { display: inline; }
.sc-slide .sc-slide__body--aside { grid-row: 2; align-self: end; }

/* ---- quote: Quote lg on the canvas, left-aligned, vertically centered. */
.sc-slide--quote .sc-slide__main { grid-column: 1 / span 10; align-self: center; }
.sc-slide .sc-slide__quote .sc-quote__line { width: calc(var(--u) * 96); height: var(--rule-lg); margin-bottom: calc(var(--u) * 56); }
.sc-slide .sc-slide__quote .sc-quote__text { font-size: calc(var(--u) * 112); line-height: calc(var(--u) * 124); }
.sc-slide--quote .sc-slide__eyebrow { margin-bottom: calc(var(--u) * 56); }
.sc-slide .sc-slide__quote .sc-quote__caption { gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 56); }
.sc-slide .sc-slide__quote .sc-quote__cite { font-size: calc(var(--u) * 26); line-height: calc(var(--u) * 36); }
.sc-slide .sc-slide__quote .sc-quote__role { font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 34); }

/* ---- closing: the wordmark large, centered on the left, with the contact line under it at one cap height. */
.sc-slide--closing .sc-slide__main { grid-column: 1 / span 10; align-self: center; }
.sc-slide--closing .sc-slide__title { margin-top: calc(var(--u) * 72); }
.sc-slide .sc-slide__contact {
  display: flex; flex-wrap: wrap; column-gap: calc(var(--u) * 56); row-gap: calc(var(--u) * 8); margin: calc(var(--u) * 80) 0 0;
  font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 32); letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ink-muted);
}
.sc-slide__contact-item:first-child { color: var(--ink); }

/* ---- Logo sizes: each wordmark is a fluid Logo (it fills its own box and the height follows), so the box is
   sized in --u. Width = logo height x 4030 / 666 (the wordmark's viewBox): 48 tall on the title slide, 128 on
   the closing slide, 28 in the footer. */
.sc-slide .sc-slide__brand { width: calc(var(--u) * 48 * 4030 / 666); }
.sc-slide .sc-slide__mark { width: calc(var(--u) * 128 * 4030 / 666); }
.sc-slide .sc-slide__footer-logo { flex: none; width: calc(var(--u) * 28 * 4030 / 666); }

/* ---- footer: centered in the bottom margin; wordmark left, note and page number right. */
.sc-slide__footer {
  position: absolute; left: calc(var(--u) * 120); right: calc(var(--u) * 120); bottom: calc(var(--u) * 46);
  display: flex; align-items: center; gap: calc(var(--u) * 48); min-height: calc(var(--u) * 28);
}
.sc-slide .sc-slide__footer-note {
  margin-left: auto; font-size: calc(var(--u) * 18); line-height: calc(var(--u) * 24);
  text-transform: uppercase; color: var(--ink-muted);
}
.sc-slide .sc-slide__footer-page {
  min-width: 2ch; font-size: calc(var(--u) * 18); line-height: calc(var(--u) * 24); text-align: right;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ink);
}

/* ---- DocumentCover ---- */
/* DocumentCover: a faithful, scaled page. The root is a size container with the format's aspect ratio; every
   internal length is written in the format's own units (pt for paper, canvas px for the 1920 slide) and
   converted with --sc-dc-u = 100cqw / page width, so the page scales to its container like a printed sheet.
   Type keeps its classes for family, weight and tracking; only size and leading are restated in page units.
   Its tone sets data-theme on the page, so the semantic tokens inside resolve to Paper or Navy. */
.sc-document-cover {
  /* Page metrics, unitless, in page units. Letter: 612 x 792 pt; margins 1in sides, 0.75in top and foot. */
  --sc-dc-w: 612;
  --sc-dc-mx: 72; --sc-dc-mt: 54; --sc-dc-mb: 54;
  --sc-dc-logo: 126;                                /* 1.75in, the documents guideline */
  --sc-dc-kind: 9; --sc-dc-kind-lh: 12; --sc-dc-kind-gap: 12;
  --sc-dc-title: 54; --sc-dc-title-lh: 57; --sc-dc-title-max: 468;   /* display-xl in print, across the live width */
  --sc-dc-sub: 15; --sc-dc-sub-lh: 24; --sc-dc-sub-gap: 18; --sc-dc-sub-max: 400;   /* lead in print */
  --sc-dc-data: 9; --sc-dc-data-lh: 13.5;            /* data-sm in print */
  --sc-dc-air: 108;                                 /* title block to the metadata rule */
  --sc-dc-foot-pad: 12; --sc-dc-field-gap: 36;
  --sc-dc-u: calc(100cqw / var(--sc-dc-w));         /* resolved in descendants, against this container */

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 612 / 792;
  container-type: inline-size;
  overflow: hidden;
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-none);
  outline: 1px solid var(--border); /* hairline edge so the sheet reads on a ground of its own color */
  outline-offset: -1px;
}
/* A navy sheet inside a Navy scope (the Navy page theme, or a navy band) sits on the same navy: the 1px border
   (navy-700, 1.5:1) all but vanishes, so the edge steps up to border-strong (navy-400, 5.2:1 on SOJKA Navy).
   On a Paper ground the sheet needs no keyline and keeps the quiet one. */
[data-theme="dark"] .sc-document-cover--navy { outline-color: var(--border-strong); }
.sc-document-cover--a4 { --sc-dc-w: 595.28; aspect-ratio: 210 / 297; }
/* Slide: the 1920 x 1080 deck canvas (128px sides, 96px top, footer inside the bottom margin; logo height 64). */
.sc-document-cover--slide {
  --sc-dc-w: 1920;
  --sc-dc-mx: 128; --sc-dc-mt: 96; --sc-dc-mb: 56;
  --sc-dc-logo: 387;
  --sc-dc-kind: 20; --sc-dc-kind-lh: 28; --sc-dc-kind-gap: 20;
  --sc-dc-title: 120; --sc-dc-title-lh: 120; --sc-dc-title-max: 1300;
  --sc-dc-sub: 36; --sc-dc-sub-lh: 52; --sc-dc-sub-gap: 28; --sc-dc-sub-max: 1080;
  --sc-dc-data: 20; --sc-dc-data-lh: 28;
  --sc-dc-air: 96;
  --sc-dc-foot-pad: 20; --sc-dc-field-gap: 64;
  aspect-ratio: 16 / 9;
}

.sc-document-cover__page {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: calc(var(--sc-dc-mt) * var(--sc-dc-u)) calc(var(--sc-dc-mx) * var(--sc-dc-u)) calc(var(--sc-dc-mb) * var(--sc-dc-u));
}

/* Head: the wordmark top-left on the margins, the classification opposite it on the logo's baseline. */
.sc-document-cover__head { grid-row: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--sc-dc-u)); }
/* The wrapper is sized in page units; Logo fluid fills it (the SVG is never targeted from here). */
.sc-document-cover__logo { flex: none; width: calc(var(--sc-dc-logo) * var(--sc-dc-u)); }
.sc-document-cover__classification { margin: 0; color: var(--ink-muted); text-align: right; }

/* Main: low on the page, a fixed distance above the metadata rule. */
.sc-document-cover__main { grid-row: 3; margin-bottom: calc(var(--sc-dc-air) * var(--sc-dc-u)); }
.sc-document-cover .sc-document-cover__kind {
  font-size: calc(var(--sc-dc-kind) * var(--sc-dc-u));
  line-height: calc(var(--sc-dc-kind-lh) * var(--sc-dc-u));
  margin-bottom: calc(var(--sc-dc-kind-gap) * var(--sc-dc-u));
}
.sc-document-cover .sc-document-cover__title {
  font-size: calc(var(--sc-dc-title) * var(--sc-dc-u));
  line-height: calc(var(--sc-dc-title-lh) * var(--sc-dc-u));
  max-width: calc(var(--sc-dc-title-max) * var(--sc-dc-u));
}
.sc-document-cover .sc-document-cover__subtitle {
  font-size: calc(var(--sc-dc-sub) * var(--sc-dc-u));
  line-height: calc(var(--sc-dc-sub-lh) * var(--sc-dc-u));
  margin-top: calc(var(--sc-dc-sub-gap) * var(--sc-dc-u));
  max-width: calc(var(--sc-dc-sub-max) * var(--sc-dc-u));
}

/* Foot: a hairline, then the metadata in data-sm; the reference sits bottom-right. */
.sc-document-cover__foot {
  grid-row: 4;
  display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--sc-dc-field-gap) * var(--sc-dc-u));
  padding-top: calc(var(--sc-dc-foot-pad) * var(--sc-dc-u));
  border-top: 1px solid var(--border);
}
.sc-document-cover__meta { display: flex; gap: calc(var(--sc-dc-field-gap) * var(--sc-dc-u)); margin: 0; min-width: 0; }
.sc-document-cover__meta--ref { margin-left: auto; text-align: right; }
.sc-document-cover__field { min-width: 0; }
.sc-document-cover .sc-document-cover__label,
.sc-document-cover .sc-document-cover__value,
.sc-document-cover .sc-document-cover__classification {
  font-size: calc(var(--sc-dc-data) * var(--sc-dc-u));
  line-height: calc(var(--sc-dc-data-lh) * var(--sc-dc-u));
  font-variant-numeric: lining-nums tabular-nums;
}
.sc-document-cover__label { margin: 0; color: var(--ink-muted); }
.sc-document-cover__value { margin: 0; color: var(--ink); }

/* ---- Letterhead ---- */
/* Letterhead: a US Letter sheet (8.5 x 11 in) scaled to its container. Every length on the sheet is in page
   units from container-query width - --sc-lh-in is one inch of the page, --sc-lh-pt one point (1/612 of the
   width) - so the proportions are exact at any size. A letter is paper in either theme: the sheet pins
   data-theme="light", so the semantic tokens below (surface, ink, ink-muted, accent) always resolve to Paper. */
.sc-letterhead {
  /* The sheet's edge against the page around it, resolved here in the surrounding theme. */
  --sc-lh-edge: var(--border);
  container-type: inline-size;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.sc-letterhead__page {
  --sc-lh-in: calc(100cqw / 8.5);
  --sc-lh-pt: calc(100cqw / 612);
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 8.5 / 11;
  overflow: hidden;
  border-radius: var(--radius-none);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--sc-lh-edge);
  font-family: var(--font-text);
  font-size: calc(11 * var(--sc-lh-pt));
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
/* Zero the UA margins once; every gap on the sheet is set below in page units. */
.sc-letterhead__page :where(p, address) { margin: 0; font-style: normal; }

/* Header, first page: the wordmark 1.75 in wide (Logo fluid fills this box), 0.75 in from the top, on the 1 in
   left margin so the logo, the date and the letter share one left edge. */
.sc-letterhead__logo { position: absolute; top: calc(0.75 * var(--sc-lh-in)); left: var(--sc-lh-in); width: calc(1.75 * var(--sc-lh-in)); }

/* Sender block: two short columns hung from the logo's cap line, ending on the right margin.
   The 3.5pt lift is an optical nudge: it puts the first line's cap height on the logo's cap height. */
.sc-letterhead__sender {
  position: absolute;
  top: calc(0.75 * var(--sc-lh-in) - 3.5 * var(--sc-lh-pt));
  right: var(--sc-lh-in);
  display: flex;
  gap: calc(0.3 * var(--sc-lh-in));
  color: var(--ink-muted);
}
.sc-letterhead__sender.caption { font-size: calc(9 * var(--sc-lh-pt)); line-height: 1.5; }
.sc-letterhead__col { display: flex; flex-direction: column; }
.sc-letterhead__contacts { font-variant-numeric: lining-nums tabular-nums; }
.sc-letterhead__name { color: var(--ink); font-weight: 600; }

/* Header, continuation pages: the monogram (Monogram size="100%" fills this box) sized and placed so its S sits
   exactly where the wordmark's S sits on page one (same cap height, same cap line, same left edge). The S is
   inset 171/512 from the tile's left and 69/512 from its top; tile-white keeps the S navy and the line lime. */
.sc-letterhead__mark {
  --sc-lh-tile: calc(1.75 * var(--sc-lh-in) * 468 / 4030 * 512 / 286);
  position: absolute;
  top: calc(0.75 * var(--sc-lh-in) + 1.75 * var(--sc-lh-in) * 16 / 4030 - var(--sc-lh-tile) * 69 / 512);
  left: calc(var(--sc-lh-in) - var(--sc-lh-tile) * 171 / 512);
  width: var(--sc-lh-tile);
}
.sc-letterhead__folio {
  position: absolute;
  top: calc(0.75 * var(--sc-lh-in) - 3 * var(--sc-lh-pt));
  right: var(--sc-lh-in);
  color: var(--ink-muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.sc-letterhead__folio.data-sm { font-size: calc(9 * var(--sc-lh-pt)); line-height: 1.5; }

/* The letter: Libre Franklin 11 pt on 16.5 pt (1.5 leading), block paragraphs one blank line apart.
   Starts 2 in from the top (1.5 in on continuation pages) and stops 1.25 in from the foot. */
.sc-letterhead__body {
  position: absolute;
  top: calc(2 * var(--sc-lh-in));
  left: var(--sc-lh-in);
  right: var(--sc-lh-in);
  bottom: calc(1.25 * var(--sc-lh-in));
  overflow: hidden;
  overflow-wrap: break-word;
}
.sc-letterhead--continuation .sc-letterhead__body { top: calc(1.5 * var(--sc-lh-in)); }
.sc-letterhead__body > * + *, .sc-letterhead__text > * + * { margin-top: 1.5em; }
.sc-letterhead__text > * { text-wrap: pretty; }
/* Text and other type-classed children take the page scale instead of their screen px size. */
.sc-letterhead__text :is(.body, .body-lg, .body-sm, .lead) { font-size: inherit; line-height: inherit; }
.sc-letterhead__date { color: var(--ink-muted); }
.sc-letterhead__recipient > span { display: block; }
.sc-letterhead__closing > p + p { margin-top: 3em; } /* room for a wet signature: two blank lines */
.sc-letterhead__signer { display: flex; flex-direction: column; }
.sc-letterhead__signer > span + span { color: var(--ink-muted); }

/* Foot: the lime line once, across the 6.5 in measure (Rule weight sm: rule-sm, 2px, which is 1.5 pt at actual
   size), with the company name and web address below it. The caption row ends 0.75 in from the bottom,
   mirroring the logo's 0.75 in. */
.sc-letterhead__foot { position: absolute; left: var(--sc-lh-in); right: var(--sc-lh-in); bottom: calc(0.75 * var(--sc-lh-in)); }
.sc-letterhead__foot-row {
  display: flex;
  justify-content: space-between;
  gap: calc(0.25 * var(--sc-lh-in));
  padding-top: calc(7 * var(--sc-lh-pt));
  color: var(--ink-muted);
}
.sc-letterhead__foot-row.caption { font-size: calc(9 * var(--sc-lh-pt)); line-height: 1.5; }
.sc-letterhead__company { color: var(--ink); font-weight: 600; }

@media print {
  .sc-letterhead__page { box-shadow: none; }
}

/* ---- BusinessCard ---- */
/* BusinessCard: a 3.5 x 2 in card shown as a physical object, scaled to its container. Lengths on the card are
   in card units from container-query width (--sc-bc-in = one inch, --sc-bc-pt = one point), so it prints and
   previews at the same proportions. The card is brand artwork: each face pins data-theme (front and paper back
   light, navy back dark), so the semantic tokens below resolve to the printed colors in either page theme. */
.sc-business-card {
  /* The card's edge against the page around it, resolved here in the surrounding theme. */
  --sc-bc-edge: var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-6);
  width: 100%;
  min-width: 0;
}
/* Each face wants 336px, the card at actual size (3.5 in at 96 dpi), where the name is 28px, the Cormorant floor:
   two faces sit side by side from about 700px and stack below that rather than shrink. */
.sc-business-card__side { container-type: inline-size; flex: 1 1 336px; min-width: 0; }
.sc-business-card--guides .sc-business-card__side { flex-basis: 360px; } /* the 3.75 in bleed size of the same card */

.sc-business-card__face {
  --sc-bc-in: calc(100cqw / 3.5);
  --sc-bc-pt: calc(100cqw / 252);
  --sc-bc-bleed: 0px;
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 3.5 / 2;
  overflow: hidden;
  border-radius: var(--radius-none);
  box-shadow: 0 0 0 1px var(--sc-bc-edge);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}

/* The trim box. Its 0.25 in padding is the live area (3 x 1.5 in); nothing sits outside it. */
.sc-business-card__trim {
  position: absolute;
  inset: var(--sc-bc-bleed);
  box-sizing: border-box;
  display: flex;
  padding: calc(0.25 * var(--sc-bc-in));
}

/* Front: the primary wordmark alone, 1.75 in wide (half the card; Logo fluid fills this box), on the left of the
   live area and centered top to bottom. Its clear space (one cap height, 0.2 in) sits inside the 0.25 in margin. */
.sc-business-card__face--front .sc-business-card__trim { align-items: center; }
.sc-business-card__logo { flex: none; width: calc(1.75 * var(--sc-bc-in)); }

/* Back: the person top-left, the contact lines bottom-left. */
.sc-business-card__face--back .sc-business-card__trim { flex-direction: column; justify-content: space-between; }
.sc-business-card__who { display: flex; flex-direction: column; align-items: flex-start; }
/* Name: Cormorant Garamond 600 at 21 pt - the print size of heading-md, the serif floor (28px at actual size) -
   over the line at the logo's ratios (.sc-underline); the j of Sojka breaks it as the J breaks the logo's line. */
.sc-business-card .sc-business-card__name {
  margin: 0;
  color: inherit;
  font-size: calc(21 * var(--sc-bc-pt));
  line-height: 1.15;
}
/* Title: the Eyebrow (IBM Plex Mono 500, 0.14em, capitals, ink-muted) at 7 pt, the print minimum. */
.sc-business-card .sc-business-card__title {
  margin-top: calc(7 * var(--sc-bc-pt));
  font-size: calc(7 * var(--sc-bc-pt));
  line-height: 1.4;
}
/* Contacts: Libre Franklin 400 at 7.5 pt, one per line, tabular figures for the phone number. */
.sc-business-card__contacts {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: calc(7.5 * var(--sc-bc-pt));
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.sc-business-card__phone { font-variant-numeric: lining-nums tabular-nums; }

/* Print guides: the face grows to the 3.75 x 2.25 in bleed size. The bleed band outside the trim takes the face's
   border tint; the trim (solid hairline) and the 0.125 in safe margin (dashed) are drawn in border-strong
   (navy-400 on navy, 5.2:1; navy-500 on white, 4.3:1), all resolved in the face's own theme. */
.sc-business-card--guides .sc-business-card__face {
  --sc-bc-in: calc(100cqw / 3.75);
  --sc-bc-pt: calc(100cqw / 270);
  --sc-bc-bleed: calc(0.125 * var(--sc-bc-in));
  aspect-ratio: 3.75 / 2.25;
}
.sc-business-card__guide { position: absolute; box-sizing: border-box; pointer-events: none; }
.sc-business-card__guide--trim {
  inset: var(--sc-bc-bleed);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 var(--sc-bc-bleed) var(--border);
}
.sc-business-card__guide--safe { inset: calc(var(--sc-bc-bleed) + 0.125 * var(--sc-bc-in)); border: 1px dashed var(--border-strong); }

/* ---- EmailSignature ---- */
/* EmailSignature is styled entirely inline (see the note at the top of EmailSignature.jsx): mail clients drop
   stylesheets, so nothing visual may live here. This sheet only restores the system focus ring for keyboard
   users when the signature is shown inside a SOJKA & Co. page; it never travels with the copied HTML. */
.sc-email-signature a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* ---- SocialPost ---- */
/* A social post is an exported image: fixed brand colors (data-theme on the root pins Paper or Navy whatever the
   UI theme; lime is set below), a fixed aspect per format, and every size in --u, one pixel of the format's canvas
   (1200 wide for landscape, 1080 for square and portrait). --u stays an unresolved calc, so it resolves against
   this root's inline size wherever a descendant uses it: the post is a faithful scaled image at any width. */
.sc-social-post {
  --sc-post-w: 1080;
  --u: calc(100cqw / var(--sc-post-w));
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-none);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sc-social-post *, .sc-social-post *::before, .sc-social-post *::after { box-sizing: border-box; }

/* Per format: canvas width, margin and the sizes (in canvas px) of each template's lead element. --sc-post-fig-max
   is the widest the stat figure may run: the measure (canvas less margins), or in landscape what the label beside
   it leaves (1072 - 56 gap - 376 label). */
.sc-social-post--square {
  --sc-post-w: 1080; --sc-post-m: 80; --sc-post-logo: 40;
  --sc-post-statement: 96; --sc-post-figure: 320; --sc-post-fig-max: 920; --sc-post-headline: 84; --sc-post-quote: 92;
  aspect-ratio: 1 / 1;
}
.sc-social-post--portrait {
  --sc-post-w: 1080; --sc-post-m: 88; --sc-post-logo: 44;
  --sc-post-statement: 112; --sc-post-figure: 360; --sc-post-fig-max: 904; --sc-post-headline: 96; --sc-post-quote: 104;
  aspect-ratio: 1080 / 1350;
}
.sc-social-post--landscape {
  --sc-post-w: 1200; --sc-post-m: 64; --sc-post-logo: 34;
  --sc-post-statement: 76; --sc-post-figure: 240; --sc-post-fig-max: 640; --sc-post-headline: 64; --sc-post-quote: 64;
  aspect-ratio: 1200 / 627;
}

/* Lime ground (stat template only): the accent fill with on-accent navy for the figure and words, 11.2:1. There is
   no semantic token for secondary text on lime, so it is the fixed navy-700 (7.4:1). Two classes so the remap beats
   the [data-theme] token block on this same element whatever order the sheets load in. The mono wordmark follows
   currentColor, which is this ink. */
.sc-social-post.sc-social-post--lime {
  --surface: var(--accent);
  --ink: var(--on-accent);
  --ink-muted: var(--navy-700);
  --ink-subtle: var(--navy-700);
}

/* The canvas: the format's margin all round; eyebrow at the top, the matter anchored low, the wordmark at the foot.
   Spacing and rule tokens are re-based on the canvas so nested components keep their proportions. */
.sc-social-post__canvas {
  --space-1: calc(var(--u) * 4);
  --space-2: calc(var(--u) * 8);
  --space-3: calc(var(--u) * 12);
  --space-4: calc(var(--u) * 16);
  --space-5: calc(var(--u) * 20);
  --space-6: calc(var(--u) * 24);
  --space-8: calc(var(--u) * 32);
  --space-10: calc(var(--u) * 40);
  --space-12: calc(var(--u) * 48);
  --space-16: calc(var(--u) * 64);
  --space-20: calc(var(--u) * 80);
  --space-24: calc(var(--u) * 96);
  --space-32: calc(var(--u) * 128);
  --rule-hairline: max(1px, var(--u));
  --rule-sm: max(1px, calc(var(--u) * 2));
  --rule-md: max(1px, calc(var(--u) * 4));
  --rule-lg: max(1px, calc(var(--u) * 6));
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * var(--sc-post-m));
}
.sc-social-post__main { margin-top: auto; min-width: 0; }

/* ---- eyebrow: IBM Plex Mono 20 on the canvas, tracked. No tick: the line belongs to the headline or figure. */
.sc-social-post .sc-social-post__eyebrow { font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 28); }

/* ---- statement: one sentence in display type, the line under its key words. */
.sc-social-post .sc-social-post__statement {
  max-width: calc(var(--u) * 880);
  font-size: calc(var(--u) * var(--sc-post-statement)); line-height: 1.04; letter-spacing: -0.015em;
}
.sc-social-post--landscape .sc-social-post__statement { max-width: calc(var(--u) * 960); }

/* ---- stat: the figure huge, its line at the logo's ratios (Stat line), label and source under it. The figure keeps
   the format's size unless it is wider than --sc-post-fig-max: SocialPost.jsx measures its width in ems once
   (--sc-post-fig-em, scale-free) and the size becomes fig-max / ems, so "$12.4M" fits the portrait measure. */
.sc-social-post .sc-social-post__stat .sc-stat__value {
  font-size: min(calc(var(--u) * var(--sc-post-figure)), calc(var(--u) * var(--sc-post-fig-max) / var(--sc-post-fig-em, 1)));
  line-height: 0.94; letter-spacing: -0.02em; white-space: nowrap;
}
.sc-social-post .sc-social-post__stat .sc-stat__label { max-width: calc(var(--u) * 760); margin-top: calc(var(--u) * 64); font-size: calc(var(--u) * 34); line-height: calc(var(--u) * 46); }
.sc-social-post .sc-social-post__stat .sc-stat__caption { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 30); }
.sc-social-post .sc-social-post__stat .sc-stat__illustrative { display: inline; }
.sc-social-post--lime .sc-social-post__stat .sc-stat__label { margin-top: calc(var(--u) * 40); }
/* Landscape is too short to stack: figure on the left, label and source beside it, bottom-aligned. */
.sc-social-post--landscape .sc-social-post__stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: calc(var(--u) * 56); align-items: end;
}
.sc-social-post--landscape .sc-social-post__stat .sc-stat__value { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
.sc-social-post--landscape .sc-social-post__stat .sc-stat__label { grid-column: 2; grid-row: 1; margin-top: 0; font-size: calc(var(--u) * 30); line-height: calc(var(--u) * 42); }
.sc-social-post--landscape .sc-social-post__stat .sc-stat__caption { grid-column: 2; grid-row: 2; }

/* ---- announcement: headline with the line under the news, a line of context, the facts in mono. */
.sc-social-post .sc-social-post__headline {
  max-width: calc(var(--u) * 900);
  font-size: calc(var(--u) * var(--sc-post-headline)); line-height: 1.08; letter-spacing: -0.01em;
}
.sc-social-post .sc-social-post__body { max-width: calc(var(--u) * 820); margin-top: calc(var(--u) * 32); font-size: calc(var(--u) * 30); line-height: calc(var(--u) * 44); }
.sc-social-post__meta {
  display: flex; flex-wrap: wrap; column-gap: calc(var(--u) * 16); margin: calc(var(--u) * 40) 0 0;
  font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 28); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums;
}
.sc-social-post__meta-item + .sc-social-post__meta-item::before { content: '/'; margin-right: calc(var(--u) * 16); }
.sc-social-post--landscape .sc-social-post__body { margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 26); line-height: calc(var(--u) * 38); }
.sc-social-post--landscape .sc-social-post__meta { margin-top: calc(var(--u) * 28); font-size: calc(var(--u) * 18); }

/* ---- quote: Quote lg in Cormorant italic, the line above, the attribution under it. */
.sc-social-post .sc-social-post__quote .sc-quote__line { width: calc(var(--u) * 80); height: var(--rule-lg); margin-bottom: calc(var(--u) * 48); }
.sc-social-post .sc-social-post__quote .sc-quote__text { font-size: calc(var(--u) * var(--sc-post-quote)); line-height: 1.12; }
.sc-social-post .sc-social-post__quote .sc-quote__caption { gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 44); }
.sc-social-post .sc-social-post__quote .sc-quote__cite { font-size: calc(var(--u) * 26); line-height: calc(var(--u) * 36); }
.sc-social-post .sc-social-post__quote .sc-quote__role { font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 34); }
.sc-social-post--landscape .sc-social-post__quote .sc-quote__line { margin-bottom: calc(var(--u) * 36); }
.sc-social-post--landscape .sc-social-post__quote .sc-quote__caption { margin-top: calc(var(--u) * 32); }

/* ---- foot: the wordmark bottom-left (never with the Monogram), an optional mono note bottom-right. The wordmark is a
   fluid Logo sized by its box: width = logo height x 4030 / 666 (the wordmark's viewBox). */
.sc-social-post__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 32);
  margin-top: calc(var(--u) * 72);
}
.sc-social-post--landscape .sc-social-post__foot { margin-top: calc(var(--u) * 48); }
.sc-social-post .sc-social-post__logo { flex: none; width: calc(var(--u) * var(--sc-post-logo) * 4030 / 666); }
.sc-social-post .sc-social-post__footnote {
  font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 28); letter-spacing: 0.04em;
  color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums;
}

/* ---- src/styles/00-site.css ---- */
/* Site layer: only what the brand components do not already provide. Tokens only (see brand/guidelines). */

/* Sticky offsets. --site-nav-h is the sticky NavBar's height, composed from the brand NavBar's own values: space-5 above
   and below its bar (space-4 under 720px), the row inside it (the links: a 20px label line, which is space-5, plus
   space-2 above and below, at 960px+; the 32px control-sm toggle and wordmark below that) and its 1px foot. That is
   77px at 960px+, 73px at 720 to 959px and 65px under 720px. site.js measures the bar and corrects the value where a
   classic scrollbar narrows the bar's container below the viewport breakpoint.
   --site-sticky-top is where sticky content may start: under the NavBar, and under the "On this page" strip
   (SectionIndex, control-md plus its two hairlines) on the pages that have one. Blocks and pages read both. */
:root {
  --site-nav-h: calc(2 * var(--space-4) + var(--control-sm) + var(--rule-hairline));
  --site-sticky-top: var(--site-nav-h);
}
@media (min-width: 720px) {
  :root { --site-nav-h: calc(2 * var(--space-5) + var(--control-sm) + var(--rule-hairline)); }
}
@media (min-width: 960px) {
  :root { --site-nav-h: calc(2 * var(--space-5) + 2 * var(--space-2) + var(--space-5) + var(--rule-hairline)); }
}
:root:has(.site-section-index) { --site-sticky-top: calc(var(--site-nav-h) + var(--control-md) + 2 * var(--rule-hairline)); }
html { scroll-padding-top: calc(var(--site-sticky-top) + var(--space-6)); }
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; outline: none; }

/* Skip link: hidden until focused, then a navy tab at the top left. */
.site-skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
  padding: var(--space-2) var(--space-4); background: var(--action); color: var(--on-action);
  text-decoration: none; transform: translateY(-200%);
}
.site-skip:focus-visible { transform: none; }

/* The brand type classes are fixed sizes; on narrow screens the display styles and heading-xl step down one level
   (the brand's Hero and Section already do this inside their own containers). heading-xl takes the heading-lg values,
   so the closing band title and the home statement keep balanced lines on phones. */
@media (max-width: 719px) {
  .site-main .display-xl { font-size: 56px; line-height: 60px; }
  .site-main .display-lg { font-size: 44px; line-height: 50px; }
  .site-main .heading-xl { font-size: 36px; line-height: 42px; }
}

/* Line endings (brand 04-typography: text-wrap pretty on paragraphs, balance on headings), so no paragraph, list item
   or option label ends on one word. The brand sets them on its Heading and Text; this covers the plain paragraphs,
   list items and checkbox labels the blocks and pages write, and balances the accordion's questions (headings in all
   but tag; the brand sets them pretty). :where keeps the paragraph rule at one class of weight, so any component rule
   that sets its own text-wrap (a balanced quote or statement line) still wins. */
.site-main :where(p, li, .sc-checkbox__label) { text-wrap: pretty; }
.site-main .sc-accordion__title { text-wrap: balance; }

/* Figures in display and heading type are lining and tabular (brand typography), whatever component sets them. */
.site-main :is(.display-2xl, .display-xl, .display-lg, .heading-xl, .heading-lg, .heading-md, .figure) { font-variant-numeric: lining-nums tabular-nums; }

/* Footer below 984px: the brand block spans the row and the three link columns sit under it, so no link label wraps
   and the descriptor holds one line (the brand's own layout from 720px gives each column about 120px). 984px is where
   the brand's desktop columns fit "Ingredient development" and the descriptor again. */
@container sc-footer (720px <= width < 984px) {
  .sc-footer__brand, .sc-footer__nav { grid-column: 1 / -1; }
}

/* Section-level current link (service pages under Services, aria-current="true"): the same ink and lime line as the
   brand's aria-current="page". */
:is(.sc-nav-bar__link, .sc-nav-bar__menu-link)[aria-current="true"] { color: var(--ink); }
:is(.sc-nav-bar__link, .sc-nav-bar__menu-link)[aria-current="true"] .sc-nav-bar__text { text-decoration-color: var(--accent); }

/* Sticky split headers: in every layout="split" Section the four-column header stays beside its long content while the
   section scrolls, space-8 under the sticky header. Layout only (brand flag D05), and only where the split exists. */
@container sc-section (width >= 960px) {
  .site-main .sc-section--split .sc-section__header {
    position: sticky;
    top: calc(var(--site-sticky-top) + var(--space-8));
    align-self: start;
  }
}

/* Press states (brand 03-color and 05-layout): buttons, linked cards and linked rows settle 1px when pressed, in
   duration-fast; a lime fill presses to lime-600 (the primary Button on navy: hero, closing band, NavBar Apply).
   The brand's own color and shadow transitions are kept. Under reduced motion the color change stays and the 1px
   move is dropped. Focus rings are unchanged. */
.sc-button {
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.sc-card--link { transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.site-link-row { transition: transform var(--duration-fast) var(--ease-standard); }
@media (prefers-reduced-motion: no-preference) {
  :is(.sc-button:not(.sc-button--inert, .sc-button--loading, [aria-disabled="true"], :disabled), .sc-card--link, .site-link-row):active {
    transform: translateY(1px);
  }
}
.sc-card--link:active { box-shadow: none; }
[data-theme="dark"] .sc-button--primary:not(.sc-button--inert, .sc-button--loading, [aria-disabled="true"], :disabled):active,
.sc-button--accent:not(.sc-button--inert, .sc-button--loading, [aria-disabled="true"], :disabled):active { background: var(--lime-600); }
@media (prefers-reduced-motion: reduce) {
  .sc-button, .sc-card--link, .site-link-row { transition: none; }
}

/* The open phone and tablet menu is a floating layer over the page: a hairline foot and shadow-lg (the brand's
   floating-layer shadow), so the panel never runs into a navy hero below it. */
.sc-nav-bar--open .sc-nav-bar__panel { border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); }

/* ---- src/styles/05-themes.css ---- */
/* Site treatments (site.theme, set on <html data-site-theme>). Each re-points brand semantic tokens to other brand
   palette steps; no new colors. 'paper' is the brand default and needs no rules. */

/* Deeper alternate bands, so default and alt sections separate clearly (navy-100 instead of navy-50). */
html[data-site-theme="navy-hero"][data-theme="light"],
html[data-site-theme="tinted"][data-theme="light"] { --surface-alt: var(--navy-100); --surface-stripe: var(--navy-200); }

/* Tinted: the page ground is a cool navy tint and cards stay white, so every card and panel lifts off the page. */
html[data-site-theme="tinted"][data-theme="light"] { --surface: var(--navy-50); --surface-raised: var(--white); }

/* ---- src/styles/10-motion.css ---- */
/* The motion layer (brand 05-layout, Motion): opacity and rises of space-2 (8px) at most, each played once, never
   looped. Every rule sits under html.js (set by an inline script in <head>, src/lib/layout.mjs) and inside
   prefers-reduced-motion: no-preference on screens, so without JavaScript, under reduced motion and in print every
   element shows in its final state at once.
   Never animated: the NavBar, the Footer, the CtaBand, the application form, any button on its own, the hero photo (the
   page's LCP image). No parallax, no count-up, no scale. */
@keyframes site-rise { from { opacity: 0; transform: translateY(var(--space-2)); } }
@keyframes site-line-in { from { text-decoration-color: transparent; } }

@media screen and (prefers-reduced-motion: no-preference) {
  /* Hero load-in, CSS only: eyebrow, title, lead and actions rise in turn, 60ms apart (half of duration-fast). The
     photo beside them never moves. Backwards fill holds each part at its start through its delay and leaves nothing
     applied once it has landed. The actions row is animated through its children, never as a whole. */
  html.js .site-page-hero :is(.sc-hero__eyebrow, .sc-hero__title, .sc-hero__lead, .sc-hero__actions > *) {
    animation: site-rise var(--duration-slow) var(--ease-out) backwards;
  }
  html.js .site-page-hero .sc-hero__title { animation-delay: calc(var(--duration-fast) / 2); }
  html.js .site-page-hero .sc-hero__lead { animation-delay: calc(var(--duration-fast) / 2 * 2); }
  html.js .site-page-hero .sc-hero__actions > * { animation-delay: calc(var(--duration-fast) / 2 * 3); }
  /* The title's Highlight: the line fades in under the words once the title has landed (a color change, so it is
     still the hero's one lime gesture, drawn once). */
  html.js .site-page-hero .sc-hero__title .sc-highlight {
    animation: site-line-in var(--duration-slow) var(--ease-out) calc(var(--duration-slow) + var(--duration-fast)) backwards;
  }

  /* In-view reveals (site.js): section headers and [data-reveal] items below the first screen wait at opacity 0, 8px
     low, and rise once when they enter the view. site.js marks only the elements it observes (.site-reveal), never
     anything already in view, and clears both classes when the transition ends, so the element's own transitions
     (hover, press) come back. --i staggers siblings that enter together, 60ms apart, at most five steps. */
  html.js.reveal .site-reveal:not(.is-in) { opacity: 0; transform: translateY(var(--space-2)); }
  html.js.reveal .site-reveal.is-in {
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--duration-fast) / 2);
  }

  /* Lazy photos fade in when their file arrives instead of painting in strips (site.js sets is-loading only on the
     images that are still loading). */
  html.js.reveal img.site-image[loading="lazy"] { transition: opacity var(--duration-slow) var(--ease-out); }
  html.js.reveal img.site-image.is-loading { opacity: 0; }
}

/* The page's first section rule draws in once from the left when it enters the view (brand Rule animate: the
   sc-rule--wait and sc-rule--play classes, which the brand already flattens under reduced motion). site.js adds them
   only with motion on; a printout always shows the finished line. */
@media print {
  .sc-rule--wait, .sc-rule--play { transform: none; animation: none; }
}

/* ---- src/styles/15-section-index.css ---- */
/* SectionIndex (src/blocks/SectionIndex.mjs): the "On this page" strip. A sticky row under the NavBar, on the container,
   between hairlines, control-md tall. Links are ink-muted; hover, keyboard focus and the chapter in view
   (aria-current="true", set by site.js) step up to ink and draw the line under the label with .sc-underline (rule-sm at
   this size), the NavBar's current-link treatment: functional, never the view's lime gesture.
   On the navy header treatment the nav carries data-theme="dark": its surface is then navy-900, the same navy the NavBar
   and the hero paint (the Navy theme's own surface-inverse is a deeper navy-975, so it is not used here). */
.site-section-index {
  container: site-section-index / inline-size;
  box-sizing: border-box;
  position: sticky;
  top: var(--site-nav-h);
  z-index: 9; /* under the NavBar (10) and its open menu panel, above the page */
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
/* On Paper the NavBar has its own hairline foot: once stuck, the strip tucks its top hairline under it, so the two rows
   share one line. On navy the NavBar foot is transparent and the strip's navy-700 hairline divides the rows, as the
   NavBar's own menu panel does. */
.site-section-index:not(.site-section-index--inverse) { top: calc(var(--site-nav-h) - var(--rule-hairline)); }
/* Once stuck, the strip is the foot of the sticky header, so the header's scrolled shadow moves under it (site.js sets
   is-stuck; the NavBar's own shadow would otherwise fall between the two rows). */
.site-section-index.is-stuck { box-shadow: var(--shadow-sm); }
html:has(.site-section-index.is-stuck) .sc-nav-bar--scrolled { box-shadow: none; }

/* The inner box keeps the container; it is also the sideways scroller when the labels do not fit (any width), with no
   scrollbar and no fade mask. The list carries the page gutters as padding, so they scroll with it and the focus ring of
   the first and last link is never clipped. */
.site-section-index__inner {
  box-sizing: border-box;
  max-width: calc(var(--container) + 2 * var(--space-10));
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: var(--space-10);
}
.site-section-index__inner::-webkit-scrollbar { display: none; }
.site-section-index__list {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  min-width: 100%;
  height: var(--control-md);
  margin: 0;
  padding: 0 var(--space-10);
  list-style: none;
}
.site-section-index__item { flex: none; }
.site-section-index__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.site-section-index__num { font-variant-numeric: lining-nums tabular-nums; }
.site-section-index__text { text-decoration-color: transparent; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.site-section-index__link:is(:hover, :focus-visible, [aria-current="true"]) { color: var(--ink); }
.site-section-index__link:is(:hover, :focus-visible, [aria-current="true"]) .site-section-index__text { text-decoration-color: var(--accent); }

@container site-section-index (width < 960px) {
  .site-section-index__inner { scroll-padding-inline: var(--space-6); }
  .site-section-index__list { padding-inline: var(--space-6); }
}
/* Narrow desktops: six labels with their numbers run about 1,040px (/product-development), wider than a 960 to 1099px
   window. There the numbers step out (they repeat each chapter's own eyebrow, and are aria-hidden) and the gap closes
   to space-6, so every label fits on the row (about 853px for the longest strip) and nothing hides past the edge. */
@container site-section-index (960px <= width < 1100px) {
  .site-section-index__num { display: none; }
  .site-section-index__list { gap: var(--space-6); }
}
/* Under 960px the strip still scrolls sideways where the labels do not fit. A mouse has no swipe to find the rest, so
   with a fine pointer the scroller shows the platform's thin scrollbar as its handle (touch keeps none). Where the
   platform draws classic scrollbars this adds a few pixels under the labels; the sticky offsets below keep space-6 to
   space-8 of air, so nothing is covered. */
@container site-section-index (width < 960px) {
  @media (hover: hover) and (pointer: fine) {
    .site-section-index__inner { scrollbar-width: thin; }
  }
}
@container site-section-index (width < 720px) {
  .site-section-index__inner { scroll-snap-type: x proximity; scroll-padding-inline: var(--space-4); }
  .site-section-index__list { gap: var(--space-6); padding-inline: var(--space-4); }
  .site-section-index__item { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .site-section-index, .site-section-index__link, .site-section-index__text { transition: none; }
}
@media print {
  .site-section-index { display: none; }
}

/* ---- src/styles/20-blocks.css ---- */
/* Site blocks (src/blocks). Layout glue around the brand components only: tokens for every value, type from the
   type classes, square corners, hairlines before shadows, no lime. Blocks that change layout are their own inline-size
   containers, so they respond to the width they are given (a full Section, or the right 8 columns of a split one).
   Breakpoints are the block's own width: 880px is the content width of a 960px section (desktop), 600px the
   tablet step, 1040px a wide desktop (FormatList four across). PageHero and CtaBand follow their brand band's own
   container (sc-hero, sc-section) at 960px and 720px.
   Motion belongs to the shell (10-motion.css, site.js): blocks only mark reveal targets with data-reveal and pressable
   rows with site-link-row. Sticky offsets read the shell's --site-sticky-top (with a fallback).
   No card or party sits alone on a row (CardGrid, StandardsList columns=3).
   Every list is a real ul/ol with role="list" (list-style: none drops list semantics in Safari). */

/* ---- Shared ---- */
/* Hyphenated words in hero and band titles stay on one line (PageHero keepHyphenated). */
.site-nowrap { white-space: nowrap; }
/* Cormorant's default figures are old-style; headings with numbers take lining, tabular figures (typography guideline). */
.site-page-hero .sc-hero__title,
.site-cta-band__title,
.site-service-lines .sc-card__title,
.site-founder .sc-card__title { font-variant-numeric: lining-nums tabular-nums; }

/* SiteImage: photographs fill their column, square-cornered, flat (no border, no shadow, no hover effect). */
.site-image { display: block; width: 100%; height: auto; max-width: 100%; border-radius: var(--radius-none); background: var(--surface-alt); }

/* ---- PageHero ---- */
/* Actions: the application button and, beside it when it fits, the secondary link (standalone, lg: white on navy with
   its arrow; the lime underline only on hover). */
.site-page-hero .sc-hero__actions { gap: var(--space-4) var(--space-8); }

/* The bleed panel (image heroes). At 960px+ of hero width the copy takes columns 1 to 7 and the photograph is a
   full-height panel from grid column 8 to the viewport edge, flush with the band's top and bottom (brand 05-layout:
   bleed images to the viewport edge, keep the content on the container). The band is content-driven: at least 640px
   (768px from 1680px, so the panel never thins into a strip), never 100vh. The photo sits beside the type, never behind
   it. Below 960px it runs edge to edge under the copy at the narrow ratio and forms the band's bottom edge. Crops come
   from the page as custom properties set on the img (PageHero): --site-hero-pos, --site-hero-pos-narrow,
   --site-hero-ratio-narrow. */
.site-page-hero--image { position: relative; overflow: clip; }
.site-page-hero__image {
  aspect-ratio: var(--site-hero-ratio-narrow, 4 / 3); object-fit: cover;
  object-position: var(--site-hero-pos-narrow, 50% 50%);
}
@container sc-hero (width >= 960px) {
  .site-page-hero--image .sc-hero__inner { align-items: center; min-height: calc(var(--space-32) * 5); }
  .site-page-hero--image .sc-hero__main { grid-column: 1 / span 7; }
  .site-page-hero--image .sc-hero__aside {
    position: absolute; inset-block: 0; right: 0;
    left: calc(max(var(--space-10), (100% - var(--container)) / 2) + (min(100% - 2 * var(--space-10), var(--container)) + var(--space-6)) * 7 / 12);
    margin: 0; padding: 0; border: 0;
  }
  .site-page-hero--image .site-page-hero__image {
    width: 100%; height: 100%; aspect-ratio: auto;
    object-position: var(--site-hero-pos, 50% 50%);
  }
}
@container sc-hero (width >= 1680px) {
  .site-page-hero--image .sc-hero__inner { min-height: calc(var(--space-32) * 6); }
}
@container sc-hero (width < 960px) {
  .site-page-hero--image .sc-hero__inner { padding-bottom: 0; }
  .site-page-hero--image .sc-hero__aside { margin: var(--space-12) calc(-1 * var(--space-6)) 0; padding: 0; border: 0; }
}
@container sc-hero (width < 720px) {
  .site-page-hero--image .sc-hero__aside { margin: var(--space-10) calc(-1 * var(--space-4)) 0; }
}

/* ---- CtaBand ---- */
/* A header-less S.Section tone="inverse" (as="div") around a <section> named by its h2; every token inside resolves in
   the band's data-theme="dark" scope. At 960px+ of band width: copy in columns 1 to 7, the application steps in 9 to 12
   behind a hairline (the brand Hero aside treatment). Below 960px the steps stack under the actions behind a top
   hairline. No rule between the band and the footer (brand: same ground, space alone). */
.site-cta-band__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.site-cta-band__main, .site-cta-band__aside { min-width: 0; }
.site-cta-band__eyebrow { margin: 0 0 var(--space-3); }
.site-cta-band__title { margin: 0; max-width: 24ch; }
.site-cta-band__intro { margin: var(--space-6) 0 0; text-wrap: pretty; }
.site-cta-band__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-10);
}
.site-cta-band__aside { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.site-cta-band__steps .sc-steps__description { text-wrap: pretty; }
@container sc-section (width >= 960px) {
  .site-cta-band__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; }
  .site-cta-band__main { grid-column: 1 / span 7; }
  .site-cta-band__aside {
    grid-column: 9 / -1;
    margin-top: 0; padding: 0 0 0 var(--space-8);
    border-top: 0; border-left: 1px solid var(--border);
  }
}
@container sc-section (width < 720px) {
  .site-cta-band__actions { margin-top: var(--space-8); }
}

/* ---- CardGrid ---- */
.site-card-grid { container: site-card-grid / inline-size; }
.site-card-grid__list {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6);
  margin: 0; padding: 0; list-style: none;
}
/* Cards stretch to equal height in a row. */
.site-card-grid__item { display: flex; min-width: 0; }
.site-card-grid__item > * { flex: 1 1 auto; min-width: 0; }
@container site-card-grid (width >= 600px) {
  .site-card-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No orphans: in two columns an odd last card spans the row (CardGrid lays four cards out 2 x 2). */
  .site-card-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container site-card-grid (width >= 880px) {
  .site-card-grid--3 .site-card-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-card-grid--3 .site-card-grid__item:last-child:nth-child(odd) { grid-column: auto; }
  .site-card-grid--3 .site-card-grid__item:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* ---- ServiceLineGrid ---- */
/* variant="card": title and summary only (the "Who it is for" footer was removed, October 10, 2026); CardGrid stretches
   the cards in a row to one height. */

/* variant="index": an asymmetric index. The lead line in columns 1 to 6 (photo, heading-lg title, summary in ink),
   column 7 empty, the other lines as rows in 8 to 12, offset space-12 (96px square thumbnail beside the
   title and summary). The title link's ::after covers its item, so the item is the hit area; hover and keyboard focus
   draw the brand's title underline (functional, not the view's gesture), and site-link-row gives the 1px press. */
.site-service-index { container: site-service-index / inline-size; }
.site-service-index__list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.site-service-index__lead, .site-service-index__row { position: relative; min-width: 0; }
.site-service-index__row-body { min-width: 0; }
.site-service-index__lead { padding-bottom: var(--space-10); }
.site-service-index__figure { margin: 0 0 var(--space-6); }
.site-service-index__image { aspect-ratio: 4 / 3; object-fit: cover; }
.site-service-index__title, .site-service-index__row-title { margin: 0; }
.site-service-index__summary { margin: var(--space-3) 0 0; max-width: var(--measure); color: var(--ink); text-wrap: pretty; }
.site-service-index__row {
  display: grid; grid-template-columns: var(--space-16) minmax(0, 1fr); column-gap: var(--space-4); align-items: start;
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}
.site-service-index__row:last-child { border-bottom: 1px solid var(--border); }
.site-service-index__row--text { grid-template-columns: minmax(0, 1fr); }
.site-service-index__thumb-image { aspect-ratio: 1 / 1; object-fit: cover; }
.site-service-index__row-summary { margin: var(--space-2) 0 0; text-wrap: pretty; }
.site-service-index__link { color: inherit; text-decoration-color: transparent; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.site-service-index__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-none); }
.site-service-index__link:focus { outline: none; }
.site-service-index__link:focus-visible::after { box-shadow: var(--focus-ring); }
.site-link-row:hover .site-service-index__link,
.site-service-index__link:focus-visible { text-decoration-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .site-service-index__link { transition: none; } }
@container site-service-index (width >= 600px) {
  .site-service-index__image { aspect-ratio: 3 / 2; }
  .site-service-index__row { grid-template-columns: var(--space-24) minmax(0, 1fr); column-gap: var(--space-6); }
}
@container site-service-index (width >= 880px) {
  .site-service-index__list {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6);
    grid-template-rows: repeat(var(--site-index-rows, 3), auto) 1fr;
  }
  .site-service-index__lead { grid-column: 1 / span 6; grid-row: 1 / -1; padding-bottom: 0; }
  .site-service-index__image { aspect-ratio: 4 / 3; }
  .site-service-index__row { grid-column: 8 / -1; }
  .site-service-index__lead + .site-service-index__row { margin-top: var(--space-12); }
}
/* 880px+: the lead's photograph spans the rows' tracks (subgrid), so it runs from the top of the list to the last
   row's closing hairline and the two columns end on one line; its 4:3 ratio is only the floor it contributes (the
   height: 100% is cyclic while the rows are sized), so it draws at about 1.16 at 1280px+ and taller on laptops. The
   lead's title and summary follow in the last track. Without subgrid the lead stays one block. */
@supports (grid-template-rows: subgrid) {
  @container site-service-index (width >= 880px) {
    .site-service-index__lead { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
    .site-service-index__figure { grid-row: 1 / span var(--site-index-rows, 3); margin: 0; }
    .site-service-index__image { height: 100%; }
    .site-service-index__lead-body { grid-row: -2 / -1; padding-top: var(--space-6); }
  }
}

/* ---- CheckList ---- */
.site-checklist {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0; padding: 0; list-style: none;
  color: var(--ink);
}
.site-checklist__item { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
/* The icon box is one line tall, so the check centers on the first line of a wrapped item. */
.site-checklist__icon { display: flex; flex: none; align-items: center; height: 1lh; color: var(--ink-muted); }
.site-checklist__text { min-width: 0; overflow-wrap: break-word; }
/* columns=2: two columns of at least 256px when they fit, one otherwise. */
.site-checklist--2 { display: block; columns: 2 calc(var(--space-32) * 2); column-gap: var(--space-8); }
.site-checklist--2 .site-checklist__item { break-inside: avoid; padding-bottom: var(--space-2); }

/* ---- OfferingList ---- */
.site-offerings { container: site-offerings / inline-size; }
.site-offerings__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--border); }
.site-offerings__item {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border);
}
.site-offerings__main, .site-offerings__includes { min-width: 0; }
.site-offerings__name { margin: 0; }
.site-offerings__summary { margin: var(--space-2) 0 0; }
.site-offerings__note { margin: var(--space-3) 0 0; }
.site-offerings__label { margin: 0 0 var(--space-3); }
@container site-offerings (width >= 880px) {
  .site-offerings__item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); }
  .site-offerings__main { grid-column: 1 / span 5; padding-right: var(--space-6); }
  .site-offerings__includes { grid-column: 6 / -1; }
  /* The eyebrow sits on the first line of the name (title-lg 30px line, eyebrow 16px). */
  .site-offerings__label { padding-top: var(--space-2); }
}
/* Ledger header (head prop): at 880px+ two eyebrows over the columns on a border-strong rule; the first row drops its
   top hairline and each row's "Includes" eyebrow is visually hidden (still read). Hidden below 880px. */
.site-offerings__head { display: none; }
.site-offerings__head-cell { margin: 0; }
@container site-offerings (width >= 880px) {
  .site-offerings--head .site-offerings__head {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-strong);
  }
  .site-offerings__head-cell--main { grid-column: 1 / span 5; }
  .site-offerings__head-cell--includes { grid-column: 6 / -1; }
  .site-offerings--head .site-offerings__item:first-child { border-top: 0; }
  .site-offerings--head .site-offerings__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* With the eyebrow gone, the list's first line sits on the name's first baseline (title-lg 22/30 beside body 16/26). */
  .site-offerings--head .site-offerings__includes { padding-top: var(--space-1); }
}
/* featured: the section's one panel. surface-alt on a default band, surface-raised (white) on an alt band; square,
   no hairlines (nor on the row after it), no shadow, no lime. */
.site-offerings__item--featured { padding: var(--space-8) var(--space-6); border-top: 0; background: var(--surface-alt); }
.site-offerings--ground-alt .site-offerings__item--featured { background: var(--surface-raised); }
.site-offerings__item--featured + .site-offerings__item { border-top: 0; }
.site-offerings__list:has(> .site-offerings__item--featured:last-child) { border-bottom: 0; }
.site-offerings__program { margin: 0 0 var(--space-2); }
.site-offerings__item--featured .site-offerings__summary { margin-top: var(--space-3); }
@container site-offerings (width < 600px) {
  .site-offerings__item--featured { padding: var(--space-6) var(--space-4); }
}
@container site-offerings (width >= 880px) {
  /* The includes column starts level with the "Program" eyebrow. */
  .site-offerings--head .site-offerings__item--featured .site-offerings__includes { padding-top: 0; }
}

/* ---- ProcessSteps ---- */
.site-process { container: site-process / inline-size; }

/* compact: one S.Steps list (vertical), flowed into two columns, filling column one first. */
@container site-process (width >= 600px) {
  .site-process--compact .sc-steps--vertical {
    display: grid; grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--site-process-rows, 4), auto);
    column-gap: var(--space-10);
  }
  /* The last step of column one has no next step below it: drop its connector. */
  .site-process--rows-2 .sc-steps__item:nth-child(2) .sc-steps__connector,
  .site-process--rows-3 .sc-steps__item:nth-child(3) .sc-steps__connector,
  .site-process--rows-4 .sc-steps__item:nth-child(4) .sc-steps__connector,
  .site-process--rows-5 .sc-steps__item:nth-child(5) .sc-steps__connector,
  .site-process--rows-6 .sc-steps__item:nth-child(6) .sc-steps__connector { display: none; }
}

/* detailed: the process on the line (the brand Steps rail, never lime). Each row has a space-3 ink square level with
   its "01" eyebrow (16px line) and a 1px border connector down to the next row's marker, stopping space-2 short of each
   marker. No hairlines between rows. The first row has no top padding and the last no bottom padding or connector. */
.site-process__list { margin: 0; padding: 0; list-style: none; }
.site-process__row {
  --site-process-pad: var(--space-10);
  --site-process-nudge: calc((var(--space-4) - var(--space-3)) / 2);
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5);
  padding: var(--site-process-pad) 0 var(--space-10) var(--space-8);
}
.site-process__row:first-child { --site-process-pad: 0px; }
.site-process__row:last-child { padding-bottom: 0; }
.site-process__row::before {
  content: ''; position: absolute; left: 0;
  top: calc(var(--site-process-pad) + var(--site-process-nudge));
  width: var(--space-3); height: var(--space-3);
  background: var(--ink);
}
.site-process__row:not(:last-child)::after {
  content: ''; position: absolute; left: calc(var(--space-3) / 2 - 1px); width: 1px;
  top: calc(var(--site-process-pad) + var(--site-process-nudge) + var(--space-3) + var(--space-2));
  bottom: calc(-1 * (var(--space-10) + var(--site-process-nudge) - var(--space-2)));
  background: var(--border);
}
.site-process__head { min-width: 0; }
.site-process__number { margin: 0 0 var(--space-2); }
.site-process__title { margin: 0; }
.site-process__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin: 0; }
.site-process__fact { min-width: 0; }
/* flex blockifies the eyebrow span, so the label sits on its own 16px line, level with the step number. */
.site-process__term { display: flex; margin: 0 0 var(--space-2); }
.site-process__detail { margin: 0; max-width: var(--measure); color: var(--ink); }
@container site-process (width >= 600px) {
  .site-process__facts { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); }
  .site-process__fact--what { grid-column: 1 / span 7; }
  .site-process__fact--see { grid-column: 8 / -1; }
}
@container site-process (width >= 880px) {
  .site-process__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); }
  .site-process__head { grid-column: 1 / span 4; padding-right: var(--space-6); }
  .site-process__facts { grid-column: 5 / -1; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .site-process__fact--what { grid-column: 1 / span 5; }
  .site-process__fact--see { grid-column: 6 / -1; }
}

/* ---- FormatList ---- */
.site-formats { container: site-formats / inline-size; }
.site-formats__list {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-6);
  margin: 0; padding: 0; list-style: none;
}
/* Same rhythm as StandardsList: hairline, space-6, title, space-2, note, space-8. */
.site-formats__item { min-width: 0; padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--border); }
.site-formats__name { margin: 0; }
.site-formats__note { margin: var(--space-2) 0 0; text-wrap: pretty; }
.site-formats__image { aspect-ratio: 4 / 3; object-fit: cover; }
/* Under 560px: media rows. A 112px square photo spans the name and the note; every format fits in about one screen. */
@container site-formats (width < 560px) {
  .site-formats__item--image {
    display: grid; grid-template-columns: calc(var(--space-24) + var(--space-4)) minmax(0, 1fr);
    grid-template-rows: auto 1fr; column-gap: var(--space-4);
    padding: var(--space-4) 0;
  }
  .site-formats__item--image .site-formats__image { grid-row: 1 / span 2; aspect-ratio: 1 / 1; }
  .site-formats__item--image .site-formats__note { margin-top: var(--space-1); }
  .site-formats__list:has(> .site-formats__item--image) { border-bottom: 1px solid var(--border); }
}
/* 560px and up: the photo opens the item and replaces the top hairline; every second item drops by space-12, a staggered
   rhythm in the 2 x 2 and the four-across layouts. */
@container site-formats (width >= 560px) {
  .site-formats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .site-formats__item--image { padding-top: 0; border-top: 0; }
  .site-formats__image { margin-bottom: var(--space-5); }
  .site-formats__item:nth-child(even) { margin-top: var(--space-12); }
}
/* Four across only when each column holds a format name on one line and a note at a readable measure (240px+):
   1040px is the content width of a 1120px viewport. Between 560 and 1039px the formats sit 2 x 2. */
@container site-formats (width >= 1040px) {
  .site-formats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- FounderCard ---- */
.site-founder { container: site-founder / inline-size; }
/* Credentials sit under the name inside its heading, in Libre Franklin (Cormorant never goes below 28px). */
.site-founder__credentials {
  display: block; margin-top: var(--space-1);
  color: var(--ink-muted); letter-spacing: 0; font-variant-numeric: lining-nums;
}
.site-founder__more { margin-top: var(--space-6); }
.site-founder__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
/* When the layout stacks, the card keeps a portrait size rather than a full-width tile: 256px on phones, so the navy
   initials tile stays inside the 15-30% navy share of a view (color guideline, Proportions), 384px at tablet width. */
.site-founder__card { min-width: 0; max-width: calc(var(--space-32) * 2); }
@container site-founder (width >= 600px) {
  .site-founder__card { max-width: calc(var(--space-24) * 4); }
}
.site-founder__story { min-width: 0; }
.site-founder__para { margin: 0; max-width: var(--measure); }
.site-founder__para + .site-founder__para { margin-top: var(--space-4); }
.site-founder__long + .site-founder__facts { margin-top: var(--space-10); }
.site-founder__label { margin: 0 0 var(--space-3); }
@container site-founder (width >= 880px) {
  .site-founder__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; }
  .site-founder__card { grid-column: 1 / span 4; max-width: none; }
  .site-founder__story { grid-column: 6 / -1; }
}
/* editorial: no card, no photo. Role eyebrow, name (title) with the credentials line, the bio in body-lg, the link.
   layout="stack" at 600px+: the name block in inner columns 1 to 3 of 8, the bio in 4 to 8. */
.site-founder__role { margin: 0 0 var(--space-2); }
.site-founder__name { margin: 0; }
.site-founder--editorial .site-founder__bio { margin-top: var(--space-6); }
.site-founder--editorial .site-founder__long + .site-founder__more { margin-top: var(--space-8); }
@container site-founder (width >= 600px) {
  .site-founder--stack .site-founder__ed {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start;
  }
  .site-founder--stack .site-founder__id { grid-column: 1 / span 3; }
  .site-founder--stack .site-founder__bio { grid-column: 4 / -1; margin-top: 0; }
}

/* ---- FaqList ---- */
/* The accordion takes 8 of 12 columns at desktop (running-text span), the full width below. */
.site-faq { container: site-faq / inline-size; }
.site-faq__para { margin: 0; }
.site-faq__para + .site-faq__para { margin-top: var(--space-4); }
@container site-faq (width >= 880px) {
  .site-faq > .sc-accordion { width: calc((100% - 11 * var(--space-6)) / 12 * 8 + 7 * var(--space-6)); }
}

/* ---- StandardsList ---- */
.site-standards { container: site-standards / inline-size; }
.site-standards__list {
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-6);
  margin: 0; padding: 0; list-style: none;
}
.site-standards__item { min-width: 0; padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--border); }
.site-standards__head, .site-standards__body { min-width: 0; }
.site-standards__number { margin: 0 0 var(--space-2); }
.site-standards__title { margin: 0; }
.site-standards__text { margin: var(--space-2) 0 0; }
.site-standards__checklist { margin-top: var(--space-3); }
@container site-standards (width >= 600px) {
  .site-standards--2 .site-standards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* columns=3 (who does what: three parties) never goes two across, where the third would sit alone: at tablet width each
   item is a row (title in 4 columns, text and list in 8, like OfferingList), and three across from 880px. */
@container site-standards (width >= 600px) and (width < 880px) {
  .site-standards--3 .site-standards__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); }
  .site-standards--3 .site-standards__head { grid-column: 1 / span 4; }
  .site-standards--3 .site-standards__body { grid-column: 5 / -1; }
  .site-standards--3 .site-standards__body > :first-child { margin-top: 0; }
}
/* From 880px the three parties hang from one border-strong rule across the block (the ledger-head weight), so the
   three open columns read as one matrix of who holds what, set apart from a two-column hairline grid nearby. */
@container site-standards (width >= 880px) {
  .site-standards--3 .site-standards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); }
  .site-standards--3 .site-standards__item { border-top: 0; }
}

/* ---- Prose ---- */
/* Long text: capped at measure, body-lg by default. Children are plain p / ul / ol and S.Heading elements. */
.site-prose { max-width: var(--measure); color: var(--ink); }
.site-prose > * { margin: 0; }
.site-prose > * + * { margin-top: var(--space-4); }
.site-prose > :is(h2, h3, h4) { margin-top: var(--space-10); }
.site-prose > :is(h2, h3, h4):first-child { margin-top: 0; }
.site-prose > :is(h2, h3, h4) + * { margin-top: var(--space-3); }
.site-prose :is(ul, ol) { padding-left: var(--space-6); }
.site-prose li + li { margin-top: var(--space-2); }
/* Bullets are ink squares: the system is square (the radio button is its one circle). Numbers stay ink-muted. */
.site-prose ul { list-style-type: square; }
.site-prose ul > li::marker { color: var(--ink); }
.site-prose ol > li::marker { color: var(--ink-muted); }

/* ---- MediaSplit ---- */
/* The one image-plus-text composition (container site-media). Under 600px, and always with stack: figure first, full
   width, at the narrow ratio, then the body. 600 to 879px: figure in columns 1 to 5 at the ratio, body in 7 to 12.
   880px and up: span 5 (figure 1-5 | body 7-12; end: body 1-6 | figure 8-12) or span 7 (figure 1-7 | body 9-12; end:
   body 1-4 | figure 6-12), with the align, drop, rise and sticky variants. Ratios come from the page as custom
   properties on the img (--site-media-ratio, --site-media-ratio-narrow). No border, shadow or hover on the photo. */
.site-media { container: site-media / inline-size; }
.site-media__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
.site-media__figure { min-width: 0; margin: 0; align-self: start; }
.site-media__body { min-width: 0; }
.site-media__image { aspect-ratio: var(--site-media-ratio-narrow, 4 / 3); object-fit: cover; }
@container site-media (width >= 600px) {
  :is(.site-media--span-5, .site-media--span-7):not(.site-media--stack) .site-media__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6);
  }
  :is(.site-media--span-5, .site-media--span-7):not(.site-media--stack) .site-media__figure { grid-column: 1 / span 5; grid-row: 1; }
  :is(.site-media--span-5, .site-media--span-7):not(.site-media--stack) .site-media__body { grid-column: 7 / -1; grid-row: 1; }
  :is(.site-media--span-5, .site-media--span-7):not(.site-media--stack) .site-media__image { aspect-ratio: var(--site-media-ratio, 4 / 5); }
  .site-media--align-center:not(.site-media--stack) .site-media__body { align-self: center; }
  .site-media--align-end:not(.site-media--stack) .site-media__body { align-self: end; }
  .site-media--sticky:not(.site-media--stack) .site-media__figure {
    position: sticky; top: calc(var(--site-sticky-top, var(--space-20)) + var(--space-8));
  }
}
/* stretch, 600 to 879px: stacked as under 600px (the photograph full width at its narrow ratio, then the body). */
@container site-media (600px <= width < 880px) {
  .site-media--stretch:is(.site-media--span-5, .site-media--span-7):not(.site-media--stack) .site-media__grid { grid-template-columns: minmax(0, 1fr); }
  .site-media--stretch:is(.site-media--span-5, .site-media--span-7):not(.site-media--stack) :is(.site-media__figure, .site-media__body) { grid-column: 1; grid-row: auto; }
  .site-media--stretch:is(.site-media--span-5, .site-media--span-7):not(.site-media--stack) .site-media__image { aspect-ratio: var(--site-media-ratio-narrow, 4 / 3); }
}
@container site-media (width >= 880px) {
  .site-media--span-5.site-media--end:not(.site-media--stack) .site-media__figure { grid-column: 8 / -1; }
  .site-media--span-5.site-media--end:not(.site-media--stack) .site-media__body { grid-column: 1 / span 6; }
  .site-media--span-7:not(.site-media--stack) .site-media__figure { grid-column: 1 / span 7; }
  .site-media--span-7:not(.site-media--stack) .site-media__body { grid-column: 9 / -1; }
  .site-media--span-7.site-media--end:not(.site-media--stack) .site-media__figure { grid-column: 6 / -1; }
  .site-media--span-7.site-media--end:not(.site-media--stack) .site-media__body { grid-column: 1 / span 4; }
  .site-media--drop:not(.site-media--stack) .site-media__figure { margin-top: var(--space-12); }
  /* rise: as the first child of a header-less Section (96px top padding at 960px+), the figure starts 64px inside the
     band above. The Section must not clip overflow. */
  .site-media--rise:not(.site-media--stack) .site-media__figure {
    position: relative; margin-top: calc(-1 * (var(--space-24) + var(--space-16)));
  }
  /* stretch: the figure takes the row's height. The image's height: 100% is a cyclic percentage while the row is
     sized, so its ratio sets its contribution: the photo is never shorter than its ratio, and taller when the body is. */
  .site-media--stretch .site-media__figure { align-self: stretch; }
  .site-media--stretch .site-media__image { height: 100%; }
}

/* ---- Offset ---- */
/* Content in columns 5 to 12 of the given width at 880px+ (a diagonal reading path from a left-aligned header). */
.site-offset { container: site-offset / inline-size; }
.site-offset__inner { min-width: 0; }
@container site-offset (width >= 880px) {
  .site-offset__inner { margin-inline-start: calc((100% + var(--space-6)) * 4 / 12); }
}

/* ---- StepLine ---- */
/* S.Steps horizontal, vertical below: two renders, one display:none at a time, so only one is in the accessibility
   tree. Three steps go across from 720px of block width; four or five from 880px, where each column is at least about
   196px (at 720px four columns are about 156px and the longest supply step runs to eight lines). */
.site-stepline { container: site-stepline / inline-size; }
.site-stepline__wide { display: none; }
.site-stepline .sc-steps__description { text-wrap: pretty; }
@container site-stepline (width >= 720px) {
  .site-stepline--3 .site-stepline__wide { display: grid; }
  .site-stepline--3 .site-stepline__narrow { display: none; }
}
@container site-stepline (width >= 880px) {
  .site-stepline__wide { display: grid; }
  .site-stepline__narrow { display: none; }
}

/* ---- Style guide page (/styleguide, internal) ---- */
.site-styleguide__stack > * + * { margin-top: var(--space-12); }
.site-styleguide__label { margin: 0 0 var(--space-4); color: var(--ink-subtle); }
.site-styleguide__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.site-styleguide__frame { border: 1px solid var(--border); background: var(--surface); }
.site-styleguide__spread-title { margin: var(--space-3) 0 var(--space-8); max-width: 24ch; }
.site-styleguide__para { margin: var(--space-3) 0 0; max-width: var(--measure); }

/* Lead pass after the page builds: list text, process details and founder paragraphs avoid one-word last lines
   (brand 04-typography: text-wrap pretty on paragraphs), and a two-column StandardsList with an odd count lets its
   last item span the row (the CardGrid no-orphan rule). */
.site-checklist__text, .site-standards__text, .site-process__detail, .site-founder__para { text-wrap: pretty; }
@container site-standards (width >= 600px) {
  .site-standards--2 .site-standards__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- src/styles/30-about.css ---- */
/* About page (src/pages/about.mjs). Tokens only. */

/* The hero keeps "run by" together (no one-word last line) except where the phrase is wider than the column. */
@media (max-width: 359px) { .site-about-keep { white-space: normal; } }

/* The portrait panel (PageHero image, top-aligned at 50% 0%). The source is 0.71 wide to tall, so the panel's lower
   edge falls where the panel's own shape puts it: on his folded arms and fingers between about 1100 and 1340px of
   window, where the panel is wide for its 640px height. The photo box is drawn 125% of the panel's height (the hero
   clips the overflow), so the crop always ends at about 80% of the portrait, mid-chest above the arms, and only
   15 to 80px come off the plain backdrop at the sides. Wider windows already crop higher, so this changes nothing
   there. A CSS recrop only: the owner's photo itself is never edited. Under 960px the square crop (about.mjs) ends
   above the arms on its own. */
@container sc-hero (width >= 960px) {
  .site-about-hero .site-page-hero__image { height: 125%; }
}

/* Who you will work with: the section eyebrow already reads "Founder" and the sticky header keeps it in view beside the
   name, so the page passes FounderCard showRole={false}: the name and credentials lead. Where the name block sits
   beside the story (600px+ of block width), it holds at the split header's sticky line while the paragraph scrolls
   past. */
@container site-founder (width >= 600px) {
  .site-about-founder .site-founder__id {
    position: sticky; top: calc(var(--site-sticky-top, var(--space-20)) + var(--space-8));
  }
}

/* His working photo closes the section under the story (3:2, the body's full width), a group step below the
   paragraph, so the story separates it from the portrait in the hero. Square, flat, no caption. */
.site-about-founder__figure { margin: var(--space-12) 0 0; }

/* ---- src/styles/30-apply.css ---- */
/* Apply (/apply): the qualifying application. Page-only layout around the brand TextField, Checkbox, Button and
   Callout; tokens only, square corners, no lime of its own (the hero Highlight is the page's one lime gesture, and the
   page's one primary is the navy submit button).
   At 880px+ of block width the band is a 12-column grid (design plan D23) with the form in columns 1 to 6 (brand
   layout: forms are 6 columns, labels above fields). Below 880px the form runs in one column, capped at the measure.
   Every option row is at least 44px tall and the whole row toggles it. No reveals on this page: only the CSS hero
   load-in runs (site.js skips pages that hold .site-apply). */

.site-apply { container: site-apply / inline-size; }
.site-apply__column { min-width: 0; max-width: var(--measure); }

@container site-apply (width >= 880px) {
  .site-apply__layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
    align-items: start;
  }
  .site-apply__column { grid-column: 1 / span 6; max-width: none; }
}

/* Targets the script scrolls to (the summary, a question, the result heading) stop a little below the sticky header
   (00-site.css gives the page scroll-padding-top for the header itself). */
.site-apply__errors, .site-apply__q, .site-apply__result-title { scroll-margin-top: var(--space-8); }

/* ---- Error summary (filled by the script; empty and sizeless until then) ---- */
.site-apply__errors { outline: none; }
.site-apply__errors:not(:empty) { margin-bottom: var(--space-12); }
.site-apply__errors:focus-visible .sc-callout { box-shadow: var(--focus-ring); }
.site-apply__error-list { margin: 0; padding: 0; list-style: none; }
.site-apply__error-list > li + li { margin-top: var(--space-2); }

/* ---- No JavaScript: the note replaces the form (the noscript style in apply.mjs hides the form) ---- */
.site-apply__noscript { margin: 0; }

/* ---- The page script did not load: the inline guard's one line, inside the error box ---- */
.site-apply__guard { margin: 0; color: var(--ink); max-width: var(--measure); }

/* ---- "Clear my answers": a ghost button under "Send application", flush left (brand 05-layout). A ghost button shows
   only its label, so the label (not the invisible box, space-5 of padding wider) lines up with the form's left edge;
   the hit area and focus ring keep their full size. ---- */
.site-apply__draft { display: flex; margin-top: var(--space-6); }
.site-apply__clear { margin-left: calc(-1 * var(--space-5)); }

/* ---- Parts: one fieldset per section of the application, legend styled as the section heading ---- */
.site-apply__form { margin: 0; }
.site-apply__form[hidden] { display: none; }
.site-apply__part { min-width: 0; margin: 0; padding: 0; border: 0; }
.site-apply__legend { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; padding: 0; }
/* The hairline between parts sits on the legend: a fieldset's own border would run through the legend. */
.site-apply__part + .site-apply__part { margin-top: var(--space-16); }
.site-apply__part + .site-apply__part > .site-apply__legend { padding-top: var(--space-12); border-top: 1px solid var(--border); }
.site-apply__part-intro { margin: var(--space-4) 0 0; color: var(--ink-muted); }
.site-apply__questions { display: flex; flex-direction: column; gap: var(--space-10); margin-top: var(--space-10); }

/* ---- Question groups (radio and checkbox) ---- */
.site-apply__group { min-width: 0; margin: 0; padding: 0; border: 0; }
/* The legend reads like a TextField head: label, then "Required" in words beside it. */
.site-apply__q-legend {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2);
  padding: 0; color: var(--ink);
}
.site-apply__required { color: var(--ink-muted); }
.site-apply__hint { margin: 0; color: var(--ink-muted); max-width: var(--measure); }
.site-apply__q-error { margin: var(--space-2) 0 0; }
.site-apply__q-error[hidden] { display: none; }

/* Out of scope (a food, beverage, drug, cosmetic or device): the note under the category question, and no "Required"
   on the other choice questions, which the script stops requiring. The note's box is a live region, always present. */
.site-apply__scope-note:not(:empty) { margin-top: var(--space-4); }
.site-apply__form--out-of-scope .site-apply__group--radio:not([data-scope]) .site-apply__required { display: none; }

/* Radios and checkboxes sit on their own rows. Each row is 50px tall (26px line + space-3 above and below), and the
   label's hit area covers the whole row, so a tap anywhere on it toggles the input. */
.site-apply__options { display: flex; flex-direction: column; margin-top: var(--space-1); }
.site-apply__option { position: relative; padding-block: var(--space-3); }
.site-apply__option .sc-checkbox__label::before { content: ""; position: absolute; inset: 0; }
.site-apply__option .sc-checkbox__description { position: relative; }

/* The consent line stands alone, so it needs no extra row padding above it. "Required" follows the label text, spaced
   like the "Required" beside every other question's label. */
.site-apply__consent .site-apply__option { padding-top: 0; }
.site-apply__consent-required { margin-left: var(--space-2); white-space: nowrap; }

/* ---- Honeypot: off screen for people, still in the form for bots (shared contract) ---- */
.site-apply__hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---- Submit: the "Privacy policy" link, directly above the button ---- */
.site-apply__submit {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border);
}
.site-apply__privacy { margin: 0 0 var(--space-6); }

/* ---- Result ---- */
.site-apply__result { outline: none; }
.site-apply__result[hidden] { display: none; }
.site-apply__result-title { outline: none; max-width: 24ch; }
.site-apply__result > * + * { margin-top: var(--space-6); }
.site-apply__result > .site-apply__notice { margin-top: var(--space-8); }
.site-apply__result > .site-apply__notice + * { margin-top: var(--space-8); }
.site-apply__notice:focus { outline: none; }
.site-apply__notice:focus-visible { box-shadow: var(--focus-ring); }
.site-apply__result > .site-apply__actions { margin-top: var(--space-8); }
.site-apply__result > .site-apply__reference { margin-top: var(--space-10); }
.site-apply__result-close { max-width: var(--measure); }

/* What to put in place: ink square bullets (the system is square), like Prose lists. */
.site-apply__list { margin: 0; padding-left: var(--space-6); list-style: square; color: var(--ink); max-width: var(--measure); }
.site-apply__result > .site-apply__list { margin-top: var(--space-4); }
.site-apply__list-item::marker { color: var(--ink); }
.site-apply__list-item + .site-apply__list-item { margin-top: var(--space-2); }

.site-apply__reference { margin: 0; color: var(--ink-muted); }
.site-apply__reference-code { color: var(--ink); }

/* ---- src/styles/30-home.css ---- */
/* Home page only (src/pages/home.mjs). Tokens only. */

/* A standalone link that closes a section's content, one group step (space-8) below the last line of the block. */
.site-home-more { margin-top: var(--space-8); }

/* In two columns, the last step of column one keeps the Steps list's space-8 of bottom padding: no extra margin then. */
.site-home-process { container: site-home-process / inline-size; }
@container site-home-process (width >= 600px) {
  .site-home-process > .site-home-more { margin-top: 0; }
}

/* ---- Statement (D11) ----
   The heading-xl statement stands alone in its band (no eyebrow, intro or body). It is two sentences; each starts its
   own line and wraps balanced within it. The title widens from the Section's 24ch to 40ch so each sentence holds one
   line at 44px on a desktop: the band reads as two lines under the rule. */
.site-home-statement .sc-section__title { max-width: 40ch; }
.site-home-statement__line { display: block; text-wrap: balance; }

/* ---- Formats band ----
   The formats show their names only. Under 560px FormatList draws media rows (a 112px photo beside the name), and the
   name centers on its photo instead of sitting at the top of an otherwise empty row. */
@container site-formats (width < 560px) {
  .site-home-formats-band .site-formats__item--image .site-formats__name { grid-row: 1 / span 2; align-self: center; }
}
/* At 960px+ the founder photograph below rises 64px (space-16) into this band. The band grows by the same amount, so
   the formats keep the full section padding (space-24) above the photo. */
@container sc-section (width >= 960px) {
  .site-home-formats-band > .sc-section__inner { padding-bottom: calc(var(--space-24) + var(--space-16)); }
}

/* ---- Founder spread (D12) ----
   A header-less default band. MediaSplit span 7, rise: the photograph starts 64px inside the formats band above; the
   body (eyebrow, h2, the editorial founder block) sits in columns 9 to 12. */
.site-home-founder__title { margin: var(--space-3) 0 var(--space-8); max-width: 18ch; }

/* The crop focus (the page passes no position). Under 880px the spread stacks (MediaSplit stretch) and the whole 3:2
   photograph shows. From 880px MediaSplit stretches the photo to the body's height (never shorter than 3:2): its lower
   edge lands on the body's last line, its top 64px inside the band above, and it crops at the sides only, from about
   0.73 (960px viewport) through 1.07 (1180px) to 1.17 (1280px+). The focus moves with it: 40% keeps both hands and the
   papers at the narrowest; 25% from 1000px leaves the glass jar out while it would be cut; 50% from 1100px brings it
   in whole, with his elbow and a strip of the window at the left. */
.site-home-founder .site-media__image { object-position: 45% 40%; }
@container site-media (width >= 880px) {
  .site-home-founder .site-media__image { object-position: 40% 40%; }
}
@container site-media (width >= 1000px) {
  .site-home-founder .site-media__image { object-position: 25% 40%; }
}
@container site-media (width >= 1100px) {
  .site-home-founder .site-media__image { object-position: 50% 40%; }
}

/* ---- src/styles/30-how-it-works.css ---- */
/* How it works (src/pages/how-it-works.mjs). Page-only spacing around brand components and site blocks. Tokens only. */

/* Client Hub: one titled part (the released documents) on a hairline. */
.site-how-it-works-hub__parts {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.site-how-it-works-hub__part { min-width: 0; padding: var(--space-6) 0 var(--space-8); border-top: 1px solid var(--border); }
.site-how-it-works-hub__part > * { margin: 0; }
.site-how-it-works-hub__part > * + * { margin-top: var(--space-4); }
.site-how-it-works-hub__part > .site-how-it-works-hub__title + * { margin-top: var(--space-2); }

/* ---- src/styles/30-ingredient-development.css ---- */
/* Ingredient development page (src/pages/ingredient-development.mjs). Tokens only; type from the type classes. */

/* The founder band (design plan D21): a header-less alt band, the founder photograph in columns 1 to 5 and the
   body centered beside it (MediaSplit). The body carries the band's own eyebrow and h2 with the Section header's
   spacing (eyebrow, space-3, title), then the founder's name and credentials as a signature on a hairline. */
.site-ingredient-development-founder__eyebrow { margin: 0 0 var(--space-3); }
.site-ingredient-development-founder__title { margin: 0; text-wrap: balance; }
.site-ingredient-development-founder__card {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  max-width: var(--measure);
}

/* How ingredient projects run: a CheckList in the split layout's content column. */
.site-ingredient-development-rules .site-checklist { max-width: var(--measure); }

/* ---- src/styles/30-privacy.css ---- */
/* Privacy (/privacy) and 404 (/404). Page-only styles; tokens only. */

/* ---- 404: the main pages, listed in the hero aside ---- */
.site-privacy-404__label { margin: 0 0 var(--space-4); }
.site-privacy-404__links { list-style: none; margin: 0; padding: 0; }
.site-privacy-404__links > li + li { margin-top: var(--space-3); }

/* ---- src/styles/30-private-label-supply.css ---- */
/* Private label supply page (src/pages/private-label-supply.mjs). Tokens only; type from the type classes. */

/* How supply works: StepLine sets its three steps across from 720px of its width (the block's step for three steps),
   down the rail below. Partner standards: a CheckList in the split layout's content column. */
.site-private-label-supply-partners .site-checklist { max-width: var(--measure); }

/* Formats: names only, as on home. Under 560px FormatList draws media rows (a 112px photo beside the name), and the
   name centers on its photo instead of sitting at the top of an otherwise empty row. */
@container site-formats (width < 560px) {
  .site-private-label-supply-formats .site-formats__item--image .site-formats__name { grid-row: 1 / span 2; align-self: center; }
}

/* ---- src/styles/30-product-development.css ---- */
/* Product development page (src/pages/product-development.mjs). Tokens only; type from the type classes. */

/* Include items are fragments: keep a wrapped item from ending on one word ("Brandon / Sojka", "raw / material"). */
.site-product-development-list .site-checklist__text { text-wrap: pretty; }

/* Initial Costing: the photograph stands alone under the intro, so MediaSplit's empty body takes no row gap. */
.site-product-development-costing .site-media__body:empty { display: none; }

/* ---- src/styles/30-scientific-and-clinical.css ---- */
/* Scientific and clinical page (src/pages/scientific-and-clinical.mjs). Layout glue only, tokens only. */

/* The ownership callout under the claim standard's intro: capped near the measure, starting at column 1. */
.site-scientific-and-clinical-note { max-width: calc(var(--measure) + var(--space-12)); text-wrap: pretty; }

/* How every study runs: the study path on the line, then the square study photograph with the four study rules centered
   beside it, space-16 below (design plan D19). */
.site-scientific-and-clinical-study { margin-top: var(--space-16); }

/* The study path goes across from 880px of its width (StepLine's step for five steps), down the rail below. */

/* ---- src/styles/30-services.css ---- */
/* Services page (src/pages/services.mjs). Layout glue only: tokens for every value, type from the type classes,
   square corners, hairlines before shadows, no lime. Each composition responds to its own width (container queries),
   with the blocks' steps (880px desktop, 600px tablet) except where a rule below says why not. Shapes: zig-zag media
   rows (D15), 7/5 bento (D16). */

/* ---- The four services: zig-zag media rows. Each li is a MediaSplit (the block sets the figure, the columns, the
   mirror and the drop); this file sets the list rhythm and the body inside it. No hairlines. ---- */
.site-services-lines {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-16);
  margin: 0; padding: 0; list-style: none;
}
.site-services-lines__item { min-width: 0; }

.site-services-line__title { margin: 0; }
.site-services-line__summary { margin: var(--space-4) 0 0; }
/* The offerings under the summary (the "Who it is for" column beside them was removed, October 10, 2026). */
.site-services-line__offerings { min-width: 0; margin-top: var(--space-8); }
.site-services-line__label { margin: 0 0 var(--space-3); }
.site-services-line__names {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0; padding: 0; list-style: none; color: var(--ink);
}
.site-services-line__name { min-width: 0; overflow-wrap: break-word; }
.site-services-line__link { margin-top: var(--space-8); }

/* ---- Packages: a 7/5 bento. The Launch Program is the one Card; the other two are open items between hairlines.
   The card lists what the Launch Program includes; the open items carry stage, name and link only. ---- */
.site-services-bento { container: site-services-bento / inline-size; }
.site-services-bento__list {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-6);
  margin: 0; padding: 0; list-style: none;
}
/* Stacked, the open items run on as a ledger (hairline, space-6, content, space-6, hairline) under the card. */
.site-services-bento__lead { display: flex; min-width: 0; margin-bottom: var(--space-8); }
.site-services-bento__lead > .sc-card { flex: 1 1 auto; min-width: 0; }
.site-services-bento__includes { margin-top: var(--space-4); }

.site-services-bento__item {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  padding-block: var(--space-6); border-top: 1px solid var(--border);
}
.site-services-bento__stage { margin: 0 0 var(--space-3); }
.site-services-bento__title { margin: 0; }
.site-services-bento__link { margin-top: var(--space-6); }

/* Tablet and small laptops: the Launch Program across the row, the two open items side by side under it. */
@container site-services-bento (width >= 600px) {
  .site-services-bento__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-services-bento__lead { grid-column: 1 / -1; }
}

/* Desktop: the card in columns 1 to 7 over both rows; the open items in 8 to 12, one per row, between hairlines. The
   card's top edge is level with the first item's hairline, and the card ends at its own content (align-self: start).
   The card's Includes list runs in one column there (its items are short, and the column keeps the card's foot level
   with the stack's rhythm instead of a squat two-column block).
   The bento starts at 1120px of block width (a 1200px window), not the blocks' 880px: below that, five columns are
   under 420px and the open items turn into narrow towers, so 880 to 1119px keeps the tablet arrangement above. */
@container site-services-bento (width >= 1120px) {
  .site-services-bento__list { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .site-services-bento__lead { grid-column: 1 / span 7; grid-row: 1 / span 2; align-self: start; margin-bottom: 0; }
  .site-services-bento__item { grid-column: 8 / -1; }
  .site-services-bento__lead .site-checklist--2 { columns: auto; }
  .site-services-bento__lead .site-checklist--2 .site-checklist__item:last-child { padding-bottom: 0; }
}