/* Open service-area layout */
.areas {
  background: linear-gradient(135deg, #f7fbfd, #e9f6fb);
  grid-template-columns: .8fr 1.2fr;
  gap: 7vw;
  border-left: 10px solid var(--cyan);
}

.areas h2 span { color: var(--blue); }

.areas-reach {
  border-top: 1px solid #b8dce9;
  padding-top: 32px;
}

.areas-audience {
  margin: 0 0 34px;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.areas-states {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
  margin: 0;
  padding-bottom: 32px;
  border-bottom: 1px solid #b8dce9;
  color: var(--blue);
  font: 700 clamp(2rem, 3.5vw, 4rem)/1 'Oswald', sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
}

.areas-states strong { flex: 0 0 auto; }

.areas-states b {
  color: var(--cyan);
  font: 300 clamp(2.2rem, 3vw, 3.5rem)/1 'DM Sans', sans-serif;
}

.areas-note {
  margin: 26px 0 0;
  padding-left: 28px;
  position: relative;
  color: var(--muted);
  font-size: 1.05rem;
}

.areas-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: .4em;
  width: 10px;
  height: 10px;
  background: var(--cyan);
  border-radius: 50%;
}

@media (max-width: 1000px) {
  .areas { grid-template-columns: 1fr; }
  .areas-states { max-width: 850px; }
}

@media (max-width: 650px) {
  .areas { border-left-width: 6px; }
  .areas-reach { padding-top: 24px; }
  .areas-audience { line-height: 1.5; margin-bottom: 26px; }
  .areas-states {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    white-space: normal;
    padding-bottom: 26px;
  }
  .areas-states strong:last-child { text-align: left; }
  .areas-states b { display: none; }
  .trust span:nth-of-type(3) { display: flex; }
  .trust span:nth-of-type(4) { display: none; }
}

.trust { flex-wrap: wrap; }
.trust span:nth-of-type(2) { max-width: 240px; }