/* Brixton Infrastructure — per-page CSS.
   Loaded by shared/layout.mjs on every page, after site.css.

   Conventions (binding — see docs/ENGINEERING-CONTRACT.md §1):
   - All class names use the `bx-` prefix; namespace per page/component,
     e.g. .bx-contact__field, .bx-service-hero__lede.
   - Colours, type, and spacing come from tokens.css variables ONLY —
     no new hex values, no new fonts.
   - No border-radius, no box-shadow (the sanctioned gold aria-current nav
     marker in site.css is the single existing inset exception — do not add
     more). Structure comes from 1px hairline rules and whitespace.
   - Signature Green only on CTAs/active/focus states; Seal Gold at most once
     per page (inner pages spend their dose on the gold aria-current nav
     marker); Harbor Blue only in logo/data-viz contexts.
   - Reuse delivered components (bx-btn, bx-eyebrow, bx-lede, bx-section,
     bx-split, hairline rules) before writing new CSS.
   - Keep this file organised in per-page sections, each opened with a
     comment banner of the form  ---- /contact/ ----  */

/* Inner-page gold dose at drawer widths: below 900px the desktop nav is hidden,
   so the sanctioned aria-current marker vanished entirely. Mirror it on the
   mobile menu link with the identical 2px gold rule (still one dose per page:
   the desktop nav is display:none whenever this is visible). */
.bx-menu__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--bx-seal-gold); }

/* Hero subline at the regular cut (Aug 2026, principal). The 19px light face on
   Ink Navy was the thinnest reading moment on the site; 400 is a bundled weight,
   so no new payload. Delivered site.css is left untouched — this overrides it. */
.bx-hero__sub { font-weight: 400; }

/* ==== about-contact.css ==== */
/* ---- /about/ + /contact/ (bx-abt / bx-ct) --------------------------------
   Tokens only; no border-radius, no shadows, no new colors. Gold on these
   pages = the aria-current nav marker (site.css) and nothing else. Green
   appears only on CTAs, the selected/focus states of the service radio
   cards, and form focus states. */

/* ---- shared paper header band (about + contact) ----
   Same band shape as the services/audiences pages: full-bleed hairline
   below, 84/72 vertical rhythm, 26px eyebrow-to-title gap. */
.bx-abt__band,
.bx-ct__band { border-bottom: 1px solid var(--bx-rule); }
.bx-abt__band > .bx-wrap,
.bx-ct__band > .bx-wrap { padding-top: 84px; padding-bottom: 72px; }
.bx-abt__band .bx-eyebrow,
.bx-ct__band .bx-eyebrow { margin-bottom: 26px; }
.bx-abt__title,
.bx-ct__title {
  margin: 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-display);
  line-height: var(--bx-lh-display);
  letter-spacing: var(--bx-ls-hero);
  max-width: 22ch;
  text-wrap: balance;
}
.bx-abt__lede,
.bx-ct__lede {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: var(--bx-fs-lead);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  text-wrap: pretty;
}

/* ---- /about/ bio: 7fr text / 5fr portrait plate ---- */
.bx-abt__bio { padding-top: var(--bx-section-y); padding-bottom: var(--bx-section-y); }
.bx-abt__bio-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--bx-gap);
  align-items: start;
}
.bx-abt__bio-lede {
  margin: 24px 0 26px;
  font-family: var(--bx-font-display);
  font-weight: 500;
  font-size: var(--bx-fs-h2);
  line-height: var(--bx-lh-heading);
  letter-spacing: var(--bx-ls-heading);
  max-width: 24ch;
}
.bx-abt__bio-text > p:not(.bx-eyebrow) {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: var(--bx-fs-body);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  text-wrap: pretty;
}
.bx-abt__plate { width: 100%; max-width: 440px; justify-self: end; }
/* The portrait plate takes the delivered image's own ratio (the principal's
   Aug 2026 headshot is 3807x3317) rather than forcing 3:4. */
.bx-abt__plate-img { aspect-ratio: auto; }

/* ---- /about/ approach: 3 hairline-ruled principle rows ---- */
.bx-abt__approach { border-top: 1px solid var(--bx-rule); background: var(--bx-paper-shade); }
.bx-abt__approach-inner {
  align-items: start;
  padding-top: var(--bx-section-y);
  padding-bottom: var(--bx-section-y);
}
.bx-abt__approach-lede {
  margin: 0;
  font-family: var(--bx-font-display);
  font-weight: 500;
  font-size: var(--bx-fs-h2);
  line-height: var(--bx-lh-heading);
  letter-spacing: var(--bx-ls-heading);
  max-width: 16ch;
}
.bx-abt__prin {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0 24px;
  align-items: baseline;
  padding: 30px 0;
  border-top: 1px solid var(--bx-rule);
}
.bx-abt__prin:first-child { border-top-color: var(--bx-rule-strong); }
.bx-abt__prin:last-child { border-bottom: 1px solid var(--bx-rule); }
.bx-abt__prin-idx { font-family: var(--bx-font-mono); font-size: var(--bx-fs-caption); color: var(--bx-graphite); }
.bx-abt__prin-title {
  margin: 0 0 10px;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-service);
  line-height: 1.2;
}
.bx-abt__prin-body {
  margin: 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-card);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ---- /contact/ scheduler block (primary CTA, above the form) ---- */
.bx-ct__sched { padding-top: 72px; padding-bottom: 72px; }
.bx-ct__sched-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  border: 1px solid var(--bx-rule);
  border-top: 2px solid var(--bx-rule-strong);
  padding: 44px 48px;
}
.bx-ct__sched-title {
  margin: 0 0 12px;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-h3);
  line-height: 1.2;
}
.bx-ct__sched-body {
  margin: 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-card);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ---- /contact/ form section ---- */
.bx-ct__write { padding-bottom: var(--bx-section-y-lg); }
.bx-ct__write-head {
  border-top: 1px solid var(--bx-rule-strong);
  padding-top: 44px;
  margin-bottom: 40px;
}
.bx-ct__write-lede {
  margin: 22px 0 0;
  font-family: var(--bx-font-display);
  font-weight: 500;
  font-size: var(--bx-fs-h2);
  line-height: var(--bx-lh-heading);
  letter-spacing: var(--bx-ls-heading);
}
.bx-ct__form { max-width: 940px; }
form[data-bx-form][hidden] { display: none !important; }

/* small-caps field label */
.bx-ct__label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--bx-font-caption);
  font-weight: 600;
  font-size: var(--bx-fs-caption);
  letter-spacing: var(--bx-ls-nav);
  text-transform: uppercase;
  color: var(--bx-ink-navy);
}
.bx-ct__opt { color: var(--bx-graphite); }

/* service-interest radio cards */
.bx-ct__svc { margin: 0 0 42px; padding: 0; border: 0; }
.bx-ct__svc .bx-ct__label { margin-bottom: 16px; padding: 0; }
.bx-ct__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.bx-ct__scard {
  position: relative;
  display: block;
  border: 1px solid var(--bx-rule);
  background: var(--bx-bond-paper);
  padding: 22px 24px 26px;
  cursor: pointer;
}
.bx-ct__scard--wide { grid-column: 1 / -1; }
.bx-ct__scard:hover { background: var(--bx-hover-wash); }
.bx-ct__scard input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bx-ct__scard-idx {
  display: block;
  margin-bottom: 14px;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-fs-caption);
  color: var(--bx-graphite);
}
.bx-ct__scard-title {
  display: block;
  margin-bottom: 10px;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-h3);
  line-height: 1.2;
  color: var(--bx-ink-navy);
}
.bx-ct__scard-body {
  display: block;
  font-size: var(--bx-fs-card);
  line-height: var(--bx-lh-card);
  font-weight: 300;
  color: var(--bx-body-text);
  text-wrap: pretty;
}
/* Selected/focus = Signature Green (sanctioned active state). */
.bx-ct__scard:has(input:checked) {
  border-color: var(--bx-signature-green);
  outline: 1px solid var(--bx-signature-green);
  outline-offset: -1px;
}
.bx-ct__scard:has(input:checked) .bx-ct__scard-idx { color: var(--bx-signature-green); }
.bx-ct__scard:has(input:focus-visible) {
  outline: 2px solid var(--bx-signature-green);
  outline-offset: 2px;
}

/* fields */
.bx-ct__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.bx-ct__field--full { grid-column: 1 / -1; }
.bx-ct__field input,
.bx-ct__field select,
.bx-ct__field textarea {
  width: 100%;
  background: var(--bx-bond-paper);
  border: 1px solid var(--bx-rule);
  border-bottom-width: 2px;
  border-bottom-color: var(--bx-rule);
  color: var(--bx-ink-navy);
  font-family: var(--bx-font-body);
  font-size: var(--bx-fs-body-sm);
  font-weight: 300;
  line-height: 1.5;
  padding: 13px 16px;
}
.bx-ct__field textarea { min-height: 170px; resize: vertical; }
.bx-ct__field input:focus,
.bx-ct__field select:focus,
.bx-ct__field textarea:focus {
  outline: none;
  border-color: var(--bx-signature-green);
}
/* Invalid state: Ink Navy 2px underline + Ink Navy inline message at
   weight 600. (Class applied by js/forms.js; no new colors.) */
.bx-ct__field.bx-field-invalid input,
.bx-ct__field.bx-field-invalid select,
.bx-ct__field.bx-field-invalid textarea { border-bottom-color: var(--bx-ink-navy); }
.bx-ct__msg {
  margin: 8px 0 0;
  font-family: var(--bx-font-caption);
  font-weight: 600;
  font-size: var(--bx-fs-caption);
  letter-spacing: 0.04em;
  color: var(--bx-graphite);
}
.bx-ct__field.bx-field-invalid .bx-ct__msg { color: var(--bx-ink-navy); }

/* turnstile + error + submit */
.bx-ct__foot {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.bx-ct__foot .bx-btn { border: 0; cursor: pointer; }
/* Disabled: drop the fill entirely rather than swap green for grey. Since
   --bx-graphite darkened it sat at the same lightness as the green CTA (1.11:1
   between states), so a filled button no longer read as inactive. An unfilled,
   hairline-bounded button is unambiguously inert and stays on-palette. */
.bx-ct__foot .bx-btn:disabled {
  background: transparent;
  color: var(--bx-graphite);
  box-shadow: inset 0 0 0 1px var(--bx-rule);
  cursor: default;
}
.bx-ct__error {
  border-left: 2px solid var(--bx-ink-navy);
  padding: 4px 0 4px 18px;
}
.bx-ct__error-msg {
  margin: 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-card);
  color: var(--bx-ink-navy);
  max-width: 62ch;
}

/* success state (replaces the form) */
.bx-ct__success {
  border-top: 2px solid var(--bx-rule-strong);
  padding-top: 36px;
  max-width: 62ch;
}
.bx-ct__success:focus { outline: none; }
.bx-ct__success-head {
  margin: 0 0 12px;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-h2);
  line-height: var(--bx-lh-heading);
}
.bx-ct__success-body {
  margin: 0;
  font-size: var(--bx-fs-body);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
}

/* ---- responsive (about + contact) ---- */
@media (max-width: 1100px) {
  .bx-abt__bio-grid { grid-template-columns: minmax(0, 1fr); }
  .bx-abt__plate { justify-self: start; }
}
@media (max-width: 900px) {
  .bx-ct__sched-box { padding: 34px 28px; }
}
@media (max-width: 700px) {
  .bx-abt__band > .bx-wrap, .bx-ct__band > .bx-wrap { padding-top: 56px; padding-bottom: 52px; }
  .bx-ct__cards { grid-template-columns: minmax(0, 1fr); }
  .bx-ct__fields { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bx-ct__field--full { grid-column: auto; }
}

/* ==== audiences.css ==== */
/* ---- /who-we-serve/ + the four audience pages ----
   All classes bx-aud-*; tokens.css variables only; no gold (the aria-current
   nav marker is each page's single dose); green only via bx-btn / link CTAs. */

/* Paper header band (inner-page pattern: eyebrow, H1, lede). */
.bx-aud-hero { border-bottom: 1px solid var(--bx-rule); }
.bx-aud-hero > .bx-wrap { padding-top: 84px; padding-bottom: 72px; }
.bx-aud-hero__title {
  margin: 26px 0 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-display);
  line-height: var(--bx-lh-display);
  letter-spacing: var(--bx-ls-hero);
  max-width: 20ch;
  text-wrap: balance;
}
.bx-aud-hero__lede {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: var(--bx-fs-lead);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  text-wrap: pretty;
}

/* /who-we-serve/ index: the four homepage cards. */
.bx-aud-cards { padding-top: var(--bx-section-y); padding-bottom: var(--bx-section-y-lg); }

/* Expanded problem statement (4fr/8fr split). */
.bx-aud-problem { padding-top: var(--bx-section-y); }
.bx-aud-problem__body p {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: var(--bx-fs-body);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  text-wrap: pretty;
}
.bx-aud-problem__body p:last-child { margin-bottom: 0; }

/* "Where we engage" — hairline-ruled service rows (reuses bx-row). */
.bx-aud-engage { padding-top: var(--bx-section-y); padding-bottom: var(--bx-section-y); }
.bx-aud-engage__head { margin: 0; }

/* Secondary text link to /contact/ — site-wide treatment: green underlined
   text link, matching the approved homepage's secondary-link language. */
.bx-aud-discuss { margin: 36px 0 0; font-size: var(--bx-fs-body-sm); }
.bx-aud-discuss a {
  color: var(--bx-signature-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* responsive (match the services/about/contact band rhythm) */
@media (max-width: 700px) {
  .bx-aud-hero > .bx-wrap { padding-top: 56px; padding-bottom: 52px; }
}

/* ==== insights.css ==== */
/* ---- /insights/ + post template ----
   Prefix: bx-ins. Tokens only; no new colors/fonts; no radius/shadows.
   Green appears only on .bx-btn (delivered) and form focus states.
   Gold on these pages = the aria-current nav marker (site.css) — none here. */

/* ---- index: header band (same shape as the other inner pages:
        full-bleed hairline below, 84/72 rhythm, 26px eyebrow gap) ---- */
.bx-ins-head { padding-top: 84px; padding-bottom: 72px; border-bottom: 1px solid var(--bx-rule); }
.bx-ins-head__title {
  margin: 26px 0 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-display);
  line-height: var(--bx-lh-display);
  letter-spacing: var(--bx-ls-hero);
  max-width: 20ch;
  text-wrap: balance;
}
.bx-ins-head__lede {
  margin: 28px 0 0;
  font-size: var(--bx-fs-lead);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 62ch;
}

/* ---- index: content-type sections ---- */
.bx-ins-sec { margin-top: var(--bx-section-y); }
.bx-ins-sec__inner {
  align-items: start;
  border-top: 1px solid var(--bx-rule-strong);
  padding-top: 34px;
}
.bx-ins-sec__teaser {
  margin: 18px 0 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 38ch;
}
.bx-ins-empty {
  margin: 0;
  padding: 6px 0 30px;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
}
.bx-ins-list { margin: 0; padding: 0; list-style: none; }
.bx-ins-item + .bx-ins-item { border-top: 1px solid var(--bx-rule); }
.bx-ins-item__link {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 34px;
  gap: 0 24px;
  align-items: baseline;
  padding: 24px 0;
  color: inherit;
  text-decoration: none;
}
.bx-ins-item__link:hover { background: var(--bx-hover-wash); }
.bx-ins-item__date {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-fs-caption);
  color: var(--bx-graphite);
}
.bx-ins-item__title {
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-h3);
  line-height: 1.25;
}
.bx-ins-item__link:hover .bx-ins-item__title { text-decoration: underline; text-underline-offset: 5px; }
.bx-ins-item__arrow { font-size: 20px; color: var(--bx-graphite); text-align: right; }

/* ---- index: subscribe band ---- */
.bx-ins-subscribe {
  margin-top: var(--bx-section-y);
  background: var(--bx-paper-shade);
  border-top: 1px solid var(--bx-rule);
  border-bottom: 1px solid var(--bx-rule);
}
.bx-ins-subscribe__inner { align-items: start; padding-top: 64px; padding-bottom: 72px; }
.bx-ins-subscribe__title {
  margin: 22px 0 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-h2);
  line-height: var(--bx-lh-heading);
  letter-spacing: var(--bx-ls-heading);
  max-width: 18ch;
}
.bx-ins-subscribe__body {
  margin: 16px 0 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 40ch;
}
.bx-ins-subscribe__form { padding-top: 8px; max-width: 560px; }

/* ---- forms (subscribe + gated downloads) ---- */
.bx-ins-form__label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--bx-font-caption);
  font-weight: 600;
  font-size: var(--bx-fs-caption);
  letter-spacing: var(--bx-ls-label);
  text-transform: uppercase;
  color: var(--bx-ink-navy);
}
.bx-ins-form__row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
/* Form submits stay buttons (not text links) but at the header CTA's
   bx-btn--sm scale so the page's one full-weight green CTA is the closing band. */
.bx-ins-form .bx-btn { border: 0; cursor: pointer; }
.bx-ins-form__input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 14px;
  font-family: var(--bx-font-body);
  font-size: var(--bx-fs-ui);
  color: var(--bx-ink-navy);
  background: var(--bx-bond-paper);
  border: 1px solid var(--bx-rule);
  border-radius: 0;
}
.bx-ins-form__input:focus {
  outline: 2px solid var(--bx-signature-green);
  outline-offset: -1px;
  border-color: var(--bx-signature-green);
}
.bx-ins-form .cf-turnstile { margin-top: 16px; }
.bx-ins-form__success,
.bx-ins-form__error {
  margin: 14px 0 0;
  font-size: var(--bx-fs-ui);
  line-height: var(--bx-lh-body);
  color: var(--bx-ink-navy);
}
.bx-ins-form__error { color: var(--bx-body-text); border-left: 2px solid var(--bx-rule-strong); padding-left: 12px; }

/* ---- index: gated downloads ---- */
.bx-ins-downloads { margin-top: var(--bx-section-y); padding-bottom: var(--bx-section-y); }
.bx-ins-dl {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--bx-gap);
  align-items: start;
  margin-top: 30px;
  border-top: 1px solid var(--bx-rule);
  padding-top: 34px;
}
.bx-ins-downloads > .bx-wrap > .bx-eyebrow + .bx-ins-dl { border-top: 1px solid var(--bx-rule-strong); }
.bx-ins-dl__title {
  margin: 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-h3);
  line-height: var(--bx-lh-heading);
  max-width: 30ch;
}
.bx-ins-dl__body {
  margin: 14px 0 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 58ch;
}

/* ---- post template ---- */
.bx-ins-post { padding-top: 84px; padding-bottom: var(--bx-section-y); }
.bx-ins-post__head { border-bottom: 1px solid var(--bx-rule-strong); padding-bottom: 38px; }
.bx-ins-post__title {
  margin: 26px 0 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-display);
  line-height: var(--bx-lh-display);
  letter-spacing: var(--bx-ls-hero);
  max-width: 24ch;
  text-wrap: balance;
}
.bx-ins-post__body {
  /* Prose is measured (below); the body itself is not, so data grids and code
     fences can use the full container the way the service pages' term-sheet
     motif does. 03-design-systems.md reserves ~68ch "for prose" and gives data
     the grid. */
  max-width: none;
  padding-top: 44px;
  font-size: var(--bx-fs-body);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
}
/* One article measure for every child. NOT `68ch`: ch resolves against each
   element's own font-size, so headings would silently run far wider than the
   prose beneath them. 602px == 68ch at the 18.5px body size. */
.bx-ins-post__body { --bx-post-measure: 602px; }
.bx-ins-post__body > * { max-width: var(--bx-post-measure); }
/* ...but tables and code fences are data, not prose: full container width. */
.bx-ins-post__body > .bx-ins-post__scroller,
.bx-ins-post__body > pre { max-width: 100%; }
.bx-ins-post__body p { margin: 0 0 1.35em; }
/* Authored content can exceed the measure: a bare citation URL, an identifier,
   an address. Break inside such a token rather than let it push the page
   sideways. (Tables and code fences get their own scroll boxes instead, so
   their internal formatting survives.) */
.bx-ins-post__body,
.bx-ins-post__body p,
.bx-ins-post__body li,
.bx-ins-post__body blockquote,
.bx-ins-post__body h2,
.bx-ins-post__body h3,
.bx-ins-post__body h4,
.bx-ins-post__title,
.bx-ins-item__title { overflow-wrap: anywhere; }
/* ...but NOT inside table cells: `anywhere` collapses each cell's min-content
   width to one character, so the table shrinks to width:100% instead of
   overflowing into its scroll box, and a wide table renders as letter-soup.
   Cells wrap normally and the scroller does its job. */
/* break-word, NOT anywhere: it lets a token that exceeds the cell cap break
   rather than print over the next column, but (unlike `anywhere`) it does not
   contribute to min-content sizing, so cells never collapse to one character
   and the scroller still governs genuinely wide grids. */
.bx-ins-post__body th,
.bx-ins-post__body td { overflow-wrap: break-word; max-width: 48ch; }
.bx-ins-post__body a {
  color: var(--bx-ink-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--bx-graphite);
}
.bx-ins-post__body a:hover { text-decoration-color: var(--bx-ink-navy); }
.bx-ins-post__body h2,
.bx-ins-post__body h3,
.bx-ins-post__body h4 {
  font-family: var(--bx-font-display);
  font-weight: 600;
  color: var(--bx-ink-navy);
  line-height: var(--bx-lh-heading);
  letter-spacing: var(--bx-ls-heading);
  margin: 2em 0 0.6em;
}
.bx-ins-post__body h2 { font-size: var(--bx-fs-h2); }
.bx-ins-post__body h3 { font-size: var(--bx-fs-h3); }
.bx-ins-post__body h4 { font-size: var(--bx-fs-lead); }
.bx-ins-post__body ul,
.bx-ins-post__body ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.bx-ins-post__body li { margin: 0 0 0.5em; }
.bx-ins-post__body li::marker { color: var(--bx-graphite); }
.bx-ins-post__body blockquote {
  margin: 0 0 1.35em;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--bx-rule-strong);
  color: var(--bx-ink-navy);
}
.bx-ins-post__body blockquote p:last-child { margin-bottom: 0; }
.bx-ins-post__body code {
  font-family: var(--bx-font-mono);
  font-size: 0.82em;
  color: var(--bx-ink-navy);
  background: var(--bx-paper-shade);
  padding: 2px 6px;
}
.bx-ins-post__body pre {
  margin: 0 0 1.35em;
  padding: 20px 22px;
  background: var(--bx-paper-shade);
  border: 1px solid var(--bx-rule);
  overflow-x: auto;
}
.bx-ins-post__body pre code { padding: 0; background: none; font-size: 13px; line-height: 1.7; }
.bx-ins-post__scroller {
  /* A wide authored table scrolls inside this box; the page never scrolls
     sideways. Focusable so keyboard users can reach the scroll area. */
  max-width: 100%;
  margin: 0 0 1.6em;
  overflow-x: auto;
}
.bx-ins-post__scroller:focus-visible,
.bx-ins-post__body pre:focus-visible { outline: 2px solid var(--bx-signature-green); outline-offset: 2px; }
.bx-ins-post__body table {
  /* Size to content, not to the container: a two-column metrics grid stretched
     to 1240px strands a value half a page from its label. Wider-than-container
     grids overflow into the scroller instead. */
  width: auto;
  max-width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--bx-fs-ui);
}
.bx-ins-post__body th:not([align]) { text-align: left; }
.bx-ins-post__body th {
  font-family: var(--bx-font-caption);
  font-weight: 600;
  font-size: var(--bx-fs-caption);
  letter-spacing: var(--bx-ls-label);
  text-transform: uppercase;
  color: var(--bx-ink-navy);
  border-bottom: 1px solid var(--bx-rule-strong);
  padding: 10px 24px 10px 0;
}
.bx-ins-post__body td {
  border-bottom: 1px solid var(--bx-rule);
  padding: 12px 24px 12px 0;
  vertical-align: top;
  font-size: var(--bx-fs-ui);
  /* Figures align without forcing prose cells into 13px mono: the brief scopes
     the mono face to tabular figures, and cells carry both. */
  font-variant-numeric: tabular-nums;
}
.bx-ins-post__body hr { border: 0; border-top: 1px solid var(--bx-rule); margin: 2.2em 0; }
.bx-ins-post__body img { max-width: 100%; height: auto; }
.bx-ins-post__close {
  max-width: var(--bx-post-measure, 602px);
  margin: 0;
  border-top: 1px solid var(--bx-rule);
  padding-top: 30px;
  font-size: var(--bx-fs-lead);
  font-weight: 300;
}
.bx-ins-post__close a {
  color: var(--bx-ink-navy);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--bx-graphite);
}
.bx-ins-post__close a:hover { text-decoration-color: var(--bx-ink-navy); }

/* ---- 404 ---- */
.bx-ins-notfound { padding-top: 84px; padding-bottom: var(--bx-section-y-lg); }
.bx-ins-notfound__title {
  margin: 26px 0 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-display);
  line-height: var(--bx-lh-display);
  letter-spacing: var(--bx-ls-hero);
}
.bx-ins-notfound__body { margin: 22px 0 0; font-size: var(--bx-fs-lead); font-weight: 300; color: var(--bx-body-text); }
.bx-ins-notfound__body a { color: var(--bx-ink-navy); text-decoration: underline; text-underline-offset: 4px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .bx-ins-dl { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bx-ins-item__link { grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 0 16px; }
}
@media (max-width: 700px) {
  .bx-ins-head { padding-top: 56px; padding-bottom: 52px; }
  .bx-ins-post { padding-top: 56px; }
  .bx-ins-item__link { grid-template-columns: minmax(0, 1fr) 24px; }
  .bx-ins-item__date { grid-column: 1 / -1; margin-bottom: 8px; }
}

/* 404 (bx-page-notfound): the only page short enough to leave body background
   visible under the footer; pin the footer to the viewport bottom. Scoped to
   this body class so no other page's layout is touched. */
body.bx-page-notfound {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.bx-page-notfound main {
  flex: 1 0 auto;
}

/* ==== privacy.css ==== */
/* ---- /privacy/ (bx-priv-) ------------------------------------------------
   Tokens only; no new colors, fonts, radius, or shadows. /privacy/ carries no
   nav item, so it has no aria-current marker and therefore no gold at all,
   which is the correct dose for this page. Green appears once: the contact
   link in section 10, styled as the site's secondary text-link treatment. */

/* ---- paper header band (same shape as /about/ and the service pages) ---- */
.bx-priv__band { border-bottom: 1px solid var(--bx-rule); }
.bx-priv__band > .bx-wrap { padding-top: 84px; padding-bottom: 72px; }
.bx-priv__band .bx-eyebrow { margin-bottom: 26px; }
.bx-priv__title {
  margin: 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-display);
  line-height: var(--bx-lh-display);
  letter-spacing: var(--bx-ls-hero);
  max-width: 22ch;
  text-wrap: balance;
}
.bx-priv__lede {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: var(--bx-fs-lead);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  text-wrap: pretty;
}
.bx-priv__meta {
  margin: 30px 0 0;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bx-graphite);
}

/* ---- contents ---- */
.bx-priv__toc { padding-top: 52px; padding-bottom: 52px; }
.bx-priv__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bx-priv-toc;
  columns: 2;
  column-gap: var(--bx-gap);
}
.bx-priv__toc-list li {
  position: relative;
  counter-increment: bx-priv-toc;
  break-inside: avoid;
  margin: 0 0 10px;
  /* Hanging indent: a title that wraps stays clear of its index. */
  padding-left: 34px;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-card);
  font-weight: 300;
  color: var(--bx-body-text);
}
.bx-priv__toc-list li::before {
  content: counter(bx-priv-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.3em;
  font-family: var(--bx-font-mono);
  font-size: var(--bx-fs-mono);
  color: var(--bx-graphite);
}
.bx-priv__toc-list a {
  color: var(--bx-ink-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--bx-rule);
}
.bx-priv__toc-list a:hover { color: var(--bx-ink-navy); text-decoration-color: var(--bx-ink-navy); }

/* ---- numbered sections: index + title left, prose right (4fr/8fr) ---- */
.bx-priv-sec {
  border-top: 1px solid var(--bx-rule);
  padding-top: 56px;
  padding-bottom: 56px;
  /* Sticky header is 130px tall; keep an anchored heading clear of it. */
  scroll-margin-top: calc(var(--bx-header-h) + 16px);
}
.bx-priv-sec--last { border-bottom: 1px solid var(--bx-rule); }
.bx-priv-sec__head .bx-eyebrow { margin-bottom: 14px; }
.bx-priv-h2 {
  margin: 0;
  font-family: var(--bx-font-display);
  font-weight: 500;
  font-size: var(--bx-fs-teaser);
  line-height: var(--bx-lh-heading);
  letter-spacing: var(--bx-ls-heading);
  max-width: 20ch;
  text-wrap: balance;
}

/* ---- prose at the article measure ----
   602px, not 68ch: `ch` resolves against each element's own font-size, so a
   mixed-size column would not share one measure. Matches the post body. */
.bx-priv-prose {
  --bx-priv-measure: 602px;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
}
.bx-priv-prose > * { max-width: var(--bx-priv-measure); }
.bx-priv-prose > .bx-priv-terms { max-width: 100%; }
.bx-priv-prose p { margin: 0 0 20px; text-wrap: pretty; }
.bx-priv-prose > :last-child { margin-bottom: 0; }
/* A long token (an identifier, a URL a reader pastes) breaks rather than
   pushing the page sideways. */
.bx-priv-prose,
.bx-priv-prose p,
.bx-priv-prose li { overflow-wrap: anywhere; }
.bx-priv-prose strong { font-weight: 600; color: var(--bx-ink-navy); }
.bx-priv-prose a {
  color: var(--bx-ink-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--bx-graphite);
}
.bx-priv-prose a:hover { color: var(--bx-ink-navy); text-decoration-thickness: 2px; }

.bx-priv-list { margin: 0 0 20px; padding-left: 0; list-style: none; }
.bx-priv-list li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
  line-height: var(--bx-lh-card);
  text-wrap: pretty;
}
.bx-priv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  border-top: 1px solid var(--bx-graphite);
}

/* ---- labeled rows (the term-sheet motif, applied to field inventories) ---- */
.bx-priv-terms {
  margin: 26px 0 26px;
  border-top: 1px solid var(--bx-rule-strong);
}
.bx-priv-term {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 0 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bx-rule);
}
.bx-priv-term__label {
  margin: 0;
  font-family: var(--bx-font-caption);
  font-weight: 600;
  font-size: var(--bx-fs-eyebrow);
  letter-spacing: var(--bx-ls-label);
  text-transform: uppercase;
  color: var(--bx-ink-navy);
  line-height: 1.5;
  padding-top: 3px;
}
.bx-priv-term__desc {
  margin: 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-card);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 58ch;
  text-wrap: pretty;
}

/* ---- the one green accent: the route for privacy requests ---- */
.bx-priv-prose a.bx-priv-link {
  color: var(--bx-signature-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
}
.bx-priv-prose a.bx-priv-link:hover { color: var(--bx-green-hover); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .bx-priv__toc-list { columns: 1; }
}
@media (max-width: 700px) {
  .bx-priv__band > .bx-wrap { padding-top: 56px; padding-bottom: 52px; }
  .bx-priv__toc { padding-top: 40px; padding-bottom: 40px; }
  .bx-priv-sec { padding-top: 44px; padding-bottom: 44px; }
  .bx-priv-term { grid-template-columns: minmax(0, 1fr); gap: 8px 0; }
  .bx-priv-term__label { padding-top: 0; }
}

/* ==== services.css ==== */
/* ---- /services/ index + the four service pages (bx-svc-) ----
   Owned by the services builder. Tokens only; no new colors, fonts,
   radius, or shadows. Green appears ONLY via the shared .bx-btn;
   gold appears nowhere (the aria-current nav marker is the page dose). */

/* header band (paper) */
.bx-svc-hero { border-bottom: 1px solid var(--bx-rule); }
.bx-svc-hero__inner { padding-top: 84px; padding-bottom: 72px; }
.bx-svc-hero__title {
  margin: 26px 0 0;
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: var(--bx-fs-display);
  line-height: var(--bx-lh-display);
  letter-spacing: var(--bx-ls-hero);
  max-width: 22ch;
  text-wrap: balance;
}
.bx-svc-hero__lede {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: var(--bx-fs-lead);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  text-wrap: pretty;
}

/* generic section: eyebrow + h2 left, content right (bx-split 4fr/8fr) */
.bx-svc-section { padding-top: var(--bx-section-y); padding-bottom: var(--bx-section-y); }
.bx-svc-section--rule { border-top: 1px solid var(--bx-rule); }
.bx-svc-section--band { border-top: 1px solid var(--bx-rule); background: var(--bx-paper-shade); }
.bx-svc-section__head .bx-eyebrow { margin-bottom: 20px; }
.bx-svc-h2 {
  margin: 0;
  font-family: var(--bx-font-display);
  font-weight: 500;
  font-size: var(--bx-fs-h2);
  line-height: var(--bx-lh-heading);
  letter-spacing: var(--bx-ls-heading);
  max-width: 18ch;
}

/* term-sheet rows (System A signature motif) */
.bx-svc-terms { border-top: 1px solid var(--bx-rule-strong); }
.bx-svc-terms-head { margin: 52px 0 20px; }
.bx-svc-term {
  display: grid;
  grid-template-columns: 58px minmax(0, 200px) minmax(0, 1fr);
  gap: 0 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--bx-rule);
}
/* Unindexed (categorical) rows — M&A. Same three-column grid as the indexed
   rows with the index cell left empty, so the label and description columns
   start at the same x on every sibling service page. */
.bx-svc-term--plain { grid-template-columns: 58px minmax(0, 200px) minmax(0, 1fr); }
.bx-svc-term--plain .bx-svc-term__label { grid-column: 2; }
.bx-svc-term--plain .bx-svc-term__desc { grid-column: 3; }
.bx-svc-term__idx {
  font-family: var(--bx-font-mono);
  font-size: var(--bx-fs-caption);
  color: var(--bx-graphite);
  padding-top: 4px;
}
.bx-svc-term__label {
  margin: 0;
  font-family: var(--bx-font-caption);
  font-weight: 600;
  font-size: var(--bx-fs-eyebrow);
  letter-spacing: var(--bx-ls-label);
  text-transform: uppercase;
  color: var(--bx-ink-navy);
  line-height: 1.5;
  padding-top: 3px;
}
.bx-svc-term__desc {
  margin: 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-card);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 60ch;
  text-wrap: pretty;
}

/* who it's for */
.bx-svc-profiles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bx-rule-strong); }
.bx-svc-profiles li {
  padding: 24px 0;
  border-bottom: 1px solid var(--bx-rule);
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-card);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 66ch;
  text-wrap: pretty;
}
.bx-svc-profiles a {
  color: var(--bx-ink-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.bx-svc-profiles a:hover { color: var(--bx-ink-navy); text-decoration-thickness: 2px; }
.bx-svc-profiles-note {
  margin: 24px 0 0;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 66ch;
  text-wrap: pretty;
}

/* proof element */
.bx-svc-proof__body p {
  margin: 0 0 22px;
  font-size: var(--bx-fs-body-sm);
  line-height: var(--bx-lh-body);
  font-weight: 300;
  color: var(--bx-body-text);
  max-width: 66ch;
  text-wrap: pretty;
}
.bx-svc-proof__body p:last-of-type { margin-bottom: 0; }
.bx-svc-figure { margin: 40px 0 0; }
.bx-svc-figure svg { display: block; width: 100%; height: auto; }

/* secondary "Discuss your …" text link — site-wide treatment: green underlined
   text link, matching the approved homepage's secondary-link language
   (.bx-insight__links). Same rule shape as .bx-aud-discuss (audiences.css). */
.bx-svc-discuss { margin: 36px 0 0; font-size: var(--bx-fs-body-sm); }
.bx-svc-discuss a {
  color: var(--bx-signature-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* services index rows */
.bx-svc-index-rows { padding-top: var(--bx-section-y); padding-bottom: var(--bx-section-y); }

/* responsive */
@media (max-width: 700px) {
  .bx-svc-hero__inner { padding-top: 56px; padding-bottom: 52px; }
  .bx-svc-section { padding-top: 64px; padding-bottom: 64px; }
  .bx-svc-term,
  .bx-svc-term--plain { grid-template-columns: minmax(0, 1fr); gap: 10px 0; }
  .bx-svc-term--plain .bx-svc-term__label,
  .bx-svc-term--plain .bx-svc-term__desc { grid-column: auto; }
  .bx-svc-term__idx { padding-top: 0; }
  .bx-svc-term__label { padding-top: 0; }
}