/* ── Per-client brand layer — True North Landscape & Design ──────────────────────
   Brand only (structure + standards live in the synced components.css; never fork it).
   Palette: primary navy #051B38, secondary gold #BF8913 (GC brand_colors_v2).
   Header background = #051B38 (navy) per client direction; logo is gold/white so it
   reads on navy as-is. Fonts: Fraunces (headings) + Inter (body) — a tasteful default
   for a premium design/build brand, pending a confirmed brand typeface. */

body.theme-growth {
  --font-body: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;

  /* Structural ramp remapped from green → NAVY (brand primary #051B38). */
  --color-green-900: #03122a;
  --color-green-800: #051B38;
  --color-green-700: #0b3058;
  --color-green-600: #14406e;
  --color-green-100: #eef2f7;
  --color-primary:   #0b3058;

  /* Brand accent (gold secondary). */
  --color-accent: #BF8913;
}

/* ── Navy footer (matches the header — components.css default #111815 was never
   brand-overridden here, unlike the header) ──────────────────────────────────── */
body.theme-growth .site-footer { background: var(--color-green-800); }

/* ── Navy header (white nav + gold accents) ─────────────────────────────────── */
body.theme-growth .site-header { background: rgba(5, 27, 56, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
/* White link text applies ONLY at the desktop width where .primary-nav sits
   inline in the navy header (>980px, matching components.css's own mobile
   breakpoint). Un-scoped, this rule's higher specificity beat components.css's
   correct mobile dark-ink color, making every mobile menu link (and the Call
   button) render as invisible white-on-white -- reported by Honey via
   screenshot, confirmed via a real headless-browser render (computed color
   was rgb(255,255,255) against a transparent/white background). */
@media (min-width: 981px) {
  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: #BF8913; }
/* animated underline + active marker → gold */
body.theme-growth .primary-nav > ul > li > a::after { background: #BF8913; }
@media (min-width: 981px) {
  body.theme-growth .primary-nav > ul > li > a:focus-visible { color: #fff; }
}
/* header phone reads light on navy */
body.theme-growth .header-phone,
body.theme-growth .header-phone strong { color: #fff; }
body.theme-growth .header-phone span { color: rgba(255, 255, 255, 0.72); }
/* keep the header navy while the mobile menu is open (overlay itself stays white) */
body.theme-growth.nav-open .site-header { background: #051B38; }
/* mobile call + hamburger boxes can't be navy-on-navy → gold boxes, navy glyphs */
body.theme-growth .nav-toggle,
body.theme-growth .header-call-btn { background: #BF8913; }
body.theme-growth .nav-toggle span:not(.sr-only) { background: #051B38; }

/* dropdown panels stay white (inherited); ensure their items remain dark on white */
body.theme-growth .primary-nav .dropdown a { color: var(--color-ink); }

/* ── Gold primary CTA (navy text) — pops on both light sections and the navy bands ─ */
body.theme-growth .btn-primary { background: #BF8913; color: #051B38; }
body.theme-growth .btn-primary:hover { background: #a5760f; color: #051B38; }
body.theme-growth .primary-nav .nav-cta .btn-primary { background: #BF8913; color: #051B38; }

/* gold accents on eyebrows / kickers */
body.theme-growth .eyebrow,
body.theme-growth .kicker { color: #BF8913; }

/* footer logo: gold/white mark already reads on the dark footer — no white-wash */
body.theme-growth .brand-logo--footer { filter: none; }

/* #AEE6B7 light-green accents → white (per client direction; that mint doesn't fit navy/gold).
   These selectors hardcode the template's green in the synced components.css; overridden here. */
body.theme-growth .hero-title-location,
body.theme-growth .city-list-more a { color: #ffffff; }
body.theme-growth .city-list li::before { background: #ffffff; }
body.theme-growth .site-footer a:hover { color: #ffffff; }

/* Closing CTA card (.cta-panel): template green → navy with a gold edge so it fits the brand. */
body.theme-growth .cta-panel {
  background: linear-gradient(180deg, #0b3058 0%, #082545 100%);
  border: 1px solid rgba(191, 137, 19, 0.5);
  box-shadow: 0 30px 70px -42px rgba(0, 0, 0, 0.75);
}

/* Closing CTA band shows the photo on EVERY page (homepage also sets it inline → the
   swappable Image Manager slot). One swap updates all CTAs. */
body.theme-growth .final-cta {
  background-image: linear-gradient(rgba(3, 18, 42, 0.88), rgba(3, 18, 42, 0.88)), url('/images/site/home--cta.jpg');
  background-size: cover;
  background-position: center;
}

/* ── Image-section backgrounds ────────────────────────────────────────────────
   True North has no site photos yet — these slots are briefed in image-manifest.json.
   Until the real photos land, back them with a deep-navy gradient (NOT remote stock;
   prototype-images.css never ships). Replace url() targets when photos arrive. */
body.theme-growth .hero--image-overlay {
  background: linear-gradient(120deg, rgba(3, 18, 42, 0.92) 0%, rgba(5, 27, 56, 0.72) 55%, rgba(11, 48, 88, 0.55) 100%), #051B38;
  background-size: cover; background-position: center;
}
/* .final-cta photo rule lives above now — home--cta.jpg landed, so the navy-only
   fallback that used to live here was removed to stop it overriding the real photo. */
body.theme-growth .hero--legal,
body.theme-growth .hero--blog,
body.theme-growth .hero--blog-post,
body.theme-growth .hero--media-room,
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--careers,
body.theme-growth .hero--contact {
  background: linear-gradient(90deg, rgba(3, 18, 42, 0.9) 0%, rgba(5, 27, 56, 0.6) 60%), #051B38;
  background-size: cover; background-position: center;
}
body.theme-growth .areas-section { background: #f4f6f9; }
body.theme-growth .areas-card--map .areas-card-content {
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--color-green-900);
}
body.theme-growth .areas-card--map .areas-card-content h3 { margin-bottom: 1.25rem; }
@media (max-width: 540px) {
  body.theme-growth .areas-card--map .city-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Blog empty state (no published articles yet) ─────────────────────────────
   Client-layer only — keeps the synced components.css untouched. A tasteful
   "new articles coming soon" card for the blog index until real posts land. */
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(5, 27, 56, 0.1);
  border-radius: 18px;
  box-shadow: 0 24px 60px -36px rgba(5, 27, 56, 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(191, 137, 19, 0.12);
  color: #BF8913;
}
body.theme-growth .empty-state-icon svg { width: 30px; height: 30px; }
body.theme-growth .empty-state h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: #051B38;
  margin: 0 0 .75rem;
}
body.theme-growth .empty-state p {
  color: #4a5a6a;
  margin: 0 auto 1.75rem;
  max-width: 48ch;
}
body.theme-growth .empty-state .button-row { justify-content: center; }

/* redeploy 2026-06-29: ensure fixed-aspect box lock is live (prior push missed the Vercel webhook) */

/* ══════════════════════════════════════════════════════════════════════════════
   VISUAL POLISH PASS (2026-07-21) — checkpoint tag `pre-design-polish-2026-07-21`
   on the commit before this change; revert to that tag to undo this whole pass.
   Two plays, adapted from the Greenz build's *technique* (not its look — no tape,
   no grain, no cream paper; this client's own navy/gold stays the palette):
   1) flat photo boxes become a framed, gallery-style print (thin white mat +
      gold hairline + layered shadow + a small alternating tilt).
   2) eyebrow accent becomes a small rounded gold mark instead of a flat rule.
   Conversion surfaces (forms/quote cards) are explicitly kept dead straight.
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1a — service/about/framed photo slots: white print mat + gold hairline + shadow. */
body.theme-growth .hub-service-image,
body.theme-growth .service-image,
body.theme-growth .about-content-image,
body.theme-growth .framed-image {
  border: 6px solid #fff;
  border-radius: 10px;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(191, 137, 19, 0.55),
    0 16px 34px rgba(3, 18, 42, 0.22),
    0 3px 9px rgba(3, 18, 42, 0.12);
  position: relative;
  transform: rotate(-0.45deg);
}
body.theme-growth .framed-image { transform: rotate(0.6deg); }
body.theme-growth .framed-image::before { content: none; }

/* alternate the lean on repeated rows so a list of cards feels placed, not stamped */
body.theme-growth .hub-service:nth-child(even) .hub-service-image,
body.theme-growth .city-core-service:nth-child(even) .hub-service-image,
body.theme-growth .article-card:nth-child(even) .article-image {
  transform: rotate(0.45deg);
}

/* 1b — gallery grid: same framed-print treatment, straightens on hover/focus. */
body.theme-growth .gallery-item {
  border: 5px solid #fff;
  border-radius: 10px;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(191, 137, 19, 0.5),
    0 12px 28px rgba(3, 18, 42, 0.18);
  transform: rotate(-0.4deg);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.theme-growth .gallery-item:nth-child(even) { transform: rotate(0.4deg); }
body.theme-growth .gallery-item:hover,
body.theme-growth .gallery-item:focus-visible {
  transform: rotate(0deg) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(191, 137, 19, 0.65),
    0 20px 44px rgba(3, 18, 42, 0.24);
}

/* 1c — never lean a conversion surface (forms/quote cards). */
body.theme-growth .contact-form-card,
body.theme-growth .quote-card,
body.theme-growth .career-form-card { transform: none; }

/* 1d — soften the lean on small screens so nothing crowds a 375px viewport. */
@media (max-width: 860px) {
  body.theme-growth .hub-service-image,
  body.theme-growth .service-image,
  body.theme-growth .about-content-image,
  body.theme-growth .framed-image { transform: rotate(-0.3deg); }
  body.theme-growth .hub-service:nth-child(even) .hub-service-image,
  body.theme-growth .city-core-service:nth-child(even) .hub-service-image { transform: rotate(0.3deg); }
}

/* 2 — eyebrow accent: reverted 2026-07-21 (the gradient pill went dark/invisible
   on navy-background sections since it isn't currentColor-based like the
   original). Eyebrows keep the plain gold 2px line from components.css. */

/* 3 — LCP guard: hero content must never sit invisible waiting on the fadeUp
   entrance animation. Under main-thread contention (form + map on the same
   page) the animation start can stall for seconds; Lighthouse stamps LCP at
   first *visible* paint, not when the image actually finished loading. */
body.theme-growth .hero .reveal,
body.theme-growth .hero.reveal { animation: none !important; }

/* 3b — same LCP-guard reasoning applied to the mobile nav's CTA buttons (2026-07-21):
   .primary-nav.is-open .nav-cta fades in via a delayed (.25s) + animated (.42s)
   opacity transition. Under any main-thread lag that window stretches, and an
   outline-only button (border + text, no fill) reads as washed-out/illegible at
   partial opacity in a way a solid-fill button doesn't -- reported by Honey via
   screenshot. These are the exact buttons someone opened the menu to tap, so
   they must be at full opacity immediately, never mid-fade. */
body.theme-growth .primary-nav .nav-cta {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   VISUAL POLISH PASS 2 (2026-07-21) — fleet-sourced techniques, reinterpreted in
   this client's own navy/gold, not copied pixel-for-pixel from any single site:
   1) scrolling service-name ticker (pattern seen on the Land Care Landscape
      Management build) with a small diamond tick standing in for a compass point.
   2) section-heading rule fades to transparent at both ends instead of a hard
      solid line (pattern seen on the All Around Tampa Pavers build).
   ══════════════════════════════════════════════════════════════════════════════ */

/* 4 — service-name ticker: dark navy band, continuous scroll, gold diamond ticks. */
.service-ticker {
  background: var(--color-green-900);
  color: #eef2f7;
  overflow: hidden;
  padding-block: .8rem;
  border-block: 1px solid rgba(191, 137, 19, 0.35);
}
.service-ticker-track {
  display: flex;
  width: max-content;
  animation: tn-tick 38s linear infinite;
}
.service-ticker span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  white-space: nowrap;
  padding-inline: 1.1rem;
}
.service-ticker span::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 2.2rem;
  background: var(--color-accent);
  transform: rotate(45deg);
  vertical-align: 1px;
}
@keyframes tn-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .service-ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* 5 — waterline heading rule: fade to transparent at both ends. */
body.theme-growth .with-rule {
  border-bottom: 0;
  position: relative;
}
body.theme-growth .with-rule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(11, 48, 88, 0) 0%, var(--color-green-700) 30%, var(--color-accent) 70%, rgba(191, 137, 19, 0) 100%);
}
body.theme-growth .section-heading.centered.with-rule::after {
  background: linear-gradient(90deg, rgba(11, 48, 88, 0) 0%, var(--color-green-700) 35%, var(--color-accent) 65%, rgba(191, 137, 19, 0) 100%);
}

/* 6 — real, clickable Google Maps embed for each city page's sidebar (replaces the
   decorative/fake city-map-static graphic; radius matches the sidebar card family). */
.sidebar-map-embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / .88;
  min-height: 290px;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}
.sidebar-map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.sidebar-map-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .7rem;
  font-size: .85rem;
  font-weight: 800;
  color: var(--color-green-700);
}
.sidebar-map-link:hover { color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════════════
   FLEET-PATTERN PASS (2026-07-21) — patterns confirmed present on all three of
   Greenz Outdoor Services, Land Care Landscape Management, and Land Care Garden
   Center, reinterpreted in True North's own navy/gold only (no oak/leaf/banana,
   no gradients borrowed from another client's brand):
   1) a dashed inset accent on dark/photo cards (Greenz's stamped chips, both
      Land Care sites' floating stat cards) — solid gold, no other color mixed in.
   2) a shaped eyebrow accent instead of a flat rule (all three use some kind of
      distinct kicker mark) — solid gold diamond, NOT a gradient. The earlier
      gradient attempt mixed navy into the mark and went dark/invisible on navy
      sections; a flat solid color has no such failure mode on any background.
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1 — dashed gold inset accent on the dark phone-callout and photo-CTA cards. */
body.theme-growth .sidebar-callout--dark,
body.theme-growth .impact-phone-cta {
  position: relative;
}
body.theme-growth .sidebar-callout--dark::before,
body.theme-growth .impact-phone-cta::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(191, 137, 19, 0.4);
  border-radius: inherit;
  pointer-events: none;
}

/* 2 — eyebrow accent: solid gold diamond (matches the ticker's tick marks). */
body.theme-growth .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: rotate(45deg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER RESTRUCTURE (2026-07-21) — patterns drawn from previously built Lawn &
   Land sites (Greenz's top "pitch" band + gradient rule, Land Care Landscape
   Management's prominent footer phone + hover-tick nav links), reinterpreted in
   True North's own navy/gold. The CTA moves from a buried 4th grid column into a
   proper closing-statement band at the top of the footer.
   ══════════════════════════════════════════════════════════════════════════════ */

.footer-pitch {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 2.6rem 2.2rem;
}
.footer-pitch h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: .35rem; max-width: 30ch; }
.footer-pitch-ctas { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.footer-pitch-phone { font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; color: #fff; }
.footer-pitch-phone:hover { color: var(--color-accent); }
@media (max-width: 720px) {
  .footer-pitch { flex-direction: column; align-items: flex-start; }
}

.footer-rule {
  height: 2px;
  margin-bottom: .2rem;
  background: linear-gradient(90deg, rgba(191, 137, 19, 0) 0%, var(--color-accent) 50%, rgba(191, 137, 19, 0) 100%);
}

/* three columns now that the CTA is no longer a 4th column. MUST be scoped to
   desktop: unscoped, this rule's higher specificity beat components.css's own
   mobile stacking rule (same selector, but inside its @media max-width:980px),
   cramming three columns into a 375px screen -- confirmed via screenshot
   (the address wrapped to one word per line) and a real browser render.
   Exact same class of mistake as the nav-link white-text bug fixed earlier. */
@media (min-width: 981px) {
  body.theme-growth .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* footer column headers: small gold label + accent dash (matches the protocol
   seen on Greenz's footer -- e.g. "SERVICES" as a small gold caps label with a
   short mark before it, not a plain white heading), built in True North gold. */
body.theme-growth .footer-grid h2 {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
body.theme-growth .footer-grid h2::before {
  content: "";
  width: 20px;
  height: 5px;
  border-radius: 4px;
  background: var(--color-accent);
  flex: none;
}

/* social icons: gold hover fill */
body.theme-growth .social-list a { transition: background .18s ease, color .18s ease; }
body.theme-growth .social-list a:hover { background: var(--color-accent); color: var(--color-green-900); }

/* footer nav links: small gold tick slides in from the left on hover */
body.theme-growth .footer-list a:not(.footer-phone-link) {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: color .18s ease, padding-left .18s ease;
}
body.theme-growth .footer-list a:not(.footer-phone-link)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: rotate(45deg);
  flex: none;
  opacity: 0;
  margin-left: -14px;
  transition: opacity .18s ease, margin-left .18s ease;
}
body.theme-growth .footer-list a:not(.footer-phone-link):hover { color: #fff; padding-left: 14px; }
body.theme-growth .footer-list a:not(.footer-phone-link):hover::before { opacity: 1; margin-left: 0; }

/* prominent phone number in the Contact Us column (was a plain list link) */
body.theme-growth .footer-phone-link { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: #fff; }
body.theme-growth .footer-phone-link:hover { color: var(--color-accent); }