/* Generalized from the ProTurf master (see CLAUDE.md). Colors below are
   PLACEHOLDER — replace with the client's real brand colors. */

:root {
  --primary: #456d16;
  --primary-dark: #375712;
  --primary-darker: #29410d;
  --accent: #fb297f;
  --accent-dark: #ce2268;
  --accent-tint: #ffeaf2;
  --cream: #f7f8f4;
  --paper: #ffffff;
  --ink: #22303c;
  --muted: #5b6b78;
  --line: #e3e7e0;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(34, 48, 60, .10);
  --shadow-sm: 0 2px 10px rgba(34, 48, 60, .08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x: clip guards against any stray horizontal overflow shifting centered
   content (e.g. section titles) sideways; `clip` is sticky-safe (unlike hidden). */
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: none; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap.wide { max-width: 1560px; }

/* ---------- buttons ---------- */
.btn { display: inline-block; font-weight: 700; font-size: 15px; border-radius: 10px;
  padding: 14px 26px; border: 2px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #8dac60; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline:hover { border-color: #fff; }
.btn-outline-dark { background: transparent; color: var(--primary); border-color: var(--primary); }

/* ---------- utility top bar ---------- */
.topbar { background: var(--primary); color: rgba(255,255,255,.85); font-size: 12.5px; letter-spacing: .02em; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 12px; }
.topbar .towns { display: flex; gap: 14px; flex-wrap: wrap; }
.topbar .towns span:not(:last-child)::after { content: '·'; margin-left: 14px; opacity: .5; }
.topbar .right { text-transform: uppercase; font-weight: 600; font-size: 11.5px; letter-spacing: .08em; color: rgba(255,255,255,.72); }

/* ---------- nav ---------- */
.nav { background: #fff; position: sticky; top: 0; z-index: 60; box-shadow: 0 2px 14px rgba(34,48,60,.10); }
.nav .wrap { display: flex; align-items: center; gap: 18px; min-height: 84px; }
.nav .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-shrink: 0; }
.nav .brand img { height: 80px; width: auto; max-width: none; }
.nav .links { display: flex; align-items: center; gap: 22px; }
.nav .links a { color: var(--primary); font-size: 17px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; text-decoration: none; padding: 6px 2px;
  white-space: nowrap; transition: color .12s ease; }
.nav .links a:hover, .nav .links a.active { color: var(--accent-dark); }
.nav .cta { white-space: nowrap; padding: 12px 18px; flex-shrink: 0; }
.nav-menu { display: flex; align-items: center; gap: 18px; }
.nav-ctas { display: flex; align-items: center; gap: 12px; }
.nav .menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--primary);
  font-size: 22px; line-height: 1; border-radius: 8px; padding: 6px 12px; cursor: pointer; }

/* dropdown */
.nav .dd { position: relative; display: flex; align-items: center; }

.nav .dd-menu { display: none; position: absolute; top: 100%; left: -12px; background: #fff; border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px; min-width: 240px; z-index: 70; }
.nav .dd:hover .dd-menu, .nav .dd:focus-within .dd-menu { display: block; }
.nav .dd-menu a { display: block; color: var(--ink) !important; text-transform: none; letter-spacing: 0;
  font-size: 14.5px; padding: 9px 12px; border-radius: 8px; border-bottom: none !important; }
.nav .dd-menu a:hover { background: var(--accent-tint); }

/* ---------- hero (home) ---------- */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--primary); }
.hero-slides { position: absolute; inset: 0; }
/* 7-slide camera roll: 6s per slide → 42s loop, each offset by 6s (~14.3%). */
.hero-slides .slide { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; animation: kenburns 42s linear infinite; will-change: opacity, transform; }
.hero-slides .slide:nth-child(2) { animation-delay: 6s; }
.hero-slides .slide:nth-child(3) { animation-delay: 12s; }
.hero-slides .slide:nth-child(4) { animation-delay: 18s; }
.hero-slides .slide:nth-child(5) { animation-delay: 24s; }
.hero-slides .slide:nth-child(6) { animation-delay: 30s; }
.hero-slides .slide:nth-child(7) { animation-delay: 36s; }
@keyframes kenburns {
  0% { opacity: 0; transform: scale(1); }
  2.4% { opacity: 1; }
  14.3% { opacity: 1; }
  17% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1); }
}
.hero-shade { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(36,48,59,.78) 0%, rgba(46,62,76,.55) 45%, rgba(46,62,76,.22) 100%); }
.hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero .bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(36,48,59,.92) 0%, rgba(46,62,76,.78) 45%, rgba(46,62,76,.45) 100%); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr;
  gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
.hero h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 981px) and (max-width: 1300px) {
  /* Two-column hero layout kicks in at 981px, but the vw-based size above stays
     large enough to wrap a long H1 into the price card in this narrower band. */
  .hero h1 { font-size: clamp(26px, 3.2vw, 38px); }
}
.hero .kicker { font-style: italic; color: #c8d4a8; margin: 14px 0 6px; font-size: 15px; }
.hero p.lede { color: #dbe3e9; max-width: 520px; font-size: 16.5px; }
.hero .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff;
  font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 6px 14px; }
.chip.solid { background: var(--accent); border-color: var(--accent); color: #fff; }

/* instant price card */
.quote-card { background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 30px 28px; }
.quote-card .bar { width: 44px; height: 4px; background: var(--accent); border-radius: 2px; margin: 0 auto 14px; }
.quote-card h3 { text-align: center; font-size: 22px; font-weight: 800; color: var(--primary); }
.quote-card .sub { text-align: center; color: var(--muted); font-size: 13.5px; margin: 6px 0 18px; }
.quote-card form { display: flex; gap: 10px; }
.quote-card input { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px;
  font-size: 14.5px; font-family: inherit; min-width: 0; }
.quote-card input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.quote-card .fine { text-align: center; color: #9aa7b1; font-size: 11.5px; margin-top: 14px; }
.quote-card .fine span:not(:last-child)::after { content: '·'; margin: 0 6px; }

.quote-card .size-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.size-pill { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 8px; text-align: center;
  font-weight: 700; font-size: 13.5px; color: var(--primary); text-decoration: none !important; }
.size-pill:hover { border-color: var(--accent-dark); background: var(--accent-tint); }
.size-pill small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }

/* ---------- trust strip ---------- */
.trust { background: var(--primary); color: rgba(255,255,255,.92); }
.trust ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px; padding: 13px 0; }
.trust li { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.trust li::before { content: '✓'; font-weight: 900; color: var(--accent); }

/* ---------- stats band ---------- */
.stats { background: var(--paper); padding: 56px 0; }
.stats .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stat { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); text-align: center; padding: 28px 18px; }
.stat:nth-child(even) { border-top-color: var(--primary); }
.stat .value { font-size: 40px; font-weight: 800; color: var(--primary); line-height: 1.1; overflow-wrap: anywhere; }
.stat .label { font-weight: 700; margin-top: 6px; }
.stat .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* ---------- section scaffolding ---------- */
section.band { padding: 72px 0; }
.band.cream { background: var(--cream); }
.band.tint { background: var(--accent-tint); }
.eyebrow { text-align: center; color: var(--accent-dark); font-size: 12.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.eyebrow.left { text-align: left; }
h2.title, h1.title { text-align: center; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; color: var(--primary);
  letter-spacing: -.01em; line-height: 1.15; }
h2.title.left { text-align: left; }
p.sub { text-align: center; color: var(--muted); max-width: 640px; margin: 14px auto 0; }
.center { text-align: center; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }

/* ---------- services grid ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.svc-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc-card .ph { height: 190px; background-size: cover; background-position: center; position: relative; }
.svc-card .tag { position: absolute; top: 12px; left: 12px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.svc-card .body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { font-size: 18.5px; font-weight: 800; color: var(--primary); }
.svc-card p { color: var(--muted); font-size: 14px; margin: 8px 0 16px; flex: 1; }
.svc-card .more { font-weight: 700; font-size: 14px; color: var(--accent-dark); }

/* ---------- CTA bands ---------- */
.cta-band { background: linear-gradient(115deg, var(--primary-darker), var(--primary) 55%, #46617a);
  color: #fff; text-align: center; padding: 72px 0; }
.cta-band .eyebrow { color: #b9cd93; }
.cta-band h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; }
.cta-band h2 em { font-style: normal; color: var(--accent); }
.cta-band p { color: #cdd7de; max-width: 620px; margin: 16px auto 0; }
.cta-band .btns { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta-band.green { background: linear-gradient(115deg, #5f7a3d, var(--accent-dark)); }
.cta-band.green h2 { color: #fff; }
.cta-band.green p { color: #ecf2e0; }

.band-photo { position: relative; background-size: cover; background-position: center; }
.band-photo.parallax { background-attachment: fixed; }
.band-photo::before { content: ''; position: absolute; inset: 0; background: rgba(36, 48, 59, .82); }
.band-photo > .wrap { position: relative; z-index: 1; }
.band-photo.lighter::before { background: rgba(36, 48, 59, .72); }

/* ---------- why / reputation ---------- */
.why { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; margin-top: 40px; }
.why .checks { list-style: none; margin: 20px 0; }
.why .checks li { padding-left: 30px; position: relative; margin-bottom: 10px; font-weight: 600; }
.why .checks li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-dark); font-weight: 900; }
.why .photo { position: relative; }
.why .photo img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-height: 460px; object-fit: cover; display: block; }
.rating-badge { position: absolute; left: -22px; bottom: -22px; background: #fff; border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.rating-badge .num { font-size: 30px; font-weight: 800; color: var(--primary); }
.rating-badge .stars { color: #e2a93b; font-size: 15px; letter-spacing: 2px; }
.rating-badge .lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.feat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.feat h4 { font-size: 14.5px; color: var(--primary); font-weight: 800; }
.feat p { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ---------- reviews ---------- */
.rev-meta { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px;
  color: var(--muted); font-size: 14px; }
.rev-meta .stars { color: #e2a93b; letter-spacing: 2px; }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.rev-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; }
.rev-card .head { display: flex; align-items: center; gap: 12px; }
.rev-card .avatar { width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.rev-card .who { font-weight: 700; font-size: 14.5px; }
.rev-card .src { font-size: 12px; color: var(--muted); }
.rev-card .stars { color: #e2a93b; letter-spacing: 2.5px; margin: 12px 0 8px; font-size: 14px; }
.rev-card p { font-size: 14px; color: #40505d; }
.rev-card .when { margin-top: 12px; font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------- review ticker */
.ticker { overflow: hidden; margin-top: 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; gap: 20px; width: max-content; animation: ticker-scroll 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-card { flex: 0 0 auto; width: 280px; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px 22px; }
.ticker-card .stars { color: #e2a93b; letter-spacing: 2px; font-size: 13px; }
.ticker-card p { font-size: 13.5px; color: #40505d; margin: 10px 0; }
.ticker-card .who { font-size: 12.5px; font-weight: 700; color: var(--primary); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ------------------------------------------------------- featured review */
.featured-review { max-width: 760px; margin: 0 auto; text-align: center; }
.featured-review .stars { color: #e2a93b; letter-spacing: 3px; font-size: 20px; margin: 18px 0; }
.featured-review blockquote { font-size: 22px; line-height: 1.5; font-weight: 600; color: var(--primary); margin: 0; }
.featured-review cite { display: block; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--muted); font-style: normal; }
.featured-strip { display: flex; gap: 16px; justify-content: center; margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--line); flex-wrap: wrap; }
.featured-strip .snip { max-width: 220px; font-size: 13px; color: #40505d; text-align: center; }
.featured-strip .snip b { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
@media (max-width: 760px) { .featured-review blockquote { font-size: 18px; } .featured-strip .snip { max-width: 100%; } }

/* ------------------------------------------------------------- cta photo */
.cta-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 8px; }
.cta-photo img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.cta-photo .txt .eyebrow { text-align: left; }
.cta-photo .txt h2 { margin: 6px 0 12px; }
.cta-photo .txt p { color: #40505d; font-size: 15px; margin-bottom: 20px; }
@media (max-width: 760px) { .cta-photo { grid-template-columns: 1fr; } .cta-photo img { max-height: 260px; } }

/* ---------- communities ---------- */
.communities { background: var(--primary-darker); color: #fff; padding: 72px 0; }
.communities .eyebrow { color: #b9cd93; }
/* homepage "Jobs We're Proud Of" — photo band behind the gallery grid */
.home-work { padding: 46px 0; }                    /* compact: tighter than the default 72px band */
.home-work .eyebrow { color: #b9cd93; }
.home-work .title { color: #fff; }
.home-work .sub { color: #dfe6ec; }
.home-work .gal-grid { margin-top: 26px; }          /* one row of 4 — pull the grid up snug */
.home-work .gal-grid img { height: 172px; }
.communities h2 { text-align: center; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; }
.town-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 40px; }
.town-card { position: relative; border-radius: 12px; overflow: hidden; height: 150px; display: flex;
  align-items: flex-end; background-size: cover; background-position: center; }
.town-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,48,59,.05), rgba(36,48,59,.85)); }
.town-card span { position: relative; z-index: 1; padding: 12px 14px; font-weight: 700; font-size: 14px; color: #fff; }

/* ---------- gallery ---------- */
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.gal-grid a { display: block; border-radius: 12px; overflow: hidden; }
.gal-grid img { width: 100%; height: 200px; object-fit: cover; transition: transform .25s ease; }
.gal-grid a:hover img { transform: scale(1.05); }

/* full-screen photo viewer (opened from the gallery grid) */
.lb-overlay { position: fixed; inset: 0; z-index: 90; isolation: isolate;
  background: rgba(14, 15, 18, .94); display: flex; align-items: center; justify-content: center; padding: 60px; }
.lb-overlay[hidden] { display: none; }
/* width/height 100% (not max-*) so low-res gallery photos still scale UP to
   fill the viewport — an <img> never upscales past its intrinsic size
   otherwise, which is what left small source photos stranded in the middle
   of the overlay. */
.lb-img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow); }
.lb-close, .lb-nav { position: absolute; border: none; border-radius: 50%; background: rgba(255,255,255,.12);
  color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .12s ease; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.24); }
.lb-close { top: 18px; right: 22px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 16px; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
@media (max-width: 620px) {
  .lb-overlay { padding: 20px; }
  .lb-close { width: 38px; height: 38px; font-size: 22px; top: 10px; right: 10px; }
  .lb-nav { width: 42px; height: 42px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}

/* ---------- page hero (interior) ---------- */
.page-hero { position: relative; color: #fff; }
.page-hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero .bg::after { content: ''; position: absolute; inset: 0; background: rgba(41, 55, 68, .82); }
.page-hero .wrap { position: relative; z-index: 1; padding-top: 68px; padding-bottom: 68px; }
.page-hero.center .wrap { text-align: center; }
.page-hero .badge { display: inline-block; background: var(--accent); color: #fff; font-size: 11.5px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 5px 14px; margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.12; max-width: 880px; }
.page-hero.center h1 { margin: 0 auto; }
.page-hero p { color: #d7dfe6; margin-top: 12px; max-width: 640px; font-size: 16px; }
.page-hero.center p { margin-left: auto; margin-right: auto; }
.page-hero .btns { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.page-hero.center .btns { justify-content: center; }

/* ---------- service detail ---------- */
.svc-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.svc-intro img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: 100%; max-height: 460px; object-fit: cover; align-self: center; }
.svc-intro p { color: #40505d; margin-bottom: 14px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip-row .chip { background: var(--accent-tint); border: 1px solid #d6e0c4; color: #4d6032; }

.includes { background: var(--cream); border-radius: 18px; padding: 40px; margin-top: 56px; }
.includes h3 { font-size: 24px; font-weight: 800; color: var(--primary); margin-bottom: 22px; }
.inc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.inc { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 16px 18px; font-size: 14px; }
.inc::before { content: '✓'; display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-dark); font-weight: 900; font-size: 12px;
  align-items: center; justify-content: center; margin-right: 9px; }
/* compact variant: the 27-tile neighborhood index on /locations/ — name-only link tiles */
.inc-grid.hood-index { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hood-index a.inc { display: flex; align-items: center; padding: 10px 12px; font-size: 13px;
  font-weight: 700; color: var(--primary); text-decoration: none; }
.hood-index a.inc::before { width: 18px; height: 18px; font-size: 10px; margin-right: 7px; flex: none; }
.hood-index a.inc:hover { color: var(--accent-dark); box-shadow: var(--shadow); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }
.step { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px; position: relative; }
.step .n { position: absolute; top: -14px; left: 22px; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 13px; border-radius: 999px; padding: 4px 12px; }
.step h4 { color: var(--primary); font-size: 17px; font-weight: 800; margin: 8px 0 8px; }
.step p { color: var(--muted); font-size: 14px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.pill { border: 2px solid var(--primary); color: var(--primary); font-weight: 700; font-size: 14px;
  border-radius: 999px; padding: 10px 20px; text-decoration: none !important; }
.pill:hover { background: var(--primary); color: #fff; }
.pill.solid { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.pill.solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.statement { border-left: 4px solid var(--accent); background: var(--accent-tint); color: var(--primary);
  font-weight: 700; font-size: 15.5px; padding: 14px 18px; border-radius: 0 10px 10px 0; margin-top: 18px; }
.step img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin: 6px 0 12px; }

.app-rows { display: grid; gap: 24px; margin-top: 40px; }
.app-row { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0; align-items: stretch;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.app-row img { width: 100%; height: 100%; min-height: 210px; max-height: 250px; object-fit: cover; }
.app-row .txt { padding: 26px 30px; align-self: center; }
.app-row .txt h4 { color: var(--primary); font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.app-row .txt p { color: #40505d; font-size: 14px; }
.app-row.rev img { order: 2; }
@media (max-width: 760px) { .app-row, .app-row.rev { grid-template-columns: 1fr; } .app-row.rev img { order: 0; } .app-row img { max-height: 200px; } }

/* ---------- values / factors ---------- */
.val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.val { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 28px; }
.val .icon { width: 52px; height: 52px; border-radius: 12px; background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
.val .icon svg { width: 26px; height: 26px; color: var(--accent-dark); }
.val h4 { color: var(--primary); font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.val p { color: var(--muted); font-size: 14px; }

.factor-list { max-width: 780px; margin: 40px auto 0; display: grid; gap: 14px; }
.factor { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 20px 22px;
  display: flex; gap: 18px; align-items: flex-start; }
.factor .icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center; color: var(--accent-dark); flex-shrink: 0; }
.factor .icon svg { width: 22px; height: 22px; }
.factor h4 { color: var(--primary); font-size: 15.5px; font-weight: 800; }
.factor p { color: var(--muted); font-size: 14px; margin-top: 3px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin: 40px auto 0; display: grid; gap: 12px; }
.faq-list details { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 0 22px; }
.faq-list summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--primary);
  font-size: 15.5px; padding: 18px 30px 18px 0; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '▾'; position: absolute; right: 2px; color: var(--accent-dark); transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-list .a { padding: 0 0 20px; color: #40505d; font-size: 14.5px; white-space: pre-line; }

.help-box { background: var(--accent-tint); border-radius: 16px; text-align: center; padding: 40px;
  max-width: 780px; margin: 48px auto 0; }
.help-box h3 { color: var(--primary); font-size: 22px; font-weight: 800; }
.help-box p { color: var(--muted); margin: 8px 0 20px; }
.help-box .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; margin-top: 40px; }
.form-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 34px; }
.form-card h3 { font-size: 24px; font-weight: 800; color: var(--primary); margin-bottom: 20px; }
.form-card label { display: block; font-weight: 600; font-size: 13.5px; margin: 16px 0 6px; }
.form-card input, .form-card select, .form-card textarea { width: 100%; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 12px 13px; font-size: 14.5px; font-family: inherit; background: #fff; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.form-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--muted); margin-top: 16px; }
.form-card .consent input { width: auto; margin-top: 3px; }
.form-card .btn { width: 100%; margin-top: 20px; }
.info-stack { display: grid; gap: 18px; }
.info-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); padding: 24px; }
.info-card h4 { color: var(--primary); font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.info-card ul { list-style: none; }
.info-card li { padding: 6px 0; font-size: 14.5px; display: flex; gap: 10px; align-items: baseline; }
.info-card li .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; min-width: 64px; font-weight: 700; }
.info-card.areas li::before { content: '✓'; color: var(--accent-dark); font-weight: 900; }

/* ---------- location pages ---------- */
.cta-card { background: linear-gradient(115deg, #5f7a3d, var(--accent-dark)); color: #fff; text-align: center;
  border-radius: 18px; padding: 48px 36px; margin-top: 56px; }
.cta-card h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.cta-card p { color: #ecf2e0; max-width: 640px; margin: 12px auto 0; }
.cta-card .btns { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.loc-card { position: relative; border-radius: var(--radius); overflow: hidden; height: 240px; display: flex;
  align-items: flex-end; background-size: cover; background-position: center; box-shadow: var(--shadow-sm); }
.loc-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,48,59,.02), rgba(36,48,59,.88)); }
.loc-card .body { position: relative; z-index: 1; padding: 20px; color: #fff; }
.loc-card h3 { font-size: 20px; font-weight: 800; }
.loc-card p { font-size: 13.5px; color: #d7dfe6; margin: 4px 0 10px; }
.loc-card .more { color: #cfe0ae; font-weight: 700; font-size: 13.5px; }
@media (max-width: 980px) { .loc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .loc-grid { grid-template-columns: 1fr; } }
.photo-credit { margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(59,79,96,.12);
  font-size: 11px; font-style: italic; line-height: 1.8; color: var(--muted); max-width: 820px; }
.photo-credit .pc-label { display: inline-block; margin-right: 10px; font-style: normal; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; font-size: 9.5px; color: var(--accent-dark); }
/* tiny image-attribution line at the foot of a service page (only when s.credit is set) */
.svc-credit { margin-top: 28px; font-size: 10.5px; font-style: italic; color: var(--muted); opacity: .8; }

/* ---------- lot-size estimator ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 36px; }
.tier-card { position: relative; background: #fff; border: 2px solid var(--line); border-radius: var(--radius);
  padding: 24px 18px; text-align: center; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
  font-family: inherit; }
.tier-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tier-card.selected { border-color: var(--accent-dark); box-shadow: 0 0 0 3px var(--accent-tint), var(--shadow-sm); }
.tier-card .flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent);
  color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.tier-card .t-name { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tier-card .t-range { font-weight: 700; color: var(--primary); margin-top: 4px; font-size: 14.5px; }
.tier-card .t-price { font-size: 30px; font-weight: 800; color: var(--primary); margin-top: 10px; }
.tier-card .t-price small { font-size: 13px; font-weight: 600; color: var(--muted); }
.tier-card .t-unit { color: var(--muted); font-size: 12px; }
.estimate-panel { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 34px; margin-top: 28px; }
.estimate-panel h3 { color: var(--primary); font-size: 21px; font-weight: 800; }
.est-headline { background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 12px; padding: 13px 18px; margin-top: 16px; text-align: center; font-size: 15px; font-weight: 600; color: var(--primary); }
.est-headline b { font-size: 20px; font-weight: 800; color: var(--accent-dark); }
.est-rows { margin-top: 18px; display: grid; gap: 12px; }
.est-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px dashed var(--line); padding-bottom: 12px; }
.est-row .svc { font-weight: 700; font-size: 15px; }
.est-row .svc small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.est-row .price { font-weight: 800; color: var(--primary); font-size: 18px; white-space: nowrap; }
.est-row .price small { font-weight: 600; color: var(--muted); font-size: 12px; }
.est-note { background: var(--accent-tint); border-radius: 10px; padding: 14px 18px; margin-top: 18px;
  color: #4d6032; font-size: 13.5px; }
.est-cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
@media (max-width: 980px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tier-grid { grid-template-columns: 1fr; } }

/* ---------- quote funnel ---------- */
.funnel { max-width: 880px; margin: 36px auto 0; }
.funnel-card { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35); padding: 32px 30px; }
.funnel-card .bar { width: 44px; height: 4px; background: var(--accent); border-radius: 2px; margin: 0 auto 16px; }
.funnel-card h3 { color: var(--accent-dark); font-size: 22px; font-weight: 800; text-align: center; }
.funnel-card .fsub { color: var(--muted); font-size: 13.5px; margin: 6px 0 18px; text-align: center; }
.funnel-card .addr-row { display: flex; gap: 10px; }
.addr-wrap { position: relative; }
.addr-suggest { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: #fff;
  color: var(--ink); border-radius: 10px; box-shadow: 0 12px 34px rgba(34,48,60,.25); z-index: 30;
  overflow: hidden; text-align: left; }
.addr-suggest .s:hover, .addr-suggest .s.active { color: var(--primary); }
.addr-suggest .s { padding: 11px 14px; font-size: 14px; cursor: pointer; display: flex; gap: 9px; align-items: center; }
.addr-suggest .s:hover, .addr-suggest .s.active { background: var(--accent-tint); }
.addr-suggest .s .ic { opacity: .55; font-size: 12px; }
.funnel-card .addr-row input { flex: 1; min-width: 0; }
.funnel-card .addr-row .btn { white-space: nowrap; }
.funnel-card .fine { text-align: center; color: #9aa7b1; font-size: 11.5px; margin-top: 14px; }
.funnel-card .fine span:not(:last-child)::after { content: '·'; margin: 0 6px; }
.funnel-card .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 11.5px; color: var(--muted); margin-top: 14px; text-align: left; }
.funnel-card .consent input { width: auto; margin-top: 2px; flex: none; }
/* transactional disclosure shown under submit on every lead form (no checkbox) */
.fine-print { text-align: center; color: #9aa7b1; font-size: 11px; line-height: 1.45; margin-top: 12px; }
.fine-print a { color: #7f8c96; text-decoration: underline; }
/* big, inviting tap-anywhere opt-in card (two-tier: this = marketing opt-in) */
.sms-optin { background: var(--accent); border-radius: 11px; padding: 11px 12px 9px; margin-top: 12px; text-align: left; }
.sms-optin .sms-head { color: #fff; font-weight: 700; font-size: 12px; line-height: 1.35; margin: 0 0 8px; }
/* .sms-optin-prefixed so these beat the form's ".xxx label { display:block }" rules (0,2,0 > 0,1,1) */
.sms-optin .sms-pill { display: flex; align-items: center; gap: 10px; margin: 0; background: #fff; border-radius: 9px; padding: 9px 12px; cursor: pointer; border: 2px solid transparent; transition: border-color .12s ease; }
.sms-optin .sms-pill:has(input:checked) { border-color: var(--accent-dark); }
.sms-optin .sms-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sms-optin .sms-pill-label { flex: 1; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--primary); }
/* selection = a filled circle on the RIGHT — sibling selector so it works everywhere */
.sms-optin .sms-circle { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #bcc6ad; background: #fff; position: relative; transition: background .12s ease, border-color .12s ease; }
.sms-optin .sms-pill input:checked ~ .sms-circle { background: var(--accent-dark); border-color: var(--accent-dark); }
.sms-optin .sms-pill input:checked ~ .sms-circle::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.sms-optin .sms-fine { color: rgba(255,255,255,.85); font-size: 10px; line-height: 1.4; margin: 7px 2px 0; }
.funnel-card label { display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 6px; }
.funnel-card input { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 14px;
  font-size: 15px; font-family: inherit; }
.funnel-card input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.funnel-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.fnav .btn { flex: 1; text-align: center; }
.fnav .back { flex: 0 0 auto; }
.fnav .back { background: none; border: none; color: var(--muted); font-weight: 700; cursor: pointer;
  font-size: 14px; font-family: inherit; padding: 12px 6px; }
.fnav .back:hover { color: var(--primary); }
.ferr { display: none; margin-top: 12px; font-size: 14px; font-weight: 700; color: #fff; background: #b0533d; padding: 9px 14px; border-radius: 9px; text-align: center; }
.funnel .tier-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-top: 8px; }
.pkg-banner { background: var(--accent-tint); border: 2px solid var(--accent-dark); border-radius: 12px;
  padding: 14px 16px; margin: 4px 0 14px; }
.pkg-banner-badge { display: inline-block; background: var(--accent-dark); color: #fff; font-size: 10.5px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; margin-bottom: 7px; }
.pkg-banner-name { display: block; font-size: 19px; font-weight: 800; color: var(--primary); letter-spacing: -.01em; }
.pkg-banner-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.pkg-banner-link { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent-dark); margin-top: 8px; }
.pkg-banner-link:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 620px) { .funnel .tier-grid, .funnel-card .row2 { grid-template-columns: 1fr; } }

.hero .funnel { margin: 0; max-width: none; }
.hero .funnel-card { padding: 28px; }
.hero .funnel .tier-grid { margin-top: 4px; }

.f-status { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--accent-dark); min-height: 18px; text-align: center; }
.est-inc { color: var(--accent-dark); font-weight: 800; font-size: 12.5px; letter-spacing: .02em; }
/* the hidden attribute must win over component display rules (e.g. .btn) */
[hidden] { display: none !important; }

/* ---------- standalone quote page (/free-quote/) ---------- */
.fq-page { max-width: 640px; margin: 0 auto; padding: 42px 20px 60px; text-align: center; }
.fq-logo img { height: 56px; width: auto; margin: 0 auto 26px; }
.fq-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.fq-head { background: var(--accent); color: #fff; font-size: clamp(20px, 4vw, 26px); font-weight: 800; padding: 22px 28px; text-align: center; }
.fq-body { padding: 26px 28px 30px; }
.fq-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 8px; text-align: center; }
.fq-foot { margin-top: 22px; font-size: 13px; color: var(--muted); }
.fq-foot a { color: var(--muted); }
.fq-foot a:hover { color: var(--primary); }
/* self-contained form styling so it looks right outside a .form-card too */
.quote-form label { display: block; font-weight: 600; font-size: 13.5px; margin: 16px 0 6px; }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 13px; font-size: 14.5px; font-family: inherit; background: #fff; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
/* multi-select service checkboxes (contact + free-quote forms) */
.svc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; margin-top: 6px; }
.svc-checks .svc-check { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 500; font-size: 14px; cursor: pointer; }
.svc-checks input[type="checkbox"] { width: auto; margin: 0; flex: none; accent-color: var(--accent); }
.lbl-hint { font-weight: 400; color: var(--muted); font-size: 12px; }
@media (max-width: 620px) { .svc-checks { grid-template-columns: 1fr; } }
.quote-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quote-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--muted); margin-top: 16px; }
.quote-form .consent input { width: auto; margin-top: 3px; }
.quote-form .btn { width: 100%; margin-top: 20px; }
@media (max-width: 560px) { .quote-form .row2 { grid-template-columns: 1fr; } }

/* ---------- legal pages (privacy / terms) ---------- */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { color: var(--primary); font-size: 20px; font-weight: 800; margin: 30px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: #40505d; margin: 0 0 12px; font-size: 15px; line-height: 1.75; }
.legal ul { margin: 0 0 14px; padding-left: 20px; color: #40505d; }
.legal li { margin: 6px 0; font-size: 15px; line-height: 1.6; }

/* ---------- calculator embed ---------- */
.calc-frame { border: 0; width: 100%; height: calc(100vh - 130px); min-height: 760px; max-height: 1200px;
  border-radius: 16px; box-shadow: var(--shadow); background: #fff; }
.calc-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 14px; }

.map-embed { width: 100%; border: 0; border-radius: 12px; box-shadow: var(--shadow-sm); display: block; margin-top: 14px; }

/* ---------- client hub ---------- */
.hub-login { max-width: 460px; margin: 0 auto; }
.demo-chip { display: inline-flex; align-items: center; gap: 8px; background: #fdf3d7; color: #7a5d1b;
  border: 1px solid #f0dfae; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 6px 14px; }
.hub-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.hub-head h2 { color: var(--primary); font-size: 26px; font-weight: 800; }
.hub-head .who { color: var(--muted); font-size: 14px; margin-top: 4px; }
.hub-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }
.hub-col { display: grid; gap: 22px; }
.timeline { display: grid; gap: 10px; margin-top: 14px; }
.tl-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.tl-row .dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; flex-shrink: 0; background: var(--line); color: #fff; }
.tl-row.done .dot { background: var(--accent-dark); }
.tl-row.next .dot { background: var(--primary); }
.tl-row.next { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,79,96,.08); }
.tl-row .nm { font-weight: 700; font-size: 14.5px; }
.tl-row .dt { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.tl-row .st { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 999px; padding: 3px 10px; }
.tl-row.done .st { background: var(--accent-tint); color: var(--accent-dark); }
.tl-row.next .st { background: #e8eef4; color: var(--primary); }
.tl-row.todo .st { background: var(--cream); color: var(--muted); }
.hist { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.hist th { text-align: left; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.hist td { padding: 10px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.hist td:first-child { white-space: nowrap; color: var(--muted); }
.kv { display: grid; gap: 8px; margin-top: 12px; }
.kv div { display: flex; gap: 12px; font-size: 14px; }
.kv .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; min-width: 92px; font-weight: 700; padding-top: 2px; }
@media (max-width: 980px) { .hub-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { background: #fff; color: var(--muted); border-top: 1px solid var(--line); }
footer .top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding: 38px 0 24px; }
footer .brand img { height: 52px; width: auto; margin-bottom: 12px; }
footer p { font-size: 13.5px; }
footer h5 { color: var(--primary); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
footer ul { list-style: none; }
footer li { margin-bottom: 8px; }
/* town list flows in two columns so it doesn't dictate the footer's height */
footer ul.ft-towns { columns: 2; column-gap: 18px; }
footer ul.ft-towns li { break-inside: avoid; }
footer a { color: var(--muted); font-size: 14px; }
footer a:hover { color: var(--primary); }
footer .contact-lines li { display: flex; gap: 8px; font-size: 13.5px; }
footer .nap-name { font-weight: 700; color: var(--primary); }
footer .brand .map-embed { max-width: 360px; margin-top: 16px; }
footer .footer-dir { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--accent-dark); font-size: 13.5px; }
footer .footer-dir:hover { color: var(--primary); }
footer .footer-social { display: flex; gap: 14px; margin-top: 14px; }
footer .footer-social a { display: inline-flex; color: var(--muted); }
footer .footer-social a:hover { color: var(--accent-dark); }
footer .footer-all { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--accent-dark); }
footer .footer-all:hover { color: var(--primary); }
footer .bottom { border-top: 1px solid var(--line); display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 18px 0; font-size: 12.5px; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap, .why, .svc-intro, .contact-grid { grid-template-columns: 1fr; }
  .svc-intro img { height: auto; max-height: none; }
  .why .photo img { max-height: none; }
  .svc-grid, .val-grid, .rev-grid { grid-template-columns: 1fr 1fr; }
  .stats .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .town-grid { grid-template-columns: repeat(3, 1fr); }
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  footer .top { grid-template-columns: 1fr 1fr; }
  .nav .wrap { min-height: 62px; }  /* phones keep the compact bar; 84px is desktop-only */
  .nav .menu-btn { display: block; }
  .nav-menu { display: none; }
  .nav.open .nav-menu { display: flex; flex-direction: column; align-items: stretch; position: absolute;
    top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 14px 24px rgba(34,48,60,.15);
    padding: 12px 22px 22px; gap: 6px; max-height: calc(100vh - 84px); overflow-y: auto; }
  .nav.open .links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .nav.open .links a { padding: 12px 4px; font-size: 15px; }
  .nav.open .dd > a { display: block; }  /* even row height for Services/Service Areas */
  .nav.open .links a { border-radius: 8px; }
  .nav.open .links a:hover, .nav.open .links a:active { background: var(--accent-tint); }
  .nav.open .nav-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
    padding-top: 14px; border-top: 1px solid var(--line); }
  .nav.open .nav-ctas .cta { width: 100%; text-align: center; padding: 14px; }
  /* mobile nav = 5 top links only (Home, Services, Service Areas, About, Reviews) — no sub-pages */
  .nav .dd-menu { display: none !important; }
  /* bigger hamburger + centered open menu */
  .nav .menu-btn { font-size: 28px; padding: 8px 18px; }
  .nav.open .nav-menu { align-items: center; }
  .nav.open .links { align-items: center; }
  .nav.open .links a { text-align: center; }
  /* compact Why us: drop intro copy + checklist */
  .why > div > p, .why .checks { display: none; }
  .why { margin-top: 20px; gap: 24px; }
  .rating-badge { left: 12px; }
}
@media (max-width: 620px) {
  .val-grid, .form-card .row2 { grid-template-columns: 1fr; }
  .svc-grid, .rev-grid, .gal-grid, .stats .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rev-grid, .gal-grid { gap: 10px; }
  .rev-grid > *, .gal-grid > * { min-width: 0; }
  /* homepage shows 6 reviews on desktop but stays 4 on phones (overflow fix) */
  .home-reviews .rev-card:nth-child(n+5) { display: none; }
  .rev-card { padding: 15px; }
  .rev-card p { overflow-wrap: anywhere; }
  .town-grid { grid-template-columns: 1fr 1fr; }
  .quote-card form { flex-direction: column; }
  .topbar .wrap { justify-content: center; }
  .topbar .right { display: none; }
}

/* ===== Funnel v2 — Troops-style price + review steps (brand palette) ===== */
/* progress bar */
.fprogbar { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 10px; }
.fprog { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.fprog::before { content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.fprog:first-child::before { display: none; }
.fprog.done::before, .fprog.active::before { background: var(--accent); }
.fp-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--line); color: var(--muted); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.fprog.active .fp-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.fprog.done .fp-dot { background: var(--accent); border-color: var(--accent); color: transparent; font-size: 0; }
.fprog.done .fp-dot::after { content: '✓'; color: #fff; font-size: 14px; font-weight: 900; }
.fp-l { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fprog.active .fp-l, .fprog.done .fp-l { color: var(--primary); }

/* estimate step title box */
.est-head { font-size: 18px; font-weight: 800; color: var(--primary); border: 1.5px solid #cfd8e2; border-radius: 9px; padding: 7px 12px; letter-spacing: -.01em; }
.fpanel > .fsub { margin: 4px 2px 8px; }

/* recommended-package card */
.pkg-card { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.pkg-top { background: var(--accent); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; }
.pkg-name { font-size: 19px; font-weight: 800; color: #16210c; }
.pkg-badge { flex: none; background: #b4442f; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; }
.pkg-body { background: var(--primary-darker); color: #d7e0e7; padding: 20px 18px 18px; }
.pkg-lead { color: #c8d4a8; font-weight: 800; font-size: 16px; margin-bottom: 15px; }
.pkg-list { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; }
.pkg-list li { display: flex; gap: 11px; align-items: flex-start; }
.pkg-list .ck { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #12210a; font-weight: 900; font-size: 12px; display: grid; place-items: center; }
.pkg-list .md { flex: none; font-size: 17px; line-height: 22px; width: 22px; text-align: center; }
.pkg-list .pl-t { display: flex; flex-direction: column; }
.pkg-list .pl-t b { color: #fff; font-size: 14.5px; font-weight: 700; }
.pkg-list .pl-t small { color: #9fb0bd; font-size: 12.5px; line-height: 1.35; }
.pkg-div { color: #8296a3; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; margin: 17px 0 13px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.13); }
.pkg-price { display: flex; align-items: center; gap: 15px; background: rgba(0,0,0,.24); border-radius: 12px; padding: 14px 16px; margin-top: 17px; }
.pp-left { display: flex; align-items: flex-start; color: var(--accent); line-height: .9; }
.pp-dollar { font-size: 22px; font-weight: 800; margin-top: 8px; }
.pp-num { font-size: 56px; font-weight: 900; letter-spacing: -.03em; }
.pp-per { font-size: 12px; font-weight: 800; color: #fff; text-transform: uppercase; margin: 7px 0 0 8px; line-height: 1.05; }
.pp-right { flex: 1; min-width: 0; }
.pp-range { color: #fff; font-weight: 700; font-size: 13px; line-height: 1.3; }
.pp-stars { color: #c8d4a8; font-weight: 700; font-size: 12.5px; margin-top: 4px; }
.pp-note { color: #9fb0bd; font-size: 12px; font-style: italic; margin: 11px 2px 0; line-height: 1.4; }
.pkg-cta { width: 100%; margin-top: 16px; background: var(--accent); color: #fff; font-size: 16px; padding: 15px; border: none; }
.pkg-cta:hover { background: #8dac60; }
.pkg-nc { text-align: center; color: #8296a3; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; margin-top: 13px; }
.pkg-alt { text-align: center; margin-top: 15px; }
.pkg-alt a { color: var(--primary); font-weight: 700; font-size: 13.5px; text-decoration: underline; }

/* review / confirm step */
.sum-card { border: 1px solid var(--line); border-radius: 14px; padding: 2px 16px; background: #fff; }
.sum-row { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.sum-row:last-child { border-bottom: none; }
.sum-row .sk { flex: none; color: #8a97a2; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sum-row .sk-pkg { color: var(--accent-dark); font-size: 15px; letter-spacing: -.005em; text-transform: none; }
.price-size-line { text-align: center; font-size: 13.5px; color: var(--muted); margin: -2px 0 12px; }
.price-size-line b { color: var(--primary); font-weight: 700; }
.sum-row .sv { flex: 1 1 auto; color: var(--primary); font-weight: 700; font-size: 15px; text-align: right; }
.sum-row .sv-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; font-weight: 800; }
.sum-row .sv small { display: block; color: #8a97a2; font-weight: 500; font-size: 11.5px; margin-top: 2px; }
.sum-row .row-del { flex: none; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 800;
  line-height: 1; color: #b0533d; padding: 4px 2px 4px 8px; opacity: .65; transition: opacity .15s; }
.sum-row .row-del:hover { opacity: 1; }
.sum-note { color: #8a97a2; font-size: 11.5px; font-style: italic; margin: 6px 2px 0; line-height: 1.3; }

.addon-card { background: var(--accent-tint); border: 1px solid #d5e0c2; border-radius: 14px; padding: 8px 14px; margin-top: 6px; }
.addon-card .addon-opt { display: flex; align-items: center; gap: 11px; margin: 0; padding: 5px 0; border-top: 1px solid #d5e0c2; cursor: pointer; }
.addon-card .addon-opt:first-of-type { border-top: none; }
.addon-card .addon-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.addon-card .addon-opt .ck2 { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #b7c39f; background: #fff; position: relative; }
.addon-card .addon-opt input:checked ~ .ck2 { background: var(--accent-dark); border-color: var(--accent-dark); }
.addon-card .addon-opt input:checked ~ .ck2::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900; }
.addon-card .addon-opt .an { flex: 1; color: var(--primary); font-weight: 700; font-size: 14.5px; }
.addon-card .addon-opt .ap { flex: none; color: var(--primary); font-weight: 800; font-size: 14px; white-space: nowrap; }
.addon-card-badge { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 6px; }

.review-card { background: var(--accent-tint); border: 1px solid #d5e0c2; border-radius: 14px; padding: 15px 16px; margin-top: 16px; }
.review-h { font-weight: 800; color: var(--primary); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 11px; }
.review-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.review-list li { display: flex; gap: 9px; align-items: flex-start; color: var(--primary); font-size: 13.5px; line-height: 1.4; }
.review-list .rk { color: var(--accent-dark); font-weight: 900; flex: none; }

.funnel-card .auth { display: flex; align-items: flex-start; gap: 11px; margin: 18px 2px 0; cursor: pointer; }
.funnel-card .auth input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.funnel-card .auth .ck2 { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--line); background: #fff; position: relative; }
.funnel-card .auth input:checked ~ .ck2 { background: var(--accent-dark); border-color: var(--accent-dark); }
.funnel-card .auth input:checked ~ .ck2::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900; }
.funnel-card .auth .auth-t { flex: 1; color: var(--primary); font-weight: 600; font-size: 13.5px; line-height: 1.45; }

/* subtle footer credit */
.built-by { text-align: right; font-size: 11px; color: #aab4bc; letter-spacing: .02em; padding-bottom: 16px; }
.built-by a { color: #8a97a2; text-decoration: none; }
.built-by a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ===== service-page hero calculator ===== */
.page-hero.with-calc .wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 44px; align-items: start; padding-top: 54px; padding-bottom: 54px; max-width: 1320px; }
.page-hero.with-calc h1 { max-width: none; font-size: clamp(28px, 3.4vw, 40px); }
.page-hero.with-calc p { max-width: 520px; }
.page-hero .ph-content { min-width: 0; padding-top: 6px; }
.page-hero .funnel { margin: 0; max-width: none; }
.page-hero .funnel-card { padding: 24px 22px; }
@media (max-width: 900px) {
  .page-hero.with-calc .wrap { grid-template-columns: 1fr; gap: 26px; padding-top: 40px; padding-bottom: 40px; }
  .page-hero .funnel-card { padding: 22px 20px; }
}

/* ===== homepage "Our Service Area" (Leaflet map + area buttons) ===== */
/* soft brand-tinted band so it reads distinct from the white gallery above; derives
   from the palette vars so it ports per client (slate wash here, warm-grey on Check's) */
.band.svc-area { background: color-mix(in srgb, var(--primary) 7%, var(--cream)); }
.svc-area-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-top: 32px; }
.svc-map-card { min-width: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: var(--cream); }
#svc-map { height: 100%; min-height: 480px; width: 100%; z-index: 0; }
.area-btns { display: flex; flex-direction: column; gap: 12px; }
.area-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60px;
  background: var(--accent); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  font-size: 15.5px; border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .15s ease; }
.area-btn:hover { background: var(--accent-dark); transform: translateX(4px); }
@media (max-width: 900px) {
  .svc-area-grid { grid-template-columns: minmax(0, 1fr); }
  #svc-map { min-height: 360px; max-width: 100%; }
  .area-btns { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .area-btn { flex: 1 1 40%; min-width: 0; }
}

/* ===== topbar link + service-area map ===== */
.topbar a { color: #fff; font-weight: 600; }
/* `isolation` keeps the overlay's stacking local to the map card — without it the
   overlay's z-index competes with the sticky nav (z-index 60) and paints over it. */
.area-map { position: relative; isolation: isolate; margin-top: 26px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.area-map .map-embed { width: 100%; display: block; border: 0; }
.area-overlay { position: absolute; top: 18px; left: 18px; background: rgba(255,255,255,.96); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); max-width: 250px; }
.area-overlay .ao-h { font-weight: 800; color: var(--primary); font-size: 14px; margin-bottom: 9px; }
.area-overlay ul { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; padding: 0; }
.area-overlay li { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.area-overlay li:first-child { color: var(--accent-dark); font-weight: 800; }
.area-overlay .ao-more { color: var(--muted); font-weight: 500; font-style: italic; }
.area-overlay .ao-cta { color: var(--primary); font-weight: 700; font-size: 13px; text-decoration: underline; }
@media (max-width: 680px) {
  .area-overlay { position: static; max-width: none; border-radius: 0; box-shadow: none; padding: 15px 18px 6px; }
  .area-overlay ul { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
}

/* ===== funnel v4 — compact icon cards, all 5 sizes on one row ===== */
.funnel .tier-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-top: 6px; }
.funnel .tier-card { padding: 14px 8px; }
.funnel .tier-card .t-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-tint);
  color: var(--accent-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.funnel .tier-card .t-icon svg { width: 18px; height: 18px; }
.funnel .tier-card .t-body { display: block; }
.funnel .tier-card .t-name { display: block; font-size: 10.5px; }
.funnel .tier-card .t-range { display: block; font-size: 12px; margin-top: 2px; line-height: 1.3; }
.funnel .tier-card .flag { top: -10px; font-size: 9px; padding: 2px 9px; }
/* email hint */
.f-hint { color: var(--accent-dark); font-size: 12.5px; font-weight: 600; margin-top: 10px; }
/* 3 packages (vertical stack so it fits both the wide page and the narrow hero column) */
.pkg-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pk-card { position: relative; display: block; width: 100%; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.pk-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pk-card.pop { border-color: var(--accent); }
.pk-flag { position: absolute; top: -10px; right: 14px; background: var(--accent); color: #16210c; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.pk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pk-name { font-weight: 800; color: var(--primary); font-size: 16px; }
.pk-price { font-weight: 900; color: var(--accent-dark); font-size: 22px; line-height: 1; white-space: nowrap; }
.pk-per { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 1px; }
.pk-feats { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-top: 6px; line-height: 1.4; }
.pk-pick { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 800; color: var(--primary); }
.pp-disclaim { color: var(--muted); font-size: 11px; text-align: center; margin-top: 6px; font-style: italic; line-height: 1.3; }

/* ---------- footer Client Hub — pill CTA so existing customers spot their portal ---------- */
footer .footer-hub { display: inline-block; margin-top: 12px; padding: 9px 16px; border: 1.5px solid var(--accent);
  border-radius: 999px; color: var(--accent-dark); font-weight: 700; font-size: 13.5px; }
footer .footer-hub:hover { background: var(--accent); color: #16210c; }

/* stop step-change scroll jump in the instant-quote calculator: disable the
   browser's scroll-anchoring so a taller/shorter step doesn't nudge the page */
body { overflow-anchor: none; }

/* click-to-call in the nav */
.nav-call { display: inline-flex; align-items: center; font-weight: 700; color: var(--primary); font-size: 13.5px; white-space: nowrap; padding: 6px; }
.nav-call:hover { color: var(--accent-dark); }
@media (max-width: 980px) { .nav.open .nav-call { justify-content: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; } }

/* package selection (pick then Continue) */
.pk-card.sel { border-color: var(--accent-dark); box-shadow: 0 0 0 3px var(--accent-tint); }
.pk-choose { display: inline-block; margin-top: 10px; }
.pk-choose::before { content: 'Tap to choose'; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.pk-card.sel .pk-choose::before { content: '✓ Selected'; color: var(--accent-dark); }


/* center desktop nav links (logo left, links centered, ctas right) */
@media (min-width: 981px) {
  /* .wrap caps at 1200px sitewide, which leaves a big dead margin before the logo
     on any screen wider than ~1250px -- widen it for the nav specifically so the
     logo sits closer to the true left edge instead of floating mid-page (Eric,
     2026-08-13). Still bounded so ultra-wide monitors don't spread links/CTAs too far apart. */
  .nav .wrap { max-width: 1600px; }
  .nav .nav-menu { flex: 1; }
  .nav .nav-menu .links { margin: 0 auto; }
}
/* a guaranteed gap after the logo, not just whatever slack the CTAs don't use --
   that slack shrank to ~0 once Client Hub joined the CTA group, leaving the logo
   crowding straight into Home (Eric, 2026-08-13). Held to >=1280px specifically:
   below that, links+CTAs' own natural width already fills the row, and forcing a
   fixed 40px on top of it pushes the CTAs past the viewport edge (real overflow,
   verified with the narrow end of the desktop breakpoint). auto below that width
   gracefully collapses to 0 instead of forcing a scrollbar. */
@media (min-width: 1280px) {
  .nav .brand { margin-right: 40px; }
}

/* compact review step + about-hero TURF accent */
.sum-card .sum-row { padding: 6px 0; }
.sum-assure { color: var(--accent-dark); font-size: 12px; font-weight: 600; text-align: center; margin: 12px 6px 0; line-height: 1.5; }
.page-hero h1 .turf { color: var(--accent); }

/* mobile: lead with the instant-price calculator so it's visible on open (no scroll) */
@media (max-width: 980px) {
  .hero .wrap { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; padding-bottom: 26px; align-items: stretch; }
  .hero .hero-left { display: contents; text-align: center; }
  .hero .hero-left h1 { order: 1; }
  .hero .hero-left .kicker { order: 2; }
  .hero .funnel { order: 3; }
  .hero .hero-left .lede { order: 4; }
  .hero .funnel-card { padding: 20px 18px; }
}

/* mobile: kill parallax (janky/clipped on phones) + compact the page to cut scrolling */
@media (max-width: 980px) {
  .nav .dd { display: block; }
  .band-photo.parallax { background-attachment: scroll; }
  section.band { padding: 32px 0; }
  .cta-band { padding: 44px 0; }
  .cta-band .btns { margin-top: 22px; }
  .communities { padding: 40px 0; }
  p.sub { margin-top: 10px; }
}

/* split-hero left column keeps the old top padding on desktop */
.hero .hero-left { padding-top: 16px; }
/* calc scroll-to-top lands below the sticky nav */
#funnel { scroll-margin-top: 80px; }
/* responsive calc heading: full on web, short on mobile */
.fh-sm { display: none; }

/* mobile: centered logo + hamburger (no box) + short heading */
@media (max-width: 980px) {
  .hero .hero-left { padding-top: 0; }
  .nav .wrap { justify-content: center; gap: 10px; }
  .nav .brand { margin-right: 0; }
  .nav .menu-btn { border: none; padding: 4px 6px; font-size: 30px; }
  .fh-lg { display: none; }
  .fh-sm { display: inline; }
}

/* compact footer on phones (no text removed) */
@media (max-width: 620px) {
  footer .top { grid-template-columns: 1fr 1fr; gap: 16px 22px; padding: 24px 0 12px; }
  footer .top > .brand { grid-column: 1 / -1; }
  footer .brand img { height: 44px; margin-bottom: 8px; }
  footer .brand p { font-size: 12.5px; line-height: 1.5; }
  footer .contact-lines { margin-top: 10px !important; }
  footer .contact-lines li { font-size: 12.5px; }
  footer h5 { margin-bottom: 8px; }
  footer li { margin-bottom: 4px; }
  footer a { font-size: 13px; }
  footer .footer-dir { margin-top: 8px; }
  footer .footer-hub { margin-top: 8px; }
  footer .bottom { flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 12px 0; }
  .built-by { text-align: center; padding-bottom: 12px; margin-top: 4px; }
}

/* compact funnel price/review on phones so Continue/submit is above the fold */
@media (max-width: 620px) {
  .funnel-card { padding: 16px 14px; }
  .funnel .fprogbar { margin-bottom: 12px; }
  .funnel-card .est-head { font-size: 16px; padding: 6px 12px; }
  .funnel .fpanel > .fsub { margin: 5px 2px 8px; font-size: 12.5px; }
  .pkg-grid { gap: 8px; margin-top: 2px; }
  .pk-card { padding: 9px 13px; }
  .pk-name { font-size: 15px; }
  .pk-price { font-size: 19px; }
  .pk-feats { font-size: 11.5px; margin-top: 3px; line-height: 1.35; }
  .pk-choose { display: none; }
  .pk-flag { font-size: 9px; padding: 2px 8px; top: -8px; }
  .pp-disclaim { font-size: 10px; margin-top: 8px; line-height: 1.4; }
  .funnel .fnav { margin-top: 10px; }
}

/* service-area Leaflet map (keyless OSM tiles) */
#area-map-canvas { height: 440px; width: 100%; background: #e8eddf; }
.area-map .area-overlay { z-index: 1000; }
.dighton-pin { font-size: 16px; line-height: 1; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.leaflet-container { font: inherit; }
@media (max-width: 620px) { #area-map-canvas { height: 320px; } }

/* ----------------------------------------------------------- scroll reveal
   Subtle fade-up as sections scroll into view. Progressive enhancement: the
   [data-reveal] attributes are added by the footer script only when motion is
   allowed, so with JS off OR reduced-motion on, nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.4s cubic-bezier(.22, 1, .36, 1), transform 1.4s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }
  /* opacity-only variant for elements that already animate on hover */
  [data-reveal="fade"] { transform: none; }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

/* -------------------------------------------- instant-quote: out-of-area */
.fwarn { margin: 10px 2px 0; color: #8a5a12; background: #fdf3e3; border: 1px solid #e9c877;
  border-radius: 10px; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; text-align: left; }
.foos { text-align: center; padding: 6px 4px 4px; }
.foos-icon { color: var(--accent-dark); margin-bottom: 6px; }
.foos-icon svg { width: 34px; height: 34px; }
.foos h3 { color: var(--accent-dark); font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.foos > p { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 30rem; margin: 0 auto 18px; }
.foos-form { display: flex; flex-direction: column; gap: 10px; max-width: 22rem; margin: 0 auto; text-align: left; }
.foos-form input { width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink); background: #fff; }
.foos-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.foos-status { min-height: 18px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.foos-status.ok { color: var(--accent-dark); font-weight: 600; }
.foos-status.err { color: #b4453a; }
.foos-meanwhile { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.foos-meanwhile a { font-weight: 700; }
.foos-alt { display: inline-block; margin-top: 12px; background: none; border: none; font: inherit;
  font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.foos-alt:hover { color: var(--accent-dark); }

/* Estimate funnel — free-text notes on the Services step (ProFriendly: no price step,
   so the request carries what the customer wants done). Mirrors the funnel inputs. */
.funnel-card textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 15px; margin-top: 6px; resize: vertical; background: #fff; color: var(--ink); }
.funnel-card textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }