/* ==========================================================
   QUALITY HOME PRESERVATION
   CONTACT PAGE — ESTHER HERO
   ========================================================== */

.qhp-contact-hero {
  position: relative !important;
  isolation: isolate;

  width: 100% !important;

  min-height:
    clamp(590px, 35vw, 750px) !important;

  display: flex !important;
  align-items: center !important;

  overflow: hidden !important;

  color: #FFFFFF !important;

  background-image:
    url("../img/qhp-services-team-contact.png") !important;

  background-repeat:
    no-repeat !important;

  background-size:
    cover !important;

  background-position:
    center center !important;

  background-color:
    #07111F !important;
}


/* ==========================================================
   LEFT-SIDE READABILITY

   Esther remains visible toward center/right.
   No rectangular content panel.
   ========================================================== */

.qhp-contact-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(7,17,31,.87) 0%,
      rgba(7,17,31,.72) 20%,
      rgba(7,17,31,.48) 37%,
      rgba(7,17,31,.20) 52%,
      rgba(7,17,31,.04) 67%,
      rgba(7,17,31,.00) 82%
    );
}


.qhp-contact-hero::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(7,17,31,.05) 0%,
      rgba(7,17,31,.00) 65%,
      rgba(7,17,31,.13) 100%
    );
}


/* Make all existing content sit above image */

.qhp-contact-hero > * {
  position: relative !important;
  z-index: 2 !important;
}


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

.qhp-contact-hero .shell,
.qhp-contact-hero .container {
  width:
    min(1480px, calc(100% - 80px)) !important;

  max-width:
    1480px !important;

  margin-inline:
    auto !important;
}


/* ==========================================================
   REMOVE OLD HERO BOX STYLING
   ========================================================== */

.qhp-contact-hero .hero-copy,
.qhp-contact-hero .page-hero-copy,
.qhp-contact-hero .hero-content,
.qhp-contact-hero .page-hero-content,
.qhp-contact-hero .content {
  max-width:
    590px !important;

  margin-left:
    0 !important;

  margin-right:
    auto !important;

  padding:
    0 !important;

  background:
    transparent !important;

  background-image:
    none !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


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

.qhp-contact-hero .eyebrow,
.qhp-contact-hero .kicker {
  color:
    #D8B35F !important;

  font-size:
    .70rem !important;

  font-weight:
    900 !important;

  letter-spacing:
    .19em !important;

  text-transform:
    uppercase !important;
}


.qhp-contact-hero h1 {
  max-width:
    620px !important;

  margin:
    0 !important;

  color:
    #FFFFFF !important;

  font-size:
    clamp(3.8rem, 5vw, 5.8rem) !important;

  font-weight:
    800 !important;

  line-height:
    .90 !important;

  letter-spacing:
    -.065em !important;
}


.qhp-contact-hero h1 span {
  color:
    #E4D6B4 !important;
}


.qhp-contact-hero p {
  max-width:
    540px !important;

  color:
    rgba(255,255,255,.90) !important;

  font-size:
    1.02rem !important;

  line-height:
    1.68 !important;
}


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

.qhp-contact-hero .btn,
.qhp-contact-hero .button,
.qhp-contact-hero a[class*="btn"] {
  min-height:
    50px !important;

  border-radius:
    999px !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

  .qhp-contact-hero {
    min-height:
      650px !important;

    /*
     * Preserve Esther in the frame.
     */
    background-position:
      58% center !important;
  }


  .qhp-contact-hero::before {
    background:
      linear-gradient(
        90deg,
        rgba(7,17,31,.88) 0%,
        rgba(7,17,31,.69) 34%,
        rgba(7,17,31,.30) 62%,
        rgba(7,17,31,.03) 100%
      );
  }


  .qhp-contact-hero .shell,
  .qhp-contact-hero .container {
    width:
      calc(100% - 42px) !important;
  }

}


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

   Keep Esther visible in upper portion.
   Copy moves down over soft dark fade.
   ========================================================== */

@media (max-width: 650px) {

  .qhp-contact-hero {
    min-height:
      780px !important;

    align-items:
      flex-end !important;

    background-position:
      60% center !important;
  }


  .qhp-contact-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(7,17,31,.00) 0%,
        rgba(7,17,31,.02) 28%,
        rgba(7,17,31,.18) 48%,
        rgba(7,17,31,.70) 72%,
        rgba(7,17,31,.95) 100%
      );
  }


  .qhp-contact-hero .shell,
  .qhp-contact-hero .container {
    width:
      calc(100% - 34px) !important;

    padding-bottom:
      30px !important;
  }


  .qhp-contact-hero h1 {
    font-size:
      clamp(2.9rem, 12vw, 4rem) !important;
  }


  .qhp-contact-hero p {
    font-size:
      .96rem !important;
  }

}


/* ==========================================================
   ULTRAWIDE
   ========================================================== */

@media (min-width: 1600px) {

  .qhp-contact-hero {
    min-height:
      clamp(630px, 31vw, 770px) !important;

    background-position:
      center center !important;
  }


  .qhp-contact-hero .shell,
  .qhp-contact-hero .container {
    width:
      min(1580px, calc(100% - 120px)) !important;
  }


  .qhp-contact-hero h1 {
    font-size:
      5.5rem !important;
  }

}