/* EETT — "Minimal / Editorial" visual system. Sibling template to ABBA
   (site-template) and CCBB (site-template-ccbb): same HTML/markup contract
   (build.cjs and templates.cjs are near-identical to ABBA's — see this
   repo's CLAUDE.md), a third distinct look. Colors below are PLACEHOLDER —
   replaced with the client's real brand colors via scripts/scaffold.cjs
   (same mechanism as ABBA/CCBB — it regex-replaces the 6 hex lines below by
   variable name, so don't change those 6 declarations' shape: `--name: #hex;`). */

: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: #2c4a28;
  --primary-dark: #233b20;
  --primary-darker: #1a2c18;
  --accent: #5da130;
  --accent-dark: #4c8427;
  --accent-tint: #eff6ea;
  --cream: #f2efe8;
  --paper: #faf9f6;
  --ink: #191b1c;
  --muted: #6f6a62;
  --line: #e5e0d6;
  /* Minimal & Editorial signature: hairline borders and a soft, low, wide
     shadow instead of ABBA's rounded/blurred lift or CCBB's hard offset
     "stamp" shadow — plus a near-square radius. This token swap (and the
     serif display font below) is most of what makes EETT read as a third,
     distinct design system at a glance, with zero markup changes needed
     from ABBA's build.cjs/templates.cjs. */
  --radius: 2px;
  --radius-lg: 3px;
  --shadow: 0 22px 48px rgba(15, 16, 15, .10);
  --shadow-sm: 0 8px 22px rgba(15, 16, 15, .08);
  --border: 1px solid var(--line);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', 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.7; }
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 ---------- */
/* Quiet, editorial buttons: no uppercase, no shadow, no stamp-press — a plain
   filled rectangle (or a thin outline on dark backgrounds) that fades on
   hover instead of lifting. */
.btn { display: inline-block; font-weight: 600; font-size: 14.5px; border-radius: var(--radius);
  padding: 15px 30px; border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  letter-spacing: .01em;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:hover { opacity: .86; }
.btn:active { opacity: .68; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); opacity: 1; }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: #000; opacity: 1; }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); opacity: 1; }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-dark:hover { background: var(--ink); color: #fff; opacity: 1; }

/* ---------- utility top bar ---------- */
.topbar { background: var(--ink); color: rgba(255,255,255,.8); font-size: 12.5px; letter-spacing: .02em; font-weight: 500; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 38px; 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: 11px; letter-spacing: .14em; color: rgba(255,255,255,.55); }
.topbar a { color: #fff; font-weight: 600; }

/* ---------- nav ---------- */
.nav { background: #fff; position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 20px; min-height: 92px; }
.nav .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; flex-shrink: 0; }
.nav .brand img { height: 60px; width: auto; max-width: none; }
.nav .links { display: flex; align-items: center; gap: 26px; }
.nav .links a { color: var(--ink); font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  text-transform: none; text-decoration: none; padding: 6px 1px; position: relative;
  white-space: nowrap; transition: color .15s ease; font-family: var(--font); }
.nav .links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent); transition: right .22s ease; }
.nav .links a:hover, .nav .links a.active { color: var(--accent-dark); }
.nav .links a:hover::after, .nav .links a.active::after { right: 0; }
.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(--ink); color: var(--ink);
  font-size: 22px; line-height: 1; border-radius: var(--radius); 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: var(--radius);
  border: 1px solid var(--line); 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-family: var(--font); font-size: 14.5px; font-weight: 500; padding: 9px 12px; border-radius: var(--radius); border-bottom: none !important; }
.nav .dd-menu a::after { display: none; }
.nav .dd-menu a:hover { background: var(--cream); }

/* ---------- hero (home) ---------- */
/* Magazine-masthead hero: the SAME grid/DOM ABBA uses (hero-slides full-bleed
   photo + hero-shade overlay + .wrap 2-col grid), but hero-shade is a quiet
   gradient wash for legibility (not a colored block or a diagonal cut), text
   sits at the BOTTOM of the frame against a huge photo, and the headline is
   a large serif — the opposite move from CCBB's bold color-block split, with
   zero HTML changes from ABBA. */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--ink); }
.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(180deg, rgba(9,10,9,.10) 0%, rgba(9,10,9,.30) 52%, rgba(9,10,9,.78) 100%); }
.hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero .bg::after { content: ''; position: absolute; inset: 0; background: var(--primary-darker); opacity: .82; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr;
  gap: 48px; align-items: end; padding-top: 110px; padding-bottom: 96px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(38px, 5.6vw, 74px); line-height: 1.05; font-weight: 600; 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(28px, 3.6vw, 44px); }
}
.hero .kicker { font-family: var(--font); font-style: normal; font-weight: 600; color: rgba(255,255,255,.82); margin: 16px 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .18em; }
.hero p.lede { color: rgba(255,255,255,.82); 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,.1); border: 1px solid rgba(255,255,255,.35); color: #fff;
  font-size: 12.5px; font-weight: 500; border-radius: var(--radius); padding: 6px 14px; }
.chip.solid { background: var(--accent); border-color: var(--accent); color: #fff; }

/* instant price card (legacy compact form — quoteFunnel is the one actually used) */
.quote-card { background: #fff; color: var(--ink); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 30px 28px; }
.quote-card .bar { width: 40px; height: 2px; background: var(--accent); border-radius: 1px; margin: 0 auto 16px; }
.quote-card h3 { font-family: var(--font-display); text-align: center; font-size: 23px; font-weight: 600; 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: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px;
  font-size: 14.5px; font-family: inherit; min-width: 0; }
.quote-card input:focus { outline: 1.5px solid var(--accent); border-color: transparent; }
.quote-card .fine { text-align: center; color: #9aa19b; 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: 1px solid var(--line); border-radius: var(--radius); padding: 10px 8px; text-align: center;
  font-weight: 600; 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: 400; color: var(--muted); font-size: 11px; }

/* ---------- trust strip ---------- */
.trust { background: var(--cream); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px; padding: 16px 0; }
.trust li { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.trust li::before { content: '—'; font-weight: 700; color: var(--accent); }

/* ---------- stats band ---------- */
/* A quiet hairline-grid table on ink, not a bright color-block — thin 1px
   dividers formed by the grid gap sitting on a dark field, all-monochrome
   numerals (no accent pop) to keep the accent color rare and deliberate. */
.stats { background: var(--ink); padding: 84px 0; }
.stats .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.14); }
.stat { background: var(--ink); border: none; text-align: center; padding: 38px 18px; }
.stat .value { font-family: var(--font-display); font-size: 46px; font-weight: 600; color: #fff; line-height: 1.1; overflow-wrap: anywhere; }
.stat:nth-child(even) .value { color: #fff; }
.stat .label { font-weight: 500; margin-top: 8px; color: rgba(255,255,255,.68); text-transform: uppercase; font-size: 11.5px; letter-spacing: .1em; }
.stat .sub { color: rgba(255,255,255,.42); font-size: 12px; margin-top: 4px; }

/* ---------- section scaffolding ---------- */
section.band { padding: 96px 0; }
.band.cream { background: var(--cream); }
.band.tint { background: var(--accent-tint); }
/* editorial eyebrow: a short rule + letter-spaced small-caps label, no filled
   background — the classic magazine kicker device, and the one place the
   accent color shows up in nearly every section. */
.eyebrow { display: block; margin: 0 auto 18px; text-align: center; color: var(--accent-dark);
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow::before { content: ''; display: inline-block; width: 26px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 10px; }
.eyebrow.left { margin: 0 0 18px; text-align: left; }
h2.title, h1.title { font-family: var(--font-display); text-align: center; font-size: clamp(34px, 4.4vw, 54px); font-weight: 600; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.14; }
h2.title.left { text-align: left; }
p.sub { text-align: center; color: var(--muted); max-width: 640px; margin: 16px auto 0; font-size: 16px; }
.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: 24px; margin-top: 48px; }
.svc-card { background: #fff; border: var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: block; position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc-card .ph { height: 280px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
/* Photo lives on its own layer so hover can zoom just the image, not the
   badge/label/text sitting on top of it. */
.svc-card .ph-bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .5s ease; }
.svc-card:hover .ph-bg { transform: scale(1.06); }
.svc-card .tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius); }
/* Default state: just the photo + service name, bottom-anchored on a dark gradient
   so it reads on any photo. Hover swaps this for the full description + CTA. */
.svc-card .svc-label { position: relative; z-index: 1; width: 100%; padding: 40px 22px 20px;
  background: linear-gradient(to top, rgba(15,16,15,.88), transparent); color: #fff;
  font-family: var(--font-display); font-size: 20px; font-weight: 600; transition: opacity .4s ease; }
.svc-card:hover .svc-label { opacity: 0; }
/* Hover state: solid ink tint (the photo underneath should still read through
   faintly) with the description centered on top. */
.svc-card .svc-hover { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 28px;
  background: rgba(15, 16, 15, .82);
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.svc-card:hover .svc-hover { opacity: 1; transform: translateY(0); }
.svc-card .svc-hover h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; }
.svc-card .svc-hover p { color: #eee; font-size: 14px; margin: 10px 0 0; }
/* The CTA is a separate link (not nested inside the photo's own <a>) so it can
   point somewhere different — the instant quote calculator, not the service's
   detail page. Sized/positioned to sit where it visually reads as part of the
   hover overlay above. */
.svc-card .svc-cta { position: absolute; left: 50%; bottom: 26px; z-index: 2; transform: translate(-50%, 6px);
  display: inline-block; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px;
  border: none; padding: 10px 22px; border-radius: var(--radius); opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .15s ease; }
.svc-card:hover .svc-cta { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.svc-card .svc-cta:hover { background: var(--accent); color: #fff; }
@media (hover: none) {
  /* Touch devices have no hover — keep the description + CTA reachable without it. */
  .svc-card .svc-hover { position: static; opacity: 1; transform: none; background: #fff; padding: 20px; }
  .svc-card .svc-hover h3 { color: var(--primary); }
  .svc-card .svc-hover p { color: #40453f; }
  .svc-card .svc-label { display: none; }
  .svc-card .svc-cta { position: static; opacity: 1; pointer-events: auto; transform: none; margin: 16px auto 20px; background: var(--ink); color: #fff; }
}

/* ---------- programs (packages/tiers comparison — see CLAUDE.md) ----------
   Minimal/editorial treatment: no bright ribbon pill or colored ring — the
   featured card reads as elevated through a heavier resting shadow, an
   accent top rule, and a slim ink caption strip across the photo instead. */
.prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: start; }
.prog-card { background: #fff; border: var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative;
  transition: transform .2s ease, box-shadow .2s ease; }
.prog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.prog-card.featured { border-top: 3px solid var(--accent); box-shadow: var(--shadow); }
/* Sits INSIDE the card bounds (top: 0, not a negative straddling-the-edge
   offset) — .prog-card has overflow:hidden for the photo's square corners,
   which clips anything positioned outside those bounds. Same bug class as
   .svc-card .svc-flag elsewhere in this project; same fix. */
.prog-ribbon { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: var(--ink); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  padding: 9px 12px; }
.prog-photo { height: 220px; overflow: hidden; }
.prog-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prog-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.prog-badge { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.prog-card.featured .prog-badge { color: var(--accent); }
.prog-name { font-family: var(--font-display); font-size: 25px; font-weight: 600; color: var(--primary); }
.prog-tagline { font-style: italic; color: var(--muted); font-size: 14px; margin-top: 6px; }
.prog-checks { list-style: none; margin: 20px 0 0; }
.prog-checks li { padding-left: 26px; position: relative; margin-bottom: 10px; font-size: 14.5px; font-weight: 500; }
.prog-checks li.yes::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.prog-checks li.no { color: var(--muted); }
.prog-checks li.no::before { content: '—'; position: absolute; left: 0; color: var(--muted); }
.prog-bestfor { border-top: var(--border); padding-top: 16px; margin: 22px 0 20px; }
.prog-bestfor span { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prog-bestfor p { font-size: 13.5px; margin-top: 6px; color: #40443f; }
.prog-body > .btn { margin-top: auto; text-align: center; }
/* .btn-outline is styled for a dark background elsewhere (white text) — on
   this white card it needs the light-background treatment instead, without
   changing the shared markup contract (every template's programsGrid()
   emits the same btn-outline class for a non-featured card's CTA). */
.prog-card .btn-outline { color: var(--ink); border-color: var(--ink); }
.prog-card .btn-outline:hover { background: var(--ink); color: #fff; opacity: 1; }
@media (max-width: 980px) {
  .prog-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* ---------- CTA bands ---------- */
.cta-band { background: var(--primary-darker); color: #fff; text-align: center; padding: 88px 0;
  border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.cta-band .eyebrow { color: var(--accent); }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 600; line-height: 1.1; }
/* italic serif emphasis instead of a color pop — the accent stays rare. */
.cta-band h2 em { font-style: italic; color: inherit; font-weight: 500; }
.cta-band p { color: rgba(255,255,255,.72); max-width: 620px; margin: 16px auto 0; }
.cta-band .btns { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.cta-band.green { background: var(--accent-dark); border-color: rgba(255,255,255,.2); }
.cta-band.green h2 { color: #fff; }
.cta-band.green p { color: rgba(255,255,255,.82); }

.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: var(--primary-darker); opacity: .82; }
.band-photo > .wrap { position: relative; z-index: 1; }
.band-photo.lighter::before { opacity: .68; }
/* light-text: any .band-photo section whose own text needs to sit directly
   on the dark overlay (not inside a white card) — title/sub flip to light,
   the featured-review quote flips to light too. */
.band-photo.light-text .title { color: #fff; }
.band-photo.light-text .sub { color: rgba(255,255,255,.78); }
.band-photo.light-text .featured-review blockquote { color: #fff; }
.band-photo.light-text .featured-review cite { color: rgba(255,255,255,.78); }

/* ---------- why / reputation (bento layout — dormant until a build.cjs
   section uses it, kept ready/styled the same way trustStrip/statsBand stay
   defined-but-unused elsewhere in this template family) ---------- */
.bento-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: stretch; margin-top: 40px; }
.bento-card { background: var(--ink); color: #fff;
  border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 44px;
  display: flex; flex-direction: column; justify-content: center; }
.bento-card .eyebrow { margin-left: 0; color: var(--accent); }
.bento-card h2 { color: #fff; margin-top: 6px; }
.bento-card p { color: rgba(255,255,255,.78); margin-top: 18px; font-size: 15.5px; }
.bento-card .btn { margin-top: 28px; align-self: flex-start; }
.bento-photo { position: relative; min-height: 0; }
.bento-photo img { width: 100%; height: 100%; object-fit: cover; border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.bento-feats.val-grid { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
@media (max-width: 980px) {
  .bento-top { grid-template-columns: 1fr; }
  .bento-photo { min-height: 260px; }
  .bento-feats.val-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) { .bento-feats.val-grid { grid-template-columns: 1fr; } }

/* ---------- why / reputation ---------- */
.why { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; margin-top: 44px; }
.why .checks { list-style: none; margin: 22px 0; }
.why .checks li { padding-left: 28px; position: relative; margin-bottom: 12px; font-weight: 500; }
.why .checks li::before { content: '—'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.why .photo { position: relative; }
.why .photo img { border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.rating-badge { position: absolute; left: -18px; bottom: -18px; background: #fff; border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.rating-badge .num { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--ink); }
.rating-badge .stars { color: var(--accent); 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: 28px; }
.feat { background: #fff; border: var(--border); border-radius: var(--radius); padding: 18px 20px; }
.feat h4 { font-family: var(--font-display); font-size: 15.5px; color: var(--primary); font-weight: 600; }
.feat p { color: var(--muted); font-size: 13px; margin-top: 5px; }

/* ---------- reviews ---------- */
.rev-meta { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px;
  color: var(--muted); font-size: 14px; font-weight: 500; }
.rev-meta .stars { color: var(--accent); letter-spacing: 2px; }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.rev-card { background: #fff; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px;
  transition: transform .2s ease, box-shadow .2s ease; }
.rev-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rev-card .head { display: flex; align-items: center; gap: 12px; }
.rev-card .avatar { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--line); color: #fff; font-weight: 600;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.rev-card .who { font-weight: 600; font-size: 14.5px; }
.rev-card .src { font-size: 12px; color: var(--muted); }
.rev-card .stars { color: var(--accent); letter-spacing: 2.5px; margin: 12px 0 8px; font-size: 14px; }
.rev-card p { font-size: 14px; color: #40443f; }
.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: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 20px 22px; }
.ticker-card .stars { color: var(--accent); letter-spacing: 2px; font-size: 13px; }
.ticker-card p { font-size: 13.5px; color: #40443f; margin: 10px 0; }
.ticker-card .who { font-size: 12.5px; font-weight: 600; 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: var(--accent); letter-spacing: 3px; font-size: 20px; margin: 18px 0; }
.featured-review blockquote { font-family: var(--font-display); font-size: 26px; line-height: 1.42; font-weight: 600; font-style: italic; color: var(--primary); margin: 0; }
.featured-review cite { display: block; margin-top: 18px; font-size: 14px; font-weight: 600; 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: #40443f; text-align: center; }
.featured-strip .snip b { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) { .featured-review blockquote { font-size: 20px; } .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: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.cta-photo .txt .eyebrow { margin-left: 0; }
.cta-photo .txt h2 { margin: 6px 0 12px; }
.cta-photo .txt p { color: #40443f; 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: 80px 0; }
.communities .eyebrow { color: var(--accent); }
/* homepage "Jobs We're Proud Of" — photo band behind the gallery grid */
.home-work { padding: 52px 0; }                    /* compact: tighter than the default 96px band */
.home-work .eyebrow { color: var(--accent); }
.home-work .title { color: #fff; }
.home-work .sub { color: rgba(255,255,255,.78); }
.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 { font-family: var(--font-display); text-align: center; font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; }
.town-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 40px; }
.town-card { position: relative; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); 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(15,16,15,.1), rgba(15,16,15,.9)); }
.town-card span { position: relative; z-index: 1; padding: 12px 14px; font-weight: 600; font-size: 14px; color: #fff; }

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

/* full-screen photo viewer (opened from the gallery grid) */
.lb-overlay { position: fixed; inset: 0; z-index: 90; isolation: isolate;
  background: rgba(9, 10, 9, .96); 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: 1px solid rgba(255,255,255,.3); border-radius: var(--radius); }
.lb-close, .lb-nav { position: absolute; border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius); background: rgba(255,255,255,.08);
  color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s ease; }
.lb-close:hover, .lb-nav:hover { background: #fff; color: var(--ink); }
.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: var(--primary-darker); opacity: .8; }
.page-hero .wrap { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.page-hero.center .wrap { text-align: center; }
.page-hero .badge { display: inline-block; color: rgba(255,255,255,.85); font-size: 11.5px;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; line-height: 1.08; max-width: 880px; }
.page-hero h1 .turf { font-style: italic; color: inherit; }
.page-hero.center h1 { margin: 0 auto; }
.page-hero p { color: rgba(255,255,255,.78); margin-top: 14px; 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: 26px; 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: var(--border); 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: #40443f; 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 var(--accent-tint); color: var(--accent-dark); }

.includes { background: var(--cream); border: var(--border); border-radius: var(--radius-lg); padding: 44px; margin-top: 58px; }
.includes h3 { font-family: var(--font-display); font-size: 25px; font-weight: 600; color: var(--primary); margin-bottom: 24px; }
.inc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.inc { background: #fff; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; font-size: 14px; }
.inc::before { content: '—'; display: inline-flex; width: 20px;
  color: var(--accent); font-weight: 700; font-size: 14px;
  align-items: center; justify-content: center; margin-right: 6px; }
/* 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: 600; color: var(--primary); text-decoration: none; box-shadow: none; }
.hood-index a.inc::before { width: 16px; font-size: 12px; margin-right: 4px; flex: none; }
.hood-index a.inc:hover { color: var(--accent-dark); box-shadow: var(--shadow-sm); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 44px; }
.step { background: #fff; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 28px; position: relative; }
.step .n { position: absolute; top: -14px; left: 24px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 12.5px; border-radius: var(--radius); padding: 4px 12px; }
.step h4 { font-family: var(--font-display); color: var(--primary); font-size: 18px; font-weight: 600; margin: 12px 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: 1px solid var(--ink); color: var(--ink); font-weight: 600; font-size: 14px;
  border-radius: var(--radius); padding: 10px 20px; text-decoration: none !important; }
.pill:hover { background: var(--ink); color: #fff; }
.pill.solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill.solid:hover { background: var(--accent); border-color: var(--accent); }

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

.app-rows { display: grid; gap: 26px; margin-top: 40px; }
.app-row { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0; align-items: stretch;
  background: #fff; border: var(--border); 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: 28px 32px; align-self: center; }
.app-row .txt h4 { font-family: var(--font-display); color: var(--primary); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.app-row .txt p { color: #40443f; 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: 22px; margin-top: 44px; }
.val { background: #fff; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; }
.val .icon { width: 46px; height: 46px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; }
.val .icon svg { width: 22px; height: 22px; color: var(--accent-dark); }
.val h4 { font-family: var(--font-display); color: var(--primary); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.val p { color: var(--muted); font-size: 14px; }

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

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

.help-box { background: var(--cream); border: var(--border); border-radius: var(--radius-lg); text-align: center; padding: 44px;
  max-width: 780px; margin: 48px auto 0; }
.help-box h3 { font-family: var(--font-display); color: var(--primary); font-size: 23px; font-weight: 600; }
.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: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 36px; }
.form-card h3 { font-family: var(--font-display); font-size: 25px; font-weight: 600; 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: 1px solid var(--line);
  border-radius: var(--radius); 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: 1.5px 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: 20px; }
.info-card { background: #fff; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; }
.info-card h4 { font-family: var(--font-display); color: var(--primary); font-size: 16px; font-weight: 600; 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: 600; }
.info-card.areas li::before { content: '—'; color: var(--accent); font-weight: 700; }

/* ---------- location pages ---------- */
.cta-card { background: var(--ink); border: var(--border); color: #fff; text-align: center;
  border-radius: var(--radius-lg); padding: 50px 36px; margin-top: 58px; }
.cta-card h3 { font-family: var(--font-display); font-size: clamp(25px, 3vw, 33px); font-weight: 600; }
.cta-card p { color: rgba(255,255,255,.78); 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: 22px; margin-top: 44px; }
.loc-card { position: relative; border: var(--border); 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(15,16,15,.05), rgba(15,16,15,.92)); }
.loc-card .body { position: relative; z-index: 1; padding: 20px; color: #fff; }
.loc-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.loc-card p { font-size: 13.5px; color: rgba(255,255,255,.78); margin: 4px 0 10px; }
.loc-card .more { color: #fff; font-weight: 600; font-size: 13.5px; text-decoration: underline; }
@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 var(--line);
  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: 600;
  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: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 18px; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
  font-family: inherit; box-shadow: none; }
.tier-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tier-card.selected { background: var(--accent-tint); box-shadow: none; border-color: var(--accent); }
.tier-card .flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ink);
  color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius); padding: 3px 12px; white-space: nowrap; }
.tier-card .t-name { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tier-card .t-range { font-family: var(--font-display); font-weight: 600; color: var(--primary); margin-top: 4px; font-size: 14.5px; }
.tier-card .t-price { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--primary); margin-top: 10px; }
.tier-card .t-price small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tier-card .t-unit { color: var(--muted); font-size: 12px; }
.estimate-panel { background: #fff; border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 36px; margin-top: 28px; }
.estimate-panel h3 { font-family: var(--font-display); color: var(--primary); font-size: 22px; font-weight: 600; }
.est-headline { background: var(--accent-tint); border-radius: var(--radius); padding: 13px 18px; margin-top: 16px; text-align: center; font-size: 15px; font-weight: 500; color: var(--primary); }
.est-headline b { font-size: 20px; font-weight: 700; 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: 600; font-size: 15px; }
.est-row .svc small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.est-row .price { font-family: var(--font-display); font-weight: 600; color: var(--primary); font-size: 18px; white-space: nowrap; }
.est-row .price small { font-weight: 500; color: var(--muted); font-size: 12px; }
.est-note { background: var(--accent-tint); border-radius: var(--radius); padding: 14px 18px; margin-top: 18px;
  color: #5a3a2c; 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: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 34px 32px; }
.funnel-card .bar { width: 40px; height: 2px; background: var(--accent); border-radius: 1px; margin: 0 auto 18px; }
.funnel-card h3 { font-family: var(--font-display); color: var(--primary); font-size: 23px; font-weight: 600; 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: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); 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(--cream); }
.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: #9aa19b; 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: #9aa19b; font-size: 11px; line-height: 1.45; margin-top: 12px; }
.fine-print a { color: #82887f; text-decoration: underline; }
/* big, inviting tap-anywhere opt-in card (two-tier: this = marketing opt-in) */
.sms-optin { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px 9px; margin-top: 12px; text-align: left; }
.sms-optin .sms-head { color: var(--ink); font-weight: 600; 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: var(--radius); padding: 9px 12px; cursor: pointer; border: 1px solid transparent; transition: border-color .12s ease; }
.sms-optin .sms-pill:has(input:checked) { border-color: var(--ink); }
.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: 600; 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: var(--radius); border: 1px solid var(--line); background: #fff; position: relative; transition: background .12s ease, border-color .12s ease; }
.sms-optin .sms-pill input:checked ~ .sms-circle { background: var(--ink); border-color: var(--ink); }
.sms-optin .sms-pill input:checked ~ .sms-circle::after { content: ''; position: absolute; inset: 4px; border-radius: 1px; background: #fff; }
.sms-optin .sms-fine { color: rgba(25,27,28,.7); 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: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px;
  font-size: 15px; font-family: inherit; }
.funnel-card input:focus { outline: 1.5px 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: 600; 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: 600; color: #fff; background: #a6402c; border: none; padding: 9px 14px; border-radius: var(--radius); 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-radius: var(--radius); padding: 14px 16px; margin: 4px 0 14px; }
.pkg-banner-badge { display: inline-block; background: var(--ink); color: #fff; font-size: 10.5px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius); margin-bottom: 7px; }
.pkg-banner-name { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; 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: 600; 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: 30px; }
.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: 600; 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: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.fq-head { background: var(--ink); color: #fff; font-family: var(--font-display); font-size: clamp(20px, 4vw, 26px); font-weight: 600; padding: 24px 28px; text-align: center; }
.fq-body { padding: 28px 28px 32px; }
.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: 1px solid var(--line); border-radius: var(--radius); 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: 1.5px 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 { font-family: var(--font-display); color: var(--primary); font-size: 21px; font-weight: 600; margin: 30px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: #40443f; margin: 0 0 12px; font-size: 15px; line-height: 1.75; }
.legal ul { margin: 0 0 14px; padding-left: 20px; color: #40443f; }
.legal li { margin: 6px 0; font-size: 15px; line-height: 1.6; }

/* ---------- calculator embed ---------- */
.calc-frame { border: var(--border); width: 100%; height: calc(100vh - 130px); min-height: 760px; max-height: 1200px;
  border-radius: var(--radius-lg); 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: var(--radius); 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: #f7ecd8; color: #7a5d1b; border: 1px solid #e7d3a5;
  font-size: 12.5px; font-weight: 600; border-radius: var(--radius); 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 { font-family: var(--font-display); color: var(--primary); font-size: 27px; font-weight: 600; }
.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: var(--radius); }
.tl-row .dot { width: 24px; height: 24px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; 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); }
.tl-row .nm { font-weight: 600; 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: 600; text-transform: uppercase; letter-spacing: .06em;
  border-radius: var(--radius); padding: 3px 10px; }
.tl-row.done .st { background: var(--accent-tint); color: var(--accent-dark); }
.tl-row.next .st { background: var(--cream); 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: 600; padding-top: 2px; }
@media (max-width: 980px) { .hub-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,.68); border-top: 1px solid rgba(255,255,255,.14); }
footer .top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding: 48px 0 26px; }
footer .brand img { height: 48px; width: auto; margin-bottom: 14px; }
footer p { font-size: 13.5px; }
footer h5 { font-family: var(--font-display); color: #fff; font-size: 13px; letter-spacing: .06em; font-weight: 600; margin-bottom: 16px; }
footer ul { list-style: none; }
footer li { margin-bottom: 9px; }
/* 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: rgba(255,255,255,.68); font-size: 14px; }
footer a:hover { color: #fff; }
footer .contact-lines li { display: flex; gap: 8px; font-size: 13.5px; }
footer .nap-name { font-weight: 600; color: #fff; }
footer .brand .map-embed { max-width: 360px; margin-top: 16px; }
footer .footer-dir { display: inline-block; margin-top: 10px; font-weight: 600; color: #fff; font-size: 13.5px; text-decoration: underline; }
footer .footer-dir:hover { color: var(--accent); }
footer .footer-social { display: flex; gap: 14px; margin-top: 14px; }
footer .footer-social a { display: inline-flex; color: rgba(255,255,255,.68); }
footer .footer-social a:hover { color: #fff; }
footer .footer-all { display: inline-block; margin-top: 6px; font-weight: 600; color: #fff; text-decoration: underline; }
footer .footer-all:hover { color: var(--accent); }
footer .bottom { border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 20px 0; font-size: 12.5px; color: rgba(255,255,255,.5); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap, .why, .svc-intro, .contact-grid { grid-template-columns: 1fr; }
  .svc-intro img { height: auto; 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: 64px; }  /* phones keep the compact bar; 92px 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; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    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 .links a::after { display: none; }
  .nav.open .dd > a { display: block; }  /* even row height for Services/Service Areas */
  .nav.open .links a { border-radius: var(--radius); }
  .nav.open .links a:hover, .nav.open .links a:active { background: var(--cream); }
  .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 { grid-template-columns: 1fr 1fr; }
  .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 — 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: 1px; 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: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 13px; display: grid; place-items: center; }
.fprog.active .fp-dot { background: var(--ink); border-color: var(--ink); 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: 700; }
.fp-l { font-size: 10.5px; font-weight: 600; 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-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--primary); padding: 7px 0; letter-spacing: -.01em; }
.fpanel > .fsub { margin: 4px 2px 8px; }

/* recommended-package card */
.pkg-card { border: var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.pkg-top { background: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; }
.pkg-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); }
.pkg-badge { flex: none; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; padding: 5px 11px; border-radius: var(--radius); }
.pkg-body { background: var(--ink); color: rgba(255,255,255,.82); padding: 22px 20px 20px; }
.pkg-lead { color: var(--accent); font-weight: 600; 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: 20px; height: 20px; border-radius: var(--radius); background: var(--accent); color: #fff; font-weight: 700; 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: 600; }
.pkg-list .pl-t small { color: rgba(255,255,255,.55); font-size: 12.5px; line-height: 1.35; }
.pkg-div { color: rgba(255,255,255,.4); font-size: 10.5px; font-weight: 600; 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(255,255,255,.06); border-radius: var(--radius); 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: 600; margin-top: 8px; }
.pp-num { font-family: var(--font-display); font-size: 56px; font-weight: 600; letter-spacing: -.02em; }
.pp-per { font-size: 12px; font-weight: 600; 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: 600; font-size: 13px; line-height: 1.3; }
.pp-stars { color: var(--accent); font-weight: 600; font-size: 12.5px; margin-top: 4px; }
.pp-note { color: rgba(255,255,255,.55); 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; }
.pkg-cta:hover { background: var(--accent-dark); }
.pkg-nc { text-align: center; color: rgba(255,255,255,.4); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; margin-top: 13px; }
.pkg-alt { text-align: center; margin-top: 15px; }
.pkg-alt a { color: var(--primary); font-weight: 600; font-size: 13.5px; text-decoration: underline; }

/* review / confirm step */
.sum-card { border: 1px solid var(--line); border-radius: var(--radius); 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: #8f8a80; font-size: 11.5px; font-weight: 600; 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: 600; }
.sum-row .sv { flex: 1 1 auto; color: var(--primary); font-weight: 600; font-size: 15px; text-align: right; }
.sum-row .sv-price { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.sum-row .sv small { display: block; color: #8f8a80; font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.sum-row .row-del { flex: none; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600;
  line-height: 1; color: #a6402c; padding: 4px 2px 4px 8px; opacity: .65; transition: opacity .15s; }
.sum-row .row-del:hover { opacity: 1; }
.sum-note { color: #8f8a80; font-size: 11.5px; font-style: italic; margin: 6px 2px 0; line-height: 1.3; }

.addon-card { background: var(--accent-tint); border-radius: var(--radius); 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 rgba(166,64,44,.14); 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: 20px; height: 20px; border-radius: var(--radius); border: 1px solid var(--line); 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: 12px; font-weight: 700; }
.addon-card .addon-opt .an { flex: 1; color: var(--primary); font-weight: 600; font-size: 14.5px; }
.addon-card .addon-opt .ap { flex: none; color: var(--primary); font-weight: 600; font-size: 14px; white-space: nowrap; }
.addon-card-badge { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 6px; }

.review-card { background: var(--accent-tint); border-radius: var(--radius); padding: 16px 18px; margin-top: 16px; }
.review-h { font-weight: 600; 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: 700; 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: 20px; height: 20px; margin-top: 1px; border-radius: var(--radius); border: 1px 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: 12px; font-weight: 700; }
.funnel-card .auth .auth-t { flex: 1; color: var(--primary); font-weight: 500; font-size: 13.5px; line-height: 1.45; }

/* subtle footer credit */
.built-by { text-align: right; font-size: 11px; color: rgba(255,255,255,.36); letter-spacing: .02em; padding-bottom: 16px; }
.built-by a { color: rgba(255,255,255,.5); text-decoration: none; }
.built-by a:hover { color: var(--accent); 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) ===== */
.band.svc-area { background: 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: var(--border); border-radius: var(--radius-lg); 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(--ink); color: #fff; font-weight: 600; letter-spacing: .01em;
  font-size: 15px; border: none; border-radius: var(--radius); padding: 14px 18px;
  transition: background .18s ease; }
.area-btn:hover { background: var(--accent); }
@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; }
}

/* ===== service-area map (topbar link + area overlay) ===== */
/* `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: var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.area-map .map-embed { width: 100%; display: block; border: 0; box-shadow: none; margin-top: 0; }
.area-overlay { position: absolute; top: 18px; left: 18px; background: rgba(255,255,255,.97); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); max-width: 250px; }
.area-overlay .ao-h { font-family: var(--font-display); font-weight: 600; 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: 500; }
.area-overlay li:first-child { color: var(--accent-dark); font-weight: 600; }
.area-overlay .ao-more { color: var(--muted); font-weight: 400; font-style: italic; }
.area-overlay .ao-cta { color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: underline; }
@media (max-width: 680px) {
  .area-overlay { position: static; max-width: none; border-radius: 0; box-shadow: none; border: none; border-top: 1px solid var(--line); 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: var(--radius); border: 1px solid var(--line); 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: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; text-align: left; font-family: inherit; transition: box-shadow .15s ease, border-color .15s ease; box-shadow: none; }
.pk-card:hover { box-shadow: var(--shadow-sm); }
.pk-card.pop { border-color: var(--accent); }
.pk-flag { position: absolute; top: -11px; right: 14px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: var(--radius); }
.pk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pk-name { font-family: var(--font-display); font-weight: 600; color: var(--primary); font-size: 16px; }
.pk-price { font-family: var(--font-display); font-weight: 600; color: var(--accent-dark); font-size: 22px; line-height: 1; white-space: nowrap; }
.pk-per { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.pk-feats { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; margin-top: 6px; line-height: 1.4; }
.pk-pick { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; 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: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius); color: #fff; font-weight: 500; font-size: 13.5px; }
footer .footer-hub:hover { background: #fff; color: var(--ink); }

/* 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: 600; 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: var(--radius); } }

/* package selection (pick then Continue) */
.pk-card.sel { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.pk-choose { display: inline-block; margin-top: 10px; }
.pk-choose::before { content: 'Tap to choose'; color: var(--muted); font-weight: 600; 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. 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 --
   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. 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 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; }

/* 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: 40px 0; }
  .cta-band { padding: 52px 0; }
  .cta-band .btns { margin-top: 22px; }
  .communities { padding: 44px 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: 26px 0 12px; }
  footer .top > .brand { grid-column: 1 / -1; }
  footer .brand img { height: 40px; 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 0; }
  .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: var(--cream); }
.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: var(--radius); 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 { font-family: var(--font-display); color: var(--accent-dark); font-size: 21px; font-weight: 600; 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: var(--radius);
  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: #a6402c; }
.foos-meanwhile { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.foos-meanwhile a { font-weight: 600; }
.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); }

/* ============================================================================
   Commercial concept — components carried over from the client's other site
   build, restyled for this template's tokens (2px radius, hairline borders,
   wide-low shadow) instead of ABBA's soft pill + blur language.
   ========================================================================= */

/* Service card hover-reveal. One crossfade, not a switch: the base <h3> fades
   OUT as a translucent brand panel fades IN over the still-visible photo. An
   earlier version ghosted (both titles on screen at once) because the panel
   sat over an always-visible title — keep the opacity handoff symmetric. */
.svc-card .reveal { position: absolute; inset: 0; z-index: 3; background: rgba(44, 74, 40, .72); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 26px; opacity: 0; transition: opacity .35s ease; }
.svc-card:hover .reveal { opacity: 1; }
.svc-card .reveal .r-title { font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: .01em; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.svc-card .reveal p { color: #eef2e8; font-size: 13.5px; margin: 10px 0 0; text-shadow: 0 1px 6px rgba(0,0,0,.45); }

/* The "All Services" tile: one flat panel, so it needs no hover-reveal. */
.svc-card.all-services { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px; position: relative; overflow: hidden;
  background-size: cover; background-position: center; color: #fff;
  transition: transform .18s ease; }
.svc-card.all-services::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(44,74,40,.90), rgba(18,28,18,.94)); z-index: 0; }
.svc-card.all-services:hover { transform: translateY(-3px); }
.svc-card.all-services .r-title, .svc-card.all-services p, .svc-card.all-services .more { position: relative; z-index: 1; }
.svc-card.all-services .r-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.svc-card.all-services p { color: #dfe4dc; font-size: 13.5px; margin: 10px 0 0; }

/* "Why us" bento: a solid intro panel beside a photo, then an icon strip. */
.why-band { max-width: 100%; }
.why-bento { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: stretch; margin-top: 28px; }
.why-card { background: var(--primary); color: #fff; border-radius: var(--radius);
  padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.why-card .eyebrow { color: var(--accent); }
.why-card h2.title { color: #fff; }
.why-card p { color: #d7ddd4; margin-top: 16px; font-size: 15px; line-height: 1.65; }
.why-card .btn { align-self: flex-start; margin-top: 26px; }
.why-photo { border-radius: var(--radius); overflow: hidden; min-height: 260px; contain: paint; }
.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: 24px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); }
.why-ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius); 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: 700; line-height: 1.3; }
.why-item p { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.5; }

@media (max-width: 980px) {
  .why-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .why-bento { grid-template-columns: 1fr; margin-top: 20px; gap: 18px; }
  .why-card { padding: 34px 26px; }
}
@media (max-width: 620px) {
  .why-strip { grid-template-columns: 1fr; }
}

/* Hero conversion card. Replaces the residential master's instant-price
   calculator panel — same slot in the hero grid, but it sells a walkthrough
   instead of computing a number nobody has stood on the property to verify. */
.hero-assess { padding: 34px 32px; }
.hero-assess h3 { font-family: var(--font-display); font-size: 27px; font-weight: 600;
  color: var(--primary); line-height: 1.2; text-align: left; }
.hero-assess .qc-sub { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 10px; }
.hero-assess .qc-points { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.hero-assess .qc-points li { position: relative; padding: 11px 0 11px 26px; font-size: 13.5px;
  color: var(--ink); border-bottom: 1px solid var(--line); line-height: 1.5; }
.hero-assess .qc-points li::before { content: '—'; position: absolute; left: 0; top: 11px;
  color: var(--accent); font-weight: 700; }
.hero-assess .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-assess .qc-fine { font-size: 11.5px; color: var(--muted); margin-top: 16px; line-height: 1.5; }
@media (max-width: 760px) {
  .hero-assess { padding: 26px 22px; }
  .hero-assess h3 { font-size: 23px; }
  .hero-assess .btns .btn { width: 100%; justify-content: center; }
}

/* The Top Shelf Standard — numbered phase list. Deliberately heavier and
   slower than a feature grid: this page is the one a buyer reads properly. */
.std-list { margin-top: 36px; display: flex; flex-direction: column; gap: 0; }
.std-phase { display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start;
  padding: 36px 0; border-top: 1px solid var(--line); }
.std-phase:last-child { border-bottom: 1px solid var(--line); }
.std-n { font-family: var(--font-display); font-size: 46px; font-weight: 600; line-height: 1;
  color: var(--accent); }
.std-body h3 { font-family: var(--font-display); font-size: 25px; font-weight: 600;
  color: var(--primary); line-height: 1.25; }
.std-body .std-lede { color: var(--ink); font-size: 16px; font-weight: 600; margin-top: 10px; line-height: 1.55; }
.std-body p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin-top: 12px; }
@media (max-width: 760px) {
  .std-phase { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .std-n { font-size: 34px; }
  .std-body h3 { font-size: 21px; }
}

/* Who We Serve strip — the commercial site's primary axis, so it sits directly
   under the hero where the residential build put a trust bar. */
.mkt-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 40px;
  background: var(--line); border: 1px solid var(--line); }
.mkt-tile { display: block; background: var(--paper); padding: 30px 26px; text-decoration: none;
  transition: background .2s ease; }
.mkt-tile:hover { background: var(--cream); }
.mkt-tile h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--primary);
  line-height: 1.25; }
.mkt-tile p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-top: 10px; }
.mkt-tile .more { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700;
  color: var(--accent-dark); letter-spacing: .02em; }
@media (max-width: 900px) { .mkt-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .mkt-strip { grid-template-columns: 1fr; } }

/* Gated client logo wall — renders only when data.cjs clientLogos[] is filled. */
.logo-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; align-items: center;
  margin-top: 40px; }
.logo-wall img { width: 100%; height: 46px; object-fit: contain; filter: grayscale(1); opacity: .62;
  transition: opacity .2s ease, filter .2s ease; }
.logo-wall img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width: 560px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* Commercial nav carries six items plus a phone number and a CTA, where the
   residential build carried four. Tighten the row so the CTA cannot be pushed
   off the right edge at common laptop widths, and let the two secondary links
   drop out before anything structural does. */
.nav .brand img { height: 50px; }
.nav .links { gap: 20px; }
.nav .links a { font-size: 14px; white-space: nowrap; }
.nav-ctas { gap: 10px; }
.nav-ctas .nav-call { font-size: 13.5px; white-space: nowrap; }
.nav-ctas .btn.cta { font-size: 13.5px; padding: 11px 16px; white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1240px) {
  .nav .links .nav-sec { display: none; }
  .nav .links { gap: 16px; }
  .nav-ctas .nav-call { display: none; }
}

/* Mobile hero order. The residential build stacked the calculator above the
   headline — right when the calculator IS the pitch. Here the headline is the
   positioning statement and has to land first; the assessment card follows it,
   taking the slot the funnel used to occupy. */
@media (max-width: 980px) {
  .hero .hero-assess { order: 3; }
}

/* ============================================================================
   COMMERCIAL-CONTRACTOR STRUCTURE  (2026-10-01)
   Jay: "it's very similar to the original ABBA site... make it way more
   structurally similar to bluegrass." The page inventory was already right —
   what was still ABBA was how every section was BUILT. This block replaces
   the construction: two-row header, full-bleed hero, tinted photo bands, a
   rotated diamond service cluster, plain white document interiors, and a
   near-black closing CTA. Appended last so it wins over the base template.
   ========================================================================= */

/* Flat bold sans throughout — the editorial serif fights this register. */
:root { --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
h1, h2, h3, h4, .title, .brand-name { font-family: var(--font-display); letter-spacing: -.015em; }

/* ---------- two-row header ---------- */
.nav { background: var(--paper); border-bottom: none; }
.nav .wrap { display: flex; align-items: center; }
.nav-top { border-bottom: 1px solid var(--line); }
.nav-top .wrap { justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 18px; }
.nav .brand img { height: 54px; width: auto; }
.nav-top-right { display: flex; align-items: center; gap: 18px; }
.nav-top-right .nav-call { font-weight: 700; font-size: 17px; color: var(--primary); text-decoration: none; white-space: nowrap; }
.nav-top-right .btn.cta { font-size: 13.5px; padding: 11px 18px; white-space: nowrap; }
.nav-bar .wrap { justify-content: center; padding-top: 0; padding-bottom: 0; }
.nav-bar .links { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.nav-bar .links > a, .nav-bar .dd > a { display: block; padding: 15px 0; font-size: 14.5px; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-bar .links > a:hover, .nav-bar .dd > a:hover,
.nav-bar .links > a.active, .nav-bar .dd > a.active { color: var(--accent-dark); }
.nav-bar .links > a::after, .nav-bar .dd > a::after { display: none; }
.nav .m-only { display: none; }

/* ---------- full-bleed home hero ---------- */
.hero-full { position: relative; min-height: 86vh; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; text-align: center; color: #fff; overflow: hidden; }
.hero-full-shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,18,10,.58), rgba(10,18,10,.42) 45%, rgba(10,18,10,.72)); }
.hero-full .wrap { position: relative; z-index: 2; max-width: 980px; padding: 90px 20px; }
.hf-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; font-weight: 700;
  color: rgba(255,255,255,.88); margin-bottom: 18px; }
.hero-full h1 { font-size: clamp(32px, 4.6vw, 58px); font-weight: 800; line-height: 1.1; color: #fff; }
.hf-btns { margin-top: 32px; }
.hf-phone { position: absolute; left: 34px; bottom: 26px; z-index: 2; color: #fff; font-weight: 700;
  font-size: 14px; text-decoration: none; opacity: .9; }
.hf-cue { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2; color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none; display: flex; flex-direction: column;
  align-items: center; gap: 2px; opacity: .92; }
.hf-cue span { font-size: 18px; line-height: 1; }

/* ---------- solid interior page-title band ---------- */
.page-title { background: var(--primary); color: #fff; text-align: center; padding: 52px 20px; }
.page-title h1 { font-size: clamp(27px, 3.4vw, 42px); font-weight: 800; color: #fff; line-height: 1.15; }

/* ---------- tinted full-bleed photo bands ---------- */
.tint-band { position: relative; background-size: cover; background-position: center; background-attachment: scroll;
  color: #fff; text-align: center; overflow: hidden; }
.tint-band .tint { position: absolute; inset: 0; background: linear-gradient(170deg,
  rgba(29,61,27,.93), rgba(23,74,66,.88) 55%, rgba(16,40,16,.93)); }
.tint-band.dark .tint { background: linear-gradient(170deg, rgba(14,24,14,.92), rgba(24,46,24,.88)); }
.tint-band .wrap { position: relative; z-index: 2; padding: 104px 20px; max-width: 980px; }
.tint-band.left { text-align: left; }
.tint-band.left .wrap { max-width: 1120px; }
.tb-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.85); margin-bottom: 14px; }
.tint-band h2 { font-size: clamp(27px, 3.3vw, 42px); font-weight: 800; color: #fff; line-height: 1.15; }
.tb-body { margin-top: 18px; }
.tb-body p { color: rgba(255,255,255,.93); font-size: 16px; line-height: 1.75; margin-top: 12px; }
.tint-band.left .tb-body { max-width: 760px; }
.tb-btns { margin-top: 30px; }
.mkt-list { list-style: none; padding: 0; margin: 26px 0 0; max-width: 760px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.mkt-list li { position: relative; padding: 9px 0 9px 20px; }
.mkt-list li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); }
.mkt-list a { color: #fff; font-weight: 700; font-size: 15.5px; text-decoration: none; }
.mkt-list a:hover { color: var(--accent); }

/* ---------- the diamond cluster ---------- */
.dia-band { background: var(--cream); padding: 70px 20px; overflow: hidden; }
.dia-wrap { width: min(560px, 74vw); aspect-ratio: 1; margin: calc(min(560px, 74vw) * .207) auto; }
.dia-grid { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  transform: rotate(45deg); gap: 3px; }
.dia { position: relative; overflow: hidden; display: block; text-decoration: none; contain: paint; }
.dia-intro { grid-area: 1 / 1; background: var(--primary); }
.dia.d1 { grid-area: 2 / 1; }
.dia.d2 { grid-area: 2 / 2; }
.dia.d3 { grid-area: 1 / 2; }
.dia-ph { position: absolute; inset: -21%; background-size: cover; background-position: center;
  transform: rotate(-45deg); transition: transform .4s ease; }
.dia-photo:hover .dia-ph { transform: rotate(-45deg) scale(1.06); }
.dia-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,10,.12), rgba(10,20,10,.58)); }
.dia-in { position: absolute; left: 50%; top: 50%; width: 74%; transform: translate(-50%, -50%) rotate(-45deg);
  display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.dia-eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.85); }
.dia-title { font-family: var(--font-display); font-size: 25px; font-weight: 800; margin-top: 8px; line-height: 1.15; }
.dia-body { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.9); margin-top: 12px; }
.dia-btn { margin-top: 16px; }
.dia-btn .btn { font-size: 12.5px; padding: 10px 16px; }
.dia-name { font-size: 16px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.55); line-height: 1.25; }
.dia-n { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: rgba(255,255,255,.72);
  margin-top: 4px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }

/* ---------- trusted-by + testimonial ---------- */
.logo-band { background: #fff; padding: 72px 20px; text-align: center; }
.logo-band h2 { font-size: 30px; font-weight: 800; color: var(--primary); margin-bottom: 36px; }
.quote-band { position: relative; background-size: cover; background-position: center; color: #fff; text-align: center; }
.quote-band .tint { position: absolute; inset: 0; background: linear-gradient(170deg, rgba(20,52,44,.90), rgba(14,34,14,.92)); }
.quote-band .wrap { position: relative; z-index: 2; padding: 92px 20px; max-width: 900px; }
.qb-mark { font-size: 54px; line-height: .6; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.quote-band h2 { font-size: clamp(26px, 3.1vw, 38px); font-weight: 800; color: #fff; }
.quote-band blockquote { margin: 24px 0 0; font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.95); }
.qb-by { margin-top: 20px; font-weight: 800; font-size: 16px; }

/* ---------- closing CTA ---------- */
.cta-band { background: #1b1f1b; color: #fff; text-align: center; padding: 86px 20px; }
.cta-band::before, .cta-band::after { display: none; }
.cta-band h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; color: #fff; }
.cta-band p { color: rgba(255,255,255,.8); font-size: 15.5px; line-height: 1.7; margin: 14px auto 0; max-width: 680px; }
.cta-band .btns { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ---------- interior body: zig-zag + document ---------- */
.zig { background: #fff; padding: 72px 20px; }
.zig-row { display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; padding: 26px 0; }
.zig-row.flip .zig-txt { order: 2; }
.zig-row h2 { font-size: clamp(23px, 2.5vw, 32px); font-weight: 800; color: var(--primary); line-height: 1.2; }
.zig-row h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 24px; }
.zig-row p { color: var(--muted); font-size: 15.5px; line-height: 1.8; margin-top: 12px; }
.zig-row a { color: var(--accent-dark); font-weight: 600; }
.zig-img img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; border-radius: var(--radius); }
.zig-row .also { font-size: 14.5px; }

.doc { background: #fff; padding: 72px 20px; }
.doc .wrap { max-width: 860px; }
.doc-lede { font-size: 17px; line-height: 1.8; color: var(--ink); margin-bottom: 16px; }
.doc h2 { font-size: clamp(22px, 2.3vw, 29px); font-weight: 800; color: var(--primary); margin-top: 44px; line-height: 1.25; }
.doc .doc-n { color: var(--accent); margin-right: 12px; }
.doc p { color: var(--muted); font-size: 15.5px; line-height: 1.8; margin-top: 12px; }
.doc .doc-strong { color: var(--ink); font-weight: 700; }
.doc a { color: var(--accent-dark); font-weight: 600; }
.doc-list, .doc-steps { margin: 16px 0 0 20px; color: var(--muted); font-size: 15.5px; line-height: 1.8; }
.doc-list li, .doc-steps li { margin-top: 8px; }
.doc-list strong, .doc-steps strong { color: var(--ink); }

.mkt-index { margin: 34px 0 10px; border-top: 1px solid var(--line); }
.mkt-row { display: grid; grid-template-columns: 112px 1fr 28px; gap: 22px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.mkt-row-img { height: 74px; background-size: cover; background-position: center; border-radius: var(--radius); }
.mkt-row-txt strong { display: block; font-size: 17px; font-weight: 800; color: var(--primary); }
.mkt-row-txt span { display: block; color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 4px; }
.mkt-row-go { color: var(--accent); font-size: 20px; text-align: right; }
.mkt-row:hover .mkt-row-txt strong { color: var(--accent-dark); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-bar .links { gap: 20px; }
  .nav-top-right .nav-call { display: none; }
}
@media (max-width: 980px) {
  .nav-top .wrap { padding-top: 10px; padding-bottom: 10px; }
  .nav .brand img { height: 42px; }
  .nav-top-right { display: none; }
  .nav .menu-btn { display: block; }
  .nav-bar { display: none; }
  .nav.open .nav-bar { display: block; border-top: 1px solid var(--line); }
  .nav.open .nav-bar .wrap { padding: 8px 20px 16px; }
  .nav.open .nav-bar .links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav.open .nav-bar .links > a, .nav.open .nav-bar .dd > a { padding: 13px 2px; border-bottom: 1px solid var(--line); }
  .nav .m-only { display: block; margin-top: 12px; text-align: center; }
  .nav .m-only.btn { padding: 13px 18px; }
  .hero-full { min-height: 76vh; }
  .zig-row { grid-template-columns: 1fr; gap: 24px; }
  .zig-row.flip .zig-txt { order: 0; }
  .tint-band .wrap { padding: 72px 20px; }
}
@media (max-width: 900px) {
  /* Diamonds are unusable at phone width — unrotate into plain photo rows. */
  .dia-wrap { width: 100%; aspect-ratio: auto; margin: 0; }
  .dia-grid { display: block; transform: none; gap: 0; }
  .dia { aspect-ratio: 16 / 7; margin-bottom: 10px; }
  .dia-intro { aspect-ratio: auto; padding: 34px 22px; }
  .dia-ph { inset: 0; transform: none; }
  .dia-photo:hover .dia-ph { transform: scale(1.04); }
  .dia-in { position: static; transform: none; width: 100%; }
  .dia-photo .dia-in { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86%; }
  .mkt-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hf-phone, .hf-cue { display: none; }
  .mkt-row { grid-template-columns: 76px 1fr; }
  .mkt-row-go { display: none; }
  .mkt-row-img { height: 58px; }
}

/* --- fixes from the first visual pass of the restructure --- */

/* A diamond's usable area is the square inscribed in it, so content has to sit
   well inside the bounding box or it spills past the rotated edges. */
.dia-wrap { width: min(640px, 80vw); margin: calc(min(640px, 80vw) * .207) auto; }
.dia-in { width: 62%; }
.dia-title { font-size: 21px; }
.dia-body { font-size: 11.5px; line-height: 1.55; margin-top: 9px; }
.dia-eyebrow { font-size: 10px; letter-spacing: .13em; }
.dia-btn { margin-top: 13px; }
.dia-btn .btn { font-size: 11.5px; padding: 9px 14px; }
.dia-name { font-size: 14.5px; }
.dia-n { font-size: 28px; }

/* The two collapsed-menu-only items were inheriting display:block from the
   generic `.nav-bar .links > a` rule, which outranks `.nav .m-only`. */
.nav-bar .links > a.m-only, .nav-bar .links > .m-only { display: none; }
@media (max-width: 980px) {
  .nav.open .nav-bar .links > a.m-only, .nav.open .nav-bar .links > .m-only { display: block; }
}

/* The fix block above was appended AFTER the responsive rules, so its desktop
   diamond sizing (width:62%, min(640px,80vw)) was winning at phone width too
   and squeezing the unrotated tiles into a narrow column. Re-assert the
   collapsed layout last. Keep any future diamond tweaks above this block. */
@media (max-width: 900px) {
  .dia-wrap { width: 100%; aspect-ratio: auto; margin: 0; }
  .dia-in { width: 100%; }
  .dia-photo .dia-in { width: 86%; }
  .dia-intro { padding: 36px 24px; }
  .dia-title { font-size: 24px; }
  .dia-body { font-size: 13.5px; }
  .dia-name { font-size: 16px; }
  .dia-n { font-size: 30px; }
}