/* ---------- Self-hosted fonts (no third-party requests) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ============================================================
   Southeastern Tree Pros, LLC  —  Global Stylesheet
   Locked brand palette: Brand Green #7DBA2F + Ink #111111 + White
   Design system: "Bold Premium Trade" — Space Grotesk display + Inter body
   ============================================================ */

:root {
  /* Brand (locked) */
  --brand: #7DBA2F;          /* THE brand green */
  --brand-600: #6aa528;      /* slightly deeper accent */
  --brand-700: #3f6b1c;      /* dark green — text/buttons, AA on white */
  --brand-800: #2b471a;      /* deep green — bands */
  --brand-900: #14210b;      /* near-black brand green — dark sections */
  --brand-050: #f2f8e8;      /* light brand tint — chips, icon tiles */
  --brand-100: #e6f2d3;      /* light tint — alt sections */

  /* Ink + neutrals (grayscale, palette-safe) */
  --ink: #111111;
  --ink-700: #2c2f2b;
  --muted: #5c635b;
  --n-100: #f1f3ee;
  --n-200: #e4e7df;
  --line: #e4e7df;

  /* Surfaces */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f6f8f2;
  --dark: #14210b;

  /* Type */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Shape + depth */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(20,33,11,.06);
  --shadow: 0 10px 30px rgba(20,33,11,.10);
  --shadow-lg: 0 24px 60px rgba(20,33,11,.16);
  --ring: 0 0 0 4px rgba(125,186,47,.28);

  --maxw: 1180px;
  --gutter: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-700); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-800); }
::selection { background: var(--brand); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.85rem); line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; letter-spacing: -0.01em; }
p { color: var(--ink-700); }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 92px 0; }
.section-sm { padding: 60px 0; }
.section.alt { background: var(--surface-alt); }
.section.dark { background: var(--dark); color: #eef3e6; }
.section.dark h2, .section.dark h3 { color: #fff; }
.center { text-align: center; }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 680px; line-height: 1.65; }
.center .lead { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: 1rem; }

/* Eyebrow / kicker */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 700;
  color: var(--brand-700); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brand); border-radius: 2px; }
.center .eyebrow { justify-content: center; }
.section.dark .eyebrow { color: var(--brand); }
.section-head { max-width: 720px; margin: 0 auto 52px; }
.section-head.left { margin-left: 0; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 16px 28px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}
.btn svg { flex: none; transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-cta { background: var(--brand-700); color: #fff; box-shadow: 0 10px 24px rgba(63,107,28,.28); }
.btn-cta:hover { background: var(--brand-800); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(63,107,28,.34); }
.btn-green { background: var(--brand); color: #14210b; }
.btn-green:hover { background: var(--brand-600); color: #14210b; transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; transform: translateY(-2px); }
.btn-outline { background: #fff; color: var(--brand-800); border-color: var(--n-200); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-800); transform: translateY(-2px); }
.btn-lg { padding: 18px 34px; font-size: 1.06rem; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Top call bar ---------- */
.callbar {
  background: var(--brand-900); color: #eaf3dd; text-align: center;
  font-weight: 600; font-size: .86rem; letter-spacing: .01em; padding: 10px 16px;
}
.callbar strong { color: #fff; }
.callbar a { color: var(--brand); font-weight: 700; }
.callbar a:hover { color: #fff; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(20,33,11,.07); background: rgba(255,255,255,.94); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 20px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
/* The logo is a flex item of .nav and must never absorb the squeeze when
   the nav gets tight. Without flex:0 0 auto it collapses toward 0 width
   and renders as a sliver. The responsive bands below shrink it on
   purpose at set breakpoints; that is the only place it should change. */
.brand img { height: 52px; width: auto; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a { color: var(--ink); font-weight: 600; font-size: .95rem; position: relative; padding: 4px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--brand); transition: right .22s ease; border-radius: 2px; }
.nav-links a:hover { color: var(--brand-800); }
.nav-links a:hover::after { right: 0; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); border-radius: 3px; margin: 5px 0; transition: .2s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--brand-900);
  padding: clamp(84px, 12vw, 150px) 0 clamp(76px, 10vw, 128px);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(1000px 560px at 82% -12%, rgba(125,186,47,.26), transparent 62%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .10; pointer-events: none;
  background-image: url("/assets/trees-pattern.svg"); background-size: 460px; background-repeat: repeat;
}
.hero .container { position: relative; z-index: 1; max-width: 880px; }
.hero .eyebrow { color: var(--brand); }
.hero h1 { color: #fff; text-shadow: 0 2px 22px rgba(8,14,4,.5); }
.hero h1 .accent { color: var(--brand); }
.hero .sub { color: #eef5e6; font-size: 1.24rem; margin-top: 20px; max-width: 640px; line-height: 1.6; text-shadow: 0 1px 14px rgba(8,14,4,.55); }
.hero .eyebrow, .hero-trust span { text-shadow: 0 1px 10px rgba(8,14,4,.5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 40px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 9px; color: #dcebcd; font-weight: 600; font-size: .95rem; }
.hero-trust svg { flex: none; color: var(--brand); }

/* ---------- Trust / credibility band ---------- */
.trust-band { background: #fff; border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; padding: 30px 26px; border-left: 1px solid var(--line); }
.trust-item:first-child { border-left: 0; }
.trust-item .ti-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-050); color: var(--brand-700); display: grid; place-items: center; }
.trust-item h4 { margin-bottom: 2px; font-size: 1rem; }
.trust-item p { font-size: .9rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(125,186,47,.45); }
.card .icon, .icon-tile {
  width: 64px; height: 64px; border-radius: 16px; background: var(--brand-050);
  display: grid; place-items: center; margin-bottom: 20px;
}
.icon-tile img { width: 40px; height: 40px; }
.card-photo { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 18px; display: block; }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--muted); font-size: 1rem; flex: 1; margin: 0; }
.grid-3 .card p, .grid-4 .card p { min-height: 4.4em; }
.card .more { margin-top: 20px; font-weight: 700; color: var(--brand-700); display: inline-flex; align-items: center; gap: 7px; }
.card:hover .more { color: var(--brand-800); }
.card.linked { cursor: pointer; }

/* Service card (icon variant) */
.svc-card h3 { font-size: 1.22rem; }

/* ---------- Feature / why list ---------- */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature .tick { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-050); color: var(--brand-700); display: grid; place-items: center; }
.feature .tick svg { width: 18px; height: 18px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 4px; }
.feature p { color: var(--muted); font-size: .98rem; margin: 0; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; }
.step .num {
  width: 54px; height: 54px; margin-bottom: 18px; border-radius: 14px;
  background: var(--dark); color: var(--brand); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  display: grid; place-items: center;
}
.step h3 { margin-bottom: 6px; font-size: 1.14rem; }
.step p { color: var(--muted); font-size: .98rem; }

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 11; }
.split .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split.media-first .media { order: -1; }

/* Featured content image (service/about pages) */
.featured { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 26px; display: block; }

/* ---------- Stats ---------- */
.stat { text-align: left; }
.stat .n { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--brand); line-height: 1; letter-spacing: -.02em; }
.stat .l { color: #d3e3c2; font-weight: 600; margin-top: 8px; font-size: .96rem; }

/* ---------- Team / owners ---------- */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 820px; margin: 0 auto; }
.team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; text-align: center; }
.photo-wrap { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--brand-700), var(--brand-900)); }
.photo-wrap::before { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; color: #eaf3ed; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: .04em; }
.photo-wrap img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.team-card .body { padding: 24px; }
.team-card h3 { margin-bottom: 3px; }
.team-card .role { color: var(--brand-700); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.team-card p { color: var(--muted); font-size: .96rem; }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

/* ---------- FAQ (accessible accordion; content crawlable for SEO/AEO) ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; }
.faq details[open] { border-color: rgba(125,186,47,.5); box-shadow: var(--shadow); }
.faq summary { cursor: pointer; padding: 20px 24px; font-family: var(--font-display); font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.6rem; line-height: 1; color: var(--brand-700); font-weight: 400; flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { content: '\2013'; }
.faq .a { padding: 0 24px 22px; color: var(--muted); }
.faq .a p { color: var(--muted); margin: 0; }

/* ---------- Reviews ---------- */
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.stars { color: var(--brand); font-size: 1.05rem; letter-spacing: 3px; margin-bottom: 12px; }
.review p { font-size: 1.05rem; color: var(--ink-700); font-style: normal; }
.review .who { margin-top: 16px; font-weight: 700; color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--brand-800); color: #fff; text-align: center; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d7e7cb; margin: 14px auto 30px; max-width: 620px; font-size: 1.12rem; }
.cta-band .hero-cta { justify-content: center; }

/* ---------- Quote form ---------- */
.form-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-lg); }
.form-wrap h3 { font-size: 1.4rem; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 15px; border: 1.5px solid var(--n-200); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 1rem; background: #fff; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.field textarea { min-height: 118px; resize: vertical; }
.req { color: var(--brand-700); }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 8px; }
/* Consent used to be a required checkbox. It was the form's most common dead
   end: people completed every field, hit submit, and were bounced back to a box
   they had never noticed. Submitting the request is the consent, so it is
   stated here instead of gated. Do not turn this back into a checkbox. */
.form-consent { font-size: .84rem; color: var(--muted); margin-top: 12px; text-align: center; }

/* ---------- Interior page hero ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--brand-900); color: #fff; padding: 72px 0; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 82% -20%, rgba(125,186,47,.30), transparent 60%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #dcebcd; margin-top: 12px; max-width: 720px; font-size: 1.14rem; }
.hero-ico { width: 66px; height: 66px; border-radius: 16px; background: rgba(125,186,47,.16); border: 1px solid rgba(125,186,47,.32); display: grid; place-items: center; margin-bottom: 20px; }
.hero-ico img { width: 40px; height: 40px; }
.page-hero .hero-trust { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 26px; }
.page-hero .hero-trust span { display: inline-flex; align-items: center; gap: 9px; color: #dcebcd; font-weight: 600; font-size: .93rem; }
.page-hero .hero-trust svg { flex: none; color: var(--brand); }
.crumbs { font-size: .85rem; color: #b7cfa2; margin-bottom: 16px; }
.crumbs a { color: #b7cfa2; } .crumbs a:hover { color: #fff; }

/* ---------- Blog ---------- */
.article { max-width: 760px; margin: 0 auto; }
.post-meta { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.article .featured { margin-bottom: 26px; }
.post-card { overflow: hidden; padding: 0; }
.post-card .thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.post-card .body { padding: 24px; }
.post-card .body h3 { margin-bottom: 8px; }
.post-card .body p { color: var(--muted); font-size: .96rem; }
.callout { background: var(--brand-050); border-left: 4px solid var(--brand); border-radius: var(--radius-sm); padding: 20px 22px; margin: 24px 0; }
.callout p { margin: 0; color: var(--brand-900); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-900); color: #c3d5b2; padding: 68px 0 30px; }
.site-footer h4 { color: #fff; font-size: 1.02rem; margin-bottom: 16px; font-family: var(--font-display); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 36px; }
.site-footer a { color: #c3d5b2; }
.site-footer a:hover { color: #fff; }
.footer-list { list-style: none; }
.footer-list li { margin-bottom: 10px; }
.footer-brand img { height: 54px; margin-bottom: 16px; }
.footer-brand p { color: #9ab588; font-size: .94rem; max-width: 300px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; font-size: .84rem; color: #8ba97a; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Misc / prose / utilities ---------- */
.prose p { margin-bottom: 17px; color: var(--ink-700); }
.prose h2 { margin: 34px 0 14px; }
.prose ul { margin: 0 0 18px 22px; } .prose li { margin-bottom: 9px; color: var(--ink-700); }
.tag-list { display: flex; flex-wrap: wrap; gap: 11px; }
.tag { background: var(--surface); border: 1px solid var(--line); color: var(--brand-800); font-weight: 600; font-size: .92rem; padding: 9px 17px; border-radius: 999px; box-shadow: var(--shadow-sm); transition: .16s ease; }
a.tag:hover { background: var(--brand); color: #14210b; border-color: var(--brand); transform: translateY(-2px); }
.muted { color: var(--muted); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.mt-0{margin-top:0}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}

/* ---------- Responsive ---------- */
@media (max-width: 1120px) { .nav-links { gap: 18px; } }
/* Burger breakpoint. This used to sit at 900px while every desktop nav sizing
   band started at 1000px, leaving 901-999px with the full seven-item nav row
   and no tightening applied. With the phone button visible that zone overflowed
   the viewport by up to 89px. The two now agree: full nav at 1000px and up,
   burger below. */
@media (max-width: 999px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 1000px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { border-left: 0; }
  .trust-item { border-top: 1px solid var(--line); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 900px) {
  .section { padding: 68px 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.media-first .media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px 22px 22px; box-shadow: var(--shadow);
    max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.open .nav-links > li { padding: 0; border-bottom: 1px solid var(--line); }
  .nav.open .nav-links > li > a { display: block; padding: 15px 0; }
  .nav.open .nav-links a::after { display: none; }
  /* dropdowns become in-flow accordions in the drawer */
  .nav.open .has-sub .sub {
    position: static; display: none; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 12px; min-width: 0; background: transparent;
  }
  .nav.open .has-sub.open .sub { display: block; }
  .nav.open .sub a { padding: 12px 0 12px 16px; border-left: 2px solid var(--n-200); border-radius: 0; }
  .nav.open .sub a:hover { border-left-color: var(--brand); background: transparent; }
  .nav.open .nav-sub-toggle { width: 100%; justify-content: space-between; padding: 15px 0; }
  .nav.open .nav-links li.nav-drawer-cta { display: flex; gap: 10px; padding: 4px 0 16px; order: -1; border-bottom: 1px solid var(--line); }
  .nav-drawer-cta .btn { flex: 1; justify-content: center; padding: 15px 18px; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item, .trust-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trust-item:first-child { border-top: 0; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .hero-cta .btn { width: 100%; }
}


/* ================= Nav dropdowns ================= */
.nav-drawer-cta { display: none; }
.nav-links > li { position: relative; }
.nav-sub-toggle {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: .95rem; color: var(--ink); padding: 4px 0;
}
.nav-sub-toggle svg { transition: transform .2s ease; flex: none; }
.has-sub.open > .nav-sub-toggle svg { transform: rotate(180deg); }
.nav-sub-toggle:hover { color: var(--brand-800); }
.nav-sub-toggle:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
.has-sub .sub {
  position: absolute; top: calc(100% + 14px); left: -18px; min-width: 268px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-sub .sub::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.has-sub .sub a { display: block; padding: 11px 14px; border-radius: 9px; font-weight: 600; font-size: .93rem; color: var(--ink); }
.has-sub .sub a:hover { background: var(--surface-alt); color: var(--brand-800); text-decoration: none; }
.has-sub .sub a::after { display: none; }
.has-sub .sub li + li { margin-top: 1px; }
.sub-head { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 14px 6px; }
.sub-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.sub-all a { color: var(--brand-700) !important; }
.sub.sub-wide { min-width: 420px; column-count: 2; column-gap: 6px; }
.sub.sub-wide li { break-inside: avoid; }
.sub.sub-wide .sub-all { column-span: all; }

/* ================= Sticky mobile action bar ================= */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(20,33,11,.10);
}
.action-bar .btn { flex: 1; justify-content: center; padding: 15px 14px; font-size: 1rem; }
.action-bar .btn-emerg { flex: 0 0 auto; padding: 15px 18px; background: #fff; color: var(--brand-800); border-color: var(--n-200); }
.action-bar .btn-emerg:hover { border-color: var(--brand); }
@media (max-width: 900px) {
  .action-bar { display: flex; }
  body { padding-bottom: 78px; }
}

/* ================= Local / town page blocks ================= */
.area-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.area-links a { display: flex; align-items: center; gap: 9px; padding: 11px 0; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); font-size: .97rem; }
.area-links a:hover { color: var(--brand-800); text-decoration: none; }
.area-links svg { flex: none; color: var(--brand); }
@media (max-width: 900px) { .area-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .area-links { grid-template-columns: 1fr; } }

.local-note { background: var(--surface-alt); border-left: 4px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 18px 22px; margin: 26px 0; }
.local-note p:last-child { margin-bottom: 0; }
.local-note strong { color: var(--ink); }

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: .86rem; color: var(--brand-800); box-shadow: var(--shadow-sm);
}
.badge svg { color: var(--brand); flex: none; }

/* ================= Credential / people ================= */
.cred-card { display: flex; gap: 22px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.cred-card img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; flex: none; }
.cred-card .who-name { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; }
.cred-card .who-role { color: var(--brand-700); font-weight: 700; font-size: .9rem; margin-top: 3px; }
.cred-card p { color: var(--muted); margin: 12px 0 0; font-size: .97rem; }
@media (max-width: 560px) { .cred-card { flex-direction: column; } }

/* ================= Price table ================= */
.price-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.price-table th, .price-table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: .97rem; }
.price-table th { background: var(--surface-alt); font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--ink); }
.price-table tr:last-child td { border-bottom: 0; }
.price-table td.range { font-weight: 700; color: var(--brand-800); white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-note { font-size: .88rem; color: var(--muted); margin-top: 14px; }

/* ================= Map embed ================= */
.map-embed { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); line-height: 0; }
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; }

/* ================= Accessibility ================= */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--brand-900); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 700; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================= Mobile hero trim ================= */
@media (max-width: 560px) {
  .callbar { font-size: .78rem; padding: 8px 14px; }
  .hero { padding: 54px 0 58px; }
  .hero .sub { font-size: 1.06rem; margin-top: 15px; }
  .hero-trust { margin-top: 26px; gap: 9px 18px; }
  .hero-trust span { font-size: .88rem; }
  .hero-cta { margin-top: 26px; }
  .form-wrap { padding: 24px 20px; }
}

/* active nav state */
.nav-links a.is-active { color: var(--brand-800); }
.nav-links a.is-active::after { right: 0; }
.field input[type="file"] { padding: 11px 14px; background: var(--surface-alt); font-size: .92rem; }
picture { display: contents; }

/* ---------- Callbar: drop secondary items on small screens ---------- */
.callbar span + span::before, .callbar span + a::before { content: "\2022"; margin: 0 10px; opacity: .55; }
@media (max-width: 720px) {
  .callbar .cb-b { display: none; }
  .callbar .cb-a + .cb-cta::before { content: "\2022"; margin: 0 8px; opacity: .55; }
}

/* ---------- Mobile header sizing ---------- */
@media (max-width: 900px) {
  .nav { height: 72px; }
  .brand img { height: 44px; }
  .nav-cta .btn-cta { padding: 12px 18px; font-size: .92rem; }
}
@media (max-width: 400px) {
  .brand img { height: 38px; }
  .nav-cta .btn-cta { padding: 11px 14px; font-size: .86rem; }
}

/* ---------- Hero legibility on mobile ---------- */
.hero .eyebrow {
  display: inline-flex; background: rgba(20,33,11,.55); border: 1px solid rgba(125,186,47,.4);
  padding: 7px 15px 7px 13px; border-radius: 999px; backdrop-filter: blur(3px);
  text-shadow: none; color: #b7e56a;
}
.hero .eyebrow::before { width: 18px; }
@media (max-width: 900px) {
  /* the desktop scrim runs left-to-right; phones need it top-to-bottom */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(20,33,11,.78) 0%, rgba(20,33,11,.62) 45%, rgba(20,33,11,.80) 100%),
      radial-gradient(700px 420px at 82% -12%, rgba(125,186,47,.22), transparent 62%);
  }
  .hero h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
}

/* =====================================================================
   DESIGN POLISH PASS
   ===================================================================== */

/* ---- Split layout: top-align columns, let the form track the reader ---- */
.split { align-items: start; }
.split > div > .form-wrap { position: sticky; top: 104px; }
@media (max-width: 900px) { .split > div > .form-wrap { position: static; } }

/* ---- Prose measure ---- */
.prose-wide { max-width: 760px; margin: 0 auto; }
.prose-wide .featured { margin-bottom: 34px; }

/* ---- Trust band: room to breathe, no orphan wraps ---- */
.trust-item { padding: 30px 26px; gap: 16px; }
.trust-item h4 { font-size: 1.02rem; margin-bottom: 5px; line-height: 1.3; }
.trust-item p { font-size: .92rem; line-height: 1.5; }
.ti-ico { width: 46px; height: 46px; }

/* ---- Town cards (service-areas grid, no photos = no duplicate imagery) ---- */
.town-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.town-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: 28px 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.town-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); text-decoration: none; }
.town-county {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-700); margin-bottom: 10px;
}
.town-card h3 { font-size: 1.35rem; margin-bottom: 10px; color: var(--ink); }
.town-card p { color: var(--muted); font-size: .96rem; flex: 1; margin: 0; line-height: 1.6; }
.town-card .more { margin-top: 20px; font-weight: 700; color: var(--brand-700); display: inline-flex; align-items: center; gap: 7px; font-size: .93rem; }
.town-card:hover .more { color: var(--brand-800); }
.town-card:hover .more svg { transform: translateX(3px); }
.town-card .more svg { transition: transform .18s ease; }
@media (max-width: 980px) { .town-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .town-grid { grid-template-columns: 1fr; } }

/* ---- Credential tiles (homepage) ---- */
.cred-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.cred-num {
  font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--brand-700);
  background: var(--brand-050); width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.cred-tile h3 { font-size: 1.12rem; margin-bottom: 11px; line-height: 1.35; }
.cred-tile p { color: var(--muted); font-size: .97rem; margin: 0; line-height: 1.65; }

/* ---- Promise tiles (about) ---- */
.promise-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--brand);
}
.promise-tile h3 { font-size: 1.2rem; margin-bottom: 12px; }
.promise-tile p { color: var(--muted); font-size: .97rem; margin: 0; line-height: 1.65; }

/* ---- "Next" link grid (replaces bare bulleted related lists) ---- */
.next-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 900px; margin: 0 auto; }
.next-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px 24px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.next-link svg { color: var(--brand-700); flex: none; transition: transform .18s ease; }
.next-link:hover { border-color: rgba(125,186,47,.6); transform: translateX(3px); box-shadow: var(--shadow); text-decoration: none; color: var(--brand-800); }
.next-link:hover svg { transform: translateX(3px); }
@media (max-width: 700px) { .next-grid { grid-template-columns: 1fr; } }

/* ---- Blog / card photos: one consistent aspect ratio ---- */
.card-photo { aspect-ratio: 16 / 10; height: auto; object-fit: cover; }

/* ---- Owner cards: unify two very different photos ---- */
.team-card img, .team img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }

/* ---- Arborist credential card without a photo should not look half-built ---- */
.cred-card { border-left: 4px solid var(--brand); }

/* ---- Footer: stop awkward two-word wraps ---- */
.footer-list a, .footer-list li { text-wrap: pretty; }
.site-footer .footer-grid { gap: 30px 40px; }

/* ---- Typographic niceties a hand-built site usually misses ---- */
h1, h2, h3, .lead { text-wrap: balance; }
p { text-wrap: pretty; }
.prose p, .cred-tile p, .promise-tile p, .town-card p { hyphens: none; }

/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover, .town-card:hover, .next-link:hover { transform: none !important; }
}

/* ---- Selection + scrollbar detail ---- */
::selection { background: rgba(125,186,47,.32); color: var(--ink); }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

/* ---- Print: let someone print a quote page cleanly ---- */
@media print {
  .callbar, .site-header, .action-bar, .cta-band, .site-footer, .skip-link, .next-grid { display: none !important; }
  body { padding-bottom: 0; }
  .page-hero, .hero { background: none !important; color: #000 !important; padding: 0 0 18px; }
  .page-hero h1, .hero h1, .page-hero p, .hero p { color: #000 !important; text-shadow: none !important; }
  .section { padding: 18px 0; }
  a[href^="/"]::after { content: " (setreepros.com" attr(href) ")"; font-size: .8em; color: #555; }
  .faq details { break-inside: avoid; }
}

/* aspect-ratio only applies when the other dimension is auto; the HTML
   width/height attributes were pinning these images to 810px tall. */
.post-card .thumb, .card-photo, .team-card img, .team img, .featured { height: auto; }
.post-card .thumb { aspect-ratio: 16 / 10; }

/* Two same-background sections in a row shouldn't double their padding. */
.section.alt + .section.alt:not(.cta-band) { padding-top: 0; }
.section:not(.alt):not(.cta-band) + .section:not(.alt):not(.cta-band) { padding-top: 0; }

/* ---------------------------------------------------------------
   Hero over photography: the original scrim was tuned for a darker
   image. With a bright sky behind the headline the body copy lost
   contrast, and the decorative tree pattern read as noise on top of
   a photograph. Both fixed here.
   --------------------------------------------------------------- */
.hero { padding: clamp(96px, 12vw, 156px) 0 clamp(92px, 11vw, 140px); }
.hero::before {
  background:
    linear-gradient(100deg, rgba(12,20,7,.88) 0%, rgba(12,20,7,.74) 34%, rgba(12,20,7,.42) 58%, rgba(12,20,7,.18) 100%),
    radial-gradient(900px 520px at 84% -10%, rgba(125,186,47,.20), transparent 62%);
}
/* pattern only where there is no photograph behind it */
.hero::after { opacity: .05; }
.hero .sub { color: #f2f8ea; text-shadow: 0 1px 18px rgba(8,14,4,.75); max-width: 600px; }
.hero h1 { text-shadow: 0 2px 26px rgba(8,14,4,.6); }
.hero-trust span { color: #e7f2da; }

@media (max-width: 900px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(12,20,7,.84) 0%, rgba(12,20,7,.68) 42%, rgba(12,20,7,.86) 100%),
      radial-gradient(700px 420px at 82% -12%, rgba(125,186,47,.18), transparent 62%);
  }
}

/* No decorative pattern on top of a photograph — it reads as artifacting.
   The pattern stays on the solid-green CTA bands where it belongs. */
.hero::after { display: none; }

/* ---- Service-area panel (replaces a third-party map iframe: no external
        embed, no blank-box failure mode, and one less origin in the CSP) ---- */
.area-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px 40px; box-shadow: var(--shadow-sm); }
.area-panel-head { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.area-panel-head p:last-child { color: var(--muted); margin: 0; }
.area-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 40px; }
.area-col h3 { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.area-col ul { list-style: none; margin: 0; padding: 0; }
.area-col li + li { margin-top: 2px; }
.area-col a { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-weight: 600; color: var(--ink); font-size: .97rem; }
.area-col a:hover { color: var(--brand-800); text-decoration: none; }
.area-col svg { color: var(--brand); flex: none; }
@media (max-width: 820px) { .area-cols { grid-template-columns: repeat(2, 1fr); } .area-panel { padding: 30px 24px; } }
@media (max-width: 520px) { .area-cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Touch targets. WCAG 2.5.8 wants 24px minimum; 44px is the figure
   Apple and Google both use and it is what a thumb actually needs.
   Inline links inside sentences are exempt and left alone.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-list li { margin-bottom: 0; }
  .nav-cta .btn-cta { min-height: 44px; }
  .brand { min-height: 44px; }
  .crumbs a { display: inline-block; padding: 6px 0; }
  .callbar a { display: inline-block; padding: 4px 0; }
}

/* ---------------------------------------------------------------
   Team grid: three people across, dropping to two then one.
   The initials tile is a deliberate branded placeholder, not a gap.
   --------------------------------------------------------------- */
.team { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); max-width: 660px; } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; max-width: 380px; } }

/* ---------------------------------------------------------------
   Lighter hero scrim. The photograph reads much more clearly; the
   headline and body copy still clear WCAG AA against it because the
   text sits over the denser left end of the gradient and keeps its
   shadow. Verified with a measured contrast check.
   --------------------------------------------------------------- */
.hero::before {
  /* Dense enough behind the text column to hold WCAG AA, then falls away
     fast so the right side of the photograph — where the climber is — reads
     clearly. Lighter overall than before across most of the frame. */
  background:
    linear-gradient(100deg,
      rgba(12,20,7,.76) 0%,
      rgba(12,20,7,.70) 26%,
      rgba(12,20,7,.54) 48%,
      rgba(12,20,7,.22) 66%,
      rgba(12,20,7,.04) 84%,
      rgba(12,20,7,0) 100%),
    radial-gradient(900px 520px at 86% -10%, rgba(125,186,47,.14), transparent 62%);
}
@media (max-width: 900px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(12,20,7,.72) 0%, rgba(12,20,7,.54) 45%, rgba(12,20,7,.74) 100%),
      radial-gradient(700px 420px at 82% -12%, rgba(125,186,47,.14), transparent 62%);
  }
}

/* The trust badges are small text and they run the full width of the hero,
   so part of the row sits over the now-clear right side of the photo. Rather
   than darkening the whole image to protect four short labels, each one gets
   its own translucent chip. Legible over anything, and it reads as designed. */
.hero-trust { gap: 10px 12px; }
.hero-trust span {
  background: rgba(12,20,7,.58);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 8px 15px 8px 13px;
  backdrop-filter: blur(4px);
  text-shadow: none;
  color: #eef6e3;
}
@media (max-width: 560px) { .hero-trust span { font-size: .86rem; padding: 7px 13px 7px 11px; } }

/* ---- Service areas grouped by county (16 towns is too many to scan flat) ---- */
.county-block + .county-block { margin-top: 54px; }
.county-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 26px; border-bottom: 2px solid var(--line);
}
.county-head h3 { font-size: 1.5rem; margin: 0; }
.county-head p { color: var(--muted); margin: 0; font-size: .97rem; flex: 1; min-width: 220px; }
.county-count {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-700); background: var(--brand-050); padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.county-block .town-card .town-county { display: none; }
@media (max-width: 620px) { .county-head { gap: 8px; } .county-head p { min-width: 0; } }

/* =====================================================================
   BRAND SERVICE ICONS
   Illustrations rather than glyphs, so the tinted chip is gone and the
   artwork gets room. Every icon shares one 72x46 viewBox and was scaled
   to a matched ink area, so a wide stump grinder and a compact pair of
   pruners read at the same optical weight side by side.
   ===================================================================== */
.card .icon, .icon-tile {
  width: 122px; height: 78px; border-radius: 0; background: none;
  display: flex; align-items: flex-end; justify-content: flex-start; margin-bottom: 16px;
}
.icon-tile img { width: 122px; height: 78px; transition: transform .2s ease; transform-origin: left bottom; }
.card:hover .icon-tile img { transform: scale(1.05); }

.hero-ico {
  width: 178px; height: 114px; border-radius: 0; background: none; border: 0;
  display: flex; align-items: flex-end; justify-content: flex-start; margin-bottom: 10px;
}
.hero-ico img { width: 178px; height: 114px; }

@media (max-width: 900px) {
  .card .icon, .icon-tile, .icon-tile img { width: 106px; height: 68px; }
  .hero-ico, .hero-ico img { width: 132px; height: 84px; }
}

/* Two-up band for the services that support every job rather than being
   booked on their own. Gives the land-clearing and debris icons a home. */
.also-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 0 auto; }
.also-card {
  display: flex; gap: 22px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.also-card img { width: 104px; height: 66px; flex: none; }
.also-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.also-card p { color: var(--muted); font-size: .96rem; margin: 0; line-height: 1.6; }
@media (max-width: 820px) { .also-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .also-card { flex-direction: column; gap: 12px; } }

/* CTA bands are solid brand green. The decorative tree pattern was removed
   at Amy's request — the flat colour reads cleaner behind the headline. */
.cta-band::after { content: none; }

/* ---------------------------------------------------------------
   Trust band icons. These are two-tone illustrations (deep green
   base, brand green accent) rather than the 22px line glyphs that
   were here, so the tinted chip goes and the artwork gets room —
   same treatment as the service icons.
   --------------------------------------------------------------- */
/* Stacked, like the service cards: the icon gets room to read and the copy
   gets the full column width instead of wrapping to six short lines. */
.trust-item {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: 34px 28px;
}
.trust-item .ti-ico {
  width: 110px; height: 93px; border-radius: 0; background: none; border: 0;
  display: flex; align-items: flex-end; justify-content: flex-start;
  flex: none; margin-bottom: 12px;
}
.trust-item .ti-ico img { width: 110px; height: 93px; display: block; }
.trust-item h4 { font-size: 1.05rem; margin-bottom: 7px; }
.trust-item p { font-size: .93rem; line-height: 1.55; }
@media (max-width: 1000px) {
  .trust-item .ti-ico, .trust-item .ti-ico img { width: 92px; height: 78px; }
  .trust-item { padding: 28px 24px; }
}

/* ============================================================
   SERVICE AREA MAP  (added with Erica's July revisions)
   Inline-asset SVG map of the 14 covered Alabama counties.
   No third-party embed, so it stays inside the existing CSP.
   ============================================================ */
.map-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}
.map-figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.map-figure img { width: 100%; height: auto; display: block; }
.map-h3 { font-size: 1.15rem; margin: 0 0 16px; }
.county-chips {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 20px;
}
.county-chips li {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .97rem; color: var(--ink-700); line-height: 1.3;
}
.county-chips li::before {
  content: ""; flex: none;
  width: 11px; height: 11px; border-radius: 3px; background: var(--brand);
}
.map-note {
  margin: 22px 0 0; font-size: .94rem; line-height: 1.6; color: var(--muted);
  padding-top: 18px; border-top: 1px solid var(--line);
}
.trust-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1000px) {
  .map-split { grid-template-columns: 1fr; gap: 30px; max-width: 640px; }
}
@media (max-width: 900px) {
  .trust-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .county-chips { grid-template-columns: 1fr; gap: 9px; }
  .map-figure { padding: 10px; }
  .trust-grid.cols-3 { grid-template-columns: 1fr; }
}

/* Long button labels must not push the page wide on small phones */
@media (max-width: 430px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* County chips became links once the county Location pages went live */
.county-chips li a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.county-chips li a:hover, .county-chips li a:focus-visible {
  color: var(--brand-700); border-bottom-color: var(--brand);
}

/* ============================================================
   HERO BACKGROUND VIDEO
   The poster image is painted by the section's own background, so the
   hero is complete before the video exists. The <video> fades in on top
   only once it can actually play. Scrims sit above the video, content
   above the scrims.
   ============================================================ */
.hero.has-video .hero-video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.hero.has-video .hero-video video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 46%;
  display: block; opacity: 0; transition: opacity .8s ease;
}
.hero.has-video .hero-video video.is-playing { opacity: 1; }
/* Scrim lives on the video layer only, so the darkness over the video
   matches the darkness over the poster image instead of stacking on it.
   Amy asked for a light scrim so the photo reads; keep it light. */
.hero.has-video .hero-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,33,11,.46) 0%, rgba(20,33,11,.26) 48%, rgba(20,33,11,.06) 100%);
}
.hero.has-video::before,
.hero.has-video::after { z-index: 1; }
.hero.has-video .container { z-index: 2; }

/* The video is never fetched below this width (see site.js), so do not
   reserve anything for it here. */
@media (prefers-reduced-motion: reduce) {
  .hero.has-video .hero-video video { display: none; }
}

/* ============================================================
   SPLIT HERO  —  copy left on solid colour, footage right in a panel
   ============================================================
   RESTORED 2026-08-03. This block was missing from the stylesheet while
   index.html still carried the .hero-split markup, so none of these classes
   matched anything. The consequences were not cosmetic:

     - .hero-split-grid never became a grid, so the two columns collapsed.
     - .hero-media computed to height 0, so the media panel did not exist.
     - .hero-video kept its `position:absolute; inset:0` from the block above
       but, with no positioned ancestor left, resolved against .hero itself
       and stretched the footage across the ENTIRE hero, directly behind the
       headline. Measured: the h1 box overlapped the video box.

   That is the exact arrangement that was tested frame by frame and rejected:
   over this footage's bright-sky shots white headline text falls to 1.8:1 and
   the green "Alabama" to 1.0:1, and no scrim rescues it without destroying the
   video. It went unnoticed because test Chromium has no H.264 decoder, so the
   video silently never appeared and the hero merely looked empty.

   Do not put the copy back over the footage. Separating them is what lets the
   video play at full brightness with no dark wash while text contrast is set
   by the solid panel colour behind it.
   ============================================================ */
.hero.has-video.hero-split {
  background-image: none;
  background-color: var(--dark);
}
/* The scrim and the photo-mode gradient exist to make text readable ON the
   footage. In the split hero nothing sits on the footage, so both are off. */
.hero.has-video.hero-split::before {
  background: radial-gradient(900px 520px at 84% -10%, rgba(125,186,47,.20), transparent 62%);
}
.hero.has-video.hero-split .hero-video::after { content: none; }

/* The base rule caps .hero .container at 880px, which is right for a
   single centred column and far too narrow for two. */
.hero.hero-split .container { max-width: var(--maxw); }

.hero-split-grid {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero-copy { min-width: 0; }

/* Text sits on solid colour now, so the shadows added for legibility over a
   photograph are just mud. */
.hero-split .hero-copy h1,
.hero-split .hero-copy .sub,
.hero-split .hero-copy .eyebrow,
.hero-split .hero-trust span { text-shadow: none; }
.hero-split .hero-trust { max-width: 500px; }

.hero-media {
  position: relative;
  margin: 0;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(125,186,47,.55);
  box-shadow: 0 20px 54px rgba(0,0,0,.38);
  background-color: #0d1607;
  background-image: url("/assets/img/hero-crew-poster-1200.webp");
  background-size: cover;
  background-position: center 46%;
}
/* .hero-video is absolutely positioned by the block above; .hero-media being
   position:relative is what confines it to the panel instead of the section. */
.hero.has-video.hero-split .hero-media .hero-video { position: absolute; inset: 0; }

@media (max-width: 1100px) {
  .hero-media { background-image: url("/assets/img/hero-crew-poster-768.webp"); }
}
@media (max-width: 960px) {
  .hero-split-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-copy { order: 0; }
  .hero-media { order: 1; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .hero-media { background-image: url("/assets/img/hero-crew-poster-480.webp"); }
  .hero-split .hero-trust { max-width: none; }
}
/* The section-background poster rules below are for the full-bleed photo hero.
   The split hero paints its still inside the panel instead, so opt out. */
.hero.has-video.hero-split { background-image: none !important; }

/* Phones get the small hero still. They never load the video, so this is the
   only hero asset they download. */
@media (max-width: 640px) {
  .hero.has-video {
    background-image:
      linear-gradient(90deg, rgba(20,33,11,.52) 0%, rgba(20,33,11,.32) 55%, rgba(20,33,11,.12) 100%),
      url("/assets/img/hero-crew-poster-480.webp") !important;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero.has-video {
    background-image:
      linear-gradient(90deg, rgba(20,33,11,.48) 0%, rgba(20,33,11,.28) 55%, rgba(20,33,11,.08) 100%),
      url("/assets/img/hero-crew-poster-768.webp") !important;
  }
}

/* ==========================================================================
   2026-07-29 REBUILD — phone system, expanded estimate form, and the
   location-template sections.
   ========================================================================== */

/* Anything hidden must actually be hidden. .btn is inline-flex, which wins
   over the UA sheet's [hidden]{display:none}, so state it explicitly. This
   is what keeps every phone element invisible while no number is set. */
[hidden] { display: none !important; }

/* ---- phone ------------------------------------------------------------- */
.btn-phone { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.action-bar .btn-phone { flex: 1 1 auto; }

/* Top-level nav labels must never wrap. Before the phone number existed the
   call button was hidden, so the nav had ~170px of slack and multi-word
   labels ("What Affects Cost", "Tree Care Resources") happened to fit on one
   line. With the number live that slack is gone, flexbox shrinks each li
   below its content width, and those labels break onto 2-3 lines. Pinning
   nowrap here makes the responsive bands below do the adapting instead. */
.nav-links > li > a,
.nav-links > li > .nav-sub-toggle { white-space: nowrap; }

/* Desktop nav sizing. The upper bound used to be 1300px, on the assumption
   that above it the base 26px gaps and .95rem labels fit. They do not once
   the phone button is visible: brand 219 + nav-links + nav-cta 371 exceeds
   the 1136px content box at every desktop width, because --maxw is capped at
   1180px so wide viewports get no extra room. */
@media (min-width: 1000px) {
  .nav { gap: 12px; }
  .nav-links { gap: 14px; }
  .nav-links > li > a, .nav-sub-toggle { font-size: .86rem; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { font-size: .8rem; padding: 9px 12px; }
}
/* The tightest band: full desktop nav has just appeared but there is barely
   room for it, and the phone button makes it tighter still. */
@media (min-width: 1000px) and (max-width: 1140px) {
  .nav { gap: 8px; }
  .nav-links { gap: 11px; }
  .nav-links > li > a, .nav-sub-toggle { font-size: .8rem; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { font-size: .75rem; padding: 8px 10px; }
  .brand img { width: 156px; height: auto; }
}
/* Below the desktop breakpoint the header is phone + estimate + burger. Keep
   all three on one line by letting them shrink rather than pushing the page
   wide, which is what an extra button in a fixed-width bar does otherwise.
   Bound matches the burger breakpoint above, so this only ever applies to the
   burger layout. */
@media (max-width: 999px) {
  .nav-cta { min-width: 0; flex-wrap: nowrap; gap: 7px; }
  .nav-cta .btn { font-size: .8rem; padding: 9px 11px; white-space: nowrap; min-width: 0; }
  .nav-cta .btn-phone { overflow: hidden; text-overflow: ellipsis; }
}
/* Phone widths: logo + phone + Free Estimate + burger do not fit. Before the
   number was live the header only carried estimate + burger and fitted fine;
   with the phone button visible the two CTAs overlapped and the number
   clipped to "6) 622-5" on every common handset (360-520px).
   The header's Free Estimate button is the one to drop, because it is the
   only redundant element here: the sticky action bar at the bottom of every
   mobile page already carries phone + Emergency + Free Estimate, and the
   drawer, hero and in-page CTAs all carry it too. The phone button stays in
   the header, uncramped, which is what a homeowner with a tree on the roof
   is looking for. */
@media (max-width: 560px) {
  .nav-cta > .btn-cta { display: none; }
  .nav-cta { gap: 10px; }
  .nav-cta .btn-phone { overflow: visible; text-overflow: clip; font-size: .9rem; padding: 10px 14px; }
}
/* Smallest handsets. Reclaim room from the nav gaps and the wordmark so the
   full ten characters of the phone number always fit; a clipped number is
   worse than a slightly smaller logo. */
@media (max-width: 430px) {
  .nav { gap: 12px; }
  .nav-cta { gap: 8px; }
  .brand img { width: 150px; height: auto; }
  .nav-cta .btn { font-size: .74rem; padding: 8px 9px; }
  .nav-cta .btn-phone { font-size: .82rem; padding: 9px 11px; }
  .action-bar .btn { font-size: .88rem; padding: 14px 8px; }
  .action-bar .btn-emerg { padding: 14px 10px; }
}
@media (max-width: 380px) {
  .nav { gap: 10px; }
  .brand img { width: 128px; height: auto; }
  .nav-cta .btn-phone { font-size: .78rem; padding: 9px 10px; }
}

/* ---- estimate form ----------------------------------------------------- */
.field-hint { font-size: .82rem; color: var(--muted); margin: 6px 0 0; }
.form-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; line-height: 1.45; color: var(--ink-700);
  margin: 0 0 16px; cursor: pointer;
}
.form-check input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--brand-700); cursor: pointer;
}
.form-check strong { color: var(--ink); }
.urgent-box {
  background: #fff8ee; border: 1px solid #f0d9b5;
  border-left: 4px solid #c9762a;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px; margin: 4px 0 18px;
}
.urgent-box .form-check { margin-bottom: 0; }
.urgent-flag {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: #a8571a; background: #fff2e0; border-radius: 999px;
  padding: 5px 12px; margin: 0 0 10px;
}

/* ---- thank-you success state ------------------------------------------- */
.success-mark {
  width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-050); color: var(--brand-700);
  border: 2px solid var(--brand);
}
.success-next {
  text-align: left; background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 22px 26px; margin: 30px auto 0; max-width: 560px;
}
.success-next h2 { font-size: 1.08rem; margin: 0 0 12px; }
.success-next ol { margin: 0 0 14px; padding-left: 20px; }
.success-next li { color: var(--ink-700); margin-bottom: 8px; }
.success-next p:last-child { margin-bottom: 0; font-size: .88rem; }

/* ---- location template sections ---------------------------------------- */
.community-chips {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  list-style: none; margin: 0 auto; padding: 0; max-width: 860px;
}
.community-chips li {
  background: var(--brand-050); color: var(--brand-800);
  border: 1px solid var(--brand-100); border-radius: 999px;
  padding: 8px 16px; font-weight: 600; font-size: .93rem;
}
.reason-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.reason {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 22px 24px;
}
.reason h3 { font-size: 1.02rem; margin: 0 0 8px; }
.reason p { margin: 0; font-size: .94rem; }
@media (max-width: 940px) { .reason-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .reason-grid { grid-template-columns: 1fr; } }

.why-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 820px;
  display: grid; gap: 12px;
}
.why-list li {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 15px 20px; color: var(--ink-700); font-size: .96rem;
}
.why-list strong { color: var(--ink); }

.local-h3 { font-size: 1.12rem; margin: 30px 0 0; }
.local-h3 + .local-note { margin-top: 12px; }

.area-links-all { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .area-links-all { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .area-links-all { grid-template-columns: 1fr; } }
.sub-overview a { font-weight: 700; }

/* ---- optional technical-review byline ----------------------------------- */
.tech-review {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; font-weight: 600; color: var(--brand-800);
  background: var(--brand-050); border: 1px solid var(--brand-100);
  border-radius: 999px; padding: 7px 15px; margin: 4px 0 0;
}
.tech-review svg { flex: none; color: var(--brand-700); }


/* ---------------------------------------------------------------------
   SISTER-COMPANY ROW  (STP-SISTER-ROW-2026-08-04, horizontal band 2026-08-04c)

   Three sister-company logos, sitting as a full-width band between the
   footer columns and the copyright line. It used to live inside the
   narrow "Company" column, which is about 260px wide, so three logos
   could never sit on one line there. Moving it out is what makes a
   horizontal row possible.

   Each source logo was knocked out to a pure-white silhouette on
   transparency so all three read the same weight on the dark footer,
   then exported as WebP at 2x display height. Under 13 KB for all three.

   Heights differ on purpose: SEUS and GDL are stacked lockups, MWS is a
   wide one, so it needs less height to carry the same visual weight.
   ------------------------------------------------------------------- */
.footer-sisters {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sister-label {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .62;
  margin-bottom: 14px;
}
.sister-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 44px;
}
.sister-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity .18s ease, transform .18s ease;
}
.sister-img {
  display: block;
  width: auto;
  height: 50px;
  opacity: .85;
  transition: opacity .18s ease;
}
/* MWS is a wide lockup; matching the others on height would let it dominate. */
.sister-mark[href*="mwswaste"] .sister-img { height: 36px; }
.sister-mark:hover,
.sister-mark:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
}
.sister-mark:hover .sister-img,
.sister-mark:focus-visible .sister-img { opacity: 1; }
.sister-mark:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

@media (max-width: 720px) {
  .footer-sisters { margin-top: 26px; padding-top: 20px; }
  .sister-row { gap: 14px 26px; }
  .sister-img { height: 38px; }
  .sister-mark[href*="mwswaste"] .sister-img { height: 27px; }
}

@media (max-width: 420px) {
  .sister-row { gap: 10px 16px; }
  .sister-img { height: 28px; }
  .sister-mark[href*="mwswaste"] .sister-img { height: 20px; }
}
}
}