:root {
  --primary: #2c3e50;
  --primary-dark: #1f2c39;
  --accent: #e67e22;
  --accent-dark: #c66610;
  --hero-overlay: rgba(10, 16, 22, 0.55);
  --text: #1a1a1a;
  --text-light: #ffffff;
  --muted: #5a5f63;
  --bg: #ffffff;
  --bg-soft: #f6f8f8;
  --bg-band: #eef3f3;
  --border: #e3e7e8;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.18);
  --radius: 10px;
  --radius-lg: 16px;
  --max-width: 1200px;
  --header-h: 70px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.0);
  transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
.brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text-light); text-decoration: none; white-space: nowrap; }
.site-header.scrolled .brand { color: var(--primary); }
.nav { display: flex; gap: 28px; }
.nav a { color: var(--text-light); text-decoration: none; font-weight: 600; font-size: 0.95rem; opacity: 0.92; transition: opacity 150ms ease, color 150ms ease; }
.nav a:hover { opacity: 1; }
.site-header.scrolled .nav a { color: var(--text); }
.site-header.scrolled .nav a:hover { color: var(--primary); }
.cta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--text); padding: 10px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 0.92rem; box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease;
}
.cta-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); background: var(--accent-dark); }

/* Hero */
.hero {
  min-height: 85vh; background-size: cover; background-position: center;
  color: var(--text-light); display: flex; align-items: center;
  position: relative; padding: calc(var(--header-h) + 36px) 0 60px;
}
.hero-inner { max-width: 820px; }
.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -0.02em; margin-bottom: 20px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.hero-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin-bottom: 32px; max-width: 680px;
  opacity: 0.95; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.hero-rating {
  font-size: 0.98rem; display: inline-block;
  background: rgba(0, 0, 0, 0.32); padding: 9px 18px; border-radius: 999px;
  backdrop-filter: blur(4px); line-height: 1.5; max-width: 100%;
}
.hero-rating .stars { color: var(--accent); letter-spacing: 2px; margin-right: 8px; vertical-align: middle; }
.hero-rating .hero-rating-text { vertical-align: middle; }
.hero-rating strong { font-weight: 800; }
.hero-rating .dot-sep { margin: 0 6px; opacity: 0.55; }

/* Buttons */
.btn {
  display: inline-block; padding: 15px 30px; border-radius: var(--radius);
  text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1;
  border: 2px solid transparent;
  transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease;
}
.btn-primary { background: var(--accent); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-light); border-color: rgba(255, 255, 255, 0.7); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-light); }
.btn-block { display: block; text-align: center; }

/* Sections */
section { padding: 80px 0; }
section h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800;
  letter-spacing: -0.01em; color: var(--text); text-align: center; line-height: 1.15;
}
.section-sub { text-align: center; color: var(--muted); font-size: 1.05rem; margin-top: 10px; margin-bottom: 48px; }
.stars { color: var(--accent-dark); letter-spacing: 2px; }

/* Trust ribbon */
.trust-ribbon { background: var(--bg-band); padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 36px; }
.badge { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.badge svg { color: var(--primary); flex: 0 0 auto; }

/* Services */
.services { background: var(--bg); }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.service-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 26px; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  opacity: 0; transform: translateY(20px);
}
.service-card.in { opacity: 1; transform: translateY(0); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.service-icon {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-band); color: var(--primary); border-radius: 12px; margin-bottom: 18px;
}
.service-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: 0.97rem; margin-bottom: 16px; }
.service-link { color: var(--primary); font-weight: 700; text-decoration: none; font-size: 0.95rem; }
.service-link:hover { color: var(--primary-dark); }

/* About */
.about { background: var(--bg-soft); }
.about-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.about-copy h2 { text-align: left; margin-bottom: 18px; }
.about-copy p { color: var(--muted); margin-bottom: 14px; font-size: 1.02rem; }
.about-process strong { color: var(--text); }
.about-rating { font-size: 1.05rem; color: var(--text); margin-top: 8px; }
.about-photo img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; height: 100%; max-height: 460px; object-fit: cover; }

/* Reviews (static 3-up grid) */
.reviews { background: var(--bg); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reviews-grid .review {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 28px; text-align: left;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 320ms ease, transform 320ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.reviews-grid .review.in { opacity: 1; transform: translateY(0); }
.reviews-grid .review:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
.reviews-grid .review p { font-size: 1rem; font-style: italic; color: var(--text); line-height: 1.55; margin: 0; }
.reviews-grid .review .reviewer { color: var(--muted); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: auto; }

/* FAQ */
.faq { background: var(--bg-soft); }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-list details {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq-list details[open] { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.faq-list summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 1.02rem; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.4rem; color: var(--primary); transition: transform 200ms ease; line-height: 1; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { padding: 0 22px 20px; color: var(--muted); font-size: 0.98rem; }

/* Contact */
.contact { background: var(--primary); color: var(--text-light); }
.contact h2 { color: var(--text-light); }
.contact .section-sub { color: rgba(255, 255, 255, 0.85); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  background: rgba(255, 255, 255, 0.06); padding: 28px;
  border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-map { border-radius: var(--radius); overflow: hidden; min-height: 380px; background: rgba(0, 0, 0, 0.2); }
.contact-map iframe { width: 100%; height: 100%; min-height: 380px; }
.contact-details { display: flex; flex-direction: column; gap: 18px; }
.contact-line { color: var(--text-light); font-size: 1rem; line-height: 1.4; }
.contact-line strong { display: inline-block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.contact-line a:not(.btn) { color: var(--text-light); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.contact-line a:not(.btn):hover { text-decoration-color: var(--accent); }
.contact-rating .stars { color: var(--accent); }
.contact-rating strong { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text-light); display: inline; }
.hours-table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius); overflow: hidden; }
.hours-table th, .hours-table td { padding: 9px 14px; text-align: left; font-size: 0.94rem; color: var(--text-light); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: none; }
.hours-table th { font-weight: 600; }
.hours-table td { text-align: right; opacity: 0.92; }
/* Lead form */
.lead-form { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
.lead-form-title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.lf-row { display: flex; flex-direction: column; gap: 6px; }
.lf-row label { font-size: 0.9rem; font-weight: 600; color: var(--text-light); }
.lf-opt { font-weight: 400; opacity: 0.6; }
.lf-row input, .lf-row textarea {
  width: 100%; font: inherit; font-size: 0.97rem; color: var(--text-light);
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color 150ms ease, background 150ms ease;
}
.lf-row textarea { resize: vertical; min-height: 92px; }
.lf-row input:focus, .lf-row textarea:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.14); }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-turnstile { min-height: 65px; }
.lead-form .btn-block { margin-top: 2px; }
.lead-form button[disabled] { opacity: 0.65; cursor: default; }
.lf-status { font-size: 0.92rem; line-height: 1.45; }
.lf-status.lf-ok { color: #b8f0c8; }
.lf-status.lf-err { color: #ffc9c9; }

.contact .btn-primary { color: var(--text); }
.contact .btn-primary:hover { color: var(--text); }

/* Call FAB */
.call-fab {
  display: none; position: fixed; bottom: 18px; right: 18px;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--accent); color: var(--text);
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); z-index: 60; text-decoration: none;
  transition: transform 150ms ease;
}
.call-fab:hover { transform: scale(1.05); }

/* Footer */
.site-footer { background: #0a1a1a; color: rgba(255, 255, 255, 0.65); padding: 28px 0; text-align: center; font-size: 0.9rem; }

.about-inner > * { opacity: 0; transform: translateY(16px); transition: opacity 320ms ease, transform 320ms ease; }
.about-inner > *.in { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 32px; }
  .about-copy h2 { text-align: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 280px; }
  .reviews-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .brand { font-size: 0.95rem; }
  section { padding: 64px 0; }
  .hero { min-height: 78vh; padding: calc(var(--header-h) + 24px) 0 44px; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); margin-bottom: 16px; }
  .hero-sub { font-size: 1rem; margin-bottom: 24px; }
  .hero-cta { margin-bottom: 18px; }
  .hero-rating { font-size: 0.88rem; padding: 7px 14px; }
  .hero-rating .stars { margin-right: 6px; font-size: 0.95em; }
  .hero-rating .dot-sep { margin: 0 5px; }
  .reviews-grid .review p { font-size: 0.97rem; }
  .call-fab { display: inline-flex; }
  .trust-inner { gap: 16px 22px; }
  .badge { font-size: 0.85rem; }
  .badge svg { width: 18px; height: 18px; }
}
@media (max-width: 360px) { .trust-ribbon { display: none; } }

/* Ghost button variant for use over the dark .contact background */
.btn-ghost-dark { background: transparent; color: var(--text-light); border-color: rgba(255,255,255,0.6); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.1); color: var(--text-light); border-color: rgba(255,255,255,0.9); }
.contact .btn-block + .btn-block { margin-top: 0; }

/* single-column contact layout: no street address published, so no map embed */
.contact-grid-single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }

/* === MMS header responsive fix 2026-08-07 === */
/* Bug: .brand carried white-space:nowrap, and a flex item's default min-width:auto
   floors it at its min-content width, so a long unbreakable business name could not
   shrink. The header row overflowed and the Call Now pill was pushed off the right
   edge of the viewport, clipped, with its own label wrapping to "Cal / Now".
   Measured before the fix: every demo clipped at 768px (nav still visible), and any
   name over ~28 characters clipped on a phone.
   Fix: let .brand shrink, forbid the pill from shrinking, drop the nav at 900px
   instead of 720px so the name is never the item that loses, and on phones reduce
   the pill to a round icon button so name length can never matter. */
.brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cta-pill { flex: 0 0 auto; white-space: nowrap; justify-content: center; }
.cta-pill svg { flex: 0 0 auto; }

@media (max-width: 1100px) {
  .nav { gap: 20px; }
  .nav a { font-size: 0.9rem; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .brand { font-size: 0.95rem; line-height: 1.2; white-space: normal; }
  .brand:not(:has(.brand-logo)) {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .brand .brand-name {
    min-width: 0; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
}
@media (max-width: 720px) {
  .container.header-inner { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  .brand { font-size: 0.9rem; }
  .cta-pill { padding: 0; gap: 0; min-width: 44px; min-height: 44px; }
  .cta-pill .cta-label { display: none; }
  .cta-pill svg { width: 18px; height: 18px; }
}

/* Same 2026-08-07 pass, separate pre-existing bug found while verifying at 320px:
   an unbreakable email address in .contact-details and a fixed-width .hours-table
   both pushed the whole page wider than the viewport. Neither is caused by the
   header, and neither shows above 320px, but both are one line to fix. */
.contact-details, .contact-line, .contact-details a { overflow-wrap: anywhere; }
.hours-table { width: 100%; table-layout: fixed; }
.hours-table td, .hours-table th { overflow-wrap: anywhere; }
/* Same min-width:auto trap as the header, one level down: the contact panel is a
   grid item, so it could not shrink below its min-content width either. */
.contact-grid > *, .contact-details { min-width: 0; }
/* === end MMS header responsive fix === */