/* ============================================================
   QHP HOME SERVICES
   FAN-REPAIR MAIN HERO V8
   ============================================================ */

body.qhp-home-services-page {
  --qhph-navy: #0d2c40;
  --qhph-deep: #061d2c;
  --qhph-gold: #d8a53b;
  --qhph-gold-light: #f1ca72;
  --qhph-cream: #f7f5ee;
  --qhph-text: #25333c;
  --qhph-muted: #69767e;
  --qhph-line: rgba(13, 44, 64, 0.14);

  margin: 0;
  background: #ffffff;
  color: var(--qhph-text);
}

body.qhp-home-services-page main {
  overflow: hidden;
}

.qhph-wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.qhph-eyebrow {
  display: inline-block;

  color: #a57718;

  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}


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

.qhph-hero {
  position: relative;

  min-height: 720px;

  display: flex;
  align-items: center;

  background:
    url("../img/qhp-services-home-repairs.png")
    center center / cover no-repeat;
}

.qhph-hero-shade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5, 23, 35, .93) 0%,
      rgba(5, 23, 35, .78) 30%,
      rgba(5, 23, 35, .31) 55%,
      rgba(5, 23, 35, .04) 78%
    );
}

.qhph-hero-inner {
  position: relative;
  z-index: 2;

  padding: 80px 0;
}

.qhph-hero-panel {
  width: min(540px, 100%);

  padding: 42px;

  border:
    1px solid rgba(255, 255, 255, .14);

  border-radius: 16px;

  background:
    rgba(4, 22, 34, .76);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 25px 65px rgba(0, 0, 0, .25);
}

.qhph-hero-panel .qhph-eyebrow {
  color: var(--qhph-gold-light);
}

.qhph-hero h1 {
  margin: 13px 0 20px;

  color: #ffffff;

  font-size: clamp(3.2rem, 6vw, 5.7rem);
  line-height: .93;
  letter-spacing: -.06em;
}

.qhph-hero h1 span {
  display: block;
  color: var(--qhph-gold-light);
}

.qhph-lead {
  margin: 0;

  color: rgba(255, 255, 255, .91);

  font-size: 1.12rem;
  line-height: 1.65;
}

.qhph-support {
  margin: 13px 0 0;

  color: rgba(255, 255, 255, .68);

  line-height: 1.65;
}

.qhph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 28px;
}

.qhph-primary-call {
  min-width: 250px;

  padding: 12px 23px;

  display: flex;
  flex-direction: column;

  border-radius: 7px;

  background: var(--qhph-gold);
  color: var(--qhph-deep);

  text-decoration: none;
}

.qhph-primary-call span {
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.qhph-primary-call strong {
  margin-top: 3px;
  font-size: 1.46rem;
}

.qhph-secondary {
  min-height: 61px;

  padding: 0 21px;

  display: inline-flex;
  align-items: center;

  border:
    1px solid rgba(255, 255, 255, .42);

  border-radius: 7px;

  color: #ffffff;

  font-weight: 850;
  text-decoration: none;
}

.qhph-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 24px;
}

.qhph-tags span {
  padding: 6px 9px;

  border:
    1px solid rgba(240, 199, 107, .26);

  border-radius: 999px;

  color: rgba(255, 255, 255, .75);

  font-size: .71rem;
  font-weight: 700;
}


/* ============================================================
   TWO PERSON CREW
   ============================================================ */

.qhph-crew {
  padding: 95px 0;
  background: #ffffff;
}

.qhph-crew-layout {
  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 80px;
}

.qhph-crew-heading h2 {
  margin: 12px 0 0;

  color: var(--qhph-navy);

  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.qhph-crew-intro {
  max-width: 650px;
  margin: 0 0 29px;

  color: var(--qhph-muted);

  font-size: 1.06rem;
  line-height: 1.75;
}

.qhph-job-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 14px;
}

.qhph-job-grid > div {
  padding: 23px;

  border: 1px solid var(--qhph-line);
  border-radius: 10px;

  background: var(--qhph-cream);
}

.qhph-job-grid strong {
  display: block;

  margin-bottom: 7px;

  color: var(--qhph-navy);

  font-size: 1rem;
}

.qhph-job-grid span {
  color: var(--qhph-muted);

  font-size: .88rem;
  line-height: 1.55;
}

.qhph-not-sure {
  margin-top: 23px;
  padding: 20px 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  border-left: 4px solid var(--qhph-gold);

  background: #eef1ec;
}

.qhph-not-sure strong,
.qhph-not-sure span {
  display: block;
}

.qhph-not-sure strong {
  color: var(--qhph-navy);
}

.qhph-not-sure span {
  margin-top: 3px;

  color: var(--qhph-muted);

  font-size: .88rem;
}

.qhph-not-sure a {
  flex: 0 0 auto;

  color: var(--qhph-navy);

  font-size: 1.18rem;
  font-weight: 900;

  text-decoration: none;
}


/* ============================================================
   CONTACT
   ============================================================ */

.qhph-contact {
  padding: 100px 0;

  background:
    linear-gradient(
      135deg,
      #f7f5ee,
      #eef2ed
    );
}

.qhph-contact-layout {
  display: grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap: 70px;

  align-items: center;
}

.qhph-contact-copy h2 {
  margin: 11px 0 17px;

  color: var(--qhph-navy);

  font-size: clamp(2.7rem, 5vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.qhph-contact-copy > p {
  max-width: 470px;

  color: var(--qhph-muted);

  line-height: 1.7;
}

.qhph-contact-phone {
  width: fit-content;
  min-width: 310px;

  margin-top: 26px;
  padding: 15px 25px;

  display: flex;
  flex-direction: column;

  border-radius: 8px;

  background: var(--qhph-navy);
  color: #ffffff;

  text-decoration: none;
}

.qhph-contact-phone span {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.qhph-contact-phone strong {
  margin-top: 4px;
  font-size: 1.58rem;
}

.qhph-contact-copy .qhph-small {
  margin-top: 17px;

  font-size: .82rem;
}

.qhph-form-card {
  padding: 34px;

  border: 1px solid var(--qhph-line);
  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 20px 55px rgba(8, 31, 47, .10);
}

.qhph-fields {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 17px;
}

.qhph-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.qhph-fields label span {
  color: var(--qhph-navy);

  font-size: .82rem;
  font-weight: 800;
}

.qhph-fields input,
.qhph-fields textarea {
  width: 100%;

  border:
    1px solid rgba(16, 45, 64, .21);

  border-radius: 6px;

  background: #ffffff;
  color: var(--qhph-text);

  font: inherit;
}

.qhph-fields input {
  min-height: 48px;
  padding: 0 13px;
}

.qhph-fields textarea {
  min-height: 140px;
  padding: 13px;

  resize: vertical;
}

.qhph-full {
  grid-column: 1 / -1;
}

.qhph-submit {
  width: 100%;
  min-height: 53px;

  border: 0;
  border-radius: 6px;

  background: var(--qhph-gold);
  color: var(--qhph-deep);

  font: inherit;
  font-weight: 900;

  cursor: pointer;
}

.qhph-form-note {
  margin: 15px 0 0;

  color: var(--qhph-muted);

  font-size: .76rem;
  line-height: 1.5;
}


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

.qhph-mobile-call {
  display: none;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 950px) {

  .qhph-crew-layout,
  .qhph-contact-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .qhph-job-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 720px) {

  .qhph-wrap {
    width: calc(100% - 28px);
  }

  .qhph-hero {
    min-height: 690px;

    align-items: flex-end;

    background-position: 63% center;
  }

  .qhph-hero-shade {
    background:
      linear-gradient(
        180deg,
        rgba(5, 23, 35, .16) 0%,
        rgba(5, 23, 35, .58) 40%,
        rgba(5, 23, 35, .97) 100%
      );
  }

  .qhph-hero-inner {
    padding: 240px 0 25px;
  }

  .qhph-hero-panel {
    width: 100%;
    padding: 27px;

    background: rgba(4, 22, 34, .88);
  }

  .qhph-hero h1 {
    font-size:
      clamp(
        2.8rem,
        13vw,
        4.3rem
      );
  }

  .qhph-actions {
    flex-direction: column;
  }

  .qhph-primary-call,
  .qhph-secondary {
    width: 100%;
  }

  .qhph-crew,
  .qhph-contact {
    padding: 68px 0;
  }

  .qhph-not-sure {
    align-items: flex-start;
    flex-direction: column;
  }

  .qhph-contact-phone {
    width: 100%;
    min-width: 0;
  }

  .qhph-fields {
    grid-template-columns: 1fr;
  }

  .qhph-full {
    grid-column: auto;
  }

  .qhph-form-card {
    padding: 24px;
  }

  .qhph-mobile-call {
    position: fixed;
    z-index: 9999;

    left: 12px;
    right: 12px;
    bottom: 12px;

    min-height: 58px;
    padding: 8px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-radius: 9px;

    background: var(--qhph-gold);
    color: var(--qhph-deep);

    text-decoration: none;

    box-shadow:
      0 12px 32px rgba(0, 0, 0, .27);
  }

  .qhph-mobile-call span {
    font-weight: 800;
  }

  .qhph-mobile-call strong {
    font-size: 1.05rem;
  }

  body.qhp-home-services-page {
    padding-bottom: 82px;
  }

}

/* QHP HERO LIGHTER V9 START */

/*
  Show more of the fan-repair image while
  keeping hero text readable.
*/

body.qhp-home-services-page .qhph-hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(5, 23, 35, 0.68) 0%,
      rgba(5, 23, 35, 0.48) 30%,
      rgba(5, 23, 35, 0.20) 54%,
      rgba(5, 23, 35, 0.02) 78%
    ) !important;
}


body.qhp-home-services-page .qhph-hero-panel {
  background:
    rgba(4, 22, 34, 0.50) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.19) !important;

  backdrop-filter:
    blur(3px) !important;

  -webkit-backdrop-filter:
    blur(3px) !important;

  box-shadow:
    0 18px 44px
    rgba(0, 0, 0, 0.17) !important;
}


body.qhp-home-services-page .qhph-lead {
  color:
    rgba(255, 255, 255, 0.96) !important;
}


body.qhp-home-services-page .qhph-support {
  color:
    rgba(255, 255, 255, 0.84) !important;
}


body.qhp-home-services-page .qhph-tags span {
  color:
    rgba(255, 255, 255, 0.88) !important;

  border-color:
    rgba(241, 202, 114, 0.36) !important;
}


/* MOBILE */

@media (max-width: 720px) {

  body.qhp-home-services-page .qhph-hero {
    background-position:
      64% center !important;
  }


  body.qhp-home-services-page .qhph-hero-shade {
    background:
      linear-gradient(
        180deg,
        rgba(5, 23, 35, 0.05) 0%,
        rgba(5, 23, 35, 0.20) 30%,
        rgba(5, 23, 35, 0.42) 56%,
        rgba(5, 23, 35, 0.68) 100%
      ) !important;
  }


  body.qhp-home-services-page .qhph-hero-panel {
    background:
      rgba(4, 22, 34, 0.43) !important;

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

    backdrop-filter:
      blur(2px) !important;

    -webkit-backdrop-filter:
      blur(2px) !important;
  }


  body.qhp-home-services-page .qhph-hero-inner {
    padding:
      210px 0 25px !important;
  }

}

/* QHP HERO LIGHTER V9 END */


/* QHP MOBILE FOOTER GAP FIX START */

@media (max-width: 720px) {

  body.qhp-home-services-page {
    padding-bottom: 0 !important;
  }

  body.qhp-home-services-page [data-site-footer] {
    padding-bottom: 82px !important;
    background: #071f2f !important;
  }

}

/* QHP MOBILE FOOTER GAP FIX END */

/* QHP FINAL PAGE-BOTTOM GAP FIX START */

html {
  margin: 0 !important;
  padding: 0 !important;
  background: #071f2f !important;
}

body.qhp-home-services-page {
  margin: 0 !important;
  padding-bottom: 0 !important;
  background: #071f2f !important;
}

body.qhp-home-services-page main {
  background: #ffffff;
}

body.qhp-home-services-page [data-site-footer] {
  display: flow-root !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #071f2f !important;
}

body.qhp-home-services-page [data-site-footer] > * {
  margin-bottom: 0 !important;
}

body.qhp-home-services-page [data-site-footer] footer {
  margin: 0 !important;
  border-bottom: 0 !important;
  background: #071f2f !important;
}

body.qhp-home-services-page [data-site-footer] footer > *:last-child,
body.qhp-home-services-page [data-site-footer] > *:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 720px) {
  body.qhp-home-services-page [data-site-footer] {
    padding-bottom: 82px !important;
  }
}

/* QHP FINAL PAGE-BOTTOM GAP FIX END */

/* QHP CONTACT PHONE CONTRAST V1 START */

/* Keep the entire contact CTA readable over its navy background. */

body.qhp-home-services-page a.qhph-contact-phone,
body.qhp-home-services-page a.qhph-contact-phone:link,
body.qhp-home-services-page a.qhph-contact-phone:visited,
body.qhp-home-services-page a.qhph-contact-phone:hover,
body.qhp-home-services-page a.qhph-contact-phone:focus {
    background-color: #0d2c40 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body.qhp-home-services-page a.qhph-contact-phone span {
    color: #ffffff !important;
    opacity: 1 !important;
}

body.qhp-home-services-page a.qhph-contact-phone strong {
    color: #f1ca72 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}

/* QHP CONTACT PHONE CONTRAST V1 END */
