/* ============================================================
   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. */
  --ghl-h: 511px;
  --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); }