/* Lead-site theme v3: modelled on real small-contractor sites (see references.md).
   Per-site hooks, both set on <html style="...">:
     --accent:#hex            mid/dark tone; white text sits on a darkened copy of it
     --hero-image:url(x.jpg)  optional hero photo; omit it and the hero is a flat two-tone band
   Three colours only: ink, one accent (plus tints of it), white. */
:root {
  --accent:#3d6b52;
  --hero-image:none;
  --paper:#fff; --ink:#1d211e; --dim:#555b57; --line:#d9dcd8;
  --tint:color-mix(in srgb, var(--accent) 9%, #fff);
  --accent-text:color-mix(in srgb, var(--accent) 82%, #000);
  --btn:color-mix(in srgb, var(--accent) 88%, #000);
  --band:color-mix(in srgb, var(--accent) 64%, #0e0e0c);
  --deep:color-mix(in srgb, var(--accent) 24%, #0c0c0a);
  --pop:color-mix(in srgb, var(--accent) 38%, #fff);
  --gutter:max(16px, calc(50vw - 474px));
  --head:Cabin, "Trebuchet MS", system-ui, sans-serif;
  --label:"Roboto Condensed", "Arial Narrow", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#121410; --ink:#ecefe9; --dim:#a3a8a2; --line:#333833;
    --tint:color-mix(in srgb, var(--accent) 18%, var(--paper));
    --accent-text:color-mix(in srgb, var(--accent) 45%, #fff);
    --btn:color-mix(in srgb, var(--accent) 80%, #000);
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:18px/1.6 var(--head); color:var(--ink); background:var(--paper); overflow-x:hidden; }
h1, h2, h3 { font-family:var(--head); font-weight:700; line-height:1.12; margin:0; }
a { color:var(--accent-text); }
img, svg { max-width:100%; }
.ic, .hero-art { display:none; }
:focus-visible { outline:3px solid var(--accent-text); outline-offset:2px; }

/* optional strip above the header: <div class="topbar"><span>..</span><a href="tel:..">..</a></div> */
.topbar { display:flex; justify-content:space-between; gap:.2rem 1.5rem; flex-wrap:wrap; padding:.45rem var(--gutter); background:var(--deep); color:#e4e8e3; font:700 .8rem/1.3 var(--label); letter-spacing:.07em; text-transform:uppercase; }
.topbar a { color:#fff; text-decoration:none; }

/* header: wordmark, nav, outlined phone */
header { display:flex; align-items:center; gap:.5rem 1.5rem; flex-wrap:wrap; padding:.75rem var(--gutter); background:var(--paper); border-bottom:1px solid var(--line); }
.brand { flex:1 1 0; min-width:0; border-left:6px solid var(--accent); padding-left:.65rem; font:700 1.2rem/1.1 var(--head); color:var(--ink); text-decoration:none; }
nav { display:none; gap:1.4rem; }
nav a { color:var(--ink); text-decoration:none; font-weight:600; font-size:.97rem; }
nav a:hover { color:var(--accent-text); text-decoration:underline; text-underline-offset:5px; }
header .phone { border:2px solid var(--accent-text); border-radius:6px; padding:.38rem .7rem; font:700 1.02rem/1.2 var(--head); color:var(--accent-text); text-decoration:none; white-space:nowrap; }
header .phone:hover { background:var(--accent-text); color:var(--paper); }
@media (min-width:640px) { .brand { flex:0 1 auto; margin-right:auto; font-size:1.45rem; } nav { display:flex; } header .phone { font-size:1.15rem; } }

/* buttons: 6px corners, sentence case, flat */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:.55rem 1.3rem; border-radius:6px; background:var(--btn); color:#fff; border:2px solid var(--btn); font:700 1.08rem/1.1 var(--head); text-decoration:none; text-align:center; }
.btn:hover { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn-alt { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-alt:hover { background:var(--ink); color:var(--paper); }

main { max-width:980px; margin:0 auto; padding:0 16px; }
main > :first-child:not(.hero) { margin-top:2rem; }
h1 { font-size:clamp(2rem, 7.4vw, 2.9rem); margin:.2rem 0 1rem; }
h2 { font-size:clamp(1.6rem, 5vw, 2.15rem); margin:3rem 0 1.2rem; }
main > section > h2 { text-align:center; }
h3 { font-size:1.2rem; margin:1.7rem 0 .25rem; }
p { margin:.7em 0; }
.lede { font-size:1.15rem; max-width:54ch; }
.eyebrow, .pill { display:block; font:700 .8rem/1.3 var(--label); text-transform:uppercase; letter-spacing:.09em; color:var(--accent-text); margin:0 0 .7rem; }

/* hero: text on a darkened band. With --hero-image set it sits behind a veil; without, it is a flat band
   with a lighter rule underneath. Optional markup: <p class="eyebrow"> above the h1, <em> inside the h1. */
.hero { margin:0 calc(50% - 50vw); padding:2rem var(--gutter) 2.3rem; color:#fff; border-bottom:6px solid var(--pop);
  --veil:color-mix(in srgb, var(--band) 76%, transparent);
  background-color:var(--band);
  background-image:linear-gradient(var(--veil), var(--veil)), var(--hero-image);
  background-size:cover; background-position:center; }
@media (min-width:760px) {
  .hero { padding-top:3.6rem; padding-bottom:3.8rem;
    background-image:linear-gradient(95deg, color-mix(in srgb, var(--band) 92%, transparent) 0, color-mix(in srgb, var(--band) 72%, transparent) 55%, color-mix(in srgb, var(--band) 28%, transparent) 100%), var(--hero-image); }
}
.hero h1 { font-size:clamp(2rem, 8.4vw, 3.6rem); line-height:1.06; max-width:13em; margin:0 0 1rem; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--pop); }
.hero .eyebrow, .hero .pill { display:inline-block; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:.32rem .85rem; background:rgba(0,0,0,.2); margin:0 0 1.1rem; }
.hero .lede { color:#fff; max-width:42ch; margin:0 0 1.4rem; }
.bigphone { display:block; font:700 clamp(2.1rem, 9.5vw, 3.1rem)/1 var(--head); color:#fff; text-decoration:none; margin:0 0 1rem; }
.bigphone:hover { text-decoration:underline; text-underline-offset:6px; }
.hero .btn { background:var(--pop); color:#111; border-color:var(--pop); }
.hero .btn:hover { background:#fff; border-color:#fff; color:#111; }
@media (min-width:760px) { .bigphone { display:inline-block; margin:0 1.6rem .4rem 0; vertical-align:middle; } }

/* trust strip under the hero: four facts in a tinted full-width band */
.specs { display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1rem; margin:0 calc(50% - 50vw); padding:.9rem var(--gutter); background:var(--tint); border-bottom:1px solid var(--line); }
.spec { border-left:4px solid var(--accent); padding:.2rem 0 .2rem .7rem; margin:.45rem 0; }
.spec .k { display:block; font:700 .74rem/1.2 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.spec .v { display:block; font:700 1.05rem/1.25 var(--head); }
@media (min-width:760px) { .specs { grid-template-columns:repeat(4, 1fr); gap:0 1.5rem; } .spec .v { font-size:1.12rem; } }

/* steps: numbered boxes (counter, so no generator change). Markup: ol.steps > li > b + span */
.steps { list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:.9rem; margin:2.2rem 0 0; padding:0; }
.steps li { counter-increment:step; position:relative; margin:0; padding:.9rem 1rem .95rem 3.6rem; border:1px solid var(--line); border-radius:6px; }
.steps li::before { content:counter(step); position:absolute; left:1rem; top:.55rem; font:700 2.3rem/1 var(--label); color:var(--accent-text); }
.steps b { display:block; font:700 1.15rem/1.2 var(--head); }
.steps span { display:block; color:var(--dim); font-size:.97rem; line-height:1.45; margin-top:.15rem; }

/* services: spec blocks, a flat header bar each (the Greenhead dumpster-size pattern), whole card is the link */
.cards { display:grid; grid-template-columns:1fr; gap:1rem; margin:1.2rem 0 0; }
.card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:6px; overflow:hidden; color:var(--ink); text-decoration:none; background:var(--paper); }
.card h3 { margin:0; padding:.6rem 1rem; background:var(--band); color:#fff; font:700 1.02rem/1.2 var(--label); letter-spacing:.07em; text-transform:uppercase; }
.card p { flex:1; margin:0; padding:.85rem 1rem .35rem; color:var(--dim); font-size:.98rem; line-height:1.5; }
.card::after { content:"Details and local info \2192"; padding:.2rem 1rem .95rem; font-weight:700; font-size:.95rem; color:var(--accent-text); }
.card:hover { border-color:var(--accent); }
.card:hover h3 { background:var(--ink); }
@media (min-width:560px) { .cards { grid-template-columns:1fr 1fr; } .card:last-child:nth-child(odd) { grid-column:1 / -1; } }
@media (min-width:900px) { .cards { grid-template-columns:repeat(3, 1fr); } .card:last-child:nth-child(odd) { grid-column:auto; } .card:last-child:nth-child(3n+1) { grid-column:1 / -1; } }

/* what affects the price: spec table in a tinted full-width band. <section class="expect"><h2/><dl><dt/><dd/>... */
.expect { margin:3.2rem calc(50% - 50vw) 0; padding:.1rem var(--gutter) 2.6rem; background:var(--tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.expect h2 { margin-top:2.2rem; }
.expect dl { margin:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper); }
.expect dt { padding:.6rem 1rem; background:var(--band); color:#fff; font:700 1.02rem/1.2 var(--label); letter-spacing:.07em; text-transform:uppercase; }
.expect dd { margin:0; padding:.7rem 1rem .85rem; color:var(--dim); border-bottom:1px solid var(--line); }
.expect dd:last-child { border-bottom:0; }
@media (min-width:760px) {
  .expect dl { display:grid; grid-template-columns:240px 1fr; }
  .expect dt { padding:.85rem 1rem; border-bottom:1px solid rgba(255,255,255,.22); }
  .expect dt:last-of-type { border-bottom:0; }
  .expect dd { padding:.85rem 1.2rem; }
}

/* why rows */
.why { list-style:none; padding:0; margin:0; }
.why li { display:grid; grid-template-columns:220px 1fr; gap:1.2rem; padding:.95rem 0; margin:0; border-bottom:1px solid var(--line); }
.why li:first-child { border-top:1px solid var(--line); }
.why li b { font:700 1.15rem/1.25 var(--head); }
.why li span { color:var(--dim); }
@media (max-width:640px) { .why li { grid-template-columns:1fr; gap:.15rem; } }

/* service area: towns in columns (generator: <ul class="areas">, or <div class="county"><h3/><ul class="areas">) */
.areas { list-style:none; padding:0; margin:0; columns:2; column-gap:2rem; }
.areas li { margin:0 0 .4rem; break-inside:avoid; }
.areas li::before { content:""; display:inline-block; width:.5em; height:.5em; background:var(--accent); margin-right:.55em; vertical-align:.1em; }
.areas a { color:var(--ink); font-weight:600; }
.county { break-inside:avoid; margin:0 0 1rem; }
.county h3 { margin:0 0 .3rem; font:700 .85rem/1.3 var(--label); letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
@media (min-width:760px) { .areas { columns:3; } }

/* call strip: a dark full-width band at the end of the page; on phones it becomes the pinned Call / Text bar */
.cta { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:3.4rem calc(50% - 50vw) 0; padding:1.8rem var(--gutter); background:var(--deep); color:#e4e8e3; }
.cta span { flex:1 1 100%; font-size:.97rem; }
.cta .btn { background:var(--pop); border-color:var(--pop); color:#111; }
.cta .btn:hover { background:#fff; border-color:#fff; }
.cta .btn-alt { background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.cta .btn-alt:hover { background:#fff; color:#111; }
@media (min-width:700px) { .cta span { flex:1 1 260px; } }
@media (max-width:699px) {
  body { padding-bottom:76px; }
  .cta { position:fixed; z-index:20; left:0; right:0; bottom:0; margin:0; padding:.6rem 12px; gap:.6rem; flex-wrap:nowrap; flex-direction:row; background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -2px 10px rgba(0,0,0,.12); }
  .cta span { display:none; }
  .cta .btn { flex:1 1 0; min-width:0; padding:.5rem .4rem; font-size:1rem; background:var(--btn); border-color:var(--btn); color:#fff; }
  .cta .btn:first-child { flex-grow:1.35; white-space:nowrap; }
  .cta .btn-alt { background:var(--paper); border-color:var(--ink); color:var(--ink); }
}

/* footer: same dark as the call strip; the disclosure leads, set off by a rule */
footer { margin:0; padding:1.8rem var(--gutter) 2.4rem; background:var(--deep); color:#cdd3cd; font-size:.9rem; line-height:1.6; border-top:1px solid rgba(255,255,255,.14); }
footer p { margin:.5em 0; max-width:80ch; }
footer p:first-child { border-left:3px solid var(--pop); padding-left:.8rem; color:#e9ece8; }
footer a { color:#e4e8e3; }
ul { padding-left:1.2rem; } li { margin:.35rem 0; }
.note, .claims { color:var(--dim); font-size:.92rem; }

/* photos */
.svcphoto{width:100%;height:auto;display:block;border-radius:6px;margin:0 0 1.2rem}
.card img{width:100%;height:160px;object-fit:cover;display:block;border-radius:6px 6px 0 0}