/* ==========================================================================
   MAPS TOWING — SINGLE AREA PAGE (Glendale template)
   ========================================================================== */

/* --- Hero --- */
.area-hero {
  position: relative;
  background: var(--graphite-850);
  height: 580px;
  padding: 44px var(--side-pad) 52px;
  overflow: hidden;
}

.area-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.area-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 112px;
  width: 750px;
  max-width: 100%;
}

.area-hero__bottom {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.area-hero__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.area-hero__title {
  font-size: 72px;
  font-weight: 700;
  line-height: 78px;
  color: var(--graphite-50);
  text-shadow: 0 4px 32px rgba(255, 56, 0, 0.12), 0 4px 40px rgba(0, 0, 0, 0.32);
}

.area-hero__title span {
  color: var(--primary-2);
}

.area-hero__sub {
  font-size: 16px;
  line-height: 22px;
  color: var(--graphite-250);
  max-width: 700px;
}

.area-hero__ctas {
  display: flex;
  gap: 12px;
}

.area-hero__media {
  flex: none;
  width: 592px;
  height: 364px;
}

.area-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-16);
  background: var(--graphite-50);
}

/* --- Dispatch response --- */
.dispatch {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 72px var(--side-pad) 144px;
}

.dispatch__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dispatch__head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.dispatch__title {
  font-size: 44px;
  font-weight: 600;
  line-height: 50px;
  color: var(--graphite-900);
  width: 650px;
  max-width: 100%;
}

.dispatch__sub {
  font-size: 16px;
  line-height: 22px;
  color: var(--graphite-700);
  width: 650px;
  max-width: 100%;
}

.dispatch__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dispatch__cards {
  display: grid;
  grid-template-columns: repeat(2, 688px);
  gap: 16px;
}

.dist-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--graphite-50);
  border: 1px solid var(--primary-1);
  border-radius: var(--r-16);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.dist-card__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dist-card__hub {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dist-card__hub-text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-1);
}

.dist-card__hub-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary-1);
}

.dist-card__addr {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dist-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: var(--graphite-850);
}

.dist-card__sub {
  font-size: 16px;
  line-height: 22px;
  color: var(--graphite-700);
}

.dist-card__line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--graphite-150);
}

.dist-card__stats {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.dist-card__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dist-card__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--graphite-550);
}

.dist-card__value {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: var(--primary-1);
}

.dispatch__note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--graphite-100);
  border-radius: var(--r-16);
  max-width: 650px;
}

.dispatch__note p {
  font-size: 16px;
  font-style: italic;
  line-height: 22px;
  color: var(--graphite-450);
}

.icn-info {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.icn-info__circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.icn-info__stem {
  position: absolute;
  inset: 41.67% 41.67% 20.83%;
  width: auto;
  height: auto;
}

.icn-info__dot {
  position: absolute;
  inset: 20.83% 43.75% 66.67%;
  width: auto;
  height: auto;
}

/* --- Local coverage (situations reuse) --- */
.situations--area .situations__head {
  max-width: 650px;
}

.situations--area .sec-sub {
  color: var(--graphite-150);
}

/* --- Why us --- */
.awhy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 144px var(--side-pad) 72px;
}

.awhy__media {
  position: relative;
  flex: none;
  width: 650px;
  height: 426px;
}

.awhy__img-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 426px;
  object-fit: cover;
  border-radius: var(--r-16);
}

.awhy__img-small {
  position: absolute;
  left: 370px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--r-16);
  border: 6px solid var(--graphite-50);
  background: var(--graphite-50);
}

.awhy__content {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.awhy__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.awhy__head-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.awhy__title {
  font-size: 44px;
  font-weight: 600;
  line-height: 50px;
  color: var(--graphite-900);
  max-width: 650px;
}

.awhy__sub {
  font-size: 16px;
  line-height: 22px;
  color: var(--graphite-700);
  max-width: 650px;
}

.awhy__points {
  display: flex;
  gap: 36px;
}

.awhy__points-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.awhy-point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  width: 322px;
  background: var(--graphite-50);
  border: 1px solid var(--graphite-150);
  border-radius: var(--r-16);
}

.awhy-point__text {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--graphite-900);
}

/* --- Services in area --- */
.area-svc {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 72px var(--side-pad) 144px;
}

.area-svc__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.area-svc__head .sec-head {
  width: 650px;
  max-width: 100%;
}

.area-svc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 1023.98px) {
  .area-hero {
    height: auto;
    min-height: 812px;
    padding: 96px var(--side-pad-mobile) 40px;
  }

  .area-hero__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .area-hero__text {
    width: 100%;
    padding-top: 0;
  }

  .area-hero__bottom {
    gap: 20px;
  }

  .area-hero__title {
    font-size: 44px;
    line-height: 50px;
    font-weight: 600;
  }

  .area-hero__ctas {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .area-hero__ctas .btn {
    width: 100%;
    height: 48px;
    padding: 12px 20px;
  }

  .area-hero__media {
    width: 100%;
    height: 248px;
    margin-top: 20px;
  }

  .dispatch {
    gap: 24px;
    padding: 72px var(--side-pad-mobile) 144px;
  }

  .dispatch__head-row {
    flex-direction: column;
    gap: 8px;
  }

  .dispatch__title {
    font-size: 32px;
    line-height: 38px;
    width: 100%;
  }

  .dispatch__sub {
    width: 100%;
  }

  .dispatch__cards {
    grid-template-columns: 1fr;
  }

  .awhy {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 144px var(--side-pad-mobile) 72px;
  }

  .awhy__media {
    width: 100%;
    height: 305px;
  }

  .awhy__img-main {
    width: 100%;
    height: 240px;
  }

  .awhy__img-small {
    left: 50%;
    top: 145px;
    transform: translateX(-50%);
    width: 220px;
    height: 160px;
    border-width: 4px;
  }

  .awhy__content {
    gap: 24px;
  }

  .awhy__title {
    font-size: 32px;
    line-height: 38px;
  }

  .awhy__points {
    flex-direction: column;
    gap: 8px;
  }

  .awhy__points-col {
    gap: 8px;
  }

  .awhy-point {
    width: 100%;
  }

  .area-svc {
    gap: 24px;
    padding: 72px var(--side-pad-mobile) 144px;
  }

  .area-svc__head {
    flex-direction: column;
    align-items: stretch;
  }

  .area-svc__grid {
    grid-template-columns: 1fr;
  }
}