/* Inter is named first in --font-sans but was never loaded: no @font-face, no
   font files, and font-src 'self' would have blocked an external one anyway.
   Every visitor saw Helvetica or Arial instead, with display tracking tuned
   for Inter's metrics applied to a different face.

   Variable, not static instances: the stylesheet uses weights 540 and 650,
   which no static cut provides. Self-hosted, so font-src 'self' is unchanged. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --canvas: #f3f0e9;
  --canvas-deep: #ebe7de;
  --paper: #fffefa;
  --paper-cool: #f8f9f7;
  --ink: #1d1d19;
  --ink-soft: #585a55;
  --ink-faint: #676963;
  --line: #d9d5cc;
  --line-strong: #bdb8ae;
  --signal: #087f9a;
  --signal-soft: #e4f3f5;
  /* --signal is only 4.09:1 on its own tint; text on signal grounds uses this. */
  --signal-ink: #066377;
  --healthy: #2f7551;
  --healthy-soft: #eaf4ee;
  /* --healthy lands on exactly 4.50 against --canvas-deep, which rounds the
     wrong way. Text on the deeper grounds uses this, the same split as
     --review-ink. */
  --healthy-ink: #2a6a49;
  --review: #976315;
  --review-soft: #fbf1da;
  --failure: #aa4636;
  --failure-soft: #fae9e5;

  /* Inverted surfaces. Six near-identical greys were each doing one job on the
     ink sections; collapsed to a soft/muted/faint ramp, all clearing AA on ink
     (11.5:1, 6.4:1, 4.8:1). */
  --ink-raised: #34342f;
  --ink-line: #3a3a35;
  --on-ink-soft: #d4d5d0;
  --on-ink-muted: #9ea09a;
  --on-ink-faint: #878983;

  /* Attention family. --review is too light on the deeper amber grounds
     (3.89:1), so text on those uses --review-ink instead. */
  --review-tint: #fdfbf5;
  --review-line: #decda8;
  --review-strong: #f4dfad;
  --review-strong-hover: #f7e9c8;
  --review-ink: #65430d;

  /* 8px spacing rhythm. Section gaps come off the top of the scale. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Display ramp. Tracking tightens as size grows so headings stay optically
     even from 20px to 82px. */
  --d1: clamp(38px, 5.4vw, 74px);
  --d2: clamp(28px, 4vw, 56px);
  --d3: clamp(22px, 3vw, 40px);
  --d4: clamp(20px, 2vw, 28px);
  --d5: clamp(18px, 1.55vw, 22px);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation: four warm-tinted steps. Hairlines do the structural work; these
     lift only a surface that is genuinely floating above the canvas. */
  --elev-1: 0 1px 2px rgba(39, 37, 31, .05);
  --elev-2: 0 2px 5px rgba(39, 37, 31, .05), 0 1px 2px rgba(39, 37, 31, .04);
  --elev-3: 0 8px 24px rgba(39, 37, 31, .06), 0 2px 6px rgba(39, 37, 31, .04);
  --elev-4: 0 18px 55px rgba(39, 37, 31, .09), 0 3px 9px rgba(39, 37, 31, .05);
  --shadow-soft: var(--elev-4);

  /* Type scale. The floor is 10px and reserved for mono metadata; body data
     surfaces sit at 12-13px so a product view reads as designed, not shrunk. */
  --t-meta: 12px;
  --t-micro: 13px;
  --t-small: 15px;
  --t-data: 16px;
  --t-base: 15px;
  --t-body: 16px;
  --t-lede: 18px;

  --max-width: 1440px;
  --font-sans: Inter, "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
}

/* @generated spring tokens: begin. Source: scripts/motion/springs.mjs. Do not edit by hand; run `npm run motion:springs`. */
:root {
  /* press: damping 0.8, response 0.18s, overshoot 1.5%. button press and release. */
  --spring-press-dur: 270ms;
  --spring-press: cubic-bezier(0.332, 0.688, 0, 1.118);
  /* snappy: damping 0.82, response 0.3s, overshoot 1.1%. hover and focus nudges, plus signs, arrows. */
  --spring-snappy-dur: 440ms;
  --spring-snappy: cubic-bezier(0.333, 0.735, 0.061, 1.107);
  /* fade: damping 1, response 0.24s, overshoot 0%. colour, border, shadow and opacity changes. */
  --spring-fade-dur: 360ms;
  --spring-fade: cubic-bezier(0.265, 0.474, 0.085, 1.069);
  /* settle: damping 1, response 0.45s, overshoot 0%. entrances: hero, reveals, panels, disclosures. */
  --spring-settle-dur: 670ms;
  --spring-settle: cubic-bezier(0.264, 0.465, 0.086, 1.068);
  /* gentle: damping 0.92, response 0.7s, overshoot 0.1%. drawn lines, washes, connectors. */
  --spring-gentle-dur: 950ms;
  --spring-gentle: cubic-bezier(0.279, 0.448, 0.096, 1.098);
  /* land: damping 0.74, response 0.42s, overshoot 3.2%. the one moment that lands: a status tag. */
  --spring-land-dur: 660ms;
  --spring-land: cubic-bezier(0.372, 0.969, 0, 1.084);
  /* glide: damping 1, response 1.4s, overshoot 0%. travelling diagram arrows coming to rest. */
  --spring-glide-dur: 2060ms;
  --spring-glide: cubic-bezier(0.263, 0.453, 0.089, 1.068);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-press: linear(0, 0.0061 1.21%, 0.0245 2.5%, 0.0559 3.92%, 0.1003 5.46%, 0.1436 6.75%, 0.197 8.21%, 0.4334 14.21%, 0.5392 17.04%, 0.6413 20.08%, 0.726 23%, 0.7972 25.92%, 0.8569 28.92%, 0.9051 32%, 0.9439 35.29%, 0.972 38.63%, 0.9925 42.25%, 1.0061 46.29%, 1.0134 50.96%, 1.0148 58%, 1.0033 80.75%, 1);
    --spring-snappy: linear(0, 0.0058 1.21%, 0.0241 2.54%, 0.0544 3.96%, 0.0972 5.5%, 0.1402 6.83%, 0.1931 8.33%, 0.4256 14.46%, 0.5305 17.38%, 0.6302 20.46%, 0.7144 23.46%, 0.7853 26.46%, 0.8442 29.5%, 0.8929 32.67%, 0.9323 36.04%, 0.9623 39.58%, 0.9844 43.46%, 0.9994 47.75%, 1.008 52.71%, 1.0109 61.67%, 1);
    --spring-fade: linear(0, 0.0049 1.08%, 0.0202 2.29%, 0.0457 3.58%, 0.0816 5%, 0.1596 7.54%, 0.3647 13.54%, 0.463 16.58%, 0.5586 19.88%, 0.6394 23.08%, 0.7098 26.38%, 0.7696 29.75%, 0.8205 33.29%, 0.8636 37.08%, 0.9017 41.5%, 0.9321 46.38%, 0.9555 51.83%, 0.9728 58.04%, 0.9844 64.96%, 0.9921 73.33%, 1);
    --spring-settle: linear(0, 0.0048 1.08%, 0.0199 2.29%, 0.0451 3.58%, 0.0817 5.04%, 0.1604 7.63%, 0.3655 13.67%, 0.4631 16.71%, 0.558 20%, 0.6383 23.21%, 0.7084 26.5%, 0.768 29.88%, 0.8194 33.46%, 0.8625 37.25%, 0.901 41.71%, 0.9314 46.58%, 0.9549 52.04%, 0.9723 58.25%, 0.984 65.17%, 0.9919 73.5%, 1);
    --spring-gentle: linear(0, 0.0053 1.25%, 0.0219 2.63%, 0.0499 4.13%, 0.0892 5.75%, 0.1747 8.67%, 0.3873 15.17%, 0.4867 18.38%, 0.5812 21.75%, 0.6617 25.04%, 0.7296 28.29%, 0.7885 31.67%, 0.8378 35.13%, 0.8793 38.79%, 0.9163 43.08%, 0.9452 47.75%, 0.967 52.96%, 0.9825 58.92%, 0.9922 65.5%, 0.9978 73.63%, 1);
    --spring-land: linear(0, 0.0067 1.21%, 0.0261 2.46%, 0.0592 3.83%, 0.1063 5.33%, 0.152 6.58%, 0.2105 8.04%, 0.4591 13.79%, 0.57 16.5%, 0.6741 19.33%, 0.7601 22.04%, 0.8331 24.79%, 0.8927 27.58%, 0.9409 30.5%, 0.9775 33.54%, 1.0007 36.29%, 1.0172 39.29%, 1.0273 42.58%, 1.0314 46.29%, 1.0291 51.75%, 1.0108 66.21%, 1.0032 75.13%, 0.9994 86.71%, 1);
    --spring-glide: linear(0, 0.005 1.13%, 0.0202 2.33%, 0.0451 3.62%, 0.0812 5.08%, 0.1602 7.71%, 0.3643 13.79%, 0.4621 16.88%, 0.5561 20.17%, 0.6368 23.42%, 0.7063 26.71%, 0.7664 30.13%, 0.8176 33.71%, 0.8606 37.5%, 0.8992 41.96%, 0.9298 46.83%, 0.9536 52.29%, 0.9714 58.54%, 0.9834 65.46%, 0.9915 73.75%, 1);
  }
}
/* @generated spring tokens: end */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "cv05" 1; }
body.nav-open { overflow: hidden; }
/* Scroll chaining would move the page behind the open menu. */
.nav-cluster.is-open { overscroll-behavior: contain; }

/* Paper grain. A single inline SVG turbulence at very low alpha, so the warm
   canvas reads as a surface rather than a flat fill. No external asset. */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .34; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); }
body > * { position: relative; z-index: 1; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button, a, summary, [role="tab"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
p,
h1, h2, h3,
dl,
dd { margin-top: 0; }
section[id], article[id] { scroll-margin-top: 86px; }
.shell, .wrap {
  /* Proportional gutters rather than a fixed 48px. A fixed pad is 4% of a
     1260 window and 3% of a 1680 one, so content crept toward the edges as
     the window narrowed. 86% holds the same margin at every width. */
  width: min(82%, var(--max-width));
  margin-inline: auto;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.mono { font-family: var(--font-mono); letter-spacing: .055em; font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Every figure on the page aligns in its column, not just the two data grids. */
.chapter-number,
.work-number,
.availability-index,
.issue-index,
.proposal-details dd,
.evidence-row b,
.activity-list li > span,
.hero-boundaries dd,
.footer-base { font-variant-numeric: tabular-nums; }

.skip-link { position: fixed; z-index: 1000; left: 12px; top: 10px; transform: translateY(-150%); background: var(--ink); color: white; padding: 12px 14px; border-radius: var(--radius-xs); text-decoration: none; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 17px; font-size: 13px; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: var(--elev-1); transition: transform var(--spring-snappy-dur) var(--spring-snappy), background-color var(--spring-fade-dur) var(--spring-fade), border-color var(--spring-fade-dur) var(--spring-fade), box-shadow var(--spring-fade-dur) var(--spring-fade); }
.button:hover { transform: translateY(-1px); box-shadow: var(--elev-3); }
.button:active { transform: translateY(0); box-shadow: var(--elev-1); transition-duration: var(--spring-press-dur); transition-timing-function: var(--spring-press); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: var(--ink-raised); }
.button-light { background: var(--paper); border-color: var(--line-strong); color: var(--ink); }
.button-light:hover { border-color: var(--ink); }
.button-paper { background: var(--paper); color: var(--ink); }
.button-paper:hover { background: var(--canvas); }
/* The arrow leans into its own direction of travel on hover. */
.glyph { display: inline-block; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
:hover > .glyph { transform: translate(2px, -2px); }
:hover > .glyph-down { transform: translate(0, 3px); }
:hover > .glyph-right { transform: translate(3px, 0); }
.text-link:hover { color: var(--signal); }
.button-text { min-height: 44px; padding-inline: 4px; color: var(--ink-soft); border-radius: 0; }
.button-text:hover { color: var(--ink); }
.text-link { display: inline-flex; gap: 11px; align-items: center; min-height: 44px; color: var(--ink); font-weight: 650; text-underline-offset: 5px; }

/* Header */
.site-header { position: sticky; z-index: 100; top: 0; background: rgba(243, 240, 233, .9); border-bottom: 1px solid transparent; backdrop-filter: blur(16px); transition: border-color var(--spring-fade-dur) var(--spring-fade), background-color var(--spring-fade-dur) var(--spring-fade); }
.site-header.is-scrolled { border-color: var(--line); background: rgba(255, 254, 250, .94); }
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: 17px; font-weight: 700; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { width: 27px; height: 27px; }
/* Geometry traced from the Logo2 master: ink bbox 702x731, perpendicular stroke
   ~85px (11.6% of height). Butt caps and chunkier segments are what separate this
   from the earlier hairline drawing. The dashed leg still reads spec-vs-built. */
/* The real mark is a filled glyph, not three strokes. Its paths inherit
   currentColor, so each surface sets `color` rather than restyling geometry. */
.brand-mark { color: var(--ink); }
.brand-mark path { fill: currentColor; }
.brand-divider { height: 25px; width: 1px; background: var(--line-strong); }
.nav-cluster { display: flex; align-items: center; gap: 28px; }
.site-nav { display: flex; align-items: center; gap: 27px; }
.site-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-soft); font-size: 13px; text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.nowrap { white-space: nowrap; }
/* Display type breaks at any hyphen, so a compound like "30-minute" splits across
   lines. Balance evens the ragged edge; .nowrap keeps compounds whole. */
.legal-wrap h1 { text-wrap: balance; }
.header-cta { white-space: nowrap; }
.nav-toggle { display: none; min-width: 48px; min-height: 44px; border: 0; padding: 7px 0 7px 10px; color: var(--ink); background: transparent; align-items: center; justify-content: flex-end; gap: 9px; cursor: pointer; }
.nav-toggle-label { font-size: 16px; font-weight: 650; }
.nav-toggle-icon { width: 18px; display: grid; gap: 5px; }
.nav-toggle-icon i { display: block; height: 1px; background: currentColor; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-grid, .final-grid { position: absolute; inset: 0; pointer-events: none; opacity: .72; background-image: linear-gradient(to right, rgba(189, 184, 174, .42) 1px, transparent 1px), linear-gradient(to bottom, rgba(189, 184, 174, .34) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, black 0%, black 62%, transparent 100%); }
.hero-layout { position: relative; display: grid; grid-template-columns: minmax(0, .93fr) minmax(540px, 1.07fr); align-items: center; gap: var(--space-8); min-height: 700px; padding-block: 78px 80px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .section-label, .chapter-number { font-family: var(--font-mono); font-size: 13px; letter-spacing: .075em; text-transform: uppercase; }
.hero h1 { max-width: 720px; margin-bottom: var(--space-5); font-size: var(--d1); line-height: .96; letter-spacing: -.052em; font-weight: 540; }
.hero h1 em { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 1.03em; font-style: normal; font-weight: 400; letter-spacing: -.055em; }
.hero-lede { max-width: 650px; margin-bottom: 29px; color: var(--ink-soft); font-size: 17px; line-height: 1.62; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.hero-boundaries { display: grid; grid-template-columns: repeat(3, 1fr); margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.hero-boundaries div { padding-right: 15px; }
.hero-boundaries dt { margin-bottom: 4px; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; }
.hero-boundaries dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.35; }

/* Product artifact */
.product-stage { position: relative; z-index: 2; }
.product-label { display: flex; justify-content: space-between; margin: 0 8px 10px; color: var(--ink-faint); font-size: var(--t-meta); text-transform: uppercase; }
.product-window { overflow: hidden; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--elev-4); }
.window-bar, .surface-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.window-bar { min-height: 50px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: var(--t-data); }
.window-brand { font-weight: 700; }
.window-brand b { color: var(--ink-faint); font-weight: 540; }
.window-period { color: var(--ink-faint); font-size: var(--t-meta); }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border-bottom: 1px solid var(--line); }
.account-row > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.account-row b, .account-row small { display: block; }
.account-row b { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.account-row small { margin-top: 2px; color: var(--ink-faint); font-size: var(--t-micro); }
.account-avatar { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 13px; font-weight: 700; }
.state { display: inline-flex; align-items: center; gap: 6px; width: max-content; border: 1px solid currentColor; border-radius: var(--radius-pill); padding: 5px 8px; font-size: var(--t-meta); font-weight: 650; white-space: nowrap; }
.state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state-healthy { color: var(--healthy); background: var(--healthy-soft); }
.state-review { color: var(--review); background: var(--review-soft); }
.state-recorded { color: var(--signal-ink); background: var(--signal-soft); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.metric-grid > div { padding: 17px 15px; border-right: 1px solid var(--line); }
.metric-grid > div:last-child { border-right: 0; }
.metric-grid span, .metric-grid strong, .metric-grid small { display: block; }
.metric-grid span { color: var(--ink-faint); font-size: var(--t-meta); }
.metric-grid strong { margin: 5px 0 2px; font-size: 18px; font-variant-numeric: tabular-nums; }
.metric-grid small { color: var(--ink-faint); font-size: var(--t-meta); }
.metric-grid .attention-text { color: var(--review); }
.attention-card { margin: 17px; padding: 17px; background: var(--review-tint); border: 1px solid var(--review-line); border-radius: var(--radius-sm); }
.attention-topline { display: flex; justify-content: space-between; align-items: center; gap: 15px; color: var(--ink-faint); font-size: var(--t-meta); }
.attention-card h2 { max-width: 470px; margin: 16px 0 7px; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }
.attention-card > p { margin-bottom: 16px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.evidence-row { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 5px 10px; padding-top: 12px; border-top: 1px solid var(--review-line); font-size: var(--t-meta); }
.evidence-row span { color: var(--ink-faint); }
.proposal-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 17px 17px; padding: 14px 15px; background: var(--paper-cool); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.proposal-preview span, .proposal-preview strong, .proposal-preview small { display: block; }
.proposal-kicker { color: var(--review); font-size: var(--t-meta); }
.proposal-preview strong { margin: 4px 0 2px; font-size: 13px; }
.proposal-preview small { color: var(--ink-faint); font-size: var(--t-meta); }
.sample-action { min-height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--ink); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--ink); color: white; font-size: var(--t-micro); cursor: pointer; }
.product-footnote { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin: 10px 8px 0; color: var(--ink-faint); font-size: var(--t-meta); }
.product-footnote span { display: flex; align-items: center; gap: 5px; }
.product-footnote i { width: 7px; height: 7px; border-radius: 50%; }
.signal-key { background: var(--signal); }.review-key { background: var(--review); }.record-key { background: var(--ink); }

/* Positioning band */
.positioning-band { background: var(--paper); border-bottom: 1px solid var(--line); }
.positioning-grid { display: grid; gap: var(--space-7); padding-block: var(--space-8) 66px; }
.positioning-grid > p { max-width: 620px; margin: 0; font-family: var(--font-display); font-size: var(--d5); line-height: 1.26; letter-spacing: -.012em; }

/* Micro-feedback (Tier 1). State changes are felt, not watched. */
.report-row:not(.report-row-head) { border-radius: var(--radius-xs); transition: background-color var(--spring-fade-dur) var(--spring-fade); }
.report-row:not(.report-row-head):hover { background: var(--canvas); }
.report-row.is-attention:hover { background: var(--review-strong-hover); }
.account-row, .evidence-list li, .activity-list li { transition: background-color var(--spring-fade-dur) var(--spring-fade); }
.evidence-list li:hover, .activity-list li:hover { background: var(--paper-cool); }
.faq-list summary { transition: color var(--spring-fade-dur) var(--spring-fade); }
.faq-list summary:hover { color: var(--signal); }
.availability-card { transition: border-color var(--spring-fade-dur) var(--spring-fade), box-shadow var(--spring-fade-dur) var(--spring-fade); }
.availability-card.is-current:hover { border-color: var(--line-strong); box-shadow: var(--elev-2); }
.work-item { transition: background-color var(--spring-fade-dur) var(--spring-fade); }

/* Shared sections */
.section { padding: clamp(72px, 8.4vw, 116px) 0; border-bottom: 1px solid var(--line); }
.section-label { margin-bottom: 19px; color: var(--ink-faint); }
.section-intro { display: grid; grid-template-columns: .55fr 1.25fr .9fr; gap: 40px; align-items: start; margin-bottom: 48px; }
.section-intro h2, .work-heading h2, .about-copy h2, .faq-grid h2 { margin: 0; font-size: var(--d2); line-height: 1.02; letter-spacing: -.045em; font-weight: 540; }
.section-intro > p:last-child, .work-heading > p:last-child { color: var(--ink-soft); font-size: 16px; line-height: 1.65; }

/* Kendo-inspired guided story */
.surface-head { min-height: 55px; padding: 0 20px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 650; }
.surface-head .mono { color: var(--ink-faint); font-size: var(--t-meta); }
.report-rows { padding: 6px 18px 12px; }
.report-row { display: grid; grid-template-columns: 1.6fr .6fr .6fr .6fr; gap: 12px; min-height: 56px; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line); font-size: var(--t-data); font-variant-numeric: tabular-nums; }
.report-row:last-child { border-bottom: 0; }
.report-row-head { min-height: 39px; color: var(--ink-faint); font-size: var(--t-meta); text-transform: uppercase; }
.report-row.is-attention { background: var(--review-soft); border-radius: var(--radius-xs); border-bottom-color: transparent; }
.mini-state { width: max-content; border-radius: var(--radius-pill); padding: 4px 7px; font-size: var(--t-meta); }
.mini-state.healthy { background: var(--healthy-soft); color: var(--healthy); }.mini-state.review { background: var(--review-strong); color: var(--review-ink); }.mini-state.neutral { background: var(--canvas-deep); color: var(--ink-soft); }
.surface-note { padding: 0 28px 17px; margin: 0; color: var(--ink-faint); font-size: var(--t-meta); text-align: right; }
.evidence-title { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; padding: 25px 24px 21px; }
.issue-index { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--review-line); border-radius: 50%; background: var(--review-soft); color: var(--review); font-size: 13px; }
.evidence-title small, .evidence-title strong { display: block; }
.evidence-title small { margin-bottom: 6px; color: var(--ink-faint); font-size: var(--t-micro); }
.evidence-title strong { max-width: 500px; font-size: 19px; line-height: 1.25; }
.evidence-list { list-style: none; margin: 0; padding: 0 24px 24px; }
.evidence-list li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: center; min-height: 64px; border-top: 1px solid var(--line); }
.evidence-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--canvas); color: var(--ink-soft); font-size: 13px; }
.evidence-list b, .evidence-list small { display: block; }
.evidence-list b { font-size: var(--t-data); }.evidence-list small { margin-top: 2px; color: var(--ink-faint); font-size: var(--t-micro); }
.proposal-details { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 8px 22px; }
.proposal-details div { padding: 18px 3px; border-bottom: 1px solid var(--line); }
.proposal-details div:nth-child(odd) { margin-right: 26px; }
.proposal-details dt { margin-bottom: 4px; color: var(--ink-faint); font: var(--t-meta) var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.proposal-details dd { margin: 0; font-size: var(--t-data); font-weight: 650; }
.approval-actions { display: flex; gap: 10px; padding: 22px 24px 12px; }
.demo-disclaimer { margin: 0; padding: 0 24px 22px; color: var(--ink-faint); font-size: var(--t-meta); }
.activity-list { list-style: none; margin: 0; padding: 8px 24px 22px; }
.activity-list li { position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 13px; align-items: center; min-height: 78px; border-bottom: 1px solid var(--line); }
.activity-list li:last-child { border-bottom: 0; }
.activity-list li > span { color: var(--ink-faint); font-size: var(--t-micro); }
.activity-list b, .activity-list small { display: block; }.activity-list b { font-size: var(--t-data); }.activity-list small { margin-top: 3px; color: var(--ink-faint); font-size: var(--t-micro); }
.activity-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }.activity-dot.signal { background: var(--signal); }.activity-dot.review { background: var(--review); }.activity-dot.recorded { background: var(--healthy); }

/* Availability and business */
.control-section { background: var(--canvas); }
.availability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.availability-card { padding: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.availability-card.is-current { background: var(--paper); }.availability-card.is-future { background: rgba(255, 254, 250, .38); border-style: dashed; }
.availability-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.availability-index { color: var(--ink-faint); font-size: var(--t-micro); }
.availability-card h3 { margin-bottom: var(--space-3); font-size: var(--d4); line-height: 1.08; letter-spacing: -.035em; font-weight: 540; }
.availability-card > p { min-height: 75px; max-width: 500px; color: var(--ink-soft); }
.check-list, .gate-list { list-style: none; margin: 25px 0 0; padding: 0; border-top: 1px solid var(--line); }
.check-list li, .gate-list li { min-height: 49px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); font-size: var(--t-data); }
.check-list li::before { content: "✓"; color: var(--healthy); font-weight: 700; }
.gate-list li span { min-width: 65px; color: var(--review); font: var(--t-meta) var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.work-section { background: var(--paper); }
.work-heading { display: grid; grid-template-columns: .55fr 1.25fr .9fr; gap: 40px; align-items: start; margin-bottom: 52px; }
.work-list { border-top: 1px solid var(--ink); }
.work-item { display: grid; grid-template-columns: 70px 1fr auto; gap: 24px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
.work-number { padding-top: 6px; color: var(--ink-faint); font-size: var(--t-micro); }
.work-item h3 { margin-bottom: 8px; font-size: 23px; line-height: 1.1; letter-spacing: -.03em; font-weight: 540; }
.work-item p { max-width: 620px; margin: 0; color: var(--ink-soft); }
.work-tag { min-width: 70px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-soft); font-size: var(--t-micro); text-align: center; }
.about-section { background: var(--canvas-deep); }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; }
.about-copy h2 { max-width: 690px; }
.about-detail { padding-top: 33px; }
.about-detail p { color: var(--ink-soft); font-size: var(--t-body); line-height: 1.68; }
.about-detail .text-link { margin-top: 16px; }
.faq-section { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 100px; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 20px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 650; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--ink-faint); font-size: var(--t-lede); font-weight: 400; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 700px; padding: 0 48px 24px 0; margin: 0; color: var(--ink-soft); }

/* CTA and footer */
.final-cta { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.final-grid { opacity: .22; background-image: linear-gradient(to right, rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px); mask-image: linear-gradient(to right, transparent 0, black 35%, black 100%); }
.final-inner { position: relative; min-height: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.final-inner .section-label { color: var(--on-ink-muted); }
.final-inner h2 { max-width: 850px; margin-bottom: 19px; font-family: var(--font-display); font-size: var(--d2); line-height: 1; letter-spacing: -.055em; font-weight: 400; }
.final-inner > p:not(.section-label) { max-width: 650px; color: var(--on-ink-soft); font-size: 16px; }
.final-inner .button { margin-top: 14px; }
.site-footer { background: var(--ink); color: var(--paper); border-top: 1px solid var(--ink-line); }
.footer-main { display: grid; grid-template-columns: 1fr 180px 180px; gap: 60px; padding-block: 65px 58px; }
.site-footer .brand { color: var(--paper); }
/* The mark is drawn in ink for the header. On the footer ground it takes the
   paper stroke, and the divider drops to the ink hairline. */
.site-footer .brand-mark { color: var(--paper); }
.site-footer .brand-divider { background: var(--ink-line); }
.footer-brand p { margin: 6px 0 0; color: var(--on-ink-muted); font-family: var(--font-display); font-size: 17px; line-height: 1.3; }

/* Footer contact. A hairline on the ink ground rather than a filled card --
   the footer already sits on the darkest surface, so a second fill would
   float rather than sit. Capped in width so it does not stretch across the
   1fr brand column on a wide screen. */
.footer-contact { display: flex; align-items: center; gap: 11px; max-width: 320px; min-height: 44px;
  margin-top: 24px; padding: 11px 13px; border: 1px solid var(--ink-line); border-radius: var(--radius-md);
  color: var(--on-ink-soft); text-decoration: none;
  transition: border-color var(--spring-fade-dur) var(--spring-fade), background-color var(--spring-fade-dur) var(--spring-fade); }
.footer-contact:hover { border-color: var(--on-ink-faint); background: var(--ink-raised); }
.fc-mark { flex: none; color: var(--on-ink-faint); }
.fc-text { display: grid; gap: 1px; min-width: 0; }
.fc-label { color: var(--on-ink-faint); font-size: 13px; line-height: 1.3;
  transition: color var(--spring-fade-dur) var(--spring-fade); }
/* --on-ink-faint is 4.78:1 on the footer ground but only 3.54:1 once the
   hover fill lifts it, so the label moves one step up the ramp with it. */
.footer-contact:hover .fc-label { color: var(--on-ink-muted); }
.fc-address { color: var(--paper); font-size: 16px; line-height: 1.3; }
.footer-contact .fc-go { flex: none; margin-left: auto; color: var(--on-ink-faint);
  transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.footer-contact:hover .fc-go { transform: translate(1px, -1px); }
@media (prefers-reduced-motion: reduce) { .footer-contact,
.footer-contact .fc-go,
.fc-label { transition: none; } }
@media (max-width: 760px) { .footer-contact { max-width: none; } }
.footer-column { display: grid; align-content: start; gap: 9px; }
.footer-column h2 { margin-bottom: 7px; color: var(--on-ink-faint); font: var(--t-meta) var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.footer-column a { display: flex; align-items: center; min-height: 44px; color: var(--on-ink-soft); font-size: 16px; text-decoration: none; }
.footer-column a:hover { color: white; }
.footer-base { display: flex; justify-content: space-between; gap: 20px; padding-block: 18px 24px; border-top: 1px solid var(--ink-line); color: var(--on-ink-faint); font: var(--t-meta) var(--font-mono); letter-spacing: .045em; text-transform: uppercase; }
.footer-base p { margin: 0; }
/* The phone is a tel: link so it is tappable, and inherits the footer's own
   colour so it does not read as a stray accent in a metadata row. */
.footer-base a { color: inherit; text-decoration: none; }
.footer-base a:hover, .footer-base a:focus-visible { color: var(--on-ink-muted); text-decoration: underline; }

/* Legal/contact route foundations */
.legal-page { min-height: calc(100vh - 250px); padding: 112px 0 100px; background: var(--paper); border-bottom: 1px solid var(--line); }
.legal-wrap { max-width: 500px; }
.legal-wrap h1 { max-width: 16ch; margin-bottom: 26px; font-size: clamp(36px, 7vw, 61px); line-height: .98; letter-spacing: -.052em; font-weight: 540; }
.legal-wrap h2 { margin: 45px 0 10px; font-size: 20px; letter-spacing: -.025em; }
.legal-wrap p { color: var(--ink-soft); font-size: var(--t-lede); line-height: 1.7; }
/* /contact borrows the legal layout but is not a legal page: it carries a 61px
   display heading that needs 504px, where 500px is the right measure for 14px
   prose. Widen the column for the heading, hold the prose at the reading measure. */
.contact-wrap { max-width: 640px; }
.contact-wrap h1 { max-width: none; }
.contact-wrap p, .contact-wrap ul { max-width: 500px; }
.legal-callout { margin: 38px 0; padding: 23px 25px; background: var(--canvas); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.legal-callout strong { display: block; margin-bottom: 5px; }
.legal-callout p { margin: 0; font-size: 13px; }
/* The booking action on /contact. The legal pages set a reading measure on
   every p, which would otherwise squeeze the button's line box. */
.contact-book { max-width: none; margin: 22px 0 0; }
.footer-inner { min-height: 100px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-inner .brand-word { font-weight: 700; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 15px 22px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink-soft); font-size: 15px; }

/* Progressive reveal: content is never hidden while it waits for observation. */
.js .reveal.is-visible { animation: reveal-in var(--spring-settle-dur) var(--spring-settle) both; }
.js .reveal[data-delay="1"].is-visible { animation-delay: 90ms; }
@keyframes reveal-in { from { opacity: .88; transform: translateY(9px); } to { opacity: 1; transform: none; } }


@media (max-width: 1050px) {
  .hero-layout { grid-template-columns: 1fr; gap: 56px; min-height: 0; padding-block: 82px 76px; }
  .hero-copy { max-width: 820px; }
  .product-stage { width: min(100%, 720px); margin-left: auto; }
  .positioning-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; }
  .section-intro, .work-heading { grid-template-columns: .5fr 1.2fr; }
  .section-intro > p:last-child, .work-heading > p:last-child { grid-column: 2; }
}

@media (max-width: 800px) {
  html { scroll-padding-top: 72px; }
  .shell, .wrap { width: min(100% - 36px, var(--max-width)); }
  /* The loop turns vertical: the rule runs down the left, nodes sit on it.
     The SVG is swapped for two CSS rules so the draw stays a clean scaleY. */
  .positioning-grid { gap: 38px; padding-block: 48px 52px; }
  .positioning-grid > p { font-size: 21px; }
  .header-inner { min-height: 64px; flex-wrap: wrap; }
  .js .nav-toggle { display: inline-flex; }
  .nav-cluster { width: 100%; display: flex; align-items: center; overflow-x: auto; gap: 18px; padding-bottom: 10px; }
  .js .nav-cluster { position: fixed; z-index: 90; inset: 64px 0 auto; display: none; width: auto; min-height: calc(100dvh - 64px); overflow: visible; padding: 24px 18px 40px; background: var(--paper); border-top: 1px solid var(--line); }
  .js .nav-cluster.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .site-nav { display: flex; gap: 18px; }
  .js .site-nav { display: grid; gap: 0; }
  .site-nav a { min-height: 57px; border-bottom: 1px solid var(--line); font-size: 21px; }
  .nav-cluster:not(.is-open) .site-nav a { min-height: 42px; border-bottom: 0; font-size: 16px; white-space: nowrap; }
  .header-cta { flex: 0 0 auto; }
  .js .header-cta { width: 100%; margin-top: auto; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:first-child { transform: translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .hero-layout { padding-block: 64px 62px; }
  .hero h1 { font-size: clamp(50px, 14vw, 72px); }
  .hero-lede { font-size: 20px; }
  .hero-boundaries { gap: 10px; }
  .section { padding: 104px 0; }
  .section-intro, .work-heading { display: block; }
  .section-intro h2, .work-heading h2 { margin-bottom: 20px; }
  .availability-grid { grid-template-columns: 1fr; }
  .availability-card > p { min-height: 0; }
  .about-grid, .faq-grid { grid-template-columns: 1fr; gap: 45px; }
  .about-detail { padding-top: 0; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .shell, .wrap { width: min(100% - 28px, var(--max-width)); }
  .hero-layout { padding-block: 50px 54px; gap: 46px; }
  .hero h1 { font-size: clamp(46px, 14vw, 64px); }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .hero-actions .button { width: 100%; }
  .hero-boundaries { grid-template-columns: 1fr; }
  .hero-boundaries div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .hero-boundaries dt { margin: 0; }
  .product-label { margin-inline: 2px; }
  .account-row { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .metric-grid > div:last-child { border-bottom: 0; }
  .metric-grid strong { grid-column: 2; grid-row: 1 / 3; }
  .metric-grid small { grid-column: 1; }
  .evidence-row { grid-template-columns: auto 1fr; }
  .proposal-preview { align-items: stretch; flex-direction: column; }
  .sample-action { min-height: 44px; }
  .product-footnote { justify-content: flex-start; }
  .report-row { grid-template-columns: 1.4fr .65fr .65fr; }
  .report-row > :nth-child(3) { display: none; }
  .report-row-head > :nth-child(3) { display: none; }
  .evidence-title { grid-template-columns: 1fr; }
  .proposal-details { grid-template-columns: 1fr; }
  .proposal-details div:nth-child(odd) { margin-right: 0; }
  .approval-actions { align-items: stretch; flex-direction: column; }
  .approval-actions .button { width: 100%; }
  .activity-list li { grid-template-columns: 16px 1fr; padding: 12px 0; }
  .activity-list li > span { grid-column: 2; }
  .availability-card { padding: 23px; }
  .availability-top { margin-bottom: 36px; }
  .work-item { grid-template-columns: 40px 1fr; gap: 10px; min-height: 0; }
  .work-tag { grid-column: 2; width: max-content; }
  .final-inner { min-height: 520px; }
  .final-inner h2 { font-size: var(--d2); }
  .final-inner .button { width: 100%; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 45px 20px; }
  .footer-base { flex-direction: column; }
  .legal-page { padding: 72px 0 70px; }
  .legal-wrap h1 { font-size: 49px; }
  .footer-inner { align-items: flex-start; flex-direction: column; padding-block: 30px; }
}

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

/* ------------------------------------------------------------------
   Growth Operations surface patterns
   ------------------------------------------------------------------ */


.growth-positioning { gap: 48px; padding-block: 72px 76px; }
.positioning-heading { display: grid; grid-template-columns: .45fr 1.55fr; gap: 45px; align-items: start; }
.positioning-heading .section-label { margin: 8px 0 0; }
.positioning-heading h2 {
  max-width: 820px;
  margin: 0;
  font-size: var(--d2);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 540;
}

.signal-record {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) minmax(210px, .8fr);
  gap: 18px;
  align-items: start;
  padding: 28px 25px 22px;
}

.signal-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
}

.signal-main small, .signal-main strong { display: block; }
.signal-main small { color: var(--ink-faint); font-size: var(--t-micro); }
.signal-main strong { margin: 5px 0 6px; font-size: 19px; letter-spacing: -.02em; }
.signal-main p { margin: 0; color: var(--ink-soft); font-size: var(--t-small); }
.signal-record dl { margin: 0; border-top: 1px solid var(--line); }
.signal-record dl div { display: grid; grid-template-columns: 68px 1fr; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.signal-record dt { color: var(--ink-faint); font: var(--t-meta) var(--font-mono); text-transform: uppercase; }
.signal-record dd { margin: 0; font-size: var(--t-micro); font-weight: 650; }

.route-rule {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  margin: 18px 22px 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-cool);
}

.route-rule.is-review { margin-top: 10px; background: var(--review-tint); border-color: var(--review-line); }
.route-rule > .mono { color: var(--ink-faint); font-size: var(--t-meta); }
.route-rule b, .route-rule small { display: block; }
.route-rule b { font-size: var(--t-data); }
.route-rule small { margin-top: 3px; color: var(--ink-faint); font-size: var(--t-micro); }
.routing-surface .surface-note { padding-top: 18px; }

.draft-card { padding: 24px; }
.draft-to { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.draft-to span { color: var(--ink-faint); }
.draft-card > p { margin: 25px 4px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.draft-boundary { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 14px 15px; border: 1px solid var(--review-line); border-radius: var(--radius-xs); background: var(--review-soft); }
.draft-boundary span { color: var(--review-ink); font-size: var(--t-meta); }
.draft-boundary p { margin: 0; color: var(--ink-soft); font-size: var(--t-micro); }
.followup-surface .surface-note { padding-top: 0; }
.operator-activity { padding-bottom: 6px; }
.visibility-surface .surface-note { padding-top: 12px; }

.industry-section { overflow: hidden; background: var(--canvas-deep); }
.industry-heading {
  display: grid;
  grid-template-columns: .42fr 1.13fr .65fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 52px;
}

.industry-heading .section-label { margin-top: 8px; }
.industry-heading h2 {
  margin: 0;
  font-size: var(--d2);
  line-height: .99;
  letter-spacing: -.05em;
  font-weight: 540;
}

.industry-heading h2 em { display: block; margin-top: 7px; font-family: var(--font-display); font-weight: 400; font-style: normal; }
.industry-heading > p:last-child { margin: 8px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }

.industry-tabs { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--elev-3); }
.industry-tablist { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-strong); }
/* Six categories in one row leaves ~200px a tab and wraps the longer labels.
   Two rows of three give each one room; row ends lose their right border. */
.industry-tablist a:nth-child(3n) { border-right: 0; }
.industry-tablist a:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.industry-tablist a {
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 15px;
  border-right: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 16px;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  transition: color var(--spring-fade-dur) var(--spring-fade), background-color var(--spring-fade-dur) var(--spring-fade);
}

.industry-tablist a:last-child { border-right: 0; }
.industry-tablist a:hover { background: var(--paper-cool); color: var(--ink); }

.industry-tablist a[aria-selected="true"] { background: var(--paper); color: var(--ink); }
.industry-tablist a[aria-selected="true"]::after { content: ""; position: absolute; right: 16px; bottom: -1px; left: 16px; height: 2px; background: var(--signal); }

.industry-panel {
  display: grid;
  grid-template-columns: minmax(270px, .68fr) minmax(0, 1.32fr);
  min-height: 430px;
}

.industry-panel + .industry-panel { margin-top: 24px; border-top: 1px solid var(--line-strong); }
.tabs-ready .industry-panel + .industry-panel { margin-top: 0; border-top: 0; }
.tabs-ready .industry-panel[hidden] { display: none !important; }
.industry-panel.is-entering { animation: panel-in var(--spring-fade-dur) var(--spring-fade) both; }
@keyframes panel-in { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.industry-panel-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(34px, 5vw, 62px);
  background: var(--ink);
  color: var(--paper);
}

.industry-index { margin-bottom: 24px; color: var(--on-ink-muted); font-size: var(--t-meta); }
.industry-panel-copy h3 { margin-bottom: 14px; font-size: var(--d3); line-height: 1.05; letter-spacing: -.04em; font-weight: 540; }
.industry-panel-copy > p { margin-bottom: 24px; color: var(--on-ink-soft); font-size: 13px; line-height: 1.65; }

.industry-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 24px;
  background: var(--paper);
}

.industry-flow li { position: relative; min-height: 178px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.industry-flow li:nth-child(2n) { border-right: 0; }
.industry-flow li:nth-last-child(-n+2) { border-bottom: 0; }
.flow-step { color: var(--ink-faint); font-size: var(--t-meta); }
.industry-flow h4 { margin: 29px 0 7px; font-size: 19px; line-height: 1.12; letter-spacing: -.025em; }
.industry-flow p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }

/* The section heading has always said foundation first, growth layers when
   they are useful. All four cards looked identical, so it read as a flat
   menu of four things every engagement includes. The grouping makes the
   staging visible: two you start from, two added only if the business
   needs them. */

.approach-section { background: var(--paper); }
.approach-heading { display: grid; grid-template-columns: .4fr 1fr .6fr; gap: 44px; align-items: start; margin-bottom: 62px; }
.approach-heading .section-label { margin-top: 8px; }
.approach-heading h2 { margin: 0; font-size: var(--d2); line-height: 1; letter-spacing: -.05em; font-weight: 540; }
.approach-heading > p:not(.eyebrow) { margin: 8px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.approach-steps { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.approach-steps li { padding: 30px 38px 34px 0; border-right: 1px solid var(--line); }
.approach-steps li + li { padding-left: 38px; }
.approach-steps li:last-child { padding-right: 0; border-right: 0; }
.approach-steps li { position: relative; }
.approach-steps h3 { margin: 0 0 11px; font-size: var(--d4); line-height: 1; letter-spacing: -.038em; font-weight: 540; }
.approach-steps p { max-width: 38ch; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.62; }

/* The stages are a sequence, not three parallel columns, and nothing said so.
   The list was already an <ol>, so the order existed in the markup and only
   the eye was left out. The ordinal carries it, set in mono at the faint
   tier, and it survives the stack to one column
   on mobile. Nothing is added to the rule -- the number is the whole cue. */
.approach-number { display: block; margin-bottom: 15px; color: var(--ink-faint); font-size: var(--t-micro); }

.control-principle { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.control-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(to right, rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right, transparent 0, black 35%, black 100%); }
.control-principle-inner { position: relative; padding-block: 112px 88px; }
.control-principle-copy { display: grid; grid-template-columns: .42fr 1.18fr .6fr; gap: 44px; align-items: start; margin-bottom: 72px; }
.control-principle .section-label { margin-top: 8px; color: var(--on-ink-muted); }
.control-principle-copy h2 { margin: 0; font-size: var(--d2); line-height: .98; letter-spacing: -.052em; font-weight: 540; }
.control-principle-copy h2 em { display: block; margin-top: 7px; font-family: var(--font-display); font-weight: 400; font-style: normal; }
.control-principle-copy > p { margin: 8px 0 0; color: var(--on-ink-soft); font-size: 15px; line-height: 1.65; }

@media (max-width: 1050px) {
  .industry-panel { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); }
}

@media (max-width: 800px) {
  .positioning-heading .section-label,
.industry-heading .section-label,
.approach-heading .section-label,
.control-principle .section-label { margin: 0 0 18px; }
  .industry-tablist { grid-template-columns: repeat(2, 1fr); }
  .industry-tablist a { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .industry-tablist a:nth-child(2n) { border-right: 0; }
  .industry-tablist a:nth-child(n+5) { border-bottom: 0; }
  .industry-panel { grid-template-columns: 1fr; }
  .industry-panel-copy { min-height: 340px; }
  .approach-steps { grid-template-columns: 1fr; }
  .approach-steps li, .approach-steps li + li { padding: 26px 0 28px; border-right: 0; border-bottom: 1px solid var(--line); }
  .approach-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
  .control-principle-inner { padding-block: 88px 68px; }
}

@media (max-width: 560px) {
  .growth-positioning { padding-block: 58px; }
  .signal-record { grid-template-columns: 40px 1fr; padding: 23px 19px 18px; }
  .signal-mark { width: 38px; height: 38px; }
  .signal-record dl { grid-column: 1 / -1; margin-top: 6px; }
  .route-rule { grid-template-columns: 1fr auto; gap: 9px 12px; margin-inline: 15px; padding: 15px; }
  .route-rule > .mono { grid-column: 1 / -1; }
  .route-rule > div { min-width: 0; }
  .draft-card { padding: 18px; }
  .draft-to { grid-template-columns: auto 1fr; }
  .draft-boundary { grid-template-columns: 1fr; }
  .industry-heading { margin-bottom: 37px; }
  .industry-tablist a { min-height: 58px; padding-inline: 10px; font-size: 15px; }
  .industry-panel-copy { min-height: 365px; padding: 34px 26px; }
  .industry-flow { grid-template-columns: 1fr; padding: 17px; }
  .industry-flow li { min-height: 155px; border-right: 0; border-bottom: 1px solid var(--line); }
  .industry-flow li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .industry-flow li:last-child { border-bottom: 0; }
  .control-principle-copy h2 { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .industry-panel.is-entering { animation: none; }
  .text-link span { transition: none; }
}

/* Legal operator disclosure. Required on every client-facing legal route by
   the product-brand decision: Anteform is the product, the corporation is the
   party you contract with. */

/* ---- Vertical routing ------------------------------------------------
   Homepage cards that hand off to /service-businesses, and the chrome for
   that page. The homepage names the business types; the sub-page carries
   the flows, so neither repeats the other.
   ---------------------------------------------------------------------- */
.vertical-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; list-style: none; margin: 0; padding: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.vertical-cards a { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); height: 100%; padding: var(--space-5) var(--space-5) var(--space-5); background: var(--paper); text-decoration: none; transition: background-color var(--spring-fade-dur) var(--spring-fade); }
.vertical-cards a:hover { background: var(--paper-cool); }
.vc-index { color: var(--ink-faint); font-size: var(--t-meta); }
.vertical-cards h3 { margin: 0; font-size: var(--t-lede); letter-spacing: -.018em; }
.vertical-cards p { margin: 0; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.55; }
.vc-go { margin-top: auto; padding-top: var(--space-3); color: var(--signal-ink); font-size: var(--t-meta); letter-spacing: .05em; text-transform: uppercase; }

.crumb { margin-bottom: var(--space-5); color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; }
.crumb a { color: var(--ink-soft); text-underline-offset: 4px; }
.vertical-intro { padding-bottom: var(--space-6); }
.vertical-intro h1 { max-width: 34ch; margin-bottom: var(--space-5); font-size: clamp(36px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -.04em; font-weight: 540; }
.vertical-lede { max-width: 68ch; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.65; }
.vertical-tabs-section { padding-top: 0; }
#examples.vertical-tabs-section { padding-top: clamp(28px, 3.2vw, 44px); }
.vertical-next h2 { max-width: 22ch; margin-bottom: var(--space-4); font-size: var(--d3); line-height: 1.06; letter-spacing: -.035em; font-weight: 540; }
.vertical-next p { max-width: 64ch; margin-bottom: var(--space-5); color: var(--ink-soft); font-size: var(--t-body); line-height: 1.65; }

@media (max-width: 900px) { .vertical-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vertical-cards { grid-template-columns: 1fr; } }

/* ---- Opening hero ----------------------------------------------------
   The first proof is an operator-facing briefing, not an abstract system
   diagram. It is deliberately static HTML: useful with no JavaScript, quiet
   under reduced motion, and clearly labelled as illustrative.
   --------------------------------------------------------------------- */
.opening-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.opening-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: linear-gradient(to right, rgba(189, 184, 174, .26) 1px, transparent 1px), linear-gradient(to bottom, rgba(189, 184, 174, .2) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to right, transparent 0%, black 38%, black 100%); }
.opening-hero-grid { position: relative; display: grid; justify-items: center; gap: clamp(28px, 3.6vh, 46px); padding-block: clamp(38px, 5vh, 62px) clamp(32px, 4vh, 50px); }
/* The container, not the heading, was capping the headline at 552px of a
   1440px shell -- four lines of 70px type in a narrow column, which reads
   as a stack rather than a statement. The lede keeps its own measure. */
.opening-hero-copy { position: relative; z-index: 1; width: min(100%, 1120px); text-align: center; }
.hero-eyebrow { margin: 0 0 22px; color: var(--ink-soft); font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; }
.opening-hero h1 { max-width: 30ch; margin: 0 auto 18px; font-size: clamp(36px, 4.5vw, 64px); line-height: .95; letter-spacing: -.055em; font-weight: 540; }
.opening-hero-lede { max-width: 58ch; margin: 0 auto 22px; color: var(--ink-soft); font-size: 17px; line-height: 1.62; }
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 16px; font-weight: 650; text-decoration: none; }
.text-link:hover, .text-link:focus-visible { color: var(--ink); }
.text-link span { display: inline-block; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(3px); }
.hero-text-link:hover span, .hero-text-link:focus-visible span { transform: translateY(3px); }

/* The process belongs after the opening proof, where it can be scanned as a
   plain sequence rather than read as an animated diagram. */
/* Stacked so the intro centres with every other section; the operating
   panel sits beneath it rather than in a right-hand cell. */

@media (max-width: 1100px) {
  .opening-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 55px; padding-block: 76px 82px; }
  .opening-hero-copy { max-width: 760px; }
  .opening-hero h1 { max-width: 30ch; }
}

@media (max-width: 620px) {
  .opening-hero::before { mask-image: none; opacity: .32; }
  .opening-hero-grid { gap: 42px; padding-block: 48px 58px; }
  .opening-hero h1 { max-width: none; font-size: clamp(34px, 10.3vw, 48px); }
  .opening-hero-lede { font-size: 19px; line-height: 1.62; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 7px; }
  .hero-actions .button { width: 100%; }
  .hero-text-link { justify-content: center; }
}

/* ---- Reading measure at the wider container -------------------------
   The container is 1440px but prose is not: anything without its own
   measure would run past 90 characters, well beyond comfortable reading.
   Specific rules already carrying a max-width win over this.
   --------------------------------------------------------------------- */
.section p, .control-principle p, .industry-heading p, .faq-list details p { max-width: 68ch; }
/* ...but not to a label. An eyebrow given that box sits flush left inside a
   centred column and pulls its own text off the heading's centre. */
p.eyebrow { max-width: none; }
.section-intro p, .work-heading p { max-width: 62ch; }
.hero-eyebrow { max-width: none; }

/* ---- One section-intro shape ----------------------------------------
   Five sections each invented their own grid (.65fr/1.35fr, 1.35fr/.65fr,
   .4fr/1fr/.6fr, .42fr/1.18fr/.6fr), which put section headings at three
   different left edges and intro paragraphs at nine. Every intro is now the
   same object: centred, one column, a constrained measure. Content grids
   beneath keep their own alignment.
   --------------------------------------------------------------------- */
.industry-heading,
.approach-heading,
.control-principle-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-4);
  width: min(100%, 85ch);
  margin-inline: auto;
  margin-bottom: clamp(22px, 2.6vh, 36px);
  text-align: center;
}
.industry-heading > *,
.approach-heading > *,
.control-principle-copy > * { max-width: 100%; }

.industry-heading h2,
.approach-heading h2,
.control-principle-copy h2 { max-width: 22ch; margin-inline: auto; }

.industry-heading p,
.approach-heading p,
.control-principle-copy p { max-width: 62ch; margin-inline: auto; }

/* The FAQ keeps its two columns but its heading column aligns with the rest. */
.faq-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vh, 52px); }
.faq-grid > div:first-child { width: min(100%, 72ch); margin-inline: auto; text-align: center; }
.faq-grid h2 { max-width: 21ch; margin-inline: auto; }
.faq-grid > div:first-child .eyebrow { margin-bottom: var(--space-4); }

/* ---- Display leading -------------------------------------------------
   Seven line-height ratios were in use across headings, and the hero ran at
   0.95 -- negative leading, 70px type in a 67px line, so a descender and the
   cap below it had nothing between them. Large type wants a tighter ratio
   than body copy, but multi-line headings with descenders need to clear 1.0.
   One ratio per tier, set last so it wins over the per-section rules.
   --------------------------------------------------------------------- */
.opening-hero h1 { line-height: 1.04; }

.industry-heading h2,
.approach-heading h2,
.control-principle-copy h2,
.faq-grid h2 { line-height: 1.05; }

/* Georgia sits on different metrics and the closing line is short, so it
   keeps its own tighter setting. */
.final-inner h2 { line-height: 1.0; }

/* Lists on the legal and contact pages inherit body copy metrics. */
.legal-wrap ul { margin: 14px 0 0; padding-left: 21px; color: var(--ink-soft); font-size: var(--t-lede); line-height: 1.7; }
.legal-wrap li { margin-bottom: 8px; }
.legal-wrap li::marker { color: var(--ink-faint); }
/* A scan anchor per item, so the list reads as four points rather than four
   sentences. Full ink against the soft body text carries the jump. */
.legal-wrap li strong { color: var(--ink); font-weight: 650; }
/* Directly under the title, where a reader checks whether a policy is current
   before deciding to read it. */
.legal-updated-top { margin: 14px 0 24px; color: var(--ink-faint); font-size: 15px; }
.legal-wrap h2 + .legal-callout { margin-top: 16px; }

/* ---- Stage hover: Tier 1 micro-feedback ------------------------------
   The motion doctrine allows an active section item to gain ink weight
   and a short rule, 150-220ms, CSS transitions only. Nothing is conveyed
   by hover alone, so a touch device or a keyboard loses no meaning.
   Scoped to hover-capable pointers so the state cannot stick on touch.
   --------------------------------------------------------------------- */
@media (hover: hover) {
  .approach-steps li::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 100%; height: 2px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .approach-steps li:hover::before { transform: scaleX(1); }

  /* The heading, the summary and the detail move together, each by one
     step of the existing tone ramp. Three coordinated cues read as
     considered; one line reads as an afterthought. No transform on the
     card itself -- a lift would promise a click that is not there. */
  .approach-steps h3 { transition: color var(--spring-fade-dur) var(--spring-fade); }
  .approach-steps li p { transition: color var(--spring-fade-dur) var(--spring-fade); }
  .approach-steps li:hover p { color: var(--ink); }

  /* Siblings recede so the hovered stage reads as the active one. */
  .approach-steps:hover li:not(:hover) h3 { color: var(--ink-soft); }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .approach-steps li::before,
.approach-steps li p,
.approach-steps h3 { transition: none; }
}

/* Section label. No dot -- the words do the work. Spacing below it comes
   from the centred intro grid's gap, so it sets no margin of its own. */
.eyebrow { margin: 0; color: var(--ink-soft); }

/* ---- Section lede -----------------------------------------------------
   Five section intros were running four different lede sizes (14, 15, 15,
   16) and four different gaps under the heading (41, 24, 24, 16), which
   left the heading-to-lede ratio drifting between 3.88 and 4.43. There is
   already a token for this role: --t-lede. Using it puts every section on
   one size, one leading and one gap, and closes the 4.1x jump from a 62px
   display to a 15px lede.

   Longhand margins only -- the shorthand would wipe the margin-inline:auto
   that centres these.
   --------------------------------------------------------------------- */
.approach-heading > p:not(.eyebrow),
.industry-heading > p:last-child,
.control-principle-copy > p:not(.eyebrow) {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: var(--t-lede);
  line-height: 1.6;
}

/* A sentence that should hold its own line rather than wrap into the one
   above. Same device as the display:block <em> in the industry and control
   headings, without borrowing <em>'s emphasis semantics to do layout. */
.h2-line { display: block; }

/* ---- Discovery Audit page ---------------------------------------------
   The rung between a free call and a build. Deliberately reuses the
   section, shell, card and CTA vocabulary already on the site rather than
   inventing a page style for one route.
   --------------------------------------------------------------------- */
.audit-intro { background: var(--paper); }
/* The page ran left for the hero and centred for everything under it. The
   process panel and the inputs keep their left rag, since centring columns
   would be wrong, but the opening now matches the sections it introduces. */
.audit-intro .shell { text-align: center; }
.audit-intro h1 { max-width: 30ch; margin: 18px auto 0; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.02; letter-spacing: -.05em; font-weight: 540; }
.audit-lede { max-width: 62ch; margin: 24px auto 0; color: var(--ink-soft); font-size: var(--t-lede); line-height: 1.6; }

.audit-assets { background: var(--canvas); }
.audit-heading { width: min(100%, 79ch); margin: 0 auto clamp(40px, 5vh, 60px); text-align: center; }
.audit-heading h2 { max-width: 22ch; margin: 0 auto; font-size: var(--d2); line-height: 1.05; letter-spacing: -.05em; font-weight: 540; }
.audit-heading p { max-width: 62ch; margin: 8px auto 0; color: var(--ink-soft); font-size: var(--t-lede); line-height: 1.6; }
.audit-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.audit-cards li { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 32px); background: var(--paper); }
.audit-num { color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .08em; }
.audit-cards h3 { margin: 0; font-size: var(--d5); line-height: 1.15; letter-spacing: -.03em; font-weight: 540; }
.audit-cards p { max-width: 42ch; margin: 0; color: var(--ink-soft); font-size: var(--t-data); line-height: 1.6; }

/* How it runs: one bounded panel, four stages read left to right. The
   numbered rail carries the reading order only. It is not a progress
   tracker, so every stage is drawn the same and nothing in it is a control.
   Subgrid rows line the numbers, titles and paragraphs up across columns,
   however the long second title wraps. */
.audit-steps, .audit-needs-grid { --audit-gap: clamp(28px, 3vw, 44px); }
.audit-process { background: var(--canvas); }
.audit-process h2 { margin: 0 0 clamp(28px, 3.4vw, 48px); font-size: var(--d2); line-height: 1.08; letter-spacing: -.04em; font-weight: 540; }
.audit-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--audit-gap); margin: 0;
  padding: clamp(28px, 3.2vw, 46px) clamp(22px, 2.8vw, 40px); list-style: none;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.audit-steps > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.audit-steps .audit-num { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2vw, 26px); color: var(--signal-ink); }
/* Each segment runs on to the next number, so the four read as one line. */
.audit-steps .audit-num::after { content: ""; flex: 1; height: 1px; margin-right: calc(14px - var(--audit-gap)); background: var(--line-strong); }
.audit-steps > li:last-child .audit-num::after { margin-right: 0; }
.audit-steps h3 { margin: 0 0 12px; font-size: var(--d4); line-height: 1.15; letter-spacing: -.03em; font-weight: 540; }
.audit-steps p { margin: 0; color: var(--ink-soft); font-size: var(--t-data); line-height: 1.6; }

/* What we need follows as an open block. On wide screens it splits on the
   panel's centre line with the same gap, so the list starts exactly where the
   third stage does (the second, when the panel is two by two). */
.audit-needs { background: var(--paper); }
.audit-needs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--audit-gap); align-items: start; }
.audit-needs h2 { margin: 0; font-size: var(--d3); line-height: 1.1; letter-spacing: -.04em; font-weight: 540; }
.audit-needs-body { max-width: 68ch; }
.audit-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.audit-list li { padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-data); line-height: 1.6; }
.audit-list b { color: var(--ink); font-weight: 650; }

/* Four columns from 1280px, where each is about 215px wide. Narrower, they
   fall toward 23 characters a line and ten-line paragraphs, so the panel
   goes two by two instead. */
@media (max-width: 1279px) and (min-width: 680px) {
  .audit-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-steps > li:nth-child(n+3) { margin-top: clamp(30px, 4vw, 44px); }
  .audit-steps > li:nth-child(2n) .audit-num::after { margin-right: 0; }
}
@media (max-width: 959px) {
  .audit-needs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .audit-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 679px) {
  .audit-steps { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
  .audit-steps > li { display: block; grid-row: auto; }
  .audit-steps .audit-num::after { margin-right: 0; }
}

/* Comparison of the free call against the paid audit. Wide content scrolls
   inside its own container so the page body never moves sideways. */
.audit-gap { background: var(--paper); }
.audit-table-wrap { overflow-x: auto; }
.audit-compare { width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; }
.audit-compare th, .audit-compare td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--t-data); line-height: 1.55; }
.audit-compare thead th { color: var(--ink); font-size: var(--t-body); font-weight: 650; letter-spacing: -.012em; border-bottom-color: var(--line-strong); }
.audit-compare thead th:last-child { color: var(--signal-ink); }
.audit-compare tbody th { width: 22%; color: var(--ink-faint); font-size: var(--t-meta); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; padding-top: 17px; }
.audit-compare tbody td { color: var(--ink-soft); }
.audit-compare tbody td:last-child { color: var(--ink); }
.audit-compare tbody tr:last-child th, .audit-compare tbody tr:last-child td { border-bottom: 0; }

/* The comparison is the argument for paying, so both columns have to be on
   screen together. min-width: 620px meant a 362px phone showed the free-call
   column and two letters of the audit column, with nothing indicating the rest
   scrolled. Letting the cells wrap keeps it a real table -- header scope, row
   headers and all -- rather than restructuring it into blocks, which is what
   breaks the association screen readers rely on. */
@media (max-width: 680px) {
  .audit-table-wrap { overflow-x: visible; }
  .audit-compare { min-width: 0; table-layout: fixed; }
  .audit-compare th, .audit-compare td { padding: 12px 10px 12px 0; font-size: var(--t-small); line-height: 1.5; }
  .audit-compare thead th { font-size: var(--t-data); }
  .audit-compare tbody th { width: 27%; word-break: break-word; }
  .audit-compare thead td:first-child { width: 27%; }
}
.founders-heading { width: min(100%, 79ch); margin: 0 auto clamp(30px, 3.6vh, 44px); text-align: center; }
.founders-heading .eyebrow { margin-bottom: var(--space-4); }
.founders-heading h2 { max-width: 22ch; margin: 0 auto; font-size: var(--d2); line-height: 1.05; letter-spacing: -.05em; font-weight: 540; }
.founders-heading > p:not(.eyebrow) { max-width: 62ch; margin: 10px auto 0; color: var(--ink-soft); font-size: var(--t-lede); line-height: 1.6; }

.founders-section { background: var(--canvas); }
.founders-list { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.founders-list li { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 30px 30px 0; border-right: 1px solid var(--line); }
.founders-list li + li { padding-left: 30px; }
.founders-list li:last-child { padding-right: 0; border-right: 0; }
.founder-photo { width: 110px; height: 110px; margin-bottom: 16px; border-radius: 50%; object-fit: cover; background: var(--paper-cool); }
.founders-list h3 { margin: 0 0 4px; font-size: var(--d4); line-height: 1.15; letter-spacing: -.03em; font-weight: 540; }
.founder-role { margin: 0 0 9px; color: var(--ink-faint); font-size: var(--t-micro); letter-spacing: .075em; text-transform: uppercase; }
.founders-list p:not(.founder-role) { max-width: 60ch; margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; line-height: 1.62; }
.founder-link { color: var(--ink); font-size: var(--t-data); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.founder-link:hover { border-bottom-color: var(--ink); }

/* The founder LinkedIn link is a standalone target 21px tall, under the 44px
   touch floor. Expanding the box would push the underline off the text, so the
   hit area grows on a pseudo-element instead and nothing moves. Scoped to
   coarse pointers: this is a touch problem, and a mouse does not need it. */
@media (pointer: coarse) {
  .founder-link { position: relative; }
  .founder-link::after { content: ""; position: absolute; inset: -12px -10px; }
  /* Breadcrumb "Anteform" is 11px tall -- under the 24px WCAG AA minimum, never
     mind this site's 44px floor. Same treatment: the box does not move, the
     reachable area does. */
  .crumb a { position: relative; }
  .crumb a::after { content: ""; position: absolute; inset: -17px -8px; }
}
@media (max-width: 860px) {
  .founders-list { grid-template-columns: 1fr; }
  .founders-list li, .founders-list li + li { padding: 22px 0 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .founders-list li:last-child { border-bottom: 0; padding-bottom: 0; }
}
/* ---- Local Visibility -------------------------------------------------
   A second offer with a different buyer,
so a different register: larger
   type,
a shorter measure,
fewer and flatter sections. It shares the shell,
the palette and the legal chrome,
because those are trust rather than
   style. It deliberately does not share the hub's density.

   The steps are not numbered. 01/02/03 is reserved for the three stages on
   the homepage,
and a second numbered sequence blunts it -- the same reason
   the capability cards were removed. The headings already read in order.
   --------------------------------------------------------------------- */
.lv-wrap { width: min(100% - 28px, 66ch); margin-inline: auto; }
.lv-hero { background: var(--canvas); }
.lv-hero h1 { max-width: 20ch; margin: 16px 0 0; font-size: var(--d1); line-height: 1.06; letter-spacing: -.042em; font-weight: 540; }
.lv-lede { margin: 20px 0 0; color: var(--ink-soft); font-size: var(--t-lede); line-height: 1.6; }
.lv-cta-row { margin: 30px 0 0; }

.lv-section { background: var(--paper); }
.lv-section h2 { max-width: 26ch; margin: 0 0 20px; font-size: var(--d3); line-height: 1.12; letter-spacing: -.03em; font-weight: 540; }
.lv-section p { margin: 0 0 15px; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.66; }
.lv-section p:last-child { margin-bottom: 0; }

.lv-list { list-style: none; margin: 0; padding: 0; }
.lv-list li { max-width: 62ch; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-body); line-height: 1.62; }
.lv-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.lv-list strong { color: var(--ink); font-weight: 650; }

.lv-steps { background: var(--canvas); }
.lv-steps-list { list-style: none; margin: 0; padding: 0; }
.lv-steps-list li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.lv-steps-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.lv-steps-list li { max-width: 68ch; }
.lv-steps-list h3 { margin: 0 0 7px; font-size: var(--d4); line-height: 1.2; letter-spacing: -.022em; font-weight: 650; }
.lv-steps-list p { margin: 0; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.62; }

/* The one claim worth inverting: it is the whole commercial position. */
.lv-measure { background: var(--ink); }
.lv-measure h2 { max-width: 24ch; color: var(--paper); }
.lv-measure p { color: var(--on-ink-muted); }

.lv-close { background: var(--canvas); }

@media (max-width: 680px) {
  .lv-hero h1 { max-width: none; }
  .lv-section h2, .lv-measure h2 { max-width: none; }
}

/* ---- Vertical wing --------------------------------------------------
   The hub ships at 0.78 because it was "too large and in your face" for an
   operator reading at a desk. That judgement does not transfer to a
   contractor holding a phone between jobs, where 13px body and an 11px call
   to action are the things that read as corporate. Dividing the hub tokens
   back out by 0.78 returns the wing to 1.0 -- same tokens, same palette,
   same typeface, different scale. Recorded as a deliberate exception.
   --------------------------------------------------------------------- */
[data-wing] { --t-body: 16px; --t-lede: 18px; --t-data: 15px; --t-small: 14px; --t-micro: 13px; --t-meta: 11px; --t-base: 15px; }
[data-wing] .section { padding-block: clamp(56px, 7.5vh, 80px); }
[data-wing] .lv-wrap { width: min(100% - 28px, 60ch); margin-inline: auto; }
[data-wing] .lv-section p, [data-wing] .lv-steps-list p, [data-wing] .lv-list li { max-width: 62ch; font-size: var(--t-body); }
[data-wing] .lv-lede { font-size: var(--t-lede); }

.hv-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 26px 0 0; }
.hv-call { font-size: var(--t-body); min-height: 52px; padding-inline: 26px; }
.hv-alt { color: var(--ink-soft); font-size: var(--t-small); text-underline-offset: 4px; }
.hv-local { margin: 18px 0 0; color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; }
.hv-note { color: var(--ink-faint) !important; }
.lv-measure .hv-local, .lv-measure strong { color: var(--paper); }
.hv-faq { margin-top: 4px; }


/* Inquiry path and the concise first conversation. */
.opening-hero-grid { padding-block: clamp(72px, 11vh, 132px) clamp(56px, 7vh, 84px); gap: 48px; }
.inquiry-path { position: relative; width: min(100%, 880px); margin: 0; padding: 28px 32px 32px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); }
.ip-caption { margin-bottom: 28px; color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .04em; }
.ip-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; padding: 0; margin: 0; }
.ip-steps::before { content: ""; position: absolute; top: 6px; left: 6px; right: calc((100% - 64px) / 3 - 6px); height: 1px; background: var(--line-strong); transform-origin: left center; }
.ip-steps li { position: relative; min-width: 0; }
.ip-marker { position: relative; display: block; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 6px var(--paper); margin-bottom: 24px; }
.ip-index { display: block; margin-bottom: 9px; font-size: var(--t-meta); color: var(--ink-faint); }
.ip-title { font-size: 18px; font-weight: 650; margin: 0 0 7px; letter-spacing: -.015em; }
.ip-line { margin: 0; max-width: 25ch; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.6; }
#recognition, #approach, #founders, #faq, #audit-outcomes, #audit-details { background: var(--paper); }
.moments-heading, .focus-heading { max-width: 72ch; margin: 0 auto 48px; text-align: center; }
.moments-heading h2, .focus-heading h2, #audit-get h2, #audit-outcomes h2 { font-size: var(--d2); line-height: 1.08; letter-spacing: -.04em; font-weight: 540; }
.moments-heading p { margin: 18px auto 0; color: var(--ink-soft); font-size: var(--t-lede); }
.focus-heading .eyebrow { margin-bottom: 16px; }
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 0; margin: 0; list-style: none; }
.moments li { border-top: 1px solid var(--ink); padding-top: 26px; }
.moments h3 { font-size: var(--d4); line-height: 1.2; font-weight: 540; letter-spacing: -.03em; margin: 0 0 14px; }
.moments p { color: var(--ink-soft); max-width: 34ch; margin: 0; }
.focus-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.focus-items article { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.focus-index { color: var(--ink-faint); font-size: var(--t-meta); }
.focus-items h3 { margin: 18px 0; font-size: var(--d3); font-weight: 540; letter-spacing: -.035em; }
.focus-items p { max-width: 48ch; color: var(--ink-soft); }
.focus-bridge, .hv-bridge { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 28px; }
.focus-bridge h3, .hv-bridge h3 { font-size: var(--d4); font-weight: 540; margin: 0 0 12px; }
.focus-bridge p { color: var(--ink-soft); font-size: var(--t-body); }
.section-link { margin-top: 22px; }
.disclosure { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 28px; }
.disclosure + .disclosure { margin-top: 0; border-top: 0; }
.disclosure summary { min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 20px; list-style: none; cursor: pointer; font-size: var(--t-body); font-weight: 650; transition: color var(--spring-fade-dur) var(--spring-fade); }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary span { color: var(--ink-faint); font-size: 22px; font-weight: 400; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.disclosure[open] summary span { transform: rotate(45deg); }
.disclosure summary:hover, .disclosure summary:focus-visible, .faq-list summary:focus-visible { color: var(--signal); }
.disclosure > p, .disclosure-body { margin: 0; padding: 8px 0 24px; color: var(--ink-soft); }
.disclosure > p, .disclosure-body > p { max-width: 68ch; }
.disclosure-body .audit-list { max-width: 68ch; }
.outcome-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; list-style: none; padding: 0; margin: 36px 0; }
.outcome-list li { border-top: 1px solid var(--line); padding-top: 20px; }
.outcome-list h3 { font-size: var(--d4); font-weight: 540; margin: 0 0 10px; }
.outcome-list p, #audit-outcomes > div > p, #audit-get > div > p { color: var(--ink-soft); }
#audit-get > div > p { margin-bottom: 36px; }
#audit-details h2 { font-size: var(--d3); font-weight: 540; }
.audit-note, .contact-meta { font-size: var(--t-small); color: var(--ink-faint); }
.examples-note { margin: 0 0 18px; color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .06em; }
.hv-alt { display: inline-flex; align-items: center; min-height: 44px; }
[data-wing] .approach-steps { margin: 32px 0; }
[data-wing] .approach-steps h3 { font-size: 20px; }
[data-wing] .approach-steps p { font-size: 18px; }
.lv-close .text-link { margin-left: 20px; }

@keyframes hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes disclose-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .opening-hero-copy > * { animation: hero-in var(--spring-settle-dur) var(--spring-settle) both; }
  .opening-hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .opening-hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .opening-hero-copy > :nth-child(4) { animation-delay: 180ms; }
  .js .ip-steps::before { transform: scaleX(0); transition: transform var(--spring-gentle-dur) var(--spring-gentle) 150ms; }
  .js .inquiry-path.is-drawn .ip-steps::before { transform: scaleX(1); }
  .js .ip-marker { background: var(--paper); transition: background-color var(--spring-fade-dur) var(--spring-fade) 150ms; }
  .js .ip-steps li:nth-child(2) .ip-marker { transition-delay: 400ms; }
  .js .ip-steps li:nth-child(3) .ip-marker { transition-delay: 650ms; }
  .js .inquiry-path.is-drawn .ip-marker { background: var(--ink); }
  .js .reveal[data-stagger].is-visible { animation: none; }
  .js .reveal[data-stagger].is-visible > * { animation: reveal-in var(--spring-settle-dur) var(--spring-settle) both; }
  .js .reveal[data-stagger].is-visible > :nth-child(2) { animation-delay: 90ms; }
  .js .reveal[data-stagger].is-visible > :nth-child(3) { animation-delay: 180ms; }
  .js .reveal[data-stagger].is-visible > :nth-child(n+4) { animation-delay: 270ms; }
  .disclosure[open] > :not(summary), .faq-list details[open] > :not(summary) { animation: disclose-in var(--spring-fade-dur) var(--spring-fade) both; }
}
@media (max-width: 1023px) {
  .moments { grid-template-columns: 1fr; gap: 30px; }
  .moments p { max-width: 62ch; }
}
@media (max-width: 767px) {
  .inquiry-path { padding: 26px; }
  .ip-steps { grid-template-columns: 1fr; gap: 30px; }
  .ip-steps li { padding-left: 32px; }
  .ip-marker { position: absolute; left: 0; top: 4px; margin: 0; }
  .ip-steps::before { left: 6px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; transform-origin: center top; }
  .ip-steps li:last-child::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 3px; background: var(--paper); }
  .ip-line { max-width: 32ch; }
  .focus-items, .outcome-list { grid-template-columns: 1fr; gap: 30px; }
  .lv-close .text-link { display: flex; margin: 12px 0 0; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .ip-steps::before { transform: scaleY(0); }
  .js .inquiry-path.is-drawn .ip-steps::before { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .text-link span, .disclosure summary span, .faq-list summary span { transition: none; }
  .text-link:hover span, .text-link:focus-visible span, .disclosure[open] summary span, .faq-list details[open] summary span { transform: none; }
}

/* Restored operating-layer diagram; positioned after the opening hero. */
.hero-map { width: min(100%, 1180px); margin: 0 auto; }

.hero-map-root { position: relative; display: grid; justify-items: center; gap: 1px; width: max-content;
  margin: 0 auto; padding: 22px 42px 20px; background: var(--ink); color: var(--paper);
  border-radius: var(--radius-md); box-shadow: var(--elev-3); }
.hm-mark { width: 40px; height: 40px; }
.hm-mark { color: var(--paper); }
.hm-brand { margin-top: 8px; font-size: var(--d5); font-weight: 650; letter-spacing: -.026em; }
.hm-sub { color: var(--on-ink-muted); font-size: var(--t-data); }
.hero-map-root::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px; background: var(--line-strong); }

.hero-map-pillars { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px; margin: 22px 0 0; padding: 22px 0 0; list-style: none; }
.hero-map-pillars::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--line-strong); }
.hero-map-pillars > li { position: relative; display: grid; align-content: start; gap: 10px;
  padding: 16px 17px 17px; background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); box-shadow: var(--elev-1); }
.hero-map-pillars > li::before { content: ""; position: absolute; left: 50%; top: -22px; width: 1px; height: 22px; background: var(--line-strong); }

.hm-head { display: flex; align-items: center; gap: 8px; }
.hm-icon { flex: none; color: var(--signal-ink); }
.hm-head h3 { margin: 0; font-size: var(--t-body); line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
.hm-leaves { display: grid; margin: 0; padding: 0; list-style: none; }
.hm-leaves li { padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-data); line-height: 1.4; }

@media (max-width: 980px) {
  .hero-map-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-map-pillars::before { left: 25%; right: 25%; }
}
@media (max-width: 560px) {
  .hero-map-pillars { grid-template-columns: minmax(0, 1fr); }
  .hero-map-pillars::before { display: none; }
  .hero-map-pillars > li::before { display: none; }
}


/* Spacious introduction, then the original five business domains. */
.opening-hero-grid { min-height: calc(100svh - 72px); align-content: center; padding-block: clamp(80px, 13vh, 150px); }
.opening-hero h1 { max-width: 23ch; font-size: clamp(40px, 4.5vw, 68px); }
.opening-hero-lede { max-width: 62ch; font-size: 18px; line-height: 1.65; margin-bottom: 30px; }
.operating-layer-section { background: var(--canvas); padding-block: clamp(70px, 10vh, 120px); }
.hero-map { width: min(100%, 1280px); }
.hm-brand { font-size: 24px; }
.hm-sub { font-size: 15px; }
.hm-head h3 { font-size: 17px; }
.hm-leaves li { font-size: 16px; padding-block: 11px; }
.hero-map-root { padding: 28px 46px; }
.hero-map-pillars > li { padding: 22px 20px; }
.audit-intro .section-link, .audit-intro .audit-note { margin-inline: auto; }
@media (max-width: 1100px) and (min-width: 801px) {
  .header-inner { gap: 16px; }
  .site-nav { gap: 16px; }
}
@media (max-width: 600px) {
  .opening-hero-grid { min-height: calc(100svh - 64px); padding-block: 64px; }
  .opening-hero h1 { font-size: clamp(36px, 9vw, 48px); }
  .opening-hero-lede { font-size: 17px; }
  .hero-map-pillars > li { padding: 24px; }
}

.faq-footer { display: grid; justify-items: center; gap: 15px; margin-top: clamp(28px, 3.2vw, 42px); text-align: center; }
.faq-footer p { max-width: 46ch; margin: 0; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.5; }
.faq-footer .button { width: 100%; max-width: 320px; }
@media (max-width: 560px) { .faq-footer .button { max-width: none; } }

.map-section { background: var(--canvas); padding-block: clamp(32px, 2.7vw, 46px); }
/* The diagram is the one section meant to be taken in at a glance, so it is
   sized to a laptop viewport rather than to the page rhythm: tighter rails,
   a shorter drop under the heading, and less air inside the cards. */
.map-section .map-heading { gap: 11px; margin-bottom: clamp(14px, 1.6vh, 22px); }
.map-heading h2 { margin: 0; font-size: var(--d2); letter-spacing: -.05em; font-weight: 540; }
.flowmap { position: relative; display: grid; grid-template-columns: 26% 1fr 26%; align-items: center;
  width: min(94%, 1000px); margin: 0 auto clamp(16px, 1.8vw, 26px); }
.fm-beams { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
/* Path and stagger live here, not on the elements: style-src 'self' blocks
   inline style attributes, so in production these darts had no path to travel
   and the hero diagram sat still. data-fm-flow was already on four of the
   eight and referenced nowhere, so it became the hook for all of them. */
.fm-dart[data-fm-flow="0"] { offset-path:path('M260 69 C 320 69, 330 212, 390 212'); animation-delay:0ms; }
.fm-dart[data-fm-flow="1"] { offset-path:path('M260 208 C 320 208, 330 252, 390 252'); animation-delay:220ms; }
.fm-dart[data-fm-flow="2"] { offset-path:path('M260 346 C 320 346, 330 292, 390 292'); animation-delay:440ms; }
.fm-dart[data-fm-flow="3"] { offset-path:path('M260 485 C 320 485, 330 332, 390 332'); animation-delay:660ms; }
.fm-dart[data-fm-flow="4"] { offset-path:path('M610 212 C 670 212, 680 69, 740 69'); animation-delay:500ms; }
.fm-dart[data-fm-flow="5"] { offset-path:path('M610 252 C 670 252, 680 208, 740 208'); animation-delay:720ms; }
.fm-dart[data-fm-flow="6"] { offset-path:path('M610 292 C 670 292, 680 346, 740 346'); animation-delay:940ms; }
.fm-dart[data-fm-flow="7"] { offset-path:path('M610 332 C 670 332, 680 485, 740 485'); animation-delay:1160ms; }
.fm-base { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Each arrow travels once, then remains visible outside the core.
   Static cues also work without JavaScript and with reduced motion. */
.fm-dart { fill: var(--signal); offset-rotate: auto; offset-distance: 92%; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .flowmap.is-visible .fm-dart { animation-name: fm-dart; animation-duration: var(--spring-glide-dur); animation-timing-function: var(--spring-glide); animation-iteration-count: 1; animation-fill-mode: both; }
}
@keyframes fm-dart { from { offset-distance: 0%; } to { offset-distance: 92%; } }

.fm-domains { display: grid; grid-auto-rows: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fm-inputs { grid-column: 1; }
.fm-outputs { grid-column: 3; }
.fm-card { display: grid; align-content: start; gap: 5px; padding: 9px 12px; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--elev-1); }
.fm-card-top { display: flex; align-items: flex-start; gap: 10px; }
.fm-icon { flex: none; margin-top: 2px; color: var(--signal-ink); }
.fm-card h3 { margin: 0; font-size: var(--t-body); line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
.fm-card p { margin: 1px 0 0; color: var(--ink-soft); font-size: var(--t-data); line-height: 1.35; }
.fm-jobs { display: grid; margin: 0; padding: 0; list-style: none; }
.fm-jobs li { padding: 3px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--t-data); line-height: 1.35; }

.fm-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%;
  display: grid; align-content: center; justify-items: center; padding: 24px 18px;
  background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--elev-4); text-align: center; }
/* The header mark, restated on the dark ground. Same paths and dash
   pattern, so the built leg stays solid and the spec leg stays dashed. */
.fm-core-mark { width: 60px; height: 60px; margin-bottom: 12px; }
.fm-core-mark { color: var(--paper); }
.fm-core-brand { font-size: var(--d4); font-weight: 650; letter-spacing: -.025em; }
.fm-core-label { margin-top: 3px; color: var(--on-ink-muted); font-size: var(--t-data); letter-spacing: .01em; }
.fm-core-lockup { display: grid; justify-items: center; gap: 0; }

@media (max-width: 860px) {
  .flowmap { aspect-ratio: auto; }
  .fm-beams { display: none; }
  .flowmap { display: block; }
  .fm-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
  .fm-core { position: static; width: auto; margin: 12px 0; transform: none; }
}
@media (max-width: 520px) {
  .fm-domains { grid-template-columns: minmax(0, 1fr); }
}

/* Selected option B: retain the open process layout and clarify the map. */
[data-wing] #hvac-start .approach-steps h3 { font-size: clamp(22px, 1.7vw, 24px); line-height: 1.2; }
.map-caption { max-width: 60ch; margin: 0 auto clamp(24px, 2.6vw, 34px); color: var(--ink-soft); font-size: var(--t-micro); font-weight: 500; line-height: 1.65; letter-spacing: .065em; text-transform: uppercase; text-align: center; }
@media (max-width: 560px) {
  .hero-map-pillars > li { gap: 10px; padding: 18px 20px; }
  .hm-leaves { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .hm-leaves li { display: inline-flex; align-items: center; max-width: 100%; padding: 0; border: 0; white-space: nowrap; font-size: var(--t-data); line-height: 1.65; }
  .hm-leaves li::before { content: ""; flex: none; width: 3px; height: 3px; margin-right: 8px; border-radius: 50%; background: var(--line-strong); }
}


/* Restored homepage sections: original content with the shared step design. */
.fit-section { background: var(--canvas-deep); }
.fit-grid { display: grid; gap: 48px; }
.fit-heading, .map-heading { display: grid; justify-items: center; gap: 18px; text-align: center; }
.fit-heading h2, .map-heading h2 { max-width: 23ch; margin: 0 auto; font-size: var(--d2); line-height: 1.08; letter-spacing: -.04em; font-weight: 540; }
.fit-heading p, .map-heading > p:not(.eyebrow) { max-width: 62ch; margin: 0 auto; color: var(--ink-soft); font-size: var(--t-lede); }
.fit-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; list-style: none; margin: 0; padding: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.fit-cards li { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.6vw, 38px); background: var(--paper); }
.fit-cards h3 { margin: 0; font-size: var(--d5); line-height: 1.3; letter-spacing: -.018em; font-weight: 650; }
.fit-cards p { max-width: 46ch; margin: 0; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.6; }
#method { background: var(--paper); }
.approach-steps .approach-lead { margin: 0 0 18px; font-size: var(--t-lede); color: var(--ink); line-height: 1.4; }
.approach-footer { display: grid; justify-items: center; gap: 18px; margin-top: 48px; text-align: center; }
.approach-footer-note { color: var(--ink-soft); margin: 0; max-width: 62ch; }
.approach-footer .button { min-width: min(100%, 320px); }
@media (max-width: 760px) { .fit-cards { grid-template-columns: minmax(0, 1fr); } }

#about #recognition { background: transparent; }

/* Restored original after-build section, with the enlarged type scale. */
.stay-section { background: var(--paper); }
.stay-heading { width: min(100%, 79ch); margin: 0 auto clamp(30px, 3.6vh, 44px); text-align: center; }
.stay-heading .eyebrow { margin-bottom: var(--space-4); }
.stay-heading h2 { max-width: 22ch; margin: 0 auto; font-size: var(--d2); line-height: 1.05; letter-spacing: -.05em; font-weight: 540; }
.stay-heading h2 em { display: block; margin-top: 7px; font-family: var(--font-display); font-weight: 400; font-style: normal; }
.stay-heading > p:not(.eyebrow) { max-width: 62ch; margin: 10px auto 0; color: var(--ink-soft); font-size: var(--t-lede); line-height: 1.6; }
.stay-list { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.stay-list li { padding: 26px 30px 30px 0; border-right: 1px solid var(--line); }
.stay-list li + li { padding-left: 30px; }
.stay-list li:last-child { padding-right: 0; border-right: 0; }
.stay-list h3 { margin: 0 0 9px; font-size: var(--d4); line-height: 1.15; letter-spacing: -.03em; font-weight: 540; }
.stay-list p { max-width: 36ch; margin: 0; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.62; }


@media (max-width: 860px) {
  .stay-list { grid-template-columns: 1fr; }
  .stay-list li, .stay-list li + li { padding: 22px 0 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .stay-list li:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Evidence and diagnostic boundaries on the Audit page stay open, never in a disclosure. */
.audit-evidence-note { max-width: 76ch; margin: 28px 0 0; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.6; }

/* ---- Ported pages (combine/frost-plus-language, 8 Oct 2026) ----------
   The AI receptionist page, the HVAC call-answering and local-search pages
   and the /go ad pages came from codex/anteform-text-hero. This branch's
   refresh removed the rules below (the sticky call bar among them) or never
   had them. Copied as they were; they sit on this branch's tokens and the
   [data-wing] 16px scale, which both branches share.
   --------------------------------------------------------------------- */
.hv-math { margin: 0; padding-left: 1.3em; }
.hv-math li { margin-bottom: 10px; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.62; }
.hv-sticky-call { display: none; }
@media (max-width: 760px) and (pointer: coarse) {
  .hv-sticky-call { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--radius-sm); background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 650; text-decoration: none; box-shadow: 0 6px 22px rgba(29,29,25,.22); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-sticky-call { transition: none; }
}
.hv-sample { margin: 22px 0 0; padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper-cool); }
.hv-sample figcaption { margin-bottom: 14px; color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .07em; text-transform: uppercase; }
.hv-sample dl { margin: 0; }
.hv-sample dl > div { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hv-sample dl > div:last-child { border-bottom: 0; }
.hv-sample dt { color: var(--ink-faint); font-size: var(--t-small); }
.hv-sample dd { margin: 0; color: var(--ink); font-size: var(--t-small); line-height: 1.5; }
.hv-sample-foot { margin: 16px 0 0 !important; color: var(--ink-soft); font-size: var(--t-small) !important; }
@media (max-width: 560px) {
  .hv-sample dl > div { grid-template-columns: 1fr; gap: 2px; }
}
.hv-sticky-call { background: var(--signal-ink) !important; }
.hv-beat { margin-top: 20px !important; color: var(--ink) !important; font-size: var(--t-lede) !important; line-height: 1.45 !important; letter-spacing: -.012em; font-weight: 500; }
.lv-measure .hv-beat { color: var(--paper) !important; }
.lv-accent { background: var(--canvas); }
.hv-sample dt { color: var(--signal-ink); }
.hv-script { margin: 20px 0 0; padding: 0; border-left: 2px solid var(--line-strong); }
.hv-script > div { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 9px 0 9px 18px; }
.hv-script dt { margin: 0; padding-top: 2px; color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; }
.hv-script dd { margin: 0; color: var(--ink); font-size: var(--t-small); line-height: 1.55; }
.hv-script .is-ai dt { color: var(--signal-ink); }
@media (max-width: 480px) {
  .hv-script > div { grid-template-columns: 1fr; gap: 2px; padding-left: 14px; }
}
.hv-table-scroll { margin: 20px 0 0; overflow-x: auto; }
.hv-table-scroll:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.hv-compare { width: 100%; min-width: 440px; border-collapse: collapse; }
.hv-compare caption { margin-bottom: 12px; color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.hv-compare th, .hv-compare td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: var(--t-small); line-height: 1.5; }
.hv-compare thead th { color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
.hv-compare tbody th { color: var(--ink-soft); font-weight: 500; padding-right: 18px; }
.hv-compare td { color: var(--ink-soft); }
.hv-compare .is-ours { color: var(--ink); font-weight: 500; }
.hv-compare thead .is-ours { color: var(--signal-ink); }
@media (max-width: 620px) {
  .hv-compare { min-width: 0; }
  .hv-compare th, .hv-compare td { padding: 9px 8px 9px 0; font-size: var(--t-micro); }
  .hv-compare tbody th { padding-right: 10px; }
  .hv-compare caption { white-space: normal; }
}
.ad-header { border-bottom: 1px solid var(--line); background: var(--canvas); }
.ad-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.ad-brand { cursor: default; }
.ad-phone { color: var(--signal-ink); font-size: 16px; font-weight: 650; text-decoration: none; white-space: nowrap; padding: 10px 0; }
.ad-phone:hover, .ad-phone:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.ad-reassure { max-width: 46ch; margin: 14px 0 0 !important; color: var(--ink-soft); font-size: var(--t-small) !important; line-height: 1.55; }
.lv-close .ad-reassure { color: inherit; opacity: .82; }
.ad-founders { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 18px 0 18px; padding: 0; list-style: none; }
.ad-founders li { display: flex; align-items: center; gap: 12px; }
.ad-founders img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--paper-cool); }
.ad-founders strong { display: block; color: var(--ink); font-size: var(--t-body); font-weight: 600; }
.ad-founders span span { color: var(--ink-faint); font-size: var(--t-small); }
.ad-footer { border-top: 1px solid var(--line); padding: 22px 0 96px; color: var(--ink-faint); font-size: 13px; }
.ad-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.ad-footer p { margin: 0; }
.ad-footer a { color: inherit; text-underline-offset: 3px; }
.lv-steps-list p.hv-route { margin-top: 6px; }
.hv-route a { display: inline-block; padding: 11px 0; color: var(--signal-ink); font-weight: 650; text-underline-offset: 4px; }
.hv-route a::after { content: " \2192"; }
/* The sticky call bar sits over the last 76px of the page on a phone; give
   only the pages that carry it the room, so the footer is never covered. */
@media (max-width: 760px) and (pointer: coarse) { body:has(.hv-sticky-call) { padding-bottom: 76px; } }
/* Missed by the first port: they are scoped to [data-wing] or follow a list,
   so a class-by-class check could not see them. The teal call button is the
   one accent on the wing pages. */
[data-wing] .button.hv-call { background: var(--signal-ink); color: var(--paper); border-color: var(--signal-ink); }
[data-wing] .button.hv-call:hover, [data-wing] .button.hv-call:focus-visible { background: var(--signal); border-color: var(--signal); }
.hv-plain { margin: 14px 0 0; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.6; max-width: 58ch; }
.lv-list + .hv-note, .lv-steps-list + .hv-note { margin-top: 22px !important; }
/* The line under the hero button answers the fear of being sold to (rule E2).
   Centred like the rest of the opening. */
.opening-hero .ad-reassure { margin: 18px auto 0 !important; max-width: 52ch; }

/* Owner review, 12 Oct: service pages share the homepage/Audit hierarchy.
   Keep open process columns; only the Audit retains its accepted panel.
   The ad pages keep their compact, phone-first layout. */
.service-page .lv-wrap { width: min(100% - 48px, 1120px); }
.service-page .lv-hero { padding-block: clamp(72px, 10vh, 120px); text-align: center; }
.service-page .lv-hero .lv-wrap > p { margin-inline: auto; }
.service-page .lv-hero h1 { max-width: 24ch; margin: 18px auto 0; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.06; letter-spacing: -.045em; }
.service-page .lv-lede { max-width: 62ch; margin: 24px auto 0; font-size: 18px; line-height: 1.65; }
.service-page .lv-hero .hv-note { max-width: 66ch; margin: 18px auto 0; font-size: var(--t-body); line-height: 1.6; }
.service-page .hv-cta-row { justify-content: center; }
.service-page .lv-hero .ad-reassure, .service-page .lv-close .ad-reassure { margin-inline: auto !important; }
.service-page [data-wing] .button.hv-call { background: var(--ink); border-color: var(--ink); }
.service-page [data-wing] .button.hv-call:hover, .service-page [data-wing] .button.hv-call:focus-visible { background: var(--signal-ink); border-color: var(--signal-ink); }
.service-page .lv-section { padding-block: clamp(80px, 8.75vw, 126px); }
.service-page .lv-section h2 { max-width: 30ch; margin: 0 auto 32px; text-align: center; font-size: clamp(28px, 3vw, 40px); font-weight: 540; }
.service-page .lv-section .lv-wrap > p { max-width: 68ch; margin-inline: auto; }
.service-page .lv-list, .service-page .faq-list, .service-page .hv-sample, .service-page .ad-founders, .service-page .hv-table-scroll, .service-page .disclosure { max-width: 78ch; margin-inline: auto; }
.service-page .lv-list li { max-width: none; }
.service-page .lv-steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.service-page .lv-steps-list > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; min-width: 0; max-width: none; padding: 24px 0 0; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.service-page .lv-steps-list h3 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 540; }
.service-page .lv-steps-list p { margin: 0; font-size: 16px; line-height: 1.65; }
.service-page .lv-steps-list p.hv-route { grid-row: auto; margin-top: 8px; }
.service-page .lv-close { text-align: center; }
.service-page .lv-close .hv-plain { margin-inline: auto; }
.service-page .ad-founders { justify-content: center; }

@media (min-width: 1280px) {
  .service-page .lv-steps-list:has(> li:nth-child(4)):not(:has(> li:nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 680px) and (max-width: 959px) {
  .service-page .lv-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 679px) {
  .service-page .lv-wrap { width: calc(100% - 32px); }
  .service-page .lv-hero { padding-block: 56px 64px; }
  .service-page .lv-hero h1 { font-size: clamp(34px, 9vw, 48px); }
  .service-page .lv-lede { font-size: 17px; }
  .service-page .lv-section { padding-block: 72px; }
  .service-page .lv-section h2 { max-width: none; font-size: 30px; }
  .service-page .lv-steps-list { display: block; }
  .service-page .lv-steps-list > li { display: block; padding-block: 22px; }
  .service-page .lv-steps-list h3 { margin-bottom: 12px; }
}

/* Allow the full Discovery Audit label to stay on one line above the
   existing mobile-menu breakpoint; without JS the nav remains scrollable. */
@media (min-width: 801px) {
  .site-nav a { white-space: nowrap; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .nav-cluster, .site-nav { gap: 12px; }
  .header-cta { padding-inline: 14px; }
}

/* ---------------------------------------------------------------------
   Final pass, 12 Oct: spring choreography for the service pages, two
   explanatory pictures, colour with meaning and dark closing bands.
   Every timing here is a --spring-* token from the generated block (see
   DESIGN.md "Motion"). Nothing loops. Reduced motion and no-JS stay still,
   and content is never hidden while it waits to be observed.
   --------------------------------------------------------------------- */

/* One booking button across the service pages, matching the receptionist. */
.service-page .button.hv-call { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.service-page .button.hv-call:hover,
.service-page .button.hv-call:focus-visible { background: var(--signal-ink); border-color: var(--signal-ink); }

/* Section prose shares one physical measure, so a larger beat line keeps the
   same left edge as the paragraph above it. */
.service-page { --service-prose: 680px; }
.service-page .lv-section .lv-wrap > p,
.service-page .lv-section .lv-wrap > .lv-list,
.service-page .lv-section .lv-wrap > .faq-list,
.service-page .lv-section .lv-wrap > .ad-founders,
.service-page .lv-section .lv-wrap > .disclosure,
.service-page .lv-section .lv-wrap > .hv-math { width: min(100%, var(--service-prose)); max-width: none; margin-inline: auto; }

/* Short headings keep the process columns tight. */
@media (min-width: 680px) {
  .service-page .lv-steps-list > li { row-gap: 12px; }
}

/* Dark closing band on every service page, like the homepage close. */
.service-page .lv-close { background: var(--ink); }
.service-page .lv-close h2 { color: var(--paper); }
.service-page .lv-close p,
.service-page .lv-close .ad-reassure { color: var(--on-ink-muted); opacity: 1; }
.service-page .lv-close .hv-local { color: var(--on-ink-faint); }
.service-page .lv-close a:not(.button) { color: var(--paper); }
.service-page .lv-close .button.hv-call { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.service-page .lv-close .button.hv-call:hover,
.service-page .lv-close .button.hv-call:focus-visible { background: var(--canvas); border-color: var(--canvas); color: var(--ink); }
.service-page .lv-close :focus-visible { outline-color: var(--paper); }

/* Lists inside an ink band read on the on-ink ramp. */
.lv-measure .lv-list li { color: var(--on-ink-muted); border-color: var(--ink-line); }
.lv-measure .lv-list strong { color: var(--paper); }
.lv-measure .hv-note { color: var(--on-ink-faint) !important; }
.lv-measure a { color: var(--paper); }

/* A soft signal wash behind the section that explains the work. */
.service-wash { position: relative; isolation: isolate; }
.service-wash::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal-soft); pointer-events: none; }

/* Status tags: colour always paired with words. */
.state-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-xs);
  font-size: var(--t-meta); font-weight: 650; line-height: 1.45; letter-spacing: .01em; white-space: nowrap; }
.state-tag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state-tag.is-review { background: var(--review-soft); color: var(--review-ink); }
.state-tag.is-mismatch { background: var(--failure-soft); color: var(--failure); }
.state-tag.is-match { background: var(--healthy-soft); color: var(--healthy-ink); }

/* Picture one: a missed call becomes a job note (the inquiry-path component). */
.service-page .inquiry-path { margin: 44px auto 0; box-shadow: var(--elev-2); }
.inquiry-path .ip-title { margin: 0 0 7px; }
.inquiry-path .ip-line { margin: 0; font-size: var(--t-small); }
.inquiry-path .ip-state { margin: 12px 0 0; }

/* Picture two: one business, four listings. */
.listing-picture { width: min(100%, 980px); margin: 44px auto 0; }
.listing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.listing-card { min-width: 0; padding: 16px 16px 14px; background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); box-shadow: var(--elev-1); }
.listing-card.is-off { border-color: var(--failure); }
.listing-card h3 { margin: 0 0 12px; font-size: var(--t-small); line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
.listing-card dl { display: grid; gap: 9px; margin: 0; }
.listing-card dl > div { display: grid; gap: 2px; }
.listing-card dt { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: .04em; text-transform: uppercase; }
.listing-card dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; color: var(--ink); font-size: var(--t-small); line-height: 1.4; }
.listing-picture .listing-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px;
  max-width: none; margin: 18px 0 0; color: var(--ink-soft); font-size: var(--t-small); }
@media (max-width: 959px) { .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) {
  .listing-grid { gap: 10px; }
  .listing-card { padding: 12px 12px 11px; }
}
@media (max-width: 359px) { .listing-grid { grid-template-columns: 1fr; } }

/* Dated research findings. */
.checked-tag { display: block; margin-top: 6px; color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .04em; }

/* The phone sits only in the closing booking group. */
.final-phone { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--paper);
  font-size: var(--t-small); text-underline-offset: 4px; }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* Openings are short enough to centre at every width (14 Oct: three lines or
   fewer at 390px). Until then, long intros were left-aligned on phones. */

/* The sticky booking bar clears the home indicator and the last content. */
@media (max-width: 760px) and (pointer: coarse) {
  .service-page .hv-sticky-call { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .service-page:has(.hv-sticky-call) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* The brand mark: its four real paths assemble once. */
.brand-mark path { transform-box: fill-box; transform-origin: center; }
.hm-mark path:nth-child(1), .fm-core-mark path:nth-child(1) { --mark-x: 230px; --mark-y: -170px; --mark-r: 9deg; }
.hm-mark path:nth-child(2), .fm-core-mark path:nth-child(2) { --mark-x: -210px; --mark-y: -140px; --mark-r: -12deg; }
.hm-mark path:nth-child(3), .fm-core-mark path:nth-child(3) { --mark-x: 220px; --mark-y: 160px; --mark-r: -6deg; }
.hm-mark path:nth-child(4), .fm-core-mark path:nth-child(4) { --mark-x: -240px; --mark-y: 170px; --mark-r: 10deg; }

@keyframes service-hero-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes service-reveal-in { from { opacity: .82; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: .82; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tag-land { from { opacity: .4; transform: translateY(-6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes mark-assemble {
  from { opacity: 0; transform: translate(var(--mark-x, 0px), var(--mark-y, 0px)) rotate(var(--mark-r, 0deg)) scale(.84); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Service heroes settle in on load, CSS only, so there is no flash. */
  .service-page .lv-hero .eyebrow,
  .service-page .lv-hero h1,
  .service-page .lv-hero .lv-lede,
  .service-page .lv-hero .hv-cta-row,
  .service-page .lv-hero .hero-qualifier,
  .service-page .lv-hero .hv-local { animation: service-hero-in var(--spring-settle-dur) var(--spring-settle) both; }
  .service-page .lv-hero h1 { animation-delay: 60ms; }
  .service-page .lv-hero .lv-lede { animation-delay: 130ms; }
  .service-page .lv-hero .hv-cta-row { animation-delay: 200ms; }
  .service-page .lv-hero .hv-local { animation-delay: 260ms; }
  .service-page .lv-hero .hero-qualifier { animation-delay: 230ms; }

  /* Headings and lists arrive once as they are reached. */
  .js .service-page .reveal:not([data-stagger]).is-visible,
  .js .service-page .reveal[data-stagger].is-visible > * { animation-name: service-reveal-in; }

  .js .service-wash::before { opacity: 0; transition: opacity var(--spring-gentle-dur) var(--spring-gentle); }
  .js .service-wash.is-visible::before { opacity: 1; }

  /* Picture one: the line draws, the markers fill, then the tag lands. */
  .js .inquiry-path.is-drawn .state-tag { animation: tag-land var(--spring-land-dur) var(--spring-land) 950ms both; }

  /* Picture two: the listings rise in turn, the mismatch lands, then the fix. */
  .js .listing-picture.is-visible .listing-card { animation: card-in var(--spring-settle-dur) var(--spring-settle) both; }
  .js .listing-picture.is-visible .listing-card:nth-child(2) { animation-delay: 80ms; }
  .js .listing-picture.is-visible .listing-card:nth-child(3) { animation-delay: 160ms; }
  .js .listing-picture.is-visible .listing-card:nth-child(4) { animation-delay: 240ms; }
  .js .listing-picture.is-visible .state-tag.is-mismatch { animation: tag-land var(--spring-land-dur) var(--spring-land) 620ms both; }
  .js .listing-picture.is-visible .listing-after { animation: card-in var(--spring-settle-dur) var(--spring-settle) 1050ms both; }
  .js .listing-picture.is-visible .state-tag.is-match { animation: tag-land var(--spring-land-dur) var(--spring-land) 1250ms both; }

  /* The mark assembles where the homepage map and diagram first appear. */
  .js .hero-map-root.is-visible .hm-mark path,
  .js .flowmap.is-visible .fm-core-mark path { animation: mark-assemble var(--spring-land-dur) var(--spring-land) 120ms both; }
  .js .hero-map-root.is-visible .hm-mark path:nth-child(2),
  .js .flowmap.is-visible .fm-core-mark path:nth-child(2) { animation-delay: 190ms; }
  .js .hero-map-root.is-visible .hm-mark path:nth-child(3),
  .js .flowmap.is-visible .fm-core-mark path:nth-child(3) { animation-delay: 260ms; }
  .js .hero-map-root.is-visible .hm-mark path:nth-child(4),
  .js .flowmap.is-visible .fm-core-mark path:nth-child(4) { animation-delay: 330ms; }
}

/* ---------------------------------------------------------------------
   Owner draft, 13 Oct: formatting notes from Frost's copy export. No new
   panels, assets or motion; the audience line joins the hero stagger.
   --------------------------------------------------------------------- */

/* Homepage: the audience line is its own smaller block under the lede. */
.opening-hero .hero-audience { max-width: 46ch; color: var(--ink); line-height: 1.5; }
.opening-hero .hero-audience strong { font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
  .opening-hero-copy > :nth-child(5) { animation-delay: 240ms; }
}

/* Homepage fit cards: two sentences read as two lines, closer than the heading gap. */
.fit-cards li > p + p { margin-top: -4px; }

/* Receptionist location line: two parts with real spacing; stacked on phones. */
.hv-local-split { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.lv-hero .hv-local-split { max-width: none; }
@media (max-width: 679px) {
  .hv-local-split .hv-local-sep { display: none; }
  .hv-local-split > span { flex-basis: 100%; }
}

/* HVAC overview: the free-conversation sentence starts its own line. */
.lv-lede .lede-line { display: block; margin-top: 10px; }

/* Process columns: a route link gets its own row instead of overlapping the
   paragraph (the subgrid had two rows for three children). */
.service-page .lv-steps-list > li:has(> .hv-route) { grid-row: span 3; }
/* Two columns, not two thirds of three, when a list has exactly two items. */
@media (min-width: 680px) {
  .service-page .lv-steps-list:has(> li:nth-child(2)):not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
}

/* HVAC overview: the contact line is centred under the founder photographs. */
.service-page .lv-section .lv-wrap > p.founders-note { text-align: center; }

/* ---------------------------------------------------------------------
   Owner review, 13 Oct (second pass): the opening screen at 110%, as if
   zoomed in; "With your people in control." on its own line; the audience
   line under the buttons; a quiet line into the checker.
   --------------------------------------------------------------------- */
.opening-hero .hero-eyebrow { font-size: 13.2px; }
.opening-hero h1 { font-size: clamp(44px, 4.95vw, 75px); }
.opening-hero .opening-hero-lede { font-size: 19.8px; }
.opening-hero .hero-actions .button { min-height: 51px; padding: 12px 19px; font-size: 14.3px; }
.opening-hero .hero-text-link { font-size: 17.6px; }
@media (max-width: 600px) {
  .opening-hero h1 { font-size: clamp(40px, 9.9vw, 53px); }
  .opening-hero .opening-hero-lede { font-size: 18.7px; }
}

.opening-hero-lede .lede-line { display: block; margin-top: 4px; }

.opening-hero .hero-audience { max-width: none; margin: 30px auto 0; font-size: 16.5px; text-wrap: balance; }
@media (min-width: 1024px) {
  .opening-hero .hero-audience { white-space: nowrap; }
}
@media (max-width: 620px) {
  .opening-hero .hero-audience { margin-top: 24px; }
}

.checker-prompt { max-width: 62ch; margin: clamp(28px, 3vw, 40px) auto 0; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.6; text-align: center; }
.checker-prompt a { color: var(--signal-ink); font-weight: 650; text-underline-offset: 4px; }
@media (max-width: 679px) { .checker-prompt { text-align: left; } }

/* ---------------------------------------------------------------------
   Owner review, 13 Oct (third pass): more room in the hero, a larger
   booking button, centred service-page prose on wider screens, room
   around the comparison table, and the Bottleneck checker card.
   --------------------------------------------------------------------- */
.opening-hero h1 { margin-bottom: clamp(26px, 2.5vw, 36px); }
.opening-hero .hero-audience { margin-top: clamp(44px, 4.4vw, 64px); }
/* The booking button's label matches "See How It Works" (17.6px). */
.opening-hero .hero-actions .button { min-height: 58px; padding: 15px 30px; font-size: 17.6px; }

/* Service pages centre their prose like the rest of the site; long text
   stays left-aligned on phones, where centred lines are hard to read. */
@media (min-width: 680px) {
  .service-page .lv-section .lv-wrap > p { text-align: center; }
  .service-page .hv-compare caption { text-align: center; }
}
.service-page .lv-section .lv-wrap > p + p:not(.hv-beat) { margin-top: 18px; }
.service-page .lv-section .lv-wrap > .hv-table-scroll { margin-top: clamp(36px, 4vw, 52px); }
.service-page .hv-compare caption { margin-bottom: 18px; }
.service-page .lv-section .lv-wrap > .hv-table-scroll + p { margin-top: clamp(32px, 3.6vw, 48px) !important; }

/* Bottleneck checker card: small, non-modal, bottom-right, a couple of
   seconds after the page loads (script.js). It never takes focus and
   steps aside while the booking band or footer is on screen. */
.checker-card { position: fixed; right: 24px; bottom: 24px; z-index: 880; width: 340px; padding: 20px 20px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--elev-4); }
.checker-card[hidden] { display: none; }
.checker-card-eyebrow { margin: 0 0 8px; color: var(--signal-ink); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.checker-card-title { margin: 0 36px 8px 0; color: var(--ink); font-size: 19px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.checker-card-body { margin: 0 0 16px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
/* Quieter than Book a Free Call on purpose: one dark button per screen (rule E3). */
.checker-card .checker-card-go { width: 100%; background: var(--signal-soft); border-color: transparent; color: var(--signal-ink); box-shadow: none; }
.checker-card .checker-card-go:hover, .checker-card .checker-card-go:focus-visible { background: var(--signal-ink); color: var(--paper); }
.checker-card-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.checker-card-close:hover, .checker-card-close:focus-visible { background: var(--paper-cool); color: var(--ink); }
.checker-card.is-parked { opacity: 0; pointer-events: none; transform: translateY(12px); }
body.nav-open .checker-card { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .checker-card { transition: transform var(--spring-land-dur) var(--spring-land), opacity var(--spring-fade-dur) var(--spring-fade); }
  .checker-card.is-entering { opacity: 0; transform: translateY(18px); }
}
@media (max-width: 760px) {
  .checker-card { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; padding: 14px 14px 14px 16px; }
  .checker-card-body { display: none; }
  .checker-card-eyebrow { margin-bottom: 4px; }
  .checker-card-title { margin: 0 44px 12px 0; font-size: 17px; }
  .checker-card-close { top: 4px; right: 4px; }
}
/* Laptops and tablets: a compact card, so it clears the hero's last line. */
@media (min-width: 761px) and (max-width: 1279px) {
  .checker-card { width: 380px; }
  .checker-card-body { display: none; }
  .checker-card-title { margin-bottom: 14px; }
}
/* Where a sticky booking bar holds the bottom of a phone screen, the card sits above it. */
@media (max-width: 760px) and (pointer: coarse) {
  body:has(.hv-sticky-call) .checker-card { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------
   Industry pages, 14 Oct: plumbing, electrical and roofing join HVAC.
   Short openings centre at every width; Frost's audience line sits in the
   first section of each industry page; the Industries page lists the trades.
   --------------------------------------------------------------------- */
/* Industries page: the opening centres like every other page's. */
.vertical-intro .shell { text-align: center; }
.vertical-intro h1 { margin-inline: auto; }
.vertical-intro .vertical-lede { margin-inline: auto; }
.examples-intro { max-width: 68ch; margin: 0 auto clamp(26px, 3vw, 36px); color: var(--ink-soft); font-size: var(--t-body); line-height: 1.65; }
@media (min-width: 680px) { .examples-intro { text-align: center; } }

/* A receptionist hero says it is a proposed Build, under the button. */
.service-page .lv-hero .hero-qualifier { max-width: 52ch; margin: 14px auto 0; color: var(--ink-faint); font-size: var(--t-small); line-height: 1.55; }

/* The Audit's own description, moved out of the opening, above the three cards. */
#audit-get > div > p:first-of-type { margin-bottom: 12px; }
#audit-get > div > p.audit-scope { max-width: 70ch; }

/* Frost's audience line: one supporting statement after the first scene,
   centred at every width because it is short. */
.service-page .lv-section .lv-wrap > p + p.audience-line,
.service-page .lv-section .lv-wrap > p.audience-line {
  max-width: 44ch; margin: clamp(30px, 3.2vw, 42px) auto 0; color: var(--ink); font-size: 17px; line-height: 1.55;
  text-align: center; text-wrap: balance;
}
.audience-line strong { font-weight: 650; }
/* HVAC overview: the line moved out of the opening gets room before the two problems. */
.service-page .lv-section .lv-wrap > h2 + p + .lv-steps-list { margin-top: clamp(28px, 3vw, 40px); }

/* Industries page: one row of trade pages. Open columns, no panels. */
.trade-nav { padding-top: clamp(56px, 6vw, 88px); }
.trade-nav h2 { max-width: 26ch; margin: 0 auto 14px; font-size: var(--d3); line-height: 1.06; letter-spacing: -.035em; font-weight: 540; text-align: center; }
.trade-nav h2 + p { max-width: 60ch; margin: 0 auto clamp(30px, 3.4vw, 44px); color: var(--ink-soft); font-size: var(--t-body); line-height: 1.65; text-align: center; }
.trade-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin: 0; padding: 0; list-style: none; }
.trade-links li { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.trade-links .text-link { color: var(--ink); font-size: 19px; }
.trade-links p { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.55; }
@media (max-width: 959px) { .trade-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .trade-links { grid-template-columns: 1fr; gap: 6px; } }

/* Industries page, 14 Oct follow-up: Book a Free Call in the opening, and a
   centred closing group (heading, short paragraph, buttons) like the other
   pages' closes. The examples above keep their own layout. */
.vertical-intro .vertical-actions { margin: clamp(22px, 2.4vw, 30px) auto 0; }
.vertical-next .shell { text-align: center; }
.vertical-next h2, .vertical-next p { margin-inline: auto; }
.vertical-next .booking-actions { justify-content: center; }

/* ---------------------------------------------------------------------
   Round 3, 14 Oct: Frost's review of the local variant.
   --------------------------------------------------------------------- */
/* Room after every list, step row, example or choice, before the line that
   follows it; and a little more between a paragraph and the list it introduces. */
.service-page .lv-section .lv-wrap > :is(ul, ol, figure, .faq-list, .problem-fork):not(.ad-founders) + :is(p, .hv-beat, .hv-note) {
  margin-top: clamp(32px, 3.4vw, 44px) !important;
}
.service-page .lv-section .lv-wrap > p + :is(ul, ol):not(.ad-founders) { margin-top: clamp(22px, 2.4vw, 30px); }

/* The sample call reads as a conversation: no side line, the assistant's
   turns tinted, the caller's on paper, each turn with room around it. */
.hv-sample .hv-script { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; border-left: 0; }
.hv-sample .hv-script > div { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.hv-sample .hv-script > div:not(.is-ai) { margin-right: clamp(0px, 5vw, 56px); }
.hv-sample .hv-script > div.is-ai { margin-left: clamp(0px, 5vw, 56px); background: var(--signal-soft); border-color: transparent; }
.hv-sample .hv-script > div:last-child { border-bottom: 1px solid transparent; }
.hv-sample .hv-script dt { padding-top: 0; }
.hv-sample .hv-sample-foot { margin-top: 18px !important; }
@media (max-width: 560px) {
  .hv-sample .hv-script > div { grid-template-columns: 1fr; gap: 4px; padding: 11px 14px; }
}

/* HVAC overview: the two problems are a real choice, so they read as two
   doors, with an "or" between them. The whole door is the link. */
.problem-fork { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch;
  max-width: 980px; margin: clamp(30px, 3.4vw, 44px) auto 0; }
.fork-option { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.8vw, 36px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--elev-1); text-align: left;
  transition: transform var(--spring-land-dur) var(--spring-land), box-shadow var(--spring-fade-dur) var(--spring-fade),
    border-color var(--spring-fade-dur) var(--spring-fade); }
.fork-option:hover, .fork-option:focus-within { transform: translateY(-3px); box-shadow: var(--elev-3); border-color: var(--line-strong); }
.fork-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--signal-soft); color: var(--signal-ink); }
.fork-option .fork-tag { margin: 6px 0 0; color: var(--signal-ink); font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; }
.fork-option h3 { margin: 0; font-size: clamp(22px, 2vw, 26px); line-height: 1.22; letter-spacing: -.02em; font-weight: 560; }
.fork-option p:not(.fork-tag) { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.fork-go { margin-top: auto; padding-top: 10px; color: var(--signal-ink); font-weight: 650; text-underline-offset: 4px; }
.fork-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fork-or { align-self: center; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--paper);
  border: 1px solid var(--line); color: var(--ink-faint); font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 759px) {
  .problem-fork { grid-template-columns: 1fr; gap: 14px; }
  .fork-or { justify-self: center; }
}

/* Two related links read as one group, not two separate thoughts. Each keeps
   its 44px tap target; the pair sits closer than two unrelated paragraphs. */
.service-page .lv-section .lv-wrap > .section-link + .section-link { margin-top: -6px; }

/* ---------------------------------------------------------------------
   Round 6, 14 Oct: the demos sit at the top. A section that opens with an
   example shows it straight after the heading, then the detail below it.
   --------------------------------------------------------------------- */
.service-page .lv-section .lv-wrap > h2 + figure.inquiry-path { margin-top: 8px; }
.service-page .lv-section .lv-wrap > figure.inquiry-path + .lv-steps-list { margin-top: clamp(40px, 4.4vw, 56px); }
.service-page .listing-demo .listing-picture { margin-top: clamp(26px, 3vw, 36px); }
.listing-picture .listing-after { margin-inline: auto !important; max-width: none; }

/* Round 7, 14 Oct: the Audit's report section opens centred, like every other
   opening; the cards below keep their layout. The note under the comparison
   table is a footnote, so it reads like one. */
#audit-get > div > h2 { text-align: center; margin-inline: auto; }
#audit-get > div > p { text-align: center; margin-inline: auto; }
#audit-get > div > p.audit-scope { max-width: 62ch; }
.audit-evidence-note { font-size: var(--t-micro) !important; line-height: 1.55 !important; color: var(--ink-faint) !important; }
.audit-heading h2 + p { margin-top: clamp(14px, 1.6vw, 20px); }