/* ============================================================
   Creative Tree & Stump — Master Design System
   Shared across all 5 page templates.
   PALETTE: placeholder = existing client palette (Option A-ish).
   Swap the :root tokens to apply Option A or B once decided.
   ============================================================ */

:root {
  /* ---- PALETTE — OPTION B LOCKED (emergency red accent) ----
     Locked 2026-07-10. Rationale: client specializes in emergency
     crane/storm services → red is the primary conversion signal,
     reserved ONLY for the 24/7 emergency CTA. Green carries the
     arborist brand everywhere else. Red stays loud by staying rare.
     To revert to Option A: change the 4 values below back to
     #B8C424 / #9DA91B / #1F2A0A / #B8C424 (chartreuse set). */
  --color-primary:        #365902;   /* brand green — unchanged */
  --color-primary-dark:   #1F3601;   /* footer, utility bar — unchanged */
  --color-primary-light:  #5C8A1A;   /* accent green (was chartreuse role in A) */
  --color-accent:         #5C8A1A;   /* accent — deeper green, not chartreuse */
  --color-accent-text:    #FFFFFF;   /* white text on green accent */
  --color-emergency:      #C62828;   /* RESERVED — emergency CTA only */
  --color-emergency-dark: #A11F1F;   /* emergency hover state */
  --color-bg:             #FFFFFF;
  --color-surface:        #F4F7EE;
  --color-text:           #1F2A0A;
  --color-text-muted:     #6A7A4A;
  --color-border:         #DCE4CC;

  /* ---- TYPOGRAPHY (preserved from client) ---- */
  --font-head: "Urbanist", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --size-h1:   clamp(2.25rem, 5vw, 3rem);     /* responsive, not fixed 72px */
  --size-h2:   clamp(1.5rem, 3vw, 2.25rem);
  --size-h3:   1.25rem;
  --size-body: 1rem;
  --size-small: 0.875rem;

  /* ---- SPACING & SHAPE ---- */
  --radius:      6px;       /* cards (client uses 5px) */
  --radius-btn:  9999px;    /* pill buttons */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --container: 1200px;

  /* ---- SHADOW (flat system — minimal elevation) ---- */
  --shadow-sm: 0 1px 2px rgba(31,42,10,.06);
  --shadow-md: 0 4px 12px rgba(31,42,10,.08);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-dark); }

/* ---- LAYOUT ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--space-8) 0; }
.section--surface { background: var(--color-surface); }

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; color: var(--color-primary-dark); }
h1 { font-size: var(--size-h1); margin-bottom: var(--space-4); }
h2 { font-size: var(--size-h2); margin-bottom: var(--space-4); }
h3 { font-size: var(--size-h3); margin-bottom: var(--space-3); }
p  { margin-bottom: var(--space-4); }

/* Doc 2 LLM-conditional: tokenization control tags */
strong, b { font-weight: 600; color: var(--color-primary-dark); }
em { font-style: italic; }
mark { background: var(--color-accent); color: var(--color-accent-text); padding: 0 4px; border-radius: 3px; }

/* ---- HEADER (shared) ---- */

/* Urgency bar — the conversion-urgency element.
   Variant classes change emphasis per page context:
   .urgency--general   (homepage): 30+ Yrs · ★5.0 · Open 24/7
   .urgency--local     (city page): adds "in [City]"
   .urgency--emergency (emergency): 24/7 first, red dot pulse
   .urgency--service   (service page): service-specific lead */
.urgency-bar { background: var(--color-primary-dark); color: #E8F0D0; font-size: var(--size-small); padding: var(--space-3) 0; }
.urgency-bar .container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.urgency-bar .urgency-left,
.urgency-bar .urgency-right { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.urgency-bar .signal { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; opacity: 0.95; }
.urgency-bar .signal strong { color: #fff; font-weight: 700; }
.urgency-bar .sep { opacity: 0.4; }
.urgency-bar .stars { color: #F5C518; letter-spacing: 1px; }

/* Emergency variant: red pulse dot + 24/7 lead */
.urgency-bar.urgency--emergency { background: #2A0808; }
.urgency-bar.urgency--emergency .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-emergency); animation: urgency-pulse 1.6s infinite; flex-shrink: 0; }
@keyframes urgency-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(198,40,40,.6); } 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(198,40,40,0); } }
.urgency-bar.urgency--emergency .open-247 { color: #FFB3B3; font-weight: 700; letter-spacing: 0.03em; }

/* Legacy fallback (old templates still use .utility-bar) */
.utility-bar { background: var(--color-primary-dark); color: #E8F0D0; font-size: var(--size-small); padding: var(--space-2) 0; }
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.utility-bar .trust { opacity: 0.92; }
.utility-bar .open { font-weight: 600; }

.site-header { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; }
.site-header .container,
.site-header .site-header__row { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); padding-bottom: var(--space-4); gap: var(--space-5); }
.brand { font-family: var(--font-head); font-weight: 800; color: var(--color-primary); font-size: 1.1rem; line-height: 1.1; text-decoration: none; }
.brand span { display: block; font-size: 0.65rem; font-weight: 500; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
/* Real logo (auto-imported from assets/images/logo.png on theme activation).
   Constrained to a header-friendly height; width auto-scales to preserve aspect.
   !important overrides WP core's custom-logo width attribute binding. */
.site-header .custom-logo,
.site-header .custom-logo-link { max-height: 56px !important; width: auto !important; height: 56px !important; display: block; }
.site-header .wp-block-site-logo { display: flex; align-items: center; flex-shrink: 0; max-height: 56px; }
@media (max-width: 600px) {
  .site-header .custom-logo,
  .site-header .custom-logo-link { max-height: 44px !important; height: 44px !important; }
}
.nav { display: flex; gap: var(--space-5); align-items: center; }
.nav a { color: var(--color-text); text-decoration: none; font-weight: 500; font-size: 0.92rem; }
.nav a:hover { color: var(--color-primary); }
.btn-header { background: var(--color-primary); color: #fff; border: none; padding: var(--space-3) var(--space-5); border-radius: var(--radius-btn); font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.btn-header:hover { background: var(--color-primary-dark); color: #fff; }

/* Two-button header (Option B locked) — green estimate + red emergency, both persistent site-wide */
.header-ctas { display: flex; gap: 0.5rem; align-items: center; }
.btn-header--estimate { background: var(--color-primary); color: #fff; }
.btn-header--estimate:hover { background: var(--color-primary-dark); }
.btn-header--emergency {
  background: var(--color-emergency); color: #fff;
  display: inline-flex; align-items: center; gap: 0.35rem;
  animation: emergency-glow 2.4s ease-in-out infinite;
}
.btn-header--emergency:hover { background: var(--color-emergency-dark); }
.btn-header--emergency .pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: emergency-pulse-dot 1.4s infinite; }
@keyframes emergency-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(198,40,40,0); } 50% { box-shadow: 0 0 0 4px rgba(198,40,40,.18); } }
@keyframes emergency-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (max-width: 640px) {
  .header-ctas { flex-direction: column; gap: 0.3rem; }
  .btn-header--estimate, .btn-header--emergency { font-size: 0.74rem; padding: 0.4rem 0.7rem; }
  .btn-header--emergency .pulse { display: none; }
}

/* Emergency variant — only in Option B */
.btn-emergency { background: var(--color-emergency); }
.btn-emergency:hover { background: #A11F1F; }

/* ---- BUTTONS ---- */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: var(--space-4) var(--space-6); border-radius: var(--radius-btn); border: none; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn--accent { background: var(--color-accent); color: var(--color-accent-text); }
.btn--outline { background: transparent; color: var(--color-primary-dark); border: 1.5px solid var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }

/* ---- HERO ---- */
.hero { position: relative; color: #fff; padding: var(--space-8) 0; background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08), transparent 50%); pointer-events: none; }
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero p { font-size: 1.1rem; opacity: 0.94; max-width: 60ch; margin-bottom: var(--space-6); }
.hero .eyebrow { font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.88; margin-bottom: var(--space-3); }
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero .btn--outline { color: #fff; border-color: rgba(255,255,255,0.6); }

/* Emergency hero variant — darker, red-leaning, urgency-forward */
.hero--emergency { background: linear-gradient(135deg, #1A0606 0%, #2A0808 40%, var(--color-primary-dark) 100%); }
.hero--emergency::after { background: radial-gradient(circle at 70% 30%, rgba(198,40,40,0.15), transparent 60%); }
.hero--emergency h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.05; }
.eyebrow--emergency { color: #FFB3B3 !important; opacity: 1 !important; font-weight: 700 !important; }
.hero-fineprint { font-size: 0.88rem; opacity: 0.85; margin-top: var(--space-4) !important; margin-bottom: 0 !important; }

/* Emergency CTA button (used in hero, feature block, CTA strip) */
.btn--emergency-cta {
  background: var(--color-emergency); color: #fff;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1rem; padding: 0.9rem 1.5rem;
  border-radius: var(--radius-btn); border: none; text-decoration: none;
  box-shadow: 0 4px 16px rgba(198,40,40,0.35);
  animation: emergency-glow 2.4s ease-in-out infinite;
}
.btn--emergency-cta:hover { background: var(--color-emergency-dark); color: #fff; transform: translateY(-1px); }
.btn--emergency-cta .pulse { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: emergency-pulse-dot 1.4s infinite; flex-shrink: 0; }

/* Emergency feature card variant */
.card--emergency { border-left: 4px solid var(--color-emergency); background: linear-gradient(to right, #FFF8F8 0%, #fff 8%); }
.card--emergency .card-icon { background: #FBE9E9; color: var(--color-emergency); }

/* Emergency CTA strip variant — red gradient instead of green */
.cta-strip--emergency { background: linear-gradient(135deg, #8B1414 0%, var(--color-emergency) 100%); }
.cta-strip--emergency .btn--emergency-cta { background: #fff; color: var(--color-emergency); box-shadow: none; animation: none; }
.cta-strip--emergency .btn--emergency-cta:hover { background: #FFF5F5; }
.cta-strip--emergency .btn--emergency-cta .pulse { background: var(--color-emergency); }

/* ---- BREADCRUMB ---- */
.breadcrumb { font-size: var(--size-small); color: var(--color-text-muted); padding: var(--space-4) 0; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb span { margin: 0 var(--space-2); }

/* ---- SERVICE CARDS ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); }
.card-icon { width: 44px; height: 44px; border-radius: var(--radius); background: var(--color-surface); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); font-size: 1.3rem; }
.card h3 { margin-bottom: var(--space-2); }
.card p { font-size: var(--size-small); color: var(--color-text-muted); margin-bottom: 0; }

/* ---- TRUST STRIP ---- */
.trust-strip { background: var(--color-surface); padding: var(--space-5) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; align-items: center; }
.trust-item { font-size: var(--size-small); font-weight: 500; color: var(--color-primary-dark); display: flex; align-items: center; gap: var(--space-2); }

/* Verification badges — VerifiedPros & ArborMatch (going live soon).
   Used in trust strip + footer. Distinct from generic trust-items. */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1; border: 1px solid var(--color-border); background: #fff; color: var(--color-primary-dark); white-space: nowrap; }
.badge .check { width: 14px; height: 14px; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
.badge--verified { background: #F0F4E5; border-color: #C5D49A; }
.badge--verified .check { background: var(--color-primary); }
.badge--arbor { background: #EBF2E0; border-color: #B4C98A; }
.badge--arbor .check { background: #2D6A2A; }
.badge--pending { opacity: 0.7; border-style: dashed; }
.badge--pending::after { content: "soon"; font-size: 0.62rem; font-weight: 500; color: var(--color-text-muted); margin-left: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

/* On dark backgrounds (footer) — light variant */
.site-footer .badge { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #E8F0D0; }
.site-footer .badge .check { background: var(--color-accent); color: var(--color-primary-dark); }
.site-footer .badge--arbor .check { background: #5C8A1A; }

/* ---- CONTENT SATIATION BLOCK (Doc 2 anti-pogo-stick) ---- */
.satiation { background: var(--color-surface); border-left: 4px solid var(--color-primary-light); padding: var(--space-5) var(--space-6); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--space-5) 0; }
.satiation p:last-child { margin-bottom: 0; }

/* ---- FAQ ---- */
.faq details { border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; }
.faq summary { font-family: var(--font-head); font-weight: 600; color: var(--color-primary-dark); cursor: pointer; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: baseline; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--color-primary-light); }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { margin-bottom: var(--space-3); }

/* ---- TESTIMONIAL / BLOCKQUOTE (Doc 2 semantic) ---- */
blockquote.testimonial { border-left: 4px solid var(--color-accent); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--color-text); }
blockquote.testimonial cite { display: block; margin-top: var(--space-3); font-size: var(--size-small); font-style: normal; color: var(--color-text-muted); font-weight: 600; }

/* ---- JOB SHOWCASE ---- */
.job-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); margin: var(--space-5) 0; }
.job-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.job-card figure { margin: 0; }
.job-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.job-card figcaption { padding: var(--space-3) var(--space-4); font-size: var(--size-small); color: var(--color-text-muted); }
.job-card .job-meta { padding: 0 var(--space-4) var(--space-4); }
.job-meta .stat { font-family: var(--font-head); font-weight: 700; color: var(--color-primary-dark); font-size: 1.3rem; }
.job-meta .stat-label { font-size: var(--size-small); color: var(--color-text-muted); display: block; }

/* ---- CTA STRIP ---- */
.cta-strip { background: var(--color-primary); color: #fff; padding: var(--space-7) 0; text-align: center; }
.cta-strip h2 { color: #fff; }
.cta-strip p { opacity: 0.94; max-width: 50ch; margin: 0 auto var(--space-5); }
.cta-strip .btn--outline { color: #fff; border-color: rgba(255,255,255,0.6); }

/* ---- FOOTER ---- */
.site-footer { background: var(--color-primary-dark); color: #D8E5B8; padding: var(--space-8) 0 var(--space-6); }
.site-footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
@media (max-width: 760px) { .site-footer .container { grid-template-columns: 1fr 1fr; } }
.site-footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: var(--space-4); }
.site-footer a { color: #D8E5B8; text-decoration: none; font-size: var(--size-small); display: block; padding: var(--space-1) 0; }
.site-footer a:hover { color: #fff; }
.site-footer address { font-style: normal; font-size: var(--size-small); line-height: 1.7; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-6); padding-top: var(--space-4); font-size: 0.78rem; opacity: 0.7; text-align: center; }

/* ---- PATH B CONDITIONAL: pricing block states ---- */
.pricing-block { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); margin: var(--space-5) 0; }
.pricing-block.has-data { border-left: 4px solid var(--color-primary-light); }
.pricing-block.no-data { background: var(--color-surface); border-left: 4px solid var(--color-accent); }
.pricing-block .stat-row { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.pricing-block .stat { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--color-primary-dark); }
.pricing-block .stat-label { font-size: var(--size-small); color: var(--color-text-muted); display: block; }

/* ---- RESPONSIVE ---- */
@media (max-width: 760px) {
  .nav { display: none; } /* hamburger takes over in WP build */
  .hero { padding: var(--space-7) 0; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  /* Multi-column WP block columns stack to single column on mobile.
     WP core handles .wp-block-columns responsively by default at 600px,
     but we tighten it for our card grids at 760 for narrower phones. */
  .wp-block-columns.card-grid,
  .wp-block-columns.city-grid,
  .wp-block-columns.stats-grid { display: flex; flex-direction: column; gap: var(--space-4); }
  /* Hero fineprint + emergency CTA padding tightened */
  .hero--emergency { padding: var(--space-7) 0; }
  .btn--emergency-cta { display: flex; justify-content: center; width: 100%; }
  /* Images inside content scale per the img global rule; ensure no overflow */
  .wp-block-image img, figure img { width: 100%; height: auto; }
  /* Tables (used in some spoke pages) become horizontally scrollable */
  .wp-block-table { overflow-x: auto; display: block; }
  /* Review cards and testimonials full-width */
  blockquote.review-card, blockquote.testimonial { margin-left: 0; margin-right: 0; }
}

@media (max-width: 480px) {
  /* Tighter hero on small phones */
  .hero h1, .hero--emergency h1 { font-size: clamp(1.85rem, 7vw, 2.25rem); }
  .hero p { font-size: 1rem; }
  .hero .eyebrow { font-size: 0.78rem; }
  /* Section padding reduced */
  .section { padding: var(--space-6) 0; }
  /* Stats grid — single column on narrow phones */
  .stats-grid, .wp-block-columns.stats-grid { display: flex; flex-direction: column; text-align: center; }
  /* City grid in homepage teaser — single column */
  .city-grid, .wp-block-columns.city-grid { display: flex; flex-direction: column; gap: var(--space-3); }
}

/* ---- UTILITIES ---- */
.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; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* ---- COMPONENTS USED BY content/pages/ DRAFTS (added 2026-07-21) ----

   These classes are emitted by the WP block markup in the page drafts
   at content/pages/. They layer on top of the existing components above
   (hero, card, testimonial, etc.) — no conflicts, only additions. */

/* Stats grid — the 4-up summary stats on the reviews page */
.stats-grid > .wp-block-column,
.wp-block-columns.stats-grid > .wp-block-column {
  text-align: center;
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.stat-number { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 5vw, 2.75rem); color: var(--color-primary); line-height: 1; margin-bottom: var(--space-2); }
.stat-label { font-size: var(--size-small); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* City grid — homepage service-area teaser + city page nearby-cities list */
.city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.city-grid .wp-block-column,
.city-grid > div { padding: var(--space-4); background: var(--color-surface); border-radius: var(--radius); font-size: 0.95rem; line-height: 1.4; }
.city-grid a { text-decoration: none; display: block; }
.city-grid a:hover { text-decoration: underline; }
.city-grid strong { color: var(--color-primary-dark); }

/* Review card — individual review on reviews page */
blockquote.review-card { background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: var(--space-5) var(--space-6); margin: var(--space-4) 0; font-size: 1.05rem; line-height: 1.6; color: var(--color-text); font-style: normal; box-shadow: var(--shadow-sm); }
blockquote.review-card cite { display: block; margin-top: var(--space-4); font-size: var(--size-small); font-style: normal; color: var(--color-text-muted); font-weight: 600; }

/* Review meta line (the "4.9★ across 50+ verified Google reviews" summary) */
.review-meta { text-align: center; font-size: 0.95rem; color: var(--color-text-muted); margin-top: var(--space-4); }
.review-meta strong { color: var(--color-primary-dark); }

/* Photo placeholder — labeled placeholder for missing client photos.
   Used on /about/ until real headshot + crew photo are supplied. */
.photo-placeholder { background: var(--color-surface); border: 2px dashed var(--color-border); border-radius: var(--radius); padding: var(--space-4); text-align: center; }
.photo-placeholder img { opacity: 0.55; margin: 0 auto var(--space-3); max-width: 100%; height: auto; }
.photo-placeholder p { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0; }

/* Ensure any inline style on images doesn't break mobile rendering */
.wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright { max-width: 100%; }
@media (max-width: 760px) {
  .wp-block-image.alignleft, .wp-block-image.alignright { float: none; margin-left: auto; margin-right: auto; display: block; }
}


/* ============================================================
   NEW COMPONENTS — Response strip + Data-driven footer + Emergency bar
   ============================================================ */

/* ---- RESPONSE-TIME MICRO-STRIP ---- */
.response-strip { background: #FFF8E1; border-bottom: 1px solid #E5D89A; padding: 0.6rem 0; font-size: 0.85rem; color: #5C4A0A; }
.response-strip .container { display: flex; align-items: center; gap: 0.5rem; }
.response-strip__text { line-height: 1.4; }
.response-strip__text strong { color: #3A2F00; }
.response-strip--hq { background: #E8F5E9; border-bottom-color: #A5D6A7; color: #1B5E20; }
.response-strip--hq .response-strip__text strong { color: #0D3814; }

/* ---- DATA-DRIVEN FOOTER (local variant) ---- */
.site-footer--local { padding-top: 0; }
.footer-local-strip { background: rgba(0,0,0,0.15); padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 2rem; }
.footer-local-strip__inner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.footer-local__label { display: block; font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1rem; }
.footer-local__meta { display: block; font-size: 0.78rem; opacity: 0.85; margin-top: 0.2rem; }
.footer-nearby { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-size: 0.85rem; }
.footer-nearby__label { opacity: 0.8; font-size: 0.78rem; }
.footer-nearby a { color: #E8F0D0; text-decoration: none; }
.footer-nearby a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { color: #fff; font-size: 0.95rem; margin-bottom: 1rem; }
.footer-col a { color: #D8E5B8; text-decoration: none; font-size: 0.875rem; display: flex; justify-content: space-between; align-items: baseline; padding: 0.25rem 0; }
.footer-col a:hover { color: #fff; }
.footer-col__meta { font-size: 0.72rem; opacity: 0.6; }
.footer-col--brand h4 { font-size: 1.05rem; }
.footer-badges { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.footer-badges .badge { font-size: 0.72rem; padding: 5px 10px; }

/* ---- STICKY EMERGENCY BAR ---- */
.emergency-bar { position: sticky; bottom: 0; z-index: 200; background: linear-gradient(90deg, #8B1414 0%, #C62828 100%); color: #fff; padding: 0.75rem 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); }
.emergency-bar .container { display: flex; align-items: center; gap: 1rem; }
.emergency-bar__pulse { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: emergency-pulse 1.4s infinite; flex-shrink: 0; }
@keyframes emergency-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 50% { opacity: .5; box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
.emergency-bar__content { flex: 1; min-width: 0; }
.emergency-bar__label { display: block; font-weight: 700; font-size: 1rem; }
.emergency-bar__sub { display: block; font-size: 0.78rem; opacity: 0.92; }
.emergency-bar__call { background: #fff; color: #C62828; padding: 0.6rem 1.25rem; border-radius: 999px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.emergency-bar__call:hover { background: #FFF5F5; }
@media (max-width: 560px) { .emergency-bar__sub { display: none; } }

/* ============================================================
   INTERACTIVE TOOLS — cts-tool components
   Added 2026-07-22 for the 4 embeddable calculators:
   winter-watering, defensible-space, eab-zone, tree-selector.
   All tools share this styling system for consistency.
   ============================================================ */

.cts-tool {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) { .cts-tool { padding: var(--space-5); } }

.cts-tool__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}

.cts-tool__subtitle {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  line-height: 1.6;
  max-width: 70ch;
}

.cts-tool__form { margin-bottom: var(--space-5); }

.cts-tool__fieldset {
  border: none;
  padding: 0;
  margin-bottom: var(--space-5);
}
.cts-tool__fieldset:empty { display: none; } /* hide when JS clears it */

.cts-tool__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
  font-size: 1rem;
}

.cts-tool__radio {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 0.92rem;
}
.cts-tool__radio:hover { background: var(--color-surface); }
.cts-tool__radio input[type="radio"] {
  margin-top: 0.18rem;
  accent-color: var(--color-primary);
  flex-shrink: 0;
  width: 18px; height: 18px;
  cursor: pointer;
}
.cts-tool__radio input[type="radio"]:checked + span {
  color: var(--color-primary-dark);
  font-weight: 500;
}
.cts-tool__radio:has(input:checked) {
  background: var(--color-surface);
  border-color: var(--color-primary-light);
}

.cts-tool__range {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
}
.cts-tool__range input[type="range"] {
  flex: 1 1 200px;
  min-width: 200px;
  height: 8px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.cts-tool__range output {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  min-width: 100px;
  text-align: right;
}
.cts-tool__range output strong { font-size: 1.2rem; }

.cts-tool__hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.cts-tool__select-wrap { position: relative; }
.cts-tool__select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23365902' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.cts-tool__select:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 1px;
}

/* Result card */
.cts-tool__result { margin-top: var(--space-4); }
.cts-tool__placeholder {
  padding: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

.cts-tool__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* Stat row in result card */
.cts-tool__stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.cts-tool__stat { text-align: center; padding: var(--space-3); background: #fff; border-radius: var(--radius); }
.cts-tool__stat-value {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--color-primary);
  line-height: 1.1;
}
.cts-tool__stat-label {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.3rem;
}
.cts-tool__stat-season, .cts-tool__stat-formula, .cts-tool__stat-notes {
  font-size: 0.92rem;
  margin-bottom: var(--space-3);
}

/* Rule callout (critical-rule boxes) */
.cts-tool__rule {
  background: #FFF8E1;
  border-left: 3px solid #E5A100;
  padding: 0.8rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
  margin-top: var(--space-3);
}

/* Defensible-space zone sections */
.cts-tool__zone-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-primary-light);
}
.cts-tool__zone-title:first-child { margin-top: 0; }
.cts-tool__zone-spec { font-size: 0.95rem; margin-bottom: var(--space-3); }

.cts-tool__checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
}
.cts-tool__checklist li {
  padding: 0.4rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text);
}

/* EAB zone status badges */
.cts-tool__card--severe { border-left-color: #8B1414; background: #FFF5F5; }
.cts-tool__card--high { border-left-color: var(--color-emergency); background: #FFF8F8; }
.cts-tool__card--watch { border-left-color: #E5A100; background: #FFFEF5; }
.cts-tool__card--warning { border-left-color: #E5A100; background: #FFFEF5; }

.cts-tool__status-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.cts-tool__status-badge--severe { background: #8B1414; color: #fff; }
.cts-tool__status-badge--high { background: var(--color-emergency); color: #fff; }
.cts-tool__status-badge--watch { background: #E5A100; color: #1F2A0A; }

.cts-tool__status-headline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}
.cts-tool__status-action { font-size: 0.95rem; line-height: 1.6; margin-bottom: var(--space-3); }

.cts-tool__details { margin-top: var(--space-3); }
.cts-tool__details summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.92rem;
  padding: 0.4rem 0;
}
.cts-tool__details p { font-size: 0.88rem; padding: 0.5rem 0; color: var(--color-text); }

/* Tree-selector species grid */
.cts-tool__result-summary {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.cts-tool__species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.cts-tool__species {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.cts-tool__species-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  margin-bottom: 0.4rem;
}
.cts-tool__species-sci {
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.cts-tool__tier-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.cts-tool__tier-badge--high { background: var(--color-primary-light); color: #fff; }
.cts-tool__tier-badge--moderate { background: var(--color-surface); color: var(--color-primary-dark); border: 1px solid var(--color-border); }
.cts-tool__species-note {
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 0;
}
.cts-tool__disclaimer {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Citation + CTA footers */
.cts-tool__citation {
  background: var(--color-primary-dark);
  color: #D8E5B8;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  margin-top: var(--space-5);
  font-size: 0.82rem;
  line-height: 1.6;
}
.cts-tool__citation-title {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}
.cts-tool__citation a { color: #FFF; text-decoration: underline; }
.cts-tool__citation-meta { margin-top: 0.6rem; }

.cts-tool__cta {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.95rem;
}
.cts-tool__cta a { font-weight: 600; }

/* Reduced motion — no transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cts-tool__radio, .cts-tool__card { transition: none; }
}

/* Mobile — single column stats, full-width radio labels */
@media (max-width: 640px) {
  .cts-tool__stat-row { grid-template-columns: 1fr 1fr; }
  .cts-tool__radio { font-size: 0.88rem; padding: 0.5rem 0.7rem; }
  .cts-tool__range input[type="range"] { flex: 1 1 100%; }
  .cts-tool__range output { text-align: left; min-width: 0; }
}
@media (max-width: 480px) {
  .cts-tool__stat-row { grid-template-columns: 1fr; }
}