/* Generated by build.py from css/main.css. Edit the source files, not this one. */
/* Entry stylesheet. One file per component so each maps to one component in the production build. */
/* Experius design tokens · v0.1 · 5 Nov 2026
   Source: source-brief.md §8–9 + plan.md §4. Reference: ../design-tokens.md
   Components use semantic tokens only. Never use raw hex or px in component CSS. */

/* Poppins, self-hosted (Latin subset). 400 and 600 are preloaded in the head. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* BRAND. The raw palette, referenced only by the semantic tokens below.
     Charcoal is confirmed from the logo. Orange was confirmed by Samir as "approximately #F26522". */
  --brand-charcoal: #1A1A1A;
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  --brand-orange: #F26522;
  --brand-orange-ink: #C1460B;   /* same hue, darkened so it can be text on light surfaces (5.06:1 on white) */

  /* COLOR: LIGHT SURFACE (default). Named by job, not by hue.
     A dark section swaps these values (see [data-surface="dark"]), so components never change. */
  --color-background: #FFFFFF;
  --color-background-alt: #F5F5F3;      /* alternating light sections */
  --color-surface: #FFFFFF;             /* cards, inputs */
  --color-surface-raised: #FFFFFF;

  --color-text-primary: #1A1A1A;        /* 17.4 on white · 15.9 on alt */
  --color-text-secondary: #666666;      /* 5.74 · 5.26 */
  --color-text-on-action: #1A1A1A;      /* charcoal on orange 5.52. White on orange fails (3.15) */

  --color-action: #F26522;              /* primary button fill */
  --color-action-hover: #F57F45;        /* lighter, so charcoal text gains contrast (6.63) */
  --color-action-pressed: #E0581A;      /* 4.62 with charcoal text */
  --color-link: #C1460B;                /* 5.06 · 4.64 */
  --color-link-hover: #1A1A1A;

  --color-accent: #F26522;              /* decorative only, no meaning (2.89 on alt fails 3:1) */
  --color-accent-ink: #C1460B;          /* active states, icons and indicators that carry meaning */

  /* SECONDARY. Ink blue, the partner to orange. Meaning: "the way out" (better process, numbering).
     Used on the Business Operating Systems page first; a brand-level colour Samir approves before wider use. */
  --brand-ink-blue: #1F4E79;            /* 8.66 on white · 7.94 on alt · 7.52 on tint */
  --color-secondary: var(--brand-ink-blue);
  --color-secondary-tint: #E8F0F7;      /* panel behind working detail; charcoal on it 15.1 */

  --color-border: #D4D4D4;              /* dividers, card edges (decorative) */
  --color-border-strong: #858585;       /* input boundaries, needs 3:1 (3.69 · 3.38) */
  --color-focus: #C1460B;               /* focus ring, 4.64 on alt */

  /* Feedback. Always paired with an icon and text, never colour alone. Error is red, not orange, so it isn't confused with the accent. */
  --color-error: #B42318;               /* 6.57 · 6.02 */
  --color-error-bg: #FEF3F2;
  --color-success: #067647;             /* 5.69 · 5.21 */
  --color-success-bg: #ECFDF3;
  --color-warning: #B54708;             /* 5.43 · 4.97 */
  --color-warning-bg: #FFFAEB;
  --color-info: #175CD3;                /* 5.99 · 5.48 */
  --color-info-bg: #EFF8FF;

  --color-state-hover: rgb(26 26 26 / 0.06);  /* tint behind secondary buttons and nav items on hover */
  --color-overlay: rgb(26 26 26 / 0.6); /* behind the mobile menu */

  /* TYPOGRAPHY. Poppins only, per the brief. Sizes scale fluidly from 375px to 1280px viewports,
     so no breakpoint jumps. Ranges follow brief §8.5 (mobile → desktop). */
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-body);

  --text-xs: 0.8125rem;                                         /* 13 · captions, metadata only */
  --text-sm: 0.875rem;                                          /* 14 · UI floor */
  --text-base: clamp(1rem, 0.9741rem + 0.1105vw, 1.0625rem);   /* 16→17 body */
  --text-lg: clamp(1.125rem, 1.073rem + 0.221vw, 1.25rem);      /* 18→20 lead paragraph */
  --text-xl: clamp(1.3125rem, 1.183rem + 0.5525vw, 1.625rem);   /* 21→26 H3 */
  --text-2xl: clamp(1.75rem, 1.439rem + 1.326vw, 2.5rem);       /* 28→40 H2 */
  --text-3xl: clamp(2.25rem, 1.784rem + 1.989vw, 3.375rem);     /* 36→54 H1 */
  --text-4xl: clamp(2.5rem, 1.775rem + 3.094vw, 4.25rem);       /* 40→68 homepage display */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;          /* headings */
  --font-weight-bold: 700;              /* display only */

  --line-height-tight: 1.1;             /* display, H1, H2 */
  --line-height-snug: 1.3;              /* H3, labels, buttons */
  --line-height-normal: 1.6;            /* body */

  --letter-spacing-heading: -0.02em;
  --letter-spacing-eyebrow: 0.08em;     /* uppercase eyebrows only. Headings stay sentence case */

  /* SPACING. 4px base (brief §8.6). Use the small steps inside components and the large steps between them. */
  --space-hairline: 0.25rem;            /* 4 */
  --space-tight: 0.5rem;                /* 8 */
  --space-snug: 0.75rem;                /* 12 */
  --space-base: 1rem;                   /* 16 */
  --space-comfortable: 1.5rem;          /* 24 */
  --space-roomy: 2rem;                  /* 32 */
  --space-spacious: 3rem;               /* 48 */
  --space-generous: 4rem;               /* 64 */
  --space-vast: 5rem;                   /* 80 */
  --space-section: clamp(4rem, 2.55rem + 6.188vw, 7.5rem);   /* 64→120 between page sections */

  /* LAYOUT. The 4/8/12-column grid switches at these breakpoints. Media queries can't read
     custom properties, so the values are fixed: 480 · 768 · 1024 · 1440 (brief §7.7). */
  --container-max: 75rem;               /* 1200 */
  --measure: 45rem;                     /* 720, reading width */
  --gutter: clamp(1rem, 0.5856rem + 1.768vw, 2rem);          /* 16→32 page side padding */
  --grid-gap: var(--space-comfortable);
  --header-height: 4.5rem;
  --target-min: 2.75rem;                /* 44px minimum touch target */

  /* RADIUS. Mostly square geometry, echoing the EX mark. Pills only for small tags. */
  --radius-sm: 6px;                     /* buttons, inputs, tags */
  --radius-md: 10px;                    /* cards */
  --radius-lg: 14px;                    /* large panels, mobile menu sheet, diagram frames */
  --radius-full: 999px;                 /* avatars, step numbers */

  /* ELEVATION. Restrained (brief §8.7). Prefer a border. Use a shadow only to show layering. */
  --shadow-sm: 0 1px 2px rgb(26 26 26 / 0.06);
  --shadow-md: 0 4px 16px rgb(26 26 26 / 0.08);
  --shadow-lg: 0 12px 40px rgb(26 26 26 / 0.16);  /* menu panel, dropdowns */

  --focus-width: 3px;                   /* drawn as an outline, so it survives Windows high-contrast mode */
  --focus-offset: 2px;

  /* MOTION. One easing curve, three durations. Animate transform and opacity only.
     Slow tops out at 450ms: a mid-range Android on mobile data (an assumption, not yet confirmed)
     keeps it smooth, and anything longer starts holding content back. */
  --duration-fast: 150ms;               /* hover, press, colour changes */
  --duration-default: 250ms;            /* menus, accordions, dropdowns */
  --duration-slow: 450ms;               /* explanatory steps in the system diagram, scroll reveal */
  --ease: cubic-bezier(0.2, 0, 0, 1);   /* fast start, gentle stop */
  --reveal-distance: 12px;

  /* LAYERS */
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-menu: 400;
  --z-skip-link: 500;
}

/* DARK SURFACE. Put data-surface="dark" on any section (hero, CTA band, footer) and every
   component inside it flips. The same mechanism powers an OS dark mode later if it's ever wanted. */
[data-surface="dark"] {
  --color-background: #1A1A1A;
  --color-background-alt: #222222;
  --color-surface: #292929;             /* brief's Graphite */
  --color-surface-raised: #333333;      /* no orange text here (4.01) */

  --color-text-primary: #F5F5F3;        /* 15.9 · 13.3 on surface */
  --color-text-secondary: #A3A3A3;      /* 6.90 · 5.77 on surface */
  --color-text-on-action: #1A1A1A;

  --color-link: #F26522;                /* 5.52 · 4.61 on surface */
  --color-link-hover: #F5F5F3;

  --color-accent: #F26522;
  --color-accent-ink: #F26522;

  --color-secondary: #8DB4DD;           /* 6.72 on surface · 8.04 on charcoal */
  --color-secondary-tint: rgb(141 180 221 / 0.12);

  --color-border: #3A3A3A;
  --color-border-strong: #8A8A8A;       /* 5.04 · 4.21 on surface */
  --color-focus: #F26522;
  --color-state-hover: rgb(245 245 243 / 0.08);

  --color-error: #F97066;
  --color-error-bg: #3B1A1A;
  --color-success: #47CD89;
  --color-success-bg: #12291E;
  --color-warning: #FDB022;
  --color-warning-bg: #33260C;
  --color-info: #84ADFF;
  --color-info-bg: #16233D;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.5);

  background-color: var(--color-background);
  color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-default: 0.01ms;
    --duration-slow: 0.01ms;
    --reveal-distance: 0px;
  }
  *, *::before, *::after { transition-delay: 0s !important; animation-delay: 0s !important; }
}
/* Base: element defaults only. Anything with a class lives in a component file. */
*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + var(--space-base)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-background);
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); line-height: var(--line-height-tight); }
h2 { font-size: var(--text-2xl); line-height: var(--line-height-tight); }
h3 { font-size: var(--text-xl); line-height: var(--line-height-snug); }
h4 { font-size: var(--text-lg); line-height: var(--line-height-snug); letter-spacing: 0; }

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: var(--font-weight-semibold); }

a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--duration-fast) var(--ease); }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }

/* One focus style everywhere: outline survives forced-colors mode; 3px orange-ink ≥ 4.6:1 on every light surface, orange 4.6–5.5:1 on dark. */
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--color-action); color: var(--color-text-on-action); }

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-spacious) 0; }

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

.skip-link {
  position: absolute; left: var(--space-base); top: var(--space-base); z-index: var(--z-skip-link);
  padding: var(--space-snug) var(--space-base); border-radius: var(--radius-sm);
  background: var(--color-action); color: var(--color-text-on-action); font-weight: var(--font-weight-semibold);
  transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease);
}
.skip-link:focus { transform: none; }

/* Inline SVG icons inherit text colour and size from their context. */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Scroll reveal is enhancement only: hidden state applies just when JS has loaded (html.js). */
.js .reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Safety net: if site.js never runs (html.js but no html.js-ready), revealed content appears anyway after 2.5s. */
.js:not(.js-ready) .reveal { animation: reveal-fallback 0s 2.5s forwards; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
/* Lists styled without bullets keep their list semantics (build.py adds role="list"). */
/* Layout primitives. 4 → 8 → 12 columns at 0 / 768 / 1024 (brief §8.6). */
.container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.section { padding-block: var(--space-section); background: var(--color-background); color: var(--color-text-primary); }
.section--alt { background: var(--color-background-alt); }
.section--tight { padding-block: var(--space-generous); }
.section--flush-top { padding-top: 0; }

/* Vertical rhythm inside a block: children spaced by --stack-space. */
.stack > * + * { margin-top: var(--stack-space, var(--space-base)); }
.stack--sm { --stack-space: var(--space-tight); }
.stack--lg { --stack-space: var(--space-comfortable); }
.stack--xl { --stack-space: var(--space-spacious); }

.cluster { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-snug); align-items: center; }

.grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
/* Grid items may shrink below their content's natural width, so long words wrap instead of widening the page. */
.grid > *, .split > * { min-width: 0; }
@media (min-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
/* Two columns can't hold an odd count evenly: the last card takes the full row instead of sitting alone. */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--gap-lg { gap: var(--space-roomy); }
}

/* Two-column split: text beside a diagram or form. Stacks below 1024. */
.split { display: grid; gap: var(--space-spacious); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 5fr 7fr; gap: var(--space-generous); }
  .split--form { grid-template-columns: 5fr 7fr; }
  .split--center { align-items: center; }
}

.text-secondary { color: var(--color-text-secondary); }
.lead { font-size: var(--text-lg); line-height: var(--line-height-normal); }
.mt-lg { margin-top: var(--space-spacious); }
/* Button. Serves every step that moves a visitor on; the primary variant is reserved for the Business Review CTA.
   States: default · hover · active · focus-visible · disabled · loading. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-tight);
  min-height: var(--target-min);
  padding: var(--space-snug) var(--space-comfortable);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Charcoal on orange (5.52:1). Hover goes lighter, which raises contrast. */
.btn--primary { background: var(--color-action); color: var(--color-text-on-action); }
.btn--primary:hover { background: var(--color-action-hover); color: var(--color-text-on-action); }
.btn--primary:active { background: var(--color-action-pressed); }

.btn--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-text-primary); }
.btn--secondary:hover { background: var(--color-state-hover); color: var(--color-text-primary); }

.btn--sm { min-height: var(--target-min); padding: var(--space-tight) var(--space-base); font-size: var(--text-sm); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--primary[disabled]:hover { background: var(--color-action); }

/* Loading: label stays for screen readers; spinner shows progress. */
.btn.is-loading { cursor: progress; }
.btn.is-loading::before {
  content: ""; width: 1em; height: 1em; border-radius: var(--radius-full);
  border: 2px solid currentColor; border-right-color: transparent;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation-duration: 2s; } }

/* Text link with arrow, for secondary routes ("Explore this journey"). 44px tall hit area on touch. */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-tight); min-height: var(--target-min);
  color: var(--color-link); font-weight: var(--font-weight-semibold); text-decoration: none;
}
.link-arrow .icon { transition: transform var(--duration-fast) var(--ease); }
.link-arrow:hover { color: var(--color-link-hover); text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-snug); align-items: center; }
@media (max-width: 479px) { .btn-row .btn { width: 100%; } }
/* Header. Orientation for visitors who land deep (journey step 2) and the always-visible route to step 7.
   Dark surface on every page so the white logo is consistent.
   States: nav link default/hover/current/focus · dropdown open/closed · mobile menu open/closed. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-background); border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; gap: var(--space-base); min-height: var(--header-height); }

.brand { display: inline-flex; align-items: center; gap: var(--space-snug); min-height: var(--target-min); text-decoration: none; flex: none; }
.brand__mark { height: 28px; width: auto; }
.brand__word { height: 10px; width: auto; }
@media (max-width: 479px) { .brand__word { display: none; } }

/* Desktop navigation from 1100px. Below that the six items plus the CTA don't fit without crowding. */
.primary-nav { display: none; margin-left: auto; }
@media (min-width: 1100px) { .primary-nav { display: block; } }
.nav-list { display: flex; align-items: center; gap: var(--space-hairline); list-style: none; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: var(--space-hairline);
  min-height: var(--target-min); padding: 0 var(--space-snug);
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--color-text-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}
.nav-link:hover { background: var(--color-state-hover); color: var(--color-text-primary); text-decoration: none; }
/* Current page: orange underline bar plus aria-current; not colour alone (the bar is a shape). */
.nav-link[aria-current="page"], .nav-link.is-current { box-shadow: inset 0 -2px 0 var(--color-accent-ink); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
@media (forced-colors: active) { .nav-link[aria-current="page"], .nav-link.is-current { border-bottom: 2px solid CanvasText; } }
/* Without JS the dropdowns still open on hover and keyboard focus; once site.js is ready, clicks take over. */
html:not(.js-ready) .nav-item:hover .nav-sub[hidden], html:not(.js-ready) .nav-item:focus-within .nav-sub[hidden] { display: block; }
.nav-link .icon { width: 1rem; height: 1rem; transition: transform var(--duration-fast) var(--ease); }
.nav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }

.nav-sub {
  position: absolute; top: calc(100% + var(--space-tight)); left: 0; z-index: var(--z-dropdown);
  min-width: 18rem; padding: var(--space-tight); list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.nav-sub[hidden] { display: none; }
.nav-sub a {
  display: block; padding: var(--space-snug) var(--space-base); border-radius: var(--radius-sm);
  color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-weight-medium);
}
.nav-sub a span { display: block; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); font-size: var(--text-xs); margin-top: 2px; }
.nav-sub a:hover { background: var(--color-state-hover); }
.nav-sub a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--color-accent-ink); }

.header-cta { margin-left: auto; white-space: nowrap; }
@media (min-width: 1100px) { .header-cta { margin-left: var(--space-tight); } }
@media (max-width: 359px) { .header-cta { display: none; } }

.menu-toggle {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  min-height: var(--target-min); min-width: var(--target-min); padding: 0 var(--space-snug);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: none;
  color: var(--color-text-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-medium); cursor: pointer;
}
.menu-toggle:hover { background: var(--color-state-hover); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 1100px) { .menu-toggle { display: none; } }
/* JS disabled: the toggle can't work, so a plain link to the footer navigation replaces it. */
.menu-fallback { display: none; }
@media (max-width: 1099px) { html:not(.js) .menu-toggle { display: none; } html:not(.js) .menu-fallback { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-snug); color: var(--color-text-primary); } }
.header-cta__short { display: none; }
@media (max-width: 479px) { .header-cta__long { display: none; } .header-cta__short { display: inline; } }
@media (max-width: 479px) { .menu-toggle__label { display: none; } }

/* Mobile menu: full-height panel under the header, same hierarchy as desktop. */
.mobile-menu {
  position: fixed; inset: var(--header-height) 0 0 0; z-index: var(--z-menu);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-background); border-top: 1px solid var(--color-border);
  padding: var(--space-comfortable) var(--gutter) var(--space-spacious);
}
.mobile-menu[hidden] { display: none; }
@media (min-width: 1100px) { .mobile-menu { display: none !important; } }
.mobile-nav { list-style: none; max-width: 32rem; }
.mobile-nav > li { border-bottom: 1px solid var(--color-border); }
.mobile-nav a, .mobile-nav summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem;
  color: var(--color-text-primary); text-decoration: none; font-size: var(--text-lg); font-weight: var(--font-weight-medium);
  cursor: pointer; list-style: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav details[open] summary .icon { transform: rotate(180deg); }
.mobile-nav summary .icon { transition: transform var(--duration-fast) var(--ease); }
.mobile-nav ul { list-style: none; padding: 0 0 var(--space-snug) var(--space-base); }
.mobile-nav ul a { min-height: var(--target-min); font-size: var(--text-base); color: var(--color-text-secondary); }
/* Current page: a bar as well as the colour, so it isn't signalled by colour alone. */
.mobile-nav a[aria-current="page"] { color: var(--color-link); box-shadow: inset 3px 0 0 var(--color-accent-ink); padding-left: var(--space-snug); }
.mobile-menu .btn { margin-top: var(--space-roomy); max-width: 32rem; }
/* Footer. Second navigation layer (IA Part 3): all audiences, solutions, legal, contact and the location line. */
.site-footer { padding-block: var(--space-spacious) var(--space-roomy); border-top: 1px solid var(--color-border); }
.footer-grid { display: grid; gap: var(--space-roomy); grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-spacious); }
  .footer-brand { grid-column: auto; }
}
.footer-brand img { height: 64px; width: auto; margin-bottom: var(--space-comfortable); }
.footer-brand p { color: var(--color-text-secondary); font-size: var(--text-sm); max-width: 24rem; }
.footer-brand .footer-location { margin-top: var(--space-base); color: var(--color-text-primary); }
.footer-col h2 { font-size: var(--text-sm); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-snug); }
.footer-col ul { list-style: none; }
.footer-col a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm); }
.footer-col a:hover { color: var(--color-link); text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-base); justify-content: space-between; align-items: center;
  margin-top: var(--space-spacious); padding-top: var(--space-comfortable); border-top: 1px solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-base); list-style: none; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-text-secondary); }
.footer-bottom a:hover { color: var(--color-text-primary); }

/* Admin entry: present for the team, invisible in hierarchy. Same size and colour as the fine print, no accent. */
.footer-bottom a.footer-admin { text-decoration: none; color: var(--color-text-secondary); }
.footer-bottom a.footer-admin:hover, .footer-bottom a.footer-admin:focus-visible { text-decoration: underline; color: var(--color-text-secondary); }
/* Breadcrumb. Lets a visitor who landed deep move up one level without the menu (IA Part 3). */
.breadcrumb { padding-top: var(--space-comfortable); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; font-size: var(--text-sm); color: var(--color-text-secondary); }
.breadcrumb li + li::before { content: "/"; margin-inline: var(--space-tight); color: var(--color-text-secondary); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-text-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-text-primary); }
/* Section heading: eyebrow + H2 + intro. The eyebrow names the section's job; headings stay sentence case. */
.eyebrow {
  display: block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-accent-ink);
}
.section-heading { max-width: 48rem; margin-bottom: var(--space-spacious); }
.section-heading > * + * { margin-top: var(--space-base); }
.section-heading p { color: var(--color-text-secondary); font-size: var(--text-lg); }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading--center p { margin-inline: auto; }

/* Statement: a single sentence that closes a section (e.g. "The problem may not be..."). */
.statement { font-size: var(--text-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); max-width: 46rem; margin-top: var(--space-spacious); padding-left: var(--space-comfortable); border-left: 3px solid var(--color-accent); }

/* Point-of-view block: editorial pull statement. */
.pov blockquote { margin: 0; }
.pov blockquote p { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-heading); max-width: 40rem; }
.pov blockquote p + p { color: var(--color-accent-ink); margin-top: var(--space-tight); }
.pov .pov-body { margin-top: var(--space-roomy); color: var(--color-text-secondary); font-size: var(--text-lg); }

/* Smaller heading sizes for H2s inside side columns, where a full section H2 would dominate. */
.heading-sm { font-size: var(--text-xl); line-height: var(--line-height-snug); }
.heading-md { font-size: var(--text-2xl); }
/* Hero. Answers journey step 2 ("what is this, is it for me?") within 10–15 seconds.
   Home uses the dark display hero; inner pages use the light page hero so dark and light alternate. */
.hero { padding-block: var(--space-vast) var(--space-section); }
.hero__grid { display: grid; gap: var(--space-spacious); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-generous); } }
.hero h1 { font-size: var(--text-4xl); font-weight: var(--font-weight-bold); max-width: 14ch; }
.hero .lead { color: var(--color-text-secondary); margin-top: var(--space-comfortable); max-width: 36rem; }
.hero .btn-row { margin-top: var(--space-roomy); }
.cta-note { margin-top: var(--space-base); color: var(--color-text-secondary); }

/* Identity line: tells a visitor who landed deep who Experius is (brief §5.2). */
.identity { margin-top: var(--space-comfortable); padding-top: var(--space-base); border-top: 1px solid var(--color-border); max-width: 44rem; font-size: var(--text-sm); color: var(--color-text-secondary); }

.trust-line { margin-top: var(--space-comfortable); font-size: var(--text-sm); color: var(--color-text-secondary); }
.trust-line span + span::before { content: "·"; margin-inline: var(--space-tight); color: var(--color-accent); }

.page-hero { padding-block: var(--space-spacious) var(--space-generous); }
.page-hero .eyebrow { margin-bottom: var(--space-base); }
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { color: var(--color-text-secondary); margin-top: var(--space-comfortable); max-width: 44rem; }
.page-hero .btn-row { margin-top: var(--space-roomy); }

/* Hero map: scattered touchpoints (dashed, tilted) settle into one connected flow.
   Built from list markup so it reads correctly without CSS or animation. */
.hero-map { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-comfortable); background: var(--color-background-alt); }
.hero-map__label { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.hero-map__scatter { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-top: var(--space-snug); list-style: none; }
.hero-map__scatter li {
  padding: var(--space-hairline) var(--space-snug); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.hero-map__scatter li:nth-child(3n+1) { transform: rotate(-3deg); }
.hero-map__scatter li:nth-child(3n+2) { transform: translateY(6px) rotate(2deg); }
.hero-map__scatter li:nth-child(3n) { transform: rotate(-1deg); }
.hero-map__join { display: flex; align-items: center; gap: var(--space-snug); margin-block: var(--space-comfortable); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.hero-map__join::before, .hero-map__join::after { content: ""; flex: 1; border-top: 1px solid var(--color-border-strong); }
.hero-map__flow { list-style: none; display: grid; gap: var(--space-tight); counter-reset: flow; }
.hero-map__flow li {
  counter-increment: flow; display: flex; align-items: center; gap: var(--space-snug);
  padding: var(--space-tight) var(--space-snug); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); font-size: var(--text-sm); font-weight: var(--font-weight-medium);
}
.hero-map__flow li::before {
  content: counter(flow); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: var(--radius-full); background: var(--color-action); color: var(--color-text-on-action); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
}
/* Stagger: each step arrives in order once the map is visible. */
.js .hero-map.reveal .hero-map__flow li { opacity: 0; transform: translateX(calc(var(--reveal-distance) * -1)); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .hero-map.reveal.is-visible .hero-map__flow li { opacity: 1; transform: none; }
/* Cards. Used only for distinct choices or concepts (brief §7.2), never as decoration.
   Linked cards make the whole card clickable via a stretched link, so the hit area is never smaller than the card.
   States: default · hover · focus-within · empty (see .empty-state). */
.card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-comfortable); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-primary);
}
@media (min-width: 768px) { .card { padding: var(--space-roomy); } }
.card > * + * { margin-top: var(--space-snug); }
.card h3 { font-size: var(--text-xl); }
.card p { color: var(--color-text-secondary); }
.card .card__foot { margin-top: auto; padding-top: var(--space-base); }

.card--link { transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease); }
.card--link:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Ring only for keyboard focus on the card's link, never on mouse click. */
.card--link:has(.stretched:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.card--link .stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link .stretched:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }

/* Symptom card: compact, recognisable problem in the visitor's words. */
.symptom { padding: var(--space-comfortable); }
.symptom h3 { font-size: var(--text-lg); letter-spacing: 0; }
.symptom .symptom__num { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--color-accent-ink); letter-spacing: var(--letter-spacing-eyebrow); }

/* Capability card: the two pillars. Larger, with a list of what it covers. */
.capability h3 { font-size: var(--text-2xl); }
.capability ul, .audience ul, .check-list { list-style: none; display: grid; gap: var(--space-tight); margin-top: var(--space-base); }
.capability li, .audience li, .check-list li { position: relative; padding-left: var(--space-comfortable); color: var(--color-text-primary); }
.capability li::before, .audience li::before, .check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.7em; width: 10px; height: 2px; background: var(--color-accent);
}

.bridge { text-align: center; font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-block: var(--space-roomy) 0; max-width: none; }
.bridge span { color: var(--color-accent-ink); }

/* Audience card: one sentence of context + three problems + "Explore this journey". */
.audience .audience__context { color: var(--color-text-secondary); }
.audience li { color: var(--color-text-secondary); }

/* Work card: evidence label first, so honesty is the first thing read. */
.work-card .work-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-tight); align-items: center; }
.work-card dl { display: grid; gap: var(--space-tight); margin: var(--space-base) 0 0; }
.work-card dt { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.work-card dd { margin: 0; color: var(--color-text-secondary); }

/* Screenshot slot on a work card. Placeholder until approved screens arrive; ratio fixed so nothing shifts when they do. */
.work-card .shot {
  aspect-ratio: 16 / 10; display: grid; place-items: center; padding: var(--space-base); text-align: center;
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-background-alt);
  color: var(--color-text-secondary); font-size: var(--text-sm);
}
.work-card img.shot { padding: 0; border-style: solid; border-color: var(--color-border); object-fit: cover; width: 100%; }

/* Insight card */
.insight-card .insight-card__meta { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-eyebrow); font-weight: var(--font-weight-semibold); }
.insight-card h3 { font-size: var(--text-lg); letter-spacing: 0; }

/* Capability detail: business problem → better process → what may be built → what we need to understand.
   Quiet hierarchy: the story (problem, better process) reads larger; the working detail sits below, smaller.
   Colour jobs: orange-ink labels the friction, ink blue (secondary) labels the way out and the numbers. */
.cap-list { counter-reset: cap; }
.cap-detail { counter-increment: cap; display: grid; gap: var(--space-comfortable); }
.cap-detail h3 { padding-bottom: var(--space-base); border-bottom: 1px solid var(--color-border); }
.cap-detail h3::before {
  content: counter(cap, decimal-leading-zero); content: counter(cap, decimal-leading-zero) / "";
  display: block; margin-bottom: var(--space-hairline); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-eyebrow); color: var(--color-secondary);
}
.cap-detail[id] { scroll-margin-top: calc(var(--header-height) + var(--space-base)); }
.cap-detail dl { display: grid; grid-template-columns: 1fr; gap: var(--space-comfortable) var(--space-spacious); margin: 0; }
@media (min-width: 768px) { .cap-detail dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cap-detail dt { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.cap-detail dd { margin: var(--space-tight) 0 0; line-height: var(--line-height-normal, 1.6); }
/* The story: slightly larger. */
.cap-detail dl > div:nth-child(1) dt { color: var(--color-accent-ink); }
.cap-detail dl > div:nth-child(2) dt { color: var(--color-secondary); }
.cap-detail dl > div:nth-child(-n+2) dd { font-size: var(--text-lg); max-width: 44ch; }
/* The working detail: smaller, set off by a hairline. */
.cap-detail dl > div:nth-child(n+3) { padding-top: var(--space-base); border-top: 1px solid var(--color-border); }
.cap-detail dl > div:nth-child(n+3) dd { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 38ch; }
/* Jump pills. */
.cap-jump { margin-bottom: var(--space-spacious); gap: var(--space-tight); }
.cap-jump a {
  display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-snug);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-weight-medium); text-decoration: none; color: var(--color-text-primary);
}
.cap-jump a:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

/* Person card. Photo placeholder until real, consented team photos exist. */
/* Monogram tile until the real photo arrives (assets/team/<name>.webp, 800x1000; swap the div for an img with the same class). */
.person .person__photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, rgb(242 101 34 / 0.18), transparent 60%), var(--brand-charcoal);
  color: var(--brand-white); font-size: var(--text-3xl); font-weight: var(--font-weight-semibold);
}
.person img.person__photo { width: 100%; height: auto; object-fit: cover; }
.person h3 { font-size: var(--text-lg); letter-spacing: 0; }
.person .person__role { color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }

/* Is / isn't comparison on the Business Review page. Icons + headings carry the meaning, not colour. */
.is-isnt { display: grid; gap: var(--space-base); }
@media (min-width: 768px) { .is-isnt { grid-template-columns: 1fr 1fr; } }
.is-isnt h3 { font-size: var(--text-lg); letter-spacing: 0; display: flex; align-items: center; gap: var(--space-tight); }
.is-isnt ul { list-style: none; display: grid; gap: var(--space-tight); }
.is-isnt li { display: flex; gap: var(--space-tight); color: var(--color-text-secondary); }
.is-isnt li .icon { margin-top: 0.2em; color: var(--color-text-primary); }

/* Empty state: what a list shows before content exists (e.g. no published case studies yet). */
.empty-state {
  padding: var(--space-roomy); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
  text-align: center; color: var(--color-text-secondary);
}
.empty-state h3 { color: var(--color-text-primary); font-size: var(--text-lg); letter-spacing: 0; margin-bottom: var(--space-tight); }
.empty-state p { margin-inline: auto; }

/* Card titles that carry the stretched link keep heading styling; the link state shows on the whole card. */
.card .stretched { color: inherit; text-decoration: none; }
.card--link:hover .stretched { text-decoration: underline; text-decoration-thickness: 1px; }

/* Value list: statements, not choices, so no card borders (brief §7.2). */
.value-list { list-style: none; display: grid; gap: var(--space-comfortable) var(--space-spacious); }
@media (min-width: 768px) { .value-list { grid-template-columns: 1fr 1fr; } }
.value-list li { padding-top: var(--space-base); border-top: 2px solid var(--color-accent); }
.value-list h3 { font-size: var(--text-lg); letter-spacing: 0; }
.value-list p { margin-top: var(--space-hairline); color: var(--color-text-secondary); }

/* Note card: a boundary or principle the visitor should notice (data handling, why we work with installers). */
.card--note { border-left: 3px solid var(--color-accent-ink); }
.card .card__statement { font-size: var(--text-lg); color: var(--color-text-primary); }

.card .card__note-sm { font-size: var(--text-sm); margin-top: auto; padding-top: var(--space-base); }
.section-intro { color: var(--color-text-secondary); margin: calc(var(--space-comfortable) * -1) 0 var(--space-roomy); }

/* Content pillars on Insights: numbered, with one line each. Labels, not filters. */
.pillars { list-style: none; counter-reset: pillar; display: grid; gap: var(--space-base) var(--space-roomy); }
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillars li { counter-increment: pillar; display: grid; gap: var(--space-hairline); padding-top: var(--space-snug); border-top: 1px solid var(--color-border-strong); }
.pillars strong::before { content: counter(pillar, decimal-leading-zero) "  "; color: var(--color-accent-ink); font-size: var(--text-xs); letter-spacing: var(--letter-spacing-eyebrow); }
.pillars span { color: var(--color-text-secondary); font-size: var(--text-sm); }

.social-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-top: var(--space-snug); }
.social-links a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-base); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.social-links a:hover { border-color: var(--color-text-primary); }
/* Evidence labels. The brief's honesty rule made visible: every piece of work says what it is.
   Text carries the meaning; the border style adds a second cue (solid = real, dashed = illustrative). */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-hairline);
  padding: 2px var(--space-tight); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-primary); max-width: 100%;
}
.tag--client { border-color: var(--color-text-primary); }
.tag--demo, .tag--experiment, .tag--illustrative, .tag--prelaunch { border-style: dashed; color: var(--color-text-secondary); }
.tag--context { border-color: transparent; padding-inline: 0; color: var(--color-text-secondary); }

/* "Delivered" labels on work cards: small outlined chips under the description list. */
.work-card__scope { margin-top: var(--space-snug); gap: var(--space-tight); }
.work-card__scope .tag--context { border: 1px solid var(--color-border); padding-inline: var(--space-tight); }


/* Prototype notice on screens where behaviour is simulated (the form). */
.proto-note {
  display: flex; gap: var(--space-tight); align-items: flex-start;
  padding: var(--space-snug) var(--space-base); border-radius: var(--radius-sm);
  background: var(--color-info-bg); color: var(--color-text-primary); font-size: var(--text-sm);
  border-left: 3px solid var(--color-info);
}
.proto-note .icon { color: var(--color-info); margin-top: 0.15em; }

.tag--link { text-decoration: underline; text-underline-offset: 0.2em; min-height: var(--target-min); }
.tag--link:hover { color: var(--color-text-primary); }
/* System explanation components (brief §9.2). All are list markup first, so the meaning survives
   without CSS, without animation and for screen readers. Motion only shows disconnected → connected. */

/* Before / after: "The business behind the business". */
.shift { display: grid; gap: var(--space-roomy); align-items: stretch; }
@media (min-width: 1024px) { .shift { grid-template-columns: 1fr auto 1fr; gap: var(--space-spacious); } }
.shift__panel { padding: var(--space-comfortable); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
@media (min-width: 768px) { .shift__panel { padding: var(--space-roomy); } }
.shift__panel h3 { font-size: var(--text-lg); letter-spacing: 0; }
.shift__panel > p { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: var(--space-tight); }
.shift__panel--before { border-style: dashed; border-color: var(--color-border-strong); background: transparent; }
.scatter { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-snug) var(--space-tight); margin-top: var(--space-comfortable); padding-block: var(--space-tight); }
.scatter li { padding: var(--space-tight) var(--space-snug); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-secondary); background: var(--color-background); }
.scatter li:nth-child(4n+1) { transform: rotate(-4deg); }
.scatter li:nth-child(4n+2) { transform: translateY(8px) rotate(3deg); }
.scatter li:nth-child(4n+3) { transform: rotate(1deg); }
.scatter li:nth-child(4n) { transform: translateY(-4px) rotate(-2deg); }
.shift__arrow { display: grid; place-items: center; color: var(--color-accent-ink); }
.shift__arrow .icon { width: 2rem; height: 2rem; transform: rotate(90deg); }
@media (min-width: 1024px) { .shift__arrow .icon { transform: none; } }

/* Connected flow: a vertical chain where each step is joined to the next by a line. */
.chain { list-style: none; margin-top: var(--space-comfortable); counter-reset: chain; }
.chain li { position: relative; counter-increment: chain; display: flex; align-items: center; gap: var(--space-snug); padding-bottom: var(--space-snug); font-weight: var(--font-weight-medium); }
.chain li::before {
  content: counter(chain); position: relative; z-index: 1; display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--color-action); color: var(--color-text-on-action);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
}
.chain li:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; border-left: 2px solid var(--color-accent); }
.js .shift.reveal .chain li { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 200ms); }
.js .shift.reveal.is-visible .chain li { opacity: 1; transform: none; }

/* Inline flow: "Expertise → Insight → Content → Trust". Wraps on small screens; arrows are decorative. */
.flow-inline { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); }
.flow-inline li { display: inline-flex; align-items: center; gap: var(--space-tight); }
.flow-inline li span { padding: var(--space-tight) var(--space-snug); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.flow-inline li + li::before { content: "→"; content: "→" / ""; color: var(--color-accent-ink); font-weight: var(--font-weight-semibold); }
.flow-inline--highlight li:last-child span, .flow-inline--start li:first-child span { background: var(--color-action); color: var(--color-text-on-action); border-color: var(--color-action); }
.flow-frame { padding: var(--space-comfortable); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background-alt); }
.flow-frame figcaption { margin-top: var(--space-base); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Journey map with friction points. Two columns from 768px: the step, and where it can break.
   A break point is marked with an icon and the words "Can break here", never colour alone. */
.journey { list-style: none; counter-reset: jstep; border-top: 1px solid var(--color-border); }
.journey > li { counter-increment: jstep; display: grid; gap: var(--space-tight); padding-block: var(--space-base); border-bottom: 1px solid var(--color-border); }
@media (min-width: 768px) { .journey > li { grid-template-columns: minmax(12rem, 2fr) 3fr; gap: var(--space-comfortable); align-items: start; } }
.journey__step { display: flex; align-items: center; gap: var(--space-snug); font-weight: var(--font-weight-semibold); }
.journey__step::before {
  content: counter(jstep, decimal-leading-zero); flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); font-size: var(--text-xs); color: var(--color-text-secondary);
}
.journey__note { color: var(--color-text-secondary); }
.journey > li.is-friction .journey__step::before { background: var(--color-action); border-color: var(--color-action); color: var(--color-text-on-action); }
.journey__break { display: flex; gap: var(--space-tight); align-items: flex-start; }
.journey__break strong { color: var(--color-accent-ink); white-space: nowrap; }
.journey__break .icon { color: var(--color-accent-ink); margin-top: 0.15em; }
.journey-legend { display: flex; flex-wrap: wrap; gap: var(--space-base); margin-bottom: var(--space-base); font-size: var(--text-sm); color: var(--color-text-secondary); }
.journey-legend span { display: inline-flex; align-items: center; gap: var(--space-tight); }
.journey-legend i { width: 0.9rem; height: 0.9rem; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); }
.journey-legend i.is-friction { background: var(--color-action); border-color: var(--color-action); }

/* Process steps: Understand → Diagnose → Design → Build → Improve. Five columns on desktop, a line joins them. */
.process { list-style: none; display: grid; gap: var(--space-comfortable); counter-reset: pstep; }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(5, 1fr); gap: var(--space-base); } }
.process li { position: relative; counter-increment: pstep; padding-left: calc(2.75rem + var(--space-base)); }
@media (min-width: 1024px) { .process li { padding-left: 0; padding-top: calc(2.75rem + var(--space-base)); } }
.process li::before {
  content: counter(pstep, decimal-leading-zero); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background: var(--color-background); border: 2px solid var(--color-accent);
  font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
}
.process li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 2.75rem; bottom: calc(var(--space-comfortable) * -1); border-left: 2px solid var(--color-border-strong); }
@media (min-width: 1024px) { .process li:not(:last-child)::after { left: 2.75rem; right: calc(var(--space-base) * -1); top: calc(1.375rem - 1px); bottom: auto; border-left: 0; border-top: 2px solid var(--color-border-strong); } }
.process h3 { font-size: var(--text-lg); letter-spacing: 0; }
.process p { margin-top: var(--space-hairline); color: var(--color-text-secondary); }

/* Rule of Work (Our Approach): large numbered stages with detail. */
.rule { list-style: none; counter-reset: rule; }
.rule > li { counter-increment: rule; display: grid; gap: var(--space-base); padding-block: var(--space-spacious); border-top: 1px solid var(--color-border); }
@media (min-width: 1024px) { .rule > li { grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-spacious); } }
.rule__head::before { content: counter(rule, decimal-leading-zero); display: block; font-size: var(--text-3xl); font-weight: var(--font-weight-semibold); line-height: 1; color: var(--color-accent-ink); margin-bottom: var(--space-snug); }
.rule__head :is(h2, h3) { font-size: var(--text-2xl); }
.rule__head p { margin-top: var(--space-tight); color: var(--color-text-secondary); }
.rule .rule__label { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-eyebrow); color: var(--color-text-secondary); margin-bottom: var(--space-snug); }

/* Stacked process: always vertical, for narrow columns (Business Review, Thank-you). */
@media (min-width: 1024px) {
  .process--stacked { grid-template-columns: 1fr; gap: var(--space-comfortable); }
  .process--stacked li { padding-top: 0; padding-left: calc(2.75rem + var(--space-base)); }
  .process--stacked li:not(:last-child)::after { left: calc(1.375rem - 1px); right: auto; top: 2.75rem; bottom: calc(var(--space-comfortable) * -1); border-top: 0; border-left: 2px solid var(--color-border-strong); }
}
/* Screen demo frame. Shows what happens in a system, built with synthetic data and labelled as such.
   A plain frame, not a browser mock-up, so it can't be mistaken for a client's live screen. */
.demo-frame { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.demo-frame__bar { display: flex; flex-wrap: wrap; gap: var(--space-tight); justify-content: space-between; align-items: center; padding: var(--space-snug) var(--space-base); border-bottom: 1px solid var(--color-border); background: var(--color-background-alt); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.demo-legend { max-width: none; padding: var(--space-snug) var(--space-base); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); }
.demo-legend b { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.demo-frame__body { padding: var(--space-base); overflow-x: auto; }
.demo-frame__body:focus-visible { outline-offset: calc(var(--focus-width) * -1); }
.demo-frame__caption { padding: var(--space-snug) var(--space-base); border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-secondary); }

/* Pipeline board: columns of stages. Scrolls sideways inside its frame on narrow screens, with a visible cue. */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr); gap: var(--space-snug); list-style: none; }
.board__col { background: var(--color-background-alt); border-radius: var(--radius-md); padding: var(--space-snug); }
.board__col .board__title { display: flex; justify-content: space-between; align-items: center; gap: var(--space-tight); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-tight); }
.board__col ul { list-style: none; display: grid; gap: var(--space-tight); }
.board__title span { padding: 0 var(--space-tight); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); }
.board__card { padding: var(--space-snug) var(--space-base); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); }
.board__card b { display: block; font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
.board__card small { display: block; color: var(--color-text-secondary); font-size: var(--text-xs); margin-top: 2px; }
.board__card .next { display: inline-flex; gap: var(--space-hairline); margin-top: var(--space-tight); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-accent-ink); }
.board__card.is-overdue { border-left: 3px solid var(--color-warning); }
.board__card.is-overdue .next { color: var(--color-warning); }
.scroll-cue { display: none; font-size: var(--text-xs); color: var(--color-text-secondary); padding: 0 var(--space-base) var(--space-snug); }
@media (max-width: 1279px) { .scroll-cue { display: block; } }

/* Inquiry table: one record per inquiry, owner and next action always visible. */
.records { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 36rem; }
.records th { text-align: left; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); padding: var(--space-tight) var(--space-snug); border-bottom: 1px solid var(--color-border-strong); }
.records td { padding: var(--space-snug); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.records .status { display: inline-block; padding: 1px var(--space-tight); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.records .status--due { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-bg); }
.records .status--done { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-bg); }
/* FAQ accordion: native <details>, so it works without JS and is keyboard- and screen-reader-ready.
   Used only for secondary questions, never essential information (brief §7.3).
   States: closed · open · hover · focus-visible. */
.faq { border-top: 1px solid var(--color-border); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-base);
  min-height: var(--target-min); padding-block: var(--space-base);
  font-size: var(--text-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-link); }
.faq summary .icon { flex: none; transition: transform var(--duration-default) var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .faq__answer { padding-bottom: var(--space-comfortable); color: var(--color-text-secondary); }
.faq .faq__answer > * + * { margin-top: var(--space-snug); }
/* CTA banner: the bottom of every long page routes to the Business Review (brief §12.3).
   Always a dark surface, so it reads as the end of the page's argument. */
.cta-banner { padding-block: var(--space-section); }
.cta-banner__inner { display: grid; gap: var(--space-roomy); }
@media (min-width: 1024px) { .cta-banner__inner { grid-template-columns: 3fr 2fr; align-items: end; gap: var(--space-spacious); } }
.cta-banner h2 { font-size: var(--text-3xl); max-width: 20ch; }
.cta-banner p { color: var(--color-text-secondary); font-size: var(--text-lg); margin-top: var(--space-base); }
.cta-banner .reassure { font-size: var(--text-sm); margin-top: var(--space-snug); }
/* Business Review form (journey step 8, the most expensive place to lose someone).
   Visible labels, hints under labels, errors next to the field and in a summary.
   States: default · hover · focus · filled · error · disabled · submitting · failed · success. */
.form { display: grid; gap: var(--space-comfortable); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-group-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); padding: 0; margin-bottom: var(--space-tight); }

.field { display: grid; gap: var(--space-tight); }
.field label, .field legend { font-weight: var(--font-weight-semibold); font-size: var(--text-base); padding: 0; }
.field .optional { font-weight: var(--font-weight-regular); color: var(--color-text-secondary); font-size: var(--text-sm); }
.field .hint { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: calc(var(--space-hairline) * -1); }

.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: var(--space-snug) var(--space-base);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-primary);
  font: inherit; font-size: var(--text-base); line-height: var(--line-height-snug);
  transition: border-color var(--duration-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-secondary); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 0; border-color: var(--color-text-primary); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.textarea { min-height: 8rem; resize: vertical; line-height: var(--line-height-normal); }
.select { appearance: none; padding-right: var(--space-spacious); }
/* Chevron drawn with borders so it takes its colour from tokens and flips on dark surfaces. */
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: var(--space-base); top: 50%; width: 0.5rem; height: 0.5rem; pointer-events: none;
  border-right: 2px solid var(--color-text-secondary); border-bottom: 2px solid var(--color-text-secondary);
  transform: translateY(-70%) rotate(45deg);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-secondary); opacity: 1; }

/* Checkbox options: the whole row is the target, at least 44px tall. */
.options { display: grid; gap: var(--space-tight); }
@media (min-width: 768px) { .options--2 { grid-template-columns: 1fr 1fr; } }
.option {
  display: flex; align-items: flex-start; gap: var(--space-snug); min-height: var(--target-min);
  padding: var(--space-snug) var(--space-base); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); line-height: var(--line-height-snug);
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.option:hover { border-color: var(--color-border-strong); }
.option input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--color-accent-ink); }
.option:has(input:checked) { border-color: var(--color-text-primary); background: var(--color-state-hover); }
.option:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.option input:focus-visible { outline: none; }

/* Error: thicker border + icon + message text; colour is never the only signal. */
/* Error border drawn as an inset shadow, so the field doesn't shift by a pixel. */
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.field.has-error .option { border-color: var(--color-error); }
/* Consent: one paragraph of text with an inline link, not flex columns. */
.option__text { display: block; }
.field-error { display: none; align-items: flex-start; gap: var(--space-tight); color: var(--color-error); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.field.has-error .field-error { display: flex; }
.field-error .icon { margin-top: 0.1em; }

.error-summary {
  padding: var(--space-comfortable); border: 2px solid var(--color-error); border-radius: var(--radius-md);
  background: var(--color-error-bg);
}
.error-summary[hidden] { display: none; }
.error-summary :is(h2, h3) { font-size: var(--text-lg); letter-spacing: 0; display: flex; gap: var(--space-tight); align-items: center; color: var(--color-error); }
.error-summary ul { margin-top: var(--space-snug); padding-left: var(--space-comfortable); }
.error-summary a { color: var(--color-error); font-weight: var(--font-weight-semibold); }

/* Submission failed: values are kept; offer retry and an email route. */
.form-alert { display: flex; gap: var(--space-snug); padding: var(--space-comfortable); border-radius: var(--radius-md); border: 2px solid var(--color-error); background: var(--color-error-bg); }
.form-alert[hidden] { display: none; }
.form-alert .icon { color: var(--color-error); width: 1.5rem; height: 1.5rem; }
.form-alert :is(h2, h3) { font-size: var(--text-lg); letter-spacing: 0; color: var(--color-error); }
.form-alert p { margin-top: var(--space-tight); font-size: var(--text-sm); }

.consent { font-size: var(--text-sm); }
.form-footer { display: grid; gap: var(--space-base); padding-top: var(--space-base); border-top: 1px solid var(--color-border); }
.form-footer p { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Panel holding the form on the Business Review page. */
.form-panel { padding: var(--space-comfortable); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
@media (min-width: 768px) { .form-panel { padding: var(--space-spacious); } }

/* Business Review layout: the form is first in the DOM (it's the page's primary element on every screen);
   from 1024px the explanation moves into the left column beside it. */
@media (min-width: 1024px) {
  .split--form > .form-panel { grid-column: 2; grid-row: 1; }
  .split--form > .review-aside { grid-column: 1; grid-row: 1; }
}

/* Honeypot: off-screen for people and screen readers, still filled in by naive bots. The server drops those. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-fallback { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Reassurance strip above the form: who, what next, when. Answers the three questions people have before they type. */
.assure { list-style: none; display: grid; gap: var(--space-snug); max-width: 60rem; }
@media (min-width: 768px) { .assure { grid-template-columns: repeat(3, 1fr); gap: var(--space-base); } }
.assure li { display: grid; gap: var(--space-hairline); padding: var(--space-base); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent-ink); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-sm); }
.assure strong { font-size: var(--text-sm); }
.assure span { color: var(--color-text-secondary); }
.field[hidden] { display: none; }
/* Prose: long-form reading (insight articles, privacy, terms). Reading width 720px, comfortable rhythm. */
.prose { max-width: var(--measure); font-size: var(--text-base); }
.prose > * + * { margin-top: var(--space-base); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-spacious); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-roomy); }
.prose ul, .prose ol { padding-left: var(--space-comfortable); }
.prose li + li { margin-top: var(--space-tight); }
.prose .lead { font-size: var(--text-lg); color: var(--color-text-primary); }
.prose figure { margin: var(--space-roomy) 0; }
.prose blockquote { margin: var(--space-roomy) 0; padding-left: var(--space-comfortable); border-left: 3px solid var(--color-accent); font-size: var(--text-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); }
.prose .takeaway { padding: var(--space-comfortable); border-radius: var(--radius-md); background: var(--color-background-alt); border: 1px solid var(--color-border); }
.prose .takeaway h2 { font-size: var(--text-lg); margin-top: 0; letter-spacing: 0; }

.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-tight) var(--space-base); font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-comfortable); }
.article-meta span + span::before { content: "·"; margin-right: var(--space-base); }
/* v0.3 experience layer: self-check, bridge flow, compact audiences, and the "connector" motif.
   The connector is the brand's one recurring visual: an orange node joined by a line, the shape of
   "connect the moving parts". It appears only as joined nodes in diagrams; backgrounds stay plain. */

.hero, .cta-banner, .section--alt { position: relative; isolation: isolate; overflow: clip; }

/* Self-check: each symptom is a big tickable card. Checked = orange edge + tick, never colour alone. */
.selfcheck fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.selfcheck__list { list-style: none; }
.selfcheck__item {
  position: relative; display: grid; gap: var(--space-hairline); height: 100%; cursor: pointer;
  padding: var(--space-comfortable) var(--space-comfortable) var(--space-comfortable) calc(var(--space-comfortable) + 2.25rem);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.selfcheck__item:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.selfcheck__item input { position: absolute; left: var(--space-comfortable); top: calc(var(--space-comfortable) + 0.1rem); width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--color-accent-ink); }
.selfcheck__item:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.selfcheck__item input:focus-visible { outline: none; }
.selfcheck__item:has(input:checked) { border-color: var(--color-accent-ink); box-shadow: inset 3px 0 0 var(--color-accent-ink), var(--shadow-sm); }
.selfcheck__num { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); color: var(--color-accent-ink); }
.selfcheck__item strong { font-size: var(--text-lg); line-height: var(--line-height-snug); }
.selfcheck__item span:last-child { color: var(--color-text-secondary); font-size: var(--text-sm); }
.selfcheck__result {
  display: grid; gap: var(--space-base); align-items: center; margin-top: var(--space-roomy);
  padding: var(--space-comfortable); border-radius: var(--radius-lg); border: 1px dashed var(--color-border-strong);
  transition: border-color var(--duration-default) var(--ease), background-color var(--duration-default) var(--ease);
}
@media (min-width: 1024px) { .selfcheck__result { grid-template-columns: 1fr auto; padding: var(--space-comfortable) var(--space-roomy); } }
.selfcheck.has-ticks .selfcheck__result { border-style: solid; border-color: var(--color-accent-ink); background: var(--color-background-alt); }
.selfcheck__verdict { font-size: var(--text-lg); max-width: 46rem; }

/* Bridge flow: content carries the first half of the journey, the system the second. */
.bridge-flow { margin: 0 0 var(--space-base); padding: var(--space-comfortable); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: var(--space-base); }
@media (min-width: 900px) { .bridge-flow { grid-template-columns: 3fr 4fr; gap: 0; } }
.bridge-flow__half { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); position: relative; padding: var(--space-base); border-radius: var(--radius-md); }
.bridge-flow__half--content { background: var(--color-background-alt); }
.bridge-flow__half--system { background: var(--brand-charcoal); }
@media (min-width: 900px) { .bridge-flow__half--content { border-radius: var(--radius-md) 0 0 var(--radius-md); } .bridge-flow__half--system { border-radius: 0 var(--radius-md) var(--radius-md) 0; } }
.bridge-flow__half li { display: inline-flex; align-items: center; gap: var(--space-tight); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.bridge-flow__half li::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full); border: 2px solid var(--color-accent-ink); background: var(--color-surface); flex: none; }
.bridge-flow__half li + li { padding-left: var(--space-roomy); position: relative; }
.bridge-flow__half li + li::after { content: ""; position: absolute; left: var(--space-tight); top: 50%; width: calc(var(--space-roomy) - var(--space-base)); border-top: 2px solid var(--color-accent); }
.bridge-flow__half--system li { color: var(--brand-white); }
.bridge-flow__half--system li::before { background: var(--color-accent); border-color: var(--color-accent); }
.bridge-flow figcaption { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-tight); font-size: var(--text-sm); color: var(--color-text-secondary); }
.bridge-more { text-align: center; margin: var(--space-base) auto 0; }

/* Compact audience cards on the homepage: title, one line, link. Full detail lives on Who we help. */
.audience--compact h3 { font-size: var(--text-lg); letter-spacing: 0; }

/* Hero lead sizing on wide screens stays within the type scale he approved (no bigger display type). */
.text-center { text-align: center; margin-inline: auto; }

/* Fix the Flow worksheet: prints cleanly on one A4/Letter page. */
.ws-questions { list-style: none; counter-reset: wsq; display: grid; gap: var(--space-base); margin-top: var(--space-base); }
@media (min-width: 768px) { .ws-questions { grid-template-columns: repeat(4, 1fr); } }
.ws-questions li { counter-increment: wsq; display: grid; gap: var(--space-hairline); padding: var(--space-base); border-top: 3px solid var(--color-accent-ink); background: var(--color-surface); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.ws-questions strong::before { content: counter(wsq) ". "; color: var(--color-accent-ink); }
.ws-questions span { color: var(--color-text-secondary); font-size: var(--text-sm); }
.ws-table-wrap { overflow-x: auto; margin-top: var(--space-base); }
.ws-table { width: 100%; min-width: 40rem; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); }
.ws-table th, .ws-table td { border: 1px solid var(--color-border-strong); padding: var(--space-snug); text-align: left; vertical-align: top; }
.ws-table td { height: 4.5rem; }
.ws-table thead th { background: var(--color-background-alt); }
@media print {
  .site-header, .site-footer, .breadcrumb, .cta-banner, .no-print, .skip-link { display: none !important; }
  .section, .page-hero { padding-block: 12pt !important; }
  .section--alt::before { display: none; }
  body { font-size: 10.5pt; }
  .ws-table td { height: 52pt; }
}
/* Our Approach: a sticky progress rail, a scene that changes with each stage, and short stage blocks.
   Without JS the scene is hidden and the stages read as a plain list. The scene positions everything
   with container units, so it scales with its box and only ever animates transform and opacity. */

/* Rail: the five stages as jump links, sticky under the header, filling as you scroll. */
.rail { position: sticky; top: var(--header-height); z-index: calc(var(--z-header) - 1); background: var(--color-background); border-bottom: 1px solid var(--color-border); }
.rail__list { list-style: none; display: flex; gap: var(--space-hairline); overflow-x: auto; scrollbar-width: none; }
.rail__list::-webkit-scrollbar { display: none; }
.rail__list a {
  display: inline-flex; align-items: center; gap: var(--space-tight); min-height: 3.25rem; padding: 0 var(--space-snug);
  white-space: nowrap; text-decoration: none; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast) var(--ease);
}
.rail__list a span { font-size: var(--text-xs); color: var(--color-accent-ink); font-weight: var(--font-weight-semibold); }
.rail__list a:hover, .rail__list a.is-active { color: var(--color-text-primary); }
.rail__list a.is-active { background: linear-gradient(var(--color-accent-ink), var(--color-accent-ink)) left bottom / 100% 2px no-repeat; }
.rail__track { height: 2px; background: var(--color-border); margin-top: -2px; }
.rail__fill { height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }

/* Layout: scene left (sticky), stages right. */
.approach.section { padding-top: var(--space-generous); }
.approach__grid { display: grid; gap: var(--space-roomy); }
.approach-scene { display: none; margin: 0; }
.approach.is-motion .approach-scene { display: block; position: sticky; top: calc(var(--header-height) + 3.5rem); z-index: 1; }
@media (min-width: 1024px) {
  .approach__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: var(--space-generous); align-items: start; }
  .approach.is-motion .approach-scene { top: calc(var(--header-height) + 5rem); }
}

.scene {
  container-type: size; position: relative; overflow: hidden; height: 34svh; min-height: 13rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
  background-image: radial-gradient(circle, rgb(26 26 26 / 0.06) 1px, transparent 1.5px); background-size: 18px 18px;
}
@media (min-width: 1024px) { .scene { height: auto; aspect-ratio: 5 / 4; } }
.scene__caption { margin-top: var(--space-tight); font-size: var(--text-xs); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
@media (max-width: 1023px) { .scene__caption { display: none; } .approach.is-motion .approach-scene { background: var(--color-background-alt); padding-bottom: var(--space-tight); } }

/* Everything in the scene is placed at (--x, --y) percent of the scene box, centred on that point. */
.scene > * { position: absolute; left: 0; top: 0; transition: transform var(--duration-slow) var(--ease), opacity var(--duration-slow) var(--ease); }
.sc-chip, .sc-break, .sc-dot, .sc-lens {
  transform: translate(calc(var(--x) * 1cqw - 50%), calc(var(--y) * 1cqh - 50%)) rotate(var(--r, 0deg));
}
.sc-chip {
  padding: 0.35rem 0.7rem; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-background);
  font-size: clamp(0.6875rem, 2.6cqw, 0.875rem); font-weight: var(--font-weight-medium); white-space: nowrap; color: var(--color-text-primary);
}
.sc-chip::after {
  content: "✓"; position: absolute; right: -0.55rem; top: -0.55rem; width: 1.15rem; height: 1.15rem; border-radius: var(--radius-full);
  display: grid; place-items: center; font-size: 0.7rem; background: var(--color-action); color: var(--color-text-on-action);
  opacity: 0; transform: scale(0.4); transition: opacity var(--duration-default) var(--ease), transform var(--duration-default) var(--ease);
}
[data-stage="1"] .sc-chip::after { opacity: 1; transform: none; }
[data-stage="1"] .sc-chip:nth-of-type(1)::after { transition-delay: 0.3s; }
[data-stage="1"] .sc-chip:nth-of-type(2)::after { transition-delay: 0.7s; }
[data-stage="1"] .sc-chip:nth-of-type(3)::after { transition-delay: 1.1s; }
[data-stage="1"] .sc-chip:nth-of-type(4)::after { transition-delay: 1.5s; }
[data-stage="1"] .sc-chip:nth-of-type(5)::after { transition-delay: 1.9s; }

/* Stage 1: a lens glides over the scattered channels. */
.sc-lens { --x: 18; --y: 22; width: 18cqmin; height: 18cqmin; border-radius: var(--radius-full); border: 3px solid var(--color-accent-ink); background: rgb(242 101 34 / 0.08); opacity: 0; pointer-events: none; }
[data-stage="1"] .sc-lens { opacity: 1; animation: lens-path 2.4s var(--ease) 1 forwards; }
@keyframes lens-path {
  0% { transform: translate(calc(18cqw - 50%), calc(22cqh - 50%)); }
  20% { transform: translate(calc(70cqw - 50%), calc(16cqh - 50%)); }
  40% { transform: translate(calc(82cqw - 50%), calc(55cqh - 50%)); }
  60% { transform: translate(calc(30cqw - 50%), calc(70cqh - 50%)); }
  80% { transform: translate(calc(60cqw - 50%), calc(82cqh - 50%)); }
  100% { transform: translate(calc(60cqw - 50%), calc(82cqh - 50%)); opacity: 0; }
}

/* Stage 2: today's messy flow is drawn, and two places break. */
.sc-mess { width: 100%; height: 100%; opacity: 0; }
.sc-mess polyline { fill: none; stroke: var(--color-border-strong); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
[data-stage="2"] .sc-mess { opacity: 1; }
.sc-break--a { --x: 50; --y: 43; } .sc-break--b { --x: 72; --y: 69; }
.sc-break { padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); font-size: clamp(0.625rem, 2.3cqw, 0.75rem); font-weight: var(--font-weight-semibold); white-space: nowrap; opacity: 0; }
[data-stage="2"] .sc-break { opacity: 1; animation: pulse 1.6s ease-in-out infinite; }
[data-stage="2"] .sc-break--b { animation-delay: 0.4s; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgb(181 71 8 / 0.15); } }

/* Stage 3 onward: the channels merge into Inquiry, and one straight flow appears. */
[data-stage="3"] .sc-chip, [data-stage="4"] .sc-chip, [data-stage="5"] .sc-chip {
  transform: translate(calc(14cqw - 50%), calc(50cqh - 50%)) scale(0.5); opacity: 0;
}
.sc-flow { list-style: none; width: 100%; height: 100%; opacity: 0; }
.sc-flow li {
  position: absolute; left: 0; top: 0; transform: translate(calc(var(--x) * 1cqw - 50%), calc(50cqh - 50%)) translateY(12px);
  opacity: 0; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); background: var(--color-action); color: var(--color-text-on-action);
  font-size: clamp(0.6875rem, 2.6cqw, 0.875rem); font-weight: var(--font-weight-semibold); white-space: nowrap;
  transition: transform var(--duration-slow) var(--ease), opacity var(--duration-slow) var(--ease);
}
.sc-flow li:nth-child(1) { --x: 14; } .sc-flow li:nth-child(2) { --x: 38; transition-delay: 0.1s; }
.sc-flow li:nth-child(3) { --x: 62; transition-delay: 0.2s; } .sc-flow li:nth-child(4) { --x: 86; transition-delay: 0.3s; }
.sc-flow::before { content: ""; position: absolute; left: 14cqw; right: 14cqw; top: 50cqh; border-top: 2px solid var(--color-accent); transform-origin: left; transform: scaleX(0); transition: transform var(--duration-slow) var(--ease) 0.15s; }
[data-stage="3"] .sc-flow, [data-stage="4"] .sc-flow { opacity: 1; }
[data-stage="3"] .sc-flow li, [data-stage="4"] .sc-flow li { opacity: 1; transform: translate(calc(var(--x) * 1cqw - 50%), calc(50cqh - 50%)); }
[data-stage="3"] .sc-flow::before, [data-stage="4"] .sc-flow::before { transform: scaleX(1); }
[data-stage="4"] .sc-flow { opacity: 0.35; transform: translateY(-22cqh); }

.sc-dot { --x: 14; --y: 50; width: 0.9rem; height: 0.9rem; border-radius: var(--radius-full); background: var(--brand-charcoal); box-shadow: 0 0 0 4px rgb(242 101 34 / 0.35); opacity: 0; }
[data-stage="3"] .sc-dot { opacity: 1; animation: travel 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.5s infinite; }
@keyframes travel {
  0%, 10% { transform: translate(calc(14cqw - 50%), calc(50cqh - 50%)); }
  90%, 100% { transform: translate(calc(86cqw - 50%), calc(50cqh - 50%)); }
}

/* Stage 4: the documentation sheet slides up. */
.sc-doc {
  left: 50%; top: 58%; width: min(58cqw, 18rem); padding: 0.9rem 1rem; display: grid; gap: 0.45rem;
  background: var(--color-background); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  transform: translate(-50%, -40%) translateY(24px); opacity: 0;
}
.sc-doc b { font-size: clamp(0.75rem, 2.8cqw, 0.9375rem); }
.sc-doc i { display: block; height: 0.45rem; border-radius: 3px; background: var(--color-border); transform-origin: left; transform: scaleX(0); transition: transform var(--duration-slow) var(--ease); position: relative; margin-left: 1.1rem; }
.sc-doc i::before { content: "✓"; position: absolute; left: -1.1rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; font-style: normal; color: var(--color-success); }
.sc-doc i:nth-of-type(2) { width: 80%; } .sc-doc i:nth-of-type(3) { width: 90%; } .sc-doc i:nth-of-type(4) { width: 65%; }
.sc-doc em { justify-self: start; margin-top: 0.2rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-sm); background: var(--brand-charcoal); color: var(--brand-white); font-style: normal; font-size: clamp(0.625rem, 2.3cqw, 0.75rem); font-weight: var(--font-weight-semibold); opacity: 0; transform: translateY(-8px); transition: opacity var(--duration-slow) var(--ease) 0.6s, transform var(--duration-slow) var(--ease) 0.6s; }
[data-stage="4"] .sc-doc { opacity: 1; transform: translate(-50%, -40%); }
[data-stage="4"] .sc-doc i { transform: scaleX(1); }
[data-stage="4"] .sc-doc i:nth-of-type(2) { transition-delay: 0.1s; } [data-stage="4"] .sc-doc i:nth-of-type(3) { transition-delay: 0.2s; } [data-stage="4"] .sc-doc i:nth-of-type(4) { transition-delay: 0.3s; }
[data-stage="4"] .sc-doc em { opacity: 1; transform: none; }

/* Stage 5: the flow becomes a loop, reviewed in real use. */
.sc-loop { left: 50%; top: 50%; width: 52cqmin; height: 52cqmin; transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
.sc-loop__ring { position: absolute; inset: 0; border-radius: var(--radius-full); border: 2px solid var(--color-accent); }
.sc-loop__spin { position: absolute; inset: 0; }
.sc-loop__dot { position: absolute; left: 50%; top: 0; width: 0.9rem; height: 0.9rem; margin: -0.45rem 0 0 -0.45rem; border-radius: var(--radius-full); background: var(--brand-charcoal); box-shadow: 0 0 0 4px rgb(242 101 34 / 0.35); }
.sc-loop__label, .sc-loop__back { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(0.6875rem, 2.6cqw, 0.875rem); font-weight: var(--font-weight-semibold); }
.sc-loop__label { top: 50%; margin-top: -0.7em; }
.sc-loop__back { bottom: -2.2em; color: var(--color-accent-ink); }
[data-stage="5"] .sc-loop { opacity: 1; transform: translate(-50%, -50%); }
[data-stage="5"] .sc-loop__spin { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Stage blocks: short, with room to scroll so the scene can change. The active one is in focus. */
.stages { list-style: none; }
.stage { padding-block: var(--space-roomy); border-top: 1px solid var(--color-border); }
.stage:first-child { border-top: 0; padding-top: 0; }
.approach.is-motion .stage { min-height: 52svh; transition: opacity var(--duration-default) var(--ease); }
@media (min-width: 1024px) { .approach.is-motion .stage { min-height: 62vh; padding-block: var(--space-spacious); } }
.approach.is-motion .stage:not(.is-active) { opacity: 0.4; }
.approach.is-motion .stage:last-child { min-height: 0; }
.stage__num { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-accent-ink); letter-spacing: var(--letter-spacing-eyebrow); }
.stage h2 { margin-top: var(--space-hairline); }
.stage__line { margin-top: var(--space-snug); font-size: var(--text-lg); }
.stage__gets { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-top: var(--space-base); }
.stage__gets li { display: inline-flex; align-items: center; gap: var(--space-tight); padding: 0.4rem 0.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.stage__gets li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-accent); }
.stage__more { margin-top: var(--space-base); }
.stage__more summary { display: inline-flex; align-items: center; gap: var(--space-tight); min-height: var(--target-min); cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-link); list-style: none; }
.stage__more summary::-webkit-details-marker { display: none; }
.stage__more summary .icon { width: 1rem; height: 1rem; transition: transform var(--duration-default) var(--ease); }
.stage__more[open] summary .icon { transform: rotate(45deg); }
.stage__more .check-list { margin-top: var(--space-tight); }

/* What we'll ask of you: four icon tiles. */
.ask-tiles { list-style: none; display: grid; gap: var(--space-base); }
@media (min-width: 640px) { .ask-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ask-tiles { grid-template-columns: repeat(4, 1fr); } }
.ask-tiles li { display: grid; gap: var(--space-tight); padding: var(--space-comfortable); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ask-tiles .icon { width: 2rem; height: 2rem; color: var(--color-accent-ink); }
.ask-tiles strong { font-size: var(--text-lg); }
.ask-tiles span { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* A narrow first engagement: months vs weeks, as two bars. */
.timebars { margin: 0; display: grid; gap: var(--space-base); max-width: 52rem; }
.timebar { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: var(--space-base); }
@media (max-width: 559px) { .timebar { grid-template-columns: 1fr; gap: var(--space-tight); } }
.timebar__label { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.timebar__bar { display: flex; align-items: center; height: 2.5rem; padding: 0 var(--space-base); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); transform-origin: left; }
.timebar--long .timebar__bar { background: var(--color-border); color: var(--color-text-secondary); }
.timebar--short { grid-template-columns: 9rem auto 1fr; }
@media (max-width: 559px) { .timebar--short { grid-template-columns: auto 1fr; } .timebar--short .timebar__label { grid-column: 1 / -1; } }
.timebar--short .timebar__bar { width: clamp(6rem, 24vw, 13rem); background: var(--color-action); color: var(--color-text-on-action); }
.timebar__end { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-success); }
.timebars.is-motion .timebar__bar { transform: scaleX(0); transition: transform var(--duration-slow) var(--ease); }
.timebars.is-motion .timebar--short .timebar__bar { transition-delay: 0.35s; }
.timebars.is-motion .timebar__end { opacity: 0; transition: opacity var(--duration-slow) var(--ease) 0.8s; }
.timebars.is-in .timebar__bar { transform: none; }
.timebars.is-in .timebar__end { opacity: 1; }

.stage { scroll-margin-top: calc(var(--header-height) + 4rem); }
@media (prefers-reduced-motion: reduce) {
  .approach-scene *, .approach-scene *::before, .approach-scene *::after { animation: none !important; }
  [data-stage="1"] .sc-lens { opacity: 0; }
}
/* Motion styles for the home batch (v0.3): hero "One inquiry, two businesses" and the shared bridge flow.
   Everything reads as plain lists without JS. Motion only demonstrates it, and animates transform and opacity only. */

/* ---------- Hero: one inquiry, two businesses ---------- */
.race { --race-sc: 0.5rem; --race-gap: var(--space-snug); --race-mk: 0.75rem; --race-mky: 1.0625rem; padding: var(--space-base); }
@media (min-width: 480px) { .race { --race-sc: 1rem; padding: var(--space-comfortable); } }

.race__heading { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.race__lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-base); margin-top: var(--space-base); }
@media (min-width: 480px) { .race__lanes { gap: var(--space-comfortable); } }
.race__title { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.race__lane--connected .race__title { color: var(--color-accent-ink); }

.race__steps { list-style: none; position: relative; display: grid; gap: var(--race-gap); margin-top: var(--space-snug); padding-left: 1.25rem; }
.race__steps li { position: relative; overflow-wrap: anywhere; }

/* Each step has a hollow marker on the left; the token travels from marker to marker. */
.race__steps li::before {
  content: ""; position: absolute; z-index: 1; left: calc(var(--race-mk) * -1.5); top: calc(var(--race-mky) - var(--race-mk) / 2);
  width: var(--race-mk); height: var(--race-mk); border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong); background: var(--color-background-alt);
}
.race__node {
  position: relative; display: block; padding: var(--space-tight) var(--space-snug); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: var(--text-xs); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); color: var(--color-text-primary);
}
/* ::before = filled dot that sits on the marker once lit; ::after = ring that fades in. Both are opacity/transform only. */
.race__node::before {
  content: ""; position: absolute; z-index: 2; left: calc(var(--race-mk) * -1.5 - 1px); top: calc(var(--race-mky) - var(--race-mk) / 2 - 1px);
  width: var(--race-mk); height: var(--race-mk); border-radius: var(--radius-full);
  border: 2px solid var(--color-accent); background: var(--color-accent); transform: scale(0);
  transition: transform var(--duration-slow) var(--ease);
}
.race__node::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--color-accent);
  background: rgb(242 101 34 / 0.12); opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--ease);
}

/* Today: scattered boxes, dashed edges, nobody owns the next step. */
.race__lane--today .race__node { border-style: dashed; border-color: var(--color-border-strong); color: var(--color-text-secondary); }
.race__lane--today .race__node::before { background: var(--color-text-secondary); border-color: var(--color-text-secondary); }
.race__lane--today .race__node::after { border-color: var(--color-border-strong); background: rgb(245 245 243 / 0.06); }
.race__lane--today li { margin-left: calc(var(--race-sc) * var(--k, 0)); margin-right: calc(var(--race-sc) * (1 - var(--k, 0))); }
.race__lane--today li:nth-of-type(1) { --k: 0; }
.race__lane--today li:nth-of-type(2) { --k: 0.85; }
.race__lane--today li:nth-of-type(3) { --k: 0.3; }
.race__lane--today li:nth-of-type(4) { --k: 1; }
.race__lane--today li:nth-of-type(5) { --k: 0.5; }
.race__lost .race__node { color: var(--color-error); border-color: var(--color-error); }
.race__lost .race__node::after { border-color: var(--color-error); background: transparent; opacity: 1; }
.race__lost::before { border-color: var(--color-error); }

/* Connected: a straight orange connector; one segment per step, drawn as the token passes. */
.race__lane--connected li:not(:last-of-type)::after {
  content: ""; position: absolute; z-index: 0; left: calc(var(--race-mk) * -1 - 1px); top: var(--race-mky); width: 2px;
  height: calc(100% + var(--race-gap)); background: var(--color-accent); transform-origin: top; transform: scaleY(var(--seg, 1));
}
.race__lane--connected li::before { border-color: var(--color-accent); }
.race__end .race__node { font-weight: var(--font-weight-semibold); }
.race__end .race__node::after { opacity: 1; }
.race__end .race__node::before { transform: scale(1); }
.race__tick { color: var(--color-accent-ink); }

/* Token: decorative, added by JS. */
.race__token {
  position: absolute; left: 0; top: 0; z-index: 3; width: 0.875rem; height: 0.875rem; border-radius: var(--radius-full);
  background: var(--color-accent); box-shadow: 0 0 0 4px rgb(242 101 34 / 0.28); opacity: 0; pointer-events: none; will-change: transform, opacity;
}

/* Replay: a small text button. */
.race__replay {
  display: block; margin: var(--space-snug) 0 0 auto; min-height: var(--target-min); padding: 0 var(--space-snug);
  border: 0; background: none; color: var(--color-link); font: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--radius-sm);
}
.race__replay:hover { color: var(--color-link-hover); }
.race__replay[hidden] { display: none; }

/* Enhanced: steps wait dimly until the token reaches them; the end states appear last. */
.race.is-motion .race__lane--connected li:not(:last-of-type) { --seg: 0; }
.race.is-motion .race__lost, .race.is-motion .race__end .race__node::after, .race.is-motion .race__end .race__tick { opacity: 0; }
.race.is-motion .race__end .race__node::before { transform: scale(0); }
.race.is-motion .race__lost { transform: translateY(6px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
.race.is-motion .race__lost.is-shown { opacity: 1; transform: none; }
.race.is-motion .race__end .race__node::after, .race.is-motion .race__end .race__tick { transition: opacity var(--duration-slow) var(--ease); }
.race.is-motion .race__node.is-lit::before, .race.is-motion li.is-lit .race__node::before { transform: scale(1); }
.race.is-motion li.is-lit .race__node::after { opacity: 1; }
.race.is-motion .race__end.is-lit .race__node::after, .race.is-motion .race__end.is-lit .race__tick { opacity: 1; }
.race.is-motion .race__lost:not(.is-shown) .race__node::after { opacity: 0; }

/* After the run, only a gentle pulse on the Booked ring continues. */
@keyframes race-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.55; } }
.race.is-done .race__end .race__node::after { animation: race-pulse 2.4s ease-in-out infinite; }

/* ---------- Bridge flow: connectors draw, attention dots travel ---------- */
.bridge-flow { position: relative; }
.bridge-flow__half li + li::after { left: var(--space-hairline); width: calc(var(--space-roomy) - var(--space-hairline)); transform-origin: left center; }
.bridge-flow__half li::before, .bridge-flow__half li + li::after { transition: opacity var(--duration-default) var(--ease); }

.bridge-flow.is-motion .bridge-flow__half li + li::after {
  transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease), opacity var(--duration-default) var(--ease);
  transition-delay: calc(var(--i, 0) * 100ms), 0s;
}
.bridge-flow.is-motion.is-drawn .bridge-flow__half li + li::after { transform: none; }

.bridge-flow__dot {
  position: absolute; left: 0; top: 0; z-index: 2; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full);
  background: var(--color-accent); box-shadow: 0 0 0 3px rgb(242 101 34 / 0.3); opacity: 0; pointer-events: none; will-change: transform, opacity;
}

/* "Without a system": the flow thins out after the first inquiry. Shown in text and in the line, not only colour. */
.bridge-flow.is-leaking .bridge-flow__half--system li:nth-child(n+2)::before,
.bridge-flow.is-leaking .bridge-flow__half--system li:nth-child(n+2)::after { opacity: 0.25; }

.bridge-flow__controls { grid-column: 1 / -1; display: grid; gap: var(--space-snug); justify-items: start; }
.bridge-flow__controls[hidden] { display: none; }
.bridge-toggle { display: inline-flex; flex-wrap: wrap; gap: var(--space-hairline); padding: var(--space-hairline); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-background-alt); }
.bridge-toggle__btn {
  min-height: var(--target-min); padding: 0 var(--space-base); border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--color-text-primary); font: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-medium); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}
.bridge-toggle__btn:hover { background: var(--color-state-hover); }
.bridge-toggle__btn[aria-pressed="true"] { background: var(--brand-charcoal); color: var(--brand-white); }
.bridge-toggle__btn[aria-pressed="true"]::before { content: "\2713\00a0"; }
.bridge-flow__live { min-height: 1.5em; font-size: var(--text-sm); color: var(--color-text-primary); }
.together-copy { max-width: var(--measure); }

@media (prefers-reduced-motion: reduce) {
  .race.is-done .race__end .race__node::after { animation: none; }
  .race__token, .bridge-flow__dot { display: none; }
}

/* Phones: use the full column and never break words mid-word ("WhatsApp" stays whole). */
@media (max-width: 479px) {
  .hero-map.race { width: 100%; max-width: none; margin-inline: 0; --race-sc: 0.25rem; --race-gap: var(--space-tight); }
  .race__lanes { gap: var(--space-snug); }
  .race__steps li { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: var(--text-xs); }
}
/* Motion styles for the demo batch (v0.3): the step player on the two demonstration pages.
   The markup is the finished screen. Everything below only describes how it is acted out once
   js/motion/demo-player.js has added .is-motion, and only moves transform and opacity. */

.demo-frame[data-demo] { position: relative; }

/* ---------- Player bar ---------- */
.demo-player { display: grid; gap: var(--space-snug); padding: var(--space-snug) var(--space-base); border-bottom: 1px solid var(--color-border); }
.demo-player:empty { display: none; }
.demo-player [hidden] { display: none; }
.demo-player__controls { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.demo-player__controls .btn { min-height: var(--target-min); }
.demo-player__panel { display: grid; gap: var(--space-tight); }
.demo-player__dots { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
.demo-player__dot { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1; color: var(--color-text-secondary); }
.demo-player__dot.is-reached { border-color: var(--color-accent-ink); color: var(--color-text-primary); }
.demo-player__dot.is-current { border-color: var(--color-action); background: var(--color-action); color: var(--color-text-on-action); }
.demo-player__text { display: grid; gap: var(--space-hairline); }
.demo-player__caption { font-size: var(--text-base); font-weight: var(--font-weight-semibold); min-height: 3em; }
.demo-player__explain { font-size: var(--text-sm); color: var(--color-text-secondary); min-height: 4.5em; }
@media (min-width: 640px) { .demo-player__caption { min-height: 1.5em; } .demo-player__explain { min-height: 3em; } }
@media (max-width: 479px) { .demo-player__controls .btn { flex: 1 1 calc(50% - var(--space-tight)); } }

/* ---------- Highlighted step in "How the team would use it" ---------- */
.process[data-demo-list] li::before { transition: transform var(--duration-slow) var(--ease); }
.process[data-demo-list].is-motion li { cursor: pointer; }
.process[data-demo-list] li.is-current::before { background: var(--color-action); border-color: var(--color-action); color: var(--color-text-on-action); transform: scale(1.1); }
.process[data-demo-list] li.is-current h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* ---------- Chips and toast (real text in the markup; decoration only appears under JS) ---------- */
.demo-chip { display: inline-flex; align-items: center; gap: var(--space-hairline); width: fit-content; margin-top: var(--space-tight); padding: 1px var(--space-tight); border: 1px solid var(--color-success); border-radius: var(--radius-sm); background: var(--color-success-bg); color: var(--color-success); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); }
.board__card .demo-chip { display: flex; }
.demo-chip::before { content: "\2713"; }

.demo-summary { margin-bottom: var(--space-snug); padding: var(--space-tight) var(--space-snug); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-background-alt); font-size: var(--text-sm); }
.demo-summary b { font-weight: var(--font-weight-semibold); }
.demo-stamp { display: inline-block; transform-origin: left center; }

.demo-toast { display: none; }

/* ---------- Animated look (only once the player is running on the page) ---------- */
.demo-frame.is-motion [data-demo-action="enter"],
.demo-frame.is-motion [data-demo-action="stamp"],
.demo-frame.is-motion [data-demo-action="chip"],
.demo-frame.is-motion [data-demo-action="flag"] {
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.demo-frame.is-motion [data-demo-action="enter"]:not(.is-applied) { opacity: 0; transform: translateY(-0.75rem); }
.demo-frame.is-motion tr[data-demo-action="enter"].is-applied { transition-delay: calc(var(--demo-i, 0) * 70ms); }
.demo-frame.is-motion [data-demo-action="stamp"]:not(.is-applied) { opacity: 0; transform: scale(1.35); }
.demo-frame.is-motion [data-demo-action="stamp"].is-applied { transition-delay: calc(var(--demo-i, 0) * 60ms); }
.demo-frame.is-motion [data-demo-action="chip"]:not(.is-applied) { opacity: 0; transform: scale(0.85); }

.demo-frame.is-motion [data-demo-action="swap"] { transition: opacity var(--duration-fast) var(--ease); }
.demo-frame.is-motion [data-demo-action="swap"].is-swapping { opacity: 0; }

.demo-frame.is-motion .demo-toast {
  display: flex; align-items: center; gap: var(--space-tight); position: absolute; right: var(--space-base); bottom: 3.5rem; z-index: 2;
  max-width: calc(100% - 2 * var(--space-base)); padding: var(--space-snug) var(--space-base); border-radius: var(--radius-md);
  background: var(--brand-charcoal); color: var(--brand-white); font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-lg); pointer-events: none;
  opacity: 0; transform: translateX(1.5rem);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.demo-frame.is-motion .demo-toast.is-applied { opacity: 1; transform: translateX(0); }
.demo-toast__tick { color: var(--color-accent); }

/* Short highlight when a card changes (opacity of a ring, plus a small lift or shake). */
.board__card { position: relative; }
.board__card::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--color-accent); border-radius: calc(var(--radius-sm) + 3px); opacity: 0; pointer-events: none; }
.board__card.is-pulse { animation: demo-lift var(--duration-slow) var(--ease); }
.board__card.is-pulse::after { animation: demo-ring 700ms var(--ease); }
.board__card[data-demo-action="flag"].is-pulse { animation: demo-shake var(--duration-slow) var(--ease); }
@keyframes demo-lift { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes demo-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@keyframes demo-ring { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Focus: what the current step changed stays full strength, the rest steps back ---------- */
/* Units that carry their own opacity transition (the enter/flag rules above) keep it; the rest get one here. */
.demo-frame.is-motion :is(.board__card, .records tbody tr, .demo-summary):not([data-demo-action]) { transition: opacity var(--duration-slow) var(--ease); }
/* A step that has not happened yet (enter, not applied) stays hidden; everything else dims. */
.demo-frame.is-focusing :is(.board__card, .records tbody tr, .demo-summary):not(.is-active):is(.is-applied, :not([data-demo-action="enter"])) { opacity: .4; }
.board__card.is-active { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.records tbody tr.is-active { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.demo-summary.is-active { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.board__card.is-active::before {
  content: "Changed"; content: "Changed" / "";
  position: absolute; top: -0.6rem; right: var(--space-tight); z-index: 1;
  padding: 0 var(--space-tight); border-radius: var(--radius-sm);
  background: var(--color-action); color: var(--color-text-on-action);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1.5; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .demo-frame.is-motion :is(.board__card, .records tbody tr, .demo-summary):not([data-demo-action]) { transition: none; }
  .board__card.is-pulse, .board__card.is-pulse::after, .board__card[data-demo-action="flag"].is-pulse { animation: none; }
  .demo-frame.is-motion [data-demo-action="enter"],
  .demo-frame.is-motion [data-demo-action="stamp"],
  .demo-frame.is-motion tr[data-demo-action="enter"].is-applied { transition-delay: 0s; }
}

/* Keep the card the same width before and after it is flagged. */
.demo-frame.is-motion .board__card[data-demo-action="flag"]:not(.is-overdue) { border-left: 3px solid var(--color-border); }
/* Motion styles for the audience batch (v0.3): the journey walk and the hero inbox.
   Both are plain markup first. Everything below only applies once JS has added .is-motion.
   Only transform and opacity move, each transition <= var(--duration-slow). */

/* ============ Journey walk ============
   A line runs down the middle of the step numbers. A customer dot rides it with the scroll. At a friction row the
   note pops in and a faded ghost dot drops into the left gutter with the words "lost here". */
.journey-walk { position: relative; }
.journey-walk.is-live { --jw-gutter: 3.75rem; padding-left: var(--jw-gutter); }
@media (min-width: 768px) { .journey-walk.is-live { --jw-gutter: 5rem; } }
.journey-walk:not(.is-motion) > .journey-walk__rail, .journey-walk:not(.is-motion) > .journey-walk__dot { display: none; }

/* Track and fill sit behind the step numbers (numbers get z-index 1); the dot sits above them. */
.journey-walk__rail {
  position: absolute; z-index: 0; pointer-events: none; width: 2px; background: var(--color-border);
  left: calc(var(--jw-gutter, 0rem) + 1.125rem - 1px);
  top: var(--jw-top, 0); height: var(--jw-h, 100%);
}
.journey-walk__fill { position: absolute; inset: 0; background: var(--color-accent); transform-origin: top; transform: scaleY(var(--jw-p, 0)); }
.journey-walk.is-done .journey-walk__rail { top: 1.125rem; bottom: 1.125rem; height: auto; }
.journey-walk.is-done .journey-walk__fill { transform: none; }
.journey-walk__dot {
  position: absolute; z-index: 2; pointer-events: none; width: 0.875rem; height: 0.875rem; border-radius: var(--radius-full);
  left: calc(var(--jw-gutter, 0rem) + 1.125rem - 0.4375rem); top: calc(var(--jw-top, 0px) - 0.4375rem);
  background: var(--color-action); box-shadow: 0 0 0 4px rgb(242 101 34 / 0.22);
  transform: translateY(var(--jw-y, 0px));
}
.journey-walk.is-done .journey-walk__dot { display: none; }

.journey-walk.is-motion .journey__step::before { position: relative; z-index: 1; background: var(--color-background); transition: border-color var(--duration-default) var(--ease), color var(--duration-default) var(--ease); }
.journey-walk.is-live .journey > li.is-passed .journey__step::before { border-color: var(--color-accent-ink); color: var(--color-text-primary); }
.journey-walk.is-live .journey > li { position: relative; }

/* The break note waits (space reserved, so nothing jumps), then pops in when the dot arrives. */
.journey-walk.is-live .journey > li.is-friction .journey__break {
  opacity: 0; transform: scale(0.94); transform-origin: left center;
  transition: opacity var(--duration-default) var(--ease), transform var(--duration-slow) var(--ease);
}
.journey-walk.is-live .journey > li.is-friction.is-hit .journey__break { opacity: 1; transform: none; }

/* Ghost: starts hidden behind the step number, drops down and to the left, settles faded with its label. */
.journey__ghost { position: absolute; left: 0; top: var(--cy, 2rem); width: 0; height: 0; pointer-events: none; }
.journey__ghost i {
  position: absolute; left: calc(1.125rem - 0.4rem); top: -0.4rem; width: 0.8rem; height: 0.8rem; border-radius: var(--radius-full);
  border: 2px dashed var(--color-border-strong); background: rgb(242 101 34 / 0.22);
  opacity: 0; transform: translate(0, 0);
  transition: transform var(--duration-slow) var(--ease), opacity var(--duration-fast) var(--ease);
}
.journey__ghost b {
  position: absolute; right: 0.4rem; top: 1.45rem; width: calc(var(--jw-gutter) - 0.8rem); text-align: right;
  font-size: var(--text-xs); font-weight: var(--font-weight-medium); line-height: 1.2; color: var(--color-text-secondary);
  opacity: 0; transform: translateX(0.5rem);
  transition: opacity var(--duration-default) var(--ease) 0.15s, transform var(--duration-default) var(--ease) 0.15s;
}
.journey > li.is-hit .journey__ghost i { opacity: 0.7; transform: translate(-2.4rem, 0.9rem); }
.journey > li.is-hit .journey__ghost b { opacity: 1; transform: none; }

/* ============ "Better flow" list: a clean run, no stumbles ============ */
.check-walk { position: relative; }
.check-walk.is-motion li { opacity: 0.3; transition: opacity var(--duration-default) var(--ease); }
.check-walk.is-motion li::before { transform: scaleX(0); transform-origin: left; transition: transform var(--duration-default) var(--ease); }
.check-walk.is-motion li.is-on { opacity: 1; }
.check-walk.is-motion li.is-on::before { transform: none; }
.check-walk__dot {
  position: absolute; left: calc(5px - 0.4rem); top: -0.4rem; width: 0.8rem; height: 0.8rem; border-radius: var(--radius-full);
  background: var(--color-action); box-shadow: 0 0 0 3px rgb(242 101 34 / 0.22); opacity: 0; pointer-events: none;
}

/* ============ Hero inbox ============
   Two columns only from 1024px, and only on heroes that opt in with .page-hero--split. Below that the figure sits
   under the button, so it never pushes the call to action down. */
.page-hero--split .hero-inbox { display: none; margin: 0; }
.hero-inbox.is-motion {
  display: block; max-width: 28rem; margin-top: var(--space-roomy); padding: var(--space-base); overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-background-alt);

}
.hero-inbox__title { display: flex; align-items: center; gap: var(--space-tight); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.hero-inbox__title::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-accent); flex: none; }
.hero-inbox__list { list-style: none; display: grid; gap: var(--space-tight); margin-top: var(--space-snug); }
.hero-inbox__list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-hairline) var(--space-tight); padding: var(--space-snug);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm);
  opacity: 0; transform: translate(calc(var(--sx, 0) * 1%), calc(var(--sy, 0) * 1rem + 0.75rem)) rotate(var(--sr, 0deg)) scale(0.96);
  transition: transform var(--duration-slow) var(--ease), opacity var(--duration-default) var(--ease), border-color var(--duration-default) var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.hero-inbox__chan { flex: none; padding: 0 var(--space-tight); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-weight-medium); line-height: 1.6; color: var(--color-text-secondary); }
.hero-inbox__msg { flex: 1 1 9rem; min-width: 0; font-weight: var(--font-weight-medium); }
.hero-inbox__meta { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-hairline) var(--space-tight); font-size: var(--text-xs); color: var(--color-text-secondary); opacity: 0; transform: translateY(4px); transition: opacity var(--duration-default) var(--ease), transform var(--duration-default) var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.hero-inbox__owner { padding: 0 var(--space-tight); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); background: rgb(242 101 34 / 0.1); color: var(--color-text-primary); font-weight: var(--font-weight-medium); line-height: 1.6; }
.hero-inbox__next::before { content: "\2192"; content: "\2192" / ""; margin-right: var(--space-hairline); color: var(--color-accent-ink); }

/* Stage 1: arrived, scattered and dashed. Stage 2: slid into one tidy list. Stage 3: owner and next action shown. */
.hero-inbox[data-stage="1"] .hero-inbox__list li { opacity: 1; transform: translate(calc(var(--sx, 0) * 1%), calc(var(--sy, 0) * 1rem)) rotate(var(--sr, 0deg)) scale(1); border-style: dashed; border-color: var(--color-border-strong); }
.hero-inbox[data-stage="2"] .hero-inbox__list li, .hero-inbox[data-stage="3"] .hero-inbox__list li { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
.hero-inbox[data-stage="3"] .hero-inbox__meta { opacity: 1; transform: none; }

@media (min-width: 1024px) {
  .page-hero--split > .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-generous); align-items: start; }
  .page-hero--split > .container > :not(.hero-inbox) { grid-column: 1; }
  .page-hero--split > .container > .eyebrow { justify-self: start; }
  .page-hero--split > .container > .hero-inbox.is-motion { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; max-width: none; margin-top: 0; }
}

@media print { .hero-inbox { display: none !important; } .journey-walk.is-live .journey > li.is-friction .journey__break { opacity: 1; transform: none; } .journey-walk__rail, .journey-walk__dot, .journey__ghost { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .journey-walk *, .journey__ghost *, .check-walk *, .check-walk::before, .hero-inbox * { animation: none !important; transition: none !important; }
}
/* Motion styles for the pages batch (v0.3): flow trace, hero visuals, website "six jobs" wireframe, next steps.
   Every component reads fully as plain markup without JS; decoration appears once JS adds .is-motion.
   Only transform and opacity animate. Reduced motion: tokens already zero durations, keyframes are switched off below. */

/* ---------- Flow trace ---------- */
.trace-host { position: relative; }
.flow-trace.is-motion li { position: relative; }
.flow-trace.is-motion li span { position: relative; }
/* The lit state is an overlay that fades in (opacity only), so no colour transitions. */
.flow-trace.is-motion li span::after {
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--color-accent-ink); border-radius: var(--radius-sm);
  background: rgb(242 101 34 / 0.08); opacity: 0; pointer-events: none; transition: opacity var(--duration-default) var(--ease);
}
.flow-trace.is-motion li.is-passed span::after { opacity: 1; }
.flow-trace.is-motion li.is-current span::after { background: rgb(242 101 34 / 0.16); border-width: 2px; inset: -2px; }
/* Tick stamp on each passed step. Text glyph with empty alt, so it adds nothing to the list for screen readers. */
.flow-trace.is-motion li::after {
  content: "\2713"; content: "\2713" / ""; position: absolute; right: -0.4rem; top: -0.55rem; z-index: 1;
  display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full);
  background: var(--color-action); color: var(--color-text-on-action); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1;
  opacity: 0; transform: scale(0.6); transition: opacity var(--duration-default) var(--ease), transform var(--duration-default) var(--ease);
}
.flow-trace.is-motion li.is-passed::after { opacity: 1; transform: none; }
.flow-trace.is-motion[data-stamp="none"] li::after { display: none; }

.flow-trace.is-motion.has-card { padding-bottom: 3rem; }
@media (max-width: 639.98px) { .flow-trace.is-motion.has-card { padding-bottom: 0; } }

.trace-dot, .trace-card { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.trace-dot { width: 0.75rem; height: 0.75rem; border-radius: var(--radius-full); background: var(--color-action); box-shadow: 0 0 0 4px rgb(242 101 34 / 0.2); }
.trace-card {
  display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-hairline) var(--space-snug) var(--space-hairline) var(--space-tight);
  border: 1px solid var(--color-accent-ink); border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-md);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; line-height: var(--line-height-snug);
}
.trace-card__icon { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; color: var(--color-accent-ink); }
.trace-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero with a right-hand visual (BOS, Content) ---------- */
.hero-visual { display: none; }
@media (min-width: 1024px) {
  .page-hero--visual .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: var(--space-generous); align-items: center; }
  .page-hero--visual .container > * { grid-column: 1; justify-self: start; }
  .page-hero--visual .container > .hero-visual { display: block; grid-column: 2; grid-row: 1 / span 4; justify-self: stretch; }
}
.rec-card, .idea-card {
  padding: var(--space-comfortable); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-md);
}
.rec-card__tag, .idea-card__tag {
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-text-secondary);
}
.rec-card__rows { list-style: none; margin-top: var(--space-base); border-top: 1px solid var(--color-border); }
.rec-card__rows li { display: flex; justify-content: space-between; gap: var(--space-base); align-items: baseline; padding-block: var(--space-snug); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.rec-card__rows li span { color: var(--color-text-secondary); }
.rec-card__rows li b { font-weight: var(--font-weight-semibold); text-align: right; }
.rec-card__rows li.rec-card__stamp { border-bottom: 0; justify-content: flex-start; align-items: center; gap: var(--space-tight); padding-bottom: 0; color: var(--color-accent-ink); font-weight: var(--font-weight-semibold); }
.rec-card__stamp i { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full); background: var(--color-action); color: var(--color-text-on-action); font-style: normal; font-size: var(--text-xs); line-height: 1; }

.is-motion.rec-card [data-row] { opacity: 0; transform: translateY(var(--reveal-distance)); }
.is-motion.rec-card.is-in [data-row] {
  opacity: 1; transform: none;
  transition: opacity var(--duration-slow) var(--ease) calc(var(--i, 0) * 140ms), transform var(--duration-slow) var(--ease) calc(var(--i, 0) * 140ms);
}

.idea-card { display: grid; gap: var(--space-base); justify-items: center; text-align: center; }
.idea-card__icons, .idea-card__label { display: grid; }
.idea-card__icons > span, .idea-card__label > span { grid-area: 1 / 1; opacity: 0; transform: translateY(8px) scale(0.92); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
.idea-card__icons > span.is-on, .idea-card__label > span.is-on { opacity: 1; transform: none; }
.idea-card__icons > span { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--radius-full); border: 2px solid var(--color-accent); color: var(--color-accent-ink); background: rgb(242 101 34 / 0.08); }
.idea-card__icons svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.idea-card__label > span { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); }
.idea-card__dots { list-style: none; display: flex; gap: var(--space-tight); }
.idea-card__dots li { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-border); transition: transform var(--duration-default) var(--ease); }
.idea-card__dots li.is-done { background: var(--color-border-strong); }
.idea-card__dots li.is-on { background: var(--color-action); transform: scale(1.5); }

/* ---------- Websites: six jobs + wireframe ---------- */
.site-jobs__aside { display: none; }
.site-jobs__list li { position: relative; }
@media (min-width: 1024px) {
  .site-jobs.is-motion { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-spacious); align-items: start; }
  .site-jobs.is-motion .site-jobs__list { grid-template-columns: 1fr; }
  .site-jobs.is-motion .site-jobs__aside { display: block; position: sticky; top: calc(var(--header-height) + var(--space-comfortable)); }
  .site-jobs.is-motion .site-jobs__list li::before {
    content: ""; position: absolute; left: 0; top: var(--space-snug); bottom: var(--space-snug); width: 4px; border-radius: var(--radius-full);
    background: var(--color-action); transform: scaleY(0); transition: transform var(--duration-default) var(--ease);
  }
  .site-jobs.is-motion .site-jobs__list li.is-active::before { transform: scaleY(1); }
}

.wire { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.wire__bar { display: flex; align-items: center; gap: var(--space-hairline); padding: var(--space-tight) var(--space-snug); border-bottom: 1px solid var(--color-border); background: var(--color-background-alt); }
.wire__bar i { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-border-strong); }
.wire__url { flex: 1; height: 0.875rem; margin-left: var(--space-tight); border-radius: var(--radius-full); background: var(--color-border); }
.wire__body { display: grid; gap: var(--space-base); padding: var(--space-base) var(--space-base) var(--space-comfortable); }
.wire__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-base); }
.wire__region { position: relative; padding: var(--space-snug); border-radius: var(--radius-sm); background: var(--color-background-alt); display: grid; gap: var(--space-tight); align-content: start; }
.wire__region::after {
  content: ""; position: absolute; inset: -4px; border: 2px solid var(--color-action); border-radius: var(--radius-md);
  opacity: 0; pointer-events: none; transition: opacity var(--duration-default) var(--ease);
}
.wire__label {
  position: absolute; left: var(--space-tight); top: 0; z-index: 2; transform: translateY(-60%) scale(0.92); transform-origin: left center;
  padding: 2px var(--space-tight); border-radius: var(--radius-full); background: var(--color-action); color: var(--color-text-on-action);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); white-space: nowrap;
  opacity: 0; transition: opacity var(--duration-default) var(--ease), transform var(--duration-default) var(--ease);
}
.wire__region.is-active::after, .wire__region.is-active > .wire__label { opacity: 1; }
.wire__region.is-active > .wire__label { transform: translateY(-60%); }
.wire b { display: block; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-border-strong); opacity: 0.55; }
.wire b.w-title { height: 0.875rem; width: 70%; opacity: 0.8; }
.wire b.w-short { width: 55%; }
.wire b.w-btn { width: 5rem; height: 1.25rem; border-radius: var(--radius-sm); background: var(--color-text-primary); opacity: 0.8; }
.wire__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-tight); }
.wire__logos b { height: 1.25rem; border-radius: var(--radius-sm); }
.wire__faq-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-tight); }
.wire__faq-row b { flex: 1; }
.wire__faq-row i { font-style: normal; font-size: var(--text-xs); line-height: 1; color: var(--color-text-secondary); }
.wire__field { height: 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); }
.wire__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wire__cal i { aspect-ratio: 1; border-radius: 2px; background: var(--color-border); }
.wire__cal i.is-pick { background: var(--color-text-primary); opacity: 0.8; }
.wire__out { position: relative; display: grid; justify-items: center; gap: var(--space-hairline); margin-top: var(--space-tight); }
.wire__arrow { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--color-border-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wire__team { position: relative; width: 100%; padding: var(--space-snug) var(--space-base); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-md); text-align: center; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.wire__team small { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.wire__out.wire__region { padding: 0; background: none; }
.wire__out.wire__region::after { inset: -6px; }
.wire__out > .wire__label { top: 0; }

/* ---------- Next steps (Business Review, Thank-you) ---------- */
.process .step-status {
  display: inline-flex; align-items: center; gap: var(--space-tight); margin-top: var(--space-hairline);
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-eyebrow); color: var(--color-accent-ink);
}
.step-status i { position: relative; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-action); }
.step-status i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-action); opacity: 0;
  animation: step-pulse 1.4s var(--ease) 3;
}
@keyframes step-pulse { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.process li.is-current::before { background: var(--color-action); color: var(--color-text-on-action); }
.step-trail {
  position: absolute; z-index: 2; left: calc(1.375rem - 4px); top: 2.75rem; width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-action); opacity: 0; pointer-events: none;
}
.process--reveal.is-motion li { opacity: 0; transform: translateY(var(--reveal-distance)); }
.process--reveal.is-motion.is-in li {
  opacity: 1; transform: none;
  transition: opacity var(--duration-slow) var(--ease) calc(var(--i, 0) * 140ms), transform var(--duration-slow) var(--ease) calc(var(--i, 0) * 140ms);
}

@media print {
  .process--reveal.is-motion li, .is-motion.rec-card [data-row] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step-status i::after { animation: none; }
  .trace-dot, .trace-card, .step-trail { display: none; }
}
/* Case-study pop-up on the Work page. A soft box (native <dialog>) that opens from a client card.
   Without JS the card keeps its short summary and the button stays hidden. Esc, backdrop click and Close all dismiss it.
   Only opacity and transform animate; reduced motion zeroes the durations via tokens. */

/* Card: the whole card opens the case study once JS has switched the button on.
   The button covers the card and has no visible text, so the card keeps exactly its original size.
   A small "+" in the bottom corner is the cue; the words are there for screen readers. */
.work-card .case-open {
  position: absolute; inset: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: none; color: var(--color-link); font: inherit; cursor: pointer;
}
.work-card .case-open::after {
  content: "+"; content: "+" / ""; position: absolute; right: var(--space-base); bottom: var(--space-base);
  display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-surface); font-size: 1.25rem; line-height: 1; font-weight: var(--font-weight-medium);
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.work-card--case.is-case-ready { transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease); }
.work-card--case.is-case-ready:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.work-card--case.is-case-ready:hover .case-open::after { background: var(--color-action); border-color: var(--color-action); color: var(--color-text-on-action); }
.work-card--case.is-case-ready:has(.case-open:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.work-card--case .case-open:focus-visible { outline: none; }
.work-card--case .card__foot a { position: relative; z-index: 2; }

.launchpad-intro { margin: var(--space-tight) 0 var(--space-comfortable); }

/* The box. */
.case {
  width: min(46rem, calc(100% - 2 * var(--space-base))); max-width: none; max-height: calc(100dvh - 2 * var(--space-base)); margin: auto; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-primary);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.case[open] { display: flex; flex-direction: column; animation: case-in var(--duration-default) var(--ease); }
/* ::backdrop does not reliably inherit custom properties, so this value mirrors --color-overlay. */
.case::backdrop { background: rgb(26 26 26 / 0.55); }
@keyframes case-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
html:has(.case[open]) { overflow: hidden; }

.case__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-base); padding: var(--space-snug) var(--space-base) var(--space-snug) var(--space-comfortable); border-bottom: 1px solid var(--color-border); background: var(--color-background-alt); }
.case__bar .work-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); min-width: 0; }
.case__close {
  display: inline-flex; flex: none; align-items: center; gap: var(--space-tight); min-height: var(--target-min); padding: 0 var(--space-base);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface);
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); cursor: pointer;
}
.case__close:hover { background: var(--color-state-hover); }
.case__body { overflow-y: auto; padding: var(--space-comfortable); display: grid; gap: var(--space-comfortable); align-content: start; }
@media (min-width: 768px) { .case__body { padding: var(--space-roomy); } }
.case__body h2 { font-size: var(--text-2xl); }
.case__lead { font-size: var(--text-lg); line-height: var(--line-height-normal, 1.6); color: var(--color-text-primary); max-width: 52ch; }
.case__cols { display: grid; gap: var(--space-comfortable); }
@media (min-width: 640px) { .case__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-spacious); } }
.case__label { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.case__label ~ .case__label { margin-top: var(--space-base); }
.case__cols section > p { margin-top: var(--space-tight); }
.case__cols .check-list { margin-top: var(--space-snug); }
.case__proof { padding-top: var(--space-base); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.case__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-base); }
.case__foot > span { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* Phones: a sheet that rises from the bottom. */
@media (max-width: 639.98px) {
  .case { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
}
@media print { .case-open, .case { display: none !important; } }
/* Mobile layer. Loaded last so it can override component and motion rules without !important.
   Desktop (1100px and up) is untouched; most rules apply below 600px or 768px. */

/* ---------- Header swap (below 1100px) ----------
   First screen: mark + wordmark + menu. After the hero buttons scroll away (site.js adds
   html.cta-passed), the wordmark fades out and "Book a Review" fades in over the same spot.
   The CTA is absolutely placed so the swap never reflows the bar. Without JS nothing changes. */
@media (max-width: 1099px) {
  .brand__word { display: block; height: 11px; transition: opacity var(--duration-default) var(--ease), transform var(--duration-default) var(--ease); }
  .header-inner { position: relative; }
  .menu-toggle { margin-left: auto; }
  html.header-swap .header-cta {
    position: absolute; top: 50%; right: calc(var(--gutter) + var(--target-min) + var(--space-snug));
    margin: 0; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-50%) translateY(-6px);
    transition: opacity var(--duration-default) var(--ease), transform var(--duration-default) var(--ease), visibility 0s linear var(--duration-default);
  }
  html.header-swap.cta-passed .header-cta {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%);
    transition: opacity var(--duration-default) var(--ease), transform var(--duration-default) var(--ease), visibility 0s;
  }
  html.header-swap.cta-passed .brand__word { opacity: 0; transform: translateX(-6px); }
  /* With the menu open, the bar keeps the wordmark; the menu has its own full-width CTA. */
  body.menu-open .header-cta { opacity: 0 !important; visibility: hidden !important; }
  body.menu-open .brand__word { opacity: 1 !important; transform: none !important; }
}
/* ---------- Phones (below 600px): proportions taken from the old experius.xyz opening screen ----------
   Small mark, small tracked wordmark, round menu button, wide side margins, generous vertical rhythm. */
@media (max-width: 599px) {
  :root { --header-height: 4rem; --gutter: 1.5rem; --space-section: 4rem; }

  .brand { gap: 0.875rem; }
  .brand__mark { height: 20px; }
  .brand__word { height: 9px; }
  .menu-toggle {
    width: var(--target-min); height: var(--target-min); padding: 0; justify-content: center;
    border-radius: var(--radius-full); border-color: var(--color-border);
  }
  .menu-toggle .icon { width: 1.25rem; height: 1.25rem; }

  .section-heading { margin-bottom: var(--space-roomy); }
  .section-heading > * + * { margin-top: var(--space-snug); }
  .section-heading p { font-size: var(--text-base); line-height: 1.65; }

  /* Home hero: one composed first screen. Eyebrow, headline and lead read as one block; the two buttons
     sit on the bottom edge of the screen (svh, so the browser toolbars are accounted for).
     If the content is taller than the screen it simply grows. */
  .hero { padding-block: var(--space-comfortable) var(--space-generous); }
  .hero__lockup {
    display: flex; flex-direction: column;
    min-height: calc(100svh - var(--header-height) - var(--space-comfortable) - var(--space-comfortable));
  }
  .hero .eyebrow { font-size: 0.6875rem; letter-spacing: 0.04em; white-space: nowrap; }
  /* 9vw keeps "Build a business / that works / beyond you." on three lines from 360 to 430 wide. */
  .hero h1, .hero h1.mt-lg { margin-top: 1.25rem; font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.1; max-width: none; }
  .hero .lead { margin-top: 1.25rem; font-size: var(--text-lg); line-height: 1.65; color: var(--color-text-secondary); }
  /* Free height is shared, not dumped in one gap: a little above the text, more above the buttons
     (1 : 1.6), so the text block sits just above centre and the buttons stay on the bottom edge. */
  .hero__lockup::before { content: ""; flex: 1 0 0; }
  .hero__lockup::after { content: ""; flex: 1.6 0 0; order: 1; min-height: var(--space-spacious); }
  .hero__lockup > .btn-row { order: 2; }
  .hero .btn-row { margin-top: 0; gap: var(--space-snug); }
  .hero .btn-row .btn { min-height: 3rem; }

  /* Inner pages: same calm rhythm, title a little higher so their CTAs sit on the first screen. */
  .page-hero { padding-block: var(--space-roomy) var(--space-spacious); }
  .page-hero .lead { font-size: var(--text-base); line-height: 1.7; margin-top: var(--space-base); }
  .page-hero .btn-row { margin-top: var(--space-comfortable); }

  .card { padding: var(--space-comfortable); }

  /* Homepage cards say one thing each on a phone: name, one line, link. The detail lists live one
     tap away on the page each card opens, so they're hidden here to keep the page calm. */
  .capability ul,
  .rail .audience ul,
  .rail .work-card dl { display: none; }
  .rail .work-card h3 { margin-top: var(--space-base); }

  /* ---------- Bridge flow: two vertical step lists side by side ----------
     Desktop wraps the chips in a row; on a phone that left connectors dangling at line starts. */
  .bridge-flow { grid-template-columns: 1fr 1fr; gap: var(--space-tight); padding: var(--space-snug); }
  .bridge-flow__half { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-base); padding: var(--space-base) var(--space-snug); }
  .bridge-flow__half li { line-height: 1.25rem; }
  .bridge-flow__half li + li { padding-left: 0; }
  .bridge-flow__half li + li::after {
    left: calc(0.3125rem - 1px); top: calc(-1 * (var(--space-base) + 0.3125rem));
    width: 0; height: calc(var(--space-base) + 0.625rem);
    border-top: 0; border-left: 2px solid var(--color-accent); transform-origin: center top;
  }
  .bridge-flow.is-motion .bridge-flow__half li + li::after { transform: scaleY(0); }
  .bridge-flow.is-motion.is-drawn .bridge-flow__half li + li::after { transform: none; }
  .bridge-flow figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-tight); font-size: var(--text-xs); padding-inline: var(--space-hairline); }

  .bridge { font-size: var(--text-lg); }
}

/* ---------- Below 768px: single-column zones ---------- */
@media (max-width: 767px) {
  /* Self-check: compact tickable rows instead of tall cards. Tap target stays well over 44px. */
  .selfcheck__list.grid { gap: var(--space-tight); }
  .selfcheck__item { padding: var(--space-snug) var(--space-base) var(--space-snug) calc(var(--space-base) + 2.125rem); gap: 2px; }
  .selfcheck__item input { left: var(--space-base); top: calc(var(--space-snug) + 0.125rem); }
  .selfcheck__num { display: none; }
  .selfcheck__item strong { font-size: var(--text-base); }
  .selfcheck__item:hover { transform: none; }
  .selfcheck__result { margin-top: var(--space-comfortable); padding: var(--space-base); }
  .selfcheck__verdict { font-size: var(--text-base); }

  /* Rail: a native swipe row (scroll-snap). The next card peeks in so it reads as more to see. */
  .rail-hint {
    display: flex; align-items: center; gap: var(--space-tight); margin: calc(-1 * var(--space-base)) 0 var(--space-base);
    font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-text-secondary);
  }
  .rail-hint::after { content: ""; width: 2rem; border-top: 2px solid var(--color-accent); }
  .grid.rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(85%, 22rem); gap: var(--space-snug);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-hairline) var(--gutter) var(--space-base);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin; scrollbar-color: var(--color-accent) transparent;
  }
  .grid.rail > * { scroll-snap-align: start; }
  .grid.rail > .card--link:hover { transform: none; }
}
.rail-hint { display: none; }
@media (max-width: 767px) { .rail-hint { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .brand__word, html.header-swap .header-cta { transition: none !important; }
}