/* theme.css — Bastion Global.
   ============================================================================
   The brief, from Bastion_Brand_Standards.docx 7 (Visual Identity Direction) and the
   five design principles in 80_Reusable_Assets/Brand_and_Design/Design_Principles:

     Register: "Restrained, premium, old-money-adjacent, private-client, advisory-grade."
     Avoid:    "SaaS-startup visual clichés, growth-hacker energy, generic AI-agency
                blue-gradient-and-robot iconography, decorative accent bars or color
                stripes as a design crutch."
     Principle: status through "judgment, spacing, materials, specificity, and restraint
                rather than ornament or hype"; "calm composition, accessible contrast,
                visible proof, non-manipulative interaction".

   Citadel Media's theme is already iron, evergreen, brass and a geometric sans. Recolouring
   that would produce the same firm twice, so Bastion takes its own decisions instead:

     1. A serif with a true italic. The brand's characteristic sentence is "We do not X.
        We Y." — negation, then correction. The correction gets the italic. That is a
        typographic decision derived from the doctrine, not decoration.
     2. Cold stone, not warm forest. Citadel is evergreen; Bastion is slate.
     3. Square geometry — 2px, never a pill. Architectural, and not the SaaS control.
     4. Colour held back as an event. One bronze, used only on the mark, a rule, and the
        current state. No accent bars, no stripes, no gradient anywhere.
     5. Space does the separating. Sections are divided by air and one hairline.
   ============================================================================ */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; font-style: normal; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; font-style: italic; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/karla-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("/assets/fonts/plex-condensed-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Stone and iron, cold. Nothing here is shared with Citadel's palette. */
  --slate-black: #0B0E12;
  --slate: #12161C;
  --slate-raised: #191E26;
  --graphite: #232932;
  --limestone: #E9E6DF;
  --limestone-dim: #B9B6AE;
  --limestone-faint: #8E9098;   /* was #7C7E84: 4.47:1 on the card surface, under AA */
  --bronze: #8C7853;
  --bronze-lit: #A89065;

  --surface-canvas: var(--slate-black);
  --surface-card: var(--slate);
  --surface-card-hover: var(--slate-raised);
  --surface-system: #070910;
  --text-primary: var(--limestone);
  --text-secondary: var(--limestone-dim);
  --text-accent: var(--bronze-lit);
  --border-default: color-mix(in oklab, var(--limestone) 16%, transparent);
  --border-emphasis: color-mix(in oklab, var(--limestone) 34%, transparent);
  --border-accent: var(--bronze);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-numeric: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", sans-serif;

  --text-micro: 12px; --text-label: 12px; --text-eyebrow: 12px; --text-control: 13px;
  --text-body: 16.5px; --text-lead: 20px;
  --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px;
  --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px;

  /* square, not pill */
  --radius-pill: 2px; --radius-card: 2px; --radius-sharp: 0px; --r: 2px; --border-hairline: 1px;
  --motion-fast: 130ms; --motion-base: 420ms; --motion-ease: cubic-bezier(.2, 0, 0, 1);
  --dur: 420ms; --ease: cubic-bezier(.2, 0, 0, 1);

  /* the engine's tokens, mapped */
  --nb-canvas: var(--slate-black); --nb-surface: var(--slate); --nb-plate: var(--surface-system);
  --nb-lift: var(--slate); --nb-lift-2: var(--slate-raised);
  --nb-ink: var(--limestone); --nb-ink-soft: var(--limestone-dim); --nb-ink-body: var(--limestone-dim);
  --nb-accent: var(--bronze-lit); --nb-accent-ink: var(--slate-black);
  --nb-hairline: color-mix(in oklab, var(--limestone) 11%, transparent);
  --nb-hairline-strong: color-mix(in oklab, var(--limestone) 24%, transparent);
  --nb-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --sc-canvas: var(--slate-black); --sc-surface: var(--slate); --sc-ink: var(--limestone);
  --sc-ink-soft: var(--limestone-dim); --sc-accent: var(--bronze-lit); --sc-accent-ink: var(--slate-black);
  --sc-btn: var(--limestone); --sc-btn-hover: #FFFFFF;
  --nb-font-display: var(--font-display); --nb-font-text: var(--font-body); --nb-font-num: var(--font-numeric);
  --sc-font-display: var(--font-display); --sc-font-text: var(--font-body);
}

body { background: var(--surface-canvas); color: var(--text-primary); font-family: var(--font-body);
  font-size: var(--text-body); line-height: 1.62; -webkit-font-smoothing: antialiased; }

/* ---- type: a serif that is set quietly, not dramatically ---- */
h1, h2, h3, .sc-display {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em;
  font-variation-settings: "SOFT" 0, "WONK" 0; text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.1; margin: 0 0 var(--spacing-6); }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.3rem); line-height: 1.18; margin: 0 0 var(--spacing-4); }
h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.28rem); line-height: 1.34; margin: 0 0 var(--spacing-3); }
p { margin: 0 0 var(--spacing-4); max-width: 68ch; }
a { color: inherit; }

/* The brand's sentence shape: negation, then the correction in italic. */
em, .said em, .lede em, h1 em, h2 em { font-style: italic; color: var(--text-primary); }
.doctrine {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem); line-height: 1.34; letter-spacing: -0.012em;
  max-width: 46ch; margin: 0;
}
.doctrine em { font-style: italic; }
.doctrine__cite { display: block; margin-top: var(--spacing-4); font-family: var(--font-numeric);
  font-size: var(--text-label); text-transform: uppercase; letter-spacing: .1em; color: var(--limestone-faint); }

.eyebrow, .strip__label {
  font-family: var(--font-numeric); font-size: var(--text-eyebrow); text-transform: uppercase;
  letter-spacing: .13em; color: var(--limestone-faint); margin: 0 0 var(--spacing-4); font-weight: 400;
}
.micro { font-size: var(--text-micro); line-height: 1.5; }
.lede, .phead__stand, .strip__lead, .band__copy > p:first-of-type {
  font-size: var(--text-lead); line-height: 1.5; color: var(--text-primary); max-width: 54ch;
}

/* ---- the mark: the client's own arms, where there is room for them ---- */
.lockup { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.lockup::before { content: ""; width: 22px; height: 1px; background: var(--bronze); flex: none; }
.lockup--foot { display: grid; justify-items: start; gap: .9rem; }
.lockup--foot::before { display: none; }
/* the mono plate ships light, so it needs no lift; the raster did */
.crest { width: 104px; height: auto; display: block; }
.lockup--foot .lockup__name { font-size: 1.5rem; }
.lockup__words { display: grid; line-height: 1; }
.lockup__name { font-family: var(--font-display); font-weight: 400; font-size: 1.28rem; letter-spacing: .02em; }
.lockup__sub { font-family: var(--font-numeric); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .34em; color: var(--limestone-faint); margin-top: 3px; }
.lockup--foot .bmark { width: 34px; } .lockup--foot .lockup__name { font-size: 1.4rem; }

/* ---- controls: square, high contrast, and obviously buttons ---- */
html body .btn, html body .nav__cta, html body .btn--sm, html body .work__filters button {
  border-radius: var(--r); min-height: 46px; padding: 11px 22px;
  font-family: var(--font-numeric); font-size: var(--text-control); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 400; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap; box-shadow: none; text-decoration: none;
  transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}
html body .btn--solid, html body .nav__cta {
  background: var(--limestone); color: var(--slate-black); border: 1px solid var(--limestone);
}
html body .btn--solid:hover, html body .nav__cta:hover { background: #FFFFFF; border-color: #FFFFFF; }
html body .btn:not(.btn--solid):not(.nav__cta) {
  background: transparent; color: var(--limestone); border: 1px solid var(--border-default);
}
html body .btn:not(.btn--solid):not(.nav__cta):hover {
  border-color: var(--border-emphasis); background: color-mix(in oklab, var(--limestone) 6%, transparent);
}
html body .btn:focus-visible, html body .nav__cta:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 3px; }
.btn--sm { min-height: 40px; padding: 9px 16px; font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--spacing-6) 0 0; }

/* ---- the standing strip and the header ---- */
.system-strip { background: var(--surface-system); border-bottom: 1px solid var(--nb-hairline);
  padding: 8px var(--nb-gutter); text-align: center; }
.system-strip .micro { color: var(--limestone-faint); font-family: var(--font-numeric);
  letter-spacing: .02em; text-transform: none; }
.system-strip .sep { margin: 0 .6rem; color: var(--bronze); }
.nav { background: color-mix(in oklab, var(--slate-black) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nb-hairline); }
.nav__link, .nav__panel a, .nav__more summary {
  font-family: var(--font-numeric); font-size: var(--text-control); text-transform: uppercase;
  letter-spacing: .1em; color: var(--limestone-dim); text-decoration: none;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--limestone); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--bronze-lit); }
.nav__menu { background: var(--slate); border: 1px solid var(--nb-hairline); border-radius: var(--r); }
.nav__menu a { display: grid; gap: 2px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.nav__menu a small { text-transform: none; letter-spacing: 0; color: var(--limestone-faint); font-size: var(--text-micro); }

/* ---- sections: air and one hairline, no coloured bars ---- */
.strip, .band, .phead, .act-end { padding-block: clamp(3.2rem, 7vw, 6.5rem); }
.strip + .strip, .band + .band, .strip + .band, .band + .strip {
  border-top: 1px solid var(--nb-hairline);
}
.card, .svc > li, .creed > div, .tier {
  background: var(--surface-card); border: 1px solid var(--nb-hairline); border-radius: var(--r);
  padding: var(--spacing-6);
}
.card h3 { font-family: var(--font-display); font-weight: 400; }
.card p { color: var(--text-secondary); margin-bottom: 0; }
.card__note { margin-top: var(--spacing-3); padding-top: var(--spacing-3);
  border-top: 1px solid var(--nb-hairline); color: var(--limestone-faint); font-size: 14px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.steps li { border-top: 1px solid var(--border-accent); padding-top: var(--spacing-4); }
.steps .n { font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .1em;
  color: var(--bronze-lit); display: block; margin-bottom: var(--spacing-3); }
.steps h3 { font-size: 1.08rem; }
.steps p { color: var(--text-secondary); margin-bottom: 0; font-size: 15.5px; }

.spec-row { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: var(--spacing-6) 0 0; background: var(--nb-hairline); border: 1px solid var(--nb-hairline); }
.spec-row > div { background: var(--surface-canvas); padding: var(--spacing-4) var(--spacing-4) var(--spacing-6); }
.spec-row dt { font-family: var(--font-numeric); font-size: var(--text-label); text-transform: uppercase;
  letter-spacing: .11em; color: var(--limestone-faint); margin-bottom: var(--spacing-3); }
.spec-row dd { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.16rem; line-height: 1.3; }
.spec-row dd small { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 14px;
  line-height: 1.5; color: var(--text-secondary); }

.band__in { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.band--right .band__in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.band--right .band__copy { order: 2; }
.band__media { margin: 0; } .band__media img { width: 100%; height: auto; display: block; border-radius: var(--r); }
figcaption { margin-top: var(--spacing-3); font-family: var(--font-numeric); font-size: var(--text-micro);
  text-transform: uppercase; letter-spacing: .09em; color: var(--limestone-faint); }
@media (max-width: 900px) { .band__in, .band--right .band__in { grid-template-columns: 1fr; }
  .band--right .band__copy { order: 0; } }

.faq h3 { font-family: var(--font-display); font-weight: 400; margin-top: var(--spacing-8); }
.faq h3:first-child { margin-top: 0; }
.faq p { color: var(--text-secondary); }

.pullquote { padding-block: clamp(3rem, 6vw, 5.5rem); }
.pullquote blockquote { margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.05rem); line-height: 1.32; letter-spacing: -0.012em; max-width: 44ch; }
.pullquote cite { display: block; margin-top: var(--spacing-4); font-style: normal;
  font-family: var(--font-numeric); font-size: var(--text-label); text-transform: uppercase;
  letter-spacing: .1em; color: var(--limestone-faint); }

.act-end { border-top: 1px solid var(--nb-hairline); background: var(--surface-system); }
.act-end__lead { font-size: var(--text-lead); line-height: 1.5; max-width: 50ch; }
.act-end__note { color: var(--limestone-faint); margin-top: var(--spacing-6); }

/* ---- the persistent controls ---- */
.callbar { background: color-mix(in oklab, var(--slate-black) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--nb-hairline); border-radius: var(--r); }
.callbar__status { font-family: var(--font-numeric); font-size: var(--text-micro);
  text-transform: uppercase; letter-spacing: .08em; color: var(--limestone-faint); }
html body a.chat-launch {
  background: var(--limestone); color: var(--slate-black); border: 1.5px solid var(--limestone);
  border-radius: var(--r); box-shadow: 0 5px 12px -6px rgba(0, 0, 0, .75);
  font-family: var(--font-numeric); font-size: var(--text-control); text-transform: uppercase; letter-spacing: .09em;
}
.bot { background: var(--slate); color: var(--text-primary); border: 1px solid var(--nb-hairline-strong); border-radius: var(--r); }
.bot__head h2 { font-family: var(--font-display); font-weight: 400; margin: 0; font-size: 1.2rem; }
.bot__chips button { border-radius: var(--r); border: 1px solid var(--border-default);
  background: transparent; color: var(--limestone-dim); font-family: var(--font-body); font-size: 14px; }
.bot__chips button:hover { color: var(--limestone); border-color: var(--border-emphasis); }
.bot__ask input { background: var(--slate-black); border: 1px solid var(--border-default);
  border-radius: var(--r); color: var(--limestone); font-family: var(--font-body); }

/* ---- film copy: legibility on the glyphs, never a wash over the picture ---- */
.sc-copy .sc-display, .sc-copy .sc-lede, .sc-copy .sc-body { paint-order: stroke fill; }
.sc-copy .sc-display { color: #FFFFFF; -webkit-text-stroke: 3px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72), 0 2px 14px rgba(0, 0, 0, .5); }
.sc-copy .sc-lede, .sc-copy .sc-body { color: #FFFFFF; -webkit-text-stroke: 2.4px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72); }
.rail__leg { font-family: var(--font-numeric); font-size: 12px; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255, 255, 255, .84); text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.rail__leg[aria-current="true"] { color: #fff; }

/* ---- housekeeping ---- */
.skip-link { background: var(--limestone); color: var(--slate-black); border-radius: var(--r); }
.grain { opacity: .14; }
main img { filter: none; }
.crumbs, .crumbs a { font-family: var(--font-numeric); font-size: var(--text-micro);
  text-transform: uppercase; letter-spacing: .09em; color: var(--limestone-faint); }
.crumbs [aria-current] { color: var(--limestone-dim); }
.ft { border-top: 1px solid var(--nb-hairline); padding-block: clamp(3rem, 6vw, 5rem); }
.ft__grid { display: grid; gap: var(--spacing-8); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.ft__grid > div:first-child { grid-column: span 2; min-width: 0; }
.ft h2 { font-family: var(--font-numeric); font-size: var(--text-eyebrow); text-transform: uppercase;
  letter-spacing: .11em; color: var(--limestone-faint); font-weight: 400; margin-bottom: var(--spacing-4); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ft a { text-decoration: none; color: var(--text-secondary); }
.ft a:hover { color: var(--limestone); }
.ft__note { color: var(--limestone-faint); font-size: 14.5px; max-width: 46ch; }
.ft__legal { margin-top: var(--spacing-10); padding-top: var(--spacing-6);
  border-top: 1px solid var(--nb-hairline); color: var(--limestone-faint); font-size: 13.5px; max-width: none; }
@media (max-width: 620px) { .ft__grid > div:first-child { grid-column: 1; } html body { padding-bottom: 76px; } }

/* ============================================================================
   Components this site introduces, which the shared engine does not know about.
   ============================================================================ */

/* ---- the hero: copy left, the two lines beside it ---- */
.act0 { position: relative; isolation: isolate; }
.act0__plate { position: absolute; inset: 0; z-index: -2; }
.act0__plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A light left-weighted ground only. The type carries its own legibility on the glyphs,
   so the photograph is not washed out to make the words work. */
.act0__panel {
  max-width: 82rem; width: 100%; margin: 0 auto; box-sizing: border-box;
  padding: clamp(2.5rem, 6vw, 5rem) var(--nb-gutter) clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 25rem);
  gap: 2.5rem 3.5rem; align-items: end;
}
/* The scrim is full-bleed on the section, not on the centred panel. Painting it on
   .act0__panel meant it ended with the 82rem panel and left a hard vertical step
   partway across the photograph on any viewport wider than that. */
.act0::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(96deg,
    color-mix(in oklab, var(--slate-black) 82%, transparent) 0 34%,
    color-mix(in oklab, var(--slate-black) 52%, transparent) 68%,
    color-mix(in oklab, var(--slate-black) 34%, transparent) 100%);
}
.act0__copy, .act0__side { min-width: 0; }
/* the Ask Bastion launcher is position:fixed bottom-right and was overlapping the
   last line of the side column; reserve its height at the breakpoints where they meet */
.act0__panel { padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + 64px); }
.act0__copy h1, .act0__promise, .hero-category, .hero-note {
  paint-order: stroke fill; -webkit-text-stroke: 1px rgba(0, 0, 0, .3);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.act0__copy h1 { -webkit-text-stroke-width: 1.4px; max-width: 22ch; }
.hero-category { font-family: var(--font-numeric); font-size: var(--text-eyebrow);
  text-transform: none; letter-spacing: .04em; color: var(--limestone-dim); max-width: 52ch;
  margin: 0 0 var(--spacing-6); }
.act0__promise { font-size: var(--text-lead); line-height: 1.5; max-width: 46ch; }
.hero-note { font-size: 14px; color: var(--limestone-dim); margin: var(--spacing-4) 0 0; max-width: 46ch; }
@media (max-width: 900px) {
  .act0__panel { grid-template-columns: 1fr; gap: 1.6rem; }
  .act0::before { background: linear-gradient(180deg,
      color-mix(in oklab, var(--slate-black) 64%, transparent) 0 26%,
      color-mix(in oklab, var(--slate-black) 88%, transparent) 68%); }
}

/* ---- the two lines, as a panel ---- */
.lines { display: grid; gap: 10px; margin: 0; }
.line { background: color-mix(in oklab, var(--slate) 92%, transparent);
  border: 1px solid var(--nb-hairline-strong); border-radius: var(--r);
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-6); display: grid; gap: 8px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.line__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.22rem;
  display: grid; justify-items: start; gap: 4px; }
.line__tag { font-family: var(--font-numeric); font-size: 12px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--bronze-lit); }
.line__job { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; max-width: none; }
.line .btn { justify-self: start; margin-top: 4px; }
.line__note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--limestone-faint); max-width: none; }
.line__note a { color: var(--limestone-dim); text-underline-offset: 3px; }
@media (max-width: 620px) { .line .btn { justify-self: stretch; width: 100%; } }

/* ---- the rung ladder ---- */
.rungs { display: grid; gap: 1px; margin: var(--spacing-6) 0 0;
  background: var(--nb-hairline); border: 1px solid var(--nb-hairline); }
.rung { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) auto;
  align-items: center; gap: 1rem; padding: var(--spacing-4) var(--spacing-4);
  background: var(--surface-canvas); text-decoration: none; color: inherit;
  transition: background var(--motion-fast) var(--motion-ease); }
.rung:hover, .rung:focus-visible { background: var(--surface-card); }
.rung:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: -2px; }
.rung__name { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }
.rung__fn { color: var(--text-secondary); font-size: 15px; }
.rung__go { color: var(--bronze-lit); font-size: 1.1rem; }
.rungs--wide .rung--wide { grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) auto auto; }
.rung__avail { font-family: var(--font-numeric); font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; padding: 4px 9px; border: 1px solid var(--nb-hairline-strong);
  border-radius: var(--r); white-space: nowrap; color: var(--limestone-dim); }
.rung__avail--open { color: var(--slate-black); background: var(--bronze-lit); border-color: var(--bronze-lit); }
@media (max-width: 760px) {
  .rung, .rungs--wide .rung--wide { grid-template-columns: 1fr auto; row-gap: 6px; }
  .rung__fn { grid-column: 1 / -1; }
  .rung__go { display: none; }
}

/* ---- a card that is a link ---- */
.card--link { text-decoration: none; color: inherit; display: block;
  transition: background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.card--link:hover, .card--link:focus-visible { background: var(--surface-card-hover); border-color: var(--nb-hairline-strong); }
.card--link:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 2px; }
.card--link .card__note { color: var(--bronze-lit); }

/* ---- "what this is not", and module lists ---- */
.nots, .modules { list-style: none; margin: var(--spacing-6) 0 0; padding: 0; display: grid; gap: 10px; max-width: 62ch; }
.nots li, .modules li { padding-left: 1.6rem; position: relative; color: var(--text-secondary); line-height: 1.55; }
.nots li::before { content: "—"; position: absolute; left: 0; color: var(--limestone-faint); }
.modules li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 8px; height: 8px;
  border: 1px solid var(--bronze-lit); }
.modules li { color: var(--text-primary); }

/* ---- the doctrine block ---- */
.doctrine-block { padding-block: clamp(.5rem, 2vw, 1.5rem); }

/* ---- the request funnel ---- */
.funnel__wrap { max-width: 44rem; }
.funnel { display: grid; gap: var(--spacing-6); }
.funnel fieldset { border: 0; margin: 0; padding: 0; }
.funnel legend { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); margin-bottom: var(--spacing-4); }
.funnel__progress { font-family: var(--font-numeric); font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: .11em; color: var(--limestone-faint); margin: 0 0 var(--spacing-3); }
.funnel__hint { color: var(--text-secondary); font-size: 15px; margin: 0 0 var(--spacing-4); }
.funnel__demo { border-left: 2px solid var(--bronze); padding-left: var(--spacing-4); color: var(--limestone-dim); }
.funnel__nav { display: flex; gap: .6rem; margin-top: var(--spacing-6); }
.funnel__note { margin-top: var(--spacing-6); color: var(--text-secondary); }
.choices { display: grid; gap: 8px; }
.choices label { display: flex; gap: .8rem; align-items: flex-start; padding: var(--spacing-4);
  border: 1px solid var(--nb-hairline-strong); border-radius: var(--r); cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); }
.choices label:hover { border-color: var(--border-emphasis); background: var(--surface-card); }
.choices input { margin-top: .25rem; accent-color: var(--bronze-lit); }
.choices input:checked + span { color: var(--limestone); }
.field { display: grid; gap: 6px; margin-bottom: var(--spacing-4); }
.field label { font-family: var(--font-numeric); font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: .1em; color: var(--limestone-faint); }
.field input, .field textarea { background: var(--slate); color: var(--limestone);
  border: 1px solid var(--nb-hairline-strong); border-radius: var(--r);
  padding: 12px 14px; font-family: var(--font-body); font-size: 16px; min-height: 46px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 1px; }
.field .soft { color: var(--limestone-faint); text-transform: none; letter-spacing: 0; }
.err { color: #E0A0A0; font-size: 14px; margin: 0; }
.funnel__step[hidden] { display: none; }

/* The signature line is long, and at 3.5rem it filled the first screen on its own and
   crowded out the promise and the panel beside it. */
.act0__copy h1 { font-size: clamp(1.95rem, 1.2rem + 2vw, 2.85rem); max-width: 26ch; }

/* The fixed launcher sits bottom-right, which is where the hero's second line panel ends at
   desktop width: it covered that panel's copy on first load. The hero reserves the launcher's
   footprint on the side column so nothing lands under it. */
@media (min-width: 901px) { .act0__side { padding-bottom: 4.5rem; } }

/* The hero copy and the two line panels measured 3.2-3.3:1 median against the photograph.
   The glyph stroke makes them read, but a measurement is not a matter of opinion: the left
   ground is firmed up and the panels are brought to near-opaque. The photograph still runs
   uncovered across the right two thirds of the frame. */
.act0__panel {
  background: linear-gradient(96deg,
    color-mix(in oklab, var(--slate-black) 88%, transparent) 0 34%,
    color-mix(in oklab, var(--slate-black) 62%, transparent) 62%,
    color-mix(in oklab, var(--slate-black) 12%, transparent) 88%,
    transparent);
}
.line { background: color-mix(in oklab, var(--slate) 97%, transparent); }
@media (max-width: 900px) {
  .act0__panel { background: linear-gradient(180deg,
      color-mix(in oklab, var(--slate-black) 58%, transparent) 0 22%,
      color-mix(in oklab, var(--slate-black) 90%, transparent) 62%); }
}

/* <small> sat exactly on the 1.3 leading floor, which rounds under it. */
html body small { line-height: 1.44; }

/* The hero copy measured 3.2:1 median against the photograph even with the glyph stroke on it,
   and this brand's own design principles name accessible contrast. The left column is now a
   near-solid panel that falls away rather than a soft wash across the whole frame — which suits
   the restrained, architectural register better than a gradient anyway. The photograph runs
   uncovered across the right half. */
.act0__panel {
  background: linear-gradient(96deg,
    color-mix(in oklab, var(--slate-black) 95%, transparent) 0 33%,
    color-mix(in oklab, var(--slate-black) 78%, transparent) 52%,
    color-mix(in oklab, var(--slate-black) 22%, transparent) 78%,
    transparent);
}
/* near-opaque already, so the blur behind it only confused the measurement */
.line { -webkit-backdrop-filter: none; backdrop-filter: none;
  background: color-mix(in oklab, var(--slate) 99%, transparent); }
@media (max-width: 900px) {
  .act0__panel { background: linear-gradient(180deg,
      color-mix(in oklab, var(--slate-black) 52%, transparent) 0 18%,
      color-mix(in oklab, var(--slate-black) 93%, transparent) 54%); }
}

/* ============================================================================
   The film's world is position: fixed, which means it keeps painting until
   something covers it or something hides it. Without both of the following, the
   world stayed on screen for the whole page — measured at 100% visibility on all
   33 sample positions, with no copy on it for the last eleven. Every section
   below the film was showing a photograph of a colonnade behind it.
   ============================================================================ */
/* 1. the sections after the film are opaque and sit above the world */
.after-film { position: relative; z-index: 25; background: var(--surface-canvas); }
/* 2. once the film is scrolled past, the world is not just covered but switched off */
html.post-film .sc-world, html.post-film .sc-world__copy, html.post-film .motes,
html.post-film [data-sc-world-copy] { opacity: 0 !important; pointer-events: none !important; }
/* 3. and on the way in it rises as a clipped curtain rather than appearing under the section
      above it */
html.film-near .sc-world, html.film-near [data-sc-world-copy], html.film-near .motes {
  opacity: 1 !important; clip-path: inset(var(--film-top, 0px) 0 0 0);
}
html.film-on .sc-world, html.film-on [data-sc-world-copy], html.film-on .motes { clip-path: none; }

/* ============================================================================
   The landing film's title card. The supplied asset is the arms embossed into an
   iron plate, so the honest way to present it is the way you would read a real
   relief: hold a raking light across it and let the modelling come up. One piece
   of motion, decelerating, settling — no bounce, nothing animating a layout
   property, and the reduced-motion end state is simply the lit crest.
   ============================================================================ */
.intro__arms { position: relative; display: grid; width: min(78vw, 30rem); }
.intro__arms > * { grid-area: 1 / 1; }
/* The hero crest is the commissioned tonal vector (Bastion Crest Vectors, 10 Sep 2026),
   which is the plate its own spec reserves for hero placements. It ships with literal
   tones rather than as a dark relief photograph, so the old brightness(0.85 -> 1.78)
   lift would blow the modelling out; a modest fixed lift is enough to read as struck
   metal on the slate ground. Fill-only and never stroked, per that spec. */
.arms-img {
  width: 100%; height: auto; display: block;
  opacity: 0.22; filter: brightness(1.05) contrast(1.02);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), filter 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.intro.is-open .arms-img { opacity: 1; filter: brightness(1.5) contrast(1.06); }
/* The light is confined to the crest's own silhouette so it rakes the relief and never lies on
   the empty ground beside it. It has to be two elements: translating a masked element moves its
   mask with it, which drags a silvered ghost of the crest across the frame. So the outer span
   holds the mask and stays still, and the inner band is the only thing that travels. */
.arms-rake {
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: url(/assets/crest-tonal.svg); mask-image: url(/assets/crest-tonal.svg);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.arms-rake i {
  position: absolute; inset: 0 -60%; display: block; opacity: 0;
  background: linear-gradient(102deg, transparent 34%, rgba(255, 244, 216, 0.6) 50%, transparent 66%);
}
.intro.is-drop .arms-rake i { animation: arms-rake 1280ms cubic-bezier(0.33, 0, 0.15, 1) forwards; }
@keyframes arms-rake {
  0%   { opacity: 0.95; transform: translateX(-58%); }
  100% { opacity: 0;    transform: translateX(58%); }
}
@media (prefers-reduced-motion: reduce) {
  .arms-img { transition: none; opacity: 1; filter: brightness(1.78) contrast(1.12); }
  .intro.is-drop .arms-rake i { animation: none; opacity: 0; }
}
/* the film page's own wordmark in the bar */
.intro__mark .mark__word { font-family: var(--font-display); font-weight: 400; font-size: 1.24rem;
  letter-spacing: .02em; color: var(--limestone); }

/* ============================================================================
   PRINCIPALS — the two people, with a face where we have one.

   Derived from the same brief as the rest of this file. A photograph is the most
   specific material the page has, so it is shown as a photograph: no duotone, no
   greyscale-until-hover, no gradient scrim. The frame does the work instead —
   one hairline, 2px, and the plate behind it. Where there is no portrait, the
   arms stand in the same frame at the same ratio rather than a grey silhouette,
   so the row reads as finished instead of missing something.
   ========================================================================== */
.principals { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 720px) { .principals { grid-template-columns: 1fr; } }

.principal { background: var(--surface-card); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); display: grid; grid-template-columns: 12.5rem 1fr; }
@media (max-width: 1040px) { .principal { grid-template-columns: 1fr; } }

.principal__media { margin: 0; background: var(--surface-system);
  border-right: 1px solid var(--nb-hairline); overflow: hidden; }
@media (max-width: 1040px) {
  .principal__media { border-right: 0; border-bottom: 1px solid var(--nb-hairline); }
}
.principal__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 20%; }

/* the stand-in: the arms, inset and centred, never stretched to the frame */
.principal__media--arms { display: grid; place-items: center; aspect-ratio: 4 / 5; }
.principal__media--arms img { width: 62%; height: auto; aspect-ratio: auto; object-fit: contain;
  opacity: .5; }

.principal__body { padding: var(--spacing-6); align-self: start; }
.principal__body h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
.principal__role { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-accent);
  margin: var(--spacing-2) 0 var(--spacing-4); }
.principal__body p:last-child { margin-bottom: 0; color: var(--text-secondary); }

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

/* ============================================================================
   BUILT — the proof grid on the home page.

   Four items with unequal weight: the library is the whole system, the three
   named sites are instances of it. An auto-fit grid orphaned the fourth card on
   its own row, which read as a mistake rather than a hierarchy, so the weight is
   made explicit: the library leads full-width, the three instances sit under it.
   ========================================================================== */
.built__grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.built__grid > .built__lead { grid-column: 1 / -1; }
@media (max-width: 900px) { .built__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .built__grid { grid-template-columns: 1fr; } }

/* the note is the card's baseline, so it sits at the bottom whatever the copy length.
   Applies to every card in this grid, not only the linked variant: these describe
   internal systems and so have nothing to link to. */
.built__grid .card { display: flex; flex-direction: column; }
.built__grid .card .card__note { margin-top: auto; }
.built__grid .card h3 { margin-top: 0; }
/* the lead card is wider than the body measure, so its baseline rule must not
   inherit the paragraph cap or it stops mid-card and reads as a broken border */
.built__grid .built__lead .card__note { max-width: none; }
.built__grid .built__lead p:not(.card__note) { max-width: 82ch; }

/* ============================================================================
   BRANDBAND — the arms, carrying the weight the removed film used to.

   Full-bleed plate with the copy beneath rather than over it: the arms are the
   most detailed artefact the brand owns and text laid across them would ruin
   both. No gradient scrim, no parallax — the brief says space does the
   separating, so the plate is bounded by hairlines and air.
   ========================================================================== */
.brandband { border-top: 1px solid var(--nb-hairline); border-bottom: 1px solid var(--nb-hairline);
  background: var(--surface-system); }
/* The plate was a full-bleed crop of the arms at max-height 46vh, which cut the
   crown off the top and the banner off the bottom. Between two sections that read
   as a decapitated logo in a gap rather than as a brand statement, so the mark is
   now shown whole, centred, at a size it can actually carry. */
.brandband__plate { margin: 0 auto var(--spacing-10); display: grid; place-items: center;
  padding-top: var(--spacing-4); }
.brandband__plate img { display: block; width: clamp(150px, 17vw, 240px); height: auto;
  opacity: .92; }
.brandband__in { padding-block: var(--spacing-16); }
.brandband__title { font-family: var(--font-display); font-weight: 400; margin: 0 0 var(--spacing-6); }
.brandband__title em { font-style: italic; }
.brandband__line { color: var(--text-secondary); max-width: 62ch; }
.brandband__promise { font-family: var(--font-display); font-size: var(--text-lead);
  color: var(--text-accent); margin: var(--spacing-8) 0 0; padding-top: var(--spacing-6);
  border-top: 1px solid var(--nb-hairline); max-width: 62ch; }
@media (max-width: 720px) { .brandband__plate img { width: 132px; } }

/* the network grid reuses .built__grid; its last tile is a plain card holding a link */
.built__grid .card__note a { color: var(--bronze-lit); text-decoration: none; }
.built__grid .card__note a:hover, .built__grid .card__note a:focus-visible { text-decoration: underline; }

/* a module list that carries an explanation, not just a name. The bare version
   left these pages at ~350 words; the marker and rhythm are unchanged. */
.modules--deep { max-width: 74ch; gap: var(--spacing-6); }
.modules--deep li > b { display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 1.06rem; color: var(--text-primary); margin-bottom: 4px; }
.modules--deep li > span { display: block; color: var(--text-secondary); line-height: 1.6; }
/* the caveat under a deep module list needs air, or it reads as a sixth module */
.modules--deep + .micro { margin-top: var(--spacing-8); padding-top: var(--spacing-4);
  border-top: 1px solid var(--nb-hairline); max-width: 74ch; }

/* ============================================================================
   RECORD — the founder's proof inventory.

   Built on the same hairline-grid logic as .spec-row, but one row per engagement
   rather than a 4-up strip: each entry carries a result and a "proves" line, and
   at three columns those wrap into unreadable slivers. The result is the display
   voice because the result is the reason the row exists.
   ========================================================================== */
.record { display: grid; gap: 1px; margin: var(--spacing-8) 0 0;
  background: var(--nb-hairline); border: 1px solid var(--nb-hairline); border-radius: var(--r); }
.record > div { background: var(--surface-card); padding: var(--spacing-6);
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--spacing-4) var(--spacing-8); }
@media (max-width: 800px) { .record > div { grid-template-columns: 1fr; gap: var(--spacing-3); } }
.record dt { font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-accent); align-self: start; }
.record dd { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem;
  line-height: 1.35; color: var(--text-primary); }
.record dd small { display: block; margin-top: var(--spacing-3); padding-top: var(--spacing-3);
  border-top: 1px solid var(--nb-hairline); font-family: var(--font-body); font-size: 14px;
  line-height: 1.55; color: var(--limestone-faint); }
.record + .micro { margin-top: var(--spacing-6); max-width: 74ch; }

/* ============================================================================
   LENSES — the five lenses of Pyre.

   A numbered sequence where the order carries real information, which is the one
   case the craft floor allows numerals for. The number is a hairline-ruled column
   rather than a badge: this is a method, not a feature list, and the rule doing the
   separating is the same device the rest of the site uses.
   ========================================================================== */
.lenses { list-style: none; margin: var(--spacing-10) 0 0; padding: 0; display: grid; gap: 0; }
.lenses li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--spacing-6); padding: var(--spacing-8) 0;
  border-top: 1px solid var(--nb-hairline); }
.lenses li:last-child { border-bottom: 1px solid var(--nb-hairline); }
@media (max-width: 700px) {
  .lenses li { grid-template-columns: 1fr; gap: var(--spacing-3); padding: var(--spacing-6) 0; }
}
.lens__n { font-family: var(--font-numeric); font-size: 1.5rem; line-height: 1;
  color: var(--text-accent); letter-spacing: .02em; }
.lens__body { max-width: 72ch; }
.lens__body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.34rem;
  margin: 0 0 var(--spacing-3); }
.lens__body p { color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--spacing-3); }
.lens__why { color: var(--limestone-faint) !important; }
.lens__arts { margin: var(--spacing-4) 0 0 !important; padding-top: var(--spacing-3);
  border-top: 1px solid var(--nb-hairline); font-size: 14.5px; }
.lens__arts b { display: block; font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-accent);
  margin-bottom: 5px; font-weight: 400; }
.lenses + .micro { margin-top: var(--spacing-8); max-width: 74ch; }

/* ============================================================================
   ICONS — authored, not borrowed.

   One geometry for the whole set: a 24 unit box, 1.5 unit stroke, round caps and
   joins, no fills, and colour inherited from the type beside them. The brief bans
   "generic AI-agency iconography", so these are drawn from the firm's own nouns —
   a diagnosis, an anvil, an engine, a seal, a ladder of rungs, a buyer's route —
   rather than pulled from a library where a wrench means anything at all.
   ========================================================================== */
.icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
  stroke-linejoin: round; flex: none; }
.icon--lg { width: 1.9rem; height: 1.9rem; stroke-width: 1.35; color: var(--text-accent); }
.icon--rule { display: block; margin-bottom: var(--spacing-4); }
.btn .icon { margin-right: .5em; }
.btn .icon--after { margin: 0 0 0 .5em; }

/* ============================================================================
   BASELINE — the provisional scorer, and the one chart on this site.

   Form follows the data's job: one measure across four categories is a
   single-series bar set. Length carries magnitude; hue carries nothing, because
   this palette is deliberately near-neutral and cannot support categorical
   identity — identity comes from the labels. So: no legend (one series names
   itself in the caption), a value at each tip, a hairline track, and bars capped
   at 18px so the band keeps its air.
   ========================================================================== */
.baseline__privacy { max-width: 68ch; margin-bottom: var(--spacing-8); }

.baseline { display: grid; gap: var(--spacing-6); margin: 0; border: 0; padding: 0; }
.baseline__set { border: 1px solid var(--nb-hairline); border-radius: var(--r);
  background: var(--surface-card); margin: 0; padding: var(--spacing-6); }
.baseline__set legend { font-family: var(--font-display); font-weight: 400; font-size: 1.18rem;
  padding: 0 var(--spacing-3); margin-left: calc(var(--spacing-3) * -1);
  display: flex; align-items: center; gap: .5rem; }
.baseline__set legend .icon { color: var(--text-accent); }

.baseline__q { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-4) var(--spacing-8); align-items: center;
  padding: var(--spacing-4) 0; border-top: 1px solid var(--nb-hairline); }
.baseline__q:first-of-type { border-top: 0; padding-top: var(--spacing-3); }
@media (max-width: 720px) { .baseline__q { grid-template-columns: 1fr; } }
.baseline__stmt { margin: 0; color: var(--text-secondary); line-height: 1.55; max-width: 62ch; }

.baseline__opts { display: flex; gap: 6px; }
.baseline__opt { position: relative; }
.baseline__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.baseline__opt span { display: block; min-width: 4.6rem; text-align: center; cursor: pointer;
  font-family: var(--font-numeric); font-size: var(--text-control); letter-spacing: .06em;
  text-transform: uppercase; padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--nb-hairline); color: var(--text-secondary);
  transition: border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease); }
.baseline__opt:hover span { border-color: var(--nb-hairline-strong); color: var(--text-primary); }
.baseline__opt input:checked + span { border-color: var(--border-accent);
  color: var(--slate-black); background: var(--limestone); }
.baseline__opt input:focus-visible + span { outline: 2px solid var(--bronze-lit); outline-offset: 2px; }

/* ---- the result ---- */
.baseline__out { margin-top: var(--spacing-12); padding-top: var(--spacing-10);
  border-top: 1px solid var(--border-emphasis); }
.baseline__headline { display: grid; gap: var(--spacing-3); margin-bottom: var(--spacing-10); }
.baseline__num { font-family: var(--font-display); font-weight: 400; line-height: .9;
  font-size: clamp(3.6rem, 2rem + 7vw, 6rem); margin: 0; color: var(--text-primary); }
.baseline__num small { font-size: .26em; color: var(--limestone-faint); margin-left: .12em; }
.baseline__band { margin: 0; max-width: 60ch; color: var(--text-secondary); }
.baseline__band b { color: var(--text-primary); font-weight: 400; font-family: var(--font-display); }

.baseline__chart figcaption { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--limestone-faint);
  margin-bottom: var(--spacing-6); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-6); }
.bar { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 9.5rem;
  gap: var(--spacing-6); align-items: center; }
@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar__track { grid-column: 1 / -1; order: 3; }
}
.bar__label { font-size: 15px; }
.bar__label a { color: var(--text-primary); text-decoration: none;
  border-bottom: 1px solid var(--nb-hairline); }
.bar__label a:hover { border-bottom-color: var(--bronze-lit); }

/* the track is the hairline; the fill is the only ink that carries data */
.bar__track { position: relative; height: 18px; background: var(--surface-system);
  border: 1px solid var(--nb-hairline); border-radius: 2px; overflow: hidden; }
.bar__track i { display: block; height: 100%; width: 0;
  background: var(--limestone-dim);
  border-radius: 0 4px 4px 0;      /* 4px rounded data-end, square at the baseline */
  transition: width 760ms cubic-bezier(.2, 0, 0, 1); }
.bar__track i.is-in { width: var(--w); }
.bar--empty .bar__track { opacity: .45; }

.bar__val { font-family: var(--font-numeric); font-size: 1.15rem;
  color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; }
.bar__val small { font-size: .6em; color: var(--limestone-faint); margin-left: 1px; }
.bar__val b { display: block; font-size: var(--text-label); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 400; color: var(--limestone-faint); margin-top: 2px; }

.baseline__after { margin-top: var(--spacing-10); padding-top: var(--spacing-6);
  border-top: 1px solid var(--nb-hairline); }
.baseline__after p { color: var(--text-secondary); max-width: 68ch; margin: 0 0 var(--spacing-6); }

@media (prefers-reduced-motion: reduce) {
  .bar__track i { transition: none; }
  .baseline__opt span { transition: none; }
}

/* ============================================================================
   ALLOC — the allocation diagram.

   The firm's central claim is a boundary, not a list: production finishes at a
   defined completion state, and everything past that point is judgment. As four
   equal cards it read as a process. So the boundary is the drawn element — a
   bronze hairline with a label — and the one automated stage is the only tile
   that carries a different ground. Colour appears once, on the line, which is
   the "held back as an event" rule in the brief.
   ========================================================================== */
.alloc { margin-top: var(--spacing-10); }
.alloc__axis { display: flex; justify-content: space-between;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--limestone-faint); margin-bottom: var(--spacing-3); }
.alloc__side--m { color: var(--text-accent); }

.alloc__stages { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr auto 1fr 1fr 1fr; gap: 0; align-items: stretch; }
@media (max-width: 900px) {
  .alloc__stages { grid-template-columns: 1fr; }
  .alloc__stage.is-boundary { padding: var(--spacing-4) 0; }
}

.alloc__stage { position: relative; padding: var(--spacing-6);
  border-top: 1px solid var(--nb-hairline); border-bottom: 1px solid var(--nb-hairline);
  display: flex; flex-direction: column; gap: var(--spacing-3); }
.alloc__stage + .alloc__stage:not(.is-boundary) { border-left: 1px solid var(--nb-hairline); }
@media (max-width: 900px) {
  .alloc__stage { border-left: 0 !important; border-bottom: 0; }
  .alloc__stage:last-child { border-bottom: 1px solid var(--nb-hairline); }
}
.alloc__stage.is-machine { background: var(--surface-system); }
.alloc__n { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; color: var(--limestone-faint); }
.alloc__stage h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin: 0; }
.alloc__stage p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
.alloc__who { display: flex; align-items: center; gap: .45rem; margin-top: auto !important;
  padding-top: var(--spacing-3); border-top: 1px solid var(--nb-hairline);
  font-family: var(--font-numeric) !important; font-size: var(--text-label) !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--limestone-faint) !important; }
.alloc__who .icon { color: var(--text-accent); }

/* the boundary: the only place colour is spent in this diagram */
.alloc__stage.is-boundary { padding: 0 var(--spacing-6); display: grid; place-items: center;
  border-top: 0; border-bottom: 0; align-self: stretch; }
.alloc__rule { display: block; width: 2px; align-self: stretch; height: 100%;
  background: var(--bronze); border-radius: 1px; }
.alloc__boundary-label { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--bronze-lit); white-space: nowrap;
  background: var(--surface-canvas); padding: var(--spacing-3) 2px; }
@media (max-width: 900px) {
  .alloc__rule { width: 100%; height: 2px; }
  .alloc__boundary-label { writing-mode: horizontal-tb; transform: translate(-50%, -50%);
    padding: 2px var(--spacing-3); }
}

/* ============================================================================
   PHEAD PLATE — the photograph behind a page head.

   Same device as the home hero, and the same discipline: the scrim is full-bleed
   on the section rather than on the centred wrap, so it never leaves a vertical
   step partway across the picture. The plate sits under the copy at a low
   z-index and the photograph is never asked to carry legibility on its own.
   ========================================================================== */
.phead { position: relative; isolation: isolate; }
.phead__plate { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; }
.phead__plate img { width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 45%; }
.phead--plate::before { content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(96deg,
    color-mix(in oklab, var(--slate-black) 88%, transparent) 0 38%,
    color-mix(in oklab, var(--slate-black) 62%, transparent) 72%,
    color-mix(in oklab, var(--slate-black) 44%, transparent) 100%); }
.phead--plate { border-bottom: 1px solid var(--nb-hairline); }
.phead--plate .wrap { padding-block: clamp(3.5rem, 8vw, 7rem); }
.phead--plate h1, .phead--plate .phead__stand {
  paint-order: stroke fill; -webkit-text-stroke: 1px rgba(0,0,0,.28);
  text-shadow: 0 1px 3px rgba(0,0,0,.5); }
@media (max-width: 900px) {
  .phead--plate::before { background: linear-gradient(180deg,
      color-mix(in oklab, var(--slate-black) 66%, transparent) 0 24%,
      color-mix(in oklab, var(--slate-black) 90%, transparent) 66%); }
}

/* ============================================================================
   REVEAL — four arrivals, not one fade.

   Nothing here is the page's default. Without the `rv` class on <html> — no JS,
   an old browser, reduced motion — every element below sits in its finished
   state, because a motion system that can leave a page blank is a liability
   rather than a flourish. Only transform, opacity and filter move.
   ========================================================================== */
.rv [data-rv] { will-change: transform, opacity; }

/* a heading settles up and into focus */
.rv [data-rv="rise"] { opacity: 0; transform: translateY(12px); filter: blur(3px);
  transition: opacity 620ms var(--motion-ease), transform 620ms var(--motion-ease),
              filter 620ms var(--motion-ease); }
.rv [data-rv="rise"].is-rv { opacity: 1; transform: none; filter: none; }

/* a set arrives in sequence, because the order is the information */
.rv [data-rv="set"] > * { opacity: 0; transform: translateY(14px);
  transition: opacity 560ms var(--motion-ease), transform 560ms var(--motion-ease); }
.rv [data-rv="set"].is-rv > * { opacity: 1; transform: none; }

/* a photograph settles rather than slides */
.rv [data-rv="plate"] img { transform: scale(1.045); transition: transform 1500ms var(--motion-ease); }
.rv [data-rv="plate"].is-rv img { transform: none; }

/* the section hairline draws along its own length — the one moment on arrival */
.rv-rule { display: block; position: absolute; top: -1px; left: 0; height: 1px;
  background: var(--nb-hairline-strong); pointer-events: none; }
.rv .rv-rule { width: 0; transition: width 900ms var(--motion-ease); }
.rv .rv-rule.is-rv { width: 100%; }
.strip, .brandband, .act-end { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .rv [data-rv], .rv [data-rv] > *, .rv [data-rv] img, .rv .rv-rule {
    opacity: 1 !important; transform: none !important; filter: none !important;
    width: 100% !important; transition: none !important; }
}

/* ============================================================================
   GAP — the thesis, drawn.

   Two columns that do not line up, with the distance between them made visible.
   The connector is deliberately broken rather than a solid arrow: the point is
   that these two things no longer meet. Marked up as a table because it is one —
   three paired rows — so a screen reader gets the pairing, not six loose cards.
   ========================================================================== */
.gap { margin-top: var(--spacing-10); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); background: var(--surface-card); }
.gap__head, .gap__row { display: grid; grid-template-columns: 1fr 5.5rem 1fr;
  align-items: center; gap: var(--spacing-4); }
.gap__head { padding: var(--spacing-5) var(--spacing-6);
  border-bottom: 1px solid var(--nb-hairline); }
.gap__head span[role="columnheader"] { display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-primary); }
.gap__head .icon { color: var(--text-accent); }
.gap__vs { font-family: var(--font-display); font-style: italic; font-size: 14px;
  color: var(--limestone-faint); text-align: center; }

.gap__row { padding: var(--spacing-5) var(--spacing-6); border-bottom: 1px solid var(--nb-hairline); }
.gap__row p { margin: 0; color: var(--text-secondary); line-height: 1.55; font-size: 15px; }
.gap__row p:last-of-type { color: var(--limestone-faint); }

/* the broken connector: two stubs and a space, because they do not meet */
.gap__link { position: relative; height: 1px; background: transparent; }
.gap__link::before, .gap__link::after { content: ""; position: absolute; top: 0; height: 1px;
  width: 34%; background: var(--nb-hairline-strong); }
.gap__link::before { left: 0; }
.gap__link::after { right: 0; }

/* block, not flex: as a flex row the bold label became its own shrinking column
   and wrapped to three lines. It belongs in the sentence. */
.gap__cost { margin: 0; padding: var(--spacing-5) var(--spacing-6);
  color: var(--text-secondary); font-size: 15px; line-height: 1.6; max-width: 90ch; }
.gap__cost b { color: var(--text-primary); font-weight: 400; font-family: var(--font-display); }
.gap__cost .icon { color: var(--text-accent); margin-right: .45rem; vertical-align: -0.15em; }

@media (max-width: 820px) {
  .gap__head { display: none; }
  .gap__row { grid-template-columns: 1fr; gap: var(--spacing-2); }
  .gap__row p::before { display: block; font-family: var(--font-numeric);
    font-size: var(--text-label); letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-accent); margin-bottom: 4px; }
  .gap__row p:first-of-type::before { content: "The buyer"; }
  .gap__row p:last-of-type::before { content: "The system assumes"; color: var(--limestone-faint); }
  .gap__link { display: none; }
}

/* ============================================================================
   PATH — how the rungs relate.

   Three of the six are a sequence and three are conditional on a relationship.
   A flat list flattens that distinction, so the sequence gets a connecting rail
   and a numbered progression while the conditional three sit off to the side
   behind their own rule, deliberately not above the sequence. The rail is the
   only place colour appears.
   ========================================================================== */
.path { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--spacing-12); margin-top: var(--spacing-8); align-items: start; }
@media (max-width: 940px) { .path { grid-template-columns: 1fr; gap: var(--spacing-10); } }

.path__main { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-8); }
.path__step { position: relative; padding-left: 4.25rem; }
/* the rail: drawn once, down the whole sequence */
.path__main::before { content: ""; position: absolute; left: 1.4rem; top: .9rem; bottom: .9rem;
  width: 2px; background: linear-gradient(var(--bronze), color-mix(in oklab, var(--bronze) 25%, transparent));
  border-radius: 1px; }
.path__main { position: relative; }
.path__mark { position: absolute; left: 0; top: 0; width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center; border-radius: var(--r);
  border: 1px solid var(--nb-hairline-strong); background: var(--surface-canvas);
  color: var(--limestone-dim); }
.path__step.is-entry .path__mark { border-color: var(--bronze); color: var(--bronze-lit); }
.path__name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.34rem; }
.path__role { display: block; font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-accent); margin-top: 2px; }
.path__step p { margin: var(--spacing-3) 0 0; color: var(--text-secondary);
  font-size: 15px; line-height: 1.6; max-width: 56ch; }

.path__aside { border-left: 1px solid var(--nb-hairline); padding-left: var(--spacing-8); }
@media (max-width: 940px) {
  .path__aside { border-left: 0; border-top: 1px solid var(--nb-hairline);
    padding-left: 0; padding-top: var(--spacing-8); }
}
.path__aside-head { display: flex; align-items: center; gap: .5rem; margin: 0;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-primary); }
.path__aside-head .icon { color: var(--text-accent); }
.path__aside-note { margin: var(--spacing-3) 0 var(--spacing-6); color: var(--limestone-faint);
  font-size: 14px; line-height: 1.6; }
.path__aside ul { list-style: none; margin: 0; padding: 0; display: grid; }
.path__aside li { border-top: 1px solid var(--nb-hairline); }
.path__aside a { display: grid; gap: 2px; padding: var(--spacing-4) 0;
  text-decoration: none; color: inherit; }
.path__aside a:hover b, .path__aside a:focus-visible b { color: var(--bronze-lit); }
.path__aside b { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.path__aside span { color: var(--text-secondary); font-size: 14px; }

/* ============================================================================
   LENSES, as a sequence.

   Pyre's five lenses run in order and each hands its artefacts to the next, but
   as a stack of hairline-separated blocks the list showed no flow at all. A rail
   down the numerals says "in order" without a word of extra copy, and the last
   lens ends it rather than trailing off, because the sequence terminates in
   evidence. Markup unchanged — this is the same list, told properly.
   ========================================================================== */
.lenses { position: relative; }
.lenses::before { content: ""; position: absolute; left: 1.1rem; top: 2.6rem; bottom: 2.6rem;
  width: 2px; border-radius: 1px;
  background: linear-gradient(var(--bronze),
              color-mix(in oklab, var(--bronze) 30%, transparent)); }
@media (max-width: 700px) { .lenses::before { display: none; } }
.lens__n { position: relative; z-index: 1; display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem; background: var(--surface-canvas);
  border: 1px solid var(--nb-hairline-strong); border-radius: var(--r); }
.lenses li:first-child .lens__n { border-color: var(--bronze); }
/* the terminal mark: the sequence ends in evidence, it does not trail off */
.lenses li:last-child .lens__n::after { content: ""; position: absolute; left: 50%;
  bottom: -0.9rem; transform: translateX(-50%); width: 8px; height: 8px;
  border-radius: 50%; background: var(--bronze); }
@media (max-width: 700px) { .lenses li:last-child .lens__n::after { display: none; } }

/* ============================================================================
   INTERLOCK — two lines that each fail alone.

   The claim in the heading is not "we do two things", it is that each half is
   incomplete without the other. Two neutral cards cannot carry that, so the
   diagram gives each side what it supplies AND what it fails as on its own, and
   puts a joint between them. The failure row sits on the plate ground so the eye
   reads it last and hardest, which is the order the argument wants.
   ========================================================================== */
.interlock { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
  margin-top: var(--spacing-10); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); background: var(--surface-card); }
@media (max-width: 900px) { .interlock { grid-template-columns: 1fr; } }

/* flex, so the "bought alone" plate pins to the bottom and both sides agree,
   whatever length the description above it runs to */
.interlock__side { padding: var(--spacing-6); display: flex; flex-direction: column;
  gap: var(--spacing-3); }
.interlock__label { display: flex; align-items: center; gap: .5rem; margin: 0;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-primary); }
.interlock__label .icon { color: var(--text-accent); }
.interlock__what { margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 1.3rem; line-height: 1.25; }
.interlock__buy { margin: 0; color: var(--limestone-faint); font-size: 14px; }
.interlock__buy b { color: var(--text-accent); font-weight: 400; }
.interlock__desc { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.interlock__alone { margin: auto 0 0; padding: var(--spacing-4);
  background: var(--surface-system); border-radius: var(--r);
  border: 1px solid var(--nb-hairline); color: var(--text-secondary);
  font-size: 14px; line-height: 1.55; }
.interlock__alone span { display: block; font-family: var(--font-numeric);
  font-size: var(--text-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--limestone-faint); margin-bottom: 4px; }

/* the joint: a hairline, a word, a hairline — the two halves meeting */
.interlock__joint { display: grid; place-items: center; gap: var(--spacing-3);
  padding: var(--spacing-6) 0; grid-template-rows: 1fr auto 1fr; }
.interlock__joint-line { width: 2px; height: 100%; background: var(--bronze);
  border-radius: 1px; }
.interlock__joint-word { writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--bronze-lit); white-space: nowrap; }
@media (max-width: 900px) {
  .interlock__joint { grid-template-rows: none; grid-template-columns: 1fr auto 1fr;
    padding: 0 var(--spacing-6) ; }
  .interlock__joint-line { width: 100%; height: 2px; }
  .interlock__joint-word { writing-mode: horizontal-tb; transform: none; }
}

/* ============================================================================
   STRIP PLATE — a change of ground where the argument turns.

   /home/ runs to 14,000px of near-identical dark slabs. Rather than image every
   section, four of them get a photographic ground at the points the argument
   turns: the problem, the two lines, the ladder, the group. The plate is held
   well back — heavily scrimmed and low in the stack — because these sections
   carry long copy and the photograph is rhythm, not subject.
   ========================================================================== */
.strip--plate { position: relative; isolation: isolate; overflow: hidden; }
.strip__plate { position: absolute; inset: 0; z-index: -2; margin: 0; }
.strip__plate img { width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 50%; }
.strip--plate::after { content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in oklab, var(--slate-black) 95%, transparent) 0 42%,
    color-mix(in oklab, var(--slate-black) 84%, transparent) 74%,
    color-mix(in oklab, var(--slate-black) 74%, transparent) 100%); }
@media (max-width: 900px) {
  .strip--plate::after { background: linear-gradient(180deg,
      color-mix(in oklab, var(--slate-black) 88%, transparent) 0 30%,
      color-mix(in oklab, var(--slate-black) 95%, transparent) 70%); }
}

/* ============================================================================
   NAV CREST + the More menu.

   The list was overflowing its own box by 41px at 1440 and sliding its last item
   under the CTA, so four tabs stay and the rest fold into one group. The crest
   joins the wordmark at the size it stays legible — the mono plate, since its
   own spec reserves tonal for hero placements only.
   ========================================================================== */
.nav__crest { width: 26px; height: auto; flex: none; margin-right: .6rem;
  opacity: .92; }
@media (max-width: 900px) { .nav__crest { width: 22px; } }
.nav__mark { display: inline-flex; align-items: center; }
/* the last group's panel would otherwise run off the right edge */
.nav__menu--end { left: auto; right: 0; }

/* ============================================================================
   HERO CREST + the score entry.

   The arms open the page rather than only closing it in the footer. Mono, not
   tonal: its own spec reserves tonal for a hero *placement*, and here the arms
   sit beside type at lockup scale rather than carrying the screen alone.
   ========================================================================== */
.hero-crest { display: block; width: clamp(58px, 6vw, 84px); height: auto;
  margin-bottom: var(--spacing-5); opacity: .95;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.section-crest { display: block; width: 54px; height: auto; margin-bottom: var(--spacing-5);
  opacity: .5; }

/* a third action needs a quieter third weight, or the hero reads as three CTAs */
.btn--quiet { border-color: transparent; padding-left: 0; padding-right: 0;
  margin-left: var(--spacing-2); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-color: var(--nb-hairline-strong); }
.btn--quiet:hover { border-color: transparent; text-decoration-color: var(--bronze-lit); }
@media (max-width: 620px) { .btn--quiet { margin-left: 0; } }

/* ============================================================================
   CARD GRIDS — no orphans.

   .cards is auto-fit, which puts four cards as three-then-one: the last card
   lands alone on its own row at a different height and reads as a mistake. Four
   items want a two-by-two. Fixed at the rule rather than per page, so it holds
   wherever a fourth card is added later.
   ========================================================================== */
@media (min-width: 860px) {
  .cards:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
  /* five reads better as 3 + 2 than 3 + 1 + 1, which auto-fit already gives */
  .cards > * { align-content: start; }
}

/* ============================================================================
   FAQ — fourteen questions, so they disclose.

   Six flat questions read fine; fourteen is a wall. Native <details> gives
   keyboard operation, find-in-page and a working no-JS state for free, which a
   scripted accordion would have to earn back. Grouped, because a buyer arrives
   wanting one category — money, or what the system may do unattended — and
   should not read the other three to find it.
   ========================================================================== */
.faq--grouped { display: grid; gap: var(--spacing-12); margin-top: var(--spacing-8); }
.faq__cat { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-accent);
  margin: 0 0 var(--spacing-4); padding-bottom: var(--spacing-3);
  border-bottom: 1px solid var(--nb-hairline); font-weight: 400; }

.qa { border-bottom: 1px solid var(--nb-hairline); }
.qa > summary { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--spacing-6); padding: var(--spacing-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 400; font-size: 1.16rem; line-height: 1.35;
  color: var(--text-primary); transition: color var(--motion-fast) var(--motion-ease); }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--bronze-lit); }
.qa > summary:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 3px; }
.qa__chev { width: 12px; height: 8px; flex: none; fill: none; stroke: var(--text-accent);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--motion-base) var(--motion-ease); transform-origin: 50% 50%; }
.qa[open] > summary .qa__chev { transform: rotate(180deg); }
.qa__a { padding: 0 0 var(--spacing-6); max-width: 76ch; }
.qa__a p { margin: 0; color: var(--text-secondary); line-height: 1.65; }
/* the answer eases open rather than snapping; grid-template-rows is the one
   layout property safe to animate here, and it degrades to an instant open */
.qa[open] .qa__a { animation: qa-open 420ms var(--motion-ease) both; }
@keyframes qa-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .qa__chev, .qa[open] .qa__a { transition: none; animation: none; }
}

/* ============================================================================
   GATE — the governance decision, drawn.

   The page describes a default and six exceptions, which is a branch. Drawn, the
   reader sees the proportion before reading any of the six: almost everything
   passes, a named few halt. The stem splits once; the stopping branch is the
   only one that carries colour, because it is the one being promised.
   ========================================================================== */
.gate { margin-top: var(--spacing-8); }
.gate__in { text-align: center; display: grid; justify-items: center; gap: var(--spacing-3); }
.gate__lab { margin: 0; font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--limestone-faint);
  border: 1px solid var(--nb-hairline); border-radius: var(--r);
  padding: var(--spacing-3) var(--spacing-5); background: var(--surface-card); }
.gate__stem { display: block; width: 2px; height: var(--spacing-8);
  background: var(--nb-hairline-strong); }

.gate__split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--nb-hairline); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); overflow: hidden; }
@media (max-width: 760px) { .gate__split { grid-template-columns: 1fr; } }
.gate__branch { background: var(--surface-card); padding: var(--spacing-6);
  display: grid; gap: var(--spacing-3); align-content: start; }
.gate__branch--stop { background: var(--surface-system); border-top: 2px solid var(--bronze); }
.gate__branch--pass { border-top: 2px solid var(--nb-hairline-strong); }
.gate__head { display: flex; align-items: center; gap: .5rem; margin: 0;
  font-family: var(--font-display); font-weight: 400; font-size: 1.24rem; }
.gate__branch--stop .gate__head .icon { color: var(--bronze-lit); }
.gate__branch--pass .gate__head .icon { color: var(--limestone-dim); }
.gate__n { margin: 0; font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--limestone-faint); }
.gate__branch p:not(.gate__head):not(.gate__n):not(.gate__note) {
  margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.gate__note { margin: var(--spacing-3) 0 0; padding-top: var(--spacing-3);
  border-top: 1px solid var(--nb-hairline); color: var(--limestone-faint);
  font-size: 13.5px; }
.gate__rule { display: block; margin: var(--spacing-6) 0 0; color: var(--text-secondary);
  font-size: 15px; line-height: 1.6; max-width: 80ch; }
.gate__rule .icon { color: var(--text-accent); margin-right: .45rem; vertical-align: -0.15em; }

/* ============================================================================
   SHIFT — where the decision forms.

   One axis, seven stages, two claims about which stage matters. The three stages
   that happen without the business are the only ones given a ground, so the eye
   reads the absent stretch first. Two markers sit under the axis and point at the
   stages they name, which is the whole argument of the page in one object.
   ========================================================================== */
.shift { margin: var(--spacing-10) 0 0; }
.shift__axis { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(7, 1fr); gap: 2px; }
.shift__axis li { position: relative; padding: var(--spacing-5) var(--spacing-3);
  background: var(--surface-card); border-top: 2px solid var(--nb-hairline-strong);
  text-align: center; }
.shift__axis li.is-dark { background: var(--surface-system);
  border-top-color: var(--bronze); }
.shift__axis span { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
  line-height: 1.3; display: block; }
.shift__axis li.is-dark span { color: var(--text-primary); }
@media (max-width: 860px) {
  .shift__axis { grid-template-columns: 1fr; gap: 1px; }
  .shift__axis li { text-align: left; border-top: 0; border-left: 2px solid var(--nb-hairline-strong);
    padding: var(--spacing-3) var(--spacing-4); }
  .shift__axis li.is-dark { border-left-color: var(--bronze); }
}

.shift__marks { display: grid; grid-template-columns: 3fr 4fr; gap: var(--spacing-6);
  margin-top: var(--spacing-6); }
@media (max-width: 860px) { .shift__marks { grid-template-columns: 1fr; } }
.shift__mark { margin: 0; padding-top: var(--spacing-4); font-size: 14.5px; line-height: 1.6;
  color: var(--text-secondary); border-top: 1px solid var(--nb-hairline); }
.shift__mark b { display: block; font-family: var(--font-numeric); font-weight: 400;
  font-size: var(--text-label); letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 5px; }
.shift__mark--real { border-top-color: var(--bronze); }
.shift__mark--real b { color: var(--bronze-lit); }
.shift__mark--assumed b { color: var(--limestone-faint); }

/* the global figcaption is a small uppercase numeric label, which is right for a
   photo credit and wrong for two sentences of explanation — long all-caps passages
   lose the word shapes readers actually recognise */
.shift figcaption { margin-top: var(--spacing-6); padding-top: var(--spacing-4);
  border-top: 1px solid var(--nb-hairline); color: var(--limestone-faint);
  font-family: var(--font-body); font-size: 14px; letter-spacing: normal;
  text-transform: none; line-height: 1.6; max-width: 84ch; }
.shift figcaption .icon { color: var(--text-accent); margin-right: .45rem; vertical-align: -0.15em; }

/* ============================================================================
   NEXT — what happens after the form is sent.

   A form is not abandoned because it is long; it is abandoned because the sender
   cannot picture what it triggers. Three steps, each with the one thing a
   hesitant sender wants: who, how fast, and whether it commits them. The
   assurance row underneath answers the objections the copy elsewhere already
   makes, gathered where the decision is actually taken.
   ========================================================================== */
.next { list-style: none; margin: var(--spacing-10) 0 0; padding: 0; display: grid;
  gap: 1px; background: var(--nb-hairline); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); }
.next > li { background: var(--surface-card); padding: var(--spacing-6);
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--spacing-5);
  align-items: start; }
.next__mark { width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1px solid var(--border-accent); border-radius: var(--r);
  color: var(--bronze-lit); background: var(--surface-canvas); }
.next h3 { margin: 0 0 var(--spacing-2); font-family: var(--font-display);
  font-weight: 400; font-size: 1.2rem; }
.next p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6;
  max-width: 70ch; }
.next__when { margin-top: var(--spacing-3) !important; font-family: var(--font-numeric);
  font-size: var(--text-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--limestone-faint) !important; }

.assure { list-style: none; margin: var(--spacing-8) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4) var(--spacing-8); }
@media (max-width: 760px) { .assure { grid-template-columns: 1fr; } }
.assure li { display: flex; gap: .6rem; align-items: baseline;
  color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; }
.assure .icon { color: var(--text-accent); flex: none; transform: translateY(2px); }
/* a module list item now leads with its icon; the bullet marker steps aside */
.modules--deep li:has(.icon--mod) { padding-left: 2.6rem; }
.modules--deep li:has(.icon--mod)::before { display: none; }
.icon--mod { position: absolute; left: 0; top: .15em; width: 1.5rem; height: 1.5rem;
  color: var(--text-accent); }
.modules--deep li { position: relative; }

/* ============================================================================
   The global `p, li { max-width: var(--nb-measure) }` is right for prose and
   wrong for a list that is a layout. Every component below is a grid or a set of
   tiles, where the measure has to be set on the text inside the item rather than
   on the item itself — left capped, each tile stopped at 607px inside a 1040px
   container and left a dead band down the right of the section.
   ========================================================================== */
.next > li,
.lenses > li,
.path__main > li,
.modules--deep > li,
.assure > li,
.shift__axis > li,
.alloc__stages > li,
.bars > li,
.gate__split > *,
.built__grid > *,
.principals > * { max-width: none; }

/* ============================================================================
   FIT — honest qualification, on every rung.

   The strongest thing a services page can do is exclude someone credibly: a
   buyer who reads a real "not yet" trusts the "worth it" beside it. Two columns
   of equal weight, because the moment the disqualifying side is visually
   quieter it reads as a formality. Only the affirming side takes colour.
   ========================================================================== */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--nb-hairline); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); margin-top: var(--spacing-8); }
@media (max-width: 820px) { .fit { grid-template-columns: 1fr; } }
.fit__side { background: var(--surface-card); padding: var(--spacing-6); }
.fit__side--no { background: var(--surface-system); }
.fit__head { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--spacing-5);
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .12em;
  text-transform: uppercase; }
.fit__side--yes .fit__head { color: var(--text-accent); }
.fit__side--no .fit__head { color: var(--limestone-faint); }
.fit__side--no .fit__head .icon { color: var(--limestone-faint); }
.fit__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-4); }
.fit__side li { max-width: none; color: var(--text-secondary); font-size: 15px;
  line-height: 1.6; padding-left: 1.1rem; position: relative; }
.fit__side li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--nb-hairline-strong); }
.fit__side--yes li::before { background: var(--bronze); }
.fit__note { margin-top: var(--spacing-5); max-width: 76ch; }

/* ============================================================================
   DELIVER — the artefacts a surface produces.

   The most concrete thing a service page can show is the object that arrives at
   the end. Named left, purpose right, on the same hairline grid as the rest of
   the site, so a buyer can scan the names and stop on the one they care about.
   ========================================================================== */
.deliver { display: grid; gap: 1px; margin: var(--spacing-8) 0 0;
  background: var(--nb-hairline); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); }
.deliver__row { background: var(--surface-card); padding: var(--spacing-5) var(--spacing-6);
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--spacing-4) var(--spacing-8); align-items: baseline; }
@media (max-width: 820px) { .deliver__row { grid-template-columns: 1fr; gap: var(--spacing-2); } }
.deliver dt { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem;
  color: var(--text-primary); }
.deliver dd { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
/* the caveat was sitting flush against the table edge */
.deliver + .micro { margin-top: var(--spacing-5); max-width: 76ch; }
.assure--wide { margin-top: var(--spacing-8); }

/* ============================================================================
   BL — the sectioned baseline.

   Twenty-eight statements at once is a wall, so it runs four sections deep with
   one visible at a time and a progress rail that is also the navigation. A
   completed section forwards itself after a short hold — long enough that the
   last choice is seen to register, short enough that it does not feel stuck —
   and the hold is cancelled the moment the visitor touches a control themselves.
   The final section never auto-forwards: the result is something you ask for.
   ========================================================================== */
.bl__prog { list-style: none; margin: 0 0 var(--spacing-8); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--nb-hairline); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); overflow: hidden; }
@media (max-width: 700px) { .bl__prog { grid-template-columns: 1fr 1fr; } }
.bl__prog-step { background: var(--surface-card); padding: var(--spacing-4) var(--spacing-4);
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--limestone-faint); max-width: none;
  border-top: 2px solid transparent;
  transition: color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease); }
.bl__prog-step .icon { color: inherit; }
.bl__prog-step:hover { color: var(--text-secondary); }
.bl__prog-step.is-done { color: var(--text-secondary); border-top-color: var(--nb-hairline-strong); }
.bl__prog-step.is-on { color: var(--text-primary); border-top-color: var(--bronze);
  background: var(--surface-system); }

/* only the current section is in the document flow */
.baseline__set { display: none; }
.baseline__set.is-on { display: block; }
.bl.is-done .baseline__set { display: none; }

.baseline__set legend { display: grid; gap: 3px; padding: 0 var(--spacing-3);
  margin-left: calc(var(--spacing-3) * -1); }
.baseline__set legend b { font-family: var(--font-display); font-weight: 400;
  font-size: 1.34rem; color: var(--text-primary); }
.baseline__set legend small { font-family: var(--font-body); font-size: 14px;
  color: var(--limestone-faint); }
.baseline__set legend:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 4px; }

.bl__nav { display: grid; grid-template-columns: auto 1fr auto; gap: var(--spacing-4);
  align-items: center; margin-top: var(--spacing-8); padding-top: var(--spacing-6);
  border-top: 1px solid var(--nb-hairline); }
@media (max-width: 620px) {
  .bl__nav { grid-template-columns: 1fr 1fr; }
  .bl__count { grid-column: 1 / -1; order: -1; text-align: left; }
}
.bl__count { margin: 0; text-align: center; font-family: var(--font-numeric);
  font-size: var(--text-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--limestone-faint); }
.bl__nav .btn[disabled] { opacity: .4; pointer-events: none; }

/* where to read next, once a score exists */
.baseline__lead-out { margin-top: var(--spacing-10); padding-top: var(--spacing-6);
  border-top: 1px solid var(--border-emphasis); }
.baseline__lead-out p { color: var(--text-secondary); max-width: 72ch; margin: 0 0 var(--spacing-6); }
.baseline__lead-out b { color: var(--text-primary); font-family: var(--font-display); font-weight: 400; }

/* ============================================================================
   ACT-END — the closing call, with the answer to "and then what?"

   Seventeen pages ended on a heading, two buttons and a one-line note. The
   objection at that exact moment is never "what is this", it is "what happens if
   I send it" — so the three-step answer from the contact page rides alongside
   every ask, and the arms close the page the way they open it.
   ========================================================================== */
.act-end__in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--spacing-12); align-items: start; }
@media (max-width: 900px) { .act-end__in { grid-template-columns: 1fr; gap: var(--spacing-10); } }

.act-end__aside { border-left: 1px solid var(--nb-hairline); padding-left: var(--spacing-8); }
@media (max-width: 900px) {
  .act-end__aside { border-left: 0; border-top: 1px solid var(--nb-hairline);
    padding-left: 0; padding-top: var(--spacing-8); }
}
.act-end__crest { display: block; width: 46px; height: auto; opacity: .45;
  margin-bottom: var(--spacing-6); }
.act-end__next { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-5);
  counter-reset: aen; }
.act-end__next li { max-width: none; display: grid; gap: 2px; padding-left: 1.6rem;
  position: relative; counter-increment: aen; }
.act-end__next li::before { content: counter(aen, decimal-leading-zero);
  position: absolute; left: 0; top: .12em; font-family: var(--font-numeric);
  font-size: var(--text-label); letter-spacing: .06em; color: var(--text-accent); }
.act-end__next b { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem;
  color: var(--text-primary); }
.act-end__next span { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.act-end__aside-note { margin: var(--spacing-6) 0 0; padding-top: var(--spacing-4);
  border-top: 1px solid var(--nb-hairline); color: var(--limestone-faint);
  font-size: 13.5px; }

/* the arms as a quiet mark on a doctrine quote, and icons that let a legal page
   and a figure row be scanned rather than read end to end */
.pq-crest { display: block; width: 40px; height: auto; opacity: .38;
  margin: 0 auto var(--spacing-6); }
.icon--clause { color: var(--text-accent); margin-right: .5rem; vertical-align: -0.16em; }
.faq h3 .icon--clause { width: 1.05em; height: 1.05em; }
.stat__icon { display: block; width: 1.5rem; height: 1.5rem; color: var(--text-accent);
  margin-bottom: var(--spacing-3); }
/* the band media slot the engine always supported and the site never filled */
.band__media { margin: 0; }
.band__media img { width: 100%; height: auto; display: block; border-radius: var(--r);
  border: 1px solid var(--nb-hairline); }

/* proving ground stated as a status, not only as prose */
.proving { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: var(--spacing-8) 0 var(--spacing-6); background: var(--nb-hairline);
  border: 1px solid var(--nb-hairline); border-radius: var(--r); }
@media (max-width: 760px) { .proving { grid-template-columns: 1fr; } }
.proving > div { background: var(--surface-card); padding: var(--spacing-5); }
.proving dt { display: flex; align-items: center; gap: .45rem;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--limestone-faint); margin-bottom: var(--spacing-2); }
.proving dt .icon { color: var(--text-accent); }
.proving dd { margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 1.08rem; color: var(--text-primary); line-height: 1.35; }

/* the request funnel shows its shape: three steps, and which one you are on */
.funnel__rail { list-style: none; margin: var(--spacing-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--nb-hairline); border: 1px solid var(--nb-hairline);
  border-radius: var(--r); overflow: hidden; counter-reset: fr; }
@media (max-width: 620px) { .funnel__rail { grid-template-columns: 1fr; } }
.funnel__rail li { max-width: none; counter-increment: fr; background: var(--surface-card);
  padding: var(--spacing-4) var(--spacing-5); display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--limestone-faint);
  border-top: 2px solid transparent; }
.funnel__rail li::before { content: counter(fr, decimal-leading-zero); color: var(--text-accent); }
.funnel__rail li.is-on { color: var(--text-primary); background: var(--surface-system);
  border-top-color: var(--bronze); }
.funnel__rail li.is-done { color: var(--text-secondary); border-top-color: var(--nb-hairline-strong); }
/* the first question is the one that decides the branch, so its options get the
   same icons the rest of the site uses for those ideas */
.choices label span { display: flex; align-items: center; gap: .6rem; }
.icon--choice { color: var(--text-accent); flex: none; width: 1.25rem; height: 1.25rem; }
.choices input:checked + span .icon--choice { color: var(--slate-black); }

/* ============================================================================
   Three corrections, all of them things that only show up once the page is read
   end to end rather than section by section.

   1. Seamless scroll. The page ran three different grounds — the hero at
      #0B0E12, the strips at #12161C and the brand band at #070910 — so the brand
      band read as a dark gap cut into the middle of the page. The strips are the
      majority, so the outliers join them; the band still separates itself with
      its plate and its hairlines, which is what the brief asks for anyway.
   2. The footer mark. 104px was chosen for the old dark raster, which read
      smaller and dimmer. The mono vector at the same size dominates the footer.
   3. Density. The grid components were set at the same scale as fine print,
      which made every table-like block read as crunched.
   ========================================================================== */
.brandband { background: var(--surface-card); }
.act0 { background: var(--surface-card); }

.crest { width: 62px; }
@media (max-width: 620px) { .crest { width: 52px; } }

/* --- the grid components get room to breathe and a readable size --- */
.deliver__row { padding: var(--spacing-6); gap: var(--spacing-4) var(--spacing-10); }
.deliver dt { font-size: 1.18rem; }
.deliver dd { font-size: 16px; line-height: 1.65; }

.record > div { padding: var(--spacing-8); gap: var(--spacing-5) var(--spacing-10); }
.record dd { font-size: 1.28rem; line-height: 1.4; }
.record dd small { font-size: 15px; line-height: 1.65; margin-top: var(--spacing-4);
  padding-top: var(--spacing-4); }

.gap__head, .gap__row { padding: var(--spacing-6); }
.gap__row p { font-size: 16px; line-height: 1.65; }
.gap__cost { padding: var(--spacing-6); font-size: 16px; }

.fit__side { padding: var(--spacing-8); }
.fit__side li { font-size: 16px; line-height: 1.65; }
.fit__side ul { gap: var(--spacing-5); }

.proving > div { padding: var(--spacing-6); }
.proving dd { font-size: 1.16rem; }

.spec-row > div { padding: var(--spacing-6) var(--spacing-6) var(--spacing-8); }
.spec-row dd { font-size: 1.24rem; }
.spec-row dd small { font-size: 15px; line-height: 1.6; margin-top: var(--spacing-3); }

.alloc__stage { padding: var(--spacing-8) var(--spacing-6); gap: var(--spacing-4); }
.alloc__stage p { font-size: 15.5px; line-height: 1.65; }

.next > li { padding: var(--spacing-8) var(--spacing-6); }
.next p { font-size: 16px; line-height: 1.65; }

.gate__branch { padding: var(--spacing-8); }
.gate__branch p:not(.gate__head):not(.gate__n):not(.gate__note) { font-size: 16px; line-height: 1.65; }
/* the surface variant reverses the emphasis: the right column is the outcome,
   so it carries the readable weight and the left is what is being left behind */
.gap--surface .gap__row p:first-of-type { color: var(--limestone-faint); }
.gap--surface .gap__row p:last-of-type { color: var(--text-secondary); }
.gap--surface .gap__link::before, .gap--surface .gap__link::after {
  background: var(--nb-hairline-strong); }
.gap--surface .gap__head span[role="columnheader"]:last-of-type .icon { color: var(--bronze-lit); }

/* ============================================================================
   RT — the two-question router.

   The pattern is borrowed from the large firms' selectors; the behaviour is not.
   Theirs qualifies a lead, so every path ends at a form. This one is allowed to
   conclude "probably not us" and send the visitor to read something instead,
   which is the only version of the device this brand can honestly ship.
   ========================================================================== */
.rt { display: grid; gap: var(--spacing-8); margin-top: var(--spacing-8); }
.rt__q { border: 0; margin: 0; padding: 0; }
.rt__q legend { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-accent);
  margin-bottom: var(--spacing-4); padding: 0; }
.rt__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) { .rt__opts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rt__opts { grid-template-columns: 1fr; } }
.rt__opt { position: relative; display: block; cursor: pointer;
  border: 1px solid var(--nb-hairline); border-radius: var(--r);
  background: var(--surface-card); padding: var(--spacing-5);
  transition: border-color var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease); }
.rt__opt:hover { border-color: var(--nb-hairline-strong); }
.rt__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.rt__label { display: block; font-size: 15.5px; line-height: 1.5; color: var(--text-primary); }
.rt__opt small { display: block; margin-top: 4px; color: var(--limestone-faint); font-size: 13.5px; }
.rt__opt:has(input:checked) { border-color: var(--border-accent); background: var(--surface-system); }
.rt__opt:has(input:focus-visible) { outline: 2px solid var(--bronze-lit); outline-offset: 2px; }

.rt__out { margin-top: var(--spacing-10); padding-top: var(--spacing-8);
  border-top: 1px solid var(--border-emphasis); }
.rt__tone { margin: 0 0 var(--spacing-3); font-family: var(--font-numeric);
  font-size: var(--text-label); letter-spacing: .12em; text-transform: uppercase; }
.rt__tone--yes { color: var(--text-accent); }
.rt__tone--gated { color: var(--limestone-dim); }
.rt__tone--no { color: var(--limestone-faint); }
.rt__out h3 { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 0 0 var(--spacing-4); }
.rt__out p { color: var(--text-secondary); max-width: 74ch; margin: 0 0 var(--spacing-6);
  font-size: 16px; line-height: 1.65; }
.rt__out b { color: var(--text-primary); font-family: var(--font-display); font-weight: 400; }

/* ============================================================================
   ARTICLES — the blog above, the firm's own positions below.

   A firm with no publishable results shows its thinking instead, so the reading
   experience is the product here. One measure, generous leading, headings that
   separate by space rather than by rule.

   The index is a feed rather than a list of links: each entry carries the
   byline, the argument and the opening of it, so a reader can decide without
   opening anything. Subjects are buttons, because with sixty-six pieces the
   useful first action is to narrow. Bronze appears on exactly two things, the
   recommended flag and the live subject, and nowhere else on the page.
   ========================================================================== */
.article-body { max-width: 68ch; }
.article-body p { font-size: 17.5px; line-height: 1.75; color: var(--text-secondary);
  margin: 0 0 var(--spacing-6); max-width: none; }
.article-body p:first-of-type { font-size: 19px; color: var(--text-primary); line-height: 1.65; }
.article-body h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.42rem;
  color: var(--text-primary); margin: var(--spacing-12) 0 var(--spacing-4); }

.article-foot { border-top: 1px solid var(--nb-hairline); padding-top: var(--spacing-8);
  max-width: 74ch; }
.article-foot .pq-crest { margin: 0 0 var(--spacing-4); width: 34px; }
.article-foot__line { color: var(--limestone-faint); font-size: 14.5px; line-height: 1.6;
  margin: 0 0 var(--spacing-6); max-width: none; }

/* ------------------------------------------------------------- the byline -- */
.phead__by { display: flex; align-items: center; gap: 12px; margin: var(--spacing-6) 0 0;
  max-width: none; }
.phead__by img { width: 30px; height: auto; opacity: .8; }
.phead__by span { display: grid; gap: 1px; }
.phead__by b { font-family: var(--font-display); font-weight: 400; font-size: 15px;
  color: var(--text-primary); }
.phead__by time { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--limestone-faint); }

.phead__jump { display: flex; flex-wrap: wrap; gap: var(--spacing-4); margin: var(--spacing-6) 0 0;
  max-width: none; }
.phead__jump a { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
  text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--nb-hairline-strong); }
.phead__jump a:hover, .phead__jump a:focus-visible { color: var(--text-primary);
  border-bottom-color: var(--bronze-lit); }

/* ----------------------------------------------------------- band heading -- */
.sechead { max-width: 78ch; margin: 0 0 var(--spacing-8); }
.sechead__eyebrow { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-accent);
  margin: 0 0 var(--spacing-3); max-width: none; }
.sechead h2 { margin: 0 0 var(--spacing-4); }
.sechead__note { color: var(--text-secondary); font-size: 15.5px; line-height: 1.7;
  margin: 0; max-width: 72ch; }

/* -------------------------------------------------------- subject filters -- */
/* Square, never a pill. The live one is the only bronze thing in the row, so
   the current subject reads at a glance without a coloured bar under it. */
.filters { margin: 0 0 var(--spacing-8); }
.filters__label { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--limestone-faint);
  margin: 0 0 var(--spacing-3); max-width: none; }
.filters__row { display: flex; flex-wrap: wrap; gap: 8px; }
.filters__btn { display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.2;
  padding: 10px 14px; border: 1px solid var(--nb-hairline-strong); border-radius: 2px;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease); }
.filters__btn span { font-family: var(--font-numeric); font-size: 12px;
  color: var(--limestone-faint); letter-spacing: .06em; }
.filters__btn:hover { color: var(--text-primary); border-color: var(--border-emphasis); }
.filters__btn:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 2px; }
.filters__btn.is-on { color: var(--text-primary); border-color: var(--bronze);
  background: var(--surface-card); }
.filters__btn.is-on span { color: var(--text-accent); }

/* ------------------------------------------------------------- the feed -- */
.feed__group { margin: 0 0 var(--spacing-12); }
.feed__group[hidden] { display: none; }
.feed__head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding-bottom: var(--spacing-3); margin: 0 0 var(--spacing-6);
  border-bottom: 1px solid var(--nb-hairline); }
.feed__topic { font-family: var(--font-display); font-weight: 400; font-size: 1.24rem;
  color: var(--text-primary); margin: 0; }
.feed__count { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--limestone-faint);
  margin: 0 0 0 auto; max-width: none; }
.feed__only { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
  background: none; border: 0; border-bottom: 1px solid var(--nb-hairline-strong);
  padding: 0 0 3px; cursor: pointer; }
.feed__only:hover { color: var(--text-primary); border-bottom-color: var(--bronze-lit); }
.feed__only:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 3px; }
.feed__empty { color: var(--text-secondary); margin: 0; }

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(318px, 1fr)); }
.feed__item { margin: 0; max-width: none; }

/* --------------------------------------------------------------- a post -- */
.post { display: flex; flex-direction: column; height: 100%;
  padding: var(--spacing-6); background: var(--surface-card);
  border: 1px solid var(--nb-hairline); border-radius: 2px;
  text-decoration: none; color: inherit;
  transition: background var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease); }
.post:hover { background: var(--surface-card-hover); border-color: var(--border-emphasis); }
.post:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: -2px; }
/* The recommended flag is the one event on the page, so it gets the only solid
   bronze edge and nothing else does. */
.post--rec { border-top: 2px solid var(--bronze); }
.post__flag { font-family: var(--font-numeric); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-accent); margin: 0 0 0 auto; flex: none;
  align-self: flex-start; max-width: none; }

.post__by { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--spacing-4);
  max-width: none; }
.post__by img { width: 26px; height: auto; opacity: .72; flex: none; }
.post__who { display: grid; gap: 2px; min-width: 0; }
.post__who b { font-family: var(--font-display); font-weight: 400; font-size: 13.5px;
  color: var(--text-primary); }
.post__ctx { font-family: var(--font-numeric); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--limestone-faint); }

.post__title { font-family: var(--font-display); font-weight: 400; font-size: 1.22rem;
  line-height: 1.28; color: var(--text-primary); margin: 0 0 var(--spacing-3); }
.post__stand { color: var(--text-secondary); font-size: 15px; line-height: 1.6;
  margin: 0 0 var(--spacing-4); max-width: none; }
/* The opening of the argument, clamped the way a feed clamps a post. It is not
   a teaser: it is the first thing the article actually says. */
.post__opener { color: var(--limestone-dim); font-size: 14px; line-height: 1.65;
  margin: 0 0 var(--spacing-4); max-width: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: auto 0 0; padding-top: var(--spacing-4); max-width: none;
  border-top: 1px solid var(--nb-hairline); }
.post__cta { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.post:hover .post__cta { color: var(--text-accent); }
.post__foot time { font-family: var(--font-numeric); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--limestone-faint); }

/* ------------------------------------------------------------- citations -- */
.sources { margin: var(--spacing-12) 0 0; max-width: 74ch;
  border-top: 1px solid var(--nb-hairline); padding-top: var(--spacing-6); }
.sources__h { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-accent);
  font-weight: 400; margin: 0 0 var(--spacing-4); }
.sources__list { margin: 0 0 var(--spacing-4); padding: 0 0 0 1.3em; display: grid; gap: 10px; }
.sources__list li { color: var(--text-secondary); font-size: 14.5px; line-height: 1.6;
  max-width: none; }
.sources__list a { color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px solid var(--nb-hairline-strong); }
.sources__list a:hover, .sources__list a:focus-visible { color: var(--text-primary);
  border-bottom-color: var(--bronze-lit); }
.sources__note { color: var(--limestone-faint); font-size: 13.5px; line-height: 1.6;
  margin: 0; max-width: none; }

/* The two bands are separated by space and one hairline, never by a second
   ground colour: the page scrolls as one surface. */
.strip--firm { border-top: 1px solid var(--nb-hairline); }

@media (max-width: 760px) {
  .feed { grid-template-columns: 1fr; }
  .feed__count { margin-left: 0; width: 100%; }
}

/* WCAG 2.2 target size: a footer link's line box is 17px, so on touch every
   column link was an under-sized target on every page. The inline exception
   does not cover a navigation list. */
@media (max-width: 900px) {
  .ft__grid a, .ft__legal a { display: inline-block; padding-block: 5px; }
  .ft__grid li { margin: 0; }
  /* The breadcrumb is a navigation list too, so its links carry the same floor. */
  .crumbs a { display: inline-block; padding-block: 5px; }
}
/* One pixel short of the minimum target, which is still short of it. */
.feed__only { padding: 3px 0 4px; }

/* ============================================================================
   THE FILM HERO

   The entry film, moved off its own landing page and onto the top of the home
   page. Seven screens slide sideways over one video. The poster carries the
   first paint; the film arrives later or not at all, and the type is readable
   either way, which is the only version of a video hero worth shipping.
   ========================================================================== */
.fh { position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 86vh, 880px); display: grid; align-items: end;
  /* An auto grid track sizes to its item's max-content, so the wrap inside it
     took its full 1152px on a 390px phone and the type ran off the screen. The
     section clips, so nothing scrolled sideways to give it away. */
  grid-template-columns: minmax(0, 1fr);
  padding: var(--spacing-20) 0 var(--spacing-10); }
.fh__media { position: absolute; inset: 0; z-index: -2; }
.fh__video, .fh__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh__video { background: var(--slate-black, #0B0E12); position: relative; z-index: 1; }
/* Two stops, not a decorative wash: one to hold the type, one to seat the
   bottom edge against the band below it. */
/* A negative z-index here would paint the scrim behind the video rather than
   over it, which is the one arrangement that looks like no scrim at all. */
.fh__scrim { position: absolute; inset: 0; z-index: 2; display: block;
  background:
    linear-gradient(to right, rgba(7, 9, 16, .95) 0%, rgba(7, 9, 16, .88) 42%, rgba(7, 9, 16, .5) 78%, rgba(7, 9, 16, .34) 100%),
    linear-gradient(to top, rgba(7, 9, 16, .97) 0%, rgba(7, 9, 16, .35) 46%, rgba(7, 9, 16, .2) 100%); }

.fh__in { position: relative; z-index: 1; width: 100%; }
.fh__viewport { overflow: hidden; }
.fh__track { display: flex; will-change: transform;
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .fh__track { transition: none; } }
.fh__ch { flex: 0 0 100%; max-width: 100%; min-width: 0; padding-right: var(--spacing-8);
  opacity: .32; transition: opacity 420ms ease; }
.fh__ch.is-on { opacity: 1; }

.fh__crest { width: 56px; height: auto; display: block; margin: 0 0 var(--spacing-5); opacity: .95; }
.fh__eyebrow { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-accent);
  margin: 0 0 var(--spacing-4); max-width: 62ch; }
.fh__h { font-family: var(--font-display); font-weight: 400; line-height: 1.08;
  font-size: clamp(2rem, 4.2vw, 3.35rem); color: var(--text-primary);
  margin: 0 0 var(--spacing-5); max-width: 19ch; text-wrap: balance; }
.fh__ch:not(:first-child) .fh__h { font-size: clamp(1.75rem, 3.4vw, 2.7rem); max-width: 22ch; }
.fh__h em { font-style: normal; color: var(--text-accent); }
.fh__line { color: var(--text-secondary); font-size: 16.5px; line-height: 1.68;
  margin: 0 0 var(--spacing-6); max-width: 60ch; }
.fh .actions { margin: 0; }

/* ------------------------------------------------------------- the rail -- */
.fh__bar { display: flex; align-items: center; gap: 14px;
  margin: var(--spacing-8) 0 0; padding-top: var(--spacing-5);
  border-top: 1px solid var(--nb-hairline); }
.fh__arrow { width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--nb-hairline-strong); border-radius: 2px; background: transparent;
  color: var(--text-secondary); font-size: 15px; cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.fh__arrow:hover { color: var(--text-primary); border-color: var(--bronze); }
.fh__arrow:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 2px; }
.fh__dots { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fh__dots li { margin: 0; max-width: none; }
/* A 10px mark would be an 10px target, so the button is 24px and the mark
   inside it is the part you see. */
.fh__dots button { width: 26px; height: 26px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center; }
.fh__dots button::before { content: ""; width: 14px; height: 2px;
  background: var(--nb-hairline-strong);
  transition: background var(--motion-fast) var(--motion-ease), width var(--motion-fast) var(--motion-ease); }
.fh__dots button:hover::before { background: var(--limestone-dim); }
.fh__dots button[aria-current="true"]::before { background: var(--bronze); width: 24px; }
.fh__dots button:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 1px; }
.fh__count { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; color: var(--limestone-faint); margin: 0 0 0 auto; max-width: none; }
.fh__note { color: var(--limestone-faint); font-size: 13.5px; margin: var(--spacing-4) 0 0;
  max-width: 70ch; }

.strip--lines { padding-top: var(--spacing-12); }

@media (max-width: 760px) {
  .fh { min-height: 0; padding: var(--spacing-12) 0 var(--spacing-8); }
  .fh__scrim { background:
    linear-gradient(to top, rgba(7, 9, 16, .97) 0%, rgba(7, 9, 16, .74) 55%, rgba(7, 9, 16, .58) 100%); }
  .fh__h { max-width: none; }
  .fh__ch { padding-right: 0; }
  .fh__count { width: 100%; margin: 6px 0 0; order: 4; text-align: right; }
  .fh__bar { flex-wrap: wrap; }
}

/* ============================================================================
   CONDENSE — the page as rows you click, rather than a scroll you endure.

   A closed row is a heading and the sentence that answers it. That is the whole
   idea: the answer is on the surface and the argument is one click under it.
   The number on the left gives the page a shape you can hold, the rule under
   each row does the separating, and nothing here carries a fill or a shadow.
   ========================================================================== */
.cond { border-top: 1px solid var(--nb-hairline); padding: 0; }
.cond + .cond { border-top: 1px solid var(--nb-hairline); }
.cond__head { padding: 0; }
.cond__trigger { display: flex; align-items: flex-start; gap: var(--spacing-5);
  width: 100%; text-align: left; background: none; border: 0;
  padding: var(--spacing-8) 0; cursor: pointer; color: inherit;
  transition: opacity var(--motion-fast) var(--motion-ease); }
.cond__trigger:hover .cond__h { color: var(--text-accent); }
.cond__trigger:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 4px; }

.cond__n { flex: none; width: 2.2rem; padding-top: .45rem;
  font-family: var(--font-numeric); font-size: var(--text-label); letter-spacing: .12em;
  color: var(--limestone-faint); }
.cond__label { display: grid; gap: 8px; min-width: 0; flex: 1 1 auto; }
.cond__h { font-family: var(--font-display); font-weight: 400; line-height: 1.18;
  font-size: clamp(1.24rem, 2.1vw, 1.66rem); color: var(--text-primary);
  transition: color var(--motion-fast) var(--motion-ease); }
.cond__dek { color: var(--text-secondary); font-size: 15.5px; line-height: 1.65;
  max-width: 74ch; }
.cond.is-open .cond__dek { color: var(--text-secondary); }

/* Two strokes that become one. No chevron glyph, no icon font. */
.cond__mark { flex: none; position: relative; width: 34px; height: 34px; margin-top: .2rem;
  border: 1px solid var(--nb-hairline-strong); border-radius: 2px;
  transition: border-color var(--motion-fast) var(--motion-ease); }
.cond__mark::before, .cond__mark::after { content: ""; position: absolute; inset: 50% 9px auto 9px;
  height: 1px; background: var(--limestone-dim);
  transition: transform 220ms var(--motion-ease), background var(--motion-fast) var(--motion-ease); }
.cond__mark::after { transform: rotate(90deg); }
.cond.is-open .cond__mark::after { transform: rotate(0deg); }
.cond__trigger:hover .cond__mark { border-color: var(--bronze); }
.cond__trigger:hover .cond__mark::before, .cond__trigger:hover .cond__mark::after { background: var(--bronze); }

.cond__body { padding-bottom: var(--spacing-12); }
.cond__body[hidden] { display: none; }
/* The section's own top padding is the row's padding now. */
.cond > .cond__body > .wrap { padding-top: 0; }

/* ------------------------------------------------------------- contents -- */
/* The site header is sticky at 70px, so a contents bar pinned to zero parks
   underneath it and is never seen again. */
.onthis { position: sticky; top: 70px; z-index: 30;
  background: var(--surface-canvas, #0B0E12);
  border-top: 1px solid var(--nb-hairline); border-bottom: 1px solid var(--nb-hairline); }
.onthis__in { display: flex; align-items: center; gap: var(--spacing-5);
  padding-top: 12px; padding-bottom: 12px; }
.onthis__label { flex: none; font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--limestone-faint);
  margin: 0; max-width: none; }
.onthis__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; min-width: 0; }
.onthis__list::-webkit-scrollbar { display: none; }
.onthis__list li { margin: 0; max-width: none; flex: none; }
.onthis__list a { display: block; white-space: nowrap; text-decoration: none;
  font-size: 13.5px; line-height: 1.2; padding: 8px 10px; border-radius: 2px;
  color: var(--text-secondary);
  transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); }
.onthis__list a:hover { color: var(--text-primary); background: var(--surface-card); }
.onthis__list a:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: -2px; }
.onthis__all { flex: none; margin-left: auto; background: none; cursor: pointer;
  border: 1px solid var(--nb-hairline-strong); border-radius: 2px;
  padding: 8px 12px; font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
  transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.onthis__all:hover { color: var(--text-primary); border-color: var(--bronze); }
.onthis__all:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 2px; }

@media (max-width: 760px) {
  .onthis__in { flex-wrap: wrap; gap: 8px; }
  .onthis__label { width: 100%; }
  .onthis__all { margin-left: 0; }
  .cond__trigger { gap: var(--spacing-4); padding: var(--spacing-6) 0; }
  .cond__n { width: 1.8rem; }
  .cond__mark { width: 30px; height: 30px; }
}
@media print {
  .onthis { display: none; }
  .cond__body[hidden] { display: block !important; }
}
/* The row's heading is a real h2 carrying a button, so it must not also carry
   the display type those elements normally get. */
.cond__h2 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit;
  letter-spacing: normal; }
.onthis__list a { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------- read next --- */
.alsoread { margin: var(--spacing-12) 0 0; border-top: 1px solid var(--nb-hairline);
  padding-top: var(--spacing-6); }
.alsoread__h { font-family: var(--font-numeric); font-size: var(--text-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-accent);
  font-weight: 400; margin: 0 0 var(--spacing-5); }
.alsoread__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.alsoread__list li { margin: 0; max-width: none; }
.alsoread__list a { display: grid; gap: 6px; height: 100%; padding: var(--spacing-5);
  background: var(--surface-card); border: 1px solid var(--nb-hairline); border-radius: 2px;
  text-decoration: none; color: inherit;
  transition: background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
.alsoread__list a:hover { background: var(--surface-card-hover); border-color: var(--border-emphasis); }
.alsoread__list a:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: -2px; }
.alsoread__t { font-family: var(--font-display); font-weight: 400; font-size: 1.04rem;
  line-height: 1.26; color: var(--text-primary); }
.alsoread__s { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.alsoread__m { font-family: var(--font-numeric); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--limestone-faint); margin-top: 2px; }

/* The shelf's subjects, as rows you open. Same idea as the condensed sections,
   scoped to the feed so the blog band above is unaffected. */
.feed__toggle { display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit; text-align: left; }
.feed__toggle:hover { color: var(--text-accent); }
.feed__toggle:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 4px; }
.feed__mark { position: relative; width: 24px; height: 24px; flex: none;
  border: 1px solid var(--nb-hairline-strong); border-radius: 2px; }
.feed__mark::before, .feed__mark::after { content: ""; position: absolute; inset: 50% 6px auto 6px;
  height: 1px; background: var(--limestone-dim);
  transition: transform 200ms var(--motion-ease); }
.feed__mark::after { transform: rotate(90deg); }
.feed__toggle[aria-expanded="true"] .feed__mark::after { transform: rotate(0deg); }
.feed__group.is-shut { margin-bottom: 0; }
.feed__group.is-shut .feed__head { border-bottom-color: transparent; margin-bottom: 0; }
/* .feed sets display:grid, which outranks the user-agent rule for [hidden], so
   a hidden list stayed on screen. */
.feed[hidden] { display: none; }

/* The contents bar has two forms. Wide enough for the sentences, it is a row of
   links; narrower, it is the OS picker, which shows each heading in full
   instead of clipping it at about 200px. */
.onthis__pick { display: none; }
@media (max-width: 760px) {
  .onthis__list { display: none; }
  .onthis__pick { display: block; flex: 1 1 auto; min-width: 0;
    font-family: var(--font-body); font-size: 14.5px; line-height: 1.2;
    padding: 10px 12px; border: 1px solid var(--nb-hairline-strong); border-radius: 2px;
    background: var(--surface-card); color: var(--text-primary);
    -webkit-appearance: none; appearance: none;
    /* A chevron drawn rather than fetched. */
    background-image: linear-gradient(45deg, transparent 50%, var(--limestone-dim) 50%),
                      linear-gradient(135deg, var(--limestone-dim) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px; }
  .onthis__pick:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 2px; }

  /* Twelve-pixel uppercase at this tracking is the hardest text on the page to
     read on a phone, and there are a lot of it. A little more size and a little
     less tracking, on the prose labels only; the nav and the buttons keep theirs. */
  .eyebrow, .fh__eyebrow, .sechead__eyebrow, .onthis__label,
  .micro, .act-end__note, .feed__count, .post__ctx, .post__flag {
    font-size: 12.5px; letter-spacing: .1em; }
}
@media (max-width: 760px) {
  /* The last three label styles the audit still found at 12px. */
  .alloc__who, .bl__prog-step, .lens__arts { font-size: 12.5px; letter-spacing: .1em; }
}