.service-area {
  padding: clamp(80px, 9vw, 120px) max(24px, 9vw);
  background: #e8e2d4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: center;
}

.service-area h2 {
  font-size: clamp(2.5rem, 5vw, 4.9rem);
  margin: 18px 0 24px;
}

.service-area > div > p {
  max-width: 590px;
  color: var(--muted);
}

.area-card {
  background: var(--paper);
  border: 1px solid rgba(16, 36, 47, .12);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 22px 55px rgba(35, 39, 35, .09);
}

.area-card strong {
  font-family: "Playfair Display", serif;
  font-size: 1.65rem;
}

.area-card p {
  color: var(--ink) !important;
  font-size: 1.05rem;
}

.area-card small {
  display: block;
  color: var(--muted);
  margin: 20px 0;
}

.area-card a {
  display: inline-flex;
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 4px;
}

.service-area + .quote { margin-top: 70px; }

.services { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .service-area { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .services { grid-template-columns: 1fr; }
  .service-area { padding: 70px 24px; }
  .service-area + .quote { margin-top: 40px; }
}