/* ── Per-client brand layer — Landscape Artistry LLC ─────────────────────────────
   Brand only; structure + standards live in the synced components.css (never fork it).
   GC brand_colors_v2: Green #5D7824 (primary) · Gold #997535 (secondary) · Black #000000 ·
   Red #A82421 · #1C1B19. Buck asked for black / green / gold with the dark logo
   (onboarding call 2026-10-12), so the header, footer and dark bands are near-black and
   the logo (white lettering + gold rule) reads as-is. Gold is lightened to #C9A65E for
   text on dark so it clears 4.5:1; the raw #997535 is used only for rules/borders.
   Fonts: the standard Growth stack from base.css (no client font override, 2026-10-17). */

body.theme-growth {
  /* Structural ramp: darkest steps go near-black (dark sections, footer, overlays),
     fills stay in the logo's palm green. */
  --color-green-900: #141311;
  --color-green-800: #1c1b19;
  --color-green-700: #5d7824;  /* brand green = primary fills (white text 5.1:1) */
  --color-green-600: #6e8b2d;
  --color-green-100: #f1f3e8;
  --color-primary:   #5d7824;

  --color-accent: #c9a65e;     /* gold for text/accents on dark surfaces */
  --color-bg: #f6f4ee;         /* warm stone for alternating light sections */
  --color-ink: #1c1b19;
}


/* ── Dark header (white nav, gold accents) ───────────────────────────────────── */
body.theme-growth .site-header { background: rgba(20, 19, 17, 0.97); border-bottom: 1px solid rgba(201, 166, 94, 0.28); }
body.theme-growth .primary-nav a,
body.theme-growth .primary-nav > ul > li > a { color: #fff; }
body.theme-growth .primary-nav button,
body.theme-growth .primary-nav .has-dropdown > button { color: #c9a65e; }
body.theme-growth .primary-nav > ul > li > a::after { background: #c9a65e; }
body.theme-growth .primary-nav > ul > li > a:focus-visible { color: #fff; }
body.theme-growth .header-phone,
body.theme-growth .header-phone strong { color: #fff; }
body.theme-growth .header-phone span { color: #c9a65e; }
body.theme-growth.nav-open .site-header { background: #141311; }
/* mobile call + hamburger boxes: green boxes with white glyphs read on the dark bar */
body.theme-growth .nav-toggle,
body.theme-growth .header-call-btn { background: #5d7824; }
/* dropdown panels and the mobile overlay stay white; keep their links dark */
body.theme-growth .primary-nav .dropdown a { color: var(--color-ink); }
@media (max-width: 980px) {
  body.theme-growth .primary-nav a,
  body.theme-growth .primary-nav > ul > li > a { color: var(--color-ink); }
  body.theme-growth .primary-nav button,
  body.theme-growth .primary-nav .has-dropdown > button { color: #5d7824; }
}

/* ── Logo: header uses the wordmark (logo-wordmark.png); footer + schema use
      the full illustrated mark (logo-primary.png). Multi-colour: never white-wash. ───── */
body.theme-growth .brand-logo--footer { filter: none; height: 120px; }
@media (min-width: 981px) {
  body.theme-growth .site-header .brand-logo { height: 58px; width: auto; object-fit: contain; }
}
@media (max-width: 980px) {
  body.theme-growth .site-header .brand-logo { height: 38px; width: auto; object-fit: contain; }
  body.theme-growth .brand-logo--footer { height: 110px; }
  /* The shared 40px gutter crowds the centered wordmark at 320px. Keep both
     44px controls near the outer safe edges without putting them off-screen. */
  body.theme-growth .site-header > .container.header-inner {
    padding-left: max(clamp(12px, 2.5vw, 24px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(12px, 2.5vw, 24px), env(safe-area-inset-right, 0px));
  }
  /* Template bug (seen in WebKit on master, True North, Greenz): the open menu overlay
     (z-index 105 inside the header's stacking context) paints over the logo, call button
     and the close X, so the menu can only be left by tapping a link. Lift the bar items. */
  body.theme-growth .site-header .brand,
  body.theme-growth .header-call-btn,
  body.theme-growth .nav-toggle { position: relative; z-index: 110; }
  /* keep a dark bar behind them while the white overlay is open (white logo lettering) */
  body.theme-growth.nav-open .site-header::before {
    content: ""; position: absolute; inset: 0; z-index: 106;
    background: #141311; border-bottom: 1px solid rgba(201, 166, 94, 0.28);
  }
}
/* At extreme narrow/zoomed widths, preserve 8px between each button and logo. */
@media (max-width: 300px) {
  body.theme-growth .site-header .brand-logo {
    max-width: calc(100vw - 128px); /* 2 × (44px button + 12px edge + 8px gap) */
    height: auto;
    max-height: 42px;
  }
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
body.theme-growth .btn-primary { background: #5d7824; color: #fff; }
body.theme-growth .btn-primary:hover { background: #4a601c; color: #fff; }
body.theme-growth .primary-nav .nav-cta .btn-primary { background: #5d7824; color: #fff; }

/* ── Accents ────────────────────────────────────────────────────────────────── */
body.theme-growth .eyebrow,
body.theme-growth .kicker { color: #5d7824; }
body.theme-growth .hero .eyebrow,
body.theme-growth .final-cta .eyebrow,
body.theme-growth .eyebrow-light { color: #c9a65e; }
body.theme-growth ::selection { background: #c9a65e; color: #1c1b19; }

/* the template hardcodes a mint green on dark surfaces; swap it for brand gold */
body.theme-growth .hero-title-location,
body.theme-growth .city-list-more a { color: #c9a65e; }
body.theme-growth .city-list li::before { background: #c9a65e; }
body.theme-growth .site-footer a:hover { color: #c9a65e; }

/* section-heading rule = a thin gold line, like the rules on the logo */
body.theme-growth .with-rule { border-bottom-color: rgba(153, 117, 53, 0.55); }

/* closing CTA card: near-black with a gold edge */
body.theme-growth .cta-panel {
  background: linear-gradient(180deg, #24221f 0%, #171614 100%);
  border: 1px solid rgba(201, 166, 94, 0.45);
  box-shadow: 0 30px 70px -42px rgba(0, 0, 0, 0.8);
}

/* ── Image-section backgrounds ────────────────────────────────────────────────
   Real photos go in the named slots; until a slot has a photo, these near-black
   gradients back it (never remote stock — prototype-images.css never ships). */
body.theme-growth .hero--image-overlay {
  background: linear-gradient(110deg, rgba(20, 19, 17, 0.9) 0%, rgba(20, 19, 17, 0.62) 55%, rgba(20, 19, 17, 0.35) 100%), #1c1b19;
  background-size: cover; background-position: center;
}
body.theme-growth .final-cta {
  background-color: #1c1b19;
  background-size: cover; background-position: center;
}
body.theme-growth .hero--legal,
body.theme-growth .hero--blog,
body.theme-growth .hero--blog-post,
body.theme-growth .hero--about,
body.theme-growth .hero--services,
body.theme-growth .hero--service-page,
body.theme-growth .hero--service-areas,
body.theme-growth .hero--service-area-page,
body.theme-growth .hero--gallery,
body.theme-growth .hero--contact {
  background: linear-gradient(90deg, rgba(20, 19, 17, 0.9) 0%, rgba(20, 19, 17, 0.6) 60%), #1c1b19;
  background-size: cover; background-position: center;
}
body.theme-growth .areas-section { background: var(--color-bg); }

/* ── Blog empty state (no published articles yet) ──────────────────────────── */
body.theme-growth .empty-state {
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: 3rem 2rem;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(28, 27, 25, 0.1);
  border-radius: 18px;
  box-shadow: 0 24px 60px -36px rgba(28, 27, 25, 0.45);
}
body.theme-growth .empty-state-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  border-radius: 16px;
  background: rgba(93, 120, 36, 0.12);
  color: #5d7824;
}
body.theme-growth .empty-state-icon svg { width: 30px; height: 30px; }
body.theme-growth .empty-state h3 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 0 0 .75rem; }
body.theme-growth .empty-state p { margin: 0 auto 1.75rem; max-width: 48ch; }
body.theme-growth .empty-state .button-row { justify-content: center; }

/* ── Homepage brand tokens (2026-10-17) ──────────────────────────────────────
   Homepage palette. Interior pages keep the tokens above until the homepage is approved
   and rolled out. */
:root {
  --bg: #0b0f0a;        /* page */
  --surface: #141a12;   /* cards */
  --raised: #1b2318;    /* hover, active */
  --line: #2a3326;      /* borders, pattern strokes */
  --fg: #e9ede4;        /* text */
  --muted: #a3ad9a;     /* secondary text */
  --brand: #5d7824;     /* GC primary: buttons (white text 5.1:1) */
  --leaf: #8db255;      /* links */
  --gold: #c9a55a;      /* eyebrows, stars, small accents */
  /* Light + mid tones drawn from the logo (2026-10-17): Florida sand, palm olive, bromeliad red */
  --sand: #f3ede0;      /* light section */
  --cream: #fbf8f1;     /* light cards, lightest section */
  --sage: #e5eadb;      /* alternate light section */
  --ink: #17200f;       /* text on light */
  --ink-muted: #4d5544; /* secondary text on light */
  --rule: #d9cfb8;      /* borders on light */
  --olive: #2b3616;     /* mid section start */
  --palm: #45561f;      /* mid section end */
  --gold-ink: #7a6127;  /* gold text on light (5:1 on sand) */
  --bromeliad: #a82421; /* GC accent red: tiny accents only */
}

/* Header (2026-10-17): logo, centred nav and phone sit in a centred 1400px row (not edge to edge), so
   the logo and phone stay close to the menu. No quote button in the desktop bar; larger nav + phone.
   Footer: template structure (logo row, Contact / Services / Our Company / CTA card), links in --leaf. The CTA card
   carries the homepage's "Let's Connect and Collaborate" band (photo-backed), per Honey 2026-10-17. Sitewide. */
@media (min-width: 981px) {
  body.theme-growth .site-header > .container.header-inner { max-width: 1400px; margin-inline: auto; padding-inline: 2rem; padding-block: .9rem; min-height: 96px; gap: 2rem; }
  body.theme-growth .primary-nav > ul > li > a { color: var(--fg); font-size: 1.06rem; font-weight: 600; white-space: nowrap; }
  body.theme-growth .primary-nav > ul > li > a::after { background: var(--gold); }
  body.theme-growth .primary-nav .has-dropdown > button { color: var(--gold); }
  body.theme-growth .primary-nav .dropdown, body.theme-growth .primary-nav .dropdown::before { background: var(--surface); border-color: var(--line); }
  body.theme-growth .primary-nav .dropdown a { color: var(--fg); font-size: 1rem; }
  body.theme-growth .primary-nav .dropdown a:hover, body.theme-growth .primary-nav .dropdown a:focus-visible { background: var(--raised); color: var(--leaf); }
  body.theme-growth .header-end { display: flex; align-items: center; justify-content: flex-end; }
  body.theme-growth .header-phone-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
  body.theme-growth .header-phone-link svg { width: 20px; height: 20px; flex: none; }
  body.theme-growth .header-phone-link:hover { color: var(--fg); }
}
@media (min-width: 981px) and (max-width: 1180px) {
  body.theme-growth .site-header > .container.header-inner { gap: 1rem; padding-inline: 1.25rem; }
  body.theme-growth .site-header .brand-logo { height: 46px; }
  body.theme-growth .primary-nav > ul > li > a { padding-inline: .5rem; font-size: 1rem; }
  body.theme-growth .header-phone-link { font-size: 1.05rem; }
}
@media (max-width: 980px) { body.theme-growth .header-end { display: none; } }
body.theme-growth .site-footer { background: var(--bg); border-top: 1px solid var(--line); }
body.theme-growth .site-footer h2 { color: var(--fg); }
body.theme-growth .footer-top { border-bottom: 0; padding-bottom: .5rem; gap: 1.5rem; }
body.theme-growth .site-footer .social-list a { color: var(--gold); background: rgba(201, 165, 90, .12); }
body.theme-growth .site-footer .social-list a:hover { color: var(--fg); background: rgba(201, 165, 90, .24); }
body.theme-growth .site-footer .footer-list { color: var(--muted); }
body.theme-growth .site-footer .footer-list a, body.theme-growth .site-footer .footer-bottom nav a { color: var(--leaf); }
body.theme-growth .site-footer .footer-list a:hover, body.theme-growth .site-footer .footer-bottom nav a:hover { color: var(--fg); }
body.theme-growth .site-footer .footer-cta { display: grid; justify-items: start; align-content: start; gap: .7rem; padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: 18px; border: 1px solid rgba(201, 165, 90, .4);
  background: linear-gradient(150deg, rgba(17, 24, 11, .93), rgba(36, 46, 18, .9) 55%, rgba(58, 73, 26, .88)); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); }
body.theme-growth .site-footer .footer-cta-eyebrow { margin: 0; color: var(--gold); font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
body.theme-growth .site-footer .footer-cta h2 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
body.theme-growth .site-footer .footer-cta p:not(.footer-cta-eyebrow) { margin: 0; color: #e5e9df; line-height: 1.6; font-size: .95rem; }
body.theme-growth .site-footer .footer-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
body.theme-growth .site-footer .footer-cta .btn { min-height: 46px; padding: .65rem 1.1rem; margin: 0; }
body.theme-growth .site-footer .footer-cta-call { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
body.theme-growth .site-footer .footer-cta-call:hover { border-color: var(--gold); color: var(--gold); }
body.theme-growth .footer-bottom { border-top-color: var(--line); }
/* Desktop nav: keep each item (and a dropdown's chevron) on one line at laptop widths. */
@media (min-width: 981px) {
  body.theme-growth .primary-nav > ul { flex-wrap: nowrap; }
  body.theme-growth .primary-nav > ul > li { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
}
/* Blog articles (2026-10-17): align the breadcrumb + hero with the article column, and keep the
   sidebar estimate card readable (the shared .sidebar-callout--dark link rule turns the light
   button's text white and adds a phone glyph). */
body.theme-growth .breadcrumb-nav > .container,
body.theme-growth .hero--blog-post > .container { --container: 1200px; }
body.theme-growth .hero--blog-post::before { background: linear-gradient(90deg, rgba(11, 15, 10, .92), rgba(17, 24, 11, .8) 50%, rgba(23, 32, 15, .55)); }
body.theme-growth .blog-article-cta { background: var(--bg); border: 1px solid rgba(201, 165, 90, .4); }
body.theme-growth .blog-article-cta span { color: var(--gold); }
body.theme-growth .blog-article-cta h2 { color: #fff; }
body.theme-growth .blog-article-cta .btn-light { display: inline-flex; margin-top: 1rem; color: var(--color-ink); font-size: 1rem; letter-spacing: 0; line-height: 1.1; }
body.theme-growth .blog-article-cta .btn-light::before { content: none; }
body.theme-growth .blog-article-cta .text-link-light { color: var(--gold); }

/* Blog images (2026-10-17): the template styled these as background-image divs; the generated pages use
   <img> with width/height attributes, so without object-fit the photos stretched to the box height. */
body.theme-growth img.article-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9 !important; object-fit: cover; }
body.theme-growth img.featured-article-image { display: block; align-self: stretch; width: 100%; height: auto; min-height: 390px; object-fit: cover; }
body.theme-growth .blog-card-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
body.theme-growth img.blog-feature-image { height: auto; object-fit: cover; }
@media (max-width: 980px) {
  body.theme-growth img.featured-article-image { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
/* Header (Honey, 2026-10-20): phone number with a "Call us today" line; no quote button. Between 981 and
   1180px the number shows as a round icon (aria-label keeps the number) so the row fits. */
@media (min-width: 981px) and (max-width: 1180px) {
  body.theme-growth .header-phone-link .header-phone-text { display: none; }
  body.theme-growth .header-phone-link { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(201, 165, 90, .5); border-radius: 50%; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  body.theme-growth .primary-nav > ul > li > a { padding-inline: .35rem; font-size: .95rem; }
  body.theme-growth .site-header .brand-logo { height: 40px; }
}
/* Inner-page content width (2026-10-20): the theme's 1440px container left hero and body text 16px from the
   screen edge on laptops. 1336px lines content up with the logo in the 1400px header row. */
body.theme-growth { --container: 1336px; }
/* "Call us today" line under the header phone number (Honey, 2026-10-20) */
body.theme-growth .header-phone-text { display: grid; line-height: 1.1; }
body.theme-growth .header-phone-cta { margin-top: .2rem; color: var(--fg); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
body.theme-growth .header-phone-link:hover .header-phone-cta { color: var(--gold); opacity: 1; }
/* Closing CTA panels: call button in gold so it reads on the dark panel (Honey, 2026-10-20: phone on every CTA) */
body.theme-growth .cta-panel .btn-outline-light { color: var(--gold); border-color: rgba(201, 165, 90, .75); background: transparent; }
body.theme-growth .cta-panel .btn-outline-light:hover, body.theme-growth .cta-panel .btn-outline-light:focus-visible { background: var(--gold); color: #17200f; border-color: var(--gold); }
/* Contrast fixes (2026-10-20 audit): links on the green service-areas card are white (5.1:1 on #5d7824). */
body.theme-growth .sidebar-callout--areas .city-list-more a,
body.theme-growth .sidebar-callout--areas .text-link-light,
body.theme-growth .about-areas-card .city-list-more a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
/* Mobile header breathing room (Honey, 2026-10-20): more space above/below the bar and wider side gutters. */
@media (max-width: 980px) {
  body.theme-growth .site-header > .container.header-inner {
    padding-top: max(.85rem, env(safe-area-inset-top, 0px)); padding-bottom: .85rem;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}
@media (max-width: 340px) {
  body.theme-growth .site-header > .container.header-inner { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
}
/* Mobile alignment rule (Honey, 2026-10-20), applied site-wide at <=980px:
   1. Reading text (eyebrows, headings, paragraphs) is LEFT-aligned in every section.
      The only centered page is /confirmation/ (a single short message).
   2. Buttons span the full width with centered labels.
   3. A phone number inside a CTA group is a full-width outlined "Call" button
      directly under the primary button, never loose text. */
@media (max-width: 980px) {
  body.theme-growth main .section-heading.centered { text-align: left; margin-inline: 0; justify-items: start; }
  body.theme-growth main .section-heading.centered .eyebrow { justify-content: flex-start; }
  body.theme-growth main .section-heading.centered .section-subtitle { margin-inline: 0; }
  body.theme-growth .impact-phone-cta { justify-items: stretch; text-align: left; }
  body.theme-growth .impact-phone-cta .eyebrow { justify-content: flex-start; }
  body.theme-growth .impact-phone-cta a { width: 100%; }
  body.theme-growth .city-service-sidebar .quote-card h2,
  body.theme-growth .city-service-sidebar .quote-card > p { text-align: left; }
  body.theme-growth main .button-row { flex-direction: column; align-items: stretch; }
  body.theme-growth main .button-row .btn, body.theme-growth main .service-actions .btn { width: 100%; justify-content: center; text-align: center; }
  body.theme-growth main .service-actions { flex-direction: column; align-items: stretch; }
}

/* Anchor jumps (e.g. #contact-form) clear the sticky header */
html { scroll-padding-top: 118px; }
.hub-service, .city-core-service { scroll-margin-top: 0; }
@media (max-width: 980px) { html { scroll-padding-top: 88px; } }