/* v80 — Sitewide charcoal. One set of dark tones for every page, phone and desktop.
   Dark sections fade from charcoal at the top to a deeper charcoal at the bottom (straight top-to-bottom).
   Loaded last on every page. The homepage phone hero keeps its own tuned version in home-charcoal.css. */

/* Page-top areas: very gentle fade so photo edges blend in with no visible seam */
html body .svc-hero-bg,
html body .hero-bg{background:linear-gradient(to bottom,#212326 0%,#1d1f22 55%,#1a1c1f 100%)}
html body .legal-hero,
html body .ty-hero{background:linear-gradient(to bottom,#232528 0%,#1d1f22 55%,#18191c 100%)}

/* Strip of ratings under the top area */
html body .trust-strip-bar{background:linear-gradient(to bottom,#1d1f22 0%,#18191c 100%)}

/* Full-width dark sections */
html body .final-cta,
html body .warranty,
html body .repairs-cta,
html body .insurance-band,
html body .siding-process,
html body.page-repairs .process{background:linear-gradient(to bottom,#232528 0%,#1b1d20 50%,#141517 100%) !important}

/* Dark cards and panels sitting on light sections */
html body .warranty-card-mfg,
html body .ext-card-featured,
html body .ms-panel-dark{background:linear-gradient(to bottom,#26282b 0%,#1c1e21 100%)}

/* Footer */
html body .footer{background:linear-gradient(to bottom,#1c1e20 0%,#161719 100%)}

/* Phones */
@media (max-width:768px){
  /* Photo fades into charcoal, then the text area deepens slightly toward the bottom */
  html body .svc-hero,
  html body .hero{background:linear-gradient(to bottom,#1d1f22 0%,#1d1f22 58%,#17181b 100%)}
  html body .trust-strip-bar{background:#17181b}
  html body .sticky-mobile-cta{background:linear-gradient(to bottom,#232528,#1c1e20);box-shadow:0 -1px 0 rgba(255,255,255,.06)}
}

/* Tablet and desktop: the "What we do" block is dark (it is white on phones) */
@media (min-width:769px){
  html body .services{background:linear-gradient(to bottom,#222427 0%,#1b1c1f 50%,#141517 100%)}
}

/* Brighter gold on dark areas (gold on white areas stays as is so it stays readable) */
html body .hero,html body .svc-hero,html body .trust-strip-bar,html body .sticky-mobile-cta,
html body .final-cta,html body .warranty,html body .repairs-cta,html body .insurance-band,
html body .siding-process,html body.page-repairs .process,html body .ty-hero,html body .legal-hero,
html body .warranty-card-mfg,html body .ext-card-featured,html body .ms-panel-dark,html body .footer,
html body .mobile-nav-overlay{--amber-400:#e2a94e;--amber-300:#ecbd6e}
html body .hero h1 .accent,html body .svc-hero h1 .accent{color:#e2a94e}
html body .hero .btn-amber,html body .svc-hero .btn-amber,html body .final-cta .btn-amber,
html body .repairs-cta .btn-amber,html body .insurance-band .btn-amber,html body .warranty .btn-amber,
html body .siding-process .btn-amber,html body .ty-hero .btn-amber,html body .sticky-cta-form{background:linear-gradient(180deg,#ecb65c 0%,#d99c3f 100%);color:#17181a;box-shadow:var(--shadow-amber)}

/* v97 — Quote callouts: the edge bar is teal instead of gold, so gold stays for buttons and stars.
   Stars and the faint quote mark stay gold. Delete this block to go back to gold edges. */
html body .claim-persistent-quote,
html body .cta-band-quote,
html body .repair-types-quote,
html body .repairs-cta-quote,
html body .scope-quote-card,
html body .siding-quote-text,
html body .siding-signs-quote,
html body .spec-inline-quote,
html body .why-pullquote,
html body .insurance-micro-proof,
html body .svc-proof-inner{border-left-color:var(--teal-400)}
html body .about-pq::before,
html body .canton-quote-inner::before,
html body .faq-sidebar-quote::before,
html body .hs-faq-quote::before,
html body .hs-quote-inner::before,
html body .quote-band-inner::before,
html body .repairs-quote-inner::before,
html body .replacement-quote-inner::before,
html body .siding-quote-inner::before,
html body .spec-faq-quote::before,
html body .spec-quote-inner::before,
html body .storm-mobile-pq-inner::before{background:linear-gradient(to bottom,var(--teal-400),var(--teal-300))}
html body .storm-pq-border{background:var(--teal-400)}