/* ==========================================================================
   Local Specialists — map CTA banner (after service-areas)
   ========================================================================== */

.local-specialists {
  --ls-wrap-w: 1440px;
  --ls-card-h: 520px;
  --ls-radius: 24px;
  --ls-blue: #0052b4;
  --ls-van-w: 466px;
  --ls-van-h: 193px;
  --ls-van-frame-left: 164px;
  --ls-van-top: 440px;
  position: relative;
  z-index: 2;
  padding: 56px 18px calc(56px + (var(--ls-van-h) + var(--ls-van-top) - var(--ls-card-h)));
  background: #fff;
  overflow: visible;
}

.local-specialists__wrap {
  position: relative;
  width: 100%;
  max-width: var(--ls-wrap-w);
  margin: 0 auto;
}

.local-specialists__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--ls-card-h);
  border-radius: var(--ls-radius);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(11, 27, 52, .14);
}

.local-specialists__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 48px 52px 48px 56px;
  background: var(--ls-blue);
  color: #fff;
}

.local-specialists__title {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.local-specialists__title-line {
  display: block;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.local-specialists__text {
  margin: 0 0 28px;
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .94);
}

.local-specialists__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.local-specialists__btn {
  border-radius: 50px;
  padding: 14px 26px;
  font-size: .95rem;
  box-shadow: 0 2px 10px rgba(11, 27, 52, .12);
}

.local-specialists__acts .btn-yellow {
  background: #ffb81c;
  color: var(--navy);
}

.local-specialists__acts .btn-white {
  background: #fff;
  color: var(--navy);
}

.local-specialists__map {
  position: relative;
  min-height: var(--ls-card-h);
  background: #e8edf5;
}

.local-specialists__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.local-specialists__van {
  position: absolute;
  top: var(--ls-van-top);
  left: calc(var(--ls-van-frame-left) - max(18px, (100vw - min(100vw, var(--ls-wrap-w))) / 2) - 18px);
  width: var(--ls-van-w);
  height: var(--ls-van-h);
  margin: 0;
  line-height: 0;
  z-index: 5;
  pointer-events: none;
}

.local-specialists__van img {
  width: var(--ls-van-w);
  height: var(--ls-van-h);
  max-width: none;
  object-fit: contain;
  object-position: bottom left;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(11, 27, 52, .22));
}

@media (max-width: 1100px) {
  .local-specialists {
    --ls-card-h: 480px;
    --ls-van-w: 400px;
    --ls-van-h: calc(var(--ls-van-w) * 193 / 466);
    --ls-van-top: 405px;
    --ls-van-frame-left: 120px;
    padding-bottom: calc(48px + (var(--ls-van-h) + var(--ls-van-top) - var(--ls-card-h)));
  }
  .local-specialists__content {
    padding: 40px 36px 40px 40px;
  }
}

@media (max-width: 900px) {
  .local-specialists {
    --ls-card-h: auto;
    --ls-van-w: 360px;
    --ls-van-h: calc(var(--ls-van-w) * 193 / 466);
    --ls-van-top: auto;
    padding-top: 40px;
    padding-bottom: calc(40px + var(--ls-van-h) * .35);
  }
  .local-specialists__card {
    grid-template-columns: 1fr;
  }
  .local-specialists__content {
    padding: 36px 28px 32px;
    text-align: center;
    align-items: center;
  }
  .local-specialists__text {
    margin-left: auto;
    margin-right: auto;
  }
  .local-specialists__acts {
    justify-content: center;
  }
  .local-specialists__map {
    min-height: 320px;
  }
  .local-specialists__van {
    top: auto;
    bottom: calc(-1 * var(--ls-van-h) * .35);
    left: 50%;
    transform: translateX(-50%);
  }
  .local-specialists__van img {
    object-position: bottom center;
  }
}

@media (max-width: 600px) {
  .local-specialists {
    --ls-van-w: 300px;
    --ls-van-h: calc(var(--ls-van-w) * 193 / 466);
    padding-left: 14px;
    padding-right: 14px;
  }
  .local-specialists__map {
    min-height: 260px;
  }
  .local-specialists__acts {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  .local-specialists__acts .btn {
    width: 100%;
  }
}