/* ============================================================
   Triad Tree Removal, Greensboro NC
   Palette: forest green / bone / equipment orange. The orange is
   sampled from their own fleet: the bucket truck, the dump truck
   and the chipper in their job photos are all this color.
   Type: Libre Franklin (display) + Public Sans (body).
   ============================================================ */

@import url("../fonts/fonts.css");

:root {
  --paper: #F6F5F0;
  --alt: #EAE9E2;
  --ink: #16241C;
  --ink-soft: #24322A;
  --brass: #C05E17;          /* accent on light: 4.0:1 on --paper */
  --brass-hi: #F08A32;       /* accent on dark */
  --accent: #C05E17;         /* alias used by the credential emblems in main.js */
  --stone: #7C837D;
  --line: rgba(22, 36, 28, .14);
  --line-light: rgba(246, 245, 240, .16);
  --white: #FFFFFF;
  --font-display: "Libre Franklin", system-ui, -apple-system, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, sans-serif;
  --radius: 16px;
  --radius-s: 12px;
  --shadow: 0 18px 50px rgba(22, 36, 28, .12);
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; line-height: 1.06; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: clamp(72px, 9vw, 120px); }
.section.alt { background: var(--alt); }
.section-head { max-width: 660px; margin-bottom: clamp(34px, 5vw, 58px); }
.section-head h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; margin: 14px 0 15px; }
.section-head p { font-size: 18px; color: rgba(36, 50, 42, .78); margin: 0; }
.dark { background: var(--ink); color: rgba(246, 245, 240, .82); }
.dark h2, .dark h3, .dark h4 { color: var(--paper); }
.dark .section-head p { color: rgba(246, 245, 240, .7); }

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--brass); }
.eyebrow.light { color: var(--brass-hi); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
  padding: 0 26px; height: 52px; border-radius: var(--radius-s);
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--brass); color: #fff; }
.btn-primary:hover { background: var(--brass-hi); transform: translateY(-2px); }
.btn-lg { height: 60px; padding: 0 34px; font-size: 17px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.hero .btn-ghost { color: var(--paper); border-color: rgba(246, 245, 240, .6); }
.hero .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 800; color: var(--paper);
  transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.nav-in { display: flex; align-items: center; gap: 24px; height: 86px; }
.logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* 56px, not the 42px the old lockup used. The new logo stacks the mark over
   the wordmark instead of sitting beside it, so at 42px the words were
   unreadable. Still narrower than the old horizontal lockup (130px vs 177px),
   so nothing in the 78px nav bar has to move. */
.logo-full { height: 66px; width: auto; object-fit: contain; display: block; }
/* Both lockups sit on top of each other and cross-fade on the same curve as the
   bar behind them, so the logo never lags the background. Same duration as
   .nav's transition above; move them together. */
.logo-swap { position: relative; display: block; }
.logo-swap img { transition: opacity .25s ease; }
.logo-dark { position: absolute; inset: 0; opacity: 0; }
.nav.is-solid .logo-light { opacity: 0; }
.nav.is-solid .logo-dark { opacity: 1; }
.foot-logo { height: 68px; }
.nav-links { display: flex; gap: 25px; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 14.5px; letter-spacing: .01em; opacity: .94; padding: 6px 0; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--brass-hi); transition: width .22s ease; }
.nav-links a:hover::after { width: 100%; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 800; font-size: 16px; letter-spacing: .01em; white-space: nowrap; color: inherit;
}
.nav-phone svg { color: var(--brass-hi); }
.nav .btn.nav-cta { height: 44px; padding: 0 20px; font-size: 14.5px; }
.nav.is-solid { background: rgba(246, 245, 240, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.nav.is-solid .nav-phone svg { color: var(--brass); }
/* color: inherit is load-bearing. A <button> resets color to buttontext (black),
   so the bars below, which paint with currentColor, ignore the nav's cream and
   render near-invisible against a dark hero photo. */
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; color: inherit; }
.nav-burger span { width: 24px; height: 2px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 790; background: var(--ink); color: var(--paper); display: none; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 6vw, 48px); }
.menu-open .mobile-menu { display: flex; }
.mobile-menu a { text-decoration: none; }
.mobile-menu nav a { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 8vw, 42px); padding: 12px 0; border-bottom: 1px solid var(--line-light); }
.mobile-menu .mm-foot { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.mobile-menu .nav-phone { font-size: 22px; }

/* ---------- hero (vertically centered) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: var(--paper); overflow: hidden; }
.hero-media { position: absolute; inset: 0; background: var(--ink); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-fallback { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(16,26,20,.90) 0%, rgba(16,26,20,.76) 34%, rgba(16,26,20,.44) 60%, rgba(16,26,20,.52) 100%); }
/* top scrim: keeps the nav and eyebrow legible when the hero photo is a bright sky */
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(22,36,28,.55), rgba(22,36,28,.12) 22%, transparent 38%); }
.hero-in { position: relative; z-index: 2; width: 100%; padding-block: 118px 50px;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(30px, 4.5vw, 64px); align-items: center; }
.hero h1 { color: var(--paper); font-weight: 800; font-size: clamp(38px, 4.9vw, 66px); line-height: 1.02; letter-spacing: -0.03em; margin: 18px 0 0; max-width: 15ch; text-shadow: 0 2px 30px rgba(22,36,28,.45); }
.hero-sub { font-size: clamp(16.5px, 1.35vw, 19.5px); line-height: 1.52; max-width: 46ch; color: rgba(246, 245, 240, .94); margin: 20px 0 0; text-shadow: 0 1px 16px rgba(22,36,28,.5); }
.hero-load h1, .hero-load .eyebrow, .hero-load .hero-sub, .hero-load .hero-call, .hero-load .hero-badges, .hero-load .hero-form { opacity: 0; transform: translateY(24px); }
.hero-ready h1, .hero-ready .eyebrow, .hero-ready .hero-sub, .hero-ready .hero-call, .hero-ready .hero-badges, .hero-ready .hero-form { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.6,.2,1); }
.hero-ready .eyebrow { transition-delay: .05s; }
.hero-ready h1 { transition-delay: .15s; }
.hero-ready .hero-sub { transition-delay: .3s; }
.hero-ready .hero-call { transition-delay: .36s; }
.hero-ready .hero-badges { transition-delay: .44s; }
.hero-ready .hero-form { transition-delay: .3s; }

/* the big, unmissable phone number */
.hero-call { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; color: var(--paper); margin-top: 28px;
  padding: 15px 26px 15px 20px; border-radius: 16px; border: 1px solid rgba(246,245,240,.22);
  background: rgba(16,26,20,.42); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.hero-call:hover { border-color: var(--brass-hi); background: rgba(16,26,20,.62); transform: translateY(-2px); }
.hero-call .hc-ic { width: 48px; height: 48px; border-radius: 50%; flex: none; background: var(--brass); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(192,94,23,.45); }
.hero-call .hc-ic svg { color: #fff; }
.hero-call small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); font-weight: 700; margin-bottom: 3px; }
.hero-call b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.1vw, 41px); letter-spacing: -.02em; line-height: 1; }

/* one row, always: sized to fit rather than wrapping */
.hero-badges { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin-top: 22px; }
.hero-badges span { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-size: clamp(11px, .87vw, 12.6px); font-weight: 700; line-height: 1.15;
  padding: 8px 13px; border-radius: 999px; background: rgba(246,245,240,.1);
  border: 1px solid rgba(246,245,240,.22); color: rgba(246,245,240,.95); white-space: nowrap; }
.hero-badges svg { width: 15px; height: 15px; flex: none; color: var(--brass-hi); }
.hero-badges .hb-stars { color: #F5A623; letter-spacing: .5px; font-size: 11px; flex: none; }

/* ---------- hero estimate form: liquid glass ---------- */
/* Translucent enough that the hero photos move behind it, opaque enough that
   the labels never drop below contrast over a bright frame. The tint is the
   contrast floor; blur + saturate do the glass. */
.hero-form {
  position: relative; isolation: isolate;
  background: linear-gradient(150deg, rgba(255,255,255,.54), rgba(242,241,235,.38));
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(112%);
  backdrop-filter: blur(30px) saturate(180%) brightness(112%);
  border-radius: 24px; padding: 30px clamp(22px, 2.2vw, 32px) 26px; color: var(--ink);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 30px 74px rgba(8,14,10,.5),
    inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.3),
    inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(255,255,255,.35);
}
/* the specular sheen that sells the glass */
.hero-form::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.5), transparent 58%); }
/* no backdrop-filter (older Firefox): fall back to a near-solid card */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-form { background: rgba(250,249,245,.96); }
}
.hf-flag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1E6F3C; margin-bottom: 12px; }
.hf-flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16A05C; box-shadow: 0 0 0 3px rgba(22,160,92,.24); }
.hero-form h2 { font-size: clamp(24px, 2.1vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 7px; color: var(--ink); }
.hf-sub { font-size: 14.5px; color: rgba(22,36,28,.78); margin: 0 0 18px; }
.hf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hf-field { display: flex; flex-direction: column; gap: 6px; }
.hf-field.full { grid-column: 1 / -1; }
.hf-field label { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.hf-field input, .hf-field select {
  height: 50px; padding: 0 14px; font-family: var(--font-body); font-size: 15.5px; color: var(--ink);
  background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.75); border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.hf-field input::placeholder { color: rgba(22,36,28,.45); }
.hf-field input:hover, .hf-field select:hover { background: rgba(255,255,255,.72); }
.hf-field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316241C'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 34px; }
.hf-field input:focus, .hf-field select:focus { outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(192,94,23,.22); background: rgba(255,255,255,.82); }
.hf-field input.bad, .hf-field select.bad { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
.hero-form .btn { width: 100%; margin-top: 15px; height: 56px; font-size: 16.5px; }
.hf-note { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: rgba(22,36,28,.66); margin: 12px 0 0; text-align: center; }
.hf-note svg { width: 14px; height: 14px; flex: none; color: #1E6F3C; }

/* --- GoHighLevel form embeds -------------------------------------------------
   The fields are in a cross-origin iframe, so nothing in this file can reach
   them. Their background, fields and button are styled inside the GHL form
   builder instead, from GHL-FORM-CSS.md in this folder. All this rule does is
   size the frame and stop it showing its own scrollbar; form_embed.js adjusts
   the height once the form reports back. */
/* The frame is CROPPED, not sized, and that is deliberate.

   GHL's builder wraps every form in its own chrome: 40px of padding above the
   fields, 40px below, and a 60px margin under the wrapper. form_embed.js
   measures the document with all of it included, so it reports 569px for 424px
   of actual form and writes that as an inline height. An inline style beats an
   ordinary rule here, which is why the card looked right for a moment on load
   and then popped ~140px taller.

   RE-MEASURED 2026-08-05 against the running form, by logging the height GHL
   posts and reading the inner document at a range of forced frame heights. The
   inner layout is FIXED, not elastic: `.hl_form-builder--main` is 606px at every
   frame height, the submit button always ends at inner y=493 and GHL's own
   `.ghl-form-wrap` at 506, with the 100px tail below that. GHL posts 611 (plus a
   transient 471 early in load). 611 - 100 = 511, which is --ghl-h below, and the
   button clears the bottom edge by 18px. Same 611 at 390px wide, so one number
   serves phone and desktop.

   The earlier 607 came from a measurement taken while the frame was still forced
   tall, which reads the html/body stretched to fit rather than the form. It left
   114px of blank GHL chrome under the button: the floor was higher than the
   subtraction, so it won every time and the trim never actually ran. A floor
   above the steady trimmed value silently disables the crop. Keep them equal.
   If the form gains or loses a field, re-log the posted height, subtract 100 and
   move --ghl-h and GHL_FLOOR together.

   Deleting that chrome in GHL is not available to us: the Custom CSS box
   rewrites what you paste and keeps only the declarations it likes. Measured
   live 2026-08-04 with the full stylesheet in the box, `.hl_form-builder--main`
   still had `padding: 40px 20px` and `.ghl-form-wrap` still had a 60px bottom
   margin. That is why two rounds of pasting never moved the height.

   So the site crops instead. This hides the overflow, the frame is pulled up
   40px to swallow the top padding, and main.js trims the 100px tail off every
   height GHL writes. Nothing the form actually draws is hidden. */
.ghl-form {
  /* One number, used three times. GHL_FLOOR in main.js is the same value and
     has to move with it. --ghl-crop is the top padding being swallowed. */
  /* 511 -> 629 on 2026-08-21: the form gained the T & C consent element for
     A2P, and this is the re-log the note above asks for. Measured with the
     consent text VISIBLE (the un-hide rule in GHL-FORM-CSS.md), because
     that is the state the form ships in. GHL posts 729, so 729 - 100 = 629.
     GHL_FLOOR in main.js moved with it, as the note above requires. */
  /* 629 -> 696 on 2026-08-21, re-measured against the LIVE form once the real
     consent text was in. GHL now posts 796 desktop / 868 mobile (the sentence
     wraps differently), trimming to 696 / 768, so this is no longer one number
     for both widths. Take the SMALLER: a floor above the steady trimmed value
     disables the crop on that viewport, and desktop is what reviewers open.
     Mobile settles 72px taller after load, below the fold, which is fine. */
  --ghl-h: 696px;
  --ghl-crop: 40px;
  width: 100%;
  overflow: hidden;
  /* Holds the card open while the form loads. form_embed.js parks the iframe
     at position:absolute for about 700ms and then re-parents it, and without a
     reserved height the card collapses to its chrome and springs back: 603 to
     174 to 603, measured. */
  min-height: calc(var(--ghl-h) - var(--ghl-crop));
}
.ghl-form iframe {
  display: block; width: 100%; border: 0; background: transparent;
  /* The steady state, set here so the FIRST paint already matches what main.js
     settles on. No min-height: it would floor the crop and quietly undo it. */
  margin-top: calc(var(--ghl-crop) * -1);
  height: var(--ghl-h);
}
.hf-embed .ghl-form { margin-top: 2px; }
/* Neither the glass hero card nor the white form card should clip a validation
   message that pushes the form taller than we guessed. */
.hero-form, .form-card { overflow: visible; }
.hero-form .chips button { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.52); }
.hero-form .chips button:hover { background: rgba(255,255,255,.74); }
.hero-form .chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hf-done { text-align: center; padding: 12px 0 6px; }
.hf-done .mark { width: 58px; height: 58px; border-radius: 50%; background: var(--brass); color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 10px 26px rgba(192,94,23,.45); }
.hf-done h2 { margin-bottom: 10px; }
.hf-done p { font-size: 15px; color: rgba(36,50,42,.8); }
.hf-step { display: none; }
.hf-step.on { display: block; animation: hfIn .28s ease; }
@keyframes hfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; width: 1px; height: 44px; background: rgba(246,245,240,.4); overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--brass-hi); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0% { top: -50%; } 70%, 100% { top: 110%; } }

/* ---------- trust / credentials strip ---------- */
.trust { border-bottom: 1px solid var(--line); background: var(--paper); }
.trust-in { display: flex; align-items: center; flex-wrap: nowrap; gap: 44px; padding: 24px clamp(20px, 4vw, 44px);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.trust-in::-webkit-scrollbar { display: none; }
.trust-in > * { flex: none; }
.trust-in.is-centered { justify-content: center; }

/* Google rating block — shared below-hero + footer */
.rating-blk { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); flex: none; }
.rating-blk > svg { width: 32px; height: 32px; flex: none; }
.rating-blk .rb-meta { display: flex; flex-direction: column; }
.rating-blk .rb-top { display: flex; align-items: center; gap: 9px; line-height: 1; }
.rating-blk .rb-top b { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.rating-blk .rb-stars { color: #F5A623; font-size: 16px; letter-spacing: 1.5px; }
.rating-blk .rb-sub { font-size: 12.5px; color: var(--stone); margin-top: 4px; font-weight: 600; }
.rating-blk:hover .rb-sub { color: var(--ink-soft); }
.rating-lg > svg { width: 36px; height: 36px; }
.rating-lg .rb-top b { font-size: 29px; }

/* credential badges */
.cred { display: inline-flex; align-items: center; gap: 11px; }
.cred-em { width: 36px; height: 36px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(22,36,28,.16); }
.cred-em svg { width: 21px; height: 21px; }
.cred-em-g { background: #fff; box-shadow: 0 3px 8px rgba(22,36,28,.16), inset 0 0 0 1px var(--line); }
.cred-em-g svg { width: 23px; height: 23px; }
.cred-t b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.15; color: var(--ink); }
.cred-t em { display: block; font-style: normal; font-size: 11.5px; color: var(--stone); margin-top: 1px; }
.stars { color: var(--brass); letter-spacing: .06em; }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.svc:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.svc-img { aspect-ratio: 16 / 9.4; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.svc:hover .svc-img img { transform: scale(1.045); }
.svc-body { display: flex; flex-direction: column; padding: 22px 24px 24px; gap: 8px; flex: 1; }
.svc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.svc h3 { font-size: 23px; font-weight: 700; }
.svc-range { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--brass); white-space: nowrap; }
.svc p { font-size: 15px; color: rgba(36, 50, 42, .76); margin: 0; flex: 1; }
.svc-cta { font-size: 13.5px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.svc-cta::after { content: "→"; color: var(--brass); transition: transform .2s ease; }
.svc:hover .svc-cta::after { transform: translateX(5px); }

/* ---------- process ---------- */
.proc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; }
.proc-step { position: relative; padding: 34px 26px 0 0; border-top: 2px solid var(--line); }
.proc-step::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--brass); border-radius: 50%; }
.proc-week { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 10px; }
.proc-step h3 { font-size: 21px; font-weight: 700; }
.proc-step p { font-size: 14.5px; color: rgba(36, 50, 42, .76); margin-top: 10px; }

/* ---------- reviews (Google style) ---------- */
.reviews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.g-summary { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; box-shadow: var(--shadow); }
.g-score { display: flex; align-items: center; gap: 10px; }
.g-score b { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; }
.g-stars { color: #FBBC04; font-size: 18px; letter-spacing: .05em; }
.g-count { font-size: 13px; color: var(--stone); margin-top: 3px; }
.greviews { position: relative; }
.greviews-track { display: flex; gap: 20px; overflow-x: auto; padding: 8px clamp(20px, 4vw, 40px) 20px; -ms-overflow-style: none; scrollbar-width: none; }
.greviews-track::-webkit-scrollbar { display: none; }
.greview { display: block; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; flex: 0 0 clamp(290px, 78vw, 400px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 26px; box-shadow: 0 8px 24px rgba(22,36,28,.06); }
.greview-top { display: flex; align-items: center; gap: 13px; }
.gavatar { position: relative; overflow: hidden; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 19px; flex: none; }
.gavatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gname { font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.2; }
.gsub { font-size: 12.5px; color: var(--stone); margin-top: 2px; }
.greview-top .g-mark { margin-left: auto; width: 22px; height: 22px; flex: none; }
.greview .g-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; }
.greview .g-row .g-stars { font-size: 16px; }
.greview .g-when { font-size: 12.5px; color: var(--stone); }
.greview { display: flex; flex-direction: column; }
.gtext { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0;
  flex: 0 1 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 11; overflow: hidden; }
.greview:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(22,36,28,.13); }
.g-summary { text-decoration: none; transition: box-shadow .25s ease; }
.g-summary:hover { box-shadow: 0 16px 38px rgba(22,36,28,.16); }
.g-nav { position: absolute; top: 42%; z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.g-nav:hover { background: var(--ink); color: var(--paper); }
.g-prev { left: 6px; }
.g-next { right: 6px; }

/* ---------- awards ---------- */
.awards-sec { padding-block: clamp(56px, 7vw, 84px); }
.awards-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-light); }
.stat .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4.4vw, 56px); color: var(--paper); line-height: 1; letter-spacing: -.02em; }
.stat .n em { color: var(--brass-hi); font-style: normal; }
.stat .l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(246, 245, 240, .6); margin-top: 10px; display: block; font-weight: 600; }
.awards-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 40px; }
.award { grid-column: span 2; display: flex; align-items: center; gap: 15px; background: rgba(246,245,240,.05); border: 1px solid var(--line-light); border-radius: 14px; padding: 18px 20px; }
.award .cred-em { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.award .cred-em svg { width: 27px; height: 27px; }
.award b { display: block; color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2; }
.award > div > span { display: block; font-size: 12.5px; color: rgba(246,245,240,.62); margin-top: 3px; }

/* ---------- areas ---------- */
.areas-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chips span { font-size: 13.5px; font-weight: 600; border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 9px 16px; }
.areas-note { margin-top: 20px; font-size: 14.5px; color: rgba(36, 50, 42, .72); }

/* ---------- faq ---------- */
.faq-wrap { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-family: var(--font-display); font-weight: 700; font-size: 19.5px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; color: var(--brass); transition: transform .25s ease; flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 0 24px; max-width: 64ch; color: rgba(36, 50, 42, .82); font-size: 15.5px; }

/* ---------- estimate ---------- */
.estimate-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.est-copy h2 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; margin: 14px 0 18px; }
.est-copy .promise { font-size: 17.5px; color: rgba(246, 245, 240, .86); max-width: 46ch; }
.est-points { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.est-points li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: rgba(246, 245, 240, .86); }
.est-points li::before { content: "✓"; color: var(--brass-hi); font-weight: 800; flex: none; }
.est-phone { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--paper); }
.est-phone svg { color: var(--brass-hi); }
.est-phone span { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.01em; }
.est-meta { margin-top: 14px; font-size: 13px; color: rgba(246, 245, 240, .6); }
.form-card { background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.form-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.form-sub { font-size: 14px; color: rgba(36, 50, 42, .66); margin-bottom: 22px; }
.f-step { display: none; }
.f-step.on { display: block; animation: fIn .3s ease; }
@keyframes fIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-field { display: flex; flex-direction: column; gap: 7px; }
.f-field.full { grid-column: 1 / -1; }
.f-field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.f-field input, .f-field select { height: 52px; border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 0 16px; font-size: 15.5px; font-family: inherit; background: var(--white); color: var(--ink); width: 100%; appearance: none; }
.f-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C1A17' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.f-field input:focus, .f-field select:focus { outline: none; border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button { border: 1.5px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.f-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(36, 50, 42, .72); margin-top: 16px; }
.f-opt input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brass); }
.f-submit { width: 100%; margin-top: 20px; }
.f-note { text-align: center; font-size: 12px; color: rgba(36, 50, 42, .55); margin-top: 14px; }
.f-done { text-align: center; padding: 30px 6px; }
.f-done .mark { width: 58px; height: 58px; border-radius: 50%; background: var(--brass); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.f-done h3 { margin-bottom: 10px; }
.f-done p { font-size: 15px; color: rgba(36, 50, 42, .78); }

/* ---------- footer ---------- */
.footer { padding-top: clamp(28px, 3.5vw, 48px); }
.foot-grid { display: grid; grid-template-columns: 4fr 2.4fr 2.4fr 3.2fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid var(--line-light); }
.foot-grid h4 { color: var(--paper); font-size: 15px; margin-bottom: 16px; font-weight: 700; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { text-decoration: none; font-size: 14.5px; color: rgba(246, 245, 240, .74); }
.foot-grid a:hover { color: var(--paper); }
.foot-phone { font-weight: 800 !important; font-size: 17px !important; color: var(--paper) !important; }
.foot-muted { font-size: 14px; color: rgba(246, 245, 240, .6); }
.foot-brand p { font-size: 14.5px; color: rgba(246, 245, 240, .74); max-width: 30ch; margin: 14px 0 18px; }
.foot-brand .logo { margin-bottom: 4px; }
.social { display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-light); display: flex; align-items: center; justify-content: center; color: rgba(246,245,240,.82); transition: background .2s, color .2s, border-color .2s; }
.social a:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.social svg { width: 18px; height: 18px; }
.badge-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; padding: 28px 0; border-bottom: 1px solid var(--line-light); }
.foot-creds { display: flex; flex-wrap: wrap; align-items: center; gap: 17px 28px; }
.rating-foot, .rating-foot .rb-top b { color: var(--paper); }
.rating-foot .rb-sub { color: rgba(246, 245, 240, .6); }
.rating-foot:hover .rb-sub { color: rgba(246, 245, 240, .82); }
.cred-foot .cred-t b { color: var(--paper); }
.cred-foot .cred-t em { color: rgba(246, 245, 240, .55); }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center; padding: 22px 0 30px; font-size: 12.5px; color: rgba(246, 245, 240, .5); }
.foot-bottom a { color: rgba(246, 245, 240, .74); }

/* ---------- mobile call bar ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: none; grid-template-columns: 1fr 1fr 1.4fr; gap: 1px; background: var(--ink); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 30px rgba(22,36,28,.25); }
.callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; text-decoration: none; font-weight: 700; font-size: 14.5px; background: var(--ink); color: var(--paper); }
.callbar a.cb-est { background: var(--brass); color: #fff; }

/* ---------- work gallery ---------- */
.gal-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 34px); }
.gal-f {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 15px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gal-f em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--stone); }
.gal-f:hover { border-color: var(--brass); }
.gal-f.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gal-f.on em { color: var(--brass-hi); }

.gal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px);
}
.gal-item {
  position: relative; padding: 0; border: 1px solid var(--line); background: var(--ink);
  border-radius: var(--radius-s); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3;
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1), opacity .3s ease; }
.gal-item:hover img { transform: scale(1.06); }
.gal-item::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(transparent 55%, rgba(22, 36, 28, .45));
  transition: opacity .3s ease;
}
.gal-item:hover::after { opacity: 1; }
.gal-more-wrap { text-align: center; margin-top: clamp(26px, 3vw, 36px); }
.gal-more[hidden] { display: none; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(12, 20, 15, .93); padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }
body.lb-open { overflow: hidden; }
.lb-img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 6px; cursor: zoom-out; }
.lb-close, .lb-nav {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(246, 245, 240, .12); color: var(--paper); font-size: 30px; line-height: 1;
  transition: background .2s ease;
}
.lb-close:hover, .lb-nav:hover { background: var(--brass); }
.lb-close { top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px); font-size: 26px; }
.lb-prev { left: clamp(8px, 2vw, 26px); }
.lb-next { right: clamp(8px, 2vw, 26px); }
.lb-count {
  position: absolute; bottom: clamp(12px, 2vw, 26px); left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; color: rgba(246, 245, 240, .75);
}

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
.rv.on { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero-in { grid-template-columns: 1fr; gap: 34px; padding-block: 112px 40px; }
  .hero-form { max-width: 560px; }
  .hero-badges { flex-wrap: wrap; }
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc { grid-column: auto; }
  .proc { grid-template-columns: 1fr 1fr; gap: 26px 30px; }
  .areas-grid, .estimate-grid { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: repeat(4, 1fr); }
  .award { grid-column: span 2; }
  .awards-stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lb-close, .lb-nav { width: 44px; height: 44px; }
  .nav-links, .nav .nav-phone, .nav .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .proc { grid-template-columns: 1fr; }
  .callbar { display: grid; }
  body { padding-bottom: 60px; }
  .reviews-head { align-items: flex-start; }
  .logo-full { height: 56px; }
  .trust-in { gap: 30px; }
}
@media (max-width: 560px) {
  .f-grid, .hf-grid { grid-template-columns: 1fr; }
  .hero-call .hc-ic { width: 42px; height: 42px; }
  .hero-form { padding: 24px 20px 22px; border-radius: 18px; }
  .hero h1 { font-size: clamp(38px, 11vw, 50px); }
  .hero-cta-row { gap: 18px; }
  .foot-grid { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: 1fr; }
  .award { grid-column: span 1; }
  .logo-full { height: 52px; }
  .svc-top { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hero .eyebrow { display: inline; }
  .hero .eyebrow::before { display: none; }
}

/* chat bubble rides above the mobile call bar */
@media (max-width: 768px) { .cw-root { bottom: 74px !important; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-load h1, .hero-load .eyebrow, .hero-load .hero-sub, .hero-load .hero-call, .hero-load .hero-badges, .hero-load .hero-form { opacity: 1; transform: none; }
  .hero-slide { transition: none; }
  .scroll-cue::after, .svc, .svc-img img { animation: none; transition: none; }
}

/* ============================================================
   SERVICE PAGES (tree-removal, stump-grinding, tree-trimming)
   Generated markup comes from tools/build-services.py. Everything
   below reuses the home page's scale, palette and type; only the
   layouts that home does not already have are new.
   ============================================================ */

/* ---------- service hero ---------- */
/* Shorter than the home hero on purpose: on a service page the answer
   should start above the fold, not the photo. */
.shero { position: relative; display: flex; align-items: center; min-height: 74svh;
  color: var(--paper); overflow: hidden; }
.shero-media { position: absolute; inset: 0; background: var(--ink); }
.shero-media img { width: 100%; height: 100%; object-fit: cover; }
.shero-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,26,20,.62) 0%, rgba(16,26,20,.30) 34%, rgba(16,26,20,.86) 100%); }
.shero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(22,36,28,.62), rgba(22,36,28,.14) 24%, transparent 40%); }
/* Padding is symmetrical now that the block is vertically centred, and the top
   figure still has to clear the 78px fixed nav on a short viewport. */
.shero-in { position: relative; z-index: 2; width: 100%; padding-block: 118px; }
/* The breadcrumb IS the eyebrow line. It used to sit above a separate
   "HAULING & CHIPPING" eyebrow that said the same words again, so the eyebrow
   went and the crumb took its styling. */
.crumbs { display: inline-flex; align-items: center; gap: 0;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass-hi);
  margin-bottom: 18px; }
.crumbs::before { content: ""; width: 24px; height: 2px; background: var(--brass-hi);
  margin-right: 11px; flex: none; }
.crumbs a { color: rgba(246,245,240,.66); text-decoration: none; }
.crumbs a:hover { color: var(--brass-hi); }
.crumbs b { font-weight: 700; color: var(--brass-hi); }
.crumbs span { margin: 0 8px; color: rgba(246,245,240,.4); }
.shero h1 { font-size: clamp(38px, 5.6vw, 66px); font-weight: 800; color: var(--paper);
  max-width: 17ch; margin: 0 0 18px; }
.shero-lead { font-size: clamp(17px, 1.6vw, 20px); color: rgba(246,245,240,.88);
  max-width: 60ch; margin: 0 0 28px; }
.shero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- key facts strip ---------- */
.keyfacts { background: var(--ink); color: var(--paper); border-top: 1px solid rgba(246,245,240,.1); }
.keyfacts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(246,245,240,.14); }
.keyfact { background: var(--ink); padding: 26px clamp(16px, 2vw, 28px); }
.keyfact b { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 800;
  color: var(--brass-hi); letter-spacing: .01em; margin-bottom: 6px; }
.keyfact span { font-size: 14.5px; color: rgba(246,245,240,.78); line-height: 1.5; }

/* ---------- on-page jump nav ---------- */
.jump { border-bottom: 1px solid var(--line); background: var(--paper); }
.jump-in { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-block: 18px; align-items: center; }
.jump b { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone); }
.jump a { font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 2px; }
.jump a:hover { border-bottom-color: var(--brass); color: var(--brass); }

/* ---------- prose ---------- */
/* The reading column. Capped so a 2,000-word page never runs the full
   1200px wrap, which is unreadable at desktop width. */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin: 0 0 18px; }
.prose h3 { font-size: clamp(20px, 2.1vw, 25px); font-weight: 700; margin: 34px 0 12px; }
.prose p { font-size: 17px; line-height: 1.72; color: rgba(36,50,42,.86); margin: 0 0 18px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a:not(.btn) { color: var(--brass); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px; }
.prose a:not(.btn):hover { color: var(--brass-hi); }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { font-size: 17px; line-height: 1.66; color: rgba(36,50,42,.86); margin-bottom: 10px; }
.prose li::marker { color: var(--brass); }
.dark .prose p, .dark .prose li { color: rgba(246,245,240,.82); }
.dark .prose strong { color: var(--paper); }

/* ---------- photo + text split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px);
  align-items: center; }
.split + .split { margin-top: clamp(56px, 7vw, 96px); }
.split.flip .split-media { order: 2; }
.split-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }
.split-body .prose { max-width: 52ch; }
.split-body .prose h2, .split-body .prose h3 { margin-top: 0; }
figure { margin: 0; }
figcaption { font-size: 13.5px; color: var(--stone); margin-top: 10px; line-height: 1.5; }

/* ---------- full-width photo band ---------- */
.band { margin: clamp(48px, 6vw, 80px) 0; }
.band img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 6.6;
  object-fit: cover; box-shadow: var(--shadow); }

/* ---------- what changes the price ---------- */
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fact { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; }
.dark .fact { background: rgba(246,245,240,.05); border-color: rgba(246,245,240,.14); }
.fact-n { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass); display: block; margin-bottom: 10px; }
.dark .fact-n { color: var(--brass-hi); }
.fact h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.fact p { font-size: 15px; line-height: 1.6; color: rgba(36,50,42,.78); margin: 0; }
.dark .fact p { color: rgba(246,245,240,.76); }

/* ---------- checklist card ---------- */
.signs { background: var(--alt); border-radius: var(--radius); padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line); }
.signs h3 { font-size: clamp(21px, 2.2vw, 27px); font-weight: 800; margin-bottom: 18px; }
.signs ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.signs li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55;
  color: rgba(36,50,42,.86); margin: 0; }
.signs li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%; background: var(--brass);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='black'/></svg>") center/13px no-repeat,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- brass callout ---------- */
.note { border-left: 4px solid var(--brass); background: var(--white); border-radius: 0 12px 12px 0;
  padding: 22px 26px; margin: 28px 0; box-shadow: var(--shadow); }
.note p { margin: 0; font-size: 16px; line-height: 1.66; color: rgba(36,50,42,.88); }
.note p + p { margin-top: 12px; }
.note b { color: var(--ink); }

/* ---------- related services ---------- */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .keyfacts-grid { grid-template-columns: 1fr 1fr; }
  .facts-grid, .rel-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split.flip .split-media { order: 0; }
  .split-body .prose { max-width: none; }
}
@media (max-width: 768px) {
  .shero { min-height: 0; }
  .shero-in { padding-block: 112px 44px; }
  .band img { aspect-ratio: 16 / 10; }
  .signs ul { grid-template-columns: 1fr; }
  .jump { display: none; }
}
@media (max-width: 560px) {
  .keyfacts-grid, .facts-grid, .rel-grid { grid-template-columns: 1fr; }
}

/* Every CTA on a service page jumps to the form on that page. Without this the
   fixed nav sits on top of the section heading on arrival. */
#estimate { scroll-margin-top: 92px; }

/* ---------- service page: fixes found on the first render ---------- */
/* .btn-ghost is ink-on-transparent, which is invisible over a dark hero photo
   and over a .dark section. The home page only ever solved this for .hero. */
.shero .btn-ghost, .dark .btn-ghost { color: var(--paper); border-color: rgba(246,245,240,.6); }
.shero .btn-ghost:hover, .dark .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Two stacked <section class="section"> on the SAME background paint 120px of
   padding each, so the seam between them opens to 240px of dead space. Collapse
   it, and put it back only where the background actually changes. */
.section + .section { padding-top: 0; }
.section:not(.alt):not(.dark) + .section.alt,
.section:not(.alt):not(.dark) + .section.dark,
.section.alt + .section:not(.alt):not(.dark),
.section.alt + .section.dark,
.section.dark + .section:not(.alt):not(.dark),
.section.dark + .section.alt { padding-top: clamp(72px, 9vw, 120px); }

/* ===================================================================
   LEGAL PAGES (privacy.html, terms.html)
   Generated by tools/build-legal.py. They exist for A2P 10DLC approval,
   which needs a public privacy policy and a messaging-terms page.

   No photo hero, so they get a plain dark title band instead. It has to
   be dark: .nav is fixed and transparent until it goes .is-solid, and
   its light logo would otherwise land on a white page and vanish. The
   118px top padding is the same nav clearance .shero-in uses.
   =================================================================== */
.legal-head { padding-block: 118px 46px; }
.legal-head h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800;
  color: var(--paper); max-width: 20ch; margin: 0 0 16px; }
.legal-lede { font-size: clamp(16px, 1.5vw, 19px); color: rgba(246, 245, 240, .82);
  max-width: 62ch; margin: 0; }

/* Slightly wider than the 68ch .prose default. These pages are lists and
   short clauses rather than flowing copy, and 68ch left the bullets
   stranded in a narrow column on desktop. */
.legal-prose { max-width: 76ch; }
.legal-prose h2 { font-size: clamp(23px, 2.5vw, 30px); margin: 40px 0 14px; }
.legal-prose h2:first-of-type { margin-top: 0; }
.legal-prose h3 { font-size: clamp(17px, 1.7vw, 20px); margin: 26px 0 8px; }
.legal-prose > p:first-child { color: var(--stone); font-size: 15px; margin-bottom: 30px; }


/* ---------- forms stripped for A2P registration (--no-forms) ----------
   build-deploy.py swaps every .ghl-form embed for this block while the
   GoHighLevel A2P scanner is looking at the site: it rejects the campaign
   if a phone-collecting form shares a page with the chat widget. The
   forms come back the moment the flag is dropped, so this styling is
   temporary but has to look deliberate while it is up. */
.ghl-off { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 6px 0 2px; }
.ghl-off-call { width: 100%; height: 60px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.ghl-off-alt { font-size: 14px; line-height: 1.6; color: rgba(36, 50, 42, .72);
  margin: 0; text-align: center; }
/* On the dark estimate section the card behind this is still light, so only a
   block placed directly on .dark needs the flip. */
.dark > .ghl-off .ghl-off-alt { color: rgba(246, 245, 240, .72); }

/* ===================================================================
   HUB PAGES (services.html, service-areas.html)
   Boxes that explain each service or area and link down to its own
   page. The whole card is the link, not just the heading, because a
   card-shaped target that is only clickable on four words is the kind
   of thing people blame on their phone rather than the site.
   =================================================================== */
.hubgrid {
  display: grid; gap: clamp(18px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.hubcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hubcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.hubcard:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
/* 16:10 rather than 16:9. These are real job photos and several are shot tall,
   so a shallower crop was cutting the top off the trees being worked on. */
.hubcard-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--alt); }
.hubcard-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.hubcard:hover .hubcard-media img { transform: scale(1.04); }
.hubcard-body { display: flex; flex-direction: column; flex: 1;
  padding: clamp(20px, 2.4vw, 26px); }
.hubcard-body h3 { font-size: clamp(20px, 2.1vw, 24px); font-weight: 800; margin: 0 0 10px; }
.hubcard-body p { font-size: 15.5px; line-height: 1.62; color: rgba(36, 50, 42, .8);
  margin: 0 0 16px; }
.hubcard-body ul { list-style: none; margin: 0 0 20px; padding: 0; }
.hubcard-body li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5;
  color: rgba(36, 50, 42, .74); margin-bottom: 7px; }
.hubcard-body li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
/* Pushed to the bottom so the arrow lines up across cards of unequal length. */
.hubcard-go { margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14.5px; color: var(--brass); }
.hubcard-go svg { transition: transform .2s ease; }
.hubcard:hover .hubcard-go svg { transform: translateX(4px); }

/* ---------- service-area (town) pages ---------- */
/* Wider than the 68ch .prose default and centred: these pages are one column of
   continuous reading with no photo rail beside them, so the narrow measure left
   a lot of empty page on desktop. */
.area-prose { max-width: 74ch; margin-inline: auto; }
.area-prose .prose { max-width: none; }
.area-prose .prose + .prose { margin-top: clamp(34px, 4vw, 48px); }

/* ---------- reviews baked into service / area pages ----------
   The home page runs its reviews as a JS carousel, which is fine there because
   they are decoration. On a service or town page the review IS the argument, so
   these are rendered into the HTML at build time by reviews_for() and sit in a
   plain grid. No carousel, nothing to wait for, and a crawler reads them. */
.pagereviews {
  display: grid; gap: clamp(16px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}
.pagereviews .greview {
  width: auto; min-width: 0; flex: none; margin: 0;
  height: 100%; display: flex; flex-direction: column;
}
/* The carousel clamps its cards to keep the strip even. These are read, not
   scrolled past, so let them run to their real length. */
.pagereviews .gtext { -webkit-line-clamp: unset; display: block; overflow: visible; }