/* Studio Woodlark Pro — v6 chrome.
 *
 * Static chrome CSS extracted from agents/site_builder_p3a.py (Python
 * helpers) in the parent repo's pre-revert-2026-05-08-p3a-branch tag.
 * The Python helpers concatenated this CSS into <style> on every render;
 * this repo's Builder will reference chrome.css as a self-contained asset
 * and override prospect-specific tokens (--brand, --brand-strong,
 * --brand-tint) by emitting a small per-prospect <style> block that
 * comes AFTER this file.
 *
 * Defaults below are the v6 forest-green register (FOR PREVIEW ONLY —
 * builder always emits a per-prospect override for --brand). Accent
 * mustard is constant (Studio Woodlark house colour).
 */

/* ===== DESIGN TOKENS — Phase 2 (2026-05-08 rebuild brief v2) =====
 *
 * This :root block is the canonical single source of truth for
 * design tokens. No section template anywhere in the bundle may
 * hardcode a colour, font-size, font-family, padding, margin, or
 * breakpoint value — only token references.
 *
 * Brief target: --type-h2-section-title ≥ 2× --type-body. The
 * previous H2 (clamp 22→28px) was sub-2× and produced the testimonial
 * band-too-small regression Trent flagged twice. The replacement
 * --type-h2-section-title clamps 28→44px (1.75–2.6× body).
 */
:root {
  /* --- Brand colour (per-prospect override below this file) --- */
  --brand:        #0E3B2E;
  --brand-strong: #082821;
  --brand-tint:   #DCE7E0;
  --brand-primary: var(--brand);
  --brand-primary-shade-10: var(--brand-strong);
  --brand-primary-tint-10:  var(--brand-tint);
  --accent:       #C8842A;
  --accent-soft:  #F5E9D2;

  /* --- Neutrals --- */
  --neutral-bg:        #F7F3EC;
  --neutral-bg-subtle: #EFE9DD;
  --neutral-ink:       #131614;
  --neutral-ink-muted: #3A3F3C;
  --neutral-line:      #DDD6C6;
  --bg:           var(--neutral-bg);          /* legacy alias */
  --panel:        #FFFFFF;
  --surface-2:    var(--neutral-bg-subtle);   /* legacy alias */
  --ink:          var(--neutral-ink);         /* legacy alias */
  --ink-2:        var(--neutral-ink-muted);   /* legacy alias */
  --mute:         #6B6F6C;
  --line:         var(--neutral-line);        /* legacy alias */
  --line-strong:  #C5BCA8;
  --on-brand:        #F7F3EC;
  --on-brand-mute:   rgba(247,243,236,0.72);
  --on-brand-line:   rgba(247,243,236,0.18);

  /* --- Spacing scale (8px base) --- */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;
  --s-7:32px;--s-8:40px;--s-9:56px;--s-10:72px;--s-11:96px;--s-12:128px;
  --space-1: var(--s-2); --space-2: var(--s-3); --space-3: var(--s-4);
  --space-4: var(--s-5); --space-5: var(--s-6); --space-6: var(--s-7);
  --space-7: var(--s-8); --space-8: var(--s-9); --space-9: var(--s-10);
  --space-10: var(--s-11); --space-11: var(--s-12);

  /* --- Layout --- */
  --max-width-content: 1080px;
  --max-width-prose:    72ch;
  --gutter-mobile:      16px;
  --gutter-desktop:     24px;

  /* --- Component tokens --- */
  --radius-sm:4px;--radius-md:10px;--radius-lg:18px;--radius-pill:999px;
  --radius-card: var(--radius-lg);
  --shadow-card: 0 1px 0 rgba(19,22,20,0.04), 0 8px 24px -12px rgba(19,22,20,0.08);
  --shadow-lift: 0 1px 0 rgba(19,22,20,0.04), 0 24px 48px -20px rgba(19,22,20,0.18);
  --border-card: 1px solid var(--neutral-line);

  /* --- Alignment defaults --- */
  --align-default: center;
  --align-prose:   left;

  /* --- Breakpoints (used in @media expressions further down) ---
   * 375 = iPhone SE, 414 = Plus, 768 = iPad portrait, 1024 = desktop.
   * Quality Gate mobile validator asserts no horizontal overflow at
   * the first three widths.
   */
  --bp-mobile:        375px;
  --bp-mobile-large:  414px;
  --bp-tablet:        768px;
  --bp-desktop:      1024px;

  /* --- Type system ---
   * Weights: 400 body, 500 subhead, 600 h1/h2, 700 display.
   * Italics reserved for citations/quotes only.
   */
  --font-stack: "Lora", Charter, Georgia, "Times New Roman", serif;
  --font-body-family: var(--font-stack);
  --font-display-family: var(--font-stack);

  --type-eyebrow: 12px;
  --type-caption: clamp(0.8125rem, 0.2vw + 0.78rem, 0.875rem); /* 13 -> 14 */
  --type-body-small: 14px;
  --type-body: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);   /* 16 -> 17 */
  --type-h3: 21px;
  --type-h2-section-title: clamp(1.75rem, 2.6vw + 0.5rem, 2.75rem); /* 28 -> 44 */
  --type-h1: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);        /* 28 -> 40 */
  --type-display: clamp(2.25rem, 4vw + 1rem, 3.5rem);     /* 36 -> 56 */

  /* legacy aliases — keep until every reference migrates */
  --font-display: var(--type-display);
  --font-h1:      var(--type-h1);
  --font-h2:      var(--type-h2-section-title);
  --font-body:    var(--type-body);
  --font-caption: var(--type-caption);

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-stack);
  font-size: var(--font-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
a { color: inherit; }
img, picture { max-width: 100%; display: block; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Type */
.eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.eyebrow--on-brand { color: var(--accent); }
.h1 { font-weight: 600; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.02; letter-spacing: -0.025em; margin: 0; }
.h2 { font-weight: 600; font-size: var(--type-h2-section-title); line-height: 1.1; letter-spacing: -0.018em; margin: 0; text-align: var(--align-default); }
/* Phase 2 (2026-05-08 rebuild brief v2) — testimonial / customer-feedback
 * section headers MUST use the section-title token, never a smaller
 * subhead. Trent flagged this regression twice. */
.review-band .h2,
.testimonials .h2,
section[data-band="testimonials"] .h2 { font-size: var(--type-h2-section-title); font-weight: 600; }
.h3 { font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 58ch; margin-top: 16px; }
.serif-italic { font-family: var(--font-stack); font-style: italic; font-weight: 400; font-optical-sizing: auto; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1; border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { color: var(--brand); border-color: var(--line-strong); background: var(--panel); }
.btn-ghost:hover { border-color: var(--brand); }
.btn-on-brand-primary { background: var(--accent); color: #1a1408; }
.btn-on-brand-primary:hover { background: #B5751F; }
.btn-on-brand-ghost { color: var(--on-brand); border-color: var(--on-brand-line); background: transparent; }
.btn-on-brand-ghost:hover { border-color: var(--on-brand); background: rgba(247,243,236,0.06); }

/* Header */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; gap: 24px; flex-wrap: wrap; }
.wordmark { font-size: 22px; font-weight: 600; color: var(--brand); letter-spacing: -0.02em; text-decoration: none; }
.wordmark__amp { font-family: var(--font-stack); font-style: italic; color: var(--accent); font-weight: 400; }
.wordmark__logo { height: 36px; width: auto; max-width: 220px; display: block; }
.header-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav { display: flex; gap: 24px; align-items: center; }
.nav a { color: var(--ink-2); font-size: 15px; font-weight: 500; padding: 6px 0; border-bottom: 1.5px solid transparent; text-decoration: none; }
.nav a:hover { color: var(--ink); }
body[data-active-page="home"]      .nav a[data-page="home"],
body[data-active-page="services"]  .nav a[data-page="services"],
body[data-active-page="about"]     .nav a[data-page="about"],
body[data-active-page="resources"] .nav a[data-page="resources"],
body[data-active-page="contact"]   .nav a[data-page="contact"] {
  color: var(--ink); border-bottom-color: var(--accent);
}

/* Block 6 — nav dropdown for service / sector deep pages (2026-05-11).
 * Parent stays a clickable link; children appear in a submenu on
 * hover (desktop) or focus-within (keyboard / mobile tap). The chevron
 * after the parent label signals the menu's presence. */
.nav-item { position: relative; display: flex; align-items: center; gap: 6px; }
.nav-item > a::after {
  content: "▾"; font-size: 10px; color: var(--mute); margin-left: 4px;
  position: relative; top: -1px;
}
.subnav {
  display: none; list-style: none; margin: 0; padding: 8px 0;
  position: absolute; top: calc(100% + 4px); left: -12px; min-width: 220px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); z-index: 90;
}
.subnav li { margin: 0; }
.subnav a { display: block; padding: 8px 18px; font-size: 14px; border-bottom: 0; }
.subnav a:hover { background: var(--brand-tint); color: var(--ink); }
.nav-item:hover .subnav,
.nav-item:focus-within .subnav { display: block; }
@media (max-width: 720px) {
  .subnav { position: static; box-shadow: none; border: 0; padding: 4px 0 4px 16px; min-width: 0; }
  .nav-item { flex-direction: column; align-items: flex-start; }
  .nav-item > a::after { display: none; }
  /* Mobile shows children inline so tap-targets are always visible. */
  .subnav { display: block; }
  /* Phase 2.8 mobile-overflow fix (post-rebuild attempt 2): the
   * desktop nav was 422-445px wide on a 375px viewport, blowing
   * out scrollWidth on every page. Stack vertically, hide submenus
   * (the parent nav-item already shows its children inline above),
   * and let .header-right wrap. Mobile users navigate via this
   * stacked nav + the footer site map.
   */
  .site-header__inner { flex-wrap: wrap; gap: var(--s-3); }
  .header-right { flex-direction: column; align-items: flex-start;
                  width: 100%; gap: var(--s-3); }
  .nav { flex-direction: column; align-items: flex-start;
         gap: var(--s-2); width: 100%; }
  .nav a { padding: 8px 0; font-size: 15px; }
}
.phone-pill { background: transparent; color: var(--brand); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 14px 8px 12px; font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.phone-pill:hover { border-color: var(--brand); background: var(--panel); }
.phone-pill svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.phone-pill__num { letter-spacing: -0.005em; }

/* Hero — green panel (home) */
.hero { background: var(--bg); position: relative; }
.hero__panel { background: var(--brand); color: var(--on-brand); padding: var(--s-12) 0 var(--s-11); position: relative; }
.hero__grid { display: grid; gap: var(--s-9); grid-template-columns: 1fr; align-items: end; }
.hero__title { color: var(--on-brand); max-width: 16ch; }
.hero__title-em { font-family: var(--font-stack); font-style: italic; color: var(--accent); display: block; font-weight: 400; }
.hero__lead { color: var(--on-brand-mute); font-size: 19px; max-width: 52ch; margin-top: var(--s-5); line-height: 1.5; }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }
.hero__media { position: relative; }
.hero__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); filter: saturate(0.9) contrast(1.02); }
/* Phase 2.7 (2026-05-08 rebuild brief v2) — hero contact pill.
 * The pre-rebuild positioning ("position: absolute; left: -16px") rendered
 * the pill off-screen at every viewport in the 18-page audit. New
 * approach: in-flow on mobile (no overflow), absolute-anchored only
 * at desktop where the media column has the room. Font is enforced
 * to the body stack so the pill doesn't pick up a stray family. */
.hero__address { background: var(--bg); color: var(--ink); border-radius: var(--radius-md); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-lift); font-size: var(--type-body-small); display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-5); font-family: var(--font-body-family); }
.hero__address-label { font-size: var(--type-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); }
.hero__address strong { font-weight: 600; }
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--s-11); align-items: center; }
  /* Desktop only: anchor the pill at the bottom-left of the media
   * column, in-flow within the column rather than absolute-positioned
   * with a negative left (the previous "left: -16px" rule rendered the
   * pill off-screen at every viewport per the Phase 0 audit). */
  .hero__address { margin-top: calc(var(--s-7) * -1); margin-left: var(--s-2); align-self: flex-end; }
}

/* Inner-page hero — same green panel, no photo, copy only */
.inner-hero { background: var(--brand); color: var(--on-brand); padding: var(--s-11) 0 var(--s-10); }
.inner-hero .h1 { color: var(--on-brand); max-width: 22ch; }
.inner-hero .lead { color: var(--on-brand-mute); }

/* Credential strip */
.cred-strip { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s-7) 0 var(--s-8); }
.cred-strip__lead { text-align: center; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 0 0 var(--s-7); font-weight: 500; }
.cred-strip__row { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; align-items: center; }
.cred-block { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 var(--s-7); border-right: 1px solid var(--line); }
.cred-block:last-child { border-right: 0; }
.cred-tier { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.cred-mark svg { height: 36px; width: auto; display: block; }
@media (max-width: 720px) { .cred-block { padding: var(--s-3) var(--s-5); border-right: 0; } }

/* Editorial intro */
.section { padding: var(--s-11) 0; }
.section--tight { padding: var(--s-9) 0; }

/* Services — numbered editorial list (v6 register) */
.svc-list { margin-top: var(--s-9); }
.svc-row { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-5); padding: var(--s-7) 0; border-top: 1px solid var(--line); align-items: baseline; transition: padding-left 200ms ease; text-decoration: none; color: inherit; }
.svc-row:last-child { border-bottom: 1px solid var(--line); }
.svc-row:hover { padding-left: var(--s-3); }
.svc-row__num { font-family: var(--font-stack); font-style: italic; font-size: 22px; color: var(--accent); font-weight: 500; }
.svc-row__head { font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); }
.svc-row__head em { font-family: var(--font-stack); font-style: italic; font-weight: 400; }
.svc-row__body { color: var(--ink-2); font-size: 15px; margin-top: var(--s-2); max-width: 60ch; }
.svc-row__more { font-size: 14px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.svc-row__more::after { content: " →"; }

/* Sectors flow — full-bleed dark band, editorial list */
.sectors-flow { background: var(--brand); color: var(--on-brand); padding: var(--s-12) 0; }
.sectors-flow .h2, .sectors-flow .eyebrow { color: var(--on-brand); }
.sectors-flow__list { margin-top: var(--s-9); }
.sector-row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: var(--s-5); padding: var(--s-6) 0; border-top: 1px solid var(--on-brand-line); align-items: center; }
.sector-row:last-child { border-bottom: 1px solid var(--on-brand-line); }
.sector-row__icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(247,243,236,0.10); display: flex; align-items: center; justify-content: center; color: var(--on-brand); }
.sector-row__icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sector-row__label { font-weight: 600; font-size: 18px; }
.sector-row__hint { color: var(--on-brand-mute); font-size: 13px; margin-top: 2px; }
.sector-row__stat { font-family: var(--font-stack); font-style: italic; font-size: 17px; font-weight: 500; color: var(--accent); white-space: nowrap; }

/* Reviews — pull-quote feature */
.reviews { padding: var(--s-12) 0; }
.review-pull { font-family: var(--font-stack); font-style: italic; font-size: clamp(28px, 4vw, 40px); font-weight: 400; line-height: 1.25; color: var(--ink); max-width: 22ch; margin: var(--s-9) auto 0; text-align: center; letter-spacing: -0.01em; }
.review-pull__attribution { font-style: normal; font-family: inherit; font-size: 14px; color: var(--mute); margin-top: var(--s-5); display: block; letter-spacing: 0; }
.review-supporting { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-top: var(--s-9); }
@media (min-width: 720px) { .review-supporting { grid-template-columns: 1fr 1fr; } }
.review-card { padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.review-card__quote { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0; }
.review-card__author { font-size: 13px; color: var(--mute); margin-top: var(--s-3); }
.review-aggregate-strip { display: flex; flex-wrap: wrap; gap: var(--s-7); justify-content: center; margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.review-platform { display: flex; align-items: center; gap: var(--s-3); }
.review-platform__name { font-weight: 600; font-size: 14px; color: var(--ink); }
.review-platform__score { font-size: 14px; color: var(--mute); }
.review-platform__score strong { color: var(--ink); }

/* Partners — three-up portrait row (home) */
.partners-row { padding: var(--s-11) 0; }
.partners-row__grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; margin-top: var(--s-8); }
@media (min-width: 720px) { .partners-row__grid { grid-template-columns: repeat(3, 1fr); } }
.partner-fig { margin: 0; }
.partner-fig__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 28%; background: var(--brand-tint); border-radius: var(--radius-md); filter: saturate(0.92); }
.partner-fig__name { font-family: var(--font-stack); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-top: var(--s-4); }
.partner-fig__quals { color: var(--mute); font-weight: 400; font-style: italic; }
.partner-fig__role { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: var(--s-2); font-weight: 600; }
.partner-fig__bio { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin-top: var(--s-3); }

/* Closing CTA */
.closing-cta { background: var(--brand); color: var(--on-brand); padding: var(--s-11) 0; }
.closing-cta__title { color: var(--on-brand); max-width: 22ch; margin: 0 auto; text-align: center; }
.closing-cta__title em { font-family: var(--font-stack); font-style: italic; color: var(--accent); font-weight: 400; }
.closing-cta__lead { color: var(--on-brand-mute); max-width: 50ch; margin: var(--s-5) auto 0; text-align: center; font-size: 18px; line-height: 1.5; }
.closing-cta__actions { display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-7); flex-wrap: wrap; }

/* Calculator (resources page) */
.calc-section { background: var(--brand-tint); padding: var(--s-12) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calc-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-9); max-width: 640px; margin: 0 auto; box-shadow: var(--shadow-card); }
.calc-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-5); }
.calc-row label { font-size: 14px; font-weight: 600; color: var(--ink); }
.calc-row input, .calc-row select { padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); font-family: inherit; font-size: 17px; }
.calc-row input:focus, .calc-row select:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--brand); }
.calc-result { background: var(--brand); color: var(--on-brand); padding: var(--s-7) var(--s-8); border-radius: var(--radius-md); margin-top: var(--s-5); }
.calc-result__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.calc-result__value { font-family: var(--font-stack); font-size: 56px; font-weight: 600; line-height: 1; margin-top: var(--s-3); letter-spacing: -0.025em; color: var(--on-brand); }

/* Footer */
.site-footer { background: var(--surface-2); border-top: 1px solid var(--line); padding: var(--s-10) 0 0; font-size: 14px; color: var(--ink-2); }
.site-footer__grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; padding-bottom: var(--s-9); }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 2.2fr 1fr 1fr; } }
.footer-brand__name { font-family: var(--font-stack); font-size: 18px; font-weight: 600; color: var(--brand); margin-bottom: var(--s-3); }
.footer-brand__addr { font-style: normal; line-height: 1.7; }
.footer-col__head { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 0 0 var(--s-3); font-weight: 600; }
.regnums { display: grid; gap: 4px 12px; grid-template-columns: max-content 1fr; margin: 0; }
.regnums dt { color: var(--mute); }
.site-footer__bar { border-top: 1px solid var(--line); padding: var(--s-5) 0; }
.site-footer__bar ul { display: flex; gap: var(--s-5); list-style: none; padding: 0; margin: 0; font-size: 13px; }
.site-footer__bar a { color: var(--mute); text-decoration: none; }
.site-footer__bar a:hover { color: var(--ink); }

/* Screen-reader-only skip-link. Previous `left: -9999px` rule was
 * counted by browsers when computing document scrollWidth, which
 * caused every page to "overflow" at 375px. The clip+inset pattern
 * is the standard a11y-safe approach that doesn't extend scrollWidth.
 */
.skipto { position: absolute; width: 1px; height: 1px; padding: 0;
          margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
          clip-path: inset(50%); white-space: nowrap; border: 0; }
.skipto:focus { position: absolute; left: 12px; top: 12px;
                width: auto; height: auto; padding: 8px 12px;
                margin: 0; overflow: visible; clip: auto;
                clip-path: none; white-space: normal;
                background: var(--brand); color: var(--on-brand);
                border-radius: 4px; z-index: 100; }

/* Contact page */
.contact-grid { display: grid; gap: var(--s-9); grid-template-columns: 1fr; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-11); } }
.contact-aside .contact-block { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.contact-aside .contact-block:first-child { border-top: 0; padding-top: 0; }
.contact-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-8); }
.contact-form__pledge { font-size: 13px; color: var(--mute); margin: 0 0 var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); font-family: inherit; font-size: 16px; margin-bottom: var(--s-4); }
.contact-form button { width: 100%; }

/* Block 8c — Google Maps embed on the contact page (2026-05-11). */
.map-section { padding-top: var(--s-7); }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.map-embed iframe { display: block; width: 100%; min-height: 320px; border: 0; }
.map-fallback { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); font-size: var(--font-body); }
.map-fallback a { color: var(--brand); text-decoration: none; font-weight: 500; }
.map-fallback a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .map-embed iframe { min-height: 260px; }
}

/* Block 8d — footer compliance pages (privacy / cookies / accessibility).
 * Substantive editorial layout with a clear "tailored on go-live"
 * callout box at the bottom. Reuses .section vertical rhythm. */
.compliance-article { max-width: 760px; margin: var(--s-9) auto var(--s-11); padding: 0 var(--s-6); }
.compliance-header { border-bottom: 1px solid var(--line); padding-bottom: var(--s-6); margin-bottom: var(--s-7); }
.compliance-article h1 { font-family: var(--font-stack); font-size: var(--font-h1); font-weight: 600; line-height: 1.15; color: var(--ink); margin: 0; letter-spacing: -0.02em; }
.compliance-meta { font-size: var(--font-caption); color: var(--mute); margin-top: var(--s-3); letter-spacing: 0.04em; text-transform: uppercase; }
.compliance-lead { font-size: 1.125rem; line-height: 1.6; color: var(--ink); margin: 0 0 var(--s-9); }
.compliance-section { margin: var(--s-7) 0; }
.compliance-section h2 { font-family: var(--font-stack); font-size: var(--font-h2); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-4); }
.compliance-section p { font-size: var(--font-body); line-height: 1.65; color: var(--ink); margin: 0 0 var(--s-4); }
.compliance-section a { color: var(--brand); }
.compliance-callout {
  display: block;
  margin-top: var(--s-9);
  padding: var(--s-7);
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
  font-size: var(--font-body);
  line-height: 1.6;
  color: var(--ink);
}
.compliance-callout strong { color: var(--brand-strong, var(--brand)); }

/* Interactive calculator widget (Block 2 — 2026-05-11) ----------------------
 * Mount: <div data-calc="vat" data-brand="#0E3B2E"></div>
 * Auto-mounted by /assets/calculators.js on DOMContentLoaded. The
 * widget inherits --brand from the chrome's :root block, or from the
 * mount's data-brand attribute if present. Replaces the old
 * .calc-section / .calc-card stub-card pattern, which is being
 * retired in Block 5's prompt cleanup. */
.calculators-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; margin-top: var(--s-7); }
@media (min-width: 860px) { .calculators-grid { grid-template-columns: 1fr 1fr; } }
.calc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-8); box-shadow: var(--shadow-card); }
.calc__title { font-family: var(--font-stack); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--s-3); }
.calc__description { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0 0 var(--s-6); }
.calc__form { display: grid; gap: var(--s-4); }
.calc__field { display: flex; flex-direction: column; gap: 6px; }
.calc__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.calc__input, .calc__select { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); font-family: inherit; font-size: 16px; }
.calc__input:focus, .calc__select:focus { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); }
.calc__submit { background: var(--brand); color: var(--on-brand); border: 0; border-radius: var(--radius-sm); padding: 12px 18px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: var(--s-3); }
.calc__submit:hover { background: var(--brand-strong, var(--brand)); }
.calc__result { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.calc__result[hidden] { display: none; }
.calc__result-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.calc__result-table th, .calc__result-table td { padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.calc__result-table th { color: var(--ink-2); font-weight: 500; }
.calc__result-table td { color: var(--ink); font-weight: 600; }
.calc__result-table tr:last-child th, .calc__result-table tr:last-child td { border-bottom: 0; }
.calc__error, .calc__missing { color: var(--mute); font-size: 14px; margin: 0; }

/* Factsheet pages — minimal type-driven layout, no chrome variants yet
 * (Block 3 typography overhaul will rewire these). */
.factsheet-index { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-top: var(--s-7); }
@media (min-width: 720px) { .factsheet-index { grid-template-columns: 1fr 1fr; } }
.factsheet-card { display: block; padding: var(--s-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); transition: border-color 120ms ease; }
.factsheet-card:hover { border-color: var(--brand); }
.factsheet-card__title { font-family: var(--font-stack); font-size: 18px; font-weight: 600; margin: 0 0 var(--s-2); color: var(--ink); }
.factsheet-card__summary { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; }
.factsheet-article { max-width: 720px; margin: var(--s-9) auto; padding: 0 var(--s-5); }
.factsheet-article h1 { font-family: var(--font-stack); font-size: 36px; line-height: 1.15; font-weight: 600; color: var(--ink); margin: 0 0 var(--s-3); }
.factsheet-article .factsheet__meta { color: var(--mute); font-size: 13px; margin-bottom: var(--s-7); letter-spacing: 0.04em; text-transform: uppercase; }
.factsheet-article h2 { font-family: var(--font-stack); font-size: 22px; font-weight: 600; margin: var(--s-7) 0 var(--s-3); color: var(--ink); }
.factsheet-article h3 { font-size: 17px; font-weight: 600; margin: var(--s-6) 0 var(--s-2); color: var(--ink); }
.factsheet-article p { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 var(--s-5); }

/* Block 3 — section pattern library (2026-05-11). Eight visually
 * distinct patterns to break up the home page's previous
 * five-card-grids-in-a-row monotony. Builder prompt picks a pattern
 * class per section and is forbidden from emitting two consecutive
 * sections with the same pattern (deterministic validator in
 * agents.validators.validate_section_variety enforces this).
 * Each pattern shares the same outer `.section` (existing) for
 * vertical rhythm; the pattern class lives on the inner container.
 */

/* 1. Card grid — 3-up cards on desktop, 1-up mobile. THE ONE permitted
 *    card-grid section on the home page (typically Services). */
.section-card-grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; margin-top: var(--s-7); }
@media (min-width: 720px) { .section-card-grid { grid-template-columns: repeat(3, 1fr); } }
.section-card-grid .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--s-7); }
.section-card-grid .card__title { font-family: var(--font-stack); font-size: var(--font-h2); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-3); letter-spacing: -0.01em; }
.section-card-grid .card__body { color: var(--ink-2); font-size: var(--font-body); line-height: 1.6; margin: 0; }

/* 2. Inline list with evidence — vertical list, no boxes; each row
 *    pairs a heading line with a one-liner of source-grounded
 *    evidence. Use for Industries on the home page (must differ
 *    from Services' card grid). */
.section-inline-list-evidence { margin-top: var(--s-7); }
.section-inline-list-evidence .row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; padding: var(--s-6) 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .section-inline-list-evidence .row { grid-template-columns: 1fr 2fr; gap: var(--s-7); align-items: baseline; } }
.section-inline-list-evidence .row:first-child { border-top: 0; }
.section-inline-list-evidence .row__label { font-family: var(--font-stack); font-size: var(--font-h2); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.section-inline-list-evidence .row__evidence { color: var(--ink-2); font-size: var(--font-body); line-height: 1.6; }
.section-inline-list-evidence .row__evidence em { font-style: italic; color: var(--mute); }

/* 3. Blockquote band — full-bleed dark band with a single oversized
 *    pull-quote. Use for the Testimonials section. */
.section-blockquote-band { background: var(--brand); color: var(--on-brand); padding: var(--s-11) 0; margin-top: var(--s-9); }
.section-blockquote-band .quote { max-width: 880px; margin: 0 auto; padding: 0 var(--s-6); }
.section-blockquote-band .quote__mark { font-family: var(--font-stack); font-size: var(--font-display); font-weight: 700; line-height: 0; color: var(--accent); display: block; height: 0; }
.section-blockquote-band .quote__body { font-family: var(--font-stack); font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem); font-style: italic; line-height: 1.35; margin: 0; color: var(--on-brand); }
.section-blockquote-band .quote__attribution { display: block; margin-top: var(--s-6); font-style: normal; font-size: var(--font-body); color: var(--on-brand-mute); letter-spacing: 0.02em; }

/* 4. Stat row — horizontal strip of 3-5 numeric signals. Use for the
 *    Trust band immediately after the hero. */
.section-stat-row { display: flex; flex-wrap: wrap; gap: var(--s-7) var(--s-9); justify-content: space-between; padding: var(--s-7) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: var(--s-7); }
.section-stat-row .stat { flex: 1 1 140px; }
.section-stat-row .stat__value { font-family: var(--font-stack); font-size: var(--font-h1); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.section-stat-row .stat__label { font-size: var(--font-caption); color: var(--mute); text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--s-2); }

/* 5. Image-text split — image left, body right on desktop; stacked
 *    on mobile. Use for About / firm history or a sector deep-dive. */
.section-image-text-split { display: grid; gap: var(--s-7); grid-template-columns: 1fr; margin-top: var(--s-9); align-items: center; }
@media (min-width: 860px) { .section-image-text-split { grid-template-columns: 1fr 1fr; gap: var(--s-11); } }
.section-image-text-split .split__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background: var(--brand-tint); }
.section-image-text-split .split__title { font-family: var(--font-stack); font-size: var(--font-h1); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 var(--s-5); }
.section-image-text-split .split__body { color: var(--ink-2); font-size: var(--font-body); line-height: 1.65; margin: 0; }
.section-image-text-split .split__body p { margin: 0 0 var(--s-4); }

/* 6. Full-bleed overlay — wide image with a text overlay. Use for the
 *    hero on the rare home page that warrants it, or for a major
 *    sector landing visual. */
.section-full-bleed-overlay { position: relative; min-height: 360px; display: grid; align-items: end; margin-top: var(--s-9); border-radius: var(--radius-lg); overflow: hidden; background: var(--brand); }
.section-full-bleed-overlay .overlay__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.78; }
.section-full-bleed-overlay .overlay__inner { position: relative; padding: var(--s-11) var(--s-9); max-width: 720px; color: var(--on-brand); }
.section-full-bleed-overlay .overlay__title { font-family: var(--font-stack); font-size: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0 0 var(--s-4); color: var(--on-brand); letter-spacing: -0.025em; }
.section-full-bleed-overlay .overlay__lead { font-size: var(--font-body); color: var(--on-brand); line-height: 1.55; margin: 0; }

/* 7. Numbered horizontal flow — 4 step process. Use for the "How we
 *    work" section, mandatory on every home page (Block 4). */
.section-numbered-horizontal-flow { display: grid; gap: var(--s-7); grid-template-columns: 1fr; counter-reset: step; margin-top: var(--s-9); }
@media (min-width: 860px) { .section-numbered-horizontal-flow { grid-template-columns: repeat(4, 1fr); } }
.section-numbered-horizontal-flow .step { position: relative; padding-top: var(--s-7); }
.section-numbered-horizontal-flow .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--font-stack); font-size: var(--font-h2); font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.section-numbered-horizontal-flow .step__title { font-family: var(--font-stack); font-size: 1.125rem; font-weight: 600; color: var(--ink); margin: 0 0 var(--s-3); letter-spacing: -0.01em; }
.section-numbered-horizontal-flow .step__body { color: var(--ink-2); font-size: var(--font-body); line-height: 1.55; margin: 0; }

/* 8. Two-column comparison — side-by-side table-like layout for
 *    things like "what to expect" / "what we don't do". */
.section-two-column-comparison { display: grid; gap: var(--s-7); grid-template-columns: 1fr; margin-top: var(--s-9); }
@media (min-width: 720px) { .section-two-column-comparison { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }
.section-two-column-comparison .col { padding: var(--s-7); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); }
.section-two-column-comparison .col--neg { background: var(--surface-2); }
.section-two-column-comparison .col__title { font-family: var(--font-stack); font-size: var(--font-h2); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-5); }
.section-two-column-comparison .col__body { color: var(--ink-2); font-size: var(--font-body); line-height: 1.65; margin: 0; }
.section-two-column-comparison .col__body p { margin: 0 0 var(--s-3); }

/* Block 4 — trust band, process section, persistent CTA (2026-05-11).
 *
 * Trust band: re-uses the .section-stat-row pattern but with a
 * trust-band wrapper that places it at the top of the page on a
 * subtle tint background, immediately after the hero.
 *
 * Process section: re-uses .section-numbered-horizontal-flow. The
 * prompt locks this as mandatory on every home page; no new CSS
 * needed beyond what Block 3 shipped.
 *
 * Persistent CTA: floating "Free consultation" button anchored to the
 * viewport. CSS-only conditional: hidden when body[data-active-page]
 * is "contact" so it doesn't compete with the form.
 */
.trust-band { background: var(--brand-tint); border-bottom: 1px solid var(--line); padding: var(--s-7) 0; }
.trust-band .container { padding: 0 var(--s-6); }
.trust-band .section-stat-row { margin-top: 0; padding: 0; border: 0; }

.persistent-cta { position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 80; background: var(--brand); color: var(--on-brand); padding: 14px 22px; border-radius: var(--radius-pill); text-decoration: none; font-family: var(--font-stack); font-weight: 600; font-size: var(--font-body); box-shadow: var(--shadow-lift); transition: transform 120ms ease, background-color 120ms ease; }
.persistent-cta:hover { background: var(--brand-strong); transform: translateY(-2px); }
.persistent-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
body[data-active-page="contact"] .persistent-cta { display: none; }
@media (max-width: 720px) {
  .persistent-cta { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--s-4); padding: 12px 20px; font-size: 0.9375rem; }
  .persistent-cta:hover { transform: translateX(-50%) translateY(-2px); }
}