/* Concrete - TRADE AUTHORITY.
   Industrial-trade DNA: ink black + bone warm-grey + warm gold accent.
   Dark/light alternating sections, archivo display, gallery-heavy.
   Reads "licensed crew with pump on standby", not "showroom". */

:root {
  /* Backgrounds */
  --ink:       #0E0E0E;
  --ink-2:     #1A1A1A;
  --steel:     #2A2A2A;
  --bone:      #E5E2DC;
  --bone-2:    #DAD6CD;
  --paper:     #FAFAF7;

  /* Text on light bg */
  --text:      #0E0E0E;
  --text-80:   rgba(14,14,14,0.80);
  --text-65:   rgba(14,14,14,0.65);
  --text-45:   rgba(14,14,14,0.45);
  --text-25:   rgba(14,14,14,0.25);
  --muted:     #6B6B6B;

  /* Text on dark bg */
  --paper-80:  rgba(250,250,247,0.85);
  --paper-65:  rgba(250,250,247,0.70);
  --paper-45:  rgba(250,250,247,0.55);
  --paper-25:  rgba(250,250,247,0.30);

  /* Single bold accent: warm gold */
  --gold-300:  #F48A86;
  --gold-400:  #F26B67;
  --gold-500:  #EF4D48;
  --gold-600:  #BA3C38;
  --gold-700:  #832A28;

  /* Rules + edges */
  --divider-light:  #D8D2C5;
  --divider-dark:   rgba(250,250,247,0.10);
  --rule:           #D8D2C5;
  --rule-2:         rgba(14,14,14,0.08);
}

html { scroll-behavior: smooth; }
html, body { max-width: 100vw; overflow-x: clip; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--paper);
  color: var(--text);
  /* No top offset: the (always-dark) hero sits under the transparent fixed nav. */
  padding-top: 0;
  font-feature-settings: "ss01", "cv11", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.65;
}

img, iframe, video { max-width: 100%; height: auto; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }
p, h1, h2, h3, h4, li, a { overflow-wrap: anywhere; word-break: break-word; }

/* ── Typography ─────────────────────────────────────────────────────── */

.display, h1, h2 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: inherit;
  text-transform: none;
}
h3 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h4 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.serif {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}
.tight { letter-spacing: -0.03em; }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-500);
  display: inline-block;
}

.standfirst {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-80);
  font-weight: 400;
}
@media (min-width: 768px) {
  .standfirst { font-size: 1.25rem; }
}

.smallcaps {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--gold-500);
}

.tabular { font-variant-numeric: tabular-nums; }
.measure { max-width: 36em; }
.measure-wide { max-width: 42em; }

/* ── Section themes ─────────────────────────────────────────────────── */

.section-light { background: var(--paper); color: var(--text); }
.section-bone  { background: var(--bone);  color: var(--text); }
.section-dark  { background: var(--ink);   color: var(--paper); }
.section-darker{ background: #0A0A0A;      color: var(--paper); }

.section-dark .eyebrow,
.section-darker .eyebrow { color: var(--gold-400); }
.section-dark .standfirst,
.section-darker .standfirst { color: var(--paper-80); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.section-darker h1, .section-darker h2, .section-darker h3, .section-darker h4 { color: var(--paper); }

/* ── Hairline rules ─────────────────────────────────────────────────── */

.hr-hair { border: 0; border-top: 1px solid var(--rule); height: 0; width: 100%; }
.gold-rule { display: block; width: 44px; height: 3px; background: var(--gold-500); }
.gold-rule.short { width: 28px; }
.gold-rule.long  { width: 80px; }

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: var(--gold-500);
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
/* Compact variant for nav / inline CTAs (matches source's small button) */
.btn-sm { padding: 12px 24px; font-size: 12px; }
.btn:hover { background: var(--gold-600); color: var(--paper); }
.btn-outline-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(250,250,247,0.4);
  font-weight: 600;
}
.btn-outline-light:hover {
  background: var(--paper);
  color: var(--ink);
}
.btn-outline-dark {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline-dark:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn-ghost-light {
  background: transparent;
  color: var(--paper);
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-underline-offset: 4px;
}
.btn-ghost-light:hover { color: var(--gold-400); }

/* ── Text-link ──────────────────────────────────────────────────────── */

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-500);
  transition: gap 0.15s ease, color 0.15s ease;
}
.text-link:hover { gap: 12px; color: var(--gold-600); }
.section-dark .text-link, .section-darker .text-link { color: var(--gold-400); }
.section-dark .text-link:hover, .section-darker .text-link:hover { color: var(--gold-300); }

/* ── Forms ──────────────────────────────────────────────────────────── */

.form-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-65);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}
input[type="text"], input[type="email"], input[type="tel"], textarea, select, .form-input {
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 15px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus, .form-input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(200,169,104,0.18);
}

/* ── Trust strip ────────────────────────────────────────────────────── */

.trust-strip {
  background: var(--bone);
  padding: 30px 24px;
  border-top: 1px solid var(--divider-light);
  border-bottom: 1px solid var(--divider-light);
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.trust-strip .dot { color: var(--gold-500); }

/* ── Service cards ──────────────────────────────────────────────────── */

.service-card {
  background: var(--paper);
  border: 1px solid var(--divider-light);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.service-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-2px);
}
.service-card .img-slot {
  aspect-ratio: 16 / 10;
  background: var(--bone);
  margin: -28px -28px 4px;
  background-image: linear-gradient(135deg, var(--bone) 25%, var(--bone-2) 25%, var(--bone-2) 50%, var(--bone) 50%, var(--bone) 75%, var(--bone-2) 75%);
  background-size: 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-45);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.service-card.dark {
  background: var(--steel);
  border-color: rgba(250,250,247,0.10);
  color: var(--paper);
}
.service-card.dark h3 { color: var(--paper); }
.service-card.dark p { color: var(--paper-80); }
.service-card.dark .img-slot {
  background-image: linear-gradient(135deg, #1F1F1F 25%, #262626 25%, #262626 50%, #1F1F1F 50%, #1F1F1F 75%, #262626 75%);
  color: var(--paper-45);
}

/* ── Numbered step ──────────────────────────────────────────────────── */

.step-card {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--divider-dark);
}
.step-card:last-child { border-bottom: 0; }
.step-num {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 0.9;
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 56px;
}
.step-body h4 { color: var(--paper); margin-bottom: 6px; font-size: 18px; }
.step-body p  { color: var(--paper-80); font-size: 14px; line-height: 1.6; }

.section-light .step-card,
.section-bone .step-card { border-bottom-color: var(--divider-light); }
.section-light .step-body h4,
.section-bone .step-body h4 { color: var(--text); }
.section-light .step-body p,
.section-bone .step-body p { color: var(--text-65); }

/* ── Horizontal process timeline (5-column on desktop) ─────────────── */

.process-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
}
@media (min-width: 768px) {
  .process-timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    position: relative;
  }
  /* Connector line behind step numbers - gold dashed across top of cards */
  .process-timeline::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 8%;
    right: 8%;
    height: 1px;
    background-image: linear-gradient(to right, var(--gold-600) 50%, transparent 50%);
    background-size: 14px 1px;
    background-repeat: repeat-x;
    opacity: 0.45;
    z-index: 0;
  }
}
.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.process-num {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--gold-500);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.process-step h4 {
  color: var(--paper);
  font-size: 17px;
  margin-top: 6px;
  letter-spacing: -0.02em;
}
.process-step p {
  color: var(--paper-80);
  font-size: 13px;
  line-height: 1.6;
}
.section-light .process-step h4,
.section-bone .process-step h4 { color: var(--text); }
.section-light .process-step p,
.section-bone .process-step p { color: var(--text-65); }
.section-light .process-timeline::before,
.section-bone .process-timeline::before {
  background-image: linear-gradient(to right, var(--gold-500) 50%, transparent 50%);
  opacity: 0.55;
}

/* ── Credentials cards (4-up dark) ──────────────────────────────────── */

.cred-card {
  background: var(--ink-2);
  border: 1px solid rgba(250,250,247,0.08);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cred-card .num {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.03em;
  color: var(--gold-500);
  line-height: 1;
}
.cred-card h4 { color: var(--paper); font-size: 16px; }
.cred-card p  { color: var(--paper-80); font-size: 14px; line-height: 1.55; }

/* ── Gallery ────────────────────────────────────────────────────────── */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
.gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bone);
  background-image: linear-gradient(135deg, var(--bone) 25%, var(--bone-2) 25%, var(--bone-2) 50%, var(--bone) 50%, var(--bone) 75%, var(--bone-2) 75%);
  background-size: 24px 24px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-45);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }/* image transform transition removed - static per client */
.gallery-tile:hover img { transform: none; }/* hover zoom removed - static per client */
.gallery-tile.span-2 { grid-column: span 2; }

/* ── Pricing bands ──────────────────────────────────────────────────── */

.price-band {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--divider-light);
  background: var(--paper);
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .price-band { grid-template-columns: 1fr 1fr 2fr; }
}
.price-band-label {
  padding: 24px 28px;
  border-right: 1px solid var(--divider-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-band-label .eyebrow { margin-bottom: 0; }
.price-band-label .title {
  font-family: 'Archivo', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.price-band-amount {
  padding: 24px 28px;
  border-right: 1px solid var(--divider-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.price-band-amount .amt {
  font-family: 'Archivo', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price-band-amount .qty {
  font-size: 12px;
  color: var(--text-65);
  letter-spacing: 0.04em;
}
.price-band-notes {
  padding: 24px 28px;
  font-size: 14px;
  color: var(--text-80);
  line-height: 1.6;
}

/* ── FAQ ────────────────────────────────────────────────────────────── */

.faq-list { border-top: 1px solid var(--divider-light); }
.faq-item {
  border-bottom: 1px solid var(--divider-light);
  padding: 20px 0;
}
.faq-q {
  font-family: 'Archivo', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
@media (min-width: 768px) { .faq-q { font-size: 1.15rem; } }
.faq-item .chev {
  font-size: 14px;
  color: var(--gold-500);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-top: 2px;
}
.faq-item[open] .chev { transform: rotate(45deg); }
.faq-a {
  color: var(--text-65);
  line-height: 1.7;
  margin-top: 14px;
  font-size: 0.95rem;
  max-width: 48em;
}
details.faq-item summary { list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }

/* ── Nav ────────────────────────────────────────────────────────────── */

.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--paper-80);
  padding: 4px 0 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover { color: var(--gold-500); }
.nav-link.active { color: var(--gold-500); }

/* ── Meta list ──────────────────────────────────────────────────────── */

.meta-list { border-top: 1px solid var(--divider-light); }
.meta-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider-light);
}
.meta-row dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-65);
  font-weight: 700;
}
.meta-row dd {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  margin: 0;
}

/* ── Testimonial card ───────────────────────────────────────────────── */

.testimonial {
  background: var(--paper);
  border: 1px solid var(--divider-light);
  padding: 28px;
}
.testimonial .stars { color: var(--gold-500); letter-spacing: 0.06em; font-size: 14px; }
.testimonial .quote {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-80);
  margin: 14px 0 18px;
}
.testimonial .attrib {
  font-size: 13px;
  color: var(--text-65);
}
.testimonial .attrib .name { color: var(--text); font-weight: 600; }

/* ── Reveal animations ──────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
  /* CSS-only safety: reveal by ~0.7s even if the JS IntersectionObserver never fires
     (headless render / no scroll / early capture). .in cancels it for the smooth path. */
  animation: reveal-safety 0.45s ease 0.25s forwards;
}
.reveal.in { opacity: 1; transform: translateY(0); animation: none; }
@keyframes reveal-safety { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal.delay-1 { transition-delay: 0.06s; }
.reveal.delay-2 { transition-delay: 0.12s; }
.reveal.delay-3 { transition-delay: 0.18s; }
.reveal.delay-4 { transition-delay: 0.24s; }

/* ── Skip link ──────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--gold-500);
  color: var(--ink);
  padding: 8px 16px;
  z-index: 100;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.skip-link:focus { left: 8px; }

/* ── Modal ──────────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,14,14,0.65);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--paper);
  border-top: 4px solid var(--gold-500);
  padding: 36px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box.modal-box-wide { max-width: 560px; }
@media (max-width: 640px) {
  .modal-box { padding: 24px 20px; }
}

/* ── Helpers ────────────────────────────────────────────────────────── */

.bg-paper { background-color: var(--paper); }
.bg-bone  { background-color: var(--bone); }
.bg-ink   { background-color: var(--ink); color: var(--paper); }
.bg-steel { background-color: var(--steel); color: var(--paper); }
.text-gold { color: var(--gold-500); }
.text-muted { color: var(--text-65); }
.border-rule { border-color: var(--divider-light); }

section[id], h2[id], h3[id] { scroll-margin-top: 110px; }

/* ── Container helper ───────────────────────────────────────────────── */

.container-page {
  width: 100%;
  /* Fluid: fills the screen with proportional side gutters; high cap only so
     ultra-wide displays don't stretch line lengths absurdly. */
  max-width: 2400px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 96px);
}

/* ── Logo placeholder block ─────────────────────────────────────────── */

.logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--ink);
  border: 0;
  text-transform: uppercase;
  font-size: 15px;
  background: var(--gold-500);
}

/* ── Floating nav: transparent over hero, solid ink on scroll ─────────── */
#site-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
#site-nav.nav-solid {
  background: var(--ink);
  border-bottom-color: rgba(250,250,247,0.08);
}

/* logo-contrast-guard */
.logo-placeholder{background:var(--ink,#161616);color:#fff;border-radius:9px;}

/* heading-balance */
.display,h1,h2,h3{text-wrap:balance;}

/* hero-heading-fit */
#main-content .max-w-4xl{max-width:66rem;}
@media(min-width:1024px){#main-content .display{font-size:4.5rem;line-height:1.06;}}


/* ---------- reviews (real Google reviews) — injected by populate_reviews.js ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.reviews{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.reviews{grid-template-columns:1fr}}
.reviews:has(.rev-card:only-child){grid-template-columns:1fr;max-width:480px;margin:0 auto}
.rev-card{display:flex;flex-direction:column;background:var(--panel,#161a21);border:1px solid var(--line,rgba(255,255,255,.08));border-top:3px solid var(--accent);padding:1.9rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.rev-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.45);border-color:var(--accent)}
.rev-card .stars{margin-bottom:1rem}
.rev-quote{font-size:1.02rem;line-height:1.6;flex:1}
.rev-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.rev-author{font-family:var(--font-display,inherit);text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem}
.rev-date{font-family:var(--font-mono,monospace);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-align:right;white-space:nowrap}
.rev-src{font-family:var(--font-mono,monospace);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2,#8b93a1);text-align:center;margin-top:2rem}


/* review block fallbacks (template-agnostic) — injected by populate_reviews.js */
[data-reviews-section]{padding:clamp(4rem,8vw,6rem) 0;background:var(--panel,#12151b);color:var(--text,#e8e8e8)}
[data-reviews-section] .wrap,[data-reviews-strip].wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.4rem)}
[data-reviews-section] .kicker{font-family:var(--font-mono,monospace);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent,#c2410c);margin-bottom:.9rem;text-align:center}
[data-reviews-section] h2{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;text-align:center;margin:0 auto .6rem}
[data-reviews-section] .lead{text-align:center;max-width:56ch;margin:0 auto 2.4rem;opacity:.85}
[data-reviews-section] .sec-head{margin-bottom:2.2rem}

/* QC FIX 2026-09-10: the generic reviews-fallback CSS above assumes a
   template where --text/--accent/--panel/--line are already themed for a
   dark section. This template (Concrete Trade Authority) instead defines
   --text as TEXT-ON-LIGHT (#0E0E0E, near-black) and never defines --accent/
   --panel/--line at all. Result on this dark [data-reviews-section]: every
   heading/quote/author rendered near-black-on-near-black (measured
   rgb(14,14,14) text on rgb(18,21,27) background — effectively invisible).
   Rescope the tokens this component reads to this template's real dark-bg
   palette instead of touching every rule above. */
[data-reviews-section]{
  --text: var(--paper);
  --accent: var(--gold-500);
  --panel: var(--ink-2);
  --line: rgba(250,250,247,0.08);
  --mut-2: var(--paper-65);
}

/* ── QC FIX 2026-09-10: header overflow/overlap, header-wrap family of bugs ──
   Root cause (measured via real bounding-rect inspection, not guesswork):
   the floating #site-nav row (logo + "hidden lg:flex" nav links + phone/CTA/
   burger) runs out of horizontal room right in the window where the desktop
   nav links have just turned on (Tailwind's default lg breakpoint, 1024px)
   but the container isn't wide enough yet for everything to fit without the
   flex-shrunk logo <a> forcing its fixed-height <img> to overflow its own
   box and visually overlap the first nav link ("Home"). Confirmed failing at
   1024/1150/1280 via nav_check.js, passing again at 1366+. */
@media (min-width:1024px) and (max-width:1366px){
  #site-nav .hidden.lg\:flex{gap:1rem}
  #site-nav a[href^="tel:"]{display:none!important}
  #site-nav img{height:60px!important}
}
/* Same family, narrow-phone case: the nav logo renders at a fixed 84px
   height (same as desktop) with no mobile-specific shrink. Below the sm
   (640px) breakpoint the persistent call-icon + book-icon buttons (added
   2026-09-10, see partials.js navHTML) plus the hamburger are ALL visible
   at once (3 controls), which doesn't leave enough room for the full-size
   logo — re-confirmed via bounding-rect measurement at 320/360/390/430px
   (nav_check.js FAIL: "overlap: IMG / A") after adding those buttons. */
@media (max-width:639px){
  #site-nav img{height:42px!important}
}
/* Defensive floor: the logo <img> must never be allowed to render wider
   than its own flex-shrunk parent, however tight the squeeze gets in the
   future (e.g. another control added to the header row later). */
#site-nav img{max-width:100%}
/* Fixed #site-nav is ~133px tall on mobile (logo height + nav padding), but
   every page's own #main-content top padding (py-20/py-24/py-14 = 56-96px)
   assumes a much shorter header, so the nav visibly overlaps/clips the
   eyebrow label and H1 on first paint on every page except the home hero
   (which is deliberately full-bleed under the transparent nav — see the
   "No top offset" comment on .hero above). Confirmed on about/contact/faq/
   locations/testimonials/pricing/gallery/blog/legal pages via screenshot. */
@media (max-width:767px){
  body:not([data-page="home"]) #main-content{padding-top:9.5rem}
}