/* Seismic Noir design tokens (plan §4.4). Contrast ratios measured on Void / Abyss.
   Merged into site.css on 29 Oct (was tokens.css): one render-blocking request instead of two keeps LCP inside
   Lighthouse's 100 band. These rules sit outside the layers below, exactly as they did in their own file. */

@font-face {
  font-family: "Geologica";
  src: url("/assets/fonts/geologica-var-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback so the swap to Geologica doesn't shift layout (tuned in Task 7). */
@font-face {
  font-family: "Geologica Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* color */
  --c-void: #000000;
  --c-abyss: #07101B;
  --c-grid: #1A2533;            /* decorative only, 1.36:1, never the sole indicator */
  --c-line: #5A6B80;            /* input borders, UI outlines 3.85:1 / 3.5:1 */
  --c-ink: #F3F5F8;             /* 19.2:1 */
  --c-ink-2: #A9B4C2;           /* 10.0:1 */
  --c-ink-3: #7D8A9B;           /* 6.0:1 / 5.4:1 */
  --c-peak: #FF5A3C;            /* Geology 6.8:1 */
  --c-trough: #4D8DFF;          /* AI 6.6:1 */
  --c-pending: #FFC53D;         /* build-time placeholders, 13.3:1 */
  --c-error: #FF8A7A;           /* 9.2:1, always paired with text */
  --ramp-1: #0B2E8A; --ramp-2: #2F6BFF; --ramp-3: #9DB9FF; --ramp-4: #F3F5F8;
  --ramp-5: #FFB199; --ramp-6: #FF5A3C; --ramp-7: #A3180A;

  /* type: Bringhurst scale 14 / 17-18 / 21 / 24 / 28-36 / 36-60 / 44-88 */
  --font: "Geologica", "Geologica Fallback", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fs-sm: .875rem;
  --fs-base: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  --fs-h4: 1.3125rem;
  --fs-h3: 1.5rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem);
  --fs-h1: clamp(2.25rem, 1.2rem + 4.4vw, 3.75rem);
  --fs-hero: clamp(1.875rem, .6rem + 6.6vw, 5rem);   /* 30→80px: "Sedimentologist" never breaks at 320px */
  --lh-body: 1.6; --lh-head: 1.1; --lh-display: 1;
  --wght-body: 400; --wght-ui: 500; --wght-head: 680; --wght-display: 740;
  --shrp-body: 0; --shrp-head: 50; --shrp-display: 100;
  --track-display: -.03em; --track-head: -.02em;
  --measure: 62ch;

  /* space: 4px base */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-pad: clamp(4rem, 2.5rem + 6vw, 10rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --container: 77.5rem;

  /* shape */
  --r-1: 2px; --r-2: 4px; --hair: 1px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 120ms; --t-ui: 240ms; --t-reveal: 640ms; --reveal-shift: 12px;
  --glow-geology: 0 0 0 1px rgb(255 90 60 / .45), 0 12px 48px -16px rgb(255 90 60 / .5);
  --glow-ai: 0 0 0 1px rgb(77 141 255 / .45), 0 12px 48px -16px rgb(77 141 255 / .5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-micro: 0ms; --t-ui: 0ms; --t-reveal: 0ms; --reveal-shift: 0px; }
}

/* knexionenergy.com — Seismic Noir. Tokens live in tokens.css.
   Layer order keeps specificity flat: later layers win without selector games. */
@layer reset, base, layout, components, utilities;

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

/* ---------------------------------------------------------------- base */
@layer base {
  html { color-scheme: dark; background: var(--c-void); scroll-padding-top: 5rem; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  body {
    min-height: 100vh;
    background: var(--c-void);
    color: var(--c-ink-2);
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: var(--wght-body);
    font-variation-settings: "SHRP" var(--shrp-body);
    line-height: var(--lh-body);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    color: var(--c-ink);
    font-weight: var(--wght-head);
    font-variation-settings: "SHRP" var(--shrp-head);
    line-height: var(--lh-head);
    letter-spacing: var(--track-head);
    overflow-wrap: anywhere;
    hyphens: manual;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); font-weight: var(--wght-display); font-variation-settings: "SHRP" var(--shrp-display); letter-spacing: var(--track-display); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); }

  p, li { max-width: var(--measure); text-wrap: pretty; }
  strong, b { color: var(--c-ink); font-weight: 620; }
  small { font-size: var(--fs-sm); }

  a {
    color: var(--c-ink);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--t-ui) var(--ease-out), color var(--t-micro) linear;
  }
  a:hover { background-size: 100% 2px; }

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

  ::selection { background: var(--c-trough); color: var(--c-void); }

  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4); border-bottom: var(--hair) solid var(--c-grid); }
  th { color: var(--c-ink); font-weight: var(--wght-ui); font-size: var(--fs-sm); }

  code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; color: var(--c-ink); }

  .num { font-variant-numeric: tabular-nums lining-nums; }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .l-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .l-section { padding-block: var(--section-pad); }
  .l-section + .l-section { border-top: var(--hair) solid var(--c-grid); }
  .l-section--tight { padding-block: var(--s-8); }

  /* Flow spacing: children of a stack get space only between them. */
  /* Each stack sets its own children's gap directly (an inherited custom property let nested stacks pick up a
     parent's larger gap). */
  .l-stack > * + * { margin-block-start: var(--s-4); }
  .l-stack--lg > * + * { margin-block-start: var(--s-6); }
  .l-stack--xl > * + * { margin-block-start: var(--s-8); }

  .l-grid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .l-grid > * { grid-column: 1 / -1; }
  @media (min-width: 48rem) {
    .l-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .l-grid > .span-3 { grid-column: span 3; }
    .l-grid > .span-2 { grid-column: span 2; }
  }
  @media (min-width: 64rem) {
    .l-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
    .l-grid > .span-7 { grid-column: span 7; }
    .l-grid > .span-5 { grid-column: span 5; }
    .l-grid > .span-6 { grid-column: span 6; }
    .l-grid > .span-4 { grid-column: span 4; }
    .l-grid > .span-8 { grid-column: span 8; }
    .l-grid > .span-3 { grid-column: span 3; }
  }

  .l-split { display: grid; gap: var(--s-6); }
  @media (min-width: 64rem) { .l-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }

  /* ---- header */
  .c-header {
    position: sticky; top: 0; z-index: 50;
    background: rgb(0 0 0 / .82);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: var(--hair) solid var(--c-grid);
  }
  .c-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 4rem; }

  /* Logo: Ben's Horizontal-Reversed artwork (transparent web copy built by tools/make-icons.ps1). */
  .c-wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; background: none; flex: none; }
  .c-wordmark img { width: auto; height: 2rem; }
  @media (min-width: 64rem) { .c-wordmark img { height: 2.25rem; } }

  .c-nav { display: flex; align-items: center; }
  .c-nav__toggle {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--s-4);
    border: var(--hair) solid var(--c-line); border-radius: var(--r-1); background: none;
    color: var(--c-ink); font-weight: var(--wght-ui); font-size: var(--fs-sm);
  }
  .c-nav__list { display: none; }
  .c-nav.is-open .c-nav__list {
    display: flex; flex-direction: column; gap: var(--s-1);
    position: absolute; inset: 100% 0 auto 0; padding: var(--s-4) var(--gutter) var(--s-6);
    background: var(--c-void); border-bottom: var(--hair) solid var(--c-grid);
  }
  .c-nav__list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--c-ink-2); background-size: 0 1px; font-weight: var(--wght-ui); }
  .c-nav__list a:hover, .c-nav__list a[aria-current="page"], .c-nav__list a.is-section { color: var(--c-ink); background-size: 100% 1px; }
  .c-nav__list .c-nav__cta { margin-top: var(--s-3); }

  @media (min-width: 56.25rem) {
    .c-nav__toggle { display: none; }
    .c-nav__list, .c-nav.is-open .c-nav__list {
      display: flex; flex-direction: row; align-items: center; gap: var(--s-5);
      position: static; padding: 0; background: none; border: 0;
    }
    .c-nav__list .c-nav__cta { margin: 0 0 0 var(--s-2); }
  }

  /* ---- footer */
  .c-footer { border-top: var(--hair) solid var(--c-grid); background: var(--c-abyss); padding-block: var(--s-9) var(--s-7); font-size: var(--fs-sm); }
  .c-footer__inner { display: grid; gap: var(--s-7); }
  .c-footer__brand { align-content: start; }
  .c-footer__logo { width: auto; height: 2.25rem; }
  .c-footer__nav { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .c-footer__h { font-size: var(--fs-sm); color: var(--c-ink); font-weight: var(--wght-ui); letter-spacing: 0; margin-bottom: var(--s-3); }
  .c-footer__nav ul { display: grid; list-style: none; padding: 0; gap: var(--s-1); }
  .c-footer__nav a { display: inline-flex; min-height: 2rem; align-items: center; color: var(--c-ink-2); background-size: 0 1px; }
  .c-footer__nav a:hover { color: var(--c-ink); background-size: 100% 1px; }
  .c-footer__disclaimer { color: var(--c-ink-3); max-width: 72ch; }
  .c-footer__legal { color: var(--c-ink-3); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); max-width: none; }
  .c-footer__legal a { color: var(--c-ink-2); }
  @media (min-width: 64rem) { .c-footer__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .c-footer__disclaimer, .c-footer__legal { grid-column: 1 / -1; } }
}

/* ---------------------------------------------------------------- components */
@layer components {
  /* Practice color: peak = Geology (default), trough = AI. */
  :root, [data-practice="geology"] { --practice: var(--c-peak); --glow: var(--glow-geology); }
  [data-practice="ai"] { --practice: var(--c-trough); --glow: var(--glow-ai); }

  /* ---- buttons */
  .c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 2.75rem; padding: 0 var(--s-5); border-radius: var(--r-1);
    font-weight: 620; font-size: 1rem; line-height: 1.2; text-align: center;
    background-image: none; border: var(--hair) solid transparent;
    transition: box-shadow var(--t-ui) var(--ease-out), background-color var(--t-micro) linear, border-color var(--t-micro) linear, color var(--t-micro) linear;
  }
  .c-btn--primary { background-color: var(--c-ink); color: var(--c-void); }
  .c-btn--primary:hover { box-shadow: var(--glow); background-color: #fff; }
  .c-btn--secondary { border-color: var(--c-line); color: var(--c-ink); }
  .c-btn--secondary:hover { border-color: var(--c-ink); box-shadow: var(--glow); }
  .c-btn--ghost { padding-inline: 0; min-height: 2.75rem; color: var(--c-ink); background-image: linear-gradient(var(--practice), var(--practice)); background-size: 100% 1px; background-position: 0 85%; background-repeat: no-repeat; border-radius: 0; }
  .c-btn--ghost:hover { background-size: 100% 2px; }
  .c-btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

  /* ---- tag: practice label with a slanted fault tick */
  .c-tag { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--wght-ui); color: var(--c-ink); }
  .c-tag::before { content: ""; width: 2px; height: 1em; background: var(--practice); transform: skewX(-20deg); }
  .c-tag--muted { color: var(--c-ink-3); }

  /* ---- lead offer: the one raised panel */
  .c-offer-feature {
    position: relative; padding: var(--s-5); background: var(--c-abyss);
    border: var(--hair) solid var(--c-grid); border-top: 2px solid var(--practice); border-radius: var(--r-2);
  }
  @media (min-width: 48rem) { .c-offer-feature { padding: var(--s-7); } }
  @media (min-width: 48rem) { .c-entry-card { padding: var(--s-6); } }
  .c-offer-feature h3 { font-size: clamp(1.375rem, .9rem + 1.9vw, 2.25rem); }
  .c-offer-feature__hook { font-size: 1.1875rem; color: var(--c-ink); max-width: 46ch; }

  /* ---- fault-tick bullet list */
  .c-ticks { display: grid; gap: var(--s-3); }
  .c-ticks li { position: relative; padding-left: var(--s-6); }
  .c-ticks li::before { content: ""; position: absolute; left: .35em; top: .35em; width: 2px; height: .95em; background: var(--practice); transform: skewX(-20deg); }

  /* ---- entry audit: outlined, quieter than the lead */
  .c-entry-card { padding: var(--s-5); align-self: start; border: var(--hair) solid var(--c-line); border-radius: var(--r-2); }
  .c-entry-card h3 { font-size: var(--fs-h3); }

  /* ---- ruled cards (offers 2, 3, 4): a hairline that lights up, not a shadow box */
  .c-offer-card { position: relative; padding-top: var(--s-5); border-top: var(--hair) solid var(--c-grid); }
  .c-offer-card::before { content: ""; position: absolute; left: 0; top: -1px; width: 3rem; height: 2px; background: var(--practice); transition: width var(--t-ui) var(--ease-out); }
  .c-offer-card:hover::before, .c-offer-card:focus-within::before { width: 100%; }
  .c-offer-card h3 { font-size: var(--fs-h4); }
  :is(.c-offer-card, .c-offer-feature, .c-entry-card, .c-bundle) :is(h2, h3, h4) a { background-size: 0 1px; }
  :is(.c-offer-card, .c-offer-feature, .c-entry-card, .c-bundle) :is(h2, h3, h4) a:hover { background-size: 100% 1px; }

  /* ---- bundle (Mature Field Evaluation) */
  .c-bundle { padding: var(--s-6); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: url("/assets/img/grid-cells.svg") var(--c-void); }
  .c-bundle__list { display: grid; gap: var(--s-5); }
  @media (min-width: 64rem) { .c-bundle__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---- price chip */
  .c-price {
    display: inline-flex; align-items: baseline; gap: var(--s-2); padding: var(--s-1) var(--s-3);
    border: var(--hair) solid var(--c-line); border-radius: var(--r-1);
    color: var(--c-ink); font-weight: var(--wght-ui); font-size: var(--fs-sm); font-variant-numeric: tabular-nums lining-nums;
  }

  /* ---- ordered steps (MATCH, podcast): a well path down the left */
  .c-steps { display: grid; gap: var(--s-5); counter-reset: step; }
  .c-steps > li { position: relative; padding-left: var(--s-8); max-width: none; }
  .c-steps > li::after { content: ""; position: absolute; left: 1.2rem; top: 2.75rem; bottom: calc(-1 * var(--s-5)); width: 1px; background: var(--c-grid); }
  .c-steps > li:last-child::after { display: none; }
  .c-steps__key {
    position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
    border: var(--hair) solid var(--practice); border-radius: var(--r-1); color: var(--c-ink);
    font-weight: 760; font-variation-settings: "SHRP" 100; font-variant-numeric: tabular-nums;
  }
  .c-steps__title { display: block; color: var(--c-ink); font-weight: 620; }
  .c-steps__text { display: block; color: var(--c-ink-2); }
  /* Vendor profiles: a text wordmark until logo permission arrives. */
  .c-vendor-mark { color: var(--c-ink); font-size: var(--fs-h3); font-weight: 760; letter-spacing: -.01em; }

  /* ---- fields strip: names on a seismic line, separated by fault ticks */
  .c-fields { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding-block: var(--s-4); border-block: var(--hair) solid var(--c-grid); }
  .c-fields li { display: inline-flex; align-items: center; color: var(--c-ink); font-weight: 620; font-size: clamp(1.0625rem, .9rem + .7vw, 1.375rem); max-width: none; }
  .c-fields li + li::before { content: ""; width: 2px; height: 1.1em; margin-right: var(--s-4); background: var(--c-peak); transform: skewX(-20deg); }

  /* ---- identity block */
  .c-identity { display: grid; align-content: start; gap: .125rem; font-size: var(--fs-sm); line-height: 1.45; }
  .c-identity p { max-width: none; }
  .c-identity__name { color: var(--c-ink); font-weight: 680; font-size: 1rem; }
  .c-identity__title { color: var(--c-ink-2); }
  .c-identity__place { color: var(--c-ink-3); }

  /* ---- quote */
  .c-quote { display: grid; gap: var(--s-4); }
  .c-quote blockquote p { color: var(--c-ink); font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; font-variation-settings: "SHRP" 40; letter-spacing: -.01em; max-width: 28ch; }
  .c-quote figcaption { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink-3); font-size: var(--fs-sm); }
  .c-quote figcaption::before { content: ""; width: 2px; height: 1em; background: var(--practice); transform: skewX(-20deg); }

  /* ---- credentials */
  .c-credentials { display: grid; gap: var(--s-2); }
  .c-credentials li { color: var(--c-ink); }
  .c-credentials__label { color: var(--c-ink-3); font-size: var(--fs-sm); }

  /* ---- facts (About) */
  .c-facts { display: grid; }
  .c-facts li { padding-block: var(--s-3); border-top: var(--hair) solid var(--c-grid); color: var(--c-ink); max-width: none; }

  /* ---- figures */
  .c-figure { display: grid; gap: var(--s-3); }
  .c-figure__frame { aspect-ratio: 16 / 10; width: 100%; border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: url("/assets/img/grid-cells.svg") var(--c-abyss); }
  .c-figure--soon { position: relative; }
  .c-figure--soon figcaption {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--c-ink-3); font-size: var(--fs-sm); font-weight: var(--wght-ui); letter-spacing: .01em;
  }
  .c-portrait { aspect-ratio: 4 / 5; width: 100%; max-width: 22rem; overflow: hidden; border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-abyss); }
  .c-portrait--wide { aspect-ratio: 16 / 10; max-width: none; }   /* 404: the strata panel as a landscape */
  .c-portrait svg { width: 100%; height: 100%; object-fit: cover; }

  /* ---- build-time placeholders (never on an in-scope page at launch: G22) */
  .placeholder, .pending {
    color: var(--c-pending); background: rgb(255 197 61 / .08); outline: 1px dashed rgb(255 197 61 / .6);
    outline-offset: 1px; border-radius: var(--r-1); padding-inline: .2em; font-weight: var(--wght-ui);
  }

  /* ---- breadcrumb */
  .c-breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-breadcrumb li { display: inline-flex; gap: var(--s-2); align-items: center; }
  .c-breadcrumb li + li::before { content: "/"; color: var(--c-line); }
  .c-breadcrumb a { color: var(--c-ink-2); background-size: 0 1px; }
  .c-breadcrumb a:hover { background-size: 100% 1px; color: var(--c-ink); }

  /* ---- roster table */
  .c-roster { min-width: 40rem; font-size: var(--fs-sm); }
  .c-roster td:first-child, .c-roster th:first-child { width: 3rem; font-variant-numeric: tabular-nums; color: var(--c-ink-3); }
  .c-roster tbody tr:hover { background: var(--c-abyss); }

  /* ---- callout (Offer 3 assurance note) */
  .c-callout { padding: var(--s-4) var(--s-5); border-left: 2px solid var(--practice); background: var(--c-abyss); color: var(--c-ink); font-weight: var(--wght-ui); border-radius: 0 var(--r-2) var(--r-2) 0; max-width: var(--measure); }

  /* ---- result panels (forms) */
  .c-panel { padding: var(--s-6); background: var(--c-abyss); border: var(--hair) solid var(--c-grid); border-top: 2px solid var(--practice); border-radius: var(--r-2); }
  .c-panel:focus { outline: none; }
  .c-panel:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

  /* ---- CTA band */
  .c-cta-band { position: relative; overflow: hidden; background: url("/assets/img/contours.svg") center / cover no-repeat, var(--c-abyss); border-top: var(--hair) solid var(--c-grid); }
  .c-cta-band__inner { display: grid; gap: var(--s-5); padding-block: var(--s-9); }
  .c-cta-band h2 { max-width: 18ch; }

  /* ---- fine print and external links */
  .c-fineprint { font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-fineprint a { color: var(--c-ink-2); }
  .c-ext::after { content: "\2197"; display: inline-block; margin-left: .2em; font-size: .85em; color: var(--c-ink-3); }

  /* ---- offer page body: content left, figure right */
  .l-offer { display: grid; gap: var(--s-8); }
  @media (min-width: 64rem) { .l-offer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-9); align-items: start; } }

  /* ---- VideoFeature: contour poster until a video exists, click-to-play facade after */
  .c-video { display: grid; gap: var(--s-4); }
  .c-video__frame {
    position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
    border: var(--hair) solid var(--c-grid); border-radius: var(--r-2);
    background: radial-gradient(60% 70% at 68% 45%, rgb(77 141 255 / .07), transparent 70%), url("/assets/img/placeholder-v2.svg") center / cover no-repeat, var(--c-abyss);   /* v2: faulted anticline map (tools/gen-anticline.js); v1 rings kept as placeholder-v1.svg */
  }
  .c-video__soon, .c-video__state {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3);
    padding: var(--s-5); text-align: center; color: var(--c-ink-2); font-weight: var(--wght-ui); max-width: none;
  }
  .c-video__soon { color: var(--c-ink); font-size: var(--fs-h4); font-variation-settings: "SHRP" 60; letter-spacing: -.01em; }
  .c-video__soon::before { content: ""; width: 3.5rem; height: 3.5rem; border: 2px solid var(--c-line); border-radius: 50%; }
  .c-video__state { font-size: var(--fs-sm); }
  .c-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
  .c-video__play {
    position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s-5);
    border: 0; border-radius: 0; background: linear-gradient(transparent 45%, rgb(0 0 0 / .78)); color: var(--c-ink);
    font-weight: 620; text-align: left;
  }
  .c-video__play::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem;
    border: 2px solid var(--c-ink); border-radius: 50%; background: rgb(0 0 0 / .45);
    transition: box-shadow var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
  }
  .c-video__play::after { content: ""; position: absolute; left: calc(50% - .45rem); top: calc(50% - .75rem); border-style: solid; border-width: .75rem 0 .75rem 1.25rem; border-color: transparent transparent transparent var(--c-ink); }
  .c-video__play:hover::before, .c-video__play:focus-visible::before { box-shadow: var(--glow); transform: scale(1.05); }
  .c-video__play:focus-visible { outline-offset: -4px; }
  .c-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .c-video__takeaway { color: var(--c-ink); font-size: 1.125rem; }
  .c-video__transcript summary { cursor: pointer; color: var(--c-ink); font-weight: var(--wght-ui); min-height: 2.75rem; display: inline-flex; align-items: center; }
  .c-video__transcript summary::-webkit-details-marker { display: none; }
  .c-video__transcript summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-right: var(--s-2); border: var(--hair) solid var(--c-line); border-radius: var(--r-1); font-size: .875rem; line-height: 1; }
  .c-video__transcript[open] summary::before { content: "\2212"; }
  .c-video__transcript > div { padding-top: var(--s-3); color: var(--c-ink-2); }

  /* ---- forms */
  .c-form { display: grid; gap: var(--s-5); max-width: 40rem; }
  .c-field { display: grid; gap: var(--s-2); }
  .c-field > label { color: var(--c-ink); font-weight: var(--wght-ui); font-size: var(--fs-sm); }
  .c-field input:not([type="checkbox"]):not([type="radio"]), .c-field select, .c-field textarea {
    width: 100%; min-height: 2.75rem; padding: .625rem .875rem;
    background: var(--c-void); color: var(--c-ink); border: var(--hair) solid var(--c-line); border-radius: var(--r-1);
    transition: border-color var(--t-micro) linear, box-shadow var(--t-ui) var(--ease-out);
  }
  .c-field textarea { min-height: 8rem; resize: vertical; }
  /* Radio group (VNA format): a bare fieldset whose legend reads like the other field labels. */
  .c-field--group { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  .c-field--group > legend { padding: 0; margin-bottom: var(--s-2); color: var(--c-ink); font-weight: var(--wght-ui); font-size: var(--fs-sm); }
  .c-field--group > .c-field + .c-field { margin-top: var(--s-2); }
  .c-field input:hover, .c-field select:hover, .c-field textarea:hover { border-color: var(--c-ink-3); }
  .c-field input:focus-visible, .c-field select:focus-visible, .c-field textarea:focus-visible { border-color: var(--c-ink); outline-offset: 2px; }
  .c-field--check { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
  .c-field--check input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--c-ink); }
  .c-field--check > label { font-weight: var(--wght-body); color: var(--c-ink-2); font-size: 1rem; }
  .c-field--check .c-field__error { grid-column: 1 / -1; }
  .c-field [aria-invalid="true"] { border-color: var(--c-error) !important; }
  .c-field__error { color: var(--c-error); font-size: var(--fs-sm); font-weight: var(--wght-ui); }
  .c-field__hint { color: var(--c-ink-3); font-size: var(--fs-sm); }
  .c-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .c-form__status { min-height: 1.5em; color: var(--c-ink-2); font-size: var(--fs-sm); }
  .c-form [type="submit"]:disabled { opacity: .6; cursor: progress; }
  .c-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
  .c-fieldset legend { color: var(--c-ink); font-weight: var(--wght-ui); font-size: var(--fs-sm); margin-bottom: var(--s-2); }

  /* ---- reveal (site.js adds .is-pending only below the fold, never under reduced motion) */
  [data-reveal]:not([data-reveal="group"]), [data-reveal="group"] > * { transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
  [data-reveal]:not([data-reveal="group"]).is-pending, [data-reveal="group"].is-pending > * { opacity: 0; transform: translateY(var(--reveal-shift)); }
  [data-reveal="group"] > :nth-child(2) { transition-delay: 60ms; }
  [data-reveal="group"] > :nth-child(3) { transition-delay: 120ms; }
  [data-reveal="group"] > :nth-child(n+4) { transition-delay: 180ms; }

  /* ---- hero seismic section, v1.41: the one choreographed moment (docs/hero-versions.md). site/assets/js/hero.js
     draws the section on the canvas (in a worker where the browser allows) and plays the collapse once: fault-bounded blocks slide rigidly, one fault at a time;
     reduced motion shows the final frame at once; without JavaScript the pre-rendered final frame shows instead. */
  .hero-seismic { display: block; width: 100%; height: 100%; }
  .hero-seismic canvas, .hero-seismic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
  /* ---- strata-mini (the About portrait): the v1.3 section in miniature (tools/gen-hero.v1.3.ps1) */
  .strata-mini { display: block; width: 100%; height: 100%; }
  .strata-mini .hero-fault { fill: none; stroke: #F3F5F8; stroke-width: 1.5px; }
  .strata-mini mask path { shape-rendering: crispEdges; }
  .strata-mini .h0 { fill: #050F28; }
  .strata-mini .h1 { fill: #C48978; }
  .strata-mini .h2 { fill: #061538; }
  .strata-mini .h3 { fill: #523D39; }
  .strata-mini .h4 { fill: #09246B; }
  .strata-mini .h5 { fill: #682820; }
  .strata-mini .h6 { fill: #132C68; }
  .strata-mini .h7 { fill: #B57F70; }
  .strata-mini .h8 { fill: #183782; }
  .strata-mini .h9 { fill: #330C0C; }
  .strata-mini .h10 { fill: #0A2A7E; }
  .strata-mini .h11 { fill: #72524B; }
  .strata-mini .h12 { fill: #3F4C6B; }
  .strata-mini .h13 { fill: #8D160A; }
  .strata-mini .h14 { fill: #061437; }
  .strata-mini .h15 { fill: #5B241D; }
  .strata-mini .h16 { fill: #768CC2; }
  .strata-mini .h17 { fill: #352929; }
  .strata-mini .h18 { fill: #475678; }
  .strata-mini .h19 { fill: #87150B; }
  .strata-mini .w1 { fill: #C84832; }
  .strata-mini .w2 { fill: #6D4E48; }

  /* ---- Home hero: headline left, seismic section fading in from the right */
  .c-hero { position: relative; display: grid; overflow: hidden; border-bottom: var(--hair) solid var(--c-grid); }
  .c-hero__inner { position: relative; z-index: 1; padding-block: var(--s-8) var(--s-7); }
  .c-hero__visual { order: 2; aspect-ratio: 16 / 10; width: 100%; }
  .c-hero__title { font-size: var(--fs-hero); line-height: var(--lh-display); max-width: 11.5ch; overflow-wrap: normal; text-wrap: balance; }
  .c-hero__lead { font-size: clamp(1.0625rem, .95rem + .45vw, 1.25rem); color: var(--c-ink-2); max-width: 46ch; }
  .c-hero .c-identity { padding-top: var(--s-2); }
  @media (min-width: 64rem) {
    .c-hero { display: block; min-height: min(54rem, calc(100svh - 4rem)); }
    .c-hero__inner { padding-block: var(--s-10) var(--s-9); }
    .c-hero__copy { max-width: 44rem; }
    .c-hero__visual {
      position: absolute; inset: 0 0 0 50%; aspect-ratio: auto; width: auto; opacity: .9;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
    }
  }

  /* ---- Parallax background (Home and Geology pages; body.has-parallax): one fixed photo strip behind the page,
     panned up slower than the content so it travels once over the whole scroll and its faded bottom meets the
     footer. Home: the full strip (--travel 1, lighter scrim); inner pages: slower and subtler. CSS scroll-driven
     animation where supported, a requestAnimationFrame fallback in site.js elsewhere, static under reduced motion. */
  body.has-parallax { background: transparent; --travel: .45; --scrim: .52; }
  body.has-parallax.is-home { --travel: 1; --scrim: .34; }
  .c-parallax { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--c-void); }
  .c-parallax::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--scrim, .5)); }
  .c-parallax__img {
    position: absolute; top: 0; left: 50%; max-width: none; height: auto;
    width: 100%; width: max(100%, 82lvh);   /* tall enough to travel on phones, where the strip is narrow */
    transform: translate3d(-50%, 0, 0);
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .c-parallax__img { animation: parallax-pan linear both; animation-timeline: scroll(root block); will-change: transform; }
    }
  }
  @keyframes parallax-pan { to { transform: translate3d(-50%, calc((100lvh - 100%) * var(--travel, 1)), 0); } }

  /* Hero over the photo: a 35% black overlay under the seismic section, darkening toward the copy on the left. */
  body.has-parallax .c-hero { background: linear-gradient(180deg, rgb(0 0 0 / .8), rgb(0 0 0 / .72)); }
  @media (min-width: 64rem) {
    body.has-parallax .c-hero { background: linear-gradient(90deg, rgb(0 0 0 / .84) 0%, rgb(0 0 0 / .66) 36%, rgb(0 0 0 / .35) 62%); }
  }

  /* Panels and cards over the photo: translucent ground (dark enough for every text color at AA) plus line art traced
     from Ben's La Jolla fault photograph (tools/gen-lineart.js), loaded as each comes near the viewport (site.js adds
     .has-lineart). */
  body.has-parallax :is(.c-offer-feature, .c-entry-card, .c-bundle, .c-panel, .c-callout, .c-proof) { background: rgb(3 7 13 / .82); }
  body.has-parallax .c-offer-card { padding: var(--s-5); background: rgb(3 7 13 / .82); border-radius: 0 0 var(--r-2) var(--r-2); }
  body.has-parallax .c-cta-band { background: url("/assets/img/contours.svg") center / cover no-repeat, rgb(3 7 13 / .82); }
  .has-lineart { position: relative; isolation: isolate; }
  .has-lineart::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: url("/assets/img/lajolla-lines.svg") center / cover no-repeat;
  }
  /* Footer photo credits, each only where its photo shows: Neilson Wash behind photo pages except those with a La Jolla
     background; the La Jolla credit is stamped only on the pages that use those photos (data-pages in the footer). */
  .c-footer__credit { display: none; color: var(--c-ink-3); max-width: none; }
  body.has-parallax:not(.has-photo-bg) .c-footer__credit:not(.c-footer__credit--lajolla) { display: block; }
  .c-footer__credit--lajolla { display: block; }
  /* La Jolla backgrounds (Geology overview, offer pages): a still photo covering the viewport, already toned to about
     20% brightness, so the scrim is light; text sits on the sections' own dark panels. */
  body.has-photo-bg { --scrim: .18; }
  .c-parallax--still .c-parallax__img { left: 0; width: 100%; height: 100%; object-fit: cover; transform: none; animation: none; }
  /* Meet Ben (Home, under the hero) and the About photo band: the roadcut photo, Ben kept in view at every width,
     under a dark overlay so the line of copy keeps AA contrast. */
  .c-meet { position: relative; isolation: isolate; display: grid; align-items: start; min-height: 27rem; overflow: hidden; background: var(--c-void); }
  .c-meet .c-photo, .c-meet .c-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; }   /* the <noscript> copy is a bare img */
  .c-meet .c-photo__img { object-fit: cover; object-position: 52% 80%; }
  .c-photo__img:not([src]) { visibility: hidden; }   /* until site.js gives a deferred photo its source */
  /* Phones: the copy sits at the top, Ben below it; wider screens: the copy at the bottom left, Ben right of centre. */
  .c-meet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .8), rgb(0 0 0 / .25) 55%, transparent); }
  @media (min-width: 48rem) { .c-meet { align-items: end; min-height: clamp(22rem, 42vw, 35rem); } .c-meet .c-photo__img { object-position: 52% 68%; } }
  @media (min-width: 64rem) { .c-meet::after { background: linear-gradient(90deg, rgb(0 0 0 / .8), rgb(0 0 0 / .45) 45%, rgb(0 0 0 / .1) 75%); } }
  .c-meet__inner { position: relative; z-index: 1; padding-block: var(--s-8); display: grid; gap: var(--s-3); }
  .c-meet__title { font-size: var(--fs-h2); }
  .c-meet__line { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); color: var(--c-ink); max-width: 32ch; }
  .c-meet.c-meet--photo { min-height: clamp(15rem, 32vw, 30rem); }
  .c-meet--photo::after { background: linear-gradient(0deg, rgb(0 0 0 / .35), transparent 60%); }
  /* ---- page head (inner pages): breadcrumb, tags, H1 and lead. Over the photo it is a dark band, so the small
     grey breadcrumb and tag text keep AA contrast. */
  .c-page-head { padding-block: var(--s-9) var(--s-7); border-bottom: var(--hair) solid var(--c-grid); }
  .c-page-head :is(h1, .c-page-head__title) { font-size: var(--fs-h1); max-width: 24ch; text-wrap: balance; color: var(--c-ink); }
  .c-page-head__title { font-weight: var(--wght-display); line-height: var(--lh-display); }
  .c-page-head__lead { font-size: clamp(1.0625rem, .95rem + .45vw, 1.25rem); color: var(--c-ink); max-width: 46ch; }
  .c-page-head__tags { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  .c-page-video { padding-top: var(--s-8); }
  body.has-parallax .c-page-head { background: linear-gradient(90deg, rgb(0 0 0 / .88), rgb(0 0 0 / .74)); }
  /* Inner photo pages: sections are translucent textured panels with a strip of photo between them. */
  body.has-parallax:not(.is-home) .l-section { background: rgb(3 7 13 / .8); }
  body.has-parallax:not(.is-home) .l-section + .l-section { margin-top: var(--s-7); }
  .c-home-video { padding-top: var(--s-8); }
  .c-home-more { margin-top: var(--s-8); }
  .c-home-all { margin-top: var(--s-7); }
  .c-proof__h { font-size: var(--fs-sm); color: var(--c-ink-3); font-weight: var(--wght-ui); font-variation-settings: "SHRP" 0; letter-spacing: 0; }

  /* ---- AI band tiles (Home, after /ai/ is promoted) */
  .c-tiles { display: grid; gap: var(--s-6); }
  @media (min-width: 48rem) { .c-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .c-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .c-tile { position: relative; display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: var(--hair) solid var(--c-grid); max-width: none; }
  .c-tile::before { content: ""; position: absolute; left: 0; top: -1px; width: 3rem; height: 2px; background: var(--practice); }
  .c-tile h3 { font-size: var(--fs-h4); }
  .c-tile h3 a { background-size: 0 1px; }
  .c-tile h3 a:hover { background-size: 100% 1px; }

  /* ---- AI Solutions & Broadcasting: the "signal room" (docs/ai-design.md). Traces, wavelets and layered data in
     place of rock; one centrepiece per page (tools/gen-ai-art.js). Phosphor and on-air are for graphics and large
     figures only; body text stays in the ink scale. */
  [data-practice="ai"] { --c-console: #0B1726; --c-phosphor: #5FE3D0; --c-onair: #FFB547; }
  [data-practice="ai"] .l-section { position: relative; }
  .c-aihero {
    position: relative; overflow: hidden; padding-block: var(--s-8) var(--s-8); border-bottom: var(--hair) solid var(--c-grid);
    background: radial-gradient(55% 75% at 78% 45%, rgb(77 141 255 / .13), transparent 70%), url("/assets/img/ai/ai-traces-bg.svg") center / cover no-repeat, var(--c-void);
  }
  .c-aihero__grid { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 64rem) { .c-aihero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-8); } }
  .c-aihero__copy { display: grid; gap: var(--s-5); align-content: start; }
  .c-aihero h1 { font-size: var(--fs-h1); max-width: 18ch; text-wrap: balance; }
  .c-aihero__lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); color: var(--c-ink); max-width: 44ch; }
  .c-aihero__art { margin: 0; justify-self: center; width: 100%; max-width: 38rem; }
  .c-aihero__art img { width: 100%; height: auto; }
  .c-aihero__tags { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  .c-aihero--onair { background: radial-gradient(55% 75% at 78% 45%, rgb(255 181 71 / .1), transparent 70%), url("/assets/img/ai/ai-traces-bg.svg") center / cover no-repeat, var(--c-void); }
  .c-aihero--warm { background: radial-gradient(50% 70% at 80% 45%, rgb(95 227 208 / .11), transparent 70%), radial-gradient(40% 60% at 10% 90%, rgb(77 141 255 / .08), transparent 70%), var(--c-void); }
  .c-aihero__art--free { display: grid; place-items: center; min-height: 14rem; }
  .c-aihero__art--free .c-free { width: 12rem; height: 12rem; font-size: 1.5rem; box-shadow: 0 0 0 10px rgb(95 227 208 / .08), 0 0 0 24px rgb(95 227 208 / .04); }

  /* Key facts as a row of instrument readouts. */
  .c-readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border: var(--hair) solid var(--c-grid); border-top: 2px solid var(--practice); border-radius: var(--r-2); background: rgb(11 23 38 / .7); }
  .c-readouts > div { padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; border-left: var(--hair) solid var(--c-grid); }
  .c-readouts > div:first-child { border-left: 0; }
  .c-readouts dt { font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-readouts dd { margin: 0; color: var(--c-ink); font-size: var(--fs-h4); font-weight: 640; line-height: 1.25; font-variant-numeric: tabular-nums; }
  .c-readouts dd small { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--c-ink-2); margin-top: var(--s-1); }

  /* Statement with the three reasons under it. */
  .c-signal-statement { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); line-height: 1.1; font-weight: var(--wght-display); max-width: 22ch; text-wrap: balance; }
  .c-trio { display: grid; gap: var(--s-6); }
  @media (min-width: 64rem) { .c-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .c-trio > div { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: var(--hair) solid var(--c-grid); }
  .c-trio__glyph { width: 3.5rem; height: 2rem; color: var(--practice); }
  .c-trio h3 { font-size: var(--fs-h3); }

  /* Four ways: each offering shows its own centrepiece in miniature. */
  .c-ways { display: grid; gap: var(--s-5); list-style: none; padding: 0; }
  @media (min-width: 48rem) { .c-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-way { position: relative; display: grid; grid-template-rows: auto 1fr; border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-console); overflow: hidden; max-width: none; transition: border-color var(--t-ui) var(--ease-out); }
  .c-way:hover, .c-way:focus-within { border-color: var(--practice); }
  .c-way__art { overflow: hidden; display: grid; place-items: center; padding: var(--s-4); background: radial-gradient(70% 90% at 50% 60%, rgb(77 141 255 / .1), transparent 70%), var(--c-abyss); border-bottom: var(--hair) solid var(--c-grid); }
  .c-way__art img, .c-way__art svg { display: block; width: 100%; height: clamp(9rem, 13vw, 11.5rem); object-fit: contain; }
  .c-way__body { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5) var(--s-5) var(--s-6); }
  .c-way__body h3 { font-size: var(--fs-h3); }
  .c-way__body h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
  .c-way__body .c-ticks { gap: var(--s-2); }
  .c-way__glyph { display: grid; place-items: center; color: var(--c-phosphor); }
  .c-way__glyph svg { width: 9rem; height: auto; }

  /* Referral board: logo plate, category, why, profile link. */
  .c-board { list-style: none; padding: 0; display: grid; border-top: var(--hair) solid var(--c-grid); }
  .c-board > li { position: relative; display: grid; gap: var(--s-3) var(--s-6); padding-block: var(--s-5); border-bottom: var(--hair) solid var(--c-grid); max-width: none; align-items: center; }
  @media (min-width: 64rem) { .c-board > li { grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1.4fr); } }
  .c-board__name::after { content: ""; position: absolute; inset: 0; }   /* the whole row opens the profile */
  .c-board__cat { font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-board__name { display: block; color: var(--c-ink); font-weight: 640; font-size: var(--fs-h4); background-size: 0 1px; }
  .c-board__why { color: var(--c-ink-2); }
  .c-board > li:hover .c-logo-plate { outline: 1px solid var(--practice); outline-offset: 3px; }
  .c-logo-plate { display: grid; place-items: center; height: 4.5rem; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: #F3F5F8; }
  .c-logo-plate img { max-height: 2.6rem; width: auto; max-width: 100%; }
  .c-logo-plate--dark { background: #0E1319; border: var(--hair) solid var(--c-grid); }
  .c-logo-plate--word { color: #0B1726; font-size: 1.5rem; font-weight: 760; letter-spacing: -.02em; }
  .c-logo-plate--lg { height: 7rem; padding: var(--s-4) var(--s-6); }
  .c-logo-plate--lg img { max-height: 4rem; }
  .c-logo-plate--inline { justify-self: start; width: max-content; }
  .c-aihero--dossier { padding-block: var(--s-7); }
  .c-aihero--dossier .c-logo-plate--lg { min-width: 16rem; }
  .c-open-slots { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; padding: 0; }
  .c-open-slots li { padding: var(--s-2) var(--s-4); border: 1px dashed var(--c-line); border-radius: 999px; color: var(--c-ink-2); font-size: var(--fs-sm); max-width: none; }
  .c-open-slots__cta { border-style: solid !important; border-color: var(--c-phosphor) !important; }
  .c-open-slots__cta a { color: var(--c-ink); }

  /* Foundation band (RockNRG) and the talk ticket. */
  .c-split-art { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 64rem) { .c-split-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); } .c-split-art--flip > :first-child { order: 2; } }
  .c-split-art__art { margin: 0; }
  .c-split-art__art img { width: 100%; height: auto; }
  .c-ticket { display: grid; gap: var(--s-2); padding: var(--s-5); border: 1px dashed var(--c-line); border-radius: var(--r-2); background: rgb(11 23 38 / .6); }
  .c-ticket__kind { font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-ticket__title { color: var(--c-ink); font-weight: 640; font-size: var(--fs-h4); line-height: 1.3; }

  /* On-air band (podcast). */
  .c-onair { background: radial-gradient(50% 90% at 15% 30%, rgb(255 181 71 / .1), transparent 70%), var(--c-abyss); }
  .c-onair__light { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
  .c-onair__light::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-onair); box-shadow: 0 0 0 4px rgb(255 181 71 / .18); }
  .c-paths { display: grid; gap: var(--s-4); }
  @media (min-width: 48rem) { .c-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-path { position: relative; display: grid; gap: var(--s-2); padding: var(--s-5); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-console); max-width: none; }
  .c-path:hover { border-color: var(--practice); }
  .c-path__who { font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-path a { color: var(--c-ink); font-weight: 640; font-size: var(--fs-h4); }
  .c-path a::after { content: ""; position: absolute; inset: 0; }

  /* A timeline of two or more steps that really are a sequence. */
  .c-chain { display: grid; gap: var(--s-4); list-style: none; padding: 0; counter-reset: chain; }
  @media (min-width: 64rem) { .c-chain { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
  .c-chain > li { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-console); max-width: none; }
  .c-chain__key { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 1; font-weight: 800; color: var(--practice); }
  .c-chain__title { color: var(--c-ink); font-weight: 640; font-size: var(--fs-h4); }
  .c-chain__text { color: var(--c-ink-2); font-size: var(--fs-sm); }
  .c-chain > li.is-test { border-color: var(--practice); }
  .c-chain--prose .c-chain__text { font-size: var(--fs-base); }

  /* Price options side by side. */
  .c-options { display: grid; gap: var(--s-4); }
  @media (min-width: 48rem) { .c-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-option { display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-6); border: var(--hair) solid var(--c-grid); border-top: 2px solid var(--practice); border-radius: var(--r-2); background: var(--c-console); }
  [data-practice="ai"] .has-lineart::after { content: none; }   /* the La Jolla line art belongs to the geology side */
  .c-option__who { font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-option__price { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); font-weight: 800; color: var(--c-ink); line-height: 1; font-variant-numeric: tabular-nums; }
  .c-option__what { color: var(--c-ink-2); }

  /* Pilot Scorecard: what the Test step agrees before a pilot starts. */
  .c-scorecard { border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-console); overflow: hidden; }
  .c-scorecard__head { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: var(--hair) solid var(--c-grid); color: var(--c-ink); font-weight: 640; }
  .c-scorecard__head span:last-child { color: var(--c-ink-3); font-weight: 400; font-size: var(--fs-sm); }
  .c-scorecard ul { list-style: none; padding: 0; margin: 0; display: grid; }
  .c-scorecard li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: var(--hair) solid var(--c-grid); color: var(--c-ink); max-width: none; }
  .c-scorecard li:last-child { border-bottom: 0; color: var(--c-ink-2); }
  .c-scorecard li::before { content: ""; width: 1rem; height: 1rem; margin-top: .25em; border: 1.5px solid var(--practice); border-radius: 3px; }

  /* Vendor dossier. */
  .c-dossier-head { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 64rem) { .c-dossier-head { grid-template-columns: minmax(0, 1fr) auto; } }
  .c-badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: 999px; border: var(--hair) solid var(--practice); color: var(--c-ink); font-size: var(--fs-sm); font-weight: 600; }
  .c-defs { display: grid; gap: 0; border-top: var(--hair) solid var(--c-grid); }
  .c-defs > div { display: grid; gap: var(--s-2) var(--s-6); padding-block: var(--s-5); border-bottom: var(--hair) solid var(--c-grid); }
  @media (min-width: 48rem) { .c-defs > div { grid-template-columns: 8rem minmax(0, 1fr); } }
  .c-defs dt { color: var(--c-ink-3); font-size: var(--fs-sm); padding-top: .2em; }
  .c-defs dd { margin: 0; color: var(--c-ink); max-width: 62ch; }
  .c-stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .c-stat { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-console); }
  .c-stat__figure { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); line-height: 1.05; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }
  .c-stat__label { color: var(--c-ink-2); }
  .c-stat__src { font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-sources { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
  @media (min-width: 64rem) { .c-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-source { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: var(--hair) solid var(--c-grid); border-left: 2px solid var(--practice); border-radius: var(--r-2); background: var(--c-console); max-width: none; }
  .c-source__title { color: var(--c-ink); font-weight: 640; }
  .c-source p { color: var(--c-ink-2); }
  .c-people { display: grid; gap: var(--s-4); }
  @media (min-width: 48rem) { .c-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-person { display: grid; gap: var(--s-2); padding: var(--s-5); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-console); }
  .c-person__name { color: var(--c-ink); font-weight: 680; font-size: var(--fs-h4); }
  .c-person__role { color: var(--c-ink-3); font-size: var(--fs-sm); }

  /* Partner pages: one image with its caption, and the partner's own line. */
  .c-partner-figure { margin: 0; display: grid; gap: var(--s-3); }
  .c-partner-figure img { width: 100%; height: auto; border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  .c-partner-figure figcaption { font-size: var(--fs-sm); color: var(--c-ink-3); }
  .c-signal-quote { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 640; color: var(--c-ink); max-width: 30ch; border-left: 2px solid var(--c-phosphor); padding-left: var(--s-4); }

  /* Microsoft Teams emphasis on the roundtable (a generic meeting glyph; no Microsoft artwork). */
  .c-teams { display: grid; gap: var(--s-5); padding: var(--s-6); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: linear-gradient(135deg, rgb(98 100 167 / .18), rgb(11 23 38 / .9) 55%); }
  @media (min-width: 48rem) { .c-teams { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }
  .c-teams__glyph { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 14px; background: #4B53BC; color: #fff; }
  .c-teams__glyph svg { width: 2.5rem; height: 2.5rem; }
  .c-teams__title { font-size: var(--fs-h3); color: var(--c-ink); }
  .c-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; padding: 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
  .c-legend li { display: inline-flex; align-items: center; gap: var(--s-2); max-width: none; }
  .c-legend li::before { content: ""; width: .75rem; height: .75rem; border-radius: 3px; border: 1.5px solid var(--dot); background: color-mix(in srgb, var(--dot) 35%, transparent); }
  .c-legend__op { --dot: var(--c-trough); } .c-legend__build { --dot: var(--c-phosphor); } .c-legend__host { --dot: var(--c-onair); }
  .c-aihero__art .c-legend { justify-content: center; margin-top: var(--s-4); }

  /* Form beside its summary on AI pages. */
  .c-form-aside { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-console); }
  .c-form-aside :is(h2, h3) { font-size: var(--fs-h4); }
  .c-free { display: inline-grid; place-items: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; border: 2px solid var(--c-phosphor); color: var(--c-ink); text-align: center; font-weight: 760; font-size: 1.125rem; line-height: 1.15; }
  /* ---- section heading block */
  .c-section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
  .c-section-head p { font-size: 1.125rem; }
}

/* ---------------------------------------------------------------- utilities */
@layer utilities {
  .u-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip-link {
    position: absolute; left: var(--s-4); top: -10rem; z-index: 100;
    padding: var(--s-3) var(--s-4); background: var(--c-ink); color: var(--c-void); border-radius: var(--r-1);
    font-weight: var(--wght-ui); background-image: none;
  }
  .skip-link:focus { top: var(--s-3); }
  .u-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .u-scroll-x:focus-visible { outline-offset: 0; }
  .u-muted { color: var(--c-ink-3); }
}