/* ==========================================================================
   XFM ELECTRIC — GLOBAL STYLESHEET
   Phase 1 of 4 — Design System + Homepage
   Sections:
   1. Variables  2. Reset/Base  3. Typography  4. Layout  5. Header
   6. Buttons    7. Hero        8. Trust Bar   9. Services 10. Quote
   11. Why Choose Us  12. Service Area  13. Testimonials  14. Final CTA
   15. Footer    16. Responsive
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Brand colors */
  --color-primary: #C41E2A;
  --color-primary-dark: #9E1721;
  --color-black: #0A0A0A;
  --color-white: #FFFFFF;
  --color-surface: #F8F9FA;

  /* Neutrals */
  --color-text: #111111;
  --color-text-muted: #666666;
  --color-text-soft: #9A9A9A;
  --color-border: #E5E5E5;
  --color-border-dark: #2A2A2A;
  --color-gray-dark: #1A1A1A;
  --color-gray-medium: #3A3A3A;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Layout */
  --container-width: 1200px;

  /* Motion */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* Type */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select { font-family: inherit; font-size: 1rem; }

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

p { color: var(--color-text-muted); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.section-heading {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-heading h2 { margin-bottom: 0.9rem; }

.section-heading p { font-size: 1.05rem; }

.text-white { color: var(--color-white); }
.text-muted-light { color: rgba(255,255,255,0.7); }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5.5rem 0;
}

.section-tight { padding: 3.5rem 0; }

.grid {
  display: grid;
  gap: 1.75rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.bg-surface { background: var(--color-surface); }
.bg-black { background: var(--color-black); }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-black);
}

.topbar {
  background: var(--color-black);
  border-bottom: 1px solid var(--color-border-dark);
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}

.topbar-emergency a {
  color: var(--color-white);
  font-weight: 700;
}

.topbar-emergency a span {
  color: var(--color-primary);
  font-weight: 800;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 1.5rem;
}

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-link img {
  height: 34px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin: 0 auto;
}

.nav-links a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-white);
  transition: color var(--transition-fast);
  padding: 0.5rem 0;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-primary);
}

.nav-cta {
  flex-shrink: 0;
}

/* G2 — Emergency call CTA: small link stacked directly above the Get a Quote button. */
.nav-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.emergency-cta { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; text-align: right; color: var(--color-white); text-decoration: none; }
.emergency-cta span { color: var(--color-primary); font-weight: 800; }
.emergency-cta:hover, .emergency-cta:focus-visible { text-decoration: underline; }
.mobile-nav-cta .emergency-cta { text-align: center; font-size: 0.85rem; margin-bottom: 0.65rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-white);
  margin: 0 auto;
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.35);
}

.btn-secondary:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.06);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-block { width: 100%; }
.btn-lg { padding: 1.05rem 2.25rem; font-size: 0.95rem; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  background: var(--color-black);
  color: var(--color-white);
  padding: 4.5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(196,30,42,0.18), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(196,30,42,0.10), transparent 40%);
  pointer-events: none;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
  position: relative;
}

.hero-content h1 { color: var(--color-white); }

.hero-content p.hero-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}






/* ==========================================================================
   8. TRUST BAR
   ========================================================================== */
.trust-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem 1.5rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1.25rem;
  border-left: 1px solid var(--color-border);
}

.trust-item:first-child { border-left: none; padding-left: 0; }

.trust-item svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.trust-item span {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ==========================================================================
   9. SERVICES
   ========================================================================== */
.services { background: var(--color-surface); }

.service-cards {
  grid-template-columns: repeat(4, 1fr);
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(10,10,10,0.08);
  border-color: rgba(196,30,42,0.35);
}

.service-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196,30,42,0.08);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  color: var(--color-primary);
}

.service-icon svg { width: 24px; height: 24px; }

.service-card h3 { margin-bottom: 0.6rem; }

.service-card p {
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}

.service-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap var(--transition-fast);
}

.service-link:hover { gap: 0.6rem; }

/* ==========================================================================
   10. FEATURED SOLUTIONS + QUOTE SECTION
   ========================================================================== */
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}


.featured-list {
  margin: 1.75rem 0 2.25rem;
}

.featured-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.featured-list li:last-child { border-bottom: none; }

.featured-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.quote-section {
  background: var(--color-black);
  color: var(--color-white);
}

.quote-panel {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text);
}


.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.quote-form .full { grid-column: 1 / -1; }

.quote-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}

.quote-form textarea { resize: vertical; min-height: 90px; }

.quote-disclaimer {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  margin-top: -0.3rem;
}

/* ==========================================================================
   11. WHY CHOOSE US
   ========================================================================== */
.why-cards { grid-template-columns: repeat(4, 1fr); }

.why-card {
  text-align: left;
  padding: 0.5rem 0;
}

.why-card .service-icon { background: var(--color-black); color: var(--color-primary); }

.why-card h3 { margin-bottom: 0.5rem; }
.why-card p { font-size: 0.92rem; }

/* ==========================================================================
   12. SERVICE AREA
   ========================================================================== */
.service-area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.service-area-map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px),
    var(--color-surface);
  background-size: 32px 32px, 32px 32px, cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem;
}

.service-area-map svg {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */

.testimonial-cards { grid-template-columns: repeat(3, 1fr); }





/* ==========================================================================
   14. FINAL CTA
   ========================================================================== */
.final-cta {
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(196,30,42,0.16), transparent 55%);
}

.final-cta .container { position: relative; }

.final-cta h2 { max-width: 700px; margin: 0 auto 1rem; }

.final-cta p {
  max-width: 560px;
  margin: 0 auto 2.25rem;
  color: rgba(255,255,255,0.7);
}

.final-cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-black);
  color: rgba(255,255,255,0.65);
}

.footer-top {
  padding: 4.5rem 0 3rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}

.footer-brand img { height: 30px; margin-bottom: 1rem; }

.footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.5); max-width: 280px; }

.footer-col h4 {
  color: var(--color-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.1rem;
}

.footer-col ul li { margin-bottom: 0.7rem; }

.footer-col a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--transition-fast);
}

.footer-col a:hover { color: var(--color-primary); }

.footer-social {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.4rem;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.footer-social a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

/* Mobile sticky action bar — structure ready, links functional, no JS needed */
.mobile-action-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-black);
  border-top: 1px solid var(--color-border-dark);
}

.mobile-action-bar .container {
  display: flex;
  padding: 0 1rem;
}

.mobile-action-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.65rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mobile-action-bar a:nth-child(2) { color: var(--color-primary); }

.mobile-action-bar svg { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; }
  .service-cards { grid-template-columns: repeat(3, 1fr); }
  .featured { grid-template-columns: 1fr; }
  .featured-visual { order: -1; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
  .trust-item:nth-child(3) { border-left: none; padding-left: 0; }
  .why-cards { grid-template-columns: repeat(2, 1fr); }
  .service-area-grid { grid-template-columns: 1fr; }
  .testimonial-cards { grid-template-columns: 1fr; }
  body { padding-bottom: 58px; }
  .mobile-action-bar { display: block; }
}

@media (max-width: 640px) {
  .section { padding: 3.5rem 0; }
  .service-cards { grid-template-columns: 1fr 1fr; }
  .quote-form { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .final-cta-actions { flex-direction: column; }
  .final-cta-actions .btn { width: 100%; }
  .topbar .container { font-size: 0.68rem; }
}

@media (max-width: 420px) {
  .service-cards { grid-template-columns: 1fr; }
}
/* ==========================================================================
   17. FINAL AUDIT — ACCESSIBILITY / FORM FEEDBACK
   ========================================================================== */
.quote-form [aria-invalid="true"] {
  border-color: var(--color-primary);
}

.quote-form [id$="-error"] {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-primary);
}

.quote-form [data-form-status] {
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

/* ZIP service-area toast — compact, temporary, informational only (not a Safety alert). */
.quote-form .zip-toast-anchor {
  position: relative;
}

.quote-form .zip-coverage-toast {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.4rem;
  z-index: 40;
  max-width: 260px;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #ffffff;
  background: rgba(20, 20, 20, 0.82);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--zip-toast-accent, #9aa0a6);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  animation: zipToastEnter 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.quote-form .zip-coverage-toast.zip-toast-served {
  --zip-toast-accent: #3fbf76;
}

.quote-form .zip-coverage-toast.zip-toast-outside {
  --zip-toast-accent: #cf9a3f;
}

.quote-form .zip-coverage-toast strong {
  display: block;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
  color: #ffffff;
}

.quote-form .zip-coverage-toast p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.quote-form .zip-coverage-toast-exit {
  animation: zipToastExit 0.26s ease-in forwards !important;
}

@keyframes zipToastEnter {
  from { opacity: 0; transform: translate(14px, -6px); }
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes zipToastExit {
  from { opacity: 1; transform: translate(0, 0); }
  to { opacity: 0; transform: translate(14px, -6px); }
}

@media (max-width: 640px) {
  .quote-form .zip-coverage-toast {
    max-width: min(78vw, 300px);
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    font-size: 0.74rem;
    line-height: 1.32;
  }

  .quote-form .zip-coverage-toast strong {
    font-size: 0.66rem;
    margin-bottom: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote-form .zip-coverage-toast,
  .quote-form .zip-coverage-toast-exit {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

#service-navigation summary {
  cursor: pointer;
}

@media (max-width: 420px) {
  .topbar .container {
    height: auto;
    min-height: 38px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .topbar .container > span:first-child {
    display: none;
  }
}

/* ==========================================================================
   18. PHASE 5 — HOMEPAGE PHOTOGRAPHY + SELECTED WORK
   Scoped to the homepage so the other three pages retain their presentation.
   ========================================================================== */
.home-page .hero::before { background: none; }
.home-page .hero-content h1 { margin-bottom: 1.25rem; }
.home-page .hero .container { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.home-page .home-project-photo {
  overflow: hidden;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  background: var(--color-black);
}
.home-page .home-project-photo img { width: 100%; height: auto; }
.home-page .home-project-photo figcaption {
  padding: 1rem 1.25rem;
  color: #d4d4d4;
  font-size: 0.8rem;
  border-top: 2px solid var(--color-primary);
}
.home-page .selected-work { position: relative; isolation: isolate; background: var(--color-black); }
.home-page .selected-work-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-page .selected-work-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.23; }
.home-page .selected-work-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.25), #0a0a0a 85%); }
.home-page .selected-work-header { max-width: 740px; margin-bottom: 3rem; }
.home-page .selected-work-header .eyebrow { border-left: 3px solid var(--color-primary); padding-left: 0.85rem; }
.home-page .selected-work-header h2 { color: var(--color-white); font-size: clamp(2rem, 3.8vw, 3.25rem); margin-bottom: 1.5rem; }
.home-page .selected-work-header p { color: #d4d4d4; max-width: 660px; font-size: 1.05rem; }
.home-page .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.home-page .project-card { min-width: 0; display: flex; flex-direction: column; background: #151515; border: 1px solid #383838; border-radius: var(--radius-sm); transition: border-color var(--transition-normal); }
.home-page .project-card-media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.home-page .project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-normal); }
.home-page .project-card-number { position: absolute; top: 1rem; left: 1rem; padding: 0.25rem 0.6rem; background: #0a0a0a; color: white; font-size: 0.75rem; font-weight: 700; border-left: 2px solid var(--color-primary); }
.home-page .project-card-content { padding: 1.5rem; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.home-page .project-card-category { color: #c5c5c5; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 0.75rem; }
.home-page .project-card h3 { color: white; font-size: 1.3rem; line-height: 1.3; margin-bottom: 0.85rem; }
.home-page .project-card p { color: #bdbdbd; font-size: 0.94rem; margin-bottom: 1.25rem; }
.home-page .project-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; color: white; font-size: 0.85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #bdbdbd; }
.home-page .project-card-link span { color: #ed6b74; }
.home-page .project-card:focus-within { border-color: #ed6b74; }
.home-page .selected-work :focus-visible { outline: 2px solid white; outline-offset: 5px; }
.home-page .selected-work-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; border-top: 1px solid #383838; margin-top: 2.5rem; padding-top: 2rem; }
.home-page .selected-work-actions p { color: #bdbdbd; }
.home-page .selected-work-actions > div { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (hover: hover) {
  .home-page .project-card:hover { border-color: #777; }
  .home-page .project-card:hover img { transform: scale(1.035); }
}
@media (max-width: 1100px) {
  .home-page .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .project-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .home-page .project-card:last-child .project-card-media { aspect-ratio: auto; min-height: 280px; }
}
@media (max-width: 1024px) {
  .home-page .hero .container { grid-template-columns: 1fr; }
  .home-page .featured { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 700px) {
  .home-page .project-grid, .home-page .featured { grid-template-columns: 1fr; }
  .home-page .project-card:last-child { grid-column: auto; display: flex; }
  .home-page .project-card:last-child .project-card-media { aspect-ratio: 16 / 10; min-height: 0; }
  .home-page .selected-work-header { margin-bottom: 2rem; }
  .home-page .selected-work-actions > div { width: 100%; }
  .home-page .selected-work-actions .btn { flex: 1; }
}
@media (max-width: 480px) {
  .home-page .service-cards { grid-template-columns: 1fr; }
  .home-page .hero { padding-top: 3rem; }
  .home-page .hero-actions, .home-page .hero-actions .btn { width: 100%; }
  .home-page .btn { white-space: normal; text-align: center; }
  .home-page .selected-work-actions > div { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page *, .home-page *::before, .home-page *::after { transition: none !important; animation: none !important; }
  .home-page .project-card:hover img { transform: none; }
}

/* ========================================
   PHASE 6 — INTERIOR PAGE HERO
   All additions scoped to interior-page; Phase 5 rules remain intact.
======================================== */
.interior-page main { overflow-wrap: break-word; }
.interior-page .interior-hero { background: var(--color-black); color: white; padding: 4.5rem 0; }
.interior-page .interior-hero-layout { display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; }
.interior-page .interior-hero-copy { min-width: 0; }
.interior-page .interior-hero h1 { color: white; font-size: clamp(2.25rem,4vw,3.5rem); margin-bottom: 1.5rem; }
.interior-page .interior-hero .eyebrow { color: #eee; border-left: 3px solid var(--color-primary); padding-left: .85rem; }
.interior-page .interior-hero p { color: #c8c8c8; max-width: 600px; margin-bottom: 2rem; font-size: 1.05rem; }
.interior-page .interior-hero-media { min-width: 0; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid #383838; }
.interior-page .interior-hero-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 75% center; }
.interior-page .interior-hero--about { padding-bottom: 0; }
.interior-page .interior-hero--about .interior-hero-layout { align-items: end; }
.interior-page .interior-hero--about .interior-hero-copy { padding-bottom: 4rem; }
.interior-page .interior-hero--about .interior-hero-media { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.interior-page .interior-hero--about img { aspect-ratio: 1 / 1; object-position: 65% center; }
.interior-page .interior-hero--contact { position: relative; isolation: isolate; padding: 6rem 0; }
.interior-page .interior-hero--contact .interior-hero-layout { display: block; }
.interior-page .interior-hero--contact .interior-hero-copy { max-width: 670px; }
.interior-page .interior-hero--contact .interior-hero-media { position: absolute; inset: 0; z-index: -1; border: 0; border-radius: 0; }
.interior-page .interior-hero--contact img { height: 100%; aspect-ratio: auto; object-position: center 55%; }
.interior-page .interior-hero--contact .interior-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(10,10,10,.94),rgba(10,10,10,.66) 65%,rgba(10,10,10,.4)); }
.interior-page .interior-section-heading { max-width: 720px; margin-bottom: 2.5rem; }
.interior-page .interior-section-heading h2 { margin-bottom: 1rem; }
.interior-page .btn { white-space: normal; text-align: center; }
.interior-page .final-cta::before { background: none; }
.interior-page :is(#quote,#service-content,#service-directory) { scroll-margin-top: 140px; }
/* ========================================
   SERVICES VISUAL GRID + FULL DIRECTORY
======================================== */
.interior-page .service-discovery { background: #111; }
.interior-page .service-discovery h2 { color: white; }
.interior-page .service-discovery .eyebrow { color: #ed6b74; }
.interior-page .service-discovery p { color: #bdbdbd; }
.interior-page .discovery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; }
.interior-page .discovery-card { border: 1px solid #383838; background: #1a1a1a; border-radius: var(--radius-sm); min-width: 0; }
.interior-page .discovery-card > a { display: flex; flex-direction: column; height: 100%; border-radius: inherit; }
.interior-page .discovery-media { overflow: hidden; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.interior-page .discovery-media img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; object-position: 65% center; transition: transform var(--transition-normal); }
.interior-page .discovery-copy { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }
.interior-page .discovery-copy h3 { color: white; line-height: 1.3; margin-bottom: .75rem; }
.interior-page .discovery-copy p { font-size: .9rem; margin-bottom: 1rem; }
.interior-page .discovery-link { color: white; margin-top: auto; font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.interior-page .discovery-link span { color: #ed6b74; }
.interior-page .discovery-card:focus-within { border-color: white; }
.interior-page .discovery-card a:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.interior-page .service-directory-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 3rem; align-items: start; }
.interior-page .service-directory .quote-panel { width: 100%; padding: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.interior-page #browse-title { font-size: 1.6rem; margin-bottom: .75rem; }
.interior-page #service-navigation { margin-top: 1.5rem; }
.interior-page #service-navigation details { border-top: 1px solid var(--color-border); padding: 0; }
.interior-page #service-navigation summary { padding: 1rem 0; }
.interior-page #service-navigation summary .eyebrow { margin: 0; font-size: .72rem; }
.interior-page #service-navigation .featured-list { margin: 0 0 1rem; }
.interior-page #service-navigation li { padding: 0; border-radius: 3px; }
.interior-page #service-navigation a { display: block; width: 100%; padding: .75rem; font-size: .9rem; line-height: 1.5; }
.interior-page #service-content { padding: 2rem 0; min-width: 0; }
.interior-page #service-title { margin-bottom: 1.25rem; }
.interior-page #service-content .section-tight { padding: 2rem 0; }
.interior-page #service-content h3 { margin-bottom: .75rem; }
/* ========================================
   ABOUT PAGE
======================================== */
.interior-page .approach-blocks .why-card { padding: 1.5rem; border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius-sm); }
.interior-page .about-editorial { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; }
.interior-page .interior-photo { overflow: hidden; background: var(--color-black); border-radius: var(--radius-sm); }
.interior-page .interior-photo img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }
.interior-page .interior-photo figcaption { padding: 1rem 1.25rem; color: #ccc; font-size: .8rem; border-top: 2px solid var(--color-primary); }
.interior-page .about-editorial-copy h2 { margin-bottom: 1.25rem; }
.interior-page .workflow-steps { counter-reset: none; border-top: 1px solid var(--color-border); padding-top: 2rem; }
/* ========================================
   CONTACT PAGE
======================================== */
.interior-page .contact-options .service-card { border-radius: var(--radius-sm); box-shadow: none; transform: none; }
.interior-page .contact-options a { overflow-wrap: anywhere; }
.interior-page .contact-intake { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 3rem; align-items: start; }
.interior-page .contact-intake .section-heading { text-align: left; margin-bottom: 2rem; }
.interior-page .contact-intake .quote-panel { width: 100%; min-width: 0; padding: 2.25rem; border-radius: var(--radius-sm); }
.interior-page .contact-project-notes { border-top: 1px solid #383838; padding-top: 2rem; }
.interior-page .contact-project-notes h3 { color: white; margin-bottom: 1rem; }
.interior-page .contact-project-notes ul { list-style: disc; padding-left: 1.2rem; color: #ccc; }
.interior-page .contact-project-notes li { margin-bottom: .75rem; }
.interior-page .contact-project-notes p { color: #bdbdbd; margin: 1.5rem 0; }
.interior-page #contact-form > div { min-width: 0; }
.interior-page #contact-form :is(input,select,textarea) { min-width: 0; max-width: 100%; min-height: 48px; font-size: 1rem; }
.interior-page #contact-form textarea { min-height: 160px; }
.interior-page #contact-form :is(input,select,textarea):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.interior-page #contact-form [aria-invalid="true"] { background: #fff4f4; }
.interior-page #contact-form [data-form-status] { border-left: 3px solid var(--color-primary); padding-left: 1rem; }
.interior-page #contact-form [data-form-status]:empty { display: none; }
.interior-page #contact-form button:disabled { background: #555; border-color: #555; cursor: not-allowed; }
.interior-page .service-area-map { border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); color: var(--color-text-muted); }
.interior-page .service-area-map p { max-width: 260px; }
/* ========================================
   INTERIOR RESPONSIVE / REDUCED MOTION
======================================== */
@media (hover: hover) {
  .interior-page .discovery-card:hover { border-color: #888; }
  .interior-page .discovery-card:hover img { transform: scale(1.035); }
  .interior-page #service-navigation a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 1100px) {
  .interior-page .discovery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interior-page .interior-hero-layout { gap: 2rem; }
  .interior-page .contact-intake { grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 2rem; }
  .interior-page .approach-blocks { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 880px) {
  .interior-page .service-directory-layout, .interior-page .contact-intake { grid-template-columns: 1fr; }
  .interior-page .contact-intake-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .interior-page .contact-project-notes { border: 0; padding-top: 0; }
  .interior-page .about-editorial { gap: 2rem; }
}
@media (max-width: 700px) {
  .interior-page .interior-hero { padding: 3rem 0; }
  .interior-page .interior-hero-layout, .interior-page .about-editorial, .interior-page .contact-intake-intro { grid-template-columns: 1fr; }
  .interior-page .interior-hero--about .interior-hero-copy { padding-bottom: 0; }
  .interior-page .interior-hero--about img { aspect-ratio: 4 / 3; }
  .interior-page .interior-hero--contact { padding: 4rem 0; }
  .interior-page .interior-hero--contact .interior-hero-media::after { background: rgba(10,10,10,.8); }
  .interior-page .contact-intake .quote-panel { padding: 1.5rem; }
  .interior-page .contact-intake .section-heading { margin: 0; }
}
@media (max-width: 480px) {
  .interior-page .discovery-grid, .interior-page .approach-blocks { grid-template-columns: 1fr; }
  .interior-page .hero-actions, .interior-page .hero-actions .btn { width: 100%; }
  .interior-page .service-directory .quote-panel { padding: 1.25rem; }
  .interior-page .contact-intake .quote-panel { padding: 1.25rem; }
  .interior-page .footer-top { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .interior-page *, .interior-page *::before, .interior-page *::after { animation: none !important; transition: none !important; }
  .interior-page .discovery-card:hover img { transform: none; }
}

/* Compact homepage coverage; the map belongs on Contact Us. */
.home-page .home-service-area .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.home-page .home-service-area .container > div { max-width: 680px; }
.home-page .home-service-area h2 { margin-bottom: 1rem; }
.home-page .home-service-area .btn { flex-shrink: 0; }
@media (max-width: 880px) { .home-page .home-service-area .container { flex-direction: column; align-items: flex-start; } }

/* ========================================
   PHASE 7 — FULL-BACKGROUND HOMEPAGE HERO
======================================== */
.home-page .hero.hero-background {
  background: var(--color-black) url('../assets/images/projects/exterior-lighting.jpg') center 55% / cover no-repeat;
  min-height: 76vh; min-height: 76svh;
  padding: clamp(3.5rem,8vh,7rem) 0;
  display: flex; align-items: center;
}
.home-page .hero.hero-background::before {
  background: linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.82) 36%,rgba(0,0,0,.46) 68%,rgba(0,0,0,.25) 100%);
}
.home-page .hero.hero-background .container { display: block; }
.home-page .hero-background .hero-content { max-width: 670px; }
.home-page .hero-background .eyebrow { color: #eee; border-left: 3px solid var(--color-primary); padding-left: .85rem; }
.home-page .hero-background .hero-lead { max-width: 570px; color: #ddd; }
.home-page .hero-background :focus-visible { outline-color: white; outline-offset: 5px; }
/* ========================================
   CONTACT-ONLY MAP
======================================== */
.contact-page .contact-map-section { background: #111; color: #eee; }
.contact-page .map-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.contact-page .map-section-heading h2 { color: white; }
.contact-page .map-section-heading .eyebrow { color: #ed6b74; }
.contact-page .map-section-heading > p { max-width: 390px; color: #bdbdbd; }
.contact-page .map-shell { border: 1px solid #383838; border-radius: var(--radius-sm); overflow: hidden; }
.contact-page .map-info { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: center; gap: 2rem; padding: 1.75rem; background: #1a1a1a; border-top: 3px solid var(--color-primary); }
.contact-page .map-info h3 { color: white; font-size: 1.2rem; }
.contact-page .map-info p { color: #ccc; font-size: .95rem; }
.contact-page .map-stage { padding: 1.25rem; min-width: 0; }
.contact-page .map-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.contact-page .map-toolbar [hidden] { display: none; }
.contact-page .map-toolbar button:disabled { opacity: .65; cursor: wait; }
.contact-page #service-area-map {
  width: 100%; height: 520px; aspect-ratio: auto; border: 1px solid #444; border-radius: 3px;
  background: #222; color: #ddd; position: relative; z-index: 0;
}
.contact-page #service-area-map > p { color: #ccc; max-width: 450px; }
.contact-page #service-area-map.map-ready { display: block; padding: 0; text-align: left; }
/* Filter only imagery, keeping attribution and controls legible and unfiltered. */
.contact-page .xfm-map-tiles { filter: grayscale(1) invert(1) brightness(.8) contrast(.9); }
.contact-page #service-area-map .leaflet-control-zoom a { background: #202020; color: white; width: 44px; height: 44px; line-height: 44px; }
.contact-page #service-area-map .leaflet-control-zoom a:hover { background: #383838; }
.contact-page #service-area-map .leaflet-control-attribution { background: #fff; color: #222; font-size: 12px; padding: 3px 6px; }
.contact-page #service-area-map .leaflet-control-attribution a { color: #00558a; text-decoration: underline; }
.contact-page #map-status { color: #eee; margin-top: 1rem; min-height: 1.6em; }
.contact-page #map-help { color: #bdbdbd; font-size: .85rem; margin-top: .75rem; }
.contact-page .contact-map-section :focus-visible { outline-color: #ff8790; outline-offset: 3px; }
/* ========================================
   SHARED INTERACTION / NARROW-SCREEN POLISH
======================================== */
@media (max-width: 880px) {
  .nav-links.is-open { display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 114px); max-height: calc(100dvh - 114px); overflow-y: auto; overscroll-behavior: contain; }
  .contact-page .map-section-heading { flex-direction: column; align-items: flex-start; }
  .contact-page .map-section-heading > p { max-width: 600px; }
  .contact-page .map-info { grid-template-columns: 1fr; gap: 1rem; }
  .contact-page .map-info .btn { justify-self: start; }
}
@media (max-width: 640px) {
  .home-page .hero.hero-background { min-height: 620px; padding: 4rem 0; background-position: 62% center; }
  .home-page .hero.hero-background::before { background: linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.68)); }
  .home-page .hero-background h1 { font-size: clamp(2.15rem,8.5vw,2.9rem); }
  .home-page .hero-background .hero-actions { flex-direction: column; align-items: stretch; }
  .contact-page #service-area-map { height: 390px; }
  .contact-page .map-stage { padding: .75rem; }
  .contact-page .map-info { padding: 1.25rem; }
}
@media (max-height: 620px) and (min-width: 641px) {
  .home-page .hero.hero-background { min-height: 0; padding: 3rem 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* Contrast refinements without changing the navigation or button architecture. */
.nav-links a.active, .nav-links a:hover { color: #ef7d86; }
.footer-bottom { color: rgba(255,255,255,.65); }
.quote-disclaimer { color: var(--color-text-muted); }

/* Production accessibility and small-screen reliability */
[hidden], .form-honeypot { display: none !important; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 1000; padding: .8rem 1rem; background: white; color: #111; transform: translateY(-180%); font-weight: 700; }
.skip-link:focus { transform: none; }
/* G1.2 — screen-reader-only text (live-region announcers). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.footer-col .footer-heading { color: white; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.1rem; }
.utility-message { min-height: 55vh; }
.utility-message .interior-hero-copy { max-width: 760px; }
.quote-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
.quote-form > div { min-width: 0; }
.quote-form :is(input,select,textarea) { min-width: 0; max-width: 100%; }
.quote-form :is(input,select,textarea):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.quote-form [data-form-status]:empty { display: none; }
.footer-col a:hover, .footer-social a:hover { color: #ef7d86; }
.mobile-action-bar a:nth-child(2) { color: #ef7d86; }
#quote, #main-content { scroll-margin-top: 130px; }
.contact-page .map-toolbar:has(> [hidden]:first-child):has(> [hidden]:last-child) { margin-bottom: 0; }
.contact-page #service-area-map .leaflet-control-attribution svg { width: 1em; height: 1em; margin: 0; color: inherit; }
.nav-toggle { width: 44px; height: 44px; }
@media (max-width: 640px) { .quote-form { grid-template-columns: 1fr; } }
@media (max-width: 880px) {
 body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
 .mobile-action-bar { padding-bottom: env(safe-area-inset-bottom); }
 .mobile-action-bar a { min-height: 58px; justify-content: center; overflow-wrap: anywhere; text-align: center; }
}
@media (max-width: 480px) {
 .nav-cta { display: none; }
 .home-page .quote-panel { margin-inline: 0; padding: 1.5rem; }
 .home-page .trust-item { padding-right: 0; gap: .5rem; }
 .home-page .trust-item span { font-size: .78rem; }
 .home-page .why-cards { grid-template-columns: 1fr; }
 .footer-col a { overflow-wrap: anywhere; }
 .topbar .container > span:first-child { display: inline; }
 .topbar-emergency { display: none; }
}

/* ==========================================================================
   Phase 8 — Homepage Simplification
   ========================================================================== */

/* 6-card service grid: 3 columns × 2 rows on home page (global default is 4 cols) */
.home-page .service-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .home-page .service-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .home-page .service-cards { grid-template-columns: 1fr; } }

/* "View All Services" CTA below the service grid */
.services-section-cta { text-align: center; margin-top: 2.5rem; }

/* Testimonial card */
.testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testimonial-stars { color: #E8A020; font-size: 1.15rem; letter-spacing: 0.08em; line-height: 1; }
.testimonial-text { font-size: 0.95rem; line-height: 1.7; color: var(--color-text); font-style: italic; flex: 1; margin: 0; }
.testimonial-footer { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.25rem; }
.testimonial-author { font-weight: 700; font-size: 0.88rem; color: var(--color-text); margin: 0; }
.testimonial-demo-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
}
.reviews-disclaimer { text-align: center; font-size: 0.8rem; color: var(--color-text-soft); margin-top: 2rem; max-width: 560px; margin-inline: auto; }

/* Scroll margin override: topbar removed on home page saves ~38px */
.home-page #quote,
.home-page #main-content { scroll-margin-top: 90px; }

/* ==========================================================================
   Phase 9 — Full-Screen Mobile Navigation Overlay
   ========================================================================== */

/* Body scroll lock when overlay is open */
body.nav-open { overflow: hidden; }

/* Hide desktop nav CTA at hamburger breakpoint — overlay supplies the CTA */
@media (max-width: 880px) {
  .nav-cta { display: none; }
  /* Prevent the old dropdown from appearing — overlay replaces it */
  .nav-links.is-open { display: none !important; }
}

/* ---------- Overlay container ---------- */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;                    /* above sticky header (100) and mobile bar (200) */
  background: #0A0A0A;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Invisible by default — JS adds .is-open to reveal */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.mobile-nav-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

/* Never render on desktop */
@media (min-width: 881px) {
  .mobile-nav-overlay { display: none !important; }
}

/* ---------- Inner layout ---------- */
.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 1.5rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* ---------- Header row: logo + close button ---------- */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  border-bottom: 1px solid #2A2A2A;
  flex-shrink: 0;
}

.mobile-nav-header .logo-link img {
  height: 32px;
  width: auto;
  max-width: 160px;
}

/* ---------- Close (×) button ---------- */
.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: transparent;
  border: 1px solid #2A2A2A;
  border-radius: 6px;
  color: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mobile-nav-close:hover {
  border-color: var(--color-primary);
  background: rgba(196, 30, 42, 0.12);
}

.mobile-nav-close svg { width: 20px; height: 20px; }

/* ---------- Navigation links ---------- */
.mobile-nav-links {
  flex: 1;
  padding: 1.5rem 0 2rem;
}

.mobile-nav-links ul {
  display: flex;
  flex-direction: column;
}

.mobile-nav-links li {
  border-bottom: 1px solid #1E1E1E;
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  min-height: 68px;
  font-size: clamp(1.35rem, 5vw, 1.65rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  padding: 0.35rem 0;
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.mobile-nav-links a:hover { color: var(--color-primary); padding-left: 0.4rem; }
.mobile-nav-links a.active,
.mobile-nav-links a[aria-current="page"] { color: var(--color-primary); }

/* ---------- CTA button row ---------- */
.mobile-nav-cta {
  padding: 2rem 0 0;
  border-top: 1px solid #2A2A2A;
  margin-top: auto;
}

.mobile-nav-cta .btn {
  font-size: 1rem;
  padding: 1.1rem 2rem;
  border-radius: 6px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-overlay { transition: none; }
}

/* ==========================================================================
   Phase 10 — Our Work section refinements
   (project cards now show image + project name only, no description or links)
   ========================================================================== */

/* Tighten card content area: just number badge + h3 name, nothing below */
.home-page .project-card-content {
  padding: 1rem 1.25rem 1.25rem;
  flex: 0 0 auto;           /* don't stretch — let the image define card height */
}

/* Remove bottom margin from h3 since nothing follows it */
.home-page .project-card h3 {
  margin-bottom: 0;
  font-size: 1.15rem;
}

/* Header: no sub-paragraph in "Our Work" — tighten bottom margin */
.home-page .selected-work-header {
  margin-bottom: 2.5rem;
}

/* Mobile: stack cards cleanly with full-width images */
@media (max-width: 640px) {
  .home-page .project-card-content {
    padding: 0.85rem 1rem 1rem;
  }
}

/* V11 — shared header and service explorer */
#quote, #main-content, .home-page #quote, .home-page #main-content,
.interior-page :is(#quote, #service-content, #service-directory), .service-item {
  scroll-margin-top: 96px;
}
.footer-top { padding-inline: 1.5rem; }
.footer-bottom { padding-inline: 1.5rem; }
.footer-all-services { display: inline-flex; gap: .5rem; padding-block: .5rem; color: #fff; font-weight: 700; }
.form-unavailable { padding: 1rem; background: #f8f9fa; border-left: 3px solid var(--color-primary); }
.form-unavailable a { text-decoration: underline; overflow-wrap: anywhere; }
.quote-form button:disabled { background: #555; border-color: #555; cursor: not-allowed; }
.services-page:not(.services-enhanced) .service-directory-layout { grid-template-columns: 1fr; }
.services-page:not(.services-enhanced) #service-content { display: none; }
.interior-page #service-navigation .service-group { margin: 0; border-top: 1px solid var(--color-border); }
.interior-page #service-navigation .service-group > summary { padding: 1rem 0; font-size: .8rem; font-weight: 700; letter-spacing: .035em; }
.interior-page #service-navigation .service-choice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .8rem; border-radius: 4px; }
.interior-page #service-navigation .service-choice:hover { background: #f2f2f2; text-decoration: none; }
.interior-page #service-navigation .service-choice[aria-current] { background: #fbecef; color: #9e1721; font-weight: 700; box-shadow: inset 3px 0 #c41e2a; }
.service-choice > span { flex-shrink: 0; font-size: 1.2rem; }
.service-choice[aria-expanded="true"] > span { transform: rotate(45deg); }
.service-detail { min-width: 0; padding: 1rem 0; }
.service-detail h2 { margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.service-detail h3 { margin: 1.75rem 0 .75rem; }
.service-detail .service-quote { margin-top: 1.75rem; }
.interior-page #service-navigation .service-detail { padding: 1.25rem .8rem 1.75rem; }
.interior-page #service-navigation .service-detail h2 { font-size: 1.5rem; }
.interior-page #service-navigation .service-detail .eyebrow { font-size: .7rem; }
.interior-page #service-navigation a.service-quote { display: inline-flex; width: auto; padding: .85rem 1.25rem; color: white; }
@media (min-width: 881px) {
  .services-enhanced .service-directory-layout { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .services-enhanced #service-content { position: sticky; top: 96px; }
  .services-enhanced .service-choice > span { display: none; }
}
@media (max-width: 880px) {
  .services-enhanced #service-content { display: none; }
  .services-enhanced .service-directory-layout { gap: 0; }
  .service-detail .service-quote { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .service-choice > span { transition: none; }
}

/* V13 — framed service directory, preserving the V11 interactions. */
.services-page .service-directory .quote-panel {
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}
.services-page .service-directory #browse-title { padding: 1.5rem 1.25rem 0; }
.services-page .service-directory #browse-title + p { padding: 0 1.25rem; font-size: .9375rem; }
.services-page #service-navigation { margin-top: 1.5rem; }
.services-page #service-navigation .service-group > summary {
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  font-size: .75rem;
  line-height: 1.5;
  color: #555;
  letter-spacing: .035em;
}
.services-page #service-navigation .service-item + .service-item { border-top: 1px solid var(--color-border); }
.services-page #service-navigation .service-choice {
  padding: .85rem 1.25rem;
  border-radius: 0;
  font-size: .9375rem;
  line-height: 1.5;
}
.services-page #service-navigation .service-choice > span {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: .2rem;
  font-size: 0;
  transition: transform .2s ease;
}
.services-page #service-navigation .service-choice[aria-expanded="true"] > span { transform: rotate(225deg); }
.services-page #service-navigation .service-detail {
  background: var(--color-surface);
  padding: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.services-page #service-navigation .service-detail p { font-size: .9375rem; }
@media (min-width: 881px) {
  .services-page.services-enhanced .service-directory-layout { grid-template-columns: minmax(280px,320px) minmax(0,1fr); gap: 2.5rem; }
  .services-page.services-enhanced #service-content {
    padding: 2rem;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-height: 300px;
  }
  .services-page #service-content .service-detail { padding: 0; }
  .services-page #service-content h2 { font-size: 1.65rem; line-height: 1.25; }
  .services-page #service-content h3 { font-size: 1rem; }
  .services-page #service-content p:not(.eyebrow) { font-size: .9375rem; line-height: 1.65; }
  .services-page #service-navigation .service-choice > span,
  .services-page #service-navigation .service-choice[aria-expanded="true"] > span { transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .services-page #service-navigation .service-choice > span { transition: none; }
}

/* ── Footer meta blocks (hours / license) ───────────────────────────────── */
.footer-meta {
  margin-top: 0.75rem;
  line-height: 1.4;
}
.footer-meta-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted, #9ca3af);
  margin: 0 0 0.1rem;
}
.footer-meta-value {
  font-size: 0.875rem;
  color: var(--color-footer-text, #d1d5db);
  margin: 0;
}

/* ── Sample number badge ─────────────────────────────────────────────────── */
.sample-badge {
  font-size: 0.7rem;
  color: var(--color-muted, #9ca3af);
  font-style: italic;
  white-space: nowrap;
}

/* ── Phone link in footer "Contact Us" column ───────────────────────────── */
.footer-phone-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
  color: inherit;
  text-decoration: none;
}
.footer-phone-link:hover {
  text-decoration: underline;
}

/* ── Phone link in contact options card — same style as the email link ──── */
.contact-phone-link {
  color: inherit;
  text-decoration: none;
}
.contact-phone-link:hover {
  text-decoration: underline;
}

/* Smart Quote V2 — scoped to the existing quote forms. */
.quote-form .smart-quote-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; min-width: 0; }
.quote-form .smart-quote-step[hidden], .quote-form .smart-quote-actions button[hidden] { display: none !important; }
.quote-form .smart-quote-step h3 { grid-column: 1 / -1; margin: 0 0 .5rem; color: #17212b; }
.quote-form .smart-quote-step h3:focus-visible { outline: 2px solid #c41e2a; outline-offset: 5px; }
.quote-form .smart-quote-progress { color: #9e1721; font-weight: 700; margin: 0 0 .5rem; }
.quote-form .smart-quote-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem; padding: 1rem 0; border-top: 1px solid rgba(0,0,0,0.1); margin-top: 1.5rem; }
.quote-form .smart-quote-actions .btn { min-height: 48px; }
.quote-form .smart-quote-actions .btn-secondary { background: rgba(196,30,42,0.08); border-color: #c41e2a; color: #c41e2a; font-weight: 600; }
.quote-form .smart-quote-actions .btn-secondary:hover { background: rgba(196,30,42,0.15); border-color: #c41e2a; }
.quote-form .smart-quote-note { grid-column: 1 / -1; color: #525252; font-size: .875rem; }
.quote-form .smart-quote-summary { grid-column: 1 / -1; display: block; margin: 0; }
.quote-form .smart-quote-summary dl { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: .6rem 1rem; margin: 0; }
.quote-form .smart-quote-summary dt { font-weight: 700; color: #17212b; }
.quote-form .smart-quote-summary dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #333; }
.quote-form .smart-quote-edit-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; background: none; border: none; color: #c41e2a; text-decoration: underline; cursor: pointer; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; }
.quote-form .smart-quote-edit-btn:hover { color: #9e1721; }
.quote-form .smart-quote-edit-btn:focus-visible { outline: 2px solid #c41e2a; outline-offset: 2px; }
.quote-form .smart-quote-summary-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e5e5e5; }
.quote-form .smart-quote-summary-section:last-child { border-bottom: none; }
.quote-form .smart-quote-summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.quote-form .smart-quote-summary-header h4 { margin: 0; color: #17212b; font-size: 1rem; }

/* Step 1 hierarchy grouping — reuses the step's own 2-column grid internally so
   City/ZIP and Preferred day/time keep pairing exactly as before; only a compact
   legend and light section spacing are added. */
.quote-form .quote-section-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  margin-top: 0.85rem;
  padding: 0;
  padding-top: 0.75rem;
  border: 0;
  border-top: 1px solid var(--color-border);
  min-width: 0;
}

.quote-form .quote-section-group legend {
  grid-column: 1 / -1;
  padding: 0;
  margin: 0 0 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* City/ZIP quiet state — once both hold a valid value, ease off the visual weight
   without ever disabling or hiding the fields. Focus always restores full strength. */
.quote-form .address-field-wrap label,
.quote-form .address-field-wrap input {
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, font-weight 0.15s ease;
}

.quote-form .address-field-wrap.is-confirmed label {
  font-weight: 500;
  color: var(--color-text-muted);
}

.quote-form .address-field-wrap.is-confirmed input {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.quote-form .address-field-wrap.is-confirmed input:focus {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-primary);
}

@media (max-width: 560px) {
  .quote-form .smart-quote-step { grid-template-columns: minmax(0, 1fr); }
  .quote-form .quote-section-group { grid-template-columns: minmax(0, 1fr); }

  .quote-form .smart-quote-summary dd { margin-bottom: .75rem; }
  .quote-form .smart-quote-actions { justify-content: stretch; }
  .quote-form .smart-quote-actions .btn { flex: 1; }
}

/* Autosave/Resume prompt — same dark/glass language as the ZIP toast and
   address suggestion list. Inline within Step 1, not a modal, not fixed. */
.quote-form .quote-resume-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.35rem;
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  color: #ffffff;
  background: rgba(20, 20, 20, 0.82);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.quote-form .quote-resume-banner p {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
}

.quote-form .quote-resume-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .quote-form .quote-resume-banner { padding: 0.75rem 0.9rem; }
  .quote-form .quote-resume-actions { width: 100%; }
  .quote-form .quote-resume-actions .btn { flex: 1; }
}

/* Expanded intake and direct form entry. */
.quote-form .quote-question-group { margin:0; padding:0; border:0; min-width:0; display:grid; gap:1rem; }
.quote-form .quote-question-group[hidden] { display:none !important; }
.quote-form .quote-question-group legend { font-weight:700; color:#17212b; margin-bottom:1rem; font-size:1rem; }
.quote-form .quote-question-group select { width:100%; }
#quote:focus { outline:none; }
#quote:focus-visible { outline:2px solid #c41e2a; outline-offset:5px; }
.quote-form .smart-quote-step h3 { scroll-margin-top:110px; }

/* Safety Screening */
.quote-form .quote-safety-screening {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: grid;
  gap: 0.75rem;
}

.quote-form .quote-safety-screening legend {
  font-weight: 700;
  color: #17212b;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.quote-form .quote-safety-screening input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.quote-form .quote-safety-screening label {
  cursor: pointer;
  user-select: none;
}

/* Safety Screening Wrapper — positioning context for notices */
.safety-screening-wrapper {
  position: relative;
}

/* Safety Notice Container — stays in normal document flow so it scrolls
   naturally with the Smart Quote instead of floating over the viewport. */
.safety-screening-wrapper .safety-notice-container {
  position: static;
  width: 100%;
  pointer-events: auto;
  margin-bottom: 0.75rem;
}

/* Frosted glass temporary Safety Notice card */
.quote-form .quote-safety-notice {
  padding: 1rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid #c41e2a;
  border-radius: 14px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #ffffff;
  
  /* Frosted glass effect */
  background: rgba(20, 20, 20, 0.58);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  
  /* Modern shadow */
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  
  pointer-events: auto;
  animation: slideInSafetyCardInline 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.quote-form .quote-safety-notice:not([hidden]) {
  display: block;
}

.quote-form .quote-safety-notice.level1 {
  border-left: 3px solid #c41e2a;
}

.quote-form .quote-safety-notice.level2 {
  border-left: 3px solid #e63946;
  background: rgba(28, 20, 20, 0.62);
}

.quote-form .quote-safety-notice strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #ffffff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.625rem;
}

.quote-form .quote-safety-notice strong::before {
  content: '⚠';
  font-size: 1rem;
  flex-shrink: 0;
}

.quote-form .quote-safety-notice p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

/* Compact persistent safety status */
.compact-safety-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 2px solid #c41e2a;
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0.75rem;
  animation: fadeInCompact 0.3s ease forwards;
}

.compact-safety-status.level2 {
  border-left: 2px solid #e63946;
}

.compact-safety-status .safety-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.compact-safety-status .safety-text {
  font-weight: 500;
}

/* Animations */
@keyframes fadeInCompact {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Inline animation: slide in from bottom */
@keyframes slideInSafetyCardInline {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .quote-form .quote-safety-notice,
  .compact-safety-status {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Step 2 Optional Fields Toast */
.step2-optional-toast {
  position: relative;
  margin: 1rem 0;
  background: #1a1a1a;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.375rem;
  border-left: 3px solid #c41e2a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 0.875rem;
  line-height: 1.4;
  animation: step2ToastEnter 0.25s ease-out forwards;
  pointer-events: none;
}

@keyframes step2ToastEnter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step2-optional-toast-exit {
  animation: step2ToastExit 0.25s ease-in forwards !important;
}

@keyframes step2ToastExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

/* Mobile adjustments for toast */
@media (max-width: 880px) {
  .step2-optional-toast {
    margin: 0.75rem 0;
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
  }
  
  @keyframes step2ToastEnter {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .step2-optional-toast-exit {
    animation: step2ToastExit 0.25s ease-in forwards !important;
  }
  
  @keyframes step2ToastExit {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .step2-optional-toast,
  .step2-optional-toast-exit {
    animation: none !important;
    opacity: 1;
  }
}

/* Safety option card styling (mobile-safe text containment) */
.safety-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
  overflow: hidden;
}

.safety-option input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.safety-option label {
  cursor: pointer;
  margin: 0;
  user-select: none;
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #17212b;
  transition: color 0.2s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.safety-option input[type="checkbox"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.safety-option input[type="checkbox"]:checked ~ label {
  color: #0066cc;
  font-weight: 500;
}

/* Safety Screening Grid Layout */
.quote-safety-screening {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.safety-symptoms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.safety-exit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.safety-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Mobile: 1 column layout */
@media (max-width: 880px) {
  .safety-symptoms-grid {
    grid-template-columns: 1fr;
  }

  .safety-exit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:880px) {
 .interior-page .contact-intake { gap:1rem; }
 .interior-page .contact-intake-intro { display:block; }
 .interior-page .contact-intake .section-heading { margin:0; }
 .contact-intake-intro .section-heading h2 { font-size:1.5rem; margin-bottom:.5rem; }
 .contact-intake-intro .section-heading p { font-size:.9rem; margin:0; }
 .quote-section { padding-block:1.5rem; }
 .quote-form .smart-quote-step { gap:.85rem; }
 .quote-form .smart-quote-progress { margin-bottom:0; }
}

/* Photos & Files — compact, contextual attachment picker in Step 2. Kept as
   a small bordered card rather than a large dropzone; guidance copy swaps
   per service via syncAttachmentGuidance() in script.js. */
.quote-form .quote-attachments {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: transparent;
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.quote-form .quote-attachments[hidden] { display: none !important; }

/* Drag-and-drop active state — the existing compact card itself is the drop
   target, so this only needs to read as "ready to receive," not a distinct
   giant dropzone. */
.quote-form .quote-attachments.is-drag-active {
  border-color: var(--color-primary);
  background: rgba(196, 30, 42, 0.04);
  box-shadow: inset 0 0 0 1px rgba(196, 30, 42, 0.15), inset 0 0 24px rgba(196, 30, 42, 0.06);
}

.quote-form .quote-attachments legend {
  padding: 0 0.3rem;
  margin: 0 0 0 -0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.quote-form .quote-attachment-guidance {
  margin: 0;
  font-size: 0.85rem;
  color: #525252;
}

.quote-form .quote-attachment-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.quote-form .quote-attachment-pick {
  min-height: 40px;
  padding: 0.55rem 1.1rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.quote-form .quote-attachment-count {
  font-size: 0.78rem;
  color: #7a7a7a;
}

.quote-form .quote-attachment-drag-hint {
  font-size: 0.78rem;
  color: #9a9a9a;
  font-style: italic;
  transition: color 0.15s ease;
}

.quote-form .quote-attachments.is-drag-active .quote-attachment-drag-hint {
  color: var(--color-primary);
  font-weight: 600;
  font-style: normal;
}

/* Drag-and-drop is a desktop/mouse affordance — touch devices only ever see
   the picker button, so the hint text would just be noise there. */
@media (hover: none), (pointer: coarse) {
  .quote-form .quote-attachment-drag-hint { display: none; }
}

.quote-form .quote-attachment-error {
  margin: 0;
  font-size: 0.82rem;
  color: #a3231f;
  background: rgba(196, 30, 42, 0.08);
  border: 1px solid rgba(196, 30, 42, 0.25);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

/* G1.4 — Turnstile load/verification failure. Stays mounted (zero height
   while empty) so its live region exists before any text is written. */
.quote-form .quote-turnstile-message { margin: 0; font-size: 0.82rem; color: #a3231f; }
.quote-form .quote-turnstile-message:not(:empty) {
  margin: 0 0 0.75rem;
  background: rgba(196, 30, 42, 0.08);
  border: 1px solid rgba(196, 30, 42, 0.25);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.quote-form .quote-attachment-resume-note {
  margin: 0;
  font-size: 0.8rem;
  color: #8a6d1f;
  background: rgba(207, 154, 63, 0.12);
  border: 1px solid rgba(207, 154, 63, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.quote-form .quote-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.6rem;
}

.quote-form .quote-attachment-grid[hidden] { display: none !important; }

.quote-form .quote-attachment-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quote-form .quote-attachment-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.quote-form .quote-attachment-thumb-btn:focus-visible {
  outline: 2px solid #c41e2a;
  outline-offset: -2px;
}

.quote-form .quote-attachment-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.quote-form .quote-attachment-card-document .quote-attachment-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(196, 30, 42, 0.08);
  color: #c41e2a;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.quote-form .quote-attachment-meta {
  padding: 0.3rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.quote-form .quote-attachment-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: #17212b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-form .quote-attachment-size {
  font-size: 0.62rem;
  color: #9e9e9e;
}

.quote-form .quote-attachment-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: rgba(20, 20, 20, 0.78);
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.quote-form .quote-attachment-remove:hover { background: rgba(20, 20, 20, 0.92); }
.quote-form .quote-attachment-remove:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Compact single-image preview — intentionally not a full gallery/lightbox. */
.quote-attachment-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.quote-attachment-preview-overlay[hidden] { display: none !important; }

.quote-attachment-preview-img {
  max-width: min(92vw, 720px);
  max-height: 72vh;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.quote-attachment-preview-close { min-height: 40px; }

/* Review — compact attachment summary: a count line, up to 3 tappable photo
   thumbnails (+N tile beyond that), and plain PDF filename/icon rows. */
.quote-form .smart-quote-attachment-summary-count {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: #17212b;
  font-size: 0.875rem;
}

.quote-form .smart-quote-attachment-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.quote-form .smart-quote-attachment-thumb-btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  flex-shrink: 0;
}

.quote-form .smart-quote-attachment-thumb-btn:focus-visible {
  outline: 2px solid #c41e2a;
  outline-offset: 2px;
}

.quote-form .smart-quote-attachment-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quote-form .smart-quote-attachment-thumb-more {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #f4f4f4;
  color: #525252;
  font-size: 0.8rem;
  font-weight: 700;
}

.quote-form .smart-quote-attachment-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: #333333;
}

.quote-form .smart-quote-attachment-doc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.quote-form .smart-quote-attachment-doc-icon {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #c41e2a;
  background: rgba(196, 30, 42, 0.08);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
}

.quote-form .smart-quote-attachment-doc-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .quote-form .quote-attachment-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .quote-form .quote-attachment-controls { gap: 0.5rem; }
}

/* ==========================================================================
   D2.4 — VIEW FULL QUOTE (owner-only read-only page, view-quote.html)
   ========================================================================== */
/* D2.5 design pass — dark premium / iOS-inspired owner interface. Was a
   light page (var(--color-surface)); now a near-black owner record to
   match the owner-email direction. .btn-secondary's BASE styling
   (white text/border, see line ~286) already assumes a dark background,
   so the old light-context override below it is gone — the base style is
   now correct here unmodified. */
/* Micro-polish — extremely subtle ambient light behind the glass surfaces
   (top-centered, fading to flat black well before the fold) so cards have
   something faint to separate from. Black stays dominant; the red layer
   is a barely-perceptible brand glow, not a colored background. */
.view-quote-page {
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(196, 30, 42, 0.05), transparent 60%),
    radial-gradient(ellipse 1200px 800px at 50% -10%, rgba(255, 255, 255, 0.035), transparent 70%),
    var(--color-black);
  color: #FFFFFF;
}

.view-quote-header {
  background: var(--color-black);
  border-bottom: 1px solid var(--color-border-dark);
}
.view-quote-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.view-quote-header-inner .logo-link img { height: 32px; width: auto; }
.view-quote-header-label {
  color: var(--color-text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.view-quote-main { padding: 2.5rem 0 4rem; }
.view-quote-container { max-width: 900px; }

.view-quote-state { text-align: center; padding: 4rem 1rem; }
.view-quote-state h1 { margin-bottom: 0.75rem; color: var(--color-white); }
.view-quote-state p { margin-bottom: 1.5rem; color: var(--color-text-soft); }

/* Approved Change 2 — elevated above the regular cards below (larger
   radius, heavier shadow) so reference + title + badges read as the
   page's clear top information tier within a few seconds. */
.view-quote-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.75rem;
  /* Micro-polish — a touch more surface/border/shadow presence than the
     regular cards below (which stay at 0.055/0.14/blur 14px), so this
     keeps reading as the primary glass surface without growing in size. */
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.view-quote-summary-bar h1 { font-size: 1.6rem; margin-top: 0.15rem; color: #FFFFFF; }
.view-quote-submitted { color: #9A9A9A; font-size: 0.9rem; margin-top: 0.25rem; }

.view-quote-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.view-quote-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
/* Red reserved for urgency/brand emphasis — the default badge above stays
   restrained so the safety variant is the one that visibly stands out. */
.view-quote-badge-safety { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }

.view-quote-urgent-warning {
  background: rgba(196, 30, 42, 0.14);
  border: 1px solid rgba(196, 30, 42, 0.45);
  color: #FFD9DC;
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}

.view-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  /* D2.5: without this, Grid stretches every card in a row to match its
     tallest sibling (e.g. Customer stretched to Location's height because
     of the Maps button) — real, visible wasted whitespace on iPad/desktop
     widths where the 2-column grid is active. Each card should size to
     its own content. */
  align-items: start;
}

/* Approved Change 1 — dense data cards get restrained depth (translucent
   surface + soft shadow + a light blur/saturate) rather than the site's
   marketing-hero glass values (16-20px blur, higher opacity) — tuned down
   so body text stays crisp for fast scanning instead of decorative. */
.view-quote-card {
  /* Micro-polish — slightly more visible surface/edge + a layered
     shadow+inset-highlight pair (the "glass edge" cue) instead of a flat
     drop shadow; blur nudged 12px→14px, still well under the marketing
     hero's 16-20px, so body text stays crisp. */
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.view-quote-grid .view-quote-card { margin-bottom: 0; }
.view-quote-card h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9A9A9A;
  margin-bottom: 0.9rem;
}

.view-quote-dl { display: grid; gap: 0.55rem; }
.view-quote-dl dt {
  font-size: 0.78rem;
  color: #9A9A9A;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.view-quote-dl dd {
  margin: 0 0 0.35rem;
  color: #D0D0D0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* Micro-polish — refines only this page's "Open in Google Maps" button;
   the shared .btn/.btn-secondary base classes (used site-wide) are left
   untouched. Softer corners, a faint dark-glass fill instead of fully
   transparent, and a subtle hover/focus lift — padding/touch target size
   inherited unchanged from .btn. */
.view-quote-inline-btn {
  margin-top: 0.9rem;
  display: inline-block;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.view-quote-inline-btn:hover,
.view-quote-inline-btn:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.view-quote-empty-note { color: var(--color-text-soft); font-size: 0.9rem; }

.view-quote-attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem;
}
.view-quote-attachment-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.view-quote-attachment-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.view-quote-attachment-thumb-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.view-quote-attachment-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.view-quote-attachment-icon {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-dark);
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.view-quote-attachment-doc-link {
  display: block;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}
.view-quote-attachment-meta { padding: 0.5rem 0.6rem 0.7rem; }
.view-quote-attachment-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}
.view-quote-attachment-size {
  display: block;
  font-size: 0.74rem;
  color: #9A9A9A;
  margin-top: 0.15rem;
}

.view-quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.view-quote-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  z-index: 2000;
  padding: 1.5rem;
}
.view-quote-preview-img {
  max-width: min(90vw, 900px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.view-quote-preview-close { align-self: center; }

/* Printers don't render background colors by default (only `color` is
   printed unless the user opts into "print backgrounds"), so the dark
   on-screen palette above (white/light-gray text) would print as
   near-invisible light text on blank paper. Restore the original
   light-on-white print values here — same values this page used before
   the D2.5 dark-theme pass, since those were already print-correct. */
@media print {
  .view-quote-header,
  #vq-map-link,
  .view-quote-actions,
  .view-quote-preview-overlay { display: none !important; }
  .view-quote-page { background: #FFFFFF; color: #111111; }
  .view-quote-summary-bar {
    background: #FFFFFF; border: 1px solid #ccc; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .view-quote-summary-bar h1, .view-quote-dl dd, .view-quote-attachment-name { color: #111111; }
  .view-quote-submitted, .view-quote-card h2, .view-quote-dl dt, .view-quote-attachment-size { color: #666666; }
  .view-quote-badge { background: #f0f0f0; border-color: #ccc; color: #111111; }
  .view-quote-badge-safety { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; }
  .view-quote-urgent-warning { background: #fbecef; border-color: rgba(196, 30, 42, 0.35); color: #7a1119; }
  .view-quote-card {
    background: #FFFFFF; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    break-inside: avoid; border: 1px solid #ccc;
  }
  .view-quote-attachment-card { background: #FFFFFF; border: 1px solid #ccc; }
}

@media (max-width: 760px) {
  .view-quote-grid { grid-template-columns: 1fr; }
  .view-quote-summary-bar { flex-direction: column; }
  .view-quote-actions { flex-direction: column; }
  .view-quote-actions .btn, .view-quote-actions button { width: 100%; text-align: center; }
}

/* Approved Change 3 — iPad portrait (~768px) gets its own tier: two
   ~330px columns feel cramped here (a full address plus the Maps button
   in one), so this width keeps the phone tier's single column instead of
   inheriting the 2-column default meant for landscape/desktop. iPad
   landscape (1024px) and 1440px desktop fall through to the existing
   `.view-quote-grid` 2-column default below — already centered inside a
   900px container so neither stretches nor looks like a forced layout. */
@media (min-width: 761px) and (max-width: 850px) {
  .view-quote-grid { grid-template-columns: 1fr; }
}

/* G1.5 — Privacy Policy draft page (privacy.html only). */
.privacy-page .policy-body { max-width: 72ch; }
.privacy-page .policy-body h2 { font-size: 1.35rem; margin: 2.25rem 0 0.75rem; }
.privacy-page .policy-body p { line-height: 1.7; margin: 0 0 1rem; }
.privacy-page .policy-body ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem; }
.privacy-page .policy-body li { color: var(--color-text-muted); line-height: 1.7; margin-bottom: 0.6rem; }
.privacy-page .policy-body li strong { color: var(--color-text); }
.privacy-page .policy-draft-notice { border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 1.5rem; color: var(--color-text); background: var(--color-surface); }
.privacy-page .policy-updated { font-size: 0.9rem; }
.privacy-page .policy-confirm { color: var(--color-primary-dark); font-weight: 600; }

/* G2 — Emergency CTA layout fixes.
   Desktop: the stacked emergency line + Get a Quote button exactly filled the
   76px header, leaving the line flush against the top edge. Give it room. */
@media (min-width: 881px) {
  .navbar .container { height: 90px; }
}
/* Phones/tablets: the nav CTA block was hidden entirely, so the emergency call
   link only existed inside the menu. Keep the link visible in the header (the
   Get a Quote button stays in the menu and the bottom action bar). */
@media (max-width: 880px) {
  .navbar .container { gap: 0.75rem; }
  .nav-cta { display: flex; margin-left: auto; }
  .nav-cta .btn { display: none; }
  .nav-cta .emergency-cta { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 0 0.25rem; }
}
/* Menu version: 44px touch target. */
.mobile-nav-cta .emergency-cta { padding: 0.2rem 0; }