/* ==========================================================
   QUALITY HOME PRESERVATION
   GLOBAL BRAND SYSTEM — 2026
   ==========================================================

   BRAND DIRECTION

   Midnight Navy  #071827
   Slate Blue      #344B61
   Steel Blue      #8FA1B3
   Warm Brass      #C89A3D
   Warm White      #F7F5F0
   Pure White      #FFFFFF

   Olive green is intentionally removed from the website's
   primary visual language.

   ========================================================== */


:root {

  --qhp-midnight: #071827;
  --qhp-navy: #0B2032;

  --qhp-slate: #344B61;
  --qhp-steel: #8FA1B3;

  --qhp-brass: #C89A3D;
  --qhp-brass-dark: #A97D2C;
  --qhp-brass-soft: #E3D0A4;

  --qhp-warm-white: #F7F5F0;
  --qhp-white: #FFFFFF;

  --qhp-text: #172837;
  --qhp-muted: #667684;

  --qhp-border: rgba(7, 24, 39, .12);
}


/* ==========================================================
   PAGE FOUNDATION
   ========================================================== */

html {
  background:
    var(--qhp-warm-white);
}


body {
  background:
    var(--qhp-warm-white);

  color:
    var(--qhp-text);
}


main {
  background:
    var(--qhp-warm-white);
}


::selection {
  background:
    var(--qhp-brass);

  color:
    var(--qhp-midnight);
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color:
    var(--qhp-midnight);
}


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


strong {
  color:
    var(--qhp-midnight);
}


/* Small brand labels */

.eyebrow,
.kicker,
.about-eyebrow,
.about-kicker,
[class*="eyebrow"],
[class*="kicker"] {
  color:
    var(--qhp-brass) !important;
}


/* ==========================================================
   REMOVE OLD GREEN HEADING LANGUAGE
   ========================================================== */

.about-display span,
.about-hero h1 span,
.qhp-contact-hero h1 span,
.vendors-hero h1 span,
.services-hero h1 span,
.hero h1 span,
h1 span,
h2 span {
  color:
    inherit;
}


/*
   Specific About-page headings should now read as one
   confident typographic statement instead of two colors.
*/

.about-display,
.about-story .about-display {
  color:
    var(--qhp-midnight) !important;
}


.about-display span,
.about-story .about-display span {
  color:
    var(--qhp-midnight) !important;
}


/* Dark-section headline exceptions */

.about-standard .about-display,
.about-standard .about-display span {
  color:
    var(--qhp-white) !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

a {
  text-decoration-color:
    rgba(200,154,61,.50);
}


/* ==========================================================
   PRIMARY BUTTON SYSTEM
   ========================================================== */

.btn-primary,
.about-primary,
.nav-cta,
button[type="submit"],
input[type="submit"],
a[class*="primary"] {

  background:
    var(--qhp-brass) !important;

  color:
    var(--qhp-midnight) !important;

  border-color:
    var(--qhp-brass) !important;

  box-shadow:
    none !important;
}


.btn-primary:hover,
.about-primary:hover,
.nav-cta:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
a[class*="primary"]:hover {

  background:
    var(--qhp-brass-dark) !important;

  border-color:
    var(--qhp-brass-dark) !important;

  color:
    var(--qhp-white) !important;
}


/* ==========================================================
   SECONDARY BUTTONS
   ========================================================== */

.btn-secondary,
.about-secondary {

  color:
    var(--qhp-white) !important;

  border-color:
    rgba(255,255,255,.46) !important;

  background:
    rgba(7,24,39,.24) !important;
}


.btn-secondary:hover,
.about-secondary:hover {

  color:
    var(--qhp-midnight) !important;

  background:
    var(--qhp-white) !important;

  border-color:
    var(--qhp-white) !important;
}


/* ==========================================================
   SHARED HEADER
   ========================================================== */

.site-header {
  background:
    rgba(247,245,240,.97) !important;

  border-bottom:
    1px solid var(--qhp-border) !important;
}


.site-header a,
.nav-links a {
  color:
    var(--qhp-midnight) !important;
}


.nav-links a:hover,
.nav-links a.active {
  color:
    var(--qhp-midnight) !important;
}


.nav-links a.active::after {
  background:
    var(--qhp-brass) !important;
}


.mobile-toggle {
  color:
    var(--qhp-midnight) !important;
}


/* Top utility bar */

.utility-bar,
.top-bar,
.site-utility {
  background:
    var(--qhp-midnight) !important;

  color:
    rgba(255,255,255,.72) !important;
}


.utility-bar strong,
.top-bar strong,
.site-utility strong {
  color:
    var(--qhp-white) !important;
}


/* ==========================================================
   HERO SYSTEM
   ========================================================== */

.hero,
.about-hero,
.services-hero,
.vendors-hero,
.qhp-contact-hero {
  color:
    var(--qhp-white);
}


.hero h1,
.about-hero h1,
.services-hero h1,
.vendors-hero h1,
.qhp-contact-hero h1 {
  color:
    var(--qhp-white) !important;
}


/*
   Hero accent text becomes soft warm brass, not green.
*/

.hero h1 span,
.about-hero h1 span,
.services-hero h1 span,
.vendors-hero h1 span,
.qhp-contact-hero h1 span {
  color:
    var(--qhp-brass-soft) !important;
}


/* ==========================================================
   TRUST / FACT STRIPS
   ========================================================== */

.trust-bar,
.about-trust {
  background:
    var(--qhp-white) !important;

  border-color:
    var(--qhp-border) !important;
}


.trust-item,
.about-trust-item {
  border-color:
    var(--qhp-border) !important;
}


.trust-item strong,
.about-trust-item strong {
  color:
    var(--qhp-midnight) !important;
}


.trust-item span,
.about-trust-item span {
  color:
    var(--qhp-muted) !important;
}


/* ==========================================================
   LIGHT SECTIONS
   ========================================================== */

.section,
.about-section,
.about-story,
.about-community {
  background:
    var(--qhp-warm-white);
}


/* White sections */

.about-story,
.about-community,
.section-white {
  background:
    var(--qhp-white) !important;
}


/* Previous beige/mist sections */

.section-mist,
.about-principles,
.about-tech {
  background:
    var(--qhp-warm-white) !important;
}


/* ==========================================================
   CARDS
   ========================================================== */

.card,
.about-principle,
.coverage-card,
[class*="-card"]:not(.about-tech-card) {

  background:
    var(--qhp-white);

  border-color:
    var(--qhp-border);
}


.about-principle {
  box-shadow:
    0 12px 35px rgba(7,24,39,.035);
}


/*
   Remove the green/gold gradient stripe from the Why QHP cards.
   Replace with a quiet brass detail.
*/

.about-principle::before {

  width:
    42px !important;

  height:
    3px !important;

  top:
    0 !important;

  left:
    32px !important;

  right:
    auto !important;

  background:
    var(--qhp-brass) !important;
}


.about-principle-no {
  color:
    var(--qhp-brass) !important;
}


.about-principle h3 {
  color:
    var(--qhp-midnight) !important;
}


.about-principle p {
  color:
    var(--qhp-muted) !important;
}


/* ==========================================================
   DARK OPERATING SECTIONS
   ========================================================== */

.section-dark,
.about-standard {
  background:
    var(--qhp-midnight) !important;

  color:
    var(--qhp-white);
}


.section-dark h1,
.section-dark h2,
.section-dark h3,
.about-standard h1,
.about-standard h2,
.about-standard h3 {
  color:
    var(--qhp-white) !important;
}


.section-dark p,
.about-standard p {
  color:
    rgba(255,255,255,.68) !important;
}


.about-process {
  border-color:
    rgba(255,255,255,.13) !important;
}


.about-process-step {
  border-color:
    rgba(255,255,255,.13) !important;
}


.about-process-num,
.step-no {
  color:
    var(--qhp-brass) !important;
}


/* ==========================================================
   TECHNOLOGY / NAESOR
   ========================================================== */

.about-tech-card {
  background:
    linear-gradient(
      145deg,
      var(--qhp-midnight) 0%,
      #10283B 100%
    ) !important;
}


.about-tech-label {
  color:
    var(--qhp-brass) !important;
}


.about-tech-card h3 {
  color:
    var(--qhp-white) !important;
}


.about-tech-row {
  border-color:
    rgba(255,255,255,.12) !important;
}


.about-tech-row strong {
  color:
    var(--qhp-white) !important;
}


.about-tech-row span {
  color:
    var(--qhp-steel) !important;
}


/* ==========================================================
   COUNTY / COVERAGE GRID
   ========================================================== */

.about-counties {
  border-color:
    var(--qhp-border) !important;
}


.about-county {
  background:
    var(--qhp-white);

  border-color:
    var(--qhp-border) !important;

  color:
    var(--qhp-midnight) !important;
}


/* ==========================================================
   LEADERSHIP
   ========================================================== */

.about-leadership {
  border-color:
    var(--qhp-border) !important;
}


.about-leadership-divider {
  background:
    var(--qhp-border) !important;
}


.about-leadership strong {
  color:
    var(--qhp-midnight) !important;
}


.about-leadership span {
  color:
    var(--qhp-muted) !important;
}


/* ==========================================================
   CTA SECTIONS
   ========================================================== */

.cta-band,
.about-cta {

  background:
    var(--qhp-slate) !important;

  color:
    var(--qhp-white);
}


.cta-band h2,
.about-cta h2 {
  color:
    var(--qhp-white) !important;
}


.cta-band p,
.about-cta p {
  color:
    rgba(255,255,255,.74) !important;
}


/* ==========================================================
   FORMS
   ========================================================== */

input,
textarea,
select {

  background:
    var(--qhp-white);

  color:
    var(--qhp-text);

  border-color:
    var(--qhp-border);
}


input:focus,
textarea:focus,
select:focus {

  outline:
    2px solid rgba(200,154,61,.35);

  border-color:
    var(--qhp-brass);
}


/* ==========================================================
   SHARED FOOTER
   ========================================================== */

.site-footer,
footer.site-footer {

  background:
    var(--qhp-midnight) !important;

  color:
    rgba(255,255,255,.68) !important;
}


.site-footer .footer-top,
.site-footer .footer-bottom {
  background:
    transparent !important;
}


.site-footer .footer-bottom {

  border-top:
    1px solid rgba(255,255,255,.12) !important;

  color:
    rgba(255,255,255,.52) !important;
}


.site-footer h4,
.site-footer strong {
  color:
    var(--qhp-white) !important;
}


.site-footer p,
.site-footer span {
  color:
    rgba(255,255,255,.58) !important;
}


.site-footer a,
.site-footer .footer-credit a {

  color:
    rgba(255,255,255,.76) !important;
}


.site-footer a:hover,
.site-footer .footer-credit a:hover {

  color:
    var(--qhp-brass) !important;
}


/* ==========================================================
   IMAGE TREATMENT
   ========================================================== */

.about-story-visual,
.about-standard-image,
.about-community-image {

  box-shadow:
    0 22px 60px rgba(7,24,39,.10) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 650px) {

  body,
  main {
    background:
      var(--qhp-warm-white);
  }


  .about-story {
    background:
      var(--qhp-white) !important;
  }


  .about-story .about-display,
  .about-story .about-display span,
  .about-principles .about-display,
  .about-principles .about-display span,
  .about-community .about-display,
  .about-community .about-display span {

    color:
      var(--qhp-midnight) !important;
  }


  .about-leadership {
    background:
      transparent !important;
  }


  .about-principle {

    background:
      var(--qhp-white) !important;

    border:
      1px solid var(--qhp-border) !important;
  }

}


/* ==========================================================
   END GLOBAL BRAND SYSTEM
   ========================================================== */