/* =========================================================
   SERVICE AREA HERO
   ========================================================= */

.service-area-hero {
  position: relative;

  width: 100%;
  min-height: 670px;

  padding: 0 !important;

  overflow: hidden;

  background: #000;
  color: #fff;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.service-area-hero > .brxe-container {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

  align-items: center;

  width: 100%;
  max-width: 1320px;

  margin-inline: auto;

  padding:
    96px
    24px;

  gap: 64px;
}


/* =========================================================
   BACKGROUND OVERLAYS
   ========================================================= */

.service-area-hero::before {
  content: "";

  position: absolute;
  z-index: 1;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.96) 0%,
      rgba(0, 0, 0, 0.88) 38%,
      rgba(0, 0, 0, 0.22) 70%,
      rgba(0, 0, 0, 0) 100%
    );
}


.service-area-hero::after {
  content: "";

  position: absolute;
  z-index: 1;

  right: 0;
  bottom: 0;
  left: 0;

  height: 160px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.75) 100%
    );
}


/* =========================================================
   LEFT HERO CONTENT
   ========================================================= */

.service-area-hero .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 100%;

  color: #fff;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}


.service-area-hero .hero-eyebrow {
  margin: 0 0 12px;

  color: #de0e1f;

  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;

  text-transform: uppercase;
  letter-spacing: 0.18em;
}


.service-area-hero .hero-title {
  width: 70%;

  margin: 0;

  color: #fff;

  font-size: clamp(
    31.73px,
    calc(26.52px + 1.4481vw),
    47.37px
  );

  font-weight: 700;
  line-height: 1.2;

  letter-spacing: normal;
}


.service-area-hero .hero-description {
  max-width: 56ch;

  margin-top: 24px;

  color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  font-size: clamp(
    16.08px,
    calc(15.44px + 0.1778vw),
    18px
  );

  line-height: clamp(
    22.9px,
    calc(22.233px + 0.1852vw),
    24.9px
  );
}


.service-area-hero .hero-description p {
  margin: 0;
}


.service-area-hero .hero-description p + p {
  margin-top: 24px;
}


.service-area-hero .hero-description a {
  color: #de0e1f;

  text-decoration: underline;
  text-underline-offset: 3px;
}


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

.service-area-hero .hero-phone {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  gap: 16px;

  margin-top: 32px;

  color: #fff;

  text-decoration: none;
}


.service-area-hero .hero-phone-icon {
  display: flex;
  flex: 0 0 56px;

  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  border-radius: 50%;

  background: #de0e1f;
  color: #fff;
}


.service-area-hero .hero-phone-content {
  display: flex;
  flex-direction: column;
}


.service-area-hero .hero-phone-label {
  color:
    rgba(
      255,
      255,
      255,
      0.6
    );

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;

  text-transform: uppercase;
  letter-spacing: 0.16em;
}


.service-area-hero .hero-phone-number {
  color: #fff;

  font-size: 30px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: -0.01em;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.service-area-hero .hero-benefits {
  display: flex;
  flex-wrap: wrap;

  column-gap: 24px;
  row-gap: 12px;

  margin: 40px 0 0;
  padding: 24px 0 0;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  list-style: none;
}


.service-area-hero .hero-benefit {
  display: flex;
  align-items: center;

  gap: 8px;

  color: #fff;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  white-space: nowrap;
}


.service-area-hero .hero-benefit-icon {
  display: flex;
  flex: 0 0 16px;

  align-items: center;
  justify-content: center;

  color: #de0e1f;
}


/* =========================================================
   RIGHT FORM CARD
   ========================================================= */

.service-area-hero
> .brxe-container
> .brxe-shortcode:nth-child(2) {
  width: 100%;
  max-width: 560px;

  justify-self: end;

  padding: 36px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius: 16px;

  background: #000;
}


/* =========================================================
   FORM HEADER
   ========================================================= */

.service-area-hero .rsp-sa-hero-form::before {
  content: "Book a plumber";

  display: block;

  margin: 0 0 4px;

  color: #fff;

  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}


.service-area-hero .rsp-sa-hero-form__form::before {
  content: "Same-day service. We call you straight back.";

  display: block;

  margin-bottom: 24px;

  color:
    rgba(
      255,
      255,
      255,
      0.6
    );

  font-size: 14px;
  line-height: 1.4;
}


/* =========================================================
   WS FORM RESET
   ========================================================= */

.service-area-hero .wsf-form,
.service-area-hero .wsf-sections,
.service-area-hero .wsf-section,
.service-area-hero .wsf-fields,
.service-area-hero .wsf-field-wrapper {
  background: transparent !important;
}


.service-area-hero .wsf-section,
.service-area-hero .wsf-sections,
.service-area-hero .wsf-fields {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}


/* =========================================================
   GRID
   ========================================================= */

.service-area-hero .wsf-grid.wsf-fields {
  display: grid !important;

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

  column-gap: 24px;
  row-gap: 12px;
}


/* Half-width */

.service-area-hero #wsf-1-field-wrapper-1,
.service-area-hero #wsf-1-field-wrapper-4,
.service-area-hero #wsf-1-field-wrapper-3,
.service-area-hero #wsf-1-field-wrapper-9,
.service-area-hero #wsf-1-field-wrapper-10,
.service-area-hero #wsf-1-field-wrapper-12 {
  grid-column: span 1;

  width: 100% !important;
  max-width: none !important;

  flex: none !important;
}


/* Full-width */

.service-area-hero #wsf-1-field-wrapper-8,
.service-area-hero #wsf-1-field-wrapper-13,
.service-area-hero #wsf-1-field-wrapper-56,
.service-area-hero #wsf-1-field-wrapper-7 {
  grid-column: 1 / -1;

  width: 100% !important;
  max-width: none !important;

  flex: none !important;
}


/* =========================================================
   WRAPPERS
   ========================================================= */

.service-area-hero .wsf-field-wrapper {
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   ALL FORM CONTROLS
   ========================================================= */

.service-area-hero .wsf-form input.wsf-field,
.service-area-hero .wsf-form select.wsf-field,
.service-area-hero .wsf-form textarea.wsf-field {
  width: 100% !important;

  min-height: 44px;

  margin: 0 !important;
  padding: 8px 0 !important;

  border: 0 !important;
  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.35
    ) !important;

  border-radius: 0 !important;

  outline: none !important;

  background:
    transparent !important;

  box-shadow: none !important;

  /*
   * IMPORTANT:
   * actual entered text
   */
  color: #fff !important;

  -webkit-text-fill-color: #fff !important;

  caret-color: #fff;

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.service-area-hero
.wsf-form
input.wsf-field::placeholder,

.service-area-hero
.wsf-form
textarea.wsf-field::placeholder {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    ) !important;

  -webkit-text-fill-color:
    rgba(
      255,
      255,
      255,
      0.72
    ) !important;

  opacity: 1;
}


/* =========================================================
   AUTOFILL
   ========================================================= */

.service-area-hero
.wsf-form
input.wsf-field:-webkit-autofill,

.service-area-hero
.wsf-form
input.wsf-field:-webkit-autofill:hover,

.service-area-hero
.wsf-form
input.wsf-field:-webkit-autofill:focus {
  -webkit-text-fill-color:
    #fff !important;

  caret-color:
    #fff !important;

  transition:
    background-color
    9999s ease-out
    0s;
}


/* =========================================================
   SELECT
   ========================================================= */

.service-area-hero
.wsf-form
select.wsf-field {
  color: #fff !important;

  -webkit-text-fill-color:
    #fff !important;

  appearance: none;
}


.service-area-hero
.wsf-form
select.wsf-field option {
  background: #000;

  color: #fff;
}


/* Empty/default select */

.service-area-hero
.wsf-form
select.wsf-field:invalid {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    ) !important;
}


/* =========================================================
   SELECT ARROWS
   ========================================================= */

.service-area-hero .wsf-select-arrow {
  right: 0 !important;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    ) !important;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.service-area-hero
.wsf-form
textarea.wsf-field {
  height: 44px;
  min-height: 44px;

  resize: none;
}


/* =========================================================
   FOCUS
   ========================================================= */

.service-area-hero
.wsf-form
input.wsf-field:focus,

.service-area-hero
.wsf-form
select.wsf-field:focus,

.service-area-hero
.wsf-form
textarea.wsf-field:focus {
  border-bottom-color:
    #fff !important;

  color:
    #fff !important;

  -webkit-text-fill-color:
    #fff !important;

  box-shadow:
    none !important;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.service-area-hero
#wsf-1-field-wrapper-7 {
  margin-top:
    16px !important;
}

.rsp-sa-hero-form__form .wsf-button-primary,
.rsp-sa-hero-form__form #wsf-1-field-7{
	width: 100% !important;
}

.service-area-hero
.wsf-form
.wsf-button-primary {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  height: 47px;

  margin: 0 !important;

  padding-inline: 27px;

  border: 0 !important;
  border-radius: 5px;

  background:
    #de0e1f !important;

  color:
    #fff !important;

  -webkit-text-fill-color:
    #fff !important;

  font-size: clamp(
    16.08px,
    calc(15.44px + 0.1778vw),
    18px
  );

  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  transition:
    opacity 150ms ease,
    transform 150ms ease;
}


.service-area-hero
.wsf-form
.wsf-button-primary:hover {
  opacity: 0.85;
}


.service-area-hero
.wsf-form
.wsf-button-primary:active {
  transform:
    translateY(1px);
}


/* =========================================================
   VALIDATION
   ========================================================= */

.service-area-hero .wsf-invalid-feedback {
  margin-top: 5px;

  color: #fff;

  font-size: 12px;
  line-height: 1.3;
}


/* =========================================================
   HIDE RECAPTCHA V3 FIELD SPACE
   ========================================================= */

.service-area-hero
#wsf-1-field-wrapper-56 {
  display:
    none !important;
}


/* =========================================================
   GOOGLE RATING
   ========================================================= */

.service-area-hero
.rsp-sa-hero-form__rating {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;

  gap:
    8px
    16px;

  margin-top: 28px;
  padding-top: 20px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );
}


.service-area-hero
.rsp-sa-hero-form__rating-main {
  display: flex;
  align-items: center;

  gap: 8px;

  flex: 0 0 auto;
}


.service-area-hero
.rsp-sa-hero-form__google {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
}


.service-area-hero
.rsp-sa-hero-form__stars {
  position: relative;

  display: inline-block;

  width: max-content;

  font-size: 16px;
  line-height: 1;

  letter-spacing: 1px;
}


.service-area-hero
.rsp-sa-hero-form__stars-base {
  color:
    rgba(
      255,
      255,
      255,
      0.22
    );
}


.service-area-hero
.rsp-sa-hero-form__stars-fill {
  position: absolute;

  top: 0;
  left: 0;

  display: block;

  overflow: hidden;

  white-space: nowrap;

  color: #f6b400;
}


.service-area-hero
.rsp-sa-hero-form__rating-number {
  color: #fff;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}


.service-area-hero
.rsp-sa-hero-form__rating-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}


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

@media (max-width: 1023px) {

  .service-area-hero::before {
    background:
      rgba(
        0,
        0,
        0,
        0.84
      );
  }


  .service-area-hero
  > .brxe-container {
    grid-template-columns:
      1fr;

    gap: 48px;

    padding-block: 64px;
  }


  .service-area-hero
  .hero-title {
    width: 100%;
  }


  .service-area-hero
  > .brxe-container
  > .brxe-shortcode:nth-child(2) {
    justify-self: stretch;

    max-width: 100%;
  }

}


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

@media (max-width: 767px) {

  .service-area-hero
  > .brxe-container {
    padding:
      64px
      20px;
  }


  .service-area-hero
  .hero-phone-number {
    font-size: 26px;
  }


  .service-area-hero
  .hero-benefits {
    column-gap: 16px;
  }


  .service-area-hero
  > .brxe-container
  > .brxe-shortcode:nth-child(2) {
    padding: 28px;
  }

}


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

@media (max-width: 639px) {

  .service-area-hero
  .wsf-grid.wsf-fields {
    grid-template-columns:
      1fr;

    row-gap: 12px;
  }


  .service-area-hero
  #wsf-1-field-wrapper-1,

  .service-area-hero
  #wsf-1-field-wrapper-4,

  .service-area-hero
  #wsf-1-field-wrapper-3,

  .service-area-hero
  #wsf-1-field-wrapper-9,

  .service-area-hero
  #wsf-1-field-wrapper-8,

  .service-area-hero
  #wsf-1-field-wrapper-10,

  .service-area-hero
  #wsf-1-field-wrapper-12,

  .service-area-hero
  #wsf-1-field-wrapper-13,

  .service-area-hero
  #wsf-1-field-wrapper-7 {
    grid-column: 1;
  }


  .service-area-hero
  .rsp-sa-hero-form__rating {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;

    margin-top: 24px;
  }


  .service-area-hero
  .rsp-sa-hero-form__rating-meta {
    font-size: 13px;
  }

}