/* Why Choose Us — remake to match layered reference */

.why-choose {
  background-color: #f5f5f1;
  background-image: url("../img/why-choose-us.jpg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  padding: 110px var(--gcs-gutter, 15px);
}

.why-choose *,
.why-choose *::before,
.why-choose *::after {
  box-sizing: border-box;
}

.why-choose__inner {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  margin: 0 auto;
  max-width: var(--gcs-max, 1260px);
  position: relative;
  width: 100%;
}

.why-choose__card {
  background-color: #ffffff;
  border-radius: 0;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.07);
  margin: 48px -108px 48px 0;
  max-width: 560px;
  padding: 56px 54px;
  position: relative;
  width: 46%;
  z-index: 2;
}

.why-choose__eyebrow {
  color: var(--gcs-orange, #ffa722);
  font-family: var(--gcs-font, "Roboto", sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin: 0;
  padding: 0 0 18px;
  text-transform: none;
}

.why-choose__title {
  color: #000000;
  font-family: var(--gcs-font-display, "Heebo", sans-serif);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  padding: 0 0 24px;
  text-align: left;
  text-transform: none;
}

.why-choose__body {
  color: var(--gcs-gray, #6a6a6a);
  font-family: var(--gcs-font, "Roboto", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
  margin: 0;
  max-width: 440px;
  padding: 0 0 18px;
}

.why-choose__help {
  padding: 18px 0 0;
}

.why-choose__help-label {
  color: #7b7b7b;
  font-family: var(--gcs-font, "Roboto", sans-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin: 0 0 6px;
  padding: 0;
}

.why-choose__phone {
  color: #ffa722;
  font-family: var(--gcs-font-display, "Heebo", sans-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.why-choose__phone a {
  color: var(--gcs-orange, #ffa722);
  text-decoration: none;
}

.why-choose__phone a:hover,
.why-choose__phone a:focus {
  color: var(--gcs-orange-hover, #e8940f);
}

.why-choose__media {
  background-image: url("../img/demolition.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 1 1 auto;
  min-height: 560px;
  position: relative;
  width: 54%;
  z-index: 1;
}

@media (max-width: 1024px) {
  .why-choose {
    padding: var(--gcs-section-y-md, 70px) var(--gcs-gutter, 15px);
  }

  .why-choose__card {
    margin: 36px -72px 36px 0;
    max-width: 500px;
    padding: 42px 36px;
    width: 48%;
  }

  .why-choose__title {
    font-size: 38px;
  }

  .why-choose__media {
    min-height: 480px;
    width: 52%;
  }

  .why-choose__help {
    padding-top: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .why-choose__inner {
    align-items: center;
  }

  .why-choose__card {
    margin: 24px -48px 24px 0;
    padding: 36px 32px;
    width: 52%;
  }

  .why-choose__media {
    min-height: 420px;
    width: 48%;
  }
}

@media (max-width: 767px) {
  .why-choose {
    margin-top: 0;
    padding: var(--gcs-section-y-sm, 56px) var(--gcs-gutter, 15px);
  }

  .why-choose__inner {
    align-items: stretch;
    flex-direction: column;
  }

  .why-choose__card {
    margin: -28px 0 0;
    max-width: none;
    order: 2;
    padding: 28px 20px;
    width: 100%;
  }

  .why-choose__title {
    font-size: 28px;
    line-height: 1.15;
  }

  .why-choose__body {
    font-size: 15px;
    line-height: 1.7;
    max-width: none;
    padding: 0 0 12px;
  }

  .why-choose__phone {
    font-size: 26px;
  }

  .why-choose__help {
    padding-top: 14px;
  }

  .why-choose__media {
    min-height: 220px;
    order: 1;
    width: 100%;
  }
}