/* ============================================
   PJL Land Services — Global Stylesheet
   ============================================

   ── CANONICAL BREAKPOINT SYSTEM ──
   When adding new @media queries (here or in any inline page <style>),
   stick to these values. Tracker #33 consolidated 22 different
   breakpoints down to 14; let's not let it drift back.

       480px   ← small mobile
       640px   ← phone landscape (PRIMARY mobile boundary, 58 uses)
       720px   ← small tablet
       760px   ← tablet (PRIMARY tablet boundary, 40 uses)
       960px   ← tablet landscape / small laptop
       1024px  ← desktop boundary
       1280px  ← large desktop (rare)
       1400px  ← extra-large desktop (rare)

   Outlier breakpoints below 5 uses each are kept where existing
   layouts hand-tuned them (380, 520, 540, 560, 600, 1180). Don't
   add NEW outliers — pick the closest standard above.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --green:        #1B4D2E;
  --green-mid:    #2D6A42;
  --green-light:  #4A8C5C;
  --green-pale:   #EAF3DE;
  --amber:        #E07B24;
  --amber-light:  #F59B4A;
  --amber-pale:   #FDF0E4;
  --cream:        #FAFAF5;
  --white:        #FFFFFF;
  --dark:         #0F1F14;
  --text:         #1A1A1A;
  --text-mid:     #4A4A4A;
  --text-muted:   #7A7A72;
  --border:       #E2E0D4;
  --shadow:       0 4px 32px rgba(27,77,46,0.12);
  --shadow-lg:    0 12px 48px rgba(27,77,46,0.18);
  --r:            10px;
  --r-lg:         18px;
  --r-xl:         28px;
  --touch-target: 44px;
  --container-gutter: clamp(22px, 3vw, 40px);
  --section-space: clamp(64px, 9vw, 96px);
  /* Top padding for any hero section on mobile — clears the two-tier v2 nav
     (utility strip + main bar) with ~40px of breathing room. Use this for the
     padding-top of every page's hero at mobile breakpoints. If the nav grows,
     bump this one value. */
  --hero-nav-clearance: 172px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

[id] { scroll-margin-top: clamp(96px, 12vw, 140px); }

p, li { overflow-wrap: anywhere; }

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--amber-light);
  outline-offset: 3px;
}

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: 'Barlow Condensed', sans-serif;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 2px 6px rgba(27,77,46,0.14),
    0 8px 18px rgba(15,31,20,0.10);
}
h1 { font-size: clamp(36px, 6vw, 72px); font-weight: 700; }
h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 600; }
h3 { font-size: clamp(20px, 3vw, 28px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
p  { font-size: 16px; line-height: 1.7; color: var(--text-mid); }

a { text-decoration: none; color: inherit; overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; display: block; }

/* ── Navigation ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 14px 0;
  background: rgba(15,31,20,var(--nav-bg-alpha,0));
  -webkit-backdrop-filter: blur(var(--nav-blur,0px));
  backdrop-filter: blur(var(--nav-blur,0px));
  box-shadow: 0 2px 24px rgba(0,0,0,var(--nav-shadow-alpha,0));
  transition: background 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.nav.scrolled {
  padding: 10px 0;
}
.nav.nav-solid {
  --nav-bg-alpha: 0.97;
  --nav-blur: 12px;
  --nav-shadow-alpha: 0.22;
  padding: 10px 0;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-main {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.nav-logo img {
  height: 175px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: height 0.3s ease;
}
.nav.scrolled .nav-logo img,
.nav.nav-solid .nav-logo img {
  height: 112px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin-left: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.03em;
  transition: color 0.2s;
  position: relative;
  white-space: nowrap;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding-inline: 6px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1.5px;
  background: var(--amber);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: #fff !important;
  padding: 8px 15px;
  border-radius: 6px;
  font-weight: 600 !important;
  font-size: 18px;
  white-space: nowrap;
  min-height: 44px;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--amber-light) !important; }
.nav-utility {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.nav-hamburger { display: none; }

@media (max-width: 1400px) {
  .nav {
    padding: 12px 0;
  }
  .nav.scrolled {
    padding: 8px 0;
  }
  .nav-inner {
    max-width: 100%;
    padding: 0 20px;
    gap: 16px;
  }
  .nav-logo img {
    height: clamp(104px, 11vw, 140px);
  }
  .nav.scrolled .nav-logo img {
    height: clamp(86px, 9vw, 110px);
  }
  .nav-main,
  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    padding: 18px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .nav-hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s;
  }
}

/* ── MOBILE ── */
@media (max-width: 760px) {
  .nav-inner { padding: 0 4px; }
  .nav-logo img { height: 102px; }
  .nav-main { display: none; }
  .nav-links { display: none; }
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    padding: 18px;
    flex-shrink: 0;
  }
  .nav-hamburger span {
    display: block;
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s;
  }
}

/* ── Mobile dropdown menu ── */
.nav-mobile {
  display: none;
  position: fixed;
  top: 96px;
  left: 0; right: 0;
  background: rgba(15,31,20,0.98);
  backdrop-filter: blur(12px);
  padding: 24px 24px 32px;
  z-index: 999;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 1400px) {
  .nav-mobile {
    top: 108px;
    padding: 22px 24px 28px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
  }
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  font-weight: 500;
  padding: 14px 0;
  min-height: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile-cta {
  color: #F59B4A !important;
  font-weight: 600 !important;
}

/* ── Phone pill — matches nav container ── */
.phone-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(15, 31, 20, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  white-space: nowrap;
  min-height: 40px;
}
.nav-phone-link {
  margin-top: -2px;
}
.phone-strip-link:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
  transform: translateY(-1px);
}
.phone-strip-icon { font-size: 13px; }
@media (max-width: 760px) {
  .phone-strip-link { font-size: 13px; padding: 6px 14px; }
  .nav-mobile {
    top: 96px;
    max-height: calc(100vh - 96px);
  }
}
/* ── Buttons ── */
@media (max-width: 600px) {
  .nav {
    padding: 8px 0;
  }
  .nav.scrolled {
    padding: 6px 0;
  }
  .nav-inner {
    padding: 0 12px;
  }
  .nav-logo img {
    height: 78px;
  }
  .nav.scrolled .nav-logo img {
    height: 70px;
  }
  .nav.nav-solid .nav-logo img {
    height: 70px;
  }
  .nav-hamburger {
    padding: 12px;
    gap: 6px;
  }
  .nav-hamburger span {
    width: 26px;
  }
  .nav-mobile {
    top: 86px;
    padding: 20px 18px 24px;
    max-height: calc(100vh - 86px);
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}
.btn-primary { background: var(--amber); color: #fff; }
.btn-primary:hover { background: var(--amber-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(224,123,36,0.35); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,77,46,0.35); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); }
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-2px); }
.btn-outline-green { background: transparent; color: var(--green); border: 2px solid var(--green); }
.btn-outline-green:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
.btn-lg { padding: 18px 40px; font-size: 16px; }
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: 12px 20px;
  font-size: 14px;
}

/* ── Section banner — gradient header bar (reusable) ── */
.sprk-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-radius: 14px 14px 0 0;
  color: #fff;
  margin: 0 auto 32px;
  max-width: 100%;
  box-shadow: 0 14px 32px -10px rgba(15, 31, 20, 0.28);
  position: relative;
}
.sprk-banner__icon {
  font-size: 22px;
  line-height: 1;
}
.sprk-banner__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
}
.sprk-banner__meta {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.02em;
}
.sprk-banner--green  { background: linear-gradient(135deg, #4A8C5C 0%, #2D6A42 100%); }
.sprk-banner--forest { background: linear-gradient(135deg, #2D6A42 0%, #1B4D2E 100%); }
.sprk-banner--amber  { background: linear-gradient(135deg, #C96A2A 0%, #8E3F14 100%); }
.sprk-banner--gold   { background: linear-gradient(135deg, #C79A3A 0%, #8B6A1F 100%); }
.sprk-banner--dark   { background: linear-gradient(135deg, #1B4D2E 0%, #0F1F14 100%); }
.sprk-banner--steel  { background: linear-gradient(135deg, #3a5a6e 0%, #1f3645 100%); }
@media (max-width: 640px) {
  .sprk-banner {
    grid-template-columns: auto 1fr;
    padding: 12px 18px;
    gap: 10px;
  }
  .sprk-banner__meta {
    grid-column: 1 / -1;
    font-size: 12px;
    opacity: 0.85;
  }
}

/* ── Sections ── */
.section { padding: var(--section-space) 0; }
.section-sm { padding: clamp(48px, 7vw, 64px) 0; }
.container { max-width: 1150px; margin: 0 auto; padding: 0 var(--container-gutter); }
.container-wide { max-width: 1100px; margin: 0 auto; padding: 0 var(--container-gutter); }
.page-hero {
  position: relative;
  padding-block: clamp(132px, 16vw, 156px) clamp(52px, 6vw, 72px);
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  text-wrap: balance;
  max-width: min(14ch, 100%);
}
.page-hero p { max-width: min(46ch, 100%); }
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.page-hero-actions .btn {
  min-height: 52px;
  justify-content: center;
}

.section-tag {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.section-tag.amber { background: var(--amber-pale); color: var(--amber); }

/* ─── End-of-page CTA banner — bridge to footer ───
   Replaces the bare .cta-banner on service pages. Matches v2 brand language:
   layered radial gradients, amber underglow line, pulsing same-day pill,
   gradient primary CTA + outlined phone, trust-meta strip below. */
.cta-banner {
  position: relative;
  padding: clamp(72px, 8vw, 110px) 0 clamp(80px, 9vw, 120px);
  background:
    radial-gradient(ellipse 60% 80% at 12% 25%, rgba(243,144,25,0.18), transparent 60%),
    radial-gradient(ellipse 70% 90% at 92% 85%, rgba(74,140,92,0.22), transparent 60%),
    linear-gradient(180deg, #112418 0%, #0a1810 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,144,25,0.45) 50%, transparent 100%);
}
.cta-banner::after {
  /* subtle dot grid texture for visual depth */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.cta-banner > .container {
  position: relative;
  max-width: 920px;
  text-align: center;
}
.cta-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 18px;
  background: rgba(243,144,25,0.10);
  border: 1px solid rgba(243,144,25,0.32);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}
.cta-banner__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(243,144,25,0.65);
  animation: pjlPulseDot 2.2s infinite;
}
.cta-banner h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,0.45);
}
.cta-banner h2 .accent {
  background: linear-gradient(135deg, #F5B14A 0%, #F59B4A 50%, #C96A2A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-banner p {
  font-size: clamp(15px, 1.4vw, 17.5px);
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
  margin: 0 auto 34px;
  line-height: 1.65;
}
.cta-banner .btn-row,
.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-banner__primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #F59B4A 0%, #C96A2A 100%);
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 18px 30px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(224,123,36,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  position: relative;
  overflow: hidden;
}
.cta-banner__primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffb54a 0%, #d97a2a 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cta-banner__primary > * { position: relative; z-index: 1; }
.cta-banner__primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(224,123,36,0.55), inset 0 1px 0 rgba(255,255,255,0.28);
}
.cta-banner__primary:hover::before { opacity: 1; }
.cta-banner__primary-arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}
.cta-banner__primary:hover .cta-banner__primary-arrow { transform: translateX(4px); }

.cta-banner__secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 18px 28px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.25);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cta-banner__secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-2px);
}
.cta-banner__secondary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  color: var(--amber);
  flex-shrink: 0;
}
.cta-banner__secondary-icon svg { width: 100%; height: 100%; display: block; }

.cta-banner__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  font-weight: 600;
}
.cta-banner__meta-divider {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(243,144,25,0.45);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cta-banner .btn-row,
  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-banner__primary,
  .cta-banner__secondary {
    justify-content: center;
    padding: 16px 24px;
  }
  .cta-banner__meta {
    font-size: 11.5px;
    gap: 10px;
  }
}

/* ─── Page eyebrow — editorial label above page-hero H1 ───
   Replaces the legacy .section-tag pill on internal page heroes.
   Visual: amber gradient bar + Barlow Condensed micro-tracked uppercase.
   Copy: should add information, not restate the nav. */
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(13px, 1.25vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.page-eyebrow::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--amber) 0%, rgba(243,144,25,0.18) 100%);
  border-radius: 99px;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(243,144,25,0.45);
}
@media (max-width: 600px) {
  .page-eyebrow {
    gap: 10px;
    margin-bottom: 16px;
    letter-spacing: 0.14em;
  }
  .page-eyebrow::before { width: 26px; }
}

/* ── Trust bar ── */
.trust-bar {
  background: var(--dark);
  padding: 16px 0;
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.trust-icon { font-size: 18px; }

/* ── Service cards ── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.service-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card-img {
  height: 220px;
  overflow: hidden;
  position: relative;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.service-card:hover .service-card-img img { transform: scale(1.06); }
.service-card-body { padding: 24px; }
.service-card-body h3 { margin-bottom: 8px; font-size: 20px; }
.service-card-body p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.service-card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}
.service-card:hover .service-card-link { gap: 10px; }

/* ── Stats row ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  text-align: center;
}
.stat-item { padding: 28px 20px; }
.stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label { font-size: 14px; color: var(--text-muted); font-weight: 500; }

/* ── Testimonials ── */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px;
  border: 1px solid var(--border);
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 16px; right: 24px;
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  color: var(--green-pale);
  line-height: 1;
}
.stars { color: #F59B2B; font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-card p { font-size: 14px; line-height: 1.7; color: var(--text-mid); margin-bottom: 16px; font-style: italic; }
.testimonial-author { font-size: 14px; font-weight: 600; color: var(--text); }
.testimonial-location { font-size: 12px; color: var(--text-muted); }

/* ── FAQ ── */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  cursor: pointer;
  gap: 16px;
}
.faq-question h4 { font-size: 16px; font-weight: 500; color: var(--text); font-family: 'DM Sans', sans-serif; }
.faq-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 300;
  transition: all 0.3s;
}
.faq-item.open .faq-icon { background: var(--green); color: #fff; transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-answer { max-height: 1200px; padding-bottom: 20px; }
.faq-answer p { font-size: 15px; color: var(--text-mid); line-height: 1.7; }

/* ── Footer ── */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,0.75);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer-brand img { height: 52px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 280px; margin-bottom: 20px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  transition: all 0.2s;
}
.footer-social a:hover { border-color: var(--amber); color: var(--amber); }
.footer-col h5 {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0; }
.footer-col ul li a {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 10px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--amber); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.footer-contact-item a {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}
.footer-contact-item span:first-child { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.4); }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 8px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }

.contact-detail-text a,
.footer-note a {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

/* ── Animations ── */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Utility ── */
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-green { color: var(--green); }
.text-amber { color: var(--amber); }
.bg-cream { background: var(--cream); }
.bg-green { background: var(--green); }
.bg-dark { background: var(--dark); }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

/* ── Blog post → service CTA block ─────────────────────────────
   Drops in at the end of every blog post, just before the
   floating sticky-cta + footer. Combines a primary headline /
   button card with 2-3 related-service tiles. */
.post-services-cta {
  padding: clamp(48px, 6vw, 72px) 0;
  background: linear-gradient(135deg, var(--cream) 0%, #f4f9ec 100%);
  border-top: 1px solid var(--border);
}
.post-services-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}
.post-services-cta-copy {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color: #fff;
  padding: 32px 36px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.post-services-cta-copy::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 90% 20%, rgba(245,155,74,0.18), transparent 60%);
  pointer-events: none;
}
.post-services-cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-light);
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.post-services-cta-copy h3 {
  color: #fff !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
  margin: 0 0 10px !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  position: relative; z-index: 1;
}
.post-services-cta-copy p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14.5px !important;
  margin: 0 0 18px !important;
  line-height: 1.55 !important;
  position: relative; z-index: 1;
}
.post-services-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--amber);
  color: #fff;
  padding: 12px 22px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 14px;
  align-self: flex-start;
  box-shadow: 0 8px 20px rgba(224,123,36,0.30);
  transition: background 0.2s ease, transform 0.2s ease;
  position: relative; z-index: 1;
}
.post-services-cta-btn:hover { background: var(--amber-light); transform: translateY(-1px); }
.post-services-cta-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.post-svc-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.post-svc-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(74,140,92,0.30);
  box-shadow: 0 10px 24px rgba(15,31,20,0.06);
}
.post-svc-tile-icon {
  width: 40px; height: 40px;
  background: rgba(74,140,92,0.10);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.post-svc-tile h4 {
  color: var(--green) !important;
  font-size: 15px !important;
  margin: 0 0 2px !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
.post-svc-tile p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  line-height: 1.45 !important;
}
@media (max-width: 760px) {
  .post-services-cta-inner { grid-template-columns: 1fr; }
}

/* ── Service Areas tile block ──────────────────────────────────
   Drops in near the bottom of core service pages (sprinkler-systems,
   landscape-lighting) so localized prospects find their city's
   dedicated area page from the broad service hub. */
.service-areas-block {
  padding: clamp(56px, 7vw, 80px) 0;
  background: var(--cream);
  border-top: 1px solid var(--border);
}
.service-areas-block .container { max-width: 1080px; }
.service-areas-block__head {
  text-align: center;
  margin-bottom: 32px;
}
.service-areas-block__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.service-areas-block__head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  color: var(--green);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.service-areas-block__head p {
  color: var(--text-mid);
  font-size: 16px;
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.6;
}
.service-areas-block__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.service-areas-block__tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px 18px;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.service-areas-block__tile:hover {
  transform: translateY(-3px);
  border-color: rgba(74,140,92,0.30);
  box-shadow: 0 12px 30px rgba(15,31,20,0.08);
}
.service-areas-block__tile-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: rgba(74,140,92,0.10);
  color: var(--green);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 10px;
}
.service-areas-block__tile h4 {
  color: var(--green) !important;
  font-size: 17px !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
.service-areas-block__tile p {
  color: var(--text-mid) !important;
  font-size: 13.5px !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}
.service-areas-block__tile-arrow {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { gap: 24px; }
}
@media (max-width: 760px) {
  .container, .container-wide { padding: 0 28px; }
  .section { padding: clamp(56px, 10vw, 72px) 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .trust-bar-inner { gap: 24px; }
  .page-hero {
    padding-block: clamp(var(--hero-nav-clearance), 22vw, 196px) clamp(48px, 6vw, 64px);
  }
  .page-hero h1 {
    font-size: clamp(32px, 8.5vw, 48px);
    line-height: 1.04;
  }
  .page-hero p { font-size: 16px; }
  .page-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-hero-actions .btn {
    width: min(100%, 340px);
  }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
  .btn-lg { padding: 15px 28px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* HERO — rebuilt 2026-04-21 */
section.hero[aria-label="PJL Land Services hero"] {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-top uses --hero-nav-clearance per memory/hero_nav_clearance.md
     so the headline always clears the 2-tier nav, regardless of viewport */
  padding-block: var(--hero-nav-clearance) clamp(4rem, 6cqh, 8rem);
  padding-inline: clamp(1.25rem, 4cqi, 3rem);
  color: #fff;
  text-align: center;
  overflow: visible;
  min-height: max(430px, 100svh);
  max-height: clamp(100svh, 100svh + 0px, 1100px);
  container-type: size;
  container-name: hero;
}

section.hero[aria-label="PJL Land Services hero"] .hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

section.hero[aria-label="PJL Land Services hero"] .hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

section.hero[aria-label="PJL Land Services hero"] .hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(14, 24, 18, 0.1) 0%, rgba(14, 24, 18, 0.42) 42%, rgba(14, 24, 18, 0.72) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.52) 62%, rgba(0, 0, 0, 0.68) 100%);
}

section.hero[aria-label="PJL Land Services hero"] .hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 8cqh, 1.5rem);
  max-width: 76rem;
  width: 100%;
}

section.hero[aria-label="PJL Land Services hero"] .hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  background: rgba(15, 31, 20, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(243, 144, 25, 0.5);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  max-width: min(92vw, 640px);
  text-align: left;
}
section.hero[aria-label="PJL Land Services hero"] .hero__badge:hover {
  transform: translateY(-2px);
  border-color: #f39019;
  background: rgba(15, 31, 20, 0.7);
}
section.hero[aria-label="PJL Land Services hero"] .hero__badge-pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f39019;
  box-shadow: 0 0 0 0 rgba(243, 144, 25, 0.7);
  animation: heroPulse 1.8s infinite;
  flex-shrink: 0;
}
@keyframes heroPulse {
  0% { box-shadow: 0 0 0 0 rgba(243, 144, 25, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(243, 144, 25, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 144, 25, 0); }
}
section.hero[aria-label="PJL Land Services hero"] .hero__badge-new {
  display: inline-block;
  padding: 2px 8px;
  background: #f39019;
  color: #0f1f14;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
section.hero[aria-label="PJL Land Services hero"] .hero__badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
section.hero[aria-label="PJL Land Services hero"] .hero__badge-arrow {
  font-weight: 700;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
section.hero[aria-label="PJL Land Services hero"] .hero__badge:hover .hero__badge-arrow {
  transform: translateX(4px);
}
@media (max-width: 600px) {
  section.hero[aria-label="PJL Land Services hero"] .hero__badge-text {
    white-space: normal;
  }
}

section.hero[aria-label="PJL Land Services hero"] .hero__headline {
  display: inline-block;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw + 0.6rem, 4.65rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  white-space: normal;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

section.hero[aria-label="PJL Land Services hero"] .hero__headline em {
  font-style: normal;
  color: #f39019;
}

section.hero[aria-label="PJL Land Services hero"] .hero__tagline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw + 0.3rem, 1.5rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f39019;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

section.hero[aria-label="PJL Land Services hero"] .hero__sub {
  font-size: clamp(0.95rem, 1.6cqi, 1.25rem);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
}

section.hero[aria-label="PJL Land Services hero"] .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  width: 100%;
}

section.hero[aria-label="PJL Land Services hero"] .hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.9rem 1.75rem;
  border-radius: 10px;
  font-size: clamp(0.95rem, 1.4cqi, 1.1rem);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  flex: 1 1 220px;
  max-width: 320px;
}

section.hero[aria-label="PJL Land Services hero"] .hero__cta--primary {
  background: #f39019;
  color: #fff;
  border: 1px solid #f39019;
}

section.hero[aria-label="PJL Land Services hero"] .hero__cta--primary:hover {
  background: #d97c10;
  border-color: #d97c10;
}

section.hero[aria-label="PJL Land Services hero"] .hero__cta--secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

section.hero[aria-label="PJL Land Services hero"] .hero__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

section.hero[aria-label="PJL Land Services hero"] .hero__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

section.hero[aria-label="PJL Land Services hero"] .hero__services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: clamp(0.5rem, 2vw, 1rem) 0 0;
  font-size: clamp(1rem, 1.8cqi, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

section.hero[aria-label="PJL Land Services hero"] .hero__services-sep {
  color: #f39019;
  font-weight: 400;
  text-shadow:
    0 0 6px rgba(243, 144, 25, 0.6),
    0 0 14px rgba(243, 144, 25, 0.35);
  user-select: none;
}

@media (max-width: 640px) {
  section.hero[aria-label="PJL Land Services hero"] .hero__cta {
    flex: 1 1 100%;
    max-width: none;
  }
}

@media (max-width: 520px) {
  section.hero[aria-label="PJL Land Services hero"] .hero__services {
    font-size: clamp(0.95rem, 3vw + 0.4rem, 1.15rem);
    gap: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  section.hero[aria-label="PJL Land Services hero"] .hero__cta {
    transition: none;
  }
}

/* On phones (≤768px) the estimator moves OUT of the hero and into a
   scroll-revealed band immediately below — the hero stays at one fold,
   the cost callout becomes the first thing visitors see when they scroll.
   Tablets/desktops keep the estimator inside the hero where it has room.

   We still enforce the project-wide rule (per memory/hero_nav_clearance.md):
   mobile hero padding-top MUST use var(--hero-nav-clearance) to clear the
   2-tier mobile nav. */
/* Relax the hero (drop fold-locking + size containment) whenever the
   viewport is constrained on EITHER axis. Short viewports (landscape phones,
   1280x800 laptops, iPad landscape at 1024x768) suffer the same overflow
   problem as narrow phones because hero content needs ~700px + 236px padding. */
@media (max-width: 760px), (max-height: 900px) {
  section.hero[aria-label="PJL Land Services hero"] {
    container-type: inline-size;
    min-height: 0;
    max-height: none;
  }
  section.hero[aria-label="PJL Land Services hero"] .hero__inner {
    gap: 1.25rem;
  }
}

/* ── Hero seasonal estimator (compact glass-card)
   Three states picked via [data-season] on <html>:
     spring    → .hero-est--seasonal visible, JS sets eyebrow + CTA + price for spring
     fall      → .hero-est--seasonal visible, JS sets eyebrow + CTA + price for fall
     midseason → .hero-est--midseason visible (static $95 service call)
   ─────────────────────────────────────────────────── */
.hero__estimator {
  width: 100%;
  max-width: 720px;
  margin: clamp(0.5rem, 2vw, 1rem) auto 0;
  display: flex;
  justify-content: center;
}
/* Default: hide both blocks until JS sets data-season; failsafe shows spring */
.hero-est { display: none; }
[data-season="spring"] .hero-est--seasonal,
[data-season="fall"]   .hero-est--seasonal,
:root:not([data-season]) .hero-est--seasonal { display: flex; }
[data-season="midseason"] .hero-est--midseason { display: flex; }

.hero-est {
  flex-direction: column;
  width: 100%;
  background: rgba(15, 31, 20, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(243, 144, 25, 0.5);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
  padding: 18px 22px 20px;
  text-align: left;
  color: #fff;
}

.hero-est__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3c98b;
}
.hero-est__pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f39019;
  box-shadow: 0 0 0 0 rgba(243, 144, 25, 0.7);
  animation: heroPulse 1.8s infinite;
  flex-shrink: 0;
}

.hero-est__body {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-est__body--midseason {
  flex-wrap: nowrap;
}

.hero-est__stepper {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  padding: 5px;
  flex-shrink: 0;
}
.hero-est__btn {
  width: 38px; height: 38px;
  border: none;
  border-radius: 8px;
  background: #f39019;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.15s ease;
}
.hero-est__btn:hover { background: #d97c10; transform: scale(1.04); }
.hero-est__btn:disabled {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
  transform: none;
}
.hero-est__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  min-width: 56px;
  padding: 0 6px;
}
.hero-est__count span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.hero-est__count small {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 600;
}

.hero-est__readout {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-est__amount {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.hero-est__amount small {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 6px;
  letter-spacing: 0;
  text-shadow: none;
  vertical-align: middle;
}
.hero-est__tier {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
}

.hero-est__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f39019;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 12px 20px;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.hero-est__cta:hover {
  background: #d97c10;
  transform: translateY(-1px);
}
.hero-est__cta-arrow {
  font-weight: 700;
  transition: transform 0.2s ease;
}
.hero-est__cta:hover .hero-est__cta-arrow { transform: translateX(3px); }
.hero-est__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Quote-only mode (16+ zones) — readout becomes "Custom Quote" */
.hero-est--quote .hero-est__amount {
  font-size: 22px;
  color: #FFD79A;
}

/* Tablet (561-900px) — iPad portrait, small laptops. Body stays single-row.
   Sits between mobile and full desktop in every dimension so the card looks
   proportionate to the headline at this viewport size. */
@media (min-width: 560px) and (max-width: 960px) {
  .hero__estimator { max-width: 620px; }
  .hero-est { padding: 14px 18px 16px; border-radius: 13px; }
  .hero-est__head { margin-bottom: 12px; font-size: 11.5px; }
  .hero-est__body { gap: 13px; }
  .hero-est__btn { width: 34px; height: 34px; font-size: 18px; }
  .hero-est__stepper { padding: 4px; gap: 3px; }
  .hero-est__count { min-width: 50px; padding: 0 4px; }
  .hero-est__count span { font-size: 23px; }
  .hero-est__amount { font-size: 30px; }
  .hero-est__amount small { font-size: 12.5px; }
  .hero-est__tier { font-size: 12px; }
  .hero-est__cta { font-size: 14px; padding: 11px 16px; }
}

/* Mobile: keep stepper + readout side-by-side, CTA wraps to its own row.
   Cuts ~3 rows of vertical height vs the old all-stacked layout. */
@media (max-width: 560px) {
  .hero__estimator { max-width: 100%; }
  .hero-est { padding: 12px 14px 14px; border-radius: 12px; }
  .hero-est__head { margin-bottom: 10px; font-size: 10.5px; gap: 7px; }
  .hero-est__pulse { width: 7px; height: 7px; }
  .hero-est__body { gap: 10px 12px; align-items: center; }
  .hero-est__btn { width: 30px; height: 30px; font-size: 17px; border-radius: 7px; }
  .hero-est__stepper { padding: 4px; gap: 3px; }
  .hero-est__count { min-width: 42px; padding: 0 3px; }
  .hero-est__count span { font-size: 19px; }
  .hero-est__count small { font-size: 9px; margin-top: 2px; }
  .hero-est__readout { gap: 1px; }
  .hero-est__amount { font-size: 24px; }
  .hero-est__amount small { font-size: 11px; margin-left: 5px; }
  .hero-est__tier { font-size: 11px; }
  .hero-est__cta {
    flex: 0 0 100%;       /* full-width = wraps to own row */
    justify-content: center;
    font-size: 14px;
    padding: 11px 14px;
  }
  /* Mid-season variant: stack readout + CTA */
  .hero-est__body--midseason { flex-wrap: wrap; }
}

/* Very narrow phones (iPhone SE etc.) — drop tier line, tighten further */
@media (max-width: 380px) {
  .hero-est { padding: 11px 12px 12px; }
  .hero-est__head { font-size: 10px; letter-spacing: 0.12em; }
  .hero-est__btn { width: 28px; height: 28px; font-size: 16px; }
  .hero-est__count span { font-size: 18px; }
  .hero-est__amount { font-size: 22px; }
  .hero-est__tier { display: none; }   /* hide on tiny screens to save a row */
}

/* ── Scroll-band estimator (mobile-only)
   On phones (≤768px) the in-hero estimator is hidden and this band picks
   it up — appears immediately below the hero as the first scroll reveal.
   Tablets and desktops keep the in-hero estimator instead. */
.hero-est-band {
  display: none;             /* hidden by default; toggled on at ≤768px */
  background: linear-gradient(180deg, #0F1F14 0%, #122A18 100%);
  padding: 24px 0 28px;
  border-bottom: 1px solid rgba(243, 144, 25, 0.18);
  position: relative;
}
.hero-est-band::before {
  /* subtle dot-grid texture echoing the cta-banner pattern */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.hero-est-band__inner {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 640px;
  padding-inline: 16px;
}
.hero-est-band .hero-est {
  width: 100%;
  background: rgba(15, 31, 20, 0.72);
}

/* Visibility toggle by viewport — match the hero-relax breakpoints.
   Whenever the hero gets constrained (narrow OR short), in-hero estimator
   would crowd the content. Use the scroll-band in those cases instead. */
@media (max-width: 760px), (max-height: 900px) {
  .hero__estimator { display: none; }
  .hero-est-band   { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-est__pulse { animation: none; }
  .hero-est__btn,
  .hero-est__cta,
  .hero-est__cta-arrow { transition: none; }
}

/* ── Same-day bridge section ── */
.sd-bridge {
  position: relative;
  background-image: url('bridge-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(40px, 5vw, 60px) 0 clamp(56px, 7vw, 88px);
  margin-top: -40px;
  overflow: hidden;
  isolation: isolate;
}
.sd-bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(15, 31, 20, 0.55) 0%,
    rgba(255, 255, 255, 0.55) 18%,
    rgba(255, 255, 255, 0.48) 55%,
    rgba(237, 244, 228, 0.80) 100%
  );
}
.sd-bridge::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 80px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(247,250,242,0) 0%, #f7faf2 100%);
  pointer-events: none;
}
.sd-bridge__grid {
  max-width: 1600px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.sd-bridge__media {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.sd-bridge__art {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 32px rgba(15, 31, 20, 0.18));
  animation: sdFloat 6s ease-in-out infinite;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.sd-bridge__art:hover {
  transform: scale(1.04) rotate(-1deg);
  filter: drop-shadow(0 24px 40px rgba(15, 31, 20, 0.25));
}
@keyframes sdFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.sd-bridge__panel {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: clamp(16px, 2.2vw, 24px);
  box-shadow: 0 24px 48px -16px rgba(15, 31, 20, 0.20);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sd-bridge__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  background: rgba(46, 169, 90, 0.12);
  color: #1a4728;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
}
.sd-bridge__pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2ea95a;
  box-shadow: 0 0 0 3px rgba(46, 169, 90, 0.25);
  animation: pulse 2s infinite;
}
.sd-bridge__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}
.sd-bridge__input--full,
.sd-bridge__submit {
  grid-column: 1 / -1;
}
.sd-bridge__input {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 48px;
  width: 100%;
}
.sd-bridge__input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 169, 90, 0.15);
}
.sd-bridge__select { cursor: pointer; }
.sd-bridge__submit {
  width: 100%;
  padding: 14px 24px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.02em;
  min-height: 52px;
  margin-top: 4px;
  box-shadow: 0 8px 20px -4px rgba(26, 71, 40, 0.35);
}
.sd-bridge__submit:hover {
  background: var(--green-mid);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -4px rgba(26, 71, 40, 0.45);
}
.sd-bridge__submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.sd-bridge__result {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}
.sd-bridge__result a { text-decoration: underline; font-weight: 600; }
.sd-bridge__result--success {
  background: rgba(74,140,92,0.12);
  border: 1px solid rgba(74,140,92,0.30);
  color: var(--green);
}
.sd-bridge__result--success a { color: var(--green); }
.sd-bridge__result--error {
  background: rgba(224,123,36,0.10);
  border: 1px solid rgba(224,123,36,0.30);
  color: var(--amber);
}
.sd-bridge__result--error a { color: var(--amber); }
@media (max-width: 1024px) {
  .sd-bridge__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sd-bridge__art { max-width: 460px; }
}
@media (max-width: 540px) {
  .sd-bridge { padding: 32px 0 40px; }
  .sd-bridge__panel { padding: 20px; border-radius: 16px; }
  .sd-bridge__art { max-width: 380px; }
  .sd-bridge__form { grid-template-columns: 1fr; }
  .sd-bridge__input { font-size: 16px; }
}

/* ============================================================
   HEADER V2 — Service-Mode Two-Tier
   - Tier 1: utility strip (location · same-day badge · phone)
   - Tier 2: main bar (logo · links · "Get a Quote" CTA)
   - Hamburger drops in at 1024px
   - On .nav-solid pages, utility strip stays visible (preserves phone access)
   ============================================================ */

/* Reset old .nav padding/background — both tiers manage their own */
.nav.nav-v2 {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* ─── TIER 1: UTILITY STRIP ─── */
.nav-utility-strip {
  background: rgba(10, 24, 16, calc(0.55 + var(--nav-bg-alpha, 0) * 0.4));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(243,144,25,0.16);
  color: rgba(255,255,255,0.82);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  /* Collapse-on-scroll: utility strip slides up + fades as user scrolls.
     Skipped on .nav-solid pages so phone stays reachable. */
  overflow: hidden;
  max-height: 60px;
  transform: translateY(0);
  opacity: 1;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    border-color 0.3s ease;
}
/* Collapse only on transparent-nav pages; solid-nav pages keep utility strip visible */
.nav.scrolled.nav-v2:not(.nav-solid) .nav-utility-strip {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  border-bottom-color: transparent;
  pointer-events: none;
}
/* On solid-nav pages, the utility strip background should always be solid */
.nav.nav-v2.nav-solid .nav-utility-strip {
  background: rgba(10, 24, 16, 0.95);
}
.nav-utility-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-utility-strip__location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.75);
}
.nav-utility-strip__same-day {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11.5px;
}
.nav-utility-strip__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(243,144,25,0.65);
  animation: pjlPulseDot 2.2s infinite;
}
@keyframes pjlPulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(243,144,25,0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(243,144,25,0); }
  100% { box-shadow: 0 0 0 0 rgba(243,144,25,0); }
}
.nav-utility-strip__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 5px 13px;
  border-radius: 99px;
  background: rgba(243,144,25,0.12);
  border: 1px solid rgba(243,144,25,0.38);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.nav-utility-strip__phone:hover {
  background: var(--amber);
  border-color: var(--amber);
  transform: translateY(-1px);
  color: #fff;
}
/* Customer-portal login link in the utility strip — sits to the right
   of the phone number. Subtle outline style so it doesn't compete with
   the orange phone CTA. */
.nav-utility-strip__login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.90);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.nav-utility-strip__login:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
  transform: translateY(-1px);
}
.nav-utility-strip__login .nav-utility-strip__icon { opacity: 0.90; }

@media (prefers-reduced-motion: reduce) {
  .nav-utility-strip__pulse { animation: none; }
}

/* ─── TIER 2: MAIN BAR ─── */
.nav.nav-v2 > .nav-inner {
  background: rgba(15, 31, 20, var(--nav-bg-alpha, 0));
  -webkit-backdrop-filter: blur(var(--nav-blur, 0px));
  backdrop-filter: blur(var(--nav-blur, 0px));
  height: 128px;
  max-width: 100%;
  padding: 0 28px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: height 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled.nav-v2 > .nav-inner { height: 104px; }

/* Subtle amber underglow on scroll */
.nav.nav-v2 > .nav-inner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,144,25,0.5) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.nav.scrolled.nav-v2 > .nav-inner::after { opacity: 1; }

/* Logo — full lockup. Sized so the small "LAND SERVICES" wordmark stays legible. */
.nav.nav-v2 .nav-logo img {
  height: 112px !important;
  width: auto;
  transition: height 0.3s ease;
}
.nav.scrolled.nav-v2 .nav-logo img { height: 88px !important; }

/* Right cluster — links + CTA */
.nav.nav-v2 .nav-main {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* Links with active-page underline */
.nav.nav-v2 .nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav.nav-v2 .nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
  padding: 9px 14px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  min-height: 40px;
  position: relative;
}
.nav.nav-v2 .nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.nav.nav-v2 .nav-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px; right: 14px;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.6;
}
.nav.nav-v2 .nav-links a:hover::after { transform: scaleX(0.5); }
.nav.nav-v2 .nav-links a.is-active { color: #fff; }
.nav.nav-v2 .nav-links a.is-active::after {
  transform: scaleX(1);
  height: 2.5px;
  opacity: 1;
}

/* Inline SVG icons — render identically across all OS/browsers */
.nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #F59B4A;
  filter: drop-shadow(0 0 5px rgba(243,144,25,0.4));
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}
.nav-link-icon svg { width: 100%; height: 100%; display: block; }
.nav.nav-v2 .nav-links a:hover .nav-link-icon { transform: translateY(-1px); }
.nav.nav-v2 .nav-links a.is-active .nav-link-icon { color: #ffb54a; }

.nav-utility-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-utility-strip__icon svg { display: block; }
.nav-utility-strip__location .nav-utility-strip__icon {
  width: 11px; height: 13px;
  color: #F59B4A;
}
.nav-utility-strip__phone .nav-utility-strip__icon {
  width: 12px; height: 12px;
}

/* CTA — single primary action: Get a Quote */
.nav.nav-v2 .nav-cta--quote {
  margin-left: 8px;
  background: linear-gradient(135deg, #F59B4A 0%, #C96A2A 100%);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(224,123,36,0.32), 0 0 0 0 rgba(243,144,25,0), inset 0 1px 0 rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  min-height: 42px;
  border: none;
  /* Idle "breath" pulse — subtle ring expansion every 9s */
  animation: pjlCtaBreath 9s ease-out 6s infinite;
}
@keyframes pjlCtaBreath {
  0%, 78% {
    box-shadow:
      0 6px 18px rgba(224,123,36,0.32),
      0 0 0 0 rgba(243,144,25,0),
      inset 0 1px 0 rgba(255,255,255,0.18);
  }
  82% {
    box-shadow:
      0 6px 18px rgba(224,123,36,0.32),
      0 0 0 0 rgba(243,144,25,0.50),
      inset 0 1px 0 rgba(255,255,255,0.18);
  }
  92%, 100% {
    box-shadow:
      0 6px 18px rgba(224,123,36,0.32),
      0 0 0 14px rgba(243,144,25,0),
      inset 0 1px 0 rgba(255,255,255,0.18);
  }
}
.nav.nav-v2 .nav-cta--quote:hover,
.nav.nav-v2 .nav-cta--quote:focus-visible {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav.nav-v2 .nav-cta--quote { animation: none; }
}
.nav.nav-v2 .nav-cta--quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffb54a 0%, #d97a2a 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav.nav-v2 .nav-cta--quote > * { position: relative; z-index: 1; }
.nav.nav-v2 .nav-cta--quote:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(224,123,36,0.5), inset 0 1px 0 rgba(255,255,255,0.22);
}
.nav.nav-v2 .nav-cta--quote:hover::before { opacity: 1; }
.nav-cta-arrow { transition: transform 0.25s ease; display: inline-block; }
.nav.nav-v2 .nav-cta--quote:hover .nav-cta-arrow { transform: translateX(3px); }

/* Hide legacy nav-utility wrapper inside v2 */
.nav.nav-v2 .nav-utility { display: none; }

/* ─── HAMBURGER (drops in at 1024px) ─── */
.nav.nav-v2 .nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 12px;
  margin-left: auto;
}
.nav.nav-v2 .nav-hamburger span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}

@media (max-width: 1024px) {
  .nav.nav-v2 .nav-main { display: none; }
  .nav.nav-v2 .nav-hamburger { display: flex; }
  .nav.nav-v2 > .nav-inner { padding: 0 18px; }
}

/* Utility strip — collapse gracefully on small viewports */
@media (max-width: 760px) {
  .nav-utility-strip__location { display: none; }
  .nav-utility-strip__inner { padding: 0 16px; height: 34px; gap: 12px; }
  .nav-utility-strip__same-day {
    margin-left: 0;
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
  .nav-utility-strip__phone {
    margin-left: auto;
    padding: 4px 11px;
    font-size: 12.5px;
  }
  .nav-utility-strip__login {
    margin-left: 6px;
    padding: 4px 10px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .nav-utility-strip__same-day { display: none; }
  .nav-utility-strip__phone { margin-left: auto; }
  /* Login link hides on tiny phones — it's still in the mobile drawer
     menu so users can reach it without crowding the strip. */
  .nav-utility-strip__login { display: none; }
  .nav.nav-v2 > .nav-inner { height: 92px; }
  .nav.nav-v2 .nav-logo img { height: 76px !important; }
}

/* ─── REDESIGNED MOBILE MENU (v2 only) ─── */
.nav.nav-v2 ~ .nav-mobile {
  bottom: 0;
  flex-direction: column;
  padding: 0;
  gap: 0;
  background: rgba(10, 22, 14, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(243,144,25,0.18);
  overflow: hidden;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav-v2 ~ .nav-mobile a {
  border-bottom: none;
  padding: 0;
  min-height: auto;
  font-weight: inherit;
}

.nav.nav-v2 ~ .nav-mobile .nav-mobile__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(243,144,25,0.16) 0%, rgba(201,106,42,0.06) 100%);
  border-bottom: 1px solid rgba(243,144,25,0.22);
  color: rgba(255,255,255,0.95);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__badge-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(243,144,25,0.65);
  animation: pjlPulseDot 2.2s infinite;
}

.nav.nav-v2 ~ .nav-mobile .nav-mobile__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__link:hover,
.nav.nav-v2 ~ .nav-mobile .nav-mobile__link:focus-visible {
  background: rgba(255,255,255,0.06);
  color: #fff;
  outline: none;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__link.is-active {
  background: rgba(243,144,25,0.12);
  color: #fff;
}
/* Login link in the mobile drawer — visually separated from primary nav
   with a top border, so it reads as a utility action like the call/quote
   buttons below. */
.nav.nav-v2 ~ .nav-mobile .nav-mobile__link--login {
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 14px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__link--login::before {
  content: "→ ";
  color: rgba(243,144,25,0.85);
  margin-right: 6px;
}

.nav.nav-v2 ~ .nav-mobile .nav-mobile__group {
  margin: 6px 0;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__group-label {
  display: block;
  padding: 8px 14px 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(243,144,25,0.85);
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--amber);
  filter: drop-shadow(0 0 6px rgba(243,144,25,0.35));
  flex-shrink: 0;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__link-icon svg {
  width: 100%; height: 100%; display: block;
}

.nav.nav-v2 ~ .nav-mobile .nav-mobile__actions {
  display: flex;
  gap: 10px;
  padding: 14px 16px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(8, 18, 12, 0.85);
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-height: 52px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action--call {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.20);
  color: #fff;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action--call:hover,
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action--call:active {
  background: rgba(255,255,255,0.10);
  transform: translateY(-1px);
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action--quote {
  background: linear-gradient(135deg, #F59B4A 0%, #C96A2A 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(224,123,36,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action--quote:hover,
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action--quote:active {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(224,123,36,0.50);
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action-icon svg {
  width: 100%; height: 100%; display: block;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action-arrow {
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  transition: transform 0.2s ease;
}
.nav.nav-v2 ~ .nav-mobile .nav-mobile__action--quote:hover .nav-mobile__action-arrow {
  transform: translateX(3px);
}

/* A11Y: keyboard focus rings (only show for keyboard, not mouse) */
.nav.nav-v2 .nav-logo:focus-visible,
.nav.nav-v2 .nav-links a:focus-visible,
.nav-utility-strip__phone:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 8px;
}
.nav-utility-strip__phone:focus-visible {
  outline-color: #fff;
  outline-offset: 2px;
}
.nav.nav-v2 .nav-cta--quote:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow:
    0 6px 18px rgba(224,123,36,0.45),
    0 0 0 4px rgba(243,144,25,0.40),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.nav.nav-v2 .nav-hamburger:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
  border-radius: 6px;
}

/* Mobile dropdown — push below the two-tier header.
   On non-solid pages, scrolling collapses the utility strip → dropdown sits higher.
   On solid pages, utility strip stays → dropdown stays at full-header offset. */
.nav.nav-v2 ~ .nav-mobile { top: 166px; }                                /* 38 utility + 128 main */
.nav.scrolled.nav-v2:not(.nav-solid) ~ .nav-mobile { top: 104px; }       /* utility collapsed */
.nav.scrolled.nav-v2.nav-solid ~ .nav-mobile { top: 142px; }             /* utility stays + main scrolled */
@media (max-width: 1024px) {
  .nav.nav-v2 ~ .nav-mobile { top: 166px; }
  .nav.scrolled.nav-v2:not(.nav-solid) ~ .nav-mobile { top: 104px; }
  .nav.scrolled.nav-v2.nav-solid ~ .nav-mobile { top: 142px; }
}
@media (max-width: 760px) {
  .nav.nav-v2 ~ .nav-mobile { top: 162px; }                              /* 34 + 128 */
  .nav.scrolled.nav-v2:not(.nav-solid) ~ .nav-mobile { top: 104px; }
  .nav.scrolled.nav-v2.nav-solid ~ .nav-mobile { top: 138px; }           /* 34 + 104 */
}
@media (max-width: 480px) {
  .nav.nav-v2 ~ .nav-mobile { top: 126px; }                              /* 34 + 92 */
  .nav.scrolled.nav-v2:not(.nav-solid) ~ .nav-mobile { top: 92px; }
  .nav.scrolled.nav-v2.nav-solid ~ .nav-mobile { top: 126px; }
}

/* ════════════════════════════════════════════════════════════════════
   QUOTE TOOL TEASER — auto-cycling live preview block
   Used on multiple pages (sprinkler-systems, homepage). Markup pattern:
     .sprk-quote-teaser
       .sprk-quote-teaser__copy  (eyebrow + h2 + p + cta + bullets)
       .sprk-quote-teaser__art   (frame with cycling img + tag + caption)
   Each page provides its own inline JS to drive the frame rotation.
   ════════════════════════════════════════════════════════════════════ */
.sprk-quote-teaser {
  background:
    radial-gradient(ellipse 50% 70% at 8% 15%, rgba(243,144,25,0.20), transparent 60%),
    radial-gradient(ellipse 60% 60% at 95% 90%, rgba(74,140,92,0.22), transparent 55%),
    linear-gradient(135deg, #112418 0%, #0F1F14 50%, #0a1810 100%);
  border-radius: var(--r-xl);
  padding: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  color: #fff;
  box-shadow: 0 30px 80px rgba(15,31,20,0.32);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sprk-quote-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: -1;
}
.sprk-quote-teaser::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243,144,25,0.55) 50%, transparent 100%);
}

.sprk-quote-teaser__copy { position: relative; z-index: 2; }
.sprk-quote-teaser__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: rgba(243,144,25,0.10);
  border: 1px solid rgba(243,144,25,0.32);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 99px;
  margin-bottom: 18px;
}
.sprk-quote-teaser__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(243,144,25,0.65);
  animation: pjlPulseDot 2.2s infinite;
}
.sprk-quote-teaser__copy h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.40);
}
.sprk-quote-teaser__copy h2 .accent {
  background: linear-gradient(135deg, #F5B14A 0%, #F59B4A 50%, #C96A2A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sprk-quote-teaser__copy p {
  color: rgba(255,255,255,0.80);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 50ch;
}
.sprk-quote-teaser__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.sprk-quote-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #F59B4A 0%, #C96A2A 100%);
  color: #fff !important;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 11px;
  box-shadow: 0 10px 26px rgba(224,123,36,0.42), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.sprk-quote-teaser__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ffb54a 0%, #d97a2a 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sprk-quote-teaser__cta > * { position: relative; z-index: 1; }
.sprk-quote-teaser__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(224,123,36,0.55);
}
.sprk-quote-teaser__cta:hover::before { opacity: 1; }
.sprk-quote-teaser__cta-arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}
.sprk-quote-teaser__cta:hover .sprk-quote-teaser__cta-arrow {
  transform: translateX(4px);
}
.sprk-quote-teaser__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
}
.sprk-quote-teaser__bullets li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sprk-quote-teaser__bullets li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(243,144,25,0.18);
  color: var(--amber-light);
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.sprk-quote-teaser__art { position: relative; z-index: 2; }
.sprk-quote-teaser__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #1f3a2a 0%, #112418 100%);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(243,144,25,0.20),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.sprk-quote-teaser__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.55s ease;
}
.sprk-quote-teaser__frame img.is-swapping { opacity: 0.0; }

.sprk-quote-teaser__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-mid) 100%);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 99px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.30);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.sprk-quote-teaser__tag.is-back {
  background: linear-gradient(135deg, var(--amber-light) 0%, var(--amber) 100%);
  box-shadow: 0 6px 14px rgba(224,123,36,0.45);
}
.sprk-quote-teaser__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10, 22, 14, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,0.30);
}
.sprk-quote-teaser__caption-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  animation: pjlPulseDot 2.2s infinite;
}
.sprk-quote-teaser__ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: rgba(10, 22, 14, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(243,144,25,0.32);
  border-radius: 99px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.sprk-quote-teaser__ribbon-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(243,144,25,0.60);
  animation: pjlPulseDot 2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sprk-quote-teaser__frame img { transition: none; }
}
@media (max-width: 960px) {
  .sprk-quote-teaser { grid-template-columns: 1fr; text-align: left; }
  .sprk-quote-teaser__copy p { max-width: none; }
}
@media (max-width: 760px) {
  .sprk-quote-teaser { grid-template-columns: 1fr; padding: 28px 22px; }
  .sprk-quote-teaser__bullets { gap: 12px; font-size: 12.5px; }
}

/* ============================================
   Live Coverage Checker (Google Places + Distance Matrix)
   Used on: coverage-map.html, quote.html, estimate.html, contact.html
   Variants: hero (dark, frosted glass) — used in all 4 page heroes
   ============================================ */
.cov-hero-checker {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: 30px 32px;
  margin: 18px 0 26px;
  max-width: 760px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.10);
  overflow: hidden;
}
/* Decorative amber accent stripe at top of card */
.cov-hero-checker::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber-light) 50%, var(--amber) 100%);
  opacity: 0.85;
}
.cov-hero-checker__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cov-hero-checker__row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.cov-hero-checker__input-wrap { position: relative; flex: 1 1 340px; min-width: 0; display: flex; align-items: center; }
.cov-hero-checker__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; pointer-events: none; opacity: 0.75; z-index: 1; }
.cov-hero-checker__input {
  flex: 1;
  width: 100%;
  padding: 18px 48px 18px 52px;
  font-size: 17px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: var(--text);
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.cov-hero-checker__input::placeholder { color: var(--text-muted); font-weight: 400; }
.cov-hero-checker__input:focus { outline: none; border-color: var(--amber-light); box-shadow: 0 0 0 4px rgba(245,155,74,0.35), 0 6px 18px rgba(0,0,0,0.25); }
.cov-hero-checker__clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: rgba(15,31,20,0.10); color: var(--text-mid); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; font-weight: 700; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; z-index: 1; }
.cov-hero-checker__clear:hover { background: rgba(15,31,20,0.25); color: #fff; }
.cov-hero-checker__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  background: linear-gradient(135deg, rgba(224,123,36,0.95) 0%, rgba(245,155,74,0.95) 100%);
  border: 1px solid rgba(245,155,74,0.40);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  border-radius: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 18px rgba(224,123,36,0.40);
  letter-spacing: 0.01em;
}
.cov-hero-checker__phone:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(224,123,36,0.55); color: #fff !important; }
.cov-hero-checker__hint {
  font-size: 13px !important;
  color: rgba(255,255,255,0.70) !important;
  margin: 16px 0 0 !important;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.cov-hero-checker__hint::before {
  content: '🔒';
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
@media (max-width: 600px) {
  .cov-hero-checker { padding: 22px 20px; border-radius: 18px; margin: 14px 0 22px; }
  .cov-hero-checker__label { font-size: 14px; }
  .cov-hero-checker__input { font-size: 16px; padding: 16px 44px 16px 46px; }
  .cov-hero-checker__phone { width: 100%; justify-content: center; padding: 14px 22px; }
}

/* Result panel — light card on any background */
.cov-checker__result { margin-top: 22px; padding: 22px 24px; border-radius: 14px; border-left: 5px solid var(--green-light); background: linear-gradient(135deg, var(--green-pale) 0%, #f4f9ec 100%); }
.cov-checker__result.is-warning { border-left-color: var(--amber); background: linear-gradient(135deg, #FFF4E5 0%, #FFEED4 100%); }
.cov-checker__result.is-error { border-left-color: #B14332; background: #FBECE9; }
.cov-checker__result.is-loading { border-left-color: var(--text-muted); background: #F2F2EC; }
.cov-checker__result-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.cov-checker__result-title { font-size: 20px !important; font-weight: 700 !important; color: var(--green) !important; margin: 0 0 8px !important; text-transform: none !important; letter-spacing: -0.005em !important; line-height: 1.3 !important; }
.cov-checker__result.is-warning .cov-checker__result-title { color: #8C4A0E !important; }
.cov-checker__result.is-error .cov-checker__result-title { color: #82301F !important; }
.cov-checker__result-detail { font-size: 15px !important; line-height: 1.6 !important; color: var(--text) !important; margin: 0 0 14px !important; }
.cov-checker__result-detail strong { color: var(--green); }
.cov-checker__result.is-warning .cov-checker__result-detail strong { color: #8C4A0E; }
.cov-checker__result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cov-checker__result-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; font-size: 14px; font-weight: 700; border-radius: 99px; text-decoration: none; transition: transform 0.15s ease, background 0.15s ease; }
.cov-checker__result-actions .primary { background: var(--amber); color: #fff; box-shadow: 0 6px 16px rgba(224,123,36,0.30); }
.cov-checker__result-actions .primary:hover { background: var(--amber-light); transform: translateY(-1px); }
.cov-checker__result-actions .secondary { background: rgba(15,31,20,0.06); color: var(--green); border: 1px solid rgba(15,31,20,0.10); }
.cov-checker__result-actions .secondary:hover { background: rgba(15,31,20,0.10); }

/* Google Places autocomplete dropdown skin.
   z-index must beat the chat-widget panel (99999 in css/chat-widget.css) so
   the dropdown isn't hidden behind the panel when Places is wired into the
   in-chat booking / contact-capture forms. The pac-container is appended
   to <body> by the Maps JS, so a global rule is the only way to lift it. */
.pac-container { z-index: 100001 !important; border-radius: 12px; margin-top: 6px; box-shadow: 0 12px 32px rgba(15,31,20,0.18); border: 1px solid var(--border); font-family: inherit; }
.pac-item { padding: 10px 14px; font-size: 14px; cursor: pointer; border-top: 1px solid var(--border); }
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected { background: var(--green-pale); }
.pac-item-query { font-weight: 600; color: var(--green); }

/* ============================================================
   Hero gradient text — kill italic site-wide
   ============================================================
   Every hero across the site uses the same brand pattern:
       <h1>White headline — <em>amber-gradient highlight.</em></h1>
   with `-webkit-background-clip: text` to paint the gradient
   inside the letters. Italic was originally part of that pattern
   but caused a recurring visual bug: background-clip:text only
   paints inside each glyph's geometric box, while italic glyphs
   lean right PAST that box. At any line-wrap or card-edge the
   italic overhang fell into "no gradient territory" and rendered
   transparent — letters looked cut off (the "R" in "WATER" on
   drip, the "D" in "DIAGNOSED" on repair). The padding +
   box-decoration-break workaround was fragile and kept showing
   up. Drop the italic; keep the amber gradient. The gradient
   alone is the brand pop.

   `[class*="-hero"]` matches every hero variant site-wide:
   .drip-hero, .repair-hero, .spring-hero, .fall-hero, .post-hero,
   .blog-hero, .install-hero, .systems-hero, .about-hero-content,
   etc. The `!important` is needed because each page sets
   `.X-hero h1 em { font-style: italic }` inline (specificity
   beats this attribute selector). Adding any new .X-hero class
   on a future page inherits the kill automatically. */
[class*="-hero"] h1 em {
  font-style: normal !important;
}

/* ============================================================
   Field-note figure — side-by-side photo + caption card
   ============================================================
   Replaces the old `<figure max-width:720px><img width:100%>`
   pattern that blew up vertically when given a portrait photo.
   Two columns on desktop: photo on the left (native aspect
   ratio, no crop), eyebrow + caption on the right. Stacks on
   mobile with the photo width-constrained so it never towers.

   Used on: sprinkler-repair, sprinkler-fall-winterization,
   blog-signs-sprinkler-needs-repair, drip-irrigation. */
.field-note-fig {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  align-items: center;
  max-width: 880px;
  margin: 32px auto;
  padding: 24px;
  background: var(--cream);
  border-left: 4px solid var(--green);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(15, 31, 20, 0.05);
}
.field-note-fig__photo {
  margin: 0;
  min-width: 0;
}
.field-note-fig__photo img {
  display: block;
  width: 100%;
  height: auto; /* native aspect ratio — no crop */
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 31, 20, 0.18);
}
.field-note-fig__copy {
  min-width: 0;
}
.field-note-fig__eyebrow {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.field-note-fig__caption {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0;
  font-style: italic;
}
@media (max-width: 720px) {
  .field-note-fig {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
    margin: 24px auto;
  }
  .field-note-fig__photo {
    max-width: 280px;
    margin: 0 auto;
  }
  .field-note-fig__caption {
    font-size: 15px;
  }
}

/* ── Variant: Polaroid (option B) — small centered photo with white
   "instant photo" frame, caption + eyebrow below. Casual snapshot feel. */
.field-note-fig--polaroid {
  display: block;
  max-width: 480px;
  margin: 36px auto;
  padding: 0;
  background: transparent;
  border-left: none;
  box-shadow: none;
  text-align: center;
}
.field-note-fig--polaroid .field-note-fig__photo {
  max-width: 340px;
  margin: 0 auto 22px;
  padding: 12px 12px 14px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 14px 32px rgba(15, 31, 20, 0.20), 0 2px 6px rgba(15, 31, 20, 0.10);
  min-width: 0;
}
.field-note-fig--polaroid .field-note-fig__photo img {
  border-radius: 0;
  box-shadow: none;
}
.field-note-fig--polaroid .field-note-fig__copy {
  max-width: 520px;
  margin: 0 auto;
}
.field-note-fig--polaroid .field-note-fig__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.field-note-fig--polaroid .field-note-fig__caption {
  font-size: 15px;
  text-align: center;
}
@media (max-width: 720px) {
  .field-note-fig--polaroid .field-note-fig__photo {
    max-width: 280px;
  }
}

/* ── Variant: Pullquote-led (option C) — caption is the feature, set
   in Barlow Condensed at headline scale. Photo demoted to a small
   right-floated thumbnail. Editorial / magazine voice. */
.field-note-fig--pullquote {
  display: block;
  max-width: 760px;
  margin: 36px auto;
  padding: 32px 32px 28px;
  background: var(--cream);
  border-left: 4px solid var(--green);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.field-note-fig--pullquote .field-note-fig__photo {
  float: right;
  max-width: 200px;
  margin: 4px 0 12px 28px;
  shape-outside: margin-box;
  min-width: 0;
}
.field-note-fig--pullquote .field-note-fig__photo img {
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(15, 31, 20, 0.18);
}
.field-note-fig--pullquote .field-note-fig__copy {
  min-width: 0;
}
.field-note-fig--pullquote .field-note-fig__eyebrow {
  display: block;
  margin-bottom: 14px;
}
.field-note-fig--pullquote .field-note-fig__caption {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  font-style: italic;
  color: var(--text);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .field-note-fig--pullquote {
    padding: 24px;
  }
  .field-note-fig--pullquote .field-note-fig__photo {
    float: none;
    max-width: 240px;
    margin: 0 auto 18px;
    display: block;
  }
  .field-note-fig--pullquote .field-note-fig__caption {
    font-size: 19px;
    text-align: left;
  }
}

/* ── Prototype-only label: small divider so we can see which variant
   is which when stacked side-by-side on sprinkler-repair.html.
   Remove after picking a final layout. */
.prototype-label {
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 32px 0 -8px;
}