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

:root {
  /* Light-only site: without this, Chrome/Android's own auto-dark-theming can
     repaint an unclassified solid background independently of the CSS below. */
  color-scheme: light;
  --primary: #bd0f03;
  --primary-dark: #970c02;
  --primary-darker: #710902;
  --accent: #00a218;
  --accent-dark: #008514;
  --accent-tint: #e6f6e8;
  --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; padding-block: 12px; }
.nav .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-shrink: 0;
  padding: 4px 0; }
.nav .brand img { height: 46px; width: auto; max-width: none; }
.nav .links { display: flex; align-items: center; gap: 22px; }
.nav .links a { color: var(--primary); font-size: clamp(14px, 1.3vw, 18px); 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); }
.nav .dd-item { position: relative; }
.nav .dd-item.has-sub > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nav .dd-item .car { opacity: .5; font-size: 12px; }
.nav .dd-flyout { display: none; position: absolute; top: -8px; left: 100%; background: #fff; border-radius: 10px;
  box-shadow: var(--shadow); padding: 8px; min-width: 220px; margin-left: 4px; }
.nav .dd-item.has-sub:hover .dd-flyout, .nav .dd-item.has-sub:focus-within .dd-flyout { display: block; }
.nav .dd-item.has-sub:hover > a { background: var(--accent-tint); }
.nav .dd-flyout a { color: var(--ink) !important; }

/* ---------- 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; 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; }
.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; }

/* Single-column centered homepage hero (2026-09-23, Jay: match a reference
   site's hero shape) — badges row, centered h1/lede, single-row address bar,
   italic trust line, all centered over the same real photo slideshow. */
.home-hero .wrap { text-align: center; max-width: 760px; padding-top: 88px; padding-bottom: 92px; }
.home-hero h1, .home-hero p.lede { text-align: center; }
.home-hero h1 { margin-bottom: 22px; }
.home-hero p.lede { max-width: 620px; margin-inline: auto; }
.hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.hbadge { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.hbadge-accent { background: var(--accent); color: #fff; }
.hbadge-light { background: #fff; color: var(--primary); transition: background .12s ease; }
.hbadge-light:hover { background: var(--cream); }
.home-hero .funnel { max-width: 640px; margin: 42px auto 0; }
/* Step 0 (plain address entry) sits directly on the hero photo, no white
   card -- Jay, 2026-09-23: "get rid of the white border around the
   calculator ... see how that one sits independent and free?" Every later
   step is a real form and keeps the white .funnel-card (step0 class is
   removed by show() in quoteFunnel()'s script once the user moves on). */
.home-hero .funnel-card.step0 { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.home-hero .funnel-card.step0 .addr-row input { border: none; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.home-hero .funnel-card.step0 .fwarn { background: #fff; border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.hero-trust { text-align: center; font-style: italic; color: #dbe3e9; font-size: 13.5px; margin-top: 26px; }

/* 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: 6px 22px; padding: 7px 0; }
.trust li { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.trust li::before { content: '✓'; font-weight: 900; color: var(--accent); font-size: 12px; }

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

/* ---------- 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); }

/* Full-photo service card, restyled 2026-09-30 (Jay: match the ProTurf-platform
   card format) — category badge top-left, plain bold title bottom-left over a
   dark fade; on hover a blurred brand-red veil fades in with the title centered,
   the short description, any sub-service chips and a solid CTA pill. Only
   cards carrying BOTH .svc-card and .photo-hover get this (blog post cards
   still use the plain white-body .svc-card above). */
.svc-card.photo-hover { position: relative; height: 380px; display: block; }
.svc-card.photo-hover .ph { height: 100%; transition: transform .7s cubic-bezier(.25,.1,.25,1); }
.svc-card.photo-hover:hover .ph { transform: scale(1.05); }
.svc-card.photo-hover .phov { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 22px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); }
.svc-card.photo-hover .phov-tag { position: absolute; top: 18px; left: 18px; z-index: 3; background: var(--accent);
  color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px; }
.svc-card.photo-hover .phov-title { color: #fff; font-weight: 800; font-size: 26px; line-height: 1.15;
  transition: opacity .35s ease; }
.svc-card.photo-hover:hover .phov-title { opacity: 0; }
.svc-card.photo-hover .phov-reveal { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 70px 28px 28px;
  background: rgba(120,10,4,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .45s ease; }
.svc-card.photo-hover:hover .phov-reveal, .svc-card.photo-hover:focus-visible .phov-reveal { opacity: 1; }
.svc-card.photo-hover .phov-reveal h3 { color: #fff; font-size: 25px; font-weight: 800; margin-bottom: 12px; }
.svc-card.photo-hover .phov-reveal p { color: rgba(255,255,255,.95); font-size: 16px; line-height: 1.6; margin: 0 0 16px; flex: 0; }
.svc-card.photo-hover .phov-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 16px; }
.svc-card.photo-hover .phov-chips span { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.svc-card.photo-hover .phov-cta { display: inline-block; background: #fff; color: var(--primary);
  font-weight: 800; font-size: 15px; padding: 11px 24px; border-radius: 999px; }
@media (max-width: 620px) { .svc-card.photo-hover { height: 340px; } }
/* touch screens can't hover — keep the plain title card there and let the tap go straight to the page */
@media (hover: none) { .svc-card.photo-hover .phov-reveal { display: none; } .svc-card.photo-hover:hover .phov-title { opacity: 1; } }

/* ---------- 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); }

/* Process/steps sections with a background photo (2026-09-18) — same overlay
   idea as .band-photo above but for a plain content band (eyebrow/title/sub +
   a grid of opaque white .step cards), not the CTA band, so text colors need
   their own light-on-dark treatment rather than inheriting .cta-band's. */
.band.proc-photo { position: relative; background-size: cover; background-position: center; }
.band.proc-photo::before { content: ''; position: absolute; inset: 0; background: rgba(36, 48, 59, .78); }
.band.proc-photo > .wrap { position: relative; z-index: 1; }
.band.proc-photo .eyebrow { color: #b9cd93; }
.band.proc-photo .title { color: #fff; }
.band.proc-photo .sub { color: #dfe6ea; }
.band.proc-photo .rev-meta { color: #dfe6ea; }
.band.proc-photo .featured-review blockquote { color: #fff; }
.band.proc-photo .featured-review cite { color: #dfe6ea; }
.band.proc-photo .btn-outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.band.proc-photo .btn-outline-dark:hover { border-color: #fff; }

/* ---------- why / reputation (bento — matches Top Shelf Turf's structure,
   Jay 2026-09-23) ---------- */
.why-bento { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: stretch; margin-top: 28px; }
.why-card { background: linear-gradient(150deg, var(--primary), var(--primary-darker)); color: #fff;
  border-radius: var(--radius); padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.why-card .eyebrow { color: #f0b9ad; }
.why-card h2.title { color: #fff; }
.why-card p { color: #f3dcd6; margin-top: 16px; font-size: 15px; line-height: 1.6; }
.why-card .btn { align-self: flex-start; margin-top: 24px; }
.why-photo { border-radius: var(--radius); overflow: hidden; min-height: 260px; box-shadow: var(--shadow); }
.why-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.why-item { display: flex; align-items: flex-start; gap: 14px; padding: 22px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.why-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-tint);
  color: var(--accent-dark); display: flex; align-items: center; justify-content: center; }
.why-ic svg { width: 20px; height: 20px; }
.why-item h4 { font-size: 13.5px; color: var(--primary); font-weight: 800; line-height: 1.3; }
.why-item p { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.45; }

/* Compact variant (2026-09-18, Jay: "way thinner more compact, less
   scrolling") — scoped to this one homepage section via .why-band rather
   than shrinking the shared section.band rule, which is reused by plenty of
   other, unrelated sections site-wide. */
section.band.why-band { padding: 36px 0; }
.why-band .why-bento { margin-top: 20px; }
.why-band .why-card { padding: 32px 30px; }
.why-band .why-strip { margin-top: 16px; }

/* ---------- 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 .rev-more { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent-dark); margin-left: 2px; white-space: nowrap; }
.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" — plain cream band (Jay, 2026-09-21: dropped
   the photo background) behind the gallery grid */
.home-work { padding: 40px 0; }                    /* compact: tighter than the default 72px band */
.home-work .gal-grid { margin-top: 26px; }          /* one row of 4 — pull the grid up snug */
.home-work .gal-grid img { height: 172px; }
/* Rest of the homepage compacted to match (Jay, 2026-09-18: "make the
   homepage more compact") — each scoped to its own homepage-only class so
   the same section.band/.cta-band/.svc-area used on other pages is untouched. */
section.band.home-services { padding: 40px 0; position: relative; overflow: hidden; }
.home-services .svc-grid { margin-top: 26px; }
/* Mascot brand touch (Jay, 2026-09-21) — decorative only, alt="" and
   pointer-events:none so it never competes with the section's real content. */
.mascot-peek { position: absolute; top: 18px; left: 2%; width: clamp(90px, 9vw, 150px);
  height: auto; z-index: 1; pointer-events: none; }
@media (max-width: 1300px) { .mascot-peek { display: none; } }
.cta-band.home-cta { padding: 40px 0; }
.cta-band.home-cta .btns { margin-top: 18px; }
section.band.cream.home-reviews { padding: 40px 0; }
section.band.svc-area { padding: 14px 0 40px; }  /* eyebrow removed (Jay, 2026-09-21) — pull the heading up */
.svc-area .svc-area-grid { margin-top: 20px; }
.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;
  scroll-margin-top: 100px; }
.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: 27px; 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; }
/* Step 0's price button lives here (moved in by JS — see show() in the
   inline script below) instead of the shared bottom .fnav, so the whole
   step reads as one row: address box + CTA, no heading above it. */
.addr-cta-slot { display: contents; }
.addr-cta-slot .btn { font-size: 16px; padding: 14px 22px; }
@media (max-width: 560px) {
  .funnel-card .addr-row { flex-wrap: wrap; }
  .funnel-card .addr-row input { flex: 1 1 100%; }
  .addr-cta-slot .btn { flex: 1 1 100%; }
}
.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; font-size: 17px; padding: 15px 26px; }
.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-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; }
/* "Build Your Quote" photo-card grid (2026-09-23, Jay: match ProFriendly's
   card style) -- one card per service; .included is the locked, always-on
   base service, the rest are real checkbox labels (input is visually
   hidden, the whole card is the click target). */
.svc-select-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.svc-select-card { position: relative; display: block; background: #fff; border: 1.5px solid var(--line);
  border-radius: 14px; overflow: hidden; cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.svc-select-card.included { cursor: default; }
.svc-select-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.svc-select-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ssc-photo { position: relative; height: 92px; background-size: cover; background-position: center; }
.ssc-check { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: transparent; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; transition: background .15s ease, color .15s ease; }
.svc-select-card.included .ssc-check, .svc-select-card:has(input:checked) .ssc-check { background: var(--accent-dark); color: #fff; }
.ssc-name { padding: 9px 10px 3px; font-size: 12.5px; font-weight: 800; color: var(--primary); line-height: 1.3; }
.svc-select-card:not(.included) .ssc-name { padding-bottom: 9px; }
.ssc-tag { padding: 0 10px 9px; font-size: 10px; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .04em; }
.freq-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-weight: 700; font-size: 13.5px; color: var(--primary); }
@media (max-width: 620px) { .funnel .tier-grid, .funnel-card .row2 { grid-template-columns: 1fr; } .svc-select-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .svc-select-grid { grid-template-columns: 1fr; } }

.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: 28px; padding: 26px 0 14px; }
footer .brand img { height: 44px; width: auto; margin-bottom: 8px; }
footer .footer-mascot-big { height: 190px; width: auto; margin-top: 16px; display: block; }
@media (max-width: 700px) { footer .footer-mascot-big { height: 150px; } }
footer p { font-size: 13.5px; }
footer h5 { color: var(--primary); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 9px; }
footer ul { list-style: none; }
footer li { margin-bottom: 5px; }
/* 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: 10px; }
footer .footer-dir { display: inline-block; margin-top: 6px; 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: 8px; }
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: 12px 0; font-size: 12.5px; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap, .why-bento, .svc-intro, .contact-grid { grid-template-columns: 1fr; }
  .svc-intro img { height: auto; max-height: none; }
  .svc-grid, .val-grid, .rev-grid, .why-strip { 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; }
  .why-bento { margin-top: 20px; gap: 18px; }
  .why-card { padding: 32px 26px; }
}
@media (max-width: 620px) {
  .val-grid, .form-card .row2 { grid-template-columns: 1fr; }
  .svc-grid, .rev-grid, .gal-grid { grid-template-columns: 1fr 1fr; }
  /* stat tiles thinner still on phones (Jay, 2026-09-19) — the 2-col mobile
     grid plus a long "Areas We Serve" town list made these noticeably
     taller than on desktop; tighter padding + line-height fixes both. */
  .stats { padding: 12px 0; }
  .stats .grid { gap: 10px; }
  .stat { padding: 8px 10px; }
  .stat .value { font-size: 18px; }
  .stat .label { font-size: 12px; margin-top: 1px; }
  .stat .sub { font-size: 10.5px; line-height: 1.3; margin-top: 1px; }
  .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; }

.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" (Google Maps embed + 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; min-height: 480px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: var(--cream); }
/* the grid row stretches this card to match the (often taller) button column, so the
   iframe fills it via height:100% rather than the fixed px height mapEmbed()'s other
   callers use — !important beats the inline style="height:...px" mapEmbed() always sets */
.svc-map-card .map-embed { height: 100% !important; min-height: 480px; margin-top: 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-card { min-height: 0; }
  .svc-map-card .map-embed { height: 360px !important; min-height: 0; 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-row { display: flex; flex-wrap: wrap; gap: 10px; }
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; }
/* Careers is a lower-priority footer CTA than the Client Hub portal — same
   pill shape, muted neutral border so it doesn't compete for attention. */
footer .footer-hub.alt { border-color: var(--line); color: var(--muted); }
footer .footer-hub.alt:hover { background: var(--cream); color: var(--primary); }

/* 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: 800; color: var(--primary); font-size: 19px; 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: hero is already single-column on desktop, just tighten padding */
@media (max-width: 980px) {
  .home-hero .wrap { padding-top: 16px; padding-bottom: 26px; }
  .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; }
}

/* calc scroll-to-top lands below the sticky nav */
#funnel { scroll-margin-top: 80px; }
/* responsive calc heading (opts.classic only — see quoteFunnel()): full on web, short on mobile */
.fh-sm { display: none; }
/* mobile: centered logo + hamburger (no box) + short heading */
@media (max-width: 980px) {
  .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); }

/* Location pages: "local conditions" + "timing" side by side in one section (2026-09-30) */
.loc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.loc-pair.single { grid-template-columns: 1fr; }
.loc-pair .feat { margin-bottom: 16px; }
.loc-pair .feat h4 { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.loc-pair .feat p { color: #40505d; font-size: 15px; margin: 0; }
@media (max-width: 820px) { .loc-pair { grid-template-columns: 1fr; gap: 36px; } }

/* Thumbs-up mascot sitting in the bottom-right of every CTA band (2026-09-30) */
.cta-band { position: relative; overflow: hidden; }
.cta-band .cta-mascot { position: absolute; right: 5%; bottom: 0; height: clamp(150px, 88%, 260px); width: auto; pointer-events: none; }
@media (max-width: 1100px) { .cta-band .cta-mascot { display: none; } }


/* CCBB-style split homepage hero (2026-09-30): copy left, price card right */
.hero.split .hero-shade { background: linear-gradient(100deg, rgba(20,24,28,.74) 0%, rgba(20,24,28,.7) 32%, rgba(20,24,28,.22) 62%, rgba(20,24,28,.06) 100%); }
.hero.split h1, .hero.split .kicker, .hero.split p.lede { text-shadow: 0 2px 12px rgba(0,0,0,.5); text-align: left; }
.hero.split .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center;
  text-align: left; max-width: 1200px; padding-top: 72px; padding-bottom: 80px; }
.hero.split h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; margin: 0; }
@media (min-width: 981px) and (max-width: 1300px) { .hero.split h1 { font-size: clamp(27px, 3.4vw, 40px); } }
.hero.split .kicker { font-weight: 800; color: #fff; margin: 18px 0 8px; font-size: 14.5px; text-transform: uppercase; letter-spacing: .08em; }
.hero.split p.lede { color: #dbe3e9; max-width: 520px; font-size: 16.5px; margin: 0; }
.hero.split .funnel { margin: 0; max-width: none; }
.hero.split .funnel-card.step0 { background: #fff; padding: 32px 30px; box-shadow: 0 18px 50px rgba(0,0,0,.35); border-radius: 16px; }
.hero.split .funnel-card.step0 .addr-row input { border: 2px solid var(--line); box-shadow: none; }
.hero.split .funnel-card h3 { color: var(--primary); }
@media (max-width: 980px) {
  .hero.split .wrap { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; padding-bottom: 26px; align-items: stretch; }
  .hero.split .hero-left { display: contents; }
  .hero.split h1 { order: 1; text-align: center; }
  .hero.split .kicker { order: 2; text-align: center; margin: 0; }
  .hero.split .funnel { order: 3; }
  .hero.split p.lede { order: 4; text-align: center; margin-inline: auto; }
  .hero.split .funnel-card.step0 { padding: 20px 18px; }
}

/* Hero price card in the CCBB hard-offset style (2026-09-30): ink border, flat offset
   shadow, squared uppercase button with the same border + shadow. Hero-scoped only. */
.hero.split .funnel-card, .hero.split .funnel-card.step0 {
  border: 2.5px solid var(--ink, #1c2228); border-radius: 16px; box-shadow: 7px 7px 0 var(--ink, #1c2228); padding: 32px 30px; }
.hero.split .funnel-card h3 { font-size: 24px; font-weight: 800; }
.hero.split .funnel-card .fsub { font-size: 15px; margin: 8px 0 18px; }
.hero.split .funnel-card .addr-row input, .hero.split .funnel-card.step0 .addr-row input {
  border: 2.5px solid #dcdad0; border-radius: 8px; padding: 14px 16px; font-size: 16px; box-shadow: none; }
.hero.split .funnel-card .addr-row .btn, .hero.split .funnel-card #f-next {
  border: 2.5px solid var(--ink, #1c2228); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink, #1c2228);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 800; font-size: 15.5px; padding: 14px 24px; }
.hero.split .funnel-card .addr-row .btn:hover, .hero.split .funnel-card #f-next:hover {
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink, #1c2228); }
.hero.split .funnel-card .addr-row .btn:active, .hero.split .funnel-card #f-next:active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink, #1c2228); }
.hero.split .funnel-card .fine { font-size: 14px; color: #9aa7b1; margin-top: 16px; }

/* step 0: the empty status line + empty bottom nav row were adding dead space under "No calls…" */
.funnel-card.step0 #f-nav, .funnel-card.step0 .f-status { display: none; }
.hero.split .funnel-card.step0 { padding: 30px 30px 24px; }
.hero.split .funnel-card.step0 .fine { margin-top: 14px; margin-bottom: 0; }

/* Desktop nav as a 3-column grid (2026-09-30): the logo is centered in the space between the
   left edge and the start of the links; the links sit centered; phone + CTA hug the right. */
@media (min-width: 981px) {
  .nav .wrap { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); gap: 24px; }
  .nav .nav-menu { display: contents; }
  .nav .brand { justify-self: center; margin: 0; }
  .nav .nav-ctas { justify-self: end; }
  .nav .nav-menu .links { margin: 0; }
}
@media (min-width: 981px) and (max-width: 1240px) { .nav .nav-call { display: none; } }

/* Four-photo hero loop (2026-09-30): 6s per slide, 24s cycle -- the 7-slide keyframes above left a
   12s gap with only 5 slides, which showed the bare red background. */
.hero-slides.four .slide { animation-name: kenburns4; animation-duration: 24s; }
.hero-slides.four .slide:nth-child(2) { animation-delay: 6s; }
.hero-slides.four .slide:nth-child(3) { animation-delay: 12s; }
.hero-slides.four .slide:nth-child(4) { animation-delay: 18s; }
@keyframes kenburns4 {
  0% { opacity: 0; transform: scale(1); }
  3% { opacity: 1; }
  25% { opacity: 1; }
  29% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1); }
}
/* Location-page condition/timing items as cards so the section reads fuller */
.loc-pair .feat { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 18px 20px; margin-bottom: 14px; }

/* InstantMowingQuote embed (2026-09-30) -- sits in a white card; the widget resizes its own iframe */
.imq-card { background: #fff; border: 2.5px solid var(--ink, #22303c); border-radius: 16px; box-shadow: 7px 7px 0 var(--ink, #22303c);
  padding: 22px 22px 14px; color: var(--ink); }
.hero.split .imq-card { align-self: center; }
.imq-card.imq-contact { box-shadow: none; border: none; padding: 0; }

/* plain request-an-estimate form in the landscape / clean-up service-page heroes (2026-10-01) */
.hero-form-card { background: #fff; color: var(--ink); border: 2.5px solid var(--ink, #22303c); border-radius: 16px;
  box-shadow: 7px 7px 0 var(--ink, #22303c); padding: 26px 26px 22px; }
.hero-form-card h3 { color: var(--primary); font-size: 22px; font-weight: 800; margin-bottom: 14px; text-align: center; }

.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.hero-video.on { opacity: 1; }
.hero-form-card.form-card { padding: 22px 26px 20px; }
.hero-form-card label { margin: 10px 0 4px; }
.hero-form-card .fine-print { color: var(--muted); font-size: 11.5px; }
.hero-form-card textarea { min-height: 70px; }