/*
Theme Name: Arbor Spirit
Theme URI: https://arborspirit.com/
Author: Arbor Spirit Tree Care
Description: Lightweight theme for arborspirit.com (November 2026), replacing Divi. Each page keeps its words as plain HTML in the Classic Editor's Text view; this theme supplies the header, footer, phone call bar and all styles. No page builder.
Version: 1.0.5
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arbor-spirit
*/

/* Fonts: Bitter and Source Sans 3 (SIL Open Font License, see fonts/), served from this theme. */
@font-face{ font-family:"Bitter"; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/bitter-latin.woff2) format("woff2") }
@font-face{ font-family:"Bitter"; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/bitter-italic-latin.woff2) format("woff2") }
@font-face{ font-family:"Source Sans 3"; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/source-sans-3-latin.woff2) format("woff2") }

/* ==================================================================
   Arbor Spirit Tree Care — proposed site styles (mockup, November 2026)
   Layout: phone-first single column; from 760px the bands split into two
   columns inside a 1200px wrap. Bands alternate white and pale leaf mist;
   the estimate band and footer are deep canopy green. One loud colour only:
   rope orange, kept for "Call".
   In the WordPress theme: "@container site" becomes "@media", and the
   .site / .pg wrappers become the body element.
   ================================================================== */
body{
  --canopy:#173C2D;      /* headings, top strip, dark bands */
  --canopy-deep:#0F2A1F; /* footer */
  --fern:#245A40;        /* Free Estimate button, links */
  --fern-hover:#1B4832;
  --moss:#456E2E;        /* small labels */
  --mist:#EEF2EA;        /* alternate band */
  --paper:#FFFFFF;
  --ink:#17221B;         /* body text */
  --ink-2:#4B5A50;       /* secondary text */
  --line:#D6DED2;
  --rope:#F47A20;        /* Call buttons only */
  --rope-hover:#FF8B36;
  --rope-ink:#9A3F06;    /* orange text on white */
  --on-rope:#13261C;
  --on-dark:#F2F5F0;
  --on-dark-2:#BFCEC2;
  --f-display:"Bitter", Georgia, "Times New Roman", serif;
  --f-body:"Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
*, *::before, *::after{ box-sizing:border-box }
:is(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){ margin:0 }
:is(ul,ol){ padding:0; list-style:none }
.pg{ font-size:17px; line-height:1.6; position:relative }
.pg a{ color:var(--fern); text-decoration-thickness:1px; text-underline-offset:3px }
.pg a:hover{ color:var(--fern-hover) }
.pg :focus-visible{ outline:3px solid var(--rope); outline-offset:2px; border-radius:4px }

.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:20px }

/* ---------- type ---------- */
.pg :is(h1,h2,h3){ font-family:var(--f-display); color:var(--canopy); text-wrap:balance; font-weight:700 }
.pg h1{ font-size:36px; line-height:1.08; letter-spacing:-.015em }
.pg h2{ font-size:28px; line-height:1.15; letter-spacing:-.01em }
.pg h3{ font-size:20px; line-height:1.25 }
.eyebrow{ font-size:13px; line-height:1.4; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--moss) }
.lede{ font-size:19px; line-height:1.55; color:var(--ink-2); max-width:34em }
.muted{ color:var(--ink-2) }
.stack{ display:flex; flex-direction:column; gap:16px }
.stack-lg{ display:flex; flex-direction:column; gap:24px }
.prose{ display:flex; flex-direction:column; gap:16px; max-width:40em }
.prose a{ font-weight:600 }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 24px; border-radius:999px;
  font:700 17px/1.1 var(--f-body); text-decoration:none; white-space:nowrap;
  border:2px solid transparent; cursor:pointer;
}
.pg .btn-call{ background:var(--rope); color:var(--on-rope) }
.pg .btn-call:hover{ background:var(--rope-hover); color:var(--on-rope) }
.pg .btn-est{ background:var(--fern); color:#fff }
.pg .btn-est:hover{ background:var(--fern-hover); color:#fff }
.pg .btn-line{ background:transparent; color:var(--canopy); border-color:var(--canopy) }
.pg .btn-line:hover{ background:var(--canopy); color:#fff }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px }
.actions .btn{ flex:1 1 auto }
.arrow-link{ font-weight:700; color:var(--fern) }
.pg .arrow-link{ text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:1px }

/* ---------- icons: drawn by CSS, so page HTML only carries a class ---------- */
.ic::before{
  content:""; display:inline-block; flex:none; width:20px; height:20px; background-color:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat
}
.ic-phone{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); --i-onrope:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313261C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") }
.ic-sms{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") }
.ic-mail{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") }
.ic-family{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); --i-fern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23245A40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") }
.ic-award{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.48 12.89 17 22l-5-3-5 3 1.52-9.11'/%3E%3C/svg%3E"); --i-fern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23245A40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.48 12.89 17 22l-5-3-5 3 1.52-9.11'/%3E%3C/svg%3E") }
.ic-shield{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --i-fern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23245A40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") }
.ic-check{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") }
.ic-leaf{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E") }
.ic-clock{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") }
.ic-pin{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") }
.ic-alert{ --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") }

/* ---------- header ---------- */
.strip{ background:var(--canopy); color:var(--on-dark); font-size:14px }
.strip-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px }
.pg .strip-phone{
  display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 8px; border-radius:999px;
  background:var(--rope); color:var(--on-rope); font-weight:700; text-decoration:none; white-space:nowrap
}
.strip-phone.ic::before{ width:16px; height:16px }
.hdr{ background:var(--paper); border-bottom:1px solid var(--line) }
.hdr-in{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 12px; padding-block:12px 0 }
.pg .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--canopy); min-width:0 }
.logo-img{ width:52px; height:52px; flex:none; background:center/contain no-repeat; object-fit:contain }
.brand-txt{ display:flex; flex-direction:column; min-width:0 }
.brand-name{ font:700 18px/1.05 var(--f-display); letter-spacing:.04em; text-transform:uppercase; color:var(--canopy) }
.brand-tag{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-top:4px }
.badge{ display:block; justify-self:end }
.badge-img{ display:block; width:56px; height:56px; background:center/contain no-repeat; object-fit:contain }
.nav{ grid-column:1 / -1; display:flex; justify-content:space-between; gap:4px; margin-inline:-6px; overflow-x:auto }
.pg .nav a{
  display:flex; align-items:center; min-height:46px; padding:0 6px; white-space:nowrap;
  font-weight:600; font-size:16px; color:var(--ink); text-decoration:none; border-bottom:3px solid transparent
}
.pg .nav a[aria-current="page"]{ color:var(--canopy); border-bottom-color:var(--rope) }
.pg .nav a:hover{ color:var(--fern) }
.nav-cta{ display:none }

/* ---------- phone call bar (sticky in the mockup; fixed in the theme) ---------- */
.callbar{
  position:sticky; bottom:0; z-index:5; display:grid; grid-template-columns:1.45fr 1fr; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.96); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(15,42,31,.12)
}
.callbar .btn{ min-height:52px; padding:0 12px; font-size:16px }

/* ---------- photos ---------- */
.ph{ display:block; width:100%; max-width:100%; height:auto; border-radius:6px; background:var(--mist) var(--pos, center)/cover no-repeat; object-fit:cover; object-position:var(--pos, center) }
video.ph{ background:#102e24 }
.arch{ border-radius:999px 999px 10px 10px / 46% 46% 10px 10px }
.fig-cap{ margin-top:10px; font-size:14px; color:var(--ink-2) }
.ph-wide{ aspect-ratio:16/10 }
.ph-tall{ aspect-ratio:4/5 }
.ph-sq{ aspect-ratio:1 }
.play, .play-wrap{ position:relative }
.play-wrap{ display:block }
.play::after, .play-wrap::after{
  content:""; position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  background:rgba(15,42,31,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 54% 50%/30px no-repeat
}

/* ---------- bands ---------- */
.band{ padding-block:56px }
.band.mist{ background:var(--mist) }
.band.dark{ background:var(--canopy); color:var(--on-dark) }
.band.dark :is(h1,h2,h3){ color:#fff }
.band.dark .eyebrow{ color:#A9D18E }
.band.dark .muted, .band.dark .lede{ color:var(--on-dark-2) }
.pg .band.dark a:not(.btn){ color:#fff }
.two{ display:grid; gap:32px }
.head{ display:flex; flex-direction:column; gap:12px; max-width:44em; margin-bottom:32px }

/* ---------- home hero ---------- */
.hero{ padding-block:28px 48px }
.hero-in{ display:grid; gap:28px; grid-template-areas:"copy" "fig" "more" }
.hero-copy{ grid-area:copy; display:flex; flex-direction:column; gap:16px }
.hero h1 span{ display:block; color:var(--fern) }
.hero-fig{ grid-area:fig }
.hero-fig .ph{ aspect-ratio:4/3 }
.hero-more{ grid-area:more; display:flex; flex-direction:column; gap:20px }
.trustline{ font-size:15px; color:var(--ink-2); padding-top:16px; border-top:1px solid var(--line) }
.urgent{ background:var(--mist); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:14px }
.urgent-t{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--rope-ink); font-size:17px }
.urgent-t::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--rope); box-shadow:0 0 0 4px rgba(244,122,32,.22); flex:none }
.urgent-a{ display:flex; flex-wrap:wrap; gap:10px }
.urgent-a .btn{ flex:1 1 200px }

/* ---------- trust ---------- */
.trust{ padding-block:28px }
.trust-list{ display:grid; gap:18px }
.trust-list li{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:center }
.trust-list li.ic::before{ grid-row:span 2; width:44px; height:44px; border-radius:50%; background:#fff var(--i-fern) center/24px no-repeat; -webkit-mask:none; mask:none }
.trust-list strong{ font-family:var(--f-display); font-size:18px; color:var(--canopy); line-height:1.2 }
.trust-list span{ font-size:15px; color:var(--ink-2) }

/* ---------- quote + team ---------- */
.quote{ display:flex; flex-direction:column; gap:16px }
.quote blockquote{ font:italic 400 22px/1.45 var(--f-display); color:var(--canopy); padding-left:20px; border-left:4px solid var(--rope) }
.quote figcaption{ display:flex; flex-direction:column; font-size:15px; color:var(--ink-2) }
.quote figcaption strong{ color:var(--ink); font-size:17px }
.card{ background:var(--mist); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.band.mist .card{ background:#fff }

/* ---------- principles ---------- */
.principles{ background:#fff; border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:16px }
.principles-t{ font:700 19px/1.35 var(--f-display); color:var(--canopy) }
.ticks{ display:flex; flex-direction:column; gap:14px }
.ticks li{ display:grid; grid-template-columns:24px 1fr; gap:12px; color:var(--ink-2) }
.ticks li.ic::before{ width:24px; height:24px; background-color:var(--moss); margin-top:1px }
.ticks strong{ color:var(--ink) }

/* ---------- before / after ---------- */
.ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.ba-pair a{ display:block; text-decoration:none }
.ba-half{ aspect-ratio:320/213; border-radius:6px; background-size:100% 200%; background-repeat:no-repeat }
.ba-half.before{ background-position:top; object-position:top }
.ba-half.after{ background-position:bottom; object-position:bottom }
.ba-pair figcaption{ margin-top:8px; font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2) }
.pull{ font:700 22px/1.35 var(--f-display); color:var(--canopy) }

/* ---------- steps (a real sequence, so numbered) ---------- */
.steps{ display:grid; gap:20px; counter-reset:none }
.steps li{ display:grid; grid-template-columns:48px 1fr; gap:4px 16px; align-content:start }
.step-n{ grid-row:span 2; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font:700 17px var(--f-display); background:var(--mist); color:var(--canopy) }
.band.dark .step-n{ background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) }
.steps p{ color:var(--ink-2) }
.band.dark .steps p{ color:var(--on-dark-2) }
.process-body{ display:grid; gap:28px }
.process-body .ph{ aspect-ratio:4/3 }

/* ---------- FAQ (plain <details>) ---------- */
.faq-list{ display:flex; flex-direction:column; border-top:1px solid var(--line) }
.faq-list details{ border-bottom:1px solid var(--line) }
.faq-list summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 0; font:700 18px/1.35 var(--f-display); color:var(--canopy)
}
.faq-list summary::-webkit-details-marker{ display:none }
.faq-list summary::after{ content:"+"; flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--fern); font:400 24px/1 var(--f-body) }
.faq-list details[open] summary::after{ content:"–" }
.faq-list details p{ padding:0 0 20px; color:var(--ink-2); max-width:40em }
.flag{ background:#FFF1C9; box-shadow:0 0 0 3px #FFF1C9; border-radius:2px; color:#5A4300 }

/* ---------- estimate band + form ---------- */
.contact-copy{ display:flex; flex-direction:column; gap:16px }
.pg .big-phone{ display:inline-flex; align-items:center; gap:12px; font:700 30px/1 var(--f-display); color:#fff; text-decoration:none; margin-top:8px }
.big-phone.ic::before{ width:46px; height:46px; border-radius:50%; background:var(--rope) var(--i-onrope) center/22px no-repeat; -webkit-mask:none; mask:none }
.pg .mail{ display:inline-flex; align-items:center; gap:10px; font-weight:600 }
.facts{ display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:1px solid rgba(255,255,255,.2); color:var(--on-dark-2); font-size:16px }
.facts li{ display:flex; gap:10px; align-items:flex-start }
.facts li.ic::before{ width:18px; height:18px; margin-top:4px; background-color:#A9D18E }
.form-card{ background:#fff; color:var(--ink); border-radius:18px; padding:24px 20px; display:flex; flex-direction:column; gap:6px; box-shadow:0 18px 40px rgba(5,20,12,.25) }
.band.dark .form-card h3{ color:var(--canopy) }
.form-card > p{ color:var(--ink-2); font-size:15px; margin-bottom:10px }
/* Contact Form 7 markup, as form 397 renders it (labels wrap their fields) */
.wpcf7-form{ display:grid; gap:14px; margin:0 }
.wpcf7-form p{ margin:0 }
.wpcf7-form .nac-form-grid{ display:grid; gap:14px }
.wpcf7-form label{ display:block; font-weight:700; font-size:15px; color:var(--ink) }
.wpcf7-form label > span:not(.wpcf7-form-control-wrap){ font-weight:400; color:var(--ink-2) }
.wpcf7-form label br{ display:none }
.wpcf7-form-control-wrap{ display:block; margin-top:6px }
.wpcf7-form :is(input[type=text], input[type=email], input[type=tel], textarea){
  width:100%; min-height:50px; padding:12px 14px; border-radius:10px; border:1.5px solid #B9C5B7; background:#FBFCFA;
  font:400 17px/1.4 var(--f-body); color:var(--ink)
}
.wpcf7-form textarea{ height:112px; resize:vertical }
.wpcf7-form :is(input, textarea):focus{ outline:none; border-color:var(--fern); box-shadow:0 0 0 3px rgba(36,90,64,.2); background:#fff }
.wpcf7-form .n2-small{ font-size:14px; color:var(--ink-2) }
.wpcf7-form input.wpcf7-submit{
  -webkit-appearance:none; appearance:none; width:100%; min-height:54px; border:0; border-radius:999px; cursor:pointer;
  background:var(--fern); color:#fff; font:700 17px/1.1 var(--f-body)
}
.wpcf7-form input.wpcf7-submit:hover{ background:var(--fern-hover) }
.wpcf7-not-valid-tip{ display:block; margin-top:6px; color:#B42318; font-size:14px; font-weight:600 }
.wpcf7-form .wpcf7-response-output{ margin:0; padding:12px 14px; border-radius:10px; font-size:15px }
.privacy{ font-size:14px; color:var(--ink-2) }
.pg .band .form-card a:not(.btn){ color:var(--fern) }
.btn-wide{ width:100% }

/* ---------- footer ---------- */
.foot{ background:var(--canopy-deep); color:var(--on-dark-2); padding-block:40px 32px; font-size:15px }
.foot-in{ display:grid; gap:24px }
.foot-name{ font:700 20px/1.2 var(--f-display); color:#fff; letter-spacing:.03em; text-transform:uppercase }
.foot-motto{ color:#A9D18E; font-weight:600 }
.foot-brand, .foot-info{ display:flex; flex-direction:column; gap:6px }
.foot-links{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px }
.pg .foot a{ color:#fff; font-weight:600; text-decoration:none }
.pg .foot a:hover{ text-decoration:underline }
.pg .top-link{ justify-self:start }

/* ---------- inner page hero ---------- */
.phero{ padding-block:24px 44px }
.phero-in{ display:grid; gap:24px; grid-template-areas:"copy" "fig" }
.phero-copy{ grid-area:copy; display:flex; flex-direction:column; gap:14px; align-items:flex-start }
.phero-copy > *{ max-width:100% }
.phero-copy .actions{ width:100%; margin-top:6px }
.phero-fig{ grid-area:fig }
.phero-fig .ph{ aspect-ratio:16/10 }
.pg .crumb{ font-weight:600; font-size:15px; text-decoration:none; color:var(--ink-2) }
.pg .crumb:hover{ color:var(--fern) }
.meta-line{ font-size:15px; color:var(--ink-2) }
.pg .meta-line a{ font-weight:600 }

/* ---------- service detail ---------- */
.detail{ display:grid; gap:32px }
.detail-copy{ display:flex; flex-direction:column; gap:16px; max-width:40em }
.leafs{ display:flex; flex-direction:column; gap:10px }
.leafs li{ display:grid; grid-template-columns:22px 1fr; gap:12px }
.leafs li.ic::before{ width:22px; height:22px; background-color:var(--moss); margin-top:2px }
.subgrid{ display:grid; gap:14px }
.sub{ background:var(--mist); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:8px }
.band.mist .sub{ background:#fff }
.sub p{ color:var(--ink-2) }
.note-box{ display:grid; grid-template-columns:24px 1fr; gap:12px; background:#FFF4EA; border-radius:12px; padding:16px; color:#5B2A08 }
.note-box.ic::before{ width:24px; height:24px; background-color:var(--rope-ink) }

/* related links */
.related{ display:flex; flex-direction:column; gap:12px }
.related-list{ display:flex; flex-direction:column; border-top:1px solid var(--line) }
.pg .related-list a{ display:flex; align-items:center; justify-content:space-between; min-height:56px; border-bottom:1px solid var(--line); font:700 18px/1.3 var(--f-display); text-decoration:none; color:var(--canopy) }
.pg .related-list a:hover{ color:var(--fern) }

/* shared closing band */
.cta-box{ background:var(--canopy); color:var(--on-dark); border-radius:20px; padding:28px 22px; display:grid; gap:20px }
.cta-box h2{ color:#fff }
.cta-box p{ color:var(--on-dark-2) }

/* services grid: the card is clickable, the link keeps its own words */
.svc-grid{ display:grid; gap:12px }
.svc{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; padding:20px; border-radius:16px; background:#fff; border:1px solid var(--line) }
.svc:hover{ border-color:var(--fern); box-shadow:0 8px 24px rgba(23,60,45,.1) }
.svc-n{ grid-row:span 3; font:700 15px/1 var(--f-display); color:var(--moss); padding-top:6px }
.pg .svc h3{ font-size:21px }
.svc p{ color:var(--ink-2); font-size:16px }
.pg .go{ font-weight:700; color:var(--fern); font-size:16px; text-decoration:none }
.svc .go::after, .tri-card .go::after{ content:""; position:absolute; inset:0; border-radius:16px }
.tri{ display:grid; gap:12px }
.tri-card{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:16px; background:var(--mist) }
.tri-card:hover{ box-shadow:inset 0 0 0 2px var(--fern) }
.pg .tri-card h2{ font-size:26px }
.tri-card p{ color:var(--ink-2) }
.tri-card .go{ margin-top:auto }
.tri-card.urgent-card{ background:#FFF1E6 }
.tri-card.urgent-card .eyebrow{ color:var(--rope-ink) }

/* long sections: heading column + text column */
.split{ display:grid; gap:16px }
.split-head{ display:flex; flex-direction:column; gap:12px }
.split-body{ display:flex; flex-direction:column; gap:16px; max-width:40em }
.split-body .arrow-link{ align-self:flex-start }

/* video tile (poster + play mark; the theme uses a plain <video>) */
.vid{ position:relative }

/* jump links */
.jumps{ display:flex; gap:8px; max-width:100%; overflow-x:auto; padding-bottom:4px }
.pg .jumps a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; white-space:nowrap; text-decoration:none; font-weight:600; color:var(--canopy); font-size:15px }
.pg .jumps a:hover{ border-color:var(--fern) }

/* contact cards */
.c-cards{ display:grid; gap:14px }
.c-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.c-card.urgent-card{ background:#FFF4EA; border-color:#F6CFAE }
.c-card .label{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-top:4px }
.pg .c-card .value{ font:700 22px/1.2 var(--f-display); color:var(--canopy); text-decoration:none; word-break:break-word }
.c-card .sub-t{ font-weight:700; color:var(--ink-2); font-size:15px }
.c-card .btn{ width:100%; margin-top:4px }

/* gallery */
.gal{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.gal figure{ display:flex; flex-direction:column; gap:6px }
.gal a{ display:block; text-decoration:none }
.gal .ph{ aspect-ratio:1 }
.gal figcaption{ font-size:14px; color:var(--ink-2); line-height:1.35 }
.pg .gal figcaption a{ font-weight:700; color:var(--fern) }

/* guides */
.guides{ display:grid; gap:12px }
.pg .guide{ display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:16px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--ink) }
.pg .guide:hover{ border-color:var(--fern) }
.guide .kind{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--moss) }
.pg .guide h3{ font-size:21px }
.guide p{ color:var(--ink-2); font-size:16px }
.guide .go{ font-weight:700; color:var(--fern); margin-top:auto }

/* cities */
.areas{ display:grid; gap:20px }
.area{ background:#fff; border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:12px }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips li{ padding:6px 14px; border-radius:999px; background:var(--mist); font-weight:600; color:var(--canopy); font-size:16px }

/* long-form: articles, tribute, privacy */
.article{ display:grid; gap:32px }
.chapter{ display:flex; flex-direction:column; gap:14px; padding-top:28px; border-top:1px solid var(--line) }
.chapter:first-child{ border-top:0; padding-top:0 }
.ch-n{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--moss) }
.chapter p{ color:var(--ink) }
.qs{ display:flex; flex-direction:column; gap:10px }
.qs li{ display:grid; grid-template-columns:22px 1fr; gap:12px }
.qs li::before{ content:""; width:16px; height:16px; margin-top:5px; border:2px solid var(--moss); border-radius:4px }
.reading{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:14px; background:var(--mist) }
.reading .label{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2) }
.pg .reading a{ font-weight:600 }
.toc{ display:flex; flex-direction:column; gap:4px }
.toc .label{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px }
.pg .toc a{ display:block; padding:6px 0; color:var(--ink); text-decoration:none; font-size:16px; border-bottom:1px solid var(--line) }
.pg .toc a:hover{ color:var(--fern) }
.aside-cta{ display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:16px; background:var(--canopy); color:var(--on-dark) }
.pg .aside-cta h2{ color:#fff; font-size:24px }
.aside-cta p{ color:var(--on-dark-2) }
.pg .aside-cta a:not(.btn){ color:#fff }
.letter{ max-width:38em; display:flex; flex-direction:column; gap:18px; font-size:19px; line-height:1.7 }
.letter p:first-child::first-letter{ font:700 3.4em/0.85 var(--f-display); float:left; margin:6px 10px 0 0; color:var(--canopy) }
.letter .sign{ font:italic 400 22px/1.4 var(--f-display); color:var(--canopy) }
.legacy-head{ display:grid; gap:16px; align-items:center }
.legacy-badge{ order:-1; width:110px; height:110px; background:center/contain no-repeat; object-fit:contain }
/* home: towns we serve, under the trust points */
.areas-strip{ display:grid; gap:20px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line) }
.pg .areas-strip h2{ font-size:28px }
.band.mist .chips li{ background:#fff }
.mission{ background:var(--mist); border-radius:20px; padding:28px 22px; display:flex; flex-direction:column; gap:12px }
.mission p{ font:400 21px/1.5 var(--f-display); color:var(--canopy) }
.policy{ max-width:42em; display:flex; flex-direction:column; gap:28px }
.policy section{ display:flex; flex-direction:column; gap:10px }
.pg .policy h2{ font-size:24px }
.policy p{ color:var(--ink) }
.updated{ display:inline-flex; padding:6px 12px; border-radius:999px; background:var(--mist); font-weight:600; font-size:15px; color:var(--canopy) }

.card.ic::before{ width:40px; height:40px; background-color:var(--fern) }
/* grid children may hold long rows (jump links, words); let them shrink instead of widening the page */
:is(.two, .detail, .split, .article, .hero-in, .phero-in, .process-body, .areas, .c-cards, .tri, .guides, .svc-grid, .subgrid) > *{ min-width:0 }
:is(.two, .detail, .split, .article, .hero-in, .phero-in, .process-body){ grid-template-columns:minmax(0,1fr) }
.steps-row .steps{ gap:24px }

/* ============ wider screens ============ */
@media (min-width:760px){
  .pg{ font-size:18px; line-height:1.65 }
  .wrap{ padding-inline:40px }
  .pg h1{ font-size:52px }
  .pg h2{ font-size:36px }
  .pg h3{ font-size:22px }
  .lede{ font-size:21px }
  .band{ padding-block:88px }
  .two{ grid-template-columns:1fr 1fr; gap:56px; align-items:start }
  .actions .btn{ flex:0 0 auto }
  .trust-list{ grid-template-columns:repeat(3,1fr); gap:24px }
  .gal{ grid-template-columns:repeat(3,1fr); gap:16px }
  .svc-grid{ grid-template-columns:repeat(2,1fr); gap:16px }
  .guides, .tri, .c-cards{ grid-template-columns:repeat(3,1fr); gap:16px }
  .subgrid{ grid-template-columns:repeat(2,1fr); gap:16px }
  .areas{ grid-template-columns:1fr 1fr }
  .cta-box{ grid-template-columns:1fr auto; align-items:center; padding:44px 48px; gap:32px }
  .form-card{ padding:32px }
  .wpcf7-form .nac-form-grid{ grid-template-columns:1fr 1fr; gap:16px }
  .foot-in{ grid-template-columns:1.2fr 1.4fr auto; align-items:start; gap:48px }
  .letter{ font-size:20px }
  .legacy-head{ grid-template-columns:minmax(0,1fr) auto; gap:36px }
  .legacy-badge{ order:0; width:150px; height:150px }
  .areas-strip{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:start; margin-top:32px; padding-top:32px }
  .mission{ padding:44px 48px }
  .mission p{ font-size:24px }
  .ba-pair{ gap:14px }
  .steps-row .steps{ grid-template-columns:repeat(3,1fr); gap:32px }
  .guides.guides-2{ grid-template-columns:repeat(2,1fr) }
}

@media (min-width:1080px){
  .pg h1{ font-size:62px }
  .pg h2{ font-size:40px }
  /* header: one row, nav on the right, Free Estimate always visible */
  .strip-in{ min-height:42px }
  .hdr-in{ grid-template-columns:auto auto 1fr auto; padding-block:14px; gap:20px }
  .logo-img{ width:64px; height:64px }
  .brand-name{ font-size:21px }
  .badge-img{ width:68px; height:68px }
  .badge{ justify-self:start }
  .nav{ grid-column:auto; justify-content:flex-end; gap:6px; margin:0; overflow:visible }
  .pg .nav a{ font-size:17px; padding:0 12px; min-height:52px }
  .nav-cta{ display:inline-flex }
  .callbar{ display:none }
  /* home hero: copy left, arched photo right */
  .hero{ padding-block:64px 88px }
  .hero-in{ grid-template-columns:1.08fr .92fr; grid-template-rows:auto 1fr; grid-template-areas:"copy fig" "more fig"; gap:28px 72px; align-items:start }
  .hero-fig .ph{ aspect-ratio:4/5 }
  .hero-more{ max-width:560px }
  .trust{ padding-block:36px }
  .process-body{ grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center }
  .phero{ padding-block:48px 72px }
  .phero-in{ grid-template-columns:1.15fr .85fr; grid-template-areas:"copy fig"; gap:64px; align-items:center }
  .phero-fig .ph{ aspect-ratio:5/4 }
  .phero-in.no-fig{ grid-template-columns:1fr }
  .detail{ grid-template-columns:1.25fr .75fr; gap:72px; align-items:start }
  .split{ grid-template-columns:360px minmax(0,1fr); gap:72px; align-items:start }
  .svc-grid{ grid-template-columns:repeat(3,1fr) }
  .article{ grid-template-columns:minmax(0,1fr) 300px; gap:72px; align-items:start }
  .article-side{ display:flex; flex-direction:column; gap:20px }
}


/* ============ theme only (not used by the review page) ============ */
body{ margin:0 }
img, video{ max-width:100% }
.site-top{ position:relative; z-index:20 }
/* phone call bar: fixed to the bottom of the screen below 1080px */
.callbar{ position:fixed; left:0; right:0; bottom:0; padding-left:max(12px, env(safe-area-inset-left, 0px)); padding-right:max(12px, env(safe-area-inset-right, 0px)) }
@media (max-width:1079px){ body{ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)) } }
/* desktop: header stays at the top while scrolling */
@media (min-width:1080px){
  .site-top{ position:sticky; top:0 }
  .admin-bar .site-top{ top:32px }
  html{ scroll-padding-top:150px }
}
.screen-reader-text{ border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; white-space:nowrap }
/* pages that don't use the new layout yet: simple readable column */
.plain-entry .prose :is(h2, h3){ margin-top:12px }
.plain-entry .prose img{ height:auto; border-radius:6px }
.post-list{ display:flex; flex-direction:column; gap:12px }
/* Google reCAPTCHA's floating badge stays hidden, as on the Divi site (its custom CSS did the same). */
.grecaptcha-badge{ display:none !important }
/* TrustedSite's floating badge (loaded on the live domain only) sits above the phone call bar. */
@media (max-width:1079px){ #trustedsite-tm-image{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important } }