/* ============================================================
   custom.css — McKinney's overrides, loaded after the engine's
   /assets/styles.css on every page.

   Ported from the live site (#62). The old pages each carried an
   inline <style> block; this file is the union of those blocks,
   de-duplicated. Every selector here only matches markup on the
   page(s) it came from, so merging them changes nothing.
   One known difference: .call-btn-disabled (Windows/Linux, set by
   ui.js) now also applies on privacy/terms, which lacked it.
   ============================================================ */

/* The old site's styles.css also rounded the corners of every
   section in <main>; the engine stylesheet dropped that. */
main>section{border-radius:var(--radius)}


/* ── From index.html ─────────────────────────────── */
.hero-photo{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}
.site-header .logo{color:#000000;display:flex;align-items:center;gap:0.5rem}
.site-footer .logo{color:var(--primary)}
.logo-img{height:2rem;width:auto;display:block}
@media (max-width:768px){.trust-badge:nth-child(1),.trust-badge:nth-child(4){display:none}}
#contact-form.footer-cta{border-top:1px solid #e5e5e5}
@media (max-width:768px){.call-btn-number{display:none}}
@media (min-width:769px){.header-actions .text-btn{display:none !important}}
.nav-quote{font-weight:700}
@media (max-width:768px){.header-inner{flex-direction:column;align-items:center;gap:0.15rem;padding:0.6rem 0}.site-header .logo{order:1;justify-content:center;width:100%}.nav-toggle{order:2;margin:0 auto;width:3.5rem;height:1.5rem;gap:4px;justify-content:center;align-items:center}.nav-toggle-bar{display:block;width:100%;height:1.5px;background:#000000;border-radius:0}}
.footer-col ul li{color:var(--dark-muted);font-size:var(--text-sm);cursor:default}
.footer-col ul li:hover{text-decoration:underline}
.footer-bottom{justify-content:center}
.footer-bottom p{color:var(--primary);text-align:center}
.service-areas-map-web-only{display:none}
@media (min-width:769px){.service-areas-map-web-only{display:block}}
.service-areas-map-img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}
.call-btn-disabled{pointer-events:none;cursor:default;opacity:0.9}
.hero-social{display:flex;gap:0.5rem;align-items:center}
@media (min-width:901px){.hero-inner{position:relative;align-items:end}.hero-social{position:absolute;right:0;bottom:-7px;margin:0;z-index:2}}
.social-btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:0;background:0 0;color:var(--text);text-decoration:none;transition:color var(--transition),transform calc(var(--transition)/2)}
.social-btn:hover{text-decoration:none;transform:translateY(-2px)}
.social-facebook:hover{color:#1877F2}
.social-tiktok:hover{color:#000}
.social-btn svg{flex-shrink:0}
@media (max-width:900px){.hero-social{display:none}}
.emergency-banner{background:var(--dark);color:#fff;padding:.6rem 0}
.emergency-banner-inner{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;text-align:center}
.emergency-banner-text{font-size:var(--text-sm)}
.emergency-banner-text strong{color:var(--primary)}
.service-card-emergency{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--border);font-size:var(--text-xs);font-weight:700;color:var(--dark);display:flex;align-items:center;gap:.35rem}
.service-card-emergency .dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--error);flex-shrink:0}

/* ── From about.html ─────────────────────────────── */
.about-hero {
      padding: 4rem 0 3rem;
      background: #fff;
    }
.about-hero-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
@media (max-width: 768px) {
      .about-hero-inner {
        grid-template-columns: 1fr;
      }
      .about-hero-image {
        order: -1;
      }
    }
.about-eyebrow {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #6b7280;
      margin-bottom: 0.75rem;
    }
.about-hero h1 {
      font-size: clamp(2rem, 4vw, 2.75rem);
      line-height: 1.15;
      margin-bottom: 0.2rem;
    }
.about-hero p {
      color: #4b5563;
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 1rem;
    }
.about-hero-image img {
      width: 100%;
      border-radius: var(--radius-lg);
      display: block;
    }
.about-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin: 1.75rem 0;
    }
.about-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
.about-stat-number {
      font-size: 2rem;
      font-weight: 800;
      color: var(--primary);
      line-height: 1;
    }
.about-stat-label {
      font-size: 0.85rem;
      color: #6b7280;
      margin-top: 0.25rem;
    }
@media (max-width: 768px) {
      .about-stat-label {
        font-size: 0.7rem;
      }
      .about-stat-number {
        font-size: 1.6rem;
      }
    }
.about-values {
      background: #f9fafb;
      padding: 4rem 0;
    }
.about-values-inner {
      max-width: 860px;
      margin: 0 auto;
      text-align: center;
    }
.about-values h2 {
      margin-bottom: 1rem;
    }
.about-values .lead {
      color: #4b5563;
      font-size: 1.1rem;
      line-height: 1.7;
      margin-bottom: 2.5rem;
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }
.values-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.25rem;
      text-align: left;
    }
.value-card {
      background: #fff;
      border-radius: 12px;
      padding: 1.5rem 1.5rem 1.5rem 1.25rem;
      box-shadow: 0 1px 6px rgba(0,0,0,0.07);
      border-left: 4px solid #FFD400;
    }
.value-card-title {
      font-weight: 700;
      font-size: 1rem;
      color: #111111;
      margin-bottom: 0.5rem;
    }
.value-card-desc {
      font-size: 0.9rem;
      color: #4b5563;
      line-height: 1.65;
    }
.about-cta {
      padding: 4rem 0;
      background: #fff;
      text-align: center;
    }
.about-cta h2 {
      margin-bottom: 0.75rem;
    }
.about-cta p {
      color: var(--muted);
      margin-bottom: 2rem;
      font-size: var(--text-lg);
    }
.about-cta-buttons {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }
.about-hero-content .cta-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
    }

/* ── From privacy.html ─────────────────────────────── */
.legal-hero{padding:3.5rem 0 1.5rem;background:#fff}
.legal-hero h1{font-size:clamp(1.9rem,4vw,2.5rem);line-height:1.15;margin-bottom:0.5rem}
.legal-updated{color:#6b7280;font-size:0.9rem}
.legal-body{padding:0 0 4rem;background:#fff}
.legal-inner{max-width:760px;margin:0 auto}
.legal-lead{color:#4b5563;font-size:1.05rem;line-height:1.75;margin-bottom:2rem}
.legal-inner h2{font-size:1.35rem;margin:2.5rem 0 0.75rem;padding-top:1.75rem;border-top:1px solid #e5e7eb}
.legal-inner h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal-inner h3{font-size:1.02rem;margin:1.5rem 0 0.5rem;color:#111111}
.legal-inner p{color:#4b5563;line-height:1.75;margin-bottom:1rem}
.legal-inner ul{margin:0 0 1rem 1.25rem;padding:0}
.legal-inner li{color:#4b5563;line-height:1.7;margin-bottom:0.5rem}
.legal-inner a{color:#111111;text-decoration:underline}
.legal-callout{background:#f9fafb;border-left:4px solid #FFD400;border-radius:8px;padding:1.25rem 1.5rem;margin:1.5rem 0}
.legal-callout p:last-child{margin-bottom:0}
.legal-cta{padding:3.5rem 0;background:#f9fafb;text-align:center}
.legal-cta h2{margin-bottom:0.75rem}
.legal-cta p{color:var(--muted);margin-bottom:1.75rem;font-size:var(--text-lg)}
.legal-cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* WHY: the live site's theme script wrote every :root variable inline on
   <html>, which beat styles.css's 600px block that shrinks section padding.
   So live phones always got desktop section spacing. The engine's theme
   script only writes colours and fonts, so pin the live values here (#62). */
@media (max-width:600px){:root{--section-pad:4.5rem;--section-pad-sm:3rem;--section-pad-lg:5rem}}
/* Footer column titles are h2 (heading order, engine 2.13 a11y check); keep the old small h4 look */
.footer-col h2{font-size:var(--text-sm);margin-bottom:1rem;color:var(--primary);text-transform:uppercase;letter-spacing:var(--letter-wider)}
/* Contact page: "Request a Quote" is the page h1 and the card title an h2; same look as before */
.footer-cta-left h1{font-size:var(--h2);color:var(--cta-heading-color);margin-bottom:1rem}
.quote-form-card h2{margin-bottom:1.25rem;font-size:var(--text-md)}