/* =========================================================================
   Ashley Payne — AI • SOFTWARE • SYSTEMS
   Design system. Light is the default production theme; dark is opt-in.
   All colour flows through semantic tokens — never hardcode per component.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Brand constants — identical in both themes */
  --ap-navy: #0D1B2A;
  --ap-navy-deep: #07111C;
  --ap-gold: #C8A36B;
  --ap-amber: #F59E08;
  --ap-slate: #C8D6E1;
  --ap-off-white: #F3F4F6;
  --ap-white: #FFFFFF;

  /* Semantic surfaces */
  --bg: #FFFFFF;
  --bg-subtle: #F7F8FA;
  --bg-inset: #F3F4F6;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --header-bg: rgba(255, 255, 255, .82);

  /* Semantic text */
  --text: #0D1B2A;
  --text-muted: #51606F;
  --text-faint: #63707D;
  --text-inverse: #FFFFFF;

  /* Lines + accents */
  --border: rgba(13, 27, 42, .13);
  --border-strong: rgba(13, 27, 42, .28);
  --border-control: rgba(13, 27, 42, .55);   /* >=3:1 — form controls, 1.4.11 */
  --accent: #C8A36B;
  --accent-ink: #8A6524;          /* AA-safe gold for small text on light */
  --accent-deep: #A87F3F;         /* AA-safe gold for large display text on light */
  --accent-soft: rgba(200, 163, 107, .16);

  /* CTA */
  --cta-bg: #0D1B2A;
  --cta-text: #FFFFFF;
  --cta-bg-hover: #07111C;

  /* Deliberate dark emphasis band */
  --gold-on-dark: #DCBB86;
  --band-bg: #07111C;
  --band-surface: #101F2E;
  --band-surface-raised: #1B2E42;
  --band-text: #F5F7FA;
  --band-muted: #B9C7D4;
  --band-faint: #93A5B5;
  --band-border: rgba(255, 255, 255, .16);
  --band-border-strong: rgba(255, 255, 255, .34);

  --shadow-md: 0 14px 40px -22px rgba(13, 27, 42, .38);

  /* Geometry + motion */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --content-max: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 9vw, 132px);
  --t: 180ms cubic-bezier(.2, .8, .2, 1);

  /* The Fallback families are metric-matched to the webfonts (see
     tools/font_fallbacks.py), so the swap when the real font arrives changes
     the glyphs without moving anything. */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #07111C;
  --bg-subtle: #0B1724;
  --bg-inset: #0D1B2A;
  --surface: #101F2E;
  --surface-raised: #14273A;
  --header-bg: rgba(7, 17, 28, .82);

  --text: #F5F7FA;
  --text-muted: #B9C7D4;
  --text-faint: #94A5B5;
  --text-inverse: #07111C;

  --border: rgba(255, 255, 255, .13);
  --border-strong: rgba(255, 255, 255, .30);
  --border-control: rgba(255, 255, 255, .62);
  --accent: #C8A36B;
  --accent-ink: #DCBB86;          /* AA-safe gold for small text on dark */
  --accent-deep: #C8A36B;
  --accent-soft: rgba(200, 163, 107, .14);

  --cta-bg: #C8A36B;
  --cta-text: #07111C;
  --cta-bg-hover: #DCBB86;

  /* In dark the emphasis band steps *up* rather than down, and far enough
     to still read as a distinct section (the old #0D1B2A was a 1.16:1 step). */
  --band-bg: #16283A;
  --band-surface: #22394F;
  --band-surface-raised: #26435E;
  --band-text: #F5F7FA;
  --band-muted: #C3D1DE;
  --band-faint: #9DAEBD;
  --band-border: rgba(255, 255, 255, .18);
  --band-border-strong: rgba(255, 255, 255, .38);

  --shadow-md: 0 16px 44px -24px rgba(0, 0, 0, .8);
}

/* ---------- 2. Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(16px, 1vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` contains horizontal overflow without making body a scroll
     container, which `hidden` does — and a scroll container silently breaks
     every `position: sticky` descendant. `hidden` stays as the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--accent-soft); color: var(--text); }

.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  background: var(--cta-bg); color: var(--cta-text);
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600;
  /* Moved on the compositor rather than by animating `top`, which is a layout
     property and forces reflow every frame. */
  transform: translateY(-140%);
  transition: transform var(--t);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout primitives ---------- */

.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(52px, 6vw, 84px); }
/* Collapses the double gap where a section follows a page hero directly. */
.section--flush-top { padding-top: 0; }
/* Halves the join where two full-padding sections meet and the first
   one ends on short content, which reads as a void rather than rhythm. */
.section--snug-top { padding-top: clamp(44px, 5vw, 76px); }
/* Where two sections of the same tone meet, their paddings stack into a void
   that reads as a mistake rather than as rhythm. The upper one gives up its
   bottom padding and the lower one's top padding carries the join alone. */
.section--flush-bottom { padding-bottom: 0; }
.section--subtle { background: var(--bg-subtle); }
.section--inset { background: var(--bg-inset); }

/* The deliberate dark emphasis band. Used sparingly — Selected Work, CTA, footer. */
.band {
  background: var(--band-bg);
  color: var(--band-text);
  --text: var(--band-text);
  --text-muted: var(--band-muted);
  --text-faint: var(--band-faint);
  --border: var(--band-border);
  --border-strong: var(--band-border-strong);
  --surface: var(--band-surface);
  --surface-raised: var(--band-surface-raised);
  --accent-ink: var(--gold-on-dark);
  --accent-deep: #C8A36B;
  --accent-soft: rgba(200, 163, 107, .14);
  --cta-bg: #C8A36B;
  --cta-text: #07111C;
  --cta-bg-hover: #DCBB86;
  position: relative;
}
.band::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ap-gold) 22%, var(--ap-gold) 78%, transparent);
  opacity: .5;
}

.divider { border: 0; border-top: 1px solid var(--border); margin: 0; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.grid--split-top { align-items: start; }

@media (max-width: 900px) {
  .grid--3, .grid--2, .grid--split { grid-template-columns: 1fr; }
}

/* ---------- 4. Type utilities ---------- */

.eyebrow--plain::before { display: none; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  max-width: none;
}
.eyebrow::before {
  content: ""; flex: 0 0 26px; height: 1px; background: var(--accent);
}

.h-display {
  font-size: clamp(2.75rem, 5.6vw, 4.5rem);
  line-height: .99;
  letter-spacing: -.032em;
}
.h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -.028em; }
.h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); letter-spacing: -.026em; }
.h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -.016em; line-height: 1.22; }

h1 + .lede, h2 + .lede, h3 + .lede { margin-top: 22px; }

.lede {
  font-size: clamp(1.06rem, 1.35vw, 1.25rem);
  line-height: 1.58;
  color: var(--text-muted);
  max-width: 60ch;
}

.muted { color: var(--text-muted); }
.gold-stop { color: var(--accent-deep); }
.small { font-size: .875rem; line-height: 1.6; color: var(--text-muted); }
.measure { max-width: 62ch; }
.flush { margin-top: 0; }
.card-list--roomy { gap: 14px; }
/* A card-list used as a sidebar starts level with the eyebrow across the grid,
   so both columns share a top edge. The default 20px would leave it hanging
   between the label and the first line of prose, which reads as a near miss
   rather than as alignment. */
.card-list--aside { margin-top: 0; }
.about-points--flush { margin-top: 0; }
/* Ten short items down one edge of a page is a list nobody finishes. Two
   columns halve the height, and each item is short enough that a narrow column
   costs it nothing. Balanced by the browser rather than by a fixed split, so
   adding an item does not leave one side stranded. */
/* Two columns. This used `columns: 2`, which the base .about-points rule further
   down silently defeated with `display: grid` (a grid container ignores CSS
   multi-column), so the list rendered as one column beside empty space. */
.about-points--cols {
  margin-top: clamp(22px, 2.4vw, 30px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 72px);
}
.about-points--cols li { break-inside: avoid; margin-bottom: 12px; }

@media (max-width: 760px) {
  .about-points--cols { grid-template-columns: 1fr; }
}

/* Disqualifiers read as struck through rather than bulleted: the list is a
   deliberate "not this", so it should not look like another feature list. */
/* A helper for the message field, not a section of the page. It is contained
   and set below the form's own type size so the form stays the primary thing. */
/* Contact: prompts on the left, form on the right, on the same 1200px rail as
   the header, footer and closing card. It used to be an 880px column stacked
   inside a 1200px page, so the heading sat about 100px inside the logo above
   it and the prompt card pushed the form below the fold. The form column is
   still a comfortable measure; it is the page rail that was wrong, not the
   field width. */
.contact-grid {
  align-items: start;
  /* Weighted towards the form, not split evenly. An even split gave the name
     and email fields 242px each, which is narrower than they were before this
     layout existed: fixing the page rail had quietly made the form worse. The
     prompts are a nudge and can be a sidebar; the form is the entire purpose
     of the page and gets the room. */
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(28px, 3.5vw, 56px);
}
.contact-grid .prompt-card { position: sticky; top: 104px; }

/* The two-column rule above sits later than the generic 900px single-column
   rule, so it won, and at 400px the form got about 198px beside a 119px strip of
   prompts. Restore one column here, and put the form first: it is the purpose
   of the page and a deep link lands on it. */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .contact-form { order: -1; }
  .contact-grid .prompt-card { position: static; }
}

.prompt-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px);
  margin-bottom: clamp(34px, 4vw, 48px);
}
.prompt-card .eyebrow { margin-bottom: 8px; }
.prompt-intro { font-size: .875rem; color: var(--text-muted); margin: 0 0 18px; max-width: 52ch; }

.question-list {
  list-style: none; counter-reset: q; margin: 0; padding: 0;
  display: grid; gap: 11px;
}
.question-list li {
  counter-increment: q; position: relative; padding-left: 26px;
  font-size: .955rem; line-height: 1.45; color: var(--text); max-width: 56ch;
}
.question-list li::before {
  content: counter(q) "."; position: absolute; left: 0; top: 0;
  font-size: .875rem; font-weight: 600; color: var(--accent-ink);
}

.credential {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: .85rem; line-height: 1.6; color: var(--text-muted); max-width: 52ch;
}

.not-for-you { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.not-for-you li {
  position: relative; padding-left: 24px;
  color: var(--text-muted); font-size: .955rem;
}
.not-for-you li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 11px; height: 11px;
  background:
    linear-gradient(to bottom right, transparent 45%, var(--text-faint) 45%, var(--text-faint) 55%, transparent 55%),
    linear-gradient(to bottom left,  transparent 45%, var(--text-faint) 45%, var(--text-faint) 55%, transparent 55%);
}

.section-head { max-width: 740px; margin-bottom: clamp(38px, 4.6vw, 64px); }
.section-head p { margin-top: 18px; }

/* ---------- 5. Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 26px; min-height: 48px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform var(--t); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--primary { background: var(--cta-bg); color: var(--cta-text); }
.btn--primary:hover { background: var(--cta-bg-hover); }

.btn--gold { background: var(--accent); color: var(--ap-navy-deep); }
.btn--gold:hover { background: var(--gold-on-dark); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--text); background: var(--accent-soft); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3.4vw, 40px); }
/* On a phone the buttons stack, and as flex items each kept its own content
   width, so a pair read as two different-sized buttons ("Start here" above a
   much wider "Read a worked illustration"). One max-content track sizes to the
   widest and every button fills it. .cta-inner does the same at every width. */
@media (max-width: 560px) {
  .btn-row { display: grid; grid-template-columns: minmax(0, max-content); }
}

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--t), color var(--t);
}
.textlink:hover { border-color: currentColor; }

/* Modifier, and it must stay after the base rule: it previously sat above it
   and every property it set was overridden, so plain links rendered as
   uppercase letterspaced CTAs everywhere they were used. */
.textlink--plain {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .84rem;
}
/* Links inside article prose read as prose links, not as call-to-action labels:
   the markdown renderer emits .textlink, which mid-sentence set a citation in
   uppercase letterspaced small caps. */
.prose a.textlink, .policy a.textlink {
  text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--accent-ink);
}
.textlink .arrow { transition: transform var(--t); }
.textlink:hover .arrow { transform: translateX(3px); }

/* ---------- 6. Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-in {
  display: flex; align-items: center; gap: 20px;
  min-height: 74px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand svg { width: 38px; height: auto; flex: none; }
.brand .brand-a { fill: var(--text); }
.brand .brand-gold { fill: var(--accent); }
.brand-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: .98rem; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.1; color: var(--text); display: block;
}
.brand-descriptor {
  display: block; font-family: var(--font-body);
  font-size: .68rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-faint); margin-top: 4px;
}
@media (max-width: 420px) { .brand-descriptor { letter-spacing: .12em; font-size: .62rem; } }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-size: .855rem; font-weight: 500; color: var(--text-muted);
  padding: 10px 13px; border-radius: var(--radius-sm);
  transition: color var(--t), background-color var(--t);
}
.nav a:hover { color: var(--text); background: var(--accent-soft); }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background-color var(--t);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

.header-cta { padding: 11px 20px; min-height: 42px; font-size: .78rem; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-burger { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header-in .nav, .header-in .header-cta { display: none; }
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 12px var(--gutter) 30px;
}
.mobile-menu[data-open="true"] { display: block; }
@media (min-width: 901px) { .mobile-menu { display: none !important; } }
.mobile-menu a.m-link {
  display: block; padding: 14px 0;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.mobile-menu a.m-link[aria-current="page"] { color: var(--accent-ink); }
.mobile-menu .btn { width: 100%; margin-top: 22px; }
.mobile-theme {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 24px;
  font-size: .875rem; color: var(--text-muted);
}

/* ---------- 7. Hero ---------- */

/* ---------- 7. Hero ----------
   The headline never contests its row: it owns full width, and everything else
   sits underneath in a two-column row. Gaps deliberately differ (16 / 28 / 40 /
   64) so elements group instead of reading as four equal bands. */

.hero { padding-block: clamp(44px, 4.6vw, 64px) clamp(36px, 4vw, 56px); position: relative; }

.hero .eyebrow { margin-bottom: 16px; }
/* The measure has to fit the longest line of the headline or every line wraps
   again. "Then the technology." is 20 characters; 22ch leaves room for the gold
   stop and the display face's width without letting a line run on. */
.hero h1 { margin-bottom: 0; max-width: 22ch; }

.hero .lede { font-size: clamp(1.06rem, 1.3vw, 1.25rem); line-height: 1.5; max-width: 52ch; margin-top: clamp(24px, 2.8vw, 32px); }
.hero .btn-row { margin-top: 28px; }

/* Proof band: full width, directly under the hero, so the page reads straight
   down instead of headline -> empty corner -> numbers. Replaces the old
   credibility strip; the biography lines it used to carry live on About. */
.proof-band { border-top: 2px solid var(--accent); border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
/* A line of provenance under the numbers. There was a portrait here and it is
   gone: at the size this row allows it read as a grey disc rather than as a
   person, and a small photograph that looks wrong is worse than none. The
   point it was making, that these are one person's numbers, is in the sentence.

   The band draws no padding of its own, since every proof-list cell pads
   itself, so this row pays for its own and matches the cells' horizontal inset
   to line up under the first number. Without the bottom value the text sat on
   the band's closing border. */
.proof-byline {
  margin: clamp(24px, 2.8vw, 34px) 0 0;
  padding: clamp(20px, 2.4vw, 28px) 0 clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--border);
  /* No horizontal padding, because .proof-list li:first-child zeroes its own:
     the first column sits on the page rail, so matching the OTHER cells' inset
     left this row indented forty pixels past the number above it.
     max-width because this is a <p> and inherits 68ch from the base rule, which
     stopped the rule two thirds of the way across a full-width band. Putting
     the measure on the child was not enough; the parent draws the border. */
  max-width: none;
  font-size: .9rem; color: var(--text-muted);
}
/* No reading measure. A measure is for paragraphs, and this is one short line
   of provenance: at 62ch it broke across two lines in the middle of a band with
   450px of empty rail beside it. It still wraps on narrow screens, where it
   should. */
.proof-byline-text { display: block; }

.proof-list { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.proof-list li {
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.6vw, 40px);
  border-left: 1px solid var(--border);
}
.proof-list li:first-child { border-left: 0; padding-left: 0; }
.proof-list li:last-child { padding-right: 0; }

.proof-value {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.05; letter-spacing: -.022em;
  color: var(--text);
}
.proof-label { display: block; margin-top: 9px; font-size: .875rem; line-height: 1.5; color: var(--text-muted); max-width: 34ch; }
.proof-source {
  display: inline-flex; align-items: baseline; gap: 5px; margin-top: 10px;
  font-size: .74rem; letter-spacing: .04em; line-height: 1.4; color: var(--accent-ink);
  border-bottom: 1px solid transparent;
}
a.proof-source:hover { border-bottom-color: currentColor; }

/* Routing rule under the offer heading. Three lines that tell a first-time
   visitor which of the three doors is theirs, so they do not have to read all
   three pages to find out. */
.route-list {
  list-style: none; margin: clamp(18px, 2vw, 24px) 0 0; padding: 0;
  display: grid; gap: 10px; max-width: 62ch;
}
.route-list li {
  font-size: .925rem; line-height: 1.55; color: var(--text-muted);
  padding-left: 18px; position: relative;
}
.route-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.route-list strong { color: var(--text); font-weight: 600; }

@media (max-width: 860px) {
  .proof-list { grid-template-columns: 1fr; }
  .proof-list li { border-left: 0; border-top: 1px solid var(--border); padding-inline: 0; }
  .proof-list li:first-child { border-top: 0; padding-top: clamp(22px, 5vw, 30px); }
}

/* ---------- 9. Capability / offer cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(26px, 2.8vw, 38px);
  position: relative;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  /* Flex column so the `margin-top: auto` on the card's link actually pushes
     it to the bottom. Grid items stretch to the row height already, so without
     this the links sit wherever the copy happens to end and no two match. */
  display: flex;
  flex-direction: column;
}
/* Hugs its text: stretched, the hover underline would run the card's full width. */
.card .textlink { align-self: flex-start; }
.card::before {
  content: ""; position: absolute; inset: -1px -1px auto; height: 2px;
  background: var(--accent); border-radius: var(--radius-md) var(--radius-md) 0 0;
  opacity: 0; transition: opacity var(--t);
}
.card:hover, .card:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card:hover::before, .card:focus-within::before { opacity: 1; }

.card-icon {
  width: 44px; height: 44px; margin-bottom: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.card-icon svg { width: 21px; height: 21px; }

.card-kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 10px;
}
.card :is(h2, h3) { margin-bottom: 12px; }
.card p { color: var(--text-muted); font-size: .955rem; }

.card-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.card-list li {
  position: relative; padding-left: 20px;
  font-size: .9rem; color: var(--text-muted); line-height: 1.5;
}
.card-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 1.5px; background: var(--accent);
}
.card .textlink { margin-top: auto; padding-top: 26px; }

/* ---------- 10. Differentiator ---------- */

.statement {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.14; letter-spacing: -.026em;
  max-width: 20ch; margin: 0;
}
.statement-rule { width: 56px; height: 2px; background: var(--accent); border: 0; margin: 0 0 28px; }

/* ---------- 11. Work cards ---------- */

.work-list { display: grid; gap: clamp(14px, 1.6vw, 18px); }
.work-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: clamp(18px, 2.4vw, 30px); align-items: start;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: clamp(22px, 2.4vw, 28px);
  transition: border-color var(--t);
}
.work-card:hover { border-color: var(--border-strong); }
.work-mark {
  width: 56px; height: 56px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid var(--border);
}
.work-mark svg { width: 24px; height: 24px; }
.work-role {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 8px;
}
.work-card :is(h2, h3) { margin-bottom: 10px; }
.work-card p { color: var(--text-muted); font-size: .955rem; max-width: 62ch; }
.work-cta { align-self: start; white-space: nowrap; }
@media (max-width: 820px) {
  .work-card { grid-template-columns: 1fr; }
  .work-cta { align-self: start; }
}

/* ---------- Case studies ---------- */

.proof-list--bare { border-top: 1px solid var(--border); margin-bottom: clamp(34px, 4vw, 52px); }
.proof-list--bare li { padding-block: clamp(22px, 2.6vw, 30px); }

.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-tick { fill: var(--text-muted); font-family: var(--font-body); font-size: 15px; }
.chart-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-line--a { stroke: var(--accent); }
.chart-line--b { stroke: var(--text-faint); stroke-dasharray: 7 6; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.chart-key { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--text-muted); }
.chart-key::before { content: ""; width: 22px; height: 3px; border-radius: 2px; }
.chart-key--a::before { background: var(--accent); }
.chart-key--b::before { background: var(--text-faint); }
.chart figcaption {
  margin-top: 20px; font-size: .84rem; line-height: 1.55;
  color: var(--text-muted); max-width: 68ch;
}

.proof-note { margin: 20px 0 0; font-size: .78rem; color: var(--text-faint); }
.proof-band .proof-note:last-child,
.proof-band .work-recognition:last-child { margin-bottom: clamp(26px, 3vw, 38px); }

.decision-list { display: grid; gap: clamp(26px, 3vw, 40px); max-width: 780px; }
.decision { padding-left: clamp(18px, 2vw, 26px); border-left: 2px solid var(--accent); }
.decision h3 { margin-bottom: 10px; }
.decision p { color: var(--text-muted); font-size: .955rem; margin: 0; }

.stack-note {
  margin-top: clamp(34px, 4vw, 52px); padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: .875rem; color: var(--text-muted); max-width: 70ch;
}
.stack-note strong { color: var(--text); }

/* The one diagram on the site. It earns its place by drawing the boundary that
   the prose can only assert. */
.diagram { margin: 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption {
  margin-top: 22px; font-size: .84rem; line-height: 1.55;
  color: var(--text-muted); max-width: 62ch;
}
.diag-node { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.25; }
.diag-node--local { fill: var(--accent-soft); stroke: var(--accent); }
.diag-label {
  fill: var(--text); font-family: var(--font-display); font-weight: 600;
  font-size: 17px; letter-spacing: -.01em;
}
.diag-sub { fill: var(--text-muted); font-family: var(--font-body); font-size: 13px; }
.diag-arrow { stroke: var(--text-faint); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.diag-boundary { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .75; }
.diag-boundary-label {
  fill: var(--accent-ink); font-family: var(--font-body); font-weight: 700;
  font-size: 12.5px; letter-spacing: .16em;
}

@media (max-width: 900px) {
  .diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .diagram-scroll svg { min-width: 760px; }
}

/* ---------- 12. Testimonial ---------- */

.testimonial {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px clamp(20px, 2.4vw, 30px);
  margin: clamp(22px, 2.6vw, 30px) 0 0;
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.45; letter-spacing: -.014em;
  color: var(--text);
}
/* A factual note beside an attribution, never inside the quotation marks.
   Quiet, because it is context rather than a claim. */
.testimonial-ongoing {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding-left: 10px;
  border-left: 1px solid var(--border);
  font-size: .78rem; letter-spacing: .02em; color: var(--accent-ink);
}
@media (max-width: 560px) {
  .testimonial-ongoing {
    display: block; margin: 6px 0 0; padding: 0; border-left: 0;
  }
}

.testimonial figcaption {
  margin-top: 14px;
  font-size: .78rem; letter-spacing: .05em; color: var(--text-muted);
}
.testimonial figcaption strong { color: var(--text); font-weight: 600; }

/* Draft quotes stay out of the published page until the speaker approves them. */
.testimonial[data-approval="pending"] { display: none; }

.cta-quote { max-width: 62ch; margin-bottom: clamp(34px, 4vw, 52px); }
.cta-quote .testimonial { margin-top: 0; }

/* ---------- 13. Process ---------- */

/* Four stages since 14 September 2026 (Diagnose, Decide, Deliver, Support). */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }

.process-step {
  position: relative;
  padding: clamp(24px, 2.8vw, 32px) clamp(18px, 2vw, 30px) 0 0;
  border-top: 1px solid var(--border);
}
.process-step::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px;
  background: var(--accent);
  /* Drawn full width and scaled from the left, so the reveal runs on the
     compositor instead of animating `width` and relaying out each frame. */
  transform: scaleX(0); transform-origin: left center;
  transition: transform 620ms cubic-bezier(.2, .8, .2, 1);
}
.process-step.is-visible::before { transform: scaleX(1); }
.process-step::after {
  content: ""; position: absolute; left: 0; top: -6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-subtle);
  box-shadow: inset 0 0 0 2px var(--text-faint);
  transition: background-color var(--t);
}
.process-step.is-visible::after { box-shadow: inset 0 0 0 2px var(--accent); }
.process-step:last-child::after { background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.process-num {
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; color: var(--accent-ink); display: block; margin-bottom: 14px;
}
.process-step h3 { font-size: 1.06rem; margin-bottom: 10px; }
.process-step p { font-size: .92rem; line-height: 1.5; color: var(--text); margin: 0; max-width: 26ch; }

/* Once the steps stack, each one's top rule lands directly under the previous
   step's last line. Zero bottom padding is only safe while they sit side by side. */
@media (max-width: 1000px) {
  .process { grid-template-columns: repeat(2, 1fr); }
  .process-step { padding-right: clamp(16px, 3vw, 30px); padding-bottom: clamp(24px, 4vw, 34px); }
}
@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; }
  .process-step { padding-right: 0; padding-bottom: 30px; }
}

/* ---------- 14. About ---------- */

/* The approved portrait is 400x400, so it is used at 200px (2x sharp) as a
   square plate rather than a tall editorial crop. The grid gives it its own
   narrow column so a small image never floats in a half-width void. */
.about-media { position: relative; width: 260px; max-width: 100%; flex: none; }
.about-media img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 42%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* Portrait + text, with the portrait column sized to the asset. */
.grid--about {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 56px);
  align-items: start;
}
@media (max-width: 720px) { .grid--about { grid-template-columns: 1fr; } }

/* Identity row: portrait beside name and role, for the About page hero. */
.identity { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 26px); margin-bottom: clamp(28px, 3.4vw, 40px); }
.identity .about-media { width: 116px; }
.identity .identity-link:hover { color: var(--text); border-color: currentColor; }

.about-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.about-points li {
  position: relative; padding-left: 24px;
  color: var(--text-muted); font-size: .955rem;
}
.about-points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 11px; height: 1.5px; background: var(--accent);
}

/* ---------- 15. CTA ---------- */

/* The button column was `auto`, which handed the two buttons their full width
   and squeezed the heading into ~390px, so every closing heading wrapped to four
   lines with the buttons floating beside them. Text gets the wider share; the
   buttons wrap onto two rows when they must. */
.cta-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: 1fr; } }
/* 18ch wrapped every closing heading to four lines with the buttons floating
   mid-height beside them; 26ch sits the heading on two lines level with them. */
.cta-inner h2 { max-width: 26ch; font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.cta-inner p { margin-top: 18px; color: var(--text-muted); max-width: 52ch; }
/* The column is too narrow for both buttons on one row, so they stack, and as
   flex items each kept its own content width: the gold one carries an arrow and
   ran visibly wider than the ghost beneath it. One max-content track sizes to the
   wider button and both stretch to fill it. minmax(0, ...) lets it shrink on a
   phone rather than overflow. */
.cta-inner .btn-row { margin-top: 0; display: grid; grid-template-columns: minmax(0, max-content); }

/* The diagnostic card on the offer pages: the pricing head's split, inside the
   dark panel. Heading and price on the left, the copy and buttons on the right. */
.diag-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.diag-card .price-vat { margin-top: 14px; }
.diag-card-side .lede { margin-top: 0; }
.diag-card-side .measure { margin-top: 14px; }
.diag-card-side .btn-row { margin-top: 26px; }

/* Links from an offer page down to its search landing pages. */
.children-links { margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 860px) { .diag-card { grid-template-columns: 1fr; } .diag-card .price-h2 { max-width: none; } }

.cta-card {
  background: var(--band-bg);
  color: var(--band-text);
  --text: var(--band-text);
  --text-muted: var(--band-muted);
  --border: var(--band-border);
  --border-strong: var(--band-border-strong);
  --accent-ink: var(--gold-on-dark);
  --cta-bg: var(--accent);
  --cta-text: var(--ap-navy-deep);
  --cta-bg-hover: var(--gold-on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 4.6vw, 68px);
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ap-gold) 20%, var(--ap-gold) 80%, transparent);
  opacity: .6;
}

/* ---------- 16. Contact form ---------- */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label, .form-legend { font-size: .8rem; font-weight: 600; letter-spacing: .05em; color: var(--text); }
.fieldset { border: 0; padding: 0; margin: 0; }
.form-legend { display: block; padding: 0; margin-bottom: 12px; }
.field .hint { font-size: .78rem; color: var(--text-faint); font-weight: 400; letter-spacing: 0; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: .97rem; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  padding: 13px 15px; min-height: 48px; width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: 1px;
  border-color: var(--accent-ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 11px 20px; cursor: pointer;
  border: 1px solid var(--border-control); border-radius: 999px;
  font-size: .875rem; font-weight: 500; color: var(--text-muted);
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.choice input:checked + span { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--text); font-weight: 600; }
.choice input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.form-note { margin-top: 22px; font-size: .82rem; color: var(--text-faint); }
.form-fallback {
  margin-top: 20px; padding: 18px 20px;
  background: var(--bg-inset); border: 1px solid var(--border);
  border-left: 2px solid var(--accent); border-radius: var(--radius-sm);
}
.form-fallback-body {
  margin: 10px 0 0; font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto;
}
.form-status { margin-top: 18px; font-size: .95rem; font-weight: 500; color: var(--text); max-width: 62ch; }

/* The sent state replaces the fields with one panel rather than printing a
   sentence under the button. */
.contact-form.is-sent .form-grid,
.contact-form.is-sent > .btn-row,
.contact-form.is-sent > .form-note { display: none; }
.form-sent {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); background: var(--surface);
}
.form-sent .statement { margin-top: 10px; }
.form-sent .measure { margin-top: 14px; }
.form-sent .btn { margin-top: 22px; }

.reassurance {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  list-style: none; margin: 30px 0 0; padding: 0;
  font-size: .84rem; color: var(--text-muted);
}
.reassurance li { display: flex; align-items: center; gap: 9px; }
.reassurance li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- 17. Footer ---------- */

.site-footer { padding-block: clamp(48px, 6vw, 76px) 32px; }
/* Four columns. Company used to be an eight-item list that dwarfed the other
   two and made the footer read as a dumping ground. */
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 52px);
}
@media (max-width: 1000px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-bottom a { border-bottom: 1px solid transparent; transition: border-color var(--t); }
.footer-bottom a:hover { border-bottom-color: currentColor; }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand .brand { margin-right: 0; margin-bottom: 18px; }
.footer-brand p { color: var(--text-muted); font-size: .92rem; max-width: 40ch; }
.footer-col h2 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--text-muted); font-size: .92rem; transition: color var(--t); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: clamp(38px, 4.6vw, 60px); padding-top: 26px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: .8rem; color: var(--text-faint);
}
.footer-bottom p { margin: 0; max-width: none; }

/* ---------- 18. Interior page hero ---------- */

.page-hero { padding-block: clamp(52px, 6.5vw, 92px) clamp(40px, 5vw, 64px); }
.page-hero h1 { margin-bottom: 22px; max-width: 20ch; }

/* ---------- 20. FAQ ---------- */

/* Heading in the left column, questions in the right — the same split the rest
   of the site uses, so the section spans the full width like its neighbours. */
.faq-grid { align-items: start; }
/* The wrapper stretches to give the sticky child room to travel; sticking the
   stretched element itself would pin something already as tall as its track. */
.faq-intro { align-self: stretch; }
.faq-intro-inner { position: sticky; top: 104px; }
.faq-intro .h2 { max-width: 14ch; }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  display: flex; align-items: flex-start; gap: 16px; justify-content: space-between;
  padding: clamp(18px, 2.2vw, 26px) 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.35;
  letter-spacing: -.012em; cursor: pointer; list-style: none;
  transition: color var(--t);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent-ink); }
.faq-q::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-top: .35em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t); opacity: .55;
}
.faq-item[open] .faq-q::after { transform: rotate(-135deg); opacity: 1; }
.faq-item[open] .faq-q { color: var(--text); }
.faq-a { padding-bottom: clamp(20px, 2.4vw, 28px); max-width: 68ch; }
.faq-a p { color: var(--text-muted); }
.faq-a p + p { margin-top: 14px; }

/* ---------- 21. Comparison table ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%; min-width: 680px; border-collapse: collapse;
  font-size: clamp(.88rem, 1.05vw, .95rem);
}
.compare th, .compare td {
  padding: 15px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.compare thead th {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint);
  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.compare tbody th {
  font-family: var(--font-display); font-weight: 600; color: var(--text);
  white-space: nowrap; padding-left: 0;
}
.compare td { color: var(--text-muted); }
.compare-corner { border-bottom: 1px solid var(--border-strong); }
/* The final column is the argument, so it is the only one given weight. */
.compare .is-mine { background: var(--accent-soft); color: var(--text); }
.compare thead .is-mine { color: var(--accent-ink); border-bottom-color: var(--accent); }
.compare tbody tr:last-child .is-mine { font-weight: 600; }

/* ---------- 22. Pricing ---------- */

/* Headline and its supporting copy side by side, so the section opens across
   the full width instead of a 740px column with a void beside it. */
/* Top-aligned, not bottom. Bottom alignment balanced when the right column was
   a single paragraph; it now carries two plus a button, and pinning both to the
   baseline pushed the headline down and opened a gap above it. */
/* VAT treatment, under the headline price. Small and quiet on purpose: it is
   the line a finance team looks for before forwarding a price internally, and
   nobody else needs to notice it. */
.price-vat {
  margin: 10px 0 0;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--text-muted);
}

.price-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.price-h2 { max-width: 16ch; }
.price-head-side .lede { margin-top: 0; }
.price-head-side .btn-row { margin-top: 26px; }
.statement--sm { font-size: clamp(1.2rem, 1.9vw, 1.6rem); max-width: 24ch; }

/* The four shapes read across, not down. */
.shape-band-label { margin-bottom: 18px; }
.shape-list {
  /* Three shapes since Partnership left the price list; four columns left the
     last one empty and the row hanging a quarter short of the rail. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--border-strong); padding-top: 24px;
}
.shape { display: grid; align-content: start; gap: 7px; }
.shape-name {
  font-family: var(--font-display); font-weight: 600; margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing: -.014em;
}
.shape-len {
  margin: 0; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600;
}
.shape-body { margin: 0; color: var(--text-muted); font-size: .93rem; }
/* Footnote to the whole row, not to the column it happens to sit under. The
   four shapes are different heights, so with only a top margin this hugged the
   tallest one and floated under the other three. A rule closes the band. */
/* Full width so the rule mirrors the one above the shapes and closes the band.
   Constraining it cut the rule off mid-row, which read as an accident. */
.shape-band-note {
  margin-top: clamp(26px, 3vw, 36px);
  padding-top: 16px;
  border-top: 1px solid var(--border);
  max-width: none;
}

/* The four movements of the sprint. A numbered row rather than cards: they are
   a sequence through two weeks, and cards would read as four separate things
   you pick from. The counter is drawn from the list index so the markup stays
   an <ol> and a screen reader gets the ordering for free. */
/* Symmetric, because .shape-band below has no rule of its own and took its
   spacing from whatever preceded it. Dropping the movements in between left the
   bypass note sitting on the shapes label with only a paragraph margin between
   them. The note gives up its own bottom margin so the gap is one value and not
   two stacked. */
.movements { margin: clamp(40px, 5vw, 64px) 0; }
.movement-list {
  list-style: none; margin: 22px 0 0; padding: 0; counter-reset: movement;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.movement { counter-increment: movement; padding-top: 16px; border-top: 1px solid var(--border); }
.movement-name {
  display: flex; align-items: baseline; gap: 10px;
  font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; color: var(--text);
}
.movement-name::before {
  content: counter(movement, decimal-leading-zero);
  font-size: .72rem; letter-spacing: .12em; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.movement-body { margin: 0; font-size: .94rem; color: var(--text-muted); max-width: none; }
.movement-note { margin: clamp(22px, 2.6vw, 32px) 0 0; }
@media (max-width: 900px) {
  .movement-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .movement-list { grid-template-columns: 1fr; gap: 16px; }
}

/* The two proof tracks. Side by side because the buyer picks one, and a
   vertical list would read as a sequence like the movements above it. */
.proof-band-2 { margin-bottom: clamp(40px, 5vw, 64px); }
/* A split like the bypass row below it: the promise used to sit alone in a
   62ch measure with the right half of the rail empty. */
.proof-tracks-head { margin-bottom: clamp(26px, 3vw, 36px); }
.proof-tracks-head .measure { margin-top: 0; }
.proof-tracks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.proof-track {
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
}
.proof-track-name { font-weight: 600; font-size: 1.05rem; margin: 0 0 14px; }
.proof-track-when, .proof-track-get {
  margin: 0 0 10px; font-size: .92rem; color: var(--text-muted); max-width: none;
}
.proof-track-get { margin-bottom: 0; }
.proof-track-label {
  display: inline-block; min-width: 62px;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
}

/* The route past the diagnostic. Set apart with a rule rather than a card: it
   is an aside to the offer, not a fifth thing to buy. */
.bypass {
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--border);
}
/* No measure of its own: the grid column is the measure. Capping this at 60ch
   inside a half-width column wrapped it early and left the argument looking
   narrower than the list beside it. */
.bypass-lede { font-size: 1.05rem; margin: 0 0 10px; max-width: none; }
.bypass .form-note { margin-top: 0; max-width: none; }
.bypass-label {
  margin: 0 0 16px; font-size: .82rem; color: var(--text-muted);
  max-width: none;
}
/* One column. Two produced rows of unequal height, because the four conditions
   are unequal lengths and a two-up grid stretches every row to its tallest
   cell. */
.bypass-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.bypass-list li {
  position: relative; padding-left: 20px;
  font-size: .9rem; color: var(--text-muted);
}
.bypass-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--accent);
}
@media (max-width: 760px) {
  .proof-tracks, .bypass-list { grid-template-columns: 1fr; }
}

.price-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 5vw, 64px);
}
.price-card {
  padding: clamp(24px, 3vw, 36px); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface);
}
/* The heading owns the gap under itself. It used to have none, and the space
   was supposed to come from a `> p:last-child` rule below it, which matched
   nothing: one card ends on a link and the other on a list, so neither has a
   trailing paragraph. The heading sat flat on its body copy on all three
   pricing pages. */
.price-card .statement { margin: 10px 0 14px; }

.wrong-card { border-left: 3px solid var(--accent); }
.wrong-list {
  list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px;
}
.wrong-list li { position: relative; padding-left: 24px; color: var(--text-muted); }
.wrong-list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 2px;
  background: var(--accent);
}

/* Outcome points are full sentences, so they need more room than the terse
   "wrong for you" list they share a treatment with. */
.outcome-list { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px 32px; }
.outcome-list li { max-width: 52ch; }

/* Two arms of the same argument — cost/fit and privacy — kept visually
   separate so neither reads as a footnote to the other. */
.ai-facets { display: grid; gap: clamp(20px, 2.4vw, 28px); margin-top: 26px; }
.ai-facet { padding-left: 20px; border-left: 2px solid var(--accent-soft); }
.ai-facet-label {
  font-family: var(--font-display); font-weight: 600; margin: 0 0 8px;
  font-size: 1rem; letter-spacing: -.012em; color: var(--text);
}
.ai-facet .measure { margin: 0; }

/* ---------- 23. Booking ---------- */

.calendly-shell {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(10px, 1.4vw, 16px);
  box-shadow: var(--shadow-md);
}
.calendly-inline-widget { min-width: 100%; height: 680px; }
.calendly-shell .form-note { padding: 0 10px 6px; margin-top: 10px; }
.or-rule {
  display: flex; align-items: center; gap: 18px;
  max-width: 880px; margin: clamp(38px, 5vw, 60px) auto 0;
  padding-inline: var(--gutter);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.or-rule::before, .or-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
@media (max-width: 640px) { .calendly-inline-widget { height: 760px; } }

/* ---------- 23b. MCP connect page ---------- */

/* Sits in the full wrap so its left edge lines up with the headline above it.
   In a narrow wrap it read as indented by accident. */
.endpoint-card {
  max-width: 780px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); background: var(--surface);
  box-shadow: var(--shadow-md);
}
.endpoint-row {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin: 14px 0 16px;
}
.endpoint {
  flex: 1 1 320px; min-width: 0; overflow-x: auto; white-space: nowrap;
  padding: 13px 16px; border-radius: var(--radius-sm);
  background: var(--bg-inset); border: 1px solid var(--border);
  font-size: clamp(.92rem, 1.2vw, 1.05rem); color: var(--text);
}
.endpoint-row .btn { flex: 0 0 auto; }
[data-copy-label]:not(:empty)::before { content: "\00a0"; }

.connect-grid {
  display: grid; gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.connect-card {
  padding: clamp(24px, 3vw, 34px); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface);
}
.connect-app {
  font-family: var(--font-display); font-weight: 600; margin: 0 0 18px;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -.016em;
}
.connect-steps {
  margin: 0 0 18px; padding-left: 22px; display: grid; gap: 12px;
  color: var(--text-muted);
}
.connect-steps li::marker { color: var(--accent-ink); font-weight: 600; }
.connect-steps strong { color: var(--text); font-weight: 600; }

.ask-list {
  list-style: none; margin: 22px 0 22px; padding: 0; display: grid; gap: 12px;
}
.ask-list li {
  position: relative; padding: 12px 16px 12px 40px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-subtle); color: var(--text);
}
.ask-list li::before {
  content: "\201C"; position: absolute; left: 15px; top: 10px;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--accent-ink);
}

/* ---------- 24. Insights ---------- */

.wrap--prose { max-width: 720px; }
.section-head--left { max-width: 720px; }

.crumbs { padding-top: clamp(20px, 2.6vw, 30px); }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
  font-size: .82rem; color: var(--text-faint);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { color: var(--text-faint); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs [aria-current] {
  color: var(--text-muted); max-width: 40ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.page-hero--article { padding-top: clamp(24px, 3vw, 38px); }
.page-hero--article h1 { max-width: 24ch; }
.topic-link { color: inherit; text-decoration: none; }
.topic-link:hover { color: var(--accent-ink); }

/* Topic on its own row, date and length on the next. Long topic names would
   otherwise wrap mid-line and push card titles out of alignment. */
.article-meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  font-size: .82rem; color: var(--text-faint); margin-bottom: 14px;
}
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.article-meta--byline {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 9px; margin: 26px 0 0;
}
.article-dot { opacity: .5; }
.topic-tag {
  font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink);
}

.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4vw, 48px); }
.chip {
  font: inherit; font-size: .84rem; font-weight: 500; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; background: transparent;
  border: 1px solid var(--border-strong); color: var(--text-muted);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.chip:hover { color: var(--text); border-color: var(--text-muted); }
.chip.is-active {
  background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-text);
}
.empty-note { color: var(--text-faint); }

.feature-slot { margin-bottom: clamp(12px, 2vw, 24px); }
/* Row gap stays tight because each card carries its own top rule; the column
   gap has to be generous or adjacent meta lines read as one string. */
.article-grid {
  display: grid; row-gap: 0; column-gap: clamp(28px, 3.4vw, 52px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.article-card {
  position: relative; padding: clamp(24px, 2.8vw, 34px) 0;
  border-top: 1px solid var(--border);
  transition: border-color var(--t);
}
.article-card:hover { border-top-color: var(--border-strong); }
.article-card--feature {
  padding: clamp(30px, 3.4vw, 44px); border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
}
.article-card--feature:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.article-title { margin: 0 0 12px; }
.article-link { color: inherit; text-decoration: none; }
/* The whole card is the hit area; the anchor keeps the accessible name. */
.article-link::after { content: ""; position: absolute; inset: 0; }
.article-card:hover .article-link { color: var(--accent-ink); }
.article-excerpt { color: var(--text-muted); max-width: 60ch; margin: 0; }
.article-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: .84rem;
  letter-spacing: .02em; color: var(--accent-ink);
}
.article-card:hover .article-more .arrow { transform: translateX(3px); }
.article-more .arrow { transition: transform var(--t); }

/* Article shell: a contents rail beside the prose rather than a 720px column
   alone in the middle of a wide screen. Both cells share one grid so the
   breadcrumb, headline and body all hang off the same left edge. */
.article-layout {
  display: grid; justify-content: center; align-items: start;
  grid-template-columns: minmax(0, 210px) minmax(0, 720px);
  column-gap: clamp(32px, 4.5vw, 76px);
}
.article-body { min-width: 0; }
/* Stretched deliberately: a sticky child can only travel the height of its
   containing block, so a content-height rail would scroll away immediately. */
.article-rail { min-width: 0; align-self: stretch; }

/* The rail carries the byline from the top of the article, so the contents
   list below it reads as part of a deliberate column rather than a block of
   text floating in an otherwise empty margin. */
.byline { padding-top: 6px; }
.byline-name {
  font-family: var(--font-display); font-weight: 600; margin: 0 0 6px;
  font-size: .95rem; letter-spacing: -.01em; color: var(--text);
}
.byline-meta { margin: 0; font-size: .82rem; line-height: 1.7; color: var(--text-faint); }

.toc { position: sticky; top: 104px; }
.toc .eyebrow { margin-bottom: 4px; }
.toc-list {
  margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px;
  border-left: 1px solid var(--border); font-size: .88rem; line-height: 1.35;
}
.toc-list li { padding-left: 16px; margin-left: -1px; border-left: 2px solid transparent; }
.toc-list a { color: var(--text-faint); text-decoration: none; display: block; }
.toc-list a:hover { color: var(--accent-ink); }
.toc-list li:hover { border-left-color: var(--accent); }

/* Below the rail's breakpoint the contents becomes an ordinary block above the
   article, and the prose column recentres. */
@media (max-width: 1180px) {
  .article-layout { grid-template-columns: minmax(0, 720px); }
  .article-rail:empty { display: none; }
  /* Byline returns to a single line under the headline. */
  .byline { display: flex; gap: 10px; align-items: baseline; padding: 0; margin-top: 22px; }
  .byline-name { margin: 0; }
  .byline-meta br { display: none; }
  .byline-meta { display: flex; gap: 10px; }
  .toc {
    position: static; padding: clamp(20px, 2.4vw, 28px);
    margin-bottom: clamp(28px, 3.5vw, 40px);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-subtle);
  }
  .toc-list { border-left: 0; }
  .toc-list li { padding-left: 0; margin-left: 0; border-left: 0; }
}

/* ---------- 25. Prose ---------- */

.prose { font-size: clamp(1.03rem, 1.25vw, 1.12rem); line-height: 1.72; }
.prose > * + * { margin-top: 1.15em; }
.prose p { color: var(--text-muted); max-width: none; }
.prose strong { color: var(--text); font-weight: 600; }
.prose-h2 { margin-top: 1.9em !important; margin-bottom: .1em; color: var(--text); }
.prose h3 { margin-top: 1.7em !important; margin-bottom: .1em; color: var(--text); }
.prose .divider { margin-block: 2.4em !important; }
.prose-list { padding-left: 22px; display: grid; gap: 10px; color: var(--text-muted); }
.prose-list li::marker { color: var(--accent-ink); }
.prose-quote {
  margin-inline: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent);
}
.prose-quote p { color: var(--text); font-size: 1.06em; }
.prose code {
  font-size: .88em; padding: .15em .4em; border-radius: 5px;
  background: var(--bg-inset); border: 1px solid var(--border);
}
.prose-pre {
  overflow-x: auto; padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--band-bg); color: var(--band-text); font-size: .88rem; line-height: 1.6;
}
.prose-pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose-table {
  width: 100%; min-width: 520px; border-collapse: collapse; font-size: .94rem;
}
.prose-table th, .prose-table td {
  padding: 12px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.prose-table th {
  font-family: var(--font-display); font-weight: 600; color: var(--text);
  border-bottom-color: var(--border-strong);
}
.prose-table td { color: var(--text-muted); }
.prose-table tbody td:first-child { color: var(--text); font-weight: 500; }

.cluster-card {
  margin-top: clamp(44px, 5vw, 68px); padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.cluster-body { color: var(--text-muted); margin: 10px 0 0; }
.cluster-card .btn-row { margin-top: 20px; }

@media (max-width: 900px) {
  .price-head { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .price-h2, .faq-intro .h2 { max-width: none; }
  .shape-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .price-cards { grid-template-columns: 1fr; }
  .faq-intro-inner { position: static; }
}
@media (max-width: 520px) {
  .shape-list { grid-template-columns: 1fr; }
}

/* ---------- 19. Motion ---------- */

.js .reveal { opacity: 0; transform: translateY(16px); }
/* Set by ap.js when the page loads at a fragment. Text must never be part-way
   through an opacity transition on a route someone deep-linked into. */
.reveals-off .reveal,
.reveals-off .process-step { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveals-off .process-step::before { transition: none !important; }
.reveal { transition: opacity 620ms cubic-bezier(.2,.8,.2,1), transform 620ms cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .process-step::before { transform: scaleX(1); }
  .flow-pulse { display: none; }
}

@media print {
  .site-header, .mobile-menu, .btn, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 26. Policy + consent ---------- */

.policy .policy-block + .policy-block { margin-top: clamp(30px, 3.6vw, 46px); }
.policy h2 { margin-bottom: 12px; }
.policy p { color: var(--text-muted); max-width: 66ch; }
.policy p + p { margin-top: 12px; }
.policy code {
  font-size: .88em; padding: .12em .38em; border-radius: 5px;
  background: var(--bg-inset); border: 1px solid var(--border);
}

/* Consent at the point of use, in place of the widget it gates. */
.consent-gate {
  padding: clamp(26px, 3.4vw, 44px);
  display: grid; place-items: start; gap: 4px;
}
/* `display: grid` above outranks the browser's own [hidden] rule, so the gate
   stayed on screen above the calendar it had just been replaced by. */
.consent-gate[hidden] { display: none; }
.consent-title {
  font-family: var(--font-display); font-weight: 600; margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing: -.014em;
}
.consent-body { color: var(--text-muted); margin: 8px 0 0; max-width: 56ch; }
.consent-gate .btn-row { margin: 20px 0 14px; }

/* ---------- 27. AI connector strip ---------- */
/* High on the homepage, one line tall. It offers a different way to read the
   site, so it is not a seventh nav item. */

.ai-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.ai-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 28px;
  padding-block: clamp(16px, 2vw, 22px);
}
.ai-strip-text {
  /* A flex row so the badge sits beside the sentence instead of inside it.
     Inline-block put the badge in the text flow, so a wrapped second line
     started under the badge rather than under the first word. */
  display: flex; align-items: baseline; gap: 10px;
  margin: 0; max-width: 78ch; color: var(--text-muted);
  font-size: clamp(.9rem, 1.1vw, .97rem);
}
.ai-strip-tag {
  display: inline-block; flex: 0 0 auto; padding: 3px 9px;
  border-radius: 999px; background: var(--accent-soft);
  /* Not --accent-ink: over the gold tint that composites to 4.42:1, which
     fails AA for text this size. This darker gold reaches 6.25:1. Dark theme
     keeps --accent-ink, which already clears it at 7.85:1. */
  color: #6F4F17; border: 1px solid var(--accent);
  font-family: var(--font-display); font-weight: 600;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  vertical-align: 1px;
}
.ai-strip .textlink { flex: 0 0 auto; }
[data-theme="dark"] .ai-strip-tag { color: var(--accent-ink); }

/* ---------- 28. Analytics consent bar ---------- */
/* Reject carries the same weight as accept. A bar that makes "no" harder than
   "yes" is not consent, and the ICO says so. */

.consent-bar {
  position: fixed; inset: auto 0 0; z-index: 120;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -14px 40px -24px rgba(13, 27, 42, .45);
}
.consent-bar-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px; padding-block: clamp(14px, 1.8vw, 20px);
}
.consent-bar-text {
  margin: 0; max-width: 74ch; color: var(--text-muted);
  font-size: clamp(.88rem, 1.05vw, .95rem);
}
.consent-bar-text .textlink { margin-left: 6px; }
.consent-bar-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-bar-actions .btn { font-size: .8rem; }
@media (max-width: 620px) {
  .consent-bar-actions { width: 100%; }
  .consent-bar-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- 29. Hero measure ---------- */
/* The headline sets at 74% of the wrap and the lede was running to 68ch, so the
   two never lined up as a single column and the asymmetry read as accidental
   rather than chosen. */
/* Deliberately not `ch`. That unit resolves against the font's zero width, so a
   measure set in it moves when the webfont swaps in, rewrapping the paragraph
   and shifting everything below it. Everywhere else the metric-matched fallback
   absorbs this; here the text sits on a wrap boundary, so the measure is
   font-independent instead. */
.hero .lede { max-width: 43rem; }

/* ---------- 30. FAQ selection ---------- */
/* A few questions surfaced where they are asked. The schema stays on the page
   that owns each question, so these never compete with the canonical set. */
.faq-more { margin-top: 22px; }

/* ---------- 31. Recognition on a work entry ---------- */
/* External validation sits on the venture that earned it. One line, quieter
   than the card's own copy, so it reads as evidence rather than a second
   headline. An earlier version had its own section with headings and columns,
   which made a footnote compete with the production figures above it. */

.work-recognition {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .8rem; line-height: 1.6; color: var(--text-faint);
}
.work-recognition-label {
  display: inline-block; margin-right: 12px;
  font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-ink);
}
.work-recognition a {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--t), border-color var(--t);
}
.work-recognition a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.work-recognition .ext { font-size: .8em; opacity: .6; margin-left: 3px; }