/* ============================================================
   Express Lawn Sprinklers — Brand site
   Visual system: bold brand green (matches logo oval), warm
   cream paper, real photography, Manrope sans throughout.
   ============================================================ */

:root {
  --green:      #0c5a2e;
  --green-dk:   #074120;
  --green-mid:  #1d7842;
  --green-lt:   #e6efd9;
  --leaf:       #cfe0bc;

  --cream:      #f6f3eb;
  --cream-2:    #ece7d8;
  --white:      #ffffff;

  --ink:        #18180f;
  --ink-2:      #4a4a3e;
  --ink-3:      #82806e;

  --rule:       rgba(24,24,15,0.10);
  --rule-2:     rgba(24,24,15,0.06);

  --sun:        #f6c344;
  --red:        #b8371b;

  --sans:       "Manrope", system-ui, sans-serif;

  --maxw:       1240px;
  --gutter:     32px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--cream); color: var(--ink); }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor;
}
.tabular { font-variant-numeric: tabular-nums; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ */
/* NAV                                                          */
/* ------------------------------------------------------------ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--white);
  transition: background .35s ease, color .35s ease, padding .3s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
/* Push the nav-links + Call Now cluster to the right edge, with a clear gap
   between the logo block on the left and the menu on the right. */
.nav-links { margin-left: auto; }
.nav-call { margin-left: 8px; } /* tight against the menu, both right-anchored */
.nav.is-solid {
  background: var(--cream);
  color: var(--ink);
  padding: 12px var(--gutter);
  border-bottom-color: var(--rule);
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
}
.nav-brand img {
  height: 108px; width: auto;
  transition: height .3s ease;
}
.nav.is-solid .nav-brand img { height: 92px; }
.nav-brand .credentials {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
  line-height: 1.4;
  display: flex; flex-direction: column;
}
.nav-links {
  display: flex; gap: 22px;
  align-items: center;
  font-size: 14px;
  font-weight: 800;            /* matches the Call Now button — see .nav-cta */
  letter-spacing: 0.04em;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  /* Do NOT use the `margin` shorthand here — it would clobber the
     `margin-left: auto` set on .nav-links above. */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.nav-links li { list-style: none; }
.nav-links > li {
  display: flex;       /* keeps the chevron button vertically centred with the
                          link text so "Services" doesn't drop a baseline. */
  align-items: center;
}
.nav-links a { position: relative; padding: 6px 0; opacity: 0.95; white-space: nowrap; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1.5px; background: currentColor; transition: right .3s ease;
}
.nav-links a:hover::after { right: 0; }

/* WordPress admin bar offset — when logged in, the 32px (or 46px on narrow
   admin views) admin bar sits at the very top. Push our fixed nav below it
   so the logo and links aren't hidden behind it. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

/* --- Submenus (e.g. Services → Installation, Service & Repair, etc.) --- */
.nav-links .menu-item-has-children { position: relative; }
.nav-links .menu-item-has-children > a {
  display: inline-flex; align-items: center;
}
.menu-item-toggle {
  background: transparent; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  margin-left: 4px;
  width: 16px; height: 16px;   /* fixed box keeps Services' baseline level */
  color: inherit;
  cursor: pointer;
  transition: transform .2s ease;
  line-height: 1;
}
.menu-item-has-children.is-open > .menu-item-toggle { transform: rotate(180deg); }
.menu-item-toggle:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 2px;
  border-radius: 4px;
}

.nav-links .sub-menu {
  list-style: none;
  margin: 0; padding: 8px 0;
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  min-width: 260px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 22px 40px -22px rgba(0,0,0,0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 90;
}
.nav-links .menu-item-has-children.is-open > .sub-menu,
.nav-links .menu-item-has-children:hover > .sub-menu,
.nav-links .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-links .sub-menu li { list-style: none; }
.nav-links .sub-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  opacity: 1;
}
.nav-links .sub-menu a::after { display: none; }
.nav-links .sub-menu a:hover,
.nav-links .sub-menu a:focus-visible { background: var(--rule-2); }
.nav-call {
  display: flex; justify-content: flex-end; align-items: center; gap: 14px;
}
.nav-phone {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 8px;
}
.nav-phone .pin {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--white);
  color: var(--green);
  display: grid; place-items: center;
}
.nav.is-solid .nav-phone .pin {
  background: var(--green); color: var(--white);
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white);
  color: var(--green);
  padding: 12px 22px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.nav.is-solid .nav-cta {
  background: var(--green); color: var(--white);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 22px -10px rgba(0,0,0,0.28);
}
.nav-cta-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: grid; place-items: center;
  flex: 0 0 24px;
}
.nav.is-solid .nav-cta-icon { background: var(--white); color: var(--green); }
.nav-cta-call { padding-left: 8px; }
.nav-cta:focus-visible, .nav-phone:focus-visible, .nav-links a:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Mobile hamburger toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  border-radius: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* ------------------------------------------------------------ */
/* HERO — full-bleed video                                      */
/* ------------------------------------------------------------ */
.hero {
  position: relative;
  height: min(96vh, 980px);
  min-height: 700px;
  overflow: hidden;
  color: var(--white);
  background: #0a3318;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,32,16,0.45) 0%, rgba(8,32,16,0.10) 30%, rgba(8,32,16,0.20) 60%, rgba(8,32,16,0.78) 100%),
    linear-gradient(90deg, rgba(8,32,16,0.55) 0%, rgba(8,32,16,0.0) 55%);
  z-index: 1;
}
.hero-inner {
  position: relative; z-index: 2;
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 80px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.9;
  margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sun);
  box-shadow: 0 0 0 4px rgba(246,195,68,0.25);
}
.hero h1 {
  font-size: clamp(48px, 7.2vw, 108px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin-bottom: 22px;
}

/* Homepage hero — 2-col .hero-row (text + trust stack) inside the
   original .hero-inner (no override of its positioning), plus a wordmark
   absolutely positioned at the very bottom of .hero so adding it doesn't
   shift any content above the CTAs. The H1 inside .hero-text stays the
   keyword-rich service tagline (SEO + AI-search). */
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 56px;
  width: 100%;
}
.hero-text { max-width: 760px; }

.hero-trust.hero-trust--stack {
  display: flex;
  flex-direction: column;
  gap: 10px 0;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  align-self: end;
}
.hero-trust.hero-trust--stack li {
  position: relative;
  padding-left: 18px;
  white-space: nowrap;
}
.hero-trust.hero-trust--stack li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--sun);
}
.hero-trust.hero-trust--stack li a { color: inherit; border-bottom: 1px solid transparent; }
.hero-trust.hero-trust--stack li a:hover { border-bottom-color: var(--sun); }

/* Wordmark — absolutely anchored to the bottom of .hero so its addition
   does NOT push content above the CTAs upward. Sits in the area that
   .hero-inner already reserves via its padding-bottom (80px). */
.hero .hero-wordmark {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 14px var(--gutter) 16px;
  font-family: var(--sans);
  font-size: clamp(28px, 4.4vw, 56px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(7,65,32,0.55) 100%);
  border-top: 1px solid rgba(255,255,255,0.14);
}

@media (max-width: 900px) {
  .hero-row { grid-template-columns: 1fr; gap: 28px; }
  .hero-trust.hero-trust--stack { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 0; }
  .hero-trust.hero-trust--stack li { white-space: normal; }
  .hero .hero-wordmark { font-size: clamp(20px, 6vw, 32px); padding: 12px var(--gutter) 14px; letter-spacing: 0.02em; }
}
.hero h1 em {
  font-style: normal;
  color: var(--sun);
}
.hero-sub {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  max-width: 50ch;
  color: rgba(255,255,255,0.92);
  margin-bottom: 36px;
  font-weight: 400;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 32px;
}
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .25s ease;
}
.btn-primary {
  background: var(--white);
  color: var(--green);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(0,0,0,0.16); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.65);
}
.btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: var(--white); }
.btn .arrow { font-weight: 800; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 26px 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.hero-trust span {
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-trust span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun);
}

/* Scroll cue */
.hero-cue {
  position: absolute; bottom: 22px; right: var(--gutter);
  z-index: 3;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.hero-cue .line {
  width: 32px; height: 1px; background: rgba(255,255,255,0.6); position: relative; overflow: hidden;
}
.hero-cue .line::after {
  content: ""; position: absolute; left: -32px; top: 0; height: 100%; width: 16px;
  background: var(--white);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
  0% { left: -16px; }
  60% { left: 32px; }
  100% { left: 32px; }
}

/* ------------------------------------------------------------ */
/* PROMISE BAND                                                 */
/* ------------------------------------------------------------ */
.promise {
  background: var(--green);
  color: var(--white);
}
.promise-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 26px var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: center;
}
.promise-item {
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  border-left: 1px solid rgba(255,255,255,0.22);
}
.promise-item:first-child { border-left: 0; padding-left: 0; }
.promise-item .icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: grid; place-items: center;
  color: var(--sun);
}
.promise-item .icon svg { width: 18px; height: 18px; }
.promise-item .k {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 2px;
}
.promise-item .v { font-weight: 700; font-size: 15px; }

/* ------------------------------------------------------------ */
/* SECTION SCAFFOLD                                             */
/* ------------------------------------------------------------ */
.section {
  padding: 110px var(--gutter);
  background: var(--cream);
}
.section.alt { background: var(--white); }
.section.dark { background: var(--green); color: var(--white); }
.section.leaf { background: var(--green-lt); }

.sec-head {
  max-width: 880px;
  margin: 0 auto 64px;
  text-align: center;
}
.sec-head.left { text-align: left; margin-left: 0; }
.sec-title {
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: 14px;
}
.sec-title em { font-style: normal; color: var(--green); }
.section.dark .sec-title em { color: var(--sun); }
.sec-lede {
  font-size: 18px;
  color: var(--ink-2);
  margin-top: 18px;
  line-height: 1.5;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}
.section.dark .sec-lede { color: rgba(255,255,255,0.78); }

/* ------------------------------------------------------------ */
/* SERVICES                                                     */
/* ------------------------------------------------------------ */
.services-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
/* Default fallback for any card count not specifically handled. */
.services-grid { grid-template-columns: repeat(2, 1fr); }

/* 4 cards (legacy) — clean 2x2, wide horizontal cards. */
.services-grid--4 { grid-template-columns: repeat(2, 1fr); }

/* 5 cards (Randy's preferred layout) — 2 wide on top, 3 narrow below.
   Top row: Installation + Service & Repair (the sprinkler services) — wider, photo-side layout.
   Bottom row: Pumps + Drainage + Landscape Lighting — narrower, photo-top stacked layout. */
.services-grid--5 { grid-template-columns: repeat(6, 1fr); }
.services-grid--5 .service:nth-child(-n+2) { grid-column: span 3; }
.services-grid--5 .service:nth-child(n+3)  { grid-column: span 2; grid-template-columns: 1fr; }
.services-grid--5 .service:nth-child(n+3) .service-photo { min-height: 200px; aspect-ratio: 4 / 3; }
.services-grid--5 .service:nth-child(n+3) .service-body  { padding: 28px 26px 26px; }
.services-grid--5 .service:nth-child(n+3) .service-body h3 { font-size: 22px; }

/* 6 cards (seasonal Christmas / winterization on) — 3x2 stacked grid. */
.services-grid--6 { grid-template-columns: repeat(3, 1fr); }
.services-grid--6 .service { grid-template-columns: 1fr; }
.services-grid--6 .service-photo { min-height: 200px; aspect-ratio: 4 / 3; }
.services-grid--6 .service-body  { padding: 28px 26px 26px; }
.services-grid--6 .service-body h3 { font-size: 22px; }

.service {
  background: var(--white);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}
.service:hover { transform: translateY(-4px); box-shadow: 0 30px 40px -24px rgba(8,32,16,0.20); }
.service-photo {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}
.service-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.service-photo .tag {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  background: var(--green);
  color: var(--white);
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.35);
}
.service-body {
  padding: 34px 30px 30px;
  display: flex; flex-direction: column;
}
.service-body .num {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.service-body h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.service-body p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.service-body ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.service-body ul li {
  display: flex; align-items: center; gap: 10px;
}
.service-body ul li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  flex: 0 0 6px;
}

.services-cta {
  max-width: 780px;
  margin: 56px auto 0;
  padding: 0 var(--gutter);
  display: block;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.services-cta a { color: var(--green); font-weight: 700; }
.services-cta a + a { margin-left: 10px; }

/* ------------------------------------------------------------ */
/* ABOUT / RANDY                                                */
/* ------------------------------------------------------------ */
.about {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: center;
}
.about-photo {
  position: relative;
}
.about-photo .frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--green-lt);
  box-shadow: 0 30px 50px -30px rgba(8,32,16,0.4);
}
.about-photo .frame img { width: 100%; height: 100%; object-fit: cover; }
.about-photo .seal {
  position: absolute;
  bottom: -36px; right: -28px;
  width: 168px; height: 168px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.22));
  pointer-events: none;
}
.about-photo .seal svg {
  display: block;
  width: 100%; height: 100%;
}

.about-body .pull {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 18px 0 24px;
  color: var(--ink);
}
.about-body p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.about-sign {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.about-sign .label { color: var(--ink-3); }
.about-sign strong { font-weight: 700; }

/* ------------------------------------------------------------ */
/* SERVICE AREA                                                 */
/* ------------------------------------------------------------ */
.area-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 64px;
  align-items: start;
}
.area-side h3 {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
  color: var(--ink);
}
.area-side h3 em { font-style: normal; color: var(--green); }
.area-side p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 42ch;
}
.area-counties {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 22px;
}
.area-counties span {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green-dk);
}
.area-note {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 6px;
}
.area-note a {
  color: var(--green);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

.area-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.area-list li {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.area-list li:nth-child(3n) { border-right: 0; }
/* remove bottom border on last row(s) */
.area-list li:nth-last-child(-n+3):nth-child(3n+1),
.area-list li:nth-last-child(-n+3):nth-child(3n+1) ~ li {
  border-bottom: 0;
}
.area-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.area-list a:hover,
.area-list a:focus-visible {
  background: var(--green);
  color: var(--white);
  padding-left: 22px;
  outline: none;
}
.area-list a:focus-visible { box-shadow: inset 0 0 0 2px var(--sun); }
.area-list .miles {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  transition: color .2s ease, transform .2s ease;
}
.area-list a:hover .miles,
.area-list a:focus-visible .miles {
  color: var(--sun);
  transform: translateX(3px);
}

/* ------------------------------------------------------------ */
/* REVIEWS                                                      */
/* ------------------------------------------------------------ */
.reviews-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.reviews-row.trust { grid-template-columns: repeat(4, 1fr); }
.review {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  padding: 28px 26px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: background .25s ease, transform .25s ease;
}
.review:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.review .stars { color: var(--sun); font-size: 16px; letter-spacing: 0.1em; }
.review .body {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
}
.review .who {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.review .who strong { color: var(--white); font-weight: 700; }
.reviews-foot {
  max-width: var(--maxw); margin: 46px auto 0;
  display: flex; justify-content: center; align-items: center;
  gap: 16px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}
.reviews-foot .stars { color: var(--sun); font-size: 18px; letter-spacing: 0.05em; }
.reviews-foot strong { font-weight: 700; color: var(--white); }

/* ------------------------------------------------------------ */
/* FAQ                                                          */
/* ------------------------------------------------------------ */
.faq {
  max-width: 960px;
  margin: 0 auto;
}
.faq-item {
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: padding .25s ease;
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
}
.faq-q h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.faq-toggle {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 600;
  transition: transform .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.faq-item.is-open .faq-toggle {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, padding .3s ease;
  opacity: 0;
  padding: 0 80px 0 4px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
}
.faq-item.is-open .faq-a {
  max-height: 600px;
  opacity: 1;
  padding-bottom: 26px;
}

/* ------------------------------------------------------------ */
/* ESTIMATE                                                     */
/* ------------------------------------------------------------ */
.estimate {
  background: var(--green);
  color: var(--white);
}
.estimate-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 110px var(--gutter);
}
.estimate-side h2 {
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 18px 0 22px;
}
.estimate-side h2 em { color: var(--sun); font-style: normal; }
.estimate-side p {
  font-size: 17px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 24px;
}
.estimate-side .eyebrow { color: var(--sun); }
.estimate-side .estimate-call {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 14px;
  padding: 18px 24px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
}
.estimate-call .label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.estimate-call .num { font-weight: 700; font-size: 22px; }

.estimate-form {
  background: var(--white);
  color: var(--ink);
  border-radius: 8px;
  padding: 34px 32px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.estimate-form .field { display: flex; flex-direction: column; gap: 6px; }
.estimate-form .field.full { grid-column: span 2; }
.estimate-form label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.estimate-form input,
.estimate-form select,
.estimate-form textarea {
  background: var(--cream);
  border: 1px solid transparent;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 8px;
  font-weight: 500;
  outline: none;
  transition: background .2s ease, border-color .2s ease;
}
.estimate-form input::placeholder, .estimate-form textarea::placeholder { color: var(--ink-3); font-weight: 400; }
.estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus {
  background: var(--white);
  border-color: var(--green);
}
.estimate-form textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
.estimate-form select { appearance: none; cursor: pointer; }
.estimate-form .submit {
  grid-column: span 2;
  margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.estimate-form .submit .note { font-size: 12px; color: var(--ink-3); }
.estimate-form button {
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: background .2s ease, transform .2s ease;
}
.estimate-form button:hover { background: var(--green-dk); transform: translateY(-1px); }

/* ------------------------------------------------------------ */
/* FOOTER                                                       */
/* ------------------------------------------------------------ */
.foot {
  background: var(--ink);
  color: var(--cream);
  padding: 64px var(--gutter) 32px;
}
.foot-inner {
  max-width: var(--maxw); margin: 0 auto;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.foot-brand img { height: 110px; width: auto; margin-bottom: 18px; }
.foot-brand p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  max-width: 34ch;
}
.foot-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 16px;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.8); }
.foot-col a:hover { color: var(--sun); }
.foot-bottom {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
}
.foot-meta {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-right: 6px;
}
.foot-credit {
  color: rgba(255,255,255,0.55);
}
.foot-credit a {
  color: var(--sun);
  font-weight: 600;
  transition: color .2s ease;
}
.foot-credit a:hover { color: var(--white); }

/* ------------------------------------------------------------ */
/* STICKY CALL (mobile-prominent)                               */
/* ------------------------------------------------------------ */
.sticky-call {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 70;
  display: none;
  align-items: center; gap: 10px;
  background: var(--green);
  color: var(--white);
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 18px 30px -10px rgba(8,32,16,0.5);
}

/* ------------------------------------------------------------ */
/* RESPONSIVE                                                   */
/* ------------------------------------------------------------ */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }

  /* Nav drops to hamburger here (earlier than 980px) so long menu labels —
     e.g. "New Sprinkler Installation", "Sprinkler Service & Repair" — never
     get squeezed against the logo + Call Now button. */
  .nav { gap: 12px; }
  .nav-brand img { height: 72px; }
  .nav.is-solid .nav-brand img { height: 60px; }
  .nav-brand .credentials { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-call { display: none; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-left: 0;
    background: var(--cream);
    color: var(--ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    box-shadow: 0 18px 26px -16px rgba(0,0,0,0.18);
    border-top: 1px solid var(--rule);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  .nav.is-open .nav-links {
    max-height: calc(100vh - 88px); /* don't overflow the viewport */
    padding: 12px 0 16px;
    overflow-y: auto; /* scroll internally if menu is taller than viewport */
  }
  .nav-links a {
    padding: 14px var(--gutter);
    font-size: 16px;
    border-bottom: 1px solid var(--rule-2);
    white-space: normal; /* Long labels can wrap inside the dropdown — fine. */
  }
  .nav-links li:last-child > a { border-bottom: 0; }
  .nav-links a::after { display: none; }

  /* Submenu inside the mobile dropdown panel: stack inline, expand on tap. */
  .nav-links .menu-item-has-children > a {
    display: block;
    padding-right: 56px; /* room for the toggle button */
  }
  .menu-item-toggle {
    position: absolute;
    right: 8px;
    top: 6px;
    width: 44px; height: 44px;
    margin-left: 0;
  }
  .menu-item-has-children.is-open > .menu-item-toggle { transform: rotate(180deg); }
  .nav-links .sub-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    background: transparent;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0; margin: 0;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-links .menu-item-has-children.is-open > .sub-menu {
    max-height: 600px;
  }
  .nav-links .sub-menu a {
    padding: 12px var(--gutter) 12px calc(var(--gutter) + 18px);
    font-size: 15px;
    border-bottom: 1px solid var(--rule-2);
    white-space: normal;
  }
  /* Disable the desktop hover-to-open behaviour in the mobile panel. */
  .nav-links .menu-item-has-children:hover > .sub-menu,
  .nav-links .menu-item-has-children:focus-within > .sub-menu {
    max-height: 0;
  }
  .nav-links .menu-item-has-children.is-open:hover > .sub-menu,
  .nav-links .menu-item-has-children.is-open:focus-within > .sub-menu {
    max-height: 600px;
  }
}
@media (max-width: 980px) {
  .nav { gap: 12px; }
  .nav-brand img { height: 56px; }
  .nav.is-solid .nav-brand img { height: 48px; }
  .foot-brand img { height: 88px; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-left: 0;
    background: var(--cream);
    color: var(--ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    box-shadow: 0 18px 26px -16px rgba(0,0,0,0.18);
    border-top: 1px solid var(--rule);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  .nav.is-open .nav-links {
    max-height: 480px;
    padding: 12px 0 16px;
  }
  .nav-links a {
    padding: 14px var(--gutter);
    font-size: 16px;
    border-bottom: 1px solid var(--rule-2);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { display: none; }
  .nav-brand .credentials { display: none; }
  .nav-call { display: none; }
  .hero h1 { font-size: clamp(40px, 9vw, 72px); }
  .promise-inner { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .promise-item { border-left: 0; padding: 0; }
  .services-grid { grid-template-columns: 1fr; }
  .service { grid-template-columns: 1fr; }
  .service-photo { min-height: 220px; }
  .about { grid-template-columns: 1fr; gap: 48px; }
  .about-photo .seal { width: 132px; height: 132px; right: 12px; bottom: -24px; }
  .area-grid { grid-template-columns: 1fr; gap: 36px; }
  .area-list { grid-template-columns: repeat(2, 1fr); }
  .area-list li:nth-child(3n) { border-right: 1px solid var(--rule); }
  .area-list li:nth-child(2n) { border-right: 0; }
  .area-list li:nth-last-child(-n+3):nth-child(3n+1),
  .area-list li:nth-last-child(-n+3):nth-child(3n+1) ~ li { border-bottom: 1px solid var(--rule); }
  .area-list li:nth-last-child(-n+2):nth-child(2n+1),
  .area-list li:nth-last-child(-n+2):nth-child(2n+1) ~ li { border-bottom: 0; }
  .reviews-row { grid-template-columns: 1fr; }
  .reviews-row.trust { grid-template-columns: 1fr 1fr; }
  .estimate-inner { grid-template-columns: 1fr; gap: 36px; padding: 80px var(--gutter); }
  .estimate-form { grid-template-columns: 1fr; }
  .estimate-form .field.full { grid-column: span 1; }
  .estimate-form .submit { grid-column: span 1; flex-direction: column; align-items: stretch; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .sticky-call { display: inline-flex; }
}

@media (max-width: 560px) {
  .area-list { grid-template-columns: 1fr; }
  .area-list li { border-right: 0 !important; }
  .area-list li:not(:last-child) { border-bottom: 1px solid var(--rule); }
  .area-list li:last-child { border-bottom: 0; }
  .promise-inner { grid-template-columns: 1fr; }
  .reviews-row.trust { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   WORDPRESS THEME ADDITIONS
   Supports the WP build: interior pages, markup that changed
   from the React mockup (ul/li, button-based FAQ, class-based
   reviews), and WordPress core classes.
   ============================================================ */

/* --- Accessibility: skip link + screen-reader text ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: var(--white);
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; outline: 3px solid var(--sun); outline-offset: -3px; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0;
  overflow: hidden; position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--white); clip: auto; clip-path: none;
  color: var(--green); height: auto; width: auto;
  padding: 14px 20px; position: static !important;
}

/* --- Markup-change fixes (ul/li, spans, headings) ----------- */
.hero-trust { list-style: none; }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun);
}
.promise-item .k, .promise-item .v { display: block; }
.about-sign-right { margin-left: auto; }
.foot-heading {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sun); margin-bottom: 16px;
}
.foot-list {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,0.8);
}
.foot-list a:hover { color: var(--sun); }

/* Footer cities — when each linked city is its own list item. */
.foot-cities { gap: 6px; }
.foot-cities a {
  color: rgba(255,255,255,0.88);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.foot-cities a:hover {
  color: var(--sun);
  border-bottom-color: var(--sun);
}
.foot-cities-more {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin-top: 12px;
  line-height: 1.5;
}
.foot-cities-cta {
  margin-top: 14px;
}
.foot-cities-cta a {
  font-weight: 700;
  color: var(--sun);
}

/* --- Reviews "trust" cards (was inline styles in mockup) ----- */
.review-k {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); font-weight: 600;
}
.review-v {
  font-size: 26px; font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.1; color: var(--sun);
}
.review-d { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); margin: 0; }

/* --- FAQ: button-based accessible disclosure ---------------- */
/* .faq-q is now the <h3> wrapping the trigger button — reset the
   flex/padding the mockup put on the old .faq-q div. */
.faq-q { margin: 0; padding: 0; display: block; }
.faq-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px 4px; text-align: left;
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink);
}
.faq-trigger:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px;
}
.faq-a p { margin: 0; }

/* --- Interior page header band + fixed-nav clearance -------- */
.nav.is-interior { position: fixed; }
.page-header {
  background: var(--green); color: var(--white);
  padding-top: 160px; padding-bottom: 56px;
}
.page-header-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.eyebrow-light { color: var(--sun); }
.eyebrow-light::before { background: currentColor; }
.page-title {
  font-size: clamp(34px, 4.4vw, 58px); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 0;
}
.page-subtitle {
  font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.85);
  margin-top: 16px; max-width: 60ch;
}

/* --- Breadcrumbs ------------------------------------------- */
.breadcrumbs { font-size: 13px; }
.breadcrumbs-list {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.7);
}
.breadcrumbs-item { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs-item a { color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; }
.breadcrumbs-item a:hover { color: var(--white); border-bottom-color: var(--sun); }
.breadcrumbs-item.is-current { color: var(--sun); font-weight: 600; }
.breadcrumbs-sep { color: rgba(255,255,255,0.4); }

/* --- Prose / entry content --------------------------------- */
.page-content { max-width: 760px; margin: 0 auto; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 {
  font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; letter-spacing: -0.018em;
  line-height: 1.15; margin-top: 1.8em;
}
.entry-content h3 {
  font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.012em;
  margin-top: 1.5em;
}
.entry-content p, .entry-content li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.4em; }
.entry-content a {
  color: var(--green); font-weight: 600; border-bottom: 1px solid rgba(12,90,46,0.35);
}
.entry-content a:hover { border-bottom-color: var(--green); }
.entry-content img { border-radius: 10px; height: auto; }
.entry-content blockquote {
  border-left: 4px solid var(--green); padding-left: 22px;
  font-size: 20px; font-weight: 500; color: var(--ink);
}
.entry-content figure { margin-top: 1.6em; }

/* --- Per-page hero figure + lede + CTA row ----------------- */
.page-figure {
  margin: 0 0 36px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 50px -28px rgba(0,0,0,0.28);
}
.page-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.page-figure figcaption {
  font-size: 13px;
  color: var(--ink-3);
  padding: 10px 14px 0;
  font-style: italic;
}
.entry-content .page-lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.entry-content .page-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 28px 0 8px;
}
.entry-content .page-ctas .btn { margin: 0; }
.entry-content > h2 {
  margin-top: 2.2em;
  padding-top: 0.4em;
  position: relative;
}
.entry-content > h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--green);
  margin-bottom: 14px;
  border-radius: 2px;
}
.entry-content > ul li,
.entry-content > ol li {
  padding-left: 4px;
}
.entry-content > ul {
  list-style: none;
  padding-left: 0;
}
.entry-content > ul > li {
  position: relative;
  padding-left: 28px;
  margin-top: 0.55em;
}
.entry-content > ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 14px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

/* Pull quote — used on About; lighter weight on city/service pages too. */
.page-pullquote {
  margin: 36px 0;
  padding: 24px 28px 24px 36px;
  border-left: 4px solid var(--sun);
  background: var(--cream-2, #f4f1e8);
  border-radius: 0 12px 12px 0;
}
.page-pullquote p {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.page-pullquote cite {
  font-size: 13px;
  font-style: normal;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sub-page "Estimates" or callout block — wraps the last H2 + paragraph +
   CTAs into a clearly demarcated card, so the bottom of each service page
   reads as a real call-to-action rather than another paragraph. The CTA
   row at the very bottom uses .btn-outline so the secondary button is
   always visible (it was blending into cream before). */
.entry-content > h2:last-of-type {
  margin-top: 2.6em;
}

/* Make the "Estimates" h2 + the paragraph + the .page-ctas immediately
   following it sit in a soft cream callout box. Uses :has() where
   available with a graceful fallback. */
.entry-content .page-estimate {
  margin-top: 40px;
  padding: 28px 30px 24px;
  background: var(--cream-2, #f4f1e8);
  border-radius: 14px;
  border-left: 4px solid var(--green);
}
.entry-content .page-estimate h2 {
  margin-top: 0;
  padding-top: 0;
}
.entry-content .page-estimate h2::before { display: none; }
.entry-content .page-estimate p { margin-bottom: 16px; }
.entry-content .page-estimate .page-ctas { margin-top: 8px; }
.entry-content figcaption {
  font-size: 13px; color: var(--ink-3); margin-top: 8px; text-align: center;
}
.alignleft  { float: left;  margin: 0.4em 1.6em 1.2em 0; }
.alignright { float: right; margin: 0.4em 0 1.2em 1.6em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { width: min(100%, 1100px); margin-left: auto; margin-right: auto; }
.page-links { margin-top: 1.6em; font-weight: 700; display: flex; gap: 10px; }

/* --- Blog section (homepage) + blog archive page ----------- */
.blog-section { background: var(--cream-2, var(--cream)); }
.blog-section .sec-head { max-width: 880px; margin: 0 auto 48px; text-align: center; }

.blog-grid {
  list-style: none; padding: 0; margin: 0 auto;
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-grid-full {
  grid-template-columns: repeat(3, 1fr);
}

.post-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -18px rgba(0,0,0,0.22);
  border-color: var(--rule-2);
}
.post-card-link {
  display: flex; flex-direction: column; height: 100%;
  color: inherit; text-decoration: none;
}
.post-card-figure {
  margin: 0; aspect-ratio: 16 / 10;
  background: var(--rule-2);
  display: grid; place-items: center;
  overflow: hidden;
}
.post-card-figure img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.post-card:hover .post-card-figure img { transform: scale(1.03); }
.post-card-figure-fallback {
  background: var(--green);
  color: rgba(255,255,255,0.45);
}
.post-card-figure-fallback svg { width: 56px; height: 56px; }

.post-card-body {
  flex: 1;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.post-card-meta {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.post-card-cat { color: var(--green); }
.post-card-sep { color: var(--rule); }
.post-card-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.post-card-excerpt {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.post-card-cta {
  margin-top: 4px;
  font-weight: 800; font-size: 13.5px;
  color: var(--green);
  letter-spacing: 0.01em;
  border-bottom: 2px solid var(--sun);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color .2s ease;
}
.post-card:hover .post-card-cta { color: var(--green-dk); }

.blog-section-cta {
  text-align: center;
  margin: 40px auto 0;
}

/* Blog archive (/blog/) — sits inside .section so already has padding. */
.blog-archive .blog-grid { margin-top: 0; }
.blog-archive .post-card-title { font-size: 22px; }
.blog-pagination {
  max-width: var(--maxw);
  margin: 48px auto 0;
  text-align: center;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
}
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--white);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-pagination .page-numbers:hover { color: var(--green); border-color: var(--green); }
.blog-pagination .page-numbers.current {
  background: var(--green); color: var(--white); border-color: var(--green);
}
.blog-empty {
  max-width: 600px; margin: 0 auto; text-align: center;
}
.blog-empty p { font-size: 17px; color: var(--ink-2); margin-bottom: 18px; }

/* --- Partners strip (slim band, sits above footer) --------- */
.partners-strip {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px var(--gutter);
}
.partners-strip-inner { max-width: var(--maxw); margin: 0 auto; }
.partners-strip-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: center;
}
.partners-strip-label .eyebrow { display: block; margin-bottom: 4px; }
.partners-strip-label h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.partner-compact {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 20px;
  border-left: 1px solid var(--rule);
}
.partner-compact h3 {
  font-size: 16px; font-weight: 800; letter-spacing: -0.005em;
  margin: 0;
}
.partner-compact .partner-owner {
  font-size: 13px; color: var(--ink-3);
  margin: 0 0 2px;
}
.partner-compact .partner-call {
  align-self: flex-start;
  font-weight: 800; font-size: 15px; color: var(--green);
  border-bottom: 2px solid var(--sun); padding-bottom: 1px;
  margin-top: 4px;
}
.partner-compact .partner-call:hover { color: var(--green-dk); }
.partners-strip-note {
  text-align: center; font-size: 12px; color: var(--ink-3);
  margin: 16px auto 0; max-width: 60ch;
}
@media (max-width: 820px) {
  .partners-strip-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .partner-compact {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
  }
}

/* --- Service page layout ----------------------------------- */
.service-page {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px; align-items: start;
}
.service-page .page-content { max-width: none; margin: 0; }
.service-page-figure { margin: 0 0 28px; }
.service-page-figure img { width: 100%; border-radius: 12px; }
.service-page-aside { position: sticky; top: 96px; }
.service-card-cta {
  background: var(--green); color: var(--white);
  border-radius: 14px; padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.service-card-cta .eyebrow { color: var(--sun); }
.service-card-cta-lead { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.btn-ghost-dark {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }

/* Light-background variant — for use on cream/white sections (service-page
   body, About body, etc.). Green outline, green text, fills green on hover so
   it always has presence and never blends into the page. */
.btn-outline {
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
}
.btn-outline:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.16);
}
/* When .btn-primary sits on a cream page, give it a green fill (it's white-
   on-dark by default for use inside the hero / dark sections). */
.section .btn-primary,
.page-content .btn-primary,
.entry-content .btn-primary {
  background: var(--green);
  color: var(--white);
}
.section .btn-primary:hover,
.page-content .btn-primary:hover,
.entry-content .btn-primary:hover {
  background: var(--green-dk, #143d2e);
  color: var(--white);
}

/* --- Related services / city service grids ----------------- */
.related-services-grid {
  list-style: none; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.related-services-grid a {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 12px; padding: 22px 24px;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.related-services-grid a:hover {
  transform: translateY(-2px); border-color: var(--green);
  box-shadow: 0 18px 30px -20px rgba(8,32,16,0.3);
}
.related-tag {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--green);
}
.related-title { font-weight: 700; font-size: 16px; flex: 1; }
.related-arrow { color: var(--green); font-weight: 800; }

/* --- City page extras -------------------------------------- */
.city-hoods { margin-top: 2.4em; }
.city-hoods h2 { font-size: 24px; font-weight: 800; margin-bottom: 14px; }
.city-hoods-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.city-hoods-list li {
  background: var(--cream-2); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.nearby-cities-list {
  list-style: none; max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;     /* centre the pills under the section heading */
}
.nearby-cities-list a {
  background: var(--white); border: 1px solid var(--rule); border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.nearby-cities-list a:hover { background: var(--green); color: var(--white); }

/* --- Blog list + post cards -------------------------------- */
.post-list {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.post-card {
  background: var(--white); border: 1px solid var(--rule); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 28px 40px -26px rgba(8,32,16,0.28); }
.post-card-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.post-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card-meta { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.post-card-title { font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.post-card-title a:hover { color: var(--green); }
.post-card-excerpt { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.post-card-more { margin-top: auto; font-weight: 700; color: var(--green); font-size: 14px; }
.post-list-empty {
  text-align: center; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 20px; align-items: center;
}
.pagination { max-width: var(--maxw); margin: 48px auto 0; }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 8px; font-weight: 700; font-size: 14px;
}
.pagination .page-numbers.current { background: var(--green); color: var(--white); border-color: var(--green); }
.pagination a.page-numbers:hover { border-color: var(--green); color: var(--green); }

/* --- Single post ------------------------------------------- */
/* Single blog post — content lives directly on the cream section, no
   white card inset. Width matches the hero presence above (.page-hero-
   inner is 1240px max). On mobile we tighten the section gutter so the
   article fills the screen instead of floating in a narrow center column. */
/* Single blog post — the featured image IS the hero, body fills the full
   section width (no sidebar, no narrow center column, no card). */
.page-body-section article.single-post,
.page-body-section .single-post {
  max-width: var(--maxw) !important;
  margin: 0 auto !important;
  background: transparent;
  padding: 0;
}
.single-post { max-width: var(--maxw); margin: 0 auto; }
.single-post-foot {
  margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-3);
}
.single-post-nav {
  max-width: var(--maxw); margin: 56px auto 0; display: flex; justify-content: space-between;
  gap: 20px; font-weight: 700; font-size: 14px;
}
.single-post-comments {
  max-width: var(--maxw); margin: 56px auto 0;
}

/* Featured-image hero — uses the post's thumbnail set via inline custom
   property --post-hero. Falls back to the global hero-bg.jpg if not set. */
.page-hero.single-post-hero.is-photo {
  background:
    linear-gradient(180deg, rgba(7,65,32,0.10) 0%, rgba(7,65,32,0.35) 45%, rgba(7,65,32,0.80) 85%, rgba(7,65,32,0.94) 100%),
    var(--post-hero, url(../img/hero-bg.jpg)) center 50% / cover no-repeat,
    var(--green-dk);
  color: var(--white);
  min-height: clamp(440px, 60vh, 620px);
}
.page-hero.single-post-hero.is-photo .page-hero-title {
  text-shadow: 0 2px 28px rgba(0,0,0,0.45);
}
/* Tighten body section padding on the single-post page so content fills
   more of the viewport — was 80px vertical / 32px horizontal on desktop. */
.single-post + *, .page-body-section:has(.single-post) {
  /* nothing here — fallback if :has unsupported */
}
@media (max-width: 900px) {
  .page-body-section .single-post,
  .page-body-section article.single-post {
    padding: 0 !important;
  }
}
@media (max-width: 640px) {
  /* On mobile, drop the section's horizontal padding to a tighter gutter so
     the article fills almost the full viewport. Vertical padding stays
     reasonable. */
  .page-body-section:has(.single-post) {
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 40px;
    padding-bottom: 56px;
  }
  .single-post-figure img { border-radius: 10px; }
}
.single-post-nav .next { margin-left: auto; text-align: right; }
.single-post-nav a:hover { color: var(--green); }

/* --- 404 --------------------------------------------------- */
.error-404 { max-width: 620px; margin: 0 auto; text-align: center; }
.error-404-lead { font-size: 18px; color: var(--ink-2); }
.error-404-links {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 28px 0;
}
.error-404-links a {
  background: var(--white); border: 1px solid var(--rule); border-radius: 999px;
  padding: 9px 18px; font-weight: 600; font-size: 14px;
}
.error-404-links a:hover { background: var(--green); color: var(--white); }
.error-404-cta { margin: 32px 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.error-404-search { max-width: 380px; margin: 0 auto; }

/* --- Search form ------------------------------------------- */
.search-form { display: flex; gap: 8px; }
.search-form .search-field {
  flex: 1; background: var(--white); border: 1px solid var(--rule);
  padding: 12px 14px; border-radius: 8px; font-size: 15px;
}
.search-form .search-field:focus { outline: none; border-color: var(--green); }
.search-form .search-submit {
  background: var(--green); color: var(--white); font-weight: 700;
  padding: 12px 20px; border-radius: 8px;
}

/* --- Estimate form: WPForms wrap + preview notice ----------- */
.estimate-form-wrap {
  background: var(--white); border-radius: 8px; padding: 34px 32px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.3);
}
.estimate-form.is-preview { position: relative; }
.estimate-form-notice {
  grid-column: 1 / -1;
  background: #fff5dc; border: 1px solid var(--sun); color: #6b5212;
  font-size: 12px; font-weight: 600; padding: 10px 14px; border-radius: 8px;
}
.estimate-form button[disabled] { opacity: 0.55; cursor: not-allowed; }
.estimate-email { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,0.75); }
.estimate-email a { color: var(--sun); text-decoration: underline; }

/* --- WP responsive tweaks ---------------------------------- */
@media (max-width: 980px) {
  .page-header { padding-top: 104px; }
  /* (legacy .partners-grid removed — partners section is now a slim strip; see .partners-strip) */
  .blog-grid, .blog-grid-full { grid-template-columns: 1fr; gap: 20px; }
  .service-page { grid-template-columns: 1fr; gap: 36px; }
  .service-page-aside { position: static; }
  .related-services-grid { grid-template-columns: 1fr; }
  .post-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .post-list { grid-template-columns: 1fr; }
  .single-post-nav { flex-direction: column; }
  .single-post-nav .next { margin-left: 0; text-align: left; }
}

/* ============================================================
   Hub-language additions — Services Hub Page A pattern
   Added 2026-05-27 to bring the interior pages up to the
   homepage standard. Pairs with Instrument Serif (loaded via
   inc/enqueue.php) for the italic display accents.
   ============================================================ */

:root {
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
}

/* Apply Instrument Serif italic to <em> inside display titles.
   This is the mockup's signature move. */
.sec-title em,
.page-hero-title em,
.compare-title em,
.stats-band-title em,
.related-services h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  /* Slightly larger to compensate for the serif's smaller x-height */
  font-size: 1.06em;
  color: inherit;
}
.section.dark .sec-title em,
.page-hero.is-dark .page-hero-title em { color: var(--sun); }

/* ------------------------------------------------------------ */
/* PAGE HERO — replaces the thin .page-header band on interior   */
/* pages. Tall, generous, with a serif italic accent and an      */
/* optional right column for a service list or supporting block. */
/* ------------------------------------------------------------ */
.page-hero {
  /* Layered: gradient overlay + faded background image + solid-color fallback.
     Drop a hero image at assets/img/hero-bg.jpg and it will fade through on
     every hero variant. If the file is missing, the solid colour fallback
     still renders cleanly through the semi-transparent gradient. */
  background:
    linear-gradient(180deg, rgba(246,243,235,0.78), rgba(246,243,235,0.92) 60%, rgba(246,243,235,1) 100%),
    url(../img/hero-bg.jpg) center 60% / cover no-repeat,
    var(--cream);
  color: var(--ink);
  padding: 160px var(--gutter) 72px;
  position: relative;
  overflow: hidden;
  /* Match the Services Hub hero height across every interior page so they
     all read at the same scale, even when the right-side aside has fewer
     rows. Content can still grow past this on the Services Hub itself. */
  min-height: clamp(560px, 78vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-hero.is-dark {
  background:
    linear-gradient(180deg, rgba(12,90,46,0.88), rgba(7,65,32,0.95) 60%, rgba(7,65,32,1) 100%),
    url(../img/hero-bg.jpg) center 60% / cover no-repeat,
    var(--green);
  color: var(--white);
}
.page-hero.is-leaf {
  background:
    linear-gradient(180deg, rgba(230,239,217,0.74), rgba(230,239,217,0.90) 60%, rgba(230,239,217,1) 100%),
    url(../img/hero-bg.jpg) center 60% / cover no-repeat,
    var(--green-lt);
}
/* Photo-dominant hero — used on Service Area, where the image IS the story.
   The image reads at near-full opacity; a soft dark gradient at the bottom
   gives the white text enough contrast without burying the photo. */
.page-hero.is-photo {
  background:
    linear-gradient(180deg, rgba(7,65,32,0.10) 0%, rgba(7,65,32,0.30) 45%, rgba(7,65,32,0.75) 85%, rgba(7,65,32,0.92) 100%),
    url(../img/hero-bg.jpg) center 55% / cover no-repeat,
    var(--green-dk);
  color: var(--white);
  text-shadow: 0 1px 24px rgba(0,0,0,0.35);
}
.page-hero.is-photo .page-hero-eyebrow.eyebrow { color: var(--sun); }
.page-hero.is-photo .breadcrumbs-list { color: rgba(255,255,255,0.85); }
.page-hero.is-photo .breadcrumbs-item a { color: rgba(255,255,255,0.92); }
.page-hero.is-photo .breadcrumbs-item.is-current { color: var(--sun); }
.page-hero.is-photo .page-hero-sub { color: rgba(255,255,255,0.92); }
.page-hero.is-photo .page-hero-aside-row {
  background: rgba(0,0,0,0.32);
  border-color: rgba(255,255,255,0.20);
  color: var(--white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-hero.is-photo .page-hero-aside-row:hover {
  background: rgba(0,0,0,0.42);
  border-color: rgba(255,255,255,0.35);
}
.page-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
}
.page-hero.has-aside .page-hero-inner {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
}
.page-hero-eyebrow {
  margin-bottom: 18px;
}
.page-hero.is-dark .page-hero-eyebrow.eyebrow { color: var(--sun); }
.page-hero.is-dark .breadcrumbs-list { color: rgba(255,255,255,0.7); }
.page-hero.is-dark .breadcrumbs-item a { color: rgba(255,255,255,0.85); }
.page-hero.is-dark .breadcrumbs-item.is-current { color: var(--sun); }
.page-hero-title {
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 6px 0 0;
  max-width: 22ch;
}
.page-hero-sub {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  margin-top: 22px;
  max-width: 56ch;
  opacity: 0.92;
}
.page-hero.is-dark .page-hero-sub { color: rgba(255,255,255,0.86); }
.page-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Right-aside: stacked tagged service list (Services Hub) or
   a credentials block (other interior pages). */
.page-hero-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
}
.page-hero-aside-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.page-hero.is-dark .page-hero-aside-row { color: var(--white); }
.page-hero-aside-row:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.30);
  transform: translateX(-2px);
}
.page-hero-aside-row .num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.55;
  text-transform: uppercase;
}
.page-hero-aside-row .arrow { opacity: 0.6; }
.page-hero.is-cream .page-hero-aside-row,
.page-hero:not(.is-dark) .page-hero-aside-row {
  background: rgba(12,90,46,0.06);
  border-color: rgba(12,90,46,0.18);
  color: var(--ink);
}
.page-hero:not(.is-dark) .page-hero-aside-row:hover {
  background: rgba(12,90,46,0.10);
  border-color: rgba(12,90,46,0.32);
}

.page-hero-strip {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.page-hero.is-dark .page-hero-strip { color: rgba(255,255,255,0.7); }
.page-hero:not(.is-dark) .page-hero-strip { border-top-color: var(--rule); color: var(--ink-3); }
.page-hero-strip a { border-bottom: 1px solid transparent; }
.page-hero-strip a:hover { border-bottom-color: currentColor; }

@media (max-width: 900px) {
  .page-hero { padding: 130px var(--gutter) 56px; }
  .page-hero.has-aside .page-hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .page-hero-title { font-size: clamp(34px, 9vw, 52px); }
}

/* ------------------------------------------------------------ */
/* STATS BAND — 4 credential cards on dark green                 */
/* ------------------------------------------------------------ */
.stats-band {
  background: var(--green-dk);
  color: var(--white);
  padding: 48px var(--gutter);
}
.stats-band-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
}
.stats-band-item {
  background: var(--green-dk);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  justify-content: center;
}
.stats-band-item .k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sun);
  font-weight: 500;
}
.stats-band-item .v {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.stats-band-item .note {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
@media (max-width: 900px) {
  .stats-band-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ */
/* COMPARISON TABLE — "What each service actually looks like."   */
/* ------------------------------------------------------------ */
.compare {
  padding: 80px var(--gutter);
  background: var(--cream);
}
.compare-head {
  max-width: 760px;
  margin: 0 auto 36px;
}
.compare-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.compare-lede {
  font-size: 17px;
  color: var(--ink-2);
  margin-top: 14px;
  max-width: 60ch;
}
.compare-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--rule);
  background: var(--white);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 760px;
}
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-2);
}
.compare-table thead th {
  background: var(--cream-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody th {
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  width: 28%;
}
.compare-table td.is-yes { color: var(--green); font-weight: 700; }
.compare-table td.is-no  { color: var(--ink-3); }
.compare-table td .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--green); margin-right: 6px; vertical-align: middle;
}
.compare-table td.is-no .dot { background: var(--rule); }

/* ------------------------------------------------------------ */
/* INLINE SPLIT — text + image side by side for service pages    */
/* ------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.split.is-reverse > .split-text { order: 2; }
.split.is-reverse > .split-figure { order: 1; }
.split-text h2 {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.split-text h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
}
.split-text p { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.split-text p + p { margin-top: 14px; }
.split-text ul {
  margin-top: 16px; padding-left: 0; list-style: none;
}
.split-text ul li {
  position: relative; padding-left: 22px; margin-top: 8px;
  color: var(--ink-2);
}
.split-text ul li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 12px; height: 2px; background: var(--green); border-radius: 2px;
}
.split-figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 50px -28px rgba(0,0,0,0.28);
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
}
.split-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.split-figure figcaption {
  font-size: 13px; color: var(--ink-3);
  padding: 10px 14px; font-style: italic; background: var(--white);
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.is-reverse > .split-text { order: 1; }
  .split.is-reverse > .split-figure { order: 2; }
}

/* ------------------------------------------------------------ */
/* CITY LOCAL DETAIL — text + stats card for city pages          */
/* ------------------------------------------------------------ */
.city-detail {
  padding: 80px var(--gutter);
  background: var(--cream);
}
.city-detail-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.city-detail h2 {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.15;
}
.city-detail h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
}
.city-detail p { color: var(--ink-2); font-size: 17px; line-height: 1.65; margin-top: 14px; }
.city-stats {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 26px;
}
.city-stats h3 {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.city-stats dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 16px;
  margin: 0;
}
.city-stats dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 2px;
}
.city-stats dd {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .city-detail-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ------------------------------------------------------------ */
/* CTA BAND — full-bleed dark-green call-to-action               */
/* ------------------------------------------------------------ */
.cta-band {
  background: var(--green);
  color: var(--white);
  padding: 72px var(--gutter);
  text-align: center;
}
.cta-band-inner { max-width: 780px; margin: 0 auto; }
.cta-band h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
.cta-band h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  color: var(--sun);
}
.cta-band p {
  font-size: 18px;
  margin-top: 16px;
  color: rgba(255,255,255,0.82);
}
.cta-band-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ------------------------------------------------------------ */
/* PAGE BODY container — for sub-pages that use sectioned bands  */
/* ------------------------------------------------------------ */
.page-body-section {
  padding: 80px var(--gutter);
}
.page-body-section.alt { background: var(--white); }
.page-body-section.cream { background: var(--cream); }
.page-body-section.leaf { background: var(--green-lt); }
.page-body-section.dark { background: var(--green); color: var(--white); }
.page-body-section .page-body-head {
  max-width: 760px;
  margin: 0 auto 36px;
}
.page-body-section .page-body-head .eyebrow { margin-bottom: 14px; }
.page-body-section .page-body-head h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.page-body-section .page-body-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
}
.page-body-section .page-body-head p {
  font-size: 17px;
  color: var(--ink-2);
  margin-top: 14px;
  line-height: 1.6;
}
.page-body-section.dark .page-body-head p { color: rgba(255,255,255,0.82); }

/* When the existing .page-header thin band is replaced by .page-hero,
   we still want sane spacing on pages that fall back to .page-header. */
.page-header + .compare,
.page-header + .stats-band,
.page-header + .page-body-section { margin-top: 0; }

/* ------------------------------------------------------------ */
/* End hub-language additions                                    */
/* ------------------------------------------------------------ */

/* ============================================================
   Contact Form 7 — style the plugin's output to match the design.
   Targets the .wpcf7 wrapper CF7 emits around every form. Applies
   to any CF7 form rendered inside .estimate-form-wrap, including
   the Quick Contact and Estimate Request forms.
   Added 2026-05-27.
   ============================================================ */

.wpcf7 form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.wpcf7 form .field { display: contents; } /* no-op if you stripped wrappers */
.wpcf7 form > p { margin: 0; grid-column: span 1; }
.wpcf7 form > p:has(textarea),
.wpcf7 form > p:has(input[type="email"]),
.wpcf7 form > p:has([name="qc-contact"]),
.wpcf7 form > p:has([name="qc-message"]),
.wpcf7 form > p:has([name="est-address"]),
.wpcf7 form > p:has([name="est-notes"]),
.wpcf7 form > p:has(input[type="submit"]) {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .wpcf7 form { grid-template-columns: 1fr; }
  .wpcf7 form > p { grid-column: 1 / -1; }
}

.wpcf7 label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}

/* Input fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  display: block;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 11px 14px;
  line-height: 1.4;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}
.wpcf7 select {
  /* Custom chevron so the dropdown looks intentional */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(12,90,46,0.10);
}

/* Submit button — match .btn-primary */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--white);
  background: var(--green);
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 6px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
  background: var(--green-dk);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.16);
}
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.wpcf7 input[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* CF7 ajax loader (the spinner that appears after submit) */
.wpcf7 .wpcf7-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 12px;
  background: var(--green);
  border-radius: 999px;
  opacity: 0;
  animation: none;
}
.wpcf7 form.submitting .wpcf7-spinner {
  opacity: 0.6;
  animation: els-spin 1s linear infinite;
}
@keyframes els-spin {
  to { transform: rotate(360deg); }
}

/* Validation + response messages */
.wpcf7 .wpcf7-not-valid {
  border-color: var(--red);
  background: #fef3f2;
}
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  margin-top: 4px;
}
.wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 8px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 8px !important;
  font-size: 14px;
  line-height: 1.4;
  border-width: 1px !important;
  border-style: solid !important;
}
.wpcf7 form.sent .wpcf7-response-output {
  background: #f0f7ed;
  border-color: var(--green) !important;
  color: var(--green-dk);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  background: #fef3f2;
  border-color: var(--red) !important;
  color: var(--red);
}

/* When CF7 is inside .estimate-form-wrap, drop the double card padding */
.estimate-form-wrap .wpcf7 form > p { margin-top: 0; }

/* When CF7 form is rendered with our markup wrapper convention
   (<div class="field"> wrapping label + input), keep grid layout */
.estimate-form-wrap .wpcf7 .field {
  display: flex;
  flex-direction: column;
}
.estimate-form-wrap .wpcf7 .field.full,
.estimate-form-wrap .wpcf7 .submit {
  grid-column: 1 / -1;
}
.estimate-form-wrap .wpcf7 .submit {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
/* === End CF7 styles === */