/* ── Per-client brand layer — Complete Lawn Service, Inc. ──────────────────────────
   Brand (Ground Control brand_colors_v2, confirmed on the 2026-07-15 onboarding call):
     Dark Green #00703C (primary) · Crimson #A30046 (secondary/accent)
   Both come straight off the logo. No clamp needed — white on #00703C is 6.2:1 and
   white on #A30046 is 8.0:1, so both clear WCAG AA as large fills.

   Typography: Ground Control carries no brand_typography for this client, so the
   template default (Inter) stands. No self-hosted font files are needed (D30).

   BRAND ONLY. Structure and standards live in the synced components.css — never fork it. */

body.theme-growth {
  /* Type matches the live site at completelawnserve.com (team instruction, 2026-08-18).
     That page uses the native system stack and loads no webfonts at all:
       -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,Helvetica,Arial,sans-serif
     One stack for headings and body, exactly as production does it.

     This REPLACES D30 (self-hosted Bitter + Public Sans). Keeping the note because the
     reasoning still matters if anyone reopens it: Bitter was the only display face not
     already used elsewhere in the L&L fleet, so the site loses that point of difference —
     but a plain system sans sits closer to the `welcoming_conversational` tone tag in
     Ground Control than a slab serif did, and it drops 128KB of font downloads. The woff2
     files stay in assets/fonts/ so this is a one-line revert. */
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;

  /* Green ramp built around the brand primary. 700 is the true brand hex. */
  /* Green ramp taken from the live site at completelawnserve.com (team instruction,
     2026-08-18), which defines it as --dark / --green-dark / --green / --green-light.
     #00703C is the brand primary and was already correct; the surrounding steps were ours
     and are now theirs. Contrast checked before adopting: white holds 12.04:1 on #003F2A
     and 9.10:1 on #00542E. */
  --color-green-900: #003F2A;  /* prod --dark      — footer, dark cards, image overlays */
  --color-green-800: #00542E;  /* prod --green-dark */
  --color-green-700: #00703C;  /* prod --green     — brand Dark Green = primary fills */
  --color-green-600: #168A58;  /* prod --green-light */
  --color-green-100: #e6f2ec;  /* light tint for chips, hovers, soft bands — no prod equivalent */

  /* Neutrals aligned to production's scale. Its greys are green-tinted rather than pure. */
  --color-ink:  #2c3127;       /* prod --gray-800 — 13.33:1 on white */
  --color-line: #e2e6dc;       /* prod --gray-200 */
  --color-bg:   #f8f9f6;       /* prod --off-white */
  /* NOT adopted: prod --gray-600 #6b7565 for --color-muted. It measures 4.82:1 on white and
     4.56:1 on the tinted background — technically AA, but our current #212121 is 15:1, and
     dropping secondary text that far would walk straight back into the "text is too light"
     pass the team asked for on 2026-08-14. Flagged rather than applied. */
  --color-primary:   #00703C;

  --color-accent: #A30046;     /* Crimson — thin accent only, never a large fill */

  --shadow-soft: 0 24px 70px rgba(0, 49, 26, .14);
  --shadow-card: 0 18px 45px rgba(0, 49, 26, .12);
}

/* Section-heading rule picks up the logo's crimson — the one place the secondary
   colour carries real weight, matching how the mark itself uses it. */
body.theme-growth .with-rule { border-bottom-color: var(--color-accent); }

/* Keep text selection visible with a soft green brand tint, never the crimson accent. */
body.theme-growth ::selection {
  background: #d7eadf;
  color: #173b2a;
}
body.theme-growth ::-moz-selection {
  background: #d7eadf;
  color: #173b2a;
}

/* Eyebrows / kickers: brand green on light sections, white on dark/photo sections
   (crimson on a photo overlay reads muddy, so it stays off image bands). */
body.theme-growth .eyebrow,
body.theme-growth .kicker { color: var(--color-green-700); }
body.theme-growth .hero .eyebrow,
body.theme-growth .final-cta .eyebrow,
body.theme-growth .eyebrow-light { color: #ffffff; }

/* Footer logo: the mark is green + crimson on transparent, so the shared
   brightness(0) invert(1) white-wash from components.css is correct here —
   it flattens both colours to a clean white lockup on the dark footer.
   (The source PNG shipped from Ground Control had an opaque WHITE background;
   it was keyed to alpha during the build so this filter works. If the logo is ever
   re-exported from GC, re-key it or the footer renders a solid white rectangle.) */
body.theme-growth .brand-logo--footer { height: 58px; }

/* Closing CTA band — colour fallback ONLY.
   The photo is set INLINE on each page's `.final-cta` section so every page owns its
   own `<page>--cta.jpg` slot. Do not put a background-image back here: the image
   manifest generator ignores `assets/`, so a photo defined in this file is invisible
   to the Site Image Manager and the team cannot swap it (that was the bug, 2026-08-13). */
body.theme-growth .final-cta {
  background-color: #002815;
  background-size: cover;
  background-position: center;
}

/* Image-section fallbacks (deep brand green) — pages set their real photos inline;
   these only show if a photo is missing, so nothing ever renders pure white. */
body.theme-growth .hero--image-overlay,
body.theme-growth .hero--legal,
body.theme-growth .hero--media-room,
body.theme-growth .hero--blog,
body.theme-growth .hero--blog-post {
  background-color: #00311a;
}

/* Accessibility: in-text footer links must not rely on colour alone. */
body.theme-growth .site-footer p a { text-decoration: underline; text-underline-offset: 2px; }

/* Same rule for the in-text phone link in the dark CTA panels (the 5 core service pages).
   Underlined so it does not rely on colour alone, and pinned white because base.css's
   sitewide `a:hover { color: var(--color-green-700) }` would otherwise paint it #1d6b3f on
   this near-black-green panel on hover — the same vanishing-text bug the review widget's
   button had. `a { color: inherit }` already handles the resting state. */
body.theme-growth .cta-panel p a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.theme-growth .cta-panel p a:hover,
body.theme-growth .cta-panel p a:focus-visible,
body.theme-growth .cta-panel p a:active { color: #fff; }