/* Styles owned by .elinwest-block--contact-banner. */
.elinwest-block--contact-banner.contact-banner {
  position: relative;
  isolation: isolate;
  min-height: clamp(390px, 25vw, 500px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.46fr);
  align-items: stretch;
  gap: clamp(44px, 6vw, 120px);
  margin-top: clamp(68px, 7vw, 128px);
  padding: clamp(48px, 4.8vw, 88px);
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      var(--surface) 0%,
      var(--surface) 38%,
      rgb(241 242 243 / 97%) 50%,
      rgb(241 242 243 / 78%) 64%,
      rgb(241 242 243 / 20%) 100%
    ),
    url("../../assets/images/hero-building.jpg") 70% 56% / cover no-repeat;
  border-radius: var(--radius-card);
}

.elinwest-block--contact-banner.contact-banner--feature {
  position: relative;
  isolation: isolate;
  min-height: clamp(390px, 25vw, 500px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.46fr);
  align-items: stretch;
  gap: clamp(44px, 6vw, 120px);
  margin-top: clamp(68px, 7vw, 128px);
  padding: clamp(48px, 4.8vw, 88px);
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      var(--surface) 0%,
      var(--surface) 38%,
      rgb(241 242 243 / 97%) 50%,
      rgb(241 242 243 / 78%) 64%,
      rgb(241 242 243 / 20%) 100%
    ),
    url("../../assets/images/hero-building.jpg") 70% 56% / cover no-repeat;
  border-radius: var(--radius-card);
}

.elinwest-block--contact-banner .contact-banner__copy {
  position: relative;
  z-index: 1;
  align-self: center;
  min-width: 0;
}

.elinwest-block--contact-banner.contact-banner--feature .contact-banner__copy {
  position: relative;
  z-index: 1;
  align-self: center;
  min-width: 0;
}

.elinwest-block--contact-banner.contact-banner h2,
.elinwest-block--contact-banner.contact-banner--feature h2 {
  max-width: 550px;
  margin: 0 0 var(--headline-gap);
  font-size: var(--display-cta);
  line-height: 0.92;
  letter-spacing: var(--display-tracking);
}

.elinwest-block--contact-banner.contact-banner h2 > span,
.elinwest-block--contact-banner.contact-banner--feature h2 > span {
  display: block;
}

.elinwest-block--contact-banner.contact-banner p {
  margin: 0;
  color: var(--copy-secondary);
  font-size: clamp(17px, 1.15vw, 21px);
  line-height: 1.55;
}

.elinwest-block--contact-banner.contact-banner--feature p {
  margin: 0;
  color: var(--copy-secondary);
  font-size: clamp(17px, 1.15vw, 21px);
  line-height: 1.55;
}

.elinwest-block--contact-banner .contact-banner__panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(142px, 1fr) auto;
  align-self: stretch;
  overflow: hidden;
  color: var(--card);
  background: rgb(23 24 26 / 96%);
  border-radius: calc(var(--radius-card) - 2px);
  box-shadow: 0 22px 58px rgb(30 34 40 / 16%);
}

.elinwest-block--contact-banner.contact-banner--feature .contact-banner__panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(142px, 1fr) auto;
  align-self: stretch;
  overflow: hidden;
  color: var(--card);
  background: rgb(23 24 26 / 96%);
  border-radius: calc(var(--radius-card) - 2px);
  box-shadow: 0 22px 58px rgb(30 34 40 / 16%);
}

.elinwest-block--contact-banner .contact-banner__primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 0;
  padding: clamp(30px, 3vw, 48px);
  font-family: var(--font-display);
  font-size: clamp(25px, 1.75vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: background-color 500ms var(--ease-out);
}

.elinwest-block--contact-banner.contact-banner--feature
  .contact-banner__primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 0;
  padding: clamp(30px, 3vw, 48px);
  font-family: var(--font-display);
  font-size: clamp(25px, 1.75vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: background-color 500ms var(--ease-out);
}

.elinwest-block--contact-banner .contact-banner__primary:hover {
  background: rgb(255 255 255 / 5.5%);
}

.elinwest-block--contact-banner .contact-banner__primary:focus-visible {
  background: rgb(255 255 255 / 5.5%);
}

.elinwest-block--contact-banner.contact-banner--feature
  .contact-banner__primary:hover {
  background: rgb(255 255 255 / 5.5%);
}

.elinwest-block--contact-banner.contact-banner--feature
  .contact-banner__primary:focus-visible {
  background: rgb(255 255 255 / 5.5%);
}

.elinwest-block--contact-banner .contact-banner__action-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--card);
  background: var(--red);
  transition:
    transform 500ms var(--ease-out),
    background-color 500ms var(--ease-out);
}

.elinwest-block--contact-banner.contact-banner--feature
  .contact-banner__action-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--card);
  background: var(--red);
  transition:
    transform 500ms var(--ease-out),
    background-color 500ms var(--ease-out);
}

.elinwest-block--contact-banner .contact-banner__action-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.8;
}

.elinwest-block--contact-banner.contact-banner--feature
  .contact-banner__action-icon
  svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.8;
}

.elinwest-block--contact-banner
  .contact-banner__primary:hover
  .contact-banner__action-icon {
  transform: translate(3px, -3px) scale(1.04);
  background: var(--red-dark);
}

.elinwest-block--contact-banner
  .contact-banner__primary:focus-visible
  .contact-banner__action-icon {
  transform: translate(3px, -3px) scale(1.04);
  background: var(--red-dark);
}

.elinwest-block--contact-banner.contact-banner--feature
  .contact-banner__primary:hover
  .contact-banner__action-icon {
  transform: translate(3px, -3px) scale(1.04);
  background: var(--red-dark);
}

.elinwest-block--contact-banner.contact-banner--feature
  .contact-banner__primary:focus-visible
  .contact-banner__action-icon {
  transform: translate(3px, -3px) scale(1.04);
  background: var(--red-dark);
}

/* stylelint-disable-next-line no-descending-specificity -- Active deliberately follows both hover variants. */
.elinwest-block--contact-banner
  .contact-banner__primary:active
  .contact-banner__action-icon {
  transform: translate(1px, -1px) scale(0.98);
}

.elinwest-block--contact-banner.contact-banner--feature
  .contact-banner__primary:active
  .contact-banner__action-icon {
  transform: translate(1px, -1px) scale(0.98);
}

.elinwest-block--contact-banner.contact-banner address {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}

.elinwest-block--contact-banner.contact-banner--feature address {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}

.elinwest-block--contact-banner.contact-banner address a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px clamp(30px, 3vw, 48px);
  border-top: 1px solid rgb(255 255 255 / 11%);
  color: var(--card);
  transition:
    color 400ms var(--ease-out),
    background-color 400ms var(--ease-out);
}

.elinwest-block--contact-banner.contact-banner--feature address a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px clamp(30px, 3vw, 48px);
  border-top: 1px solid rgb(255 255 255 / 11%);
  color: var(--card);
  transition:
    color 400ms var(--ease-out),
    background-color 400ms var(--ease-out);
}

.elinwest-block--contact-banner.contact-banner address a:hover {
  color: var(--card);
  background: rgb(255 255 255 / 5.5%);
}

.elinwest-block--contact-banner.contact-banner address a:focus-visible {
  color: var(--card);
  background: rgb(255 255 255 / 5.5%);
}

.elinwest-block--contact-banner.contact-banner--feature address a:hover {
  color: var(--card);
  background: rgb(255 255 255 / 5.5%);
}

.elinwest-block--contact-banner.contact-banner--feature
  address
  a:focus-visible {
  color: var(--card);
  background: rgb(255 255 255 / 5.5%);
}

/* stylelint-disable-next-line no-descending-specificity -- Contact and action icons are independent. */
.elinwest-block--contact-banner.contact-banner address svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--red);
  stroke-width: 1.8;
}

/* stylelint-disable-next-line no-descending-specificity -- Feature contact and action icons are independent. */
.elinwest-block--contact-banner.contact-banner--feature address svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--red);
  stroke-width: 1.8;
}

@media (max-width: 1280px) {
  .elinwest-block--contact-banner.contact-banner {
    grid-template-columns: 1fr auto 260px;
    gap: 30px;
  }
}

@media (max-width: 1180px) {
  .elinwest-block--contact-banner.contact-banner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.65fr);
    gap: 36px;
    padding: 48px;
  }

  .elinwest-block--contact-banner.contact-banner--feature {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.65fr);
    gap: 36px;
    padding: 48px;
  }
}

@media (max-width: 860px) {
  .elinwest-block--contact-banner.contact-banner address {
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / -1;
  }

  .elinwest-block--contact-banner.contact-banner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 34px;
    background:
      linear-gradient(
        180deg,
        rgb(241 242 243 / 99%) 0%,
        rgb(241 242 243 / 94%) 48%,
        rgb(241 242 243 / 52%) 100%
      ),
      url("../../assets/images/hero-building.jpg") 68% 56% / cover no-repeat;
  }

  .elinwest-block--contact-banner.contact-banner--feature {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 34px;
    background:
      linear-gradient(
        180deg,
        rgb(241 242 243 / 99%) 0%,
        rgb(241 242 243 / 94%) 48%,
        rgb(241 242 243 / 52%) 100%
      ),
      url("../../assets/images/hero-building.jpg") 68% 56% / cover no-repeat;
  }

  .elinwest-block--contact-banner.contact-banner h2,
  .elinwest-block--contact-banner.contact-banner--feature h2 {
    max-width: none;
  }

  .elinwest-block--contact-banner .contact-banner__panel {
    width: min(100%, 620px);
    grid-template-rows: minmax(128px, auto) auto;
  }

  .elinwest-block--contact-banner.contact-banner--feature
    .contact-banner__panel {
    width: min(100%, 620px);
    grid-template-rows: minmax(128px, auto) auto;
  }

  .elinwest-block--contact-banner.contact-banner address a {
    min-height: 48px;
  }
}

@media (max-width: 560px) {
  .elinwest-block--contact-banner.contact-banner .btn {
    width: 100%;
  }

  .elinwest-block--contact-banner.contact-banner {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 64px;
    padding: 34px 22px 22px;
  }

  .elinwest-block--contact-banner.contact-banner--feature {
    gap: 28px;
    margin-top: 64px;
    padding: 34px 22px 22px;
  }

  .elinwest-block--contact-banner.contact-banner p {
    font-size: 16px;
  }

  .elinwest-block--contact-banner.contact-banner--feature p {
    font-size: 16px;
  }

  .elinwest-block--contact-banner .contact-banner__primary {
    min-height: 112px;
    padding: 26px 22px;
    font-size: 25px;
  }

  .elinwest-block--contact-banner.contact-banner--feature
    .contact-banner__primary {
    min-height: 112px;
    padding: 26px 22px;
    font-size: 25px;
  }

  .elinwest-block--contact-banner .contact-banner__action-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .elinwest-block--contact-banner.contact-banner--feature
    .contact-banner__action-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .elinwest-block--contact-banner.contact-banner address {
    grid-template-columns: 1fr;
    grid-column: auto;
    font-size: 16px;
  }

  .elinwest-block--contact-banner.contact-banner--feature address {
    font-size: 16px;
  }

  .elinwest-block--contact-banner.contact-banner address a {
    padding: 18px 22px;
  }

  .elinwest-block--contact-banner.contact-banner--feature address a {
    padding: 18px 22px;
  }
}