/* ---- tokens.css ---- */
/* ==========================================================================
   OKLAHOMA CLEANING CONTRACTOR — DESIGN TOKENS
   Single source of truth. Nothing else in the CSS hard-codes a color,
   size, radius, shadow, or duration. Change it here, it changes everywhere.
   ========================================================================== */

:root {
  /* ---- BRAND COLOR SYSTEM -------------------------------------------------
     Navy is the institution. Emerald is the single accent (used sparingly,
     as a signal — CTAs, active states, credential ticks). Everything else is
     a neutral. Limited accent palette by design. */

  /* Navy ramp */
  --navy-950: #06111f;   /* near-black navy — footer, deepest sections */
  --navy-900: #0a1a2f;   /* primary dark surface */
  --navy-800: #0f2540;   /* raised dark surface */
  --navy-700: #163254;   /* borders on dark, hover */
  --navy-600: #1f4570;
  --navy-500: #2c5c8f;
  --navy-400: #5a89b8;   /* muted text on dark — WCAG AA: 5.15:1 on navy-950 */
  --navy-300: #8fb0cd;

  /* Emerald ramp — the ONLY accent hue.
     APPROVED SITE COLOUR. The logo artwork is recoloured to match this, not the
     other way round (client decision, Phase 6). Do not substitute the logo's
     native green. Verified ratios:
       600 on white 5.14 | on sunken 4.83 | white on it 5.14   (AA text)
       300 on navy-900 10.33 | on navy-950 11.20               (AA on dark)
       400 on navy-900 7.49                                    (focus ring)
       700 on white 6.53                                       (AA text) */
  --emerald-700: #0a6b4a;
  --emerald-600: #0c7d56;  /* PRIMARY ACCENT — approved site emerald */
  --emerald-500: #12a56f;  /* interactive / hover */
  --emerald-400: #2bc088;  /* focus ring on dark */
  --emerald-300: #7ad9b4;  /* tint on dark */

  /* Neutral ramp — warm-cool gray for institutional calm */
  --white:      #ffffff;
  --gray-050:   #f6f8fa;   /* light section background */
  --gray-100:   #eef1f5;
  --gray-200:   #dfe4ea;   /* hairline borders on light */
  --gray-300:   #c4ccd6;
  --gray-400:   #9aa5b3;
  --gray-500:   #666f7d;   /* muted body text — WCAG AA: 5.08:1 white, 4.77:1 sunken */
  --gray-600:   #4a5563;
  --gray-700:   #333c48;
  --gray-900:   #171c23;   /* ink — primary text on light */

  /* ---- SEMANTIC COLOR ROLES ----------------------------------------------
     Templates and components reference roles, never raw ramp values, so the
     brand can be re-skinned by editing this block alone. */
  --color-ink:            var(--gray-900);
  --color-body:           var(--gray-600);
  --color-muted:          var(--gray-500);
  --color-surface:        var(--white);
  --color-surface-sunken: var(--gray-050);
  --color-surface-dark:   var(--navy-900);
  --color-surface-darker: var(--navy-950);
  --color-border:         var(--gray-200);
  --color-border-dark:    var(--navy-700);

  --color-accent:         var(--emerald-600);
  --color-accent-hover:   var(--emerald-500);
  --color-accent-tint:    color-mix(in srgb, var(--emerald-600) 10%, white);
  --color-on-accent:      var(--white);

  --color-brand:          var(--navy-900);
  --color-on-dark:        var(--white);
  --color-on-dark-muted:  var(--navy-300);

  --color-focus:          var(--emerald-400);

  /* ---- TYPOGRAPHY --------------------------------------------------------
     Display: Archivo — a grotesque with architectural authority, set large.
     Body:    IBM Plex Sans — engineering heritage, high legibility at length.
     Mono:    IBM Plex Mono — the "datasheet" voice for labels, specs, stats. */
  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale — clamps between mobile min and desktop max.
     Ratio ~1.25 (major third) on the body scale, wider on display. */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.875rem);  /* fine print */
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem);  /* body */
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.44rem);   /* lead */
  --step-2:  clamp(1.50rem, 1.32rem + 0.90vw, 2.05rem);   /* h4 */
  --step-3:  clamp(1.85rem, 1.55rem + 1.50vw, 2.90rem);   /* h3 */
  /* Display sizes pulled back from billboard scale. 5.8rem headlines belong to
     a product launch; a statewide contractor reads more credible set tighter,
     and it reclaims a large slice of the vertical space this phase is cutting. */
  --step-4:  clamp(2.10rem, 1.70rem + 1.90vw, 3.30rem);   /* h2  was 4.10 */
  --step-5:  clamp(2.50rem, 1.95rem + 2.75vw, 4.30rem);   /* h1  was 5.80 */
  --step-6:  clamp(1.875rem, 0.16rem + 8.57vw, 4.75rem);  /* display hero  was 7.50 */
  /* 4.75rem chosen by measurement, not taste: it is the largest size at which
     the homepage H1 sets in 3 balanced lines inside the 1080px hero measure.
     At 5.40rem it broke to 4-5 short lines and pushed the trust bar off the
     fold; at 4.75rem the hero is 810px and the trust bar lands at y=887. */

  --leading-tight:   1.06;
  --leading-heading: 1.14;
  --leading-snug:    1.32;
  --leading-body:    1.68;   /* was 1.62 — long scope copy reads easier */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-label:  0.14em;   /* mono uppercase eyebrows */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---- SPACING (8px base, harmonic) -------------------------------------- */
  /* Phase 6: the small end of the scale is untouched (component padding was
     already right). The LARGE end — the steps that create page-level air — is
     cut ~35%. A contractor's site should feel dense and businesslike; the
     airy, generous rhythm read as SaaS marketing. */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  1.75rem;   /* was 2rem    -13% */
  --space-2xl: 2.25rem;   /* was 3rem    -25% */
  --space-3xl: 2.9rem;    /* was 4.5rem  -36% */
  --space-4xl: 4.2rem;    /* was 6.5rem  -35% */
  --space-5xl: 5.85rem;   /* was 9rem    -35% */

  /* Section rhythm — the single biggest lever on perceived whitespace.
     was clamp(4rem, 3rem + 6vw, 9rem) -> -35% at every viewport. */
  --section-y: clamp(2.6rem, 1.95rem + 3.9vw, 5.85rem);

  /* ---- LAYOUT ------------------------------------------------------------- */
  --container-max: 1240px;
  --container-wide: 1440px;
  --container-text: 64ch;      /* tightened measure — fewer eye-returns */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);

  /* ---- RADIUS ------------------------------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ---- ELEVATION (soft, layered, never harsh) ---------------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 26, 47, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 26, 47, 0.06), 0 1px 2px rgba(10, 26, 47, 0.05);
  --shadow-md: 0 8px 24px rgba(10, 26, 47, 0.08), 0 2px 6px rgba(10, 26, 47, 0.05);
  --shadow-lg: 0 18px 48px rgba(10, 26, 47, 0.12), 0 4px 12px rgba(10, 26, 47, 0.06);
  --shadow-accent: 0 10px 30px rgba(14, 138, 95, 0.28);

  /* ---- MOTION ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  480ms;
  --dur-reveal: 720ms;

  /* ---- Z-INDEX SCALE ------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* Reduced-motion users get an instant, non-animated experience. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}


/* ---- base.css ---- */
/* ==========================================================================
   BASE — reset + element defaults. Depends on tokens.css.
   ========================================================================== */

/* ---- Self-hosted fonts (place WOFF2 in /assets/fonts/) -------------------
   Self-hosting is deliberate: no third-party request on the critical path,
   better Core Web Vitals, one less privacy dependency. Fallback metrics are
   tuned to Archivo / IBM Plex to minimise layout shift (CLS). */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* offset for sticky header on anchor jumps */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--color-body);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---- Headings ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); line-height: var(--leading-tight); font-weight: var(--weight-black); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); font-weight: var(--weight-semibold); }
h5 { font-size: var(--step-1); font-weight: var(--weight-semibold); }
h6 {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
}

p { max-width: var(--container-text); text-wrap: pretty; }

a {
  color: var(--emerald-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--emerald-500); }

strong, b { font-weight: var(--weight-semibold); color: var(--color-ink); }

/* ---- Accessible focus --------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--emerald-300); color: var(--navy-950); }

/* Skip link — first focusable element for keyboard/AT users */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100%;
  z-index: var(--z-modal);
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-md); color: var(--white); }


/* ---- Phase 5: small-screen overflow guards ------------------------------
   Long unbreakable strings (emails, domains) set a min-content width that a
   grid/flex track refuses to shrink below, forcing a page-wide horizontal
   scrollbar. `min-width: 0` lets tracks shrink; `anywhere` lets the string
   itself break. Applied narrowly to the places that render addresses. */
body { overflow-wrap: break-word; }

/* ---- The hidden attribute must always win -------------------------------
   `hidden` is only a USER-AGENT style (display: none) with the lowest possible
   precedence, so ANY author rule that sets `display` on the same element
   silently defeats it and the element renders. That is the classic cause of a
   form's error banner appearing on first load: the banner ships with `hidden`,
   a component rule sets `display`, and the attribute loses.

   `.c-formstatus` does not set display today — but nothing stopped a future
   rule (or a `.c-card > div` style selector) from doing so, and the failure is
   silent and user-facing. Make the attribute authoritative instead of hoping.

   Deliberate use of !important: `hidden` is a statement of fact about the
   document, not a style suggestion. Anything that needs to show an element
   removes the attribute (which is exactly what form.js does). */
[hidden] { display: none !important; }

/* ---- Sprite icon default size ------------------------------------------
   The icon() macro emits <svg viewBox="0 0 24 24"> with no width/height. An
   inline SVG with no intrinsic size stretches to its flex container, which is
   why arrows were rendering at 161px, 423px and 691px on cards and link rows
   (present since before Phase 6 — the components that set a size masked it).

   Default them to the text size. This lives in base.css and uses element+
   attribute specificity (0,1,1), so any component rule later in the bundle
   (components*.css) overrides it — .c-trustbar__icon svg at 21px, .c-btn svg
   at 1em, and so on all still win. */
svg[viewBox="0 0 24 24"] { width: 1em; height: 1em; flex: none; }
.split > *,
.c-pillar > *,
.grid > *,
.c-cityfinder > * { min-width: 0; }
.c-linklist a,
.c-footer a { min-width: 0; overflow-wrap: anywhere; }


/* ---- layout.css ---- */
/* ==========================================================================
   LAYOUT — containers, sections, grids. Depends on tokens.css.
   ========================================================================== */

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

/* ---- Sections ----------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }

.section--dark {
  background: var(--color-surface-dark);
  color: var(--color-on-dark-muted);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: var(--color-on-dark); }
.section--darker { background: var(--color-surface-darker); color: var(--color-on-dark-muted); }
.section--sunken { background: var(--color-surface-sunken); }

/* ---- Section header block ----------------------------------------------- */
.section-head { max-width: 62ch; margin-bottom: var(--space-2xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--color-muted); font-size: var(--step-1); margin-top: var(--space-md); }
.section--dark .section-head p { color: var(--color-on-dark-muted); }

/* ---- Auto-fit card grid ------------------------------------------------- */
.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive auto-fit: cards never squash below a comfortable min width. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

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

/* ---- Split layout (content + media) ------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--media-first > :first-child { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--media-first > :first-child { order: 0; }
}

/* ---- Cluster / stack helpers ------------------------------------------- */
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-xl); }

/* ==========================================================================
   SIGNATURE MOTIF — the "measurement tick" rule.
   A tape-measure / architectural-drawing reference. Used as a section divider
   and under eyebrows. This is the one memorable element; kept quiet elsewhere.
   ========================================================================== */
.tick-rule {
  height: 14px;
  width: 100%;
  border: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-border) 0,
    var(--color-border) 1px,
    transparent 1px,
    transparent 12px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 100%);
  opacity: 0.9;
}
.tick-rule--accent {
  background-image: repeating-linear-gradient(
    to right,
    var(--color-accent) 0,
    var(--color-accent) 2px,
    transparent 2px,
    transparent 14px
  );
}
.section--dark .tick-rule {
  background-image: repeating-linear-gradient(
    to right,
    var(--color-border-dark) 0,
    var(--color-border-dark) 1px,
    transparent 1px,
    transparent 12px
  );
}


/* ---- components.css ---- */
/* ==========================================================================
   COMPONENTS — reusable UI. Depends on tokens.css + layout.css.
   Class-based (.c-*), low specificity, no element selectors that could
   collide with layout paddings.
   ========================================================================== */

/* ---- Datasheet eyebrow (SIGNATURE) --------------------------------------
   Mono, uppercase, with an index token and a short accent tick. Reads like a
   spec-sheet label — encodes that this is a credentialed B2B operation. */
.c-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.c-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-accent);
  display: inline-block;
}
.c-eyebrow__index { color: var(--color-muted); }
.section--dark .c-eyebrow { color: var(--emerald-300); }
.section--dark .c-eyebrow::before { background: var(--emerald-300); }
.section--dark .c-eyebrow__index { color: var(--navy-300); }

/* ---- Buttons ------------------------------------------------------------ */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--step-0);
  line-height: 1;
  padding: 0.95em 1.6em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.c-btn:active { transform: translateY(1px); }

.c-btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}
.c-btn--primary:hover { background: var(--color-accent-hover); color: var(--white); transform: translateY(-2px); }

.c-btn--dark { background: var(--navy-900); color: var(--white); }
.c-btn--dark:hover { background: var(--navy-800); color: var(--white); transform: translateY(-2px); }

.c-btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.c-btn--ghost:hover { border-color: var(--navy-900); color: var(--color-ink); }
/* Dark contexts for the ghost button.
   DEFECT (fixed): .c-hero is always navy (--navy-900) but is NOT .section--dark,
   so a ghost button inside a hero fell through to `.c-btn--ghost { color: var(--color-ink) }`
   -> #171c23 on #0a1a2f = 1.02:1. The text was invisible until :hover. This hit the
   hero phone CTA on industry, program, service, city, county and service x city pages.
   Scope: ONLY the two containers that are genuinely dark. Do NOT widen this to a bare
   `.c-btn--ghost` -- on light sections the dark ink is correct and passes at 13.6:1.
   :link/:visited are pinned so a visited tel: link can never inherit a UA colour. */
.section--dark .c-btn--ghost,
.section--dark .c-btn--ghost:link,
.section--dark .c-btn--ghost:visited,
.c-hero .c-btn--ghost,
.c-hero .c-btn--ghost:link,
.c-hero .c-btn--ghost:visited {
  color: var(--white);
  border-color: var(--color-border-dark);
}
.section--dark .c-btn--ghost:hover,
.section--dark .c-btn--ghost:active,
.section--dark .c-btn--ghost:focus-visible,
.c-hero .c-btn--ghost:hover,
.c-hero .c-btn--ghost:active,
.c-hero .c-btn--ghost:focus-visible {
  border-color: var(--emerald-400);
  color: var(--white);
}

.c-btn--lg { font-size: var(--step-1); padding: 1.1em 2em; }
.c-btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
.c-btn:hover .c-btn__arrow { transform: translateX(4px); }

/* ---- Card --------------------------------------------------------------- */
.c-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  height: 100%;
}
.c-card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--emerald-300);
}
.c-card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  color: var(--emerald-700);
  margin-bottom: var(--space-lg);
}
.c-card__icon svg { width: 26px; height: 26px; }
.c-card__title { font-size: var(--step-2); margin-bottom: var(--space-sm); }
.c-card__body { color: var(--color-muted); }
.c-card__more {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-lg);
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--emerald-700); text-decoration: none;
}

/* ---- Stat block --------------------------------------------------------- */
.c-stat { }
.c-stat__num {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
}
.section--dark .c-stat__num { color: var(--white); }
.c-stat__num .c-stat__unit { color: var(--color-accent); }
.c-stat__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-top: var(--space-sm);
}
.section--dark .c-stat__label { color: var(--navy-300); }

/* ---- Credential / trust chips ------------------------------------------ */
.c-chip {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 0.5em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-body);
  background: var(--color-surface);
}
.c-chip svg { width: 16px; height: 16px; color: var(--color-accent); }
.section--dark .c-chip { border-color: var(--color-border-dark); color: var(--navy-300); background: transparent; }

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.c-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.c-header[data-scrolled="true"] {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.c-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xl);
  min-height: 76px;
}
.c-logo { display: inline-flex; align-items: center; text-decoration: none; }
/* The lockup is a fixed-aspect raster; height drives it, width follows. Set an
   explicit height so the header bar never depends on image decode timing. */
.c-logo__img { height: 44px; width: auto; display: block; }
.c-logo--footer .c-logo__img { height: 52px; }
@media (max-width: 640px) { .c-logo__img { height: 36px; } }
.c-logo__mark { width: 38px; height: 38px; }
.c-logo__text {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: 1.05rem; line-height: 1; color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
}
.c-logo__text span { display: block; font-family: var(--font-mono); font-weight: var(--weight-regular);
  font-size: 0.62rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-accent); margin-top: 3px; }

.c-nav { display: flex; align-items: center; gap: var(--space-lg); }
.c-nav__list { display: flex; gap: var(--space-lg); align-items: center; list-style: none; }
.c-nav__link {
  font-weight: var(--weight-medium); font-size: 0.98rem;
  color: var(--color-body); text-decoration: none; padding-block: 0.5rem;
  position: relative;
}
.c-nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--color-accent); transition: width var(--dur-base) var(--ease-out);
}
.c-nav__link:hover { color: var(--color-ink); }
.c-nav__link:hover::after, .c-nav__link[aria-current="page"]::after { width: 100%; }

.c-nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.c-nav__toggle svg { width: 26px; height: 26px; color: var(--color-ink); }

@media (max-width: 920px) {
  .c-nav__toggle { display: inline-flex; }
  .c-nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch;
    background: var(--white); padding: var(--space-lg) var(--gutter) var(--space-2xl);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-120%);
    transition: transform var(--dur-base) var(--ease-out);
    gap: 0;
  }
  .c-nav[data-open="true"] { transform: translateY(0); }
  .c-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .c-nav__link { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
  .c-nav .c-btn { margin-top: var(--space-lg); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.c-hero {
  position: relative;
  background: var(--navy-900);
  color: var(--white);
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.95rem + 5.2vw, 5.85rem);  /* -35%, matches --section-y */
}
.c-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: 0.28;
}
.c-hero::after { /* navy gradient wash for text contrast */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, var(--navy-950) 20%,
              color-mix(in srgb, var(--navy-900) 70%, transparent) 100%);
}
/* 60ch resolves against the INNER's body-size font, so it boxed an 86px
   headline into ~552px inside a 1440px viewport: nine words over six lines,
   and a CTA row forced to wrap. Widen the block and give the title its own
   measure (ch here resolves against the display size, as intended). */
.c-hero__inner { position: relative; z-index: 2; max-width: 1080px; }
.c-hero__title { font-size: var(--step-6); color: var(--white); letter-spacing: -0.03em;
                 text-wrap: balance; }
.c-hero__title em { font-style: normal; color: var(--emerald-400); }
.c-hero__lead { font-size: var(--step-1); color: var(--navy-300); margin-top: var(--space-lg); max-width: 52ch; }
.c-hero__actions { margin-top: var(--space-2xl); }
.c-hero__trust {
  margin-top: var(--space-3xl); display: flex; flex-wrap: wrap;
  gap: var(--space-md); align-items: center;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.c-cta {
  background: linear-gradient(120deg, var(--emerald-700), var(--emerald-600));
  color: var(--white); border-radius: var(--radius-xl);
  padding: clamp(1.65rem, 1.3rem + 2.6vw, 3.25rem);  /* -35% */
  text-align: center;
}
.c-cta h2 { color: var(--white); max-width: 20ch; margin-inline: auto; }
.c-cta p { color: color-mix(in srgb, var(--white) 85%, transparent); margin: var(--space-md) auto var(--space-xl); }
.c-cta .c-btn--primary { background: var(--white); color: var(--emerald-700); box-shadow: var(--shadow-lg); }
.c-cta .c-btn--primary:hover { background: var(--gray-050); color: var(--emerald-700); }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.c-breadcrumb { font-family: var(--font-mono); font-size: var(--step--1); }
.c-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; align-items: center; }
.c-breadcrumb a { color: var(--color-muted); text-decoration: none; }
.c-breadcrumb a:hover { color: var(--color-accent); }
.c-breadcrumb li[aria-current="page"] { color: var(--color-ink); }
.c-breadcrumb li + li::before { content: "/"; color: var(--color-border); margin-right: var(--space-xs); }

/* ==========================================================================
   ACCORDION (FAQ)
   ========================================================================== */
.c-accordion { border-top: 1px solid var(--color-border); }
.c-accordion__item { border-bottom: 1px solid var(--color-border); }
.c-accordion__trigger {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); padding: var(--space-lg) 0;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--step-1); color: var(--color-ink);
}
.c-accordion__icon { flex: none; width: 24px; height: 24px; transition: transform var(--dur-base) var(--ease-out); color: var(--color-accent); }
.c-accordion__trigger[aria-expanded="true"] .c-accordion__icon { transform: rotate(45deg); }
.c-accordion__panel {
  overflow: hidden; max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.c-accordion__panel-inner { padding-bottom: var(--space-lg); color: var(--color-muted); }

/* ==========================================================================
   FORM
   ========================================================================== */
.c-field { display: block; margin-bottom: var(--space-lg); }
.c-field__label {
  display: block; font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-body); margin-bottom: var(--space-xs);
}
.c-input, .c-textarea, .c-select {
  width: 100%; padding: 0.85em 1em;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.c-input:focus, .c-textarea:focus, .c-select:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald-400) 30%, transparent);
}
.c-textarea { min-height: 140px; resize: vertical; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.c-footer { background: var(--navy-950); color: var(--navy-300); padding-block: var(--space-4xl) var(--space-2xl); }
.c-footer a { color: var(--navy-300); text-decoration: none; }
.c-footer a:hover { color: var(--emerald-300); }
.c-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--grid-gap); }
.c-footer__col h4 { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--white); margin-bottom: var(--space-md); font-weight: var(--weight-medium); }
.c-footer__col ul { list-style: none; }
.c-footer__col li { margin-bottom: var(--space-sm); }
.c-footer__bottom {
  margin-top: var(--space-3xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--navy-800);
  display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--navy-400);
}
@media (max-width: 860px) { .c-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .c-footer__grid { grid-template-columns: 1fr; } }


/* ---- Phase 5: footer contact line must fit a 320px viewport --------------
   Measured defect: the phone/email line rendered 315px wide inside a 320px
   viewport and pushed the page to 335px. Two causes — the line couldn't wrap
   (non-breaking spaces around the separator), and an email address has no
   break opportunity. `overflow-wrap: anywhere` is required rather than
   `break-word`: only `anywhere` reduces the min-content width that a flex/grid
   track sizes against. */
.c-footer__bottom { flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.c-footer__contact { display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs) var(--space-xs); max-width: 100%; }
.c-footer__contact a { overflow-wrap: anywhere; min-width: 0; }

/* ---- Form states: honeypot, errors, status banner (Phase 5) ------------- */
.c-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px;
  overflow: hidden; }
.c-field__req { color: var(--emerald-700); margin-left: 2px; }
.c-field__opt { color: var(--color-muted); font-weight: 400; }
.c-field__error { display: block; color: #b42318; font-size: var(--step--1);
  margin-top: var(--space-2xs); }
.c-field__error:empty { display: none; }
.c-field__note { color: var(--color-muted); font-size: var(--step--1); margin-top: var(--space-md); }
.c-input[aria-invalid="true"], .c-textarea[aria-invalid="true"], .c-select[aria-invalid="true"] {
  border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.c-formstatus { border: 1px solid #f3c6c2; background: #fef3f2; color: #7a271a;
  border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-lg);
  font-size: var(--step--1); }
.c-formstatus strong { display: block; margin-bottom: 2px; }


/* =========================================================================
   PHASE 6 — PREMIUM CONTRACTOR REFINEMENT
   Component polish only. No structural or SEO changes; every rule below is
   inherited automatically by all 11,904 pages through the shared templates.
   ========================================================================= */

/* ---- Cards: crisper edge, purposeful lift ------------------------------ */
.c-card {
  border-radius: var(--radius-md);          /* was lg — tighter, more corporate */
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
/* A hairline accent that only appears on hover: the card feels engineered
   rather than decorative, and it signals affordance on linked cards. */
.c-card--link, a.c-card { position: relative; overflow: hidden; }
.c-card--link::after, a.c-card::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.c-card--link:hover::after, a.c-card:hover::after { transform: scaleX(1); }
.c-card--link:hover, a.c-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 12px 28px -12px rgba(10, 26, 47, .18);
}

/* ---- Buttons: squarer, denser, more contractor than consumer app ------- */
.c-btn {
  border-radius: var(--radius-sm);          /* was pill */
  padding: 0.85em 1.45em;
  letter-spacing: 0.01em;
  /* Phase 6 CTAs are longer and more specific ("Speak With a Project Manager"
     vs "Request a quote"). The original nowrap assumed short labels and pushed
     a 380px button off a 320px viewport. Wrap instead, balanced so a two-line
     label splits evenly rather than orphaning one word. */
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
  text-align: center;
}
.c-btn--lg { padding: 1em 1.9em; }
.c-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(12, 125, 86, .55);
}
.c-btn--primary:active { transform: translateY(0); }
.c-btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---- Icons: consistent optical weight --------------------------------- */
.c-btn svg, .c-linklist a svg { flex: none; }
.c-btn svg { width: 1em; height: 1em; }

/* ---- Trust bar (homepage, near the top) -------------------------------- */
.c-trustbar { border-block: 1px solid var(--color-border); background: var(--color-surface); }
.c-trustbar__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.c-trustbar__item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-xs); padding: var(--space-lg) var(--space-sm);
  border-inline-end: 1px solid var(--color-border);
}
.c-trustbar__item:last-child { border-inline-end: 0; }
.c-trustbar__icon {
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--white);
  display: grid; place-items: center; flex: none;
}
.c-trustbar__icon svg { width: 21px; height: 21px; }
.c-trustbar__label {
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--step--1); color: var(--color-ink); line-height: 1.25;
  text-wrap: balance;
}
@media (max-width: 900px) {
  .c-trustbar__grid { grid-template-columns: repeat(3, 1fr); }
  .c-trustbar__item:nth-child(3n) { border-inline-end: 0; }
  .c-trustbar__item:nth-child(-n+3) { border-block-end: 1px solid var(--color-border); }
}
@media (max-width: 520px) {
  .c-trustbar__grid { grid-template-columns: repeat(2, 1fr); }
  .c-trustbar__item:nth-child(3n) { border-inline-end: 1px solid var(--color-border); }
  .c-trustbar__item:nth-child(2n) { border-inline-end: 0; }
  .c-trustbar__item:nth-child(-n+4) { border-block-end: 1px solid var(--color-border); }
}


/* ---- components-nav.css ---- */
/* ==========================================================================
   ENTERPRISE NAVIGATION — mega menu.
   Progressive enhancement: opens on hover/focus-within with pure CSS; JS adds
   click/touch toggling, Escape-to-close, and aria-expanded management.
   Below --nav-bp it collapses into a full-height drawer with accordion panels.
   ========================================================================== */

.c-mega { display: flex; align-items: center; gap: var(--space-lg); }
.c-mega__list { display: flex; align-items: center; gap: var(--space-2xs); list-style: none; }
.c-mega__item { position: relative; }

/* Top-level trigger (link or button) */
.c-mega__top {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-body); font-weight: var(--weight-medium);
  font-size: 0.98rem; color: var(--color-body);
  padding: 0.6rem 0.85rem; border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.c-mega__top:hover { color: var(--color-ink); background: var(--gray-050); }
.c-mega__caret { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); color: var(--color-muted); }
.c-mega__item:hover .c-mega__caret,
.c-mega__item:focus-within .c-mega__caret,
.c-mega__top[aria-expanded="true"] .c-mega__caret { transform: rotate(180deg); }

/* ---- The dropdown panel (desktop) -------------------------------------- */
.c-mega__panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: min(760px, 88vw);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
  z-index: var(--z-header);
}
.c-mega__panel::before { /* hover bridge so the gap doesn't close the menu */
  content: ""; position: absolute; inset: -14px 0 auto 0; height: 16px;
}
.c-mega__item:hover > .c-mega__panel,
.c-mega__item:focus-within > .c-mega__panel,
.c-mega__panel[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.c-mega__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-2xl); }
.c-mega__inner--wide { grid-template-columns: 0.9fr 1fr 1fr; }

.c-mega__lead { border-right: 1px solid var(--color-border); padding-right: var(--space-xl); }
.c-mega__lead h3 { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.c-mega__lead p { font-size: var(--step--1); color: var(--color-muted); margin-bottom: var(--space-md); }

.c-mega__links { display: grid; gap: 2px; align-content: start; }
.c-mega__link {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: 0.55rem 0.65rem; border-radius: var(--radius-md);
  text-decoration: none; color: var(--color-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.c-mega__link:hover { background: var(--color-accent-tint); color: var(--color-ink); }
.c-mega__link svg { flex: none; width: 20px; height: 20px; color: var(--color-accent); margin-top: 2px; }
.c-mega__link b { display: block; font-weight: var(--weight-semibold); font-size: 0.95rem; }
.c-mega__link span { display: block; font-size: var(--step--1); color: var(--color-muted); }

.c-mega__foot {
  grid-column: 1 / -1; margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-muted);
}

/* ---- Header actions ----------------------------------------------------- */
.c-header__actions { display: flex; align-items: center; gap: var(--space-md); }
.c-header__phone {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: var(--weight-medium);
  color: var(--color-body); text-decoration: none; white-space: nowrap;
}
.c-header__phone svg { width: 16px; height: 16px; color: var(--color-accent); }
.c-header__phone:hover { color: var(--color-ink); }

/* ---- Mobile drawer ------------------------------------------------------ */
.c-nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.c-nav__toggle svg { width: 26px; height: 26px; color: var(--color-ink); }

@media (max-width: 1040px) {
  .c-nav__toggle { display: inline-flex; }
  .c-header__phone { display: none; }

  .c-mega {
    position: fixed; inset: var(--header-h, 76px) 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    padding: var(--space-md) var(--gutter) var(--space-3xl);
    overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
    box-shadow: var(--shadow-lg);
  }
  .c-mega[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

  .c-mega__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .c-mega__item { border-bottom: 1px solid var(--color-border); }
  .c-mega__top { width: 100%; justify-content: space-between; padding: var(--space-md) 0; font-size: 1.05rem; }
  .c-mega__top:hover { background: transparent; }

  /* Panels become collapsible accordions inside the drawer */
  .c-mega__panel {
    position: static; transform: none; min-width: 0; width: 100%;
    border: 0; box-shadow: none; border-radius: 0; padding: 0 0 var(--space-md);
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-in-out);
  }
  .c-mega__panel[data-open="true"] { max-height: 720px; }
  .c-mega__item:hover > .c-mega__panel:not([data-open="true"]),
  .c-mega__item:focus-within > .c-mega__panel:not([data-open="true"]) { max-height: 0; }
  .c-mega__inner, .c-mega__inner--wide { grid-template-columns: 1fr; gap: var(--space-xs); }
  .c-mega__lead { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-md); }
  .c-mega__foot { flex-direction: column; align-items: stretch; }

  .c-header__actions .c-btn { width: 100%; }
  .c-mega .c-header__actions { margin-top: var(--space-lg); flex-direction: column; align-items: stretch; }
}


/* Mega-panel CTA: the lead column is ~196px and the button's natural width was
   landing ~1px over, so `white-space: normal` (added in Phase 6 to stop long
   CTAs overflowing 320px phones) tipped these short labels onto two lines.
   Keep them on one line and tighten the inline padding to buy the margin. */
.c-mega__lead .c-btn {
  white-space: nowrap;
  padding-inline: 1.1em;
}


/* ---- components-home.css ---- */
/* ==========================================================================
   HOMEPAGE / MARKETING COMPONENTS
   Reusable across the 15,000 generated pages: media framework, photo cards,
   feature grids, coverage, resource library, academy. Depends on tokens +
   layout + components.
   ========================================================================== */

/* ---- Section header with optional trailing action ---------------------- */
.section-head--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-xl); max-width: none;
}
.section-head--split > div { max-width: 60ch; }
.section-head__cta { flex: none; }
@media (max-width: 720px) {
  .section-head--split { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   MEDIA FRAMEWORK  (the photography system's front end)
   Fixed aspect ratio prevents CLS; object-fit cover keeps composition; a navy
   placeholder shows while lazy images decode; images fade in once loaded.
   ========================================================================== */
.c-media {
  position: relative; overflow: hidden;
  background: var(--navy-900); border-radius: inherit;
  aspect-ratio: var(--media-ratio, 4 / 3);
}
.c-media--16x9 { --media-ratio: 16 / 9; }
.c-media--4x3  { --media-ratio: 4 / 3; }
.c-media--3x2  { --media-ratio: 3 / 2; }
.c-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--media-focus, center);
}
/* Fade-in only when JS is present to flip the flag; no-JS shows instantly. */
.js-ready .c-media img { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.js-ready .c-media img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js-ready .c-media img { opacity: 1; transition: none; } }

/* ==========================================================================
   INDUSTRY PHOTO CARD (.c-icard) — the signature homepage section
   ========================================================================== */
.c-icard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none; color: inherit; height: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.c-icard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--emerald-300); }
.c-icard__media { position: relative; border-radius: 0; }
.c-icard__media .c-media { border-radius: 0; }
.c-icard__media img { transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.c-icard:hover .c-icard__media img { transform: scale(1.06); }
.c-icard__media::after { /* navy scrim for badge legibility */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,17,31,0.55), transparent 45%);
}
.c-icard__badge {
  position: absolute; left: var(--space-md); bottom: var(--space-md); z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--color-accent); color: var(--white);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.c-icard__badge svg { width: 24px; height: 24px; }
.c-icard__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; }
.c-icard__title { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.c-icard__summary { color: var(--color-muted); font-size: var(--step--1); flex: 1; }
.c-icard__more {
  margin-top: var(--space-md); font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--emerald-700);
  display: inline-flex; align-items: center; gap: var(--space-xs);
}
.c-icard:hover .c-icard__more { color: var(--emerald-500); }

/* ==========================================================================
   SERVICE MEDIA CARD (.c-scard)
   ========================================================================== */
.c-scard {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.c-scard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--emerald-300); }
.c-scard__media img { transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.c-scard:hover .c-scard__media img { transform: scale(1.05); }
.c-scard__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; }
.c-scard__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.c-scard__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-accent-tint); color: var(--emerald-700); }
.c-scard__icon svg { width: 22px; height: 22px; }
.c-scard__title { font-size: var(--step-1); }
.c-scard__summary { color: var(--color-muted); font-size: var(--step--1); flex: 1; }
.c-scard__related {
  margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-muted);
}
.c-scard__related b { font-weight: var(--weight-medium); color: var(--color-body); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 0.72rem; }

/* ==========================================================================
   FEATURE (icon + title + body) — shared by Trust + Why-Choose
   ========================================================================== */
.c-feature { display: flex; flex-direction: column; gap: var(--space-sm); }
.c-feature__icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--emerald-700);
}
.c-feature__icon svg { width: 27px; height: 27px; }
.c-feature__title { font-size: var(--step-2); }
.c-feature__body { color: var(--color-muted); font-size: var(--step--1); }
.section--dark .c-feature__icon { background: color-mix(in srgb, var(--emerald-600) 20%, transparent); color: var(--emerald-300); }
.section--dark .c-feature__body { color: var(--navy-300); }
/* bordered variant for the trust band */
.c-feature--boxed {
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-xl);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.c-feature--boxed:hover { border-color: var(--emerald-300); box-shadow: var(--shadow-md); }

/* ==========================================================================
   OKLAHOMA COVERAGE
   ========================================================================== */
.c-coverage__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.c-coverage__frame::after {
  content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg); pointer-events: none;
}
.c-coverage__nav { margin-top: var(--space-lg); }
.c-coverage__nav h3 {
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--color-muted); font-weight: var(--weight-medium);
  margin-bottom: var(--space-sm);
}
.c-coverage__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.c-chip--link { text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.c-chip--link:hover { border-color: var(--color-accent); color: var(--color-ink); }
.c-coverage__note { font-size: var(--step--1); color: var(--color-muted); font-style: italic; margin-bottom: var(--space-lg); }

/* ==========================================================================
   RESOURCE CENTER
   ========================================================================== */
.c-catbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }

.c-featured {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-xl);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.c-featured:hover { box-shadow: var(--shadow-lg); border-color: var(--emerald-300); }
.c-featured__media img { transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.c-featured:hover .c-featured__media img { transform: scale(1.04); }
.c-featured__body { padding: clamp(1.5rem, 1rem + 3vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.c-featured__cat {
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--color-accent); margin-bottom: var(--space-sm);
}
.c-featured__title { font-size: var(--step-3); margin-bottom: var(--space-sm); }
.c-featured__excerpt { color: var(--color-muted); }
.c-featured__more { margin-top: var(--space-lg); font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--emerald-700); display: inline-flex; gap: var(--space-xs); align-items: center; }
@media (max-width: 760px) { .c-featured { grid-template-columns: 1fr; } }

.c-rcard {
  display: flex; flex-direction: column; height: 100%; background: var(--white);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.c-rcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--emerald-300); }
.c-rcard__media img { transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.c-rcard:hover .c-rcard__media img { transform: scale(1.05); }
.c-rcard__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; }
.c-rcard__cat { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); margin-bottom: var(--space-xs); }
.c-rcard__title { font-size: var(--step-2); margin-bottom: var(--space-xs); }
.c-rcard__excerpt { color: var(--color-muted); font-size: var(--step--1); flex: 1; }

/* ==========================================================================
   COMMERCIAL CLEANING ACADEMY  (dark "learning center")
   ========================================================================== */
.c-track {
  display: flex; flex-direction: column; height: 100%;
  background: var(--navy-800); border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg); padding: var(--space-xl);
  text-decoration: none; color: var(--white);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.c-track:hover { transform: translateY(-5px); border-color: var(--emerald-500); background: var(--navy-700); color: var(--white); }
.c-track__icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: var(--radius-md); background: color-mix(in srgb, var(--emerald-600) 22%, transparent); color: var(--emerald-300); margin-bottom: var(--space-lg); }
.c-track__icon svg { width: 26px; height: 26px; }
.c-track__title { font-size: var(--step-2); color: var(--white); margin-bottom: var(--space-xs); }
.c-track__body { color: var(--navy-300); font-size: var(--step--1); flex: 1; }
.c-track__meta {
  margin-top: var(--space-lg); display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--emerald-300);
}
.c-track__meta svg { width: 18px; height: 18px; }

/* ==========================================================================
   HERO enhancements — subtle blueprint texture + two-CTA + trust reveal
   ========================================================================== */
.c-hero__grid {
  position: absolute; inset: 0; z-index: 1; opacity: 0.5; pointer-events: none;
  background-image:
    linear-gradient(rgba(43,192,136,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,192,136,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000, transparent 70%);
          mask-image: radial-gradient(120% 90% at 20% 0%, #000, transparent 70%);
}
.c-hero__actions .c-btn { margin: 0; }
.js-ready .c-hero__trust .c-chip { opacity: 0; transform: translateY(10px); animation: chipIn var(--dur-slow) var(--ease-out) forwards; }
.js-ready .c-hero__trust .c-chip:nth-child(1) { animation-delay: 0.15s; }
.js-ready .c-hero__trust .c-chip:nth-child(2) { animation-delay: 0.25s; }
.js-ready .c-hero__trust .c-chip:nth-child(3) { animation-delay: 0.35s; }
.js-ready .c-hero__trust .c-chip:nth-child(4) { animation-delay: 0.45s; }
@keyframes chipIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-ready .c-hero__trust .c-chip { opacity: 1; transform: none; animation: none; }
}
.section--dark .c-chip svg, .c-hero .c-chip svg { color: var(--emerald-400); }

/* ---- Big closing CTA typography ---------------------------------------- */
.c-cta--xl { padding: clamp(2rem, 1.3rem + 3.9vw, 4.25rem); }  /* -35% */
.c-cta--xl h2 { font-size: var(--step-5); max-width: 18ch; }
.c-cta__eyebrow { display: inline-flex; margin-bottom: var(--space-md); font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-label); color: color-mix(in srgb, var(--white) 80%, transparent); }
.c-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); }
.c-cta .c-btn--ghost { color: var(--white); border-color: color-mix(in srgb, var(--white) 45%, transparent); }
.c-cta .c-btn--ghost:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.08); }


/* ---- components-content.css ---- */
/* ==========================================================================
   COMPONENTS — CONTENT PLATFORM (Phase 3)
   Pillar pages (service / industry / program), content hubs (resources,
   academy, FAQ), core pages, and the internal-linking blocks. Extends the
   Phase 2 design system — same tokens, same voice.
   ========================================================================== */

/* ---- Page hero (shorter than the homepage hero) ------------------------- */
.c-hero--page { min-height: clamp(240px, 30vh, 340px); display: flex; align-items: flex-end; }  /* -35% */
/* 72ch resolved to ~682px, but the two hero CTAs need ~738px, so they wrapped
   onto two rows — 158px of row for 71px of button. Widen to fit them side by
   side. The lead paragraph keeps its own 52ch measure, so prose is unaffected. */
.c-hero--page .c-hero__inner { padding-block: var(--space-3xl) var(--space-2xl); max-width: 940px; }
.c-hero--page .c-hero__title { font-size: var(--step-5); }
.c-hero__crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm);
  font-size: var(--step--1); margin-bottom: var(--space-lg); position: relative; z-index: 2; }
.c-hero__crumbs a { color: var(--navy-300); text-decoration: none; }
.c-hero__crumbs a:hover { color: var(--white); }
.c-hero__crumbs span[aria-current] { color: var(--emerald-300); }
.c-hero__crumbs .sep { color: var(--navy-500); }
.c-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); position: relative; z-index: 2; }
.c-hero__tag { font: 600 var(--step--1)/1 var(--font-mono, monospace); letter-spacing: .04em;
  text-transform: uppercase; color: var(--emerald-300); border: 1px solid var(--navy-700);
  padding: .45em .8em; border-radius: var(--radius-pill); background: rgba(6,17,31,.35); }

/* ---- Pillar body: reading column + sticky aside ------------------------- */
.c-pillar { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem,4vw,4.5rem); align-items: start; }
@media (max-width: 960px) { .c-pillar { grid-template-columns: 1fr; } }
.c-aside { position: sticky; top: calc(var(--header-h, 76px) + var(--space-lg)); display: grid; gap: var(--space-lg); }
@media (max-width: 960px) { .c-aside { position: static; } }

/* ---- Long-form prose ---------------------------------------------------- */
.c-prose { max-width: var(--container-text); }
.c-prose > * + * { margin-top: var(--space-lg); }
.c-prose h2 { font-size: var(--step-3); letter-spacing: -.02em; margin-top: var(--space-2xl); }
.c-prose h3 { font-size: var(--step-2); margin-top: var(--space-xl); }
.c-prose h2 + p, .c-prose h3 + p { margin-top: var(--space-md); }
.c-prose p, .c-prose li { color: var(--color-body); font-size: var(--step-0); line-height: 1.7; }
.c-prose a { color: var(--emerald-700); text-underline-offset: 3px; }
.c-prose strong { color: var(--color-ink); }
.c-prose .c-eyebrow { margin-bottom: var(--space-sm); }
.c-lede { font-size: var(--step-1); color: var(--color-ink); line-height: 1.6; }

/* ---- Spec / checklist grid (scope, includes, needs) --------------------- */
.c-speclist { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-xl); }
@media (max-width: 620px) { .c-speclist { grid-template-columns: 1fr; } }
.c-speclist li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-sm); align-items: start;
  color: var(--color-ink); font-size: var(--step-0); line-height: 1.5; }
/* NOTE: there was a `.c-speclist li::before { content: "" }` here — a leftover
   list-marker reset. Because the li is `display: grid`, that pseudo-element was
   itself a GRID ITEM: it took cell 1, pushed the <svg> into the 1fr column, and
   bumped the text span onto row 2 into the 22px column. Every checklist item
   rendered as a ~2-character-wide vertical sliver 300-700px tall. Removed.
   Do not reintroduce a pseudo-element inside a grid/flex list item. */

/* ---- REGRESSION GUARD --------------------------------------------------
   Removing the bad rule fixed the symptom, but grid AUTO-PLACEMENT was the real
   hazard: any extra grid item (a future ::before, a wrapper, a stray text node)
   silently shifts every following item into the wrong column — and the page
   still passes axe, overflow and card-clipping checks while doing it.

   Pin the two real children to explicit tracks. Auto-placement no longer
   decides where they go, so a stray item cannot displace them; it would take
   its own row rather than pushing the text into the 22px column.

   `min-width: 0` overrides a grid item's automatic minimum size, so the text
   track cannot be collapsed below its content by some future constraint.
   `content: none` neutralises any pseudo-element that gets reintroduced here.
   Deliberately belt-and-braces: this defect shipped once and passed every
   automated gate. */
.c-speclist li > svg  { grid-column: 1; grid-row: 1; }
.c-speclist li > span { grid-column: 2; grid-row: 1; min-width: 0; }
.c-speclist li::before, .c-speclist li::after { content: none; }

.c-speclist svg { width: 20px; height: 20px; color: var(--emerald-600); margin-top: .15em; }
.c-applist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.c-applist li { border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: .5em 1em; font-size: var(--step--1); color: var(--color-ink); background: var(--white); }

/* panel wrapper for boxed sections inside prose flow */
.c-panel { background: var(--color-surface-sunken); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); }
.c-panel--dark { background: var(--navy-900); border-color: var(--navy-700); color: var(--navy-300); }
.c-panel--dark h3 { color: var(--white); }

/* ---- Internal-linking blocks ------------------------------------------- */
.c-linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-md); }
.c-linkcard { display: grid; gap: var(--space-2xs); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-lg); background: var(--white);
  text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
.c-linkcard:hover { border-color: var(--emerald-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.c-linkcard__name { font-weight: 650; color: var(--color-ink); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.c-linkcard__name svg { width: 18px; height: 18px; color: var(--emerald-600); flex: none; }
.c-linkcard__sum { font-size: var(--step--1); color: var(--color-muted); line-height: 1.5; }
.c-linkcard__cat { font: 600 .68rem/1 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--emerald-700); }

/* compact aside link list */
/* Was a single-column grid, so a 40-item service list became a 2,400px wall —
   a quarter of the city page. auto-fill lets it flow into columns when the
   container is wide and collapse back to one in a narrow sidebar. Every link
   is preserved; only the shape changes. */
.c-linklist { list-style: none; padding: 0; display: grid; gap: var(--space-2xs) var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.c-linklist a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: .45em .7em; border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none;
  font-size: var(--step--1); border: 1px solid transparent; line-height: 1.35; }
.c-linklist a:hover { background: var(--color-surface-sunken); border-color: var(--color-border); }

/* tel: links must hold WCAG AA in EVERY state, not just at rest.
   The broad `a:hover { color: var(--emerald-500) }` in base.css measures 3.16:1
   on white, so the light-surface phone link (contact / request-quote) dropped
   from 6.53:1 at rest to 3.16:1 on hover — a fail. Pin it to emerald-600
   (5.14:1) so hover still gives a colour shift AND holds AA.
   Scoped deliberately: the header phone has its own :hover (--color-ink on white)
   and the footer uses emerald-300 on navy (8.36:1). Both are healthy — untouched. */
.c-linklist a[href^="tel:"]:hover,
.c-linklist a[href^="tel:"]:focus-visible,
.c-linklist a[href^="tel:"]:active,
.c-field__note a[href^="tel:"]:hover,
.c-field__note a[href^="tel:"]:focus-visible,
.c-field__note a[href^="tel:"]:active,
.c-prose a[href^="tel:"]:hover,
.c-prose a[href^="tel:"]:focus-visible,
.c-prose a[href^="tel:"]:active {
  color: var(--emerald-600);
}
.c-linklist a svg { width: 15px; height: 15px; color: var(--emerald-600); flex: none; }

/* ---- Content hubs (resource / academy / faq cards) --------------------- */
.c-hubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,300px),1fr)); gap: var(--space-lg); }
.c-hubcard { display: grid; gap: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-xl); background: var(--white); text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s; }
.c-hubcard:hover { border-color: var(--emerald-500); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.c-hubcard__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md);
  background: var(--color-accent-tint); color: var(--emerald-700); }
.c-hubcard__icon svg { width: 24px; height: 24px; }
.c-hubcard__title { font-size: var(--step-2); color: var(--color-ink); letter-spacing: -.01em; }
.c-hubcard__body { color: var(--color-muted); font-size: var(--step-0); line-height: 1.6; }
.c-hubcard__count { font: 600 var(--step--1)/1 var(--font-mono, monospace); color: var(--emerald-700); }

/* guide list row */
.c-guiderow { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-lg); align-items: center;
  padding: var(--space-lg) 0; border-top: 1px solid var(--color-border); text-decoration: none; }
.c-guiderow:hover .c-guiderow__title { color: var(--emerald-700); }
.c-guiderow__badge { font: 600 .68rem/1 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase;
  color: var(--emerald-700); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: .5em .8em; }
.c-guiderow__title { font-size: var(--step-1); color: var(--color-ink); }
.c-guiderow__sum { font-size: var(--step--1); color: var(--color-muted); margin-top: .25em; }
.c-guiderow__more { color: var(--emerald-600); }
.c-guiderow__more svg { width: 20px; height: 20px; }
@media (max-width: 620px) { .c-guiderow { grid-template-columns: 1fr; gap: var(--space-sm); } .c-guiderow__more { display: none; } }

/* ---- FAQ list (platform) ----------------------------------------------- */
.c-faqcat { margin-top: var(--space-2xl); }
.c-faqcat > h2 { font-size: var(--step-3); }

/* ---- HTML sitemap ------------------------------------------------------- */
.c-sitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,260px),1fr)); gap: var(--space-2xl); }
.c-sitemap section h2 { font-size: var(--step-1); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--emerald-600); }
.c-sitemap ul { list-style: none; padding: 0; margin-top: var(--space-md); display: grid; gap: var(--space-2xs); }
.c-sitemap a { color: var(--color-body); text-decoration: none; font-size: var(--step--1); }
.c-sitemap a:hover { color: var(--emerald-700); }

/* ---- Legal / plain content --------------------------------------------- */
.c-legal { max-width: var(--container-text); }
.c-legal h2 { font-size: var(--step-2); margin-top: var(--space-2xl); }
.c-legal h3 { font-size: var(--step-1); margin-top: var(--space-xl); }
.c-legal p, .c-legal li { color: var(--color-body); line-height: 1.7; margin-top: var(--space-md); }
.c-legal ul { padding-left: 1.2em; }
.c-legal__updated { color: var(--color-muted); font-size: var(--step--1); }

/* status / thank-you / 404 */
.c-status { text-align: center; max-width: 56ch; margin-inline: auto; padding-block: var(--space-4xl); }
.c-status__code { font: 800 clamp(4rem,12vw,8rem)/1 var(--font-display, sans-serif); color: var(--emerald-600); letter-spacing: -.04em; }
.c-status h1 { margin-top: var(--space-md); }
.c-status p { color: var(--color-muted); font-size: var(--step-1); margin-top: var(--space-md); }
.c-status .cluster { justify-content: center; margin-top: var(--space-xl); }

/* ---- City finder / index ----------------------------------------------- */
.c-cityfinder { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl);
  position: sticky; top: 0; background: var(--color-surface); padding-block: var(--space-md); z-index: 5; }
.c-cityfinder__search { display: flex; align-items: center; gap: var(--space-sm);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: .6em 1.1em; max-width: 520px; }
.c-cityfinder__search svg { width: 20px; height: 20px; color: var(--color-muted); flex: none; }
.c-cityfinder__search input { border: 0; outline: 0; font-size: var(--step-0); width: 100%; background: transparent; color: var(--color-ink); }
.c-cityfinder__tabs { display: inline-flex; gap: var(--space-2xs); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 4px; width: max-content; }
.c-cityfinder__tab { border: 0; background: transparent; padding: .45em 1em; border-radius: var(--radius-pill);
  font: 600 var(--step--1)/1 inherit; color: var(--color-muted); cursor: pointer; }
.c-cityfinder__tab.is-active { background: var(--navy-900); color: var(--white); }
.c-azjump { display: flex; flex-wrap: wrap; gap: 2px; }
.c-azjump a { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: var(--radius-sm);
  color: var(--emerald-700); font: 600 var(--step--1)/1 var(--font-mono, monospace); text-decoration: none; border: 1px solid var(--color-border); }
.c-azjump a:hover { background: var(--emerald-600); color: var(--white); border-color: var(--emerald-600); }
/* The locations directory renders 101 groups (26 A-Z + 77 by county). At
   --space-2xl each, the per-group margins alone were ~3,000px of the page —
   more than the links themselves. Tighten the gap; the heading rule already
   provides the visual separation. */
.c-letter { margin-bottom: var(--space-lg); scroll-margin-top: 120px; }
.c-letter__head { font-size: var(--step-2); padding-bottom: var(--space-2xs); margin-bottom: var(--space-2xs); border-bottom: 2px solid var(--emerald-600); }
/* Directory density. 285 cities x 76px in 5 columns ran to 4,529px — a third of
   the whole pillar page, and it read as a wall. Same 285 links, tighter rows and
   narrower columns: ~6 columns of ~48px rows. Nothing is removed or truncated. */
.c-citylist { list-style: none; padding: 0; margin-top: var(--space-md);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,190px),1fr)); gap: 0 var(--space-md); }
.c-citylist a { display: flex; flex-direction: column; padding: .3em .5em; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--color-ink); border: 1px solid transparent; line-height: 1.25; }
.c-citylist a:hover { background: var(--color-surface-sunken); border-color: var(--color-border); }
.c-citylist a span { font-size: 0.78rem; color: var(--color-muted); line-height: 1.2; }
.c-noresults { text-align: center; color: var(--color-muted); padding: var(--space-2xl); }

/* ---- County matrix groups (service x city coverage) --------------------- */
.c-matrixgroup { margin-top: var(--space-2xl); }
.c-matrixgroup__head { font-size: var(--step-1); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border); }
.c-matrixgroup__head a { color: var(--color-ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-xs); }
.c-matrixgroup__head a:hover { color: var(--emerald-700); }
.c-matrixgroup__head svg { width: 18px; height: 18px; color: var(--emerald-600); }
.c-matrixgroup .c-citylist { margin-top: var(--space-md); }


/* ---- Mid-page CTA rail --------------------------------------------------
   Punctuates long directory pages. Deliberately lighter than .c-cta: a rule,
   a line of text, one button. It should feel like a signpost, not a billboard. */
.c-ctarail {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-md);
  margin-block: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.c-ctarail__text {
  margin: 0; font-family: var(--font-display); font-size: var(--step-1);
  font-weight: var(--weight-semibold); color: var(--color-ink);
  letter-spacing: var(--tracking-tight); max-width: 46ch;
}
@media (max-width: 620px) {
  .c-ctarail { flex-direction: column; align-items: flex-start; padding: var(--space-lg); }
  .c-ctarail__text { font-size: var(--step-0); }
}


/* ---- County hub: service x city matrix density -------------------------
   40 service groups stacked single-file ran 7,456px — 53% of the county page,
   and it read as an endless scroll. Flow the groups into columns instead.

   Scoped with :has() so no template markup changes: the rule only binds to a
   container that actually holds matrix groups. Browsers without :has() keep the
   single-column stack, which is the current (working) layout — so this degrades
   to exactly what shipped, never to something broken. */
.container:has(> .c-matrixgroup) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 0 var(--space-2xl);
  align-items: start;
}
/* Headings and the CTA rails stay full-width inside that grid. */
.container:has(> .c-matrixgroup) > .section-head,
.container:has(> .c-matrixgroup) > .c-ctarail,
.container:has(> .c-matrixgroup) > .c-cta { grid-column: 1 / -1; }

/* Inside a narrower column the city links need a smaller minimum, or they'd
   drop to a single file and undo the gain. */
.c-matrixgroup .c-citylist {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}


/* ---- Quote page: "what happens next" process ---------------------------
   Left column of the request-quote / contact split. Numbered counters rather
   than list-style markers, so the number can be styled without a pseudo-element
   inside a grid item (see the .c-speclist incident in ARCHITECTURE §23.1 —
   these li are BLOCK, not grid, so ::before is safe here). */
.c-process {
  list-style: none; padding: 0; margin: var(--space-md) 0 0;
  counter-reset: step;
}
.c-process li {
  counter-increment: step;
  position: relative;
  padding-left: calc(var(--space-xl) + var(--space-2xs));
  padding-bottom: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: 1.55;
}
.c-process li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-accent); color: var(--white);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: var(--weight-semibold);
}
/* Connector line between the step markers. */
.c-process li:not(:last-child)::after {
  content: ""; position: absolute; left: 12.5px; top: 30px; bottom: 4px;
  width: 1px; background: var(--color-border);
}
.c-process li strong {
  display: block; color: var(--color-ink); font-family: var(--font-display);
  font-size: var(--step-0); letter-spacing: var(--tracking-tight);
  margin-bottom: 2px;
}

.c-assurances {
  list-style: none; padding: var(--space-md) 0 0; margin: var(--space-md) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md);
}
.c-assurances li {
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--step--1); color: var(--color-muted);
}
.c-assurances svg { color: var(--emerald-600); flex: none; }


/* ---- animations.css ---- */
/* ==========================================================================
   ANIMATIONS — scroll-reveal + micro-interactions.
   Progressive enhancement: markup is fully visible without JS. The .is-reveal
   hook only hides content AFTER JS confirms it can restore it (js-ready flag).
   All animation is suppressed under prefers-reduced-motion (see tokens.css).
   ========================================================================== */

/* JS sets .js-ready on <html> once the observer is wired. Only then do we
   allow reveal elements to start hidden — never penalise no-JS users. */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Counter target — number animates via JS from 0. */
[data-count] { font-variant-numeric: tabular-nums; }

/* Subtle hover lift utility reused by interactive tiles. */
.hover-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }


/* ---- utilities.css ---- */
/* ==========================================================================
   UTILITIES — single-purpose helpers. Kept minimal on purpose.
   ========================================================================== */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-center { text-align: center; }
.u-mono { font-family: var(--font-mono); }
.u-accent { color: var(--color-accent); }
.u-ink { color: var(--color-ink); }
.u-muted { color: var(--color-muted); }
.u-measure { max-width: var(--container-text); }
.u-no-wrap { white-space: nowrap; }
.u-mt-0 { margin-top: 0; }
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }
.u-mb-0 { margin-bottom: 0; }
.u-fill { width: 100%; }
.u-flow > * + * { margin-top: 1em; }