/* Mr. Gomes Remodeling — site stylesheet
   Design system matches the Mr. Gomes brand used across the lead-gen landing
   pages (artifacts/mrgomes-leads): logo navy + logo red, Montserrat typeface,
   sharp 4px corners. Same token names as the previous build, new brand values,
   so nothing downstream (generated HTML) needed to change. */

/* Self-hosted Montserrat (latin subset, variable font: one file covers 400-700). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-var-latin.woff2') format('woff2');
}

:root {
  --navy-900: #111c41;   /* foreground / darkest navy — body text, footer */
  --navy-800: #1b2d69;   /* primary navy — headings, primary buttons */
  --navy-700: #25397f;   /* lighter navy — gradients, hover */
  --navy-600: #3a4f93;   /* lightest navy accent */
  --red-700: #6c1313;    /* accent border — darker crimson */
  --red-600: #8f1919;    /* accent / CTA crimson */
  --red-500: #a83636;    /* crimson hover */
  --ink: #111c41;        /* body text is navy-tinted, not black */
  --muted: #3e4b74;      /* muted-foreground slate navy */
  --muted-2: #6b769c;    /* lighter slate for tertiary text */
  --line: #c2c7d6;       /* border */
  --line-2: #dcdfe8;     /* lighter border tint */
  --bg: #f6f3ee;         /* page background — warm cream */
  --bg-alt: #efe8db;     /* alternate section background — deeper tan */
  --bg-navy-tint: #e8e2d5; /* chip / icon tile background */
  --ok: #1c7a3d;
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 1px 3px rgba(17,28,65,.10), 0 1px 2px -1px rgba(17,28,65,.08);
  --shadow-lg: 0 12px 20px -6px rgba(17,28,65,.16), 0 4px 8px -4px rgba(17,28,65,.10);
  --maxw: 1180px;
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; color: var(--ink); }
.lead { font-size: 1.12rem; color: var(--muted); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
.section-alt { background: var(--bg-alt); }
.section-navy { background: var(--navy-800); color: #fff; }
.section-navy h2, .section-navy p, .section-navy .lead { color: #fff; }
.section-navy .muted { color: #c7cee3; }
.center { text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-600); margin-bottom: 12px;
}
.kicker::before { content: ""; width: 18px; height: 2px; background: var(--red-600); display: inline-block; }
.section-navy .kicker { color: #ffb3ac; }
.section-navy .kicker::before { background: #ffb3ac; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: 8px; top: -48px; background: var(--navy-900); color: #fff;
  padding: 10px 16px; border-radius: var(--radius); z-index: 200; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* Buttons — solid fill, thin darker-tone border, sharp corners (no pill shapes) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius); font-weight: 700; font-size: .92rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: filter .12s ease, background-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn:active { filter: brightness(.96); }
.btn-primary { background: var(--red-600); color: #fff; border-color: var(--red-700); }
.btn-primary:hover { background: var(--red-500); }
.btn-secondary { background: #fff; color: var(--navy-800); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--navy-700); background: var(--bg-navy-tint); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 28px; font-size: 1rem; }

/* Top utility bar */
.topbar {
  background: var(--navy-900); color: #cfd7e6; font-size: .82rem;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.topbar-links span { color: #97a1bd; }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(246,243,238,.96);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1.05rem; color: var(--navy-900); font-weight: 700; }
.brand-text span { font-size: .72rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

nav.main-nav { display: flex; align-items: center; gap: 4px; }
nav.main-nav a {
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem;
  padding: 10px 12px; border-radius: var(--radius); transition: background-color .12s ease, color .12s ease;
}
nav.main-nav a:hover, nav.main-nav a[aria-current="page"] { background: var(--bg-navy-tint); color: var(--navy-800); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-phone { display: flex; flex-direction: column; text-decoration: none; text-align: right; }
.header-phone strong { color: var(--navy-900); font-size: 1rem; }
.header-phone span { font-size: .72rem; color: var(--muted); }

.nav-toggle { display: none; }
.nav-toggle-label {
  display: none; width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid var(--line);
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle-label span, .nav-toggle-label::before, .nav-toggle-label::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--navy-900); position: relative;
}
.nav-toggle-label::before { transform: translateY(-6px); position: absolute; }
.nav-toggle-label::after { transform: translateY(6px); position: absolute; }

.nav-row { flex-wrap: nowrap; }
@media (max-width: 940px) {
  nav.main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 8px; display: none; box-shadow: var(--shadow);
  }
  nav.main-nav a { padding: 12px 14px; }
  .nav-toggle:checked ~ nav.main-nav { display: flex; }
  .nav-toggle-label { display: inline-flex; flex: 0 0 auto; }
  .header-phone span { display: none; }
  .nav-row { gap: 8px; }
  .brand-text span { display: none; }
}
@media (max-width: 700px) {
  .header-phone { display: none; }
  .header-cta .btn { padding: 11px 16px; font-size: .86rem; }
}
@media (max-width: 640px) {
  /* The sticky mobile-call-bar at the bottom already offers Call + Free Estimate. */
  .header-cta { display: none; }
}
@media (max-width: 460px) {
  .brand-text strong { font-size: .92rem; }
  .brand img { height: 32px; }
}

/* Hero — real project photo behind a modern navy/crimson gradient for legibility */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background-image:
    radial-gradient(1000px 560px at 92% -12%, rgba(163, 29, 26, .40), transparent 62%),
    linear-gradient(108deg, rgba(9, 15, 37, .96) 0%, rgba(11, 19, 46, .93) 32%, rgba(17, 28, 65, .72) 58%, rgba(17, 28, 65, .40) 100%),
    url('/assets/img/portfolio/hero-kitchen-remodel-central-massachusetts.webp');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  border-bottom: 4px solid var(--red-600);
}
.hero-inner { position: relative; padding-top: 72px; padding-bottom: 60px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero .lead { color: #dbe0ef; max-width: 52ch; }
.hero-badges { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.hero-badge { display: flex; flex-direction: column; }
.hero-badge strong { font-size: 1.5rem; color: #fff; }
.hero-badge span { font-size: .76rem; color: #b3bcda; text-transform: uppercase; letter-spacing: .05em; }
.hero-cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-card {
  background: rgba(11,19,46,.55); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius); padding: 26px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.5);
}
.hero-card h3 { color: #fff; margin-bottom: 6px; }
.hero-card ul { margin: 16px 0 22px; padding: 0; list-style: none; display: grid; gap: 12px; }
.hero-card li { display: flex; gap: 10px; align-items: flex-start; color: #e3e7f4; font-size: .92rem; }
.hero-card li::before { content: "\2713"; color: #ffb3ac; font-weight: 700; }
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 40px; }
}

/* Breadcrumbs */
.breadcrumbs { padding: 14px 0; background: var(--bg-alt); border-bottom: 1px solid var(--line-2); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--muted); }
.breadcrumbs a { text-decoration: none; color: var(--muted); font-weight: 600; }
.breadcrumbs a:hover { color: var(--navy-800); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--muted-2); }

/* Sub-page hero (service pages) */
.page-hero { background: var(--navy-800); color: #fff; padding: 50px 0; border-bottom: 4px solid var(--red-600); }
.page-hero h1 { color: #fff; margin-bottom: 10px; }
.page-hero .lead { color: #dbe0ef; max-width: 62ch; }
.page-hero .hero-cta-row { margin-top: 24px; }

/* Grids */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* Cards — slightly larger radius than buttons, matching the shadcn radius scale */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px);
  padding: 26px; box-shadow: var(--shadow); color: var(--ink);
}
.card h1, .card h2, .card h3, .card h4 { color: var(--navy-900); }
/* A plain white .card sitting inside a .section-navy (or any dark) ancestor must not
   inherit that ancestor's light/white text colors — this has bitten us more than once. */
.card p, .card .muted, .card .small { color: var(--ink); }
.card .muted { color: var(--muted); }
.service-card { display: flex; flex-direction: column; gap: 12px; }
.service-card .icon {
  width: 50px; height: 50px; border-radius: var(--radius); background: var(--bg-navy-tint);
  display: flex; align-items: center; justify-content: center; color: var(--red-600);
}
.service-card .icon svg { width: 26px; height: 26px; }
.service-card a.card-link { margin-top: auto; font-weight: 700; color: var(--red-600); text-decoration: none; font-size: .92rem; }
.service-card a.card-link:hover { text-decoration: underline; }

.stat-strip { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; padding: 36px 0; }
.stat { text-align: center; }
.stat strong { display: block; font-size: 2rem; color: var(--navy-900); }
.stat span { font-size: .84rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Timeline */
.timeline { position: relative; margin: 32px 0 0; padding-left: 28px; border-left: 3px solid var(--line); }
.timeline-item { position: relative; padding-bottom: 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -35px; top: 3px; width: 13px; height: 13px; border-radius: var(--radius-sm);
  background: var(--red-600); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--red-600);
}
.timeline-year { font-weight: 700; color: var(--navy-800); font-size: 1.05rem; }

/* Before / after */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: calc(var(--radius) + 2px); overflow: hidden; box-shadow: var(--shadow); }
.ba-pair figure { margin: 0; position: relative; }
.ba-pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.ba-pair figcaption {
  position: absolute; left: 10px; bottom: 10px; background: var(--navy-900); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--radius-sm);
}
.ba-block { margin: 28px 0; }
.ba-caption { text-align: center; margin-top: 12px; color: var(--muted); font-size: .92rem; }

/* Portfolio */
.portfolio-item { border-radius: calc(var(--radius) + 2px); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.portfolio-item .tag {
  position: absolute; margin: 10px; background: var(--red-600); color: #fff; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: 5px 10px; border-radius: var(--radius-sm);
}
.portfolio-item .pair { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.portfolio-item img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.portfolio-item .body { padding: 16px 18px 20px; }
.portfolio-item h3 { margin-bottom: 4px; font-size: 1.05rem; }

/* Testimonials */
.testimonial { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.stars { color: var(--red-600); letter-spacing: 2px; font-size: 1rem; }
.testimonial p { color: var(--ink); font-size: .95rem; }
.testimonial footer { margin-top: auto; font-weight: 700; color: var(--navy-800); font-size: .9rem; }

/* Process steps */
.process-steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 940px) { .process-steps { grid-template-columns: 1fr; } }
.process-step { position: relative; padding: 28px 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); }
.process-step::before {
  counter-increment: step; content: counter(step); position: absolute; top: -16px; left: 22px;
  width: 34px; height: 34px; border-radius: var(--radius); background: var(--navy-800); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}

/* FAQ (native details, always crawlable) */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq-item summary {
  cursor: pointer; font-weight: 700; padding: 14px 4px; list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 12px; color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--red-600); font-weight: 400; flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 4px 16px; color: var(--muted); }

/* Service area chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: var(--bg-navy-tint); color: var(--navy-800); font-weight: 600; font-size: .85rem; padding: 8px 14px; border-radius: var(--radius); }

/* Table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
table.compare th, table.compare td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; }
table.compare th { background: var(--bg-alt); font-weight: 700; color: var(--navy-900); }
table.compare tr:last-child td { border-bottom: none; }

/* CTA band — flat crimson, sharp corners */
.cta-band { background: var(--red-600); color: #fff; border-radius: calc(var(--radius) + 2px); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border: 1px solid var(--red-700); }
.cta-band h2 { color: #fff; margin-bottom: 6px; }
.cta-band p { color: #ffdcd8; margin: 0; }

/* Forms */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); padding: 28px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 700; font-size: .86rem; color: var(--navy-900); }
.field input, .field select, .field textarea {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; color: var(--ink);
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--navy-700); outline-offset: 1px; }
.field-full { grid-column: 1 / -1; }
fieldset { border: none; padding: 0; margin: 0 0 16px; }
legend { font-weight: 700; color: var(--navy-900); margin-bottom: 8px; padding: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-row label {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 16px; font-size: .86rem; cursor: pointer; font-weight: 600;
}
.radio-row input { margin-right: 6px; accent-color: var(--red-600); }
.form-note { font-size: .8rem; color: var(--muted-2); margin-top: 10px; }

/* Trust bar */
.trust-bar { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.trust-bar .item { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy-800); font-size: .88rem; }

/* Footer */
.site-footer { background: var(--navy-900); color: #b9c3d6; padding: 56px 0 24px; }
.site-footer p { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px; }
.site-footer a { color: #b9c3d6; text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand img { height: 34px; }
.footer-brand strong { color: #fff; font-size: 1.05rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 20px; display: flex;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: #8b95ab;
}
.social-row { display: flex; gap: 12px; margin-top: 14px; }
.social-row a {
  width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center; color: #cfd7e6;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.social-row a svg { width: 17px; height: 17px; }
.social-row a:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; }

/* Sticky mobile call bar */
.mobile-call-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--navy-900); padding: 10px 14px; box-shadow: 0 -6px 20px rgba(0,0,0,.2);
  border-top: 3px solid var(--red-600);
}
.mobile-call-bar .row { display: flex; gap: 10px; }
.mobile-call-bar .btn { flex: 1; }
@media (max-width: 640px) {
  .mobile-call-bar { display: block; }
  body { padding-bottom: 74px; }
}

/* Utility spacing */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack { display: grid; gap: 16px; }
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 940px) { .two-col { grid-template-columns: 1fr; } }

/* Icon sizing defaults (inline SVGs, stroke = currentColor) */
svg { display: inline-block; vertical-align: middle; width: 1em; height: 1em; }
.icon-inline { display: inline-flex; width: 18px; height: 18px; color: var(--red-600); flex-shrink: 0; }
.icon-inline svg { width: 100%; height: 100%; }
.rating-inline { display: inline-flex; align-items: center; gap: 5px; }
.rating-inline svg { width: 13px; height: 13px; color: #f0a63a; }
.hero-card li svg, .trust-bar .item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--red-600); }
.hero-card li::before { content: none; }
.trust-bar .item::before { content: none; }

/* Estimate popup (native <dialog>) — mobile-first: compact by default, roomier from 480px up.
   Positioning is set explicitly (not left to the UA dialog stylesheet) because some mobile
   in-app browsers (Instagram/Facebook webviews, older Android WebView) support the showModal()
   API but not the top-layer centering, which otherwise leaves the card unstyled and unpositioned. */
.modal {
  border: none; padding: 0; margin: 0; background: transparent;
  width: 100%; height: 100%; max-width: none; max-height: none;
  z-index: 300;
}
.modal[open] {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal::backdrop { background: rgba(17,28,65,.6); }
/* Fallback dimming for browsers with incomplete <dialog> ::backdrop support */
.modal[open]::before {
  content: ""; position: fixed; inset: 0; background: rgba(17,28,65,.6); z-index: -1;
}
/* Locks the background so it cannot scroll behind the popup (set via JS on open/close). */
html.modal-open { overflow: hidden; height: 100%; overscroll-behavior: none; }
html.modal-open body { overflow: hidden; height: 100%; }
.modal-form {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px);
  padding: 22px 18px 18px; box-shadow: var(--shadow-lg);
  width: min(92vw, 420px); max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none; /* hide the scrollbar, keep it scrollable */
}
.modal-form::-webkit-scrollbar { display: none; width: 0; height: 0; }
.modal-form h3 { margin-bottom: 2px; font-size: 1.1rem; }
.modal-form .kicker { margin-bottom: 4px; }
.modal-form .field { margin-bottom: 10px; }
.modal-form .field label { font-size: .8rem; margin-bottom: 3px; }
.modal-form .field input, .modal-form .field select, .modal-form .field textarea { padding: 9px 12px; }
.modal-form textarea { min-height: 44px; }
.modal-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff; color: var(--navy-800); display: flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0;
}
.modal-close svg { width: 15px; height: 15px; }
.modal-close:hover { background: var(--bg-navy-tint); }
@media (min-width: 480px) {
  .modal-form { width: min(90vw, 460px); padding: 22px 26px 20px; }
  .modal-form h3 { font-size: 1.2rem; }
  .modal-form .field { margin-bottom: 12px; }
  .modal-form .field input, .modal-form .field select, .modal-form .field textarea { padding: 10px 14px; }
}
@media (min-width: 480px) and (max-height: 760px) {
  /* Shorter laptop windows: trim further so the submit button never gets cut off. */
  .modal-form { padding: 16px 26px 16px; }
  .modal-form h3 { font-size: 1.1rem; }
  .modal-form .field { margin-bottom: 8px; }
  .modal-form .field label { margin-bottom: 2px; }
  .modal-form .field input, .modal-form .field select, .modal-form .field textarea { padding: 8px 14px; }
  .modal-form textarea { min-height: 36px; }
}

/* ==================== Location landing pages (kitchen, etc.) ==================== */

/* Before/after drag-to-compare slider */
.compare-slider {
  position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); cursor: ew-resize; user-select: none;
  touch-action: pan-y;
}
.compare-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-slider .cs-before-wrap { position: absolute; inset: 0; overflow: hidden; width: 50%; }
.compare-slider .cs-before-wrap img { width: var(--cs-img-w, 200%); max-width: none; }
.compare-slider .cs-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: rgba(255,255,255,.9);
  transform: translateX(-50%); box-shadow: 0 0 8px rgba(0,0,0,.5); z-index: 5;
}
.compare-slider .cs-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2px solid var(--navy-800);
  box-shadow: 0 0 12px rgba(0,0,0,.4);
}
.compare-slider .cs-handle::before {
  content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; font-size: 18px; color: var(--navy-800); font-weight: 700;
}
.compare-slider .cs-tag { position: absolute; top: 12px; z-index: 4; color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: var(--radius-sm); pointer-events: none; }
.compare-slider .cs-tag-before { left: 12px; background: var(--navy-900); }
.compare-slider .cs-tag-after { right: 12px; background: var(--red-600); }
.compare-slider .cs-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: rgba(0,0,0,.62); color: #fff; font-size: .78rem; font-weight: 700; padding: 7px 16px;
  border-radius: 999px; pointer-events: none; transition: opacity .3s ease; white-space: nowrap;
}
.compare-slider.cs-dragging .cs-hint, .compare-slider.cs-moved .cs-hint { opacity: 0; }

/* Problem list */
.problem-item { border-left: 4px solid var(--red-600); padding: 4px 0 4px 18px; margin-bottom: 22px; }
.problem-item:last-child { margin-bottom: 0; }
.problem-item h3 { margin-bottom: 4px; }
.problem-item p { color: var(--red-600); font-weight: 700; font-size: .92rem; margin: 0; }

/* Us vs. them comparison */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .vs-grid { grid-template-columns: 1fr; } }
.vs-card { padding: 26px; border-radius: calc(var(--radius) + 2px); }
.vs-card.vs-them { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); }
.vs-card.vs-us { background: #fff; color: var(--ink); border: 2px solid var(--red-600); box-shadow: var(--shadow-lg); }
.vs-card h3 { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.15); }
.vs-card.vs-us h3 { border-bottom-color: var(--line); color: var(--navy-900); }
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vs-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; font-weight: 600; }
.vs-them .vs-list li { color: #d7dcec; }
.vs-them .vs-list svg { color: var(--red-500); flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.vs-us .vs-list svg { color: var(--red-600); flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }

/* Week-by-week timeline table */
.week-table { border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); overflow: hidden; box-shadow: var(--shadow); }
.week-row { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid var(--line); }
.week-row:last-child { border-bottom: none; }
.week-row:nth-child(even) { background: var(--bg-alt); }
.week-row .wk-label { background: var(--navy-800); color: #fff; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.week-row .wk-label span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #b9c3d6; margin-bottom: 3px; }
.week-row .wk-label strong { font-size: 1.05rem; }
.week-row .wk-body { padding: 18px 20px; }
.week-row .wk-body .wk-title { font-weight: 700; color: var(--navy-900); margin-bottom: 4px; }
.week-row .wk-body p { margin: 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) { .week-row { grid-template-columns: 1fr; } .week-row .wk-label { flex-direction: row; gap: 8px; align-items: baseline; } }

/* Directory grid (state -> county -> city links) */
.dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 940px) { .dir-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
.dir-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); background: #fff; padding: 12px 14px; border-radius: var(--radius); font-weight: 700; font-size: .9rem; color: var(--navy-900); text-decoration: none; text-align: center; }
.dir-link:hover { background: var(--red-600); color: #fff; border-color: var(--red-600); }
.dir-link .dir-count { color: var(--red-600); font-size: .8rem; font-weight: 700; }
.dir-link:hover .dir-count { color: #fff; }
.dir-back { display: inline-block; margin-top: 20px; background: var(--navy-800); color: #fff; padding: 12px 22px; border-radius: var(--radius); font-weight: 700; font-size: .85rem; text-decoration: none; }
.dir-back:hover { background: var(--navy-700); }

/* City-specific local content block */
.local-content-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; }
@media (max-width: 940px) { .local-content-grid { grid-template-columns: 1fr; } }
.local-hook { color: var(--red-600); font-weight: 700; font-style: italic; margin-bottom: 14px; }
.local-checklist { background: var(--navy-800); color: #fff; padding: 24px; border-radius: calc(var(--radius) + 2px); }
.local-checklist h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.local-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.local-checklist li { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; color: #dfe4f0; }
.local-checklist li svg { color: var(--red-500); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.local-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.local-stats div { text-align: center; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 12px 6px; }
.local-stats strong { display: block; font-size: 1.3rem; color: var(--navy-900); }
.local-stats span { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--red-600); font-weight: 700; }
.nearby-box { margin-top: 16px; border: 1px solid var(--line); background: var(--bg-alt); border-radius: var(--radius); padding: 16px; }
.nearby-box p { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); font-weight: 700; margin-bottom: 10px; }
.nearby-box .chip-row a.chip { text-decoration: none; }
.nearby-box .chip-row a.chip:hover { background: var(--red-600); color: #fff; }
.local-faq-box { margin-top: 16px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 18px; }
.local-faq-box h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-900); margin-bottom: 12px; }
.local-faq-item { border-left: 3px solid var(--red-600); padding-left: 12px; margin-bottom: 12px; }
.local-faq-item:last-child { margin-bottom: 0; }
.local-faq-item p:first-child { font-weight: 700; color: var(--navy-900); font-size: .88rem; margin: 0 0 3px; }
.local-faq-item p:last-child { font-size: .85rem; color: var(--muted); margin: 0; }
.local-review { margin-top: 16px; border-left: 3px solid var(--red-600); background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 18px; }
.local-review .stars { display: block; margin-bottom: 8px; }
.local-review p:first-of-type { font-style: italic; font-size: .9rem; color: var(--ink); }
.local-review .attribution { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--navy-900); }

/* Optional per-city local-content block (data-local-content), empty by default */
.local-extra-section:empty,
.local-extra-section div[data-local-content]:empty { display: none; }
.local-extra-section { padding-top: 0; padding-bottom: 0; }
.local-extra-intro { font-size: 1rem; color: var(--ink); margin-bottom: 20px; }
.local-projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 20px; }
.local-project-card { background: var(--bg-alt); border-radius: var(--radius); overflow: hidden; }
.local-project-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.local-project-card h4 { margin: 12px 16px 2px; }
.local-project-card .local-project-area { margin: 0 16px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.local-project-card p:not(.local-project-area) { margin: 6px 16px 14px; font-size: .9rem; color: var(--muted); }
.local-permit-note, .local-housing-profile { font-size: .92rem; color: var(--muted); margin-top: 12px; }

/* Founder split section */
.founder-photo-wrap { position: relative; }
.founder-photo-wrap::before { content: ""; position: absolute; inset: 0; background: var(--red-600); transform: translate(-14px, 14px); border-radius: calc(var(--radius) + 2px); z-index: 0; }
.founder-photo-wrap img { position: relative; z-index: 1; border-radius: calc(var(--radius) + 2px); border: 3px solid #fff; width: 100%; }
.founder-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); }
.founder-stats strong { display: block; font-size: 2rem; color: #f0c14b; }
.founder-stats span { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #b9c3d6; }

/* Service area with towns list sidebar */
.towns-scroll { max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding-right: 4px; }
.towns-scroll div { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: #dfe4f0; }
.towns-scroll div::before { content: ""; width: 6px; height: 6px; background: var(--red-600); flex-shrink: 0; }
.county-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.county-stat-row div { text-align: center; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); border-radius: var(--radius); padding: 12px 6px; }
.county-stat-row strong { display: block; font-size: 1.4rem; color: var(--red-500); }
.county-stat-row span { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: #b9c3d6; }

/* Full towns directory (ServiceAreaSection) */
.towns-directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .towns-directory-grid { grid-template-columns: 1fr; } }
.towns-directory-card { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); padding: 22px; box-shadow: var(--shadow); }
.towns-directory-card h3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.towns-directory-card h3 span { color: var(--red-600); font-size: .85rem; }
.towns-directory-list { display: flex; flex-wrap: wrap; gap: 8px; }
.towns-directory-list a { text-decoration: none; font-size: .82rem; font-weight: 600; color: var(--navy-800); background: var(--bg-navy-tint); padding: 6px 11px; border-radius: var(--radius-sm); }

/* Guide / article pages (long-form informational content, e.g. /guides/) */
.guide-hero { background: var(--navy-800); color: #fff; padding: 40px 0 32px; }
.guide-hero .breadcrumbs-inline { font-size: .82rem; color: #b9c3d6; margin-bottom: 14px; }
.guide-hero .breadcrumbs-inline a { color: #b9c3d6; text-decoration: none; font-weight: 600; }
.guide-hero .breadcrumbs-inline a:hover { color: #fff; }
.guide-hero h1 { color: #fff; max-width: 900px; }
.guide-byline { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .86rem; color: #c7cee3; }
.guide-byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.guide-byline strong { color: #fff; }
.guide-byline .dot::before { content: "\2022"; margin: 0 6px; }
.guide-body { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
.guide-body h2 { margin-top: 2.2em; }
.guide-body h2:first-of-type { margin-top: 0; }
.guide-body p, .guide-body li { color: var(--ink); }
.guide-body ul, .guide-body ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.guide-body li { margin-bottom: .5em; }
.guide-body a.inline-link { color: var(--red-600); text-decoration: underline; font-weight: 600; }
.guide-body a.inline-link:hover { color: var(--red-500); }
.guide-toc { background: var(--bg-alt); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 2em; }
.guide-toc p { font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.guide-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: toc; }
.guide-toc li { counter-increment: toc; margin: 0; }
.guide-toc li::before { content: counter(toc) ". "; color: var(--red-600); font-weight: 700; }
.guide-toc a { text-decoration: none; color: var(--navy-800); font-weight: 600; font-size: .92rem; }
.guide-toc a:hover { text-decoration: underline; }
.answer-box { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red-600); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 2em; box-shadow: var(--shadow); }
.answer-box p { margin: 0; color: var(--ink); }
.answer-box .answer-label { display: block; font-weight: 700; text-transform: uppercase; font-size: .74rem; letter-spacing: .06em; color: var(--red-600); margin-bottom: 8px; }
.compare-table-wrap { overflow-x: auto; margin: 0 0 1.6em; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
.compare-table th, .compare-table td { border: 1px solid var(--line-2); padding: 10px 14px; text-align: left; vertical-align: top; }
.compare-table th { background: var(--navy-800); color: #fff; font-weight: 700; }
.compare-table tr:nth-child(even) td { background: var(--bg-alt); }
.guide-cta-box { background: var(--bg-alt); border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 2px); padding: 24px; margin: 1.6em 0; text-align: center; }
.guide-cta-box h3 { margin-bottom: 8px; }
.guide-cta-box p { color: var(--muted); margin-bottom: 16px; }
.guide-sources { font-size: .82rem; color: var(--muted-2); border-top: 1px solid var(--line); margin-top: 3em; padding-top: 20px; }
.guide-sources p { margin-bottom: 6px; }
.guide-sources a { color: var(--muted-2); }
.guide-related-service { margin: 2em 0; padding: 20px 0; border-top: 1px solid var(--line); }
.guide-related-service h3 { margin-bottom: 10px; }
.guide-related-service p { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .guide-body { padding: 32px 16px; } }
.towns-directory-list a:hover { background: var(--red-600); color: #fff; }

/* ===== Brand refresh (Montserrat, logo navy + red, light and airy, rounded) ===== */
:root {
  --navy-900: #1c2847;
  --navy-800: #2a3c66;   /* logo navy */
  --navy-700: #34497a;
  --navy-600: #4a5f92;
  --red-700: #7f1414;
  --red-600: #9e1a1a;    /* logo red */
  --red-500: #b52525;
  --ink: #1f2638;
  --muted: #5d6475;
  --muted-2: #8b909c;
  --line: #e3e5ea;
  --line-2: #eef0f3;
  --bg: #ffffff;
  --bg-alt: #f5f6f8;
  --bg-navy-tint: #eef1f7;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(28, 40, 71, .04), 0 10px 28px -14px rgba(28, 40, 71, .16);
  --shadow-lg: 0 28px 56px -24px rgba(28, 40, 71, .32);
  --maxw: 1200px;
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html { font-size: 17px; }
body { font-weight: 400; line-height: 1.7; color: var(--ink); }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; color: var(--navy-900); }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }
h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
.lead { font-size: 1.08rem; color: var(--muted); }
section { padding: 92px 0; }
.section-alt { background: var(--bg-alt); }

.kicker { font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: var(--red-600); margin-bottom: 16px; }
.kicker::before { width: 24px; height: 2px; }

/* Buttons */
.btn { border-radius: 8px; font-weight: 600; font-size: .86rem; letter-spacing: .01em; padding: 14px 26px; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 17px 32px; font-size: .92rem; }
.btn-primary { background: var(--red-600); border-color: var(--red-600); }
.btn-primary:hover { background: var(--red-700); border-color: var(--red-700); }
.btn-secondary { background: #fff; color: var(--navy-800); border-color: var(--line); }
.btn-secondary:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* Top bar + header */
.topbar { background: var(--navy-900); font-size: .76rem; }
.topbar a { font-weight: 500; }
.site-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line-2); }
.nav-row { padding-top: 16px; padding-bottom: 16px; }
nav.main-nav a { font-weight: 500; font-size: .86rem; color: var(--ink); padding: 8px 12px; position: relative; }
nav.main-nav a:hover, nav.main-nav a[aria-current="page"] { background: transparent; color: var(--red-600); }
nav.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--red-600); border-radius: 2px;
}

/* Homepage hero: light and airy like the Facebook cover. Other pages keep the dark photo hero. */
.hero-home {
  color: var(--ink);
  background-image:
    linear-gradient(90deg, rgba(247, 248, 250, .98) 0%, rgba(247, 248, 250, .94) 42%, rgba(247, 248, 250, .55) 68%, rgba(247, 248, 250, .10) 100%),
    url('/assets/img/portfolio/hero-kitchen-remodel-central-massachusetts.webp');
  border-bottom: none;
}
.hero-home .hero-inner { padding-top: 104px; padding-bottom: 104px; gap: 56px; }
.hero-tagline { margin: 0 0 26px; font-weight: 700; font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.12; letter-spacing: -0.02em; }
.hero-tagline .hl { display: block; width: fit-content; color: #fff; padding: .02em .32em .08em; }
.hero-tagline .hl-red { background: var(--red-600); }
.hero-tagline .hl-navy { background: var(--navy-800); margin-left: -.18em; }
.hero-home h1 { color: var(--navy-900); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.25; margin-bottom: 14px; }
.hero-home .lead { color: var(--muted); }
.hero-home .hero-cta-row { margin-top: 32px; }
.hero-home .hero-badges { gap: 40px; margin-top: 44px; }
.hero-home .hero-badge strong { color: var(--navy-800); font-weight: 700; font-size: 1.6rem; }
.hero-home .hero-badge span { color: var(--muted); font-weight: 500; font-size: .7rem; letter-spacing: .1em; }
.hero-home .hero-card { background: #fff; border: none; border-radius: 18px; padding: 34px 30px; box-shadow: var(--shadow-lg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-home .hero-card h3 { color: var(--navy-900); font-size: 1.2rem; }
.hero-home .hero-card li { color: var(--ink); font-size: .9rem; }
.hero-home .hero-card li svg { color: var(--red-600); }

/* Other pages: dark photo hero, refreshed edges */
.hero:not(.hero-home) { border-bottom: none; }
.hero:not(.hero-home) .hero-card { border-radius: 18px; }
.page-hero, .guide-hero { border-bottom: none; }
.page-hero { background: var(--navy-800); }

/* Trust bar */
.trust-bar { gap: 14px 40px; padding-top: 26px; padding-bottom: 26px; border-color: var(--line-2); }
.trust-bar .item { font-weight: 500; font-size: .84rem; color: var(--navy-800); }

/* Cards */
.grid { gap: 24px; }
.card { border: 1px solid var(--line-2); border-radius: 16px; padding: 30px 26px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.service-card .icon { width: 52px; height: 52px; border-radius: 14px; background: var(--bg-navy-tint); color: var(--red-600); }
.service-card h3 { color: var(--navy-900); }
.service-card a.card-link { font-weight: 600; font-size: .86rem; color: var(--red-600); }

/* Story + timeline */
.timeline { border-left: 2px solid var(--line); }
.timeline-item::before { width: 12px; height: 12px; left: -35px; top: 7px; border-radius: 50%; background: var(--red-600); border: 3px solid var(--bg-alt); box-shadow: none; }
.timeline-year { font-weight: 700; color: var(--navy-800); }
.two-col img { border-radius: 18px !important; }

/* Before / after: rounded photo cards like the cover collage */
.ba-pair { gap: 8px; border-radius: 0; overflow: visible; box-shadow: none; }
.ba-pair figure { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.ba-pair figcaption { background: rgba(255, 255, 255, .94); color: var(--navy-800); font-weight: 600; font-size: .68rem; letter-spacing: .1em; padding: 6px 12px; border-radius: 999px; left: 12px; bottom: 12px; }

/* Testimonials */
.stars { color: #e8a93b; }
.testimonial footer { font-weight: 600; color: var(--navy-800); }

/* Chips */
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--navy-800); font-weight: 500; padding: 8px 16px; }

/* FAQ */
.faq-item { border-bottom-color: var(--line); }
.faq-item summary { font-weight: 600; color: var(--navy-900); }

/* Closing CTA */
.cta-band { background: var(--navy-800); border: none; border-radius: 22px; padding: 56px; }
.cta-band p { color: #c9d0e2; }

/* Footer */
.site-footer { background: var(--navy-900); }
.site-footer h4 { font-weight: 600; font-size: .76rem; letter-spacing: .12em; }
.social-row a { border-radius: 50%; }

/* Modal + mobile bar */
.mobile-call-bar { background: var(--navy-900); border-top: none; }
.modal-form { border-radius: 18px; border: none; }
.field input, .field select, .field textarea { border-radius: 8px; }
.modal-close { border-radius: 8px; }

@media (max-width: 940px) {
  .hero-home { background-image: linear-gradient(180deg, rgba(247, 248, 250, .95), rgba(247, 248, 250, .90)), url('/assets/img/portfolio/hero-kitchen-remodel-central-massachusetts.webp'); }
  .hero-home .hero-inner { padding-top: 64px; padding-bottom: 64px; }
  section { padding: 68px 0; }
  nav.main-nav a[aria-current="page"]::after { display: none; }
}
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; line-height: 1.4; }
  .hero-tagline { font-size: 2.3rem; }
  .hero-tagline .hl-navy { margin-left: 0; }
  .hero-badges { gap: 26px; }
  .cta-band { padding: 40px 26px; }
}

/* Red accents on dark grounds: switch to a soft tint so small text and icons stay legible */
.hero:not(.hero-home) .kicker, .page-hero .kicker, .guide-hero .kicker { color: #ffb3ac; }
.hero:not(.hero-home) .kicker::before, .page-hero .kicker::before { background: #ffb3ac; }
.local-checklist li svg, .vs-them .vs-list svg, .county-stat-row strong { color: #ffb3ac; }
.towns-scroll div::before { background: #ffb3ac; }

/* Form controls do not inherit the page font by default (buttons rendered in Arial) */
button, input, select, textarea { font-family: inherit; }

/* Founder stats: white on the navy panel (the old gold clashed with the logo palette) */
.founder-stats strong { color: #fff; }
.founder-stats span { color: #c9d0e2; letter-spacing: .08em; }

/* Portfolio: three projects read better in three columns, with shorter photo pairs */
.portfolio-item img { aspect-ratio: 4 / 5; }
.portfolio-item .body { padding: 18px 20px 22px; }
.grid.grid-2:has(> .portfolio-item:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .grid.grid-2:has(> .portfolio-item:nth-child(3)) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.grid-2:has(> .portfolio-item:nth-child(3)) { grid-template-columns: 1fr; } }

/* =====================================================================================
   Home v2 (preview, scoped to body.home-v2).
   Ideas taken from a well-regarded competitor site and rebuilt in our palette: full-bleed
   photography, one calm accent on near-black, white and grey bands, small tracked uppercase
   labels, quiet outline buttons, generous vertical rhythm, a quick-facts block, a credentials
   strip and repeated calls to action.
   ===================================================================================== */
.home-v2 { --ink-950: #121826; --band-grey: #f4f5f7; }

/* Buttons and nav: small, tracked, uppercase */
.home-v2 .btn { border-radius: 3px; font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; padding: 16px 30px; }
.home-v2 .btn-lg { padding: 19px 36px; }
.home-v2 .btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7); }
.home-v2 .btn-outline-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; }
.home-v2 .btn-outline-dark { background: transparent; color: var(--navy-900); border: 1px solid var(--navy-900); }
.home-v2 .btn-outline-dark:hover { background: var(--navy-900); color: #fff; }
.home-v2 nav.main-nav a { font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.home-v2 .header-cta .btn { padding: 13px 22px; }
.home-v2 .topbar { font-size: .72rem; letter-spacing: .06em; }

/* Shared typography for the v2 bands */
.hv2-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--red-600); margin: 0 0 18px; }
.hv2-eyebrow.light { color: #ffb3ac; }
.home-v2 h2 { font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 20px; }
.hv2-narrow { max-width: 760px; margin: 0 auto; }
.hv2-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hv2-section { padding: 120px 0; }

/* 1. Hero: one big, sharp, landscape photo with a centered message */
.hv2-hero {
  position: relative; color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(600px, 90vh, 860px);
  background-image: linear-gradient(180deg, rgba(14, 18, 28, .66) 0%, rgba(14, 18, 28, .5) 55%, rgba(14, 18, 28, .72) 100%), url('/assets/img/kitchen/hero-kitchen.webp');
  background-size: cover; background-position: center; border-bottom: 4px solid var(--red-600);
}
.hv2-hero-inner { padding-top: 96px; padding-bottom: 64px; }
.hv2-hero .hv2-eyebrow { color: #fff; opacity: .9; margin-bottom: 26px; }
.hv2-hero .hv2-eyebrow span { opacity: .5; margin: 0 .5em; }
.hv2-hero .hero-tagline { margin: 0 auto 26px; font-size: clamp(2.2rem, 5.2vw, 4rem); }
.hv2-hero .hero-tagline .hl { margin-left: auto; margin-right: auto; }
.hv2-hero .hero-tagline .hl-navy { margin-left: auto; }
.hv2-hero h1 { color: #fff; font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; max-width: 760px; margin: 0 auto 10px; }
.hv2-hero .lead { color: rgba(255, 255, 255, .82); max-width: 560px; margin: 0 auto; font-weight: 400; }
.hv2-hero .hv2-btns { justify-content: center; margin-top: 38px; }
.hv2-stats { display: flex; justify-content: center; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 26px; padding-bottom: 34px; }
.hv2-stat { padding: 0 44px; text-align: center; }
.hv2-stat + .hv2-stat { border-left: 1px solid rgba(255, 255, 255, .22); }
.hv2-stat strong { display: block; font-size: 1.7rem; font-weight: 600; }
.hv2-stat span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }

/* 2. Quick facts */
.hv2-facts { text-align: center; }
.hv2-factlist { list-style: none; margin: 34px auto 40px; padding: 0; max-width: 720px; }
.hv2-factlist li { padding: 15px 0; border-bottom: 1px solid var(--line-2); font-size: .98rem; color: var(--ink); }
.hv2-factlist li:first-child { border-top: 1px solid var(--line-2); }
.hv2-factlist li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red-600); margin-right: 12px; vertical-align: middle; position: relative; top: -1px; }

/* 3. Split: edge-to-edge photo beside the services list */
.hv2-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--band-grey); }
.hv2-split-photo { position: relative; min-height: 640px; }
.hv2-split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv2-split-copy { padding: 96px clamp(28px, 5vw, 84px); align-self: center; }
.hv2-split-copy > p.muted { margin-bottom: 26px; }
.hv2-checklist { list-style: none; margin: 0; padding: 0; }
.hv2-checklist li { border-bottom: 1px solid var(--line); }
.hv2-checklist li:first-child { border-top: 1px solid var(--line); }
.hv2-checklist a { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 14px 0; text-decoration: none; color: inherit; }
.hv2-checklist a::before { content: "\2713"; color: var(--red-600); font-weight: 700; grid-row: span 2; line-height: 1.5; }
.hv2-checklist strong { font-size: .95rem; font-weight: 600; color: var(--navy-900); }
.hv2-checklist span { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.hv2-checklist a:hover strong { color: var(--red-600); }

/* 4. Dark band: why homeowners choose us */
.hv2-dark { background: var(--ink-950); color: #fff; text-align: center; }
.hv2-dark h2 { color: #fff; }
.hv2-checks { list-style: none; margin: 38px auto 44px; padding: 0; max-width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; text-align: left; }
.hv2-checks li { padding: 16px 0 16px 30px; border-bottom: 1px solid rgba(255, 255, 255, .12); position: relative; font-size: .95rem; color: rgba(255, 255, 255, .9); }
.hv2-checks li::before { content: "\2713"; position: absolute; left: 0; top: 16px; color: #ffb3ac; font-weight: 700; }

/* 6. Projects: dark band with a tight photo row */
.hv2-projects { background: var(--ink-950); color: #fff; padding: 110px 0 100px; text-align: center; }
.hv2-projects h2 { color: #fff; }
.hv2-projects .hv2-intro { max-width: 640px; margin: 0 auto 44px; color: rgba(255, 255, 255, .72); }
.hv2-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hv2-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.hv2-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hv2-tile:hover img { transform: scale(1.04); }
.hv2-tile span { position: absolute; left: 12px; bottom: 12px; background: rgba(255, 255, 255, .94); color: var(--navy-900); font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.hv2-projects .hv2-btns { justify-content: center; margin-top: 44px; }

/* 7. Credentials strip */
.hv2-creds { text-align: center; }
.hv2-creds-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.hv2-cred { border: 1px solid var(--line); padding: 30px 18px; background: #fff; }
.hv2-cred svg { width: 30px; height: 30px; color: var(--red-600); margin-bottom: 14px; }
.hv2-cred strong { display: block; font-size: .92rem; letter-spacing: .02em; color: var(--navy-900); }
.hv2-cred span { display: block; margin-top: 6px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Story, reviews, FAQ get the same rhythm */
.home-v2 section.hv2-pad { padding: 112px 0; }
.home-v2 .testimonial span.src { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); display: block; margin-top: 2px; }
.home-v2 .faq-item { border: 1px solid var(--line); background: #fff; padding: 0 20px; margin-bottom: 10px; border-radius: 3px; }
.home-v2 .faq-item summary { font-size: .9rem; padding: 18px 0; }

/* 10. Closing CTA: full-bleed band, not a floating box */
.hv2-cta { background: var(--red-600); color: #fff; text-align: center; padding: 96px 0; }
.hv2-cta h2 { color: #fff; margin-bottom: 10px; }
.hv2-cta p { color: rgba(255, 255, 255, .85); margin: 0; }
.hv2-cta .hv2-btns { justify-content: center; }

@media (max-width: 940px) {
  .hv2-section, .home-v2 section.hv2-pad { padding: 76px 0; }
  .hv2-split { grid-template-columns: 1fr; }
  .hv2-split-photo { min-height: 56vh; }
  .hv2-split-copy { padding: 64px 24px; }
  .hv2-tiles { grid-template-columns: repeat(2, 1fr); }
  .hv2-creds-row { grid-template-columns: repeat(2, 1fr); }
  .hv2-stat { padding: 0 22px; }
}
@media (max-width: 640px) {
  .hv2-checks { grid-template-columns: 1fr; }
  .hv2-stats { flex-wrap: wrap; row-gap: 18px; }
  .hv2-stat { padding: 0 18px; }
  .hv2-hero-inner { padding-top: 64px; }
  .hv2-cta { padding: 72px 0; }
}

/* Home v2 polish: legible hero copy, straighter geometry to match the tracked-uppercase UI */
.hv2-hero { background-image: linear-gradient(180deg, rgba(14, 18, 28, .68) 0%, rgba(14, 18, 28, .6) 55%, rgba(14, 18, 28, .76) 100%), url('/assets/img/kitchen/hero-kitchen.webp'); }
.hv2-hero h1, .hv2-hero .lead, .hv2-hero .hv2-eyebrow, .hv2-stat { text-shadow: 0 1px 16px rgba(0, 0, 0, .5); }
.home-v2 .card { border-radius: 4px; box-shadow: none; }
.home-v2 .card:hover { transform: none; box-shadow: none; }
.home-v2 .two-col img { border-radius: 3px !important; box-shadow: none !important; }
.home-v2 .chip { border-radius: 3px; }
.home-v2 .timeline-item::before { border-radius: 50%; }
.hv2-hero { background-image: linear-gradient(180deg, rgba(14, 18, 28, .7) 0%, rgba(14, 18, 28, .68) 55%, rgba(14, 18, 28, .78) 100%), url('/assets/img/kitchen/hero-kitchen.webp'); }
.hv2-hero h1, .hv2-hero .lead { text-shadow: 0 2px 22px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .5); }
.hv2-hero .lead { color: #fff; font-weight: 500; }
@media (max-width: 940px) { .hv2-split-photo { min-height: 420px; } }
@media (max-width: 640px) {
  .hv2-stats { flex-wrap: nowrap; row-gap: 0; padding-left: 8px; padding-right: 8px; }
  .hv2-stat { padding: 0 12px; flex: 1; }
  .hv2-stat strong { font-size: 1.2rem; }
  .hv2-stat span { font-size: .56rem; letter-spacing: .12em; }
}

/* Top bar: desktop unchanged; on phones it collapses to a single line
   (short tagline, email icon, five stars) instead of wrapping onto three. */
.topbar .tb-short, .topbar .tb-stars, .topbar .tb-icon { display: none; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .topbar { font-size: .7rem; letter-spacing: .04em; }
  .topbar .container { flex-wrap: nowrap; justify-content: space-between; gap: 10px; padding-top: 4px; padding-bottom: 4px; }
  .topbar-links { flex-wrap: nowrap; gap: 12px; }
  .topbar .tb-long, .topbar .tb-text, .topbar .tb-rating-text, .topbar .rating-inline > svg { display: none; }
  .topbar .tb-short { display: inline; white-space: nowrap; }
  .topbar .tb-icon { display: inline-block; width: 18px; height: 18px; }
  .topbar a { padding: 8px 6px; margin: -8px -6px; }
  .topbar .tb-stars { display: inline; color: #f0a63a; letter-spacing: 1px; font-size: .78rem; white-space: nowrap; }
}
@media (max-width: 640px) {
  /* Hero eyebrow: two tidy lines instead of a stray pipe at the start of line two */
  .hv2-hero .hv2-eyebrow span { display: block; height: 0; overflow: hidden; visibility: hidden; margin: 0; }
  .hv2-hero .hv2-eyebrow { line-height: 1.9; }
}

/* Home hero on phones: photo stays behind the copy. A wide landscape photo in a tall phone box only
   shows a narrow center slice, so phones use the portrait version of the kitchen photo, which fits a
   tall screen and shows far more of the picture. Copy is centered over it. */
@media (max-width: 640px) {
  .hv2-hero {
    padding: 0; min-height: 0; justify-content: center;
    background-image: linear-gradient(180deg, rgba(14, 18, 28, .6) 0%, rgba(14, 18, 28, .5) 45%, rgba(14, 18, 28, .72) 100%), url('/assets/img/projects/bathroom-arched-backlit-shower-massachusetts.webp');
    background-size: cover; background-position: center 40%;
  }
  .hv2-hero-inner { padding-top: 56px; padding-bottom: 36px; }
  .hv2-hero .hv2-btns { margin-top: 30px; }
}

/* Project photo galleries (portfolio, bathroom and kitchen hubs) */
.proj-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.proj-gallery.three { grid-template-columns: repeat(3, 1fr); }
.proj-tile { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: #e9ebef; }
.proj-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.proj-tile:hover img { transform: scale(1.04); }
.proj-tile figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .94); color: var(--navy-900); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
@media (max-width: 940px) {
  .proj-gallery, .proj-gallery.three { grid-template-columns: repeat(2, 1fr); }
  .proj-gallery.three .proj-tile:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}

/* Mobile home hero v3: the whole hero (headline, CTA, stats) fits the first screen, between the sticky
   header (about 106px) and the fixed bottom call bar (about 74px). Brighter overlay so the photo reads. */
@media (max-width: 640px) {
  .hv2-hero {
    min-height: calc(100svh - 180px);
    background-image: linear-gradient(180deg, rgba(14, 18, 28, .58) 0%, rgba(14, 18, 28, .38) 40%, rgba(14, 18, 28, .66) 100%), url('/assets/img/projects/kitchen-island-hardwood-floor-wide-massachusetts.webp');
    background-size: cover; background-position: center 55%;
  }
  .hv2-hero-inner { padding-top: 22px; padding-bottom: 14px; }
  .hv2-hero .hv2-eyebrow { font-size: .6rem; letter-spacing: .2em; line-height: 1.7; margin-bottom: 14px; }
  .hv2-hero .hero-tagline { font-size: 2.05rem; margin-bottom: 14px; }
  .hv2-hero h1 { font-size: 1rem; line-height: 1.4; margin-bottom: 6px; }
  .hv2-hero .lead { font-size: .88rem; line-height: 1.5; }
  .hv2-hero .hv2-btns { margin-top: 18px; gap: 10px; }
  .hv2-hero .btn-lg { padding: 15px 20px; }
  .hv2-hero .hv2-btns .btn { width: 100%; }
  .hv2-stats { padding-top: 14px; padding-bottom: 14px; }
  .hv2-stat strong { font-size: 1.1rem; }
  .hv2-hero h1, .hv2-hero .lead, .hv2-hero .hv2-eyebrow, .hv2-stat { text-shadow: 0 1px 14px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .5); }
}
@media (max-width: 640px) {
  .hv2-hero { background-image: linear-gradient(180deg, rgba(14, 18, 28, .52) 0%, rgba(14, 18, 28, .3) 40%, rgba(14, 18, 28, .62) 100%), url('/assets/img/projects/kitchen-island-hardwood-floor-wide-massachusetts.webp'); }
}
/* Short phones (about 667px tall): drop the secondary line so the call to action and stats stay in view */


/* Mobile hero v4: copy anchored to the top (no dead space above the eyebrow), stats pinned to the
   bottom of the hero, every line visible on load, including phones with browser bars (about 664px). */
@media (max-width: 640px) {
  .hv2-hero { justify-content: flex-start; }
  .hv2-hero-inner { padding-top: 10px; padding-bottom: 6px; }
  .hv2-hero .hv2-eyebrow { margin-bottom: 8px; }
  .hv2-hero .hero-tagline { margin-bottom: 8px; }
  .hv2-hero .lead { font-size: .84rem; line-height: 1.45; }
  .hv2-hero .hv2-btns { margin-top: 12px; gap: 8px; }
  .hv2-hero .btn-lg { padding: 13px 18px; }
  .hv2-stats { margin-top: auto; padding-top: 10px; padding-bottom: 10px; }
}
@media (max-width: 640px) and (max-height: 700px) {
  .hv2-hero .hero-tagline { font-size: 1.85rem; }
  .hv2-hero h1 { font-size: .94rem; }
  .hv2-hero .lead { font-size: .8rem; }
  .hv2-hero .hv2-eyebrow { font-size: .56rem; letter-spacing: .16em; }
}

/* Home copy that must hold its line count */
.hv2-dark .hv2-narrow { max-width: 920px; }
.home-v2 .hv2-oneline { white-space: nowrap; font-size: clamp(.8rem, 3.9vw, 2.25rem); letter-spacing: -.02em; }
.hv2-projects .hv2-intro { max-width: 880px; text-wrap: balance; }
.hv2-intro .hv2-short { display: none; }
@media (max-width: 640px) {
  .hv2-intro .hv2-long { display: none; }
  .hv2-intro .hv2-short { display: inline; }
  .hv2-projects .hv2-intro { font-size: .92rem; }
}

/* =====================================================================================
   Design system v2, sitewide. The home page proved this look; here the same rules apply to every
   page: squarer geometry (3 to 4px), no drop shadows, tracked uppercase buttons and labels, near-black
   dark bands, roomier sections, boxed FAQ rows, a taller photo hero, a red closing band.
   ===================================================================================== */
:root {
  --ink-950: #121826;
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: none;
  --shadow-lg: 0 24px 48px -28px rgba(18, 24, 38, .38);
}

/* Type */
h2 { font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.2; letter-spacing: -.01em; }
.kicker { font-size: .7rem; font-weight: 600; letter-spacing: .24em; margin-bottom: 16px; }
.kicker::before { display: none; }

/* Buttons and navigation */
.btn { border-radius: 3px; font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; padding: 16px 30px; }
.btn-lg { padding: 19px 36px; }
.btn-secondary { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn-secondary:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
nav.main-nav a { font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.header-cta .btn { padding: 13px 22px; }

/* Section rhythm and dark bands */
section { padding: 96px 0; }
.section-tight { padding: 56px 0; }
.section-navy, .page-hero, .guide-hero { background: var(--ink-950); }
.page-hero { padding: 72px 0; }
.guide-hero { padding: 56px 0 44px; }
.breadcrumbs { background: var(--bg-alt); }
@media (max-width: 940px) { section { padding: 68px 0; } .page-hero { padding: 52px 0; } .guide-hero { padding: 44px 0 36px; } }
@media (max-width: 640px) { section { padding: 56px 0; } .section-tight { padding: 40px 0; } }

/* Photo hero on service and city pages: taller, centered, tracked eyebrow */
.hero:not(.hv2-hero) { display: flex; flex-direction: column; justify-content: center; min-height: clamp(460px, 66vh, 640px); }
.hero:not(.hv2-hero) > .container { width: 100%; }
.hero:not(.hv2-hero) .kicker { letter-spacing: .26em; }
@media (max-width: 640px) { .hero:not(.hv2-hero) { min-height: 0; } }

/* Trust bar under the hero */
.trust-bar { gap: 14px 36px; }
.trust-bar .item { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* Cards and panels: flat, thin border */
.card, .process-step, .portfolio-item, .vs-card, .form-card, .week-table, .towns-directory-card, .guide-toc, .answer-box { border-radius: 4px; box-shadow: none; }
.card:hover { transform: none; box-shadow: none; }
.service-card .icon { border-radius: 3px; }
.testimonial footer { letter-spacing: .02em; }
.ba-pair figure { border-radius: 4px; box-shadow: none; }
.ba-pair figcaption { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.compare-slider { border-radius: 4px; box-shadow: none; }
.hero-card { border-radius: 4px; }
.founder-photo-wrap::before { display: none; }
.founder-photo-wrap img { border: 0; border-radius: 3px; }
.two-col img { border-radius: 3px; }

/* FAQ rows: boxed like the home */
.faq-item { border: 1px solid var(--line); background: #fff; padding: 0 20px; margin-bottom: 10px; border-radius: 3px; }
.faq-item summary { font-size: .92rem; padding: 18px 0; }
.faq-item p { padding: 0 0 18px; }

/* Chips and small elements */
.chip, .towns-directory-list a, .dir-link, .dir-back { border-radius: 3px; }
.chip { background: #fff; border: 1px solid var(--line); }

/* Closing band: solid red, squared */
.cta-band { background: var(--red-600); border: none; border-radius: 4px; padding: 56px; }
.cta-band p { color: rgba(255, 255, 255, .88); }
@media (max-width: 640px) { .cta-band { padding: 40px 24px; } }

/* Forms and popup */
.field input, .field select, .field textarea { border-radius: 3px; }
.modal-form { border-radius: 6px; }
.modal-close { border-radius: 3px; }
.field label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.compare-table th, .week-row .wk-label, .local-checklist, .dir-back, .process-step::before { background: var(--ink-950); }
.dir-back:hover { background: var(--navy-800); }

/* =====================================================================================
   Popups: compact and responsive. On phones the sheet is anchored to the top so the on-screen
   keyboard never covers the fields, and it scrolls inside itself if the screen is short.
   ===================================================================================== */
.modal-form { width: min(92vw, 400px); padding: 20px 22px 16px; }
.modal-form h3 { font-size: 1.2rem; margin: 0 0 4px; padding-right: 34px; }
.modal-sub { font-size: .82rem; line-height: 1.45; color: var(--muted); margin: 0 0 14px; }
.modal-form .field { margin-bottom: 9px; gap: 4px; }
.modal-form .field label { font-size: .66rem; letter-spacing: .1em; margin-bottom: 0; }
.modal-form .field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-2); }
.modal-form .field input, .modal-form .field select, .modal-form .field textarea { padding: 10px 12px; font-size: 1rem; }
.modal-form textarea { min-height: 52px; resize: none; }
.modal-form .btn-lg { padding: 15px 20px; margin-top: 4px; }
.modal-form .form-note { font-size: .7rem; line-height: 1.4; margin: 8px 0 0; }
@media (max-width: 640px) {
  .modal[open] { align-items: flex-start; padding: 8px; }
  .modal-form { width: 100%; max-width: 440px; margin: 0 auto; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 18px 16px 14px; }
  .modal-close { top: 10px; right: 10px; width: 34px; height: 34px; }
}
@media (max-height: 560px) { .modal-sub { display: none; } }

/* Exit-intent offer */
.exit-modal[open] { align-items: center; }
.exit-card { text-align: center; display: grid; gap: 10px; }
.exit-card .kicker { justify-content: center; margin: 0; }
.exit-card h3 { padding: 0; margin: 0; font-size: 1.3rem; line-height: 1.25; }
.exit-card .modal-sub { margin: 0 0 6px; }
.exit-skip { background: none; border: 0; padding: 8px; font: inherit; font-size: .8rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.exit-skip:hover { color: var(--navy-900); }
@media (prefers-reduced-motion: no-preference) {
  .exit-modal[open] .exit-card, .modal[open] .modal-form { animation: modal-in .22s ease-out; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-height: 700px) {
  .modal-sub { display: none; }
  .modal-form textarea { min-height: 44px; }
  .modal-form .form-note { font-size: .66rem; }
}
.exit-card .modal-sub { display: block; }