.renova-why {
  --why-bg: #fff;
  --why-card: #fff;
  --why-ink: #0a2633;
  --why-muted: #52616a;
  --why-accent: #f4c34d;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: var(--why-ink);
  background: var(--why-bg);
  font-family: "Manrope", "Avenir Next", "Helvetica Neue", sans-serif;
}

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

.renova-why::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -280px;
  left: -240px;
  width: 620px;
  height: 620px;
  border: 1px solid color-mix(in srgb, var(--why-ink) 9%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 90px color-mix(in srgb, var(--why-ink) 2%, transparent);
  pointer-events: none;
}

.renova-why__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 1500px);
  margin: 0 auto;
  padding: 120px 56px;
}

.renova-why__visual {
  position: relative;
  z-index: 1;
  width: 55%;
  height: 590px;
  flex: 0 0 55%;
  margin: 0;
  overflow: hidden;
  border-radius: 36px;
  background: #d8d8d2;
  box-shadow: 0 30px 80px rgba(10, 38, 51, .12);
}

.renova-why__visual img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(.86) contrast(1.04);
  transform: none;
}

.renova-why__image-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 27, 38, .54) 100%);
}

.renova-why__visual figcaption {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 28px;
  color: rgba(255, 255, 255, .84);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .2em;
}

.renova-why__visual figcaption span {
  color: var(--why-accent);
}

.renova-why__card {
  position: relative;
  z-index: 2;
  width: 50%;
  margin-left: -5%;
  padding: 50px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--why-ink) 9%, transparent);
  border-radius: 32px;
  background: var(--why-card);
  box-shadow: 0 32px 90px rgba(10, 38, 51, .16);
}

.renova-why__card::after {
  content: "";
  position: absolute;
  right: -58px;
  bottom: -58px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--why-accent);
  opacity: .9;
}

.renova-why__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #866a18;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.renova-why__eyebrow span {
  width: 30px;
  height: 2px;
  background: var(--why-accent);
}

.renova-why__heading {
  margin: 0;
  color: var(--why-ink);
  font-family: "DM Sans", "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: clamp(41px, 3.1vw, 57px);
  font-weight: 760;
  line-height: .96;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.renova-why__description {
  position: relative;
  max-width: 600px;
  margin: 30px 0 0;
  padding-top: 27px;
  color: var(--why-muted);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  letter-spacing: -.018em;
  text-wrap: pretty;
}

.renova-why__description::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 3px;
  background: var(--why-accent);
}

@media (max-width: 1024px) {
  .renova-why__inner {
    padding: 96px 36px !important;
  }

  .renova-why__visual {
    width: 55%;
    height: 520px !important;
    flex-basis: 55%;
    border-radius: 28px !important;
  }

  .renova-why__card {
    width: 54%;
    margin-left: -9%;
    padding: 40px !important;
    border-radius: 28px !important;
  }

  .renova-why__description {
    font-size: 17px;
  }
}

@media (max-width: 900px) {
  .renova-why::before {
    top: -320px;
    left: -380px;
  }

  .renova-why__inner {
    display: block;
    padding: 82px 22px 90px !important;
  }

  .renova-why__visual {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border-radius: 24px !important;
  }

  .renova-why__visual img {
    object-position: 50% 42%;
  }

  .renova-why__visual figcaption {
    right: 18px;
    bottom: 18px;
    font-size: 8px;
  }

  .renova-why__card {
    width: 100%;
    margin: -46px 0 0;
    padding: 34px 24px 40px !important;
    border-radius: 24px !important;
  }

  .renova-why__eyebrow {
    margin-bottom: 20px;
    font-size: 10px;
  }

  .renova-why__heading {
    font-size: clamp(31px, 8.2vw, 54px);
    line-height: .97;
  }

  .renova-why__description {
    margin-top: 24px;
    padding-top: 22px;
    font-size: 16px;
    line-height: 1.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .renova-why *,
  .renova-why *::before,
  .renova-why *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}