/* ===================================
   LOCAL-DESIGN BASE
   Design system: sharp corners, strong hierarchy, high contrast.
   Fill in --color-primary and --font-heading from intake + Stitch output.
   =================================== */

:root {
  /* Colors — OVERRIDE from intake */
  --color-primary: #1a1a1a;
  --color-primary-ink: #ffffff;
  --color-accent: #e63946;
  --color-ink: #0a0a0a;
  --color-body: #333333;
  --color-muted: #6b6b6b;
  --color-line: #e5e5e5;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;
  --color-success: #16a34a;
  --color-error: #dc2626;

  /* Typography — OVERRIDE from typography-system.md */
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Scale */
  --fs-h1: clamp(2.5rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --header-h: 72px;

  /* NO rounded corners — design rule */
  --radius: 0;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
h4 { font-size: 1.125rem; font-weight: 700; }

.overline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-accent);
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-3);
}
.container-narrow { max-width: var(--container-narrow); }

section { padding-block: var(--s-6); }
@media (min-width: 768px) { section { padding-block: var(--s-7); } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-ink); }
.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-secondary:hover { background: var(--color-ink); color: #fff; }
.btn-call {
  background: var(--color-ink);
  color: #fff;
  text-decoration: none;
}
.btn-call:hover { background: var(--color-accent); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  height: var(--header-h);
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-header nav { display: none; gap: var(--s-3); }
.site-header nav a { text-decoration: none; font-weight: 600; }
.site-header nav a:hover { color: var(--color-accent); }
@media (min-width: 768px) { .site-header nav { display: flex; } }

.header-call { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.625rem 1rem; background: var(--color-ink); color: #fff; text-decoration: none; font-weight: 700; }
.header-call span { display: none; }
@media (min-width: 480px) { .header-call span { display: inline; } }

/* Hero */
.hero {
  background: var(--color-bg-alt);
  padding-block: var(--s-5);
}
@media (min-width: 768px) {
  .hero { padding-block: var(--s-6); }
  .hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-5); align-items: center; }
}
.hero h1 { margin-bottom: var(--s-2); }
.hero .subhead { font-size: 1.25rem; color: var(--color-body); margin-bottom: var(--s-3); max-width: 52ch; }
.hero .trust-pill { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.5rem 1rem; background: var(--color-ink); color: #fff; font-weight: 700; font-size: 0.875rem; margin-bottom: var(--s-3); }

/* Lead form card */
.lead-form {
  background: var(--color-bg);
  padding: var(--s-3);
  border: 2px solid var(--color-ink);
}
.lead-form h2 { font-size: 1.5rem; margin-bottom: var(--s-2); }
.lead-form .form-row { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.lead-form label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--color-line);
  background: #fff;
  font-size: 1rem;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-ink);
}
.lead-form textarea { min-height: 100px; resize: vertical; }
.lead-form .btn { width: 100%; }
.lead-form .hp { position: absolute; left: -9999px; }
.lead-form .form-note { font-size: 0.8125rem; color: var(--color-muted); margin-top: var(--s-1); text-align: center; }

/* Trust bar */
.trust-bar { background: var(--color-ink); color: #fff; padding-block: var(--s-3); }
.trust-bar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  text-align: center;
}
@media (min-width: 768px) { .trust-bar ul { grid-template-columns: repeat(5, 1fr); } }
.trust-bar li { font-weight: 700; font-size: 0.9375rem; }
.trust-bar li span { display: block; font-size: 1.25rem; color: var(--color-accent); margin-bottom: 0.25rem; }

/* Services grid */
.services-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: block;
  padding: var(--s-3);
  background: var(--color-bg);
  border: 2px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.service-card:hover { border-color: var(--color-ink); background: var(--color-bg-alt); }
.service-card h3 { margin-bottom: var(--s-1); }
.service-card .arrow { display: inline-block; margin-top: var(--s-2); font-weight: 800; color: var(--color-accent); }

/* Social proof */
.reviews { background: var(--color-bg-alt); }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: #fff; padding: var(--s-3); border: 2px solid var(--color-line); }
.review-card .stars { color: #f59e0b; font-size: 1.125rem; margin-bottom: var(--s-1); letter-spacing: 2px; }
.review-card blockquote { font-style: italic; margin-bottom: var(--s-2); }
.review-card cite { font-style: normal; font-weight: 700; display: block; }
.review-card cite span { display: block; font-weight: 400; font-size: 0.875rem; color: var(--color-muted); }

/* FAQ */
.faq details {
  border-bottom: 2px solid var(--color-line);
  padding-block: var(--s-2);
}
.faq summary {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.5rem;
  color: var(--color-accent);
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: var(--s-2); }

/* Final CTA */
.cta-band {
  background: var(--color-ink);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: var(--s-2); }
.cta-band p { font-size: 1.125rem; margin-bottom: var(--s-3); }

/* Footer */
.site-footer {
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--s-5) var(--s-3);
  font-size: 0.9375rem;
}
.site-footer a { color: #fff; }
.site-footer .footer-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.site-footer h4 { color: #fff; margin-bottom: var(--s-2); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer .footer-bottom {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
}

/* Sticky mobile CTA */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.mobile-cta.visible { transform: translateY(0); }
.mobile-cta a {
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9375rem;
  font-family: var(--font-heading);
}
.mobile-cta .call { background: var(--color-ink); color: #fff; }
.mobile-cta .quote { background: var(--color-accent); color: #fff; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* Breadcrumbs */
.breadcrumbs {
  padding-block: var(--s-2);
  font-size: 0.875rem;
  color: var(--color-muted);
}
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-ink); }
.breadcrumbs span[aria-current] { color: var(--color-ink); font-weight: 600; }

/* Utility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mb-3 { margin-bottom: var(--s-3); }

/* ===================================================================
   CAMARILLO CUSTOM CABINETS — brand layer
   Overrides + components added on top of the local-design base.
   Palette: charcoal + burnt orange. Sharp corners retained throughout.
   Contrast audited: accent #C2410C on white = 5.18:1 (AA normal text),
   white on accent = 5.18:1, muted #6B6B73 on #F7F5F2 = 4.7:1 (AA).
   Accent is never used as text on the dark ink background; the lighter
   --color-accent-hi (#FB923C, 8.1:1 on ink) is used there instead.
   =================================================================== */

:root {
  --color-primary: #16161A;
  --color-primary-ink: #ffffff;
  --color-accent: #C2410C;
  --color-accent-deep: #9A3412;
  --color-accent-hi: #FB923C;
  --color-ink: #16161A;
  --color-ink-soft: #24242B;
  --color-body: #35353D;
  --color-muted: #6B6B73;
  --color-line: #E2DED8;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F5F2;
  --color-bg-warm: #EFEBE5;

  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --header-h: 68px;
  --announce-h: 40px;
}

h1, h2, h3, h4 { letter-spacing: -0.015em; }
h2 { margin-bottom: var(--s-2); }
p + p { margin-top: var(--s-2); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.section-alt { background: var(--color-bg-alt); }
.section-warm { background: var(--color-bg-warm); }
.section-head { max-width: 60ch; margin-bottom: var(--s-4); }
.section-head.center { margin-inline: auto; text-align: center; }
.lede { font-size: 1.125rem; color: var(--color-body); }

/* ---------- Announcement bar ---------- */
.announcement-bar {
  background: var(--color-accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: var(--announce-h);
  display: flex;
  align-items: center;
}
.announcement-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-1) var(--s-3);
  text-align: center;
  padding-block: 0.5rem;
}
.announcement-bar strong { font-weight: 800; }

/* ---------- Header ---------- */
.site-header { border-bottom: 2px solid var(--color-ink); }
.site-header .logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header nav a { font-size: 0.9375rem; letter-spacing: 0.01em; }
.site-header nav a[aria-current="page"] { color: var(--color-accent); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
  cursor: pointer;
}
@media (min-width: 768px) { .nav-toggle { display: none; } }

#primary-nav.open {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-ink);
  padding: var(--s-2) var(--s-3);
}
#primary-nav.open a { padding-block: 0.75rem; border-bottom: 1px solid var(--color-line); }
.site-header > .container { position: relative; }

.header-call {
  border: 2px solid var(--color-ink);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.header-call span { display: inline; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--s-5);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(22,22,26,0.94) 0%, rgba(22,22,26,0.82) 45%, rgba(22,22,26,0.55) 100%);
  z-index: 1;
}
.hero > .container { position: relative; z-index: 2; }
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero h1 { color: #fff; }
.hero .subhead { color: rgba(255,255,255,0.86); }
.hero .overline { color: var(--color-accent-hi); }

.hero-bullets { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: 0.625rem; }
@media (min-width: 480px) { .hero-bullets { grid-template-columns: 1fr 1fr; } }
.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.92);
}
.hero-bullets svg { flex: none; margin-top: 2px; color: var(--color-accent-hi); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero .btn-secondary { color: #fff; border-color: #fff; }
.hero .btn-secondary:hover { background: #fff; color: var(--color-ink); }

/* ---------- Lead form ---------- */
/* Explicit color: the form card sits inside .hero and .cta-form-band, both of
   which set color:#fff. Without this reset the label text renders white on the
   white card and disappears. */
.lead-form { border-color: var(--color-accent); box-shadow: none; color: var(--color-body); }
.lead-form label { color: var(--color-ink); }
.lead-form .form-kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}
.lead-form h2 { font-size: 1.375rem; line-height: 1.15; }
.lead-form .form-sub { font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--s-2); }
.lead-form .req { color: var(--color-accent); }
.lead-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.form-error { color: var(--color-error); margin-bottom: var(--s-2); font-weight: 600; font-size: 0.9375rem; }
.form-error a { color: var(--color-error); font-weight: 800; }
.form-success { background: var(--color-bg); border: 2px solid var(--color-success); padding: var(--s-3); }
.form-success h3 { color: var(--color-success); margin-bottom: var(--s-1); }
.form-success-alt { font-size: 0.9375rem; color: var(--color-muted); margin-top: var(--s-2); }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--color-ink-soft); border-block: 2px solid var(--color-accent); }
.trust-bar li span { color: var(--color-accent-hi); }
.trust-bar li strong { display: block; font-size: 1.0625rem; }
.trust-bar li em { display: block; font-style: normal; font-weight: 400; font-size: 0.8125rem; color: rgba(255,255,255,0.72); }

/* ---------- Services grid ---------- */
.service-card { border-color: var(--color-line); }
.service-card:hover { border-color: var(--color-accent); background: #fff; }
.service-card .service-icon { color: var(--color-accent); margin-bottom: var(--s-2); }
.service-card p { font-size: 0.9375rem; }
.service-card .arrow { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Why choose us ---------- */
.why-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card { background: #fff; border: 2px solid var(--color-line); border-top: 6px solid var(--color-accent); padding: var(--s-3); }
.why-card h3 { margin-bottom: var(--s-2); font-size: 1.1875rem; }
.why-card p { font-size: 0.9375rem; }

/* ---------- Stat chip ---------- */
.stat-chip {
  display: inline-block;
  margin-top: var(--s-2);
  padding: 0.375rem 0.75rem;
  background: var(--color-bg-warm);
  border-left: 4px solid var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------- Depth content sections ---------- */
.depth-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .depth-grid { grid-template-columns: repeat(2, 1fr); } }
.depth-item { padding: var(--s-3); background: #fff; border: 1px solid var(--color-line); }
.depth-item h3 { margin-bottom: var(--s-1); font-size: 1.125rem; }
.depth-item p { font-size: 0.9375rem; }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s-5); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-3); margin-bottom: var(--s-1); }
.prose ul, .prose ol { margin: var(--s-2) 0; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--color-accent-deep); font-weight: 600; }

/* ---------- Process steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { counter-increment: step; padding-left: 3.25rem; position: relative; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.125rem;
}
.steps h3 { font-size: 1.0625rem; margin-bottom: 0.25rem; }
.steps p { font-size: 0.9375rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin-block: var(--s-3); border: 2px solid var(--color-ink); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
table.data caption { text-align: left; padding: var(--s-2); font-weight: 700; background: var(--color-bg-warm); border-bottom: 2px solid var(--color-ink); }
table.data th, table.data td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--color-line); vertical-align: top; }
table.data thead th { background: var(--color-ink); color: #fff; font-family: var(--font-heading); font-weight: 800; }
table.data tbody tr:nth-child(even) { background: var(--color-bg-alt); }
table.data td strong { color: var(--color-ink); }

/* ---------- Financing callout ---------- */
.financing-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  background: var(--color-ink);
  color: #fff;
  border-left: 6px solid var(--color-accent);
  margin-block: var(--s-3);
}
.financing-callout p { margin: 0; }
.financing-callout strong { color: var(--color-accent-hi); display: block; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 800; }
.financing-callout .btn { margin-left: auto; }

/* ---------- Mid-page CTA form band ---------- */
.cta-form-band { background: var(--color-ink); color: #fff; }
.cta-form-band h2 { color: #fff; }
.cta-form-band .lede { color: rgba(255,255,255,0.85); }
.cta-form-band .band-grid { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) { .cta-form-band .band-grid { grid-template-columns: 1fr 1fr; } }
.cta-form-band .band-points { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 0.625rem; }
.cta-form-band .band-points li { display: flex; gap: 0.5rem; font-size: 0.9375rem; color: rgba(255,255,255,0.9); }
.cta-form-band .band-points svg { flex: none; margin-top: 3px; color: var(--color-accent-hi); }

/* ---------- Trust / credential callouts (replaces review grid) ---------- */
.credential-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .credential-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .credential-grid { grid-template-columns: repeat(4, 1fr); } }
.credential-card { background: #fff; border: 2px solid var(--color-line); padding: var(--s-3); }
.credential-card .credential-icon { color: var(--color-accent); margin-bottom: var(--s-2); }
.credential-card h3 { font-size: 1.0625rem; margin-bottom: var(--s-1); }
.credential-card p { font-size: 0.875rem; color: var(--color-body); }

/* ---------- Service area ---------- */
.area-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .area-list { grid-template-columns: repeat(4, 1fr); } }
.area-list li { border-left: 3px solid var(--color-accent); padding-left: 0.625rem; font-weight: 600; font-size: 0.9375rem; }
.area-list a { text-decoration: none; }
.area-list a:hover { color: var(--color-accent-deep); text-decoration: underline; }

.city-links { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.city-links a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--color-line);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  background: #fff;
}
.city-links a:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }

/* ---------- Related services ---------- */
.related-grid { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card { display: block; padding: var(--s-2) var(--s-3); border: 2px solid var(--color-line); text-decoration: none; color: inherit; font-weight: 600; }
.related-card:hover { border-color: var(--color-accent); }
.related-card span { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--color-muted); margin-top: 0.25rem; }

/* ---------- Final CTA band ---------- */
.cta-band { border-top: 6px solid var(--color-accent); }
.cta-band .btn-secondary { color: #fff; border-color: #fff; }
.cta-band .btn-secondary:hover { background: #fff; color: var(--color-ink); }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }

/* ---------- Footer ---------- */
.site-footer a { text-decoration: none; color: rgba(255,255,255,0.82); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-nap { margin-top: var(--s-2); font-style: normal; line-height: 1.7; color: rgba(255,255,255,0.82); }
.site-footer .footer-nap strong { color: #fff; }
.site-footer .footer-tag { color: rgba(255,255,255,0.72); margin-top: var(--s-2); font-size: 0.875rem; max-width: 40ch; }
.site-footer .footer-disclaimer { font-size: 0.75rem; color: rgba(255,255,255,0.55); max-width: 70ch; margin-top: var(--s-2); }

/* ---------- Mobile CTA + FAB ---------- */
.mobile-cta .call { background: var(--color-accent); }
.mobile-cta .quote { background: var(--color-ink); }
.mobile-cta a { border-top: 2px solid #fff; }

.call-fab {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 90;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s, background-color 0.15s;
}
.call-fab:hover { background: var(--color-ink); }
.call-fab.visible { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) { .call-fab { display: inline-flex; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--color-line); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Contact / hours ---------- */
.contact-grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.hours-table { width: 100%; border-collapse: collapse; margin-top: var(--s-2); }
.hours-table th, .hours-table td { text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.9375rem; }
.hours-table th { font-weight: 600; }
.hours-table td { text-align: right; color: var(--color-body); }

.map-frame { width: 100%; height: 340px; border: 2px solid var(--color-ink); margin-top: var(--s-3); }

/* ---------- Print ---------- */
@media print {
  .announcement-bar, .mobile-cta, .call-fab, .site-header, .cta-band { display: none !important; }
}

/* ===================================================================
   MOBILE REFINEMENTS
   At 375px the header's three items (logo 124 + toggle 33 + call 170)
   plus 48px of gutter added up to exactly 375px, so space-between had
   nothing left to distribute and they sat flush against each other.
   The nav toggle was also being squeezed to 33px, under the 44px
   minimum touch target. Fixed by tightening the gutter, giving the
   header a real gap, and pinning the toggle's size.
   =================================================================== */

@media (max-width: 767px) {
  /* 16px gutter buys 16px of breathing room back for the header row */
  .container { padding-inline: 1rem; }

  /* Announcement bar was 107px tall, 13% of an iPhone viewport, before
     the header even began. */
  .announcement-bar { font-size: 0.75rem; line-height: 1.35; }
  .announcement-bar .container {
    flex-direction: column;
    gap: 0.125rem;
    padding-block: 0.5rem;
  }

  .site-header > .container { gap: 0.625rem; }

  /* The logo is the only element allowed to shrink. */
  .site-header .logo { flex: 0 1 auto; min-width: 0; }
  .site-header .logo img { width: auto; max-width: 130px; height: auto; }

  /* Call button sits before the menu button so the phone number stays
     the most prominent control and both land under the thumb. */
  .header-call {
    order: 2;
    flex: none;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
  }

  .nav-toggle {
    order: 3;
    flex: none;
    width: 44px;
    height: 44px;
  }

  /* Trust bar stacked 2-up ran to 432px. */
  .trust-bar { padding-block: var(--s-2); }
  .trust-bar ul { gap: var(--s-2) var(--s-1); }
  .trust-bar li { font-size: 0.875rem; }
  .trust-bar li strong { font-size: 0.9375rem; }
  .trust-bar li span { font-size: 1rem; margin-bottom: 0.125rem; }

  /* Keep the hero readable without pushing the form far down the page */
  .hero { padding-block: var(--s-4); }
  .hero .subhead { font-size: 1.0625rem; }
  .hero-actions .btn { width: 100%; }

  /* Full-width tap targets for the primary actions */
  .cta-band .cta-actions .btn { width: 100%; }

  /* Sticky bottom bar overlaps the last section otherwise */
  main { padding-bottom: 64px; }
}

/* Narrow phones: drop the secondary announcement line and tighten
   the call button so the logo keeps a usable size. */
@media (max-width: 400px) {
  .announce-secondary { display: none; }
  .header-call { font-size: 0.875rem; padding: 0.5rem 0.625rem; }
  .site-header .logo img { max-width: 112px; }
}

/* ===================================================================
   BUTTON CONTRAST INSIDE PROSE
   `.prose a` has specificity (0,1,1) and was beating `.btn-primary`
   (0,1,0), so the financing callout's button label rendered in
   #9A3412 on a #C2410C background: 1.41:1, effectively unreadable.
   Buttons must keep their own colour wherever they appear.
   =================================================================== */
.prose a.btn,
.financing-callout a.btn,
.cta-band a.btn,
.hero a.btn {
  text-decoration: none;
  font-weight: 800;
}

.prose a.btn-primary,
.financing-callout a.btn-primary,
.cta-band a.btn-primary,
.hero a.btn-primary,
.prose a.btn-call {
  color: #fff;                 /* 5.18:1 on the accent */
}

.prose a.btn-primary:hover,
.financing-callout a.btn-primary:hover {
  color: #fff;
  background: var(--color-ink);
}

.prose a.btn-secondary {
  color: var(--color-ink);
}

.cta-band a.btn-secondary,
.hero a.btn-secondary {
  color: #fff;
}

.cta-band a.btn-secondary:hover,
.hero a.btn-secondary:hover {
  color: var(--color-ink);
}

/* ===================================================================
   IMAGE BUCKETS
   Slots defined in build/images.py. An empty slot renders nothing, so
   these rules only ever apply to images that actually exist.
   =================================================================== */
.media {
  margin: var(--s-4) 0;
}
.media img { width: 100%; }
.media figcaption {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 0.5rem;
  border-left: 3px solid var(--color-accent);
  padding-left: 0.625rem;
}
.prose .media { margin-inline: 0; }

/* Side-by-side copy and image */
.media-split {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
@media (min-width: 900px) {
  .media-split { grid-template-columns: 1.05fr 0.95fr; }
  .media-split.reverse > *:first-child { order: 2; }
}
.media-split .media { margin: 0; }

.gallery-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

.gallery-item {
  margin: 0;
  background: #fff;
  border: 2px solid var(--color-line);
}
.gallery-item img { width: 100%; }
.gallery-item figcaption {
  padding: var(--s-2);
  font-size: 0.875rem;
  color: var(--color-body);
  border-top: 2px solid var(--color-line);
}

/* Service card thumbnails */
.service-card .card-media { margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3); }
.service-card .card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ===================================================================
   NAV DROPDOWNS
   Desktop uses hover plus :focus-within so keyboard works without JS.
   Mobile shows the sublinks inline inside the already-open nav panel.
   =================================================================== */
.nav-group { position: relative; }
.nav-group-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.nav-group-label:hover { color: var(--color-accent); }

.nav-sub { display: none; }

@media (min-width: 768px) {
  .site-header nav { align-items: center; }
  .nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    background: var(--color-bg);
    border: 2px solid var(--color-ink);
    border-top: 4px solid var(--color-accent);
    padding: 0.5rem 0;
    z-index: 60;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  }
  .nav-group:hover .nav-sub,
  .nav-group:focus-within .nav-sub { display: block; }
  /* Bridges the gap between label and panel so the menu does not
     close as the pointer travels down to it. */
  .nav-group::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
  }
  .nav-sub a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
  }
  .nav-sub a:hover { background: var(--color-bg-alt); color: var(--color-accent-deep); }
  .nav-sub .nav-sub-all {
    margin-top: 0.375rem;
    border-top: 1px solid var(--color-line);
    font-weight: 700;
    color: var(--color-accent-deep);
  }
}

@media (max-width: 767px) {
  #primary-nav.open .nav-group { display: block; }
  #primary-nav.open .nav-group-label {
    display: flex;
    justify-content: space-between;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--color-line);
    font-weight: 700;
  }
  #primary-nav.open .nav-group-label svg { display: none; }
  #primary-nav.open .nav-sub { display: block; padding-left: 0.75rem; }
  #primary-nav.open .nav-sub a {
    display: block;
    padding-block: 0.625rem;
    border-bottom: 1px solid var(--color-line);
    font-size: 0.9375rem;
    color: var(--color-body);
    text-decoration: none;
  }
  #primary-nav.open .nav-sub .nav-sub-all { font-weight: 700; color: var(--color-accent-deep); }
}

/* ===================================================================
   HERO H1 AT SMALL SIZES
   The homepage H1 is a long brand-plus-services line (77 chars). At the
   default hero scale that ran to six lines on a 375px screen and pushed
   the primary Call button below the fold. Scaling the hero H1 down on
   phones keeps the CTA visible without shortening the copy.
   =================================================================== */
@media (max-width: 767px) {
  .hero h1 {
    font-size: clamp(1.75rem, 7.2vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
  }
  .hero .subhead { font-size: 1rem; margin-bottom: var(--s-2); }
  .hero-bullets { gap: 0.5rem; margin-bottom: var(--s-2); }
  .hero-bullets li { font-size: 0.875rem; }
}