/* 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 */
  --c-logo-ground: #0B1418;     /* the plate of Horizontal-Reversed, so that logo sits on a panel with no visible box */
  --c-copper: #B8743A;          /* the logo's dot: brand orange. Black text on it is 5.6:1 */
  --c-slate: #17212B;           /* Thesis map sheet only */
  --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.11: 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: rigid fault-bounded blocks drop with the salt beneath them, faults soling into a smooth, ductile salt top;
     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: a translucent ground, dark enough for every text colour at AA. */
  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); }
  /* 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, .c-footer__credit--all { 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 */
  /* Ben stands about 52% across the photo, so a centred crop puts him behind the identity card. The photo is zoomed and
     anchored to its left edge, which carries him right. Phones have no room beside the card: he gets a strip under it. */
  .c-meet { --meet-strip: clamp(18rem, 64vw, 24rem); padding-bottom: var(--meet-strip); }
  .c-meet .c-photo { inset: auto 0 0 0; height: var(--meet-strip); overflow: hidden; }
  .c-meet .c-photo__img { width: max(115%, 31.625rem); max-width: none; object-fit: cover; object-position: 0% 92%; }
  .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: auto 0 0 0; height: var(--meet-strip); background: linear-gradient(180deg, #000, transparent 30%); pointer-events: none; }
  @media (min-width: 48rem) {
    .c-meet { align-items: end; min-height: clamp(22rem, 42vw, 35rem); padding-bottom: 0; }
    .c-meet .c-photo { inset: 0; height: 100%; }
    .c-meet .c-photo__img { width: 130%; object-position: 0% 80%; }
    .c-meet::after { inset: 0; height: auto; background: linear-gradient(90deg, rgb(0 0 0 / .82), rgb(0 0 0 / .5) 42%, rgb(0 0 0 / .05) 62%); }
  }
  .c-meet__inner { position: relative; z-index: 1; padding-block: var(--s-8); display: grid; gap: var(--s-3); }
  @media (max-width: 47.99rem) { .c-meet__inner { padding-bottom: var(--s-4); } }
  .c-meet__title { font-size: var(--fs-h2); }
  /* Ben's portrait card on the Meet Ben band (natural colour): right of the outcrop photo and vertically centred on wider
     screens; under the line of copy on phones. */
  @media (min-width: 48rem) {
  }
  .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-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); }
  .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-dossier-art { margin: 0; width: 100%; }
  .c-dossier-art img { width: 100%; height: auto; border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  @media (min-width: 48rem) { .c-dossier-head--art { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
  .c-wide-figure { padding: var(--s-4) var(--s-2); background: var(--c-void); }
  .c-wide-figure figure { margin: 0 auto; max-width: 1353px; display: grid; gap: var(--s-2); }
  .c-wide-figure img { display: block; width: 100%; height: auto; }
  .c-wide-figure figcaption { font-size: var(--fs-sm); color: var(--c-ink-3); text-align: center; }
  .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; }

  /* ================================================================ update 30 Oct (docs/DESIGN_NOTES.md) */
  /* ---- Photo backgrounds: Ben's rock faces as one set. tools/make-site-photos.js bakes in the shared navy duotone at
     about 18% brightness; this adds a navy gradient so every text colour keeps AA contrast. Desktop: a slow parallax
     pan (CSS scroll-driven, site.js fallback). Phones and reduced motion: a still photo. */
  .c-parallax--photo { background: #030A1E; }
  .c-parallax--photo::after { background: linear-gradient(180deg, rgb(3 10 30 / .42), rgb(3 10 30 / .66)); }
  .c-parallax--photo .c-parallax__img { left: 0; width: 100%; height: 100%; object-fit: cover; transform: none; animation: none; }
  @media (min-width: 48rem) {
    .c-parallax--photo .c-parallax__img { height: 116lvh; }
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: scroll()) {
        .c-parallax--photo .c-parallax__img { animation: photo-pan linear both; animation-timeline: scroll(root block); }
      }
    }
  }
  @media (prefers-reduced-motion: reduce) { .c-parallax--photo .c-parallax__img { height: 100%; } }
  @keyframes photo-pan { to { transform: translate3d(0, -16lvh, 0); } }
  /* RockNRG sections only: Ben's dark basalt wallpaper (his explicit exception; no line art there). */
  .c-basalt { position: relative; isolation: isolate; background: linear-gradient(180deg, rgb(0 0 0 / .55), rgb(0 0 0 / .7)), url("/assets/img/rocknrg-basalt.webp") center / cover no-repeat, #05070B; }

  /* ---- Figures and placeholder tiles. A placeholder is a dashed tile with its label; its caption says what the figure
     will show (docs/PLACEHOLDERS.md lists every one). */
  .c-figs { display: grid; gap: var(--s-6); }
  @media (min-width: 48rem) { .c-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .c-fig { margin: 0; display: grid; gap: var(--s-3); align-content: start; }
  .c-fig img { width: 100%; height: auto; border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-abyss); }
  .c-fig figcaption { font-size: var(--fs-sm); color: var(--c-ink-2); max-width: 60ch; }
  .c-fig figcaption cite { font-style: normal; color: var(--c-ink-3); }
  .c-fig__link { display: block; background-image: none; border-radius: var(--r-2); }
  .c-fig__link:hover img { border-color: var(--c-ink-3); }
  .c-fig__credit { display: block; margin-top: var(--s-1); font-size: .8125rem; color: var(--c-ink-3); }
  .c-fig__credit a { color: var(--c-ink-2); }
  .c-ph {
    display: grid; place-items: center; aspect-ratio: 16 / 10; width: 100%; padding: var(--s-5);
    border: 2px dashed rgb(255 197 61 / .7); border-radius: var(--r-2); background: rgb(255 197 61 / .05);
    color: var(--c-pending); font-size: var(--fs-sm); font-weight: 600; text-align: center; line-height: 1.4;
  }
  .c-ph--tall { aspect-ratio: 4 / 5; }
  .c-ph--wide { aspect-ratio: 21 / 9; }
  .c-ph--inline { aspect-ratio: auto; display: inline-flex; width: auto; padding: var(--s-2) var(--s-3); }

  /* ---- Geology offer cards: a photo that fades in on hover or focus, so visitors get the idea before clicking.
     Touch screens and narrow windows show it as a strip at the top of the card instead. */
  .c-card-photo { display: block; margin: 0; overflow: hidden; border-radius: var(--r-2); }
  .c-card-photo img, .c-card-photo .c-ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
  @media (hover: hover) and (pointer: fine) and (min-width: 48rem) {
    .has-card-photo { position: relative; isolation: isolate; overflow: hidden; }
    .has-card-photo .c-card-photo { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity var(--t-reveal) var(--ease-out); }
    .has-card-photo .c-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(3 7 13 / .55), rgb(3 7 13 / .82)); }
    .has-card-photo:hover .c-card-photo, .has-card-photo:focus-within .c-card-photo { opacity: 1; }
    .has-card-photo .c-card-photo .c-ph { border-radius: 0; }
    .l-stack > .c-card-photo + * { margin-block-start: 0; }   /* the photo sits behind the card, out of the flow */
  }
  @media not ((hover: hover) and (pointer: fine) and (min-width: 48rem)) {
    .has-card-photo .c-card-photo { aspect-ratio: 16 / 7; order: -1; }
    .has-card-photo .c-card-photo .c-ph { padding: var(--s-3); }
  }

  /* ---- Mature Field Evaluation: three steps that really are a sequence, with arrows; still images under them. */
  .c-progress { display: grid; gap: var(--s-3); list-style: none; padding: 0; counter-reset: prog; }
  .c-progress > li:not(.c-progress__arrow) { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: var(--hair) solid var(--c-grid); border-top: 2px solid var(--practice); border-radius: var(--r-2); background: rgb(3 7 13 / .82); max-width: none; counter-increment: prog; }
  .c-progress > li:not(.c-progress__arrow)::before { content: counter(prog); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; font-weight: 800; color: var(--practice); }
  .c-progress h3 { font-size: var(--fs-h4); }
  .c-progress__arrow { display: grid; place-items: center; color: var(--practice); max-width: none; padding: 0; border: 0; background: none; }
  .c-figs--3 .c-fig img, .c-figs--fit .c-fig img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
  .c-progress__arrow svg { width: 2rem; height: 2rem; transform: rotate(90deg); }
  @media (min-width: 64rem) {
    .c-progress { grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr) 2.5rem minmax(0, 1fr); align-items: stretch; gap: var(--s-2); }
    .c-progress__arrow svg { transform: none; }
  }

  /* ---- Pseudo-4D figure flow: three inputs, an arrow, the remaining-hydrocarbon map. */
  .c-flow { display: grid; gap: var(--s-5); align-items: center; }
  .c-flow__inputs { display: grid; gap: var(--s-4); }
  .c-flow__plus { justify-self: center; color: var(--c-ink-3); font-weight: 700; font-size: 1.25rem; max-width: none; }
  .c-flow__arrow { display: grid; place-items: center; color: var(--practice); }
  .c-flow__arrow svg { width: 2.5rem; height: 2.5rem; transform: rotate(90deg); }
  @media (min-width: 64rem) {
    .c-flow { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1.25fr); }
    .c-flow__arrow svg { transform: none; }
  }

  /* ---- Home hero portrait: phones only, under "Explore Geology Services" with Ben's name (Ben's rule). From tablet up the
     hero is headline, copy and buttons beside the animation, nothing over them; the Meet Ben banner carries the portrait there. */

  /* ---- Video captions (every video and video slot has one). */
  .c-video__caption { font-size: var(--fs-sm); color: var(--c-ink-2); }

  /* ---- Email and phone reveal (site.js builds the value on a click; never plain text in the page). */
  .c-reveal { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 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); }
  .c-reveal:hover { border-color: var(--c-ink); }
  .c-reveal__value { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 620; }
  .c-contact-lines { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
  .c-contact-lines li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); max-width: none; }
  .c-contact-lines__label { min-width: 4rem; color: var(--c-ink-3); font-size: var(--fs-sm); }
  .c-turnstile { min-height: 4.1rem; }

  /* ---- Phones: a sticky bar with "Book a call" and the tap-to-reveal phone. */
  .c-mobilebar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; gap: var(--s-3); padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); background: rgb(0 0 0 / .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: var(--hair) solid var(--c-grid); }
  .c-mobilebar > * { flex: 1 1 0; }
  .c-mobilebar .c-btn, .c-mobilebar .c-reveal, .c-mobilebar .c-reveal__value { width: 100%; justify-content: center; min-height: 2.75rem; }
  .c-mobilebar [data-contact] { display: flex; }
  body { padding-bottom: 4.5rem; }
  @media (min-width: 56.25rem) { .c-mobilebar { display: none; } body { padding-bottom: 0; } }

  /* ---- Photo galleries (About, Media) and photo strips (AI network, partners). */
  .c-gallery { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); list-style: none; padding: 0; }
  .c-gallery > li { max-width: none; }
  .c-gallery .c-fig img { aspect-ratio: 4 / 3; object-fit: cover; }
  .c-gallery .c-fig--tall img { aspect-ratio: 3 / 4; object-position: 50% 15%; }
  .c-gallery--feature > li:first-child { grid-column: 1 / -1; }
  @media (min-width: 48rem) { .c-gallery--feature > li:first-child .c-fig img { aspect-ratio: 16 / 9; } }

  /* ---- Media library: newest first; each item a date, title, line and platform link. */
  .c-media-group + .c-media-group { margin-top: var(--s-9); }
  .c-media-list { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); list-style: none; padding: 0; }
  .c-media-item { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: rgb(3 7 13 / .82); max-width: none; }
  .c-media-item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-1); }
  .c-media-item time { font-size: var(--fs-sm); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
  .c-media-item h3 { font-size: var(--fs-h4); }
  .c-media-item p { color: var(--c-ink-2); font-size: var(--fs-sm); }

  /* ---- Wavelets into one signal (AI Solutions), with its caption. */
  .c-wavelets { margin: 0; display: grid; gap: var(--s-3); }
  .c-wavelets img { width: 100%; height: auto; }
  .c-wavelets figcaption { display: grid; gap: var(--s-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
  .c-wavelets__key { display: inline-flex; align-items: center; gap: var(--s-2); }
  .c-wavelets__key::before { content: ""; width: 1.5rem; height: 2px; background: var(--c-ink-3); }
  .c-wavelets__key--signal::before { height: 3px; background: var(--c-phosphor); }

  /* ---- Digital-ecosystem band: deep navy instead of pure black until Ben supplies the licensed background image
     (two suited hands shaking in a digital ecosystem); the image then goes in as a darkened background here. */
  .c-ecosystem { background: radial-gradient(60% 80% at 85% 20%, rgb(77 141 255 / .14), transparent 70%), radial-gradient(50% 70% at 10% 90%, rgb(95 227 208 / .08), transparent 70%), #06101E; }

  /* ---- Ben's network (AI Solutions): the bio beside a photo strip. */
  .c-network { display: grid; gap: var(--s-7); align-items: start; }
  @media (min-width: 64rem) { .c-network { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
  .c-roles { display: grid; gap: var(--s-2); list-style: none; padding: 0; }
  .c-roles li { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--practice); background: rgb(11 23 38 / .7); color: var(--c-ink); max-width: none; }
  .c-roles small { display: block; color: var(--c-ink-3); }

  /* ---- Vendor sphere (AI Solutions): a canvas web of partners read from /data/partners.json; a plain list under it
     is the accessible version (and all that shows without JavaScript). */
  .c-sphere { display: grid; gap: var(--s-5); justify-items: center; }
  .c-sphere__stage { position: relative; width: min(100%, 34rem); aspect-ratio: 1; }
  .c-sphere__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .c-sphere__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-3); list-style: none; padding: 0; }
  .c-sphere__list li { max-width: none; }
  .c-sphere__list a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s-4); border: var(--hair) solid var(--c-grid); border-radius: 999px; background: rgb(11 23 38 / .7); color: var(--c-ink); }
  .c-sphere__list a:hover, .c-sphere__list a:focus-visible, .c-sphere__list a.is-lit { border-color: var(--c-phosphor); }
  .c-sphere__cat { font-size: var(--fs-sm); color: var(--c-ink-3); margin-left: var(--s-2); }

  /* ---- Podcast platform figure: five short-form routes into one long-form YouTube page. */
  .c-platforms { margin: 0; display: grid; gap: var(--s-5); }
  .c-platforms__map { display: grid; gap: var(--s-4); align-items: center; }
  @media (min-width: 64rem) { .c-platforms__map { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, .8fr); } }
  .c-platforms__list { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
  .c-platforms__list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: var(--c-console); color: var(--c-ink); max-width: none; }
  .c-platforms__list img, .c-platforms__home img { width: 2rem; height: 2rem; }
  .c-platforms__list small { display: block; color: var(--c-ink-3); }
  .c-platforms__arrow { display: grid; place-items: center; color: var(--c-onair); }
  .c-platforms__arrow svg { width: 2.5rem; height: 2.5rem; transform: rotate(90deg); }
  @media (min-width: 64rem) { .c-platforms__arrow svg { transform: none; } }
  .c-platforms__home { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6); border: 2px solid var(--c-onair); border-radius: var(--r-2); background: var(--c-console); color: var(--c-ink); }
  .c-platforms__home strong { font-size: var(--fs-h4); }
  .c-platforms figcaption { font-size: var(--fs-sm); color: var(--c-ink-3); }

  /* ---- Partners directory. */
  .c-partner-group + .c-partner-group { margin-top: var(--s-9); }
  .c-partner-cards { display: grid; gap: var(--s-5); list-style: none; padding: 0; }
  @media (min-width: 48rem) { .c-partner-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-partner-card { position: relative; 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); max-width: none; transition: border-color var(--t-ui) var(--ease-out); }
  .c-partner-card:hover, .c-partner-card:focus-within { border-color: var(--practice); }
  .c-partner-card h3 { font-size: var(--fs-h3); }
  .c-partner-card h3 a { background-size: 0 1px; }
  .c-partner-card h3 a::after { content: ""; position: absolute; inset: 0; }
  .c-partner-card .c-logo-plate { justify-self: start; min-width: 12rem; }
  /* ---- 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; }

  /* ================================================================ Geology Refresh V4 (31 Oct 2026)
     Bento (Home, /geology/), group and service pages, tools grid, how-to-engage steps, Meet Ben bar, disclaimer and
     the closing band (docs/DECISIONS_geology-v4.md). One accent, the practice colour. The bold move is the bento:
     big group numerals and a small fault-throw shift of the image on hover; everything else stays quiet. Motion
     only under prefers-reduced-motion: no-preference. */

  /* ---- Home hero copy (the hero animation block above it is untouched) */
  .c-hero__role { color: var(--c-ink); font-size: clamp(1.0625rem, .95rem + .55vw, 1.4375rem); font-weight: 620; letter-spacing: -.005em; }
  .c-seeking {
    display: inline-flex; align-items: center; gap: var(--s-3); width: fit-content; max-width: 100%;
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3); border: var(--hair) solid rgb(255 90 60 / .7); border-radius: 999px;
    background: rgb(255 90 60 / .12); color: var(--c-ink); font-size: var(--fs-sm); font-weight: 620; line-height: 1.3;
  }
  .c-seeking::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--practice); box-shadow: 0 0 0 4px rgb(255 90 60 / .22); }

  /* ---- synthetic-data disclaimer: a fault tick and one line */
  .c-disclaimer { display: flex; gap: var(--s-3); align-items: baseline; max-width: none; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink-2); }
  .c-disclaimer::before { content: ""; flex: none; width: 2px; height: 1em; background: var(--practice); transform: skewX(-20deg) translateY(.15em); }
  .c-disclaimer-band { padding-block: var(--s-4); border-bottom: var(--hair) solid var(--c-grid); background: rgb(0 0 0 / .82); }

  /* ---- Meet Ben bar: three stat tiles, the quote and the data-wrangler paragraph */
  .c-stats { display: grid; gap: var(--s-4); }
  @media (min-width: 48rem) { .c-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .c-stat {
    display: grid; align-content: start; gap: var(--s-3); max-width: none; padding: var(--s-5);
    border: var(--hair) solid var(--c-grid); border-top: 2px solid var(--practice); border-radius: var(--r-2); background: var(--c-abyss);
  }
  .c-stat__fig { display: grid; gap: var(--s-2); max-width: none; }
  .c-stat__num { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: .9; font-weight: 800; font-variation-settings: "SHRP" 100; letter-spacing: -.045em; color: var(--c-ink); font-variant-numeric: lining-nums; }
  .c-stat__label { color: var(--c-ink); font-weight: 650; font-size: 1.125rem; line-height: 1.25; }
  .c-stat--edu .c-stat__label { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 760; font-variation-settings: "SHRP" 80; letter-spacing: -.025em; line-height: 1.05; }
  .c-stat__detail { font-size: var(--fs-sm); color: var(--c-ink-2); }
  .c-stat__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); max-width: none; padding-top: var(--s-2); }
  .c-meetbar__quote blockquote p { max-width: 30ch; font-size: clamp(1.375rem, 1rem + 1.5vw, 2.125rem); line-height: 1.22; }

  /* ---- Offerings bento. Each group is one block: a large tile (overview image, numeral, name, line) and its three
     service tiles. Blocks alternate sides from 64rem; tiles pair up from 23.5rem; one column below. */
  .c-offerings__intro { color: var(--c-ink-2); }
  .c-bento { display: grid; gap: var(--s-7); }
  .c-bento__block { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 23.5rem) {
    .c-bento__block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-bento__lead, .c-bento__tile:last-child { grid-column: 1 / -1; }
  }
  @media (min-width: 48rem) {
    .c-bento__block { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
    .c-bento__tile:last-child { grid-column: auto; }
  }
  @media (min-width: 64rem) {
    .c-bento__block { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; }
    .c-bento__lead { grid-column: 1 / span 6; grid-row: 1 / span 2; }
    .c-bento__tile:nth-child(2) { grid-column: 7 / span 3; grid-row: 1; }
    .c-bento__tile:nth-child(3) { grid-column: 10 / span 3; grid-row: 1; }
    .c-bento__tile:nth-child(4) { grid-column: 7 / span 6; grid-row: 2; }
    .c-bento__block--flip .c-bento__lead { grid-column: 7 / span 6; }
    .c-bento__block--flip .c-bento__tile:nth-child(2) { grid-column: 1 / span 3; }
    .c-bento__block--flip .c-bento__tile:nth-child(3) { grid-column: 4 / span 3; }
    .c-bento__block--flip .c-bento__tile:nth-child(4) { grid-column: 1 / span 6; }
  }
  .c-bento__lead, .c-bento__tile, .c-geo-card {
    position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; height: 100%;
    color: var(--c-ink-2); background: rgb(3 7 13 / .92); background-image: none;
    border: var(--hair) solid var(--c-grid); border-radius: var(--r-2);
    transition: border-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
  }
  :is(.c-bento__lead, .c-bento__tile, .c-geo-card)::before {
    content: ""; position: absolute; left: 0; top: 0; z-index: 2; width: 3rem; height: 2px; background: var(--practice);
    transition: width var(--t-ui) var(--ease-out);
  }
  :is(.c-bento__lead, .c-bento__tile, .c-geo-card):hover { border-color: var(--c-line); box-shadow: var(--glow); }
  :is(.c-bento__lead, .c-bento__tile, .c-geo-card):is(:hover, :focus-visible)::before { width: 100%; }
  :is(.c-bento__lead, .c-bento__tile, .c-geo-card):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
  .c-bento__media { position: relative; flex: none; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border-bottom: var(--hair) solid var(--c-grid); }
  .c-bento__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-reveal) var(--ease-out); }   /* fills the frame; its own height never sets the row */
  @media (min-width: 64rem) { .c-bento__media { flex: 1 1 auto; min-height: 15rem; aspect-ratio: auto; } }
  @media (prefers-reduced-motion: no-preference) {
    /* a small throw: the block drops down and along a fault, the way the section in the hero moves */
    .c-bento__lead:is(:hover, :focus-visible) .c-bento__media img { transform: translate(.375rem, .625rem) scale(1.045); }
  }
  .c-bento__body { display: grid; gap: var(--s-3); padding: var(--s-5); }
  @media (min-width: 48rem) { .c-bento__body { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); padding: var(--s-6); } .c-bento__body > :not(.c-bento__num) { grid-column: 2; } .c-bento__num { grid-row: 1 / span 4; } }
  .c-bento__num {
    font-size: clamp(3rem, 1.9rem + 3.6vw, 5.25rem); line-height: .82; font-weight: 800; font-variation-settings: "SHRP" 100;
    letter-spacing: -.055em; color: var(--practice); font-variant-numeric: lining-nums tabular-nums; max-width: none;
  }
  .c-bento__title { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); color: var(--c-ink); }
  .c-bento__line { color: var(--c-ink-2); font-size: 1.0625rem; }
  .c-bento__deliv, .c-geo-card__deliv { font-size: var(--fs-sm); color: var(--c-ink-2); padding-top: var(--s-3); border-top: var(--hair) solid var(--c-grid); }
  :is(.c-bento__deliv, .c-geo-card__deliv, .c-geo-head__deliv) span { display: block; color: var(--c-ink-3); font-size: .8125rem; font-weight: var(--wght-ui); }
  .c-bento__more, .c-geo-card__more { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink); font-weight: 620; font-size: var(--fs-sm); }
  .c-bento__tile { gap: var(--s-2); padding: var(--s-5); min-height: 11.5rem; }
  .c-bento__code { color: var(--practice); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .c-bento__tile-title { font-size: 1.1875rem; line-height: 1.2; color: var(--c-ink); }
  .c-bento__hook { font-size: .9375rem; line-height: 1.5; color: var(--c-ink-2); }
  .c-bento__note { font-size: .8125rem; color: var(--c-ink); border-left: 2px solid var(--practice); padding-left: var(--s-2); }
  .c-bento__tile > .c-arrow { margin-top: auto; color: var(--c-ink); }
  .c-arrow { width: 1.125rem; height: 1.125rem; flex: none; transition: transform var(--t-ui) var(--ease-out); }
  @media (prefers-reduced-motion: no-preference) {
    a:is(:hover, :focus-visible) .c-arrow { transform: translateX(4px); }
    a:is(:hover, :focus-visible) .c-arrow--back { transform: translateX(-4px); }
  }

  /* ---- Group and service pages */
  .c-geo-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); max-width: none; color: var(--c-ink-2); font-size: var(--fs-sm); font-weight: var(--wght-ui); }
  .c-geo-kicker a { color: var(--c-ink-2); }
  .c-geo-kicker__code {
    display: inline-grid; place-items: center; min-width: 2.75rem; padding: .125rem var(--s-2);
    border: var(--hair) solid var(--practice); border-radius: var(--r-1); color: var(--c-ink); font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .c-geo-head h1 { max-width: 22ch; }
  /* the service or group code as a large outlined numeral on the right of the head, as in the bento (desktop only) */
  .c-geo-head > .l-container { position: relative; }
  .c-geo-head__code { display: none; }
  @media (min-width: 64rem) {
    .c-geo-head__code {
      display: block; position: absolute; right: var(--gutter); bottom: -.08em; margin: 0; max-width: none; pointer-events: none; user-select: none;
      font-size: clamp(9rem, 3rem + 11vw, 16rem); line-height: .8; font-weight: 800; font-variation-settings: "SHRP" 100; letter-spacing: -.06em;
      color: transparent; -webkit-text-stroke: 2px rgb(255 90 60 / .6); font-variant-numeric: lining-nums;
    }
  }
  .c-geo-head__deliv, .c-geo-head__more { max-width: 60ch; color: var(--c-ink-2); }
  .c-geo-head__deliv { padding-left: var(--s-4); border-left: 2px solid var(--practice); color: var(--c-ink); }
  .c-geo-figsec { padding-block: var(--s-7); }
  .c-geo-figs { display: grid; gap: var(--s-6); }
  @media (min-width: 48rem) {
    .c-geo-figs { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .c-geo-fig--half { grid-template-rows: minmax(0, 1fr) auto; }   /* a pair shares one frame height, captions line up */
    .c-geo-fig--wide, .c-geo-fig--solo { grid-column: 1 / -1; }
    .c-geo-fig--n6 { grid-column: span 6; } .c-geo-fig--n5 { grid-column: span 5; } .c-geo-fig--n7 { grid-column: span 7; }
  }
  .c-geo-fig { margin: 0; display: grid; gap: var(--s-3); min-width: 0; }
  .c-geo-fig--solo { justify-self: center; justify-items: center; width: 100%; max-width: 60rem; }   /* the frame hugs the image */
  .c-geo-fig--solo .c-geo-fig__frame { max-width: 100%; }
  .c-geo-fig--ui { justify-items: center; }
  .c-geo-fig--ui .c-geo-fig__frame { max-width: min(100%, 52rem); }   /* screen captures near their own scale */
  .c-geo-fig--tall { max-width: 40rem; }
  .c-geo-fig__frame { display: grid; place-items: center; min-width: 0; padding: var(--s-3); background: #000; border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  .c-geo-fig__frame img { max-width: 100%; height: auto; }
  .c-geo-fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-2); max-width: 72ch; }
  .c-geo-fig__full { color: var(--c-ink); white-space: nowrap; }
  .c-geo-fig--scroll .c-geo-fig__frame { overflow-x: auto; place-items: start; -webkit-overflow-scrolling: touch; }
  @media (max-width: 47.99rem) { .c-geo-fig--scroll .c-geo-fig__frame img { max-width: none; width: 42rem; } }
  @media (min-width: 64rem) {
  }
  .c-geo-deliverable {
    max-width: 52ch; padding: var(--s-5); border-left: 2px solid var(--practice); border-radius: 0 var(--r-2) var(--r-2) 0;
    background: rgb(255 90 60 / .08); color: var(--c-ink); font-size: 1.1875rem; line-height: 1.45; font-weight: 600;
  }
  .c-geo-proof { position: relative; padding-left: var(--s-5); color: var(--c-ink); font-size: 1.0625rem; line-height: 1.6; }
  .c-geo-proof::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 2px; background: var(--c-line); }
  .c-geo-after { display: grid; gap: var(--s-6); padding-block: var(--s-7); }
  body.has-parallax .c-geo-after .c-disclaimer { padding: var(--s-4) var(--s-5); background: rgb(3 7 13 / .92); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  .c-pager { display: grid; gap: var(--s-3); }
  @media (min-width: 48rem) { .c-pager { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
  .c-pager__link {
    display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; padding: var(--s-4) var(--s-5);
    border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: rgb(3 7 13 / .92); background-image: none; color: var(--c-ink);
    transition: border-color var(--t-ui) var(--ease-out);
  }
  .c-pager__link:hover { border-color: var(--c-line); }
  .c-pager__link--next { justify-content: flex-end; text-align: right; }
  .c-pager__link--up { justify-content: center; text-align: center; }
  .c-pager__dir { display: block; font-size: .8125rem; color: var(--c-ink-3); }
  .c-pager__name { display: block; font-weight: 620; line-height: 1.3; }
  .c-geo-cards { display: grid; gap: var(--s-4); }
  @media (min-width: 64rem) { .c-geo-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .c-geo-cards > li { display: flex; max-width: none; }
  .c-geo-card { gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); width: 100%; }
  .c-geo-card h3 { font-size: var(--fs-h4); }
  .c-geo-card__hook { color: var(--c-ink); }
  .c-geo-card__more { margin-top: auto; padding-top: var(--s-2); }

  /* ---- Tool strengths: eight cards, 2 x 4 from 64rem */
  .c-tools__platform { color: var(--c-ink); }
  .c-toolgrid { display: grid; gap: var(--s-4); }
  @media (min-width: 40rem) { .c-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .c-toolgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .c-toolcard { display: grid; align-content: start; gap: var(--s-3); max-width: none; padding: var(--s-5); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: rgb(3 7 13 / .88); }
  .c-toolcard h3 { display: flex; align-items: center; gap: var(--s-2); font-size: 1.125rem; }
  .c-toolcard h3::before { content: ""; flex: none; width: 2px; height: 1em; background: var(--practice); transform: skewX(-20deg); }
  .c-toolcard ul { display: grid; gap: var(--s-2); list-style: none; padding: 0; }
  .c-toolcard li { position: relative; padding-left: var(--s-4); color: var(--c-ink-2); font-size: .9375rem; line-height: 1.45; }
  .c-toolcard li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; background: var(--c-line); }

  /* ---- How to engage: three steps that really are a sequence */
  .c-engage__intro { color: var(--c-ink); }
  .c-engage { display: grid; gap: var(--s-4); }
  @media (min-width: 64rem) { .c-engage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
  .c-engage__step {
    position: relative; display: grid; align-content: start; gap: var(--s-3); max-width: none; padding: var(--s-6) var(--s-5) var(--s-5);
    border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); background: rgb(3 7 13 / .88);
  }
  .c-engage__n { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: .85; font-weight: 800; font-variation-settings: "SHRP" 100; letter-spacing: -.045em; color: var(--practice); }
  .c-engage__step h3 { font-size: var(--fs-h4); }
  .c-engage__step p:last-child { color: var(--c-ink-2); }
  @media (min-width: 64rem) { .c-engage__step:not(:last-child)::after { content: ""; position: absolute; top: 2.9rem; right: calc(-1 * var(--s-6) - 1px); width: var(--s-6); height: 2px; background: var(--c-line); } }
  .c-engage__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
  .c-engage__where { color: var(--c-ink-2); font-size: var(--fs-sm); }

  /* ---- Closing band (deck slide 21) */
  .c-close h2 { font-size: clamp(2rem, 1.1rem + 3.6vw, 3.75rem); max-width: 15ch; letter-spacing: var(--track-display); font-weight: var(--wght-display); }
  .c-close button.c-btn--secondary { background-color: transparent; }   /* the email reveal (site.js) is a button: no grey default fill */
  .c-close__site { color: var(--c-ink-3); font-weight: 600; letter-spacing: .01em; }

  /* ================================================================ Launch QC V6 (docs/PLAN_V6.md, docs/DECISIONS.md)
     One mark ties the additions together: the pick, the small triangle a geologist sets on a depth track at a
     formation top. It marks the active section, the Proof callouts, the timeline milestones and the competency hover. */
  :root { --pick: .5rem; }
  .c-seeking { background: rgb(255 90 60 / .16); }

  /* ---- Home: the company block beside the hero animation */
  .c-hero__title { max-width: 12ch; }
  .c-hero__role { color: var(--c-ink); }
  .c-hero .c-hero__lead { max-width: 58ch; font-size: 1.0625rem; line-height: 1.6; color: var(--c-ink-2); }

  /* ---- Home: identity card on the Meet Ben photo */
  .c-who { display: grid; gap: var(--s-4) var(--s-5); grid-template-columns: auto minmax(0, 1fr); align-items: center; width: fit-content; max-width: 100%; margin-top: var(--s-3); padding: var(--s-4); background: rgb(3 7 13 / .86); border: var(--hair) solid var(--c-line); border-radius: var(--r-2); }
  .c-who__photo { width: 7.5rem; aspect-ratio: 1; padding: 3px; border: 2px solid var(--practice); border-radius: 50%; }
  .c-who__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
  .c-who__copy { display: grid; gap: var(--s-1); justify-items: start; min-width: 0; }
  .c-who__copy p { max-width: 42ch; }
  .c-who__name { color: var(--c-ink); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); line-height: 1.05; font-weight: var(--wght-display); letter-spacing: var(--track-display); font-variation-settings: "SHRP" var(--shrp-display); }
  .c-who__tag { color: var(--c-ink); font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); font-weight: 600; line-height: 1.3; }
  .c-who__title { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.4; }
  .c-who .c-seeking { margin-top: var(--s-2); }
  @media (min-width: 48rem) { .c-who { padding: var(--s-5); } .c-who__photo { width: 10rem; } }
  /* Below 80rem the card narrows, so Ben keeps his space beside it. */
  @media (min-width: 48rem) and (max-width: 79.99rem) { .c-who { max-width: 28rem; } .c-who__photo { width: 8rem; } }
  @media (max-width: 29.99rem) { .c-who { grid-template-columns: minmax(0, 1fr); } }

  /* ---- Home: What Ben does, the resume paragraph on the highlighter blue it wears in his resume */
  .c-what { background: var(--ramp-1); border-block: var(--hair) solid var(--ramp-2); }
  .c-what__inner { display: grid; gap: var(--s-4) var(--s-8); padding-block: var(--s-8); }
  .c-what__h { color: var(--ramp-3); font-size: var(--fs-h4); }
  .c-what__text { max-width: none; color: #fff; font-size: clamp(1.25rem, 1rem + 1.05vw, 1.75rem); line-height: 1.42; font-weight: 500; letter-spacing: -.01em; }
  @media (min-width: 64rem) { .c-what__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); } }

  /* ---- Home: the well stat. Two numerals split by a fault tick. */
  .c-wells { background: rgb(0 0 0 / .88); border-bottom: var(--hair) solid var(--c-grid); }
  .c-wells__inner { display: grid; gap: var(--s-6); padding-block: var(--s-8); }
  .c-wells__head { display: grid; gap: var(--s-4) var(--s-7); align-items: end; font-size: inherit; letter-spacing: normal; }
  .c-wells__figs { display: flex; align-items: flex-end; gap: clamp(2rem, 7vw, 5.5rem); }
  .c-wells__fig { position: relative; display: grid; gap: var(--s-2); }
  .c-wells__fig + .c-wells__fig::before { content: ""; position: absolute; left: calc(-.5 * clamp(2rem, 7vw, 5.5rem) - 3px); top: 2%; bottom: 8%; width: 6px; background: var(--practice); transform: skewX(-14deg); }
  .c-wells__n { color: var(--c-ink); font-size: clamp(5.75rem, 3rem + 13vw, 12rem); line-height: .8; font-weight: 800; font-variation-settings: "SHRP" 100; letter-spacing: -.055em; font-variant-numeric: lining-nums; }
  .c-wells__k { color: var(--c-ink-2); font-size: clamp(1.0625rem, .9rem + .7vw, 1.375rem); font-weight: 600; letter-spacing: 0; }
  .c-wells__label { color: var(--c-ink); font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); line-height: 1.12; font-weight: var(--wght-head); letter-spacing: var(--track-head); max-width: 16ch; text-wrap: balance; }
  .c-wells__where { color: var(--c-ink-2); margin-top: calc(-1 * var(--s-4)); }
  @media (min-width: 64rem) { .c-wells__head { grid-template-columns: auto minmax(0, 1fr); } .c-wells__label { padding-bottom: 2.2rem; } }
  .c-wells .c-stats { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 30rem) { .c-wells .c-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .c-wells .c-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .c-wells .c-stat__num { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); letter-spacing: -.04em; }
  .c-wells .c-stat--edu .c-stat__label { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
  .c-stat__logos { gap: var(--s-2); padding-top: 0; }
  .c-edu-chip { display: inline-flex; align-items: center; padding: var(--s-2) var(--s-3); background: #fff; border-radius: var(--r-2); }
  .c-edu-chip img { width: auto; height: 1.875rem; filter: none; opacity: 1; }

  /* ---- Home: core competencies, 2 x 6 then 4 x 3 */
  .c-comps { background: rgb(0 0 0 / .82); }
  .c-comps__grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 64rem) { .c-comps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } }
  .c-comps__grid li { display: flex; max-width: none; }
  .c-comp { position: relative; display: grid; align-content: start; gap: var(--s-3); width: 100%; padding: var(--s-4); background: rgb(3 7 13 / .92); background-image: none; border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); color: var(--c-ink); font-weight: 600; font-size: .9375rem; line-height: 1.3; transition: border-color var(--t-ui) var(--ease-out); }
  .c-comp__icon { width: 1.75rem; height: 1.75rem; color: var(--practice); }
  .c-comp::after { content: ""; position: absolute; left: 0; top: var(--s-4); border-block: var(--pick) solid transparent; border-left: .625rem solid var(--practice); opacity: 0; transition: opacity var(--t-ui) var(--ease-out); }
  .c-comp:is(:hover, :focus-visible) { border-color: var(--c-line); }
  .c-comp:is(:hover, :focus-visible)::after { opacity: 1; }
  @media (min-width: 48rem) { .c-comp { padding: var(--s-5); font-size: 1rem; } }

  /* ---- Bento: wider service tiles. From 64rem the tiles take 7 of 12 columns (was 6), about 17% wider each; from 48rem
     two across (was three). */
  @media (min-width: 48rem) {
    .c-bento__block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c-bento__tile:last-child { grid-column: 1 / -1; min-height: 0; }
  }
  @media (min-width: 64rem) {
    .c-bento__block { grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); }
    .c-bento__lead { grid-column: 1; grid-row: 1 / span 2; }
    .c-bento__tile:nth-child(2) { grid-column: 2; grid-row: 1; }
    .c-bento__tile:nth-child(3) { grid-column: 3; grid-row: 1; }
    .c-bento__tile:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
    .c-bento__block--flip { grid-template-columns: minmax(0, 3.5fr) minmax(0, 3.5fr) minmax(0, 5fr); }
    .c-bento__block--flip .c-bento__lead { grid-column: 3; }
    .c-bento__block--flip .c-bento__tile:nth-child(2) { grid-column: 1; }
    .c-bento__block--flip .c-bento__tile:nth-child(3) { grid-column: 2; }
    .c-bento__block--flip .c-bento__tile:nth-child(4) { grid-column: 1 / span 2; }
  }

  /* ---- Home: What is K'nexion Energy? The panel takes the logo's own ground, so the logo sits in it with no box. */
  .c-whatis { padding-block: var(--s-9); }
  .c-whatis__panel { display: grid; gap: var(--s-6); padding: var(--s-5); background: var(--c-logo-ground); border: var(--hair) solid var(--c-line); border-radius: 14px; box-shadow: 0 24px 64px -32px rgb(0 0 0 / .9); }
  .c-whatis__copy { display: grid; gap: var(--s-4); align-content: start; }
  .c-whatis__copy p { color: var(--c-ink); }
  .c-whatis__logo { width: min(100%, 26rem); height: auto; }
  .c-whatis__slogan { font-size: var(--fs-h3); line-height: 1.2; font-weight: 640; letter-spacing: -.01em; }
  .c-whatis__video { gap: var(--s-2); align-self: center; }
  .c-whatis__label { color: var(--c-ink); font-size: var(--fs-sm); font-weight: 650; letter-spacing: 0; }
  .c-whatis__video .c-video__frame { border-color: var(--c-line); border-radius: 12px; box-shadow: 0 16px 40px -20px rgb(0 0 0 / .9); }
  .c-whatis__video .c-video__soon { font-size: 1.0625rem; }
  @media (min-width: 64rem) {
    .c-whatis__panel { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-8); align-items: center; padding: var(--s-7); }
    .c-whatis__video { width: 100%; max-width: 30rem; justify-self: end; }
  }

  /* ---- Long pages: the content beside a section nav that stays in view from the first section to the last. */
  .c-long { display: grid; gap: var(--s-5); padding-block: var(--s-5) var(--s-6); }
  .c-long__main { display: grid; gap: var(--s-5); min-width: 0; }
  @media (min-width: 64rem) {
    .c-long { grid-template-columns: minmax(0, 1fr) 19rem; column-gap: var(--s-5); align-items: start; }
    .c-long__main { grid-column: 1; grid-row: 1; }
    .c-secnav { grid-column: 2; grid-row: 1; position: sticky; top: 5rem; }
  }
  .c-offer { display: grid; gap: var(--s-6); min-width: 0; padding: var(--s-5); background: rgb(3 7 13 / .92); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  @media (min-width: 48rem) { .c-offer { padding: var(--s-7) var(--s-6); } }
  .c-offer--intro { gap: var(--s-4); }
  .c-offer--intro h1 { font-size: var(--fs-h1); max-width: 20ch; }
  .c-offer__head { display: grid; gap: var(--s-3); }
  .c-offer__code { font-size: clamp(2.75rem, 2rem + 2.6vw, 4.25rem); line-height: .85; font-weight: 800; font-variation-settings: "SHRP" 100; letter-spacing: -.05em; color: var(--practice); font-variant-numeric: lining-nums; }
  .c-offer h2 { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem); max-width: 26ch; text-wrap: balance; }
  .c-offer h3 { font-size: var(--fs-h4); }
  .c-offer__part { display: grid; gap: var(--s-3); }
  .c-offer__part .c-ticks li { color: var(--c-ink); }
  .c-offer .c-geo-figs { margin-top: var(--s-2); }

  /* ---- Section nav: a floating card from 64rem; a bar on the bottom edge below it, in the mobile bar's place. */
  .c-secnav { display: grid; gap: var(--s-4); padding: var(--s-5); background: rgb(3 7 13 / .95); border: var(--hair) solid var(--c-grid); border-top: 2px solid var(--practice); border-radius: var(--r-2); box-shadow: 0 16px 40px -24px #000; }
  .c-secnav__list { display: grid; }
  .c-secnav__list li { max-width: none; }
  .c-secnav__list li + li { border-top: var(--hair) solid var(--c-grid); }
  .c-secnav__list a { position: relative; display: flex; align-items: baseline; gap: var(--s-3); min-height: 2.75rem; padding: var(--s-3) 0 var(--s-3) .875rem; background-image: none; color: var(--c-ink-2); font-size: .9375rem; line-height: 1.35; transition: color var(--t-micro) linear; }
  .c-secnav__list a::before { content: ""; position: absolute; left: 0; top: calc(var(--s-3) + .28em); border-block: .34rem solid transparent; border-left: .5rem solid var(--practice); opacity: 0; transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); transform: translateX(-3px); }
  .c-secnav__list a:hover { color: var(--c-ink); }
  .c-secnav__list a[aria-current] { color: var(--c-ink); font-weight: 650; }
  .c-secnav__list a[aria-current]::before { opacity: 1; transform: none; }
  .c-secnav__code { flex: none; min-width: 2rem; color: var(--practice); font-weight: 700; font-variant-numeric: tabular-nums; }
  .c-secnav__group a { color: var(--c-ink); font-weight: 650; padding-left: 0; }
  .c-secnav__group a::before { display: none; }
  .c-secnav__group .c-secnav__code { min-width: 2.5rem; padding: .125rem var(--s-2); border: var(--hair) solid var(--practice); border-radius: var(--r-1); color: var(--c-ink); text-align: center; }
  .c-secnav__ask { width: 100%; }
  @media (max-width: 63.99rem) {
    body.has-secnav { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
    body.has-secnav .c-mobilebar { display: none; }
    .c-secnav { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); background: rgb(0 0 0 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0; border-top: var(--hair) solid var(--c-line); border-radius: 0; box-shadow: none; }
    .c-secnav__list { display: flex; flex: 1 1 auto; min-width: 0; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
    .c-secnav__list::-webkit-scrollbar { display: none; }
    .c-secnav__list li { flex: none; }
    .c-secnav__list li + li { border-top: 0; }
    .c-secnav__list a { justify-content: center; align-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--s-2); border-radius: var(--r-2); font-size: .9375rem; font-weight: 650; }
    .c-secnav__list a::before { display: none; }
    .c-secnav__list a[aria-current] { background: rgb(255 90 60 / .2); box-shadow: inset 0 -2px 0 var(--practice); }
    .c-secnav__code { min-width: 0; color: var(--c-ink); }
    .c-secnav__group .c-secnav__code { min-width: 0; padding: 0; border: 0; }
    .c-secnav:not(.c-secnav--words) .c-secnav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .c-secnav--words .c-secnav__list a { white-space: nowrap; font-weight: 600; font-size: .875rem; }
    .c-secnav--words .c-secnav__list a[aria-current] { background: rgb(77 141 255 / .22); }
    .c-secnav__ask { flex: none; width: auto; min-height: 2.75rem; padding-inline: var(--s-3); font-size: .875rem; white-space: nowrap; background: var(--c-ink); color: var(--c-void); }
    .c-secnav--words .c-secnav__ask { display: none; }
  }

  /* ---- Proof: a pick on the track and one sentence (brief section 9) */
  .c-pick { position: relative; max-width: none; padding: var(--s-4) var(--s-5) var(--s-4) 2.25rem; background: rgb(255 90 60 / .07); border: var(--hair) solid rgb(255 90 60 / .4); border-left: 3px solid var(--practice); border-radius: 0 var(--r-2) var(--r-2) 0; color: var(--c-ink); line-height: 1.5; }
  .c-pick::before { content: ""; position: absolute; left: .75rem; top: calc(var(--s-4) + .3em); border-block: .38rem solid transparent; border-left: .6rem solid var(--practice); }
  .c-pick strong { display: block; color: var(--c-ink-2); font-size: var(--fs-sm); font-weight: 650; }

  /* ---- New facts (brief section 5) */
  .c-fact { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--c-abyss); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  .c-fact p { color: var(--c-ink); max-width: 70ch; }
  .c-fact__date { padding-top: var(--s-3); border-top: var(--hair) solid var(--c-line); }

  /* ---- What I'm Really Good At: one treatment per group */
  .c-good { display: grid; gap: var(--s-4); min-width: 0; }
  .c-good .c-good__h { color: var(--practice); font-size: var(--fs-h4); }
  /* 01: pull-quote on an accent rule */
  .c-good--quote { padding: var(--s-5) 0 var(--s-5) var(--s-6); border-left: 4px solid var(--practice); }
  .c-good--quote blockquote p { max-width: 46ch; color: var(--c-ink); font-size: clamp(1.25rem, 1.05rem + .85vw, 1.625rem); line-height: 1.38; font-weight: 560; letter-spacing: -.01em; }
  .c-good--quote.c-good--v2 { padding: var(--s-5) 0 0; border-left: 0; border-top: 4px solid var(--practice); }
  .c-good--quote.c-good--v3 { padding: var(--s-6); background: rgb(255 90 60 / .07); }
  /* 02: split image and text card */
  .c-good--split { gap: 0; overflow: hidden; background: var(--c-abyss); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  .c-good__media { min-height: 12rem; }
  .c-good__media picture, .c-good__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .c-good__copy { display: grid; gap: var(--s-3); align-content: center; padding: var(--s-5); }
  .c-good__copy p { color: var(--c-ink); }
  @media (min-width: 48rem) {
    .c-good--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .c-good--split.c-good--v2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .c-good--split.c-good--v2 .c-good__media { order: 2; }
  }
  /* 03: stat band */
  .c-good--band { padding: var(--s-5); background: linear-gradient(180deg, rgb(255 90 60 / .1), transparent 70%), var(--c-abyss); border-top: 2px solid var(--practice); border-radius: 0 0 var(--r-2) var(--r-2); }
  .c-good--band > p { color: var(--c-ink); max-width: 70ch; }
  .c-good__stats { display: grid; gap: var(--s-4); list-style: none; padding: 0; }
  @media (min-width: 40rem) { .c-good__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .c-good__stats li { display: grid; gap: var(--s-1); align-content: start; max-width: none; padding-left: var(--s-3); border-left: 2px solid var(--c-line); }
  .c-good__v { color: var(--c-ink); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); line-height: 1.05; font-weight: 800; font-variation-settings: "SHRP" 100; letter-spacing: -.03em; }
  .c-good__l { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.35; }
  .c-good--v2 .c-good__stats li { border-left-color: var(--practice); }
  /* 04: checklist on a depth track */
  .c-good--check { padding-top: var(--s-5); border-top: var(--hair) solid var(--c-line); }
  .c-good__checks { position: relative; display: grid; gap: var(--s-3); list-style: none; padding: 0 0 0 1.5rem; }
  .c-good__checks::before { content: ""; position: absolute; left: 0; top: .5em; bottom: .5em; width: 1px; background: var(--c-line); }
  .c-good__checks li { position: relative; max-width: 70ch; color: var(--c-ink); }
  .c-good__checks li::before { content: ""; position: absolute; left: -1.5rem; top: .32em; border-block: .4rem solid transparent; border-left: .65rem solid var(--practice); }

  /* ---- Tabs (About) */
  .c-page-head--tabs { padding-block: var(--s-8) var(--s-6); border-bottom: 0; }
  .c-tabs { position: sticky; top: 4rem; z-index: 40; background: rgb(0 0 0 / .94); border-block: var(--hair) solid var(--c-grid); }
  .c-tabs__list { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
  .c-tabs__list::-webkit-scrollbar { display: none; }
  .c-tabs__list li { flex: none; max-width: none; }
  .c-tabs__list a { display: inline-flex; align-items: center; gap: .35em; min-height: 3rem; padding: 0 var(--s-4); background-image: none; border-bottom: 3px solid transparent; color: var(--c-ink-2); font-weight: 620; white-space: nowrap; transition: color var(--t-micro) linear, border-color var(--t-ui) var(--ease-out); }
  .c-tabs__list a:hover { color: var(--c-ink); }
  .c-tabs__list a[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--practice); }
  .c-tabs__list a:focus-visible { outline-offset: -3px; }
  .c-tabs__note { color: var(--c-ink-3); font-weight: 400; font-size: var(--fs-sm); }
  .c-tabpanel { scroll-margin-top: 3rem; }
  .c-tabpanel > .l-section + .l-section, .c-tabpanel > .c-orangebar + .l-section { margin-top: var(--s-7); }
  .c-tabpanel:focus { outline: none; }
  .c-family { padding-block: var(--s-6); }
  .c-family .c-fig img { width: 100%; }

  /* ---- Career timeline: a time-scaled log. One column per year from 2004 to 2025, then a wider 2026 for the recent
     moves. Base rules give the vertical phone version; the container query turns on the horizontal log. */
  .c-tl { container: tl / inline-size; }
  .c-tl__inner { display: grid; gap: var(--s-6); }
  .c-tl__axis { display: none; }
  .c-tl__lane h3 { margin-bottom: var(--s-3); color: var(--c-ink-2); font-size: var(--fs-sm); font-weight: 650; letter-spacing: 0; }
  .c-tl__row, .c-tl__stack { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
  .c-tl__row li, .c-tl__stack li { position: relative; max-width: none; padding-left: 1.75rem; }
  .c-tl__text { display: block; color: var(--c-ink); line-height: 1.4; }
  .c-tl__text time { display: block; color: var(--c-ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .c-tl__text small { display: block; color: var(--c-ink-2); }
  .c-tl__bar { position: absolute; left: .25rem; top: .25rem; bottom: .25rem; width: .625rem; border-radius: 2px; background: var(--bar, var(--c-line)); }
  .c-tl__pick { position: absolute; left: .25rem; top: .55em; border-block: .45rem solid transparent; border-left: .75rem solid var(--bar, var(--ramp-5)); }
  .c-tl--edu { --bar: var(--c-ink-3); } .c-tl--early { --bar: var(--ramp-5); }
  .c-tl--bp1 { --bar: var(--ramp-2); } .c-tl--bp2 { --bar: #6D97FF; } .c-tl--bp3 { --bar: var(--ramp-3); }
  .c-tl__stack--end .c-tl__mark { --bar: var(--c-copper); }
  .c-tl__mark--now { --bar: var(--practice) !important; padding: var(--s-3) var(--s-4) var(--s-3) 2.25rem !important; border: 2px dashed var(--practice); border-radius: var(--r-2); background: rgb(255 90 60 / .08); }
  .c-tl__mark--now .c-tl__pick { left: .75rem; top: calc(var(--s-3) + .55em); }
  .c-tl__nowlabel { display: inline-block; margin-bottom: var(--s-1); padding: 0 var(--s-2); background: var(--practice); border-radius: var(--r-1); color: #000; font-size: var(--fs-sm); font-weight: 700; }
  @container tl (min-width: 54rem) {
    .c-tl__inner { --yr: calc(100cqw / 29); position: relative; gap: var(--s-5); padding-top: 2rem; background: linear-gradient(var(--c-line), var(--c-line)) calc(var(--yr) * 22) 0 / 1px 100% no-repeat, repeating-linear-gradient(90deg, var(--c-grid) 0 1px, transparent 1px calc(var(--yr) * 4)) 0 0 / calc(var(--yr) * 22) 100% no-repeat; }
    .c-tl__axis { display: block; position: absolute; inset: 0 0 auto 0; height: 1.5rem; }
    .c-tl__axis span { position: absolute; left: calc(var(--s) * var(--yr)); padding-left: .3rem; color: var(--c-ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; background: var(--c-axis-ground, transparent); }
    .c-tl__lane { position: relative; }
    .c-tl__lane h3 { margin-bottom: var(--s-2); padding-left: .3rem; }
    .c-tl__row { display: flex; align-items: flex-start; gap: 0; }
    .c-tl__row li { flex: none; padding-left: 0; }
    .c-tl__row li:first-child { margin-left: calc(var(--s) * var(--yr)); }
    .c-tl__row .c-tl__span { width: calc(var(--w) * var(--yr)); }
    .c-tl__bar { position: static; display: block; width: 100%; height: 1.25rem; margin-bottom: var(--s-2); border-radius: 0; border-right: 1px solid var(--c-void); }
    .c-tl__row .c-tl__text { width: max(100%, 11.5rem); padding: 0 var(--s-2) 0 .3rem; font-size: .9375rem; }
    :is(.c-tl--bp2, .c-tl--bp3) .c-tl__text { width: 100%; }   /* touching bars: each label stays inside its own */
    .c-tl__span--rtl .c-tl__text { position: relative; left: 100%; width: 13.5rem; margin-left: -13.5rem; padding: 0 var(--s-3) 0 0; text-align: right; }
    .c-tl__stack { gap: var(--s-2); }
    .c-tl__stack li { display: flex; align-items: center; gap: var(--s-2); margin-left: calc(var(--s) * var(--yr)); padding-left: 0; }
    .c-tl__stack .c-tl__bar { flex: none; width: calc(var(--w) * var(--yr)); height: .875rem; margin: 0; }
    .c-tl__stack .c-tl__pick { position: static; flex: none; }
    .c-tl__stack .c-tl__text { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); align-items: baseline; font-size: .9375rem; }
    .c-tl__stack--end { margin-left: calc(22 * var(--yr)); }
    .c-tl__stack--end li { margin-left: 0; padding-left: .5rem; align-items: flex-start; }
    .c-tl__stack--end .c-tl__pick { margin-top: .3rem; }
    .c-tl__stack--end .c-tl__text { display: block; font-size: .875rem; }
    .c-tl__mark--now { margin-left: .5rem !important; padding: var(--s-3) !important; gap: var(--s-2) !important; }
    .c-tl__lane--now h3 { position: absolute; left: 0; top: 0; }
  }
  .s-0 { --s: 0; } .s-4 { --s: 4; } .s-5 { --s: 5; } .s-6 { --s: 6; } .s-7 { --s: 7; } .s-8 { --s: 8; } .s-9 { --s: 9; }
  .s-12 { --s: 12; } .s-16 { --s: 16; } .s-17 { --s: 17; } .s-20 { --s: 20; } .s-22 { --s: 22; }
  .w-2 { --w: 2; } .w-3 { --w: 3; } .w-5 { --w: 5; } .w-7 { --w: 7; }
  .c-beyond { display: grid; gap: var(--s-4); }
  .c-beyond h3 { font-size: var(--fs-h3); }
  .c-beyond__cards { display: grid; gap: var(--s-4); }
  .c-beyond__cards p { max-width: none; padding: var(--s-5); background: var(--c-abyss); border: var(--hair) solid var(--c-grid); border-left: 2px solid var(--practice); border-radius: 0 var(--r-2) var(--r-2) 0; color: var(--c-ink); }
  @media (min-width: 64rem) { .c-beyond__cards { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }

  /* ---- A New Chapter and the orange bar */
  .c-chapter__inner { display: grid; gap: var(--s-6); align-items: center; }
  .c-chapter__text { color: var(--c-ink); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
  @media (min-width: 64rem) { .c-chapter__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); } }
  .c-orangebar { background: var(--c-copper); color: #000; }
  .c-orangebar__inner { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-5); }
  .c-orangebar svg { flex: none; width: 2rem; height: 2rem; }
  .c-orangebar p { max-width: none; color: #000; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); font-weight: 620; line-height: 1.35; }

  /* ---- Thesis: a map sheet with a neatline, contour lines and mono figure labels */
  .c-sheet { position: relative; padding-block: var(--s-8); color: #C7D0DA; background: url("/assets/img/contours.svg") center / 140% auto no-repeat, repeating-linear-gradient(45deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 11px), repeating-linear-gradient(-45deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 11px), var(--c-slate); }
  .c-sheet::before { content: ""; position: absolute; inset: var(--s-2); border: var(--hair) solid rgb(243 245 248 / .28); pointer-events: none; }
  .c-sheet__inner { position: relative; display: grid; gap: var(--s-7); }
  .c-sheet__head { display: grid; gap: var(--s-4); }
  .c-sheet__eyebrow, .c-sheet__label { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; color: #E9B48D; }
  .c-sheet h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); max-width: 20ch; line-height: 1.06; letter-spacing: var(--track-display); }
  .c-sheet__hook { max-width: 52ch; color: var(--c-ink); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.4; }
  .c-sheet__dl { max-width: none; }
  .c-dl { min-height: 3.25rem; }
  .c-dl svg { width: 1.375rem; height: 1.375rem; }
  .c-dl__size { font-weight: 500; font-size: var(--fs-sm); color: #27313C; }
  .c-sheet__body { display: grid; gap: var(--s-6); }
  .c-sheet__body > p { max-width: 72ch; color: #DCE3EA; }
  .c-sheet__takeaways { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
  .c-sheet__takeaways li { position: relative; max-width: none; padding-left: 1.5rem; color: var(--c-ink); }
  .c-sheet__takeaways li::before { content: ""; position: absolute; left: 0; top: .35em; border-block: .4rem solid transparent; border-left: .65rem solid #E9B48D; }
  @media (min-width: 64rem) { .c-sheet__body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); } }
  .c-sheet__gallery { display: grid; gap: var(--s-6) var(--s-5); }
  .c-sheet__fig { display: grid; gap: var(--s-3); align-content: start; margin: 0; min-width: 0; }
  .c-sheet__fig a { display: block; padding: var(--s-2); background: #fff; background-image: none; border-radius: var(--r-1); transition: box-shadow var(--t-ui) var(--ease-out); }
  .c-sheet__fig a:hover { box-shadow: 0 0 0 2px #E9B48D; }
  .c-sheet__fig img { width: 100%; height: auto; }
  .c-sheet__fig figcaption { max-width: 62ch; color: #DCE3EA; font-size: var(--fs-sm); line-height: 1.5; }
  .c-sheet__label { display: block; margin-bottom: var(--s-1); }
  @media (min-width: 48rem) { .c-sheet__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-sheet__fig--lead { grid-column: 1 / -1; } }

  /* ---- Lightbox */
  .c-lightbox { width: min(96vw, 80rem); max-width: none; max-height: 96dvh; padding: var(--s-4); background: #05090F; color: var(--c-ink); border: var(--hair) solid var(--c-line); border-radius: var(--r-2); }
  .c-lightbox::backdrop { background: rgb(0 0 0 / .86); }
  .c-lightbox[open] { display: grid; gap: var(--s-3); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .c-lightbox__bar, .c-lightbox__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .c-lightbox__count { color: var(--c-ink-2); font-size: var(--fs-sm); }
  .c-lightbox__stage { display: grid; place-items: center; min-height: 0; overflow: auto; }
  .c-lightbox__stage img { max-width: 100%; max-height: 70dvh; width: auto; height: auto; background: #fff; touch-action: pinch-zoom; }
  .c-lightbox__cap { max-width: 80ch; color: var(--c-ink-2); font-size: var(--fs-sm); }
  html.is-locked { overflow: hidden; }

  /* ---- Media tab and Away from the Rocks */
  .c-soon .l-container { max-width: 44rem; margin-inline: auto; }
  .c-away__copy { max-width: 62ch; color: var(--c-ink); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); }
  .c-away__lot .c-fig img { width: 100%; }
  .c-away__pair { display: grid; gap: var(--s-5); }
  @media (min-width: 48rem) { .c-away__pair { grid-template-columns: minmax(0, 380fr) minmax(0, 490fr); max-width: 56rem; align-items: start; } }

  /* ---- AI Solutions: every section its own ground */
  .c-long--ai { padding-inline: var(--gutter); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; width: 100%; }
  .c-ai { display: grid; gap: var(--s-6); min-width: 0; padding: var(--s-5); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  @media (min-width: 48rem) { .c-ai { padding: var(--s-7) var(--s-6); } }
  .c-ai h2 { font-size: var(--fs-h2); }
  .c-ai__head { display: grid; gap: var(--s-3); }
  .c-ai--intro { background: radial-gradient(55% 75% at 78% 30%, rgb(77 141 255 / .14), transparent 70%), url("/assets/img/ai/ai-traces-bg.svg") center / cover no-repeat, var(--c-void); }
  .c-ai--intro h1 { font-size: var(--fs-h1); }
  .c-ai__intro { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 72rem) { .c-ai__intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
  .c-ai .c-trio h2 { font-size: var(--fs-h4); }
  .c-ai .c-trio { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 72rem) { .c-ai .c-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }

  /* The NOVA section: two identical thumbnails, then the slides as real text. */
  .c-nova { background: var(--c-console); gap: var(--s-7); }
  .c-nova__kicker { color: var(--c-ink-2); font-size: var(--fs-sm); max-width: none; }
  .c-nova__lead { color: var(--c-ink); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); line-height: 1.25; font-weight: 640; max-width: 34ch; letter-spacing: -.01em; }
  .c-nova__slides { display: grid; gap: var(--s-4); max-width: 44rem; }
  @media (min-width: 48rem) { .c-nova__slides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-nova__slide { display: grid; gap: var(--s-2); margin: 0; min-width: 0; }
  .c-nova__slide a { display: block; aspect-ratio: 16 / 10; padding: var(--s-1); background: #fff; background-image: none; border-radius: var(--r-2); transition: box-shadow var(--t-ui) var(--ease-out); }
  .c-nova__slide a:hover { box-shadow: var(--glow); }
  .c-nova__slide img { width: 100%; height: 100%; object-fit: contain; }
  .c-nova__slide figcaption { color: var(--c-ink-2); font-size: var(--fs-sm); }
  .c-nova__block { display: grid; gap: var(--s-4); }
  .c-nova__block h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); max-width: 40ch; line-height: 1.2; }
  .c-nova__questions { display: grid; gap: var(--s-3); padding-left: 1.5rem; color: var(--c-ink); list-style: decimal; }
  .c-nova__questions li::marker { color: var(--c-trough); font-weight: 700; }
  .c-timing { display: grid; margin: 0; border: var(--hair) solid var(--c-line); border-radius: var(--r-2); background: var(--c-void); }
  .c-timing > div { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); }
  .c-timing > div + div { border-top: var(--hair) solid var(--c-grid); }
  .c-timing dt { color: var(--c-ink-2); font-size: var(--fs-sm); }
  .c-timing dd { margin: 0; color: var(--c-ink); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .c-timing__last dd { color: var(--c-onair); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 650; font-style: italic; letter-spacing: -.01em; }
  @media (min-width: 40rem) { .c-timing > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s-4); } }
  .c-nova__side { color: var(--c-ink); font-weight: 600; }
  .c-nova__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
  .c-nova__chips li { max-width: none; padding: var(--s-2) var(--s-4); background: rgb(77 141 255 / .1); border: var(--hair) solid rgb(77 141 255 / .45); border-radius: 999px; color: var(--c-ink); font-size: var(--fs-sm); line-height: 1.35; }
  .c-nova__quotes { display: grid; gap: var(--s-4); }
  @media (min-width: 48rem) { .c-nova__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-nova__quotes blockquote { margin: 0; padding-left: var(--s-4); border-left: 2px solid var(--c-trough); }
  .c-nova__quotes p { color: var(--c-ink); line-height: 1.45; }
  .c-nova__close { max-width: 34ch; padding: var(--s-5) 0 0; border-top: 2px solid var(--c-trough); color: var(--c-ink); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
  .c-nova__evidence { max-width: 76ch; color: var(--c-ink-2); font-size: var(--fs-sm); }

  .c-neuro { background: linear-gradient(135deg, rgb(95 227 208 / .08), transparent 55%), var(--c-abyss); }
  .c-neuro__cards { display: grid; gap: var(--s-4); }
  @media (min-width: 40rem) { .c-neuro__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-neuro__card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); background: var(--c-console); border: var(--hair) solid var(--c-grid); border-top: 2px solid var(--c-phosphor); border-radius: var(--r-2); }
  .c-neuro__card p { color: var(--c-ink); }
  .c-neuro__stat { color: var(--c-ink-2) !important; font-size: var(--fs-sm); }
  .c-neuro__stat span { display: block; color: var(--c-ink); font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
  .c-neuro__role { max-width: 62ch; color: var(--c-ink); }
  .c-neuro__fig { display: grid; gap: var(--s-2); margin: 0; max-width: 44rem; }
  .c-neuro__fig a { display: block; background-image: none; }
  .c-neuro__fig img { width: 100%; height: auto; border-radius: var(--r-2); }
  .c-neuro__fig figcaption { color: var(--c-ink-3); font-size: var(--fs-sm); }

  .c-resell { background: var(--c-void); }
  .c-resell__top { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 72rem) { .c-resell__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .c-resell__h { font-size: var(--fs-h3); }
  .c-partner-cards h4 { font-size: var(--fs-h4); }
  .c-partner-card { gap: var(--s-3); padding: var(--s-5); }
  .c-partner-card .c-logo-plate { min-width: 0; width: 100%; max-width: 14rem; }
  .c-partner-card__badge { color: var(--c-ink-2); font-size: var(--fs-sm); }
  .c-partner-stat { color: var(--c-ink-2); font-size: var(--fs-sm); }
  .c-partner-stat__v { display: block; color: var(--c-ink); font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
  .c-partner-card__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-sm); }
  .c-partner-cards--one { grid-template-columns: minmax(0, 1fr) !important; }
  .c-more summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; color: var(--c-ink); font-weight: 620; cursor: pointer; }
  .c-more summary::-webkit-details-marker { display: none; }
  .c-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: var(--hair) solid var(--c-line); border-radius: var(--r-1); font-size: .875rem; line-height: 1; }
  .c-more[open] summary::before { content: "\2212"; }
  .c-more__body { display: grid; gap: var(--s-3); padding-top: var(--s-2); font-size: var(--fs-sm); }
  .c-more__body h5 { margin: var(--s-2) 0 0; color: var(--c-ink); font-size: 1rem; font-weight: 650; }
  .c-foundation { display: grid; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-2); }
  .c-foundation__grid { display: grid; gap: var(--s-5); align-items: start; }
  @media (min-width: 72rem) { .c-foundation__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .c-how { background: radial-gradient(60% 80% at 85% 10%, rgb(77 141 255 / .13), transparent 70%), #06101E; }
  .c-match { display: grid; gap: var(--s-2); list-style: none; padding: 0; counter-reset: match; }
  .c-match li { position: relative; max-width: none; padding: var(--s-3) var(--s-4) var(--s-3) 3.25rem; background: var(--c-console); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); color: var(--c-ink-2); font-size: .9375rem; line-height: 1.4; counter-increment: match; }
  .c-match li::before { content: counter(match); position: absolute; left: var(--s-4); top: var(--s-3); color: var(--practice); font-size: 1.5rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
  .c-match li.is-test { border-color: var(--practice); }
  .c-match strong { display: block; color: var(--c-ink); font-size: 1.125rem; font-weight: 700; }
  .c-match strong::first-letter { color: var(--c-trough); }
  @media (min-width: 72rem) {
    .c-match { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr); }
    .c-match li { padding: var(--s-4); }
    .c-match li::before { position: static; display: block; margin-bottom: var(--s-2); font-size: 2rem; }
  }
  .c-ways2 { display: grid; gap: var(--s-4); list-style: none; padding: 0; }
  @media (min-width: 40rem) { .c-ways2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .c-way2 { display: grid; gap: var(--s-3); align-content: start; max-width: none; padding: var(--s-5); background: var(--c-console); border: var(--hair) solid var(--c-grid); border-radius: var(--r-2); }
  .c-way2 h4 { font-size: var(--fs-h4); }
  .c-way2__price { color: var(--c-ink-2); font-size: var(--fs-sm); }
  .c-way2__price span { display: block; color: var(--c-ink); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

  .c-talks { background: var(--c-abyss); }
  .c-talks__grid { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 72rem) { .c-talks__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
  .c-talks__list { display: grid; list-style: none; padding: 0; border-top: var(--hair) solid var(--c-grid); }
  .c-talks__list li { display: grid; gap: var(--s-1); max-width: none; padding: var(--s-3) 0; border-bottom: var(--hair) solid var(--c-grid); }
  .c-talks__list em { display: block; font-size: var(--fs-sm); color: var(--c-ink-2); }
  .c-talks .c-fig { max-width: 18rem; }
}

/* ---------------------------------------------------------------- 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); }
}