/* Hamblin Homes. "Black and Tan", sampled from the yard sign: charcoal #32353a,
   tan #dbaa82. Design read: trust-first local contractor, brand preserved.
   Dials: variance 5 / motion 3 / density 4.

   Visual system (Part B of elayadesign/ai-design-skills landing-page-design,
   adapted; full text in .claude/skills/hamblin-visual-system/SKILL.md).
   test/design.test.mjs fails the suite on drift from these:
   - Type: Tailwind steps only, each size with its own line height:
     12/16 14/20 16/24 18/28 20/28 24/32 30/36 36/40 48/1 60/1. No rem, em or
     clamp() sizes. Weights cap at 700. No italics. Fonts stay the logo's:
     Montserrat (display) + Open Sans (body), self-hosted.
   - Spacing (padding, margin, gap): 0 2 4 8 12 16 24 32 40 48 64 80 96 px.
   - Radius: Tailwind steps. 6px boxes and controls, 4px tags and anything
     sitting 8px inside the 12px header (inner = outer - gap when gap < 32px),
     full pill only on the chat launcher.
   - Borders go all the way round a card or not at all. No background
     gradients; the one gradient is hero heading text, #fff to #9b9b9b.
   - Motion: one curve (--ease). 500ms for transforms, 300ms for color and
     opacity, never under 200ms. Animate transform and opacity, never layout.
     Reduced motion sets --move to 0: fades stay, movement goes.
   - No ambient motion (owner decision, 2026-10-31): no particles, scroll
     reveals, entrance animations or video. Hover and menu feedback, plus the
     process timeline (.steps) filling in as it is read, are the only motion,
     plus the green dot on the chat launcher (owner decision, 2026-11-05), the
     one loop on the site and the one use of green.
   - Two colors on the neutrals (owner decision, 2026-10-31). Tan is the brand
     accent: buttons, eyebrows, the band, tiles, focus rings and everything on
     charcoal. As text on light surfaces it fails contrast (about 2:1), so text
     uses --accent-ink. Wasatch slate is the quiet second color, for details
     only: links, icons on light surfaces, section tints (--tint), one solid
     slate band per page at most (.section.slate, the homepage counties), the
     cost callout, badges and chips. Slate never fills a button or appears
     on the charcoal frame. In dark mode the tints are slate-tinted darks
     (owner decision, 2026-10-31) so the second color survives both schemes.
   - Charcoal hero and footer, and the charcoal-tinted floating header, are the
     brand frame in both color schemes. Everything between follows the theme. */

@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/fonts/open-sans.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  /* Brand frame: identical in both schemes. */
  --charcoal: #32353a;
  --charcoal-2: #25272b;
  --charcoal-3: #3d4046;
  --tan: #dbaa82;
  --tan-soft: #ecd3bd;
  --live: #22c55e;
  --slate: #5b7186;
  --on-dark: #eceef0;
  --on-dark-muted: #c3c7cc;

  /* Page theme (light). Cool neutrals tinted toward the charcoal, never warm paper. */
  --bg: #fbfbfc;
  --bg-2: #f0f1f3;
  --surface: #fdfdfd;
  --ink: #1f2226;
  --muted: #555a62;
  --line: #dde0e4;
  --accent: var(--tan);
  --accent-ink: #8a5630;
  --slate-soft: #dbe3ea;
  --slate-ink: #3f5568;
  --tint: #e9eef3;
  --slate-band: #5b7186;
  --on-slate: #fdfdfd;
  --btn-strong-bg: var(--charcoal);
  --btn-strong-hover: var(--charcoal-3);
  --btn-strong-fg: #fdfdfd;
  --input-border: #b9bec5;
  --ok: #1f6f43;
  --err: #a1261b;
  --shadow: 0 12px 32px rgba(37, 39, 43, 0.12);

  --radius: 6px;
  --radius-sm: 4px;
  --wrap: 1180px;
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* Motion. --move scales every translate, rotate and scale on the site. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 500ms;
  --dur-color: 300ms;
  --move: 1;

  /* Floating header: 16px off the top + a 64px bar. Heroes start under it. */
  --hdr-space: 80px;

  /* z-index scale */
  --z-header: 50;
  --z-callbar: 60;
  --z-chat: 90;
  --z-menu: 95;
  --z-skip: 200;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutral backgrounds from the skill's dark set (#181818 #1f1f1f #272727);
       slate surfaces from the slate dark set (#1b2128 #26313b #2b3a48). */
    --bg: #181818;
    --bg-2: #1f1f1f;
    --surface: #272727;
    --ink: #e9eaec;
    --muted: #a9aeb5;
    --line: #383838;
    --accent-ink: #e4bc98;
    --slate-soft: #26313b;
    --slate-ink: #a9bdd0;
    --tint: #1b2128;
    --slate-band: #2b3a48;
    --btn-strong-bg: var(--tan);
    --btn-strong-hover: var(--tan-soft);
    --btn-strong-fg: #25272b;
    --input-border: #5c5c5c;
    --ok: #6fcf97;
    --err: #ff8a7a;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --move: 0; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-space) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.menu-open { overflow: hidden; }
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--ink); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
em, i, cite, address, dfn, var { font-style: normal; }
a { color: var(--slate-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-color) var(--ease); }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: 36px; line-height: 40px; letter-spacing: -0.02em; margin-bottom: 24px; }
h2 { font-size: 24px; line-height: 32px; letter-spacing: -0.015em; }
h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.005em; }
@media (min-width: 768px) {
  h1 { font-size: 48px; line-height: 1; }
  h2 { font-size: 30px; line-height: 36px; }
}
p, li { text-wrap: pretty; }
p { margin: 0 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--tan); color: var(--charcoal-2); padding: 8px 16px; z-index: var(--z-skip); font-weight: 700; border-radius: var(--radius); }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--tan); outline-offset: 2px; }
.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex-shrink: 0; }

.eyebrow { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 16px; display: block; }
.on-dark .eyebrow { color: var(--tan); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 24px; text-decoration: none; white-space: nowrap; border: 2px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), background-color var(--dur-color) var(--ease), color var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease); }
.btn:hover { transform: translateY(calc(var(--move) * -2px)); }
.btn:active { transform: translateY(calc(var(--move) * 1px)) scale(calc(1 - var(--move) * 0.02)); }
.btn-tan { background: var(--tan); color: var(--charcoal-2); }
.btn-tan:hover { background: var(--tan-soft); color: var(--charcoal-2); }
.btn-strong { background: var(--btn-strong-bg); color: var(--btn-strong-fg); }
.btn-strong:hover { background: var(--btn-strong-hover); color: var(--btn-strong-fg); }
.btn-ghost { border-color: rgba(236, 238, 240, 0.5); color: var(--on-dark); background: transparent; }
.btn-ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.textlink .icon { transition: transform var(--dur) var(--ease); }
.textlink:hover .icon { transform: translateX(calc(var(--move) * 4px)); }

/* ── Header (brand frame): a compact bar floating 16px off the top, centered
   and sized to its content. The blur lives on ::before so it does not become
   the containing block for the fixed mobile menu panel inside it. ── */
.site-header { position: fixed; top: 16px; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px); z-index: var(--z-header); color: var(--on-dark); border-radius: 12px; isolation: isolate; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(50, 53, 58, 0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(236, 238, 240, 0.12); box-shadow: 0 8px 24px rgba(10, 11, 13, 0.24); }
.hdr { display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 16px; min-height: 64px; }
.brand { flex-shrink: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-dark); }
.brand:hover { color: var(--on-dark); }
.brand img { width: 56px; height: auto; }
.brand-name { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.3em; font-size: 16px; line-height: 24px; text-transform: uppercase; }
.brand-name small { display: block; font-size: 12px; line-height: 16px; letter-spacing: 0.42em; color: var(--tan); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { white-space: nowrap; color: var(--on-dark); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 20px; padding: 8px; border-radius: var(--radius-sm); transition: color var(--dur-color) var(--ease), background-color var(--dur-color) var(--ease); }
.nav a:hover { color: var(--tan); }
.nav a[aria-current="page"] { color: var(--tan); background: rgba(236, 238, 240, 0.08); }
.hdr-call { font-size: 14px; line-height: 20px; border-radius: var(--radius-sm); }
.menu-btn { display: none; place-items: center; background: none; border: 0; color: var(--on-dark); width: 48px; height: 48px; padding: 0; border-radius: var(--radius-sm); cursor: pointer; }
.menu-btn .icon { grid-area: 1 / 1; width: 28px; height: 28px; transition: transform var(--dur) var(--ease), opacity var(--dur-color) var(--ease); }
.menu-btn .i-close { opacity: 0; transform: rotate(calc(var(--move) * -90deg)) scale(calc(1 - var(--move) * 0.4)); }
.menu-btn[aria-expanded="true"] .i-open { opacity: 0; transform: rotate(calc(var(--move) * 90deg)) scale(calc(1 - var(--move) * 0.4)); }
.menu-btn[aria-expanded="true"] .i-close { opacity: 1; transform: none; }
@media (max-width: 1239px) {
  .hdr { gap: 8px; }
  .menu-btn { display: inline-grid; }
  .hdr-call .num { display: none; }
  .hdr-call { width: 44px; padding: 8px; }
  /* Mobile menu: a full-height panel, not a dropdown. Links arrive in reading
     order, 24px up and faded in, 60ms apart, the sequence capped at 400ms. */
  .nav { position: fixed; inset: 0; z-index: -2; flex-direction: column; align-items: stretch; gap: 0; padding: calc(var(--hdr-space) + 24px) 24px 48px; overflow-y: auto; background: rgba(37, 39, 43, 0.92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity var(--dur-color) var(--ease), visibility 0s var(--ease) var(--dur-color); }
  .nav.open { opacity: 1; visibility: visible; transition: opacity var(--dur-color) var(--ease); }
  html.menu-open .site-header { z-index: var(--z-menu); }
  .nav a { font-size: 24px; line-height: 32px; padding: 12px 0; border-radius: 0; border-bottom: 1px solid rgba(236, 238, 240, 0.08); opacity: 0; transform: translateY(calc(var(--move) * 24px)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur-color) var(--ease); }
  .nav a[aria-current="page"] { background: none; }
  .nav.open a { opacity: 1; transform: none; transition-delay: var(--d, 0ms); }
  .nav a:nth-child(2) { --d: 60ms; }
  .nav a:nth-child(3) { --d: 120ms; }
  .nav a:nth-child(4) { --d: 180ms; }
  .nav a:nth-child(5) { --d: 240ms; }
  .nav a:nth-child(6) { --d: 300ms; }
  .nav a:nth-child(7) { --d: 360ms; }
  .nav a:nth-child(n+8) { --d: 400ms; }
}
@media (max-width: 480px) {
  .brand { gap: 8px; }
  .brand img { width: 44px; }
  .brand-name { font-size: 14px; line-height: 20px; letter-spacing: 0.22em; }
  .brand-name small { letter-spacing: 0.32em; }
}

/* Whatever comes first on a page starts under the floating header. */
main > .section:first-child { padding-top: calc(var(--hdr-space) + 64px); }
.neighbor:not([hidden]) { padding-top: var(--hdr-space); }
.neighbor:not([hidden]) + main > .page-hero:first-child { padding-top: 48px; }

/* ── Hero (brand frame) ── */
.hero { background: var(--charcoal); color: var(--on-dark); }
.hero, .page-hero { position: relative; isolation: isolate; }
.hero-inner { min-height: 640px; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--hdr-space) + 96px); padding-bottom: 96px; }
/* The site's one gradient: hero heading text only, sized to the text so the
   fade reaches the end of the longest line. */
.hero h1, .page-hero h1 { width: fit-content; max-width: 680px; color: #fdfdfd; background: linear-gradient(90deg, #ffffff, #9b9b9b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .hero h1, .page-hero h1 { background: none; -webkit-text-fill-color: currentColor; } }
.hero .lede { font-size: 18px; line-height: 28px; color: var(--on-dark-muted); max-width: 680px; margin-bottom: 32px; }
/* Hero images span the whole hero, homepage and interior pages alike (owner
   decisions, 2026-10-31): image at the back of the hero's own stacking
   context, a solid charcoal scrim over it (no gradients), then the text. The
   homepage house sits on the image's right third, so that crop anchors right. */
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(37, 39, 43, 0.78); }
@media (max-width: 860px) { .hero-inner { min-height: 560px; padding-top: calc(var(--hdr-space) + 64px); padding-bottom: 64px; } }
/* Phones: the CTAs must clear the call bar; the image stays as backdrop. */
@media (max-width: 600px) { .hero-inner { min-height: 0; padding-top: calc(var(--hdr-space) + 32px); padding-bottom: 48px; } .hero-bg::after { background: rgba(37, 39, 43, 0.84); } }
/* Tan band: the yard sign's stripe, and a real tel: link. */
.band { background: var(--tan); text-align: center; padding: 16px; }
.band a { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 28px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--charcoal-2); text-decoration: none; }
@media (min-width: 768px) { .band a { font-size: 24px; line-height: 32px; } }

/* Interior page hero */
.page-hero { background: var(--charcoal); color: var(--on-dark); padding: calc(var(--hdr-space) + 48px) 0 48px; }
.page-hero .lede { color: var(--on-dark-muted); font-size: 18px; line-height: 28px; max-width: 680px; }
.page-hero .lede a { color: #fdfdfd; }
/* With an image (AI process/material shots, see IMAGES in src/site.mjs) the
   hero grows so the picture reads; the crop stays centered. */
.page-hero.has-bg { padding: calc(var(--hdr-space) + 80px) 0 80px; }
.page-hero .hero-bg img { object-position: 50% 50%; }
/* Interior images have bright skies behind the text, so their scrim matches
   the phone strength; measured worst case 3:1+ headline, 4.5:1+ lede. */
.page-hero .hero-bg::after { background: rgba(37, 39, 43, 0.84); }
@media (max-width: 600px) { .page-hero.has-bg { padding: calc(var(--hdr-space) + 48px) 0 48px; } }
.crumbs { font-size: 14px; line-height: 20px; color: var(--on-dark-muted); margin-bottom: 16px; }
.crumbs a { color: var(--on-dark); }
.crumbs span[aria-hidden] { margin: 0 8px; color: var(--tan); }

/* ── Sections ── */
.section { padding: 80px 0; }
.section.alt { background: var(--tint); }
/* Solid slate band: at most one per page. Text is --on-slate only (muted
   greys fail contrast on mid slate); cards inside keep their own surface. */
.section.slate { background: var(--slate-band); color: var(--on-slate); }
.section.slate h2, .section.slate .section-head p { color: var(--on-slate); }
.section-head { max-width: 680px; margin-bottom: 32px; }
.section-head p { color: var(--muted); font-size: 18px; line-height: 28px; }
@media (max-width: 640px) { .section { padding: 64px 0; } }

/* Services: building homes first (two tiles), everything else as a compact list. */
.svc-primary { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; margin-bottom: 24px; }
.tile { border-radius: var(--radius); padding: 32px; text-decoration: none; display: flex; flex-direction: column; gap: 12px; min-height: 260px; overflow: hidden; transition: transform var(--dur) var(--ease); }
.tile:hover { transform: translateY(calc(var(--move) * -4px)); }
.tile .icon { width: 40px; height: 40px; }
.tile-img { width: calc(100% + 64px); max-width: none; margin: -32px -32px 16px; aspect-ratio: 16 / 9; object-fit: cover; }
.tile h3 { font-size: 24px; line-height: 32px; margin: 8px 0 0; }
.tile p { margin: 0; max-width: 30em; }
.tile .textlink { margin-top: auto; padding-top: 12px; }
.tile-dark { background: var(--charcoal); color: var(--on-dark-muted); }
.tile-dark h3 { color: #fdfdfd; }
.tile-dark .icon, .tile-dark .textlink { color: var(--tan); }
.tile-tan { background: var(--tan); color: var(--charcoal-2); }
.tile-tan h3, .tile-tan .textlink { color: var(--charcoal-2); }
.svc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.svc-list a { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 16px 4px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.svc-list a:hover strong { color: var(--slate-ink); }
.svc-list .icon { width: 28px; height: 28px; color: var(--slate-ink); grid-row: span 2; margin-top: 2px; }
.svc-list strong { font-family: var(--font-display); font-size: 16px; line-height: 24px; transition: color var(--dur-color) var(--ease); }
.svc-list span { color: var(--muted); font-size: 14px; line-height: 20px; }
@media (max-width: 760px) { .svc-primary { grid-template-columns: 1fr; } .tile { min-height: 0; } }

/* Why: one large tagline (static), one supporting sentence, three plain columns. */
.section.why { padding: 96px 0; }
.tagline { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 40px; letter-spacing: -0.02em; max-width: 680px; margin: 0 0 24px; color: var(--ink); text-wrap: balance; }
.br-wide { display: none; }
@media (min-width: 768px) { .tagline { font-size: 48px; line-height: 1; } .br-wide { display: inline; } }
.why-lead { color: var(--muted); font-size: 18px; line-height: 28px; max-width: 680px; margin: 0 0 48px; }
/* Text left, two overlapping process images right: the trade shown, not
   just claimed. Images are decoration for the copy beside them. */
.why-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; margin-bottom: 64px; }
.why-top .why-lead { margin-bottom: 0; }
.why-media { position: relative; padding: 0 0 64px 64px; }
.why-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.why-media img + img { position: absolute; left: 0; bottom: 0; width: 55%; border: 4px solid var(--tint); }
@media (max-width: 960px) { .why-top { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; } .why-media { max-width: 560px; } }
.why-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.why-cols h3 { font-size: 18px; line-height: 28px; padding-top: 16px; border-top: 3px solid var(--accent); }
.why-cols p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .section.why { padding: 64px 0; } .why-cols { grid-template-columns: 1fr; gap: 32px; } }

/* Two-column prose + aside */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.split aside { position: sticky; top: calc(var(--hdr-space) + 24px); }
.split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .split, .split-even { grid-template-columns: 1fr; gap: 32px; } .split aside { position: static; } }
.prose { max-width: 44em; }
.prose h2 { margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--slate-ink); }
.note { color: var(--muted); }
.table-scroll { overflow-x: auto; margin: 0 0 24px; border-radius: var(--radius); border: 1px solid var(--line); }
.table-scroll table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; padding: 12px; vertical-align: top; }
.prose thead th { background: var(--charcoal); color: var(--on-dark); font-family: var(--font-display); font-size: 14px; line-height: 20px; letter-spacing: 0.03em; }
.prose tbody tr + tr { border-top: 1px solid var(--line); }
.prose tbody th { font-weight: 600; }

/* Answer box: the one-paragraph answer AI assistants and snippets lift. */
.answer { background: var(--slate-soft); border: 1px solid var(--slate); padding: 24px; border-radius: var(--radius); margin: 0 0 40px; font-size: 18px; line-height: 28px; }
.answer strong { display: block; font-family: var(--font-display); font-size: 16px; line-height: 24px; color: var(--slate-ink); margin-bottom: 8px; }
.answer p { margin: 0; }
.section.alt .answer { background: var(--surface); }

/* Steps */
/* Process timeline. Numbers on a vertical rail; without JS (and for crawlers
   and reduced motion) every step is drawn and lit. hh-site.js adds .is-live
   and marks steps as the reader reaches them: the tan rail grows and each
   number lights up (owner decision 2026-10-31: the one scroll-tied motion). */
.steps { list-style: none; padding: 0; margin: 0 0 32px; display: grid; }
.steps li { position: relative; padding: 0 0 32px 64px; margin: 0; min-height: 40px; }
.steps li:last-child { padding-bottom: 0; }
.step-n { position: absolute; left: 0; top: 0; z-index: 1; width: 40px; height: 40px; border-radius: 9999px; background: var(--charcoal); color: var(--tan); box-shadow: inset 0 0 0 2px var(--charcoal); font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 24px; display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-color) var(--ease), color var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease); }
.steps li:not(:last-child)::before, .steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 48px; bottom: 8px; width: 2px; }
.steps li:not(:last-child)::before { background: var(--line); }
.steps li:not(:last-child)::after { background: var(--tan); transform-origin: top; transition: transform var(--dur) var(--ease); }
.steps.is-live li:not(.is-passed)::after { transform: scaleY(calc(1 - var(--move))); }
.steps.is-live li:not(.is-reached) .step-n { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.steps li strong { padding-top: 8px; }
.steps strong { display: block; font-family: var(--font-display); color: var(--ink); margin-bottom: 2px; }

/* CTA aside (brand frame color, it is a call to action) */
.cta-card { background: var(--charcoal); color: var(--on-dark-muted); border-radius: var(--radius); padding: 32px 24px; }
.cta-card h2 { color: #fdfdfd; font-size: 20px; line-height: 28px; }
.cta-card .btn { width: 100%; margin-top: 12px; }
.cta-card .phone { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 32px; color: #fdfdfd; text-decoration: none; display: block; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }

/* FAQ: always-open question/answer grid (readable at a glance, and by crawlers). */
.qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
.qa div { border-top: 1px solid var(--line); padding-top: 16px; }
.qa h3 { font-size: 18px; line-height: 28px; margin-bottom: 8px; }
.qa p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .qa { grid-template-columns: 1fr; gap: 24px; } }

/* Areas */
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .area-grid { grid-template-columns: 1fr; } }
.area { background: var(--surface); border-radius: var(--radius); padding: 24px; text-decoration: none; color: var(--muted); display: flex; flex-direction: column; gap: 8px; transition: transform var(--dur) var(--ease); }
.area h3 { color: var(--ink); margin: 0; }
.area p { font-size: 14px; line-height: 20px; margin: 0; }
a.area:hover { transform: translateY(calc(var(--move) * -4px)); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; list-style: none; }
.chips li { margin: 0; padding: 4px 12px; border-radius: var(--radius-sm); background: var(--slate-soft); color: var(--ink); font-size: 14px; line-height: 20px; }
.section.alt .chips li { background: var(--surface); }

/* Neighbor / yard-sign banner */
.neighbor { background: var(--tan); color: var(--charcoal-2); }
.neighbor .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.neighbor p { margin: 0; font-weight: 600; }
.neighbor .btn-strong { background: var(--charcoal); color: #fdfdfd; }
.neighbor .btn-strong:hover { background: var(--charcoal-3); }

/* Projects */
.badge { display: inline-block; font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--slate-soft); color: var(--slate-ink); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.project { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.project img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform var(--dur) var(--ease); }
.project:hover img { transform: translateY(calc(var(--move) * -4px)); }
.project h3 { margin: 4px 0 0; }
.project p { margin: 0; color: var(--muted); }
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 0 32px; }
.photos img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.empty { background: var(--bg-2); border-radius: var(--radius); padding: 48px 32px; max-width: 680px; }
.empty p { color: var(--muted); }

/* Related links (service and guide pages) */
.related { display: flex; flex-wrap: wrap; gap: 12px; }
.related a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius); background: var(--bg-2); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; transition: background-color var(--dur-color) var(--ease); }
.related a .icon { color: var(--slate-ink); }
.related a:hover { background: var(--line); }

/* ── Forms ── */
.form { display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: 14px; line-height: 20px; margin-bottom: 8px; color: var(--ink); }
.field .opt { color: var(--muted); font-weight: 400; }
/* 16px is a functional floor: iOS zooms the page on focus below it. */
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; line-height: 24px; padding: 12px 16px; border: 1.5px solid var(--input-border); border-radius: var(--radius); background: var(--bg); color: var(--ink); min-height: 48px; transition: border-color var(--dur-color) var(--ease); }
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 3px solid color-mix(in srgb, var(--tan) 45%, transparent); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--err); }
.errline { color: var(--err); font-size: 14px; line-height: 20px; display: block; margin-top: 4px; }
.errline:empty { display: none; }
.hp { position: absolute; left: -5000px; }
.form-status { font-weight: 600; min-height: 24px; margin: 0; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }
.form-note { font-size: 14px; line-height: 20px; color: var(--muted); margin: 0; }
.form-card { background: var(--surface); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.form-card .btn { justify-self: start; }
@media (max-width: 560px) { .form-card { padding: 24px 16px; } .form-card .btn { justify-self: stretch; } }

/* Home: estimate block, centered column (the page's only centered section). */
.estimate { max-width: 760px; margin: 0 auto; }
.estimate .section-head { text-align: center; margin-left: auto; margin-right: auto; }
.estimate .section-head p { margin-left: auto; margin-right: auto; }

.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
/* Beside the form the photo and its one-line caption fill the form's height, cropped by object-fit; the family stays in frame down to 901px. */
.contact-photo { margin: 0; }
.contact-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.contact-photo figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
@media (min-width: 901px) {
  .contact-photo { position: relative; align-self: stretch; }
  .contact-photo img { position: absolute; top: 0; left: 0; height: calc(100% - 32px); object-fit: cover; object-position: 50% 70%; }
  .contact-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
}

/* ── Footer (brand frame) ── */
.site-footer { background: var(--charcoal-2); color: #b9bdc2; padding: 64px 0 96px; font-size: 14px; line-height: 20px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer h2 { color: var(--on-dark); font-size: 16px; line-height: 24px; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--tan); }
.foot-logo { width: 170px; margin-bottom: 16px; }
.foot-logo img { width: 100%; }

/* Logo puzzles (hh-logo-puzzle.js): play on hover, exist only while they play. The script
   places each one exactly on its logo and sets its size. */
.lp-host { position: relative; display: block; flex-shrink: 0; }
.lp-host.is-puzzling img { visibility: hidden; }
.lp { position: absolute; z-index: 1; display: block; overflow: visible; pointer-events: none; }
.foot-phone { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 28px; color: #fdfdfd !important; font-variant-numeric: tabular-nums; }
.foot-legal { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 40px; padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; color: #8e939a; }
.foot-credit { display: inline-flex; align-items: center; gap: 8px; }
.foot-credit img { display: block; }
.foot-note { flex-basis: 100%; }

/* Mobile call bar */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar { display: grid; grid-template-columns: 1.15fr 0.85fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-callbar); background: var(--charcoal-2); border-top: 3px solid var(--tan); padding-bottom: env(safe-area-inset-bottom); }
  .callbar a, .callbar button { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; font-size: 14px; line-height: 20px; text-decoration: none; border: 0; cursor: pointer; }
  .callbar .call { background: var(--tan); color: var(--charcoal-2); }
  .callbar .chat { background: transparent; color: var(--on-dark); }
  #hh-chat:not(.hh-chat-inline) #hh-chat-bubble { display: none; }
  #hh-chat:not(.hh-chat-inline) { bottom: 64px; }
}

/* ── Chat widget (static/hh-chat.js) ── */
#hh-chat { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-chat); font-family: var(--font-body); }
#hh-chat.hh-chat-inline { position: static; }
/* hh-site.js sets .chat-trigger-visible while an inline "Ask a question"
   button is on screen; the floating one steps aside so it never covers a CTA. */
.chat-trigger-visible #hh-chat:not(.hh-chat-open) #hh-chat-bubble { opacity: 0; pointer-events: none; transform: translateY(calc(var(--move) * 8px)); }
#hh-chat-bubble { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 24px 0 16px; border-radius: 9999px; background: var(--charcoal); color: var(--on-dark); border: 2px solid var(--tan); box-shadow: var(--shadow); cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; transition: transform var(--dur) var(--ease), opacity var(--dur-color) var(--ease); }
#hh-chat-bubble:hover { transform: translateY(calc(var(--move) * -2px)); }
#hh-chat-bubble:active { transform: scale(calc(1 - var(--move) * 0.02)); }
#hh-chat-bubble .icon { color: var(--tan); width: 24px; height: 24px; }
#hh-chat.hh-chat-open #hh-chat-bubble { padding: 0; width: 56px; justify-content: center; }
#hh-chat-panel { position: absolute; right: 0; bottom: 72px; width: 370px; max-width: calc(100vw - 32px); height: 510px; max-height: 70vh; max-height: min(70dvh, calc(100dvh - 180px)); background: var(--surface); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(20, 22, 25, 0.3); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.hh-chat-inline #hh-chat-panel { position: static; width: 100%; max-width: none; height: 540px; max-height: none; box-shadow: var(--shadow); }
#hh-chat-panel.hh-chat-hidden { display: none; }
#hh-chat-head { background: var(--charcoal); color: var(--on-dark); padding: 8px 8px 8px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 3px solid var(--tan); }
#hh-chat-logo { display: block; width: 88px; height: auto; flex-shrink: 0; }
#hh-chat-call { margin-left: auto; color: var(--tan); font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
#hh-chat-close { background: none; border: 0; color: var(--on-dark); cursor: pointer; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; margin: -8px -4px -8px 0; }
#hh-chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-2); }
.hh-msg { max-width: 86%; padding: 8px 12px; border-radius: var(--radius); font-size: 14px; line-height: 20px; word-wrap: break-word; }
.hh-msg p { margin: 0 0 8px; }
.hh-msg p:last-child { margin: 0; }
.hh-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; overflow-wrap: anywhere; }
.hh-me { white-space: pre-wrap; }
.hh-staff { background: var(--surface); color: var(--ink); align-self: flex-start; border: 1px solid var(--accent-ink); }
.hh-who { display: block; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.hh-retry { display: block; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.hh-ai { background: var(--surface); color: var(--ink); align-self: flex-start; }
.hh-me { background: var(--charcoal); color: #fdfdfd; align-self: flex-end; }
.hh-err { align-self: center; color: var(--err); border: 1px solid var(--err); background: transparent; }
.hh-typing { color: var(--muted); font-size: 14px; line-height: 20px; padding: 0 4px; }
#hh-chat-prompts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; background: var(--bg-2); }
#hh-chat-prompts[hidden] { display: none; }
#hh-chat-prompts button { min-height: 32px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 9999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; transition: border-color var(--dur-color) var(--ease); }
#hh-chat-prompts button:hover { border-color: var(--accent-ink); }
#hh-chat-prompts button:active { transform: translateY(calc(var(--move) * 1px)); }
#hh-chat-form { display: flex; gap: 8px; padding: 8px; border-top: 1px solid var(--line); background: var(--surface); }
#hh-chat-input { flex: 1; resize: none; font: inherit; font-size: 16px; line-height: 24px; padding: 8px 12px; border: 1.5px solid var(--input-border); border-radius: var(--radius); max-height: 90px; background: var(--bg); color: var(--ink); }
#hh-chat-send { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius); background: var(--tan); color: var(--charcoal-2); font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; cursor: pointer; transition: transform var(--dur) var(--ease); }
#hh-chat-send:active { transform: scale(calc(1 - var(--move) * 0.02)); }
#hh-chat-send:disabled { opacity: 0.5; cursor: default; }
#hh-chat-legal { margin: 0; padding: 0 12px 8px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 16px; }
#hh-chat-legal a { color: inherit; }
#hh-chat-end { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
#hh-chat-end[hidden] { display: none; }
#hh-chat-end:disabled { opacity: 0.5; cursor: default; }
#hh-chat-legal #hh-chat-brand { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; text-decoration: none; }
#hh-chat-legal #hh-chat-brand:hover { color: var(--ink); text-decoration: underline; }
#hh-chat-brand img { display: block; width: 16px; height: 16px; }
.hh-live-icon { position: relative; display: flex; flex-shrink: 0; }
.hh-live-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 9999px; background: var(--live); box-shadow: 0 0 0 2px var(--charcoal); }
.callbar .hh-live-dot { box-shadow: 0 0 0 2px var(--charcoal-2); }
.hh-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: var(--live); opacity: 0; }
@keyframes hh-live-pulse { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(calc(1 + var(--move) * 1.6)); } }
@media (prefers-reduced-motion: no-preference) { .hh-live-dot::after { animation: hh-live-pulse 2000ms var(--ease) infinite; } }
#hh-chat-dot { width: 12px; height: 12px; border-radius: 9999px; background: var(--tan); }
.hh-chat-unread .callbar .chat { position: relative; }
.hh-chat-unread .callbar .chat::after { content: ""; position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-radius: 9999px; background: var(--tan); }

@media print {
  .site-header, .callbar, #hh-chat, .site-footer { display: none !important; }
  /* The building checklist and tool results print as plain lists. */
  .no-print, .split aside, .hero-bg, .page-hero .btn-row, .crumbs, .tool-form, [data-tool-lead], .section:has(.related) { display: none !important; }
  .page-hero { background: none; color: #000; padding: 0 0 16px; }
  .page-hero h1 { background: none; -webkit-text-fill-color: #000; color: #000; }
  .split { display: block; }
  .section { padding: 16px 0; }
  .section.alt { background: none; }
  .tool-result { background: none; border: 1px solid #000; }
  .tool-result .est-label, .tool-result .est-range, .tool-result .est-source { color: #000; }
  .tool-item, .checklist li { break-inside: avoid; }
  a { color: #000; }
}

/* ── Area pages: service notes (unique per county) ── */
.svc-notes { display: grid; gap: 12px; margin: 0 0 24px; }
.svc-notes a { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: var(--radius); background: var(--bg-2); color: var(--ink); text-decoration: none; transition: background-color var(--dur-color) var(--ease); }
.svc-notes a:hover { background: var(--line); }
.svc-notes .icon { width: 24px; height: 24px; color: var(--slate-ink); margin-top: 2px; }
.svc-notes strong { display: block; font-family: var(--font-display); margin-bottom: 2px; }
.svc-notes span { color: var(--muted); }
.svc-notes span strong { color: var(--ink); }

/* ── Project photos in job order ── */
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 32px; }
.stage { margin: 0; display: grid; gap: 8px; align-content: start; }
.stage figcaption { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; }
.stage img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ── Reviews (renders only with real Google data) ── */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.quotes figure { margin: 0; background: var(--surface); border-radius: var(--radius); padding: 24px; border: 1px solid var(--line); }
.quotes blockquote { margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.quotes figcaption { color: var(--muted); font-size: 14px; line-height: 20px; font-weight: 600; }

/* ── Cost estimator ── */
.hint { color: var(--muted); font-size: 14px; line-height: 20px; margin: 8px 0 0; }
.est-form { display: grid; gap: 24px; }
.opt-group { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.opt-group legend { font-weight: 700; font-size: 14px; line-height: 20px; margin-bottom: 8px; padding: 0; }
.opt-card { position: relative; display: block; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt-card span { display: grid; gap: 2px; padding: 12px 16px; border: 1.5px solid var(--input-border); border-radius: var(--radius); background: var(--bg); min-height: 56px; transition: border-color var(--dur-color) var(--ease), background-color var(--dur-color) var(--ease); }
.opt-card small { color: var(--muted); font-size: 12px; line-height: 16px; }
.opt-card input:checked + span { border-color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--ink); }
.opt-card input:focus-visible + span { outline: 3px solid var(--tan); outline-offset: 2px; }
.est-form .btn { justify-self: start; }
.est-result { margin: 32px 0; padding: 24px 32px; border-radius: var(--radius); background: var(--charcoal); color: var(--on-dark-muted); }
.est-result:focus { outline: none; }
.est-label { font-family: var(--font-display); font-weight: 700; color: var(--tan); margin: 0 0 4px; }
.est-range { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 36px; color: #fdfdfd; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .est-range { font-size: 36px; line-height: 40px; } }
.est-caveat, .est-source { font-size: 14px; line-height: 20px; }
.est-source a { color: var(--tan); }
.est-lead { margin-top: 8px; }
.est-cta { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: -16px 0 32px; padding: 16px; border-radius: var(--radius); background: var(--tan); color: var(--charcoal-2); text-decoration: none; transition: transform var(--dur) var(--ease); }
.est-cta:hover { color: var(--charcoal-2); transform: translateY(calc(var(--move) * -2px)); }
.est-cta .icon { width: 32px; height: 32px; }
.est-cta strong { display: block; font-family: var(--font-display); }
.est-cta span { font-size: 14px; line-height: 20px; }

/* ── Colors ── */
.color-line { margin-bottom: 24px; }
.color-line h3 { margin-bottom: 2px; }
.swatches { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.swatches li { display: grid; gap: 8px; font-size: 14px; line-height: 20px; margin: 0; }
.swatch { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }

/* ── Planning tools and the building checklist ── */
.tool-result .est-range { font-size: 24px; line-height: 32px; }
@media (min-width: 768px) { .tool-result .est-range { font-size: 30px; line-height: 36px; } }
.tool .est-result { margin-bottom: 24px; }
.tool-items { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.tool-items[hidden], .est-copy[hidden], .opt-group[hidden] { display: none; }
.tool-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: var(--radius); background: var(--bg-2); }
.tool-item strong { display: block; font-family: var(--font-display); }
.tool-item p { margin: 4px 0 0; color: var(--muted); }
.tool-mark .icon { width: 24px; height: 24px; }
.tool-item.ok .tool-mark { color: var(--ok); }
.tool-item.check .tool-mark { color: var(--slate-ink); }
.tool-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tool-links a { font-weight: 600; font-size: 14px; line-height: 20px; }
.tool-print { margin: 0 0 32px; }
.prose .checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 32px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 2px solid var(--slate-ink); border-radius: var(--radius-sm); }
.copy-card { margin-bottom: 24px; }
.copy-card h2 { font-size: 20px; line-height: 28px; }
.copy-card p { color: var(--muted); }
.est-copy { display: grid; gap: 8px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(236, 238, 240, 0.2); }
.est-copy label { font-weight: 600; font-size: 14px; line-height: 20px; color: #fdfdfd; }
.est-copy-row { display: flex; flex-wrap: wrap; gap: 8px; }
.est-copy input { flex: 1 1 220px; font: inherit; font-size: 16px; line-height: 24px; padding: 8px 12px; min-height: 44px; border-radius: var(--radius); border: 1.5px solid rgba(236, 238, 240, 0.4); background: var(--charcoal-2); color: #fdfdfd; }
.est-copy input:focus { border-color: #fdfdfd; outline: 3px solid color-mix(in srgb, var(--tan) 45%, transparent); outline-offset: 0; }
.est-copy .form-status, .est-copy .form-status.ok, .est-copy .form-status.err { color: #fdfdfd; }