/*
  Strata Match design system v3 (2026-09-30).
  Source of truth: _ops/design-system-v3-2026-09-30.md and the canvas board
  "Design system v2.2" (System22). Light, photo-led, teal and mint.
  Loaded ONLY by src/layouts/V3Layout.astro, so v4-reskin pages are untouched
  until each route is ported. Pages and components use var(--...) tokens only;
  scripts/design-lint-v3.mjs fails the build on raw hex, radii, shadows,
  font families or uppercase labels outside this token block.
*/

@font-face {
  font-family: "Nunito Sans Variable";
  src: url("/v3/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback for Nunito Sans (performance audit 2026-10-23,
   item 7). Until the web font arrives, text sets in the local Arial scaled
   to Nunito's widths and vertical metrics, so the swap doesn't rewrap lines
   or move the page. Widths measured in Chromium on a 400-character sample
   (Nunito vs Arial: 400 1.008, 600 0.953, 700 0.972); ascent 1011, descent
   353, line gap 0 per 1000 units (Nunito Sans), divided by size-adjust.
   Arial has no semibold, so 600 and 700 both set in Arial Bold with their own
   scale. Where Arial is missing (most Android phones) the stack falls through
   to the system sans as before; Roboto is already within 1% of Nunito's
   regular width. */
@font-face {
  font-family: "Nunito Sans Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 549;
  size-adjust: 100.8%;
  ascent-override: 100.3%;
  descent-override: 35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Nunito Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 550 649;
  size-adjust: 95.3%;
  ascent-override: 106.1%;
  descent-override: 37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Nunito Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 650 1000;
  size-adjust: 97.2%;
  ascent-override: 104%;
  descent-override: 36.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Variable";
  src: url("/v3/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4 Variable";
  src: url("/v3/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ───────── Tokens (the only place raw values are allowed) ───────── */
:root {
  /* color-system:start (generated by scripts/color-system-v3.py, do not edit by hand) */
  --ink: #1D1E1F;
  --muted: #535656;
  --faint: #616464;
  --teal-900: #17343A;
  --teal-700: #213E45;
  --mint: #8FE0DA;
  --on-teal-muted: #B4CCD2;
  --link: #304F55;
  --good: #45676E;
  --good-bg: #EAF2F3;
  --white: #FFFFFF;
  --pale: #EAF2F3;
  --wash: #F6F9FA;
  --gray: #EEF1F1;
  --rule: #E1E3E4;
  --border: #CCCECF;
  --field: #818484;
  --border-strong: #616464;
  --map-land: #F6F9FA;
  --map-cover: #EAF2F3;
  --map-water: #D4E3E6;
  --mint-100: var(--pale);
  --sage: var(--pale);
  --sand: var(--pale);
  --sand-rule: var(--rule);
  --mist: var(--pale);
  --stage: var(--gray);
  /* color-system:end */
  /* Text */

  /* Brand: deep teal and mint. Used sparingly: primary action, selected state, logo. */

  /* Status (always paired with words, never colour alone) */
  --wait: #B7791F;
  --wait-ink: #8A5A12;
  --wait-bg: #FBF1DF;

  /* Surfaces and lines */
  --scrim: linear-gradient(0deg, rgba(23, 52, 58, 0.9) 0%, rgba(23, 52, 58, 0) 65%);
  --scrim-full: linear-gradient(0deg, rgba(23, 52, 58, 0.92) 0%, rgba(23, 52, 58, 0.62) 100%);

  /* Shape: angled corners only on panels, primary actions, selected tab and logo */
  --r-panel: 40px 4px 40px 4px;
  --r-hero: 0 0 40px 4px;
  --r-action: 10px 2px 10px 2px;
  --r-chip: 6px 2px 6px 2px;
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 6px;
  --r-xs: 3px;
  --r-pill: 9999px;

  /* Elevation */
  --shadow-lift: 0 1px 2px #17343A14, 0 12px 28px #17343A24;
  --shadow-soft: 0 1px 2px #17343A0F, 0 8px 24px -12px #17343A2E;
  /* Stronger hairline (desk and paper, Mike 2026-10-22): a white card on the pale desk reads as an object. */
  --shadow-hair: 0 0 0 1px #17343A0F, 0 1px 3px #17343A1A;

  /* Type */
  --font-ui: "Nunito Sans Variable", "Nunito Sans", "Nunito Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-doc: "Source Serif 4 Variable", "Source Serif 4", Georgia, serif;
  --fs-display: clamp(40px, 5.2vw, 60px);
  --fs-h1: clamp(32px, 3.6vw, 44px);
  --fs-h2: clamp(26px, 2.6vw, 32px);
  --fs-h3: 24px;
  --fs-title: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-ui: 15px;
  --fs-small: 14px;
  --fs-meta: 13px;
  --fs-micro: 12px;

  /* Layout */
  --wrap: 1040px;
  --wrap-wide: 1280px;
  --gutter: 16px;
  --nav-h: 72px;
  --shadow-focus: 0 0 0 3px #0E6A734D;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2317343A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 400ms;
  --stagger: 80ms;
  /* The home hero's slow photo rotation: four photos, 7 s each. */
  --dur-rotate: 28s;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.v3 {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.v3 img { max-width: 100%; display: block; }
:where(.v3) a { color: inherit; }
:where(.v3) a:hover { color: var(--link); }
.v3 :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* Heading scale (Mike, 2026-10-23: "everything blends in"). Headings are 700
   and body text 400, so a heading never reads as one more line of copy; size
   carries the level: display 60, h1 44, h2 32, h3 24, title 20. :where() keeps
   the specificity at zero, so a heading class (.v3-title, a card title) wins. */
.v3 h1, .v3 h2, .v3 h3, .v3 h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.08; }
:where(.v3) :where(h1, h2, h3, h4) { font-weight: 700; }
.v3 p { margin: 0; }

.v3-display { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; }
.v3-h1 { font-size: var(--fs-h1); }
.v3-h2 { font-size: var(--fs-h2); }
.v3-h3 { font-size: var(--fs-h3); }
.v3-title { font-size: var(--fs-title); font-weight: 700; letter-spacing: 0; }
.v3-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 60ch; }
.v3-muted { color: var(--muted); }
.v3-meta { font-size: var(--fs-meta); color: var(--muted); }
.v3-doc { font-family: var(--font-doc); }

.v3-wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.v3-wrap-wide { width: min(var(--wrap-wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.v3-section { padding-block: 88px; }
@media (max-width: 720px) { .v3-section { padding-block: 56px; } }

/* ───────── Buttons ─────────
   One button system (Mike, 2026-10-23; DESIGN.md §3 "Buttons and links"):
   1. Primary   .v3-btn.v3-btn--primary + .v3-btn__chip arrow. Teal fill, mint
                words, angled corners. One per view.
   2. Secondary .v3-btn.v3-btn--outline. White, teal edge and words.
   3. Tertiary  .v3-textlink. Bold link-colour words and a small arrow; no
                box, no underline.
   4. Small     .v3-btn--sm on 1 or 2 (40px, 44px on phones) for actions inside
                a card or a row; .v3-chip for filters and the compare toggle.
   Default height is 48px. On teal and on the hero glass the same classes
   switch to their on-dark colours (see "On dark surfaces" below). */
.v3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 20px;
  font: 700 15px/1 var(--font-ui); text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; border-radius: var(--r-md); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
/* Retired 2026-10-23: --lg now renders at the default size, so every primary is
   one height. Don't add it to new markup. */
.v3-btn--lg { height: 48px; }
.v3-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.v3-btn--primary { background: var(--teal-900); color: var(--mint); border-radius: var(--r-action); padding-right: 10px; }
.v3-btn--primary:hover { color: var(--mint); background: var(--teal-700); }
.v3-btn--primary .v3-btn__chip {
  width: 26px; height: 26px; border-radius: var(--r-chip); background: var(--teal-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.v3-btn--outline { background: var(--white); color: var(--teal-900); border-color: var(--teal-900); }
.v3-btn--outline:hover { background: var(--pale); color: var(--teal-900); }
.v3-btn--block { display: flex; width: 100%; justify-content: space-between; }
.v3-textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-ui); color: var(--link); text-decoration: none; }
/* No underline, at rest or on hover (Mike, 2026-10-21): the words darken and the arrow nudges. */
.v3-textlink:hover { color: var(--teal-900); text-decoration: none; }

/* ───────── Surfaces ───────── */
.v3-panel { background: var(--mist); border-radius: var(--r-panel); padding: 56px clamp(20px, 5vw, 64px); }
/* A card is white paper with a --border edge and a hairline shadow; --rule is only for dividers inside it. */
.v3-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-hair); }
a.v3-card:hover { box-shadow: var(--shadow-soft); }
.v3-card--lift { border: 0; box-shadow: var(--shadow-lift); }
.v3-card--soft { box-shadow: var(--shadow-soft); }
.v3-gray { background: var(--gray); border-radius: var(--r-lg); }
.v3-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.v3-mono {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--gray); border: 1px solid var(--rule); font-weight: 700; font-size: var(--fs-body); color: var(--ink);
}
.v3-mono--lg { width: 80px; height: 80px; border-radius: var(--r-lg); font-size: var(--fs-h3); }

/* ───────── Form controls ───────── */
.v3-field { display: flex; flex-direction: column; gap: 6px; }
.v3-field__label { font-size: var(--fs-meta); font-weight: 700; }
.v3-field__help { font-size: var(--fs-small); color: var(--muted); }
.v3-input, .v3-select, .v3-textarea {
  width: 100%; height: 48px; padding: 0 14px;
  font: 400 15px/1.3 var(--font-ui); color: var(--ink);
  background: var(--white); border: 1px solid var(--field); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease);
}
.v3-textarea { height: auto; min-height: 96px; padding: 12px 14px; }
.v3-input:focus, .v3-select:focus, .v3-textarea:focus { border-color: var(--teal-900); outline: none; box-shadow: var(--shadow-focus); }
.v3-choice {
  display: flex; gap: 12px; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--field); border-radius: var(--r-md); background: var(--white);
}
.v3-choice:has(input:checked) { border: 2px solid var(--teal-900); padding: 13px 15px; background: var(--pale); }
.v3-choice input { accent-color: var(--teal-900); margin-top: 3px; }
/* Option tile: the one control for picking from a short list (match intake,
   scorecards). Radio = pick one, checkbox = pick any; both look the same. */
.v3-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v3-opts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-opts--stack { grid-template-columns: 1fr; }
.v3-opts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v3-opt {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 56px; width: 100%; padding: 12px 46px 12px 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--field); border-radius: var(--r-md); background: var(--white);
  font: 700 15px/1.35 var(--font-ui); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.v3-opt small { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.v3-opt input { position: absolute; opacity: 0; pointer-events: none; }
.v3-opt::after { content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--field); border-radius: var(--r-pill); background: var(--white); }
.v3-opt:hover { border-color: var(--teal-900); }
.v3-opt:has(input:checked), .v3-opt[aria-pressed="true"] { border-color: var(--teal-900); background: var(--pale); }
.v3-opt:has(input:checked)::after, .v3-opt[aria-pressed="true"]::after { border: 5px solid var(--teal-900); }
.v3-opt:has(input[type="checkbox"])::after { border-radius: var(--r-xs); }
.v3-opt:has(input[type="checkbox"]:checked)::after { border: 0; background: var(--teal-900); }
.v3-opt:has(input[type="checkbox"]:checked)::before { content: ""; position: absolute; z-index: 1; right: 22px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid var(--white); border-width: 0 2px 2px 0; rotate: 45deg; }
.v3-opt:has(input:focus-visible), .v3-opt:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 560px) { .v3-opts, .v3-opts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3-opts--two, .v3-opts--stack { grid-template-columns: 1fr; } }
/* "Use my location": a 44px round crosshair button beside a city or area
   field (home job box, /match/, /companies/; src/scripts/use-my-location.ts).
   It starts hidden and shows only where the browser can share a location.
   Its message line is a polite live region: progress and the result are
   read out but not shown (the filled field shows the result); errors show. */
.v3-locate { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--pale); color: var(--teal-900); cursor: pointer; }
.v3-locate[hidden] { display: none; }
.v3-locate:hover { background: var(--gray); }
.v3-locate:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.v3-locate[aria-busy="true"] { cursor: progress; }
.v3-locate[aria-busy="true"] svg { animation: v3-locate-pulse calc(var(--dur-slow) * 2) ease-in-out infinite alternate; }
@keyframes v3-locate-pulse { to { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .v3-locate[aria-busy="true"] svg { animation: none; opacity: 0.5; } }
.v3-locate-msg { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--wait-ink); }
.v3-locate-msg:not([data-tone="error"]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Wrapping tile row (RFP builders, 2026-10-21; mockups _ops/mockups/rfp-ui-first-*.png):
   the same .v3-opt answer tile, sized to its words and wrapping across lines.
   A tick shows on the chosen tile; "Not sure" uses the quiet variant. */
.v3-opts--wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.v3-opts--wrap .v3-opt { width: auto; min-width: 48px; min-height: 44px; justify-content: center; padding: 9px 16px; flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.v3-opts--wrap .v3-opt::after { content: none; }
.v3-opts--wrap .v3-opt:has(input:checked) { border: 2px solid var(--teal-900); padding: 8px 15px; background: var(--good-bg); color: var(--teal-900); }
.v3-opts--wrap .v3-opt:has(input:checked)::before, .v3-opts--wrap .v3-opt:has(input[type="checkbox"]:checked)::before { content: ""; position: static; z-index: auto; flex: 0 0 auto; width: 6px; height: 11px; margin: -3px 2px 0 1px; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; background: none; }
.v3-opts--wrap .v3-opt small { font-weight: 400; }
.v3-opt--quiet { color: var(--muted); font-weight: 400; border-style: dashed; }
@media (max-width: 560px) { .v3-opts--wrap .v3-opt { flex: 1 1 calc(50% - 5px); min-height: 48px; } }

/* Toggle (RFP builders, 2026-10-21): a yes/no requirement that is usually on.
   A real checkbox with role="switch" sits over the track, 44px tall to tap. */
.v3-toggle { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; min-width: 56px; height: 44px; }
.v3-toggle__state { min-width: 2ch; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.v3-toggle:has(input:checked) .v3-toggle__state { color: var(--teal-900); }
.v3-toggle input, .v3 .v3-toggle input[type="checkbox"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v3-toggle__track { position: relative; flex: 0 0 52px; width: 52px; height: 30px; border-radius: var(--r-pill); background: var(--field); transition: background-color var(--dur-fast) var(--ease); }
.v3-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-hair); transition: translate var(--dur-fast) var(--ease); }
.v3-toggle input:checked + .v3-toggle__track { background: var(--teal-900); }
.v3-toggle input:checked + .v3-toggle__track::after { translate: 22px 0; }
.v3-toggle input:focus-visible + .v3-toggle__track { outline: 2px solid var(--link); outline-offset: 2px; }

/* Stepper (RFP builders, 2026-10-21): minus and plus around a number. */
.v3-stepper { display: inline-flex; align-items: stretch; gap: 6px; }
.v3-stepper button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--field); border-radius: var(--r-md); background: var(--white); color: var(--teal-900); font: 600 24px/1 var(--font-ui); cursor: pointer; }
.v3-stepper button:hover { border-color: var(--teal-900); }
.v3-stepper button:disabled { color: var(--faint); cursor: not-allowed; }
.v3-stepper input { width: 72px; height: 44px; padding: 0 8px; border: 1px solid var(--field); border-radius: var(--r-md); background: var(--white); font: 700 18px/1 var(--font-ui); color: var(--ink); text-align: center; }
.v3-stepper input:focus { border-color: var(--teal-900); outline: none; box-shadow: var(--shadow-focus); }

/* Recommended tag (RFP builders, 2026-10-21): same shape as the Sponsored tag,
   in teal. Always next to a one-line reason. */
.v3-rec { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--teal-700); border-radius: var(--r-xs); background: var(--white); font-size: var(--fs-meta); font-weight: 700; line-height: 1; color: var(--teal-900); white-space: nowrap; }

.v3-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--gray); border-radius: var(--r-md); }
.v3-seg label, .v3-seg a { display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--muted); cursor: pointer; text-decoration: none; }
.v3-seg input { position: absolute; opacity: 0; pointer-events: none; }
.v3-seg label:has(input:checked), .v3-seg [aria-current="true"] { background: var(--white); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-hair); }
.v3-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--white);
  font-size: var(--fs-small); color: var(--ink); text-decoration: none;
}
.v3-chip[aria-pressed="true"], .v3-chip:has(input:checked) { border: 1.5px solid var(--teal-900); background: var(--pale); font-weight: 700; }
.v3-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--white); font-size: var(--fs-micro); font-weight: 700; color: var(--teal-900); }

/* Status is text first, colour second */
.v3-status { font-size: var(--fs-meta); font-weight: 600; }
.v3-status--good { color: var(--good); }
.v3-status--wait { color: var(--wait-ink); }
.v3-status--muted { color: var(--muted); }

/* ───────── Nav ───────── */
.v3-nav { position: relative; z-index: 50; height: 72px; background: var(--white); border-bottom: 1px solid var(--rule); }
.v3-nav--over { position: absolute; inset: 0 0 auto 0; background: transparent; border-bottom: 0; }
.v3-nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; width: min(var(--wrap-wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* The logo is the header's only brand mark (Mike, 2026-10-23: the "Procurement
   Hub" label beside it read as a menu item, so it's gone). Option C: the menus
   follow the logo; Your projects (margin-left: auto) pushes itself and Start a
   project to the right edge. */
.v3-nav__brand { display: inline-flex; align-items: center; flex: none; margin-right: 12px; }
.v3-nav__brand img { height: 36px; width: auto; }
/* Header nav, Option C (Mike, 2026-10-23): one menu per hiring path (Building
   work, Strata management), Job board, Guides & tools and the quiet "For
   companies" link. Dropdowns are disclosure buttons; each lists its steps in
   two columns. "Your projects" sits beside "Start a project". */
.v3-nav a { text-decoration: none; }
.v3-nav__links { display: flex; align-items: center; height: 100%; }
.v3-nav__menu { display: flex; align-items: center; gap: 4px; height: 100%; margin: 0; padding: 0; list-style: none; }
.v3-nav__item { position: relative; height: 100%; display: flex; align-items: center; }
.v3-nav__top { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 10px; border: 0; background: none; font: 600 15px/1 var(--font-ui); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.v3-nav__top::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: var(--r-chip); background: transparent; transition: background-color var(--dur-fast) var(--ease); }
.v3-nav__top[aria-current]::after, .v3-nav__top[data-current="true"]::after, .v3-nav__top[aria-expanded="true"]::after { background: var(--teal-900); }
.v3-nav__top:hover { color: var(--link); }
/* "For companies" (Mike, 2026-10-22): a quiet plain link after the five sections, muted like the hub label, never a button. */
.v3-nav__co { color: var(--muted); }
.v3-nav__top:focus-visible { outline: 2px solid var(--link); outline-offset: -6px; border-radius: var(--r-sm); }
.v3-nav__chev { display: inline-flex; color: var(--muted); transition: rotate var(--dur-fast) var(--ease); }
.v3-nav__top[aria-expanded="true"] .v3-nav__chev { rotate: 180deg; }
.v3-nav__panel { position: absolute; top: calc(100% + 1px); left: -12px; z-index: 60; width: min(820px, calc(100vw - 2 * var(--gutter))); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.v3-nav__panel[hidden] { display: none; }
.v3-nav__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px 32px 24px; }
.v3-nav__col { min-width: 0; padding-right: 28px; }
.v3-nav__col + .v3-nav__col { padding: 0 0 0 28px; border-left: 1px solid var(--rule); }
.v3-nav__head { margin-bottom: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.v3-nav__col ul { margin: 0; padding: 0; list-style: none; }
.v3-nav__link { display: grid; gap: 2px; padding: 9px 12px; margin-inline: -12px; border-radius: var(--r-md); text-decoration: none; color: var(--ink); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.v3-nav__link b { font-size: 16px; font-weight: 700; }
.v3-nav__link span { font-size: var(--fs-small); color: var(--muted); }
/* Hover and keyboard focus (Mike 2026-10-22: "you can't see where you're going"): a clear tinted row and a teal title. */
.v3-nav__link:hover, .v3-nav__link:focus-visible { background: var(--map-water); }
.v3-nav__link:hover b, .v3-nav__link:focus-visible b { color: var(--link); }
.v3-nav__link:hover span, .v3-nav__link:focus-visible span { color: var(--ink); }
.v3-nav__link:focus-visible, .v3-nav__quick a:focus-visible, .v3-nav__help a:focus-visible { outline: 2px solid var(--link); outline-offset: 0; }
.v3-nav__quick { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--rule); }
.v3-nav__quick a { display: block; padding: 7px 12px; margin-inline: -12px; border-radius: var(--r-md); font-size: 15px; color: var(--ink); text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.v3-nav__quick a:hover, .v3-nav__quick a:focus-visible { background: var(--map-water); color: var(--link); }
.v3-nav__quick .v3-nav__all { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; color: var(--link); }
.v3-nav__help { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 32px; background: var(--pale); font-size: var(--fs-ui); color: var(--ink); }
.v3-nav__help a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin: -6px -10px; border-radius: var(--r-md); font-weight: 700; color: var(--link); text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
.v3-nav__help a:hover { background: var(--map-water); }
.v3-nav__mstart { display: none; }
.v3-nav__start { flex: none; }
/* Your projects: a plain link with a folder icon beside Start a project.
   Same type as the menu links; it lights up on /workspace/. */
.v3-nav__proj { position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: stretch; flex: none; margin-left: auto; margin-right: -12px; padding: 0 10px; font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--ink); text-decoration: none; white-space: nowrap; }
.v3-nav__proj::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: var(--r-chip); background: transparent; transition: background-color var(--dur-fast) var(--ease); }
.v3-nav__proj[aria-current]::after { background: var(--teal-900); }
.v3-nav__proj:hover { color: var(--link); }
.v3-nav__proj:focus-visible { outline: 2px solid var(--link); outline-offset: -6px; border-radius: var(--r-sm); }
.v3-nav__projicon { display: inline-flex; color: var(--muted); }
.v3-nav__item--proj, .v3-nav__item--contact { display: none; }
.v3-nav--over:not(.is-solid) .v3-nav__top, .v3-nav--over:not(.is-solid) .v3-nav__chev,
.v3-nav--over:not(.is-solid) .v3-nav__proj, .v3-nav--over:not(.is-solid) .v3-nav__proj .v3-nav__projicon { color: var(--white); }
.v3-nav--over:not(.is-solid) .v3-nav__proj:hover { color: var(--mint); }
.v3-nav--over:not(.is-solid) .v3-nav__proj[aria-current]::after { background: var(--white); }
.v3-nav--over:not(.is-solid) .v3-nav__top:hover { color: var(--mint); }
.v3-nav--over:not(.is-solid) .v3-nav__co { color: color-mix(in srgb, var(--white) 85%, transparent); }
.v3-nav--over:not(.is-solid) .v3-nav__top[aria-current]::after, .v3-nav--over:not(.is-solid) .v3-nav__top[data-current="true"]::after { background: var(--white); }
.v3-nav__burger { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); cursor: pointer; }
/* 1101-1339px: the menus, "For companies", Your projects and Start a project
   close up so they fit beside the logo. Under 1200px Your projects shows its
   folder icon only (a scrollbar leaves no room for the words); the words stay
   as its accessible name. */
@media (min-width: 1101px) and (max-width: 1339px) {
  .v3-nav__inner { gap: 16px; }
  .v3-nav__brand { margin-right: 4px; }
  .v3-nav__top { padding: 0 7px; }
  .v3-nav__top::after { left: 7px; right: 7px; }
  .v3-nav__proj { margin-right: -6px; padding: 0 7px; }
  .v3-nav__proj::after { left: 7px; right: 7px; }
}
@media (min-width: 1101px) and (max-width: 1199px) {
  .v3-nav__projtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .v3-nav__proj { padding: 0 11px; }
}
@media (max-width: 1100px) {
  .v3-nav__links, .v3-nav__start, .v3-nav__proj { display: none; }
  .v3-nav__item--proj, .v3-nav__item--contact { display: flex; }
  .v3-nav__projlabel { display: inline-flex; align-items: center; gap: 10px; }
  .v3-nav__burger { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .v3-nav__links {
    flex-direction: column; align-items: stretch; height: auto;
    position: fixed; top: 72px; left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); padding: 16px var(--gutter) 32px; border-top: 1px solid var(--rule);
  }
  .v3-nav.is-open .v3-nav__links { display: flex; }
  .v3-nav.is-open .v3-nav__mstart { display: flex; justify-content: center; align-items: center; min-height: 52px; height: auto; margin-bottom: 8px; padding: 0 20px; font-size: var(--fs-lead); }
  .v3-nav__menu { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
  .v3-nav__item { flex-direction: column; align-items: stretch; height: auto; border-bottom: 1px solid var(--rule); }
  .v3-nav__top { justify-content: space-between; width: 100%; height: auto; min-height: 56px; padding: 0; font-size: 18px; font-weight: 700; }
  .v3-nav__top::after { display: none; }
  .v3-nav__top[aria-current], .v3-nav__top[data-current="true"] { color: var(--link); }
  a.v3-nav__top::before { content: ""; order: 2; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); rotate: 45deg; margin-right: 4px; }
  .v3-nav__panel { position: static; width: auto; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .v3-nav__cols { grid-template-columns: 1fr; gap: 12px; padding: 0 0 16px 12px; }
  .v3-nav__col, .v3-nav__col + .v3-nav__col { padding: 0; border: 0; }
  .v3-nav__head { margin-bottom: 2px; }
  .v3-nav__link { padding: 8px 12px; min-height: 44px; align-content: center; } /* 44px tap targets in the phone menu (persona re-test, guides P3) */
  .v3-nav__link span { display: none; }
  .v3-nav__quick { display: none; }
  .v3-nav__help { display: none; }
  .v3-nav.is-open .v3-nav__burger .ic-open, .v3-nav:not(.is-open) .v3-nav__burger .ic-close { display: none; }
  .v3-nav--over:not(.is-solid) .v3-nav__links .v3-nav__top, .v3-nav--over:not(.is-solid) .v3-nav__links .v3-nav__chev { color: var(--ink); }
}
body.v3:has(.v3-nav.is-open) { overflow: hidden; }
/* Menu motion (UI review 2026-10-23, M5): dropdowns fade in and drop 4px from
   the trigger; the phone menu fades and slides 8px, in and out. --dur-fast and
   --ease only; the reduced-motion block below switches all of it off. */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 1101px) {
    .v3-nav__panel { transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); }
    @starting-style { .v3-nav__panel { opacity: 0; translate: 0 -4px; } }
  }
  @media (max-width: 1100px) {
    .v3-nav__links { opacity: 0; translate: 0 -8px; transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease), display var(--dur-fast) allow-discrete; }
    .v3-nav.is-open .v3-nav__links { opacity: 1; translate: none; }
    @starting-style { .v3-nav.is-open .v3-nav__links { opacity: 0; translate: 0 -8px; } }
  }
}

/* ───────── Footer ───────── */
.v3-foot { background: var(--teal-900); color: var(--white); padding: 72px 0 32px; font-size: var(--fs-small); }
.v3-foot a { text-decoration: none; }
.v3-foot__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.v3-foot__id { display: flex; align-items: center; gap: 14px; }
.v3-foot__id > a { flex: none; }
.v3-foot__brand img { height: 40px; width: auto; }
.v3-foot__brand p { margin-top: 16px; max-width: 30ch; font-size: 15px; color: var(--on-teal-muted); }
.v3-foot__projects.v3-btn--outline { margin-top: 22px; background: transparent; color: var(--mint); border-color: var(--mint); }
.v3-foot__projects.v3-btn--outline:hover { background: color-mix(in srgb, var(--mint) 12%, transparent); color: var(--white); }
/* Contact line under the brand (Mike, 2026-10-22, proposal D.2): a hairline,
   a muted question and two mint text links. Visible on phones without opening
   a group. */
.v3-foot__contact { max-width: 280px; margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); }
.v3-foot__brand .v3-foot__contact p { margin: 0 0 8px; max-width: none; font-size: var(--fs-ui); color: var(--on-teal-muted); }
.v3-foot .v3-foot__contactlinks { gap: 0; }
.v3-foot .v3-foot__contactlinks .v3-textlink { display: inline-flex; padding: 6px 0; font-size: var(--fs-ui); color: var(--mint); }
.v3-foot .v3-foot__contactlinks .v3-textlink:hover { color: var(--white); }
.v3-foot h2, .v3-foot__h { font-size: 15px; font-weight: 700; letter-spacing: 0; margin-bottom: 14px; color: var(--mint); white-space: nowrap; }
.v3-foot__group summary { display: block; list-style: none; cursor: default; pointer-events: none; }
.v3-foot__group summary::-webkit-details-marker { display: none; }
.v3-foot__chev { display: none; }
.v3-foot__group--path + .v3-foot__group--path { padding-left: 32px; border-left: 1px solid color-mix(in srgb, var(--white) 14%, transparent); }
.v3-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-foot ul a { display: block; padding: 6px 0; font-size: 15px; color: var(--on-teal-muted); }
.v3-foot a:hover { color: var(--white); }
.v3-foot .v3-foot__src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 48px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); color: var(--on-teal-muted); }
.v3-foot__src > span:first-child { margin-right: 6px; color: var(--on-teal-muted); }
.v3-foot__src a { color: var(--on-teal-muted); font-weight: 400; }
.v3-foot__dot { color: color-mix(in srgb, var(--on-teal-muted) 60%, transparent); }
.v3-foot__credit { white-space: nowrap; }
.v3-foot__base { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 20px; color: var(--on-teal-muted); }
.v3-foot .v3-foot__legal { flex-direction: row; flex-wrap: wrap; gap: 4px 24px; }
.v3-foot .v3-foot__legal a { padding: 4px 0; font-size: var(--fs-small); }
@media (max-width: 1180px) {
  .v3-foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
  .v3-foot__brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
  .v3-foot__brand p, .v3-foot__projects.v3-btn--outline { margin-top: 0; }
  .v3-foot__contact { margin-top: 0; padding-top: 0; border-top: 0; }
  .v3-foot__group--path + .v3-foot__group--path { padding-left: 28px; }
}
@media (max-width: 980px) {
  .v3-foot__grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
}
@media (max-width: 640px) {
  .v3-foot { padding-top: 48px; }
  .v3-foot__grid { grid-template-columns: 1fr; gap: 0; }
  .v3-foot__brand { display: block; margin-bottom: 28px; }
  .v3-foot__brand p { margin-top: 16px; font-size: 16px; }
  .v3-foot__projects.v3-btn--outline { margin-top: 22px; }
  .v3-foot__contact { max-width: none; margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); }
  .v3-foot .v3-foot__contactlinks .v3-textlink { min-height: 44px; padding: 0; }
  .v3-foot__group { border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); }
  .v3-foot__group:last-child { border-bottom: 1px solid color-mix(in srgb, var(--white) 14%, transparent); }
  .v3-foot__group--path + .v3-foot__group--path { padding-left: 0; border-left: 0; }
  .v3-foot__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin: 0; font-size: var(--fs-lead); color: var(--white); cursor: pointer; pointer-events: auto; }
  .v3-foot__chev { display: inline-flex; color: var(--mint); transition: transform var(--dur-base) var(--ease); }
  .v3-foot__chev svg { width: 18px; height: 18px; }
  .v3-foot__group[open] .v3-foot__chev { transform: rotate(180deg); }
  .v3-foot__group ul { padding-bottom: 14px; gap: 0; }
  .v3-foot__group ul a { padding: 11px 0; font-size: 16px; }
  .v3-foot .v3-foot__src { margin-top: 28px; padding-top: 0; border-top: 0; font-size: 15px; }
  .v3-foot__base { flex-direction: column; align-items: flex-start; margin-top: 20px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); }
  .v3-foot .v3-foot__legal a { padding: 12px 0; }
  /* Phone tap height of at least 44px (persona review 2026-10-22, P2-7). The
     credit stays inline so it wraps with its sentence; inline padding still
     widens the tap area. */
  .v3-foot__src a { display: inline-block; padding: 12px 0; }
  .v3-foot__credit { padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .v3-foot__chev { transition: none; } }

/* ───────── Motion (subtle; never more than a 3 px lift or 3 percent zoom) ───────── */
:where(.v3) :is(a, button, label) { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.v3-zoom { overflow: clip; }
.v3-zoom img { transition: transform var(--dur-slow) var(--ease); }
.v3-zoom:hover img { transform: scale(1.03); }
.v3-lift { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.v3-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
@media (prefers-reduced-motion: reduce) {
  .v3 *, .v3 *::before, .v3 *::after { transition: none !important; animation: none !important; } /* never transform:none here: it breaks MapLibre marker positioning */
}


/* ───────── Premium motion layer (v3-motion.ts adds html.js and html.lenis) ───────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

.v3-btn { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease); }
.v3-btn:active { transform: scale(0.98); }
.v3-btn--primary:hover { box-shadow: var(--shadow-soft); }
.v3-btn__chip svg, .v3-textlink svg { transition: translate var(--dur-base) var(--ease); }
.v3-btn:hover .v3-btn__chip svg, .v3-textlink:hover svg { translate: 3px 0; }
.v3-textlink { transition: color var(--dur-fast) var(--ease); }
.v3-card-link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-lg); }
.v3-card-link:hover { color: inherit; }
.v3-card-link .v3-zoom { border-radius: var(--r-lg); }
.v3-card-link:hover .v3-card-link__title { color: var(--link); }

/* Reveal on scroll (UI review 2026-10-23, M3): reading pages only, on the
   --dur-slow token with an 8px rise. Forms, lists and tools don't animate in. */
html.js [data-reveal] { opacity: 0; translate: 0 8px; transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); }
html.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
html.js [data-reveal].is-static { transition: none; }
html.js [data-reveal-delay="1"] { transition-delay: var(--stagger); }
html.js [data-reveal-delay="2"] { transition-delay: calc(2 * var(--stagger)); }
html.js [data-reveal-delay="3"] { transition-delay: calc(3 * var(--stagger)); }
html.js [data-reveal-delay="4"] { transition-delay: calc(4 * var(--stagger)); }
[data-parallax] { will-change: translate; }

/* ---------- Tool card (rule 22): white card, graphic, name, line, round arrow ---------- */
.v3-tool__go { display: none; }
@media (min-width: 561px) {
  .v3-tool, .v3-band--teal a.v3-tool, .v3-band--teal a.v3-tool:hover { gap: 0; padding: 8px 8px 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-hair); color: var(--ink); transition: translate var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
  .v3-tool { height: 100%; }
  .v3-tool:hover { translate: 0 -2px; box-shadow: var(--shadow-lift); }
  .v3-tool .v3-tool__stage--photo { height: auto; aspect-ratio: 3 / 2; border-radius: var(--r-md); }
  .v3-tool .v3-tool__text { padding: 16px 12px 0; }
  .v3-tool .v3-tool__title { font-size: var(--fs-lead); }
  .v3-band--teal a.v3-tool .v3-tool__desc { color: var(--muted); }
  .v3-band--teal a.v3-tool .v3-tool__title { color: var(--ink); }
  .v3-band--teal a.v3-tool .v3-tool__tag { color: var(--muted); }
  .v3-band--teal a.v3-tool:hover .v3-tool__title { color: var(--link); }
  .v3-tool__go { display: grid; place-items: center; width: 36px; height: 36px; margin: 14px 12px 0; margin-top: auto; border-radius: var(--r-pill); background: var(--gray); color: var(--teal-900); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .v3-tool .v3-tool__text { padding-bottom: 14px; }
  .v3-tool:hover .v3-tool__go { background: var(--teal-900); color: var(--white); }
}
@media (prefers-reduced-motion: reduce) { .v3-tool:hover { translate: none; } }

/* ---------- Tool scene (rule 22): faded building behind, one fixed-size panel in front ---------- */
.v3-scene { position: absolute; inset: 0; display: block; overflow: clip; background: var(--good-bg); }
.v3-scene__composite { display: block; width: 100%; height: 100%; object-fit: cover; }
.v3-scene__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-pos, center bottom); opacity: 0.5; }
.v3-scene--right .v3-scene__bg { -webkit-mask-image: linear-gradient(to left, black 12%, transparent 88%); mask-image: linear-gradient(to left, black 12%, transparent 88%); }
.v3-scene--left .v3-scene__bg { -webkit-mask-image: linear-gradient(to right, black 12%, transparent 88%); mask-image: linear-gradient(to right, black 12%, transparent 88%); }
.v3-scene__card { position: absolute; top: 8%; left: 50%; translate: -50% 0; height: 84%; aspect-ratio: 4 / 3; display: block; overflow: clip; padding: 3.5%; background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-lift); }
.v3-scene__card img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Wide scene (homepage service card headers, Why, Your top 5; toolScenes.ts HOME_SCENES): the same layers, fade, shadow and padding, with a 16:9 panel so a wide, short stage still shows it at a readable size. */
.v3-scene--wide .v3-scene__card { aspect-ratio: 16 / 9; }
.v3-tool__stage--photo .v3-scene img { transform: none; padding: 0; }

/* ---------- App shell (rule 26; mockups match-flow and rfp-builder): header, step rail, sheet, summary ---------- */
/* The header is the compact PageHero (polish mockup #1, 2026-10-23): it ends above
   the panels, so no photo edge runs through them. --wash keeps the body a step
   lighter than the header and the summary (both --pale). */
.v3-app { background: var(--wash); }
.v3-app__body { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 320px; gap: 32px; align-items: start; margin-top: 24px; padding-bottom: 32px; }
.v3-app__sheet.v3-app__sheet { max-width: none; margin: 0; box-shadow: var(--shadow-lift); }
.v3-app__rail { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 20px; }
.v3-app__rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v3-app__step { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 8px 6px 0; border: 0; background: none; font: inherit; font-size: var(--fs-ui); font-weight: 600; text-align: left; color: var(--teal-700); cursor: pointer; }
.v3-app__step:disabled { color: var(--muted); cursor: default; }
.v3-app__dot { width: 14px; height: 14px; margin-left: 3px; border-radius: var(--r-pill); background: var(--border); }
.v3-app__step.is-done .v3-app__dot { background: var(--teal-700); }
.v3-app__step[aria-current="step"] { color: var(--teal-900); font-weight: 700; }
.v3-app__step[aria-current="step"] .v3-app__dot { width: 20px; height: 20px; margin-left: 0; background: var(--teal-900); outline: 5px solid var(--mint); }
.v3-app__step:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--r-sm); }
.v3-app__aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 20px; padding: 28px 24px 24px; background: var(--good-bg); border-radius: var(--r-lg); }
.v3-app__sum { margin: 0; display: grid; gap: 14px; }
.v3-app__sum div { display: grid; gap: 2px; }
.v3-app__sum dt { font-size: var(--fs-small); color: var(--teal-700); }
.v3-app__sum dd { margin: 0; font-size: var(--fs-ui); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.v3-app__sum dd.is-empty { font-weight: 400; color: var(--muted); }
@media (max-width: 1180px) {
  .v3-app__body { grid-template-columns: minmax(0, 720px); justify-content: center; }
  .v3-app__rail, .v3-app__aside { display: none; }
}
@media (max-width: 760px) {
  .v3-app__body { margin-top: 16px; padding-inline: 0; padding-bottom: 20px; }
}

/* ---------- Tool row: white row card for secondary tool lists (mockup 2026-10-02) ---------- */
.v3-toolrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.v3-toolrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; align-items: center; gap: 20px; min-height: 104px; padding: 20px 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-hair); color: var(--ink); text-decoration: none; transition: translate var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.v3-toolrow:hover { color: var(--ink); translate: 0 -2px; box-shadow: var(--shadow-lift); }
.v3-toolrow__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--mint); color: var(--teal-900); }
.v3-toolrow__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-toolrow__title { font-size: var(--fs-lead); font-weight: 700; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.v3-toolrow__tag { font-weight: 600; color: var(--muted); }
.v3-toolrow__desc { font-size: var(--fs-ui); line-height: 1.45; color: var(--muted); }
.v3-toolrow__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1.5px solid var(--teal-900); color: var(--teal-900); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.v3-toolrow:hover .v3-toolrow__go { background: var(--teal-900); color: var(--white); }
.v3-toolrow:focus-visible { outline-offset: 4px; }
@media (max-width: 900px) { .v3-toolrows { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .v3-toolrows { gap: 12px; }
  .v3-toolrow { grid-template-columns: 48px minmax(0, 1fr) 36px; gap: 14px; min-height: 88px; padding: 16px; }
  .v3-toolrow__icon { width: 48px; height: 48px; }
  .v3-toolrow__title { font-size: var(--fs-ui); }
  .v3-toolrow__desc { font-size: var(--fs-small); }
  .v3-toolrow__go { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .v3-toolrow:hover { translate: none; } }

/* ---------- City tiles: photo, city, firm count ---------- */
.v3-cities { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; }
.v3-city { display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.v3-city__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: clip; background: var(--gray); margin-bottom: 8px; }
.v3-city__img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease); }
.v3-city:hover .v3-city__img img { scale: 1.03; }
.v3-city__name { font-weight: 700; font-size: var(--fs-ui); }
.v3-city:hover .v3-city__name { color: var(--link); text-decoration: underline; }
.v3-city__n { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 560px) { .v3-cities { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .v3-city__img img { transition: none; } }

/* ---------- Background motif (rule 21): disc and stacked floors, from the logo ---------- */
.v3-has-motif, .v3-band { position: relative; isolation: isolate; }
.v3-motif { position: absolute; inset: 0; overflow: clip; z-index: -1; pointer-events: none; --motif-a: var(--pale); --motif-b: var(--gray); --motif-c: var(--white); }
.v3-band .v3-motif { --motif-a: var(--white); --motif-b: var(--white); --motif-c: var(--pale); }
/* On a pale band the shapes use --wash, so they stay as faint as they were before --pale darkened (2026-10-22). */
.v3-band:is(.v3-band--pale, .v3-band--sage, .v3-band--sand, .v3-band--mint) .v3-motif { --motif-a: var(--wash); --motif-b: var(--wash); }
.v3-band--teal .v3-motif { --motif-a: var(--teal-700); --motif-b: var(--teal-700); --motif-c: var(--teal-900); }
.v3-motif__in { position: absolute; }
.v3-motif--disc .v3-motif__in { top: 40px; width: 900px; height: 900px; border-radius: var(--r-pill); background: linear-gradient(200deg, var(--motif-a) 0%, var(--motif-b) 40%, var(--motif-c) 75%); }
.v3-motif--disc.v3-motif--right .v3-motif__in { right: -180px; }
.v3-motif--disc.v3-motif--left .v3-motif__in { left: -260px; }
.v3-motif--floors .v3-motif__in { top: 50%; margin-top: -170px; width: 560px; display: grid; gap: 20px; }
.v3-motif--floors.v3-motif--right .v3-motif__in { right: -240px; }
.v3-motif--floors.v3-motif--left .v3-motif__in { left: -240px; }
.v3-motif--floors i { display: block; height: 100px; border-radius: var(--r-panel); background: var(--motif-b); }
.v3-motif--floors i:nth-child(1) { width: 62%; }
.v3-motif--floors i:nth-child(2) { width: 82%; }
.v3-motif--floors.v3-motif--right i { margin-left: auto; }
.v3-has-motif .v3-motif--floors i { background: var(--motif-a); }
@media (max-width: 820px) { .v3-motif { display: none; } }
@media print { .v3-motif { display: none; } }

/* Hero photo rotation: up to four photos, 7 s each, slow zoom within the 3% cap. */
.v3-kb { position: absolute; inset: 0; overflow: clip; }
.v3-kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: 60% 45%; animation: v3kb var(--dur-rotate) linear infinite; }
.v3-kb img:nth-child(1) { animation-delay: -1.2s; }
.v3-kb img:nth-child(2) { animation-delay: 5.8s; }
.v3-kb img:nth-child(3) { animation-delay: 12.8s; }
.v3-kb img:nth-child(4) { animation-delay: 19.8s; }
@keyframes v3kb { 0% { opacity: 0; transform: scale(1); } 4% { opacity: 1; } 25% { opacity: 1; } 32% { opacity: 0; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.03); } }

/* Nav over the hero becomes solid once the hero scrolls away */
.v3-nav--over { position: fixed; transition: background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.v3-nav--over .v3-logo-dark { display: inline-flex; }
.v3-nav--over .v3-logo-light { display: none; }
.v3-nav--over.is-solid { background: var(--white); box-shadow: var(--shadow-hair); }
.v3-nav--over.is-solid .v3-logo-dark { display: none; }
.v3-nav--over.is-solid .v3-logo-light { display: inline-flex; }
.v3-nav--over.is-solid .v3-btn--outline { border-color: var(--teal-900); }
.v3-nav--over .v3-btn--outline { background: var(--white); border-color: var(--white); }
@media (max-width: 820px) { .v3-nav--over .v3-nav__burger { background: var(--white); } }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; translate: none; }
  .v3-kb img { animation: none; }
  .v3-kb img:first-child { opacity: 1; }
  [data-parallax] { translate: none !important; }
}

/* ---------- Register rows (directory, city pages) ---------- */
.v3-reg__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 20px; padding: 12px 0 0; font-weight: 700; }
.v3-reg .letter-head { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.v3-reg .letter-head .L { font-size: var(--fs-title); font-weight: 700; color: var(--teal-900); }
.v3-reg .letter-head .ct { font-size: var(--fs-meta); color: var(--muted); }
.v3-reg .reg-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 120px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); transition: background-color var(--dur-fast) var(--ease); }
.v3-reg .reg-row:hover { background: linear-gradient(90deg, var(--gray), var(--white)); }
.v3-reg .reg-main { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: var(--ink); }
.v3-reg .reg-firm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-reg .reg-firm-name { font-weight: 700; font-size: 16px; }
.v3-reg .reg-main:hover .reg-firm-name { color: var(--link); }
.v3-reg .col-svc { display: flex; flex-direction: column; gap: 6px; }
.v3-reg .reg-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.v3-reg .reg-evidence { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.v3-reg .rec-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); text-decoration: none; }
.v3-reg a.rec-link:hover { color: var(--link); text-decoration: underline; }
.v3-reg .rec-link--wait { color: var(--wait-ink); }
.v3-reg .reg-profile { justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-small); font-weight: 700; color: var(--teal-900); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.v3-reg .reg-profile:hover { background: var(--pale); border-color: var(--teal-900); }
.v3-reg .reg-profile svg { transition: translate var(--dur-base) var(--ease); }
.v3-reg .reg-profile:hover svg { translate: 3px 0; }
@media (max-width: 900px) {
  .v3-reg__cols { display: none; }
  .v3-reg .reg-row { grid-template-columns: minmax(0, 1fr) auto; }
  .v3-reg .col-svc, .v3-reg .reg-evidence { grid-column: 1 / -1; padding-left: 66px; }
  .v3-reg .reg-profile { grid-row: 1; grid-column: 2; }
}

/* ---------- FAQ accordion ---------- */
.v3-faq__list { margin-top: 20px; }
.v3-faq__item { border-bottom: 1px solid var(--rule); }
.v3-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.v3-faq__item summary::-webkit-details-marker { display: none; }
.v3-faq__item h3 { font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.v3-faq__item p { padding: 0 0 20px; max-width: 70ch; color: var(--muted); }
.v3-faq__plus { position: relative; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-md); }
.v3-faq__plus::before, .v3-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--teal-900); translate: -50% -50%; transition: rotate var(--dur-base) var(--ease); }
.v3-faq__plus::after { rotate: 90deg; }
.v3-faq__item[open] .v3-faq__plus::after { rotate: 0deg; }
/* Answers open and close over --dur-fast where the browser can animate a
   <details> body (UI review 2026-10-23, M5); elsewhere they snap as before. */
@media (prefers-reduced-motion: no-preference) {
  .v3-faq__item { interpolate-size: allow-keywords; }
  .v3-faq__item::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), content-visibility var(--dur-fast) allow-discrete; }
  .v3-faq__item[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------- Tool cards (canvas Home22 tools row) ---------- */
.v3-tool { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); }
.v3-tool:hover { color: var(--ink); }
.v3-tool__stage { position: relative; display: block; height: 220px; border-radius: var(--r-lg); overflow: clip; background: var(--stage); }
.v3-tool__text { display: flex; flex-direction: column; gap: 4px; }
.v3-tool__desc { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.v3-tool__title { font-size: 16px; font-weight: 700; transition: color var(--dur-fast) var(--ease); }
.v3-tool:hover .v3-tool__title { color: var(--link); }
.v3-tool__tag { font-size: 13px; color: var(--good); }
.v3-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v3-tools--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .v3-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .v3-tools, .v3-tools--3 { grid-template-columns: 1fr; gap: 0; }
  /* On phones a tool card is a row: small still, name, line. A full-width photo per card made tool pages several screens long. */
  .v3-tools > .v3-tool, .v3-tools > * > .v3-tool { flex-direction: row; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); }
  .v3-tools .v3-tool__stage { flex: 0 0 96px; height: 72px; border-radius: var(--r-md); }
  .v3-band--teal .v3-tools > .v3-tool, .v3-band--teal .v3-tools > * > .v3-tool { border-top-color: var(--teal-700); }
}

/* ---------- Compare tray (canvas Directory22) ---------- */
[hidden] { display: none !important; }
/* Fixed to the bottom of the screen: as a sticky child of the results list it sat
   below the fold and never appeared after "Add to compare" (ticket T004). */
.v3-tray { position: fixed; left: 50%; translate: -50% 0; bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: min(760px, calc(100% - 32px)); z-index: 60; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 20px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); animation: v3-tray-in var(--dur-base) var(--ease); }
.v3-tray__tiles { display: flex; gap: 6px; }
.v3-tray__tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--gray); font-size: var(--fs-micro); font-weight: 700; }
.v3-tray__tile.is-empty { background: none; border: 1.5px dashed var(--border); }
.v3-tray__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.v3-tray__clear { border: 0; background: none; font: 700 14px/1 var(--font-ui); color: var(--muted); cursor: pointer; padding: 8px; }
.v3-tray__clear:hover { color: var(--ink); }
.v3-tray .is-off { opacity: .45; pointer-events: none; }
@keyframes v3-tray-in { from { opacity: 0; translate: -50% 8px; } to { opacity: 1; translate: -50% 0; } }
/* Keep focused items clear of a floating tray (WCAG 2.4.11): keyboard focus
   scrolls them above it, on every page that has one. */
html:has(.v3-tray:not([hidden])), html:has(#rtTray) { scroll-padding-bottom: 120px; }
/* Keep the last cards clear of the tray while it shows. */
body:has(#v3Tray:not([hidden])) main { padding-bottom: 104px; }
/* Phones: the initials tiles go, so "3 of 4 picked" stays on one line and the
   hint has room (persona re-test 2026-10-22, N2 and P3-2). Clear is a 44px target. */
@media (max-width: 560px) {
  .v3-tray { gap: 10px; padding: 10px 10px 10px 14px; }
  .v3-tray__tiles, .v3-tray__n { display: none; }
  .v3-tray #v3TrayCount { white-space: nowrap; }
  .v3-tray__clear { min-height: 44px; }
  .v3-tray .v3-btn { padding-left: 14px; }
}

/* Skip link */
.v3-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--teal-900); color: var(--white); border-radius: var(--r-md); font-weight: 700; text-decoration: none; }
.v3-skip:focus { top: 12px; color: var(--white); }

/* Tool card photo stage + teal band (2026-10-01: break up monotone pages) */
.v3-tool__stage--photo { background: var(--gray); }
.v3-tool__stage--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.v3-tool:hover .v3-tool__stage--photo img { transform: scale(1.03); }
.v3-band--teal { background: var(--teal-900); color: var(--white); }
.v3-band--teal :is(h2, h3, .v3-h2, .v3-h3, .v3-title) { color: var(--white); }
.v3-band--teal .v3-muted, .v3-band--teal .v3-meta { color: var(--on-teal-muted); }
.v3-band--teal .v3-textlink { color: var(--mint); }
.v3-band--teal .v3-tool, .v3-band--teal .v3-tool:hover { color: var(--white); }
.v3-band--teal .v3-tool:hover .v3-tool__title { color: var(--mint); }
.v3-band--teal .v3-tool__tag { color: var(--mint); }
.v3-band--mint { background: var(--mint-100); }
/* Desk and paper (DESIGN.md §5, Mike 2026-10-22): working zones (lists, compare,
   request, projects, opportunities, home services and guides, advertise
   products) sit on a full-bleed pale band with white cards on it. Content goes
   inside .v3-wrap-wide. Reading zones stay white. A panel that was --pale on
   white turns white (or --wash for an inset) when it lands on this band. */
.v3-band--pale { background: var(--pale); }
.v3-band--pale .v3-panel { background: var(--white); border: 1px solid var(--border); }
.v3-band--pale .v3-btn--outline:hover { background: var(--wash); }
/* Gray segments vanish on the desk: same treatment as the list's List/Map switch. */
.v3-band--pale .v3-seg { background: var(--wash); border: 1px solid var(--field); }
.v3-band--pale .v3-seg label, .v3-band--pale .v3-seg a { border: 1px solid transparent; }
.v3-band--pale .v3-seg label:has(input:checked), .v3-band--pale .v3-seg [aria-current="true"] { border-color: var(--border); }

/* Directory map in v3 colours (CompaniesMap.vue keeps its v4 defaults elsewhere) */
.v3-map { --bg-elevated: var(--white); --paper: var(--white); --fg-muted: var(--muted); --fg-subtle: var(--muted); --font-mono: var(--font-ui); --font-sans: var(--font-ui); --font-serif: var(--font-ui); --font-body: var(--font-ui); --accent-eyebrow: var(--link); --color-accent-500: var(--teal-900); --color-accent-600: var(--teal-900); }
.v3-map .strata-marker { background: var(--teal-900); box-shadow: none; outline: 3px solid var(--mint); }
.v3-map .strata-marker-approx { background: var(--white); border: 2px solid var(--teal-900); }
.v3-map .strata-cluster { background: var(--teal-900); color: var(--mint); border: 2px solid var(--white); font-family: var(--font-ui); font-weight: 700; box-shadow: var(--shadow-lift); }
.v3-map .strata-marker.is-focus { background: var(--mint); outline-color: var(--teal-900); }
.v3-map .strata-popup-link { color: var(--link); font-family: var(--font-ui); font-weight: 700; }
.v3-map .strata-popup-name { font-family: var(--font-ui); font-weight: 700; }
.v3-map .strata-map-note span { color: var(--muted); }

/* ---------- Rhythm: bands and components (design review 2026-10-01) ---------- */
.v3-band { padding-block: 88px; }
@media (max-width: 720px) { .v3-band { padding-block: 56px; } }
.v3-band--sage { background: var(--sage); }
.v3-band--sand { background: var(--sand); }
.v3-band--teal .v3-lead, .v3-band--teal p { color: var(--on-teal-muted); }
.v3-band--teal p b, .v3-band--teal p strong { color: var(--white); }
.v3-band--teal .v3-card { background: var(--teal-700); border-color: transparent; color: var(--white); }
.v3-band--teal .v3-chip { background: transparent; border-color: var(--teal-700); color: var(--white); }
/* On teal (bands, the photo CTA card, the PageHero glass; UI review 2026-10-23, B1):
   one primary (mint fill, teal words and chip) and one secondary (no fill, mint
   edge). Never a white-filled button on teal. */
:is(.v3-band--teal, .v3-photo-cta__card, .ph:not(.ph--compact) .ph__glass) .v3-btn--primary { background: var(--mint); color: var(--teal-900); }
:is(.v3-band--teal, .v3-photo-cta__card, .ph:not(.ph--compact) .ph__glass) .v3-btn--primary:hover { background: color-mix(in srgb, var(--mint) 82%, var(--white)); color: var(--teal-900); }
:is(.v3-band--teal, .v3-photo-cta__card, .ph:not(.ph--compact) .ph__glass) .v3-btn--primary .v3-btn__chip { background: var(--teal-900); color: var(--mint); }
:is(.v3-band--teal, .v3-photo-cta__card) .v3-btn--outline { background: transparent; color: var(--mint); border-color: var(--mint); }
:is(.v3-band--teal, .v3-photo-cta__card) .v3-btn--outline:hover { background: color-mix(in srgb, var(--mint) 12%, transparent); color: var(--white); }
.v3-band--teal a:not(.v3-btn):not(.v3-tool):not(.v3-toolrow) { color: var(--mint); }

/* Full-bleed photo band with a caption chip */
.v3-photoband { position: relative; height: clamp(320px, 42vw, 560px); overflow: clip; }
.v3-photoband img { width: 100%; height: 100%; object-fit: cover; }
.v3-photoband__cap { position: absolute; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom: 24px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: var(--r-chip); background: var(--teal-900); color: var(--white); font-size: var(--fs-meta); font-weight: 600; }
.v3-photoband__cap b { color: var(--mint); }

/* Photo CTA closer */
.v3-photo-cta { position: relative; border-radius: var(--r-panel); overflow: clip; min-height: 420px; display: grid; align-items: end; }
.v3-photo-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3-photo-cta__card { position: relative; margin: 0 0 32px 32px; max-width: 500px; padding: 32px; background: var(--teal-900); color: var(--white); border-radius: var(--r-panel); }
.v3-photo-cta__card h2 { color: var(--white); }
.v3-photo-cta__card p { margin: 10px 0 22px; color: var(--on-teal-muted); }
@media (max-width: 720px) {
  .v3-photo-cta { min-height: 0; display: block; }
  .v3-photo-cta > img { position: static; height: 220px; }
  .v3-photo-cta__card { margin: -40px 16px 16px; }
}

/* Stat strip (inside .v3-band--teal) */
.v3-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-stats > div { padding: 8px 24px; border-left: 1px solid var(--teal-700); }
.v3-stats > div:first-child { border-left: 0; padding-left: 0; }
.v3-stats b { display: block; font-size: var(--fs-display); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--mint); font-variant-numeric: tabular-nums; }
.v3-stats span { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--on-teal-muted); }
@media (max-width: 720px) { .v3-stats { grid-template-columns: 1fr 1fr; row-gap: 28px; } .v3-stats > div:nth-child(3) { border-left: 0; padding-left: 0; } }

/* Quote band (inside .v3-band--sand) */
.v3-quote { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.v3-quote img { width: 100%; border-radius: var(--r-panel); aspect-ratio: 4 / 5; object-fit: cover; }
.v3-quote blockquote { margin: 0; font-size: var(--fs-h2); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.v3-quote blockquote::before { content: ""; display: block; width: 40px; height: 4px; margin-bottom: 20px; background: var(--teal-900); }
@media (max-width: 820px) { .v3-quote { grid-template-columns: 1fr; gap: 24px; } .v3-quote img { aspect-ratio: 16 / 10; } }

/* Step rail */
.v3-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; position: relative; margin: 0; padding: 0; }
.v3-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--mint); }
.v3-rail li { position: relative; padding-top: 48px; list-style: none; }
.v3-rail li::before { content: attr(data-n); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--teal-900); color: var(--mint); font-weight: 700; font-size: var(--fs-small); display: grid; place-items: center; }
.v3-rail b { display: block; margin-bottom: 4px; font-size: var(--fs-lead); }
@media (max-width: 720px) {
  .v3-rail { grid-auto-flow: row; gap: 20px; }
  .v3-rail::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .v3-rail li { padding: 4px 0 0 48px; }
}

/* Scale bar (fee bands, score bands) */
.v3-scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.v3-scale > div { display: flex; flex-direction: column; gap: 8px; }
.v3-scale i { display: block; height: 12px; border-radius: var(--r-sm); background: var(--mint-100); }
.v3-scale > div:nth-child(2) i { background: var(--mint); }
.v3-scale > div:nth-child(3) i { background: var(--teal-700); }
.v3-scale > div:nth-child(4) i { background: var(--teal-900); }
.v3-scale b { font-size: var(--fs-lead); }
.v3-scale span { font-size: var(--fs-small); color: var(--muted); }
.v3-band--teal .v3-scale span { color: var(--on-teal-muted); }
.v3-band--teal .v3-scale > div:nth-child(3) i { background: var(--mint-100); }
.v3-band--teal .v3-scale > div:nth-child(4) i { background: var(--white); }
@media (max-width: 720px) { .v3-scale { grid-auto-flow: row; } }

/* Product stage: a tool or form on sage */
.v3-stage { background: var(--sage); border-radius: var(--r-panel); padding: clamp(16px, 4vw, 48px); }

/* Photo page header */
.v3-head--photo { position: relative; min-height: 400px; display: grid; align-items: end; color: var(--white); overflow: clip; border-radius: var(--r-hero); }
.v3-head--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3-head--photo::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
@media (max-width: 640px) { .v3-head--photo::after { background: var(--scrim-full); } }
.v3-head--photo > :not(img) { position: relative; z-index: 1; }
.v3-head--photo :is(h1, .v3-h1, .v3-display) { color: var(--white); }
.v3-head--photo .v3-lead, .v3-head--photo p { color: var(--mint-100); }
.v3-head--photo a { color: var(--white); }

/* Monogram tints, keyed by data-tint 1 to 4 */
.v3-mono[data-tint="1"] { background: var(--mint-100); border-color: transparent; }
.v3-mono[data-tint="2"] { background: var(--pale); border-color: transparent; }
.v3-mono[data-tint="3"] { background: var(--sage); border-color: transparent; }
.v3-mono[data-tint="4"] { background: var(--sand); border-color: transparent; }

.v3-band--teal .v3-tool__desc { color: var(--on-teal-muted); }

/* PREVIEW badge (PREVIEW builds only) */
.environment-badge { position: fixed; inset: 12px auto auto 12px; z-index: 2147483647; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--teal-900); color: var(--mint); font: 700 12px/1 var(--font-ui); pointer-events: none; }
@media print { .environment-badge { display: none !important; } }

/* ───────── Finish pass (premium review 2026-10-01, _ops/v3-premium-review-2026-10-01.md) ───────── */
/* Type: display tracking and tight leading only at display sizes. */
.v3-h2 { line-height: 1.15; }
.v3-h3 { line-height: 1.2; letter-spacing: -0.01em; }
.v3 h3:not([class*="v3-h"]), .v3 h4, .v3-title { line-height: 1.3; letter-spacing: 0; }
.v3 :is(h1, h2, h3, h4, .v3-display, blockquote) { text-wrap: balance; }
.v3 :is(p, li) { text-wrap: pretty; }
/* Browser surfaces carry the brand too. */
html { scrollbar-color: var(--border-strong) transparent; scrollbar-gutter: stable; scroll-padding-top: calc(var(--nav-h) + 16px); }
body.v3 { accent-color: var(--teal-900); caret-color: var(--teal-900); -webkit-tap-highlight-color: transparent; }
.v3 ::selection { background: var(--mint); color: var(--teal-900); }
:where(.v3) a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* No link shows an underline at rest (Mike, 2026-10-21; DESIGN.md). Links in
   running text are bold link-teal, the non-colour cue WCAG 1.4.1 asks for;
   hover and keyboard focus bring the underline back. Zero specificity, so any
   component style wins. */
:where(.v3 a:not([class])) { text-decoration: none; }
/* Colour is inherited, so a link on a dark or mint panel keeps that panel's
   colour; guide and legal prose set link-teal themselves. */
:where(.v3 p a:not([class]), .v3 dd a:not([class]), .v3 main li a:not([class])) { font-weight: 700; }
:where(.v3 a:not([class])):hover, :where(.v3 a:not([class])):focus-visible { text-decoration: underline; }
.v3 input[type="checkbox"], .v3 input[type="radio"] { width: 18px; height: 18px; }
/* Form controls from one source. 16px stops iOS zooming the page on focus. */
.v3-input, .v3-select, .v3-textarea { font-size: 16px; }
.v3-select { appearance: none; padding-right: 40px; background: var(--white) var(--chevron) no-repeat right 14px center / 16px; }
/* Focus ring follows the shape it sits on. */
.v3 a:focus-visible, .v3 summary:focus-visible { border-radius: var(--r-sm); }
.v3-tool:focus-visible { outline-offset: 6px; border-radius: var(--r-lg); }
/* States. */
.v3-chip:hover { border-color: var(--teal-900); }
.v3-btn:disabled, .v3-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.v3-card--soft { border-color: transparent; }
/* Header stays with the reader on every page (Mike, 2026-10-03). Page toolbars that
   stick (the directory's .fr__bar) sit under it at top: var(--nav-h). The over-photo
   nav is position: fixed and turns solid on scroll, so it stays too. */
body.v3 .v3-nav:not(.v3-nav--over) { position: sticky; top: 0; }

/* Arrow list (2026-10-02): the one bullet style. A small chevron, no divider lines. */
.v3-arrows { list-style: none; margin: 0; padding: 0; }
.v3-arrows > li { position: relative; padding: 3px 0 3px 18px; }
.v3-arrows > li::before { content: ""; position: absolute; left: 1px; top: 0.72em; width: 6px; height: 6px; border: solid var(--teal-700); border-width: 1.5px 1.5px 0 0; rotate: 45deg; }

/* ---------- rfp builder (builders lane, 2026-10-02): app shell variant for document builders ---------- */
.v3-app--doc .v3-app__body { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.v3-app--doc .v3-app__aside { max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain; }
/* Sits on the photo side of the compact header, bottom right: PageHero's "frame" slot, so the frame is its containing block (not the revealed text column). */
.v3-rfp__output { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); z-index: 1; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 20px 10px 12px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); font-size: var(--fs-ui); color: var(--teal-900); }
.v3-rfp__output b { font-weight: 700; }
.v3-rfp__output-icons { display: flex; gap: 6px; }
.v3-rfp__output-icons > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--mint-100); color: var(--teal-900); }
.v3-rfp__sheet { min-width: 0; padding: 32px 40px 40px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); scroll-margin-top: 16px; }
.v3-rfp__aside { padding: 28px 24px 24px; }
.v3-rfp__pvm { display: none; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }
.v3-rfp__pvm summary { display: inline-flex; list-style: none; cursor: pointer; }
.v3-rfp__pvm summary::-webkit-details-marker { display: none; }
.v3-rfp__pvm summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
  .v3-rfp__paper { margin-top: 16px; max-height: min(70vh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 32px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
  .v3-rfp__paper:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
  .v3-rfp__paper .rfp-cover { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .v3-rfp__paper .rfp-cover-brand { margin: 0 0 12px; font-size: 11px; color: var(--muted); }
  .v3-rfp__paper .rfp-logo-tick { display: none; }
  .v3-rfp__paper .rfp-logo-match em { font-style: normal; }
  .v3-rfp__paper .rfp-logo-strata { margin-right: 4px; }
  .v3-rfp__paper .rfp-eyebrow { font-size: 11px; color: var(--muted); }
  .v3-rfp__paper .rfp-title { margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.2; }
  .v3-rfp__paper .rfp-subtitle { color: var(--muted); }
  .v3-rfp__paper .rfp-cover-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 12px 0 0; }
  .v3-rfp__paper .rfp-cover-meta dt { font-size: 10px; color: var(--muted); }
  .v3-rfp__paper .rfp-cover-meta dd { margin: 0; }
  .v3-rfp__paper .rfp-toc-wrap { margin-bottom: 14px; }
  .v3-rfp__paper .rfp-toc-h, .v3-rfp__paper [data-h="2"] { margin: 18px 0 6px; font-size: 13px; font-weight: 700; }
  .v3-rfp__paper [data-h="3"] { margin: 12px 0 4px; font-weight: 700; }
  .v3-rfp__paper .rfp-toc { list-style: none; margin: 0; padding: 0; }
  .v3-rfp__paper .rfp-toc-item { display: flex; gap: 8px; padding: 2px 0; }
  .v3-rfp__paper .rfp-toc-no { min-width: 72px; color: var(--muted); }
  .v3-rfp__paper p { margin: 6px 0; }
  .v3-rfp__paper ul, .v3-rfp__paper ol { margin: 6px 0; padding-left: 18px; }
  .v3-rfp__paper .rfp-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 11px; }
  /* break-word, not the paper's "anywhere": table cells keep whole words when sizing columns, so "R1" and "Points" don't split (persona review 2026-10-22, P3-4). */
  .v3-rfp__paper .rfp-table th, .v3-rfp__paper .rfp-table td { border: 1px solid var(--rule); padding: 4px 6px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
  .v3-rfp__paper .rfp-table th { background: var(--gray); }
  .v3-rfp__paper .rfp-closing-note { margin-top: 16px; color: var(--muted); font-style: italic; }
@media (max-width: 1180px) {
  .v3-app--doc .v3-app__body { grid-template-columns: minmax(0, 720px); justify-content: center; }
  .v3-rfp__pvm { display: block; }
  .v3-rfp__output { display: none; }
}
@media (max-width: 760px) {
  .v3-rfp__sheet { padding: 24px 16px; border-radius: 0; box-shadow: none; }
}

/* ---------- branded document cover (builders lane, 2026-10-02): title page of the RFP and the fire safety plan, screen and print ---------- */
.v3-cover { margin: 0 0 32px; font-family: var(--font-ui); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.v3-cover__band { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; min-height: 420px; padding: clamp(24px, 5vw, 44px); background: var(--teal-900); border-radius: var(--r-panel); color: var(--white); }
.v3-cover__band::after { content: ""; position: absolute; top: -40px; right: -60px; width: 320px; height: 320px; background: var(--teal-700); opacity: 0.55; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 82%); pointer-events: none; }
.v3-cover__logo { position: relative; z-index: 1; display: block; width: 168px; height: auto; }
.v3-cover__titleblock { position: relative; z-index: 1; }
.v3-cover__kicker { margin: 0 0 12px; font-size: var(--fs-ui); font-weight: 700; color: var(--mint); }
.v3-cover__title { margin: 0; font-size: clamp(32px, 5vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; color: var(--white); text-wrap: balance; overflow-wrap: anywhere; }
.v3-cover__rule { display: block; width: 64px; height: 5px; margin: 22px 0; background: var(--mint); }
.v3-cover__sub { max-width: 44ch; margin: 0; font-family: var(--font-doc); font-size: 18px; line-height: 1.5; color: var(--on-teal-muted); font-style: normal; }
.v3-cover__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; margin: 24px 0 0; padding: 22px 26px; background: var(--sand); border-radius: var(--r-lg); }
.v3-cover__facts div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v3-cover__facts dt { font-size: var(--fs-micro); font-weight: 700; color: var(--teal-700); }
.v3-cover__facts dd { margin: 0; font-family: var(--font-doc); font-size: 15px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.v3-cover__foot { display: flex; justify-content: space-between; gap: 16px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--fs-meta); color: var(--muted); }
@media (max-width: 560px) { .v3-cover__facts { grid-template-columns: 1fr; } .v3-cover__band { min-height: 340px; } }
@media print { .v3-cover { margin: 0; break-after: page; } .v3-cover__band { min-height: 150mm; } }


/* Phones: touch targets of at least 44px (DESIGN §3; UI review round 2,
   finding 10). Text links inside running copy are left alone. */
@media (max-width: 640px) {
  .v3-btn--sm { height: 44px; }
  :where(div, li, nav, section, footer, aside, header) > .v3-textlink { min-height: 44px; }
  /* UI review 2026-10-23, A2: segments (List / Map) and chips were 36 to 38px. */
  .v3-seg label, .v3-seg a { height: 38px; }
  .v3-chip { height: 44px; }
}

/* ───────── Print (UI review 2026-10-23, D3 and M3) ─────────
   A council prints a profile, a guide or a fit list to take to a meeting.
   Paper gets the record: no header, footer, tray, feedback strip, video,
   closing CTAs or compare controls; white paper and ink; the address of
   each outside source after its link; no card split across a page.
   Anything still waiting to reveal prints as it would look revealed. */
@media print {
  @page { margin: 16mm 14mm; }
  html { scroll-padding-top: 0; }
  body.v3 { background: var(--white); color: var(--ink); font-size: 11pt; }
  /* The feedback strip by its own hooks, not .fb: the Fee check tool's root
     is also .fb and must print (ship audit follow-up, 2026-10-23). */
  .v3-skip, .v3-nav, .v3-foot, .v3-tray, [data-feedback-host], [data-feedback], .fb-noprint, .gbc, .v3-photo-cta,
  .hvd, .v3-motif, .co-simband, .cmp-tg, .v3-nav__burger, .ph__actions, [data-print="hide"] { display: none !important; }
  html.js [data-reveal] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .v3 *, .v3 *::before, .v3 *::after { animation: none !important; transition: none !important; }
  body.v3::before { content: "Strata Match · stratamatch.ca"; display: block; margin-bottom: 10pt; padding-bottom: 6pt; border-bottom: 1px solid var(--rule); font-size: 9pt; font-weight: 700; color: var(--muted); }
  .v3-band, .v3-band--pale, .v3-band--teal, .v3-app { background: var(--white) !important; color: var(--ink) !important; padding-block: 12pt !important; }
  .v3-band--teal :is(h2, h3, p, a, .v3-lead) { color: var(--ink) !important; }
  /* Photo headers print as plain titles: no photo, no glass. */
  .ph__media, .ph__frame::after { display: none !important; }
  .ph__frame { min-height: 0 !important; background: none !important; }
  .ph__in { padding: 0 !important; }
  .ph__glass { padding: 0 !important; background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .ph__glass :is(h1, p, b, a, span), .ph__crumbs { color: var(--ink) !important; }
  .v3-card, .v3-faq__item, .v3-tool, .v3-toolrow, li, tr, figure { break-inside: avoid; }
  :is(h1, h2, h3) { break-after: avoid; }
  .v3-faq__item::details-content { block-size: auto !important; opacity: 1 !important; content-visibility: visible !important; }
  /* Outside sources print their address so the paper copy stays checkable. */
  main a[href^="http"]:not([href*="stratamatch.ca"])::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 9pt; color: var(--muted); overflow-wrap: anywhere; }
  main .v3-btn[href^="http"]::after { content: none; }
}