/* Elite Tree Care FL — styles */

/* Fonts are self-hosted. They used to come from fonts.googleapis.com, which
   put a render-blocking stylesheet plus two extra DNS and TLS handshakes in
   front of first paint on every page. Same files, served from our own origin.

   Both are variable fonts, so one file per family covers every weight the
   site uses. Google's own CSS lists a separate face per weight, but all of
   them point at the same file, so splitting them into separate downloads
   would have fetched identical bytes three and four times over. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --forest:      #0D2717;
  --forest-2:    #133421;
  --forest-3:    #1B4A2E;
  --green:       #3DA148;
  --green-lt:    #57C063;
  --green-dk:    #2E7D37;
  --cream:       #F7F5EF;
  --cream-2:     #EFEDE4;
  --ink:         #14201A;
  --muted:       #5D6B61;
  --line:        #DFDCD1;
  --gold:        #F0A62E;
  --white:       #FFFFFF;

  --wrap:        1180px;
  --r:           14px;
  --r-lg:        22px;
  --shadow:      0 1px 2px rgba(13,39,23,.05), 0 8px 30px rgba(13,39,23,.08);
  --shadow-lg:   0 2px 6px rgba(13,39,23,.06), 0 24px 60px rgba(13,39,23,.14);
  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Archivo, Inter, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0;
  color: var(--forest);
}

h1 { font-size: clamp(2.4rem, 6.2vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.22rem; letter-spacing: -.012em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-block;
  font-family: Archivo, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-dk);
  margin-bottom: .9rem;
}

.lede { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }

.sec { padding: clamp(72px, 9vw, 118px) 0; }
.sec-head { max-width: 68ch; margin-bottom: 3rem; }
.sec-head .lede { margin-top: 1rem; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: Archivo, sans-serif;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.005em;
  padding: 15px 28px;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease),
              box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 20px rgba(61,161,72,.32); }
.btn-primary:hover { background: var(--green-dk); box-shadow: 0 10px 28px rgba(61,161,72,.38); }

.btn-dark { background: var(--forest); color: #fff; }
.btn-dark:hover { background: var(--forest-3); }

.btn-ghost { border-color: rgba(13,39,23,.22); color: var(--forest); }
.btn-ghost:hover { border-color: var(--forest); background: rgba(13,39,23,.04); }

.btn-ghost-lt { border-color: rgba(255,255,255,.32); color: #fff; }
.btn-ghost-lt:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn-white { background: #fff; color: var(--forest); }
.btn-white:hover { background: var(--cream); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- top bar ---------- */

.topbar {
  background: var(--forest);
  color: rgba(255,255,255,.82);
  font-size: .84rem;
  letter-spacing: .01em;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  flex-wrap: wrap;
}
.topbar-items { display: flex; gap: 26px; flex-wrap: wrap; }
.topbar-items span { display: inline-flex; align-items: center; gap: .45rem; }
.topbar-items svg { color: var(--green-lt); flex: none; }
.topbar a { font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: .45rem; }
.topbar a:hover { color: var(--green-lt); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247,245,239,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 76px;
}
.nav-logo { display: flex; align-items: center; margin-right: auto; }
.nav-logo img { height: 40px; width: auto; }

.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a {
  font-size: .96rem;
  font-weight: 500;
  color: var(--forest);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { font-weight: 700; }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--forest);
  white-space: nowrap;
}
.nav-phone:hover { color: var(--green-dk); }
.nav-phone svg { color: var(--green); }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--forest);
  margin: 3px auto;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: linear-gradient(155deg, var(--forest) 0%, #0A1F12 55%, #071A0F 100%);
  color: #fff;
  overflow: hidden;
  padding: clamp(76px, 10vw, 130px) 0 clamp(72px, 8vw, 104px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 88% 6%, rgba(61,161,72,.30), transparent 62%),
    radial-gradient(700px 500px at 4% 96%, rgba(61,161,72,.16), transparent 60%);
  pointer-events: none;
}
.hero-mark {
  position: absolute;
  right: -8%;
  bottom: -22%;
  width: min(760px, 62vw);
  /* The mark art is already #3DA148, the same green as .btn-primary, so full
     opacity renders it at exactly the button's colour. */
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--green-lt); }
.hero .lede { color: rgba(255,255,255,.78); font-size: 1.18rem; margin: 1.5rem 0 2.2rem; max-width: 56ch; }
.hero .eyebrow { color: var(--green-lt); }

.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px;
  padding: 8px 18px 8px 14px;
  margin-bottom: 1.6rem;
  font-size: .92rem;
  color: rgba(255,255,255,.9);
}
.hero-rating strong { color: #fff; font-weight: 700; }

.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 15px; height: 15px; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .93rem;
  color: rgba(255,255,255,.82);
}
.hero-trust svg { color: var(--green-lt); flex: none; }

/* ---------- stat strip ---------- */

.stats {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0;
  max-width: var(--wrap);
}
.stat { background: #fff; padding: 34px 24px; text-align: center; }
.stat b {
  display: block;
  font-family: Archivo, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 800;
  color: var(--forest);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.stat span { font-size: .86rem; color: var(--muted); letter-spacing: .01em; }

/* ---------- services ---------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.svc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(61,161,72,.11);
  color: var(--green-dk);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.svc h3 { margin-bottom: .6rem; }
.svc p { color: var(--muted); font-size: .98rem; }
.svc ul { margin-top: 1rem; display: grid; gap: .45rem; }
.svc ul li {
  font-size: .92rem;
  color: var(--muted);
  padding-left: 1.4rem;
  position: relative;
}
.svc ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.svc .svc-more {
  margin-top: auto;
  padding-top: 1.4rem;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--green-dk);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.svc:hover .svc-more svg { transform: translateX(4px); }
.svc .svc-more svg { transition: transform .2s var(--ease); }

/* Same arrow link outside a service card, used on the services hub to send
   people down to the full page for each service. */
.link-more {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--green-dk);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.link-more svg { transition: transform .2s var(--ease); }
.link-more:hover svg { transform: translateX(4px); }

.svc.emergency {
  background: linear-gradient(160deg, var(--forest) 0%, #0A2013 100%);
  border-color: transparent;
  color: #fff;
}
.svc.emergency h3 { color: #fff; }
.svc.emergency p, .svc.emergency ul li { color: rgba(255,255,255,.75); }
.svc.emergency .svc-ico { background: rgba(87,192,99,.18); color: var(--green-lt); }
.svc.emergency ul li::before { background: var(--green-lt); }
.svc.emergency .svc-more { color: var(--green-lt); }

/* ---------- why us ---------- */

.why { background: var(--white); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 44px;
}
.why-item h3 { margin-bottom: .55rem; }
.why-item p { color: var(--muted); font-size: .99rem; }
.why-num {
  font-family: Archivo, sans-serif;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--green);
  display: block;
  margin-bottom: .9rem;
}

/* ---------- process ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  counter-reset: step;
}
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  position: relative;
}
.step b {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-family: Archivo, sans-serif;
  font-size: .95rem;
  font-weight: 800;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .97rem; }

/* ---------- reviews ---------- */

.reviews { background: var(--forest); color: #fff; position: relative; overflow: hidden; }
.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 480px at 12% 0%, rgba(61,161,72,.22), transparent 62%);
  pointer-events: none;
}
.reviews .wrap { position: relative; z-index: 2; }
.reviews h2 { color: #fff; }
.reviews .lede { color: rgba(255,255,255,.72); }
.reviews .eyebrow { color: var(--green-lt); }

.rv-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding: 20px 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
}
.rv-score {
  font-family: Archivo, sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.rv-summary-txt { font-size: .95rem; color: rgba(255,255,255,.75); }
.rv-summary-txt .stars { margin-bottom: .2rem; }
.rv-summary a { margin-left: auto; }

.rv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.rv {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.rv:hover { background: rgba(255,255,255,.09); transform: translateY(-3px); }
.rv .stars { margin-bottom: 14px; }
.rv p {
  color: rgba(255,255,255,.88);
  font-size: .99rem;
  line-height: 1.62;
  margin-bottom: 1.4rem;
}
.rv-who {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.rv-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: .9rem;
  flex: none;
}
.rv-name { font-weight: 600; font-size: .95rem; }
.rv-meta {
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
}

/* ---------- areas ---------- */

.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px 28px;
}
.area-col h3 {
  font-size: 1.02rem;
  padding-bottom: .7rem;
  margin-bottom: .9rem;
  border-bottom: 2px solid var(--green);
  display: inline-block;
}
.area-col ul { display: grid; gap: .38rem; }
.area-col li { font-size: .93rem; color: var(--muted); }

.areas-note {
  margin-top: 3rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.areas-note p { color: var(--muted); flex: 1 1 320px; }
.areas-note strong { color: var(--forest); }

/* ---------- storm band ---------- */

.band {
  background: linear-gradient(120deg, #7A2E12 0%, #A33F17 55%, #C2571F 100%);
  color: #fff;
  padding: clamp(52px, 6vw, 74px) 0;
}
.band .wrap { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.band-txt { flex: 1 1 440px; }
.band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.band p { color: rgba(255,255,255,.85); margin-top: .8rem; max-width: 56ch; }
.band .cta-row { flex: none; }

/* ---------- CTA / quote ---------- */

.quote { background: var(--white); }
.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.quote-info .lede { margin-bottom: 2rem; }
.q-list { display: grid; gap: 1.1rem; margin-top: 2rem; }
.q-list li { display: flex; gap: 14px; align-items: flex-start; }
.q-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(61,161,72,.11);
  color: var(--green-dk);
  display: grid; place-items: center;
  flex: none;
}
.q-list b { display: block; font-family: Archivo, sans-serif; font-size: .98rem; color: var(--forest); }
.q-list span { font-size: .93rem; color: var(--muted); }
.q-list a { color: var(--forest); font-weight: 600; }
.q-list a:hover { color: var(--green-dk); }

form.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 32px;
}

/* Call / email card that replaced the quote form. Buttons are oversized on
   purpose: most of this audience is older and on a phone. */
.contact-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 32px;
  text-align: center;
}
.cc-kicker {
  font-family: Archivo, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-dk);
  margin-bottom: 12px;
}
.cc-lede {
  font-size: 1.02rem;
  color: var(--muted);
  margin-bottom: 26px;
}
.cc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 18px 24px;
  font-size: 1.08rem;
  margin-bottom: 12px;
}
.cc-btn svg { flex: none; }
.cc-note {
  font-size: .87rem;
  color: var(--muted);
  margin-top: 18px;
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: .4rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 14px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(61,161,72,.16);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.card .btn { width: 100%; margin-top: 8px; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 14px; text-align: center; }
.form-status {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 11px;
  font-size: .92rem;
}
.form-status.ok { display: block; background: rgba(61,161,72,.12); color: var(--green-dk); }
.form-status.err { display: block; background: rgba(194,87,31,.12); color: #A33F17; }

/* ---------- faq ---------- */

.faq-list { max-width: 820px; }
.faq {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--forest);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { color: var(--muted); padding-bottom: 24px; max-width: 70ch; font-size: .99rem; }

/* ---------- final cta ---------- */

.cta {
  background: linear-gradient(150deg, var(--forest) 0%, #0A2013 100%);
  color: #fff;
  text-align: center;
  padding: clamp(72px, 9vw, 118px) 0;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 420px at 50% 0%, rgba(61,161,72,.24), transparent 65%);
}
.cta .wrap { position: relative; z-index: 2; }
.cta h2 { color: #fff; max-width: 20ch; margin: 0 auto; }
.cta p { color: rgba(255,255,255,.76); margin: 1.2rem auto 2.2rem; max-width: 54ch; }
.cta .cta-row { justify-content: center; }

/* ---------- footer ---------- */

.footer {
  background: #071A0F;
  color: rgba(255,255,255,.62);
  padding: 68px 0 0;
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 42px;
  padding-bottom: 52px;
}
.footer h4 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer ul { display: grid; gap: .6rem; }
.footer a:hover { color: var(--green-lt); }
.footer-logo img { height: 44px; width: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 34ch; }
.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: Archivo, sans-serif;
  font-size: 1.32rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .5rem;
}
.footer-phone:hover { color: var(--green-lt); }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  color: rgba(255,255,255,.8);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.socials a:hover { background: var(--green); border-color: var(--green); color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: rgba(255,255,255,.44);
}

/* ---------- page header (inner pages) ---------- */

.page-head {
  background: linear-gradient(150deg, var(--forest) 0%, #0A2013 100%);
  color: #fff;
  padding: clamp(60px, 7vw, 92px) 0 clamp(56px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(720px 420px at 88% 10%, rgba(61,161,72,.24), transparent 62%);
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 20ch; }
.page-head .lede { color: rgba(255,255,255,.76); margin-top: 1.2rem; }
.page-head .eyebrow { color: var(--green-lt); }
.crumbs { font-size: .86rem; color: rgba(255,255,255,.55); margin-bottom: 1.4rem; }
.crumbs a:hover { color: var(--green-lt); }

/* ---------- service detail rows ---------- */

.detail {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  padding: 52px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 120px;
}
.detail:last-child { border-bottom: 0; }
.detail-side h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.detail-side .svc-ico { margin-bottom: 18px; }
.detail-body p { color: var(--muted); }
.detail-body h3 { margin: 1.6rem 0 .7rem; font-size: 1.05rem; }
.detail-body ul { display: grid; gap: .5rem; margin-top: .6rem; }
.detail-body ul li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--muted);
  font-size: .97rem;
}
.detail-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(61,161,72,.14);
}
.detail-body ul li::after {
  content: "";
  position: absolute;
  left: 5px; top: .62em;
  width: 5px; height: 8px;
  border-right: 2px solid var(--green-dk);
  border-bottom: 2px solid var(--green-dk);
  transform: rotate(42deg);
}

/* ---------- about ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split-card {
  background: linear-gradient(160deg, var(--forest) 0%, #0A2013 100%);
  border-radius: var(--r-lg);
  padding: 44px 40px;
  color: #fff;
}
.split-card h3 { color: #fff; margin-bottom: 1.4rem; }
.split-card ul { display: grid; gap: 1rem; }
.split-card li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; color: rgba(255,255,255,.82); }
.split-card svg { color: var(--green-lt); flex: none; margin-top: 3px; }

/* The named-staff section was removed from /about. Crew turnover is high
   enough that individual bios go stale faster than anyone will update them.
   Styles deleted with it. */

/* ---------- sticky mobile call bar ---------- */

.callbar { display: none; }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .quote-grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .detail { grid-template-columns: 1fr; gap: 24px; }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); }
}

/* The nav row runs out of room before the rest of the layout does. Six links
   plus a phone number and a button need about 1142px of viewport, so the
   full row only survives above the 1180px container width. Below that it
   wrapped onto a second line. */
@media (max-width: 1180px) {
  .burger { display: grid; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav-links a::after { display: none; }
}

@media (max-width: 860px) {
  .nav-phone span { display: none; }
  .nav-cta .btn { display: none; }
  .nav-logo img { height: 34px; }
  .topbar-items span:nth-child(n+3) { display: none; }

  /* The nav CTA hides at this width, so the sticky bar has to take over here
     rather than at 620px. Otherwise tablets get no persistent way to call. */
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--forest);
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  }
  .callbar .btn { padding: 15px 16px; font-size: 1rem; width: 100%; }
  body { padding-bottom: 78px; }

  /* Sections are tuned for a wide screen. At this width the stacked padding
     reads as dead space and pushes everything below the fold. */
  .sec { padding: clamp(52px, 7vw, 72px) 0; }
  .sec-head { margin-bottom: 2.2rem; }
  .hero { padding: clamp(56px, 8vw, 76px) 0 clamp(52px, 7vw, 72px); }
  .why-grid { gap: 30px 34px; }
}

@media (max-width: 620px) {
  /* 17px rather than 16. A lot of this audience is older and reading on a
     phone held at arm's length. */
  body { font-size: 17px; }
  .hero .lede { font-size: 1.06rem; }
  .cta-row .btn { flex: 1 1 100%; }
  .rv-summary a { margin-left: 0; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .field-row { grid-template-columns: 1fr; }
  .band .cta-row { width: 100%; }
  form.card { padding: 28px 22px; }
  .topbar-items span:nth-child(n+2) { display: none; }

  .sec { padding: 46px 0; }
  .sec-head { margin-bottom: 1.9rem; }
  .hero { padding: 52px 0 46px; }
  .stat { padding: 24px 14px; }
  .svc { padding: 26px 22px 24px; }
  .step { padding: 24px 22px; }
  .rv { padding: 24px 22px; }
  .callout { padding: 20px 20px; margin: 1.4rem 0; }
  .toc { padding: 18px 20px; }
  .prose h2 { margin: 2rem 0 .8rem; }

  /* Eighteen counties stacked one town per line runs to thousands of pixels.
     Flowing them as a wrapped comma list roughly halves that section. */
  .areas-grid { gap: 26px 22px; }
  .area-col ul { display: flex; flex-wrap: wrap; gap: .3rem .45rem; }
  .area-col li { font-size: .95rem; }
  .area-col li:not(:last-child)::after { content: ","; }

  /* Wide tables scroll sideways. Without a cue nobody discovers that. The
     hint is sticky so it stays put while the table slides under it. */
  .tscroll::after {
    content: "Scroll for more \2192";
    display: block;
    position: sticky;
    left: 0;
    font-size: .8rem;
    color: var(--muted);
    padding-top: .55rem;
  }

  .page-head { padding: 44px 0 40px; }
  .band { padding: 44px 0; }
  .wrap { padding: 0 18px; }
}

/* ---------- long-form guide pages ---------- */

.prose { max-width: 74ch; }
.prose h2 { margin: 2.6rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 2rem 0 .7rem; font-size: 1.1rem; }
.prose p { color: var(--muted); margin-bottom: 1.1rem; }
.prose ul { margin: 1rem 0 1.4rem; display: grid; gap: .6rem; }
.prose ul li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--muted);
  font-size: .99rem;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(61,161,72,.14);
}
.prose ul li::after {
  content: "";
  position: absolute;
  left: 5px; top: .62em;
  width: 5px; height: 8px;
  border-right: 2px solid var(--green-dk);
  border-bottom: 2px solid var(--green-dk);
  transform: rotate(42deg);
}
.prose a { color: var(--green-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--forest); }
.prose strong { color: var(--forest); }

.callout {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r);
  padding: 24px 26px;
  margin: 1.8rem 0;
}
.callout h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.callout p { margin-bottom: 0; }
.callout p + p { margin-top: .8rem; }
.callout.warn { border-left-color: var(--gold); }
.callout.dark {
  background: linear-gradient(160deg, var(--forest) 0%, #0A2013 100%);
  border-color: transparent;
  border-left-color: var(--green-lt);
}
.callout.dark h3 { color: #fff; }
.callout.dark p { color: rgba(255,255,255,.8); }
.callout.dark a { color: var(--green-lt); }

.tscroll { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; }
table.t {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: .94rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
table.t th, table.t td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}
table.t th {
  font-family: Archivo, sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--cream);
  white-space: nowrap;
}
table.t tr:last-child td { border-bottom: 0; }
table.t td strong { color: var(--forest); }

.toc {
  background: var(--cream-2);
  border-radius: var(--r);
  padding: 22px 26px;
  margin-bottom: 2.4rem;
}
.toc h2 {
  font-size: .82rem !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 .9rem !important;
}
.toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.toc li { color: var(--muted); font-size: .95rem; }
.toc a { color: var(--forest); font-weight: 500; text-decoration: none; }
.toc a:hover { color: var(--green-dk); text-decoration: underline; }

.updated {
  font-size: .85rem;
  color: var(--muted);
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.guide-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px; align-items: start; }
.guide-side { position: sticky; top: 104px; display: grid; gap: 18px; }
.guide-side .callout { margin: 0; }

@media (max-width: 980px) {
  .guide-grid { grid-template-columns: 1fr; gap: 36px; }
  .guide-side { position: static; }
}

/* guide typography corrections */
.prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.prose h3 { font-size: 1.08rem; }
.callout a { color: var(--green-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.callout a:hover { color: var(--forest); }
.callout.dark a { color: var(--green-lt); }
.callout.dark a:hover { color: #fff; }
.callout a.btn { text-decoration: none; color: #fff; }
.callout a.btn:hover { color: #fff; }
.guide-side .callout p:last-child { margin-bottom: 0; }