/*
Theme Name: Sparks Environmental
Theme URI: https://sparksenv.com
Description: Women-owned excavation and environmental site contractor serving the Greater Philadelphia area. Built from the Claude Design handoff 3 export.
Version: 2.0.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Author: KTC Development
Author URI: https://ktc.biz
License: Proprietary
Text Domain: sparks
*/

/* ============================================================
   1. DESIGN TOKENS
   Ported verbatim from the handoff design system:
   design/project/_ds/.../tokens/*.css
   ============================================================ */

:root {
  /* ---- Brand green ---- */
  --green-50:#EEF8E7;  --green-100:#D7EFC6; --green-200:#B6E29B;
  --green-300:#93D46F; --green-400:#79C952; --green-500:#6CBE45;
  --green-600:#57A235; --green-700:#437E2A; --green-800:#335F22;
  --green-900:#244316;

  /* ---- Ink ---- */
  --ink-950:#0A1413; --ink-900:#0F1E1E; --ink-850:#14282A;
  --ink-800:#1A3133; --ink-700:#234042; --ink-600:#2F5254; --ink-500:#3E6769;

  /* ---- Steel ---- */
  --steel-25:#F6F8F8;  --steel-50:#EEF1F1;  --steel-100:#E1E6E6;
  --steel-200:#CCD4D4; --steel-300:#AEB9B9; --steel-400:#899595;
  --steel-500:#6A7676; --steel-600:#515C5C; --steel-700:#3D4646;
  --steel-800:#2A3131; --steel-900:#1B2020;

  --white:#FFFFFF; --black:#000000;

  /* ---- Semantic status ---- */
  --warn-500:#E8A317;   --warn-100:#FBEDC9;
  --danger-500:#D8492B; --danger-100:#F8DAD2;
  --info-500:#2E7FB8;   --info-100:#D4E6F2;

  /* ---- Surfaces ---- */
  --surface-page:var(--steel-25);
  --surface-card:var(--white);
  --surface-sunken:var(--steel-50);
  --surface-raised:var(--white);
  --surface-ink:var(--ink-900);
  --surface-ink-soft:var(--ink-800);
  --surface-ink-700:var(--ink-700);

  /* ---- Text ---- */
  --text-strong:var(--ink-900);
  --text-body:var(--ink-800);
  --text-muted:var(--steel-500);
  --text-faint:var(--steel-400);
  --text-on-ink:var(--white);
  --text-on-ink-muted:var(--steel-300);
  --text-on-green:var(--ink-950);

  /* ---- Brand actions ---- */
  --brand:var(--green-500);
  --brand-hover:var(--green-600);
  --brand-active:var(--green-700);
  --brand-soft:var(--green-50);
  --brand-on:var(--ink-950);

  /* ---- Borders ---- */
  --border-subtle:var(--steel-100);
  --border-default:var(--steel-200);
  --border-strong:var(--steel-300);
  --border-on-ink:rgba(255,255,255,0.12);
  --ring:color-mix(in srgb, var(--green-500) 60%, transparent);

  /* ---- Type ---- */
  --font-display:"Archivo", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;

  --fs-display-xl:76px; --fs-display-l:56px;
  --fs-display-m:42px;  --fs-display-s:32px;
  --fs-h1:28px; --fs-h2:22px; --fs-h3:18px;
  --fs-body-lg:19px; --fs-body:16px; --fs-body-sm:14px;
  --fs-caption:13px; --fs-micro:11px;

  --lh-tight:1.04; --lh-snug:1.18; --lh-normal:1.55; --lh-relaxed:1.7;
  --ls-display:-0.02em; --ls-tight:-0.01em; --ls-normal:0;
  --ls-label:0.04em; --ls-eyebrow:0.18em;

  /* ---- Spacing (4px base) ---- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --space-32:128px;

  /* ---- Radii ---- */
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px;
  --radius-lg:12px; --radius-xl:18px; --radius-pill:999px;

  /* ---- Layout ---- */
  --container:1200px;
  --container-wide:1400px;
  --gutter:clamp(20px, 5vw, 48px);
  --header-h:76px;

  /* The shield chevron clip, signature motif */
  --clip-chevron-b:polygon(0 0, 100% 0, 100% calc(100% - 28px), 50% 100%, 0 calc(100% - 28px));

  /* ---- Elevation ---- */
  --shadow-xs:0 1px 2px rgba(15,30,30,0.06);
  --shadow-sm:0 1px 3px rgba(15,30,30,0.10), 0 1px 2px rgba(15,30,30,0.06);
  --shadow-md:0 4px 10px rgba(15,30,30,0.10), 0 2px 4px rgba(15,30,30,0.06);
  --shadow-lg:0 12px 28px rgba(15,30,30,0.14), 0 4px 10px rgba(15,30,30,0.08);
  --shadow-xl:0 24px 56px rgba(10,20,19,0.22);
  --shadow-brand:0 6px 18px rgba(108,190,69,0.32);
  --shadow-inset:inset 0 2px 4px rgba(15,30,30,0.10);
  --edge-on-ink:inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   2. BASE
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img { max-width:100%; height:auto; display:block; }

a { color:var(--brand); }

h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display);
  color:var(--text-strong);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-snug);
  margin:0;
}

p { margin:0; }

/* Visible focus for keyboard users */
:focus-visible {
  outline:3px solid var(--ring);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

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

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--brand); color:var(--brand-on);
  padding:12px 20px; border-radius:0 0 var(--radius-md) 0;
  font-family:var(--font-display); font-weight:800; font-size:14px;
  text-decoration:none;
}
.skip-link:focus { left:0; }

/* ============================================================
   3. LAYOUT
   ============================================================ */

.container      { max-width:var(--container);      margin:0 auto; padding-inline:var(--gutter); }
.container-wide { max-width:var(--container-wide); margin:0 auto; padding-inline:var(--gutter); }

.section        { padding-block:var(--space-24); }
.section--tight { padding-block:var(--space-16); }
.section--ink   { background:var(--surface-ink); color:var(--text-on-ink-muted); }
.section--ink h1, .section--ink h2, .section--ink h3 { color:var(--white); }
.section--sunken{ background:var(--surface-sunken); }

/* The signature diagonal slash overlay. CHANGES.md section 1 item 7:
   115deg, rgba(108,190,69,0.05), 60/66px period, on EVERY hero. */
.slash-overlay {
  position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    115deg, transparent 0 60px, rgba(108,190,69,0.05) 60px 66px
  );
}

/* ============================================================
   4. TYPOGRAPHY HELPERS
   ============================================================ */

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-caption); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--brand); margin:0;
}
.eyebrow img { height:17px; width:auto; flex-shrink:0; }

.display-xl { font-family:var(--font-display); font-weight:900; font-size:clamp(42px,5.4vw,76px); line-height:var(--lh-tight); letter-spacing:var(--ls-display); }
.display-l  { font-family:var(--font-display); font-weight:900; font-size:clamp(34px,4.4vw,56px); line-height:1.08;            letter-spacing:var(--ls-display); }
.display-m  { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.4vw,42px); line-height:1.12;            letter-spacing:var(--ls-display); }
.display-s  { font-family:var(--font-display); font-weight:800; font-size:clamp(24px,2.8vw,32px); line-height:var(--lh-snug);  letter-spacing:var(--ls-tight); }

.lede  { font-size:var(--fs-body-lg); line-height:1.65; color:var(--text-body); }
.muted { color:var(--text-muted); }
.mono  { font-family:var(--font-mono); }

/* ============================================================
   5. BUTTONS
   ============================================================ */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding-inline:22px;
  border:1px solid transparent; border-radius:var(--radius-md);
  font-family:var(--font-display); font-weight:800; font-size:14px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform:translateY(1px); }

.btn--brand { background:var(--brand); color:var(--brand-on); box-shadow:var(--shadow-brand); }
.btn--brand:hover { background:var(--brand-hover); }

.btn--ghost { background:transparent; color:var(--text-strong); border-color:var(--border-strong); }
.btn--ghost:hover { background:var(--steel-50); }

.btn--on-ink { background:rgba(255,255,255,0.08); color:var(--white); border-color:var(--border-on-ink); }
.btn--on-ink:hover { background:rgba(255,255,255,0.14); }

.btn--sm { height:36px; padding-inline:16px; font-size:13px; }
.btn--lg { height:54px; padding-inline:28px; font-size:15px; }
.btn--block { width:100%; }

/* ============================================================
   6. ICONS
   Inline SVG sprite, replaces the unpkg lucide@latest dependency.
   ============================================================ */

.icon {
  width:1em; height:1em; flex-shrink:0;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.icon--brand { color:var(--green-400); }

/* ============================================================
   7. PILLS & TAGS
   ============================================================ */

.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:600; text-decoration:none;
  background:var(--steel-50); color:var(--text-body);
  border:1px solid var(--border-subtle);
}
.pill--on-ink {
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.12);
  color:var(--text-on-ink);
  transition:background var(--dur-base) var(--ease-out);
}
.pill--on-ink:hover { background:rgba(255,255,255,0.14); }
.pill--brand { background:var(--brand-soft); border-color:var(--green-200); color:var(--green-800); }

/* ============================================================
   8. CARDS & GRIDS
   ============================================================ */

.card {
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
}
.card--on-ink {
  background:var(--surface-ink-soft);
  border-color:var(--border-on-ink);
  box-shadow:var(--edge-on-ink);
  color:var(--text-on-ink-muted);
}

.grid { display:grid; gap:var(--space-6); }
.grid--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns:repeat(4, minmax(0,1fr)); }

/* ============================================================
   9. RESPONSIVE
   Breakpoints per CHANGES.md section 7:
   1200 container, 1024 grids to 2col, 900 mobile nav, 640 single col.
   ============================================================ */

@media (max-width:1024px) {
  .grid--3, .grid--4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px) {
  :root { --gutter:24px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns:minmax(0,1fr); }
  .section { padding-block:var(--space-16); }
}

/* ============================================================
   10. SITE HEADER
   ============================================================ */

.site-header {
  position:sticky; top:0; z-index:50;
  background:var(--surface-ink);
  border-bottom:1px solid var(--border-on-ink);
}

.site-header__inner {
  height:var(--header-h);
  display:flex; align-items:center; gap:28px;
}

.site-header__logo { display:flex; flex-shrink:0; }
.site-header__logo img { height:48px; width:auto; }

.site-nav { display:flex; align-items:center; flex:1; }

.site-nav__list {
  list-style:none; display:flex; gap:6px;
  margin:0 0 0 12px; padding:0;
}

.site-nav__link {
  display:block;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  text-decoration:none; color:var(--text-on-ink);
  padding:8px 14px; border-radius:var(--radius-sm);
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.site-nav__link:hover { background:rgba(255,255,255,0.06); }
.site-nav__link.is-current { color:var(--green-400); background:rgba(108,190,69,0.12); }

.site-nav__actions {
  margin-left:auto; display:flex; align-items:center; gap:18px;
}

.site-header__phone {
  display:flex; align-items:center; gap:8px;
  text-decoration:none; white-space:nowrap;
  font-family:var(--font-mono); font-size:14px; color:var(--text-on-ink);
}
.site-header__phone .icon { width:16px; height:16px; }

.site-header__toggle {
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border-on-ink);
  border-radius:var(--radius-md);
  color:var(--text-on-ink); cursor:pointer;
}
.site-header__toggle .icon { width:22px; height:22px; }
.site-header__toggle-close { display:none; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-open  { display:none; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-close { display:block; }

/* Mobile nav, breakpoint per CHANGES.md section 7 */
@media (max-width:900px) {
  .site-header { position:sticky; }
  .site-header__inner { position:relative; gap:16px; }
  .site-header__toggle { display:flex; }

  .site-nav {
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:var(--surface-ink);
    border-bottom:1px solid var(--border-on-ink);
    padding:8px var(--gutter) 20px;
    box-shadow:var(--shadow-lg);
  }
  .site-nav.is-open { display:flex; }

  .site-nav__list { flex-direction:column; gap:0; margin:0; }
  .site-nav__link {
    display:flex; align-items:center;
    height:48px; padding-inline:12px; font-size:16px; border-radius:var(--radius-md);
  }

  .site-nav__actions {
    margin:8px 0 0; padding-top:14px;
    flex-direction:column; align-items:stretch; gap:12px;
    border-top:1px solid var(--border-on-ink);
  }
  .site-header__phone { justify-content:center; height:44px; font-size:16px; }
  .site-nav__actions .btn { width:100%; height:48px; font-size:14px; }
}

/* ============================================================
   11. SITE FOOTER
   ============================================================ */

.site-footer { background:var(--ink-950); color:var(--text-on-ink-muted); }

.site-footer__grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:var(--space-12);
  padding-block:var(--space-16) var(--space-10);
}

.site-footer__brand img { height:40px; width:auto; margin-bottom:18px; }
.site-footer__blurb { max-width:320px; font-size:15px; line-height:1.55; margin-bottom:18px; }
.site-footer__pills { display:flex; gap:10px; flex-wrap:wrap; }
.site-footer__pills .icon { width:13px; height:13px; }

.site-footer__heading {
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-on-ink); margin-bottom:14px;
}

/* Scoped to .site-footer__link, never a bare `a`. A bare `.site-footer__col a`
   also matched the quote button and the phone and email rows, and at 0-1-1 it
   outranked .btn--brand, overriding its display, colour and padding. */
.site-footer__link {
  display:block; text-decoration:none;
  color:var(--text-on-ink-muted); font-size:14.5px; padding:5px 0;
  transition:color var(--dur-base) var(--ease-out);
}
.site-footer__link:hover { color:var(--text-on-ink); }

.site-footer__phone {
  display:flex; align-items:center; gap:8px;
  text-decoration:none; padding:5px 0; font-size:16px;
  color:var(--white); font-family:var(--font-mono);
}
.site-footer__phone .icon { width:16px; height:16px; }

.site-footer__col .btn { margin-top:12px; }
.site-footer__col .btn .icon { width:15px; height:15px; }

.site-footer__bar { border-top:1px solid rgba(255,255,255,0.08); }
.site-footer__bar-inner {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-block:18px;
  font-family:var(--font-mono); font-size:12.5px;
}
.site-footer__bar-inner a { color:var(--text-on-ink-muted); text-decoration:none; }
.site-footer__bar-inner a:hover { color:var(--text-on-ink); }
.site-footer__legal { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
.site-footer__sep { width:1px; height:13px; background:rgba(255,255,255,0.22); }

@media (max-width:900px) {
  .site-footer__grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-8); }
}
@media (max-width:640px) {
  .site-footer__grid { grid-template-columns:minmax(0,1fr); }
  .site-footer__bar-inner { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   12. BREADCRUMB
   ============================================================ */

.breadcrumb ol {
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0; padding:0;
  font-family:var(--font-mono); font-size:13px;
}
.breadcrumb li + li::before {
  content:"/"; margin-right:8px; color:var(--steel-500);
}
.breadcrumb a { color:var(--text-on-ink-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--text-on-ink); }
.breadcrumb [aria-current="page"] { color:var(--green-400); }

/* ============================================================
   13. SLASH OVERLAY VARIANTS
   Periods differ by context in the design files.
   ============================================================ */

.slash-overlay--hero {
  background-image:repeating-linear-gradient(
    115deg, transparent 0 64px, rgba(108,190,69,0.05) 64px 70px
  );
}
.slash-overlay--band {
  background-image:repeating-linear-gradient(
    115deg, transparent 0 54px, rgba(108,190,69,0.05) 54px 59px
  );
}

/* ============================================================
   14. SERVICE DETAIL PAGE
   ============================================================ */

.service-hero { position:relative; background:var(--ink-950); overflow:hidden; }

.service-hero__image {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.service-hero__scrim {
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(10,20,19,0.94) 0%,
    rgba(10,20,19,0.82) 48%,
    rgba(10,20,19,0.50) 100%);
}

.service-hero__inner { position:relative; padding-block:var(--space-20); }
.service-hero .breadcrumb { margin-bottom:20px; }
.service-hero .eyebrow { font-size:12px; letter-spacing:0.16em; }
.service-hero__title { color:var(--white); margin-top:14px; max-width:680px; }

.service-hero__client {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px; padding:7px 14px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  color:var(--text-on-ink);
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
}
.service-hero__client-label { color:var(--green-400); }

.service__intro { max-width:860px; }
.service__body { margin-top:14px; font-size:17px; line-height:1.65; }
.service__subhead { margin:40px 0 22px; }

.service-items {
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.service-item {
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:10px; padding:20px;
  box-shadow:var(--shadow-sm);
}
.service-item__icon {
  display:flex; width:44px; height:44px; margin-bottom:14px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-md);
  background:var(--brand-soft); color:var(--green-700);
}
.service-item__icon .icon { width:22px; height:22px; }
.service-item__title {
  display:block; margin-bottom:6px;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  color:var(--text-strong);
}
.service-item__desc { font-size:13.5px; line-height:1.5; color:var(--text-muted); }

/* ---- Dark approach band ---- */
.approach {
  position:relative; overflow:hidden;
  background:var(--surface-ink);
  border-radius:16px; padding:var(--space-12);
}
.approach__inner {
  position:relative;
  display:grid; grid-template-columns:1.4fr 1fr; gap:44px; align-items:center;
}
.approach .eyebrow { font-size:12px; letter-spacing:0.16em; color:var(--green-400); margin-bottom:12px; }
.approach__text { font-size:18px; line-height:1.65; color:var(--text-on-ink); }
.approach__heading {
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--text-on-ink); margin-bottom:14px;
}
.approach__pills { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.approach__pills li {
  display:inline-flex; padding:6px 13px;
  border-radius:var(--radius-pill);
  background:rgba(108,190,69,0.16); color:var(--green-300);
  font-family:var(--font-mono); font-size:13px;
}

/* ---- Why choose ---- */
.service-why {
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:center;
}
.service-why__media img {
  width:100%; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); object-fit:cover;
}
.service-why__body h2 { margin:12px 0 22px; }

.checklist { list-style:none; display:flex; flex-direction:column; gap:13px; margin:0 0 28px; padding:0; }
.checklist li { display:flex; gap:9px; align-items:center; font-size:15px; color:var(--text-body); }
.checklist .icon { width:16px; height:16px; stroke-width:2.6; color:var(--green-600); }

/* ---- Related services ---- */
.related { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.related__item {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; text-decoration:none;
  background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:10px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.related__item:hover {
  box-shadow:var(--shadow-md);
  border-color:var(--border-default);
  transform:translateY(-3px);
}
.related__title {
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--text-strong);
}
.related__arrow { width:18px; height:18px; color:var(--brand); }

/* ---- Closing CTA band ----
   Dark ink backdrop holding a GREEN panel clipped with the signature shield
   chevron. Buttons are a white Call first, then a dark Request a Quote. */
.cta-band { background:var(--ink-950); padding:64px 0; }
.cta-band__panel {
  max-width:var(--container); margin:0 auto;
  padding:64px 48px 80px; text-align:center;
  background:var(--green-500);
  clip-path:var(--clip-chevron-b);
}
.cta-band__eyebrow {
  margin:0;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--ink-950);
}
.cta-band__title {
  margin:10px 0 8px;
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(30px,4vw,48px); line-height:1.1;
  letter-spacing:var(--ls-display); color:var(--ink-950);
}
.cta-band__text {
  margin:0 auto 26px; max-width:540px;
  font-size:18px; line-height:1.55; color:var(--ink-900);
}
.cta-band__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:56px; padding:0 30px; border-radius:var(--radius-md);
  font-family:var(--font-display); font-weight:800; font-size:17px;
  text-decoration:none;
  transition:background var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn-cta:active { transform:translateY(1px); }
.btn-cta .icon { width:19px; height:19px; }
.btn-cta--light { background:var(--white); color:var(--ink-900); }
.btn-cta--light:hover { background:var(--steel-50); }
.btn-cta--dark { background:var(--ink-900); color:var(--white); }
.btn-cta--dark:hover { background:var(--ink-800); }

@media (max-width:640px) {
  .cta-band { padding:32px 0; }
  .cta-band__panel { padding:48px 24px 64px; }
  .cta-band__actions .btn-cta { width:100%; }
}

@media (max-width:900px) {
  .approach__inner  { grid-template-columns:minmax(0,1fr); gap:28px; }
  .service-why      { grid-template-columns:minmax(0,1fr); }
  .service-why__media { order:-1; }
  .related          { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px) {
  .service-hero__inner { padding-block:var(--space-16); }
  .approach { padding:var(--space-8); }
  .related  { grid-template-columns:minmax(0,1fr); }
  .cta-band__actions .btn { width:100%; }
}

/* ============================================================
   15. FALLBACK / 404 / SEARCH
   ============================================================ */

/* ============================================================
   16. HOME
   ============================================================ */

.home-hero { position:relative; overflow:hidden; background:var(--ink-950); }
.home-hero__image {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
/* Left-to-right ink wash, CHANGES.md section 1 item 5 */
.home-hero__wash {
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(10,20,19,0.92) 0%,
    rgba(10,20,19,0.78) 46%,
    rgba(10,20,19,0.35) 100%);
}
.home-hero__inner { position:relative; padding-block:96px; max-width:1200px; }
.home-hero__title { color:var(--white); margin-top:16px; }
.home-hero__title-accent { color:var(--green-400); }
.home-hero__text {
  margin-top:22px; max-width:640px;
  font-size:18px; line-height:1.65; color:var(--text-on-ink-muted);
}
.home-hero__actions { margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }

.trust-strip { background:var(--surface-ink-soft); border-block:1px solid var(--border-on-ink); }
.trust-strip__inner {
  display:flex; flex-wrap:wrap; gap:14px 36px;
  justify-content:space-between; padding-block:22px;
}
.trust-strip__item {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--text-on-ink);
}
.trust-strip__item .icon { width:18px; height:18px; }

.home-intro { max-width:820px; }
.home-intro h2 { margin:14px 0 18px; }

.home-services__head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-6); margin-bottom:var(--space-10);
}
.home-services__head h2 { margin-top:14px; }
.home-services__all {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:800; font-size:14px;
  color:var(--brand); text-decoration:none; white-space:nowrap;
}
.home-services__all .icon { width:16px; height:16px; }

.home-services { display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(265px, 1fr)); }
.home-service {
  position:relative; display:block; padding:24px;
  background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); text-decoration:none;
  transition:box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.home-service:hover {
  box-shadow:var(--shadow-md); transform:translateY(-3px);
  border-color:var(--border-default);
}
.home-service__num {
  position:absolute; top:18px; right:20px;
  font-family:var(--font-mono); font-size:12px; color:var(--steel-300);
}
.home-service__icon {
  display:flex; width:44px; height:44px; margin-bottom:16px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-md);
  background:var(--brand-soft); color:var(--green-700);
}
.home-service__icon .icon { width:26px; height:26px; }
.home-service__title { font-size:20px; font-weight:700; margin-bottom:8px; }
.home-service__desc { display:block; font-size:13.5px; line-height:1.5; color:var(--text-muted); }

/* Stat band is GREEN with ink text, a flex row, and no slash overlay. */
.stat-band { background:var(--green-500); }
.stat-band__inner {
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:28px; padding-block:44px;
}
.stat__value {
  display:block;
  font-family:var(--font-display); font-weight:900; font-size:52px;
  line-height:1; letter-spacing:var(--ls-display); color:var(--ink-950);
}
.stat__label { font-size:24px; }
.stat__note { display:block; margin-top:8px; font-size:14px; color:var(--ink-900); }

.home-why { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }

.home-why__body h2 { margin:14px 0 26px; }
.home-why__list { display:flex; flex-direction:column; gap:20px; }
.home-why__item { display:flex; gap:14px; align-items:flex-start; }
.home-why__icon {
  display:flex; width:40px; height:40px; flex-shrink:0;
  align-items:center; justify-content:center;
  border-radius:var(--radius-md); background:var(--brand-soft); color:var(--green-700);
}
.home-why__icon .icon { width:22px; height:22px; }
.home-why__item strong {
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:16px; color:var(--text-strong); margin-bottom:4px;
}
.home-why__item span { font-size:14.5px; line-height:1.55; color:var(--text-muted); }

.values { position:relative; overflow:hidden; background:var(--surface-ink); }
.values__inner { position:relative; }
.values__title { color:var(--white); margin:14px 0 var(--space-10); max-width:820px; }
.values__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:24px; }
.value-card {
  padding:26px;
  background:var(--surface-ink-soft);
  border:1px solid var(--border-on-ink); border-radius:var(--radius-lg);
  box-shadow:var(--edge-on-ink);
}
.value-card__icon {
  display:flex; width:42px; height:42px; margin-bottom:16px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-md);
  background:rgba(108,190,69,0.16); color:var(--green-300);
}
.value-card__icon .icon { width:23px; height:23px; }
.value-card__title { font-size:16px; font-weight:700; color:var(--white); margin-bottom:8px; }
.value-card__text { font-size:14px; line-height:1.55; color:var(--text-on-ink-muted); }

.home-about { display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.home-about h2 { margin:14px 0 18px; }

.story-quote--teaser { margin:22px 0 0; }
.wbenc {
  display:flex; gap:18px; align-items:center;
  margin-bottom:26px; padding:18px 20px;
  background:var(--white);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.wbenc__logo { width:auto; height:64px; flex-shrink:0; }
.wbenc strong {
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:15px; color:var(--text-strong); margin-bottom:4px;
}
.wbenc span { font-size:14px; line-height:1.5; color:var(--text-muted); }

@media (max-width:1024px) {
  .home-services { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .values__grid  { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px) {
  .home-hero__inner { padding-block:var(--space-24); }
  .home-why, .home-about { grid-template-columns:minmax(0,1fr); }
  .home-why .media-frame, .home-about .media-frame { order:-1; }
  .media-frame--why, .media-frame--teaser { height:300px; }
  .home-services__head { flex-direction:column; align-items:flex-start; }
  .stat-band__inner { grid-template-columns:minmax(0,1fr); gap:var(--space-10); }
}
@media (max-width:640px) {
  .home-services, .values__grid { grid-template-columns:minmax(0,1fr); }
  .trust-strip__inner { gap:var(--space-4) var(--space-6); }
  .home-hero__actions .btn { width:100%; }
  .wbenc { flex-direction:column; align-items:flex-start; }
}

/* ---- Generic page hero (page.php) ---- */
.page-hero { position:relative; overflow:hidden; background:var(--surface-ink); }
.page-hero__inner { position:relative; padding-block:var(--space-20); }
/* Contact and Privacy: 72px top, 64px bottom, and the base 60/66 slash. */
.page-hero--tight .page-hero__inner { padding:72px 0 64px; }
.page-hero .breadcrumb { margin-bottom:20px; }
.page-hero__title { color:var(--white); margin-top:14px; }
.page-hero__text {
  margin-top:18px; max-width:640px;
  font-size:18px; line-height:1.65; color:var(--text-on-ink-muted);
}
.page-hero__stamp { margin-top:16px; font-size:13px; color:var(--steel-300); }

/* ============================================================
   17. SHARED PAGE SECTIONS
   ============================================================ */

.split { display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
.split h2 { margin:14px 0 18px; }
.split__text { margin-top:14px; font-size:16.5px; line-height:1.7; }
.story-text { font-size:17px; line-height:1.65; color:var(--text-body); margin-top:20px; }
.story-text + .story-text { margin-top:16px; }
.story-quote {
  margin:26px 0 0; padding:0; border:0;
  font-family:var(--font-display); font-weight:800; font-size:22px;
  font-style:italic; color:var(--text-strong);
}
.split .media-frame { align-self:stretch; }
.split .pill { margin-top:20px; }
.split .pill .icon { width:15px; height:15px; }

.wbenc-section { display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.wbenc-section__card {
  display:flex; align-items:center; justify-content:center;
  padding:44px; background:var(--white);
  border:1px solid var(--border-subtle); border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.wbenc-section__logo { width:100%; max-width:360px; height:auto; }
.wbenc-section h2 { margin:14px 0 16px; }

.process__title { margin:14px 0 var(--space-10); }
.process { list-style:none; margin:0; padding:0; display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.process__step {
  padding:28px 24px;
  background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.process__num {
  display:block; margin-bottom:12px;
  font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--brand);
}
.process__step-title { font-size:16px; font-weight:700; margin-bottom:8px; }
.process__step-text { font-size:14px; line-height:1.55; color:var(--text-muted); }

/* ---- Photo-backed hero using a real <img>, per Industries.dc.html ---- */
.photo-hero { position:relative; overflow:hidden; background:var(--ink-950); }
.photo-hero__image {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.photo-hero__scrim {
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(10,20,19,0.94) 0%,
    rgba(10,20,19,0.84) 50%,
    rgba(10,20,19,0.55) 100%);
}
.photo-hero__inner { position:relative; padding-block:84px; }
.photo-hero__title { color:var(--white); margin-top:14px; max-width:820px; }
.photo-hero__text {
  margin-top:18px; max-width:640px;
  font-size:18px; line-height:1.65; color:var(--text-on-ink-muted);
}

/* ---- Clients: four cards with a green accent bar on top ---- */
.client-cards {
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
}
.client-card {
  position:relative; overflow:hidden;
  padding:28px 24px;
  background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.client-card__accent {
  position:absolute; left:0; right:0; top:0;
  height:4px; background:var(--brand);
}
.client-card__icon {
  display:flex; width:52px; height:52px; margin-bottom:16px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-md); background:var(--brand-soft); color:var(--green-700);
}
.client-card__icon .icon { width:25px; height:25px; }
.client-card__title { font-size:19px; font-weight:800; margin:0 0 8px; }
.client-card__text { font-size:14.5px; line-height:1.55; color:var(--text-muted); margin:0; }

/* ---- Coverage split: a DARK band, not a light one ---- */
.coverage { position:relative; overflow:hidden; background:var(--surface-ink); }
.coverage__inner {
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
  align-items:center; padding-block:88px;
}
.coverage__title {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(28px,3.4vw,40px); line-height:1.18; letter-spacing:var(--ls-display);
  color:var(--white); margin:14px 0 0;
}
.coverage__text {
  margin:18px 0 0; max-width:520px;
  font-size:17px; line-height:1.6; color:var(--text-on-ink-muted);
}
.coverage__states {
  list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  margin:24px 0 0; padding:0;
}
.coverage__states li {
  display:inline-flex; align-items:center;
  padding:8px 16px; border-radius:var(--radius-pill);
  background:rgba(108,190,69,0.16); color:var(--green-300);
  font-family:var(--font-mono); font-size:13px;
}
.coverage__link {
  display:inline-flex; align-items:center; gap:7px; margin-top:20px;
  color:var(--green-300); text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:14px;
}
.coverage__link:hover { color:var(--green-200); }
.coverage__link .icon { width:15px; height:15px; }

/* Shared media frame with an overlaid badge. Used by the About story split
   (460px) and the Clients coverage split (360px); both are the same pattern
   in the prototypes. */
.media-frame {
  position:relative; overflow:hidden;
  border-radius:12px; box-shadow:var(--shadow-lg);
}
.media-frame--tall    { height:460px; }               /* About story */
.media-frame--wide    { height:360px; }               /* Clients coverage */
.media-frame--why     { height:440px; box-shadow:var(--shadow-md); }  /* Home why */
.media-frame--teaser  { height:400px; box-shadow:var(--shadow-md); }  /* Home about teaser */
.media-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-badge {
  position:absolute; bottom:14px; left:14px;
  display:flex; align-items:center; gap:8px;
  padding:6px 11px; border-radius:var(--radius-pill);
  background:rgba(10,20,19,0.62); border:1px solid rgba(255,255,255,0.14);
  font-family:var(--font-mono); font-size:11.5px; color:var(--steel-100);
}
.media-badge .icon { width:13px; height:13px; }

@media (max-width:900px) {
  .coverage__inner { grid-template-columns:minmax(0,1fr); gap:32px; padding-block:var(--space-16); }
  .coverage__inner .media-frame { order:-1; }
  .media-frame--tall, .media-frame--wide { height:300px; }
  .photo-hero__inner { padding-block:var(--space-16); }
}

/* ============================================================
   18. SERVICES HUB
   ============================================================ */

.svc-tabs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:var(--space-10); }
.svc-tab {
  display:inline-flex; align-items:center;
  padding:9px 16px; border-radius:var(--radius-pill);
  background:var(--white); border:1px solid var(--border-default);
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  color:var(--text-body); text-decoration:none; cursor:pointer;
  transition:background var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.svc-tab:hover { border-color:var(--border-strong); background:var(--steel-50); }
.svc-tab.is-active,
.svc-tab[aria-selected="true"] {
  background:var(--brand); border-color:var(--brand); color:var(--brand-on);
  box-shadow:var(--shadow-brand);
}

.svc-panel {
  display:grid; grid-template-columns:1.08fr 0.92fr;
  gap:52px; align-items:start;
  padding-top:var(--space-6);
}
/* Without JS every panel stays visible; tabs.js adds .has-tabs to collapse them. */
.has-tabs .svc-panel { display:none; }
.has-tabs .svc-panel.is-active { display:grid; }
.svc-panel + .svc-panel { border-top:1px solid var(--border-subtle); margin-top:var(--space-10); }
.has-tabs .svc-panel + .svc-panel { border-top:0; margin-top:0; }

.svc-panel__body h2 { margin-bottom:16px; }
.svc-panel__body .pill { margin-top:16px; }
.svc-panel__subhead {
  margin:26px 0 14px;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-strong);
}
.svc-panel__actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* The included list is two columns in the hub, one on the detail page. */
.svc-panel .checklist {
  display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;
}
@media (max-width:640px) {
  .svc-panel .checklist { grid-template-columns:1fr; }
}

.svc-panel__image { width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.svc-panel__projects {
  margin-top:18px; padding:20px;
  background:var(--white);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.svc-panel__projects-title {
  margin-bottom:12px;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-strong);
}
.svc-panel__projects ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.svc-panel__projects li {
  display:inline-flex; padding:5px 12px; border-radius:var(--radius-pill);
  background:var(--brand-soft); color:var(--green-800);
  font-family:var(--font-mono); font-size:12.5px;
}

/* ============================================================
   19. CONTACT
   ============================================================ */

/* Split and card values taken from Contact.dc.html */
.contact { display:grid; grid-template-columns:1.25fr 0.75fr; gap:48px; align-items:start; }

.form-card {
  background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:12px;
  padding:36px; box-shadow:var(--shadow-sm);
}
.form-card__title {
  font-family:var(--font-display); font-weight:800; font-size:24px;
  color:var(--text-strong); margin:0 0 6px;
}
.form-card__lede { font-size:15px; color:var(--text-muted); margin:0 0 26px; }

/* ---- Info column: dark call card, then a light details card ---- */
.contact__info { display:flex; flex-direction:column; gap:20px; }

.call-card {
  position:relative; overflow:hidden;
  background:var(--surface-ink); border-radius:12px;
  padding:28px; box-shadow:var(--edge-on-ink);
}
.call-card__slash {
  background-image:repeating-linear-gradient(
    115deg, transparent 0 40px, rgba(108,190,69,0.06) 40px 45px
  );
}
.call-card__inner { position:relative; }
.call-card__label {
  font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--green-400); margin:0 0 14px;
}
.call-card__phone {
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-family:var(--font-mono); font-size:22px; color:var(--white);
}
.call-card__phone .icon { width:20px; height:20px; color:var(--green-400); }
.call-card__note { color:var(--text-on-ink-muted); font-size:14px; margin:14px 0 0; }

.detail-card {
  display:flex; flex-direction:column; gap:18px;
  background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:12px;
  padding:28px; box-shadow:var(--shadow-sm);
}
.detail-row {
  display:flex; gap:12px; align-items:flex-start;
  text-decoration:none; color:var(--text-body);
}
.detail-row__icon {
  width:20px; height:20px; flex-shrink:0; margin-top:2px;
  color:var(--green-600);
}
.detail-row strong {
  display:block;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--text-strong);
}
.detail-row span,
.detail-row a { font-size:14px; color:var(--text-muted); }
.detail-row a { text-decoration:none; }
.detail-row a:hover { color:var(--brand); }
a.detail-row:hover strong { color:var(--brand); }

/* ---- Service area section below the form ---- */
.area__title { font-size:clamp(26px,3.2vw,38px); margin:14px 0 16px; }
.area__lede { max-width:760px; margin-bottom:var(--space-8); }
.map-caption {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-4) var(--space-6);
  margin-top:18px; font-size:13px; color:var(--text-muted);
}
.map-caption__counties { font-family:var(--font-mono); font-size:12.5px; }
.map-caption__sep { margin-inline:6px; color:var(--steel-300); }

.quote-form__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.quote-form__trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.field { display:flex; flex-direction:column; gap:7px; }
.field--wide { grid-column:1 / -1; }
.field__label {
  font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--text-strong);
}
.field__label abbr { color:var(--brand); text-decoration:none; border:0; }
.field input, .field select, .field textarea {
  height:46px; padding:0 14px;
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  /* surface-page, not surface-card: the inputs sit inside a white card and the
     design recesses them a shade against it. */
  background:var(--surface-page);
  font-family:var(--font-body); font-size:15px; color:var(--text-body);
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.field textarea { height:auto; padding:12px 14px; resize:vertical; line-height:1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring);
}
.field [aria-invalid="true"] { border-color:var(--danger-500); }
.field__error { font-size:13px; color:var(--danger-500); }

.quote-form > .btn { margin-top:24px; }
.quote-form .icon { width:17px; height:17px; }

.form-notice {
  display:flex; align-items:center; gap:10px;
  margin-bottom:22px; padding:14px 16px;
  border-radius:var(--radius-md); font-size:14.5px;
}
.form-notice .icon { width:18px; height:18px; flex-shrink:0; }
.form-notice--error { background:var(--danger-100); color:#8C2B15; }

.quote-success {
  padding:36px 32px; text-align:center;
  background:var(--surface-card);
  border:1px solid var(--green-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.quote-success__icon {
  display:inline-flex; width:56px; height:56px; margin-bottom:18px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-pill); background:var(--brand-soft); color:var(--green-700);
}
.quote-success__icon .icon { width:28px; height:28px; }
.quote-success p { margin:12px 0 24px; color:var(--text-muted); }

/* ============================================================
   20. SERVICE AREA MAP
   ============================================================ */

.map-legend { display:flex; flex-wrap:wrap; gap:var(--space-6); margin-bottom:var(--space-6); }
.map-legend__item {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:13px; color:var(--text-body);
}
.map-legend__swatch {
  width:16px; height:16px; border-radius:4px;
  border:1px solid var(--border-strong);
}
.map-legend__swatch--serve { background:var(--brand); border-color:var(--brand); }
.map-legend__swatch--pin { background:var(--ink-900); border-color:var(--ink-900); border-radius:var(--radius-pill); }
.map-legend__swatch--context { background:var(--steel-100); border-color:var(--steel-200); }

.map-figure {
  margin:0; padding:var(--space-6);
  background:var(--white);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.map-figure figcaption {
  margin-top:16px; font-size:13.5px; color:var(--text-muted); text-align:center;
}

.service-map { display:block; width:100%; height:auto; }
.service-map .county { fill:var(--steel-100); stroke:var(--steel-200); stroke-width:0.4px; }
.service-map .county.hi { fill:var(--brand); stroke:#fff; stroke-width:0.8px; }
.service-map .state { fill:none; stroke:var(--steel-400); stroke-width:1px; stroke-linejoin:round; }
.service-map .clabel {
  font-family:var(--font-body); font-weight:700; font-size:10.5px; fill:#123;
  paint-order:stroke; stroke:#fff; stroke-width:2.4px; stroke-linejoin:round;
  text-anchor:middle;
}
.service-map .clabel.on-green { fill:#0e2c05; stroke:rgba(255,255,255,0.85); }
.service-map .pin { fill:var(--ink-900); stroke:#fff; stroke-width:1px; }

.county-card__state {
  margin-bottom:12px; font-size:16px; font-weight:800; color:var(--text-strong);
}
.county-card ul { list-style:none; margin:0; padding:0; }
.county-card li {
  display:flex; align-items:center; gap:8px;
  padding:6px 0; font-size:14.5px;
}
.county-card .icon { width:14px; height:14px; }
.county-note { margin-top:var(--space-8); font-size:15px; color:var(--text-muted); }

/* ============================================================
   21. LEGAL
   ============================================================ */

.legal { max-width:760px; }
.legal__heading { margin:36px 0 10px; font-size:22px; font-weight:800; }
.legal p { font-size:16.5px; line-height:1.7; }

/* ---- Responsive for sections 17-21 ---- */
@media (max-width:1024px) {
  .process { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:900px) {
  .split, .contact, .svc-panel { grid-template-columns:minmax(0,1fr); }
  .split .media-frame { order:-1; }
  .wbenc-section { grid-template-columns:minmax(0,1fr); }
  .process { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px) {
  .quote-form__grid { grid-template-columns:minmax(0,1fr); }
  .process { grid-template-columns:minmax(0,1fr); }
  .svc-tabs { gap:6px; }
  .svc-tab { font-size:12.5px; padding:8px 13px; }
  .map-figure { padding:var(--space-3); }
  .svc-panel__actions .btn { width:100%; }
}

/* Editor content inside a page */
.page__content { max-width:860px; }
.page__content > * + * { margin-top:var(--space-5); }
.page__content h2 { margin-top:var(--space-10); }
.page__content h3 { margin-top:var(--space-6); }
.page__content ul, .page__content ol { padding-left:1.2em; }
.page__content li + li { margin-top:8px; }
.page__content .checklist { padding-left:0; }
.page__content img { border-radius:var(--radius-lg); }

.fallback-hero { position:relative; overflow:hidden; background:var(--surface-ink); }
.fallback-hero__inner { position:relative; padding-block:var(--space-20); }
.fallback-hero__title { color:var(--white); margin-top:14px; }
.fallback-hero__text { margin-top:16px; font-size:18px; color:var(--text-on-ink-muted); max-width:560px; }
.fallback-hero__actions { margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }

.fallback-excerpt { margin-top:12px; color:var(--text-muted); font-size:15px; }
.fallback-excerpt p { margin:0; }

.wp-block-post-title a, .card h2 a { color:inherit; text-decoration:none; }
.card h2 a:hover { color:var(--brand); }

.pagination { margin-top:var(--space-10); font-family:var(--font-mono); font-size:14px; }
.pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding-inline:10px;
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  text-decoration:none; color:var(--text-body); margin-right:6px;
}
.pagination .page-numbers.current { background:var(--brand); border-color:var(--brand); color:var(--brand-on); }

/* ============================================================
   22. SECTION RHYTHM
   Asymmetric paddings taken from the prototypes. A uniform 96px block
   doubled the gaps the design closes on purpose.
   ============================================================ */

/* Home */
.section--home-intro    { padding:88px 0 0; }
.section--home-services { padding:48px 0 96px; }
.section--home-why      { padding:96px 0; }
.section--home-about    { padding:96px 0; }
.values                 { padding:96px 0; }

/* Clients */
.section--client-cards  { padding:80px 0 88px; }

/* Contact */
.section--contact       { padding:72px 0 96px; }
.section--contact-area  { padding:0 0 96px; }

/* Privacy */
.section--legal         { padding:56px 0 96px; }

/* Service detail */
.section--svc-intro     { padding:72px 0 24px; }
.section--svc-approach  { padding:48px 0; }
.section--svc-why       { padding:24px 0 64px; }
.section--svc-related   { padding:64px 0; }

/* Services hub */
.section--svc-nav       { padding:60px 0 88px; }

/* About */
.section--about-story   { padding:88px 0; }
.section--about-wbenc   { padding:0; }
.section--about-wbenc .wbenc-section { padding-block:72px; }
.section--about-process { padding:88px 0; }

@media (max-width:640px) {
  .section--home-intro, .section--home-services, .section--home-why,
  .section--home-about, .section--client-cards, .section--contact,
  .section--legal, .section--svc-intro, .section--svc-why,
  .section--svc-related, .section--svc-nav, .section--about-story,
  .section--about-process, .values {
    padding-block:var(--space-16);
  }
  .section--about-wbenc .wbenc-section { padding-block:var(--space-16); }
}